From f521ebc2551d468c4c478783a18d4b0714394d61 Mon Sep 17 00:00:00 2001
From: suerprisePlus <15810472099@163.com>
Date: 星期一, 14 十月 2024 15:00:13 +0800
Subject: [PATCH] 配网大屏功能优化
---
src/views/visualization/list/chart.vue | 55 ++++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 40 insertions(+), 15 deletions(-)
diff --git a/src/views/visualization/list/chart.vue b/src/views/visualization/list/chart.vue
index 214e717..5583f5f 100644
--- a/src/views/visualization/list/chart.vue
+++ b/src/views/visualization/list/chart.vue
@@ -22,24 +22,28 @@
</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 :id="chartId" class="myChart"> </div>
+ </div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts';
+import mapWeather from './mapWeather';
export default {
props: {
@@ -54,8 +58,9 @@
this.chartId = newValue.id;
this.title = newValue.title;
setTimeout(() => {
- this.setEchartChange(newValue)
- }, 1000);
+ this.setEchartChange(newValue.val[0])
+
+ }, 200);
}
}
},
@@ -64,19 +69,34 @@
chartId: "",
title: "",
flagData: null,
+ roadItem: {},
}
},
+ created() {
+ window.addEventListener('POIDetailDataChange', this.handlePOIDetailDataChange)
+ },
+
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);
},
setEchartChange(res) {
- if (!res.data) return;
- const data = res.data;
+ 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++) {
@@ -87,7 +107,7 @@
const myChart = echarts.init(id);
var option = {
title: {
- text: res.address,
+ text: "",
textStyle: {
color: "white"
}
@@ -164,7 +184,12 @@
color: white;
display: flex;
flex-direction: column;
+
// justify-content: space-around;
+ .chartEchart {
+ flex: 1;
+
+ }
.myChart {
width: 100%;
--
Gitblit v1.9.3