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 | 71 +++++++++++++++++++++++++++++++---- 1 files changed, 62 insertions(+), 9 deletions(-) diff --git a/src/views/visualization/index.vue b/src/views/visualization/index.vue index 6a77f43..e91b1d6 100644 --- a/src/views/visualization/index.vue +++ b/src/views/visualization/index.vue @@ -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,10 +52,19 @@ 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 { @@ -53,7 +72,8 @@ showInfo: false, wsSocket: null, rightChartData: {}, - leftChartData:{}, + leftChartData: {}, + showMsgFlag: true } }, beforeDestroy() { @@ -67,10 +87,20 @@ }, mounted() { if (!this.wsSocket) { - this.createSocket(); + // 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) => { @@ -81,17 +111,13 @@ if (event.data != "杩炴帴鎴愬姛") { const obj = JSON.parse(event.data) - - + + this.leftChartData = { type: 'left1', val: obj } } - - - - // 澶勭悊鎺ユ敹鍒扮殑娑堟伅 }; }, childData(res) { @@ -151,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