<template>
|
<div class="v-center">
|
<div class="left-box" v-show="showFlag">
|
<div class="small">
|
<div class="title-h">
|
<v-title-home :content="title.t1" :showDateFlag="false" :more-show="false"></v-title-home>
|
<div>
|
<rightTop ref="rightTop"></rightTop>
|
</div>
|
</div>
|
<div class="title-bg"></div>
|
|
<div class="title-h1 mt10">
|
<v-title-home :content="title.t2" :link="title.link2" :more-show="true" @choseDate="choseDate2"></v-title-home>
|
|
<div class="flex color-white ju-c">
|
<div>单位：{{ operateUnit }}</div>
|
<div class="flex ml20">
|
<div class="btn-ck" :class="operateIdx == 0 ? 'active' : ''" @click="checkBtn(0, '营运班次')">营运班次</div>
|
<div class="btn-ck" :class="operateIdx == 1 ? 'active' : ''" @click="checkBtn(1, '营运速度')">营运速度</div>
|
<div class="btn-ck" :class="operateIdx == 2 ? 'active' : ''" @click="checkBtn(2, '营运里程')">营运里程</div>
|
</div>
|
</div>
|
<div ref="lines">
|
<Lines :height="lineH" :option="lineOption2" :width="bar5Width" id="line2"></Lines>
|
</div>
|
<div class="title-bg"></div>
|
</div>
|
<div class="title-h2 mt10">
|
<v-title-home :content="title.t3" :link="title.link3" :more-show="true" @choseDate="choseDate3"></v-title-home>
|
<div class="flex">
|
<div class="img-h" ref="bar5">
|
<pie1 :height="bar5Height" :option="optionArr" :width="bar5Width"></pie1>
|
</div>
|
<div class="ml30">
|
<div class="flex item-sa" v-for="(item,index) in opdata" :key="index">
|
<div class="ts-size" :class="'py_'+ index"></div>
|
<div class="ml10 tlse">{{item.name}}</div>
|
<div class="digi col-py fz18 ml40">{{getGL(item.sun)}}</div>
|
<div class="ml35"><span class="digi col-py fz18 mr10">{{item.sun}}</span>起</div>
|
</div>
|
</div>
|
</div>
|
<div class="title-bg"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import rightTop from "./../components/rightTop"
|
import Lines from "./../components/echart/line"
|
import Bar5 from "./../components/echart/bar5"
|
import pie1 from "./../components/echart/pie1"
|
import moment from 'moment';
|
export default {
|
name: 'leftBox',
|
data() {
|
return {
|
title:{
|
t1:'基础资源',
|
t2:'运营数据分析',
|
t3:'服务质量',
|
link1:'operateC',
|
link2:'customer',
|
link3:'customer',
|
},
|
opdata:[],
|
operateUnit: '班',
|
operateIdx: 0,
|
totalNum: 0,
|
showFlag: true,
|
id: 'charts',
|
companyId: '',
|
timeLogo3: 'day',
|
timeLogo2: 'day',
|
bar5Width: '100%',
|
lineH: '19vh',
|
bar5Height: '19vh',
|
pwidth: '400px',
|
optionDate: {},
|
options: {
|
legend: ['市民咨询', '有责投诉', '乘客寻物', '有责事故'],
|
xData: [],
|
yData: {
|
accidentNum: [],
|
complainNum: [],
|
counselNum: [],
|
findNum: [],
|
time: [],
|
}
|
},
|
optionArr: [],
|
lineOption2: {
|
title: '',
|
xData: [],
|
legendData: ['营运班次', '营运速度', '营运里程'],
|
unit: '',
|
yData: [],
|
},
|
}
|
},
|
methods: {
|
init() {
|
|
if (this.$store.state.parentCompany) {
|
this.companyId = localStorage.getItem('companyId') || '';
|
} else {
|
this.companyId = this.$store.state.companyId
|
}
|
this.getData2();
|
this.getData3();
|
this.$refs.rightTop.init();
|
},
|
getGL(btn){
|
if(this.totalNum==0 || btn==0){
|
return '0%'
|
}else{
|
let str=Number(btn/this.totalNum*100).toFixed(2);
|
str+="%";
|
return str;
|
}
|
},
|
choseDate2(num){
|
let a=['day','week','month']
|
this.timeLogo2=a[num];
|
this.getData2();
|
},
|
choseDate3(index){
|
let a=['day','week','month']
|
this.timeLogo3=a[index];
|
this.getData3();
|
},
|
checkBtn(index, name) {
|
this.lineOption2.yData=[];
|
this.lineOption2.yData.push({data:this.dataArray[index]})
|
this.lineOption2.legendData = [name]
|
this.operateIdx = index;
|
switch (index) {
|
case 0:
|
this.operateUnit = '班'
|
break;
|
case 1:
|
this.operateUnit = 'km/h'
|
break;
|
case 2:
|
this.operateUnit = 'km'
|
break;
|
}
|
},
|
goPath(path, val) {
|
this.$router.push(path)
|
},
|
getData3(){
|
this.$axios.get(`${this.$Interface.securityService}?companyId=${this.companyId}&timeLego=${this.timeLogo3}`).then(res => {
|
this.optionArr=[res.data.counselNum, res.data.advice, res.data.complainNum, res.data.findNum, res.data.praise, res.data.qita,];
|
this.totalNum=res.data.zong;
|
this.opdata=[
|
{name:'市民咨询',sun: res.data.counselNum},
|
{name:'市民建议',sun: res.data.advice},
|
{name:'市民投诉',sun: res.data.complainNum},
|
{name:'失物寻找',sun: res.data.findNum},
|
{name:'感谢',sun: res.data.praise},
|
{name:'其他',sun: res.data.qita},
|
]
|
});
|
},
|
|
getData2(){
|
this.$axios.get(`${this.$Interface.operationalDataAnalysis}?companyId=${this.companyId}&timeLogo=${this.timeLogo2}`).then(_res => {
|
let arr1 = [];
|
let arr2 = [];
|
let arr3 = [];
|
this.dataArray = [];
|
this.lineOption2.yData = [];
|
this.lineOption2.xData = [];
|
if (_res.data && _res.data.length > 0) {
|
_res.data.map(item => {
|
if(this.timeLogo2 == 'day') {
|
this.lineOption2.xData.push(item.time);
|
} else {
|
this.lineOption2.xData.push(moment(item.time).format('MM-DD'));
|
}
|
arr1.push(item.speed);
|
arr2.push(item.shift);
|
arr3.push(this.decimal(item.mileage,2));
|
});
|
this.dataArray=[arr2,arr1,arr3];
|
this.lineOption2.yData = [{data: arr2}];
|
}
|
})
|
},
|
},
|
computed: {},
|
activated() {
|
this.init();
|
},
|
components: {
|
rightTop,
|
Lines,
|
Bar5,
|
pie1,
|
}
|
}
|
</script>
|
<style scoped lang="less">
|
.col-py{color: #6BC2FC;}
|
.py_0{background:rgba(20,131,242,1)}
|
.py_1{background:#02FED3}
|
.py_2{background:#F5BD37}
|
.py_3{background:#6BC2FC}
|
.py_4{background:#C2FC87}
|
.py_5{background:#fff}
|
.item-sa{height:26px;align-items: center;color:#fff;font-size:12px;}
|
.ts-size{width:9px;height:9px;}
|
.img-car{width:133px;height:135px;}
|
.img-h{width:40%;height:100%;}
|
.tlse{width:60px;}
|
.left-car-bg{width:112px;height:112px;background: url("../assets/newImg/bg2@2x.png") no-repeat center/cover;}
|
.right-car-bg{width:112px;height:112px;background: url("../assets/newImg/bg4@2x.png") no-repeat center/cover;}
|
.num-fl{font-family: "Digital";font-size:24px;color:#03F1EC;text-align: center;}
|
.btn-ck{width:112px;height:20px;background:url("../assets/newImg/check_echarts.png") no-repeat center/cover;text-align: center;line-height: 20px;font-size:12px;opacity: 0.8}
|
.btn-ck.active{
|
opacity: 1;
|
background-image: url("../assets/newImg/check_echarts_active.png");
|
}
|
.borderCenter {
|
position: relative;
|
margin: auto;
|
width: 480px;
|
|
&::before {
|
content: "";
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
border: 2px solid gold;
|
border-radius: 10px;
|
transition: all .5s;
|
animation: clippath 3s infinite linear;
|
}
|
}
|
|
@keyframes clippath {
|
0%,
|
100% {
|
clip-path: inset(0 0 95% 0);
|
}
|
|
25% {
|
clip-path: inset(0 95% 0 0);
|
}
|
50% {
|
clip-path: inset(95% 0 0 0);
|
}
|
75% {
|
clip-path: inset(0 0 0 95%);
|
}
|
}
|
|
@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);
|
}
|
}
|
|
.bg::before {
|
background: rgba(255, 215, 0, .5);
|
}
|
.t1-box{width:380px;justify-content: space-evenly;margin:15px auto;}
|
.data-box-time {
|
opacity: 0;
|
}
|
.time-right {
|
right: 20px;
|
}
|
.title-h {
|
height: 26vh;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
}
|
.title-h1 {
|
height: 29vh;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
}
|
.title-h2 {
|
height: 28vh;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
}
|
.collapse-btn {
|
position: absolute;
|
z-index: 9999;
|
cursor: pointer;
|
}
|
.collapse-btn:hover {
|
background: transparent;
|
}
|
.el-icon-d-arrow-left, .el-icon-d-arrow-right {
|
font-size: 20px;
|
color: #d9ebfe;
|
}
|
.btn-flag {
|
color: red;
|
background: #999;
|
border-radius: 10px;
|
height: 40px;
|
margin-top: 100px;
|
width: 50px;
|
text-align: center;
|
line-height: 40px;
|
}
|
.left-box {
|
width: 100%;
|
background: rgba(3, 11, 22, 0.5);
|
height: calc(100% - 120px);
|
position: relative;
|
top: 60px;
|
z-index: 1;
|
}
|
.small {
|
width: calc(100% - 38px);
|
margin-left: 18px;
|
// height: 100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-around;
|
}
|
.flex {
|
display: flex
|
}
|
.ju-c {
|
justify-content: center
|
}
|
.ju-sb {
|
justify-content: space-between;
|
}
|
.ju-sa {
|
justify-content: space-around;
|
}
|
.flex-y {
|
display: flex;
|
flex-direction: column;
|
justify-content: space-evenly
|
}
|
.al-end {
|
align-items: center;
|
flex: 1;
|
}
|
.max-h {
|
height: 100%;
|
}
|
.center {
|
height: 90%;
|
width: 100%;
|
.items-box {
|
height: 25%;
|
}
|
}
|
.box {
|
width: 100%;
|
height: 100%;
|
}
|
.al-cen {
|
align-items: center;
|
}
|
.bg-test {
|
width: 100%;
|
background: url("./../assets/png/test1.jpg") no-repeat center/cover;
|
}
|
.item1 {
|
width: 30%;
|
background: url("./../assets/png/test2.jpg") no-repeat center/cover;
|
}
|
.img-size {
|
width: 30px;
|
}
|
.lv-color {
|
color: green;
|
}
|
.big-fz {
|
font-size: 25px;
|
}
|
</style>
|
