<!--路况评价-->
|
<template>
|
<div class="line-box">
|
<div class="flex container-ec ju-sb">
|
<div class="ec-size box-pie1">
|
<div class="title-box1 title-bg-image2">
|
<div class="animet"></div>
|
<div class="title-name">昨日路况分析</div>
|
</div>
|
<div class="flex1">
|
<dv-decoration-12 class="decoration-12" />
|
<gauge2 :id="id1" :option="value1" height="32vh" :colors="gaugeColors"></gauge2>
|
<div class="colorfff dictValue2">{{gaugeValue}} km/h</div>
|
<div class="dictValue1">{{ dictValue1 }}</div>
|
</div>
|
<div class="legend">
|
<div class="legend-item" v-for="(item, index) in gaugeColors">
|
<div class="color-block" :style="{'background-color': item}"></div>
|
<div class="legend-txt">{{index === 0 ? '5km/h及以下 非常拥堵' : (index === 1 ? '6-10km/h 拥堵' : (index === 2 ? '11-20km/h 基本畅通' : '21km/h及以上 畅通'))}}</div>
|
</div>
|
</div>
|
</div>
|
<div class="ec-size box-line2">
|
<div class="title-box1 title-bg-image2">
|
<div class="animet"></div>
|
<div class="title-name">公交路况变化趋势</div>
|
</div>
|
<div class="flex1">
|
<line6 :id="id2" :line6Xdata="line6Xdata" :line6Ydata="line6Ydata"></line6>
|
</div>
|
|
</div>
|
<div class="ec-size box-pie3" style="position: relative">
|
<div class="title-box1 title-bg-image2">
|
<div class="animet"></div>
|
<div class="title-name">线路拥堵情况占比</div>
|
<div class="flex align-c more" @click="toRoadCongrestionTable">
|
<span>More</span>
|
<img src="../../assets/newImg/icon_more.png" class="more-size" alt="">
|
</div>
|
</div>
|
|
<div class="flex1" style="margin-top: 0">
|
<div class="pie3d-center">
|
<div>线路总数</div>
|
<div>{{ lineTotal }}</div>
|
<div style="opacity: 0">占位</div>
|
</div>
|
<pie3d :id="id3" :pheight="height3" :pwidth="width3" :optionData="optionData"></pie3d>
|
<!-- <dv-active-ring-chart :config="lineCongestionConfig" style="width:28vh;height:30vh" /> -->
|
</div>
|
|
</div>
|
</div>
|
<div class="flex container-ec ju-sb mt20">
|
<div class="ec-size2 box-bar1" styl="position: relative">
|
<div class="title-box1 title-bg-image3">
|
<div class="animet"></div>
|
<div class="title-name">线路拥堵排名</div>
|
<div class="flex align-c more" @click="toRoadCongrestionTable">
|
<span>More</span>
|
<img src="../../assets/newImg/icon_more.png" class="more-size" alt="">
|
</div>
|
</div>
|
<div class="flex1 flex-col">
|
<rollList
|
v-if="lineJamRankList.length > 0"
|
:data="lineJamRankList"
|
height="32vh"
|
:column-height="42"
|
:wait-time="2000"
|
|
>
|
<template #default="{ row, index }">
|
<div class="flex ju-sb">
|
<div class="flex color-white ju-sb ls item-center">
|
<div :class="`ranking${index+1}`" class="ranking">{{index + 1}}</div>
|
<div>{{row.lineName}}</div>
|
</div>
|
<div class="barIndex">
|
<div :class="index==0?'el1': index==1?'el2':index==2?'el3':'el'" :style="{width: index * 7 + '%'}"></div>
|
<div class="wb-el"></div>
|
<div class="color-white ml10">{{row.avgSpeed}}km/h</div>
|
</div>
|
</div>
|
</template>
|
</rollList>
|
</div>
|
</div>
|
<div class="ec-size2 box-bar2 ml20">
|
<div class="title-box1 title-bg-image3">
|
<div class="animet"></div>
|
<div class="title-name">站点间拥堵排名</div>
|
<div class="flex align-c more" @click="toStaionCongrestionTable">
|
<span>More</span>
|
<img src="../../assets/newImg/icon_more.png" class="more-size" alt="">
|
</div>
|
</div>
|
|
<div class="flex1 flex-col">
|
<rollList
|
v-if="stationJamRankList.length > 0"
|
:data="stationJamRankList"
|
height="32vh"
|
:column-height="42"
|
:wait-time="2000"
|
|
>
|
<template #default="{ row, index }">
|
<div class="flex ju-sb color-white kl-item" >
|
<div :class="`ranking${index+1}`" class="ranking">{{index +1}}</div>
|
<div class="tx-l">{{row.leaveStationName}} - {{ row.arriveStationName }}</div>
|
<div style="color: #28D5B7">{{timestampToTime(row.statDate,'yy-mm-dd')}}</div>
|
</div>
|
</template>
|
</rollList>
|
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import gauge2 from '../../components/echart/gauge2'
|
import pie3d from '../../components/echart/pie3d'
|
import line6 from '../../components/echart/line6'
|
import roadTable from '.././road/roadCongestionTable.vue'
|
import rollList from '../../components/common/animation/rollList.vue'
|
|
export default {
|
name:'loadappraise',
|
components:{ pie3d, line6, gauge2, roadTable, rollList},
|
data(){
|
return{
|
gaugeColors: [[],[],[],[]],
|
invalid:'',
|
id1:'idr1',
|
id2:'idr2',
|
id3:'idr3',
|
height3:'33vh',
|
width3:'28vw',
|
showFlag:false,
|
value1: 0, // 昨日路况分析值
|
gaugeValue: 0,
|
line6Xdata: [],
|
line6Ydata: [],
|
optionData: [],
|
lineJamRankList: [],
|
stationJamRankList: [],
|
dictValue1: '',
|
lineTotal: 0,
|
lineCongestionConfig: {
|
data: [],
|
activeTimeGap: 3000
|
|
}
|
}
|
},
|
methods:{
|
checkItem(item){
|
this.invalid=item.name;
|
this.showFlag=false;
|
},
|
toRoadCongrestionTable(){
|
this.$router.push({ path: '/roadCongestionTable?prop=runningSpeed&order=ascending' })
|
},
|
toStaionCongrestionTable(){
|
this.$router.push({ path: '/stationCongestionTable?prop=runningSpeed&order=ascending' })
|
},
|
getRoadConditionAnalysis(){
|
this.$axios.get(this.$Interface.road.getRoadConditionAnalysis).then(res => {
|
const value_ = res.data.avgSpeedYesterday;
|
const list = res.data.list;
|
list.sort((a, b) => {
|
if(typeof a.dictValue === 'string') {
|
a.dictValue = a.dictValue.split('-')
|
a.dictValue[0] = Number(a.dictValue[0]);
|
a.dictValue[1] = Number(a.dictValue[1]);
|
}
|
if (typeof b.dictValue === 'string') {
|
b.dictValue = b.dictValue.split('-')
|
b.dictValue[0] = Number(b.dictValue[0]);
|
b.dictValue[1] = Number(b.dictValue[1]);
|
}
|
return b.dictValue[1] - a.dictValue[1]
|
})
|
let total = 0;
|
const temp = [];
|
if(value_ > list[0].dictValue[0]){
|
total = value_ + 3
|
}else {
|
total = list[0].dictValue[0] + 3
|
}
|
list.forEach((item, index) => {
|
if(value_ >= item.dictValue[0] && value_ <= item.dictValue[1]){
|
this.dictValue1 = item.dictLabel;
|
}
|
temp.unshift([
|
(index === 0 ? 1 : item.dictValue[1] / total), (index === 0 ? '#91cc75' : (index === 1 ? '#5470c6' : (index === 2 ? '#fac858' : '#ee6666')))
|
])
|
});
|
this.gaugeColors = temp;
|
this.gaugeValue = value_;
|
this.value1 = value_/total*100
|
})
|
},
|
getRoadConditionCurve(){
|
this.$axios.get(this.$Interface.road.getRoadConditionCurve).then(res => {
|
this.line6Xdata = res.data.map(item => item.updateTime);
|
this.line6Ydata = res.data.map(item => item.avgSpeed);
|
})
|
},
|
getLineJamScale(){
|
this.$axios.get(this.$Interface.road.getLineJamScale).then(res => {
|
let list = res.data.everyPercentList
|
list.sort((a, b) => {
|
if(typeof a.minAndMax === 'string') {
|
a.minAndMax = a.minAndMax.split('-')
|
a.minAndMax[0] = Number(a.minAndMax[0]);
|
a.minAndMax[1] = Number(a.minAndMax[1]);
|
}
|
if (typeof b.minAndMax === 'string') {
|
b.minAndMax = b.minAndMax.split('-')
|
b.minAndMax[0] = Number(b.minAndMax[0]);
|
b.minAndMax[1] = Number(b.minAndMax[1]);
|
}
|
return b.minAndMax[1] - a.minAndMax[1]
|
})
|
this.optionData = list;
|
this.optionData.forEach(function(item, index){
|
item.name = item.rangeName;
|
// todo 这里需要后端配合做下调整
|
item.value = Number(item.percent.split('%')[0] * res.data.lineTotal).toFixed(0);
|
switch (index){
|
case 3:
|
item.itemStyle = {color: '#ee6666'};
|
break;
|
case 2:
|
item.itemStyle = {color: '#fac858'};
|
break;
|
case 1:
|
item.itemStyle = {color: '#5470c6'};
|
break;
|
case 0:
|
item.itemStyle = {color: '#91cc75'};
|
break;
|
}
|
});
|
console.log(this.optionData, 'this.optionData');
|
|
this.lineCongestionConfig = {
|
... this.lineCongestionConfig,
|
data: [
|
{
|
name: '1',
|
value: 100
|
},
|
{
|
name: '2',
|
value: 100
|
}
|
]
|
}
|
console.log( this.lineCongestionConfig, 'this.optionData');
|
this.lineTotal = res.data.lineTotal;
|
})
|
},
|
|
getLineJamRank(){
|
this.$axios.get(this.$Interface.road.getLineJamRank).then(res => {
|
this.lineJamRankList = res.data;
|
})
|
},
|
|
getStationJamRank(){
|
this.$axios.get(this.$Interface.road.getStationJamRank).then(res => {
|
this.stationJamRankList = res.data;
|
})
|
}
|
|
|
},
|
mounted() {
|
this.getRoadConditionAnalysis(); // 获取昨日路况分析
|
this.getRoadConditionCurve(); // 获取公交路况变化趋势
|
this.getLineJamScale(); // 获取线路拥堵情况占比
|
this.getLineJamRank(); // 获取线路拥堵排名
|
this.getStationJamRank() // 获取站点拥堵排名
|
},
|
}
|
</script>
|
<style scoped lang="less">
|
@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);
|
}
|
}
|
.line-box{
|
width:96%;margin:20px auto;
|
.title-box {
|
max-width: 100%;
|
}
|
.decoration-12 {
|
position: absolute;
|
width: 10vw;
|
height: 10vw;
|
position: absolute;
|
left: 40%;
|
top: 50%;
|
transform: translate(-50%, -53%);
|
}
|
}
|
.ec-size{
|
width:30vw;
|
height:36vh;
|
position: relative;
|
//border: 1px solid rgba(20,131,242, .3);
|
//padding: 10px 20px;
|
}
|
.ec-size2{
|
width:45vw;
|
height:36vh;
|
//border: 1px solid rgba(20,131,242, .3);
|
//padding: 10px 20px;
|
width: 914px;
|
}
|
._lh-34 {
|
line-height: 34px;
|
}
|
.tx-l{text-align: left;}
|
|
.flex-y-line{display: flex;justify-content: space-between;flex-direction: column;}
|
.flex1{
|
height:33vh;
|
width:100%;
|
margin-top:1vh;
|
position: relative;
|
}
|
.ec-size2 .flex1{
|
height: 33vh;
|
}
|
.barIndex {
|
height: 34px;
|
}
|
.ls{
|
width:15%
|
}
|
.kl-item{
|
background:rgba(44,125,206,0.1);
|
padding: 5px 10px!important;
|
line-height: 25px;
|
margin-bottom: 5px;
|
}
|
.defalut90{height:9vh;}
|
.pie3d-center {
|
position: absolute;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
left: 21.8%;
|
top: 38%;
|
color: #fff;
|
width: 15vw;
|
height: 20vh;
|
text-align: center;
|
background-image: url("../../assets/driverappraise/bg_3dpie.png");
|
background-repeat: no-repeat;
|
background-size: 100% 90%;
|
background-position: center;
|
animation: scale 2s linear infinite;
|
}
|
.dictValue1 {color: #fff;opacity: .8;position: absolute; top: 86%;left: 31%;font-size: 18px;width: 100px;text-align: center;}
|
.dictValue2 {color: #fff;opacity: .9;position: absolute; top: 77%;left: 31%;font-size: 26px;width: 100px;text-align: center;}
|
.flex-col{
|
justify-content: space-between;
|
}
|
.ls{
|
width: 12%;
|
}
|
.legend{
|
color: #ffffff;
|
display: flex;
|
justify-content: space-between;
|
position: absolute;
|
right: 0;
|
top: 25%;
|
flex-direction: column;
|
height: 60%;
|
margin-right: 20px;
|
.legend-item{
|
display: flex;
|
align-items: center;
|
font-size: 12px;
|
}
|
.color-block{
|
width: 15px;
|
height: 4px;
|
margin-right: 5px;
|
}
|
}
|
/* .pie-3d {background-image: url("../../assets/driverappraise/bg_3dpie.png");} */
|
</style>
|
