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