task#15950,服务商kpi,月师傅添加总览
This commit is contained in:
@ -37,7 +37,7 @@ export function getKpiDetailsData(data){
|
||||
})
|
||||
}
|
||||
// 获取近12个月的服务商数据
|
||||
export function queryRecentSupplierStatisticsKpi(data){
|
||||
export function getRecentSupplierKpi(data){
|
||||
return request({
|
||||
url: '/supplier/supplierKPI/queryRecentSupplierStatisticsKpi',
|
||||
method:'POST',
|
||||
|
@ -13,6 +13,19 @@
|
||||
<template slot-scope="scope">{{scope.row[item.prop]}} </template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
<template v-else-if="active===3">
|
||||
<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"
|
||||
:width="(isMobile && (column.label=='案件编号' || column.label=='服务内容')) ? 70 : 'auto'">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="column.label === '师傅姓名'">
|
||||
{{ scope.row[column.prop] }}
|
||||
<span style=" color: #FFBA00;" v-if="scope.row.starRank"><i class="el-icon-star-on star"></i>{{scope.row.starRank}}</span>
|
||||
</span>
|
||||
<span v-else>{{ scope.row[column.prop] }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-table-column v-for="column in labelList" :key="column.prop" :prop="column.prop" :label="column.label"
|
||||
align="center" min-width="100" :width="(isMobile && (column.label=='案件编号' || column.label=='服务内容')) ? 70 : 'auto'">
|
||||
@ -31,6 +44,14 @@ export default {
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
computed: {
|
||||
filteredLabelList() {
|
||||
if(this.active!==3){
|
||||
return
|
||||
}
|
||||
return this.labelList.filter(column => column.label !== '星级评分');
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setTableCellStyle({ row, column,columnIndex }) {
|
||||
// 月总表格被转置,原始方法失效,重新定义对比
|
||||
|
@ -139,19 +139,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div :class="{'reciceOrder':true,'webCom':!isMobile,'appUse':isMobile}">、
|
||||
<div class="reciceOrderIWrap" v-if="indexData">
|
||||
<circle-char ref="Doughnut4" :data="indexData && indexData.appRate" :title-text="'使用率'" :bg-color="'#3AA1FF'"
|
||||
:is-store="false"
|
||||
@clickUse="clickJumpHandle(8)"></circle-char>
|
||||
<circle-char ref="Doughnut5" :data="indexData && indexData.threeMinutesContactRate" :title-text="'3′联系客户率'"
|
||||
:bg-color="'#5D7FD7'"></circle-char>
|
||||
<circle-char ref="Doughnut6" :data="indexData && indexData.polymerizationSuccessRate" :title-text="'总聚合成功率'"
|
||||
:bg-color="'#4ECB73'"></circle-char>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div :class="{'allDataChartWrap':true,'webComAllData':!isMobile,'store':isMobile}">
|
||||
<div class="allDataChart" id="allDataChart" ></div>
|
||||
</div>
|
||||
<div v-if="isMobile" style="padding: 20px"></div>
|
||||
</div>
|
||||
@ -283,7 +272,8 @@ import {
|
||||
getStatisticsKpi,
|
||||
getDriverStatisticsKpi,
|
||||
getSupplierId,
|
||||
getDriverName
|
||||
getDriverName,
|
||||
getRecentSupplierKpi
|
||||
} from "@/api/kpi.js"
|
||||
import {myMixins} from "@/utils/myMixins"
|
||||
import CircleChar from "@/views/kpi/components/circleChar.vue";
|
||||
@ -296,14 +286,14 @@ export default {
|
||||
mixins: [myMixins],
|
||||
data() {
|
||||
return {
|
||||
active:0,
|
||||
active:3,
|
||||
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: '服务评价'}, {name: 'APP使用情况'}, {name: '时效 '}],
|
||||
startMonthTime: '',
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
@ -342,7 +332,8 @@ export default {
|
||||
driverselectLoading: false,
|
||||
driverselectOption: [],
|
||||
leftArr:'<<<',
|
||||
showScoreChart:true
|
||||
showScoreChart:true,
|
||||
continueMonthKpi:[]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@ -355,6 +346,7 @@ export default {
|
||||
await this.checkMobile();
|
||||
await this.initDate();
|
||||
await this.getData();
|
||||
// await this.allDataChart()
|
||||
},
|
||||
methods: {
|
||||
async selectSupplierNameHanldle(){
|
||||
@ -425,6 +417,7 @@ export default {
|
||||
this.xAxisArr = []
|
||||
this.etlDetailList=[]
|
||||
this.etlLabelList=[]
|
||||
this.continueMonthKpi=[]
|
||||
await this.getKpiData()
|
||||
this.loadingData = false
|
||||
} finally {
|
||||
@ -848,10 +841,81 @@ export default {
|
||||
};
|
||||
option && myChart.setOption(option, true);
|
||||
},
|
||||
async allDataChart(){
|
||||
let res = await getRecentSupplierKpi({
|
||||
startTime: this.startTime,
|
||||
endTime: this.endTime,
|
||||
statisticsType: 1,
|
||||
supplierId: this.supplierId,
|
||||
driverId: this.driverId,
|
||||
driverName:this.driverName,
|
||||
});
|
||||
console.log("res",res)
|
||||
this.continueMonthKpi=res.data;
|
||||
let v1=[]
|
||||
let v2=[]
|
||||
if( this.continueMonthKpi.length>0){
|
||||
this.continueMonthKpi.forEach(item=>{
|
||||
v1.push(item.dispatchOrderCount)
|
||||
v2.push(item.orderScore)
|
||||
})
|
||||
}
|
||||
let myChart = echarts.init(document.getElementById('allDataChart'))
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
crossStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: { },
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
formatter: '{value}'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
formatter: '{value}'
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '案件量',
|
||||
type: 'bar',
|
||||
data:v1
|
||||
},
|
||||
{
|
||||
name: '总分',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: v2
|
||||
}
|
||||
]
|
||||
};
|
||||
option && myChart.setOption(option, true);
|
||||
},
|
||||
async getKpiData() {
|
||||
try {
|
||||
this.loading = true
|
||||
if (this.active === 0) {
|
||||
await this.allDataChart()
|
||||
let res = await getStatisticsKpiByMonth({
|
||||
startTime: this.startTime,
|
||||
endTime: this.endTime,
|
||||
@ -1296,6 +1360,34 @@ export default {
|
||||
}
|
||||
} else if (this.active === 3) {
|
||||
if (this.activeIndex === 0) {
|
||||
this.labelList = [
|
||||
{label: '师傅姓名', prop: 'supplierDriverStatisticsScore.driverName'},
|
||||
{label: '总分', prop: 'supplierDriverStatisticsScore.score'},
|
||||
{label: '案件总量', prop: 'supplierDriverStatisticsScore.orderCount'},
|
||||
{label: '累计得分', prop: 'supplierDriverStatisticsScore.cumulativeScore'},
|
||||
{label: '两分钟内接单得分', prop: 'supplierDriverStatisticsScore.twoMinutesAcceptScore'},
|
||||
{label: '1分钟内联系客户得分', prop: 'supplierDriverStatisticsScore.oneMinutesContactCustomerScore'},
|
||||
{label: '联系成功得分', prop: 'supplierDriverStatisticsScore.contactSuccessScore'},
|
||||
{label: '准时到达B点得分', prop: 'supplierDriverStatisticsScore.arriveBScore'},
|
||||
{label: '准时到达C点得分', prop: 'supplierDriverStatisticsScore.arriveCScore'},
|
||||
{label: '服务成功得分', prop: 'supplierDriverStatisticsScore.serviceSuccessScore'},
|
||||
{label: '必传照片上传得分', prop: 'supplierDriverStatisticsScore.uploadPhotoScore'},
|
||||
{label: '审核一次通过得分', prop: 'supplierDriverStatisticsScore.auditScore'},
|
||||
{label: '平安案件无评价扣分', prop: 'supplierDriverStatisticsScore.pinganNoCommentDeduct'},
|
||||
{label: '案件差评扣分', prop: 'supplierDriverStatisticsScore.orderNegativeDeduct'},
|
||||
{label: '催促扣分', prop: 'supplierDriverStatisticsScore.urgeDeduct'},
|
||||
{label: '有责车损扣分', prop: 'supplierDriverStatisticsScore.responsibleDeduct'},
|
||||
{label: '有责投诉(非态度类)扣分', prop: 'supplierDriverStatisticsScore.complaintNoAttitudeDeduct'},
|
||||
{label: '有责投诉(态度类)扣分', prop: 'supplierDriverStatisticsScore.complaintAttitudeDeduct'},
|
||||
{label: '拒单扣分', prop: 'supplierDriverStatisticsScore.rejectDeduct'},
|
||||
{label: '超时扣分', prop: 'supplierDriverStatisticsScore.timeoutDeduct'},
|
||||
{label: '聚合成功得分', prop: 'supplierDriverStatisticsScore.polymerizationSuccessScore'},
|
||||
{label: '聚合失败扣分', prop: 'supplierDriverStatisticsScore.polymerizationFailDeduct'},
|
||||
{label: '每月培训得分', prop: 'supplierDriverStatisticsScore.trainingScore'},
|
||||
{label: '新手入列得分', prop: 'supplierDriverStatisticsScore.listedScore'},
|
||||
{label: '星级评分', prop: 'supplierDriverStatisticsScore.starRank'},
|
||||
]
|
||||
}if (this.activeIndex === 1) {
|
||||
this.labelList = [
|
||||
{label: '师傅姓名', prop: 'driverName'},
|
||||
{label: '承接案件量', prop: 'receiveOrderCount'},
|
||||
@ -1304,7 +1396,7 @@ export default {
|
||||
{label: '超时接单量', prop: 'timeoutOrderCount'},
|
||||
{label: '超时率(%)', prop: 'timeoutOrderRate'},
|
||||
]
|
||||
} else if (this.activeIndex === 1) {
|
||||
} else if (this.activeIndex === 2) {
|
||||
this.labelList = [
|
||||
{label: '师傅姓名', prop: 'driverName'},
|
||||
{label: '承接案件量', prop: 'receiveOrderCount'},
|
||||
@ -1314,7 +1406,7 @@ export default {
|
||||
{label: '客户评价率(%)', prop: 'customerEvaluateRate'},
|
||||
{label: '催促率(%)', prop: 'urgeRate'},
|
||||
]
|
||||
} else if (this.activeIndex === 2) {
|
||||
} else if (this.activeIndex === 3) {
|
||||
this.labelList = [
|
||||
{label: '师傅姓名', prop: 'driverName'},
|
||||
{label: '承接案件量', prop: 'receiveOrderCount'},
|
||||
@ -1326,7 +1418,7 @@ export default {
|
||||
{label: '总聚合成功率(%)', prop: 'polymerizationSuccessRate'},
|
||||
{label: '日均在线时长(h)', prop: 'onlineDuration'},
|
||||
]
|
||||
} else if (this.activeIndex === 3) {
|
||||
} else if (this.activeIndex === 4) {
|
||||
this.labelList = [
|
||||
{label: '师傅姓名', prop: 'driverName'},
|
||||
{label: '接单时效(分)', prop: 'receiving'},
|
||||
@ -1614,7 +1706,21 @@ export default {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
.allDataChartWrap{
|
||||
width: 375px;
|
||||
height: 220px;
|
||||
|
||||
}
|
||||
.allDataChart{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.webComAllData{
|
||||
width: 400px;
|
||||
height: 255px;
|
||||
float: left;
|
||||
margin: 10px;
|
||||
}
|
||||
.webCom {
|
||||
@include whBg(420px, 200px, #FFFFFF);
|
||||
float: left;
|
||||
|
Reference in New Issue
Block a user