From ab8f3297f7c8243d486c9da0900e4f813b2ea2df Mon Sep 17 00:00:00 2001
From: suerprisePlus <15810472099@163.com>
Date: 星期三, 27 十一月 2024 17:16:46 +0800
Subject: [PATCH] 功能更新
---
src/views/visualization/list/chart.vue | 77 +++++++++++++++++++++++++++-----------
1 files changed, 55 insertions(+), 22 deletions(-)
diff --git a/src/views/visualization/list/chart.vue b/src/views/visualization/list/chart.vue
index 5583f5f..94ec44c 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>
@@ -27,15 +27,19 @@
<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
+ <el-button v-show="flagData != roadItem.type" class="elButton" type="primary" plain
size="mini" @click="setChangeItem()">璇︽儏</el-button>
- <el-button v-show="flagData == roadItem.address" class="elButton" type="danger" plain
+ <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 :id="chartId" class="myChart"> </div>
+ <div class="myChart">
+ <div id="chartRain" class="myChartID"></div>
+
+
+ </div>
</div>
</div>
</div>
@@ -53,16 +57,14 @@
}
},
watch: {
- childData(newValue, oldValue) {
- if (newValue) {
- this.chartId = newValue.id;
- this.title = newValue.title;
- setTimeout(() => {
- this.setEchartChange(newValue.val[0])
-
- }, 200);
- }
- }
+ "$store.state.mapLayers.disasterRain": {
+ handler(newVal, oldVal) {
+ if (newVal.val) {
+ this.setEchartChange(newVal);
+ }
+ },
+ deep: true
+ },
},
data() {
return {
@@ -75,9 +77,13 @@
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()
},
@@ -87,17 +93,25 @@
},
setChangeItem() {
var res = this.roadItem;
- window.regionWeather = res.address;
+ 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() {
- setEchartChange(res) {
- this.roadItem = res
+ if (!this.roadItem) return
if (!this.roadItem.data) return;
- const data = this.roadItem.data;
- const id = document.getElementById(this.chartId)
+ 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
@@ -106,6 +120,12 @@
}
const myChart = echarts.init(id);
var option = {
+ grid: {
+ left: "10%",
+ top: "10%",
+ right: "5%",
+ bottom: "25%",
+ },
title: {
text: "",
textStyle: {
@@ -151,6 +171,13 @@
option && myChart.setOption(option);
+ },
+ setEchartChange(res) {
+
+
+ this.roadItem = res.val[0]
+ this.showEchart();
+
}
}
}
@@ -172,7 +199,7 @@
color: #fff;
width: 100%;
height: 45px;
- line-height: 45px;
+ line-height: 30px;
background-size: 100% 100%;
background-repeat: no-repeat;
}
@@ -188,12 +215,18 @@
// justify-content: space-around;
.chartEchart {
flex: 1;
-
}
.myChart {
width: 100%;
height: 100%;
+ position: relative;
+
+
+ .myChartID {
+ position: absolute;
+
+ }
}
.chartTd {
--
Gitblit v1.9.3