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

task#14196，kpi界面适配web端更改css样式

Browse Source
This commit is contained in:
zhouxueli
2024-07-03 14:05:14 +08:00
parent f45792b527
commit 7785c7ecbe
3 changed files with 278 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
public/index.html
View File

@ -38,12 +38,12 @@
let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize' let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
recalc = function () { recalc = function () {
var clientWidth = docEl.clientWidth; var clientWidth = docEl.clientWidth;
console.log("clientWidth",clientWidth) // console.log("clientWidth",clientWidth)
if (!clientWidth) return; if (!clientWidth) return;
if (clientWidth < 400) { if (clientWidth < 400) {
clientWidth = 400; clientWidth = 400;
} }
docEl.style.fontSize = 20 * (clientWidth / 700) + 'px'; docEl.style.fontSize = 18 * (clientWidth / 650) + 'px';
}; };
if (!doc.addEventListener) return; if (!doc.addEventListener) return;
var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
@ -53,7 +53,7 @@
win.addEventListener(resizeEvt, recalc, false); win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false);
} }
console.log("isMobile",isMobile) // console.log("isMobile",isMobile)
})(document, window); })(document, window);
</script> </script>
</body> </body>

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

@ -16,7 +16,7 @@ export default {
mounted() { mounted() {
setTimeout(()=>{ setTimeout(()=>{
this.drawHandle(); this.drawHandle();
},100) },1000)
}, },
methods:{ methods:{
handle(){ handle(){

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

@ -1,49 +1,59 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<div class="headWrap"> <div v-if="isMobile" class="headWrap">
<div class="title">KPI.数据看板</div> <div class="title">KPI.数据看板</div>
<div class="titleName">6月-我是服务商名称</div> <div class="titleName">6月-我是服务商名称</div>
</div> </div>
<div v-else class="webHeadWrap">
<div class="empty"></div>
<div class="title">KPI.数据看板</div>
<!-- 只有中道账号才显示搜索框 -->
<div class="searchWrap">
<span class="month">7月</span>
<input class="ipt" maxlength="20" placeholder="请输入服务商名称" v-model="supplierName" />
<i class="el-icon-search" @click="searchHandle"></i>
</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>
</van-tabs> </van-tabs>
<div class="contentWrap" v-if="active===0"> <div :class="{'contentWrap':true,'webcontentWrap':!isMobile}" v-if="active===0">
<div class="reciceOrder"> <div :class="{'reciceOrder':true,'webCom':!isMobile}">
<div class="title">接单指标</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.receiveOrderCount }}</div> <div class="num">{{ indexData.receiveOrderCount }}</div>
<div class="itemTitle">承接案件量</div> <div class="itemTitle">承接案件量</div>
</div> </div>
<div class="center common" @click="active = 5"> <div class="center common" @click="clickJumpHandle(5)">
<div class="num">{{ indexData.refuseOrderRate }}</div> <div class="num">{{ indexData.refuseOrderRate }}</div>
<div class="itemTitle">拒单率 ></div> <div class="itemTitle">拒单率 ></div>
</div> </div>
<div class="right common" @click="active = 5"> <div class="right common" @click="clickJumpHandle(6)">
<div class="num">{{ indexData.timeoutOrderRate }}</div> <div class="num">{{ indexData.timeoutOrderRate }}</div>
<div class="itemTitle">超时率 ></div> <div class="itemTitle">超时率 ></div>
</div> </div>
</div> </div>
</div> </div>
<div class="reciceOrder evaluate"> <div :class="{'reciceOrder':true,'webCom':!isMobile,'evaluate':isMobile}">
<div class="title">客户评价</div> <div class="title">客户评价</div>
<div class="reciceOrderIWrap"> <div class="reciceOrderIWrap">
<circle-char :data="indexData.complainOrderRate" :title-text="'投诉率'" :bg-color="'#9485ED'" <circle-char :data="indexData.complainOrderRate" :title-text="'投诉率'" :bg-color="'#9485ED'"
:is-store="false" @clickComplain="active = 7"></circle-char> :is-store="false" @clickComplain="clickJumpHandle(7)"></circle-char>
<circle-char :data="indexData.customerSatisfaction" :title-text="'客户满意度'" :bg-color="'#5DDECF'" ></circle-char> <circle-char :data="indexData.customerSatisfaction" :title-text="'客户满意度'" :bg-color="'#5DDECF'" ></circle-char>
<circle-char :data="indexData.urgeRate" :title-text="'催促率'" :bg-color="'#FFADAD'" ></circle-char> <circle-char :data="indexData.urgeRate" :title-text="'催促率'" :bg-color="'#FFADAD'" ></circle-char>
</div> </div>
</div> </div>
<div class="reciceOrder appUse"> <div :class="{'reciceOrder':true,'webCom':!isMobile,'appUse':isMobile}">
<div class="title">APP使用</div> <div class="title">APP使用</div>
<div class="reciceOrderIWrap"> <div class="reciceOrderIWrap">
<circle-char :data="indexData.appRate" :title-text="'使用率'" :bg-color="'#3AA1FF'" :is-store="false" @clickUse="active = 8"></circle-char> <circle-char :data="indexData.appRate" :title-text="'使用率'" :bg-color="'#3AA1FF'" :is-store="false" @clickUse="clickJumpHandle(8)"></circle-char>
<circle-char :data="indexData.threeMinutesContactRate" :title-text="'3′联系客户率'" :bg-color="'#5D7FD7'" ></circle-char> <circle-char :data="indexData.threeMinutesContactRate" :title-text="'3′联系客户率'" :bg-color="'#5D7FD7'" ></circle-char>
<circle-char :data="indexData.polymerizationSuccessRate" :title-text="'总聚合成功率'" :bg-color="'#4ECB73'" ></circle-char> <circle-char :data="indexData.polymerizationSuccessRate" :title-text="'总聚合成功率'" :bg-color="'#4ECB73'" ></circle-char>
</div> </div>
</div> </div>
<div class="reciceOrder ageing"> <div :class="{'reciceOrder':true,'webCom':!isMobile}">
<div class="title">时效</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.receiving}}</div> <div class="num">{{indexData.receiving}}</div>
@ -61,172 +71,82 @@
</div> </div>
</div> </div>
</div> </div>
<div class="reciceOrder store"> <div :class="{'reciceOrder':true,'webCom':!isMobile,'store':isMobile}">
<div class="title">综合打分</div> <div class="title">综合打分</div>
<div class="storeWrap"> <div class="storeWrap">
<circle-char :data="indexData.score" :bg-color="'#00D273'" :is-store="true"></circle-char> <circle-char :data="indexData.score" :bg-color="'#00D273'" :is-store="true"></circle-char>
</div> </div>
</div> </div>
<div style="padding: 30px"></div> <div v-if="isMobile" style="padding: 30px"></div>
</div> </div>
<div class="contentWrap active2" v-if="active===1"> <div class="contentWrap active2" v-if="active===1">
<div class="tabWrap"> <div class="tabWrap">
<div v-for="(item,index) in list" :class="activeIndex===index ? 'active' : ''" :key="index" @click="changeTab(index)">{{item.name}}</div> <div v-for="(item,index) in list" :class="activeIndex===index ? 'active' : ''" :key="index" @click="changeTab(index)">{{item.name}}</div>
</div> </div>
<div v-if="activeIndex===0"> <div>
<div class="chartWrap" id="chartWrap" style="width: 100%;height:300px" ></div> <div class="chartWrap" id="chartWrap" style="width: 100%;height:300px" ></div>
<div class="tableWrap" id="tableWrap"> <div class="comTab">
<table> <noFit-table :table-data="detailList" :label-list="labelList"></noFit-table>
<thead>
<tr>
<th></th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>本月</th>
</tr>
</thead>
<tbody>
<tr>
<td>派遣</td>
<td>数据</td>
<td>数据</td>
<td>数据</td>
<td>数据</td>
<td>数据</td>
</tr>
<tr>
<td>承接</td>
<td>数据</td>
<td>数据</td>
<td>数据</td>
<td>数据</td>
<td>数据</td>
</tr>
<tr>
<td>完成</td>
<td>数据</td>
<td>数据</td>
<td>数据</td>
<td>数据</td>
<td>数据</td>
</tr>
<tr>
<td>拒单</td>
<td>30.89%</td>
<td>30.89%</td>
<td>30.89%</td>
<td>30.89%</td>
<td>30.89%</td>
</tr>
<tr>
<td>超时</td>
<td>30.89%</td>
<td>30.89%</td>
<td>30.89%</td>
<td>30.89%</td>
<td>30.89%</td>
</tr>
<tr>
<td>取消率</td>
<td>数据</td>
<td>数据</td>
<td>数据</td>
<td>数据</td>
<td>数据</td>
</tr>
</tbody>
</table>
<common-table :table-data="tableData"></common-table>
</div> </div>
</div> </div>
<div style="padding: 30px"></div> <div v-if="isMobile" style="padding: 30px"></div>
</div> </div>
<div class="contentWrap monthTotal" v-if="active===2"> <div class="contentWrap monthTotal" v-if="active===2">
<div class="tabWrap"> <div class="tabWrap">
<div v-for="(item,index) in list" :class="activeIndex===index ? 'active' : ''" :key="index" @click="changeTab(index)">{{item.name}}</div> <div v-for="(item,index) in list" :class="activeIndex===index ? 'active' : ''" :key="index" @click="changeTab(index)">{{item.name}}</div>
</div> </div>
<div class="comTab" v-if="activeIndex===0"> <div class="comTab">
<noFit-table :table-data="detailList" :label-list="labelList"></noFit-table> <noFit-table :table-data="detailList" :label-list="labelList"></noFit-table>
</div> </div>
<div class="comTab" v-if="activeIndex===1"> <div v-if="isMobile" style="padding: 30px"></div>
<noFit-table :table-data="detailList" :label-list="labelList"></noFit-table>
</div>
<div class="comTab" v-if="activeIndex===2">
<noFit-table :table-data="detailList" :label-list="labelList"></noFit-table>
</div>
<div class="comTab" v-if="activeIndex===3">
<noFit-table :table-data="detailList" :label-list="labelList"></noFit-table>
</div>
<div style="padding: 30px"></div>
</div> </div>
<div class="contentWrap monthTotal" v-if="active===3"> <div class="contentWrap monthTotal" v-if="active===3">
<div class="tabWrap"> <div class="tabWrap">
<div v-for="(item,index) in driverList" :class="activeIndex===index ? 'active' : ''" :key="index" @click="changeTab(index)">{{item.name}}</div> <div v-for="(item,index) in driverList" :class="activeIndex===index ? 'active' : ''" :key="index" @click="changeTab(index)">{{item.name}}</div>
</div> </div>
<div class="comTab" v-if="activeIndex===0"> <div class="comTab">
<noFit-table :table-data="detailList" :label-list="labelList"></noFit-table> <noFit-table :table-data="detailList" :label-list="labelList"></noFit-table>
</div> </div>
<div class="comTab" v-if="activeIndex===1"> <div v-if="isMobile" style="padding: 30px"></div>
<noFit-table :table-data="detailList" :label-list="labelList"></noFit-table>
</div>
<div class="comTab" v-if="activeIndex===2">
<noFit-table :table-data="detailList" :label-list="labelList"></noFit-table>
</div>
<div class="comTab" v-if="activeIndex===3">
<noFit-table :table-data="detailList" :label-list="labelList"></noFit-table>
</div>
<div style="padding: 30px"></div>
</div> </div>
<div class="contentWrap monthTotal" v-if="active===4"> <div class="contentWrap monthTotal" v-if="active===4">
<div class="tabWrap"> <div class="tabWrap">
<div v-for="(item,index) in list" :class="activeIndex===index ? 'active' : ''" :key="index" @click="changeTab(index)">{{item.name}}</div> <div v-for="(item,index) in list" :class="activeIndex===index ? 'active' : ''" :key="index" @click="changeTab(index)">{{item.name}}</div>
</div> </div>
<div class="comTab" v-if="activeIndex===0"> <div class="comTab">
<noFit-table :table-data="detailList" :label-list="labelList"></noFit-table> <noFit-table :table-data="detailList" :label-list="labelList"></noFit-table>
</div> </div>
<div class="comTab" v-if="activeIndex===1"> <div v-if="isMobile" style="padding: 30px"></div>
<noFit-table :table-data="detailList" :label-list="labelList"></noFit-table>
</div>
<div class="comTab" v-if="activeIndex===2">
<noFit-table :table-data="detailList" :label-list="labelList"></noFit-table>
</div>
<div class="comTab" v-if="activeIndex===3">
<noFit-table :table-data="detailList" :label-list="labelList"></noFit-table>
</div>
<div style="padding: 30px"></div>
</div> </div>
<div class="contentWrap monthTotal" v-if="active===5"> <div class="contentWrap monthTotal" v-if="active===5">
<div class="comTab"> <div class="comTab">
<noFit-table :table-data="detailList" :label-list="labelList"></noFit-table> <noFit-table :table-data="detailList" :label-list="labelList"></noFit-table>
</div> </div>
<div style="padding: 30px"></div> <div v-if="isMobile" style="padding: 30px"></div>
</div> </div>
<div class="contentWrap monthTotal" v-if="active===6"> <div class="contentWrap monthTotal" v-if="active===6">
<div class="comTab"> <div class="comTab">
<noFit-table :table-data="detailList" :label-list="labelList" :loading="loading"></noFit-table> <noFit-table :table-data="detailList" :label-list="labelList" :loading="loading"></noFit-table>
</div> </div>
<div style="padding: 30px"></div> <div v-if="isMobile" style="padding: 30px"></div>
</div> </div>
<div class="contentWrap monthTotal" v-if="active===7"> <div class="contentWrap monthTotal" v-if="active===7">
<div class="comTab"> <div class="comTab">
<noFit-table :table-data="detailList" :label-list="labelList" :loading="loading"></noFit-table> <noFit-table :table-data="detailList" :label-list="labelList" :loading="loading"></noFit-table>
</div> </div>
<div style="padding: 30px"></div> <div v-if="isMobile" style="padding: 30px"></div>
</div> </div>
<div class="contentWrap monthTotal" v-if="active===8"> <div class="contentWrap monthTotal" v-if="active===8">
<div class="comTab"> <div class="comTab">
<noFit-table :table-data="detailList" :label-list="labelList" :loading="loading"></noFit-table> <noFit-table :table-data="detailList" :label-list="labelList" :loading="loading"></noFit-table>
</div> </div>
<div style="padding: 30px"></div> <div v-if="isMobile" style="padding: 30px"></div>
</div> </div>
<div class="contentWrap monthTotal" v-if="active===9"> <div class="contentWrap monthTotal" v-if="active===9">
<div class="comTab"> <div class="comTab">
<noFit-table :table-data="detailList" :label-list="labelList" :loading="loading"></noFit-table> <noFit-table :table-data="detailList" :label-list="labelList" :loading="loading"></noFit-table>
</div> </div>
<div style="padding: 30px"></div> <div v-if="isMobile" style="padding: 30px"></div>
</div> </div>
</div> </div>
</template> </template>
@ -238,16 +158,15 @@ import dayjs from "dayjs";
import {getKpiDetailsData,getStatisticsKpiByMonth,getStatisticsKpi,getDriverStatisticsKpi} from "@/api/kpi.js" import {getKpiDetailsData,getStatisticsKpiByMonth,getStatisticsKpi,getDriverStatisticsKpi} 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";
import CommonTable from "@/views/kpi/components/common-table.vue";
import NoFitTable from "@/views/kpi/components/noFit-table.vue"; import NoFitTable from "@/views/kpi/components/noFit-table.vue";
export default { export default {
name: "kpiIndex", name: "kpiIndex",
components: { CircleChar,CommonTable,NoFitTable }, components: { CircleChar,NoFitTable },
computed: {}, computed: {},
mixins: [myMixins], mixins: [myMixins],
data() { data() {
return { return {
active: 2, active: 0,
activeIndex: 0, activeIndex: 0,
tabArr: [ tabArr: [
{name: '总览'}, {name: '月/总'}, {name: '日/总'}, {name: '月/师傅'}, {name: '日/师傅'}, {name: '拒单明细'}, {name: '总览'}, {name: '月/总'}, {name: '日/总'}, {name: '月/师傅'}, {name: '日/师傅'}, {name: '拒单明细'},
@ -258,15 +177,22 @@ export default {
startTime:'', startTime:'',
endTime:'', endTime:'',
indexData:{}, indexData:{},
dateArr:[],
dateKeyArr:[],
xAxisArr:[], xAxisArr:[],
detailList:[], detailList:[],
labelList:[], labelList:[],
loading:false, loading:false,
v1:[],
v2:[],
v3:[],
v4:[],
// tableData:[],
isMobile: false,
supplierName: '',
isZd:'',
} }
}, },
async mounted() { async mounted() {
this.checkMobile();
await this.getDateArr(); await this.getDateArr();
await this.getData(); await this.getData();
if(this.active===1 && this.activeIndex===0){ if(this.active===1 && this.activeIndex===0){
@ -276,11 +202,27 @@ export default {
} }
}, },
created() { created() {
this.checkMobile();
// 获取当前 URL
const urlParams = new URLSearchParams(window.location.search);
this.isZd=urlParams?.get('isZd') || ''
}, },
async activated() { async activated() {
}, },
methods: { methods: {
searchHandle(){//web端服务商搜索操作
},
async clickJumpHandle(type){
this.loading=true
this.active=type;
await this.onClick();
},
checkMobile() {
const userAgent = navigator.userAgent || navigator.vendor || window.opera;
this.isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent);
// console.log("his.isMobile",this.isMobile)
},
onClick() { onClick() {
this.activeIndex=0; this.activeIndex=0;
this.detailList=[]; this.detailList=[];
@ -307,8 +249,6 @@ export default {
// 获取时间区间的数组 // 获取时间区间的数组
async getDateArr() { async getDateArr() {
await this.initDate() await this.initDate()
/*this.dateArr = [];
this.dateKeyArr = [];*/
this.xAxisArr = []; this.xAxisArr = [];
let startTime = new Date(this.startTime).getTime(); let startTime = new Date(this.startTime).getTime();
let endTime = new Date(this.endTime).getTime(); let endTime = new Date(this.endTime).getTime();
@ -316,92 +256,98 @@ export default {
let tempTime; let tempTime;
do { do {
tempTime = startTime + i * (24*3600*1000); tempTime = startTime + i * (24*3600*1000);
// this.dateArr.push(dayjs(tempTime).format('YYYY-MM-DD')); // this.xAxisArr.push(dayjs(tempTime).format('DD'));
this.xAxisArr.push(dayjs(tempTime).format('DD'));
// this.dateKeyArr.push(dayjs(tempTime).format('YYYY-MM-DD 00:00:00'));
i++; i++;
// console.log(" this.dateArr", this.dateArr)
// console.log(" this.dateKeyArr", this.dateKeyArr)
} while ( tempTime < endTime) } while ( tempTime < endTime)
// console.log(" this.xAxisArr", this.xAxisArr)
}, },
drawLine() { // 基于准备好的dom，初始化echarts实例 drawLine() { // 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.getElementById('chartWrap')) let myChart = echarts.init(document.getElementById('chartWrap'))
let option; let option;
option = { option = {
title: { title: {
text: '接单情况', text: '接单时效',
left: 10, textStyle:{
textStyle: { fontSize:12
fontSize: 15
}, },
}, },
legend: {
textStyle:{
fontSize:8
},
right:10
},
xAxis: { xAxis: {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
data: ['1月', '2月', '3月', '4月', '本月'] data: this.xAxisArr.reverse(),
},
/* yAxis: [{
name: '工时(小时)',
type: 'value'
},{
name: '通话(小时)',
type: 'value'
}],*/
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value}'
},
axisPointer: {
snap: true
}
},
visualMap: {
show: false
}, },
yAxis: [
{type: 'value'},
{type: 'value'},
],
series: [ series: [
{ {
name: '派遣案件量', name:'派遣案件量',
type: 'line', type:"line",
data:this.v1,
yAxisIndex: 0,
smooth: true, smooth: true,
// prettier-ignore
// 折线的数据
data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400],
markArea: { markArea: {
itemStyle: { itemStyle: {
color: 'rgba(255, 173, 177, 0.4)' color: 'rgba(255, 173, 177, 0.4)'
}, },
// 柱形图数据
data: [ data: [
[ [
{ {
name: 'zhouzhou ', name: 'value1',
xAxis: '1月' xAxis: '07:30'
}, },
{ {
xAxis: '2月' xAxis: '10:00'
} }
], ],
[ [
{ {
name: 'Evening Peak', name: 'Evening Peak',
xAxis: '4月' xAxis: '17:30'
}, },
{ {
xAxis: '本月' xAxis: '21:15'
} }
] ]
] ]
} }
}, },
{
name: '拒单率',
type: 'line',
smooth: true,
data:this.v2,
yAxisIndex: 1,
},
{
name:'超时率',
type:"line",
data:this.v3,
yAxisIndex: 1,
smooth: true
},
{
name:'客户取消率',
type:"line",
data:this.v4,
yAxisIndex: 1,
smooth: true
},
] ]
}; };
option && myChart.setOption(option, true); option && myChart.setOption(option, true);
}, },
async getData(){ async getData(){
this.v1=[]
this.v2=[]
this.v3=[]
this.v4=[]
try { try {
this.loading=true this.loading=true
if (this.active === 0) { if (this.active === 0) {
@ -414,60 +360,111 @@ export default {
this.indexData=res.data; this.indexData=res.data;
} else if ([1, 2].includes(this.active)) { } else if ([1, 2].includes(this.active)) {
let res= await getStatisticsKpi({ let res= await getStatisticsKpi({
startTime: this.startTime + ' 00:00:00', startTime: '2024-05-01 00:00:00',//this.startTime + ' 00:00:00',
endTime: this.endTime + ' 23:59:59', endTime: this.endTime + ' 23:59:59',
statisticsType: this.active===1 ? 1 : 2, statisticsType: this.active===1 ? 1 : 2,
supplierId:1128, supplierId:1128,
}) })
this.detailList = res.data?.map(item => { this.detailList = res.data?.map(item => {
let formatVal = dayjs(item.statisticsDate).format('DD'); let formatVal = dayjs(item.statisticsDate).format('DD');
return {...item,date: formatVal }; let formatVal1 = dayjs(item.statisticsDate).format('MM');
return {...item,date: formatVal ,month: formatVal1};
}); });
this.loading=false this.loading=false
if (this.activeIndex === 0) {//接单指标 if(this.active===1){
this.labelList = [ if (this.activeIndex === 0) {//接单指标
{label: '日', prop: 'date'}, this.labelList = [
{label: '派遣案件量', prop: 'dispatchOrderCount'}, {label: '月', prop: 'month'},
{label: '承接案件量', prop: 'receiveOrderCount'}, {label: '派遣量', prop: 'dispatchOrderCount'},
{label: '完成量', prop: 'finishOrderCount'}, {label: '承接量', prop: 'receiveOrderCount'},
{label: '拒单量', prop: 'refuseOrderCount'}, {label: '完成量', prop: 'finishOrderCount'},
{label: '拒单率', prop: 'refuseOrderRate'}, {label: '拒单量', prop: 'refuseOrderCount'},
{label: '超时接单量', prop: 'timeoutOrderCount'}, {label: '拒单率', prop: 'refuseOrderRate'},
{label: '超时率', prop: 'timeoutOrderRate'}, {label: '超时接单量', prop: 'timeoutOrderCount'},
{label: '客户取消率', prop: 'cancelrate'}, {label: '超时率', prop: 'timeoutOrderRate'},
] {label: '取消率', prop: 'cancelrate'},
}else if(this.activeIndex === 1){ ]
this.labelList = [ this.detailList?.map(item=>{
{label: '日', prop: 'date'}, this.xAxisArr.push(item.month)
{label: '投诉量', prop: 'complainOrderCount'}, this.v1.push(item.dispatchOrderCount)
{label: '投诉率', prop: 'complainOrderRate'}, this.v2.push(item.refuseOrderRate)
{label: '客户评价率', prop: 'customerEvaluateRate'}, this.v3.push(item.timeoutOrderRate)
{label: '催促率', prop: 'urgeRate'}, this.v4.push(item.cancelrate)
] })
}else if(this.activeIndex === 2){ }else if(this.activeIndex === 1){
this.labelList = [ this.labelList = [
{label: '日', prop: 'date'}, {label: '月', prop: 'month'},
{label: '使用率', prop: 'appRate'}, {label: '投诉量', prop: 'complainOrderCount'},
{label: '3′联系客户率', prop: 'threeMinutesContactRate'}, {label: '投诉率', prop: 'complainOrderRate'},
{label: '平安聚合成功率', prop: 'pinganPolymerizationSuccessRate'}, {label:'客户满意度', prop: ''},
{label: '中华聚合成功率', prop: 'zhonghuaPolymerizationSuccessRate'}, {label: '客户评价率', prop: 'customerEvaluateRate'},
{label: '中道聚合成功率', prop: 'zdPolymerizationSuccessRate'}, ]
{label: '总聚合成功率', prop: 'polymerizationSuccessRate'}, }else if(this.activeIndex === 2){
] this.labelList = [
}else if(this.activeIndex === 3){ {label: '月', prop: 'month'},
this.labelList = [ {label: '使用率', prop: 'appRate'},
{label: '日', prop: 'date'}, {label: '3′联系客户率', prop: 'threeMinutesContactRate'},
{label: '接单时效(分)', prop: 'receiving'}, {label: '平安聚合成功率', prop: 'pinganPolymerizationSuccessRate'},
{label: '3′接单率', prop: 'threeMinutesReceivingRate'}, {label: '中华聚合成功率', prop: 'zhonghuaPolymerizationSuccessRate'},
{label: '小修到达时效(分)', prop: 'minorArriving'}, {label: '中道聚合成功率', prop: 'zdPolymerizationSuccessRate'},
{label: '拖车到达时效(分)', prop: 'trailArriving'}, {label: '总聚合成功率', prop: 'polymerizationSuccessRate'},
{label: '困境到达时效(分)', prop: 'dilemmaArriving'}, ]
{label: '到达时效(分)', prop: 'arriving'}, }else if(this.activeIndex === 3){
{label: '40′到达率', prop: 'fortyMinutesArrivalRate'}, this.labelList = [
{label: '小修聚合成功到达时效(分)', prop: 'minorPolymerizationSuccessArriving'}, {label: '月', prop: 'month'},
{label: '拖车聚合成功到达时效(分)', prop: 'trailPolymerizationSuccessArriving'}, {label: '接单时效(分)', prop: 'receiving'},
{label: '聚合成功到达时效', prop: 'polymerizationSuccessArriving'}, {label: '3′接单率', prop: 'threeMinutesReceivingRate'},
] {label: '到达时效(分)', prop: 'arriving'},
{label: '40′到达率', prop: 'fortyMinutesArrivalRate'},
{label: '聚合成功到达时效', prop: 'polymerizationSuccessArriving'},
]
}
}else{
if (this.activeIndex === 0) {//接单指标
this.labelList = [
{label: '日', prop: 'date'},
{label: '派遣案件量', prop: 'dispatchOrderCount'},
{label: '承接案件量', prop: 'receiveOrderCount'},
{label: '完成量', prop: 'finishOrderCount'},
{label: '拒单量', prop: 'refuseOrderCount'},
{label: '拒单率', prop: 'refuseOrderRate'},
{label: '超时接单量', prop: 'timeoutOrderCount'},
{label: '超时率', prop: 'timeoutOrderRate'},
{label: '客户取消率', prop: 'cancelrate'},
]
}else if(this.activeIndex === 1){
this.labelList = [
{label: '日', prop: 'date'},
{label: '投诉量', prop: 'complainOrderCount'},
{label: '投诉率', prop: 'complainOrderRate'},
{label: '客户评价率', prop: 'customerEvaluateRate'},
{label: '催促率', prop: 'urgeRate'},
]
}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'},
]
}else if(this.activeIndex === 3){
this.labelList = [
{label: '日', prop: 'date'},
{label: '接单时效(分)', prop: 'receiving'},
{label: '3′接单率', prop: 'threeMinutesReceivingRate'},
{label: '小修到达时效(分)', prop: 'minorArriving'},
{label: '拖车到达时效(分)', prop: 'trailArriving'},
{label: '困境到达时效(分)', prop: 'dilemmaArriving'},
{label: '到达时效(分)', prop: 'arriving'},
{label: '40′到达率', prop: 'fortyMinutesArrivalRate'},
{label: '小修聚合成功到达时效(分)', prop: 'minorPolymerizationSuccessArriving'},
{label: '拖车聚合成功到达时效(分)', prop: 'trailPolymerizationSuccessArriving'},
{label: '聚合成功到达时效', prop: 'polymerizationSuccessArriving'},
]
}
} }
} else if ([3, 4].includes(this.active)) { } else if ([3, 4].includes(this.active)) {
let res=await getDriverStatisticsKpi({ let res=await getDriverStatisticsKpi({
@ -674,10 +671,8 @@ th{
@include wh(100%,100%); @include wh(100%,100%);
} }
.headWrap{ .headWrap{
@include wh(100%,60px); @include wh(100%,80px);
background: #3E62B9; background: #3E62B9;
//background: radial-gradient( 235% 49% at 50% 50%, rgba(74,122,220,0.94) 100%, rgba(74,122,220,0.94) 100%, rgba(74,122,220,0.94) 100%);
opacity: 0.88;
@include flexTwoCenter; @include flexTwoCenter;
flex-direction: column; flex-direction: column;
.title{ .title{
@ -691,6 +686,54 @@ th{
color: #BDDAFF; color: #BDDAFF;
} }
} }
.webHeadWrap{
display: flex;
align-items: center;
justify-content: space-between;
@include wh(100%,50px);
background: #3E62B9;
box-sizing: border-box;
padding: 0 20px;
.empty{
@include wh(250px,100%);
}
.title{
font-size: 20px;
color: #FFFFFF;
}
.searchWrap{
display: flex;
align-items: center;
position: relative;
.month{
display: inline-block;
width: 45px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 20px 0px 0px 20px;
border: 1px solid #4C81F5;
font-size:14px ;
color: #FFFFFF;
}
.ipt{
display: inline-block;
width: 250px;
height: 32px;
line-height: 32px;
background: #E6EEFF;
border-radius: 0px 20px 20px 0px;
border: 1px solid #4C81F5;
padding: 0;
}
.el-icon-search{
font-size: 15px;
color: #4C81F5;
position: absolute;
right:15px;
}
}
}
::v-deep .van-tabs__nav--line.van-tabs__nav--complete{ ::v-deep .van-tabs__nav--line.van-tabs__nav--complete{
background: #5D7FD7; background: #5D7FD7;
padding: 0; padding: 0;
@ -718,11 +761,8 @@ th{
@include wh(100%,calc(100% - 140px)); @include wh(100%,calc(100% - 140px));
overflow-y: auto; overflow-y: auto;
background: #EFF2F8; background: #EFF2F8;
display: flex;
flex-wrap: wrap;
.reciceOrder{ .reciceOrder{
//146px @include whBg(375px,146px,#FFFFFF);
@include whBg(375px,179px,#FFFFFF);
@include sizing4Padding(19px,25px,38px,19px); @include sizing4Padding(19px,25px,38px,19px);
margin-bottom: 10px; margin-bottom: 10px;
.storeWrap{ .storeWrap{
@ -761,10 +801,18 @@ th{
margin-bottom: 0 !important; margin-bottom: 0 !important;
} }
} }
.ageing{ .webCom{
height: 179px; @include whBg(420px,200px,#FFFFFF);
float: left;
margin: 10px;
.webTitle{
margin-bottom: 40px !important;
}
} }
} }
.webcontentWrap{
@include wh(100%,calc(100% - 86px));
}
.active2{ .active2{
background: #FFFFFF; background: #FFFFFF;
td:first-child { td:first-child {
@ -815,7 +863,7 @@ th{
.monthTotal{ .monthTotal{
background: #FFFFFF; background: #FFFFFF;
padding-left: 6px; padding-left: 6px;
height: auto !important; //height: auto !important;
.leftMonth{ .leftMonth{
.leftItem{ .leftItem{
font-weight: bold; font-weight: bold;