<template>
|
<div class="chartListBox" :childData="childData">
|
<div class="aside-title">{{ childData.title }}</div>
|
<div class="echartBox">
|
<table class="chartTable">
|
<tr>
|
<th></th>
|
<th>
|
线路
|
</th>
|
<th>
|
类型
|
</th>
|
|
<th>
|
操作
|
</th>
|
</tr>
|
<tr>
|
<td class="chartTd" colspan="4">
|
<div class=" elDriver">
|
</div>
|
</td>
|
</tr>
|
<tr>
|
<td>{{ roadItem.address }}</td>
|
<td>{{ roadItem.line }}</td>
|
<td style="color:#f56c6c">{{ roadItem.level }}</td>
|
<td style="color:#409eff">
|
<el-button v-show="flagData != roadItem.address" class="elButton" type="primary" plain
|
size="mini" @click="setChangeItem()">详情</el-button>
|
<el-button v-show="flagData == roadItem.address" class="elButton" type="danger" plain
|
size="mini" @click="setCannelItem()">重置</el-button>
|
</td>
|
</tr>
|
</table>
|
<div class="chartEchart">
|
<div :id="chartId" class="myChart"> </div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import * as echarts from 'echarts';
|
import mapWeather from './mapWeather';
|
|
export default {
|
props: {
|
childData: {
|
type: Object,
|
default: null
|
}
|
},
|
watch: {
|
childData(newValue, oldValue) {
|
if (newValue) {
|
this.chartId = newValue.id;
|
this.title = newValue.title;
|
setTimeout(() => {
|
this.setEchartChange(newValue.val[0])
|
|
}, 200);
|
}
|
}
|
},
|
data() {
|
return {
|
chartId: "",
|
title: "",
|
flagData: null,
|
roadItem: {},
|
}
|
},
|
created() {
|
window.addEventListener('POIDetailDataChange', this.handlePOIDetailDataChange)
|
},
|
|
methods: {
|
setCannelItem() {
|
this.flagData = null;
|
mapWeather.closeRegionWeather()
|
},
|
handlePOIDetailDataChange() {
|
if (this.flagData == window.regionWeather) return
|
this.flagData = window.regionWeather;
|
},
|
setChangeItem() {
|
var res = this.roadItem;
|
window.regionWeather = res.address;
|
var event = new Event('POIDetailDataChange');
|
window.dispatchEvent(event);
|
mapWeather.setRegionWeatherType(res);
|
},
|
|
setEchartChange(res) {
|
this.roadItem = res
|
if (!this.roadItem.data) return;
|
const data = this.roadItem.data;
|
const id = document.getElementById(this.chartId)
|
var std = [];
|
for (var i = 0; i < data.length; i++) {
|
var h = i + 1
|
var t = h > 10 ? h : "0" + h;
|
std.push(t + ":00:00")
|
}
|
const myChart = echarts.init(id);
|
var option = {
|
title: {
|
text: "",
|
textStyle: {
|
color: "white"
|
}
|
},
|
xAxis: {
|
type: 'category',
|
data: std,
|
axisLabel: {
|
textStyle: {
|
color: 'WHITE' // 设置字体颜色为红色
|
}
|
}
|
},
|
yAxis: {
|
type: 'value',
|
axisLabel: {
|
textStyle: {
|
color: 'WHITE' // 设置字体颜色为红色
|
}
|
}
|
},
|
tooltip: {
|
trigger: 'axis'
|
},
|
series: [
|
{
|
data: data,
|
type: 'line',
|
smooth: true,
|
// itemStyle: {
|
// normal: {
|
|
// lineStyle: {
|
// color: ""// 线的颜色
|
// }
|
// }
|
// }
|
}
|
]
|
};
|
|
|
option && myChart.setOption(option);
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.chartListBox {
|
width: 100%;
|
height: 100%;
|
position: relative;
|
display: flex;
|
flex-direction: column;
|
|
.aside-title {
|
box-sizing: border-box;
|
padding-left: 30px;
|
font-size: 15px;
|
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei-Regular;
|
color: #fff;
|
width: 100%;
|
height: 45px;
|
line-height: 45px;
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
}
|
|
.echartBox {
|
flex: 1;
|
padding: 5px;
|
position: relative;
|
color: white;
|
display: flex;
|
flex-direction: column;
|
|
// justify-content: space-around;
|
.chartEchart {
|
flex: 1;
|
|
}
|
|
.myChart {
|
width: 100%;
|
height: 100%;
|
}
|
|
.chartTd {
|
width: 100%;
|
padding: 0px !important;
|
}
|
|
.elDriver {
|
width: 100%;
|
height: 2px;
|
background: #409EFF;
|
margin: 10px 0px;
|
|
}
|
|
.chartTable {
|
width: 100%;
|
|
td {
|
text-align: center;
|
|
.elButton {
|
padding: 5px 10px;
|
}
|
}
|
}
|
|
}
|
}
|
</style>
|
