diff --git a/src/views/kpi/components/circleChar.vue b/src/views/kpi/components/circleChar.vue index d9312b4d..c64b9354 100644 --- a/src/views/kpi/components/circleChar.vue +++ b/src/views/kpi/components/circleChar.vue @@ -84,7 +84,7 @@ export default { color:'rgba(4, 4, 21,0.45)' }, detail: { - color:this.isStore ? this.bgColor : '#040415', + color:this.isStore ? this.bgColor : (this.bgColor || '#040415'), fontSize: this.isStore ? 43 :19, formatter: this.isStore ? '{value}' : '{value}%' } @@ -110,4 +110,4 @@ export default { width: 100%; height: 125px; } - \ No newline at end of file + diff --git a/src/views/kpi/kpiIndex.vue b/src/views/kpi/kpiIndex.vue index ee7aa96b..5d9808b4 100644 --- a/src/views/kpi/kpiIndex.vue +++ b/src/views/kpi/kpiIndex.vue @@ -51,11 +51,11 @@
承接案件量
-
{{ indexData && indexData.refuseOrderRate }}%
+
{{ indexData && indexData.refuseOrderRate }}%
拒单率 >
-
{{ indexData && indexData.timeoutOrderRate }}%
+
{{ indexData && indexData.timeoutOrderRate }}%
超时率 >
@@ -63,41 +63,39 @@
客户评价
- - + + :bg-color="Number(indexData?.urgeRate || 0) >= 3 ? 'red' : 'green'">
APP使用
- - - + +
时效
-
{{ indexData && indexData.receiving }}
+
{{ indexData && indexData.receiving }}
接单时效(分)
-
{{ indexData && indexData.polymerizationSuccessArriving }}
+
{{ indexData && indexData.polymerizationSuccessArriving }}
集合成功到达时效(分)
-
{{ indexData && indexData.arriving }}
+
{{ indexData && indexData.arriving }}
到达时效(分)
@@ -111,7 +109,7 @@
- +
@@ -312,10 +310,12 @@ export default { v4: [], v5: [], v6: [], + v7: [], + v8: [], xAxisArr: [], isMobile: false, isZd: '', - current:'', + current:'2024-10', // current: dayjs(new Date()).format('M'), supplierName:'', value: '1', @@ -370,14 +370,19 @@ export default { } }, monthChangeHandle(value){ + console.log('valuevaluevalue', dayjs(new Date(value)).format('YYYY-MM-DD')) if (value) { - const year = value.getFullYear(); + this.current = dayjs(new Date(value)).format('YYYY-MM') + const _tempDate = dayjs(new Date(value)).format('YYYY-MM-DD') + const lastDay = dayjs(_tempDate).endOf('month'); + + /*const year = value.getFullYear(); const month = value.getMonth() + 1; // 月份从 0 开始,需要加 1 const yearAndMonth = year + '-' + (month > 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.current = dayjs(new Date(yearAndMonth)).format('YYYY-MM')*/ + this.startTime = `${this.current}-01 00:00:00`; + // const lastDay = new Date(year, month, 0).getDate(); // 获取该月的最后一天 + this.endTime = `${this.current}-${this.padZero(lastDay.date())} 23:59:59`; this.startMonthTime=this.getStartTimeFromEndTime(this.endTime) console.log(" this.startMonthTime", this.startMonthTime) this.selectSupplierNameHandle(); @@ -455,6 +460,8 @@ export default { this.v4 = [] this.v5 = [] this.v6 = [] + this.v7 = [] + this.v8 = [] this.xAxisArr = [] this.etlDetailList=[] this.etlLabelList=[] @@ -545,7 +552,7 @@ export default { formatter: '{c}%' }, }, - { + /* { name: '客户取消率', type: "line", data: this.v4, @@ -556,24 +563,13 @@ export default { position: 'top', formatter: '{c}%' }, - }, + },*/ ] - let series2 = [{ - name: '客户评价率', - type: 'line', - data: this.v1, - smooth: true, - yAxisIndex: 0, - label: { - show: true, // 显示标签 - position: 'top', // 标签位置在柱形顶部 - formatter: '{c}%' - } - }, + let series2 = [ { name: '投诉率', type: "line", - data: this.v3, + data: this.v2, smooth: true, yAxisIndex: 0, label: { @@ -583,10 +579,10 @@ export default { }, }, { - name: '客户满意度', + name: '好评率', type: 'line', smooth: true, - data: this.v2, + data: this.v4, yAxisIndex: 0, label: { show: true, @@ -595,7 +591,7 @@ export default { }, }, ] - let series3 = [ + /*let series3 = [ { name: 'APP使用率', type: 'line', @@ -668,8 +664,8 @@ export default { formatter: '{c}%' }, }, - ] - let series4 = [{ + ]*/ + /*let series4 = [{ name: '接单时效(分)', type: 'bar', data: this.v1, @@ -693,6 +689,19 @@ export default { formatter: '{c}%' }, }, + ]*/ + let series4 = [ + { + name: '接单时效(分)', + type: 'line', + smooth: true, + data: this.v1, + yAxisIndex: 0, + label: { + show: true, + position: 'top', + }, + }, ] let series5 = [{ name: '到达时效(分)', @@ -747,21 +756,15 @@ export default { formatter: '{value}%' } } ] - let yAxis3 = [ + /*let yAxis3 = [ { type: 'value', axisLabel: { formatter: '{value}%' } }, - ] + ]*/ let yAxis4 = [ - { - type: 'value', - axisLabel: { - formatter: '{value}%' - } - }, {type: 'value'}, ] let yAxis5 = [ @@ -783,8 +786,8 @@ export default { series = series2 yAxis = yAxis2 } else if (this.activeIndex === 2) { - series = series3 - yAxis = yAxis3 + series = [] + yAxis = [] } else if (this.activeIndex === 3) { if (this.value == 1) { series = series4 @@ -797,7 +800,7 @@ export default { } option = { title: { - text: this.isMobile ? this.getTitle(this.activeIndex) : '师傅接单时效', + text: this.isMobile ? this.getTitle(this.activeIndex) : (this.active === 1 && this.activeIndex === 2) ? '' : '师傅接单时效', textStyle: { fontSize: 12 }, @@ -852,41 +855,32 @@ export default { containLabel: true }, yAxis: [ - { - type: 'value', - axisLabel: { - formatter: '{value}%' - } - }, {type: 'value'}, ], series: [{ - name: '到达时效(分)', - type: 'bar', + name: '到达时效', + type: 'line', data: this.v3, - yAxisIndex: 1, + yAxisIndex: 0, smooth: true, - barWidth: 45, - barGap: '0%', // 设置柱子之间的间隔 label: { show: true, // 显示标签 position: 'top', // 标签位置在柱形顶部 } }, { - name: '聚合成功到达时效', - type: 'bar', + name: '平安聚合成功到达时效', + type: 'line', data: this.v4, - yAxisIndex: 1, smooth: true, + yAxisIndex: 0, barWidth: 45, - barGap: '0%', // 设置柱子之间的间隔 label: { show: true, // 显示标签 position: 'top', // 标签位置在柱形顶部 } }, - { + /*{ name: '40分钟到达率', type: 'line', smooth: true, @@ -897,7 +891,7 @@ export default { position: 'top', formatter: '{c}%' }, - }, + },*/ ] }; option && myChart.setOption(option, true); @@ -1032,12 +1026,16 @@ export default { item.timeoutOrderRate=this.formatPercentage(item.timeoutOrderRate) ; item.cancelRate=this.formatPercentage(item.cancelRate) ; item.urgeRate=this.formatPercentage(item.urgeRate) ; + item.favorableRate=this.formatPercentage(item.favorableRate) ; + item.pinganEvaluateRate = this.formatPercentage(item.pinganEvaluateRate) ; item.complainOrderRate=this.formatPercentage(item.complainOrderRate) ; + item.pinganFavorableRate=this.formatPercentage(item.pinganFavorableRate) ; item.customerEvaluateRate=this.formatPercentage(item.customerEvaluateRate) ; item.appRate=this.formatPercentage(item.appRate) ; item.threeMinutesContactRate=this.formatPercentage(item.threeMinutesContactRate) ; item.pinganPolymerizationSuccessRate=this.formatPercentage(item.pinganPolymerizationSuccessRate) ; item.zhonghuaPolymerizationSuccessRate=this.formatPercentage(item.zhonghuaPolymerizationSuccessRate) ; + item.wholeJuheSuccessRate = this.formatPercentage(item.wholeJuheSuccessRate) ; item.zdPolymerizationSuccessRate=this.formatPercentage(item.zdPolymerizationSuccessRate) ; item.polymerizationSuccessRate=this.formatPercentage(item.polymerizationSuccessRate) ; item.threeMinutesReceivingRate=this.formatPercentage(item.threeMinutesReceivingRate) ; @@ -1200,7 +1198,7 @@ export default { }, // 初始化获取当月日期 initDate() { - let year='' + /*let year='' let month='' if( this.current ) { year = new Date(this.current).getFullYear(); @@ -1212,7 +1210,25 @@ export default { 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.endTime = dayjs(new Date()).format('YYYY-MM') + '-' + this.getDayLen()+' 23:59:59'*/ + // test + let _testDate = new Date('2024-11-01 00:00:01') + + const today = dayjs(_testDate); // 获取当前日期 + const currentDay = today.date(); // 获取今天是几号(1-31) + let targetMonth = today; // 默认目标月份是当前月 + if (currentDay === 1) { + targetMonth = today.subtract(1, 'month'); // 上个月 + } + this.current = targetMonth.format('YYYY-MM'); + this.startTime = targetMonth.startOf('month').format('YYYY-MM-DD HH:mm:ss'); + let endTime; + if (targetMonth.isSame(today, 'month')) { + endTime = today.subtract(1, 'day').endOf('day'); + } else { + endTime = targetMonth.endOf('month'); + } + this.endTime = endTime.format('YYYY-MM-DD HH:mm:ss'); this.startMonthTime=this.getStartTimeFromEndTime(this.endTime) console.log(" this.startMonthTime", this.startMonthTime,this.startTime) }, @@ -1230,13 +1246,15 @@ export default { }, //获取近五个月的开始时间 getStartTimeFromEndTime(endTimeStr) { - const endTime = new Date(endTimeStr); + /* const endTime = new Date(endTimeStr); endTime.setMonth(endTime.getMonth() - 5); // 减去5个月 const year = endTime.getFullYear(); let month = String(endTime.getMonth() + 1).padStart(2, '0'); // 月份+1,并确保为两位数 let day = '01'; // 因为我们要的是那个月的第一天 const startTimeStr = `${year}-${month}-${day} `+'00:00:00'; - return startTimeStr; + return startTimeStr;*/ + const startTime = dayjs(endTimeStr).subtract(4, 'month').startOf('month'); + return startTime.format('YYYY-MM-DD HH:mm:ss'); }, async changeTab(index) { try { @@ -1249,6 +1267,8 @@ export default { this.v4 = [] this.v5 = [] this.v6 = [] + this.v7 = [] + this.v8 = [] await this.twoTabHanldeData() this.loadingData = false if (this.active === 1) { @@ -1307,39 +1327,43 @@ export default { {label: '取消率(%)', prop: 'cancelRate'}, ] } else if (this.activeIndex === 1) { - this.etlDetailList=[{ 'month': '投诉量' },{ 'month': '投诉率(%)' },{ 'month': '客户满意度(%)' }, { 'month': '客户评价率(%)' }] + this.etlDetailList=[{ 'month': '投诉量' },{ 'month': '投诉率(%)' },{ 'month': '平安好评量' }, { 'month': '平安好评率' }] + console.log('detailList', this.detailList) let props = 'prop' //自定义字段名称 this.detailList?.map((item,index) => { - this.v1.push(item.customerEvaluateRate.replace('%', '')) - this.v2.push(item.customerSatisfaction.replace('%', '')) - this.v3.push(item.complainOrderRate.replace('%', '')) + this.v1.push(item.complainOrderCount) + this.v2.push(item.complainOrderRate?.replace('%', '')) + this.v3.push(item?.pinganFavorableCount) + this.v4.push(item.pinganFavorableRate?.replace('%', '')) const columnObj = {} columnObj.label = item.month // 每一列的标题的名称 columnObj.prop = props + index //自定义每一列标题字段名称 this.etlLabelList.push(columnObj) - let mappings = [ 'complainOrderCount', 'complainOrderRate', 'customerSatisfaction','customerEvaluateRate' ]; + let mappings = [ 'complainOrderCount', 'complainOrderRate', 'pinganFavorableCount','pinganFavorableRate' ]; for (let i = 0; i < mappings.length; i++) { this.$set(this.etlDetailList[i], columnObj.prop, item[mappings[i]]); } }) this.labelList = [ - {label: '月', prop: 'month'}, + {label: '月份', prop: 'month'}, {label: '投诉量', prop: 'complainOrderCount'}, - {label: '投诉率(%)', prop: 'complainOrderRate'}, - {label: '客户满意度(%)', prop: 'customerSatisfaction'}, - {label: '客户评价率(%)', prop: 'customerEvaluateRate'}, + {label: '投诉率', prop: 'complainOrderRate'}, + {label: '平安好评量', prop: 'pinganFavorableCount'}, + {label: '平安好评率', prop: 'pinganFavorableRate'}, ] } else if (this.activeIndex === 2) { - this.etlDetailList=[{ 'month': '使用率(%)' },{ 'month': '3′联系客户率(%)' },{ 'month': '平安聚合成功率(%)' }, { 'month': '中华聚合成功率(%)' } - ,{ 'month': '中道聚合成功率(%' }, { 'month': '总聚合成功率(%)' }] + this.etlDetailList=[{ 'month': 'APP使用量' }, { 'month': 'APP使用率' }, { 'month': '平安聚合成功量' },{ 'month': '平安聚合成功率' }, + { 'month': '中华联合聚合成功量' }, { 'month': '中华联合聚合成功率' }, { 'month': '整体聚合成功量' }, { 'month': '整体聚合成功率' }] let props = 'prop' //自定义字段名称 this.detailList?.map((item,index) => { - this.v1.push(item.appRate.replace('%', '')) - this.v2.push(item.threeMinutesContactRate.replace('%', '')) - this.v3.push(item.pinganPolymerizationSuccessRate.replace('%', '')) - this.v4.push(item.zhonghuaPolymerizationSuccessRate.replace('%', '')) - this.v5.push(item.zdPolymerizationSuccessRate.replace('%', '')) - this.v6.push(item.polymerizationSuccessRate.replace('%', '')) + this.v1.push(item.appUseCount) + this.v2.push(item.appRate.replace('%', '')) + this.v3.push(item.pinganJuheSuccessCount) + this.v4.push(item.pinganPolymerizationSuccessRate.replace('%', '')) + this.v5.push(item.zhonghuaPolymerizationSuccessCount) + this.v6.push(item.zhonghuaPolymerizationSuccessRate.replace('%', '')) + this.v7.push(item.wholeJuheSuccessCount) + this.v7.push(item.wholeJuheSuccessRate.replace('%', '')) const columnObj = {} columnObj.label = item.month // 每一列的标题的名称 columnObj.prop = props + index //自定义每一列标题字段名称 @@ -1350,16 +1374,18 @@ export default { } }) this.labelList = [ - {label: '月', prop: 'month'}, - {label: '使用率(%)', prop: 'appRate'}, - {label: '3′联系客户率(%)', prop: 'threeMinutesContactRate'}, - {label: '平安聚合成功率(%)', prop: 'pinganPolymerizationSuccessRate'}, - {label: '中华聚合成功率(%)', prop: 'zhonghuaPolymerizationSuccessRate'}, - {label: '中道聚合成功率(%)', prop: 'zdPolymerizationSuccessRate'}, - {label: '总聚合成功率(%)', prop: 'polymerizationSuccessRate'}, + {label: '月份', prop: 'month'}, + {label: 'APP使用量', prop: 'appUseCount'}, + {label: 'APP使用率', prop: 'appRate'}, + {label: '平安聚合成功量', prop: 'pinganJuheSuccessCount'}, + {label: '平安聚合成功率', prop: 'pinganPolymerizationSuccessRate'}, + {label: '中华联合聚合成功量', prop: 'zhonghuaPolymerizationSuccessCount'}, + {label: '中华联合聚合成功率', prop: 'zhonghuaPolymerizationSuccessRate'}, + {label: '整体聚合成功量', prop: 'wholeJuheSuccessCount'}, + {label: '整体聚合成功率', prop: 'wholeJuheSuccessRate'}, ] } else if (this.activeIndex === 3) { - this.etlDetailList=[{ 'month': '接单时效(分)' },{ 'month': '3′接单率(%)' },{ 'month': '到达时效(分)' }, { 'month': '40′到达率(%)' },{'month':'聚合成功到达时效(分)'}] + this.etlDetailList=[{ 'month': '接单时效' },{ 'month': '3分钟联系客户率' },{ 'month': '到达时效' },{'month':'平安聚合成功到达时效'}] let props = 'prop' //自定义字段名称 if (this.isMobile) { if (this.value == 1) { @@ -1392,70 +1418,67 @@ export default { if (this.swithVal) { this.detailList?.map(item => { this.v3.push(item.trailArriving) - this.v4.push(item.trailPolymerizationSuccessArsriving) - this.v5.push(item.trailFortyMinutesArrivalRate ? item.trailFortyMinutesArrivalRate.replace('%', '') : item.trailFortyMinutesArrivalRate) + this.v4.push(item.pinganJuheSuccessArriving) + // this.v5.push(item.trailFortyMinutesArrivalRate ? item.trailFortyMinutesArrivalRate.replace('%', '') : item.trailFortyMinutesArrivalRate) }) } else { this.detailList?.map(item => { this.v3.push(item.minorArriving) - this.v4.push(item.minorPolymerizationSuccessArriving) - this.v5.push(item.minorFortyMinutesArrivalRate ? item.minorFortyMinutesArrivalRate.replace('%', '') : item.minorFortyMinutesArrivalRate) + this.v4.push(item.pinganJuheSuccessArriving) + // this.v5.push(item.minorFortyMinutesArrivalRate ? item.minorFortyMinutesArrivalRate.replace('%', '') : item.minorFortyMinutesArrivalRate) }) } } this.labelList = [ - {label: '月', prop: 'month'}, - {label: '接单时效(分)', prop: 'receiving'}, - {label: '3′接单率(%)', prop: 'threeMinutesReceivingRate'}, - {label: '到达时效(分)', prop: 'arriving'}, - {label: '40′到达率(%)', prop: 'fortyMinutesArrivalRate'}, - {label: '聚合成功到达时效(分)', prop: 'polymerizationSuccessArriving'}, + {label: '月份', prop: 'month'}, + {label: '接单时效', prop: 'receiving'}, + {label: '3分钟联系客户率', prop: 'threeMinutesReceivingRate'}, + {label: '到达时效', prop: 'arriving'}, + {label: '平安聚合成功到达时效', prop: 'pinganJuheSuccessArriving'}, ] } } else if (this.active === 2) { if (this.activeIndex === 0) {//接单指标 this.labelList = [ {label: '日', prop: 'date'}, - {label: '派遣案件量', prop: 'dispatchOrderCount'}, - {label: '承接案件量', prop: 'receiveOrderCount'}, - {label: '完成量', prop: 'finishOrderCount'}, + {label: '派单量', prop: 'dispatchOrderCount'}, + {label: '接单量', prop: 'receiveOrderCount'}, + // {label: '完成量', prop: 'finishOrderCount'}, {label: '拒单量', prop: 'refuseOrderCount'}, - {label: '拒单率(%)', prop: 'refuseOrderRate'}, - {label: '超时接单量', prop: 'timeoutOrderCount'}, - {label: '超时率(%)', prop: 'timeoutOrderRate'}, - {label: '客户取消率(%)', prop: 'cancelRate'}, + {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'}, + {label: '投诉率', prop: 'complainOrderRate'}, + {label: '好评量', prop: 'favorableCount'}, + {label: '好评率', prop: 'favorableRate'}, + {label: '平安评价率', prop: 'pinganEvaluateRate'}, + {label: '平安好评率', prop: 'pinganFavorableRate'}, ] } 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: 'APP使用量', prop: 'appUseCount'}, + {label: 'APP使用率', prop: 'appRate'}, + {label: '平安聚合成功量', prop: 'pinganJuheSuccessCount'}, + {label: '平安聚合成功率', prop: 'pinganPolymerizationSuccessRate'}, + {label: '中华联合聚合成功量', prop: 'zhonghuaPolymerizationSuccessCount'}, + {label: '中华联合聚合成功率', prop: 'zhonghuaPolymerizationSuccessRate'}, + {label: '整体聚合成功量', prop: 'wholeJuheSuccessCount'}, + {label: '整体聚合成功率', prop: 'wholeJuheSuccessRate'}, ] } 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: '3分钟联系客户率', prop: 'threeMinutesReceivingRate'}, {label: '到达时效(分)', prop: 'arriving'}, - {label: '40′到达率(%)', prop: 'fortyMinutesArrivalRate'}, - {label: '小修聚合成功到达时效(分)', prop: 'minorPolymerizationSuccessArriving'}, - {label: '拖车聚合成功到达时效(分)', prop: 'trailPolymerizationSuccessArriving'}, - {label: '聚合成功到达时效(分)', prop: 'polymerizationSuccessArriving'}, + {label: '平安聚合成功到达时效(分)', prop: 'pinganJuheSuccessArriving'}, ] } } @@ -1584,6 +1607,7 @@ 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); + // this.isMobile = true }, setType(type) { switch (type) { @@ -2049,4 +2073,10 @@ export default { line-height: 1 !important; } } + .numRed { + color: red !important; + } + .numGreen { + color: green !important; + }