apps/supplier-dispatch-h5
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

story#7059,服务商KPI界面调整需求--袁鸿鑫, 前三部分

Browse Source
This commit is contained in:
周林芳
2025-08-22 15:56:13 +08:00
parent 2bb1885b37
commit 41820ef796
2 changed files with 164 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/views/kpi/components/circleChar.vue
View File

@ -84,7 +84,7 @@ export default {
color:'rgba(4, 4, 21,0.45)' color:'rgba(4, 4, 21,0.45)'
}, },
detail: { detail: {
color:this.isStore ? this.bgColor : '#040415', color:this.isStore ? this.bgColor : (this.bgColor || '#040415'),
fontSize: this.isStore ? 43 :19, fontSize: this.isStore ? 43 :19,
formatter: this.isStore ? '{value}' : '{value}%' formatter: this.isStore ? '{value}' : '{value}%'
} }
@ -110,4 +110,4 @@ export default {
width: 100%; width: 100%;
height: 125px; height: 125px;
} }
</style> </style>

294
src/views/kpi/kpiIndex.vue
View File

@ -51,11 +51,11 @@
<div class="itemTitle">承接案件量</div> <div class="itemTitle">承接案件量</div>
</div> </div>
<div class="center common" @click="clickJumpHandle(5)"> <div class="center common" @click="clickJumpHandle(5)">
<div class="num">{{ indexData && indexData.refuseOrderRate }}%</div> <div class="num" :class="{'numRed': Number(indexData?.refuseOrderRate) >= 5, 'numGreen': Number(indexData?.refuseOrderRate) < 5 }">{{ indexData && indexData.refuseOrderRate }}%</div>
<div class="itemTitle" style="cursor: pointer">拒单率 ></div> <div class="itemTitle" style="cursor: pointer">拒单率 ></div>
</div> </div>
<div class="right common" @click="clickJumpHandle(6)"> <div class="right common" @click="clickJumpHandle(6)">
<div class="num">{{ indexData && indexData.timeoutOrderRate }}%</div> <div class="num" :class="{'numRed': Number(indexData?.timeoutOrderRate) >= 5, 'numGreen': Number(indexData?.timeoutOrderRate) < 5 }">{{ indexData && indexData.timeoutOrderRate }}%</div>
<div class="itemTitle" style="cursor: pointer">超时率 ></div> <div class="itemTitle" style="cursor: pointer">超时率 ></div>
</div> </div>
</div> </div>
@ -63,41 +63,39 @@
<div :class="{'reciceOrder':true,'webCom':!isMobile,'evaluate':isMobile}"> <div :class="{'reciceOrder':true,'webCom':!isMobile,'evaluate':isMobile}">
<div class="title">客户评价</div> <div class="title">客户评价</div>
<div class="reciceOrderIWrap" v-if="indexData"> <div class="reciceOrderIWrap" v-if="indexData">
<circle-char ref="Doughnut1" :data="indexData && indexData.complainOrderRate" :title-text="'投诉率'" :bg-color="'#9485ED'" <circle-char ref="Doughnut1" :data="indexData && indexData.complainOrderRate" :title-text="'投诉率'" :bg-color="Number(indexData?.complainOrderRate || 0) <= 0.01 ? 'green' : 'red'"
:is-store="false" @clickComplain="clickJumpHandle(7)"></circle-char> :is-store="false" @clickComplain="clickJumpHandle(7)"></circle-char>
<circle-char ref="Doughnut2" :data="indexData && indexData.customerSatisfaction" :title-text="'客户满意度'" <circle-char ref="Doughnut2" :data="indexData && indexData.customerSatisfaction" :title-text="'平安好评率'"
:bg-color="'#5DDECF'"></circle-char> :bg-color="Number(indexData?.customerSatisfaction || 0) >= 99.4 ? 'green' : 'red'"></circle-char>
<circle-char ref="Doughnut3" :data="indexData && indexData.urgeRate" :title-text="'催促率'" <circle-char ref="Doughnut3" :data="indexData && indexData.urgeRate" :title-text="'催促率'"
:bg-color="'#FFADAD'"></circle-char> :bg-color="Number(indexData?.urgeRate || 0) >= 3 ? 'red' : 'green'"></circle-char>
</div> </div>
</div> </div>
<div :class="{'reciceOrder':true,'webCom':!isMobile,'appUse':isMobile}"> <div :class="{'reciceOrder':true,'webCom':!isMobile,'appUse':isMobile}">
<div class="title">APP使用</div> <div class="title">APP使用</div>
<div class="reciceOrderIWrap" v-if="indexData"> <div class="reciceOrderIWrap" v-if="indexData">
<circle-char ref="Doughnut4" :data="indexData && indexData.appRate" :title-text="'使用率'" :bg-color="'#3AA1FF'" <circle-char ref="Doughnut4" :data="indexData && indexData.appRate" :title-text="'APP使用率'" :bg-color="Number(indexData?.appRate || 0) >= 95 ? 'green' : 'red'"
:is-store="false" :is-store="false"
@clickUse="clickJumpHandle(8)"></circle-char> @clickUse="clickJumpHandle(8)"></circle-char>
<circle-char ref="Doughnut5" :data="indexData && indexData.threeMinutesContactRate" :title-text="'3′联系客户率'" <circle-char ref="Doughnut5" :data="indexData && indexData.threeMinutesContactRate" :title-text="'3′联系客户率'" :bg-color="Number(indexData?.threeMinutesContactRate || 0) >= 90 ? 'green' : 'red'"></circle-char>
:bg-color="'#5D7FD7'"></circle-char> <circle-char ref="Doughnut6" :data="indexData && indexData.polymerizationSuccessRate" :title-text="'总聚合成功率'" :bg-color="Number(indexData?.polymerizationSuccessRate || 0) >= 80 ? 'green' : 'red'"></circle-char>
<circle-char ref="Doughnut6" :data="indexData && indexData.polymerizationSuccessRate" :title-text="'总聚合成功率'"
:bg-color="'#4ECB73'"></circle-char>
</div> </div>
</div> </div>
<div :class="{'reciceOrder':true,'webCom':!isMobile}"> <div :class="{'reciceOrder':true,'webCom':!isMobile}">
<div :class="{'title':true,'webTitle':!isMobile}">时效</div> <div :class="{'title':true,'webTitle':!isMobile}">时效</div>
<div class="reciceOrderIWrap"> <div class="reciceOrderIWrap">
<div class="left common"> <div class="left common">
<div class="num">{{ indexData && indexData.receiving }}</div> <div class="num" :class="{'numRed': Number(indexData?.receiving) > 5, 'numGreen': Number(indexData?.receiving) <= 5 }">{{ indexData && indexData.receiving }}</div>
<div class="itemTitle">接单时效(分)</div> <div class="itemTitle">接单时效(分)</div>
</div> </div>
<div class="line"></div> <div class="line"></div>
<div class="center common"> <div class="center common">
<div class="num">{{ indexData && indexData.polymerizationSuccessArriving }}</div> <div class="num" :class="{'numRed': Number(indexData?.polymerizationSuccessArriving) > 22, 'numGreen': Number(indexData?.polymerizationSuccessArriving) <= 22 }">{{ indexData && indexData.polymerizationSuccessArriving }}</div>
<div class="itemTitle">集合成功到达时效(分)</div> <div class="itemTitle">集合成功到达时效(分)</div>
</div> </div>
<div class="line"></div> <div class="line"></div>
<div class="right common"> <div class="right common">
<div class="num">{{ indexData && indexData.arriving }}</div> <div class="num" :class="{'numRed': Number(indexData?.arriving) > 40, 'numGreen': Number(indexData?.arriving) <= 40 }">{{ indexData && indexData.arriving }}</div>
<div class="itemTitle">到达时效(分)</div> <div class="itemTitle">到达时效(分)</div>
</div> </div>
</div> </div>
@ -111,7 +109,7 @@
<i class="el-icon-question" @click.prevent="showScoreChart = !showScoreChart"></i> <i class="el-icon-question" @click.prevent="showScoreChart = !showScoreChart"></i>
</div> </div>
<div class="storeWrap" v-if="indexData"> <div class="storeWrap" v-if="indexData">
<circle-char v-show="showScoreChart" ref="Doughnut7" :data="indexData && indexData.score" :bg-color="'#00D273'" :is-store="true"></circle-char> <circle-char v-show="showScoreChart" ref="Doughnut7" :data="indexData && indexData.score" :bg-color="Number(indexData?.score || 0) >= 60 ? 'green' : 'red'" :is-store="true"></circle-char>
<div v-show="!showScoreChart" class="detailScore"> <div v-show="!showScoreChart" class="detailScore">
<div class="left"> <div class="left">
<div> <div>
@ -312,10 +310,12 @@ export default {
v4: [], v4: [],
v5: [], v5: [],
v6: [], v6: [],
v7: [],
v8: [],
xAxisArr: [], xAxisArr: [],
isMobile: false, isMobile: false,
isZd: '', isZd: '',
current:'', current:'2024-10',
// current: dayjs(new Date()).format('M'), // current: dayjs(new Date()).format('M'),
supplierName:'', supplierName:'',
value: '1', value: '1',
@ -370,14 +370,19 @@ export default {
} }
}, },
monthChangeHandle(value){ monthChangeHandle(value){
console.log('valuevaluevalue', dayjs(new Date(value)).format('YYYY-MM-DD'))
if (value) { 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 month = value.getMonth() + 1; // 月份从 0 开始，需要加 1
const yearAndMonth = year + '-' + (month > 9 ? month : '0' + month); const yearAndMonth = year + '-' + (month > 9 ? month : '0' + month);
this.current = dayjs(new Date(yearAndMonth)).format('YYYY-MM') this.current = dayjs(new Date(yearAndMonth)).format('YYYY-MM')*/
this.startTime = `${year}-${this.padZero(month)}-01 00:00:00`; this.startTime = `${this.current}-01 00:00:00`;
const lastDay = new Date(year, month, 0).getDate(); // 获取该月的最后一天 // const lastDay = new Date(year, month, 0).getDate(); // 获取该月的最后一天
this.endTime = `${year}-${this.padZero(month)}-${this.padZero(lastDay)} 23:59:59`; this.endTime = `${this.current}-${this.padZero(lastDay.date())} 23:59:59`;
this.startMonthTime=this.getStartTimeFromEndTime(this.endTime) this.startMonthTime=this.getStartTimeFromEndTime(this.endTime)
console.log(" this.startMonthTime", this.startMonthTime) console.log(" this.startMonthTime", this.startMonthTime)
this.selectSupplierNameHandle(); this.selectSupplierNameHandle();
@ -455,6 +460,8 @@ export default {
this.v4 = [] this.v4 = []
this.v5 = [] this.v5 = []
this.v6 = [] this.v6 = []
this.v7 = []
this.v8 = []
this.xAxisArr = [] this.xAxisArr = []
this.etlDetailList=[] this.etlDetailList=[]
this.etlLabelList=[] this.etlLabelList=[]
@ -545,7 +552,7 @@ export default {
formatter: '{c}%' formatter: '{c}%'
}, },
}, },
{ /* {
name: '客户取消率', name: '客户取消率',
type: "line", type: "line",
data: this.v4, data: this.v4,
@ -556,24 +563,13 @@ export default {
position: 'top', position: 'top',
formatter: '{c}%' formatter: '{c}%'
}, },
}, },*/
] ]
let series2 = [{ let series2 = [
name: '客户评价率',
type: 'line',
data: this.v1,
smooth: true,
yAxisIndex: 0,
label: {
show: true, // 显示标签
position: 'top', // 标签位置在柱形顶部
formatter: '{c}%'
}
},
{ {
name: '投诉率', name: '投诉率',
type: "line", type: "line",
data: this.v3, data: this.v2,
smooth: true, smooth: true,
yAxisIndex: 0, yAxisIndex: 0,
label: { label: {
@ -583,10 +579,10 @@ export default {
}, },
}, },
{ {
name: '客户满意度', name: '好评率',
type: 'line', type: 'line',
smooth: true, smooth: true,
data: this.v2, data: this.v4,
yAxisIndex: 0, yAxisIndex: 0,
label: { label: {
show: true, show: true,
@ -595,7 +591,7 @@ export default {
}, },
}, },
] ]
let series3 = [ /*let series3 = [
{ {
name: 'APP使用率', name: 'APP使用率',
type: 'line', type: 'line',
@ -668,8 +664,8 @@ export default {
formatter: '{c}%' formatter: '{c}%'
}, },
}, },
] ]*/
let series4 = [{ /*let series4 = [{
name: '接单时效(分)', name: '接单时效(分)',
type: 'bar', type: 'bar',
data: this.v1, data: this.v1,
@ -693,6 +689,19 @@ export default {
formatter: '{c}%' formatter: '{c}%'
}, },
}, },
]*/
let series4 = [
{
name: '接单时效(分)',
type: 'line',
smooth: true,
data: this.v1,
yAxisIndex: 0,
label: {
show: true,
position: 'top',
},
},
] ]
let series5 = [{ let series5 = [{
name: '到达时效（分）', name: '到达时效（分）',
@ -747,21 +756,15 @@ export default {
formatter: '{value}%' formatter: '{value}%'
} }
} ] } ]
let yAxis3 = [ /*let yAxis3 = [
{ {
type: 'value', type: 'value',
axisLabel: { axisLabel: {
formatter: '{value}%' formatter: '{value}%'
} }
}, },
] ]*/
let yAxis4 = [ let yAxis4 = [
{
type: 'value',
axisLabel: {
formatter: '{value}%'
}
},
{type: 'value'}, {type: 'value'},
] ]
let yAxis5 = [ let yAxis5 = [
@ -783,8 +786,8 @@ export default {
series = series2 series = series2
yAxis = yAxis2 yAxis = yAxis2
} else if (this.activeIndex === 2) { } else if (this.activeIndex === 2) {
series = series3 series = []
yAxis = yAxis3 yAxis = []
} else if (this.activeIndex === 3) { } else if (this.activeIndex === 3) {
if (this.value == 1) { if (this.value == 1) {
series = series4 series = series4
@ -797,7 +800,7 @@ export default {
} }
option = { option = {
title: { title: {
text: this.isMobile ? this.getTitle(this.activeIndex) : '师傅接单时效', text: this.isMobile ? this.getTitle(this.activeIndex) : (this.active === 1 && this.activeIndex === 2) ? '' : '师傅接单时效',
textStyle: { textStyle: {
fontSize: 12 fontSize: 12
}, },
@ -852,41 +855,32 @@ export default {
containLabel: true containLabel: true
}, },
yAxis: [ yAxis: [
{
type: 'value',
axisLabel: {
formatter: '{value}%'
}
},
{type: 'value'}, {type: 'value'},
], ],
series: [{ series: [{
name: '到达时效（分）', name: '到达时效',
type: 'bar', type: 'line',
data: this.v3, data: this.v3,
yAxisIndex: 1, yAxisIndex: 0,
smooth: true, smooth: true,
barWidth: 45,
barGap: '0%', // 设置柱子之间的间隔
label: { label: {
show: true, // 显示标签 show: true, // 显示标签
position: 'top', // 标签位置在柱形顶部 position: 'top', // 标签位置在柱形顶部
} }
}, },
{ {
name: '聚合成功到达时效', name: '平安聚合成功到达时效',
type: 'bar', type: 'line',
data: this.v4, data: this.v4,
yAxisIndex: 1,
smooth: true, smooth: true,
yAxisIndex: 0,
barWidth: 45, barWidth: 45,
barGap: '0%', // 设置柱子之间的间隔
label: { label: {
show: true, // 显示标签 show: true, // 显示标签
position: 'top', // 标签位置在柱形顶部 position: 'top', // 标签位置在柱形顶部
} }
}, },
{ /*{
name: '40分钟到达率', name: '40分钟到达率',
type: 'line', type: 'line',
smooth: true, smooth: true,
@ -897,7 +891,7 @@ export default {
position: 'top', position: 'top',
formatter: '{c}%' formatter: '{c}%'
}, },
}, },*/
] ]
}; };
option && myChart.setOption(option, true); option && myChart.setOption(option, true);
@ -1032,12 +1026,16 @@ export default {
item.timeoutOrderRate=this.formatPercentage(item.timeoutOrderRate) ; item.timeoutOrderRate=this.formatPercentage(item.timeoutOrderRate) ;
item.cancelRate=this.formatPercentage(item.cancelRate) ; item.cancelRate=this.formatPercentage(item.cancelRate) ;
item.urgeRate=this.formatPercentage(item.urgeRate) ; 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.complainOrderRate=this.formatPercentage(item.complainOrderRate) ;
item.pinganFavorableRate=this.formatPercentage(item.pinganFavorableRate) ;
item.customerEvaluateRate=this.formatPercentage(item.customerEvaluateRate) ; item.customerEvaluateRate=this.formatPercentage(item.customerEvaluateRate) ;
item.appRate=this.formatPercentage(item.appRate) ; item.appRate=this.formatPercentage(item.appRate) ;
item.threeMinutesContactRate=this.formatPercentage(item.threeMinutesContactRate) ; item.threeMinutesContactRate=this.formatPercentage(item.threeMinutesContactRate) ;
item.pinganPolymerizationSuccessRate=this.formatPercentage(item.pinganPolymerizationSuccessRate) ; item.pinganPolymerizationSuccessRate=this.formatPercentage(item.pinganPolymerizationSuccessRate) ;
item.zhonghuaPolymerizationSuccessRate=this.formatPercentage(item.zhonghuaPolymerizationSuccessRate) ; item.zhonghuaPolymerizationSuccessRate=this.formatPercentage(item.zhonghuaPolymerizationSuccessRate) ;
item.wholeJuheSuccessRate = this.formatPercentage(item.wholeJuheSuccessRate) ;
item.zdPolymerizationSuccessRate=this.formatPercentage(item.zdPolymerizationSuccessRate) ; item.zdPolymerizationSuccessRate=this.formatPercentage(item.zdPolymerizationSuccessRate) ;
item.polymerizationSuccessRate=this.formatPercentage(item.polymerizationSuccessRate) ; item.polymerizationSuccessRate=this.formatPercentage(item.polymerizationSuccessRate) ;
item.threeMinutesReceivingRate=this.formatPercentage(item.threeMinutesReceivingRate) ; item.threeMinutesReceivingRate=this.formatPercentage(item.threeMinutesReceivingRate) ;
@ -1200,7 +1198,7 @@ export default {
}, },
// 初始化获取当月日期 // 初始化获取当月日期
initDate() { initDate() {
let year='' /*let year=''
let month='' let month=''
if( this.current ) { if( this.current ) {
year = new Date(this.current).getFullYear(); year = new Date(this.current).getFullYear();
@ -1212,7 +1210,25 @@ export default {
let yearAndMonth = year + '-' + (month > 9 ? month : '0' + month); let yearAndMonth = year + '-' + (month > 9 ? month : '0' + month);
this.current = dayjs(new Date(yearAndMonth)).format('YYYY-MM') this.current = dayjs(new Date(yearAndMonth)).format('YYYY-MM')
this.startTime = dayjs(new Date()).format('YYYY-MM') + '-01 00:00:00' 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) this.startMonthTime=this.getStartTimeFromEndTime(this.endTime)
console.log(" this.startMonthTime", this.startMonthTime,this.startTime) console.log(" this.startMonthTime", this.startMonthTime,this.startTime)
}, },
@ -1230,13 +1246,15 @@ export default {
}, },
//获取近五个月的开始时间 //获取近五个月的开始时间
getStartTimeFromEndTime(endTimeStr) { getStartTimeFromEndTime(endTimeStr) {
const endTime = new Date(endTimeStr); /* const endTime = new Date(endTimeStr);
endTime.setMonth(endTime.getMonth() - 5); // 减去5个月 endTime.setMonth(endTime.getMonth() - 5); // 减去5个月
const year = endTime.getFullYear(); const year = endTime.getFullYear();
let month = String(endTime.getMonth() + 1).padStart(2, '0'); // 月份+1，并确保为两位数 let month = String(endTime.getMonth() + 1).padStart(2, '0'); // 月份+1，并确保为两位数
let day = '01'; // 因为我们要的是那个月的第一天 let day = '01'; // 因为我们要的是那个月的第一天
const startTimeStr = `${year}-${month}-${day} `+'00:00:00'; 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) { async changeTab(index) {
try { try {
@ -1249,6 +1267,8 @@ export default {
this.v4 = [] this.v4 = []
this.v5 = [] this.v5 = []
this.v6 = [] this.v6 = []
this.v7 = []
this.v8 = []
await this.twoTabHanldeData() await this.twoTabHanldeData()
this.loadingData = false this.loadingData = false
if (this.active === 1) { if (this.active === 1) {
@ -1307,39 +1327,43 @@ export default {
{label: '取消率(%)', prop: 'cancelRate'}, {label: '取消率(%)', prop: 'cancelRate'},
] ]
} else if (this.activeIndex === 1) { } 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' //自定义字段名称 let props = 'prop' //自定义字段名称
this.detailList?.map((item,index) => { this.detailList?.map((item,index) => {
this.v1.push(item.customerEvaluateRate.replace('%', '')) this.v1.push(item.complainOrderCount)
this.v2.push(item.customerSatisfaction.replace('%', '')) this.v2.push(item.complainOrderRate?.replace('%', ''))
this.v3.push(item.complainOrderRate.replace('%', '')) this.v3.push(item?.pinganFavorableCount)
this.v4.push(item.pinganFavorableRate?.replace('%', ''))
const columnObj = {} const columnObj = {}
columnObj.label = item.month // 每一列的标题的名称 columnObj.label = item.month // 每一列的标题的名称
columnObj.prop = props + index //自定义每一列标题字段名称 columnObj.prop = props + index //自定义每一列标题字段名称
this.etlLabelList.push(columnObj) this.etlLabelList.push(columnObj)
let mappings = [ 'complainOrderCount', 'complainOrderRate', 'customerSatisfaction','customerEvaluateRate' ]; let mappings = [ 'complainOrderCount', 'complainOrderRate', 'pinganFavorableCount','pinganFavorableRate' ];
for (let i = 0; i < mappings.length; i++) { for (let i = 0; i < mappings.length; i++) {
this.$set(this.etlDetailList[i], columnObj.prop, item[mappings[i]]); this.$set(this.etlDetailList[i], columnObj.prop, item[mappings[i]]);
} }
}) })
this.labelList = [ this.labelList = [
{label: '月', prop: 'month'}, {label: '月份', prop: 'month'},
{label: '投诉量', prop: 'complainOrderCount'}, {label: '投诉量', prop: 'complainOrderCount'},
{label: '投诉率(%)', prop: 'complainOrderRate'}, {label: '投诉率', prop: 'complainOrderRate'},
{label: '客户满意度(%)', prop: 'customerSatisfaction'}, {label: '平安好评量', prop: 'pinganFavorableCount'},
{label: '客户评价率(%)', prop: 'customerEvaluateRate'}, {label: '平安好评率', prop: 'pinganFavorableRate'},
] ]
} else if (this.activeIndex === 2) { } else if (this.activeIndex === 2) {
this.etlDetailList=[{ 'month': '使用率(%)' },{ 'month': '3′联系客户率(%)' },{ 'month': '平安聚合成功率(%)' }, { 'month': '中华聚合成功率(%)' } this.etlDetailList=[{ 'month': 'APP使用量' }, { 'month': 'APP使用率' }, { 'month': '平安聚合成功量' },{ 'month': '平安聚合成功率' },
,{ 'month': '中道聚合成功率（%' }, { 'month': '总聚合成功率(%)' }] { 'month': '中华联合聚合成功量' }, { 'month': '中华联合聚合成功率' }, { 'month': '整体聚合成功量' }, { 'month': '整体聚合成功率' }]
let props = 'prop' //自定义字段名称 let props = 'prop' //自定义字段名称
this.detailList?.map((item,index) => { this.detailList?.map((item,index) => {
this.v1.push(item.appRate.replace('%', '')) this.v1.push(item.appUseCount)
this.v2.push(item.threeMinutesContactRate.replace('%', '')) this.v2.push(item.appRate.replace('%', ''))
this.v3.push(item.pinganPolymerizationSuccessRate.replace('%', '')) this.v3.push(item.pinganJuheSuccessCount)
this.v4.push(item.zhonghuaPolymerizationSuccessRate.replace('%', '')) this.v4.push(item.pinganPolymerizationSuccessRate.replace('%', ''))
this.v5.push(item.zdPolymerizationSuccessRate.replace('%', '')) this.v5.push(item.zhonghuaPolymerizationSuccessCount)
this.v6.push(item.polymerizationSuccessRate.replace('%', '')) this.v6.push(item.zhonghuaPolymerizationSuccessRate.replace('%', ''))
this.v7.push(item.wholeJuheSuccessCount)
this.v7.push(item.wholeJuheSuccessRate.replace('%', ''))
const columnObj = {} const columnObj = {}
columnObj.label = item.month // 每一列的标题的名称 columnObj.label = item.month // 每一列的标题的名称
columnObj.prop = props + index //自定义每一列标题字段名称 columnObj.prop = props + index //自定义每一列标题字段名称
@ -1350,16 +1374,18 @@ export default {
} }
}) })
this.labelList = [ this.labelList = [
{label: '月', prop: 'month'}, {label: '月份', prop: 'month'},
{label: '使用率(%)', prop: 'appRate'}, {label: 'APP使用量', prop: 'appUseCount'},
{label: '3′联系客户率(%)', prop: 'threeMinutesContactRate'}, {label: 'APP使用率', prop: 'appRate'},
{label: '平安聚合成功率(%)', prop: 'pinganPolymerizationSuccessRate'}, {label: '平安聚合成功量', prop: 'pinganJuheSuccessCount'},
{label: '中华聚合成功率(%)', prop: 'zhonghuaPolymerizationSuccessRate'}, {label: '平安聚合成功率', prop: 'pinganPolymerizationSuccessRate'},
{label: '中道聚合成功率(%)', prop: 'zdPolymerizationSuccessRate'}, {label: '中华联合聚合成功量', prop: 'zhonghuaPolymerizationSuccessCount'},
{label: '总聚合成功率(%)', prop: 'polymerizationSuccessRate'}, {label: '中华联合聚合成功率', prop: 'zhonghuaPolymerizationSuccessRate'},
{label: '整体聚合成功量', prop: 'wholeJuheSuccessCount'},
{label: '整体聚合成功率', prop: 'wholeJuheSuccessRate'},
] ]
} else if (this.activeIndex === 3) { } else if (this.activeIndex === 3) {
this.etlDetailList=[{ 'month': '接单时效(分)' },{ 'month': '3′接单率(%)' },{ 'month': '到达时效(分)' }, { 'month': '40′到达率(%)' },{'month':'聚合成功到达时效(分)'}] this.etlDetailList=[{ 'month': '接单时效' },{ 'month': '3分钟联系客户率' },{ 'month': '到达时效' },{'month':'平安聚合成功到达时效'}]
let props = 'prop' //自定义字段名称 let props = 'prop' //自定义字段名称
if (this.isMobile) { if (this.isMobile) {
if (this.value == 1) { if (this.value == 1) {
@ -1392,70 +1418,67 @@ export default {
if (this.swithVal) { if (this.swithVal) {
this.detailList?.map(item => { this.detailList?.map(item => {
this.v3.push(item.trailArriving) this.v3.push(item.trailArriving)
this.v4.push(item.trailPolymerizationSuccessArsriving) this.v4.push(item.pinganJuheSuccessArriving)
this.v5.push(item.trailFortyMinutesArrivalRate ? item.trailFortyMinutesArrivalRate.replace('%', '') : item.trailFortyMinutesArrivalRate) // this.v5.push(item.trailFortyMinutesArrivalRate ? item.trailFortyMinutesArrivalRate.replace('%', '') : item.trailFortyMinutesArrivalRate)
}) })
} else { } else {
this.detailList?.map(item => { this.detailList?.map(item => {
this.v3.push(item.minorArriving) this.v3.push(item.minorArriving)
this.v4.push(item.minorPolymerizationSuccessArriving) this.v4.push(item.pinganJuheSuccessArriving)
this.v5.push(item.minorFortyMinutesArrivalRate ? item.minorFortyMinutesArrivalRate.replace('%', '') : item.minorFortyMinutesArrivalRate) // this.v5.push(item.minorFortyMinutesArrivalRate ? item.minorFortyMinutesArrivalRate.replace('%', '') : item.minorFortyMinutesArrivalRate)
}) })
} }
} }
this.labelList = [ this.labelList = [
{label: '月', prop: 'month'}, {label: '月份', prop: 'month'},
{label: '接单时效(分)', prop: 'receiving'}, {label: '接单时效', prop: 'receiving'},
{label: '3′接单率(%)', prop: 'threeMinutesReceivingRate'}, {label: '3分钟联系客户率', prop: 'threeMinutesReceivingRate'},
{label: '到达时效(分)', prop: 'arriving'}, {label: '到达时效', prop: 'arriving'},
{label: '40′到达率(%)', prop: 'fortyMinutesArrivalRate'}, {label: '平安聚合成功到达时效', prop: 'pinganJuheSuccessArriving'},
{label: '聚合成功到达时效(分)', prop: 'polymerizationSuccessArriving'},
] ]
} }
} else if (this.active === 2) { } else if (this.active === 2) {
if (this.activeIndex === 0) {//接单指标 if (this.activeIndex === 0) {//接单指标
this.labelList = [ this.labelList = [
{label: '日', prop: 'date'}, {label: '日', prop: 'date'},
{label: '派遣案件量', prop: 'dispatchOrderCount'}, {label: '派单量', prop: 'dispatchOrderCount'},
{label: '承接案件量', prop: 'receiveOrderCount'}, {label: '接单量', prop: 'receiveOrderCount'},
{label: '完成量', prop: 'finishOrderCount'}, // {label: '完成量', prop: 'finishOrderCount'},
{label: '拒单量', prop: 'refuseOrderCount'}, {label: '拒单量', prop: 'refuseOrderCount'},
{label: '拒单率(%)', prop: 'refuseOrderRate'}, {label: '拒单率', prop: 'refuseOrderRate'},
{label: '超时接单量', prop: 'timeoutOrderCount'}, {label: '超时量', prop: 'timeoutOrderCount'},
{label: '超时率(%)', prop: 'timeoutOrderRate'}, {label: '超时率', prop: 'timeoutOrderRate'},
{label: '客户取消率(%)', prop: 'cancelRate'}, // {label: '客户取消率(%)', prop: 'cancelRate'},
] ]
} else if (this.activeIndex === 1) { } else if (this.activeIndex === 1) {
this.labelList = [ this.labelList = [
{label: '日', prop: 'date'}, {label: '日', prop: 'date'},
{label: '投诉量', prop: 'complainOrderCount'}, {label: '投诉量', prop: 'complainOrderCount'},
{label: '投诉率(%)', prop: 'complainOrderRate'}, {label: '投诉率', prop: 'complainOrderRate'},
{label: '客户评价率(%)', prop: 'customerEvaluateRate'}, {label: '好评量', prop: 'favorableCount'},
{label: '催促率(%)', prop: 'urgeRate'}, {label: '好评率', prop: 'favorableRate'},
{label: '平安评价率', prop: 'pinganEvaluateRate'},
{label: '平安好评率', prop: 'pinganFavorableRate'},
] ]
} else if (this.activeIndex === 2) { } else if (this.activeIndex === 2) {
this.labelList = [ this.labelList = [
{label: '日', prop: 'date'}, {label: '日', prop: 'date'},
{label: '使用率(%)', prop: 'appRate'}, {label: 'APP使用量', prop: 'appUseCount'},
{label: '3′联系客户率(%)', prop: 'threeMinutesContactRate'}, {label: 'APP使用率', prop: 'appRate'},
{label: '平安聚合成功率(%)', prop: 'pinganPolymerizationSuccessRate'}, {label: '平安聚合成功量', prop: 'pinganJuheSuccessCount'},
{label: '中华聚合成功率(%)', prop: 'zhonghuaPolymerizationSuccessRate'}, {label: '平安聚合成功率', prop: 'pinganPolymerizationSuccessRate'},
{label: '中道聚合成功率(%)', prop: 'zdPolymerizationSuccessRate'}, {label: '中华联合聚合成功量', prop: 'zhonghuaPolymerizationSuccessCount'},
{label: '总聚合成功率(%)', prop: 'polymerizationSuccessRate'}, {label: '中华联合聚合成功率', prop: 'zhonghuaPolymerizationSuccessRate'},
{label: '整体聚合成功量', prop: 'wholeJuheSuccessCount'},
{label: '整体聚合成功率', prop: 'wholeJuheSuccessRate'},
] ]
} else if (this.activeIndex === 3) { } else if (this.activeIndex === 3) {
this.labelList = [ this.labelList = [
{label: '日', prop: 'date'}, {label: '日', prop: 'date'},
{label: '接单时效(分)', prop: 'receiving'}, {label: '接单时效(分)', prop: 'receiving'},
{label: '3′接单率(%)', prop: 'threeMinutesReceivingRate'}, {label: '3分钟联系客户率', prop: 'threeMinutesReceivingRate'},
{label: '小修到达时效(分)', prop: 'minorArriving'},
{label: '拖车到达时效(分)', prop: 'trailArriving'},
{label: '困境到达时效(分)', prop: 'dilemmaArriving'},
{label: '到达时效(分)', prop: 'arriving'}, {label: '到达时效(分)', prop: 'arriving'},
{label: '40′到达率(%)', prop: 'fortyMinutesArrivalRate'}, {label: '平安聚合成功到达时效(分)', prop: 'pinganJuheSuccessArriving'},
{label: '小修聚合成功到达时效(分)', prop: 'minorPolymerizationSuccessArriving'},
{label: '拖车聚合成功到达时效(分)', prop: 'trailPolymerizationSuccessArriving'},
{label: '聚合成功到达时效(分)', prop: 'polymerizationSuccessArriving'},
] ]
} }
} }
@ -1584,6 +1607,7 @@ export default {
checkMobile() { checkMobile() {
const userAgent = navigator.userAgent || navigator.vendor || window.opera; const userAgent = navigator.userAgent || navigator.vendor || window.opera;
this.isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent); this.isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent);
// this.isMobile = true
}, },
setType(type) { setType(type) {
switch (type) { switch (type) {
@ -2049,4 +2073,10 @@ export default {
line-height: 1 !important; line-height: 1 !important;
} }
} }
.numRed {
color: red !important;
}
.numGreen {
color: green !important;
}
</style> </style>