suerprisePlus
2024-11-27 ab8f3297f7c8243d486c9da0900e4f813b2ea2df
src/views/visualization/index.vue
@@ -25,7 +25,7 @@
                    <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>
@@ -39,6 +39,21 @@
        </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>
</template>
@@ -54,6 +69,7 @@
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: {
@@ -65,7 +81,8 @@
        statistics,
        lineLoss,
        semanticFunction,
        msgList
        msgList,
        msgListInfo
    },
    data() {
        return {
@@ -74,7 +91,8 @@
            wsSocket: null,
            rightChartData: {},
            leftChartData: {},
            showMsgFlag: true
            showMsgFlag: true,
            showMsgInfoFlag: false,
        }
    },
    beforeDestroy() {
@@ -94,9 +112,16 @@
    },
    methods: {
        receiveDataFromChild(data) {
            console.log(data);
            this.showMsgFlag = true
          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;
@@ -114,13 +139,20 @@
                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]
                        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") {
                        this.$store.state.mapLayers.disasterFire.val = [obj]
                        if ([obj] != this.$store.state.mapLayers.disasterFire.val) {
                            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 {
@@ -173,7 +205,7 @@
    }
    .leftMenu {
        width: 12%;
        width: 14%;
        top: 90px;
        left: 10px;
        height: calc(100% - 180px);
@@ -182,7 +214,7 @@
    }
    .rightMenu {
        width: 12%;
        width: 14%;
        top: 90px;
        right: 10px;
        height: calc(100% - 180px);
@@ -215,13 +247,53 @@
        }
    }
    .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%;
    }
@@ -268,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 {