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;
+ }
+}