<template>
|
<div class="chartListBox" :childData="childData">
|
<div class="aside-title"> 雨</div>
|
<div class="echartBox" v-show="roadItem.address">
|
<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.type" class="elButton" type="primary" plain
|
size="mini" @click="setChangeItem()">详情</el-button>
|
<el-button v-show="flagData == roadItem.type" class="elButton" type="danger" plain
|
size="mini" @click="setCannelItem()">重置</el-button>
|
</td>
|
</tr>
|
</table>
|
<div class="chartEchart">
|
<div class="myChart">
|
<div id="chartRain" class="myChartID"></div>
|
|
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import * as echarts from 'echarts';
|
import mapWeather from './mapWeather';
|
|
export default {
|
props: {
|
childData: {
|
type: Object,
|
default: null
|
}
|
},
|
watch: {
|
"$store.state.mapLayers.disasterRain": {
|
handler(newVal, oldVal) {
|
if (newVal.val) {
|
this.setEchartChange(newVal);
|
}
|
},
|
deep: true
|
},
|
},
|
data() {
|
return {
|
chartId: "",
|
title: "",
|
flagData: null,
|
roadItem: {},
|
}
|
},
|
created() {
|
window.addEventListener('POIDetailDataChange', this.handlePOIDetailDataChange)
|
},
|
mounted() {
|
|
},
|
methods: {
|
setCannelItem() {
|
this.$store.state.mapLayers.weatherFlag = false;
|
this.$store.state.mapLayers.weatherFlag = 2
|
this.flagData = null;
|
mapWeather.closeRegionWeather()
|
},
|
handlePOIDetailDataChange() {
|
if (this.flagData == window.regionWeather) return
|
this.flagData = window.regionWeather;
|
},
|
setChangeItem() {
|
var res = this.roadItem;
|
window.regionWeather = res.type;
|
var event = new Event('POIDetailDataChange');
|
this.$store.state.mapLayers.weatherMsg = mapWeather.getWearData(res);
|
this.$store.state.mapLayers.weatherFlag = 1;
|
window.dispatchEvent(event);
|
mapWeather.setRegionWeatherType(res);
|
},
|
showEchart() {
|
|
if (!this.roadItem) return
|
if (!this.roadItem.data) return;
|
var div = document.getElementsByClassName("chartEchart")[0];
|
if (div.offsetWidth == 0 || div.offsetHeight == 0) return
|
document.getElementById("chartRain").style.width = div.offsetWidth + "px"
|
document.getElementById("chartRain").style.height = div.offsetHeight + "px"
|
var data = this.roadItem.data;
|
|
|
const id = document.getElementById("chartRain")
|
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 = {
|
grid: {
|
left: "10%",
|
top: "10%",
|
right: "5%",
|
bottom: "25%",
|
},
|
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);
|
},
|
setEchartChange(res) {
|
|
|
this.roadItem = res.val[0]
|
this.showEchart();
|
|
}
|
}
|
}
|
</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: 30px;
|
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%;
|
position: relative;
|
|
|
.myChartID {
|
position: absolute;
|
|
}
|
}
|
|
.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>
|
