websocket接口对接

suerprisePlus

2024-10-15 afd3fe35aeaae4f3984c94ca29d57b5a3a52107f

 src/components/RuoYi/Msgger/index.vue

@@ -1,32 +1,143 @@
<template>
    <div class="msgBox" @click="setShowMenuClick">
    <div class="msgBox" @click.stop="setShowMenuClick(true)">

        <i style="font-size: 20px;" class="el-icon-chat-line-round"></i>
        <el-badge v-show="msgCount > 0" :value="msgCount" class="item">
        <el-badge v-show="$store.state.mapLayers.msgList.length > 0" :value="$store.state.mapLayers.msgList.length"
            class="item">
        </el-badge>
        <el-dialog title="故障信息" :visible.sync="dialogVisible" width="30%" :show-close="false">
            <el-table :data="$store.state.mapLayers.msgList" style="width: 100%">
                <el-table-column prop="msg" label="设备名称">
                </el-table-column>
                <el-table-column prop="point" label="设备位置">
                </el-table-column>
                <el-table-column label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                        <el-button @click="handleClick2(scope.row)" type="text" size="small">分发</el-button></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button @click.stop="dialogVisible = false">关 闭</el-button>
            </span>
            <el-dialog width="30%" title="位置" :visible.sync="innerVisible" append-to-body>
                <div style="height: 540px">
                    <olMap v-if="innerVisible" :parentData="parentData"></olMap>
                </div>
            </el-dialog>
        </el-dialog>

    </div>
</template>

<script>

import olMap from '@/components/mapOl/index.vue';

export default {
    name: 'RouYiMsg',
    components: {
        olMap
    },
    data() {
        return {
            msgCount: 0,
            dialogVisible: false
            msgCount: 1,
            dialogVisible: false,
            dialogFlag: false,
            wsSocket: null,
            innerVisible: false,
            msgData: [],
            parentData: null,
        }
    },
    methods: {
        setShowMenuClick() {
        handleClick2(row) {
            this.$message({
                showClose: true,
                message: '已分发到相关负责人',
                type: 'success'
            });
        },
        handleClick(row) {
            const obj = {
                val: row,
                type: 'point',
                isShow: false,
            }
 
            this.parentData = JSON.stringify([obj])
            this.innerVisible = true
        },
        setShowMenuClick(res) {

            this.dialogVisible = true


        },
        handleClose() {
            this.dialogVisible = false
        }
        },
        createSocket() {
            this.wsSocket = new WebSocket(config.pySocket);
            this.wsSocket.onopen = (event) => {
                console.log('WebSocket连接成功');
            };
            this.wsSocket.onclose = () => {
                console.log('WebSocket连接关闭');
                this.wsSocket = null
            };
            this.wsSocket.onmessage = (event) => {

                if (event.data != "连接成功") {
                    const obj = JSON.parse(event.data);
                    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)
                            }




                        }
                    }
                }
                // 处理接收到的消息
            };
        },
        setShowMsg(res) {
            const filter = this.msgData.filter(item => {
                if (item.msg == res.msg && item.point == res.point) {
                    return item;
                }
            })
            if (filter.length > 0) return;
            this.msgData.push(res)
            this.msgCount = this.msgData.length;

        },
    },
    mounted() {
        console.log(123);
        if (!this.wsSocket) {
            this.createSocket();
        }

    },
    beforeDestroy() {
        if (this.wsSocket) {
            this.wsSocket.close();

        }

    },
}