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

task#，kpi添加月份选择，优化代码

Browse Source
This commit is contained in:
zhouxueli
2024-12-05 15:00:14 +08:00
parent ca52f0793f
commit 055876c0a2
1 changed files with 147 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,14 +2,21 @@
<div class="wrap">
<div v-if="isMobile" class="headWrap">
<div class="title">KPI.数据看板</div>
<div class="titleName">{{ current }}月-{{supplierName}}</div>
<div class="titleName">{{ current }}-{{supplierName}}</div>
</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">--中道救援</span><span v-if="isZd!=1">--{{ current }}月</span></div>
<div class="title">KPI.数据看板<span v-if="isZd==1">--中道救援</span><span v-if="isZd!=1">--{{ current }}</span></div>
<!-- 只有中道账号才显示搜索框 -->
<div class="searchWrap" v-if="isZd==1">
<span class="month">{{ current }}月</span>
<el-date-picker
v-model="current"
type="month"
:clearable="false"
class="month custom-date-picker"
@change="monthChangeHandle"
placeholder="选择月">
</el-date-picker>
<el-select
v-model="supplierId"
filterable
@ -18,7 +25,7 @@
clearable
placeholder="请输入后选择"
:remote-method="remoteMethod"
@change="selectSupplierNameHanldle"
@change="selectSupplierNameHandle"
:loading="selectLoading">
<el-option
v-for="item in selectOption"
@ -29,7 +36,7 @@
</el-select>
</div>
</div>
<van-tabs v-model="active" sticky @click="onClick">
<van-tabs v-model="active" sticky @click="tabClickHandle">
<van-tab v-for="(item,index) in tabArr" :key="index" :title="item.name"></van-tab>
<div v-if="isMobile && !([0,1,2,3].includes(active))" class="tipArrow left">{{ leftArr }}</div>
<div v-if="isMobile && !([8,9].includes(active))" class="tipArrow right">>>></div>
@ -103,8 +110,8 @@
<i class="el-icon-question" @click.prevent="showScoreChart = !showScoreChart"></i>
</div>
<div class="storeWrap" v-if="indexData">
<circle-char v-if="showScoreChart" ref="Doughnut7" :data="indexData && indexData.score" :bg-color="'#00D273'" :is-store="true"></circle-char>
<div v-else class="detailScore">
<circle-char v-show="showScoreChart" ref="Doughnut7" :data="indexData && indexData.score" :bg-color="'#00D273'" :is-store="true"></circle-char>
<div v-show="!showScoreChart" class="detailScore">
<div class="left">
<div>
<span class="defen">接单得分:</span>
@ -242,15 +249,6 @@
<noFit-table :active='active' :is-mobile='isMobile' :table-data="detailList" :label-list="labelList"
></noFit-table>
</div>
<!-- <el-pagination
small
:current-page.sync="pageNum"
:page-size.sync="pageSize"
@current-change="getKpiData"
@size-change="getKpiData"
layout="prev, pager, next"
:total="total">
</el-pagination>-->
<el-pagination
v-if="active !== 9"
small
@ -316,7 +314,8 @@ export default {
xAxisArr: [],
isMobile: false,
isZd: '',
current: dayjs(new Date()).format('M'),
current:'',
// current: dayjs(new Date()).format('M'),
supplierName:'',
value: '1',
options: [
@ -350,15 +349,13 @@ export default {
async mounted() {
await this.checkMobile();
await this.initDate();
await this.getData();
// await this.allDataChart()
await this.selectSupplierNameHandle();
},
methods: {
applicateHandle() {
if (window.parent) {
const hasListener = window.parent.dispatchEvent(new Event('checkCloseDialog'));
if (hasListener) {
console.log("this.supplierId",this.supplierId)
const data = {
action: 'closeDialog',
message: this.supplierId,
@ -371,17 +368,38 @@ export default {
}
}
},
async selectSupplierNameHanldle(){
monthChangeHandle(value){
if (value) {
const year = value.getFullYear();
const month = value.getMonth() + 1; // 月份从 0 开始，需要加 1
const yearAndMonth = year + '-' + (month > 9 ? month : '0' + month);
this.current = dayjs(new Date(yearAndMonth)).format('YYYY-MM')
this.startTime = `${year}-${this.padZero(month)}-01 00:00:00`;
const lastDay = new Date(year, month, 0).getDate(); // 获取该月的最后一天
this.endTime = `${year}-${this.padZero(month)}-${this.padZero(lastDay)} 23:59:59`;
this.startMonthTime=this.getStartTimeFromEndTime(this.endTime)
console.log(" this.startMonthTime", this.startMonthTime)
this.selectSupplierNameHandle();
if(this.active===1){
this.tabClickHandle()
}
}
},
padZero(num) {
return num < 10 ? `0${num}` : num;
},
async selectSupplierNameHandle(){
await this.getData()
setTimeout(()=>{
this.$refs.Doughnut1.initCircle()
this.$refs.Doughnut2.initCircle()
this.$refs.Doughnut3.initCircle()
this.$refs.Doughnut4.initCircle()
this.$refs.Doughnut5.initCircle()
this.$refs.Doughnut6.initCircle()
this.$refs.Doughnut7.initCircle()
},1500)
if(this.active !== 0){
return
}
this.$refs.Doughnut1.initCircle()
this.$refs.Doughnut2.initCircle()
this.$refs.Doughnut3.initCircle()
this.$refs.Doughnut4.initCircle()
this.$refs.Doughnut5.initCircle()
this.$refs.Doughnut6.initCircle()
this.$refs.Doughnut7.initCircle()
},
async remoteMethod(query) {
if (query !== '') {
@ -449,21 +467,21 @@ export default {
async clickJumpHandle(type) {
this.loading = true
this.active = type;
await this.onClick();
await this.tabClickHandle();
},
onClick() {
tabClickHandle() {
this.activeIndex = 0;
this.detailList = [];
this.labelList = [];
this.driverName=''
this.getData();
this.selectSupplierNameHandle();
if (this.active === 1) {
setTimeout(() => {
this.drawLine()
if (!this.isMobile && this.activeIndex === 3) {
this.drawLine1()
}
}, 500)
}, 1000)
}
},
drawLine() { // 基于准备好的dom，初始化echarts实例
@ -872,14 +890,15 @@ export default {
driverId: this.driverId,
driverName:this.driverName,
});
console.log("res",res)
this.continueMonthKpi=res.data;
let v1=[]
let v2=[]
// 初始化 v1 ,v2数组，长度为 12，初始值为 0
let v1 = new Array(12).fill(0);
let v2 = new Array(12).fill(0);
if( this.continueMonthKpi.length>0){
this.continueMonthKpi.forEach(item=>{
v1.push(item.dispatchOrderCount)
v2.push(item.orderScore)
let month = parseInt(item.statisticsDate?.split('-')[1], 10) - 1; // 获取月份，并转换为数组索引
v1[month] = item.dispatchOrderCount;
v2[month] = item.orderScore;
})
}
let myChart = echarts.init(document.getElementById('allDataChart'))
@ -936,6 +955,14 @@ export default {
};
option && myChart.setOption(option, true);
},
// 通用函数，用于处理百分比数据
processPercentage(value) {
value *= 100;
if (value % 1 !== 0) {
value = value.toFixed(2);
}
return value;
},
async getKpiData() {
try {
this.loading = true
@ -952,37 +979,21 @@ export default {
}
this.indexData = res.data;
this.supplierName=res.data?.supplierName
this.indexData.refuseOrderRate=this.indexData.refuseOrderRate*100
if (this.indexData.refuseOrderRate % 1 !== 0) {
this.indexData.refuseOrderRate = this.indexData.refuseOrderRate.toFixed(2);
}
this.indexData.timeoutOrderRate=this.indexData.timeoutOrderRate*100
if (this.indexData.timeoutOrderRate % 1 !== 0) {
this.indexData.timeoutOrderRate = this.indexData.timeoutOrderRate.toFixed(2);
}
this.indexData.complainOrderRate=this.indexData.complainOrderRate*100
if (this.indexData.complainOrderRate % 1 !== 0) {
this.indexData.complainOrderRate = this.indexData.complainOrderRate.toFixed(2);
}
this.indexData.customerSatisfaction=this.indexData.customerSatisfaction*100
if (this.indexData.customerSatisfaction % 1 !== 0) {
this.indexData.customerSatisfaction = this.indexData.customerSatisfaction.toFixed(2);
}
this.indexData.threeMinutesContactRate=this.indexData.threeMinutesContactRate*100
if (this.indexData.threeMinutesContactRate % 1 !== 0) {
this.indexData.threeMinutesContactRate = this.indexData.threeMinutesContactRate.toFixed(2);
}
this.indexData.urgeRate=this.indexData.urgeRate*100
if (this.indexData.urgeRate % 1 !== 0) {
this.indexData.urgeRate = this.indexData.urgeRate.toFixed(2);
}
this.indexData.appRate=this.indexData.appRate*100
if (this.indexData.appRate % 1 !== 0) {
this.indexData.appRate = this.indexData.appRate.toFixed(2);
}
this.indexData.polymerizationSuccessRate=this.indexData.polymerizationSuccessRate*100
if (this.indexData.polymerizationSuccessRate % 1 !== 0) {
this.indexData.polymerizationSuccessRate = this.indexData.polymerizationSuccessRate.toFixed(2);
// 需要处理的属性名数组
const propertiesToProcess = [
'refuseOrderRate',
'timeoutOrderRate',
'complainOrderRate',
'customerSatisfaction',
'threeMinutesContactRate',
'urgeRate',
'appRate',
'polymerizationSuccessRate'
];
for (let key in this.indexData){
if (propertiesToProcess.includes(key)) {
this.indexData[key] = this.processPercentage(this.indexData[key]);
}
}
} else if ([1, 2].includes(this.active)) {
let res = await getStatisticsKpi({
@ -1011,13 +1022,16 @@ export default {
item.minorFortyMinutesArrivalRate=this.formatPercentage(item.minorFortyMinutesArrivalRate) ;
let formatVal = dayjs(item.statisticsDate).format('DD');
let formatVal1 = dayjs(item.statisticsDate).format('M');
return {...item, date: formatVal, month: (formatVal1 == this.current) ? '本月' : (formatVal1 + '月')};
// console.log("formatVal1",formatVal1)
// return {...item, date: formatVal, month: (formatVal1 == this.current) ? '本月' : (formatVal1 + '月')};
return {...item, date: formatVal, month: formatVal1 + '月'};
});
this.loading = false
this.detailList?.map(item => {
this.xAxisArr.push(item.month)
})
this.xAxisArr[this.xAxisArr.length - 1] = '本月'
// console.log(" this.xAxisArr", this.xAxisArr)
// this.xAxisArr[this.xAxisArr.length - 1] = '本月'
await this.twoTabHanldeData()
} else if ([3, 4].includes(this.active)) {
let res = await getDriverStatisticsKpi({
@ -1030,13 +1044,11 @@ export default {
pageNum: this.pageNum,
pageSize: this.pageSize
})
// this.detailList = res.data
this.total = res.total
this.detailList = res.data?.map(item => {
item.refuseOrderRate=this.formatPercentage(item.refuseOrderRate) ;
item.timeoutOrderRate=this.formatPercentage(item.timeoutOrderRate) ;
item.cancelRate=this.formatPercentage(item.cancelRate) ;
// item.urgeRate=this.formatPercentage(item.urgeRate) ;
item.complainOrderRate=this.formatPercentage(item.complainOrderRate) ;
item.customerEvaluateRate=this.formatPercentage(item.customerEvaluateRate) ;
item.appRate=this.formatPercentage(item.appRate) ;
@ -1051,7 +1063,6 @@ export default {
let formatVal = dayjs(item.statisticsDate).format('DD');
return {...item, date: formatVal};
});
console.log("this.detailList",this.detailList)
this.loading = false;
if(this.active===4 && !this.driverName){
this.detailList=[]
@ -1138,15 +1149,23 @@ export default {
return result.toFixed(2) + '%';
}
},
checkMobile() {
const userAgent = navigator.userAgent || navigator.vendor || window.opera;
this.isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent);
},
// 初始化获取当月日期
initDate() {
let year=''
let month=''
if( this.current ) {
year = new Date(this.current).getFullYear();
month = new Date(this.current).getMonth() + 1;
} else {
year = new Date().getFullYear();
month = new Date().getMonth() + 1;
}
let yearAndMonth = year + '-' + (month > 9 ? month : '0' + month);
this.current = dayjs(new Date(yearAndMonth)).format('YYYY-MM')
this.startTime = dayjs(new Date()).format('YYYY-MM') + '-01 00:00:00'
this.endTime = dayjs(new Date()).format('YYYY-MM') + '-' + this.getDayLen()+' 23:59:59'
this.startMonthTime=this.getStartTimeFromEndTime(this.endTime)
console.log(" this.startMonthTime", this.startMonthTime,this.startTime)
},
// 获取当月天数
getDayLen() {
@ -1386,7 +1405,6 @@ export default {
}
} else if (this.active === 3) {
if (this.activeIndex === 0) {
this.labelList = [
{label: '师傅姓名', prop: 'driverName'},
{label: '总分', prop: 'score'},
@ -1504,6 +1522,10 @@ 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);
},
setType(type) {
switch (type) {
case 5:
@ -1582,7 +1604,7 @@ export default {
align-items: center;
position: relative;
.month {
/* .month {
display: inline-block;
width: 45px;
height: 30px;
@ -1592,7 +1614,7 @@ export default {
border: 1px solid #4C81F5;
font-size: 14px;
color: #FFFFFF;
}
}*/
.el-icon-search {
font-size: 15px;
@ -1938,4 +1960,47 @@ export default {
::v-deep .el-switch__label * {
font-size: 12px;
}
/* 自定义样式 */
.custom-date-picker ::v-deep .el-input__prefix{
display: none;
}
.month {
display: inline-block;
width: 75px;
//height: 30px;
//line-height: 30px;
text-align: center;
border-radius: 20px 0px 0px 20px;
//border-radius: 0px 20px 20px 0px;
//border: 1px solid #4C81F5;
font-size: 14px;
color: #FFFFFF;
::v-deep .el-input--suffix .el-input__inner{
}
::v-deep .el-input__inner{
padding-left: 0 !important;
padding-right: 0 !important;
border-radius: 20px 0px 0px 20px !important;
text-align: center !important;
font-size: 14px !important;
color: #FFFFFF !important;
border: 1px solid #4C81F5 !important;
background-color: transparent !important;
}
/* 自定义清除按钮样式 */
.custom-date-picker ::v-deep .el-input__suffix {
right: 0 !important;
padding-right: 10px !important;
}
.custom-date-picker ::v-deep .el-input__suffix-inner {
display: flex;
align-items: center;
}
.custom-date-picker ::v-deep .el-input__icon {
line-height: 1 !important;
}
}
</style>