task#14196,kpi明细表格调整

This commit is contained in:
2024-07-04 13:22:25 +08:00
parent 7785c7ecbe
commit cb50de4039

View File

@ -79,12 +79,12 @@
</div>
<div v-if="isMobile" style="padding: 30px"></div>
</div>
<div class="contentWrap active2" v-if="active===1">
<div class="contentWrap monthTotal" v-if="active===1">
<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="chartWrap" id="chartWrap" style="width: 100%;height:300px" ></div>
<div v-if="active===1" class="chartWrap" id="chartWrap" style="width: 100%;height:300px" ></div>
<div class="comTab">
<noFit-table :table-data="detailList" :label-list="labelList"></noFit-table>
</div>
@ -154,7 +154,6 @@
<script>
import * as echarts from 'echarts';
import dayjs from "dayjs";
// ,getDriverStatisticsKpi
import {getKpiDetailsData,getStatisticsKpiByMonth,getStatisticsKpi,getDriverStatisticsKpi} from "@/api/kpi.js"
import {myMixins} from "@/utils/myMixins"
import CircleChar from "@/views/kpi/components/circleChar.vue";
@ -166,14 +165,14 @@ export default {
mixins: [myMixins],
data() {
return {
active: 0,
active: 1,
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: '师傅时效 '}],
driverList: [{name: '接单情况'}, {name: '服务评价'}, {name: 'APP使用情况'}, {name: '时效 '}],
startTime:'',
endTime:'',
indexData:{},
@ -204,8 +203,8 @@ export default {
created() {
this.checkMobile();
// 获取当前 URL
const urlParams = new URLSearchParams(window.location.search);
this.isZd=urlParams?.get('isZd') || ''
/* const urlParams = new URLSearchParams(window.location.search);
this.isZd=urlParams?.get('isZd') || ''*/
},
async activated() {
},
@ -471,12 +470,13 @@ export default {
startTime: this.startTime + ' 00:00:00',
endTime: this.endTime + ' 23:59:59',
statisticsType: this.active===3 ? 1 : 2,
supplierId:1128,
driverId:68517,
})
console.log("res===",res)
if(this.active===3){//师傅月数据
this.detailList = res.data
this.loading=false;
if (this.activeIndex === 0) {//
if (this.activeIndex === 0) {
this.labelList = [
{label: '师傅姓名', prop: 'driverName'},
{label: '承接案件量', prop: 'receiveOrderCount'},
@ -491,7 +491,7 @@ export default {
{label: '承接案件量', prop: 'receiveOrderCount'},
{label: '投诉量', prop: 'complainOrderCount'},
{label: '投诉率', prop: 'complainOrderRate'},
{label: '客户满意度', prop: 'customerEvaluateRate'},
{label: '客户满意度', prop: 'customerSatisfaction'},
{label: '客户评价率', prop: 'customerEvaluateRate'},
{label: '催促率', prop: 'urgeRate'},
]
@ -505,7 +505,7 @@ export default {
{label: '中华聚合成功率', prop: 'zhonghuaPolymerizationSuccessRate'},
{label: '中道聚合成功率', prop: 'zdPolymerizationSuccessRate'},
{label: '总聚合成功率', prop: 'polymerizationSuccessRate'},
{label: '日均在线时长', prop: 'polymerizationSuccessRate'},
{label: '日均在线时长', prop: 'onlineDuration'},
]
}else if(this.activeIndex === 3){
this.labelList = [
@ -537,7 +537,7 @@ export default {
{label: '日', prop: 'date'},
{label: '投诉量', prop: 'complainOrderCount'},
{label: '投诉率', prop: 'complainOrderRate'},
{label: '客户满意度', prop: ''},
{label: '客户满意度', prop: 'customerSatisfaction'},
{label: '客户评价率', prop: 'customerEvaluateRate'},
{label: '催促率', prop: 'urgeRate'},
]
@ -550,7 +550,7 @@ export default {
{label: '中华聚合成功率', prop: 'zhonghuaPolymerizationSuccessRate'},
{label: '中道聚合成功率', prop: 'zdPolymerizationSuccessRate'},
{label: '总聚合成功率', prop: 'polymerizationSuccessRate'},
{label: '日均在线时长', prop: 'polymerizationSuccessRate'},
{label: '日均在线时长', prop: 'onlineDuration'},
]
}else if(this.activeIndex === 3){
this.labelList = [
@ -574,7 +574,10 @@ export default {
pageNum: 1,
pageSize: 1000
});
this.detailList = result.data
this.detailList = result.data?.map(item => {
let formatVal = dayjs(item.createTime).format('DD');
return {...item,date: formatVal };
});
this.loading=false
if (this.active === 5) {//拒单明细
this.labelList = [
@ -615,7 +618,7 @@ export default {
]
} else if (this.active === 9) {//车辆在线情况
this.labelList = [
{label: '日期', prop: 'vehicleCount'},
{label: '日期', prop: 'date'},
{label: '在线车辆数量', prop: 'vehicleCount'},
]
}
@ -653,18 +656,6 @@ export default {
</script>
<style scoped lang="scss">
@import "@/styles/mixin.scss";
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px 10px;
text-align: center;
}
th{
background-color: #f2f2f2;
}
@import "@/styles/common.scss";
@import "@/styles/mixin.scss";
.wrap{
@ -813,19 +804,6 @@ th{
.webcontentWrap{
@include wh(100%,calc(100% - 86px));
}
.active2{
background: #FFFFFF;
td:first-child {
padding: 0px !important;
}
tr:nth-child(odd) td:first-child{
font-weight: bold;
}
tr:nth-child(even) td:first-child {
background-color: #f2f2f2; /* 偶数行第一个单元格为白色 */
font-weight: bold;
}
}
.tabWrap{
@include wh(100%,22px);
@include flexColAround;
@ -885,5 +863,14 @@ th{
}
.comTab{
width: 100%;
height: 100%;
}
::v-deep .el-table{
font-size:11px;
height: 100%;
}
::v-deep .el-table--scrollable-x .el-table__body-wrapper{
height: 100% !important;
}
</style>