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 data
}) })
} }
/*export function getSupplierId(data){ // 关键词搜索服务商名称
return request({
url: '/supplier/select/supplier',
method:'GET',
// contentType: 'application/json',
data
})
}*/
export function getSupplierId(key) { export function getSupplierId(key) {
return request({ return request({
url: '/supplier/select/supplier', 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" v-loading="loading"
:cell-style="setTableCellStyle" :cell-style="setTableCellStyle"
class="custom-table"> class="custom-table">
<el-table-column v-for="column in labelList" :key="column.prop" :prop="column.prop" :label="column.label" <template v-if="active===1">
align="center" min-width="100" :width="(isMobile && (column.label=='案件编号' || column.label=='服务内容')) ? 70 : 'auto'"> <el-table-column v-for="item in labelList" :key="item.prop" :label="item.label" :prop="item.prop" align="center">
</el-table-column> <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> </el-table>
</div> </div>
</template> </template>
@ -18,7 +25,7 @@
<script> <script>
export default { export default {
name: "noFit-table", name: "noFit-table",
props: ['tableData', 'labelList', 'loading', 'isMobile'], props: ['tableData', 'labelList', 'loading', 'isMobile','active'],
data() { data() {
return {} return {}
}, },
@ -26,12 +33,67 @@ export default {
}, },
methods: { methods: {
setTableCellStyle({ row, column,columnIndex }) { 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(column.property=='threeMinutesReceivingRate'){
if(columnIndex){ if(columnIndex){
const rate = parseFloat(row.threeMinutesReceivingRate && row.threeMinutesReceivingRate.replace('%', '')); const rate = parseFloat(row.threeMinutesReceivingRate && row.threeMinutesReceivingRate.replace('%', ''));
if(rate < 95){ if(rate < 95){
return {backgroundColor: '#88C9F2'} return {backgroundColor: '#F1B289'}
} }
} }
} }
@ -39,7 +101,7 @@ export default {
if(column.property=='receiving'){ if(column.property=='receiving'){
if(columnIndex){ if(columnIndex){
if(row.receiving > 5){ if(row.receiving > 5){
return {backgroundColor: '#88C9F2'} return {backgroundColor: '#F1B289'}
} }
} }
} }
@ -47,7 +109,7 @@ export default {
if(column.property=='arriving'){ if(column.property=='arriving'){
if(columnIndex){ if(columnIndex){
if(row.arriving > 40){ if(row.arriving > 40){
return {backgroundColor: '#88C9F2'} return {backgroundColor: '#F1B289'}
} }
} }
} }
@ -56,7 +118,7 @@ export default {
if(columnIndex){ if(columnIndex){
const rate = parseFloat(row.polymerizationSuccessRate && row.polymerizationSuccessRate.replace('%', '')); const rate = parseFloat(row.polymerizationSuccessRate && row.polymerizationSuccessRate.replace('%', ''));
if(rate < 80){ if(rate < 80){
return {backgroundColor: '#88C9F2'} return {backgroundColor: '#F1B289'}
} }
} }
} }
@ -65,7 +127,7 @@ export default {
if(columnIndex){ if(columnIndex){
const rate = parseFloat(row.appRate && row.appRate.replace('%', '')); const rate = parseFloat(row.appRate && row.appRate.replace('%', ''));
if(rate < 95){ if(rate < 95){
return {backgroundColor: '#88C9F2'} return {backgroundColor: '#F1B289'}
} }
} }
} }
@ -74,7 +136,7 @@ export default {
if(columnIndex){ if(columnIndex){
const rate = parseFloat(row.urgeRate && row.urgeRate.replace('%', '')); const rate = parseFloat(row.urgeRate && row.urgeRate.replace('%', ''));
if(rate > 3){ if(rate > 3){
return {backgroundColor: '#88C9F2'} return {backgroundColor: '#F1B289'}
} }
} }
} }
@ -83,7 +145,7 @@ export default {
if(columnIndex){ if(columnIndex){
const rate = parseFloat(row.complainOrderRate.replace('%', '')); const rate = parseFloat(row.complainOrderRate.replace('%', ''));
if(rate > 0.1){ if(rate > 0.1){
return {backgroundColor: '#88C9F2'} return {backgroundColor: '#F1B289'}
} }
} }
} }

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

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