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

task#14196，添加响应式判断，师傅表格数据调整

Browse Source
This commit is contained in:
zhouxueli
2024-07-01 16:32:37 +08:00
parent d4c6081f34
commit 793be9d28d
4 changed files with 260 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
<template>
<div class="wrap">
<div id="supplierScore" ref="supplierScore" style="width: 100%;height: 125px" @click="handle"></div>
<div id="supplierScore" ref="supplierScore" class="chart" @click="handle"></div>
</div>
</template>
@ -97,4 +97,8 @@ export default {
.img{
@include whMarLe(12px,10px,4px);
}
.chart{
width: 100%;
height: 125px;
}
</style>

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

@ -21,7 +21,7 @@ export default {
return {}
},
mounted() {
// console.log("tableData",this.tableData)
},
methods: {}
}

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

@ -2,7 +2,7 @@
<div class="wrap">
<div class="headWrap">
<div class="title">KPI.数据看板</div>
<div class="titleName">4月-我是服务商名称</div>
<div class="titleName">6月-我是服务商名称</div>
</div>
<van-tabs v-model="active" sticky @click="onClick">
<van-tab v-for="(item,index) in tabArr" :key="index" :title="item.name"></van-tab>
@ -138,6 +138,8 @@
</tr>
</tbody>
</table>
<common-table :table-data="tableData"></common-table>
</div>
</div>
<div style="padding: 30px"></div>
@ -146,40 +148,82 @@
<div class="tabWrap">
<div v-for="(item,index) in list" :class="activeIndex===index ? 'active' : ''" :key="index" @click="changeTab(index)">{{item.name}}</div>
</div>
<div>
<div class=" rightData">
<common-table :table-data="tableData"></common-table>
</div>
<div style="padding: 30px"></div>
<div class="comTab" v-if="activeIndex===0">
<noFit-table :table-data="detailList" :label-list="labelList"></noFit-table>
</div>
<div class="comTab" v-if="activeIndex===1">
<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 class="contentWrap monthTotal" v-if="active===3">
<div class="tabWrap">
<div v-for="(item,index) in driverList" :class="activeIndex===index ? 'active' : ''" :key="index" @click="changeTab(index)">{{item.name}}</div>
</div>
<div class="comTab" v-if="activeIndex===0">
<noFit-table :table-data="detailList" :label-list="labelList"></noFit-table>
</div>
<div class="comTab" v-if="activeIndex===1">
<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 class="contentWrap monthTotal" v-if="active===4">
<div class="tabWrap">
<div v-for="(item,index) in list" :class="activeIndex===index ? 'active' : ''" :key="index" @click="changeTab(index)">{{item.name}}</div>
</div>
<div class="comTab" v-if="activeIndex===0">
<noFit-table :table-data="detailList" :label-list="labelList"></noFit-table>
</div>
<div class="comTab" v-if="activeIndex===1">
<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 class="contentWrap monthTotal" v-if="active===5">
<div>
<div class="comTab">
<noFit-table :table-data="detailList" :label-list="labelList"></noFit-table>
</div>
<div style="padding: 30px"></div>
</div>
<div class="contentWrap monthTotal" v-if="active===6">
<div>
<div class="comTab">
<noFit-table :table-data="detailList" :label-list="labelList" :loading="loading"></noFit-table>
</div>
<div style="padding: 30px"></div>
</div>
<div class="contentWrap monthTotal" v-if="active===7">
<div>
<div class="comTab">
<noFit-table :table-data="detailList" :label-list="labelList" :loading="loading"></noFit-table>
</div>
<div style="padding: 30px"></div>
</div>
<div class="contentWrap monthTotal" v-if="active===8">
<div>
<div class="comTab">
<noFit-table :table-data="detailList" :label-list="labelList" :loading="loading"></noFit-table>
</div>
<div style="padding: 30px"></div>
</div>
<div class="contentWrap monthTotal" v-if="active===9">
<div>
<div class="comTab">
<noFit-table :table-data="detailList" :label-list="labelList" :loading="loading"></noFit-table>
</div>
<div style="padding: 30px"></div>
@ -203,13 +247,14 @@ export default {
mixins: [myMixins],
data() {
return {
active: 0,
active: 2,
activeIndex: 0,
tabArr: [
{name: '总览'}, {name: '月/总'}, {name: '日/总'}, {name: '月/师傅'}, {name: '日/师傅'}, {name: '拒单明细'},
{name: '超时明细'}, {name: '投诉明细'}, {name: '不使用APP案件明细'}, {name: '车辆在线情况'}
],
list: [{name: '接单指标'}, {name: '客户评价'}, {name: 'APP使用'}, {name: ' 时效 '}],
driverList: [{name: '师傅接单情况'}, {name: '师傅服务评价'}, {name: '师傅APP使用情况'}, {name: '师傅时效 '}],
startTime:'',
endTime:'',
indexData:{},
@ -222,13 +267,13 @@ export default {
}
},
async mounted() {
await this.getDateArr();
await this.getData();
if(this.active===1 && this.activeIndex===0){
this.$nextTick(()=>{
this.drawLine()
})
}
await this.getDateArr();
await this.getData();
},
created() {
@ -237,6 +282,9 @@ export default {
},
methods: {
onClick() {
this.activeIndex=0;
this.detailList=[];
this.labelList=[];
this.getData();
},
// 初始化获取当月日期
@ -279,8 +327,7 @@ export default {
} while ( tempTime < endTime)
// console.log(" this.xAxisArr", this.xAxisArr)
},
drawLine() {
// 基于准备好的dom，初始化echarts实例
drawLine() { // 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.getElementById('chartWrap'))
let option;
option = {
@ -366,19 +413,160 @@ export default {
});
this.indexData=res.data;
} else if ([1, 2].includes(this.active)) {
await getStatisticsKpi({
let res= await getStatisticsKpi({
startTime: this.startTime + ' 00:00:00',
endTime: this.endTime + ' 23:59:59',
statisticsType: this.active===1 ? 1 : 2,
supplierId:1128,
})
this.detailList = res.data?.map(item => {
let formatVal = dayjs(item.statisticsDate).format('DD');
return {...item,date: formatVal };
});
this.loading=false
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)) {
await getDriverStatisticsKpi({
let res=await getDriverStatisticsKpi({
startTime: this.startTime + ' 00:00:00',
endTime: this.endTime + ' 23:59:59',
statisticsType: this.active===3 ? 1 : 2,
supplierId:1128,
})
if(this.active===3){//师傅月数据
this.detailList = res.data
this.loading=false;
if (this.activeIndex === 0) {//
this.labelList = [
{label: '师傅姓名', prop: 'driverName'},
{label: '承接案件量', prop: 'receiveOrderCount'},
{label: '拒单量', prop: 'refuseOrderCount'},
{label: '拒单率', prop: 'refuseOrderRate'},
{label: '超时接单量', prop: 'timeoutOrderCount'},
{label: '超时率', prop: 'timeoutOrderRate'},
]
}else if(this.activeIndex === 1){
this.labelList = [
{label: '师傅姓名', prop: 'driverName'},
{label: '承接案件量', prop: 'receiveOrderCount'},
{label: '投诉量', prop: 'complainOrderCount'},
{label: '投诉率', prop: 'complainOrderRate'},
{label: '客户满意度', prop: 'customerEvaluateRate'},
{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: '日均在线时长', prop: 'polymerizationSuccessRate'},
]
}else if(this.activeIndex === 3){
this.labelList = [
{label: '师傅姓名', prop: 'driverName'},
{label: '接单时效(分)', prop: 'receiving'},
{label: '3′接单率', prop: 'threeMinutesReceivingRate'},
{label: '到达时效(分)', prop: 'arriving'},
{label: '40′到达率', prop: 'fortyMinutesArrivalRate'},
{label: '聚合成功到达时效', prop: 'polymerizationSuccessArriving'},
]
}
}else{//师傅日数据
this.detailList = res.data
this.loading=false;
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: ''},
{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: 'polymerizationSuccessRate'},
]
}else if(this.activeIndex === 3){
this.labelList = [
{label: '日', prop: 'date'},
{label: '接单时效(分)', prop: 'receiving'},
{label: '3′接单率', prop: 'threeMinutesReceivingRate'},
{label: '到达时效(分)', prop: 'arriving'},
{label: '40′到达率', prop: 'fortyMinutesArrivalRate'},
{label: '聚合成功到达时效', prop: 'polymerizationSuccessArriving'},
]
}
}
console.log("res",res)
} else if ([5, 6, 7, 8, 9].includes(this.active)) {
this.detailList = []
this.labelList = []
@ -439,6 +627,16 @@ export default {
this.loading=false
}
},
async changeTab(index) {
this.labelList=[]
this.activeIndex = index
await this.getData()
if(this.active===1 && this.activeIndex===0){
this.$nextTick(()=>{
this.drawLine()
})
}
},
setType(type){
switch (type){
case 5:
@ -453,14 +651,6 @@ export default {
return 5;
}
},
changeTab(index) {
this.activeIndex = index
if(this.active===1 && this.activeIndex===0){
this.$nextTick(()=>{
this.drawLine()
})
}
},
},
}
</script>
@ -484,7 +674,7 @@ th{
@include wh(100%,100%);
}
.headWrap{
@include wh(100%,100px);
@include wh(100%,60px);
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;
@ -528,8 +718,11 @@ th{
@include wh(100%,calc(100% - 140px));
overflow-y: auto;
background: #EFF2F8;
display: flex;
flex-wrap: wrap;
.reciceOrder{
@include whBg(100%,146px,#FFFFFF);
//146px
@include whBg(375px,179px,#FFFFFF);
@include sizing4Padding(19px,25px,38px,19px);
margin-bottom: 10px;
.storeWrap{
@ -569,7 +762,7 @@ th{
}
}
.ageing{
height: 146px;
height: 179px;
}
}
.active2{
@ -622,6 +815,7 @@ th{
.monthTotal{
background: #FFFFFF;
padding-left: 6px;
height: auto !important;
.leftMonth{
.leftItem{
font-weight: bold;
@ -641,4 +835,7 @@ th{
overflow-x: auto; /* 当内容超出宽度时启用水平滚动 */
}
}
.comTab{
width: 100%;
}
</style>