apps/supplier-dispatch-h5
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

task#14196，kpi优化

Browse Source
This commit is contained in:
zhouxueli
2024-07-05 17:25:00 +08:00
parent cb50de4039
commit b2af0684fa
4 changed files with 440 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/api/kpi.js
View File

@ -36,3 +36,21 @@ export function getKpiDetailsData(data){
data data
}) })
} }
/*export function getSupplierId(data){
return request({
url: '/supplier/select/supplier',
method:'GET',
// contentType: 'application/json',
data
})
}*/
export function getSupplierId(key) {
return request({
url: '/supplier/select/supplier',
method: 'GET',
// key
params: {
key: key ,// 假设后端接口接受名为 'name' 的查询参数
}
});
}

2
src/views/kpi/components/circleChar.vue
View File

@ -16,7 +16,7 @@ export default {
mounted() { mounted() {
setTimeout(()=>{ setTimeout(()=>{
this.drawHandle(); this.drawHandle();
},1000) },50)
}, },
methods:{ methods:{
handle(){ handle(){

12
src/views/kpi/components/noFit-table.vue
View File

@ -4,10 +4,11 @@
stripe stripe
border border
style="width: 100%" style="width: 100%"
height="100%"
v-loading="loading" v-loading="loading"
class="custom-table"> class="custom-table">
<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"> align="center" min-width="100" :width="(isMobile && (column.label=='案件编号' || column.label=='服务内容')) ? 70 : 'auto'">
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
@ -16,7 +17,7 @@
<script> <script>
export default { export default {
name: "noFit-table", name: "noFit-table",
props: ['tableData','labelList','loading'], props: ['tableData','labelList','loading','isMobile'],
data() { data() {
return {} return {}
}, },
@ -29,12 +30,17 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
@import "@/styles/mixin.scss"; @import "@/styles/mixin.scss";
::v-deep .el-table thead{ ::v-deep .el-table{
font-size: 11px; font-size: 11px;
}
::v-deep .el-table thead{
color: #1D2129; color: #1D2129;
font-weight: bold; font-weight: bold;
} }
::v-deep .el-table th.el-table__cell.is-leaf { ::v-deep .el-table th.el-table__cell.is-leaf {
background-color: #E5E6EB; background-color: #E5E6EB;
} }
::v-deep .el-table .el-table__cell{
padding: 4px 0 !important;
}
</style> </style>

626
src/views/kpi/kpiIndex.vue
View File

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