<template>
|
<div class="v-operate-center">
|
<div class="g-picker flex">
|
<el-date-picker
|
v-model="date"
|
value-format="yyyy-MM-dd"
|
@change="handleChange"
|
:clearable="false"
|
type="date">
|
</el-date-picker>
|
<div>
|
<el-select
|
v-model="companyId"
|
class="ml20"
|
popper-class="safety-report-filter"
|
@change="handleChange"
|
>
|
<el-option
|
v-for="item in companyList"
|
:key="item.companyNum"
|
:label="item.companyName"
|
:value="item.companyNum"
|
></el-option>
|
</el-select>
|
</div>
|
|
</div>
|
<div class="c-top-box relative">
|
<v-title-home
|
class="mt5"
|
content="指标统计"
|
:showDateFlag="false"
|
:moreShow="false"
|
width="calc(73.8vw - 40px)"
|
size="large"
|
>
|
</v-title-home>
|
<div class="mt40">
|
<div class="_line-box ml20 _border">
|
<div v-for="index in 6" :key="`${index}_start2`" :class="`_start-${index}`"></div>
|
<div class="_start-1"></div>
|
<div class="_start-2"></div>
|
<div class="flex-1" v-for="(item, index) in list" :key="index">
|
<div class="_line-main" v-if="index%2==0">
|
<div class="_line" v-if="index != (list.length - 1)"></div>
|
<div class="__name-bg">
|
<div>{{item.name}}</div>
|
<div class="__unit ml5">/ {{item.unit}}</div>
|
</div>
|
<div class="__num">{{operationOverview[item.type] || '0'}}</div>
|
<img :src="require(`../../assets/operateImg/${item.icon}.png`)">
|
</div>
|
<div class="_line-main-1" v-if="index%2!=0">
|
<div class="_line-1" v-if="index != (list.length - 1)"></div>
|
<img :src="require(`../../assets/operateImg/${item.icon}.png`)">
|
<div class="__name-bg mt30">
|
<div>{{item.name}}</div>
|
<div class="__unit ml5">/ {{item.unit}}</div>
|
</div>
|
<div class="__num">{{operationOverview[item.type] || '0'}}{{item.type1 ? `/${operationOverview[item.type1] || '0'}` : ''}}</div>
|
</div>
|
</div>
|
</div>
|
<div class="_line-box ml20 mt35">
|
<div v-for="index in 6" :key="`${index}_start1`" :class="`_start-${index}`"></div>
|
<div class="flex-1" v-for="(item, index) in list1" :key="index">
|
<div class="_line-main" v-if="index%2==0">
|
<div class="_line" v-if="index != (list1.length - 1)"></div>
|
<div class="__name-bg">
|
<div>{{item.name}}</div>
|
<div class="__unit ml5">/ {{item.unit}}</div>
|
</div>
|
<div class="__num">{{operationOverview[item.type] || '0'}}</div>
|
<img :src="require(`../../assets/operateImg/${item.icon}.png`)">
|
</div>
|
<div class="_line-main-1" v-if="index%2!=0">
|
<div class="_line-1" v-if="index != (list1.length - 1)"></div>
|
<img :src="require(`../../assets/operateImg/${item.icon}.png`)">
|
<div class="__name-bg mt30">
|
<div>{{item.name}}</div>
|
<div class="__unit ml5">/ {{item.unit}}</div>
|
</div>
|
<div class="__num">{{operationOverview[item.type] || '0'}}</div>
|
</div>
|
</div>
|
<div class="_drive-box">
|
<div class="__box t-center">
|
<div class="flex">
|
<div class="colorfff ml32 mt3 mr5">出车率</div>
|
<div class="__unit mt3">/ %</div>
|
</div>
|
<div class="__num">{{decimal(operationOverview.useCar, 2)}}</div>
|
</div>
|
<div class="__box t-center mt10">
|
<div class="flex">
|
<div class="colorfff ml32 mt3 mr5">大间隔次数</div>
|
<div class="__unit mt3">/ 次</div>
|
</div>
|
<div class="__num">{{operationOverview.numberLargeIntervals}}</div>
|
</div>
|
<div class="__box t-center mt10">
|
<div class="flex">
|
<div class="colorfff ml32 mt3">驾驶员平均工作时长</div>
|
<div class="__unit mt3">/h</div>
|
</div>
|
<div class="__num">{{decimal(operationOverview.sumWorkHours, 2)}}</div>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
<div class="flex">
|
<div>
|
<v-title-home
|
class="mt10"
|
content="成本核收"
|
:showDateFlag="false"
|
:moreShow="false"
|
width="26.2vw"
|
>
|
</v-title-home>
|
<div class="flex ju-c align-c mt20">
|
<div class="_cost-box">
|
<img src="../../assets/operateImg/bg3.png"/>
|
<div class="__num">{{costCheck.thousandKilometerIncome || 0}}</div>
|
<div class="__name-bg">
|
<div>千公里收入（元）</div>
|
</div>
|
</div>
|
<div class="_cost-box ml15 mr15">
|
<img src="../../assets/operateImg/bg.png"/>
|
<div class="__num">{{costCheck.thousandKilometerPerson || 0}}</div>
|
<div class="__name-bg">
|
<div>千公里人次（人次）</div>
|
</div>
|
</div>
|
<div class="_cost-box">
|
<img src="../../assets/operateImg/bg3.png"/>
|
<div class="__num">{{costCheck.thousandKilometerAccidentCost || 0}}</div>
|
<div class="__name-bg">
|
<div>千公里事故费用（元）</div>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
<div class="cen-boxs relative">
|
<v-title
|
content="重点指标变化趋势"
|
:link="`/branchOfficeResource?sence=1&prop=sumVolumePeople&order=descending`"
|
class="mt20"
|
:moreShow="false"
|
>
|
<div>
|
<div class="flex">
|
<div class="btn-ck" :class="timeIndex=='week' ? 'active':''" @click="setDw('week')">
|
周
|
</div>
|
<div class="btn-ck" :class="timeIndex=='month' ? 'active':''" @click="setDw('month')">
|
月
|
</div>
|
</div>
|
</div>
|
</v-title>
|
<v-border-decorate class="mt10">
|
<div>
|
<div class="right-small-box">
|
<operateline4 :height="heightLine4" :option="option_lc_zd"></operateline4>
|
</div>
|
</div>
|
</v-border-decorate>
|
</div>
|
|
</div>
|
|
|
</div>
|
</template>
|
<script>
|
import moment from "moment";
|
import companyJson from '../../assets/json/fgsmarkers';
|
import operateline4 from '@/components/echart/operateline4';
|
|
export default {
|
name:'',
|
components:{ operateline4 },
|
data(){
|
return{
|
invalId: '',
|
invalName: '总公司',
|
companyData: [],
|
companyId: "",
|
showFlag: false,
|
heightLine4: "18vh",
|
timeIndex: 'week',
|
companyList: [],
|
date: moment().format("yyyy-MM-DD"),
|
// middle: {
|
// complainYesterday: 0, //昨日投诉数
|
// completionRate: 0, //当日班次完成率
|
// onTimeRate: 0, //班次发车准点率
|
// mileageAccumulated: 0, //改成当日形式里程
|
// yesterdayOnTimeRateL: 0, //昨日末班准点率
|
// },
|
operationOverview: {
|
todayRunningVehicle: '',
|
mileageAccumulated: '',
|
|
},
|
costCheck: {}, // 成本核收
|
list: [
|
{
|
type: 'todayRunningVehicle',
|
icon: 'icon_index_1',
|
name: '营运车辆',
|
unit: '辆'
|
},
|
{
|
type: 'mileageAccumulated',
|
type1: 'totalMileageBefore',
|
icon: 'icon_index_2',
|
name: '运营里程/累计里程',
|
unit: 'km'
|
},
|
{
|
type: 'baoChe',
|
icon: 'icon_index_2',
|
name: '包车班次',
|
unit: '班'
|
},
|
{
|
type: 'plannedShift',
|
icon: 'icon_index_3',
|
name: '计划班次',
|
unit: '班'
|
},
|
{
|
type: 'operateShift',
|
icon: 'icon_index_3',
|
name: '实际班次',
|
unit: '班'
|
},
|
{
|
type: 'mileageByCar',
|
icon: 'icon_index_2',
|
name: '平均车日里程',
|
unit: 'km'
|
},
|
{
|
type: 'mileageByLine',
|
icon: 'icon_index_2',
|
name: '平均线路里程',
|
unit: 'km'
|
}
|
|
],
|
list1: [
|
{
|
type: 'completionRate',
|
icon: 'icon_index_4',
|
name: '班次完成率',
|
unit: '%'
|
},
|
{
|
type: 'onTimeRate',
|
icon: 'icon_index_4',
|
name: '发车准点率',
|
unit: '%'
|
},
|
{
|
type: 'onTimeRateFL',
|
icon: 'icon_index_4',
|
name: '首末班准点率',
|
unit: '%'
|
},
|
{
|
type: 'avgSpeed',
|
icon: 'icon_index_1',
|
name: '平均车速',
|
unit: 'km/h'
|
},
|
{
|
type: 'rateStr',
|
icon: 'icon_index_1',
|
name: '人车比例',
|
unit: ''
|
},
|
{
|
type: 'complainToday',
|
icon: 'icon_index_5',
|
name: '投诉总数',
|
unit: '次'
|
}
|
|
],
|
indicatorCompletion: {//考核指标
|
powerConsumption: 0, //百公里电耗
|
complainYesterday: 0, //昨日投诉数
|
cumulativePassengerFlow: 0, //客流总量
|
onTimeRate: 0, //班次发车准点率
|
onTimeRateFL: 0, //首末班准点率
|
todayRunningVehicle: 0, //今日运行车辆数-总/分
|
yesterdayCompletionRate: 0, //昨日班次完成率
|
yesterdayOperateShift: 0, //昨日营运班次
|
},
|
option_lc_zd: {
|
title:['首末班准点率','班次完成率','发车准点率'],
|
xData: [],
|
yData: []
|
},
|
}
|
},
|
watch:{
|
|
},
|
created() {
|
|
},
|
methods:{
|
dataLoad(){
|
this.$axios.get(this.$Interface.center.operationOverview, {
|
params: {
|
companyId: this.companyId,
|
statDate: this.date
|
}
|
|
}).then(res => {
|
this.operationOverview = res.data || {};
|
this.isLoad = true
|
});
|
// this.$axios.get(this.$Interface.center.middle).then(res => {
|
// this.middle = res.data;
|
// });
|
|
},
|
setDw(index) {
|
if (index === this.timeIndex) return;
|
this.timeIndex = index;
|
this.getChange();
|
},
|
getCompanyList() {
|
this.$axios
|
.get(this.$Interface.companyList, {
|
params: {},
|
})
|
.then((res) => {
|
this.companyList = res.data;
|
this.companyList.unshift({
|
companyNum: "",
|
companyName: "全部",
|
});
|
});
|
},
|
handleChange() {
|
this.dataLoad();
|
this.getChange();
|
this.getCostCheck();
|
|
},
|
changeCompanyList() {
|
let companyId = '';
|
if (this.$store.state.parentCompany) {
|
companyId = this.invalId || localStorage.getItem('companyId') || '';
|
} else {
|
companyId = this.$store.state.companyId
|
}
|
|
this.$axios.get(`${this.$Interface.center.indicatorCompletion}?companyId=${companyId}`).then(res => {
|
this.indicatorCompletion = res.data;
|
})
|
},
|
getCostCheck() {
|
this.$axios.get(`${this.$Interface.center.costCheck}`, {
|
params: {
|
statDate: this.date,
|
companyId: this.companyId
|
}
|
}).then(res => {
|
this.costCheck = res.data || {};
|
})
|
|
},
|
getChange() {
|
this.$axios.get(`${this.$Interface.center.indicatorsChange}`, {
|
params: { companyId: this.companyId, timeLogo: this.timeIndex},
|
}).then(res => {
|
this.option_lc_zd.xData = [];
|
this.option_lc_zd.yData = [];
|
let arr1 = [];
|
let arr2 = [];
|
let arr3 = [];
|
if (res.data.length > 0) {
|
res.data.map(item => {
|
this.option_lc_zd.xData.push(this.timeStr(new Date(item.dateStr).getTime()));
|
arr1.push(item.onTimeRateFL);
|
arr2.push(item.completionRate);
|
arr3.push(item.onTimeRate);
|
});
|
|
this.option_lc_zd.yData = [arr1, arr2, arr3];
|
}
|
})
|
},
|
checkItem(item) {
|
this.invalId = item.companyId;
|
this.invalName = item.companyName;
|
this.showFlag = false;
|
this.changeCompanyList();
|
},
|
},
|
activated() {
|
this.companyData = [];
|
let str = JSON.stringify(companyJson.datas);
|
this.companyData = JSON.parse(str);
|
this.companyData.unshift({companyId: '', companyName: '总公司'});
|
this.changeCompanyList();
|
this.getChange();
|
this.dataLoad();
|
this.getCompanyList();
|
this.getCostCheck();
|
},
|
}
|
</script>
|
<style lang="less">
|
.col-ye{color:#FFD982;}
|
.v-operate-center{
|
._start-0, ._start-1, ._start-2, ._start-3, ._start-4, ._start-5{
|
width: 80px;
|
height: 3px;
|
opacity: 0.48;
|
position: absolute;
|
border-radius: 3px;
|
left: 40px;
|
bottom: 40px;
|
background: linear-gradient(226deg, #00effd 0%, rgba(0,252,255,0.00));
|
transform: rotate(-30deg);
|
animation: star-fall 10s infinite linear;
|
}
|
._start-1 {
|
animation-delay: 2s;
|
|
}
|
._start-2 {
|
animation-delay: 4s;
|
|
}
|
._start-3 {
|
animation-delay: 6s;
|
|
}
|
._start-4 {
|
animation-delay: 8s;
|
|
}
|
._start-5 {
|
animation-delay: 10s;
|
}
|
@keyframes star-fall {
|
0% {
|
left: 40px;
|
bottom: 40px;
|
opacity: 1;
|
}
|
10% {
|
left: 13%;
|
bottom: 140px;
|
}
|
12% {
|
opacity: 0;
|
transform: rotate(-30deg);
|
}
|
14% {
|
opacity: 0;
|
bottom: 150px;
|
transform: rotate(30deg);
|
}
|
15% {
|
opacity: 1;
|
}
|
25% {
|
left: 27%;
|
bottom: 70px;
|
transform: rotate(30deg);
|
}
|
27% {
|
opacity: 0;
|
transform: rotate(30deg);
|
}
|
29% {
|
opacity: 0;
|
bottom: 65px;
|
transform: rotate(-30deg);
|
}
|
30% {
|
opacity: 1;
|
}
|
40% {
|
left: 43%;
|
bottom: 140px;
|
transform: rotate(-30deg);
|
}
|
42% {
|
opacity: 0;
|
transform: rotate(-30deg);
|
}
|
44% {
|
opacity: 0;
|
bottom: 140px;
|
transform: rotate(30deg);
|
}
|
45% {
|
opacity: 1;
|
}
|
55% {
|
left: 56%;
|
bottom: 60px;
|
transform: rotate(30deg);
|
}
|
57% {
|
opacity: 0;
|
transform: rotate(30deg);
|
}
|
59% {
|
opacity: 0;
|
bottom: 60px;
|
transform: rotate(-30deg);
|
}
|
60% {
|
opacity: 1;
|
}
|
70% {
|
left: 72%;
|
bottom: 140px;
|
transform: rotate(-30deg);
|
}
|
72% {
|
opacity: 0;
|
bottom: 140px;
|
|
}
|
100% {
|
opacity: 0;
|
|
}
|
// 74% {
|
// opacity: 0;
|
// left: 74%;
|
// bottom: 160px;
|
// transform: rotate(30deg);
|
// }
|
// 75% {
|
// opacity: 1;
|
// }
|
// 85% {
|
// left: 88%;
|
// bottom: 50px;
|
// transform: rotate(30deg);
|
// }
|
// 86% {
|
// opacity: 0;
|
|
// }
|
// 100% {
|
// opacity: 0;
|
// }
|
}
|
.__name-bg {
|
width: 150px;
|
height: 28px;
|
background: linear-gradient(92deg,rgba(1,175,251,0.00) 2%, rgba(1,175,251,0.23) 46%, rgba(1,175,251,0.00) 98%);
|
border-top: 1px solid;
|
border-bottom: 1px solid;
|
text-align: center;
|
color: #fff;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
border-image: linear-gradient(298deg, rgba(1,175,251,0.00), rgba(1,175,251,1) 42%, rgba(1,175,251,0.00) 82%) 1 1;
|
|
}
|
._cost-box {
|
position: relative;
|
text-align: center;
|
.__num {
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-52%, -100%);
|
font-size: 26px;
|
}
|
|
|
}
|
._border {
|
border-bottom: 2px dashed rgba(66,245,255,0.2);
|
|
}
|
.__box-1 {
|
background: url("../../assets/operateImg/bg_gongzuochichang.png")no-repeat;
|
}
|
._drive-box {
|
position: relative;
|
top: -20px;
|
}
|
.__num{
|
width: 150px;
|
font-family: 'Digital';
|
font-size: 24px;
|
color: #00E7FF;
|
text-align: center;
|
}
|
._line-box {
|
display: flex;
|
justify-content: center;
|
position: relative;
|
height: 200px;
|
._line, ._line-1 {
|
width: 90%;
|
height: 26px;
|
opacity: 0.32;
|
transform: rotate(-30deg);
|
background: linear-gradient(92deg,rgba(1,175,251,0.00) 2%, rgba(1,175,251,1) 46%, rgba(1,175,251,0.00) 98%);
|
}
|
._line-1 {
|
transform: rotate(30deg);
|
}
|
|
.__unit {
|
color: #2FEFFF
|
}
|
|
._line-main, ._line-main-1 {
|
flex: 1;
|
position: relative;
|
._line {
|
position: absolute;
|
left: 90px;
|
top: 80px;
|
}
|
}
|
._line-main-1 {
|
position: relative;
|
top: -20px;
|
z-index: 100;
|
._line-1 {
|
position: absolute;
|
left: 90px;
|
top: 100px;
|
}
|
|
}
|
|
}
|
.__box, .__box-1 {
|
background: url("../../assets/operateImg/bg_chuchelv.png")no-repeat;
|
width: 202px;
|
height: 70px;
|
.__num {
|
width: 202px;
|
}
|
|
}
|
|
// padding-right: 40px;
|
.el-select .el-input .el-select__caret {
|
display: none
|
}
|
.c-top-box{
|
.top-title{
|
width:692px;height:102px;background:url("../../assets/operateImg/bg_keliuzongliang.png")no-repeat; margin:0 auto;line-height:102px;
|
|
.w80{width:80%;margin:0 auto;}
|
}
|
.box-ces{
|
width:836px;
|
height:420px;
|
margin:0 auto;
|
z-index:2;
|
.t1{margin-left:70px;}
|
.t2{margin-left:132px;}
|
.te-cen2{width:160px;height:60px;color:#fff;}
|
}
|
}
|
}
|
.tb1{width:132px;height:145px;line-height: 145px;}
|
.tb3{width:97px;height:108px;line-height: 108px}
|
.tb2{width:194px;height:215px;line-height: 215px;}
|
.tb4{width:162px;height:181px;line-height:181px;}
|
.fo2{width:194px}
|
.fo3{width:120px}
|
.fo4{width:162px}
|
.fo1{width:132px}
|
.mo1{margin-top:132px;}
|
.bg-yuan{
|
background:url("../../assets/operateImg/circle4.png") no-repeat center/cover;
|
}
|
.btn-ck{
|
width:30px;
|
height:20px;
|
color: #fff;
|
text-align: right;
|
line-height: 20px;
|
font-size:12px;
|
}
|
.btn-ck.active{
|
color: #2FEFFF;
|
}
|
.col-las{color:#09E8FC}
|
.cen-boxs{width:836px;margin:0 auto;}
|
.big-bg{width:915px;height:556px;z-index: 0;background:url("../../assets/operateImg/bg-tenss.png")no-repeat center/cover;top:110px;left:0;position:absolute}
|
</style>
|
