{"remainingRequest":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!E:\\视频边缘计算管理平台\\TransFlow\\src\\views\\index.vue?vue&type=script&lang=js&","dependencies":[{"path":"E:\\视频边缘计算管理平台\\TransFlow\\src\\views\\index.vue","mtime":1672206979779},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1672206975777},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\babel-loader\\lib\\index.js","mtime":1672206975618},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1672206975777},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\vue-loader\\lib\\index.js","mtime":1672206979279}],"contextDependencies":[],"result":["//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\r\n\r\nimport mqtt from \"mqtt\"; // mqtt协议\r\nimport editModal from \"@/views/bounced/maintenanceRemind\";\r\nimport analysisConfiguration from \"@/views/bounced/analysisConfiguration\";\r\n\r\nimport axios from 'axios'\r\nexport default {\r\n  data() {\r\n    return {\r\n      hideBoxShow:true, //隐藏箱子按钮显示隐藏\r\n      closeStatus: null,\r\n      modelOthers: false,\r\n      componentShow: \"\",\r\n      isShowBtn: true, //菜单按钮隐藏\r\n      isShowBtn1: false, //菜单按钮显示\r\n      inputVal: \"\",\r\n      dialogFormVisible: false,\r\n      areaComponent:false,\r\n      indexModule:false,\r\n      form: {\r\n          name: '',\r\n          region: '',\r\n          date1: '',\r\n          date2: '',\r\n          delivery: false,\r\n          type: [],\r\n          resource: '实时（触发）',\r\n          desc: ''\r\n        },\r\n        areaComponentform: {\r\n          name: '',\r\n          region: '',\r\n          date1: '',\r\n          date2: '',\r\n          delivery: false,\r\n          type: [],\r\n          resource: '实时（触发）',\r\n          desc: ''\r\n        },\r\n    //   dateTime: this.$moment(new Date()).format(\"LL\"),\r\n      nowTime: \"\",\r\n    //   weekday: this.$moment().format(\"dddd\"),\r\n      ins: 0,\r\n      imgUrl:'',\r\n      imgUrl1:'',\r\n      imgUrl2:'',\r\n      imgUrl3:'',\r\n      imgUrl4:'',\r\n      imgUrl5:'',\r\n      btnPic: [],\r\n      Data:[\r\n        {\r\n         title:'xx路口',\r\n        url:''  \r\n        },\r\n        {\r\n         title:'数据看板',\r\n        url:''  \r\n        },\r\n        {\r\n         title:'分析配置',\r\n        url:''  \r\n        },\r\n        {\r\n         title:'分析配置',\r\n        url:''  \r\n        }\r\n      ],\r\n      statusInfo: [\r\n        {\r\n          count: 15,\r\n          name: \"穿梭车在线数量\",\r\n        //   icon: require(\"../assets/images/运行设备图标.png\"),\r\n          color: \"#01A8FC\",\r\n        },\r\n        {\r\n          count: 26,\r\n          name: \"任务数量\",\r\n        //   icon: require(\"../assets/images/故障设备图标.png\"),\r\n          color: \"#FDA401\",\r\n        },\r\n      ],\r\n      messageInfo: [],\r\n      orderList: [],\r\n      enterList: [],\r\n      stockInfo: [],\r\n      perCent: 0,\r\n      perCent1: 0,\r\n      perCent2: 0,\r\n      facToal: \"\",\r\n      wbContent:'',\r\n    //   wxContent:'',\r\n      inContent:'',\r\n      outContent:'',\r\n      containerDetails:\"\",\r\n      locdesc:'',\r\n      weatherItem:{},\r\n      loadingShow1:true,\r\n      carInfo:[], //小车信息\r\n      carName:'',\r\n      palletizerInfo:[], //码垛机信息\r\n      palletizerName:'',\r\n      destackerInfo:[], //拆垛机信息\r\n      destackerName:'',\r\n      hoistInfo:[], //提升机信息’\r\n      hoistName:'', \r\n      battaryStationInfo:[],//快换电池装置\r\n      battaryStationName:\"\",\r\n      conveyorInfo:[], //输送机信息\r\n      conveyorName:\"\", \r\n    };\r\n  },\r\n  mounted() {\r\n\r\n    // this.getMessage();\r\n    // 消息提醒\r\n\r\n    // getfacKeepRecord({ type: 0 }).then((res) => {\r\n    //   this.messageInfo = this.messageInfo.concat(res.data);\r\n    //   console.log(this.messageInfo, \",,qweqw\");\r\n    //   // this.messageInfo.push(res.data[1]) \r\n    // });\r\n    // this.getDataByMqtt()\r\n    // this.getstatus();\r\n    // this.getInhouse();\r\n    // this.getOuthouse();\r\n    // this.handleWather();\r\n    // this.getDeviceStatusData()\r\n  },\r\n   created() {\r\n    this.testMqtt()\r\n    \r\n  },\r\n  methods: {\r\n     // 测试：mqtt测试\r\n    testMqtt() {\r\n         this.getDataByMqtt()\r\n      // 小车订阅\r\n    //   for (let key in this.carId) {\r\n    //     this.getDataByMqtt(\r\n    //       // \"ws:ht.mqtt.umayle.com:2022/mqtt\",\r\n    //       \"ws:220.163.114.157:8083/mqtt\",\r\n    //       \"Car\" + key,\r\n    //       this.carId[key]\r\n    //     );\r\n    //   }\r\n    //   //输送机入库订阅\r\n    //   for (let i = 0; i < this.convoyorCIdGroup.length; i++) {\r\n    //     this.getDataByMqtt(\r\n    //       \"ws:220.163.114.157:8083/mqtt\",\r\n    //       \"InConvoyor\" + this.convoyorCIdGroup[i],\r\n    //       this.convoyorCIdGroup[i]\r\n    //     );\r\n    //   }\r\n\r\n    //   //输送机出库订阅\r\n    //   for (let i = 0; i < this.outConvoyorCIdGroup.length; i++) {\r\n    //     this.getDataByMqtt(\r\n    //       \"ws:220.163.114.157:8083/mqtt\",\r\n    //       \"OUTConvoyor\" + this.outConvoyorCIdGroup[i],\r\n    //       this.outConvoyorCIdGroup[i]\r\n    //     );\r\n    //   }\r\n\r\n    //   for (let key in this.BattaryArr) {\r\n    //     this.getDataByMqtt(\r\n    //       \"ws:220.163.114.157:8083/mqtt\",\r\n    //       \"Battary_Sation\" + key,\r\n    //       this.BattaryArr[key]\r\n    //     );\r\n    //   }\r\n    //   // 升降机订阅elvArr\r\n    //   for (let key in this.elvArr) {\r\n    //     this.getDataByMqtt(\r\n    //       \"ws:220.163.114.157:8083/mqtt\",\r\n    //       \"ELV\" + key,\r\n    //       this.elvArr[key]\r\n    //     );\r\n    //   }\r\n    //   // 拆码跺机订阅\r\n    //   for (let key in this.stampArr) {\r\n    //     this.getDataByMqtt(\r\n    //       \"ws:220.163.114.157:8083/mqtt\",\r\n    //       \"INCMD\" + key,\r\n    //       this.stampArr[key]\r\n    //     );\r\n    //   }\r\n    },\r\n    onSubmit(){},\r\n    //模型加载等待\r\n    loadingShow(data){\r\n      this.loadingShow1 = data\r\n    },\r\n     // mqtt订阅（独立）\r\n    getDataByMqtt(url, topic, cIdNum) {\r\n      const clientId = \"test_id_\" + String(new Date().getTime()); // 用户名\r\n    //   const host = 'ws://49.234.27.18:10087/'; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt\r\n       const host = 'ws://172.16.1.168:10087/'; \r\n     \r\n      const options = {\r\n        // 配置\r\n        // 测试：订阅本机IP\r\n        // host: host,\r\n        // port: port,\r\n        // host:\"172.16.1.168:10086\",\r\n        keepalive: 60, // 心跳时间，默认60s，设置为0禁用\r\n        username: 'admin',  // 用户名（可选）\r\n        password: '123456',  // 密码（可选）\r\n        clientId: clientId, // 客户端ID，默认随机生成\r\n        protocolId: \"MQTT\",\r\n        protocolVersion: 4,\r\n        clean: true, // false在离线时接收QoS1和2的消息\r\n        reconnectPeriod: 2000, // 重连间隔，默认1000毫秒\r\n        connectTimeout: 30 * 1000, // 收到CONNACK之前的等待时间\r\n        will: {\r\n          // 遗嘱消息（客户端严重断开连接时Broker将自动发送的消息）\r\n          topic: \"img1\", // 要发布的主题\r\n          payload: \"[MQTT-TEST] 遗嘱消息：连接异常断开！\", // 要发布的消息\r\n          qos: 0, // QoS(Quality of Service)，QoS0：只负责发，QoS1：保证消息至少送达1次，QoS2：保证消息到且仅到1次\r\n          retain: false, // 保留标志\r\n        },\r\n      };\r\n      if (this.mqttClient == undefined) {\r\n        this.mqttClient = mqtt.connect(host, options); // 连接\r\n        // const client = mqtt.connect(host, options); // 连接\r\n        // const client = mqtt.connect(host)  // 连接\r\n        // 错误回调\r\n        console.log(\"this.mqttClient\",this.mqttClient)\r\n        this.mqttClient.on(\"error\", (err) => {\r\n          console.log(\"[MQTT-TEST] 连接错误：\",err);\r\n          this.mqttClient.end();\r\n        });\r\n        // 重连回调\r\n        this.mqttClient.on(\"reconnect\", (reconnect) => {\r\n          console.log(\"[MQTT-TEST] 重连中……\",reconnect);\r\n        });\r\n        // 连接回调\r\n        this.mqttClient.on(\"connect\", (connect) => {\r\n          console.log(\"[MQTT-TEST] 已连接的客户端ID: \",connect);\r\n            // 订阅\r\n           this.mqttClient.subscribe('img0', { qos: 0 });\r\n           this.mqttClient.subscribe('img1', { qos: 0 });\r\n           this.mqttClient.subscribe('img2', { qos: 0 });\r\n           this.mqttClient.subscribe('img3', { qos: 0 });\r\n           this.mqttClient.subscribe('img4', { qos: 0 });\r\n            this.mqttClient.subscribe('img5', { qos: 0 });\r\n            this.mqttClient.subscribe('stream0', { qos: 0 });\r\n             this.mqttClient.subscribe('stream1', { qos: 0 });\r\n              this.mqttClient.subscribe('stream2', { qos: 0 });\r\n               this.mqttClient.subscribe('stream3', { qos: 0 });\r\n                this.mqttClient.subscribe('stream4', { qos: 0 });\r\n                 this.mqttClient.subscribe('stream5', { qos: 0 });\r\n\r\n        });\r\n        // 接收回调\r\n        this.mqttClient.on(\"message\", (topic, message, packet) => {\r\n          console.log(\"[MQTT-TEST] 已连接的客户端ID: \",message);\r\n    \r\n          console.log(\r\n            `[MQTT-TEST] 从主题 \"${topic}\" 收到的内容: ${message.toString()}`,\r\n            new Date(),\r\n            new Date().getMilliseconds()\r\n          );\r\n          // 解析后端数据\r\n        //   let dataReceived = JSON.parse(message.toString());\r\n        //     console.log(\"[MQTT-TEST] 已连接的客户端ID: \",dataReceived);\r\n        //      try{\r\n        //         const utf8decoder = new TextDecoder()\r\n        //         const u8arr = new Uint8Array(message)\r\n        //         const temp = utf8decoder.decode(u8arr)\t// 将二进制数据转为字符串\r\n        //         const msg = JSON.parse(temp)\t\t//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据\r\n        //         console.log(\"msg\",msg)   //msg为转换后的JSON数据\r\n        //         this.imgUrl='data:image/png;base64,' + msg.pic;\r\n        //         console.log(\"imageUrl\",imageUrl)\r\n        //     }catch{\r\n        //         let imageType = 'arraybuffer';\r\n        //         const blob = new Blob([message], { type: imageType })\r\n        //         const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)\r\n        //         console.log(\"imageUrl\",imageUrl)\r\n        //     }\r\n          if (topic.indexOf(\"img0\") != -1) {\r\n             try{\r\n                const utf8decoder = new TextDecoder()\r\n                const u8arr = new Uint8Array(message)\r\n                const temp = utf8decoder.decode(u8arr)\t// 将二进制数据转为字符串\r\n                const msg = JSON.parse(temp)\t\t//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据\r\n                console.log(\"msg\",msg)   //msg为转换后的JSON数据\r\n                this.imgUrl='data:image/png;base64,' + msg.pic;\r\n                console.log(\"imageUrl\",imageUrl)\r\n            }catch{\r\n                let imageType = 'arraybuffer';\r\n                const blob = new Blob([message], { type: imageType })\r\n                const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)\r\n                console.log(\"imageUrl\",imageUrl)\r\n            }\r\n          } else if (topic.indexOf(\"img1\") != -1) {\r\n             try{\r\n                const utf8decoder = new TextDecoder()\r\n                const u8arr = new Uint8Array(message)\r\n                const temp = utf8decoder.decode(u8arr)\t// 将二进制数据转为字符串\r\n                const msg = JSON.parse(temp)\t\t//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据\r\n                console.log(\"msg\",msg)   //msg为转换后的JSON数据\r\n                this.imgUrl1='data:image/png;base64,' + msg.pic;\r\n                console.log(\"imageUrl\",imageUrl)\r\n            }catch{\r\n                let imageType = 'arraybuffer';\r\n                const blob = new Blob([message], { type: imageType })\r\n                const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)\r\n                console.log(\"imageUrl\",imageUrl)\r\n            }\r\n          } else if (topic.indexOf(\"img2\") != -1) {\r\n            try{\r\n                const utf8decoder = new TextDecoder()\r\n                const u8arr = new Uint8Array(message)\r\n                const temp = utf8decoder.decode(u8arr)\t// 将二进制数据转为字符串\r\n                const msg = JSON.parse(temp)\t\t//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据\r\n                console.log(\"msg\",msg)   //msg为转换后的JSON数据\r\n                this.imgUrl2='data:image/png;base64,' + msg.pic;\r\n                console.log(\"imageUrl\",imageUrl)\r\n            }catch{\r\n                let imageType = 'arraybuffer';\r\n                const blob = new Blob([message], { type: imageType })\r\n                const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)\r\n                console.log(\"imageUrl\",imageUrl)\r\n            }\r\n          } else if (topic.indexOf(\"img3\") != -1) {\r\n            try{\r\n                const utf8decoder = new TextDecoder()\r\n                const u8arr = new Uint8Array(message)\r\n                const temp = utf8decoder.decode(u8arr)\t// 将二进制数据转为字符串\r\n                const msg = JSON.parse(temp)\t\t//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据\r\n                console.log(\"msg\",msg)   //msg为转换后的JSON数据\r\n                this.imgUrl3='data:image/png;base64,' + msg.pic;\r\n                console.log(\"imageUrl\",imageUrl)\r\n            }catch{\r\n                let imageType = 'arraybuffer';\r\n                const blob = new Blob([message], { type: imageType })\r\n                const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)\r\n                console.log(\"imageUrl\",imageUrl)\r\n            }\r\n          } else if (topic.indexOf(\"img4\") != -1) {\r\n            try{\r\n                const utf8decoder = new TextDecoder()\r\n                const u8arr = new Uint8Array(message)\r\n                const temp = utf8decoder.decode(u8arr)\t// 将二进制数据转为字符串\r\n                const msg = JSON.parse(temp)\t\t//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据\r\n                console.log(\"msg\",msg)   //msg为转换后的JSON数据\r\n                this.imgUrl4='data:image/png;base64,' + msg.pic;\r\n                console.log(\"imageUrl\",imageUrl)\r\n            }catch{\r\n                let imageType = 'arraybuffer';\r\n                const blob = new Blob([message], { type: imageType })\r\n                const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)\r\n                console.log(\"imageUrl\",imageUrl)\r\n            }\r\n          } else if (topic.indexOf(\"img5\") != -1) {\r\n           try{\r\n                const utf8decoder = new TextDecoder()\r\n                const u8arr = new Uint8Array(message)\r\n                const temp = utf8decoder.decode(u8arr)\t// 将二进制数据转为字符串\r\n                const msg = JSON.parse(temp)\t\t//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据\r\n                console.log(\"msg\",msg)   //msg为转换后的JSON数据\r\n                this.imgUrl5='data:image/png;base64,' + msg.pic;\r\n                console.log(\"imageUrl\",imageUrl)\r\n            }catch{\r\n                let imageType = 'arraybuffer';\r\n                const blob = new Blob([message], { type: imageType })\r\n                const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)\r\n                console.log(\"imageUrl\",imageUrl)\r\n            }\r\n          }else if (topic.indexOf(\"stream0\") != -1) {\r\n            console.log(\r\n            `[MQTT-TEST] 从主题 \"${topic}\" 收到的内容: ${message.toString()}`,\r\n            new Date(),\r\n            new Date().getMilliseconds()\r\n          );\r\n          }else if (topic.indexOf(\"stream0\") != -1) {\r\n            console.log(\r\n            `[MQTT-TEST] 从主题 \"${topic}\" 收到的内容: ${message.toString()}`,\r\n            new Date(),\r\n            new Date().getMilliseconds()\r\n          );\r\n          }else if (topic.indexOf(\"stream1\") != -1) {\r\n            console.log(\r\n            `[MQTT-TEST] 从主题 \"${topic}\" 收到的内容: ${message.toString()}`,\r\n            new Date(),\r\n            new Date().getMilliseconds()\r\n          );\r\n          }else if (topic.indexOf(\"stream2\") != -1) {\r\n            console.log(\r\n            `[MQTT-TEST] 从主题 \"${topic}\" 收到的内容: ${message.toString()}`,\r\n            new Date(),\r\n            new Date().getMilliseconds()\r\n          );\r\n          }else if (topic.indexOf(\"stream3\") != -1) {\r\n            console.log(\r\n            `[MQTT-TEST] 从主题 \"${topic}\" 收到的内容: ${message.toString()}`,\r\n            new Date(),\r\n            new Date().getMilliseconds()\r\n          );\r\n          }else if (topic.indexOf(\"stream4\") != -1) {\r\n            console.log(\r\n            `[MQTT-TEST] 从主题 \"${topic}\" 收到的内容: ${message.toString()}`,\r\n            new Date(),\r\n            new Date().getMilliseconds()\r\n          );\r\n          }else if (topic.indexOf(\"stream5\") != -1) {\r\n            console.log(\r\n            `[MQTT-TEST] 从主题 \"${topic}\" 收到的内容: ${message.toString()}`,\r\n            new Date(),\r\n            new Date().getMilliseconds()\r\n          );\r\n          }\r\n         \r\n        });\r\n      }\r\n    \r\n     \r\n    },\r\n\r\n    handleSearch(){\r\n      this.modelOthers = true;\r\n      this.$refs.htModels.finbBox(this.inputVal);\r\n      console.log(this.$refs.htModels,'asdasdasd');\r\n       this.inputVal = ''\r\n    },\r\n   handleRow(val){\r\n      this.modelOthers = true;\r\n      this.$refs.htModels.finbBox(val);\r\n    },\r\n    // 天气\r\n    handleWather(){\r\n      axios({url:'https://restapi.amap.com/v3/weather/weatherInfo?key=bc2b906032fdd8a63cbd0790d656b1d7&city=620100',methods:''}).then(res=>{\r\n        this.weatherItem = res.data.lives[0]\r\n        console.log(this.weatherItem,'asdsads');\r\n      })\r\n    },\r\n    Onweather(name){\r\n    //   switch (name) {\r\n\t// \t\t\t\tcase \"多云\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/Cloudy .png');\r\n\t// \t\t\t\tcase \"阴\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/Cloudy .png')\r\n\t// \t\t\t\tcase \"暴雨\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/rainstorm.png')\r\n\t// \t\t\t\tcase \"冰雹\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/hail.png')\r\n\t// \t\t\t\tcase \"大风\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/gale.png')\r\n\t// \t\t\t\tcase \"大雪\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/bigsnow.png')\r\n\t// \t\t\t\tcase \"大雨\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/bigrain.png')\r\n\t// \t\t\t\tcase \"雷电\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/thunder.png')\r\n\t// \t\t\t\tcase \"雷阵雨\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/shower.png')\r\n\t// \t\t\t\tcase \"沙尘暴\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/sand.png')\r\n\t// \t\t\t\tcase \"晴\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/sun.png')\r\n\t// \t\t\t\tcase \"雾霾\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/smog.png')\r\n\t// \t\t\t\tcase \"小雪\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/snow.png')\r\n\t// \t\t\t\tcase \"小雨\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/rain.png')\r\n\t// \t\t\t\tcase \"雪\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/rainlitter.png')\r\n\t// \t\t\t\tcase \"多云\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/night.png')\r\n\t// \t\t\t\tcase \"雨夹雪\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/rainsnow.png')\r\n\t// \t\t\t\tcase \"月亮\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/moon.png')\r\n\t// \t\t\t\tcase \"中雪\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/mieddlesnow.png')\r\n\t// \t\t\t\tcase \"中雨\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/middlerain.png')\r\n\t// \t\t\t}\r\n    },\r\n    //隐藏箱子\r\n    hideBox(){\r\n        this.$refs.htModels.handleFirstBox();\r\n    }\r\n  },\r\n  components: {\r\n   editModal,\r\n   analysisConfiguration\r\n  },\r\n};\r\n",{"version":3,"sources":["index.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqGA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;;AAGA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"index.vue","sourceRoot":"src/views","sourcesContent":["<template>\r\n   <div class=\"content-box\">\r\n     \r\n  <div class=\"container\">\r\n    <!-- <nav>\r\n      <router-link :to=\"a.url\" :key=\"index\" v-for=\"(a,index) in Data\">{{a.title}}</router-link>\r\n       <el-button type=\"primary\" @click=\"dialogFormVisible = true\">断面组件</el-button>\r\n    </nav> -->\r\n    <el-tabs type=\"border-card\">\r\n  <el-tab-pane label=\"xx路口\">\r\n     <div style=\"width:60%;height:100%;display:inline-block;border:1px soild #eee;padding:15px\">\r\n    <img :src='imgUrl' width=\"100%\" height=\"100%\"/>\r\n  </div> \r\n  <div style=\"width:20%;height:100%;display:inline-block;border:1px soild #eee;padding:15px\">\r\n    <el-button type=\"primary\" @click=\"dialogFormVisible = true\">断面组件</el-button>\r\n    <el-button type=\"primary\" @click=\"areaComponent = true\">区域组件</el-button>\r\n    <el-button type=\"primary\" @click=\"indexModule = true\">指标组件</el-button>\r\n  </div> \r\n  <div style=\"width:20%;height:100%;display:inline-block;border:1px soild #eee;padding:15px\">\r\n  </div> \r\n  </el-tab-pane>\r\n  <el-tab-pane label=\"数据看板\">数据看板</el-tab-pane>\r\n  <el-tab-pane label=\"分析配置\">\r\n     <analysisConfiguration ></analysisConfiguration> \r\n  </el-tab-pane>\r\n  <el-tab-pane label=\"分析状态\">\r\n   <editModal ></editModal> \r\n  </el-tab-pane>\r\n   <el-tab-pane label=\"存储\">存储</el-tab-pane>\r\n    </el-tabs>\r\n    <!-- <div style=\"width:30%;height:300px;display:inline-block\">\r\n    <img :src='imgUrl' width=\"100%\" height=\"100%\"/>\r\n  </div>  \r\n  <div style=\"width:30%;height:300px;display:inline-block\">\r\n    <img :src='imgUrl1' width=\"100%\" height=\"100%\"/>\r\n  </div> \r\n  <div style=\"width:30%;height:300px;display:inline-block\">\r\n    <img :src='imgUrl2' width=\"100%\" height=\"100%\"/>\r\n  </div> \r\n  <div style=\"width:30%;height:300px;display:inline-block\">\r\n    <img :src='imgUrl3' width=\"100%\" height=\"100%\"/>\r\n  </div> \r\n  <div style=\"width:30%;height:300px;display:inline-block\">\r\n    <img :src='imgUrl4' width=\"100%\" height=\"100%\"/>\r\n  </div> \r\n  <div style=\"width:30%;height:300px;display:inline-block\">\r\n    <img :src='imgUrl5' width=\"100%\" height=\"100%\"/>\r\n  </div>  -->\r\n \r\n  </div>\r\n  <div id=\"dialog\" class=\"margin-top: 0px !important;\">\r\n      <el-dialog\r\n    title=\"断面组件配置\"\r\n    width=\"40%\"\r\n    :visible.sync=\"dialogFormVisible\"\r\n  >\r\n  <el-form ref=\"form\" :model=\"form\" label-width=\"80px\">\r\n     <!-- <el-form-item label=\"实时性\">\r\n    <el-radio-group v-model=\"form.resource\">\r\n      <el-radio label=\"实时（触发）\"></el-radio>\r\n      <el-radio label=\"间隔\"></el-radio>\r\n    </el-radio-group>\r\n  </el-form-item> -->\r\n  <el-form-item label=\"断面名称\">\r\n    <el-input v-model=\"form.name\"></el-input>\r\n  </el-form-item>\r\n <el-form-item label=\"断面方向\">\r\n    <el-select v-model=\"areaComponentform.region\" placeholder=\"请选择类型\">\r\n      <el-option label=\"正向\" value=\"car\"></el-option>\r\n      <el-option label=\"方向\" value=\"bus\"></el-option>\r\n       <el-option label=\"双向\" value=\"kache\"></el-option>\r\n    </el-select>\r\n  </el-form-item>\r\n \r\n  <el-form-item>\r\n    <el-button type=\"primary\" @click=\"onSubmit\">确认</el-button>\r\n    <el-button @click=\"dialogFormVisible = false\">取消</el-button>\r\n  </el-form-item>\r\n</el-form>\r\n  </el-dialog>\r\n  <el-dialog\r\n    title=\"区域组件配置\"\r\n    width=\"40%\"\r\n    :visible.sync=\"areaComponent\"\r\n  >\r\n  <el-form ref=\"form\" :model=\"areaComponentform\" label-width=\"80px\">    \r\n  <el-form-item label=\"区域名称\">\r\n    <el-input v-model=\"form.name\"></el-input>\r\n  </el-form-item>\r\n  <el-form-item>\r\n    <el-button type=\"primary\" @click=\"onSubmit\">确认</el-button>\r\n    <el-button @click=\"dialogFormVisible = false\">取消</el-button>\r\n  </el-form-item>\r\n</el-form>\r\n  </el-dialog>\r\n  </div>\r\n</div>\r\n</template>\r\n\r\n<script>\r\n\r\nimport mqtt from \"mqtt\"; // mqtt协议\r\nimport editModal from \"@/views/bounced/maintenanceRemind\";\r\nimport analysisConfiguration from \"@/views/bounced/analysisConfiguration\";\r\n\r\nimport axios from 'axios'\r\nexport default {\r\n  data() {\r\n    return {\r\n      hideBoxShow:true, //隐藏箱子按钮显示隐藏\r\n      closeStatus: null,\r\n      modelOthers: false,\r\n      componentShow: \"\",\r\n      isShowBtn: true, //菜单按钮隐藏\r\n      isShowBtn1: false, //菜单按钮显示\r\n      inputVal: \"\",\r\n      dialogFormVisible: false,\r\n      areaComponent:false,\r\n      indexModule:false,\r\n      form: {\r\n          name: '',\r\n          region: '',\r\n          date1: '',\r\n          date2: '',\r\n          delivery: false,\r\n          type: [],\r\n          resource: '实时（触发）',\r\n          desc: ''\r\n        },\r\n        areaComponentform: {\r\n          name: '',\r\n          region: '',\r\n          date1: '',\r\n          date2: '',\r\n          delivery: false,\r\n          type: [],\r\n          resource: '实时（触发）',\r\n          desc: ''\r\n        },\r\n    //   dateTime: this.$moment(new Date()).format(\"LL\"),\r\n      nowTime: \"\",\r\n    //   weekday: this.$moment().format(\"dddd\"),\r\n      ins: 0,\r\n      imgUrl:'',\r\n      imgUrl1:'',\r\n      imgUrl2:'',\r\n      imgUrl3:'',\r\n      imgUrl4:'',\r\n      imgUrl5:'',\r\n      btnPic: [],\r\n      Data:[\r\n        {\r\n         title:'xx路口',\r\n        url:''  \r\n        },\r\n        {\r\n         title:'数据看板',\r\n        url:''  \r\n        },\r\n        {\r\n         title:'分析配置',\r\n        url:''  \r\n        },\r\n        {\r\n         title:'分析配置',\r\n        url:''  \r\n        }\r\n      ],\r\n      statusInfo: [\r\n        {\r\n          count: 15,\r\n          name: \"穿梭车在线数量\",\r\n        //   icon: require(\"../assets/images/运行设备图标.png\"),\r\n          color: \"#01A8FC\",\r\n        },\r\n        {\r\n          count: 26,\r\n          name: \"任务数量\",\r\n        //   icon: require(\"../assets/images/故障设备图标.png\"),\r\n          color: \"#FDA401\",\r\n        },\r\n      ],\r\n      messageInfo: [],\r\n      orderList: [],\r\n      enterList: [],\r\n      stockInfo: [],\r\n      perCent: 0,\r\n      perCent1: 0,\r\n      perCent2: 0,\r\n      facToal: \"\",\r\n      wbContent:'',\r\n    //   wxContent:'',\r\n      inContent:'',\r\n      outContent:'',\r\n      containerDetails:\"\",\r\n      locdesc:'',\r\n      weatherItem:{},\r\n      loadingShow1:true,\r\n      carInfo:[], //小车信息\r\n      carName:'',\r\n      palletizerInfo:[], //码垛机信息\r\n      palletizerName:'',\r\n      destackerInfo:[], //拆垛机信息\r\n      destackerName:'',\r\n      hoistInfo:[], //提升机信息’\r\n      hoistName:'', \r\n      battaryStationInfo:[],//快换电池装置\r\n      battaryStationName:\"\",\r\n      conveyorInfo:[], //输送机信息\r\n      conveyorName:\"\", \r\n    };\r\n  },\r\n  mounted() {\r\n\r\n    // this.getMessage();\r\n    // 消息提醒\r\n\r\n    // getfacKeepRecord({ type: 0 }).then((res) => {\r\n    //   this.messageInfo = this.messageInfo.concat(res.data);\r\n    //   console.log(this.messageInfo, \",,qweqw\");\r\n    //   // this.messageInfo.push(res.data[1]) \r\n    // });\r\n    // this.getDataByMqtt()\r\n    // this.getstatus();\r\n    // this.getInhouse();\r\n    // this.getOuthouse();\r\n    // this.handleWather();\r\n    // this.getDeviceStatusData()\r\n  },\r\n   created() {\r\n    this.testMqtt()\r\n    \r\n  },\r\n  methods: {\r\n     // 测试：mqtt测试\r\n    testMqtt() {\r\n         this.getDataByMqtt()\r\n      // 小车订阅\r\n    //   for (let key in this.carId) {\r\n    //     this.getDataByMqtt(\r\n    //       // \"ws:ht.mqtt.umayle.com:2022/mqtt\",\r\n    //       \"ws:220.163.114.157:8083/mqtt\",\r\n    //       \"Car\" + key,\r\n    //       this.carId[key]\r\n    //     );\r\n    //   }\r\n    //   //输送机入库订阅\r\n    //   for (let i = 0; i < this.convoyorCIdGroup.length; i++) {\r\n    //     this.getDataByMqtt(\r\n    //       \"ws:220.163.114.157:8083/mqtt\",\r\n    //       \"InConvoyor\" + this.convoyorCIdGroup[i],\r\n    //       this.convoyorCIdGroup[i]\r\n    //     );\r\n    //   }\r\n\r\n    //   //输送机出库订阅\r\n    //   for (let i = 0; i < this.outConvoyorCIdGroup.length; i++) {\r\n    //     this.getDataByMqtt(\r\n    //       \"ws:220.163.114.157:8083/mqtt\",\r\n    //       \"OUTConvoyor\" + this.outConvoyorCIdGroup[i],\r\n    //       this.outConvoyorCIdGroup[i]\r\n    //     );\r\n    //   }\r\n\r\n    //   for (let key in this.BattaryArr) {\r\n    //     this.getDataByMqtt(\r\n    //       \"ws:220.163.114.157:8083/mqtt\",\r\n    //       \"Battary_Sation\" + key,\r\n    //       this.BattaryArr[key]\r\n    //     );\r\n    //   }\r\n    //   // 升降机订阅elvArr\r\n    //   for (let key in this.elvArr) {\r\n    //     this.getDataByMqtt(\r\n    //       \"ws:220.163.114.157:8083/mqtt\",\r\n    //       \"ELV\" + key,\r\n    //       this.elvArr[key]\r\n    //     );\r\n    //   }\r\n    //   // 拆码跺机订阅\r\n    //   for (let key in this.stampArr) {\r\n    //     this.getDataByMqtt(\r\n    //       \"ws:220.163.114.157:8083/mqtt\",\r\n    //       \"INCMD\" + key,\r\n    //       this.stampArr[key]\r\n    //     );\r\n    //   }\r\n    },\r\n    onSubmit(){},\r\n    //模型加载等待\r\n    loadingShow(data){\r\n      this.loadingShow1 = data\r\n    },\r\n     // mqtt订阅（独立）\r\n    getDataByMqtt(url, topic, cIdNum) {\r\n      const clientId = \"test_id_\" + String(new Date().getTime()); // 用户名\r\n    //   const host = 'ws://49.234.27.18:10087/'; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt\r\n       const host = 'ws://172.16.1.168:10087/'; \r\n     \r\n      const options = {\r\n        // 配置\r\n        // 测试：订阅本机IP\r\n        // host: host,\r\n        // port: port,\r\n        // host:\"172.16.1.168:10086\",\r\n        keepalive: 60, // 心跳时间，默认60s，设置为0禁用\r\n        username: 'admin',  // 用户名（可选）\r\n        password: '123456',  // 密码（可选）\r\n        clientId: clientId, // 客户端ID，默认随机生成\r\n        protocolId: \"MQTT\",\r\n        protocolVersion: 4,\r\n        clean: true, // false在离线时接收QoS1和2的消息\r\n        reconnectPeriod: 2000, // 重连间隔，默认1000毫秒\r\n        connectTimeout: 30 * 1000, // 收到CONNACK之前的等待时间\r\n        will: {\r\n          // 遗嘱消息（客户端严重断开连接时Broker将自动发送的消息）\r\n          topic: \"img1\", // 要发布的主题\r\n          payload: \"[MQTT-TEST] 遗嘱消息：连接异常断开！\", // 要发布的消息\r\n          qos: 0, // QoS(Quality of Service)，QoS0：只负责发，QoS1：保证消息至少送达1次，QoS2：保证消息到且仅到1次\r\n          retain: false, // 保留标志\r\n        },\r\n      };\r\n      if (this.mqttClient == undefined) {\r\n        this.mqttClient = mqtt.connect(host, options); // 连接\r\n        // const client = mqtt.connect(host, options); // 连接\r\n        // const client = mqtt.connect(host)  // 连接\r\n        // 错误回调\r\n        console.log(\"this.mqttClient\",this.mqttClient)\r\n        this.mqttClient.on(\"error\", (err) => {\r\n          console.log(\"[MQTT-TEST] 连接错误：\",err);\r\n          this.mqttClient.end();\r\n        });\r\n        // 重连回调\r\n        this.mqttClient.on(\"reconnect\", (reconnect) => {\r\n          console.log(\"[MQTT-TEST] 重连中……\",reconnect);\r\n        });\r\n        // 连接回调\r\n        this.mqttClient.on(\"connect\", (connect) => {\r\n          console.log(\"[MQTT-TEST] 已连接的客户端ID: \",connect);\r\n            // 订阅\r\n           this.mqttClient.subscribe('img0', { qos: 0 });\r\n           this.mqttClient.subscribe('img1', { qos: 0 });\r\n           this.mqttClient.subscribe('img2', { qos: 0 });\r\n           this.mqttClient.subscribe('img3', { qos: 0 });\r\n           this.mqttClient.subscribe('img4', { qos: 0 });\r\n            this.mqttClient.subscribe('img5', { qos: 0 });\r\n            this.mqttClient.subscribe('stream0', { qos: 0 });\r\n             this.mqttClient.subscribe('stream1', { qos: 0 });\r\n              this.mqttClient.subscribe('stream2', { qos: 0 });\r\n               this.mqttClient.subscribe('stream3', { qos: 0 });\r\n                this.mqttClient.subscribe('stream4', { qos: 0 });\r\n                 this.mqttClient.subscribe('stream5', { qos: 0 });\r\n\r\n        });\r\n        // 接收回调\r\n        this.mqttClient.on(\"message\", (topic, message, packet) => {\r\n          console.log(\"[MQTT-TEST] 已连接的客户端ID: \",message);\r\n    \r\n          console.log(\r\n            `[MQTT-TEST] 从主题 \"${topic}\" 收到的内容: ${message.toString()}`,\r\n            new Date(),\r\n            new Date().getMilliseconds()\r\n          );\r\n          // 解析后端数据\r\n        //   let dataReceived = JSON.parse(message.toString());\r\n        //     console.log(\"[MQTT-TEST] 已连接的客户端ID: \",dataReceived);\r\n        //      try{\r\n        //         const utf8decoder = new TextDecoder()\r\n        //         const u8arr = new Uint8Array(message)\r\n        //         const temp = utf8decoder.decode(u8arr)\t// 将二进制数据转为字符串\r\n        //         const msg = JSON.parse(temp)\t\t//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据\r\n        //         console.log(\"msg\",msg)   //msg为转换后的JSON数据\r\n        //         this.imgUrl='data:image/png;base64,' + msg.pic;\r\n        //         console.log(\"imageUrl\",imageUrl)\r\n        //     }catch{\r\n        //         let imageType = 'arraybuffer';\r\n        //         const blob = new Blob([message], { type: imageType })\r\n        //         const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)\r\n        //         console.log(\"imageUrl\",imageUrl)\r\n        //     }\r\n          if (topic.indexOf(\"img0\") != -1) {\r\n             try{\r\n                const utf8decoder = new TextDecoder()\r\n                const u8arr = new Uint8Array(message)\r\n                const temp = utf8decoder.decode(u8arr)\t// 将二进制数据转为字符串\r\n                const msg = JSON.parse(temp)\t\t//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据\r\n                console.log(\"msg\",msg)   //msg为转换后的JSON数据\r\n                this.imgUrl='data:image/png;base64,' + msg.pic;\r\n                console.log(\"imageUrl\",imageUrl)\r\n            }catch{\r\n                let imageType = 'arraybuffer';\r\n                const blob = new Blob([message], { type: imageType })\r\n                const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)\r\n                console.log(\"imageUrl\",imageUrl)\r\n            }\r\n          } else if (topic.indexOf(\"img1\") != -1) {\r\n             try{\r\n                const utf8decoder = new TextDecoder()\r\n                const u8arr = new Uint8Array(message)\r\n                const temp = utf8decoder.decode(u8arr)\t// 将二进制数据转为字符串\r\n                const msg = JSON.parse(temp)\t\t//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据\r\n                console.log(\"msg\",msg)   //msg为转换后的JSON数据\r\n                this.imgUrl1='data:image/png;base64,' + msg.pic;\r\n                console.log(\"imageUrl\",imageUrl)\r\n            }catch{\r\n                let imageType = 'arraybuffer';\r\n                const blob = new Blob([message], { type: imageType })\r\n                const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)\r\n                console.log(\"imageUrl\",imageUrl)\r\n            }\r\n          } else if (topic.indexOf(\"img2\") != -1) {\r\n            try{\r\n                const utf8decoder = new TextDecoder()\r\n                const u8arr = new Uint8Array(message)\r\n                const temp = utf8decoder.decode(u8arr)\t// 将二进制数据转为字符串\r\n                const msg = JSON.parse(temp)\t\t//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据\r\n                console.log(\"msg\",msg)   //msg为转换后的JSON数据\r\n                this.imgUrl2='data:image/png;base64,' + msg.pic;\r\n                console.log(\"imageUrl\",imageUrl)\r\n            }catch{\r\n                let imageType = 'arraybuffer';\r\n                const blob = new Blob([message], { type: imageType })\r\n                const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)\r\n                console.log(\"imageUrl\",imageUrl)\r\n            }\r\n          } else if (topic.indexOf(\"img3\") != -1) {\r\n            try{\r\n                const utf8decoder = new TextDecoder()\r\n                const u8arr = new Uint8Array(message)\r\n                const temp = utf8decoder.decode(u8arr)\t// 将二进制数据转为字符串\r\n                const msg = JSON.parse(temp)\t\t//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据\r\n                console.log(\"msg\",msg)   //msg为转换后的JSON数据\r\n                this.imgUrl3='data:image/png;base64,' + msg.pic;\r\n                console.log(\"imageUrl\",imageUrl)\r\n            }catch{\r\n                let imageType = 'arraybuffer';\r\n                const blob = new Blob([message], { type: imageType })\r\n                const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)\r\n                console.log(\"imageUrl\",imageUrl)\r\n            }\r\n          } else if (topic.indexOf(\"img4\") != -1) {\r\n            try{\r\n                const utf8decoder = new TextDecoder()\r\n                const u8arr = new Uint8Array(message)\r\n                const temp = utf8decoder.decode(u8arr)\t// 将二进制数据转为字符串\r\n                const msg = JSON.parse(temp)\t\t//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据\r\n                console.log(\"msg\",msg)   //msg为转换后的JSON数据\r\n                this.imgUrl4='data:image/png;base64,' + msg.pic;\r\n                console.log(\"imageUrl\",imageUrl)\r\n            }catch{\r\n                let imageType = 'arraybuffer';\r\n                const blob = new Blob([message], { type: imageType })\r\n                const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)\r\n                console.log(\"imageUrl\",imageUrl)\r\n            }\r\n          } else if (topic.indexOf(\"img5\") != -1) {\r\n           try{\r\n                const utf8decoder = new TextDecoder()\r\n                const u8arr = new Uint8Array(message)\r\n                const temp = utf8decoder.decode(u8arr)\t// 将二进制数据转为字符串\r\n                const msg = JSON.parse(temp)\t\t//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据\r\n                console.log(\"msg\",msg)   //msg为转换后的JSON数据\r\n                this.imgUrl5='data:image/png;base64,' + msg.pic;\r\n                console.log(\"imageUrl\",imageUrl)\r\n            }catch{\r\n                let imageType = 'arraybuffer';\r\n                const blob = new Blob([message], { type: imageType })\r\n                const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)\r\n                console.log(\"imageUrl\",imageUrl)\r\n            }\r\n          }else if (topic.indexOf(\"stream0\") != -1) {\r\n            console.log(\r\n            `[MQTT-TEST] 从主题 \"${topic}\" 收到的内容: ${message.toString()}`,\r\n            new Date(),\r\n            new Date().getMilliseconds()\r\n          );\r\n          }else if (topic.indexOf(\"stream0\") != -1) {\r\n            console.log(\r\n            `[MQTT-TEST] 从主题 \"${topic}\" 收到的内容: ${message.toString()}`,\r\n            new Date(),\r\n            new Date().getMilliseconds()\r\n          );\r\n          }else if (topic.indexOf(\"stream1\") != -1) {\r\n            console.log(\r\n            `[MQTT-TEST] 从主题 \"${topic}\" 收到的内容: ${message.toString()}`,\r\n            new Date(),\r\n            new Date().getMilliseconds()\r\n          );\r\n          }else if (topic.indexOf(\"stream2\") != -1) {\r\n            console.log(\r\n            `[MQTT-TEST] 从主题 \"${topic}\" 收到的内容: ${message.toString()}`,\r\n            new Date(),\r\n            new Date().getMilliseconds()\r\n          );\r\n          }else if (topic.indexOf(\"stream3\") != -1) {\r\n            console.log(\r\n            `[MQTT-TEST] 从主题 \"${topic}\" 收到的内容: ${message.toString()}`,\r\n            new Date(),\r\n            new Date().getMilliseconds()\r\n          );\r\n          }else if (topic.indexOf(\"stream4\") != -1) {\r\n            console.log(\r\n            `[MQTT-TEST] 从主题 \"${topic}\" 收到的内容: ${message.toString()}`,\r\n            new Date(),\r\n            new Date().getMilliseconds()\r\n          );\r\n          }else if (topic.indexOf(\"stream5\") != -1) {\r\n            console.log(\r\n            `[MQTT-TEST] 从主题 \"${topic}\" 收到的内容: ${message.toString()}`,\r\n            new Date(),\r\n            new Date().getMilliseconds()\r\n          );\r\n          }\r\n         \r\n        });\r\n      }\r\n    \r\n     \r\n    },\r\n\r\n    handleSearch(){\r\n      this.modelOthers = true;\r\n      this.$refs.htModels.finbBox(this.inputVal);\r\n      console.log(this.$refs.htModels,'asdasdasd');\r\n       this.inputVal = ''\r\n    },\r\n   handleRow(val){\r\n      this.modelOthers = true;\r\n      this.$refs.htModels.finbBox(val);\r\n    },\r\n    // 天气\r\n    handleWather(){\r\n      axios({url:'https://restapi.amap.com/v3/weather/weatherInfo?key=bc2b906032fdd8a63cbd0790d656b1d7&city=620100',methods:''}).then(res=>{\r\n        this.weatherItem = res.data.lives[0]\r\n        console.log(this.weatherItem,'asdsads');\r\n      })\r\n    },\r\n    Onweather(name){\r\n    //   switch (name) {\r\n\t// \t\t\t\tcase \"多云\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/Cloudy .png');\r\n\t// \t\t\t\tcase \"阴\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/Cloudy .png')\r\n\t// \t\t\t\tcase \"暴雨\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/rainstorm.png')\r\n\t// \t\t\t\tcase \"冰雹\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/hail.png')\r\n\t// \t\t\t\tcase \"大风\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/gale.png')\r\n\t// \t\t\t\tcase \"大雪\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/bigsnow.png')\r\n\t// \t\t\t\tcase \"大雨\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/bigrain.png')\r\n\t// \t\t\t\tcase \"雷电\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/thunder.png')\r\n\t// \t\t\t\tcase \"雷阵雨\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/shower.png')\r\n\t// \t\t\t\tcase \"沙尘暴\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/sand.png')\r\n\t// \t\t\t\tcase \"晴\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/sun.png')\r\n\t// \t\t\t\tcase \"雾霾\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/smog.png')\r\n\t// \t\t\t\tcase \"小雪\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/snow.png')\r\n\t// \t\t\t\tcase \"小雨\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/rain.png')\r\n\t// \t\t\t\tcase \"雪\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/rainlitter.png')\r\n\t// \t\t\t\tcase \"多云\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/night.png')\r\n\t// \t\t\t\tcase \"雨夹雪\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/rainsnow.png')\r\n\t// \t\t\t\tcase \"月亮\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/moon.png')\r\n\t// \t\t\t\tcase \"中雪\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/mieddlesnow.png')\r\n\t// \t\t\t\tcase \"中雨\":\r\n\t// \t\t\t\t\treturn require('../assets/weather/middlerain.png')\r\n\t// \t\t\t}\r\n    },\r\n    //隐藏箱子\r\n    hideBox(){\r\n        this.$refs.htModels.handleFirstBox();\r\n    }\r\n  },\r\n  components: {\r\n   editModal,\r\n   analysisConfiguration\r\n  },\r\n};\r\n</script>\r\n<style>\r\n\r\n</style>\r\n"]}]}