task#14196,data动态数据添加

This commit is contained in:
2024-07-01 10:32:19 +08:00
parent 481c37f708
commit e11946352c
4 changed files with 210 additions and 71 deletions

View File

@ -4,7 +4,7 @@ export function getStatisticsKpiByMonth(data){
return request({
url: '/supplier/supplierKPI/querySupplierStatisticsKpiByMonth',
method:'POST',
contentType: 'application/json',
// contentType: 'application/json',
data
})
}
@ -13,7 +13,7 @@ export function getStatisticsKpi(data){
return request({
url: '/supplier/supplierKPI/querySupplierStatisticsKpi',
method:'POST',
contentType: 'application/json',
// contentType: 'application/json',
data
})
}
@ -23,7 +23,7 @@ export function getDriverStatisticsKpi(data){
return request({
url: '/supplier/supplierKPI/querySupplierDriverStatisticsKpi',
method:'POST',
contentType: 'application/json',
// contentType: 'application/json',
data
})
}
@ -32,7 +32,7 @@ export function getKpiDetailsData(data){
return request({
url: '/supplier/supplierKPI/querySupplierKpiDetailsData',
method:'POST',
contentType: 'application/json',
// contentType: 'application/json',
data
})
}

View File

@ -14,14 +14,16 @@ export default {
}
},
mounted() {
this.drawHandle();
setTimeout(()=>{
this.drawHandle();
},100)
},
methods:{
handle(){
if(this.titleText == '投诉率'){
console.log(this.titleText)
this.$emit('clickComplain')
}else if(this.titleText == '使用率'){
console.log(this.titleText)
this.$emit('clickUse')
}
},
// 绘制 总分图表

View File

@ -0,0 +1,40 @@
<template>
<div class="wrap">
<el-table :data="tableData"
stripe
border
style="width: 100%"
v-loading="loading"
class="custom-table">
<el-table-column v-for="column in labelList" :key="column.prop" :prop="column.prop" :label="column.label"
align="center" min-width="100">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: "noFit-table",
props: ['tableData','labelList','loading'],
data() {
return {}
},
mounted() {
},
methods: {}
}
</script>
<style scoped lang="scss">
@import "@/styles/mixin.scss";
::v-deep .el-table thead{
font-size: 11px;
color: #1D2129;
font-weight: bold;
}
::v-deep .el-table th.el-table__cell.is-leaf {
background-color: #E5E6EB;
}
</style>

View File

