1 line
31 KiB
JSON
1 line
31 KiB
JSON
{"remainingRequest":"D:\\视频边缘1215\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\视频边缘1215\\TransFlow\\src\\views\\index.vue?vue&type=style&index=0&id=a83bd3b0&scoped=true&lang=css&","dependencies":[{"path":"D:\\视频边缘1215\\TransFlow\\src\\views\\index.vue","mtime":1672799272806},{"path":"D:\\视频边缘1215\\TransFlow\\node_modules\\css-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\视频边缘1215\\TransFlow\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":1671074747916},{"path":"D:\\视频边缘1215\\TransFlow\\node_modules\\postcss-loader\\src\\index.js","mtime":1671074746320},{"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\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.el-form-item {\n margin-bottom: 15px;\n}\n",{"version":3,"sources":["index.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+pBA;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:75%;height:900px;display:inline-block;border:1px soild #eee;\">\n <iframe id=\"mapModule\" src=\"./VideoWeb/index.html\" frameborder=\"0\" style=\"width: 100%; height:100%;\"></iframe>\n <!-- <iframe src=\"./VideoWeb/index.html\" style=\"height: 100%; width: 100%;border: none\" \n ref=\"iframe\"></iframe> -->\n </div>\n <div style=\"width:20%;height:100%;display:inline-block;border:1px soild #eee;padding:15px;\">\n\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=\"trajectory=true\">轨迹组件</el-button>\n <el-button type=\"primary\" @click=\"speed = true\">速度组件</el-button>\n <el-button type=\"primary\" @click=\"flow = true\">流量组件</el-button>\n <el-button type=\"primary\" @click=\"indexModule = true\">车头时距</el-button>\n <el-button type=\"primary\" @click=\"indexModule = true\">排队数</el-button>\n <el-button type=\"primary\" @click=\"indexModule = true\">检测数</el-button>\n <el-button type=\"primary\" @click=\"indexModule = true\">延误</el-button>\n <el-button type=\"primary\" @click=\"indexModule = true\">拥堵</el-button>\n\n </div>\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\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=\"trajectory=true\">轨迹</el-button>\n <el-button type=\"primary\" @click=\"speed = true\">速度组件</el-button>\n <el-button type=\"primary\" @click=\"flow = true\">流量组件</el-button>\n <el-button type=\"primary\" @click=\"indexModule = true\">车头时距</el-button>\n <el-button type=\"primary\" @click=\"indexModule = true\">排队数</el-button>\n <el-button type=\"primary\" @click=\"indexModule = true\">检测数</el-button>\n <el-button type=\"primary\" @click=\"indexModule = true\">延误</el-button>\n <el-button type=\"primary\" @click=\"indexModule = true\">拥堵</el-button>\n\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=\"数据看板\">\n <dataBoard></dataBoard>\n </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 title=\"断面组件配置\" width=\"40%\" :visible.sync=\"dialogFormVisible\">\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-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-select>\n </el-form-item>\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 title=\"区域组件配置\" width=\"40%\" :visible.sync=\"areaComponent\">\n <el-form ref=\"form\" :model=\"areaComponentform\" label-width=\"80px\">\n <el-form-item label=\"区域名称\">\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 <el-dialog title=\"轨迹组件配置\" width=\"40%\" :visible.sync=\"trajectory\">\n <el-form ref=\"form\" :model=\"trackForm\" label-width=\"80px\">\n <el-form-item label=\"轨迹名称：\">\n <el-input v-model=\"trackForm.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 title=\"速度组件配置\" width=\"40%\" :visible.sync=\"speed\">\n <el-form ref=\"form\" :model=\"speedForm\" label-width=\"80px\">\n <el-form-item label=\"速度组件名称：\">\n <el-input v-model=\"speedForm.name\"></el-input>\n </el-form-item>\n <el-form-item label=\"数值筛选：\">\n <el-input v-model=\"speedForm.num\"></el-input>\n </el-form-item>\n <el-form-item label=\"时间模式：\">\n <el-select v-model=\"speedForm.timeModel\" placeholder=\"请选择时间模式\">\n <el-option label=\"触发\" value=\"touch\"></el-option>\n <el-option label=\"周期时刻\" value=\"timeing\"></el-option>\n <el-option label=\"周期统计\" value=\"date\"></el-option>\n </el-select>\n </el-form-item>\n <el-form-item label=\"触发类型：\" v-if=\"speedForm.timeModel=='touch'\">\n <el-radio-group v-model=\"speedForm.touchType\" >\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=\"时刻：\" v-if=\"speedForm.timeModel=='timeing'\">\n <el-slider v-model=\"speedForm.time\" show-input>\n </el-slider>\n </el-form-item>\n <el-form-item label=\"时间：\" v-if=\"speedForm.timeModel=='date'\">\n <el-date-picker\n v-model=\"speedForm.date\"\n type=\"datetimerange\"\n range-separator=\"至\"\n start-placeholder=\"开始日期\"\n end-placeholder=\"结束日期\">\n </el-date-picker>\n </el-form-item>\n <el-form-item label=\"展现形式：\">\n <el-checkbox-group v-model=\"speedForm.type\">\n <el-checkbox label=\"数值\" name=\"type\"></el-checkbox>\n <el-checkbox label=\"表格\" name=\"type\"></el-checkbox>\n <el-checkbox label=\"时间曲线图\" name=\"type\"></el-checkbox>\n <el-checkbox label=\"均值图\" name=\"type\"></el-checkbox>\n </el-checkbox-group>\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 \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\";\nimport dataBoard from \"@/views/bounced/dataBoard\";\nimport axios from 'axios'\nexport default {\n data() {\n return {\n trajectory:false,//轨迹\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 speed: 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 speedForm: {\n name: '',\n timeModel:'touch',\n touchType:'实时（触发）',\n num:'',\n time:'',\n date: '',\n type: [],\n },\n trackForm:{\n name:\"\"\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\n // mqtt订阅（独立）\n getDataByMqtt(url, topic, cIdNum) {\n \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.client.connect('aaa', '111')\n this.mqttClient.publish('aaa', '111');\n // this.mqttClient.subscribe('msg_stream', { msg_flag: 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 // 接收回调\n this.mqttClient.on(\"message\", (topic, message, packet) => {\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 // debugger\n // console.log(\"msg\", msg) //msg为转换后的JSON数据\n // console.log(\"1111\",document.getElementById(\"mapModule\"))\n document.getElementById(\"mapModule\").contentWindow.getDestination(JSON.stringify(msg))\n // this.imgUrl = 'data:image/png;base64,' + msg.pic;\n // console.log(\"imageUrl\", imageUrl)\n \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 const utf8decoder = new TextDecoder()\n const u8arr = new Uint8Array(message)\n const temp = utf8decoder.decode(u8arr)\t// 将二进制数据转为字符串\n const msg = JSON.parse(temp)\n document.getElementById(\"mapModule\").contentWindow.getData(JSON.stringify(msg))\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\tcase \"多云\":\n // \t\t\t\t\treturn require('../assets/weather/Cloudy .png');\n // \t\t\t\tcase \"阴\":\n // \t\t\t\t\treturn require('../assets/weather/Cloudy .png')\n // \t\t\t\tcase \"暴雨\":\n // \t\t\t\t\treturn require('../assets/weather/rainstorm.png')\n // \t\t\t\tcase \"冰雹\":\n // \t\t\t\t\treturn require('../assets/weather/hail.png')\n // \t\t\t\tcase \"大风\":\n // \t\t\t\t\treturn require('../assets/weather/gale.png')\n // \t\t\t\tcase \"大雪\":\n // \t\t\t\t\treturn require('../assets/weather/bigsnow.png')\n // \t\t\t\tcase \"大雨\":\n // \t\t\t\t\treturn require('../assets/weather/bigrain.png')\n // \t\t\t\tcase \"雷电\":\n // \t\t\t\t\treturn require('../assets/weather/thunder.png')\n // \t\t\t\tcase \"雷阵雨\":\n // \t\t\t\t\treturn require('../assets/weather/shower.png')\n // \t\t\t\tcase \"沙尘暴\":\n // \t\t\t\t\treturn require('../assets/weather/sand.png')\n // \t\t\t\tcase \"晴\":\n // \t\t\t\t\treturn require('../assets/weather/sun.png')\n // \t\t\t\tcase \"雾霾\":\n // \t\t\t\t\treturn require('../assets/weather/smog.png')\n // \t\t\t\tcase \"小雪\":\n // \t\t\t\t\treturn require('../assets/weather/snow.png')\n // \t\t\t\tcase \"小雨\":\n // \t\t\t\t\treturn require('../assets/weather/rain.png')\n // \t\t\t\tcase \"雪\":\n // \t\t\t\t\treturn require('../assets/weather/rainlitter.png')\n // \t\t\t\tcase \"多云\":\n // \t\t\t\t\treturn require('../assets/weather/night.png')\n // \t\t\t\tcase \"雨夹雪\":\n // \t\t\t\t\treturn require('../assets/weather/rainsnow.png')\n // \t\t\t\tcase \"月亮\":\n // \t\t\t\t\treturn require('../assets/weather/moon.png')\n // \t\t\t\tcase \"中雪\":\n // \t\t\t\t\treturn require('../assets/weather/mieddlesnow.png')\n // \t\t\t\tcase \"中雨\":\n // \t\t\t\t\treturn require('../assets/weather/middlerain.png')\n // \t\t\t}\n },\n //隐藏箱子\n hideBox() {\n this.$refs.htModels.handleFirstBox();\n }\n },\n components: {\n editModal,\n analysisConfiguration,\n dataBoard\n },\n};\n</script>\n<style scoped>\n.el-form-item {\n margin-bottom: 15px;\n}\n</style>\n"]}]} |