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

story#4506, KPI演示优化-240709

Browse Source
This commit is contained in:
zhouxueli
2024-07-10 21:19:53 +08:00
parent 48cd129290
commit 0aa9f3ec04
3 changed files with 317 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/api/kpi.js
View File

@ -36,14 +36,7 @@ export function getKpiDetailsData(data){
data
})
}
/*export function getSupplierId(data){
return request({
url: '/supplier/select/supplier',
method:'GET',
// contentType: 'application/json',
data
})
}*/
// 关键词搜索服务商名称
export function getSupplierId(key) {
return request({
url: '/supplier/select/supplier',
@ -53,3 +46,13 @@ export function getSupplierId(key) {
}
});
}
// supplier/select/driver 关键词搜索司机名称
export function getDriverName(key) {
return request({
url: '/supplier/select/driver',
method: 'GET',
params: {
key: key ,
}
});
}

84
src/views/kpi/components/noFit-table.vue
View File

@ -8,9 +8,16 @@
v-loading="loading"
:cell-style="setTableCellStyle"
class="custom-table">
<el-table-column v-for="column in labelList" :key="column.prop" :prop="column.prop" :label="column.label"
align="center" min-width="100" :width="(isMobile && (column.label=='案件编号' || column.label=='服务内容')) ? 70 : 'auto'">
</el-table-column>
<template v-if="active===1">
<el-table-column v-for="item in labelList" :key="item.prop" :label="item.label" :prop="item.prop" align="center">
<template slot-scope="scope">{{scope.row[item.prop]}} </template>
</el-table-column>
</template>
<template v-else>
<el-table-column v-for="column in labelList" :key="column.prop" :prop="column.prop" :label="column.label"
align="center" min-width="100" :width="(isMobile && (column.label=='案件编号' || column.label=='服务内容')) ? 70 : 'auto'">
</el-table-column>
</template>
</el-table>
</div>
</template>
@ -18,7 +25,7 @@
<script>
export default {
name: "noFit-table",
props: ['tableData', 'labelList', 'loading', 'isMobile'],
props: ['tableData', 'labelList', 'loading', 'isMobile','active'],
data() {
return {}
},
@ -26,12 +33,67 @@ export default {
},
methods: {
setTableCellStyle({ row, column,columnIndex }) {
// 月总表格被转置，原始方法失效，重新定义对比
if(this.active===1){
if(row.month == '3′接单率(%)'){
if(columnIndex){
let res=row[column.property]
const rate = parseFloat(res && res.replace('%', ''));
if(rate < 95){
return {backgroundColor: '#F1B289'}
}
}
}
if(row.month == '接单时效(分)'){
if(columnIndex){
let res=row[column.property]
if(res > 5){
return {backgroundColor: '#F1B289'}
}
}
}
if(row.month == '到达时效(分)'){
if(columnIndex){
let res=row[column.property]
if(res > 40){
return {backgroundColor: '#F1B289'}
}
}
}
if(row.month == '总聚合成功率(%)'){
if(columnIndex){
let res=row[column.property]
const rate = parseFloat(res && res.replace('%', ''));
if(rate < 80){
return {backgroundColor: '#F1B289'}
}
}
}
if(row.month == '使用率(%)'){
if(columnIndex){
let res=row[column.property]
const rate = parseFloat(res && res.replace('%', ''));
if(rate < 95){
return {backgroundColor: '#F1B289'}
}
}
}
if(row.month == '投诉率(%)'){
if(columnIndex){
let res=row[column.property]
const rate = parseFloat(res && res.replace('%', ''));
if(rate > 0.1){
return {backgroundColor: '#F1B289'}
}
}
}
}
// 接单率
if(column.property=='threeMinutesReceivingRate'){
if(columnIndex){
const rate = parseFloat(row.threeMinutesReceivingRate && row.threeMinutesReceivingRate.replace('%', ''));
if(rate < 95){
return {backgroundColor: '#88C9F2'}
return {backgroundColor: '#F1B289'}
}
}
}
@ -39,7 +101,7 @@ export default {
if(column.property=='receiving'){
if(columnIndex){
if(row.receiving > 5){
return {backgroundColor: '#88C9F2'}
return {backgroundColor: '#F1B289'}
}
}
}
@ -47,7 +109,7 @@ export default {
if(column.property=='arriving'){
if(columnIndex){
if(row.arriving > 40){
return {backgroundColor: '#88C9F2'}
return {backgroundColor: '#F1B289'}
}
}
}
@ -56,7 +118,7 @@ export default {
if(columnIndex){
const rate = parseFloat(row.polymerizationSuccessRate && row.polymerizationSuccessRate.replace('%', ''));
if(rate < 80){
return {backgroundColor: '#88C9F2'}
return {backgroundColor: '#F1B289'}
}
}
}
@ -65,7 +127,7 @@ export default {
if(columnIndex){
const rate = parseFloat(row.appRate && row.appRate.replace('%', ''));
if(rate < 95){
return {backgroundColor: '#88C9F2'}
return {backgroundColor: '#F1B289'}
}
}
}
@ -74,7 +136,7 @@ export default {
if(columnIndex){
const rate = parseFloat(row.urgeRate && row.urgeRate.replace('%', ''));
if(rate > 3){
return {backgroundColor: '#88C9F2'}
return {backgroundColor: '#F1B289'}
}
}
}
@ -83,7 +145,7 @@ export default {
if(columnIndex){
const rate = parseFloat(row.complainOrderRate.replace('%', ''));
if(rate > 0.1){
return {backgroundColor: '#88C9F2'}
return {backgroundColor: '#F1B289'}
}
}
}

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

@ -6,7 +6,7 @@
</div>
<div v-else class="webHeadWrap" :style="'justify-content:'+(isZd==1 ? 'space-between':'center')">
<div class="empty" v-if="isZd==1"></div>
<div class="title">KPI.数据看板<span v-if="isZd!=1">--{{ current }}月</span></div>
<div class="title">KPI.数据看板<span v-if="isZd==1">--中道救援</span><span v-if="isZd!=1">--{{ current }}月</span></div>
<!-- 只有中道账号才显示搜索框 -->
<div class="searchWrap" v-if="isZd==1">
<span class="month">{{ current }}月</span>
@ -31,6 +31,8 @@
</div>
<van-tabs v-model="active" sticky @click="onClick">
<van-tab v-for="(item,index) in tabArr" :key="index" :title="item.name"></van-tab>
<div v-if="isMobile && !([0,1,2,3].includes(active))" class="tipArrow left">{{ leftArr }}</div>
<div v-if="isMobile && !([8,9].includes(active))" class="tipArrow right">>>></div>
</van-tabs>
<div v-loading="loadingData" :class="{'contentWrap':true,'webcontentWrap':!isMobile}" v-if="active===0">
<div :class="{'reciceOrder':true,'webCom':!isMobile}">
@ -93,10 +95,25 @@
</div>
</div>
<div :class="{'reciceOrder':true,'webCom':!isMobile,'store':isMobile}">
<div class="title">综合打分</div>
<div class="storeWrap" v-if="indexData">
<circle-char ref="Doughnut7" :data="indexData && indexData.score" :bg-color="'#00D273'" :is-store="true"></circle-char>
<div class="scoreTitle">
<span class="title">综合打分</span>
<i class="el-icon-question" @click.prevent="showScoreChart = !showScoreChart"></i>
</div>
<div class="storeWrap" v-if="indexData">
<circle-char v-if="showScoreChart" ref="Doughnut7" :data="indexData && indexData.score" :bg-color="'#00D273'" :is-store="true"></circle-char>
<div v-else>
<div><span class="defen">接单得分:</span>{{ indexData.orderScore }}</div>
<div><span class="defen">接单时效得分:</span>{{ indexData.orderAgeingScore }}</div>
<div><span class="defen">到达时效得分:</span>{{ indexData.arriveAgeingScore }}</div>
<div><span class="defen">聚合成功率得分:</span>{{ indexData.polymerizationSuccessScore }}</div>
<div><span class="defen">APP使用率得分:</span>{{ indexData.appUseScore }}</div>
<div><span class="defen">催促率得分:</span>{{ indexData.urgeScore }}</div>
<div><span class="defen">投诉率得分:</span>{{ indexData.complainScore }}</div>
</div>
</div>
</div>
<div>
</div>
<div v-if="isMobile" style="padding: 20px"></div>
</div>
@ -143,12 +160,30 @@
</template>
</div>
<div :class="{'webTab':!isMobile,}">
<noFit-table :is-mobile='isMobile' :table-data="detailList" :label-list="labelList"></noFit-table>
</div>
<noFit-table v-if="isMobile" :active='active' :is-mobile='isMobile' :table-data="etlDetailList" :label-list="etlLabelList"></noFit-table>
<noFit-table v-else :active='active' :is-mobile='isMobile' :table-data="detailList" :label-list="labelList"></noFit-table>
</div>
</div>
<div v-loading="loadingData" class="contentWrap monthTotal" v-if="[2,3,4].includes(active)">
<div class="searchDriverName" v-if="[3,4].includes(active)">
<el-input placeholder="请输入师傅名称" v-model.trim="driverName" @change="getData" />
<el-select
v-model="driverName"
filterable
remote
reserve-keyword
placeholder="请输入后选择"
:remote-method="driverremoteMethod"
@change="getData"
:loading="driverselectLoading"
:style="isMobile ? 'width:100%' : 'width:50%'"
>
<el-option
v-for="item in driverselectOption"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</div>
<div :class="{'tabWrap':true,'webTabWrap':!isMobile,'mobileTab':isMobile}">
<div v-for="(item,index) in (active===3 ? driverList : list)" :class="activeIndex===index ? 'active' : ''"
@ -157,22 +192,23 @@
</div>
</div>
<div :class="{'comTab':true}">
<noFit-table :is-mobile='isMobile' :table-data="detailList" :label-list="labelList"></noFit-table>
<noFit-table :active='active' :is-mobile='isMobile' :table-data="detailList" :label-list="labelList"></noFit-table>
</div>
<el-pagination
v-if="active !== 2"
small
v-if="active !== 2"
:page-sizes="[20, 50, 100]"
:current-page.sync="pageNum"
:page-size.sync="pageSize"
@current-change="getKpiData"
@size-change="getKpiData"
layout="prev, pager, next"
layout="prev, pager, next,sizes"
:total="total">
</el-pagination>
</div>
<div v-loading="loadingData" class="contentWrap monthTotal" v-if="[5,6,7,8,9].includes(active)">
<div :class="{'comTab':true,'detailTable':isMobile}">
<noFit-table :is-mobile='isMobile' :table-data="detailList" :label-list="labelList"
<noFit-table :active='active' :is-mobile='isMobile' :table-data="detailList" :label-list="labelList"
:loading="loading"></noFit-table>
</div>
<el-pagination
@ -196,7 +232,8 @@ import {
getStatisticsKpiByMonth,
getStatisticsKpi,
getDriverStatisticsKpi,
getSupplierId
getSupplierId,
getDriverName
} from "@/api/kpi.js"
import {myMixins} from "@/utils/myMixins"
import CircleChar from "@/views/kpi/components/circleChar.vue";
@ -223,6 +260,8 @@ export default {
indexData: {},
detailList: [],
labelList: [],
etlDetailList: [],
etlLabelList: [],
loading: false,
loadingData: false,
v1: [],
@ -242,7 +281,7 @@ export default {
{value: '2', label: '到达时效'},
],
pageNum: 1,
pageSize: 10,
pageSize: 20,
total: 0,
swithVal: true,
supplierId:'',//1128
@ -250,6 +289,10 @@ export default {
selectOption: [],
driverId:'',//68517
driverName:'',
driverselectLoading: false,
driverselectOption: [],
leftArr:'<<<',
showScoreChart:true
}
},
async mounted() {
@ -261,6 +304,9 @@ export default {
this.checkMobile();
const urlParams = new URLSearchParams(window.location.search);
this.isZd = urlParams?.get('isZd') || ''
/* if(!this.isMobile && this.isZd && this.isZd==1){
this.supplierId='1127'
}*/
},
async activated() {
},
@ -293,11 +339,26 @@ export default {
this.selectOption = [];
}
},
async driverremoteMethod(query){
if (query !== '') {
this.driverselectLoading = true;
try {
const result = await getDriverName(query);
this.driverselectOption = result.data || []
} catch (error) {
this.driverselectOption = [];
} finally {
this.driverselectLoading = false;
}
} else {
this.driverselectOption = [];
}
},
async searchHandle() {//web端服务商搜索操作
console.log("搜索按钮")
},
async changeHandle() {
await this.getData();
await this.twoTabHanldeData();
await this.drawLine();
},
async switchHandle() {
@ -317,6 +378,8 @@ export default {
this.v5 = []
this.v6 = []
this.xAxisArr = []
this.etlDetailList=[]
this.etlLabelList=[]
await this.getKpiData()
this.loadingData = false
} finally {
@ -822,11 +885,14 @@ export default {
item.threeMinutesReceivingRate=this.formatPercentage(item.threeMinutesReceivingRate) ;
item.fortyMinutesArrivalRate=this.formatPercentage(item.fortyMinutesArrivalRate) ;
item.customerSatisfaction=this.formatPercentage(item.customerSatisfaction) ;
console.log("")
let formatVal = dayjs(item.statisticsDate).format('DD');
return {...item, date: formatVal};
});
this.loading = false;
if(this.active===4 && !this.driverName){
this.detailList=[]
this.total=0
}
await this.twoTabHanldeData();
} else if ([5, 6, 7, 8, 9].includes(this.active)) {
this.detailList = []
@ -872,8 +938,8 @@ export default {
{label: '服务内容', prop: 'serviceName'},
{label: '接单车号', prop: 'plateNumber'},
{label: '接单师傅', prop: 'driverName'},
{label: '手机号', prop: 'driverPhone'},
{label: '客户投诉内容', prop: 'reason'},
{label: '投诉时间', prop: 'complainCreateTime'},
{label: '投诉类型', prop: 'complainTypeString'},
]
} else if (this.active === 8) {//不使用App案件明细
// console.log("不使用App案件明细")
@ -881,11 +947,19 @@ export default {
{label: '案件编号', prop: 'orderCode'},
{label: '服务内容', prop: 'serviceName'},
{label: '接单师傅手机号', prop: 'driverPhone'},
{label: '工单创建时间', prop: 'orderCreateTime'},
{label: '事发地', prop: 'vehiclePointAddress'},
]
} else if (this.active === 9) {//车辆在线情况
this.labelList = [
{label: '日期', prop: 'date'},
{label: '在线车辆数量', prop: 'vehicleCount'},
{label: '0点在线车辆数量', prop: 'zeroClockVehicleCount'},
{label: '8点在线车辆数量', prop: 'eightClockVehicleCount'},
{label: '12点在线车辆数量', prop: 'twelveClockVehicleCount'},
{label: '16点在线车辆数量', prop: 'sixteenClockVehicleCount'},
{label: '20点在线车辆数量', prop: 'twentyClockVehicleCount'},
{label: '22点在线车辆数量', prop: 'twentyTwoClockVehicleCount'},
]
}
}
@ -959,13 +1033,31 @@ export default {
},
// 二级tab切可不调接口，需再次处理数据,1,2,3,4
twoTabHanldeData() {
this.etlDetailList=[]
this.etlLabelList=[]
if (this.active === 1) {
const columnObj = {} //创建标题数组中第一个对象
columnObj.label = 'KPI' //第一个标题名称
columnObj.prop = 'month' //第一个标题名称对应的字段
this.etlLabelList.push(columnObj)
if (this.activeIndex === 0) {//接单指标
this.detailList?.map(item => {
this.etlDetailList=[{ 'month': '派遣量' },{ 'month': '承接量' },{ 'month': '完成量' },
{ 'month': '拒单量' },{ 'month': '拒单率(%)' },{ 'month': '超时接单量' },{ 'month': '超时率(%)' },{ 'month': '客户取消率(%)' }]
let props = 'prop' //自定义字段名称
this.detailList?.map((item,index) => {
this.v1.push(item.dispatchOrderCount)
this.v2.push(item.refuseOrderRate.replace('%', ''))
this.v3.push(item.timeoutOrderRate.replace('%', ''))
this.v4.push(item.cancelRate.replace('%', ''))
const columnObj = {}
columnObj.label = item.month // 每一列的标题的名称
columnObj.prop = props + index //自定义每一列标题字段名称
this.etlLabelList.push(columnObj)
let mappings = [ 'dispatchOrderCount', 'receiveOrderCount', 'finishOrderCount','refuseOrderCount',
'refuseOrderRate', 'timeoutOrderCount', 'timeoutOrderRate','cancelRate' ];
for (let i = 0; i < mappings.length; i++) {
this.$set(this.etlDetailList[i], columnObj.prop, item[mappings[i]]);
}
})
this.labelList = [
{label: '月', prop: 'month'},
@ -973,43 +1065,66 @@ export default {
{label: '承接量', prop: 'receiveOrderCount'},
{label: '完成量', prop: 'finishOrderCount'},
{label: '拒单量', prop: 'refuseOrderCount'},
{label: '拒单率（%）', prop: 'refuseOrderRate'},
{label: '拒单率(%)', prop: 'refuseOrderRate'},
{label: '超时接单量', prop: 'timeoutOrderCount'},
{label: '超时率（%）', prop: 'timeoutOrderRate'},
{label: '取消率（%）', prop: 'cancelRate'},
{label: '超时率(%)', prop: 'timeoutOrderRate'},
{label: '取消率(%)', prop: 'cancelRate'},
]
} else if (this.activeIndex === 1) {
this.detailList?.map(item => {
this.etlDetailList=[{ 'month': '投诉量' },{ 'month': '投诉率(%)' },{ 'month': '客户满意度(%)' }, { 'month': '客户评价率(%)' }]
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('%', ''))
const columnObj = {}
columnObj.label = item.month // 每一列的标题的名称
columnObj.prop = props + index //自定义每一列标题字段名称
this.etlLabelList.push(columnObj)
let mappings = [ 'complainOrderCount', 'complainOrderRate', 'customerSatisfaction','customerEvaluateRate' ];
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: 'complainOrderCount'},
{label: '投诉率（%）', prop: 'complainOrderRate'},
{label: '客户满意度（%）', prop: 'customerSatisfaction'},
{label: '客户评价率（%）', prop: 'customerEvaluateRate'},
{label: '投诉率(%)', prop: 'complainOrderRate'},
{label: '客户满意度(%)', prop: 'customerSatisfaction'},
{label: '客户评价率(%)', prop: 'customerEvaluateRate'},
]
} else if (this.activeIndex === 2) {
this.detailList?.map(item => {
this.etlDetailList=[{ 'month': '使用率(%)' },{ 'month': '3′联系客户率(%)' },{ '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('%', ''))
const columnObj = {}
columnObj.label = item.month // 每一列的标题的名称
columnObj.prop = props + index //自定义每一列标题字段名称
this.etlLabelList.push(columnObj)
let mappings = [ 'appRate', 'threeMinutesContactRate', 'pinganPolymerizationSuccessRate','zhonghuaPolymerizationSuccessRate','zdPolymerizationSuccessRate','polymerizationSuccessRate' ];
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: 'appRate'},
{label: '3′联系客户率（%）', prop: 'threeMinutesContactRate'},
{label: '平安聚合成功率（%）', prop: 'pinganPolymerizationSuccessRate'},
{label: '中华聚合成功率（%）', prop: 'zhonghuaPolymerizationSuccessRate'},
{label: '中道聚合成功率（%）', prop: 'zdPolymerizationSuccessRate'},
{label: '总聚合成功率（%）', prop: 'polymerizationSuccessRate'},
{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.etlDetailList=[{ 'month': '接单时效(分)' },{ 'month': '3′接单率(%)' },{ 'month': '到达时效(分)' }, { 'month': '40′到达率(%)' },{'month':'聚合成功到达时效(分)'}]
let props = 'prop' //自定义字段名称
if (this.isMobile) {
if (this.value == 1) {
this.detailList?.map(item => {
@ -1023,6 +1138,16 @@ export default {
this.v3.push(item.fortyMinutesArrivalRate.replace('%', ''))
})
}
this.detailList?.map((item,index) => {
const columnObj = {}
columnObj.label = item.month // 每一列的标题的名称
columnObj.prop = props + index //自定义每一列标题字段名称
this.etlLabelList.push(columnObj)
let mappings = [ 'receiving', 'threeMinutesReceivingRate', 'arriving','fortyMinutesArrivalRate','polymerizationSuccessArriving'];
for (let i = 0; i < mappings.length; i++) {
this.$set(this.etlDetailList[i], columnObj.prop, item[mappings[i]]);
}
})
} else {
this.detailList?.map(item => {
this.v1.push(item.receiving)
@ -1045,9 +1170,9 @@ export default {
this.labelList = [
{label: '月', prop: 'month'},
{label: '接单时效(分)', prop: 'receiving'},
{label: '3′接单率（%）', prop: 'threeMinutesReceivingRate'},
{label: '3′接单率(%)', prop: 'threeMinutesReceivingRate'},
{label: '到达时效(分)', prop: 'arriving'},
{label: '40′到达率（%）', prop: 'fortyMinutesArrivalRate'},
{label: '40′到达率(%)', prop: 'fortyMinutesArrivalRate'},
{label: '聚合成功到达时效(分)', prop: 'polymerizationSuccessArriving'},
]
}
@ -1059,39 +1184,39 @@ export default {
{label: '承接案件量', prop: 'receiveOrderCount'},
{label: '完成量', prop: 'finishOrderCount'},
{label: '拒单量', prop: 'refuseOrderCount'},
{label: '拒单率（%）', prop: 'refuseOrderRate'},
{label: '拒单率(%)', prop: 'refuseOrderRate'},
{label: '超时接单量', prop: 'timeoutOrderCount'},
{label: '超时率（%）', prop: 'timeoutOrderRate'},
{label: '客户取消率（%）', prop: 'cancelRate'},
{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: '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: '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: '3′接单率(%)', prop: 'threeMinutesReceivingRate'},
{label: '小修到达时效(分)', prop: 'minorArriving'},
{label: '拖车到达时效(分)', prop: 'trailArriving'},
{label: '困境到达时效(分)', prop: 'dilemmaArriving'},
{label: '到达时效(分)', prop: 'arriving'},
{label: '40′到达率（%）', prop: 'fortyMinutesArrivalRate'},
{label: '40′到达率(%)', prop: 'fortyMinutesArrivalRate'},
{label: '小修聚合成功到达时效(分)', prop: 'minorPolymerizationSuccessArriving'},
{label: '拖车聚合成功到达时效(分)', prop: 'trailPolymerizationSuccessArriving'},
{label: '聚合成功到达时效(分)', prop: 'polymerizationSuccessArriving'},
@ -1103,39 +1228,39 @@ export default {
{label: '师傅姓名', prop: 'driverName'},
{label: '承接案件量', prop: 'receiveOrderCount'},
{label: '拒单量', prop: 'refuseOrderCount'},
{label: '拒单率（%）', prop: 'refuseOrderRate'},
{label: '拒单率(%)', prop: 'refuseOrderRate'},
{label: '超时接单量', prop: 'timeoutOrderCount'},
{label: '超时率（%）', prop: 'timeoutOrderRate'},
{label: '超时率(%)', prop: 'timeoutOrderRate'},
]
} else if (this.activeIndex === 1) {
this.labelList = [
{label: '师傅姓名', prop: 'driverName'},
{label: '承接案件量', prop: 'receiveOrderCount'},
{label: '投诉量', prop: 'complainOrderCount'},
{label: '投诉率（%）', prop: 'complainOrderRate'},
{label: '客户满意度（%）', prop: 'customerSatisfaction'},
{label: '客户评价率（%）', prop: 'customerEvaluateRate'},
{label: '催促率（%）', prop: 'urgeRate'},
{label: '投诉率(%)', prop: 'complainOrderRate'},
{label: '客户满意度(%)', prop: 'customerSatisfaction'},
{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: 'App使用率(%)', prop: 'appRate'},
{label: '3′联系客户率(%)', prop: 'threeMinutesContactRate'},
{label: '平安聚合成功率(%)', prop: 'pinganPolymerizationSuccessRate'},
{label: '中华聚合成功率(%)', prop: 'zhonghuaPolymerizationSuccessRate'},
{label: '中道聚合成功率(%)', prop: 'zdPolymerizationSuccessRate'},
{label: '总聚合成功率(%)', prop: 'polymerizationSuccessRate'},
{label: '日均在线时长(h)', prop: 'onlineDuration'},
]
} else if (this.activeIndex === 3) {
this.labelList = [
{label: '师傅姓名', prop: 'driverName'},
{label: '接单时效(分)', prop: 'receiving'},
{label: '3′接单率（%）', prop: 'threeMinutesReceivingRate'},
{label: '3′接单率(%)', prop: 'threeMinutesReceivingRate'},
{label: '到达时效(分)', prop: 'arriving'},
{label: '40′到达率（%）', prop: 'fortyMinutesArrivalRate'},
{label: '40′到达率(%)', prop: 'fortyMinutesArrivalRate'},
{label: '聚合成功到达时效(分)', prop: 'polymerizationSuccessArriving'},
]
}
@ -1143,42 +1268,46 @@ export default {
if (this.activeIndex === 0) {//接单指标
this.labelList = [
{label: '日', prop: 'date'},
{label: '师傅姓名', prop: 'driverName'},
{label: '派遣案件量', prop: 'dispatchOrderCount'},
{label: '承接案件量', prop: 'receiveOrderCount'},
{label: '完成量', prop: 'finishOrderCount'},
{label: '拒单量', prop: 'refuseOrderCount'},
{label: '拒单率（%）', prop: 'refuseOrderRate'},
{label: '拒单率(%)', prop: 'refuseOrderRate'},
{label: '超时接单量', prop: 'timeoutOrderCount'},
{label: '超时率（%）', prop: 'timeoutOrderRate'},
{label: '客户取消率（%）', prop: 'cancelRate'},
{label: '超时率(%)', prop: 'timeoutOrderRate'},
{label: '客户取消率(%)', prop: 'cancelRate'},
]
} else if (this.activeIndex === 1) {
this.labelList = [
{label: '日', prop: 'date'},
{label: '师傅姓名', prop: 'driverName'},
{label: '投诉量', prop: 'complainOrderCount'},
{label: '投诉率（%）', prop: 'complainOrderRate'},
{label: '客户满意度（%）', prop: 'customerSatisfaction'},
{label: '客户评价率（%）', prop: 'customerEvaluateRate'},
{label: '催促率（%）', prop: 'urgeRate'},
{label: '投诉率(%)', prop: 'complainOrderRate'},
{label: '客户满意度(%)', prop: 'customerSatisfaction'},
{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: 'driverName'},
{label: '使用率(%)', prop: 'appRate'},
{label: '3′联系客户率(%)', prop: 'threeMinutesContactRate'},
{label: '平安聚合成功率(%)', prop: 'pinganPolymerizationSuccessRate'},
{label: '中华聚合成功率(%)', prop: 'zhonghuaPolymerizationSuccessRate'},
{label: '中道聚合成功率(%)', prop: 'zdPolymerizationSuccessRate'},
{label: '总聚合成功率(%)', prop: 'polymerizationSuccessRate'},
{label: '日均在线时长(h)', prop: 'onlineDuration'},
]
} else if (this.activeIndex === 3) {
this.labelList = [
{label: '日', prop: 'date'},
{label: '师傅姓名', prop: 'driverName'},
{label: '接单时效(分)', prop: 'receiving'},
{label: '3′接单率（%）', prop: 'threeMinutesReceivingRate'},
{label: '3′接单率(%)', prop: 'threeMinutesReceivingRate'},
{label: '到达时效(分)', prop: 'arriving'},
{label: '40′到达率（%）', prop: 'fortyMinutesArrivalRate'},
{label: '40′到达率(%)', prop: 'fortyMinutesArrivalRate'},
{label: '聚合成功到达时效(分)', prop: 'polymerizationSuccessArriving'},
]
}
@ -1335,10 +1464,21 @@ export default {
@include whBg(375px, 146px, #FFFFFF);
@include sizing4Padding(19px, 25px, 38px, 19px);
margin-bottom: 10px;
.scoreTitle{
@include flexBetCen;
i{
cursor: pointer;
font-size: 14px;
}
}
.storeWrap {
width: 100%;
text-align: center;
.defen{
display: inline-block;
width: 92px;
text-align: right;
}
}
.title {
@ -1396,13 +1536,25 @@ export default {
.webcontentWrap {
@include wh(100%, calc(100% - 86px));
}
.tipArrow{
position: absolute;
top: 10px;
color: #FFFFFF;
font-size: 12px;
}
.left{
left: 0;
}
.right{
right: 0px;
}
.tabWrap {
@include wh(100%, 22px);
@include flexColAround;
margin: 10px 0;
div {
cursor: pointer;
padding: 2px 8px;
border-radius: 7px;
font-size: 12px;
@ -1431,12 +1583,10 @@ export default {
border-color: #F1B289 transparent transparent transparent;
}
}
.webTabWrap {
width: 40% !important;
.active:after {
margin-top: 5px;
margin-top: 4px;
}
}