From 055876c0a2d52b46ec2bc99b55885412ca7b7145 Mon Sep 17 00:00:00 2001 From: zhouxueli <2841188632@qq.com> Date: Thu, 5 Dec 2024 15:00:14 +0800 Subject: [PATCH] =?UTF-8?q?task#=EF=BC=8Ckpi=E6=B7=BB=E5=8A=A0=E6=9C=88?= =?UTF-8?q?=E4=BB=BD=E9=80=89=E6=8B=A9=EF=BC=8C=E4=BC=98=E5=8C=96=E4=BB=A3?= =?UTF-8?q?=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/kpi/kpiIndex.vue | 229 ++++++++++++++++++++++++------------- 1 file changed, 147 insertions(+), 82 deletions(-) diff --git a/src/views/kpi/kpiIndex.vue b/src/views/kpi/kpiIndex.vue index 448d0b50..d6c0a638 100644 --- a/src/views/kpi/kpiIndex.vue +++ b/src/views/kpi/kpiIndex.vue @@ -2,14 +2,21 @@
KPI.数据看板
-
{{ current }}月-{{supplierName}}
+
{{ current }}-{{supplierName}}
-
KPI.数据看板--中道救援--{{ current }}月
+
KPI.数据看板--中道救援--{{ current }}
- {{ current }}月 + +
- +
{{ leftArr }}
>>>
@@ -103,8 +110,8 @@
- -
+ +
接单得分: @@ -242,15 +249,6 @@
- 9 ? month : '0' + month); + this.current = dayjs(new Date(yearAndMonth)).format('YYYY-MM') + this.startTime = `${year}-${this.padZero(month)}-01 00:00:00`; + const lastDay = new Date(year, month, 0).getDate(); // 获取该月的最后一天 + this.endTime = `${year}-${this.padZero(month)}-${this.padZero(lastDay)} 23:59:59`; + this.startMonthTime=this.getStartTimeFromEndTime(this.endTime) + console.log(" this.startMonthTime", this.startMonthTime) + this.selectSupplierNameHandle(); + if(this.active===1){ + this.tabClickHandle() + } + } + }, + padZero(num) { + return num < 10 ? `0${num}` : num; + }, + async selectSupplierNameHandle(){ await this.getData() - setTimeout(()=>{ - this.$refs.Doughnut1.initCircle() - this.$refs.Doughnut2.initCircle() - this.$refs.Doughnut3.initCircle() - this.$refs.Doughnut4.initCircle() - this.$refs.Doughnut5.initCircle() - this.$refs.Doughnut6.initCircle() - this.$refs.Doughnut7.initCircle() - },1500) + if(this.active !== 0){ + return + } + this.$refs.Doughnut1.initCircle() + this.$refs.Doughnut2.initCircle() + this.$refs.Doughnut3.initCircle() + this.$refs.Doughnut4.initCircle() + this.$refs.Doughnut5.initCircle() + this.$refs.Doughnut6.initCircle() + this.$refs.Doughnut7.initCircle() }, async remoteMethod(query) { if (query !== '') { @@ -449,21 +467,21 @@ export default { async clickJumpHandle(type) { this.loading = true this.active = type; - await this.onClick(); + await this.tabClickHandle(); }, - onClick() { + tabClickHandle() { this.activeIndex = 0; this.detailList = []; this.labelList = []; this.driverName='' - this.getData(); + this.selectSupplierNameHandle(); if (this.active === 1) { setTimeout(() => { this.drawLine() if (!this.isMobile && this.activeIndex === 3) { this.drawLine1() } - }, 500) + }, 1000) } }, drawLine() { // 基于准备好的dom，初始化echarts实例 @@ -872,14 +890,15 @@ export default { driverId: this.driverId, driverName:this.driverName, }); - console.log("res",res) this.continueMonthKpi=res.data; - let v1=[] - let v2=[] + // 初始化 v1 ,v2数组，长度为 12，初始值为 0 + let v1 = new Array(12).fill(0); + let v2 = new Array(12).fill(0); if( this.continueMonthKpi.length>0){ this.continueMonthKpi.forEach(item=>{ - v1.push(item.dispatchOrderCount) - v2.push(item.orderScore) + let month = parseInt(item.statisticsDate?.split('-')[1], 10) - 1; // 获取月份，并转换为数组索引 + v1[month] = item.dispatchOrderCount; + v2[month] = item.orderScore; }) } let myChart = echarts.init(document.getElementById('allDataChart')) @@ -936,6 +955,14 @@ export default { }; option && myChart.setOption(option, true); }, + // 通用函数，用于处理百分比数据 + processPercentage(value) { + value *= 100; + if (value % 1 !== 0) { + value = value.toFixed(2); + } + return value; + }, async getKpiData() { try { this.loading = true @@ -952,37 +979,21 @@ export default { } this.indexData = res.data; this.supplierName=res.data?.supplierName - this.indexData.refuseOrderRate=this.indexData.refuseOrderRate*100 - if (this.indexData.refuseOrderRate % 1 !== 0) { - this.indexData.refuseOrderRate = this.indexData.refuseOrderRate.toFixed(2); - } - this.indexData.timeoutOrderRate=this.indexData.timeoutOrderRate*100 - if (this.indexData.timeoutOrderRate % 1 !== 0) { - this.indexData.timeoutOrderRate = this.indexData.timeoutOrderRate.toFixed(2); - } - this.indexData.complainOrderRate=this.indexData.complainOrderRate*100 - if (this.indexData.complainOrderRate % 1 !== 0) { - this.indexData.complainOrderRate = this.indexData.complainOrderRate.toFixed(2); - } - this.indexData.customerSatisfaction=this.indexData.customerSatisfaction*100 - if (this.indexData.customerSatisfaction % 1 !== 0) { - this.indexData.customerSatisfaction = this.indexData.customerSatisfaction.toFixed(2); - } - this.indexData.threeMinutesContactRate=this.indexData.threeMinutesContactRate*100 - if (this.indexData.threeMinutesContactRate % 1 !== 0) { - this.indexData.threeMinutesContactRate = this.indexData.threeMinutesContactRate.toFixed(2); - } - this.indexData.urgeRate=this.indexData.urgeRate*100 - if (this.indexData.urgeRate % 1 !== 0) { - this.indexData.urgeRate = this.indexData.urgeRate.toFixed(2); - } - this.indexData.appRate=this.indexData.appRate*100 - if (this.indexData.appRate % 1 !== 0) { - this.indexData.appRate = this.indexData.appRate.toFixed(2); - } - this.indexData.polymerizationSuccessRate=this.indexData.polymerizationSuccessRate*100 - if (this.indexData.polymerizationSuccessRate % 1 !== 0) { - this.indexData.polymerizationSuccessRate = this.indexData.polymerizationSuccessRate.toFixed(2); + // 需要处理的属性名数组 + const propertiesToProcess = [ + 'refuseOrderRate', + 'timeoutOrderRate', + 'complainOrderRate', + 'customerSatisfaction', + 'threeMinutesContactRate', + 'urgeRate', + 'appRate', + 'polymerizationSuccessRate' + ]; + for (let key in this.indexData){ + if (propertiesToProcess.includes(key)) { + this.indexData[key] = this.processPercentage(this.indexData[key]); + } } } else if ([1, 2].includes(this.active)) { let res = await getStatisticsKpi({ @@ -1011,13 +1022,16 @@ export default { item.minorFortyMinutesArrivalRate=this.formatPercentage(item.minorFortyMinutesArrivalRate) ; let formatVal = dayjs(item.statisticsDate).format('DD'); let formatVal1 = dayjs(item.statisticsDate).format('M'); - return {...item, date: formatVal, month: (formatVal1 == this.current) ? '本月' : (formatVal1 + '月')}; + // console.log("formatVal1",formatVal1) + // return {...item, date: formatVal, month: (formatVal1 == this.current) ? '本月' : (formatVal1 + '月')}; + return {...item, date: formatVal, month: formatVal1 + '月'}; }); this.loading = false this.detailList?.map(item => { this.xAxisArr.push(item.month) }) - this.xAxisArr[this.xAxisArr.length - 1] = '本月' + // console.log(" this.xAxisArr", this.xAxisArr) + // this.xAxisArr[this.xAxisArr.length - 1] = '本月' await this.twoTabHanldeData() } else if ([3, 4].includes(this.active)) { let res = await getDriverStatisticsKpi({ @@ -1030,13 +1044,11 @@ export default { pageNum: this.pageNum, pageSize: this.pageSize }) - // this.detailList = res.data this.total = res.total this.detailList = res.data?.map(item => { item.refuseOrderRate=this.formatPercentage(item.refuseOrderRate) ; item.timeoutOrderRate=this.formatPercentage(item.timeoutOrderRate) ; item.cancelRate=this.formatPercentage(item.cancelRate) ; - // item.urgeRate=this.formatPercentage(item.urgeRate) ; item.complainOrderRate=this.formatPercentage(item.complainOrderRate) ; item.customerEvaluateRate=this.formatPercentage(item.customerEvaluateRate) ; item.appRate=this.formatPercentage(item.appRate) ; @@ -1051,7 +1063,6 @@ export default { let formatVal = dayjs(item.statisticsDate).format('DD'); return {...item, date: formatVal}; }); - console.log("this.detailList",this.detailList) this.loading = false; if(this.active===4 && !this.driverName){ this.detailList=[] @@ -1138,15 +1149,23 @@ export default { return result.toFixed(2) + '%'; } }, - checkMobile() { - const userAgent = navigator.userAgent || navigator.vendor || window.opera; - this.isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent); - }, // 初始化获取当月日期 initDate() { + let year='' + let month='' + if( this.current ) { + year = new Date(this.current).getFullYear(); + month = new Date(this.current).getMonth() + 1; + } else { + year = new Date().getFullYear(); + month = new Date().getMonth() + 1; + } + let yearAndMonth = year + '-' + (month > 9 ? month : '0' + month); + this.current = dayjs(new Date(yearAndMonth)).format('YYYY-MM') this.startTime = dayjs(new Date()).format('YYYY-MM') + '-01 00:00:00' this.endTime = dayjs(new Date()).format('YYYY-MM') + '-' + this.getDayLen()+' 23:59:59' this.startMonthTime=this.getStartTimeFromEndTime(this.endTime) + console.log(" this.startMonthTime", this.startMonthTime,this.startTime) }, // 获取当月天数 getDayLen() { @@ -1386,7 +1405,6 @@ export default { } } else if (this.active === 3) { if (this.activeIndex === 0) { - this.labelList = [ {label: '师傅姓名', prop: 'driverName'}, {label: '总分', prop: 'score'}, @@ -1504,6 +1522,10 @@ export default { } } }, + checkMobile() { + const userAgent = navigator.userAgent || navigator.vendor || window.opera; + this.isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent); + }, setType(type) { switch (type) { case 5: @@ -1582,7 +1604,7 @@ export default { align-items: center; position: relative; - .month { +/* .month { display: inline-block; width: 45px; height: 30px; @@ -1592,7 +1614,7 @@ export default { border: 1px solid #4C81F5; font-size: 14px; color: #FFFFFF; - } + }*/ .el-icon-search { font-size: 15px; @@ -1938,4 +1960,47 @@ export default { ::v-deep .el-switch__label * { font-size: 12px; } +/* 自定义样式 */ +.custom-date-picker ::v-deep .el-input__prefix{ + display: none; +} +.month { + display: inline-block; + width: 75px; + //height: 30px; + //line-height: 30px; + text-align: center; + border-radius: 20px 0px 0px 20px; + //border-radius: 0px 20px 20px 0px; + //border: 1px solid #4C81F5; + font-size: 14px; + color: #FFFFFF; + ::v-deep .el-input--suffix .el-input__inner{ + + } + ::v-deep .el-input__inner{ + padding-left: 0 !important; + padding-right: 0 !important; + border-radius: 20px 0px 0px 20px !important; + text-align: center !important; + font-size: 14px !important; + color: #FFFFFF !important; + border: 1px solid #4C81F5 !important; + background-color: transparent !important; + } + /* 自定义清除按钮样式 */ + .custom-date-picker ::v-deep .el-input__suffix { + right: 0 !important; + padding-right: 10px !important; + } + + .custom-date-picker ::v-deep .el-input__suffix-inner { + display: flex; + align-items: center; + } + + .custom-date-picker ::v-deep .el-input__icon { + line-height: 1 !important; + } +}