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/index.vue | 189 +++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 175 insertions(+), 14 deletions(-)
diff --git a/src/views/visualization/index.vue b/src/views/visualization/index.vue
index 6a77f43..1f82429 100644
--- a/src/views/visualization/index.vue
+++ b/src/views/visualization/index.vue
@@ -25,9 +25,34 @@
<atlas v-if="isShow == '鐭ヨ瘑鍥捐氨'"></atlas>
<analysis v-if="isShow == '鏁版嵁鍒嗘瀽'"></analysis>
<statistics v-if="isShow == '鏁版嵁缁熻'"></statistics>
- <line-loss v-if="isShow == '鏁板瓧绾挎崯'"></line-loss>
+ <line-loss v-if="isShow == '杩愭'"></line-loss>
+ <semanticFunction v-if="isShow == '璇箟鍔熻兘'"></semanticFunction>
</div>
+ </div>
+ </div>
+ <div v-show="showMsgFlag" @click="ShowMenuList" class="elBadge"
+ :disabled="$store.state.mapLayers.msgList.length == 0">
+ <el-badge :value="$store.state.mapLayers.msgList.length" class="item">
+ <i class="el-icon-chat-dot-square"></i>
+ </el-badge>
+ </div>
+ <div class="msgList" v-show="!showMsgFlag">
+ <msg-list @childData="receiveDataFromChild"></msg-list>
+ </div>
+ <div class="msgListinfo" v-if="showMsgInfoFlag">
+ <msg-list-info @childData="receiveDataInfoChild"></msg-list-info >
+ </div>
+ <div class="wearthList" v-if="$store.state.mapLayers.weatherFlag == 1">
+ <div class="weatherHeader">
+ {{ $store.state.mapLayers.weatherMsg.name }}
+ </div>
+ <div class="weatherBox">
+ <ul>
+ <li v-for="(item, key) in $store.state.mapLayers.weatherMsg.data" :key="key">
+ {{ item.name }}:{{ item.val }}
+ </li>
+ </ul>
</div>
</div>
</div>
@@ -42,10 +67,22 @@
import analysis from '@/views/visual/analysis/index.vue'
import lineLoss from './lineLoss.vue';
import statistics from '@/views/visual/statistics/index.vue'
+import semanticFunction from '@/views/dataManager/semanticFunction/index.vue'
+import msgList from './msgList.vue';
+import msgListInfo from './msgListInfo.vue';
+import { point } from '@turf/turf';
export default {
components: {
mapView, leftMenu,
- rightMenu, bottomMenu, atlas, analysis, statistics, lineLoss
+ rightMenu,
+ bottomMenu,
+ atlas,
+ analysis,
+ statistics,
+ lineLoss,
+ semanticFunction,
+ msgList,
+ msgListInfo
},
data() {
return {
@@ -53,11 +90,14 @@
showInfo: false,
wsSocket: null,
rightChartData: {},
- leftChartData:{},
+ leftChartData: {},
+ showMsgFlag: true,
+ showMsgInfoFlag: false,
}
},
beforeDestroy() {
if (this.wsSocket) {
+ this.wsSocket.close();
this.wsSocket.onclose = () => {
console.log('WebSocket杩炴帴鍏抽棴');
this.wsSocket = null
@@ -71,6 +111,23 @@
}
},
methods: {
+ receiveDataFromChild(data) {
+ if(data =="close"){
+ this.showMsgFlag = true;
+ this.showMsgInfoFlag = false
+ return
+ }
+ this.showMsgInfoFlag = true;
+
+ },
+ receiveDataInfoChild() {
+ this.showMsgInfoFlag = false
+ },
+ ShowMenuList() {
+ if (this.$store.state.mapLayers.msgList.length == 0) return;
+ this.showMsgFlag = !this.showMsgFlag
+
+ },
createSocket() {
this.wsSocket = new WebSocket(config.pySocket);
this.wsSocket.onopen = (event) => {
@@ -81,17 +138,39 @@
if (event.data != "杩炴帴鎴愬姛") {
const obj = JSON.parse(event.data)
-
-
- this.leftChartData = {
- type: 'left1',
- val: obj
+ if (obj.type == "rain") {
+ if ([obj] != this.$store.state.mapLayers.disasterRain.val) {
+ this.$store.state.mapLayers.disasterRain.val = [obj]
+ }
+
+ } else if (obj.type == "thunder") {
+ if ([obj] != this.$store.state.mapLayers.disasterSnow.val) {
+ this.$store.state.mapLayers.disasterSnow.val = [obj]
+ }
+ } else if (obj.type == "fire") {
+ if ([obj] != this.$store.state.mapLayers.disasterFire.val) {
+ this.$store.state.mapLayers.disasterFire.val = [obj]
+ }
+ } else 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)
+ }
+
+ }
}
+
+
}
-
-
-
- // 澶勭悊鎺ユ敹鍒扮殑娑堟伅
};
},
childData(res) {
@@ -126,7 +205,7 @@
}
.leftMenu {
- width: 15%;
+ width: 14%;
top: 90px;
left: 10px;
height: calc(100% - 180px);
@@ -135,7 +214,7 @@
}
.rightMenu {
- width: 15%;
+ width: 14%;
top: 90px;
right: 10px;
height: calc(100% - 180px);
@@ -149,6 +228,73 @@
z-index: 40;
position: absolute;
bottom: 0px;
+ }
+
+ .elBadge {
+ // width: 15%;
+ top: 90px;
+ right: 16%;
+ z-index: 40;
+ padding: 10px;
+ position: absolute;
+ background: url(~@/assets/images/treeClose.png)no-repeat;
+ background-size: 100% 100%;
+
+ .el-icon-chat-dot-square {
+ color: white;
+ font-size: 22px;
+ margin-right: 5px;
+ }
+ }
+
+ .wearthList {
+ width: 15%;
+ top: 90px;
+ left: 15%;
+ z-index: 40;
+ position: absolute;
+ background: url(~@/assets/images/Screen/chartbg.png) no-repeat;
+ background-size: 100% 100%;
+ height: 20%;
+ padding: 10px;
+ color: white;
+ display: flex;
+ flex-direction: column;
+
+ .weatherHeader {
+ line-height: 10px;
+ font-size: 16px;
+ padding-left: 20px;
+ }
+
+ .weatherBox {
+ flex: 1;
+ padding: 10px;
+ overflow: auto;
+
+ li {
+ line-height: 30px;
+ font-size: 16px;
+ }
+ }
+ }
+
+ .msgList {
+ width: 15%;
+ top: 90px;
+ right: 16%;
+ z-index: 40;
+ position: absolute;
+ height: 30%;
+ }
+
+ .msgListinfo {
+ width: 15%;
+ top: calc(30% + 100px);
+ right: 16%;
+ z-index: 40;
+ position: absolute;
+ height: 30%;
}
.visualInfo {
@@ -194,6 +340,21 @@
}
}
}
+
+/* 鑷畾涔夋粴鍔ㄦ潯杞ㄩ亾 */
+::-webkit-scrollbar-track {
+ background-color: rgba(0, 0, 0, 0);
+}
+
+/* 鑷畾涔夋粴鍔ㄦ潯鐨勬粦鍧� */
+::-webkit-scrollbar-thumb {
+ background-color: rgba(0, 0, 0, 0);
+}
+
+/* 璁剧疆婊氬姩鏉＄殑瀹藉害 */
+::-webkit-scrollbar {
+ width: 1px;
+}
</style>
<style>
::v-deep.map-info-bar {
--
Gitblit v1.9.3