task#15950,服务商kpi,月师傅添加总览
This commit is contained in:
@ -37,7 +37,7 @@ export function getKpiDetailsData(data){
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
// 获取近12个月的服务商数据
|
// 获取近12个月的服务商数据
|
||||||
export function queryRecentSupplierStatisticsKpi(data){
|
export function getRecentSupplierKpi(data){
|
||||||
return request({
|
return request({
|
||||||
url: '/supplier/supplierKPI/queryRecentSupplierStatisticsKpi',
|
url: '/supplier/supplierKPI/queryRecentSupplierStatisticsKpi',
|
||||||
method:'POST',
|
method:'POST',
|
||||||
|
@ -13,6 +13,19 @@
|
|||||||
<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">
|
||||||
|
<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>
|
<template v-else>
|
||||||
<el-table-column v-for="column in labelList" :key="column.prop" :prop="column.prop" :label="column.label"
|
<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'">
|
align="center" min-width="100" :width="(isMobile && (column.label=='案件编号' || column.label=='服务内容')) ? 70 : 'auto'">
|
||||||
@ -31,6 +44,14 @@ export default {
|
|||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
filteredLabelList() {
|
||||||
|
if(this.active!==3){
|
||||||
|
return
|
||||||
|
}
|
||||||
|
return this.labelList.filter(column => column.label !== '星级评分');
|
||||||
|
}
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
setTableCellStyle({ row, column,columnIndex }) {
|
setTableCellStyle({ row, column,columnIndex }) {
|
||||||
// 月总表格被转置,原始方法失效,重新定义对比
|
// 月总表格被转置,原始方法失效,重新定义对比
|
||||||
|
@ -139,19 +139,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div :class="{'allDataChartWrap':true,'webComAllData':!isMobile,'store':isMobile}">
|
||||||
<div :class="{'reciceOrder':true,'webCom':!isMobile,'appUse':isMobile}">、
|
<div class="allDataChart" id="allDataChart" ></div>
|
||||||
<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>
|
</div>
|
||||||
<div v-if="isMobile" style="padding: 20px"></div>
|
<div v-if="isMobile" style="padding: 20px"></div>
|
||||||
</div>
|
</div>
|
||||||
@ -283,7 +272,8 @@ import {
|
|||||||
getStatisticsKpi,
|
getStatisticsKpi,
|
||||||
getDriverStatisticsKpi,
|
getDriverStatisticsKpi,
|
||||||
getSupplierId,
|
getSupplierId,
|
||||||
getDriverName
|
getDriverName,
|
||||||
|
getRecentSupplierKpi
|
||||||
} from "@/api/kpi.js"
|
} from "@/api/kpi.js"
|
||||||
import {myMixins} from "@/utils/myMixins"
|
import {myMixins} from "@/utils/myMixins"
|
||||||
import CircleChar from "@/views/kpi/components/circleChar.vue";
|
import CircleChar from "@/views/kpi/components/circleChar.vue";
|
||||||
@ -296,14 +286,14 @@ export default {
|
|||||||
mixins: [myMixins],
|
mixins: [myMixins],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
active:0,
|
active:3,
|
||||||
activeIndex: 0,
|
activeIndex: 0,
|
||||||
tabArr: [
|
tabArr: [
|
||||||
{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: ' 时效 '}],
|
||||||
driverList: [{name: '接单情况'}, {name: '服务评价'}, {name: 'APP使用情况'}, {name: '时效 '}],
|
driverList: [{name: '得分总览'},{name: '接单情况'}, {name: '服务评价'}, {name: 'APP使用情况'}, {name: '时效 '}],
|
||||||
startMonthTime: '',
|
startMonthTime: '',
|
||||||
startTime: '',
|
startTime: '',
|
||||||
endTime: '',
|
endTime: '',
|
||||||
@ -342,7 +332,8 @@ export default {
|
|||||||
driverselectLoading: false,
|
driverselectLoading: false,
|
||||||
driverselectOption: [],
|
driverselectOption: [],
|
||||||
leftArr:'<<<',
|
leftArr:'<<<',
|
||||||
showScoreChart:true
|
showScoreChart:true,
|
||||||
|
continueMonthKpi:[]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
@ -355,6 +346,7 @@ export default {
|
|||||||
await this.checkMobile();
|
await this.checkMobile();
|
||||||
await this.initDate();
|
await this.initDate();
|
||||||
await this.getData();
|
await this.getData();
|
||||||
|
// await this.allDataChart()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
async selectSupplierNameHanldle(){
|
async selectSupplierNameHanldle(){
|
||||||
@ -425,6 +417,7 @@ export default {
|
|||||||
this.xAxisArr = []
|
this.xAxisArr = []
|
||||||
this.etlDetailList=[]
|
this.etlDetailList=[]
|
||||||
this.etlLabelList=[]
|
this.etlLabelList=[]
|
||||||
|
this.continueMonthKpi=[]
|
||||||
await this.getKpiData()
|
await this.getKpiData()
|
||||||
this.loadingData = false
|
this.loadingData = false
|
||||||
} finally {
|
} finally {
|
||||||
@ -848,10 +841,81 @@ export default {
|
|||||||
};
|
};
|
||||||
option && myChart.setOption(option, true);
|
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() {
|
async getKpiData() {
|
||||||
try {
|
try {
|
||||||
this.loading = true
|
this.loading = true
|
||||||
if (this.active === 0) {
|
if (this.active === 0) {
|
||||||
|
await this.allDataChart()
|
||||||
let res = await getStatisticsKpiByMonth({
|
let res = await getStatisticsKpiByMonth({
|
||||||
startTime: this.startTime,
|
startTime: this.startTime,
|
||||||
endTime: this.endTime,
|
endTime: this.endTime,
|
||||||
@ -1296,6 +1360,34 @@ export default {
|
|||||||
}
|
}
|
||||||
} else if (this.active === 3) {
|
} else if (this.active === 3) {
|
||||||
if (this.activeIndex === 0) {
|
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 = [
|
this.labelList = [
|
||||||
{label: '师傅姓名', prop: 'driverName'},
|
{label: '师傅姓名', prop: 'driverName'},
|
||||||
{label: '承接案件量', prop: 'receiveOrderCount'},
|
{label: '承接案件量', prop: 'receiveOrderCount'},
|
||||||
@ -1304,7 +1396,7 @@ export default {
|
|||||||
{label: '超时接单量', prop: 'timeoutOrderCount'},
|
{label: '超时接单量', prop: 'timeoutOrderCount'},
|
||||||
{label: '超时率(%)', prop: 'timeoutOrderRate'},
|
{label: '超时率(%)', prop: 'timeoutOrderRate'},
|
||||||
]
|
]
|
||||||
} else if (this.activeIndex === 1) {
|
} else if (this.activeIndex === 2) {
|
||||||
this.labelList = [
|
this.labelList = [
|
||||||
{label: '师傅姓名', prop: 'driverName'},
|
{label: '师傅姓名', prop: 'driverName'},
|
||||||
{label: '承接案件量', prop: 'receiveOrderCount'},
|
{label: '承接案件量', prop: 'receiveOrderCount'},
|
||||||
@ -1314,7 +1406,7 @@ export default {
|
|||||||
{label: '客户评价率(%)', prop: 'customerEvaluateRate'},
|
{label: '客户评价率(%)', prop: 'customerEvaluateRate'},
|
||||||
{label: '催促率(%)', prop: 'urgeRate'},
|
{label: '催促率(%)', prop: 'urgeRate'},
|
||||||
]
|
]
|
||||||
} else if (this.activeIndex === 2) {
|
} else if (this.activeIndex === 3) {
|
||||||
this.labelList = [
|
this.labelList = [
|
||||||
{label: '师傅姓名', prop: 'driverName'},
|
{label: '师傅姓名', prop: 'driverName'},
|
||||||
{label: '承接案件量', prop: 'receiveOrderCount'},
|
{label: '承接案件量', prop: 'receiveOrderCount'},
|
||||||
@ -1326,7 +1418,7 @@ export default {
|
|||||||
{label: '总聚合成功率(%)', prop: 'polymerizationSuccessRate'},
|
{label: '总聚合成功率(%)', prop: 'polymerizationSuccessRate'},
|
||||||
{label: '日均在线时长(h)', prop: 'onlineDuration'},
|
{label: '日均在线时长(h)', prop: 'onlineDuration'},
|
||||||
]
|
]
|
||||||
} else if (this.activeIndex === 3) {
|
} else if (this.activeIndex === 4) {
|
||||||
this.labelList = [
|
this.labelList = [
|
||||||
{label: '师傅姓名', prop: 'driverName'},
|
{label: '师傅姓名', prop: 'driverName'},
|
||||||
{label: '接单时效(分)', prop: 'receiving'},
|
{label: '接单时效(分)', prop: 'receiving'},
|
||||||
@ -1614,7 +1706,21 @@ export default {
|
|||||||
margin-bottom: 0 !important;
|
margin-bottom: 0 !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.allDataChartWrap{
|
||||||
|
width: 375px;
|
||||||
|
height: 220px;
|
||||||
|
|
||||||
|
}
|
||||||
|
.allDataChart{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.webComAllData{
|
||||||
|
width: 400px;
|
||||||
|
height: 255px;
|
||||||
|
float: left;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
.webCom {
|
.webCom {
|
||||||
@include whBg(420px, 200px, #FFFFFF);
|
@include whBg(420px, 200px, #FFFFFF);
|
||||||
float: left;
|
float: left;
|
||||||
|
Reference in New Issue
Block a user