diff --git a/public/index.html b/public/index.html index 83c7c4f3..e3bf599e 100644 --- a/public/index.html +++ b/public/index.html @@ -38,12 +38,12 @@ let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize' recalc = function () { var clientWidth = docEl.clientWidth; - console.log("clientWidth",clientWidth) + // console.log("clientWidth",clientWidth) if (!clientWidth) return; if (clientWidth < 400) { clientWidth = 400; } - docEl.style.fontSize = 20 * (clientWidth / 700) + 'px'; + docEl.style.fontSize = 18 * (clientWidth / 650) + 'px'; }; if (!doc.addEventListener) return; var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); @@ -53,7 +53,7 @@ win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); } - console.log("isMobile",isMobile) + // console.log("isMobile",isMobile) })(document, window); diff --git a/src/views/kpi/components/circleChar.vue b/src/views/kpi/components/circleChar.vue index d7650c3f..e3757769 100644 --- a/src/views/kpi/components/circleChar.vue +++ b/src/views/kpi/components/circleChar.vue @@ -16,7 +16,7 @@ export default { mounted() { setTimeout(()=>{ this.drawHandle(); - },100) + },1000) }, methods:{ handle(){ diff --git a/src/views/kpi/kpiIndex.vue b/src/views/kpi/kpiIndex.vue index 3e3c730c..d5c826a7 100644 --- a/src/views/kpi/kpiIndex.vue +++ b/src/views/kpi/kpiIndex.vue @@ -1,49 +1,59 @@ @@ -238,16 +158,15 @@ import dayjs from "dayjs"; import {getKpiDetailsData,getStatisticsKpiByMonth,getStatisticsKpi,getDriverStatisticsKpi} from "@/api/kpi.js" import {myMixins} from "@/utils/myMixins" import CircleChar from "@/views/kpi/components/circleChar.vue"; -import CommonTable from "@/views/kpi/components/common-table.vue"; import NoFitTable from "@/views/kpi/components/noFit-table.vue"; export default { name: "kpiIndex", - components: { CircleChar,CommonTable,NoFitTable }, + components: { CircleChar,NoFitTable }, computed: {}, mixins: [myMixins], data() { return { - active: 2, + active: 0, activeIndex: 0, tabArr: [ {name: '总览'}, {name: '月/总'}, {name: '日/总'}, {name: '月/师傅'}, {name: '日/师傅'}, {name: '拒单明细'}, @@ -258,15 +177,22 @@ export default { startTime:'', endTime:'', indexData:{}, - dateArr:[], - dateKeyArr:[], xAxisArr:[], detailList:[], labelList:[], loading:false, + v1:[], + v2:[], + v3:[], + v4:[], + // tableData:[], + isMobile: false, + supplierName: '', + isZd:'', } }, async mounted() { + this.checkMobile(); await this.getDateArr(); await this.getData(); if(this.active===1 && this.activeIndex===0){ @@ -276,11 +202,27 @@ export default { } }, created() { - + this.checkMobile(); + // 获取当前 URL + const urlParams = new URLSearchParams(window.location.search); + this.isZd=urlParams?.get('isZd') || '' }, async activated() { }, methods: { + searchHandle(){//web端服务商搜索操作 + + }, + async clickJumpHandle(type){ + this.loading=true + this.active=type; + await this.onClick(); + }, + checkMobile() { + const userAgent = navigator.userAgent || navigator.vendor || window.opera; + this.isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent); + // console.log("his.isMobile",this.isMobile) + }, onClick() { this.activeIndex=0; this.detailList=[]; @@ -307,8 +249,6 @@ export default { // 获取时间区间的数组 async getDateArr() { await this.initDate() - /*this.dateArr = []; - this.dateKeyArr = [];*/ this.xAxisArr = []; let startTime = new Date(this.startTime).getTime(); let endTime = new Date(this.endTime).getTime(); @@ -316,92 +256,98 @@ export default { let tempTime; do { tempTime = startTime + i * (24*3600*1000); - // this.dateArr.push(dayjs(tempTime).format('YYYY-MM-DD')); - this.xAxisArr.push(dayjs(tempTime).format('DD')); - // this.dateKeyArr.push(dayjs(tempTime).format('YYYY-MM-DD 00:00:00')); + // this.xAxisArr.push(dayjs(tempTime).format('DD')); i++; - // console.log(" this.dateArr", this.dateArr) - - // console.log(" this.dateKeyArr", this.dateKeyArr) - } while ( tempTime < endTime) - // console.log(" this.xAxisArr", this.xAxisArr) }, drawLine() { // 基于准备好的dom，初始化echarts实例 let myChart = echarts.init(document.getElementById('chartWrap')) let option; option = { title: { - text: '接单情况', - left: 10, - textStyle: { - fontSize: 15 + text: '接单时效', + textStyle:{ + fontSize:12 }, }, + legend: { + textStyle:{ + fontSize:8 + }, + right:10 + }, xAxis: { type: 'category', boundaryGap: false, - data: ['1月', '2月', '3月', '4月', '本月'] - }, - /* yAxis: [{ - name: '工时(小时)', - type: 'value' - },{ - name: '通话(小时)', - type: 'value' - }],*/ - yAxis: { - type: 'value', - axisLabel: { - formatter: '{value}' - }, - axisPointer: { - snap: true - } - }, - visualMap: { - show: false + data: this.xAxisArr.reverse(), }, + yAxis: [ + {type: 'value'}, + {type: 'value'}, + ], series: [ { - name: '派遣案件量', - type: 'line', + name:'派遣案件量', + type:"line", + data:this.v1, + yAxisIndex: 0, smooth: true, - // prettier-ignore - // 折线的数据 - data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400], markArea: { itemStyle: { color: 'rgba(255, 173, 177, 0.4)' }, - // 柱形图数据 data: [ [ { - name: 'zhouzhou ', - xAxis: '1月' + name: 'value1', + xAxis: '07:30' }, { - xAxis: '2月' + xAxis: '10:00' } ], [ { name: 'Evening Peak', - xAxis: '4月' + xAxis: '17:30' }, { - xAxis: '本月' + xAxis: '21:15' } ] ] } }, + { + name: '拒单率', + type: 'line', + smooth: true, + data:this.v2, + yAxisIndex: 1, + }, + { + name:'超时率', + type:"line", + data:this.v3, + yAxisIndex: 1, + smooth: true + }, + { + name:'客户取消率', + type:"line", + data:this.v4, + yAxisIndex: 1, + smooth: true + }, ] }; option && myChart.setOption(option, true); }, async getData(){ + this.v1=[] + this.v2=[] + this.v3=[] + this.v4=[] try { this.loading=true if (this.active === 0) { @@ -414,60 +360,111 @@ export default { this.indexData=res.data; } else if ([1, 2].includes(this.active)) { let res= await getStatisticsKpi({ - startTime: this.startTime + ' 00:00:00', + startTime: '2024-05-01 00:00:00',//this.startTime + ' 00:00:00', endTime: this.endTime + ' 23:59:59', statisticsType: this.active===1 ? 1 : 2, supplierId:1128, }) this.detailList = res.data?.map(item => { let formatVal = dayjs(item.statisticsDate).format('DD'); - return {...item,date: formatVal }; + let formatVal1 = dayjs(item.statisticsDate).format('MM'); + return {...item,date: formatVal ,month: formatVal1}; }); this.loading=false - if (this.activeIndex === 0) {//接单指标 - this.labelList = [ - {label: '日', prop: 'date'}, - {label: '派遣案件量', prop: 'dispatchOrderCount'}, - {label: '承接案件量', prop: 'receiveOrderCount'}, - {label: '完成量', prop: 'finishOrderCount'}, - {label: '拒单量', prop: 'refuseOrderCount'}, - {label: '拒单率', prop: 'refuseOrderRate'}, - {label: '超时接单量', prop: 'timeoutOrderCount'}, - {label: '超时率', prop: 'timeoutOrderRate'}, - {label: '客户取消率', prop: 'cancelrate'}, - ] - }else if(this.activeIndex === 1){ - this.labelList = [ - {label: '日', prop: 'date'}, - {label: '投诉量', prop: 'complainOrderCount'}, - {label: '投诉率', prop: 'complainOrderRate'}, - {label: '客户评价率', prop: 'customerEvaluateRate'}, - {label: '催促率', prop: 'urgeRate'}, - ] - }else if(this.activeIndex === 2){ - this.labelList = [ - {label: '日', prop: 'date'}, - {label: '使用率', prop: 'appRate'}, - {label: '3′联系客户率', prop: 'threeMinutesContactRate'}, - {label: '平安聚合成功率', prop: 'pinganPolymerizationSuccessRate'}, - {label: '中华聚合成功率', prop: 'zhonghuaPolymerizationSuccessRate'}, - {label: '中道聚合成功率', prop: 'zdPolymerizationSuccessRate'}, - {label: '总聚合成功率', prop: 'polymerizationSuccessRate'}, - ] - }else if(this.activeIndex === 3){ - this.labelList = [ - {label: '日', prop: 'date'}, - {label: '接单时效(分)', prop: 'receiving'}, - {label: '3′接单率', prop: 'threeMinutesReceivingRate'}, - {label: '小修到达时效(分)', prop: 'minorArriving'}, - {label: '拖车到达时效(分)', prop: 'trailArriving'}, - {label: '困境到达时效(分)', prop: 'dilemmaArriving'}, - {label: '到达时效(分)', prop: 'arriving'}, - {label: '40′到达率', prop: 'fortyMinutesArrivalRate'}, - {label: '小修聚合成功到达时效(分)', prop: 'minorPolymerizationSuccessArriving'}, - {label: '拖车聚合成功到达时效(分)', prop: 'trailPolymerizationSuccessArriving'}, - {label: '聚合成功到达时效', prop: 'polymerizationSuccessArriving'}, - ] + if(this.active===1){ + if (this.activeIndex === 0) {//接单指标 + this.labelList = [ + {label: '月', prop: 'month'}, + {label: '派遣量', prop: 'dispatchOrderCount'}, + {label: '承接量', prop: 'receiveOrderCount'}, + {label: '完成量', prop: 'finishOrderCount'}, + {label: '拒单量', prop: 'refuseOrderCount'}, + {label: '拒单率', prop: 'refuseOrderRate'}, + {label: '超时接单量', prop: 'timeoutOrderCount'}, + {label: '超时率', prop: 'timeoutOrderRate'}, + {label: '取消率', prop: 'cancelrate'}, + ] + this.detailList?.map(item=>{ + this.xAxisArr.push(item.month) + this.v1.push(item.dispatchOrderCount) + this.v2.push(item.refuseOrderRate) + this.v3.push(item.timeoutOrderRate) + this.v4.push(item.cancelrate) + }) + }else if(this.activeIndex === 1){ + this.labelList = [ + {label: '月', prop: 'month'}, + {label: '投诉量', prop: 'complainOrderCount'}, + {label: '投诉率', prop: 'complainOrderRate'}, + {label:'客户满意度', prop: ''}, + {label: '客户评价率', prop: 'customerEvaluateRate'}, + ] + }else if(this.activeIndex === 2){ + this.labelList = [ + {label: '月', prop: 'month'}, + {label: '使用率', prop: 'appRate'}, + {label: '3′联系客户率', prop: 'threeMinutesContactRate'}, + {label: '平安聚合成功率', prop: 'pinganPolymerizationSuccessRate'}, + {label: '中华聚合成功率', prop: 'zhonghuaPolymerizationSuccessRate'}, + {label: '中道聚合成功率', prop: 'zdPolymerizationSuccessRate'}, + {label: '总聚合成功率', prop: 'polymerizationSuccessRate'}, + ] + }else if(this.activeIndex === 3){ + this.labelList = [ + {label: '月', prop: 'month'}, + {label: '接单时效(分)', prop: 'receiving'}, + {label: '3′接单率', prop: 'threeMinutesReceivingRate'}, + {label: '到达时效(分)', prop: 'arriving'}, + {label: '40′到达率', prop: 'fortyMinutesArrivalRate'}, + {label: '聚合成功到达时效', prop: 'polymerizationSuccessArriving'}, + ] + } + }else{ + if (this.activeIndex === 0) {//接单指标 + this.labelList = [ + {label: '日', prop: 'date'}, + {label: '派遣案件量', prop: 'dispatchOrderCount'}, + {label: '承接案件量', prop: 'receiveOrderCount'}, + {label: '完成量', prop: 'finishOrderCount'}, + {label: '拒单量', prop: 'refuseOrderCount'}, + {label: '拒单率', prop: 'refuseOrderRate'}, + {label: '超时接单量', prop: 'timeoutOrderCount'}, + {label: '超时率', prop: 'timeoutOrderRate'}, + {label: '客户取消率', prop: 'cancelrate'}, + ] + }else if(this.activeIndex === 1){ + this.labelList = [ + {label: '日', prop: 'date'}, + {label: '投诉量', prop: 'complainOrderCount'}, + {label: '投诉率', prop: 'complainOrderRate'}, + {label: '客户评价率', prop: 'customerEvaluateRate'}, + {label: '催促率', prop: 'urgeRate'}, + ] + }else if(this.activeIndex === 2){ + this.labelList = [ + {label: '日', prop: 'date'}, + {label: '使用率', prop: 'appRate'}, + {label: '3′联系客户率', prop: 'threeMinutesContactRate'}, + {label: '平安聚合成功率', prop: 'pinganPolymerizationSuccessRate'}, + {label: '中华聚合成功率', prop: 'zhonghuaPolymerizationSuccessRate'}, + {label: '中道聚合成功率', prop: 'zdPolymerizationSuccessRate'}, + {label: '总聚合成功率', prop: 'polymerizationSuccessRate'}, + ] + }else if(this.activeIndex === 3){ + this.labelList = [ + {label: '日', prop: 'date'}, + {label: '接单时效(分)', prop: 'receiving'}, + {label: '3′接单率', prop: 'threeMinutesReceivingRate'}, + {label: '小修到达时效(分)', prop: 'minorArriving'}, + {label: '拖车到达时效(分)', prop: 'trailArriving'}, + {label: '困境到达时效(分)', prop: 'dilemmaArriving'}, + {label: '到达时效(分)', prop: 'arriving'}, + {label: '40′到达率', prop: 'fortyMinutesArrivalRate'}, + {label: '小修聚合成功到达时效(分)', prop: 'minorPolymerizationSuccessArriving'}, + {label: '拖车聚合成功到达时效(分)', prop: 'trailPolymerizationSuccessArriving'}, + {label: '聚合成功到达时效', prop: 'polymerizationSuccessArriving'}, + ] + } } } else if ([3, 4].includes(this.active)) { let res=await getDriverStatisticsKpi({ @@ -674,10 +671,8 @@ th{ @include wh(100%,100%); } .headWrap{ - @include wh(100%,60px); + @include wh(100%,80px); background: #3E62B9; - //background: radial-gradient( 235% 49% at 50% 50%, rgba(74,122,220,0.94) 100%, rgba(74,122,220,0.94) 100%, rgba(74,122,220,0.94) 100%); - opacity: 0.88; @include flexTwoCenter; flex-direction: column; .title{ @@ -691,6 +686,54 @@ th{ color: #BDDAFF; } } +.webHeadWrap{ + display: flex; + align-items: center; + justify-content: space-between; + @include wh(100%,50px); + background: #3E62B9; + box-sizing: border-box; + padding: 0 20px; + .empty{ + @include wh(250px,100%); + } + .title{ + font-size: 20px; + color: #FFFFFF; + } + .searchWrap{ + display: flex; + align-items: center; + position: relative; + .month{ + display: inline-block; + width: 45px; + height: 30px; + line-height: 30px; + text-align: center; + border-radius: 20px 0px 0px 20px; + border: 1px solid #4C81F5; + font-size:14px ; + color: #FFFFFF; + } + .ipt{ + display: inline-block; + width: 250px; + height: 32px; + line-height: 32px; + background: #E6EEFF; + border-radius: 0px 20px 20px 0px; + border: 1px solid #4C81F5; + padding: 0; + } + .el-icon-search{ + font-size: 15px; + color: #4C81F5; + position: absolute; + right:15px; + } + } +} ::v-deep .van-tabs__nav--line.van-tabs__nav--complete{ background: #5D7FD7; padding: 0; @@ -718,11 +761,8 @@ th{ @include wh(100%,calc(100% - 140px)); overflow-y: auto; background: #EFF2F8; - display: flex; - flex-wrap: wrap; .reciceOrder{ - //146px - @include whBg(375px,179px,#FFFFFF); + @include whBg(375px,146px,#FFFFFF); @include sizing4Padding(19px,25px,38px,19px); margin-bottom: 10px; .storeWrap{ @@ -761,10 +801,18 @@ th{ margin-bottom: 0 !important; } } - .ageing{ - height: 179px; + .webCom{ + @include whBg(420px,200px,#FFFFFF); + float: left; + margin: 10px; + .webTitle{ + margin-bottom: 40px !important; + } } } +.webcontentWrap{ + @include wh(100%,calc(100% - 86px)); +} .active2{ background: #FFFFFF; td:first-child { @@ -815,7 +863,7 @@ th{ .monthTotal{ background: #FFFFFF; padding-left: 6px; - height: auto !important; + //height: auto !important; .leftMonth{ .leftItem{ font-weight: bold;