TransFlow/node_modules/.cache/vue-loader/71732e1018ccc75bf9ab964f896...

1 line
52 KiB
JSON
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{"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":1672105249367},{"path":"D:\\视频边缘1215\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1671074740928},{"path":"D:\\视频边缘1215\\TransFlow\\node_modules\\thread-loader\\dist\\cjs.js","mtime":1671074747683},{"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//\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\";\n\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 },\n};\n",{"version":3,"sources":["index.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqNA;AACA;;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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","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=\"分析配置\">分析配置</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 <el-form-item label=\"时间\">\n <el-col :span=\"11\">\n <el-date-picker type=\"date\" placeholder=\"选择日期\" v-model=\"form.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=\"form.date2\" style=\"width: 100%;\"></el-time-picker>\n </el-col>\n </el-form-item>\n <el-form-item label=\"类型\">\n <el-select v-model=\"form.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 <el-form-item label=\"车牌\">\n <el-input v-model=\"form.name\"></el-input>\n </el-form-item>\n <el-form-item label=\"车道\">\n <el-input v-model=\"form.name\"></el-input>\n </el-form-item>\n \n <el-form-item label=\"事件\">\n <el-input type=\"textarea\" v-model=\"form.desc\"></el-input>\n </el-form-item>\n <el-form-item label=\"速度\" v-if=\"form.resource=='实时(触发)'\">\n <el-input v-model=\"form.name\"></el-input>\n </el-form-item>\n <el-form-item label=\"车头时距\" v-if=\"form.resource=='实时(触发)'\">\n <el-input v-model=\"form.name\"></el-input>\n </el-form-item>\n <el-form-item label=\"平均速度\" v-if=\"form.resource=='间隔'\">\n <el-input v-model=\"form.name\"></el-input>\n </el-form-item>\n <el-form-item label=\"平均流量\" v-if=\"form.resource=='间隔'\">\n <el-input v-model=\"form.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 <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\";\n\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 },\n};\n</script>\n<style>\n\n</style>\n"]}]}