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

task#，添加师傅满意度表格，月师傅的表格错乱调整，首页最后一个图加背景

Browse Source
This commit is contained in:
zhouxueli
2024-12-25 15:13:56 +08:00
parent f3a15b829f
commit 43c1f76f82
2 changed files with 48 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,7 +13,7 @@
<template slot-scope="scope">{{scope.row[item.prop]}} </template> <template slot-scope="scope">{{scope.row[item.prop]}} </template>
</el-table-column> </el-table-column>
</template> </template>
<template v-else-if="active===3"> <template v-else-if="active===4">
<el-table-column v-for="(column,index) in filteredLabelList" :key="column.prop" :prop="column.prop" :label="column.label" <el-table-column v-for="(column,index) in filteredLabelList" :key="column.prop" :prop="column.prop" :label="column.label"
:fixed="index===0" align="center" min-width="100" :fixed="index===0" align="center" min-width="100"
:width="(isMobile && (column.label=='案件编号' || column.label=='服务内容')) ? 70 : 'auto'"> :width="(isMobile && (column.label=='案件编号' || column.label=='服务内容')) ? 70 : 'auto'">
@ -46,7 +46,7 @@ export default {
}, },
computed: { computed: {
filteredLabelList() { filteredLabelList() {
if(this.active!==3){ if(this.active!==4){
return return
} }
return this.labelList.filter(column => column.label !== '星级评分'); return this.labelList.filter(column => column.label !== '星级评分');

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

@ -39,7 +39,7 @@
<van-tabs v-model="active" sticky @click="tabClickHandle"> <van-tabs v-model="active" sticky @click="tabClickHandle">
<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 && !([0,1,2,3].includes(active))" class="tipArrow left">{{ leftArr }}</div>
<div v-if="isMobile && !([8,9].includes(active))" class="tipArrow right">>>></div> <div v-if="isMobile && !([9,10].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}">
@ -201,8 +201,8 @@
<noFit-table v-else :active='active' :is-mobile='isMobile' :table-data="detailList" :label-list="labelList"></noFit-table> <noFit-table v-else :active='active' :is-mobile='isMobile' :table-data="detailList" :label-list="labelList"></noFit-table>
</div> </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,4,5].includes(active)">
<div class="searchDriverName" v-if="[3,4].includes(active)"> <div class="searchDriverName" v-if="[5,4].includes(active)">
<el-select <el-select
v-model="driverName" v-model="driverName"
filterable filterable
@ -224,12 +224,12 @@
</el-select> </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===4 ? driverList : list)" :class="activeIndex===index ? 'active' : ''"
:key="index" :key="index"
@click="changeTab(index)">{{ item.name }} @click="changeTab(index)">{{ item.name }}
</div> </div>
</div> </div>
<div :class="{'comTab':true}"> <div :class="{'comTab':active !== 4,'comTabActive3':active === 4}">
<noFit-table :active='active' :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
@ -244,13 +244,13 @@
: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="[3,6,7,8,9,10].includes(active)">
<div :class="{'comTab':true,'detailTable':isMobile}"> <div :class="{'comTab':true,'detailTable':isMobile}">
<noFit-table :active='active' :is-mobile='isMobile' :table-data="detailList" :label-list="labelList" <noFit-table :active='active' :is-mobile='isMobile' :table-data="detailList" :label-list="labelList"
></noFit-table> ></noFit-table>
</div> </div>
<el-pagination <el-pagination
v-if="active !== 9" v-if="active !== 10"
small small
:page-sizes="[20, 50, 100]" :page-sizes="[20, 50, 100]"
:current-page.sync="pageNum" :current-page.sync="pageNum"
@ -290,7 +290,7 @@ export default {
active:0, active:0,
activeIndex: 0, activeIndex: 0,
tabArr: [ tabArr: [
{name: '总览'}, {name: '月/总'}, {name: '日/总'}, {name: '月/师傅'}, {name: '日/师傅'}, {name: '拒单明细'}, {name: '总览'}, {name: '月/总'}, {name: '日/总'},{name: '师傅满意度'}, {name: '月/师傅'}, {name: '日/师傅'}, {name: '拒单明细'},
{name: '超时明细'}, {name: '投诉明细'}, {name: '不使用APP案件明细'}, {name: '车辆在线情况'} {name: '超时明细'}, {name: '投诉明细'}, {name: '不使用APP案件明细'}, {name: '车辆在线情况'}
], ],
list: [{name: '接单指标'}, {name: '客户评价'}, {name: 'APP使用'}, {name: ' 时效 '}], list: [{name: '接单指标'}, {name: '客户评价'}, {name: 'APP使用'}, {name: ' 时效 '}],
@ -903,6 +903,10 @@ export default {
} }
let myChart = echarts.init(document.getElementById('allDataChart')) let myChart = echarts.init(document.getElementById('allDataChart'))
let option = { let option = {
grid: {
top: '15%',
bottom: '12%',
},
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
@ -1033,11 +1037,11 @@ export default {
// console.log(" this.xAxisArr", this.xAxisArr) // console.log(" this.xAxisArr", this.xAxisArr)
// this.xAxisArr[this.xAxisArr.length - 1] = '本月' // this.xAxisArr[this.xAxisArr.length - 1] = '本月'
await this.twoTabHanldeData() await this.twoTabHanldeData()
} else if ([3, 4].includes(this.active)) { } else if ([3,4,5].includes(this.active)) {
let res = await getDriverStatisticsKpi({ let res = await getDriverStatisticsKpi({
startTime: this.startTime , startTime: this.startTime ,
endTime: this.endTime, endTime: this.endTime,
statisticsType: this.active === 3 ? 1 : 2, statisticsType: (this.active === 3 || this.active === 4) ? 1 : 2,
supplierId: this.supplierId, supplierId: this.supplierId,
driverId: this.driverId, driverId: this.driverId,
driverName:this.driverName, driverName:this.driverName,
@ -1064,12 +1068,12 @@ export default {
return {...item, date: formatVal}; return {...item, date: formatVal};
}); });
this.loading = false; this.loading = false;
if(this.active===4 && !this.driverName){ if(this.active===5 && !this.driverName){
this.detailList=[] this.detailList=[]
this.total=0 this.total=0
} }
await this.twoTabHanldeData(); await this.twoTabHanldeData();
} else if ([5, 6, 7, 8, 9].includes(this.active)) { } else if ([ 6, 7, 8, 9,10].includes(this.active)) {
this.detailList = [] this.detailList = []
this.labelList = [] this.labelList = []
let result = await getKpiDetailsData({ let result = await getKpiDetailsData({
@ -1086,7 +1090,7 @@ export default {
return {...item, date: formatVal}; return {...item, date: formatVal};
}); });
this.loading = false this.loading = false
if (this.active === 5) {//拒单明细 if (this.active === 6) {//拒单明细
this.labelList = [ this.labelList = [
{label: '案件编号', prop: 'orderCode'}, {label: '案件编号', prop: 'orderCode'},
{label: '服务内容', prop: 'serviceName'}, {label: '服务内容', prop: 'serviceName'},
@ -1097,7 +1101,7 @@ export default {
{label: '中道派单时间', prop: 'dispatchTime'}, {label: '中道派单时间', prop: 'dispatchTime'},
{label: '拒绝原因', prop: 'reason'}, {label: '拒绝原因', prop: 'reason'},
] ]
} else if (this.active === 6) {//超时明细 } else if (this.active === 7) {//超时明细
this.labelList = [ this.labelList = [
{label: '案件编号', prop: 'orderCode'}, {label: '案件编号', prop: 'orderCode'},
{label: '服务内容', prop: 'serviceName'}, {label: '服务内容', prop: 'serviceName'},
@ -1107,7 +1111,7 @@ export default {
{label: '上游接单来源', prop: 'workSource'}, {label: '上游接单来源', prop: 'workSource'},
{label: '中道派单时间', prop: 'dispatchTime'}, {label: '中道派单时间', prop: 'dispatchTime'},
] ]
} else if (this.active === 7) {//投诉明细 } else if (this.active === 8) {//投诉明细
this.labelList = [ this.labelList = [
{label: '案件编号', prop: 'orderCode'}, {label: '案件编号', prop: 'orderCode'},
{label: '服务内容', prop: 'serviceName'}, {label: '服务内容', prop: 'serviceName'},
@ -1116,7 +1120,7 @@ export default {
{label: '投诉时间', prop: 'complainCreateTime'}, {label: '投诉时间', prop: 'complainCreateTime'},
{label: '投诉类型', prop: 'complainTypeString'}, {label: '投诉类型', prop: 'complainTypeString'},
] ]
} else if (this.active === 8) {//不使用App案件明细 } else if (this.active === 9) {//不使用App案件明细
this.labelList = [ this.labelList = [
{label: '案件编号', prop: 'orderCode'}, {label: '案件编号', prop: 'orderCode'},
{label: '服务内容', prop: 'serviceName'}, {label: '服务内容', prop: 'serviceName'},
@ -1124,7 +1128,7 @@ export default {
{label: '工单创建时间', prop: 'orderCreateTime'}, {label: '工单创建时间', prop: 'orderCreateTime'},
{label: '事发地', prop: 'vehiclePointAddress'}, {label: '事发地', prop: 'vehiclePointAddress'},
] ]
} else if (this.active === 9) {//车辆在线情况 } else if (this.active === 10) {//车辆在线情况
this.labelList = [ this.labelList = [
{label: '日期', prop: 'date'}, {label: '日期', prop: 'date'},
{label: '0点在线车辆数量', prop: 'zeroClockVehicleCount'}, {label: '0点在线车辆数量', prop: 'zeroClockVehicleCount'},
@ -1133,7 +1137,6 @@ export default {
{label: '16点在线车辆数量', prop: 'sixteenClockVehicleCount'}, {label: '16点在线车辆数量', prop: 'sixteenClockVehicleCount'},
{label: '20点在线车辆数量', prop: 'twentyClockVehicleCount'}, {label: '20点在线车辆数量', prop: 'twentyClockVehicleCount'},
{label: '22点在线车辆数量', prop: 'twentyTwoClockVehicleCount'}, {label: '22点在线车辆数量', prop: 'twentyTwoClockVehicleCount'},
] ]
} }
} }
@ -1403,7 +1406,13 @@ export default {
{label: '聚合成功到达时效(分)', prop: 'polymerizationSuccessArriving'}, {label: '聚合成功到达时效(分)', prop: 'polymerizationSuccessArriving'},
] ]
} }
} else if (this.active === 3) { } else if(this.active === 3){
this.labelList = [
{label: '师傅姓名', prop: 'driverName'},
{label: '案件总量', prop: 'orderCount'},
{label: '满意度得分 ', prop: 'driverSatisfaction'},
]
} else if (this.active === 4) {
if (this.activeIndex === 0) { if (this.activeIndex === 0) {
this.labelList = [ this.labelList = [
{label: '师傅姓名', prop: 'driverName'}, {label: '师傅姓名', prop: 'driverName'},
@ -1473,7 +1482,7 @@ export default {
{label: '聚合成功到达时效(分)', prop: 'polymerizationSuccessArriving'}, {label: '聚合成功到达时效(分)', prop: 'polymerizationSuccessArriving'},
] ]
} }
} else if (this.active === 4) { } else if (this.active === 5) {
if (this.activeIndex === 0) {//接单指标 if (this.activeIndex === 0) {//接单指标
this.labelList = [ this.labelList = [
{label: '日', prop: 'date'}, {label: '日', prop: 'date'},
@ -1528,15 +1537,15 @@ export default {
}, },
setType(type) { setType(type) {
switch (type) { switch (type) {
case 5:
return 1;
case 6: case 6:
return 2; return 1;
case 7: case 7:
return 3; return 2;
case 8: case 8:
return 4; return 3;
case 9: case 9:
return 4;
case 10:
return 5; return 5;
} }
}, },
@ -1603,19 +1612,6 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
position: relative; 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;
}*/
.el-icon-search { .el-icon-search {
font-size: 15px; font-size: 15px;
color: #4C81F5; color: #4C81F5;
@ -1697,12 +1693,6 @@ export default {
display: flex; display: flex;
justify-content:center; justify-content:center;
} }
/* .defen{
display: inline-block;
//width: 92px;
//text-align: right;
}*/
.left{ .left{
text-align: right; text-align: right;
padding-right: 5px; padding-right: 5px;
@ -1756,8 +1746,9 @@ export default {
} }
} }
.allDataChartWrap{ .allDataChartWrap{
width: 375px; /* width: 375px;
height: 220px; height: 220px;*/
@include whBg(375px, 200px, #FFFFFF);
} }
.allDataChart{ .allDataChart{
@ -1765,8 +1756,10 @@ export default {
height: 100%; height: 100%;
} }
.webComAllData{ .webComAllData{
width: 400px; width: 420px;
height: 255px; height: 200px;
/*width: 375px;
height: 146px;*/
float: left; float: left;
margin: 10px; margin: 10px;
} }
@ -1884,7 +1877,6 @@ export default {
width: 100%; width: 100%;
height: 95%; height: 95%;
} }
::v-deep .el-table { ::v-deep .el-table {
height: 100%; height: 100%;
} }
@ -1892,7 +1884,11 @@ export default {
::v-deep .el-table--scrollable-x .el-table__body-wrapper { ::v-deep .el-table--scrollable-x .el-table__body-wrapper {
height: 95% !important; height: 95% !important;
} }
.comTabActive3 ::v-deep .el-table--scrollable-x .el-table__body-wrapper{
width: 100%;
//height: 90%;
//height: 84% !important;
}
.chartWrapWeb, .webTab { .chartWrapWeb, .webTab {
height: calc(100% - 200px); height: calc(100% - 200px);
width: 100%; width: 100%;