From afd3fe35aeaae4f3984c94ca29d57b5a3a52107f Mon Sep 17 00:00:00 2001
From: suerprisePlus <15810472099@163.com>
Date: 星期二, 15 十月 2024 10:24:39 +0800
Subject: [PATCH] websocket接口对接
---
src/views/visualization/list/chart.vue | 100 +++++++++++++++++++++++++++++++++++++-------------
1 files changed, 74 insertions(+), 26 deletions(-)
diff --git a/src/views/visualization/list/chart.vue b/src/views/visualization/list/chart.vue
index 214e717..e9ad81e 100644
--- a/src/views/visualization/list/chart.vue
+++ b/src/views/visualization/list/chart.vue
@@ -1,7 +1,7 @@
<template>
<div class="chartListBox" :childData="childData">
- <div class="aside-title">{{ childData.title }}</div>
- <div class="echartBox">
+ <div class="aside-title"> 闆�</div>
+ <div class="echartBox" v-show="roadItem.address">
<table class="chartTable">
<tr>
<th></th>
@@ -22,24 +22,32 @@
</div>
</td>
</tr>
- <tr v-for="(item, i) in childData.val">
- <td>{{ item.address }}</td>
- <td>{{ item.line }}</td>
- <td style="color:#f56c6c">{{ item.level }}</td>
+ <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 != item.address" class="elButton" type="primary" plain size="mini"
- @click="setChangeItem(item)">璇︽儏</el-button>
- <el-button v-show="flagData == item.address" class="elButton" type="danger" plain size="mini"
- @click="setCannelItem(item)">閲嶇疆</el-button>
+ <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 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: {
@@ -49,35 +57,57 @@
}
},
watch: {
- childData(newValue, oldValue) {
- if (newValue) {
- this.chartId = newValue.id;
- this.title = newValue.title;
- setTimeout(() => {
- this.setEchartChange(newValue)
- }, 1000);
- }
- }
+ "$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.flagData = null;
+ mapWeather.closeRegionWeather()
},
- setChangeItem(res) {
- this.flagData = res.address;
+ 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);
+ },
+ showEchart() {
- setEchartChange(res) {
- if (!res.data) return;
- const data = res.data;
- const id = document.getElementById(this.chartId)
+ 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
@@ -87,7 +117,7 @@
const myChart = echarts.init(id);
var option = {
title: {
- text: res.address,
+ text: "",
textStyle: {
color: "white"
}
@@ -131,6 +161,13 @@
option && myChart.setOption(option);
+ },
+ setEchartChange(res) {
+
+
+ this.roadItem = res.val[0]
+ this.showEchart();
+
}
}
}
@@ -164,11 +201,22 @@
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 {
--
Gitblit v1.9.3