1204 lines
38 KiB
Vue
1204 lines
38 KiB
Vue
<template>
|
||
<div class="wrap" :class="{ 'flexCls': active == 1 }">
|
||
<div v-if="isMobile" class="headWrap">
|
||
<div class="title">服务商案件&车辆情况</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">服务商案件&车辆情况<span v-if="isZd==1">--中道救援</span><span v-if="isZd!=1">--{{ current }}</span></div>
|
||
<!-- 只有中道账号才显示搜索框 -->
|
||
<div class="searchWrap" v-if="isZd==1">
|
||
<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
|
||
remote
|
||
reserve-keyword
|
||
clearable
|
||
placeholder="请输入后选择"
|
||
:remote-method="remoteMethod"
|
||
@change="selectSupplierNameHandle"
|
||
:loading="selectLoading">
|
||
<el-option
|
||
v-for="item in selectOption"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="item.id">
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
</div>
|
||
<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].includes(active))" class="tipArrow left">{{ leftArr }}</div>
|
||
<div v-if="isMobile && !([6,7, 8].includes(active))" class="tipArrow right">>>></div>
|
||
</van-tabs>
|
||
<!--总览 页面 s -->
|
||
<div v-loading="loadingData" class="contentWrap" :class="{'webcontentWrap':!isMobile}" v-if="active===0">
|
||
<div class="reciceOrder" :class="{'webCom':!isMobile, 'ownerHeight': isMobile}" style="margin-bottom: 10px;">
|
||
<div class="title" :class="{'webTitle':!isMobile}">业务情况</div>
|
||
<div><span>总案件量: {{totalCount}}</span></div>
|
||
<div id="pieChart" style="width: 100%;height:120px"></div>
|
||
</div>
|
||
|
||
<div :class="{'reciceOrder':true,'webCom':!isMobile}">
|
||
<div :class="{'title':true,'webTitle':!isMobile}">在线车辆</div>
|
||
<div class="reciceOrderIWrap">
|
||
<div class="left common">
|
||
<div class="num">{{ formatCurrency(indexData?.onlineVehicleCount) }}</div>
|
||
<div class="itemTitle">日均在线车辆数</div>
|
||
</div>
|
||
<div class="center common">
|
||
<div class="num" :class="{'numGreen': Number(indexData?.onlineRate) >= 60, 'numRed': Number(indexData?.onlineRate) < 60 }">{{ indexData && indexData.onlineRate }}%</div>
|
||
<div class="itemTitle" style="cursor: pointer">在线率</div>
|
||
</div>
|
||
<div class="right common">
|
||
<div class="num" :class="{'numGreen': Number(indexData?.averageOnlineDuration) >= 480, 'numRed': Number(indexData?.averageOnlineDuration) < 480 }">{{ toOnlineHours(indexData?.averageOnlineDuration) }}</div>
|
||
<div class="itemTitle" style="cursor: pointer">日均在线时长</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div :class="{'reciceOrder':true,'webCom':!isMobile}">
|
||
<div :class="{'title':true,'webTitle':!isMobile}">案件承接指标</div>
|
||
<div class="reciceOrderIWrap">
|
||
<div class="left common">
|
||
<div class="num" :class="{'numRed': Number(indexData?.refusalRate) >= 5, 'numGreen': Number(indexData?.refusalRate) < 5 }">{{ indexData && indexData.refusalRate }}%</div>
|
||
<div class="itemTitle">拒单率</div>
|
||
</div>
|
||
<div class="center common">
|
||
<div class="num" :class="{'numRed': Number(indexData?.timeoutRate) >= 5, 'numGreen': Number(indexData?.timeoutRate) < 5 }">{{ indexData && indexData.timeoutRate }}%</div>
|
||
<div class="itemTitle" style="cursor: pointer">超时率</div>
|
||
</div>
|
||
<div class="right common">
|
||
<div class="num">{{ indexData && indexData.cancelRate }}%</div>
|
||
<div class="itemTitle" style="cursor: pointer">取消率</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="isMobile" style="padding: 20px"></div>
|
||
</div>
|
||
<!--总览 页面 e -->
|
||
<!--月总 页面 s -->
|
||
<div v-loading="loadingData" class="contentWrap monthTotal" style="display: flex;flex-direction: column;flex: 1" v-if="active===1">
|
||
<div :class="{'chartWrapWeb':!isMobile,'comChart':true}">
|
||
<div style="width: 100%">
|
||
<div id="chartToMonth" style="width: 100%;height:300px"></div>
|
||
</div>
|
||
</div>
|
||
<div class="webTab">
|
||
<noFit-table v-if="isMobile" :active='active' :is-mobile='isMobile' :table-data="etlDetailList" :label-list="etlLabelList"></noFit-table>
|
||
<noFit-table v-else :active='active' :is-mobile='isMobile' :table-data="detailList" :label-list="labelList"></noFit-table>
|
||
</div>
|
||
</div>
|
||
<!--月总 页面 e -->
|
||
<!--日总 s -->
|
||
<div v-loading="loadingData" class="contentWrap monthTotal" v-if="active == 2 || active == 3">
|
||
<div class="comTab">
|
||
<noFit-table :active='active' :is-mobile='isMobile' :table-data="detailList" :label-list="labelList"></noFit-table>
|
||
</div>
|
||
</div>
|
||
<!--日总 e -->
|
||
<div v-loading="loadingData" class="contentWrap monthTotal" v-if="!([0,1,2, 3].includes(active))">
|
||
<div class="searchDriverName" v-if="active == 5">
|
||
<el-select
|
||
v-model="vehicleId"
|
||
filterable
|
||
remote
|
||
clearable
|
||
reserve-keyword
|
||
placeholder="请输入后选择"
|
||
:remote-method="driverremoteMethod"
|
||
@change="selectSupplierNameHandle"
|
||
:loading="driverselectLoading"
|
||
:style="isMobile ? 'width:100%' : 'width:50%'"
|
||
>
|
||
<el-option
|
||
v-for="item in driverselectOption"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="item.id">
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
<div class="comTab">
|
||
<noFit-table :active='active' :is-mobile='isMobile' :table-data="detailList" :label-list="labelList"></noFit-table>
|
||
</div>
|
||
<el-pagination
|
||
small
|
||
:page-sizes="[20, 50, 100]"
|
||
:current-page.sync="pageNum"
|
||
:page-size.sync="pageSize"
|
||
@current-change="selectSupplierNameHandle"
|
||
@size-change="selectSupplierNameHandle"
|
||
layout="prev, pager, next,sizes"
|
||
:total="total">
|
||
</el-pagination>
|
||
</div>
|
||
<!--<div v-loading="loadingData" class="contentWrap monthTotal" v-if="!([0, 1].includes(active))">
|
||
<div class="comTab" :class="{'detailTable':isMobile}">
|
||
<noFit-table :active='active' :is-mobile='isMobile' :table-data="detailList" :label-list="labelList"
|
||
></noFit-table>
|
||
</div>
|
||
<el-pagination
|
||
v-if="active !== 10"
|
||
small
|
||
:page-sizes="[20, 50, 100]"
|
||
:current-page.sync="pageNum"
|
||
:page-size.sync="pageSize"
|
||
@current-change="selectSupplierNameHandle"
|
||
@size-change="selectSupplierNameHandle"
|
||
layout="prev, pager, next,sizes"
|
||
:total="total">
|
||
</el-pagination>
|
||
</div>-->
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import * as echarts from 'echarts';
|
||
import dayjs from "dayjs";
|
||
import {
|
||
getSupplierId,
|
||
vehicleTotalInfo,
|
||
vehicleInfoBySupplier,
|
||
vehicleInfoByVehicle,
|
||
getKpiDetailsData,
|
||
getVehicleName
|
||
} from "@/api/kpi.js"
|
||
import {kpiMixins} from "@/utils/kpiMixins"
|
||
import {myMixins} from "@/utils/myMixins";
|
||
import NoFitTable from "@/views/kpi/components/fit-table.vue";
|
||
export default {
|
||
name: "kpiCase",
|
||
components: {NoFitTable},
|
||
computed: {
|
||
totalCount() {
|
||
return (Number(this.indexData?.pinganOrderCount || 0) + Number(this.indexData?.zhonghuaOrderCount || 0) + Number(this.indexData?.zdJuheOrderCount || 0) + Number(this.indexData?.traditionOrderCount || 0))
|
||
}
|
||
},
|
||
mixins: [myMixins, kpiMixins],
|
||
data() {
|
||
return {
|
||
active:0,
|
||
tabArr: [{name: '总览',value:0}, {name: '月/总'}, {name: '日/总'},{name: '各时段在线车辆'}, {name: '车辆/月'}, {name: '车辆/日'}, {name: '拒单明细'}, {name: '超时明细'},{name: '取消明细'}],
|
||
indexData: {}, // 总览数据
|
||
detailList: [],
|
||
labelList: [],
|
||
etlDetailList: [],
|
||
etlLabelList: [],
|
||
loading: false,
|
||
loadingData: false,
|
||
v1: [],
|
||
v2: [],
|
||
v3: [],
|
||
v4: [],
|
||
v5: [],
|
||
v6: [],
|
||
v7: [],
|
||
v8: [],
|
||
xAxisArr: [],
|
||
pageNum: 1,
|
||
pageSize: 20,
|
||
total: 0,
|
||
selectLoading: false,
|
||
selectOption: [],
|
||
driverId:'',//68517
|
||
driverName:'',
|
||
vehicleId: '',
|
||
driverselectLoading: false,
|
||
driverselectOption: [],
|
||
leftArr:'<<<',
|
||
showScoreChart:true,
|
||
continueMonthKpi:[],
|
||
isBtn:false,//是否有信息变更申请按钮权限
|
||
}
|
||
},
|
||
created() {
|
||
this.checkMobile();
|
||
const urlParams = new URLSearchParams(window.location.search);
|
||
this.isZd = urlParams?.get('isZd') || ''
|
||
this.supplierId = urlParams?.get('supplierId') || ''
|
||
this.isBtn= Number(urlParams?.get('isBtn'))
|
||
},
|
||
async mounted() {
|
||
await this.checkMobile();
|
||
await this.initDate();
|
||
await this.selectSupplierNameHandle();
|
||
},
|
||
methods: {
|
||
tabClickHandle() {
|
||
// 根据 active不同，请求不同的接口，渲染不同的页面
|
||
this.selectSupplierNameHandle();
|
||
},
|
||
async getVehicleTotalInfo() {
|
||
let res = await vehicleTotalInfo({
|
||
startTime: this.startTime,
|
||
endTime: this.endTime,
|
||
supplierId: this.supplierId,
|
||
});
|
||
this.indexData = res?.data;
|
||
this.pieCharts();
|
||
},
|
||
async getVehicleInfoBySupplier(type, time) {
|
||
let res = await vehicleInfoBySupplier({
|
||
startTime: time ? time : this.startTime,
|
||
endTime: this.endTime,
|
||
statisticsType: type,
|
||
supplierId: this.supplierId,
|
||
});
|
||
this.detailList = res.data?.map(item => {
|
||
item.cancelRate=this.formatPercentage(item.cancelRate) || 0;
|
||
item.refusalRate=this.formatPercentage(item.refusalRate) || 0;
|
||
item.timeoutRate=this.formatPercentage(item.timeoutRate) || 0;
|
||
item.orderCount= Number(item?.zdJuheOrderCount || 0) + Number(item?.zhonghuaOrderCount || 0) + Number(item?.pinganOrderCount || 0) + Number(item?.traditionOrderCount || 0)
|
||
item.upWayOrderCount = Number(item?.zhonghuaOrderCount || 0) + Number(item?.pinganOrderCount || 0)
|
||
item.averageOnlineDuration = this.toOnlineHours(item?.averageOnlineDuration)
|
||
let formatVal = dayjs(new Date(item.statisticsTime)).format('DD');
|
||
let formatVal1 = dayjs(new Date(item.statisticsTime)).format('MM');
|
||
return {...item, date: formatVal, month: formatVal1 + '月'};
|
||
});
|
||
this.loading = false
|
||
if( this.active == 1 ) { // 月总的 label，和月总所需要的图表的数据
|
||
this.etlDetailList=[{ 'month': '案件量' }, { 'month': '完成量' }, { 'month': '取消量' }, { 'month': '取消率' }, { 'month': '上游聚合量' },
|
||
{ 'month': '中道聚合量' }, { 'month': '传统派工量' }, { 'month': '日均在线车辆数' }, { 'month': '日均在线时长(小时)' },{ 'month': '拒单量' },
|
||
{ 'month': '拒单率' }, { 'month': '超时量' },{ 'month': '超时率' }]
|
||
let props = 'prop'
|
||
const columnObj = {} //创建标题数组中第一个对象
|
||
columnObj.label = 'KPI' //第一个标题名称
|
||
columnObj.prop = 'month' //第一个标题名称对应的字段
|
||
this.etlLabelList.push(columnObj)
|
||
this.detailList?.map((item, index) => {
|
||
this.xAxisArr.push(item.month)
|
||
this.xAxisArr = [...new Set(this.xAxisArr)]; // 去重
|
||
this.v1.push(item.finishOrderCount)
|
||
this.v2.push(item.cancelOrderCount)
|
||
this.v3.push(item.onlineRate?.replace('%', '') || 0)
|
||
// 转置
|
||
const columnObj = {}
|
||
columnObj.label = item.month // 每一列的标题的名称
|
||
columnObj.prop = props + index //自定义每一列标题字段名称
|
||
this.etlLabelList.push(columnObj)
|
||
let mappings = [ 'orderCount', 'finishOrderCount', 'cancelOrderCount','cancelRate','upWayOrderCount','zdJuheOrderCount',
|
||
'traditionOrderCount', 'vehicleCount', 'averageOnlineDuration', 'refusalOrderCount', 'refusalRate', 'timeoutOrdercount', 'timeoutRate' ];
|
||
for (let i = 0; i < mappings.length; i++) {
|
||
this.$set(this.etlDetailList[i], columnObj.prop, item[mappings[i]]);
|
||
}
|
||
});
|
||
this.labelList = [
|
||
{label: '月', prop: 'month'},
|
||
{label: '案件量', prop: 'orderCount'},
|
||
{label: '完成量', prop: 'finishOrderCount'},
|
||
{label: '取消量', prop: 'cancelOrderCount'},
|
||
{label: '取消率', prop: 'cancelRate'},
|
||
{label: '上游聚合量', prop: 'upWayOrderCount'},
|
||
{label: '中道聚合量', prop: 'zdJuheOrderCount'},
|
||
{label: '传统派工量', prop: 'traditionOrderCount'},
|
||
{label: '日均在线车辆数', prop: 'onlineVehicleCount'},
|
||
{label: '日均在线时长(小时)', prop: 'averageOnlineDuration'},
|
||
{label: '拒单量', prop: 'refusalOrderCount'},
|
||
{label: '拒单率', prop: 'refusalRate'},
|
||
{label: '超时量', prop: 'timeoutOrdercount'},
|
||
{label: '超时率', prop: 'timeoutRate'},
|
||
]
|
||
} else if(this.active == 2) {
|
||
this.labelList = [
|
||
{label: '日', prop: 'date'},
|
||
{label: '案件量', prop: 'orderCount'},
|
||
{label: '完成量', prop: 'finishOrderCount'},
|
||
{label: '取消量', prop: 'cancelOrderCount'},
|
||
{label: '取消率', prop: 'cancelRate'},
|
||
{label: '上游聚合量', prop: 'upWayOrderCount'},
|
||
{label: '中道聚合量', prop: 'zdJuheOrderCount'},
|
||
{label: '传统派工量', prop: 'traditionOrderCount'},
|
||
{label: '在线车辆数', prop: 'vehicleCount'},
|
||
{label: '车辆平均在线时长', prop: 'averageOnlineDuration'},
|
||
{label: '拒单量', prop: 'refusalOrderCount'},
|
||
{label: '拒单率', prop: 'refusalRate'},
|
||
{label: '超时量', prop: 'timeoutOrdercount'},
|
||
{label: '超时率', prop: 'timeoutRate'},
|
||
]
|
||
}
|
||
},
|
||
async getVehicleInfoByVehicle(type, vehicleId) {
|
||
let res = await vehicleInfoByVehicle({
|
||
startTime: this.startTime,
|
||
endTime: this.endTime,
|
||
statisticsType: type,
|
||
supplierId: this.supplierId,
|
||
pageNum: this.pageNum,
|
||
pageSize: this.pageSize,
|
||
vehicleId
|
||
});
|
||
this.detailList = res.data?.map(item => {
|
||
let formatVal =item.createTime ? dayjs(item.createTime).format('DD') : '';
|
||
let upMixinCount = Number(item?.pinganOrderCount || 0) + Number(item?.zhonghuaOrderCount || 0)
|
||
item.cancelRate = this.formatPercentage(item.cancelRate) || 0;
|
||
item.averageOnlineDuration = this.toOnlineHours(item?.averageOnlineDuration)
|
||
item.onlineDuration = this.toOnlineHours(item?.onlineDuration)
|
||
return {...item, date: formatVal, upMixinCount};
|
||
});
|
||
if( this.active == 4 ) {
|
||
this.labelList = [
|
||
{label: '车辆名称', prop: 'vehicleName'},
|
||
{label: '案件量', prop: 'orderCount'},
|
||
{label: '完成量', prop: 'finishOrderCount'},
|
||
{label: '取消量', prop: 'cancelOrderCount'},
|
||
{label: '取消率', prop: 'cancelRate'},
|
||
{label: '上游聚合量', prop: 'upMixinCount'},
|
||
{label: '中道聚合量', prop: 'zdJuheOrderCount'},
|
||
{label: '传统派工量', prop: 'traditionOrderCount'},
|
||
{label: '在线天数', prop: 'onlineDay'},
|
||
{label: '日均在线时长', prop: 'averageOnlineDuration'},
|
||
]
|
||
} else if ( this.active == 5 ) {
|
||
this.labelList = [
|
||
{label: '车辆名称', prop: 'vehicleName'},
|
||
{label: '日期', prop: 'statisticsTime'},
|
||
{label: '案件量', prop: 'orderCount'},
|
||
{label: '完成量', prop: 'finishOrderCount'},
|
||
{label: '取消量', prop: 'cancelOrderCount'},
|
||
{label: '取消率', prop: 'cancelRate'},
|
||
{label: '上游聚合量', prop: 'upMixinCount'},
|
||
{label: '中道聚合量', prop: 'zdJuheOrderCount'},
|
||
{label: '传统派工量', prop: 'traditionOrderCount'},
|
||
{label: '在线时长', prop: 'onlineDuration'},
|
||
]
|
||
}
|
||
},
|
||
async getSupplierKpiByOrigin(type) {
|
||
let result = await getKpiDetailsData({
|
||
startTime: this.startTime,
|
||
endTime: this.endTime,
|
||
searchType: type,
|
||
pageNum: this.pageNum,
|
||
pageSize: this.pageSize,
|
||
supplierId:this.supplierId
|
||
});
|
||
this.total = result.total
|
||
this.detailList = result.data?.map(item => {
|
||
let formatVal =item.createTime ? dayjs(item.createTime).format('DD') : '';
|
||
return {...item, date: formatVal};
|
||
});
|
||
if( this.active == 3 ) { // 各时段在线车辆处理，未完成
|
||
this.detailList = result.data?.map(item => {
|
||
item.zeroClockVehicleCount= item?.actualStatDays ? (parseInt(item.zeroClockVehicleCount / item.actualStatDays) || 0) : 0;
|
||
item.eightClockVehicleCount= item?.actualStatDays ? (parseInt(item.eightClockVehicleCount / item.actualStatDays) || 0) : 0;
|
||
item.twelveClockVehicleCount= item?.actualStatDays ? (parseInt(item.twelveClockVehicleCount / item.actualStatDays) || 0) : 0;
|
||
item.sixteenClockVehicleCount= item?.actualStatDays ? (parseInt(item.sixteenClockVehicleCount / item.actualStatDays) || 0) : 0;
|
||
item.twentyClockVehicleCount= item?.actualStatDays ? (parseInt(item.twentyClockVehicleCount / item.actualStatDays) || 0) : 0;
|
||
item.twentyTwoClockVehicleCount= item?.actualStatDays ? (parseInt(item.twentyTwoClockVehicleCount / item.actualStatDays) || 0) : 0;
|
||
let formatVal1 = dayjs(new Date(item.createTime)).format('MM');
|
||
return {...item, month: formatVal1 + '月'};
|
||
});
|
||
this.labelList = [
|
||
{label: '月', prop: 'month'},
|
||
{label: '00:00~08:00', prop: 'zeroClockVehicleCount'},
|
||
{label: '08:00~12:00', prop: 'eightClockVehicleCount'},
|
||
{label: '12:00~16:00', prop: 'twelveClockVehicleCount'},
|
||
{label: '16:00~20:00', prop: 'sixteenClockVehicleCount'},
|
||
{label: '20:00~22:00', prop: 'twentyClockVehicleCount'},
|
||
{label: '22:00~00:00', prop: 'twentyTwoClockVehicleCount'},
|
||
]
|
||
|
||
} else if(this.active == 6) { //拒单明细
|
||
this.labelList = [
|
||
{label: '案件编号', prop: 'orderCode'},
|
||
{label: '服务内容', prop: 'serviceName'},
|
||
{label: '拒单供应商', prop: 'supplierName'},
|
||
{label: '拒单车辆名称', prop: 'vehicleName'},
|
||
{label: '拒单师傅', prop: 'driverName'},
|
||
{label: '拒绝时间', prop: 'time'},
|
||
{label: '拒单原因', prop: 'reason'},
|
||
]
|
||
} else if(this.active == 7) { // 超时明细
|
||
this.labelList = [
|
||
{label: '案件编号', prop: 'orderCode'},
|
||
{label: '服务内容', prop: 'serviceName'},
|
||
{label: '超时供应商', prop: 'supplierName'},
|
||
{label: '超时车辆名称', prop: 'vehicleName'},
|
||
{label: '超时师傅', prop: 'driverName'},
|
||
{label: '超时时间', prop: 'time'},
|
||
{label: '超时原因', prop: 'reason'},
|
||
]
|
||
} else if(this.active == 8) { // 取消明细
|
||
this.labelList = [
|
||
{label: '案件编号', prop: 'orderCode'},
|
||
{label: '创建时间', prop: 'orderCreateTime'},
|
||
{label: '车辆名称', prop: 'vehicleName'},
|
||
{label: '取消原因', prop: 'giveUpReason'},
|
||
{label: '取消时间', prop: 'giveUpTime'},
|
||
]
|
||
}
|
||
},
|
||
monthChangeHandle(value){
|
||
if (value) {
|
||
this.current = dayjs(new Date(value)).format('YYYY-MM')
|
||
const _tempDate = dayjs(new Date(value)).format('YYYY-MM-DD')
|
||
const lastDay = dayjs(_tempDate).endOf('month');
|
||
this.startTime = `${this.current}-01 00:00:00`;
|
||
this.endTime = `${this.current}-${this.padZero(lastDay.date())} 23:59:59`;
|
||
this.startMonthTime=this.getStartTimeFromEndTime(this.endTime)
|
||
}
|
||
},
|
||
async remoteMethod(query) {
|
||
if (query !== '') {
|
||
this.selectLoading = true;
|
||
try {
|
||
const result = await getSupplierId(query);
|
||
this.selectOption = result.data || []
|
||
} catch (error) {
|
||
console.error('Error fetching data:', error);
|
||
this.selectOption = [];
|
||
} finally {
|
||
this.selectLoading = false;
|
||
}
|
||
} else {
|
||
this.selectOption = [];
|
||
}
|
||
},
|
||
async driverremoteMethod(query){
|
||
if (query !== '') {
|
||
this.driverselectLoading = true;
|
||
try {
|
||
const result = await getVehicleName(query);
|
||
this.driverselectOption = result.data || []
|
||
} catch (error) {
|
||
this.driverselectOption = [];
|
||
} finally {
|
||
this.driverselectLoading = false;
|
||
}
|
||
} else {
|
||
this.driverselectOption = [];
|
||
}
|
||
},
|
||
async selectSupplierNameHandle() { // 下拉切换服务商时调用的接口
|
||
if( this.active == 0 ) {
|
||
await this.getVehicleTotalInfo();
|
||
} else if( this.active == 1 ) {
|
||
await this.getVehicleInfoBySupplier(1, this.startMonthTime);
|
||
await this.mixinCharts();
|
||
} else if(this.active == 2) {
|
||
await this.getVehicleInfoBySupplier(2);
|
||
} else if(this.active == 3) {
|
||
await this.getSupplierKpiByOrigin(8);
|
||
} else if(this.active == 4){
|
||
await this.getVehicleInfoByVehicle(1);
|
||
} else if(this.active == 5) {
|
||
if( this.vehicleId ) {
|
||
await this.getVehicleInfoByVehicle(2, this.vehicleId);
|
||
} else {
|
||
this.labelList = [
|
||
{label: '车辆名称', prop: 'vehicleName'},
|
||
{label: '日期', prop: 'statisticsTime'},
|
||
{label: '案件量', prop: 'orderCount'},
|
||
{label: '完成量', prop: 'finishOrderCount'},
|
||
{label: '取消量', prop: 'cancelOrderCount'},
|
||
{label: '取消率', prop: 'cancelRate'},
|
||
{label: '上游聚合量', prop: 'upMixinCount'},
|
||
{label: '中道聚合量', prop: 'zdJuheOrderCount'},
|
||
{label: '传统派工量', prop: 'traditionOrderCount'},
|
||
{label: '在线时长', prop: 'onlineDuration'},
|
||
];
|
||
this.detailList = [];
|
||
}
|
||
} else if(this.active == 6) {
|
||
await this.getSupplierKpiByOrigin(1);
|
||
} else if(this.active == 7) {
|
||
await this.getSupplierKpiByOrigin(2);
|
||
} else if(this.active == 8) {
|
||
await this.getSupplierKpiByOrigin(9);
|
||
}
|
||
},
|
||
mixinCharts() {
|
||
const myChart = echarts.init(document.getElementById('chartToMonth'));
|
||
// 模拟数据（可替换为接口返回数据）
|
||
const xData = this.xAxisArr; // X轴月份
|
||
const seriesData = {
|
||
'完成量': this.v1, // 堆积柱状图-完成量
|
||
'取消量': this.v2, // 堆积柱状图-取消量
|
||
'在线率': this.v3 // 折线图-在线率
|
||
};
|
||
// 图表配置项
|
||
const option = {
|
||
// 图例（自动识别系列名称）
|
||
legend: {
|
||
top: '10%',
|
||
textStyle: { fontSize: 12, color: '#666' },
|
||
itemGap: 20 // 图例项间距
|
||
},
|
||
// 提示框（联动显示所有系列数据）
|
||
tooltip: {
|
||
trigger: 'axis', // 按坐标轴触发
|
||
axisPointer: { type: 'shadow' }, // 鼠标悬浮时显示阴影指示器
|
||
formatter: function(params) {
|
||
// 自定义 tooltip 格式（更清晰的展示）
|
||
let res = `<div style="font-weight: bold;">${params[0].axisValue}</div>`;
|
||
params.forEach(item => {
|
||
res += `<div>${item.seriesName}: ${item.value}</div>`;
|
||
});
|
||
return res;
|
||
}
|
||
},
|
||
// 网格（控制图表位置，避免与坐标轴标签重叠）
|
||
grid: {
|
||
left: '2%',
|
||
right: '5%', // 预留右轴空间
|
||
bottom: '10%',
|
||
top: '10%',
|
||
containLabel: true // 包含坐标轴标签
|
||
},
|
||
// X轴（共用一个X轴）
|
||
xAxis: {
|
||
type: 'category',
|
||
data: xData,
|
||
axisLabel: { fontSize: 12, color: '#666' },
|
||
axisLine: { lineStyle: { color: '#eee' } }
|
||
},
|
||
// 双 Y 轴（左轴控制柱状图，右轴控制折线图）
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
name: '订单量',
|
||
nameTextStyle: { color: '#4895ef' },
|
||
axisLabel: { color: '#666', formatter: '{value}' },
|
||
axisLine: { lineStyle: { color: '#4895ef' } },
|
||
splitLine: { lineStyle: { color: '#f5f5f5' } } // 网格线
|
||
},
|
||
{
|
||
type: 'value',
|
||
name: '在线率',
|
||
nameTextStyle: { color: '#48bb78' },
|
||
axisLabel: { color: '#666', formatter: '{value}%' },
|
||
axisLine: { lineStyle: { color: '#48bb78' } },
|
||
splitLine: { show: false } // 隐藏右轴网格线（避免重复）
|
||
}
|
||
],
|
||
// 系列数据（核心：柱状图+折线图组合）
|
||
series: [
|
||
// 堆积柱状图-系列1：线上订单
|
||
{
|
||
name: '完成量',
|
||
type: 'bar',
|
||
yAxisIndex: 0, // 绑定左Y轴
|
||
stack: 'order', // 堆积分组（同组内数据堆积）
|
||
data: seriesData['完成量'],
|
||
itemStyle: { color: '#4299e1' }, // 柱状图颜色
|
||
label: {
|
||
show: true, // 显示数值标签
|
||
position: 'insideTop', // 标签位置：柱顶内部
|
||
color: '#fff',
|
||
fontSize: 10
|
||
},
|
||
barWidth: 30 // 柱子宽度
|
||
},
|
||
// 堆积柱状图-系列2：线下订单
|
||
{
|
||
name: '取消量',
|
||
type: 'bar',
|
||
yAxisIndex: 0, // 绑定左Y轴
|
||
stack: 'order', // 与「线上订单」同堆积组
|
||
data: seriesData['取消量'],
|
||
itemStyle: { color: '#ed8936' }, // 柱状图颜色
|
||
label: {
|
||
show: true,
|
||
position: 'insideTop',
|
||
color: '#fff',
|
||
fontSize: 10
|
||
}
|
||
},
|
||
// 折线图：目标值
|
||
{
|
||
name: '在线率',
|
||
type: 'line',
|
||
yAxisIndex: 1, // 绑定右Y轴
|
||
data: seriesData['在线率'],
|
||
symbol: 'circle', // 标记点形状：圆形
|
||
symbolSize: 6, // 标记点大小
|
||
lineStyle: { color: '#48bb78', width: 2 }, // 线条样式
|
||
itemStyle: { color: '#48bb78' }, // 标记点颜色
|
||
label: {
|
||
show: true, // 显示数值标签
|
||
position: 'top', // 标签位置：点上方
|
||
color: '#48bb78',
|
||
fontSize: 10
|
||
}
|
||
}
|
||
]
|
||
};
|
||
|
||
// 渲染图表
|
||
myChart.setOption(option);
|
||
|
||
// 响应式适配：窗口 resize 时自动调整图表大小
|
||
window.addEventListener('resize', () => {
|
||
myChart.resize();
|
||
});
|
||
},
|
||
// 画饼图 案件渠道
|
||
pieCharts() {
|
||
let myChart = echarts.init(document.getElementById('pieChart'))
|
||
let _data = (Number(this.indexData?.pinganOrderCount || 0) + Number(this.indexData?.zhonghuaOrderCount || 0)) || 0
|
||
const charData = [
|
||
{value: this.indexData.zdJuheOrderCount, name: '中道聚合案件'},
|
||
{value: _data, name: '上游聚合案件'},
|
||
{value: this.indexData.traditionOrderCount, name: '传统派工案件'},
|
||
]
|
||
let option = {
|
||
tooltip: {
|
||
trigger: 'item'
|
||
},
|
||
legend: {
|
||
orient: 'vertical', // 垂直排列
|
||
left: '1%', // 距离左侧5%
|
||
top: 'center', // 垂直居中
|
||
textStyle: {
|
||
color: '#333', // 图例文字颜色
|
||
fontSize: 14
|
||
},
|
||
itemWidth: 16, // 图例标记宽度
|
||
itemHeight: 8, // 图例标记高度
|
||
itemGap: 10, // 图例间距
|
||
formatter: function(name) {
|
||
// 在图例中显示名称和数值
|
||
const item = charData.find(item => item.name === name);
|
||
return `${name}: ${item?.value || 0}`;
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: '访问来源',
|
||
type: 'pie',
|
||
radius: ['75%'], // 增大饼图半径范围
|
||
data: charData,
|
||
color: [
|
||
'#1890FF', // 中道聚合案件 - 蓝色（ECharts默认主色）
|
||
'#FAAD14', // 上游聚合案件 - 黄色（ECharts默认辅助色）
|
||
'#52C41A' // 传统派工案件 - 绿色（ECharts默认成功色）
|
||
],
|
||
label: {
|
||
show: false // 隐藏文本标签[citation:1]
|
||
},
|
||
labelLine: {
|
||
show: false // 隐藏引导线[citation:1]
|
||
},
|
||
center: ['70%', '50%'], // 饼图向右移动，垂直居中
|
||
emphasis: {
|
||
itemStyle: {
|
||
shadowBlur: 10,
|
||
shadowOffsetX: 0,
|
||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||
}
|
||
}
|
||
}
|
||
]
|
||
};
|
||
myChart.setOption(option);
|
||
},
|
||
|
||
/* async getKpiData() {
|
||
try {
|
||
this.loading = true
|
||
if (this.active === 0) {//总览
|
||
|
||
} else if (this.active == 1) { //月总
|
||
|
||
} else if (this.active == 3 ) {
|
||
this.labelList = [
|
||
{label: '案件编号', prop: 'orderCode'},
|
||
{label: '服务内容', prop: 'serviceName'},
|
||
{label: '超时供应商', prop: 'supplierName'},
|
||
{label: '超时车辆名称', prop: 'vehicleName'},
|
||
{label: '超时师傅', prop: 'driverName'},
|
||
{label: '超时时间', prop: 'time'},
|
||
{label: '超时原因', prop: 'reason'},
|
||
]
|
||
}
|
||
} finally {
|
||
this.loading = false
|
||
}
|
||
},*/
|
||
|
||
async changeTab(index) {
|
||
try {
|
||
this.loadingData = true
|
||
this.activeIndex = index
|
||
this.labelList = []
|
||
this.v1 = []
|
||
this.v2 = []
|
||
this.v3 = []
|
||
this.v4 = []
|
||
this.v5 = []
|
||
this.v6 = []
|
||
this.v7 = []
|
||
this.v8 = []
|
||
this.loadingData = false
|
||
if (this.active === 1) {
|
||
await this.drawLine()
|
||
}
|
||
} finally {
|
||
this.loadingData = false
|
||
}
|
||
},
|
||
}
|
||
,
|
||
}
|
||
</script>
|
||
<style scoped lang="scss">
|
||
@import "@/styles/mixin.scss";
|
||
@import "@/styles/common.scss";
|
||
@import "@/styles/mixin.scss";
|
||
|
||
.wrap {
|
||
@include wh(100%, 100%);
|
||
}
|
||
|
||
.headWrap {
|
||
@include wh(100%, 56px);
|
||
background: #3E62B9;
|
||
@include flexTwoCenter;
|
||
flex-direction: column;
|
||
|
||
.title {
|
||
font-size: 20px;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.titleName {
|
||
font-family: PingFangSC, PingFang SC;
|
||
@include fontWeightSize(14px, 500);
|
||
color: #BDDAFF;
|
||
}
|
||
}
|
||
|
||
.webHeadWrap {
|
||
@include flexCenter;
|
||
@include wh(100%, 50px);
|
||
background: #3E62B9;
|
||
box-sizing: border-box;
|
||
padding: 0 20px;
|
||
|
||
.empty {
|
||
@include wh(250px, 100%);
|
||
}
|
||
|
||
.title {
|
||
font-size: 20px;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.searchWrap {
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
.el-icon-search {
|
||
font-size: 15px;
|
||
color: #4C81F5;
|
||
position: absolute;
|
||
right: 15px;
|
||
}
|
||
|
||
::v-deep .el-input--suffix .el-input__inner {
|
||
height: 32px;
|
||
background: #EFF2F8;
|
||
font-size: 12px;
|
||
}
|
||
|
||
::v-deep .el-input__inner {
|
||
border-radius: 0px 20px 20px 0px;
|
||
}
|
||
::v-deep .el-input__suffix {
|
||
top: 4px; /* 给清除按钮预留空间 */
|
||
}
|
||
}
|
||
}
|
||
|
||
::v-deep .van-tabs {
|
||
background: white;
|
||
}
|
||
|
||
::v-deep .van-tabs__nav--line.van-tabs__nav--complete {
|
||
background: #5D7FD7;
|
||
padding: 0;
|
||
height: 36px;
|
||
}
|
||
|
||
::v-deep .van-tab--active {
|
||
background: #FFFFFF;
|
||
border-radius: 7px 7px 0px 0px;
|
||
@include sizeWeightCol(13px, 500, #5D7FD7 !important);
|
||
border-bottom: none;
|
||
}
|
||
|
||
::v-deep .van-tabs__line {
|
||
display: none;
|
||
}
|
||
|
||
::v-deep .van-tab {
|
||
border-right: 1px solid #6B97D0;
|
||
@include sizeWeightCol(13px, 500, #ACC1DB);
|
||
}
|
||
|
||
::v-deep .van-col {
|
||
padding: 6px 10px;
|
||
background: #E5E6EB;
|
||
border-right: 1px solid #ccc;
|
||
border-bottom: 1px solid #ccc;;
|
||
}
|
||
::v-deep .el-pagination .el-select .el-input{
|
||
width: 80px;
|
||
margin:0
|
||
}
|
||
.contentWrap {
|
||
@include wh(100%, calc(100% - 120px));
|
||
overflow-y: auto;
|
||
background: #EFF2F8;
|
||
|
||
.reciceOrder {
|
||
@include whBg(375px, 146px, #FFFFFF);
|
||
@include sizing4Padding(19px, 25px, 38px, 19px);
|
||
margin-bottom: 10px;
|
||
.scoreTitle{
|
||
@include flexBetCen;
|
||
i{
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
.storeWrap {
|
||
width: 100%;
|
||
text-align: center;
|
||
.detailScore{
|
||
display: flex;
|
||
justify-content:center;
|
||
}
|
||
.left{
|
||
text-align: right;
|
||
padding-right: 5px;
|
||
}
|
||
.right{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-direction: column;
|
||
text-align: left;
|
||
}
|
||
}
|
||
|
||
.title {
|
||
@include sizeWeightCol(14px, bold, #040415);
|
||
margin-bottom: 14px;
|
||
}
|
||
|
||
.reciceOrderIWrap {
|
||
@include flexColAround;
|
||
|
||
.common {
|
||
@include flexColCen;
|
||
}
|
||
}
|
||
|
||
.num {
|
||
@include sizeWeightCol(24px, bold, #040415);
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.itemTitle {
|
||
@include flexCenter;
|
||
font-size: 12px;
|
||
color: rgba(4, 4, 21, 0.45);
|
||
}
|
||
|
||
.img {
|
||
@include whMarLe(8px, 10px, 4px);
|
||
}
|
||
|
||
.line {
|
||
border-right: 2px solid #EAE9EC;
|
||
}
|
||
}
|
||
.ownerHeight {
|
||
height: 180px;
|
||
}
|
||
.evaluate, .appUse, .store {
|
||
height: 179px;
|
||
|
||
.title {
|
||
margin-bottom: 0 !important;
|
||
}
|
||
}
|
||
.allDataChartWrap{
|
||
/* width: 375px;
|
||
height: 220px;*/
|
||
@include whBg(375px, 200px, #FFFFFF);
|
||
|
||
}
|
||
.allDataChart{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.webComAllData{
|
||
width: 420px;
|
||
height: 200px;
|
||
/*width: 375px;
|
||
height: 146px;*/
|
||
float: left;
|
||
margin: 10px;
|
||
}
|
||
.webCom {
|
||
@include whBg(420px, 200px, #FFFFFF);
|
||
float: left;
|
||
margin: 10px;
|
||
|
||
.webTitle {
|
||
margin-bottom: 40px !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
.webcontentWrap {
|
||
@include wh(100%, calc(100% - 86px));
|
||
}
|
||
.tipArrow{
|
||
position: absolute;
|
||
top: 10px;
|
||
color: #FFFFFF;
|
||
font-size: 12px;
|
||
}
|
||
.left{
|
||
left: 0;
|
||
}
|
||
.right{
|
||
right: 0px;
|
||
}
|
||
.tabWrap {
|
||
@include wh(100%, 22px);
|
||
@include flexColAround;
|
||
margin: 10px 0;
|
||
|
||
div {
|
||
cursor: pointer;
|
||
padding: 2px 8px;
|
||
border-radius: 7px;
|
||
font-size: 12px;
|
||
@include bgFontColor(#3E3C3C, #F4F4F4);
|
||
}
|
||
|
||
.active {
|
||
position: relative;
|
||
opacity: 1;
|
||
@include bgFontColor(#ffffff, #F1B289);
|
||
}
|
||
|
||
.active:after {
|
||
content: '';
|
||
display: block;
|
||
@include wh(18px, 2px);
|
||
background: #FFFFFF;
|
||
position: absolute;
|
||
margin-top: 3px;
|
||
left: 50%;
|
||
opacity: 1;
|
||
transform: translateX(-50%);
|
||
width: 0;
|
||
height: 0;
|
||
border: 4px solid;
|
||
border-color: #F1B289 transparent transparent transparent;
|
||
}
|
||
}
|
||
.webTabWrap {
|
||
width: 40% !important;
|
||
.active:after {
|
||
margin-top: 4px;
|
||
}
|
||
}
|
||
|
||
.monthTotal {
|
||
background: #FFFFFF;
|
||
padding-left: 6px;
|
||
.leftMonth {
|
||
.leftItem {
|
||
font-weight: bold;
|
||
border-right: 1px solid #cccccc;
|
||
border-left: 1px solid #cccccc;
|
||
text-align: center;
|
||
padding: 8px 10px;
|
||
}
|
||
|
||
.leftItem:nth-child(odd) {
|
||
border-top: 1px solid #cccccc;
|
||
border-bottom: 1px solid #cccccc;
|
||
background-color: #f2f2f2; /* 奇数*/
|
||
}
|
||
}
|
||
|
||
.content {
|
||
flex-grow: 1; /* 占据剩余空间 */
|
||
overflow-x: auto; /* 当内容超出宽度时启用水平滚动 */
|
||
}
|
||
}
|
||
.searchDriverName{
|
||
width: 97%;
|
||
display: flex;
|
||
align-items: center;
|
||
span{
|
||
width: 20%;
|
||
}
|
||
::v-deep .el-input{
|
||
font-size: 12px;
|
||
}
|
||
::v-deep .el-input__inner{
|
||
height: 30px;
|
||
}
|
||
::v-deep .el-input__suffix {
|
||
top: 4px; /* 给清除按钮预留空间 */
|
||
}
|
||
|
||
}
|
||
.comTab {
|
||
width: 100%;
|
||
height: 95%;
|
||
}
|
||
::v-deep .el-table {
|
||
height: 100%;
|
||
}
|
||
|
||
::v-deep .el-table--scrollable-x .el-table__body-wrapper {
|
||
height: 95% !important;
|
||
}
|
||
.comTabActive3 ::v-deep .el-table--scrollable-x .el-table__body-wrapper{
|
||
width: 100%;
|
||
//height: 90%;
|
||
//height: 84% !important;
|
||
}
|
||
.chartWrapWeb, .webTab {
|
||
height: calc(100% - 200px);
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 0 10px;
|
||
}
|
||
|
||
.comChart {
|
||
position: relative;
|
||
|
||
.selectWrap {
|
||
position: absolute;
|
||
top: 0;
|
||
z-index: 1111;
|
||
left: 38px;
|
||
}
|
||
|
||
::v-deep .el-input__inner {
|
||
padding: 2px;
|
||
width: 98px;
|
||
height: 24px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
::v-deep .el-input__inner {
|
||
right: 2px;
|
||
}
|
||
|
||
::v-deep .el-input__icon {
|
||
line-height: 0;
|
||
}
|
||
}
|
||
|
||
.el-pagination {
|
||
text-align: center;
|
||
}
|
||
|
||
.webSwitch {
|
||
width: 47%;
|
||
position: relative;
|
||
|
||
.swithContainer {
|
||
position: absolute;
|
||
z-index: 111;
|
||
left: 60px;
|
||
}
|
||
}
|
||
|
||
::v-deep .el-switch__core {
|
||
font-size: 12px;
|
||
width: 30px !important;
|
||
height: 16px;
|
||
}
|
||
|
||
::v-deep .el-switch__core::after {
|
||
width: 14px;
|
||
height: 14px;
|
||
margin-top: -1px;
|
||
}
|
||
|
||
::v-deep .el-switch.is-checked .el-switch__core::after {
|
||
margin-left: -15px;
|
||
}
|
||
|
||
::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;
|
||
}
|
||
}
|
||
.numRed {
|
||
color: red !important;
|
||
}
|
||
.numGreen {
|
||
color: green !important;
|
||
}
|
||
.webTab {
|
||
flex: 1;
|
||
}
|
||
.flexCls {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
</style>
|