<template>
|
<div class="v-data-board-right">
|
<div>
|
<div class="flex g-picker">
|
<div class="flex-1 _large-title">司机详情</div>
|
<el-date-picker
|
v-model="day1"
|
:clearable="false"
|
value-format="yyyy-MM-dd"
|
@change="handleSelect"
|
type="date">
|
</el-date-picker>
|
<div class="_detail-btn ml20" @click="$to(`/driverList`)">司机详情</div>
|
</div>
|
<div class="flex align-c ju-c">
|
<div class="_drive-detail-box">
|
<div>{{ drive.total }}人</div>
|
<img src="../../../assets/driverappraise/drive_1.png" style="top:-2px"/>
|
<div class="mt5">司机总数</div>
|
</div>
|
<div class="ml10 _drive-detail-box">
|
<div>
|
<span class="_drive-num fz18 mr5">{{ drive.dangBan }}</span>人
|
</div>
|
<img src="../../../assets/driverappraise/drive_3.png"/>
|
<div class="mt5">当班司机</div>
|
</div>
|
<div class="ml10 _drive-detail-box">
|
<div>
|
<span class="_drive-num fz18 _drive-blue">{{ drive.boy }}</span><span class="_drive-num fz18 mr5 _drive-red">/{{ drive.girl }}</span>人
|
</div>
|
<img src="../../../assets/driverappraise/drive_2.png"/>
|
<div class="mt5">男性/女性</div>
|
</div>
|
|
</div>
|
|
</div>
|
<v-title :content="page == 1 ? `驾龄分布` : '年龄分布'" :pageShow="true" :page-text="pageText" class="mt10" @handlePage="(e) => handlePage(e)"
|
:page="page" />
|
<v-border-decorate class="mt10">
|
<div class="mb20 _drive-box">
|
<div class="_progress">
|
<circleProgress
|
v-for="(item, index) in agePercentData"
|
:key="index"
|
:class="`_progress-${index + 1}`"
|
:size="150 - index*20"
|
:center-position="77"
|
:id="`canvas_${page}_${index}`"
|
lineWidth="4"
|
:color="echartColor[index]"
|
:progress="(item.num/driverSum)*100"
|
/>
|
<div class="_drive-name t-center">
|
<div>{{ driverSum }}</div>
|
<div>全部司机</div>
|
</div>
|
</div>
|
<div class="_drive-detail">
|
<div class="flex" v-for="(item, index) in agePercentData" :key="index">
|
<div class="_icon" :style="{background: echartColor[index]}"/>
|
<span style="width: 70px">{{ item.workYear }}</span>
|
<span class="_num font16 flex-1 ml20">{{ item.percent }} %</span>
|
<span><span class="_num font16">{{ item.num }}</span>人</span>
|
</div>
|
</div>
|
</div>
|
|
|
</v-border-decorate>
|
<v-title content="被投诉分析" class="mt20" />
|
<v-border-decorate class="mt10">
|
<div class="mb20 pie3d-wrap">
|
<div>
|
<pie3d
|
id="driverComplain3dPie"
|
pheight="150px"
|
pwidth="180px"
|
class="_echart-pie-box"
|
:options="{ grid: { top: 0 }, legend: legend }"
|
:optionData="pie3dOptionData"
|
></pie3d>
|
<div class="bg-content">
|
<!-- <img :src="require('@/assets/driverappraise/bg_3dpie.png')" alt=""> -->
|
<div class="font12 _num">
|
{{ complaintsNum }}
|
</div>
|
<div class="font12">总数</div>
|
</div>
|
|
</div>
|
<div class="_drive-detail">
|
<div class="flex" v-for="(item, index) in complaintList" :key="index">
|
<div class="_icon ml10" :style="{background: echartColor[index]}"/>
|
<span style="width: 70px">{{ item.dutiesComplaintsNum }}</span>
|
<span class="_num font16 flex-1 ml20">{{ item.percent }} %</span>
|
<span><span class="_num font16">{{ item.times }}</span>人</span>
|
</div>
|
</div>
|
|
</div>
|
</v-border-decorate>
|
|
<v-title content="工作时长排名" class="mt20" />
|
<v-border-decorate class="mt10">
|
<div class="mb20">
|
<Table :data="workTimeData" :columnName="workTimeName" height="14vh"/>
|
</div>
|
</v-border-decorate>
|
|
</div>
|
</template>
|
<script>
|
import moment from "moment";
|
import Table from '@/components/common/table/table';
|
import pie3d from "@/components/echart/pie3d";
|
import circleProgress from '@/components/common/progress/circle'
|
|
export default {
|
name:'',
|
components:{ Table, pie3d, circleProgress },
|
data(){
|
return{
|
workTimeData: [],
|
pageText: {
|
1: '驾龄',
|
2: '年龄'
|
|
},
|
workTimeName: ['排名', '司机', '工作时长(小时)'],
|
day1: moment().subtract(1, 'day').format("yyyy-MM-DD"),
|
pie3dOptionData: [],
|
driverSum: 0,
|
page:1,
|
drive: {},
|
legend: {
|
top: 0,
|
show: false,
|
},
|
complaintsNum: 0,
|
complaintList: [],
|
agePercentData: [],
|
echartColor: ['#1483F2', '#02FED3', '#D9A534', '#6BC2FC'],
|
}
|
},
|
watch:{
|
|
},
|
created() {
|
|
|
|
},
|
methods:{
|
handleSelect() {
|
this.loadData();
|
this.workTimeLoad();
|
this.complaintLoad();
|
this.drivingAgeLoad();
|
|
},
|
handlePage(e) {
|
this.page = e;
|
this.drivingAgeLoad()
|
console.log(e, '1');
|
|
|
},
|
loadData() {
|
this.$axios.get(this.$Interface.data.getDriverCount, {
|
params: { statDate: this.day1, }
|
}).then((res) => {
|
console.log(res, 'res');
|
this.drive=res.data&&res.data[0];
|
|
});
|
|
},
|
workTimeLoad() {
|
this.$axios.get(this.$Interface.driver.workRank, {
|
params: { statDate: this.day1, }
|
}).then((res) => {
|
this.workTimeData = res.data.map(i => {
|
return {
|
...i,
|
column1: i.name,
|
column2: i.hours
|
}
|
});
|
if(this.workTimeData.length > 1){
|
this.workTimeData.sort(function (a, b){
|
return b.hours - a.hours
|
})
|
}
|
});
|
|
},
|
complaintLoad() {
|
// 被投诉分析
|
this.$axios.get(this.$Interface.driver.complaint, {
|
params: { statDate: this.day1, }
|
}).then((res) => {
|
const data = res.data;
|
this.complaintList = [...res.data];
|
const temp = [];
|
this.complaintsNum = 0;
|
if(data.length < 4) {
|
let len = data.length;
|
for (let index = 0; index < 4-len; index++) {
|
const element = {
|
"dutiesComplaintsNum": len + index,
|
"times": "0",
|
"percent": 0
|
}
|
this.complaintList.push(element);
|
|
}
|
}
|
console.log(this.complaintList, 'this.complaintList');
|
|
data.forEach((item, index) => {
|
item.times = Number(item.times);
|
this.complaintsNum += item.dutiesComplaintsNum * item.times;
|
temp.push({
|
name: item.dutiesComplaintsNum + "次投诉",
|
value: item.times,
|
itemStyle: {
|
color: this.echartColor[index]
|
}
|
});
|
});
|
console.log(temp, 'temp');
|
|
this.pie3dOptionData = temp;
|
});
|
|
},
|
drivingAgeLoad() {
|
let url = this.page == 1 ? 'age' : 'age1'
|
//驾龄分布
|
this.$axios.get(this.$Interface.driver[url], {
|
params: { statDate: this.day1, }
|
}).then((res) => {
|
let sum = 0;
|
let nulNum=0;
|
this.driverSum = 0;
|
const data = res.data || []
|
if(this.page == 1) {
|
data.forEach(item => {
|
|
sum += Number(item.num);
|
|
if(!item.workYear){
|
nulNum=item.num;
|
}
|
|
if(item.workYear){
|
item.workYear = item.workYear.replace(/\d\//, '');
|
}
|
if(item.workYear && item.workYear.indexOf('to') > -1){
|
item.workYear = item.workYear.replace('to', '-');
|
item.workYear += '年'
|
}
|
if(item.workYear && item.workYear.indexOf('less') > -1){
|
item.workYear = item.workYear.replace('less', '');
|
item.workYear += '年以下';
|
}
|
if(item.workYear && item.workYear.indexOf('more') > -1){
|
item.workYear = item.workYear.replace('more', '');
|
item.workYear += '年以上';
|
}
|
});
|
this.driverSum = sum;
|
for(let i=0; i<data.length; i++){
|
if(!data[i].workYear){
|
data.splice(i, 1);
|
i--
|
};
|
if(data[i] && data[i].workYear==="4年以下"){
|
data[i].num = Number(data[i].num) + Number(nulNum);
|
}
|
}
|
this.agePercentData = [...data]
|
} else {
|
this.agePercentData = data.map(i => {
|
this.driverSum += Number(i.value);
|
return {
|
num: i.value,
|
percent: Number(i.proportion * 100).toFixed(2),
|
workYear: i.name
|
|
}
|
})
|
}
|
});
|
|
}
|
|
|
|
},
|
activated() {
|
this.loadData();
|
this.workTimeLoad();
|
this.complaintLoad();
|
this.drivingAgeLoad();
|
|
},
|
}
|
</script>
|
<style lang="less">
|
.v-data-board-right {
|
width: 100%;
|
padding-top: 30px;
|
position: relative;
|
z-index: 10;
|
._drive-box {
|
display: flex;
|
align-items: center;
|
height: 15vh;
|
min-height: 130px;
|
|
|
}
|
._drive-detail-box {
|
color: #fff;
|
position: relative;
|
padding-left: 55px;
|
flex: 1;
|
._drive-num {
|
color: #F5BD37;
|
font-family: 'Digital';
|
font-size: 18px;
|
|
}
|
._drive-blue {
|
color: #1185E2
|
}
|
._drive-red {
|
color: #FF6F6A
|
}
|
img {
|
left: 0;
|
top: 2px;
|
width: 135px;
|
position: absolute;
|
}
|
|
}
|
._progress{
|
position: relative;
|
width: 154px;
|
height: 154px;
|
margin: 0 10px;
|
._progress-1, ._progress-2, ._progress-3, ._progress-4, ._drive-name{
|
color: #fff;
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%, -50%)
|
}
|
|
}
|
.pie3d-wrap {
|
margin: auto;
|
position: relative;
|
z-index: 100;
|
color: #fff;
|
display: flex;
|
align-items: center;
|
height: calc(11vh);
|
._echart-pie-box {
|
position: absolute;
|
top: -50px;
|
left: -25px;
|
}
|
.bg-content {
|
width: 130px;
|
height: 100px;
|
background-image: url("../../../assets/driverappraise/bg_3dpie.png");
|
background-repeat: no-repeat;
|
background-size: 130px 95px;
|
margin: auto;
|
display: flex;
|
font-size: 12px;
|
align-items: center;
|
padding-top: 20px;
|
flex-direction: column;
|
animation: scale 2s linear infinite;
|
}
|
}
|
@keyframes scale {
|
0% {
|
transform: scale(1);
|
}
|
25% {
|
transform: scale(1.03);
|
}
|
50% {
|
transform: scale(1.06);
|
}
|
75% {
|
transform: scale(1.03);
|
}
|
100% {
|
transform: scale(1);
|
}
|
}
|
|
}
|
</style>
|
