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/data.js | 4
public/glb/开关.glb | 0
src/assets/js/mapSdk/mapData.js | 2
public/glb/ZB.glb | 0
src/views/visualization/msgList.vue | 7
src/components/mapOl/index.vue | 19
public/glb/故障指示灯.glb | 0
public/glb/环网柜.glb | 0
src/views/visualization/list/chart1.vue | 247 +++++++++++++++++++
src/components/RuoYi/Msgger/index.vue | 44 ++
src/views/visualization/list/mapWeather.js | 2
public/glb/电缆中间接头.glb | 0
src/views/visualization/leftMenu.vue | 38 --
src/views/visualization/mapView.vue | 2
src/store/modules/mapLayers.js | 18 +
src/App.vue | 18 -
src/views/visualization/index.vue | 37 ++
src/views/visualization/list/chart.vue | 59 +++-
src/views/visualization/list/chart2.vue | 249 +++++++++++++++++++
19 files changed, 652 insertions(+), 94 deletions(-)
diff --git a/public/glb/ZB.glb b/public/glb/ZB.glb
index c10436e..b0193a2 100644
--- a/public/glb/ZB.glb
+++ b/public/glb/ZB.glb
Binary files differ
diff --git "a/public/glb/\345\274\200\345\205\263.glb" "b/public/glb/\345\274\200\345\205\263.glb"
new file mode 100644
index 0000000..06b58ec
--- /dev/null
+++ "b/public/glb/\345\274\200\345\205\263.glb"
Binary files differ
diff --git "a/public/glb/\346\225\205\351\232\234\346\214\207\347\244\272\347\201\257.glb" "b/public/glb/\346\225\205\351\232\234\346\214\207\347\244\272\347\201\257.glb"
new file mode 100644
index 0000000..fa2edf9
--- /dev/null
+++ "b/public/glb/\346\225\205\351\232\234\346\214\207\347\244\272\347\201\257.glb"
Binary files differ
diff --git "a/public/glb/\347\216\257\347\275\221\346\237\234.glb" "b/public/glb/\347\216\257\347\275\221\346\237\234.glb"
new file mode 100644
index 0000000..7518688
--- /dev/null
+++ "b/public/glb/\347\216\257\347\275\221\346\237\234.glb"
Binary files differ
diff --git "a/public/glb/\347\224\265\347\274\206\344\270\255\351\227\264\346\216\245\345\244\264.glb" "b/public/glb/\347\224\265\347\274\206\344\270\255\351\227\264\346\216\245\345\244\264.glb"
new file mode 100644
index 0000000..a2d06db
--- /dev/null
+++ "b/public/glb/\347\224\265\347\274\206\344\270\255\351\227\264\346\216\245\345\244\264.glb"
Binary files differ
diff --git a/src/App.vue b/src/App.vue
index 6181d2e..7a2ca71 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -24,18 +24,11 @@
},
data() {
return {
-
+ wsSocket: null
}
},
mounted() {
- this.createSocket();
- setTimeout(() => {
- this.$store.state.mapLayers.msgList.push({
- msg: "鍙樺帇鍣ㄦ晠闅�",
- point: "POINT (112.56978672907 37.8558881392881)"
- })
-
- }, 10000);
+
},
methods: {
createSocket() {
@@ -44,16 +37,11 @@
console.log('WebSocket杩炴帴鎴愬姛');
};
this.wsSocket.onmessage = (event) => {
- // console.log('Received message:', event.data);
if (event.data != "杩炴帴鎴愬姛") {
- const obj = JSON.parse(event.data)
- this.leftChartData = {
- type: 'left1',
- val: obj
- }
+
}
};
}
diff --git a/src/assets/js/mapSdk/mapData.js b/src/assets/js/mapSdk/mapData.js
index 630e861..cc7c69d 100644
--- a/src/assets/js/mapSdk/mapData.js
+++ b/src/assets/js/mapSdk/mapData.js
@@ -312,7 +312,7 @@
XB: '绠卞彉',
HW: '鐜綉鏌�',
DLZJJT: '鐢电紗涓棿鎺ュご',
- ZB: 'ZB',
+ ZB: '缇庡紡绠卞彉',
KG: '寮�鍏�',
ZSQ: '鏁呴殰鎸囩ず鍣�',
PDS: 'PDS',
diff --git a/src/components/RuoYi/Msgger/index.vue b/src/components/RuoYi/Msgger/index.vue
index fe4e66a..49d8891 100644
--- a/src/components/RuoYi/Msgger/index.vue
+++ b/src/components/RuoYi/Msgger/index.vue
@@ -2,7 +2,8 @@
<div class="msgBox" @click.stop="setShowMenuClick(true)">
<i style="font-size: 20px;" class="el-icon-chat-line-round"></i>
- <el-badge v-show="$store.state.mapLayers.msgList.length > 0" :value="$store.state.mapLayers.msgList.length" class="item">
+ <el-badge v-show="$store.state.mapLayers.msgList.length > 0" :value="$store.state.mapLayers.msgList.length"
+ class="item">
</el-badge>
<el-dialog title="鏁呴殰淇℃伅" :visible.sync="dialogVisible" width="30%" :show-close="false">
<el-table :data="$store.state.mapLayers.msgList" style="width: 100%">
@@ -31,7 +32,7 @@
</template>
<script>
-
+
import olMap from '@/components/mapOl/index.vue';
export default {
@@ -64,6 +65,7 @@
type: 'point',
isShow: false,
}
+
this.parentData = JSON.stringify([obj])
this.innerVisible = true
},
@@ -81,12 +83,33 @@
this.wsSocket.onopen = (event) => {
console.log('WebSocket杩炴帴鎴愬姛');
};
+ this.wsSocket.onclose = () => {
+ console.log('WebSocket杩炴帴鍏抽棴');
+ this.wsSocket = null
+ };
this.wsSocket.onmessage = (event) => {
if (event.data != "杩炴帴鎴愬姛") {
const obj = JSON.parse(event.data);
- if (obj.mes) {
- this.setShowMsg(obj)
+ if (obj.type == "error") {
+ if (this.$store.state.mapLayers.msgList.length == 0) {
+ this.$store.state.mapLayers.msgList.push(obj)
+ } else {
+
+ var rs = this.$store.state.mapLayers.msgList;
+ var st = rs.filter(item => {
+ if (item.msg == obj.msg && item.point == obj.point && item.line == obj.line) {
+ return item
+ }
+ })
+ if (st.length <= 0) {
+ this.$store.state.mapLayers.msgList.push(obj)
+ }
+
+
+
+
+ }
}
}
// 澶勭悊鎺ユ敹鍒扮殑娑堟伅
@@ -105,9 +128,16 @@
},
},
mounted() {
- // if (!this.wsSocket) {
- // this.createSocket();
- // }
+ if (!this.wsSocket) {
+ this.createSocket();
+ }
+
+ },
+ beforeDestroy() {
+ if (this.wsSocket) {
+ this.wsSocket.close();
+
+ }
},
}
diff --git a/src/components/mapOl/index.vue b/src/components/mapOl/index.vue
index ae520c5..27ed908 100644
--- a/src/components/mapOl/index.vue
+++ b/src/components/mapOl/index.vue
@@ -61,7 +61,7 @@
initOlMap() {
const baseLayer = mapData.baseLayer;
const vecUrl = baseLayer.sUrl + baseLayer.vecLayer + baseLayer.lUrl
- const geo= config.geoServer;
+ const geo = config.geoServer;
var vectorLayer = new TileLayer({
source: new XYZ({
url: vecUrl + config.tdToken,
@@ -96,7 +96,7 @@
}),
});
-console.log(geo.url + geo.wms)
+
var layer2 = new Image({
name: "Wms_Layer",
source: new ImageWMS({
@@ -113,12 +113,17 @@
if (this.parentData) {
if (this.parentData.indexOf('type') > -1) {
const data = JSON.parse(this.parentData)[0];
+
+ console.log(data);
+
this.isShow = data.isShow
if (data.type == 'point') {
- const obj = mapConfig.getWKTParse(data.val.point)
+
+ const obj = data.val.point.split(" ");
+ console.log(obj);
this.formInline = {
- lon: obj.coordinates[0],
- lat: obj.coordinates[1],
+ lon: obj[0],
+ lat: obj[1],
}
this.addPointData(obj);
} else if (data.type == 'line') {
@@ -176,12 +181,12 @@
this.mapol.addLayer(vectorLayer);
this.mapol.getView().fit(extent, {
size: this.mapol.getSize(),
- padding: [100, 100,200,100], // 鍥涗釜鏂瑰悜鐨勮竟璺濓紝鍙��
+ padding: [100, 100, 200, 100], // 鍥涗釜鏂瑰悜鐨勮竟璺濓紝鍙��
constrainResolution: false, // 鏄惁闄愬埗鍒嗚鲸鐜囷紝鍙��
});
},
addPointData(res) {
- const coord = res.coordinates;
+ const coord = res;
const urlImg = config.sdkImg + 'Workers/image/mark.png';
var geom = transform(
diff --git a/src/store/modules/mapLayers.js b/src/store/modules/mapLayers.js
index 7e6fd61..901332e 100644
--- a/src/store/modules/mapLayers.js
+++ b/src/store/modules/mapLayers.js
@@ -4,8 +4,19 @@
layerTree: [],
defaultLayer: [],
mapInfo: [],
- msgList:[ ]
-
+ msgList: [],
+ disasterSnow: {
+ title:"闆�",
+ val:[]
+ },
+ disasterRain: {
+ title:"闆�",
+ val:[]
+ },
+ disasterFire: {
+ title:"鐏�",
+ val:[]
+ },
};
const mutations = {
@@ -17,8 +28,7 @@
},
CHANGE_MAPINFO: (state, res) => {
state.mapInfo = res;
- busEvent.$emit('CHANGE_MAPINFO', state.mapInfo);
-
+ busEvent.$emit('CHANGE_MAPINFO', state.mapInfo);
},
};
diff --git a/src/views/visualization/data.js b/src/views/visualization/data.js
index fac4f41..9ef362c 100644
--- a/src/views/visualization/data.js
+++ b/src/views/visualization/data.js
@@ -136,8 +136,8 @@
address: '骞垮満鍙樼數绔�',
type: 'rain',
data: [
- 23.97957226, 23.67522328, 23.64627646, 23.98678133, 23.7049411, 23.90907715, 23.97135417, 23.93937771, 24.7313574, 23.78658559, 23.86060646, 23.93976822, 23.77442911, 23.70706984, 23.97513076,
- 24.00566013, 23.68618352, 23.62046202, 23.94578353, 23.667424, 23.89900528, 23.84667184, 23.79052521, 23.54961054,
+ 23.97957226, 3.67522328, 23.64627646, 23.98678133, 23.7049411, 23.90907715, 23.97135417, 23.93937771, 24.7313574, 23.78658559, 23.86060646, 23.93976822, 23.77442911, 23.70706984, 23.97513076,
+ 10.00566013, 23.68618352, 23.62046202, 23.94578353, 23.667424, 23.89900528, 23.84667184, 23.79052521, 23.54961054,
],
source: '灞辫タ鐪佹皵璞″眬',
time: '2024 -09 - 26 10:06: 40',
diff --git a/src/views/visualization/index.vue b/src/views/visualization/index.vue
index e91b1d6..cbc4349 100644
--- a/src/views/visualization/index.vue
+++ b/src/views/visualization/index.vue
@@ -37,7 +37,7 @@
<i class="el-icon-chat-dot-square"></i>
</el-badge>
</div>
- <div class="msgList" v-show="!showMsgFlag" >
+ <div class="msgList" v-show="!showMsgFlag">
<msg-list @childData="receiveDataFromChild"></msg-list>
</div>
</div>
@@ -54,6 +54,7 @@
import statistics from '@/views/visual/statistics/index.vue'
import semanticFunction from '@/views/dataManager/semanticFunction/index.vue'
import msgList from './msgList.vue';
+import { point } from '@turf/turf';
export default {
components: {
mapView, leftMenu,
@@ -73,11 +74,12 @@
wsSocket: null,
rightChartData: {},
leftChartData: {},
- showMsgFlag: true
+ showMsgFlag: true
}
},
beforeDestroy() {
if (this.wsSocket) {
+ this.wsSocket.close();
this.wsSocket.onclose = () => {
console.log('WebSocket杩炴帴鍏抽棴');
this.wsSocket = null
@@ -87,13 +89,13 @@
},
mounted() {
if (!this.wsSocket) {
- // this.createSocket();
+ this.createSocket();
}
},
methods: {
receiveDataFromChild(data) {
console.log(data);
-
+
this.showMsgFlag = true
},
ShowMenuList() {
@@ -111,12 +113,31 @@
if (event.data != "杩炴帴鎴愬姛") {
const obj = JSON.parse(event.data)
+ if (obj.type == "rain") {
+ this.$store.state.mapLayers.disasterRain.val = [obj]
+ } else if (obj.type == "snow") {
+ this.$store.state.mapLayers.disasterSnow.val = [obj]
+ } else if (obj.type == "fire") {
+ this.$store.state.mapLayers.disasterFire.val = [obj]
+ } else if (obj.type == "error") {
+ this.$store.state.mapLayers.msgList
+ if (this.$store.state.mapLayers.msgList.length == 0) {
+ this.$store.state.mapLayers.msgList.push(obj)
+ } else {
+ var rs = this.$store.state.mapLayers.msgList;
+ var st = rs.filter(item => {
+ if (item.msg == obj.msg && item.point == obj.point && item.line == obj.line) {
+ return item
+ }
+ })
+ if (st.length <= 0) {
+ this.$store.state.mapLayers.msgList.push(obj)
+ }
-
- this.leftChartData = {
- type: 'left1',
- val: obj
+ }
}
+
+
}
};
},
diff --git a/src/views/visualization/leftMenu.vue b/src/views/visualization/leftMenu.vue
index cd3ab94..893577c 100644
--- a/src/views/visualization/leftMenu.vue
+++ b/src/views/visualization/leftMenu.vue
@@ -1,13 +1,13 @@
<template>
<div class="leftMnu">
<div class="menuBox">
- <chart-vue :childData="childData"></chart-vue>
+ <chart-vue></chart-vue>
</div>
<div class="menuBox">
- <chart-vue :childData="childData1"></chart-vue>
+ <chart-vue1></chart-vue1>
</div>
<div class="menuBox">
- <chart-vue :childData="childData2"></chart-vue>
+ <chart-vue2></chart-vue2>
</div>
</div>
</template>
@@ -15,16 +15,21 @@
<script>
import * as echarts from 'echarts';
import chartVue from './list/chart.vue';
+import chartVue1 from './list/chart1.vue';
+import chartVue2 from './list/chart2.vue';
import data from './data.js';
export default {
components: {
- chartVue
+ chartVue, chartVue1, chartVue2
},
props: {
leftChartData: {
type: Object,
required: true
},
+ },
+ computed: {
+
},
data() {
return {
@@ -39,28 +44,10 @@
mounted() {
window.regionWeather = null;
- this.initEchart();
+
},
methods: {
- initEchart() {
- this.initEchart1();
- this.initEchart2();
- this.initEchart3();
- },
- initEchart1() {
- var chart1 = data[3];
- chart1.id = "myChart01";
- this.childData = chart1
- },
- initEchart2() {
- var chart2 = data[4];
- chart2.id = "myChart02";
- this.childData1 = chart2
- }, initEchart3() {
- var chart3 = data[5];
- chart3.id = "myChart03";
- this.childData2 = chart3
- }
+
}
}
</script>
@@ -72,7 +59,6 @@
display: flex;
flex-direction: column;
justify-content: space-between;
-
.menuBox {
width: 100%;
height: 33%;
@@ -85,7 +71,6 @@
.aside-title {
box-sizing: border-box;
padding-left: 30px;
-
font-size: 15px;
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei-Regular;
color: #fff;
@@ -105,7 +90,6 @@
.chartBox {
width: calc(100% - 10px);
height: calc(100% - 10px);
-
position: absolute;
}
}
diff --git a/src/views/visualization/list/chart.vue b/src/views/visualization/list/chart.vue
index 5583f5f..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>
@@ -35,7 +35,11 @@
</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,7 +77,9 @@
created() {
window.addEventListener('POIDetailDataChange', this.handlePOIDetailDataChange)
},
+ mounted() {
+ },
methods: {
setCannelItem() {
this.flagData = null;
@@ -92,12 +96,18 @@
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
@@ -151,6 +161,13 @@
option && myChart.setOption(option);
+ },
+ setEchartChange(res) {
+
+
+ this.roadItem = res.val[0]
+ this.showEchart();
+
}
}
}
@@ -188,12 +205,18 @@
// justify-content: space-around;
.chartEchart {
flex: 1;
-
}
.myChart {
width: 100%;
height: 100%;
+ position: relative;
+
+
+ .myChartID {
+ position: absolute;
+
+ }
}
.chartTd {
diff --git a/src/views/visualization/list/chart1.vue b/src/views/visualization/list/chart1.vue
new file mode 100644
index 0000000..9e17075
--- /dev/null
+++ b/src/views/visualization/list/chart1.vue
@@ -0,0 +1,247 @@
+<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.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="chartSnow" 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.disasterSnow": {
+ 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() {
+
+
+ // this.showEchart();
+ },
+ 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);
+ },
+ showEchart() {
+
+ if (!this.roadItem.data) return;
+ var div = document.getElementsByClassName("chartEchart")[0];
+ if (div.offsetWidth == 0 || div.offsetHeight == 0) return
+ document.getElementById("chartSnow").style.width = div.offsetWidth + "px"
+ document.getElementById("chartSnow").style.height = div.offsetHeight + "px"
+ var data = this.roadItem.data;
+
+
+ const id = document.getElementById("chartSnow")
+ 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);
+ },
+ 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: 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%;
+ 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>
\ No newline at end of file
diff --git a/src/views/visualization/list/chart2.vue b/src/views/visualization/list/chart2.vue
new file mode 100644
index 0000000..b55b5d9
--- /dev/null
+++ b/src/views/visualization/list/chart2.vue
@@ -0,0 +1,249 @@
+<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.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="chartFire" 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.disasterFire": {
+ 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() {
+
+
+ this.showEchart();
+ },
+ 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);
+ },
+ showEchart() {
+
+ if (!this.roadItem.data) return;
+ var div = document.getElementsByClassName("chartEchart")[0];
+ if (div.offsetWidth == 0 || div.offsetHeight == 0) return
+ document.getElementById("chartFire").style.width = div.offsetWidth + "px"
+ document.getElementById("chartFire").style.height = div.offsetHeight + "px"
+ var data = this.roadItem.data;
+
+
+ const id = document.getElementById("chartFire")
+ 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);
+ },
+ 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: 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%;
+ 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>
\ No newline at end of file
diff --git a/src/views/visualization/list/mapWeather.js b/src/views/visualization/list/mapWeather.js
index a04f7d1..222f65f 100644
--- a/src/views/visualization/list/mapWeather.js
+++ b/src/views/visualization/list/mapWeather.js
@@ -66,7 +66,7 @@
},
getCoord(res) {
const coord = res.point.split(',');
- console.log('娴嬭瘯', coord);
+
return coord;
},
diff --git a/src/views/visualization/mapView.vue b/src/views/visualization/mapView.vue
index 54f7393..2bf0801 100644
--- a/src/views/visualization/mapView.vue
+++ b/src/views/visualization/mapView.vue
@@ -84,7 +84,7 @@
if (item.cnName != "閰嶇綉绾�") {
mapServer.addLayer(item)
}
- }
+ }
})
this.$nextTick(() => {
diff --git a/src/views/visualization/msgList.vue b/src/views/visualization/msgList.vue
index 52d9926..2df2c44 100644
--- a/src/views/visualization/msgList.vue
+++ b/src/views/visualization/msgList.vue
@@ -66,10 +66,11 @@
},
handleClick(item) {
this.removeLabel();
- const point = mapConfig.getWKTParse(item.point)
+ // const point = mapConfig.getWKTParse(item.point)
+ const point = item.point.split(" ")
this.label = earthCtrl.factory.createLabel({
- lon: point.coordinates[0],
- lat: point.coordinates[1],
+ lon: point[0],
+ lat: point[1],
alt: 40,
text: item.msg,
image: config.sdkImg + 'Workers/image/mark.png',
--
Gitblit v1.9.3