diff --git a/public/index.html b/public/index.html index 76db0934..83c7c4f3 100644 --- a/public/index.html +++ b/public/index.html @@ -29,5 +29,32 @@ } + + diff --git a/src/views/kpi/components/circleChar.vue b/src/views/kpi/components/circleChar.vue index 404c6d6a..d7650c3f 100644 --- a/src/views/kpi/components/circleChar.vue +++ b/src/views/kpi/components/circleChar.vue @@ -1,6 +1,6 @@ @@ -97,4 +97,8 @@ export default { .img{ @include whMarLe(12px,10px,4px); } +.chart{ + width: 100%; + height: 125px; +} \ No newline at end of file diff --git a/src/views/kpi/components/noFit-table.vue b/src/views/kpi/components/noFit-table.vue index 3c1bfd47..6f61046b 100644 --- a/src/views/kpi/components/noFit-table.vue +++ b/src/views/kpi/components/noFit-table.vue @@ -21,7 +21,7 @@ export default { return {} }, mounted() { - + // console.log("tableData",this.tableData) }, methods: {} } diff --git a/src/views/kpi/kpiIndex.vue b/src/views/kpi/kpiIndex.vue index 2d68f164..3e3c730c 100644 --- a/src/views/kpi/kpiIndex.vue +++ b/src/views/kpi/kpiIndex.vue @@ -2,7 +2,7 @@
KPI.数据看板
-
4月-我是服务商名称
+
6月-我是服务商名称
@@ -138,6 +138,8 @@ + +
@@ -146,40 +148,82 @@
{{item.name}}
-
-
- -
-
+
+
- +
+ +
+
+ +
+
+ +
+
+
+
+
+
{{item.name}}
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
{{item.name}}
+
+
+ +
+
+ +
+
+ +
+
+ +
+
-
+
-
+
-
+
-
+
-
+
@@ -203,13 +247,14 @@ export default { mixins: [myMixins], data() { return { - active: 0, + active: 2, activeIndex: 0, tabArr: [ {name: '总览'}, {name: '月/总'}, {name: '日/总'}, {name: '月/师傅'}, {name: '日/师傅'}, {name: '拒单明细'}, {name: '超时明细'}, {name: '投诉明细'}, {name: '不使用APP案件明细'}, {name: '车辆在线情况'} ], list: [{name: '接单指标'}, {name: '客户评价'}, {name: 'APP使用'}, {name: ' 时效 '}], + driverList: [{name: '师傅接单情况'}, {name: '师傅服务评价'}, {name: '师傅APP使用情况'}, {name: '师傅时效 '}], startTime:'', endTime:'', indexData:{}, @@ -222,13 +267,13 @@ export default { } }, async mounted() { + await this.getDateArr(); + await this.getData(); if(this.active===1 && this.activeIndex===0){ this.$nextTick(()=>{ this.drawLine() }) } - await this.getDateArr(); - await this.getData(); }, created() { @@ -237,6 +282,9 @@ export default { }, methods: { onClick() { + this.activeIndex=0; + this.detailList=[]; + this.labelList=[]; this.getData(); }, // 初始化获取当月日期 @@ -279,8 +327,7 @@ export default { } while ( tempTime < endTime) // console.log(" this.xAxisArr", this.xAxisArr) }, - drawLine() { - // 基于准备好的dom,初始化echarts实例 + drawLine() { // 基于准备好的dom,初始化echarts实例 let myChart = echarts.init(document.getElementById('chartWrap')) let option; option = { @@ -366,19 +413,160 @@ export default { }); this.indexData=res.data; } else if ([1, 2].includes(this.active)) { - await getStatisticsKpi({ + let res= await getStatisticsKpi({ startTime: 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 }; + }); + 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'}, + ] + } } else if ([3, 4].includes(this.active)) { - await getDriverStatisticsKpi({ + let res=await getDriverStatisticsKpi({ startTime: this.startTime + ' 00:00:00', endTime: this.endTime + ' 23:59:59', statisticsType: this.active===3 ? 1 : 2, supplierId:1128, }) + if(this.active===3){//师傅月数据 + this.detailList = res.data + this.loading=false; + if (this.activeIndex === 0) {// + this.labelList = [ + {label: '师傅姓名', prop: 'driverName'}, + {label: '承接案件量', prop: 'receiveOrderCount'}, + {label: '拒单量', prop: 'refuseOrderCount'}, + {label: '拒单率', prop: 'refuseOrderRate'}, + {label: '超时接单量', prop: 'timeoutOrderCount'}, + {label: '超时率', prop: 'timeoutOrderRate'}, + ] + }else if(this.activeIndex === 1){ + this.labelList = [ + {label: '师傅姓名', prop: 'driverName'}, + {label: '承接案件量', prop: 'receiveOrderCount'}, + {label: '投诉量', prop: 'complainOrderCount'}, + {label: '投诉率', prop: 'complainOrderRate'}, + {label: '客户满意度', prop: 'customerEvaluateRate'}, + {label: '客户评价率', prop: 'customerEvaluateRate'}, + {label: '催促率', prop: 'urgeRate'}, + ] + }else if(this.activeIndex === 2){ + this.labelList = [ + {label: '师傅姓名', prop: 'driverName'}, + {label: '承接案件量', prop: 'receiveOrderCount'}, + {label: 'App使用率', prop: 'appRate'}, + {label: '3′联系客户率', prop: 'threeMinutesContactRate'}, + {label: '平安聚合成功率', prop: 'pinganPolymerizationSuccessRate'}, + {label: '中华聚合成功率', prop: 'zhonghuaPolymerizationSuccessRate'}, + {label: '中道聚合成功率', prop: 'zdPolymerizationSuccessRate'}, + {label: '总聚合成功率', prop: 'polymerizationSuccessRate'}, + {label: '日均在线时长', prop: 'polymerizationSuccessRate'}, + ] + }else if(this.activeIndex === 3){ + this.labelList = [ + {label: '师傅姓名', prop: 'driverName'}, + {label: '接单时效(分)', prop: 'receiving'}, + {label: '3′接单率', prop: 'threeMinutesReceivingRate'}, + {label: '到达时效(分)', prop: 'arriving'}, + {label: '40′到达率', prop: 'fortyMinutesArrivalRate'}, + {label: '聚合成功到达时效', prop: 'polymerizationSuccessArriving'}, + ] + } + }else{//师傅日数据 + this.detailList = res.data + 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: ''}, + {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'}, + {label: '日均在线时长', prop: 'polymerizationSuccessRate'}, + ] + }else if(this.activeIndex === 3){ + this.labelList = [ + {label: '日', prop: 'date'}, + {label: '接单时效(分)', prop: 'receiving'}, + {label: '3′接单率', prop: 'threeMinutesReceivingRate'}, + {label: '到达时效(分)', prop: 'arriving'}, + {label: '40′到达率', prop: 'fortyMinutesArrivalRate'}, + {label: '聚合成功到达时效', prop: 'polymerizationSuccessArriving'}, + ] + } + } + console.log("res",res) } else if ([5, 6, 7, 8, 9].includes(this.active)) { this.detailList = [] this.labelList = [] @@ -439,6 +627,16 @@ export default { this.loading=false } }, + async changeTab(index) { + this.labelList=[] + this.activeIndex = index + await this.getData() + if(this.active===1 && this.activeIndex===0){ + this.$nextTick(()=>{ + this.drawLine() + }) + } + }, setType(type){ switch (type){ case 5: @@ -453,14 +651,6 @@ export default { return 5; } }, - changeTab(index) { - this.activeIndex = index - if(this.active===1 && this.activeIndex===0){ - this.$nextTick(()=>{ - this.drawLine() - }) - } - }, }, } @@ -484,7 +674,7 @@ th{ @include wh(100%,100%); } .headWrap{ - @include wh(100%,100px); + @include wh(100%,60px); 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; @@ -528,8 +718,11 @@ th{ @include wh(100%,calc(100% - 140px)); overflow-y: auto; background: #EFF2F8; + display: flex; + flex-wrap: wrap; .reciceOrder{ - @include whBg(100%,146px,#FFFFFF); + //146px + @include whBg(375px,179px,#FFFFFF); @include sizing4Padding(19px,25px,38px,19px); margin-bottom: 10px; .storeWrap{ @@ -569,7 +762,7 @@ th{ } } .ageing{ - height: 146px; + height: 179px; } } .active2{ @@ -622,6 +815,7 @@ th{ .monthTotal{ background: #FFFFFF; padding-left: 6px; + height: auto !important; .leftMonth{ .leftItem{ font-weight: bold; @@ -641,4 +835,7 @@ th{ overflow-x: auto; /* 当内容超出宽度时启用水平滚动 */ } } +.comTab{ + width: 100%; +}