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/index.vue | 99 +++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 95 insertions(+), 4 deletions(-)
diff --git a/src/views/visualization/index.vue b/src/views/visualization/index.vue
index d54d49d..e91b1d6 100644
--- a/src/views/visualization/index.vue
+++ b/src/views/visualization/index.vue
@@ -3,10 +3,10 @@
<div class="title"></div>
<mapView></mapView>
<div class="leftMenu">
- <left-menu></left-menu>
+ <left-menu :leftChartData="leftChartData"></left-menu>
</div>
<div class="rightMenu">
- <right-menu></right-menu>
+ <right-menu :rightChartData="rightChartData"></right-menu>
</div>
<div class="bottomMenu">
<bottomMenu @childData="childData"></bottomMenu>
@@ -26,9 +26,19 @@
<analysis v-if="isShow == '鏁版嵁鍒嗘瀽'"></analysis>
<statistics v-if="isShow == '鏁版嵁缁熻'"></statistics>
<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>
</template>
@@ -42,20 +52,74 @@
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';
export default {
components: {
mapView, leftMenu,
- rightMenu, bottomMenu, atlas, analysis, statistics, lineLoss
+ rightMenu,
+ bottomMenu,
+ atlas,
+ analysis,
+ statistics,
+ lineLoss,
+ semanticFunction,
+ msgList
},
data() {
return {
isShow: null,
- showInfo: false
+ showInfo: false,
+ wsSocket: null,
+ rightChartData: {},
+ leftChartData: {},
+ showMsgFlag: true
}
},
+ beforeDestroy() {
+ if (this.wsSocket) {
+ this.wsSocket.onclose = () => {
+ console.log('WebSocket杩炴帴鍏抽棴');
+ this.wsSocket = null
+ };
+ }
+
+ },
mounted() {
+ if (!this.wsSocket) {
+ // this.createSocket();
+ }
},
methods: {
+ receiveDataFromChild(data) {
+ console.log(data);
+
+ this.showMsgFlag = true
+ },
+ 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) => {
+ 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
+ }
+ }
+ };
+ },
childData(res) {
if (!res) return
this.showInfo = true;
@@ -113,6 +177,33 @@
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;
+ }
+ }
+
+ .msgList {
+ width: 15%;
+ top: 90px;
+ right: 16%;
+ z-index: 40;
+ position: absolute;
+
+ height: 30%;
+ }
+
.visualInfo {
width: 60%;
height: 60%;
--
Gitblit v1.9.3