1935 lines
65 KiB
Vue
1935 lines
65 KiB
Vue
<template>
|
||
<div class="wrap">
|
||
<div v-if="isMobile" class="headWrap">
|
||
<div class="title">KPI.数据看板</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="searchWrap" v-if="isZd==1">
|
||
<span class="month">{{ current }}月</span>
|
||
<el-select
|
||
v-model="supplierId"
|
||
filterable
|
||
remote
|
||
reserve-keyword
|
||
clearable
|
||
placeholder="请输入后选择"
|
||
:remote-method="remoteMethod"
|
||
@change="selectSupplierNameHanldle"
|
||
: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="onClick">
|
||
<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>
|
||
</van-tabs>
|
||
<div v-loading="loadingData" :class="{'contentWrap':true,'webcontentWrap':!isMobile}" v-if="active===0">
|
||
<div :class="{'reciceOrder':true,'webCom':!isMobile}">
|
||
<div :class="{'title':true,'webTitle':!isMobile}">接单指标</div>
|
||
<div class="reciceOrderIWrap">
|
||
<div class="left common">
|
||
<div class="num">{{ indexData && indexData.receiveOrderCount }}</div>
|
||
<div class="itemTitle">承接案件量</div>
|
||
</div>
|
||
<div class="center common" @click="clickJumpHandle(5)">
|
||
<div class="num">{{ indexData && indexData.refuseOrderRate }}%</div>
|
||
<div class="itemTitle" style="cursor: pointer">拒单率 ></div>
|
||
</div>
|
||
<div class="right common" @click="clickJumpHandle(6)">
|
||
<div class="num">{{ indexData && indexData.timeoutOrderRate }}%</div>
|
||
<div class="itemTitle" style="cursor: pointer">超时率 ></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div :class="{'reciceOrder':true,'webCom':!isMobile,'evaluate':isMobile}">
|
||
<div class="title">客户评价</div>
|
||
<div class="reciceOrderIWrap" v-if="indexData">
|
||
<circle-char ref="Doughnut1" :data="indexData && indexData.complainOrderRate" :title-text="'投诉率'" :bg-color="'#9485ED'"
|
||
:is-store="false" @clickComplain="clickJumpHandle(7)"></circle-char>
|
||
<circle-char ref="Doughnut2" :data="indexData && indexData.customerSatisfaction" :title-text="'客户满意度'"
|
||
:bg-color="'#5DDECF'"></circle-char>
|
||
<circle-char ref="Doughnut3" :data="indexData && 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" v-if="indexData">
|
||
<circle-char ref="Doughnut4" :data="indexData && indexData.appRate" :title-text="'使用率'" :bg-color="'#3AA1FF'"
|
||
:is-store="false"
|
||
@clickUse="clickJumpHandle(8)"></circle-char>
|
||
<circle-char ref="Doughnut5" :data="indexData && indexData.threeMinutesContactRate" :title-text="'3′联系客户率'"
|
||
:bg-color="'#5D7FD7'"></circle-char>
|
||
<circle-char ref="Doughnut6" :data="indexData && indexData.polymerizationSuccessRate" :title-text="'总聚合成功率'"
|
||
:bg-color="'#4ECB73'"></circle-char>
|
||
</div>
|
||
</div>
|
||
<div :class="{'reciceOrder':true,'webCom':!isMobile}">
|
||
<div :class="{'title':true,'webTitle':!isMobile}">时效</div>
|
||
<div class="reciceOrderIWrap">
|
||
<div class="left common">
|
||
<div class="num">{{ indexData && indexData.receiving }}</div>
|
||
<div class="itemTitle">接单时效(分)</div>
|
||
</div>
|
||
<div class="line"></div>
|
||
<div class="center common">
|
||
<div class="num">{{ indexData && indexData.polymerizationSuccessArriving }}</div>
|
||
<div class="itemTitle">集合成功到达时效(分)</div>
|
||
</div>
|
||
<div class="line"></div>
|
||
<div class="right common">
|
||
<div class="num">{{ indexData && indexData.arriving }}</div>
|
||
<div class="itemTitle">到达时效(分)</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div :class="{'reciceOrder':true,'webCom':!isMobile,'store':isMobile}">
|
||
<div class="scoreTitle">
|
||
<div>
|
||
<span class="title" style="margin-right: 15px">综合打分</span>
|
||
<el-button v-if="!isMobile && isBtn && supplierId" size="mini" type="primary" @click="applicateHandle">信息变更申请</el-button>
|
||
</div>
|
||
<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">
|
||
<div class="left">
|
||
<div>
|
||
<span class="defen">接单得分:</span>
|
||
</div>
|
||
<div>
|
||
<span class="defen">接单时效得分:</span>
|
||
</div>
|
||
<div>
|
||
<span class="defen">接单时效得分:</span>
|
||
</div>
|
||
<div><span class="defen">聚合成功率得分:</span>
|
||
</div>
|
||
<div><span class="defen">APP使用率得分:</span>
|
||
</div>
|
||
<div><span class="defen">催促率得分:</span>
|
||
</div>
|
||
<div><span class="defen">投诉率得分:</span>
|
||
</div>
|
||
</div>
|
||
<div class="right">
|
||
<div>
|
||
<span>{{ indexData.orderScore }}</span>
|
||
</div>
|
||
<div>
|
||
<span>{{ indexData.orderAgeingScore }}</span>
|
||
</div>
|
||
<div>
|
||
<span>{{ indexData.arriveAgeingScore }}</span>
|
||
</div>
|
||
<div> <span>{{ indexData.polymerizationSuccessScore }}</span></div>
|
||
<div> <span>{{ indexData.appUseScore }}</span></div>
|
||
<div> <span>{{ indexData.urgeScore }}</span></div>
|
||
<div><span>{{ indexData.urgeScore }}</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div :class="{'allDataChartWrap':true,'webComAllData':!isMobile,'store':isMobile}">
|
||
<div class="allDataChart" id="allDataChart" ></div>
|
||
</div>
|
||
<div v-if="isMobile" style="padding: 20px"></div>
|
||
</div>
|
||
<div v-loading="loadingData" class="contentWrap monthTotal" v-if="active===1">
|
||
<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="{'chartWrapWeb':!isMobile,'comChart':true}">
|
||
<template v-if="isMobile">
|
||
<div v-if="active==1" style="width: 100%">
|
||
<div id="chartWrap" style="width: 100%;height:300px"></div>
|
||
</div>
|
||
<div v-if="activeIndex==3" class="selectWrap">
|
||
<el-select v-model="value" @change="changeHandle">
|
||
<el-option
|
||
v-for="item in options"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value">
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
</template>
|
||
<template v-else>
|
||
<div v-if="[0,1,2].includes(activeIndex)">
|
||
<div id="chartWrap" style="width: 100%;height:300px"></div>
|
||
</div>
|
||
<div v-else style="width: 100%;display: flex;justify-content: space-between">
|
||
<div id="chartWrap" style="width: 47%;height:300px"></div>
|
||
<div class="webSwitch">
|
||
<el-switch
|
||
@change="switchHandle"
|
||
class="swithContainer"
|
||
v-model="swithVal"
|
||
active-text="拖车"
|
||
inactive-color="#409EFF"
|
||
inactive-text="小修">
|
||
</el-switch>
|
||
<div id="chartWrap1" style="width: 100%;height:300px"></div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
<div :class="{'webTab':!isMobile,}">
|
||
<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>
|
||
<div v-loading="loadingData" class="contentWrap monthTotal" v-if="[2,3,4].includes(active)">
|
||
<div class="searchDriverName" v-if="[3,4].includes(active)">
|
||
<el-select
|
||
v-model="driverName"
|
||
filterable
|
||
remote
|
||
clearable
|
||
reserve-keyword
|
||
placeholder="请输入后选择"
|
||
:remote-method="driverremoteMethod"
|
||
@change="getData"
|
||
:loading="driverselectLoading"
|
||
:style="isMobile ? 'width:100%' : 'width:50%'"
|
||
>
|
||
<el-option
|
||
v-for="item in driverselectOption"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="item.name">
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
<div :class="{'tabWrap':true,'webTabWrap':!isMobile,'mobileTab':isMobile}">
|
||
<div v-for="(item,index) in (active===3 ? driverList : list)" :class="activeIndex===index ? 'active' : ''"
|
||
:key="index"
|
||
@click="changeTab(index)">{{ item.name }}
|
||
</div>
|
||
</div>
|
||
<div :class="{'comTab':true}">
|
||
<noFit-table :active='active' :is-mobile='isMobile' :table-data="detailList" :label-list="labelList"></noFit-table>
|
||
</div>
|
||
<el-pagination
|
||
small
|
||
v-if="active !== 2"
|
||
:page-sizes="[20, 50, 100]"
|
||
:current-page.sync="pageNum"
|
||
:page-size.sync="pageSize"
|
||
@current-change="getKpiData"
|
||
@size-change="getKpiData"
|
||
layout="prev, pager, next,sizes"
|
||
:total="total">
|
||
</el-pagination>
|
||
</div>
|
||
<div v-loading="loadingData" class="contentWrap monthTotal" v-if="[5,6,7,8,9].includes(active)">
|
||
<div :class="{'comTab':true,'detailTable':isMobile}">
|
||
<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
|
||
:page-sizes="[20, 50, 100]"
|
||
:current-page.sync="pageNum"
|
||
:page-size.sync="pageSize"
|
||
@current-change="getKpiData"
|
||
@size-change="getKpiData"
|
||
layout="prev, pager, next,sizes"
|
||
:total="total">
|
||
</el-pagination>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import * as echarts from 'echarts';
|
||
import dayjs from "dayjs";
|
||
import {
|
||
getKpiDetailsData,
|
||
getStatisticsKpiByMonth,
|
||
getStatisticsKpi,
|
||
getDriverStatisticsKpi,
|
||
getSupplierId,
|
||
getDriverName,
|
||
getRecentSupplierKpi
|
||
} 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";
|
||
|
||
export default {
|
||
name: "kpiIndex",
|
||
components: {CircleChar, NoFitTable},
|
||
computed: {},
|
||
mixins: [myMixins],
|
||
data() {
|
||
return {
|
||
active:0,
|
||
activeIndex: 0,
|
||
tabArr: [
|
||
{name: '总览'}, {name: '月/总'}, {name: '日/总'}, {name: '月/师傅'}, {name: '日/师傅'}, {name: '拒单明细'},
|
||
{name: '超时明细'}, {name: '投诉明细'}, {name: '不使用APP案件明细'}, {name: '车辆在线情况'}
|
||
],
|
||
list: [{name: '接单指标'}, {name: '客户评价'}, {name: 'APP使用'}, {name: ' 时效 '}],
|
||
driverList: [{name: '得分总览'},{name: '接单情况'}, {name: '服务评价'}, {name: 'APP使用情况'}, {name: '时效 '}],
|
||
startMonthTime: '',
|
||
startTime: '',
|
||
endTime: '',
|
||
indexData: {},
|
||
detailList: [],
|
||
labelList: [],
|
||
etlDetailList: [],
|
||
etlLabelList: [],
|
||
loading: false,
|
||
loadingData: false,
|
||
v1: [],
|
||
v2: [],
|
||
v3: [],
|
||
v4: [],
|
||
v5: [],
|
||
v6: [],
|
||
xAxisArr: [],
|
||
isMobile: false,
|
||
isZd: '',
|
||
current: dayjs(new Date()).format('M'),
|
||
supplierName:'',
|
||
value: '1',
|
||
options: [
|
||
{value: '1', label: '师傅接单时效'},
|
||
{value: '2', label: '到达时效'},
|
||
],
|
||
pageNum: 1,
|
||
pageSize: 20,
|
||
total: 0,
|
||
swithVal: true,
|
||
supplierId:'',
|
||
selectLoading: false,
|
||
selectOption: [],
|
||
driverId:'',//68517
|
||
driverName:'',
|
||
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.getData();
|
||
// await this.allDataChart()
|
||
},
|
||
methods: {
|
||
applicateHandle() {
|
||
if (window.parent) {
|
||
const hasListener = window.parent.dispatchEvent(new Event('checkCloseDialog'));
|
||
if (hasListener) {
|
||
window.parent.postMessage('closeDialog', '*');
|
||
} else {
|
||
window.history.back();
|
||
}
|
||
}
|
||
},
|
||
async selectSupplierNameHanldle(){
|
||
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)
|
||
},
|
||
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 getDriverName(query);
|
||
this.driverselectOption = result.data || []
|
||
} catch (error) {
|
||
this.driverselectOption = [];
|
||
} finally {
|
||
this.driverselectLoading = false;
|
||
}
|
||
} else {
|
||
this.driverselectOption = [];
|
||
}
|
||
},
|
||
async changeHandle() {
|
||
this.v1=[]
|
||
this.v2=[]
|
||
await this.twoTabHanldeData();
|
||
await this.drawLine();
|
||
},
|
||
async switchHandle() {
|
||
await this.getData();
|
||
await this.drawLine1();
|
||
},
|
||
async getData() {
|
||
try {
|
||
this.loadingData = true
|
||
this.indexData = {}
|
||
this.total=0
|
||
this.pageNum=1
|
||
this.v1 = []
|
||
this.v2 = []
|
||
this.v3 = []
|
||
this.v4 = []
|
||
this.v5 = []
|
||
this.v6 = []
|
||
this.xAxisArr = []
|
||
this.etlDetailList=[]
|
||
this.etlLabelList=[]
|
||
this.continueMonthKpi=[]
|
||
await this.getKpiData()
|
||
this.loadingData = false
|
||
} finally {
|
||
this.loadingData = false
|
||
}
|
||
},
|
||
async clickJumpHandle(type) {
|
||
this.loading = true
|
||
this.active = type;
|
||
await this.onClick();
|
||
},
|
||
onClick() {
|
||
this.activeIndex = 0;
|
||
this.detailList = [];
|
||
this.labelList = [];
|
||
this.driverName=''
|
||
this.getData();
|
||
if (this.active === 1) {
|
||
setTimeout(() => {
|
||
this.drawLine()
|
||
if (!this.isMobile && this.activeIndex === 3) {
|
||
this.drawLine1()
|
||
}
|
||
}, 500)
|
||
}
|
||
},
|
||
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: 'line',
|
||
data: this.v1,
|
||
smooth: true,
|
||
yAxisIndex: 0,
|
||
label: {
|
||
show: true, // 显示标签
|
||
position: 'top', // 标签位置在柱形顶部
|
||
formatter: '{c}%'
|
||
}
|
||
},
|
||
{
|
||
name: '投诉率',
|
||
type: "line",
|
||
data: this.v3,
|
||
smooth: true,
|
||
yAxisIndex: 0,
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
formatter: '{c}%'
|
||
},
|
||
},
|
||
{
|
||
name: '客户满意度',
|
||
type: 'line',
|
||
smooth: true,
|
||
data: this.v2,
|
||
yAxisIndex: 0,
|
||
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: 0,
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
formatter: '{c}%'
|
||
},
|
||
},
|
||
{
|
||
name: '平安成功率',
|
||
type: "line",
|
||
data: this.v3,
|
||
yAxisIndex: 0,
|
||
smooth: true,
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
formatter: '{c}%'
|
||
},
|
||
},
|
||
{
|
||
name: '中华成功率',
|
||
type: "line",
|
||
data: this.v4,
|
||
yAxisIndex: 0,
|
||
smooth: true,
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
formatter: '{c}%'
|
||
},
|
||
},
|
||
{
|
||
name: '中道成功率',
|
||
type: "line",
|
||
data: this.v5,
|
||
yAxisIndex: 0,
|
||
smooth: true,
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
formatter: '{c}%'
|
||
},
|
||
},
|
||
{
|
||
name: '总成功率',
|
||
type: "line",
|
||
data: this.v6,
|
||
yAxisIndex: 0,
|
||
smooth: true,
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
formatter: '{c}%'
|
||
},
|
||
},
|
||
]
|
||
let series4 = [{
|
||
name: '接单时效(分)',
|
||
type: 'bar',
|
||
data: this.v1,
|
||
yAxisIndex: 1,
|
||
smooth: true,
|
||
barWidth: this.isMobile ? 35 : 60,
|
||
label: {
|
||
show: true, // 显示标签
|
||
position: 'top', // 标签位置在柱形顶部
|
||
}
|
||
},
|
||
{
|
||
name: '3分钟接单率',
|
||
type: 'line',
|
||
smooth: true,
|
||
data: this.v2,
|
||
yAxisIndex: 0,
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
formatter: '{c}%'
|
||
},
|
||
},
|
||
]
|
||
let series5 = [{
|
||
name: '到达时效（分）',
|
||
type: 'bar',
|
||
data: this.v1,
|
||
yAxisIndex: 1,
|
||
smooth: true,
|
||
barWidth: this.isMobile ? 25 : 10,
|
||
label: {
|
||
show: true, // 显示标签
|
||
position: 'top', // 标签位置在柱形顶部
|
||
}
|
||
},
|
||
{
|
||
name: '聚合成功到达时效',
|
||
type: 'bar',
|
||
data: this.v2,
|
||
yAxisIndex: 1,
|
||
smooth: true,
|
||
barWidth: this.isMobile ? 25 : 50,
|
||
label: {
|
||
show: true, // 显示标签
|
||
position: 'top', // 标签位置在柱形顶部
|
||
}
|
||
},
|
||
{
|
||
name: '40分钟到达率',
|
||
type: 'line',
|
||
smooth: true,
|
||
data: this.v3,
|
||
yAxisIndex: 0,
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
formatter: '{c}%'
|
||
},
|
||
},
|
||
]
|
||
let yAxis1 = [
|
||
{type: 'value'},
|
||
{
|
||
type: 'value',
|
||
axisLabel: {
|
||
formatter: '{value}%'
|
||
}
|
||
},
|
||
]
|
||
let yAxis2 = [
|
||
{
|
||
type: 'value',
|
||
axisLabel: {
|
||
formatter: '{value}%'
|
||
}
|
||
} ]
|
||
let yAxis3 = [
|
||
{
|
||
type: 'value',
|
||
axisLabel: {
|
||
formatter: '{value}%'
|
||
}
|
||
},
|
||
]
|
||
let yAxis4 = [
|
||
{
|
||
type: 'value',
|
||
axisLabel: {
|
||
formatter: '{value}%'
|
||
}
|
||
},
|
||
{type: 'value'},
|
||
]
|
||
let yAxis5 = [
|
||
{
|
||
type: 'value',
|
||
axisLabel: {
|
||
formatter: '{value}%'
|
||
}
|
||
},
|
||
{type: 'value'},
|
||
]
|
||
let series = []
|
||
let yAxis = []
|
||
if (this.active === 1) {
|
||
if (this.activeIndex === 0) {
|
||
series = series1
|
||
yAxis = yAxis1
|
||
} else if (this.activeIndex === 1) {
|
||
series = series2
|
||
yAxis = yAxis2
|
||
} else if (this.activeIndex === 2) {
|
||
series = series3
|
||
yAxis = yAxis3
|
||
} else if (this.activeIndex === 3) {
|
||
if (this.value == 1) {
|
||
series = series4
|
||
yAxis = yAxis4
|
||
} else {
|
||
series = series5
|
||
yAxis = yAxis5
|
||
}
|
||
}
|
||
}
|
||
option = {
|
||
title: {
|
||
text: this.isMobile ? this.getTitle(this.activeIndex) : '师傅接单时效',
|
||
textStyle: {
|
||
fontSize: 12
|
||
},
|
||
},
|
||
legend: {
|
||
textStyle: {
|
||
fontSize: this.isMobile ? 8 : ''
|
||
},
|
||
right: '1%',
|
||
itemWidth: this.isMobile ? 10 : 18, // 设置图例图标的宽度，从而调整图标大小
|
||
itemHeight: this.isMobile ? 6 : 10,
|
||
width: (this.active == 1 && this.activeIndex == 2) ? '60%' : '100%',
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: this.xAxisArr,
|
||
},
|
||
grid: {
|
||
left: '1%',
|
||
right: '1%',
|
||
bottom: '6%',
|
||
containLabel: true
|
||
},
|
||
yAxis: yAxis,
|
||
series: series,
|
||
};
|
||
option && myChart.setOption(option, true);
|
||
},
|
||
drawLine1() {
|
||
let myChart = echarts.init(document.getElementById('chartWrap1'))
|
||
let option;
|
||
option = {
|
||
title: {
|
||
text: '到达时效',
|
||
textStyle: {
|
||
fontSize: 12
|
||
},
|
||
},
|
||
legend: {
|
||
right: '1%',
|
||
itemWidth: 18, // 设置图例图标的宽度，从而调整图标大小
|
||
itemHeight: 10,
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: this.xAxisArr,
|
||
},
|
||
grid: {
|
||
left: '1%',
|
||
right: '1%',
|
||
bottom: '6%',
|
||
containLabel: true
|
||
},
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
axisLabel: {
|
||
formatter: '{value}%'
|
||
}
|
||
},
|
||
{type: 'value'},
|
||
],
|
||
series: [{
|
||
name: '到达时效（分）',
|
||
type: 'bar',
|
||
data: this.v3,
|
||
yAxisIndex: 1,
|
||
smooth: true,
|
||
barWidth: 45,
|
||
barGap: '0%', // 设置柱子之间的间隔
|
||
label: {
|
||
show: true, // 显示标签
|
||
position: 'top', // 标签位置在柱形顶部
|
||
}
|
||
},
|
||
{
|
||
name: '聚合成功到达时效',
|
||
type: 'bar',
|
||
data: this.v4,
|
||
yAxisIndex: 1,
|
||
smooth: true,
|
||
barWidth: 45,
|
||
barGap: '0%', // 设置柱子之间的间隔
|
||
label: {
|
||
show: true, // 显示标签
|
||
position: 'top', // 标签位置在柱形顶部
|
||
}
|
||
},
|
||
{
|
||
name: '40分钟到达率',
|
||
type: 'line',
|
||
smooth: true,
|
||
data: this.v5,
|
||
yAxisIndex: 0,
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
formatter: '{c}%'
|
||
},
|
||
},
|
||
]
|
||
};
|
||
option && myChart.setOption(option, true);
|
||
},
|
||
async allDataChart(){
|
||
let res = await getRecentSupplierKpi({
|
||
startTime: this.startTime,
|
||
endTime: this.endTime,
|
||
statisticsType: 1,
|
||
supplierId: this.supplierId,
|
||
driverId: this.driverId,
|
||
driverName:this.driverName,
|
||
});
|
||
console.log("res",res)
|
||
this.continueMonthKpi=res.data;
|
||
let v1=[]
|
||
let v2=[]
|
||
if( this.continueMonthKpi.length>0){
|
||
this.continueMonthKpi.forEach(item=>{
|
||
v1.push(item.dispatchOrderCount)
|
||
v2.push(item.orderScore)
|
||
})
|
||
}
|
||
let myChart = echarts.init(document.getElementById('allDataChart'))
|
||
let option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'cross',
|
||
crossStyle: {
|
||
color: '#999'
|
||
}
|
||
}
|
||
},
|
||
legend: { },
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
axisLabel: {
|
||
formatter: '{value}',
|
||
rotate: 45,
|
||
margin: 2
|
||
}
|
||
},
|
||
{
|
||
type: 'value',
|
||
axisLabel: {
|
||
formatter: '{value}',
|
||
}
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '案件量',
|
||
type: 'bar',
|
||
yAxisIndex: 0,
|
||
data:v1
|
||
},
|
||
{
|
||
name: '总分',
|
||
type: 'line',
|
||
yAxisIndex: 1,
|
||
data: v2
|
||
}
|
||
]
|
||
};
|
||
option && myChart.setOption(option, true);
|
||
},
|
||
async getKpiData() {
|
||
try {
|
||
this.loading = true
|
||
if (this.active === 0) {
|
||
await this.allDataChart()
|
||
let res = await getStatisticsKpiByMonth({
|
||
startTime: this.startTime,
|
||
endTime: this.endTime,
|
||
statisticsType: 1,
|
||
supplierId: this.supplierId,
|
||
});
|
||
if(!res.data){
|
||
return
|
||
}
|
||
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);
|
||
}
|
||
} else if ([1, 2].includes(this.active)) {
|
||
let res = await getStatisticsKpi({
|
||
startTime: this.active === 1 ? this.startMonthTime : this.startTime,
|
||
endTime: this.endTime,
|
||
statisticsType: this.active === 1 ? 1 : 2,
|
||
supplierId: this.supplierId,
|
||
})
|
||
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) ;
|
||
item.threeMinutesContactRate=this.formatPercentage(item.threeMinutesContactRate) ;
|
||
item.pinganPolymerizationSuccessRate=this.formatPercentage(item.pinganPolymerizationSuccessRate) ;
|
||
item.zhonghuaPolymerizationSuccessRate=this.formatPercentage(item.zhonghuaPolymerizationSuccessRate) ;
|
||
item.zdPolymerizationSuccessRate=this.formatPercentage(item.zdPolymerizationSuccessRate) ;
|
||
item.polymerizationSuccessRate=this.formatPercentage(item.polymerizationSuccessRate) ;
|
||
item.threeMinutesReceivingRate=this.formatPercentage(item.threeMinutesReceivingRate) ;
|
||
item.fortyMinutesArrivalRate=this.formatPercentage(item.fortyMinutesArrivalRate) ;
|
||
item.customerSatisfaction=this.formatPercentage(item.customerSatisfaction) ;
|
||
item.trailFortyMinutesArrivalRate=this.formatPercentage(item.trailFortyMinutesArrivalRate) ;
|
||
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 + '月')};
|
||
});
|
||
this.loading = false
|
||
this.detailList?.map(item => {
|
||
this.xAxisArr.push(item.month)
|
||
})
|
||
this.xAxisArr[this.xAxisArr.length - 1] = '本月'
|
||
await this.twoTabHanldeData()
|
||
} else if ([3, 4].includes(this.active)) {
|
||
let res = await getDriverStatisticsKpi({
|
||
startTime: this.startTime ,
|
||
endTime: this.endTime,
|
||
statisticsType: this.active === 3 ? 1 : 2,
|
||
supplierId: this.supplierId,
|
||
driverId: this.driverId,
|
||
driverName:this.driverName,
|
||
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) ;
|
||
item.threeMinutesContactRate=this.formatPercentage(item.threeMinutesContactRate) ;
|
||
item.pinganPolymerizationSuccessRate=this.formatPercentage(item.pinganPolymerizationSuccessRate) ;
|
||
item.zhonghuaPolymerizationSuccessRate=this.formatPercentage(item.zhonghuaPolymerizationSuccessRate) ;
|
||
item.zdPolymerizationSuccessRate=this.formatPercentage(item.zdPolymerizationSuccessRate) ;
|
||
item.polymerizationSuccessRate=this.formatPercentage(item.polymerizationSuccessRate) ;
|
||
item.threeMinutesReceivingRate=this.formatPercentage(item.threeMinutesReceivingRate) ;
|
||
item.fortyMinutesArrivalRate=this.formatPercentage(item.fortyMinutesArrivalRate) ;
|
||
item.customerSatisfaction=this.formatPercentage(item.customerSatisfaction) ;
|
||
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=[]
|
||
this.total=0
|
||
}
|
||
await this.twoTabHanldeData();
|
||
} else if ([5, 6, 7, 8, 9].includes(this.active)) {
|
||
this.detailList = []
|
||
this.labelList = []
|
||
let result = await getKpiDetailsData({
|
||
startTime: this.startTime,
|
||
endTime: this.endTime,
|
||
searchType: this.setType(this.active),
|
||
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};
|
||
});
|
||
this.loading = false
|
||
if (this.active === 5) {//拒单明细
|
||
this.labelList = [
|
||
{label: '案件编号', prop: 'orderCode'},
|
||
{label: '服务内容', prop: 'serviceName'},
|
||
{label: '拒单师傅车号', prop: 'plateNumber'},
|
||
{label: '拒单师傅名称', prop: 'driverName'},
|
||
{label: '手机号', prop: 'driverPhone'},
|
||
{label: '上游接单来源', prop: 'workSource'},
|
||
{label: '中道派单时间', prop: 'dispatchTime'},
|
||
{label: '拒绝原因', prop: 'reason'},
|
||
]
|
||
} else if (this.active === 6) {//超时明细
|
||
this.labelList = [
|
||
{label: '案件编号', prop: 'orderCode'},
|
||
{label: '服务内容', prop: 'serviceName'},
|
||
{label: '超时师傅车号', prop: 'plateNumber'},
|
||
{label: '超时师傅名称', prop: 'driverName'},
|
||
{label: '手机号', prop: 'driverPhone'},
|
||
{label: '上游接单来源', prop: 'workSource'},
|
||
{label: '中道派单时间', prop: 'dispatchTime'},
|
||
]
|
||
} else if (this.active === 7) {//投诉明细
|
||
this.labelList = [
|
||
{label: '案件编号', prop: 'orderCode'},
|
||
{label: '服务内容', prop: 'serviceName'},
|
||
{label: '接单车号', prop: 'plateNumber'},
|
||
{label: '接单师傅', prop: 'driverName'},
|
||
{label: '投诉时间', prop: 'complainCreateTime'},
|
||
{label: '投诉类型', prop: 'complainTypeString'},
|
||
]
|
||
} else if (this.active === 8) {//不使用App案件明细
|
||
this.labelList = [
|
||
{label: '案件编号', prop: 'orderCode'},
|
||
{label: '服务内容', prop: 'serviceName'},
|
||
{label: '接单师傅手机号', prop: 'driverPhone'},
|
||
{label: '工单创建时间', prop: 'orderCreateTime'},
|
||
{label: '事发地', prop: 'vehiclePointAddress'},
|
||
]
|
||
} else if (this.active === 9) {//车辆在线情况
|
||
this.labelList = [
|
||
{label: '日期', prop: 'date'},
|
||
{label: '0点在线车辆数量', prop: 'zeroClockVehicleCount'},
|
||
{label: '8点在线车辆数量', prop: 'eightClockVehicleCount'},
|
||
{label: '12点在线车辆数量', prop: 'twelveClockVehicleCount'},
|
||
{label: '16点在线车辆数量', prop: 'sixteenClockVehicleCount'},
|
||
{label: '20点在线车辆数量', prop: 'twentyClockVehicleCount'},
|
||
{label: '22点在线车辆数量', prop: 'twentyTwoClockVehicleCount'},
|
||
|
||
]
|
||
}
|
||
}
|
||
} finally {
|
||
this.loading = false
|
||
}
|
||
},
|
||
formatPercentage(value) {
|
||
let result = value * 100;
|
||
if (Number.isInteger(result)) {
|
||
return result.toString() + '%';
|
||
} else {
|
||
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() {
|
||
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)
|
||
},
|
||
// 获取当月天数
|
||
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();
|
||
},
|
||
//获取近五个月的开始时间
|
||
getStartTimeFromEndTime(endTimeStr) {
|
||
const endTime = new Date(endTimeStr);
|
||
endTime.setMonth(endTime.getMonth() - 5); // 减去5个月
|
||
const year = endTime.getFullYear();
|
||
let month = String(endTime.getMonth() + 1).padStart(2, '0'); // 月份+1，并确保为两位数
|
||
let day = '01'; // 因为我们要的是那个月的第一天
|
||
const startTimeStr = `${year}-${month}-${day} `+'00:00:00';
|
||
return startTimeStr;
|
||
},
|
||
async changeTab(index) {
|
||
try {
|
||
this.loadingData = true
|
||
this.activeIndex = index
|
||
this.labelList = []
|
||
this.v1 = []
|
||
this.v2 = []
|
||
this.v3 = []
|
||
this.v4 = []
|
||
this.v5 = []
|
||
this.v6 = []
|
||
await this.twoTabHanldeData()
|
||
this.loadingData = false
|
||
if (this.active === 1) {
|
||
await this.drawLine()
|
||
if (!this.isMobile && this.activeIndex === 3) {
|
||
this.drawLine1()
|
||
}
|
||
}
|
||
} finally {
|
||
this.loadingData = false
|
||
}
|
||
},
|
||
// 二级tab切可不调接口，需再次处理数据,1,2,3,4
|
||
twoTabHanldeData() {
|
||
this.etlDetailList=[]
|
||
this.etlLabelList=[]
|
||
if (this.active === 1) {
|
||
const columnObj = {} //创建标题数组中第一个对象
|
||
columnObj.label = 'KPI' //第一个标题名称
|
||
columnObj.prop = 'month' //第一个标题名称对应的字段
|
||
this.etlLabelList.push(columnObj)
|
||
if (this.activeIndex === 0) {//接单指标
|
||
this.etlDetailList=[{ 'month': '派遣量' },{ 'month': '承接量' },{ 'month': '完成量' },
|
||
{ 'month': '拒单量' },{ 'month': '拒单率(%)' },{ 'month': '超时接单量' },{ 'month': '超时率(%)' },{ 'month': '客户取消率(%)' }]
|
||
let props = 'prop' //自定义字段名称
|
||
this.detailList?.map((item,index) => {
|
||
this.v1.push(item.dispatchOrderCount)
|
||
this.v2.push(item.refuseOrderRate.replace('%', ''))
|
||
this.v3.push(item.timeoutOrderRate.replace('%', ''))
|
||
this.v4.push(item.cancelRate.replace('%', ''))
|
||
const columnObj = {}
|
||
columnObj.label = item.month // 每一列的标题的名称
|
||
columnObj.prop = props + index //自定义每一列标题字段名称
|
||
this.etlLabelList.push(columnObj)
|
||
let mappings = [ 'dispatchOrderCount', 'receiveOrderCount', 'finishOrderCount','refuseOrderCount',
|
||
'refuseOrderRate', 'timeoutOrderCount', 'timeoutOrderRate','cancelRate' ];
|
||
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: 'dispatchOrderCount'},
|
||
{label: '承接量', prop: 'receiveOrderCount'},
|
||
{label: '完成量', prop: 'finishOrderCount'},
|
||
{label: '拒单量', prop: 'refuseOrderCount'},
|
||
{label: '拒单率(%)', prop: 'refuseOrderRate'},
|
||
{label: '超时接单量', prop: 'timeoutOrderCount'},
|
||
{label: '超时率(%)', prop: 'timeoutOrderRate'},
|
||
{label: '取消率(%)', prop: 'cancelRate'},
|
||
]
|
||
} else if (this.activeIndex === 1) {
|
||
this.etlDetailList=[{ 'month': '投诉量' },{ 'month': '投诉率(%)' },{ 'month': '客户满意度(%)' }, { 'month': '客户评价率(%)' }]
|
||
let props = 'prop' //自定义字段名称
|
||
this.detailList?.map((item,index) => {
|
||
this.v1.push(item.customerEvaluateRate.replace('%', ''))
|
||
this.v2.push(item.customerSatisfaction.replace('%', ''))
|
||
this.v3.push(item.complainOrderRate.replace('%', ''))
|
||
const columnObj = {}
|
||
columnObj.label = item.month // 每一列的标题的名称
|
||
columnObj.prop = props + index //自定义每一列标题字段名称
|
||
this.etlLabelList.push(columnObj)
|
||
let mappings = [ 'complainOrderCount', 'complainOrderRate', 'customerSatisfaction','customerEvaluateRate' ];
|
||
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: 'complainOrderCount'},
|
||
{label: '投诉率(%)', prop: 'complainOrderRate'},
|
||
{label: '客户满意度(%)', prop: 'customerSatisfaction'},
|
||
{label: '客户评价率(%)', prop: 'customerEvaluateRate'},
|
||
]
|
||
} else if (this.activeIndex === 2) {
|
||
this.etlDetailList=[{ 'month': '使用率(%)' },{ 'month': '3′联系客户率(%)' },{ 'month': '平安聚合成功率(%)' }, { 'month': '中华聚合成功率(%)' }
|
||
,{ 'month': '中道聚合成功率（%' }, { 'month': '总聚合成功率(%)' }]
|
||
let props = 'prop' //自定义字段名称
|
||
this.detailList?.map((item,index) => {
|
||
this.v1.push(item.appRate.replace('%', ''))
|
||
this.v2.push(item.threeMinutesContactRate.replace('%', ''))
|
||
this.v3.push(item.pinganPolymerizationSuccessRate.replace('%', ''))
|
||
this.v4.push(item.zhonghuaPolymerizationSuccessRate.replace('%', ''))
|
||
this.v5.push(item.zdPolymerizationSuccessRate.replace('%', ''))
|
||
this.v6.push(item.polymerizationSuccessRate.replace('%', ''))
|
||
const columnObj = {}
|
||
columnObj.label = item.month // 每一列的标题的名称
|
||
columnObj.prop = props + index //自定义每一列标题字段名称
|
||
this.etlLabelList.push(columnObj)
|
||
let mappings = [ 'appRate', 'threeMinutesContactRate', 'pinganPolymerizationSuccessRate','zhonghuaPolymerizationSuccessRate','zdPolymerizationSuccessRate','polymerizationSuccessRate' ];
|
||
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: 'appRate'},
|
||
{label: '3′联系客户率(%)', prop: 'threeMinutesContactRate'},
|
||
{label: '平安聚合成功率(%)', prop: 'pinganPolymerizationSuccessRate'},
|
||
{label: '中华聚合成功率(%)', prop: 'zhonghuaPolymerizationSuccessRate'},
|
||
{label: '中道聚合成功率(%)', prop: 'zdPolymerizationSuccessRate'},
|
||
{label: '总聚合成功率(%)', prop: 'polymerizationSuccessRate'},
|
||
]
|
||
} else if (this.activeIndex === 3) {
|
||
this.etlDetailList=[{ 'month': '接单时效(分)' },{ 'month': '3′接单率(%)' },{ 'month': '到达时效(分)' }, { 'month': '40′到达率(%)' },{'month':'聚合成功到达时效(分)'}]
|
||
let props = 'prop' //自定义字段名称
|
||
if (this.isMobile) {
|
||
if (this.value == 1) {
|
||
this.detailList?.map(item => {
|
||
this.v1.push(item.receiving)
|
||
this.v2.push(item.threeMinutesReceivingRate.replace('%', ''))
|
||
})
|
||
} else {
|
||
this.detailList?.map(item => {
|
||
this.v1.push(item.arriving)
|
||
this.v2.push(item.polymerizationSuccessArriving)
|
||
this.v3.push(item.fortyMinutesArrivalRate.replace('%', ''))
|
||
})
|
||
}
|
||
this.detailList?.map((item,index) => {
|
||
const columnObj = {}
|
||
columnObj.label = item.month // 每一列的标题的名称
|
||
columnObj.prop = props + index //自定义每一列标题字段名称
|
||
this.etlLabelList.push(columnObj)
|
||
let mappings = [ 'receiving', 'threeMinutesReceivingRate', 'arriving','fortyMinutesArrivalRate','polymerizationSuccessArriving'];
|
||
for (let i = 0; i < mappings.length; i++) {
|
||
this.$set(this.etlDetailList[i], columnObj.prop, item[mappings[i]]);
|
||
}
|
||
})
|
||
} else {
|
||
this.detailList?.map(item => {
|
||
this.v1.push(item.receiving)
|
||
this.v2.push(item.threeMinutesReceivingRate.replace('%', ''))
|
||
})
|
||
if (this.swithVal) {
|
||
this.detailList?.map(item => {
|
||
this.v3.push(item.trailArriving)
|
||
this.v4.push(item.trailPolymerizationSuccessArsriving)
|
||
this.v5.push(item.trailFortyMinutesArrivalRate ? item.trailFortyMinutesArrivalRate.replace('%', '') : item.trailFortyMinutesArrivalRate)
|
||
})
|
||
} else {
|
||
this.detailList?.map(item => {
|
||
this.v3.push(item.minorArriving)
|
||
this.v4.push(item.minorPolymerizationSuccessArriving)
|
||
this.v5.push(item.minorFortyMinutesArrivalRate ? item.minorFortyMinutesArrivalRate.replace('%', '') : item.minorFortyMinutesArrivalRate)
|
||
})
|
||
}
|
||
}
|
||
this.labelList = [
|
||
{label: '月', prop: 'month'},
|
||
{label: '接单时效(分)', prop: 'receiving'},
|
||
{label: '3′接单率(%)', prop: 'threeMinutesReceivingRate'},
|
||
{label: '到达时效(分)', prop: 'arriving'},
|
||
{label: '40′到达率(%)', prop: 'fortyMinutesArrivalRate'},
|
||
{label: '聚合成功到达时效(分)', prop: 'polymerizationSuccessArriving'},
|
||
]
|
||
}
|
||
} else if (this.active === 2) {
|
||
if (this.activeIndex === 0) {//接单指标
|
||
this.labelList = [
|
||
{label: '日', prop: 'date'},
|
||
{label: '派遣案件量', prop: 'dispatchOrderCount'},
|
||
{label: '承接案件量', prop: 'receiveOrderCount'},
|
||
{label: '完成量', prop: 'finishOrderCount'},
|
||
{label: '拒单量', prop: 'refuseOrderCount'},
|
||
{label: '拒单率(%)', prop: 'refuseOrderRate'},
|
||
{label: '超时接单量', prop: 'timeoutOrderCount'},
|
||
{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'},
|
||
]
|
||
} 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'},
|
||
]
|
||
} else if (this.activeIndex === 3) {
|
||
this.labelList = [
|
||
{label: '日', prop: 'date'},
|
||
{label: '接单时效(分)', prop: 'receiving'},
|
||
{label: '3′接单率(%)', prop: 'threeMinutesReceivingRate'},
|
||
{label: '小修到达时效(分)', prop: 'minorArriving'},
|
||
{label: '拖车到达时效(分)', prop: 'trailArriving'},
|
||
{label: '困境到达时效(分)', prop: 'dilemmaArriving'},
|
||
{label: '到达时效(分)', prop: 'arriving'},
|
||
{label: '40′到达率(%)', prop: 'fortyMinutesArrivalRate'},
|
||
{label: '小修聚合成功到达时效(分)', prop: 'minorPolymerizationSuccessArriving'},
|
||
{label: '拖车聚合成功到达时效(分)', prop: 'trailPolymerizationSuccessArriving'},
|
||
{label: '聚合成功到达时效(分)', prop: 'polymerizationSuccessArriving'},
|
||
]
|
||
}
|
||
} else if (this.active === 3) {
|
||
if (this.activeIndex === 0) {
|
||
|
||
this.labelList = [
|
||
{label: '师傅姓名', prop: 'driverName'},
|
||
{label: '总分', prop: 'score'},
|
||
{label: '案件总量', prop: 'orderCount'},
|
||
{label: '累计得分', prop: 'cumulativeScore'},
|
||
{label: '两分钟内接单得分', prop: 'twoMinutesAcceptScore'},
|
||
{label: '1分钟内联系客户得分', prop: 'oneMinutesContactCustomerScore'},
|
||
{label: '联系成功得分', prop: 'contactSuccessScore'},
|
||
{label: '准时到达B点得分', prop: 'arriveBScore'},
|
||
{label: '准时到达C点得分', prop: 'arriveCScore'},
|
||
{label: '服务成功得分', prop: 'serviceSuccessScore'},
|
||
{label: '必传照片上传得分', prop: 'uploadPhotoScore'},
|
||
{label: '审核一次通过得分', prop: 'auditScore'},
|
||
{label: '平安案件无评价扣分', prop: 'pinganNoCommentDeduct'},
|
||
{label: '案件差评扣分', prop: 'orderNegativeDeduct'},
|
||
{label: '催促扣分', prop: 'urgeDeduct'},
|
||
{label: '有责车损扣分', prop: 'responsibleDeduct'},
|
||
{label: '有责投诉（非态度类）扣分', prop: 'complaintNoAttitudeDeduct'},
|
||
{label: '有责投诉（态度类）扣分', prop: 'complaintAttitudeDeduct'},
|
||
{label: '拒单扣分', prop: 'rejectDeduct'},
|
||
{label: '超时扣分', prop: 'timeoutDeduct'},
|
||
{label: '聚合成功得分', prop: 'polymerizationSuccessScore'},
|
||
{label: '聚合失败扣分', prop: 'polymerizationFailDeduct'},
|
||
{label: '每月培训得分', prop: 'trainingScore'},
|
||
{label: '新手入列得分', prop: 'listedScore'},
|
||
{label: '星级评分', prop: 'starRank'},
|
||
]
|
||
}if (this.activeIndex === 1) {
|
||
this.labelList = [
|
||
{label: '师傅姓名', prop: 'driverName'},
|
||
{label: '承接案件量', prop: 'receiveOrderCount'},
|
||
{label: '拒单量', prop: 'refuseOrderCount'},
|
||
{label: '拒单率(%)', prop: 'refuseOrderRate'},
|
||
{label: '超时接单量', prop: 'timeoutOrderCount'},
|
||
{label: '超时率(%)', prop: 'timeoutOrderRate'},
|
||
]
|
||
} else if (this.activeIndex === 2) {
|
||
this.labelList = [
|
||
{label: '师傅姓名', prop: 'driverName'},
|
||
{label: '承接案件量', prop: 'receiveOrderCount'},
|
||
{label: '投诉量', prop: 'complainOrderCount'},
|
||
{label: '投诉率(%)', prop: 'complainOrderRate'},
|
||
{label: '客户满意度(%)', prop: 'customerSatisfaction'},
|
||
{label: '客户评价率(%)', prop: 'customerEvaluateRate'},
|
||
{label: '催促率(%)', prop: 'urgeRate'},
|
||
]
|
||
} else if (this.activeIndex === 3) {
|
||
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: '日均在线时长(h)', prop: 'onlineDuration'},
|
||
]
|
||
} else if (this.activeIndex === 4) {
|
||
this.labelList = [
|
||
{label: '师傅姓名', prop: 'driverName'},
|
||
{label: '接单时效(分)', prop: 'receiving'},
|
||
{label: '3′接单率(%)', prop: 'threeMinutesReceivingRate'},
|
||
{label: '到达时效(分)', prop: 'arriving'},
|
||
{label: '40′到达率(%)', prop: 'fortyMinutesArrivalRate'},
|
||
{label: '聚合成功到达时效(分)', prop: 'polymerizationSuccessArriving'},
|
||
]
|
||
}
|
||
} else if (this.active === 4) {
|
||
if (this.activeIndex === 0) {//接单指标
|
||
this.labelList = [
|
||
{label: '日', prop: 'date'},
|
||
{label: '师傅姓名', prop: 'driverName'},
|
||
{label: '派遣案件量', prop: 'dispatchOrderCount'},
|
||
{label: '承接案件量', prop: 'receiveOrderCount'},
|
||
{label: '完成量', prop: 'finishOrderCount'},
|
||
{label: '拒单量', prop: 'refuseOrderCount'},
|
||
{label: '拒单率(%)', prop: 'refuseOrderRate'},
|
||
{label: '超时接单量', prop: 'timeoutOrderCount'},
|
||
{label: '超时率(%)', prop: 'timeoutOrderRate'},
|
||
{label: '客户取消率(%)', prop: 'cancelRate'},
|
||
]
|
||
} else if (this.activeIndex === 1) {
|
||
this.labelList = [
|
||
{label: '日', prop: 'date'},
|
||
{label: '师傅姓名', prop: 'driverName'},
|
||
{label: '投诉量', prop: 'complainOrderCount'},
|
||
{label: '投诉率(%)', prop: 'complainOrderRate'},
|
||
{label: '客户满意度(%)', prop: 'customerSatisfaction'},
|
||
{label: '客户评价率(%)', prop: 'customerEvaluateRate'},
|
||
{label: '催促率(%)', prop: 'urgeRate'},
|
||
]
|
||
} else if (this.activeIndex === 2) {
|
||
this.labelList = [
|
||
{label: '日', prop: 'date'},
|
||
{label: '师傅姓名', prop: 'driverName'},
|
||
{label: '使用率(%)', prop: 'appRate'},
|
||
{label: '3′联系客户率(%)', prop: 'threeMinutesContactRate'},
|
||
{label: '平安聚合成功率(%)', prop: 'pinganPolymerizationSuccessRate'},
|
||
{label: '中华聚合成功率(%)', prop: 'zhonghuaPolymerizationSuccessRate'},
|
||
{label: '中道聚合成功率(%)', prop: 'zdPolymerizationSuccessRate'},
|
||
{label: '总聚合成功率(%)', prop: 'polymerizationSuccessRate'},
|
||
{label: '日均在线时长(h)', prop: 'onlineDuration'},
|
||
]
|
||
} else if (this.activeIndex === 3) {
|
||
this.labelList = [
|
||
{label: '日', prop: 'date'},
|
||
{label: '师傅姓名', prop: 'driverName'},
|
||
{label: '接单时效(分)', prop: 'receiving'},
|
||
{label: '3′接单率(%)', prop: 'threeMinutesReceivingRate'},
|
||
{label: '到达时效(分)', prop: 'arriving'},
|
||
{label: '40′到达率(%)', prop: 'fortyMinutesArrivalRate'},
|
||
{label: '聚合成功到达时效(分)', prop: 'polymerizationSuccessArriving'},
|
||
]
|
||
}
|
||
}
|
||
},
|
||
setType(type) {
|
||
switch (type) {
|
||
case 5:
|
||
return 1;
|
||
case 6:
|
||
return 2;
|
||
case 7:
|
||
return 3;
|
||
case 8:
|
||
return 4;
|
||
case 9:
|
||
return 5;
|
||
}
|
||
},
|
||
getTitle(type) {
|
||
switch (type) {
|
||
case 0:
|
||
return '接单时效';
|
||
case 1:
|
||
return '客户评价';
|
||
case 2:
|
||
return 'APP使用';
|
||
case 3:
|
||
return '时效';
|
||
}
|
||
},
|
||
}
|
||
,
|
||
}
|
||
</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;
|
||
|
||
.month {
|
||
display: inline-block;
|
||
width: 45px;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
text-align: center;
|
||
border-radius: 20px 0px 0px 20px;
|
||
border: 1px solid #4C81F5;
|
||
font-size: 14px;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
/* .defen{
|
||
display: inline-block;
|
||
//width: 92px;
|
||
//text-align: right;
|
||
}*/
|
||
.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;
|
||
}
|
||
}
|
||
|
||
.evaluate, .appUse, .store {
|
||
height: 179px;
|
||
|
||
.title {
|
||
margin-bottom: 0 !important;
|
||
}
|
||
}
|
||
.allDataChartWrap{
|
||
width: 375px;
|
||
height: 220px;
|
||
|
||
}
|
||
.allDataChart{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.webComAllData{
|
||
width: 400px;
|
||
height: 255px;
|
||
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;
|
||
}
|
||
|
||
.chartWrapWeb, .webTab {
|
||
height: calc(100% - 200px);
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 0 40px;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
</style>
|