登录页修改

suerprisePlus

2024-10-17 78c7b6c6dfe40761e7b8eb60498f2eb73c0aaad1

 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,95 @@
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 { point } from '@turf/turf';
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.close();
            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)
                    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)
                            }

                        }
                    }


                }
            };
        },
        childData(res) {
            if (!res) return
            this.showInfo = true;
@@ -88,7 +173,7 @@
    }

    .leftMenu {
        width: 15%;
        width: 12%;
        top: 90px;
        left: 10px;
        height: calc(100% - 180px);
@@ -97,7 +182,7 @@
    }

    .rightMenu {
        width: 15%;
        width: 12%;
        top: 90px;
        right: 10px;
        height: calc(100% - 180px);
@@ -113,6 +198,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%;