task#14196,data动态数据添加
This commit is contained in:
@ -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
|
||||
})
|
||||
}
|
||||
|
@ -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')
|
||||
}
|
||||
},
|
||||
// 绘制 总分图表
|
||||
|
40
src/views/kpi/components/noFit-table.vue
Normal file
40
src/views/kpi/components/noFit-table.vue
Normal 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>
|
@ -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
|
||||
|
Reference in New Issue
Block a user