@ -4,60 +4,59 @@
<div class="title">KPI.数据看板</div>
<div class="titleName">4-我是服务商名称</div>
</div>
<van-tabs v-model="active" sticky >
<van-tab v-for="(item,index) in tabArr" :key="index" :title="item.name">
</van-tab>
<van-tabs v-model="active" sticky @click="onClick">
<van-tab v-for="(item,index) in tabArr" :key="index" :title="item.name"></van-tab>
</van-tabs>
<div class="contentWrap" v-if="active===0">
<div class="reciceOrder">
<div class="title">接单指标</div>
<div class="reciceOrderIWrap">
<div class="left common">
<div class="num">116</div>
<div class="num">{{ indexData.receiveOrderCount }}</div>
<div class="itemTitle">承接案件量</div>
</div>
<div class="center common">
<div class="num">35%</div>
<div class="itemTitle">拒单率 <img src="@/assets/arrow_rht.png" class="img"/></div>
<div class="center common" @click="active = 5">
<div class="num">{{ indexData.refuseOrderRate }}</div>
<div class="itemTitle">拒单率 ></div>
</div>
<div class="right common">
<div class="num">35%</div>
<div class="itemTitle">超时率 <img src="@/assets/arrow_rht.png" class="img"/></div>
<div class="right common" @click="active = 5">
<div class="num">{{ indexData.timeoutOrderRate }}</div>
<div class="itemTitle">超时率 ></div>
</div>
</div>
</div>
<div class="reciceOrder evaluate">
<div class="title">客户评价</div>
<div class="reciceOrderIWrap">
<circle-char :data="1.28" :title-text="'投诉率'" :bg-color="'#9485ED'" :is-store="false"></circle-char>
<circle-char :data="98.9" :title-text="'客户满意度'" :bg-color="'#5DDECF'" ></circle-char>
<circle-char :data="56" :title-text="'催促率'" :bg-color="'#FFADAD'" ></circle-char>
<circle-char :data="indexData.complainOrderRate" :title-text="'投诉率'" :bg-color="'#9485ED'"
:is-store="false" @clickComplain="active = 7"></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>
</div>
</div>
<div class="reciceOrder appUse">
<div class="title">APP使用</div>
<div class="reciceOrderIWrap">
<circle-char :data="1.28" :title-text="'使用率'" :bg-color="'#3AA1FF'" :is-store="false"></circle-char>
<circle-char :data="9.9" :title-text="'联系客户率'" :bg-color="'#5D7FD7'" ></circle-char>
<circle-char :data="65.89" :title-text="'总聚合成功率'" :bg-color="'#4ECB73'" ></circle-char>
<circle-char :data="indexData.appRate" :title-text="'使用率'" :bg-color="'#3AA1FF'" :is-store="false" @clickUse="active = 8"></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>
</div>
</div>
<div class="reciceOrder ageing">
<div class="title">时效</div>
<div class="reciceOrderIWrap">
<div class="left common">
<div class="num">0:02:24</div>
<div class="num">{{indexData.receiving}}</div>
<div class="itemTitle">接单时效()</div>
</div>
<div class="line"></div>
<div class="center common">
<div class="num">0:02:24</div>
<div class="num">{{ indexData.polymerizationSuccessArriving }}</div>
<div class="itemTitle">集合成功到达时效</div>
</div>
<div class="line"></div>
<div class="right common">
<div class="num">0:02:24</div>
<div class="num">{{ indexData.arriving }}</div>
<div class="itemTitle">到达时效</div>
</div>
</div>
@ -65,7 +64,7 @@
<div class="reciceOrder store">
<div class="title">综合打分</div>
<div class="storeWrap">
<circle-char :data="98" :bg-color="'#00D273'" :is-store="true"></circle-char>
<circle-char :data="indexData.score" :bg-color="'#00D273'" :is-store="true"></circle-char>
</div>
</div>
<div style="padding: 30px"></div>
@ -147,10 +146,7 @@
<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="leftMonth">
<div class="leftItem" v-for="(item,i) in leftList" :key="i">{{item}}</div>
</div>-->
<div>
<div class=" rightData">
<common-table :table-data="tableData"></common-table>
</div>
@ -158,48 +154,71 @@
</div>
</div>
<div class="contentWrap monthTotal" v-if="active===5">
<div>
<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>
<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>
<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>
<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>
<noFit-table :table-data="detailList" :label-list="labelList" :loading="loading"></noFit-table>
</div>
<div style="padding: 30px"></div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts';
import dayjs from "dayjs";
// getStatisticsKpiByMonth
import {getKpiDetailsData,getDriverStatisticsKpi} from "@/api/kpi.js"
// ,getDriverStatisticsKpi
import {getKpiDetailsData,getStatisticsKpiByMonth,getStatisticsKpi,getDriverStatisticsKpi} from "@/api/kpi.js"
import {myMixins} from "@/utils/myMixins"
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";
export default {
name: "kpiIndex",
components: { CircleChar,CommonTable },
components: { CircleChar,CommonTable,NoFitTable },
computed: {},
mixins: [myMixins],
data() {
return {
active: 1,
active: 0,
activeIndex: 0,
tabArr: [
{name: '总览'}, {name: '月/总'}, {name: '日/总'}, {name: '月/师傅'}, {name: '日/师傅'}, {name: '拒单明细'},
{name: '超时明细'}, {name: '投诉明细'}, {name: '不使用APP案件明细'}, {name: '车辆在线情况'}
],
list: [{name: '接单指标'}, {name: '客户评价'}, {name: 'APP使用'}, {name: ' 时效 '}],
tableData:[
{ label:'日',prop: 'date',date:'1'},
{ label:'派遣案件量',prop: 'date',date:'2'},
{ label:'派遣案件量',prop: 'date',date:'3'},
{ label:'派遣案件量',prop: 'date',date:'4'},
{ label:'派遣案件量',prop: 'date',date:'5'},
{ label:'派遣案件量',prop: 'date',date:'6'},
{ label:'派遣案件量',prop: 'date',date:'7'},
{ label:'派遣案件量',prop: 'date',date:'8'},
{ label:'派遣案件量',prop: 'date',date:'9'},
{ label:'派遣案件量',prop: 'date',date:'10'},
],
startTime:'',
endTime:'',
indexData:{},
dateArr:[],
dateKeyArr:[],
xAxisArr:[]
xAxisArr:[],
detailList:[],
labelList:[],
loading:false,
}
},
async mounted() {
@ -209,7 +228,7 @@ export default {
})
}
await this.getDateArr();
// await this.getData();
await this.getData();
},
created() {
@ -217,6 +236,9 @@ export default {
async activated() {
},
methods: {
onClick() {
this.getData();
},
// 初始化获取当月日期
initDate() {
this.startTime = dayjs(new Date()).format('YYYY-MM') + '-01'
@ -333,27 +355,102 @@ export default {
option && myChart.setOption(option, true);
},
async getData(){
let res=await getDriverStatisticsKpi({
startTime:this.startTime+' 00:00:00',
endTime:this.endTime+' 23:59:59',
statisticsType:1
});
console.log("res",res)
/* let res=await getStatisticsKpiByMonth({
startTime:this.startTime+' 00:00:00',
endTime:this.endTime+' 23:59:59',
statisticsType:1
});
console.log("res",res)*/
let res1=await getKpiDetailsData({
monthDate:'2024-06',
startTime:this.startTime+' 00:00:00',
endTime:this.endTime+' 23:59:59',
searchType:1,
pageNum:1,
pageSize:10
});
console.log("res1",res1)
try {
this.loading=true
if (this.active === 0) {
let res = await getStatisticsKpiByMonth({
startTime: this.startTime + ' 00:00:00',
endTime: this.endTime + ' 23:59:59',
statisticsType: 1,
supplierId:1128,
});
// console.log("res", res)
this.indexData=res.data;
} else if ([1, 2].includes(this.active)) {
await getStatisticsKpi({
startTime: this.startTime + ' 00:00:00',
endTime: this.endTime + ' 23:59:59',
statisticsType: 1
})
} else if ([3, 4].includes(this.active)) {
await getDriverStatisticsKpi({
startTime: this.startTime + ' 00:00:00',
endTime: this.endTime + ' 23:59:59',
statisticsType: 1
})
} else if ([5, 6, 7, 8, 9].includes(this.active)) {
this.detailList = []
this.labelList = []
let result = await getKpiDetailsData({
startTime: this.startTime + ' 00:00:00',
endTime: this.endTime + ' 23:59:59',
searchType: this.setType(this.active),
pageNum: 1,
pageSize: 1000
});
this.detailList = result.data
this.loading=false
if (this.active === 5) {//拒单明细
this.labelList = [
{label: '案件编号', prop: 'orderCode'},
{label: '服务内容', prop: 'serviceName'},
{label: '拒单师傅车号', prop: 'plateNumber'},
{label: '拒单师傅名称', prop: 'driverName'},
{label: '手机号', prop: 'driverPhone'},
{label: '上游接单来源', prop: 'reason'},
{label: '中道派单时间', prop: 'reason'},
{label: '拒绝原因', prop: 'reason'},
]
} else if (this.active === 6) {//超时明细
this.labelList = [
{label: '案件编号', prop: 'orderCode'},
{label: '服务内容', prop: 'serviceName'},
{label: '超时师傅车号', prop: 'plateNumber'},
{label: '超时师傅名称', prop: 'driverName'},
{label: '手机号', prop: 'driverPhone'},
{label: '上游接单来源', prop: 'reason'},
{label: '中道派单时间', prop: 'reason'},
]
} else if (this.active === 7) {//投诉明细
this.labelList = [
{label: '案件编号', prop: 'orderCode'},
{label: '服务内容', prop: 'serviceName'},
{label: '接单车号', prop: 'plateNumber'},
{label: '接单师傅', prop: 'driverName'},
{label: '手机号', prop: 'driverPhone'},
{label: '客户投诉内容', prop: 'reason'},
]
} else if (this.active === 8) {//不使用App案件明细
// console.log("不使用App案件明细")
this.labelList = [
{label: '案件编号', prop: 'orderCode'},
{label: '服务内容', prop: 'serviceName'},
{label: '接单师傅手机号', prop: 'driverName'},
]
} else if (this.active === 9) {//车辆在线情况
this.labelList = [
{label: '日期', prop: 'vehicleCount'},
{label: '在线车辆数量', prop: 'vehicleCount'},
]
}
}
} finally {
this.loading=false
}
},
setType(type){
switch (type){
case 5:
return 1;
case 6:
return 2;
case 7:
return 3;
case 8:
return 4;
case 9:
return 5;
}
},
changeTab(index) {
this.activeIndex = index