console.log("闸门上升状态"+JSON.parse(message.payloadString).gus);
console.log("闸门下降状态"+JSON.parse(message.payloadString).gds);

console.log("闸门上限位"+JSON.parse(message.payloadString).gul);
console.log("闸门下限位"+JSON.parse(message.payloadString).gll);


console.log("主污泵状态"+JSON.parse(message.payloadString).mps);
console.log("备污泵状态"+JSON.parse(message.payloadString).sps);

console.log("闸门上升指示灯"+JSON.parse(message.payloadString).guil);
console.log("闸门下降指示灯"+JSON.parse(message.payloadString).gdil);
console.log("复位按钮指示灯"+JSON.parse(message.payloadString).rbil);

console.log("主污泵指示灯"+JSON.parse(message.payloadString).mpril);
console.log("备污泵指示灯"+JSON.parse(message.payloadString)
        <script type="text/javascript">
            var vm = new Vue({
                el: "#app",
                data: {
                    bigScreenDeviceList: '',
                    bigScreenDeviceRunInfo: '',
                    bigScreenDeviceEventList: '',
                    bigScreenHospitalDataList: '',
                    timer: '',
                    bigScreenDeviceRunCurrentInfo: '',
                    bigScreenDeviceRealData: '',
                    bigScreenDeviceName: '',
                    bigScreenCurrentTime: ''
                },
                methods: {
                    // 获取设备列表
                    getBigScreenDeviceList: function()
                    {
                        let _this = this;
                        $.ajax({
                            url: '?c=big_screen&a=getBigScreenDeviceList',
                            type: 'get',
                            dataType: 'json',
                            success: function(mes) 
                            {
                                _this.bigScreenDeviceList = mes.data
                            },
                            error: function(msg)
                            {
                                console.info('ajax请求失败');
                            }
                        })
                    },
                    selectDeviceId: function(id)
                    {
                        // 设备运行详情
                        let _this = this;
                        $.ajax({
                            url: '?c=big_screen&a=getBigScreenCurrentTime',
                            type: 'get',
                            dataType: 'json',
                            data: {'id':id},
                            success: function(mes) 
                            {   
                                _this.bigScreenCurrentTime = mes.data

                            },
                            error: function(msg)
                            {
                                console.info('ajax请求失败');
                            }
                        })

                        $.ajax({
                            url: '?c=big_screen&a=getBigScreenDeviceRunInfo',
                            type: 'get',
                            dataType: 'json',
                            data: {'id':id},
                            success: function(mes) 
                            {
                                _this.bigScreenDeviceRunInfo = mes.data
                            },
                            error: function(msg)
                            {
                                console.info('ajax请求失败');
                            }
                        })

                        // 设备当前情况
                        $.ajax({
                            url: '?c=big_screen&a=getBigScreenDeviceRunCurrentInfo',
                            type: 'get',
                            dataType: 'json',
                            data: {'id':id},
                            success: function(mes) 
                            {
                                _this.bigScreenDeviceRunCurrentInfo = mes.data
                            },
                            error: function(msg)
                            {
                                console.info('ajax请求失败');
                            }
                        })

                        // 事件列表
                        $.ajax({
                            url: '?c=big_screen&a=getBigScreenDeviceEventList',
                            type: 'get',
                            dataType: 'json',
                            data: {'id':id},
                            success: function(mes) 
                            {
                                _this.bigScreenDeviceEventList = mes.data
                            },
                            error: function(msg)
                            {
                                console.info('ajax请求失败');
                            }
                        })

                        // 设备实时图名称
                        $.ajax({
                            url: '?c=big_screen&a=getBigScreenDeviceName',
                            type: 'get',
                            dataType: 'json',
                            data: {'id':id},
                            success: function(mes) 
                            {
                                _this.bigScreenDeviceName = mes.data

                            },
                            error: function(msg)
                            {
                                console.info('ajax请求失败');
                            }
                        })

                        // 实时数据
                        $.ajax({
                            url: '?c=big_screen&a=getBigScreenDeviceRealData',
                            type: 'get',
                            dataType: 'json',
                            data: {'id':id},
                            success: function(mes) 
                            {
                                _this.bigScreenDeviceRealData = mes.data

                            },
                            error: function(msg)
                            {
                                console.info('ajax请求失败');
                            }
                        })

                        // 历史数据
                        $.ajax({
                            url: '?c=big_screen&a=getBigScreenHospitalDataList',
                            type: 'get',
                            dataType: 'json',
                            data: {'id':id},
                            success: function(mes) 
                            {
                                _this.bigScreenHospitalDataList = mes.data
                            },
                            error: function(msg)
                            {
                                console.info('ajax请求失败');
                            }
                        })
                    },
                    // 设备运行详情
                    getBigScreenDeviceRunInfo: function(id)
                    {
                        let _this = this;
                        $.ajax({
                            url: '?c=big_screen&a=getBigScreenDeviceRunInfo',
                            type: 'get',
                            dataType: 'json',
                            data: {'id':id},
                            success: function(mes) 
                            {
                                _this.bigScreenDeviceRunInfo = mes.data
                            },
                            error: function(msg)
                            {
                                console.info('ajax请求失败');
                            }
                        })
                    },
                    // 设备当前情况
                    getBigScreenDeviceRunCurrentInfo: function(id)
                    {
                        let _this = this;
                        $.ajax({
                            url: '?c=big_screen&a=getBigScreenDeviceRunCurrentInfo',
                            type: 'get',
                            dataType: 'json',
                            data: {'id':id},
                            success: function(mes) 
                            {
                                _this.bigScreenDeviceRunCurrentInfo = mes.data
                            },
                            error: function(msg)
                            {
                                console.info('ajax请求失败');
                            }
                        })
                    },
                    // 事件列表
                    getBigScreenDeviceEventList: function(id)
                    {
                        let _this = this;
                        $.ajax({
                            url: '?c=big_screen&a=getBigScreenDeviceEventList',
                            type: 'get',
                            dataType: 'json',
                            data: {'id':id},
                            success: function(mes) 
                            {
                                _this.bigScreenDeviceEventList = mes.data
                            },
                            error: function(msg)
                            {
                                console.info('ajax请求失败');
                            }
                        })
                    },
                    // 设备实时图名称
                    getBigScreenDeviceName: function(id)
                    {
                        let _this = this;
                        $.ajax({
                            url: '?c=big_screen&a=getBigScreenDeviceName',
                            type: 'get',
                            dataType: 'json',
                            data: {'id':id},
                            success: function(mes) 
                            {
                                _this.bigScreenDeviceName = mes.data

                            },
                            error: function(msg)
                            {
                                console.info('ajax请求失败');
                            }
                        })
                    },
                    // 实时数据
                    getBigScreenDeviceRealData: function(id)
                    {
                        let _this = this;
                        $.ajax({
                            url: '?c=big_screen&a=getBigScreenDeviceRealData',
                            type: 'get',
                            dataType: 'json',
                            data: {'id':id},
                            success: function(mes) 
                            {
                                _this.bigScreenDeviceRealData = mes.data

                            },
                            error: function(msg)
                            {
                                console.info('ajax请求失败');
                            }
                        })
                    },
                    // 历史数据
                    getBigScreenHospitalDataList: function(id)
                    {
                        let _this = this;
                        $.ajax({
                            url: '?c=big_screen&a=getBigScreenHospitalDataList',
                            type: 'get',
                            dataType: 'json',
                            data: {'id':id},
                            success: function(mes) 
                            {
                                _this.bigScreenHospitalDataList = mes.data

                            },
                            error: function(msg)
                            {
                                console.info('ajax请求失败');
                            }
                        })
                    },
                    // 命令控制
                    command_control: function(message,name)
                    {
                        // websocket 连接
                        var socket = new WebSocket("wss://gpic.opmonitor.com/wss");

                        // 连接成功时触发
                        socket.onopen = function(event) 
                        {
                            console.log('=====================WebSocket 连接成功======================');


                            // 组合返回指令进行发送
                            $.ajax({
                                url: '?c=big_screen&a=getCommand',
                                type: 'get',
                                dataType: 'json',
                                data: {'command': message,'name': name},
                                success: function(mes) 
                                {
                                    for (let i = 0; i < mes.data.length; i++) {
                                        // 发送消息到服务器
                                        console.info(mes.data[i]);
                                        socket.send(mes.data[i]);
                                    }
                                    
                                },
                                error: function(msg)
                                {
                                    console.info('ajax请求失败');
                                }
                            })
                        };

                        // 关闭连接时触发
                        socket.onclose = function(event) 
                        {
                          console.log('WebSocket 连接关闭');
                        };

                        // 发生错误时触发
                        socket.onerror = function(event) 
                        {
                          console.error('WebSocket 错误:', event);
                        };
                        
                        // 指令发送成功 显示
                        // $('#toast-command').css('display','block');
                        $('#toast-command').text(message+'指令已发送成功!');
                        // 指令发送成功 消失
                        // setTimeout(function() {
                        //   $('#toast-command').text('')
                        // }, 3000);
                    },
                    // 获取当前更新时间
                    getBigScreenCurrentTime: function(id)
                    {
                        let _this = this;
                        $.ajax({
                            url: '?c=big_screen&a=getBigScreenCurrentTime',
                            type: 'get',
                            dataType: 'json',
                            data: {'id':id},
                            success: function(mes) 
                            {   
                                _this.bigScreenCurrentTime = mes.data

                            },
                            error: function(msg)
                            {
                                console.info('ajax请求失败');
                            }
                        })
                    },
                    // 每5秒更新数据
                    updateData: function()
                    {
                        let _this = this;
                        let device_name = this.bigScreenDeviceName;
                        $.ajax({
                            url: '?c=big_screen&a=convertId',
                            type: 'get',
                            dataType: 'json',
                            data: {'device_name':device_name},
                            success: function(mes) 
                            {   
                                console.info('执行了一次...')
                                _this.selectDeviceId(mes.data);

                            },
                            error: function(msg)
                            {
                                console.info('ajax请求失败');
                            }
                        })
                    }
                },
                created: function () {
                    this.getBigScreenDeviceList();
                    let _this = this;
                    // 首次加载更新一次 
                    $.ajax({
                        url: '?c=big_screen&a=getBigScreenDeviceId',
                        type: 'get',
                        dataType: 'json',
                        success: function(mes) 
                        {
                            // 获取当前更新时间
                            _this.getBigScreenCurrentTime(mes.data);
                            _this.getBigScreenDeviceName(mes.data);
                            _this.getBigScreenDeviceRunInfo(mes.data);
                            _this.getBigScreenDeviceEventList(mes.data);
                            _this.getBigScreenHospitalDataList(mes.data);
                            _this.getBigScreenDeviceRunCurrentInfo(mes.data);
                            _this.getBigScreenDeviceRealData(mes.data);
                        },
                        error: function(msg)
                        {
                            console.info('ajax请求失败');
                        }
                    })

                    // 连接mqtt
                    // 将在全局初始化一个 mqtt 变量
                    const clientId = 'mqttjs_' + Math.random().toString(16).substr(2, 8)

                    // 创建一个全局的 MQTT 客户端
                    var client = new Paho.MQTT.Client("mqtt.gpic.opmonitor.com", Number(8083), clientId);

                    // 设置接收消息的回调函数
                    client.onMessageArrived = function(message) {
                      // 在这里处理接收到的消息 将接收到的数据放到页面中
                      // 判断mqtt 上来的数据是否是当前页面的数据，如果是进行更新
                      let _that = _this;
                      device_name = _this.bigScreenDeviceName
                      
                      if(_this.bigScreenDeviceName != '')
                      {
                        $.ajax({
                            url: '?c=big_screen&a=judgeDevice',
                            type: 'get',
                            dataType: 'json',
                            data: {'did': JSON.parse(message.payloadString).did, 'name': _that.bigScreenDeviceName},
                            success: function(mes) 
                            {
                                if(mes.data == 'success')
                                {
                                    console.info(message.payloadString)
                                    // 传感器数据
                                    _that.bigScreenDeviceRealData.level_data = JSON.parse(message.payloadString).llv
                                    _that.bigScreenDeviceRealData.ph_data = JSON.parse(message.payloadString).phv
                                    _that.bigScreenDeviceRealData.rainfall_data = JSON.parse(message.payloadString).rfv
                                    _that.bigScreenDeviceRealData.ammonia_data = JSON.parse(message.payloadString).nh4v
                                    _that.bigScreenDeviceRealData.rainsnow = JSON.parse(message.payloadString).rsv
                                    // 传感器状态
                                    _that.bigScreenDeviceRunCurrentInfo.gate_up = JSON.parse(message.payloadString).gus == 1 ? '闸门上升' : '闸门停止上升'
                                    _that.bigScreenDeviceRunCurrentInfo.gate_down = JSON.parse(message.payloadString).gds == 1 ? '闸门下降' : '闸门停止下降'
                                    _that.bigScreenDeviceRunCurrentInfo.main_sewage_pump = JSON.parse(message.payloadString).mps == 1 ? '开启' : '关闭'
                                    _that.bigScreenDeviceRunCurrentInfo.standby_sewage_pump = JSON.parse(message.payloadString).sps == 1 ? '开启' : '关闭'
                                    _that.bigScreenDeviceRunCurrentInfo.main_rain_pump = JSON.parse(message.payloadString).rps == 1 ? '开启' : '关闭'
                                }
                            },
                            error: function(msg)
                            {
                                console.info('ajax请求失败');
                            }
                        })
                      }else
                      {
                        console.info('bigScreenDeviceName为空')
                      }
                    };

                    // 连接到 MQTT 代理
                    client.connect({
                      onSuccess: function() {
                        console.log("已连接到 MQTT 代理");
                        // 连接成功后，订阅主题
                        client.subscribe("gpic_d/#");
                      },
                      onFailure: function(errorMessage) {
                        console.log("连接失败: " + errorMessage.errorMessage);
                      }
                    });
                    // 每5秒更新一次
                    setInterval(() => {
                      this.updateData(); // 每隔一定时间更新数据
                    }, 2000);
                }
            })
        </script>