task#14196，kpi优化
This commit is contained in:
@ -2,14 +2,14 @@
|
||||
<div class="wrap">
|
||||
<div v-if="isMobile" class="headWrap">
|
||||
<div class="title">KPI.数据看板</div>
|
||||
<div class="titleName">6月-我是服务商名称</div>
|
||||
<div class="titleName">{{ current }}月-我是服务商名称</div>
|
||||
</div>
|
||||
<div v-else class="webHeadWrap">
|
||||
<div class="empty"></div>
|
||||
<div class="title">KPI.数据看板</div>
|
||||
<div v-else class="webHeadWrap" :style="'justify-content:'+(isZd==1 ? 'space-between':'center')">
|
||||
<div class="empty" v-if="isZd==1"></div>
|
||||
<div class="title">KPI.数据看板<span v-if="isZd!=1">--{{ current }}月</span></div>
|
||||
<!-- 只有中道账号才显示搜索框 -->
|
||||
<div class="searchWrap">
|
||||
<span class="month">7月</span>
|
||||
<div class="searchWrap" v-if="isZd==1">
|
||||
<span class="month">{{ current }}月</span>
|
||||
<input class="ipt" maxlength="20" placeholder="请输入服务商名称" v-model="supplierName" />
|
||||
<i class="el-icon-search" @click="searchHandle"></i>
|
||||
</div>
|
||||
@ -26,11 +26,11 @@
|
||||
<div class="itemTitle">承接案件量</div>
|
||||
</div>
|
||||
<div class="center common" @click="clickJumpHandle(5)">
|
||||
<div class="num">{{ indexData.refuseOrderRate }}</div>
|
||||
<div class="num">{{ indexData.refuseOrderRate }}%</div>
|
||||
<div class="itemTitle">拒单率 ></div>
|
||||
</div>
|
||||
<div class="right common" @click="clickJumpHandle(6)">
|
||||
<div class="num">{{ indexData.timeoutOrderRate }}</div>
|
||||
<div class="num">{{ indexData.timeoutOrderRate }}%</div>
|
||||
<div class="itemTitle">超时率 ></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -38,18 +38,18 @@
|
||||
<div :class="{'reciceOrder':true,'webCom':!isMobile,'evaluate':isMobile}">
|
||||
<div class="title">客户评价</div>
|
||||
<div class="reciceOrderIWrap">
|
||||
<circle-char :data="indexData.complainOrderRate" :title-text="'投诉率'" :bg-color="'#9485ED'"
|
||||
<circle-char v-if="indexData" :data="indexData.complainOrderRate" :title-text="'投诉率'" :bg-color="'#9485ED'"
|
||||
:is-store="false" @clickComplain="clickJumpHandle(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>
|
||||
<circle-char v-if="indexData" :data="indexData.customerSatisfaction" :title-text="'客户满意度'" :bg-color="'#5DDECF'" ></circle-char>
|
||||
<circle-char v-if="indexData" :data="indexData.urgeRate" :title-text="'催促率'" :bg-color="'#FFADAD'" ></circle-char>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{'reciceOrder':true,'webCom':!isMobile,'appUse':isMobile}">
|
||||
<div class="title">APP使用</div>
|
||||
<div class="reciceOrderIWrap">
|
||||
<circle-char :data="indexData.appRate" :title-text="'使用率'" :bg-color="'#3AA1FF'" :is-store="false" @clickUse="clickJumpHandle(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>
|
||||
<circle-char v-if="indexData" :data="indexData.appRate" :title-text="'使用率'" :bg-color="'#3AA1FF'" :is-store="false" @clickUse="clickJumpHandle(8)"></circle-char>
|
||||
<circle-char v-if="indexData" :data="indexData.threeMinutesContactRate" :title-text="'3′联系客户率'" :bg-color="'#5D7FD7'" ></circle-char>
|
||||
<circle-char v-if="indexData" :data="indexData.polymerizationSuccessRate" :title-text="'总聚合成功率'" :bg-color="'#4ECB73'" ></circle-char>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{'reciceOrder':true,'webCom':!isMobile}">
|
||||
@ -74,79 +74,81 @@
|
||||
<div :class="{'reciceOrder':true,'webCom':!isMobile,'store':isMobile}">
|
||||
<div class="title">综合打分</div>
|
||||
<div class="storeWrap">
|
||||
<circle-char :data="indexData.score" :bg-color="'#00D273'" :is-store="true"></circle-char>
|
||||
<circle-char v-if="indexData" :data="indexData.score" :bg-color="'#00D273'" :is-store="true"></circle-char>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="isMobile" style="padding: 30px"></div>
|
||||
</div>
|
||||
<div class="contentWrap monthTotal" v-if="active===1">
|
||||
<div class="tabWrap">
|
||||
<div :class="{'tabWrap':true,'webTabWrap':!isMobile}">
|
||||
<div v-for="(item,index) in list" :class="activeIndex===index ? 'active' : ''" :key="index" @click="changeTab(index)">{{item.name}}</div>
|
||||
</div>
|
||||
<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 :class="{'chartWrapWeb':!isMobile}">
|
||||
<div v-if="active===1" id="chartWrap" style="width: 100%;height:300px" ></div>
|
||||
</div>
|
||||
<div :class="{'comTab':true,'webTab':!isMobile,'mobileTab':isMobile}">
|
||||
<noFit-table :is-mobile='isMobile' :table-data="detailList" :label-list="labelList"></noFit-table>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="isMobile" style="padding: 30px"></div>
|
||||
</div>
|
||||
<div class="contentWrap monthTotal" v-if="active===2">
|
||||
<div class="tabWrap">
|
||||
<div :class="{'tabWrap':true,'webTabWrap':!isMobile}">
|
||||
<div v-for="(item,index) in list" :class="activeIndex===index ? 'active' : ''" :key="index" @click="changeTab(index)">{{item.name}}</div>
|
||||
</div>
|
||||
<div class="comTab">
|
||||
<noFit-table :table-data="detailList" :label-list="labelList"></noFit-table>
|
||||
<div :class="{'comTab':true,'webTab':!isMobile,'mobileTab':isMobile}">
|
||||
<noFit-table :is-mobile='isMobile' :table-data="detailList" :label-list="labelList"></noFit-table>
|
||||
</div>
|
||||
<div v-if="isMobile" style="padding: 30px"></div>
|
||||
</div>
|
||||
<div class="contentWrap monthTotal" v-if="active===3">
|
||||
<div class="tabWrap">
|
||||
<div :class="{'tabWrap':true,'webTabWrap':!isMobile}">
|
||||
<div v-for="(item,index) in driverList" :class="activeIndex===index ? 'active' : ''" :key="index" @click="changeTab(index)">{{item.name}}</div>
|
||||
</div>
|
||||
<div class="comTab">
|
||||
<noFit-table :table-data="detailList" :label-list="labelList"></noFit-table>
|
||||
<div :class="{'comTab':true,'webTab':!isMobile,'mobileTab':isMobile}">
|
||||
<noFit-table :is-mobile='isMobile' :table-data="detailList" :label-list="labelList"></noFit-table>
|
||||
</div>
|
||||
<div v-if="isMobile" style="padding: 30px"></div>
|
||||
</div>
|
||||
<div class="contentWrap monthTotal" v-if="active===4">
|
||||
<div class="tabWrap">
|
||||
<div :class="{'tabWrap':true,'webTabWrap':!isMobile,'mobileTab':isMobile}">
|
||||
<div v-for="(item,index) in list" :class="activeIndex===index ? 'active' : ''" :key="index" @click="changeTab(index)">{{item.name}}</div>
|
||||
</div>
|
||||
<div class="comTab">
|
||||
<noFit-table :table-data="detailList" :label-list="labelList"></noFit-table>
|
||||
<div :class="{'comTab':true,'webTab':!isMobile}">
|
||||
<noFit-table :is-mobile='isMobile' :table-data="detailList" :label-list="labelList"></noFit-table>
|
||||
</div>
|
||||
<div v-if="isMobile" style="padding: 30px"></div>
|
||||
</div>
|
||||
<div class="contentWrap monthTotal" v-if="active===5">
|
||||
<div class="comTab">
|
||||
<noFit-table :table-data="detailList" :label-list="labelList"></noFit-table>
|
||||
<div :class="{'comTab':true,'detailTable':isMobile}">
|
||||
<noFit-table :is-mobile='isMobile' :table-data="detailList" :label-list="labelList"></noFit-table>
|
||||
</div>
|
||||
<div v-if="isMobile" style="padding: 30px"></div>
|
||||
<!-- <el-pagination
|
||||
small
|
||||
layout="prev, pager, next"
|
||||
:total="50">
|
||||
</el-pagination>-->
|
||||
</div>
|
||||
<div class="contentWrap monthTotal" v-if="active===6">
|
||||
<div class="comTab">
|
||||
<noFit-table :table-data="detailList" :label-list="labelList" :loading="loading"></noFit-table>
|
||||
<div :class="{'comTab':true,'detailTable':isMobile}">
|
||||
<noFit-table :is-mobile='isMobile' :table-data="detailList" :label-list="labelList" :loading="loading"></noFit-table>
|
||||
</div>
|
||||
<div v-if="isMobile" style="padding: 30px"></div>
|
||||
</div>
|
||||
<div class="contentWrap monthTotal" v-if="active===7">
|
||||
<div class="comTab">
|
||||
<noFit-table :table-data="detailList" :label-list="labelList" :loading="loading"></noFit-table>
|
||||
<div :class="{'comTab':true,'detailTable':isMobile}">
|
||||
<noFit-table :is-mobile='isMobile' :table-data="detailList" :label-list="labelList" :loading="loading"></noFit-table>
|
||||
</div>
|
||||
<div v-if="isMobile" style="padding: 30px"></div>
|
||||
</div>
|
||||
<div class="contentWrap monthTotal" v-if="active===8">
|
||||
<div class="comTab">
|
||||
<noFit-table :table-data="detailList" :label-list="labelList" :loading="loading"></noFit-table>
|
||||
<div :class="{'comTab':true,'detailTable':isMobile}">
|
||||
<noFit-table :is-mobile='isMobile' :table-data="detailList" :label-list="labelList" :loading="loading"></noFit-table>
|
||||
</div>
|
||||
<div v-if="isMobile" style="padding: 30px"></div>
|
||||
</div>
|
||||
<div class="contentWrap monthTotal" v-if="active===9">
|
||||
<div class="comTab">
|
||||
<noFit-table :table-data="detailList" :label-list="labelList" :loading="loading"></noFit-table>
|
||||
<div :class="{'comTab':true,'detailTable':isMobile}">
|
||||
<noFit-table :is-mobile='isMobile' :table-data="detailList" :label-list="labelList" :loading="loading"></noFit-table>
|
||||
</div>
|
||||
<div v-if="isMobile" style="padding: 30px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -154,7 +156,7 @@
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import dayjs from "dayjs";
|
||||
import {getKpiDetailsData,getStatisticsKpiByMonth,getStatisticsKpi,getDriverStatisticsKpi} from "@/api/kpi.js"
|
||||
import {getKpiDetailsData,getStatisticsKpiByMonth,getStatisticsKpi,getDriverStatisticsKpi,getSupplierId} from "@/api/kpi.js"
|
||||
import {myMixins} from "@/utils/myMixins"
|
||||
import CircleChar from "@/views/kpi/components/circleChar.vue";
|
||||
import NoFitTable from "@/views/kpi/components/noFit-table.vue";
|
||||
@ -165,7 +167,7 @@ export default {
|
||||
mixins: [myMixins],
|
||||
data() {
|
||||
return {
|
||||
active: 1,
|
||||
active:0,
|
||||
activeIndex: 0,
|
||||
tabArr: [
|
||||
{name: '总览'}, {name: '月/总'}, {name: '日/总'}, {name: '月/师傅'}, {name: '日/师傅'}, {name: '拒单明细'},
|
||||
@ -184,33 +186,48 @@ export default {
|
||||
v2:[],
|
||||
v3:[],
|
||||
v4:[],
|
||||
// tableData:[],
|
||||
v5:[],
|
||||
v6:[],
|
||||
isMobile: false,
|
||||
supplierName: '',
|
||||
isZd:'',
|
||||
current:dayjs(new Date()).format('M'),
|
||||
selectLoading: false,
|
||||
selectList: [],
|
||||
options: [],
|
||||
oldOptions: [],
|
||||
svalue: '',
|
||||
checkOptions: [],
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
this.checkMobile();
|
||||
await this.getDateArr();
|
||||
await this.initDate();
|
||||
await this.getData();
|
||||
if(this.active===1 && this.activeIndex===0){
|
||||
this.$nextTick(()=>{
|
||||
if(this.active===1){
|
||||
setTimeout(()=>{
|
||||
this.drawLine()
|
||||
})
|
||||
},500)
|
||||
}
|
||||
},
|
||||
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') || ''
|
||||
console.log("urlParams?.get('isZd')",urlParams?.get('isZd'))
|
||||
},
|
||||
async activated() {
|
||||
},
|
||||
methods: {
|
||||
searchHandle(){//web端服务商搜索操作
|
||||
|
||||
async searchHandle(){//web端服务商搜索操作
|
||||
console.log("this.svalue",this.svalue)
|
||||
try {
|
||||
const response = await getSupplierId(this.svalue);
|
||||
console.log(response.data);
|
||||
} catch (error) {
|
||||
console.error('请求失败:', error);
|
||||
}
|
||||
},
|
||||
async clickJumpHandle(type){
|
||||
this.loading=true
|
||||
@ -220,7 +237,6 @@ export default {
|
||||
checkMobile() {
|
||||
const userAgent = navigator.userAgent || navigator.vendor || window.opera;
|
||||
this.isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent);
|
||||
// console.log("his.isMobile",this.isMobile)
|
||||
},
|
||||
onClick() {
|
||||
this.activeIndex=0;
|
||||
@ -233,35 +249,231 @@ export default {
|
||||
this.startTime = '2024-06-01' //dayjs(new Date()).format('YYYY-MM') + '-01'
|
||||
this.endTime = '2024-06-30'//dayjs(new Date()).format('YYYY-MM') + '-' + this.getDayLen()
|
||||
},
|
||||
// 获取当月天数
|
||||
getDayLen() {
|
||||
let date;
|
||||
let year;
|
||||
let month;
|
||||
let d;
|
||||
date = new Date();
|
||||
year = date.getFullYear();
|
||||
month = date.getMonth()+1;
|
||||
d = new Date(year, month, 0);
|
||||
return d.getDate();
|
||||
},
|
||||
// 获取时间区间的数组
|
||||
async getDateArr() {
|
||||
await this.initDate()
|
||||
this.xAxisArr = [];
|
||||
let startTime = new Date(this.startTime).getTime();
|
||||
let endTime = new Date(this.endTime).getTime();
|
||||
let i = 0;
|
||||
let tempTime;
|
||||
do {
|
||||
tempTime = startTime + i * (24*3600*1000);
|
||||
// this.xAxisArr.push(dayjs(tempTime).format('DD'));
|
||||
i++;
|
||||
} while ( tempTime < endTime)
|
||||
},
|
||||
drawLine() { // 基于准备好的dom，初始化echarts实例
|
||||
let myChart = echarts.init(document.getElementById('chartWrap'))
|
||||
let option;
|
||||
//接单指标
|
||||
let series1=[ {
|
||||
name:'派遣案件量',
|
||||
type: 'bar',
|
||||
data:this.v1,
|
||||
yAxisIndex: 0,
|
||||
smooth: true,
|
||||
barWidth: this.isMobile ? 35 : 60,
|
||||
label: {
|
||||
show: true, // 显示标签
|
||||
position: 'top', // 标签位置在柱形顶部
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '拒单率',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data:this.v2,
|
||||
yAxisIndex: 1,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter: '{c} %'
|
||||
},
|
||||
},
|
||||
{
|
||||
name:'超时率',
|
||||
type:"line",
|
||||
data:this.v3,
|
||||
yAxisIndex: 1,
|
||||
smooth: true,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter: '{c} %'
|
||||
},
|
||||
},
|
||||
{
|
||||
name:'客户取消率',
|
||||
type:"line",
|
||||
data:this.v4,
|
||||
yAxisIndex: 1,
|
||||
smooth: true,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter: '{c} %'
|
||||
},
|
||||
},
|
||||
]
|
||||
let series2=[ {
|
||||
name:'客户满意度',
|
||||
type: 'bar',
|
||||
data:this.v1,
|
||||
yAxisIndex: 0,
|
||||
smooth: true,
|
||||
barWidth: this.isMobile ? 35 : 60,
|
||||
label: {
|
||||
show: true, // 显示标签
|
||||
position: 'top', // 标签位置在柱形顶部
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '评价率',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data:this.v2,
|
||||
yAxisIndex: 1,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter: '{c} %'
|
||||
},
|
||||
},
|
||||
{
|
||||
name:'投诉率',
|
||||
type:"line",
|
||||
data:this.v3,
|
||||
yAxisIndex: 1,
|
||||
smooth: true,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter: '{c} %'
|
||||
},
|
||||
},
|
||||
]
|
||||
let series3=[
|
||||
{
|
||||
name:'APP使用率',
|
||||
type: 'line',
|
||||
data:this.v1,
|
||||
yAxisIndex: 0,
|
||||
smooth: true,
|
||||
label: {
|
||||
show: true, // 显示标签
|
||||
position: 'top', // 标签位置在柱形顶部
|
||||
formatter: '{c} %'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '3′联系客户率',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data:this.v2,
|
||||
yAxisIndex: 1,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter: '{c} %'
|
||||
},
|
||||
},
|
||||
{
|
||||
name:'平安成功率',
|
||||
type:"line",
|
||||
data:this.v3,
|
||||
yAxisIndex: 1,
|
||||
smooth: true,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter: '{c} %'
|
||||
},
|
||||
},
|
||||
{
|
||||
name:'中华成功率',
|
||||
type:"line",
|
||||
data:this.v4,
|
||||
yAxisIndex: 1,
|
||||
smooth: true,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter: '{c} %'
|
||||
},
|
||||
},
|
||||
{
|
||||
name:'中道成功率',
|
||||
type:"line",
|
||||
data:this.v5,
|
||||
yAxisIndex: 1,
|
||||
smooth: true,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter: '{c} %'
|
||||
},
|
||||
},
|
||||
{
|
||||
name:'总成功率',
|
||||
type:"line",
|
||||
data:this.v6,
|
||||
yAxisIndex: 1,
|
||||
smooth: true,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter: '{c} %'
|
||||
},
|
||||
},
|
||||
]
|
||||
let series4=[ {
|
||||
name:'派遣案件量',
|
||||
type: 'bar',
|
||||
data:this.v1,
|
||||
yAxisIndex: 0,
|
||||
smooth: true,
|
||||
barWidth: this.isMobile ? 35 : 60,
|
||||
label: {
|
||||
show: true, // 显示标签
|
||||
position: 'top', // 标签位置在柱形顶部
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '拒单率',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data:this.v2,
|
||||
yAxisIndex: 1,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter: '{c} %'
|
||||
},
|
||||
},
|
||||
{
|
||||
name:'超时率',
|
||||
type:"line",
|
||||
data:this.v3,
|
||||
yAxisIndex: 1,
|
||||
smooth: true,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter: '{c} %'
|
||||
},
|
||||
},
|
||||
{
|
||||
name:'客户取消率',
|
||||
type:"line",
|
||||
data:this.v4,
|
||||
yAxisIndex: 1,
|
||||
smooth: true,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter: '{c} %'
|
||||
},
|
||||
},
|
||||
]
|
||||
let series=[]
|
||||
if(this.active===1){
|
||||
if(this.activeIndex===0){
|
||||
series=series1
|
||||
}else if(this.activeIndex===1){
|
||||
series=series2
|
||||
}else if(this.activeIndex===2){
|
||||
series=series3
|
||||
}else if(this.activeIndex===3){
|
||||
series=series4
|
||||
}
|
||||
}
|
||||
option = {
|
||||
title: {
|
||||
text: '接单时效',
|
||||
@ -273,72 +485,24 @@ export default {
|
||||
textStyle:{
|
||||
fontSize:8
|
||||
},
|
||||
right:10
|
||||
itemWidth:10, // 设置图例图标的宽度，从而调整图标大小
|
||||
itemHeight: 6,
|
||||
// right:10
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: this.xAxisArr.reverse(),
|
||||
data: this.xAxisArr,
|
||||
},
|
||||
yAxis: [
|
||||
{type: 'value'},
|
||||
{type: 'value'},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name:'派遣案件量',
|
||||
type:"line",
|
||||
data:this.v1,
|
||||
yAxisIndex: 0,
|
||||
smooth: true,
|
||||
markArea: {
|
||||
itemStyle: {
|
||||
color: 'rgba(255, 173, 177, 0.4)'
|
||||
},
|
||||
data: [
|
||||
[
|
||||
{
|
||||
name: 'value1',
|
||||
xAxis: '07:30'
|
||||
},
|
||||
{
|
||||
xAxis: '10:00'
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
name: 'Evening Peak',
|
||||
xAxis: '17:30'
|
||||
},
|
||||
{
|
||||
xAxis: '21:15'
|
||||
}
|
||||
]
|
||||
]
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
formatter: '{value}%' // 在值后面添加百分比符号
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '拒单率',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data:this.v2,
|
||||
yAxisIndex: 1,
|
||||
},
|
||||
{
|
||||
name:'超时率',
|
||||
type:"line",
|
||||
data:this.v3,
|
||||
yAxisIndex: 1,
|
||||
smooth: true
|
||||
},
|
||||
{
|
||||
name:'客户取消率',
|
||||
type:"line",
|
||||
data:this.v4,
|
||||
yAxisIndex: 1,
|
||||
smooth: true
|
||||
},
|
||||
]
|
||||
],
|
||||
series: series,
|
||||
};
|
||||
option && myChart.setOption(option, true);
|
||||
},
|
||||
@ -347,6 +511,9 @@ export default {
|
||||
this.v2=[]
|
||||
this.v3=[]
|
||||
this.v4=[]
|
||||
this.v5=[]
|
||||
this.v6=[]
|
||||
this.xAxisArr=[]
|
||||
try {
|
||||
this.loading=true
|
||||
if (this.active === 0) {
|
||||
@ -359,8 +526,8 @@ export default {
|
||||
this.indexData=res.data;
|
||||
} else if ([1, 2].includes(this.active)) {
|
||||
let res= await getStatisticsKpi({
|
||||
startTime: '2024-05-01 00:00:00',//this.startTime + ' 00:00:00',
|
||||
endTime: this.endTime + ' 23:59:59',
|
||||
startTime: '2024-03-01 00:00:00',//this.startTime + ' 00:00:00',
|
||||
endTime:'2024-07-31 23:59:59' ,//this.endTime + ' 23:59:59',
|
||||
statisticsType: this.active===1 ? 1 : 2,
|
||||
supplierId:1128,
|
||||
})
|
||||
@ -370,51 +537,66 @@ export default {
|
||||
return {...item,date: formatVal ,month: formatVal1};
|
||||
});
|
||||
this.loading=false
|
||||
this.detailList?.map(item=>{
|
||||
this.xAxisArr.unshift(item.month)
|
||||
})
|
||||
if(this.active===1){
|
||||
if (this.activeIndex === 0) {//接单指标
|
||||
this.detailList?.map(item=>{
|
||||
this.v1.unshift(item.dispatchOrderCount)
|
||||
this.v2.unshift(item.refuseOrderRate)
|
||||
this.v3.unshift(item.timeoutOrderRate)
|
||||
this.v4.unshift(item.cancelrate)
|
||||
})
|
||||
this.labelList = [
|
||||
{label: '月', prop: 'month'},
|
||||
{label: '派遣量', prop: 'dispatchOrderCount'},
|
||||
{label: '承接量', prop: 'receiveOrderCount'},
|
||||
{label: '完成量', prop: 'finishOrderCount'},
|
||||
{label: '拒单量', prop: 'refuseOrderCount'},
|
||||
{label: '拒单率', prop: 'refuseOrderRate'},
|
||||
{label: '拒单率（%）', prop: 'refuseOrderRate'},
|
||||
{label: '超时接单量', prop: 'timeoutOrderCount'},
|
||||
{label: '超时率', prop: 'timeoutOrderRate'},
|
||||
{label: '取消率', prop: 'cancelrate'},
|
||||
{label: '超时率（%）', prop: 'timeoutOrderRate'},
|
||||
{label: '取消率（%）', prop: 'cancelrate'},
|
||||
]
|
||||
this.detailList?.map(item=>{
|
||||
this.xAxisArr.push(item.month)
|
||||
this.v1.push(item.dispatchOrderCount)
|
||||
this.v2.push(item.refuseOrderRate)
|
||||
this.v3.push(item.timeoutOrderRate)
|
||||
this.v4.push(item.cancelrate)
|
||||
})
|
||||
}else if(this.activeIndex === 1){
|
||||
this.detailList?.map(item=>{
|
||||
this.v1.unshift(item.customerSatisfaction)
|
||||
this.v2.unshift(item.customerEvaluateRate)
|
||||
this.v3.unshift(item.complainOrderRate)
|
||||
})
|
||||
this.labelList = [
|
||||
{label: '月', prop: 'month'},
|
||||
{label: '投诉量', prop: 'complainOrderCount'},
|
||||
{label: '投诉率', prop: 'complainOrderRate'},
|
||||
{label:'客户满意度', prop: ''},
|
||||
{label: '客户评价率', prop: 'customerEvaluateRate'},
|
||||
{label: '投诉率（%）', prop: 'complainOrderRate'},
|
||||
{label:'客户满意度', prop: 'customerSatisfaction'},
|
||||
{label: '客户评价率（%）', prop: 'customerEvaluateRate'},
|
||||
]
|
||||
}else if(this.activeIndex === 2){
|
||||
this.detailList?.map(item=>{
|
||||
this.v1.unshift(item.appRate)
|
||||
this.v2.unshift(item.threeMinutesContactRate)
|
||||
this.v3.unshift(item.pinganPolymerizationSuccessRate)
|
||||
this.v4.unshift(item.zhonghuaPolymerizationSuccessRate)
|
||||
this.v5.unshift(item.zdPolymerizationSuccessRate)
|
||||
this.v6.unshift(item.polymerizationSuccessRate)
|
||||
})
|
||||
this.labelList = [
|
||||
{label: '月', prop: 'month'},
|
||||
{label: '使用率', prop: 'appRate'},
|
||||
{label: '3′联系客户率', prop: 'threeMinutesContactRate'},
|
||||
{label: '平安聚合成功率', prop: 'pinganPolymerizationSuccessRate'},
|
||||
{label: '中华聚合成功率', prop: 'zhonghuaPolymerizationSuccessRate'},
|
||||
{label: '中道聚合成功率', prop: 'zdPolymerizationSuccessRate'},
|
||||
{label: '总聚合成功率', prop: 'polymerizationSuccessRate'},
|
||||
{label: '使用率（%）', prop: 'appRate'},
|
||||
{label: '3′联系客户率（%）', prop: 'threeMinutesContactRate'},
|
||||
{label: '平安聚合成功率（%）', prop: 'pinganPolymerizationSuccessRate'},
|
||||
{label: '中华聚合成功率（%）', prop: 'zhonghuaPolymerizationSuccessRate'},
|
||||
{label: '中道聚合成功率（%）', prop: 'zdPolymerizationSuccessRate'},
|
||||
{label: '总聚合成功率（%）', prop: 'polymerizationSuccessRate'},
|
||||
]
|
||||
}else if(this.activeIndex === 3){
|
||||
this.labelList = [
|
||||
{label: '月', prop: 'month'},
|
||||
{label: '接单时效(分)', prop: 'receiving'},
|
||||
{label: '3′接单率', prop: 'threeMinutesReceivingRate'},
|
||||
{label: '3′接单率（%）', prop: 'threeMinutesReceivingRate'},
|
||||
{label: '到达时效(分)', prop: 'arriving'},
|
||||
{label: '40′到达率', prop: 'fortyMinutesArrivalRate'},
|
||||
{label: '40′到达率（%）', prop: 'fortyMinutesArrivalRate'},
|
||||
{label: '聚合成功到达时效', prop: 'polymerizationSuccessArriving'},
|
||||
]
|
||||
}
|
||||
@ -426,39 +608,39 @@ export default {
|
||||
{label: '承接案件量', prop: 'receiveOrderCount'},
|
||||
{label: '完成量', prop: 'finishOrderCount'},
|
||||
{label: '拒单量', prop: 'refuseOrderCount'},
|
||||
{label: '拒单率', prop: 'refuseOrderRate'},
|
||||
{label: '拒单率（%）', prop: 'refuseOrderRate'},
|
||||
{label: '超时接单量', prop: 'timeoutOrderCount'},
|
||||
{label: '超时率', prop: 'timeoutOrderRate'},
|
||||
{label: '客户取消率', prop: 'cancelrate'},
|
||||
{label: '超时率（%）', prop: 'timeoutOrderRate'},
|
||||
{label: '客户取消率（%）', prop: 'cancelrate'},
|
||||
]
|
||||
}else if(this.activeIndex === 1){
|
||||
this.labelList = [
|
||||
{label: '日', prop: 'date'},
|
||||
{label: '投诉量', prop: 'complainOrderCount'},
|
||||
{label: '投诉率', prop: 'complainOrderRate'},
|
||||
{label: '客户评价率', prop: 'customerEvaluateRate'},
|
||||
{label: '催促率', prop: 'urgeRate'},
|
||||
{label: '投诉率（%）', prop: 'complainOrderRate'},
|
||||
{label: '客户评价率（%）', prop: 'customerEvaluateRate'},
|
||||
{label: '催促率（%）', prop: 'urgeRate'},
|
||||
]
|
||||
}else if(this.activeIndex === 2){
|
||||
this.labelList = [
|
||||
{label: '日', prop: 'date'},
|
||||
{label: '使用率', prop: 'appRate'},
|
||||
{label: '3′联系客户率', prop: 'threeMinutesContactRate'},
|
||||
{label: '平安聚合成功率', prop: 'pinganPolymerizationSuccessRate'},
|
||||
{label: '中华聚合成功率', prop: 'zhonghuaPolymerizationSuccessRate'},
|
||||
{label: '中道聚合成功率', prop: 'zdPolymerizationSuccessRate'},
|
||||
{label: '总聚合成功率', prop: 'polymerizationSuccessRate'},
|
||||
{label: '使用率（%）', prop: 'appRate'},
|
||||
{label: '3′联系客户率（%）', prop: 'threeMinutesContactRate'},
|
||||
{label: '平安聚合成功率（%）', prop: 'pinganPolymerizationSuccessRate'},
|
||||
{label: '中华聚合成功率（%）', prop: 'zhonghuaPolymerizationSuccessRate'},
|
||||
{label: '中道聚合成功率（%）', prop: 'zdPolymerizationSuccessRate'},
|
||||
{label: '总聚合成功率（%）', prop: 'polymerizationSuccessRate'},
|
||||
]
|
||||
}else if(this.activeIndex === 3){
|
||||
this.labelList = [
|
||||
{label: '日', prop: 'date'},
|
||||
{label: '接单时效(分)', prop: 'receiving'},
|
||||
{label: '3′接单率', prop: 'threeMinutesReceivingRate'},
|
||||
{label: '3′接单率（%）', prop: 'threeMinutesReceivingRate'},
|
||||
{label: '小修到达时效(分)', prop: 'minorArriving'},
|
||||
{label: '拖车到达时效(分)', prop: 'trailArriving'},
|
||||
{label: '困境到达时效(分)', prop: 'dilemmaArriving'},
|
||||
{label: '到达时效(分)', prop: 'arriving'},
|
||||
{label: '40′到达率', prop: 'fortyMinutesArrivalRate'},
|
||||
{label: '40′到达率（%）', prop: 'fortyMinutesArrivalRate'},
|
||||
{label: '小修聚合成功到达时效(分)', prop: 'minorPolymerizationSuccessArriving'},
|
||||
{label: '拖车聚合成功到达时效(分)', prop: 'trailPolymerizationSuccessArriving'},
|
||||
{label: '聚合成功到达时效', prop: 'polymerizationSuccessArriving'},
|
||||
@ -481,39 +663,39 @@ export default {
|
||||
{label: '师傅姓名', prop: 'driverName'},
|
||||
{label: '承接案件量', prop: 'receiveOrderCount'},
|
||||
{label: '拒单量', prop: 'refuseOrderCount'},
|
||||
{label: '拒单率', prop: 'refuseOrderRate'},
|
||||
{label: '拒单率（%）', prop: 'refuseOrderRate'},
|
||||
{label: '超时接单量', prop: 'timeoutOrderCount'},
|
||||
{label: '超时率', prop: 'timeoutOrderRate'},
|
||||
{label: '超时率（%）', prop: 'timeoutOrderRate'},
|
||||
]
|
||||
}else if(this.activeIndex === 1){
|
||||
this.labelList = [
|
||||
{label: '师傅姓名', prop: 'driverName'},
|
||||
{label: '承接案件量', prop: 'receiveOrderCount'},
|
||||
{label: '投诉量', prop: 'complainOrderCount'},
|
||||
{label: '投诉率', prop: 'complainOrderRate'},
|
||||
{label: '投诉率（%）', prop: 'complainOrderRate'},
|
||||
{label: '客户满意度', prop: 'customerSatisfaction'},
|
||||
{label: '客户评价率', prop: 'customerEvaluateRate'},
|
||||
{label: '催促率', prop: 'urgeRate'},
|
||||
{label: '客户评价率（%）', prop: 'customerEvaluateRate'},
|
||||
{label: '催促率（%）', prop: 'urgeRate'},
|
||||
]
|
||||
}else if(this.activeIndex === 2){
|
||||
this.labelList = [
|
||||
{label: '师傅姓名', prop: 'driverName'},
|
||||
{label: '承接案件量', prop: 'receiveOrderCount'},
|
||||
{label: 'App使用率', prop: 'appRate'},
|
||||
{label: '3′联系客户率', prop: 'threeMinutesContactRate'},
|
||||
{label: '平安聚合成功率', prop: 'pinganPolymerizationSuccessRate'},
|
||||
{label: '中华聚合成功率', prop: 'zhonghuaPolymerizationSuccessRate'},
|
||||
{label: '中道聚合成功率', prop: 'zdPolymerizationSuccessRate'},
|
||||
{label: '总聚合成功率', prop: 'polymerizationSuccessRate'},
|
||||
{label: 'App使用率（%）', prop: 'appRate'},
|
||||
{label: '3′联系客户率（%）', prop: 'threeMinutesContactRate'},
|
||||
{label: '平安聚合成功率（%）', prop: 'pinganPolymerizationSuccessRate'},
|
||||
{label: '中华聚合成功率（%）', prop: 'zhonghuaPolymerizationSuccessRate'},
|
||||
{label: '中道聚合成功率（%）', prop: 'zdPolymerizationSuccessRate'},
|
||||
{label: '总聚合成功率（%）', prop: 'polymerizationSuccessRate'},
|
||||
{label: '日均在线时长', prop: 'onlineDuration'},
|
||||
]
|
||||
}else if(this.activeIndex === 3){
|
||||
this.labelList = [
|
||||
{label: '师傅姓名', prop: 'driverName'},
|
||||
{label: '接单时效(分)', prop: 'receiving'},
|
||||
{label: '3′接单率', prop: 'threeMinutesReceivingRate'},
|
||||
{label: '3′接单率（%）', prop: 'threeMinutesReceivingRate'},
|
||||
{label: '到达时效(分)', prop: 'arriving'},
|
||||
{label: '40′到达率', prop: 'fortyMinutesArrivalRate'},
|
||||
{label: '40′到达率（%）', prop: 'fortyMinutesArrivalRate'},
|
||||
{label: '聚合成功到达时效', prop: 'polymerizationSuccessArriving'},
|
||||
]
|
||||
}
|
||||
@ -527,38 +709,38 @@ export default {
|
||||
{label: '承接案件量', prop: 'receiveOrderCount'},
|
||||
{label: '完成量', prop: 'finishOrderCount'},
|
||||
{label: '拒单量', prop: 'refuseOrderCount'},
|
||||
{label: '拒单率', prop: 'refuseOrderRate'},
|
||||
{label: '拒单率（%）', prop: 'refuseOrderRate'},
|
||||
{label: '超时接单量', prop: 'timeoutOrderCount'},
|
||||
{label: '超时率', prop: 'timeoutOrderRate'},
|
||||
{label: '客户取消率', prop: 'cancelrate'},
|
||||
{label: '超时率（%）', prop: 'timeoutOrderRate'},
|
||||
{label: '客户取消率（%）', prop: 'cancelrate'},
|
||||
]
|
||||
}else if(this.activeIndex === 1){
|
||||
this.labelList = [
|
||||
{label: '日', prop: 'date'},
|
||||
{label: '投诉量', prop: 'complainOrderCount'},
|
||||
{label: '投诉率', prop: 'complainOrderRate'},
|
||||
{label: '投诉率（%）', prop: 'complainOrderRate'},
|
||||
{label: '客户满意度', prop: 'customerSatisfaction'},
|
||||
{label: '客户评价率', prop: 'customerEvaluateRate'},
|
||||
{label: '催促率', prop: 'urgeRate'},
|
||||
{label: '客户评价率（%）', prop: 'customerEvaluateRate'},
|
||||
{label: '催促率（%）', prop: 'urgeRate'},
|
||||
]
|
||||
}else if(this.activeIndex === 2){
|
||||
this.labelList = [
|
||||
{label: '日', prop: 'date'},
|
||||
{label: '使用率', prop: 'appRate'},
|
||||
{label: '3′联系客户率', prop: 'threeMinutesContactRate'},
|
||||
{label: '平安聚合成功率', prop: 'pinganPolymerizationSuccessRate'},
|
||||
{label: '中华聚合成功率', prop: 'zhonghuaPolymerizationSuccessRate'},
|
||||
{label: '中道聚合成功率', prop: 'zdPolymerizationSuccessRate'},
|
||||
{label: '总聚合成功率', prop: 'polymerizationSuccessRate'},
|
||||
{label: '使用率（%）', prop: 'appRate'},
|
||||
{label: '3′联系客户率（%）', prop: 'threeMinutesContactRate'},
|
||||
{label: '平安聚合成功率（%）', prop: 'pinganPolymerizationSuccessRate'},
|
||||
{label: '中华聚合成功率（%）', prop: 'zhonghuaPolymerizationSuccessRate'},
|
||||
{label: '中道聚合成功率（%）', prop: 'zdPolymerizationSuccessRate'},
|
||||
{label: '总聚合成功率（%）', prop: 'polymerizationSuccessRate'},
|
||||
{label: '日均在线时长', prop: 'onlineDuration'},
|
||||
]
|
||||
}else if(this.activeIndex === 3){
|
||||
this.labelList = [
|
||||
{label: '日', prop: 'date'},
|
||||
{label: '接单时效(分)', prop: 'receiving'},
|
||||
{label: '3′接单率', prop: 'threeMinutesReceivingRate'},
|
||||
{label: '3′接单率（%）', prop: 'threeMinutesReceivingRate'},
|
||||
{label: '到达时效(分)', prop: 'arriving'},
|
||||
{label: '40′到达率', prop: 'fortyMinutesArrivalRate'},
|
||||
{label: '40′到达率（%）', prop: 'fortyMinutesArrivalRate'},
|
||||
{label: '聚合成功到达时效', prop: 'polymerizationSuccessArriving'},
|
||||
]
|
||||
}
|
||||
@ -572,7 +754,7 @@ export default {
|
||||
endTime: this.endTime + ' 23:59:59',
|
||||
searchType: this.setType(this.active),
|
||||
pageNum: 1,
|
||||
pageSize: 1000
|
||||
pageSize: 300
|
||||
});
|
||||
this.detailList = result.data?.map(item => {
|
||||
let formatVal = dayjs(item.createTime).format('DD');
|
||||
@ -631,7 +813,7 @@ export default {
|
||||
this.labelList=[]
|
||||
this.activeIndex = index
|
||||
await this.getData()
|
||||
if(this.active===1 && this.activeIndex===0){
|
||||
if(this.active===1){
|
||||
this.$nextTick(()=>{
|
||||
this.drawLine()
|
||||
})
|
||||
@ -662,13 +844,13 @@ export default {
|
||||
@include wh(100%,100%);
|
||||
}
|
||||
.headWrap{
|
||||
@include wh(100%,80px);
|
||||
@include wh(100%,56px);
|
||||
background: #3E62B9;
|
||||
@include flexTwoCenter;
|
||||
flex-direction: column;
|
||||
.title{
|
||||
font-family: YouSheBiaoTiHei;
|
||||
font-size: 35px;
|
||||
//font-family: YouSheBiaoTiHei;
|
||||
font-size: 20px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.titleName{
|
||||
@ -680,7 +862,8 @@ export default {
|
||||
.webHeadWrap{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
//justify-content: space-between;
|
||||
//justify-content: center;
|
||||
@include wh(100%,50px);
|
||||
background: #3E62B9;
|
||||
box-sizing: border-box;
|
||||
@ -835,8 +1018,11 @@ export default {
|
||||
border-color: #F1B289 transparent transparent transparent;
|
||||
}
|
||||
}
|
||||
.tableWrap{
|
||||
padding: 0 10px;
|
||||
.webTabWrap{
|
||||
width: 40% !important;
|
||||
.active:after{
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
.monthTotal{
|
||||
background: #FFFFFF;
|
||||
@ -864,13 +1050,25 @@ export default {
|
||||
.comTab{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
::v-deep .el-table{
|
||||
font-size:11px;
|
||||
::v-deep .el-table{
|
||||
height: 100%;
|
||||
}
|
||||
::v-deep .el-table--scrollable-x .el-table__body-wrapper{
|
||||
::v-deep .el-table--scrollable-x .el-table__body-wrapper{
|
||||
height: 100% !important;
|
||||
}
|
||||
/*.detailTable{
|
||||
height: 100%;
|
||||
::v-deep .el-table{
|
||||
height: 100%;
|
||||
}
|
||||
::v-deep .el-table--scrollable-x .el-table__body-wrapper{
|
||||
height: 100% !important;
|
||||
}
|
||||
}*/
|
||||
.chartWrapWeb,.webTab{
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 40px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user