1 line
66 KiB
JSON
1 line
66 KiB
JSON
{"remainingRequest":"D:\\视频边缘1215\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\视频边缘1215\\TransFlow\\src\\views\\bounced\\analysisConfiguration.vue?vue&type=script&lang=js&","dependencies":[{"path":"D:\\视频边缘1215\\TransFlow\\src\\views\\bounced\\analysisConfiguration.vue","mtime":1672889246647},{"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//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\n import mqtt from \"mqtt\"; // mqtt协议\nexport default {\n data() {\n return {\n sizeForm: {\n name: '',\n region: '',\n date1: '',\n date2: '',\n delivery: false,\n type: [],\n resource: '',\n desc: ''\n },\n formInline: {\n user: '',\n region: ''\n },\n //最上部表单\n topForm:{\n\n },\n //坐标转换\n coordinateForm:{\n coordinateClose:false,\n model:'Georeferencing',\n coordinateTransformation:'84坐标系', \n },\n coordinateTableData:[\n {\n name:'11',\n longitude:'111',\n inIp:'01',\n latitude:''\n },{\n name:'22',\n longitude:'222',\n inIp:'02',\n latitude:''\n },{\n name:'33',\n longitude:'333',\n inIp:'03',\n latitude:''\n },\n ],\n //车道识别配置\n laneform: {\n laneClose:false,\n areaDetector:false,\n sectionDetector:false,\n },\n //识别区域\n identificationAreaform: {\n identificationAreaClose:false\n },\n //轨迹平滑\n trajectorySmoothingform: {\n trajectorySmoothingClose:false,\n time:''\n },\n // 车牌识别\n licensePlateform: {\n licensePlateClose:false,\n },\n licensePlateTableData:[\n {\n thresholdValue:'11',\n sectionPlate:'111',\n inIp:'01',\n setAssociation:''\n },{\n thresholdValue:'22',\n sectionPlate:'222',\n inIp:'02',\n setAssociation:''\n },{\n thresholdValue:'33',\n sectionPlate:'333',\n inIp:'03',\n setAssociation:''\n },\n ],\n //停车状态\n stopStateform: {\n displacement:'2000',\n speed:'2000',\n acceleration:'2000',\n },\n //通信设置\n communicationform: {\n type:'快速-用于高带宽连接',\n renewalFrequency:''\n },\n form: {\n name: '',\n region: '',\n date1: '',\n date2: '',\n delivery: false,\n type: [],\n resource: '',\n desc: ''\n },\n tableData: [\n {\n name:'11',\n inPort:'111',\n inIp:'01'\n },{\n name:'22',\n inPort:'222',\n inIp:'02'\n },{\n name:'33',\n inPort:'333',\n inIp:'03'\n },\n ],\n \t\tinternalIpList: [],\n fileList: []\n };\n },\n created() {\n// this.getDataByMqtt()\n// this.testMqtt()\n// var iframe = document.getElementById(\"mapModule\");\n // iframe.onload = function () {\n // setTimeout(() => {\n // this.testMqtt()\n // }, 5000);\n // };\n// iframe.onload = () => {\n// setTimeout(() => {\n// this.load()\n// }, 5000);// 这样每次都会触发\n// }\n\n },\n methods: {\n \n load(){\n console.log(\"1111\")\n var iframe = document.getElementById(\"mapModuleTop\");\n console.log(\"iframe\",iframe)\n iframe.onload = () => {\n // setTimeout(() => {\n this.testMqtt()\n // }, 5000);\n }\n },\n testMqtt() {\n console.log(\"222\")\n this.getDataByMqtt()\n\n },\n handleChange(){},\n handleagain() {\n this.$confirm('此操作将重新启动系统, 是否继续?', '提示', {\n confirmButtonText: '确定',\n cancelButtonText: '取消',\n type: 'warning'\n })\n .then(() => {\n // this.$message({\n // type: 'success',\n // message: '删除成功!'\n // });\n })\n .catch(() => {\n this.$message({\n type: 'info',\n message: '已取消'\n });\n });\n },\n handleReset() {\n this.$confirm('此操作将重置默认值, 是否继续?', '提示', {\n confirmButtonText: '确定',\n cancelButtonText: '取消',\n type: 'warning'\n })\n .then(() => {\n // this.$message({\n // type: 'success',\n // message: '删除成功!'\n // });\n })\n .catch(() => {\n this.$message({\n type: 'info',\n message: '已取消重置'\n });\n });\n },\n handleRemove(file, fileList) {\n console.log(file, fileList);\n },\n handlePreview(file) {\n console.log(file);\n },\n handleExceed(files, fileList) {\n this.$message.warning(\n `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`\n );\n },\n beforeRemove(file, fileList) {\n return this.$confirm(`确定移除 ${file.name}？`);\n },\n // 获取列表\n\t\tgetReverseShellList() {\n\t // getShellList().then(res => {\n\t // if (res.code === 200) {\n\t // if (res.data && res.data.length > 0) {\n\t // \t// 获取到的数据加上 isEdit是false， 默认是文本\n\t // res.data.forEach(item => {\n\t // item['isEdit'] = false\n\t // })\n\t // }\n\t // this.tableData = res.data\n\t // 在表格列表前插入一行，用来新增数据\n\t this.tableData.unshift({\n\t name: '',\n\t inIp: '',\n\t inPort: null,\n\t outPort: null,\n\t enabled: null,\n\t isEdit: true\n\t })\n\t // }\n\t // })\n\t },\n\t // 新增按钮\n\t handleAdd(row) {\n\t for (let key in row) {\n\t \t// 判断一行字段是否输入完整\n\t if (row[key] === '' || row[key] === null || typeof row[key] === 'undefined') {\n\t this.msgError('Please complete the information')\n\t return\n\t }\n\t }\n\t const params = {\n\t name: row.name,\n\t inIp: row.inIp,\n\t // inPort: parseInt(row.inPort),\n\t // outPort: parseInt(row.outPort),\n\t // enabled: row.enabled\n\t }\n this.getReverseShellList()\n\t // addShell(params).then(res => {\n\t // if (res.code === 200) {\n\t // this.msgSuccess('Add reverse shell successfully')\n\t // row.isEdit = false\n\t // this.getReverseShellList()\n\t // }\n\t // })\n\t },\n\t // 编辑或者Apply按钮\n\t handleUpdate(row) {\n\t // 点击Apply时\n\t if (row.isEdit) {\n\t for (let key in row) {\n\t if (row[key] === '' || row[key] === null || typeof row[key] === 'undefined') {\n\t this.msgError('Please complete the information')\n\t return\n\t }\n\t }\n\t const params = {\n\t name: row.name,\n\t inIp: row.inIp,\n\t inPort: parseInt(row.inPort),\n\t outPort: parseInt(row.outPort),\n\t enabled: row.enabled\n\t }\n\t // updateShell(params).then(res => {\n\t // if (res.code === 200) {\n\t // this.msgSuccess('Update reverse shell successfully')\n\t // this.getReverseShellList()\n\t // }\n\t // })\n\t } else {\n\t \t// 点击编辑时\n\t row.isEdit = true\n\t }\n\t },\n\t // 删除或取消按钮\n\t handleDelete(row) {\n\t // 点击取消时\n\t if (row.isEdit) {\n\t this.getReverseShellList()\n\t } else {\n\t \t// 点击删除时\n\t this.$confirm('Are you sure to delete reverse shell?', 'warning', {\n\t confirmButtonText: 'Sure',\n\t cancelButtonText: 'Cancel',\n\t type: 'warning'\n\t }).then(() => {\n\t // deleteShell(row.name).then(res => {\n\t // if (res.code === 200) {\n\t // this.msgSuccess('Delete reverse shell successfully')\n\t // this.getReverseShellList()\n\t // }\n\t // })\n\t }).catch(() => {\n\t })\n\t }\n\t },\n // mqtt订阅（独立）\n getDataByMqtt(url, topic, cIdNum) {\n // var that = this\n // that.$refs.iframe.contentWindow.getDestination(1)\n // console.log(\"1111\",document.getElementById(\"mapModule\"))\n // document.getElementById(\"mapModule\").contentWindow.getDestination(1)\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 \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(\"msg.pic\", msg.pic) \n // debugger\n // var that = this\n \n // document.getElementById(\"mapModule\").contentWindow.getDestination(JSON.stringify(msg))\n // window.parent.getDestination(JSON.stringify(msg));\n // debugger\n // unity.SendMessage('AAA', 'SendImage', JSON.stringify(msg));\n // this.imgUrl = 'data:image/png;base64,' + msg.pic;\n // console.log(\"imageUrl\", imageUrl)\n \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 // 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 }\n};\n",{"version":3,"sources":["analysisConfiguration.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsXA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;;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;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;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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","file":"analysisConfiguration.vue","sourceRoot":"src/views/bounced","sourcesContent":["<template>\r\n <div >\r\n <div >\r\n <div class=\"top\">\r\n <div class=\"section\"> \r\n <el-form :inline=\"true\" :model=\"formInline\" class=\"demo-form-inline\" label-width=\"140px\">\r\n <div class=\"warning\">\r\n <i class=\"el-icon-warning\" style=\"color: #409EFF; margin: 0 3px 0 10px;\"></i>自动保存可以使系统在异常关闭后自动恢复。在这种情况下，缓存数据将会丢失，但所有存储数据将被保存。\r\n </div>\r\n <el-form-item label=\"自动保存：\" >\r\n <el-switch v-model=\"formInline.user\"></el-switch>\r\n </el-form-item>\r\n <el-form-item label=\"时间间隔：\">\r\n <el-select v-model=\"formInline.region\" placeholder=\"时间间隔\">\r\n <el-option label=\"20s\" value=\"shanghai\"></el-option>\r\n <el-option label=\"30s\" value=\"beijing\"></el-option>\r\n </el-select>\r\n </el-form-item>\r\n</el-form>\r\n <el-form ref=\"form\" :model=\"sizeForm\" label-width=\"140px\">\r\n <div class=\"warning\">\r\n <i class=\"el-icon-warning\" style=\"color: #409EFF; margin: 0 3px 0 10px;\"></i>重置分析将删除所有累计的轨迹数据\r\n </div>\r\n <!-- <el-form-item > -->\r\n <el-button type=\"primary\" @click=\"handleagain()\" size=\"small\" style=\"width:150px\">重置</el-button>\r\n <div class=\"warning\">\r\n <i class=\"el-icon-warning\" style=\"color: #409EFF; margin: 0 3px 0 10px;\"></i>在 WGS84 坐标系中输入相机位置\r\n </div>\r\n <el-form-item label=\"相机位置：\">\r\n <el-input v-model=\"sizeForm.name\" style=\"width:150px\" placeholder=\"经度\"></el-input>\r\n <el-input v-model=\"sizeForm.name\" style=\"width:150px;margin-left:20px\" placeholder=\"纬度\"></el-input>\r\n </el-form-item>\r\n </el-form>\r\n </div>\r\n </div> \r\n \r\n <div class=\"dataBoard\">\r\n <div class=\"section\">\r\n <div class=\"warning\">\r\n <i class=\"el-icon-warning\" style=\"color: #409EFF; margin: 0 3px 0 10px;\"></i>通过将图像坐标系转换为物理坐标系，地理参考使您能够将像素测量转换为真实速度和距离。\r\n </div>\r\n <p class=\"board-title\">坐标转换</p>\r\n \r\n <el-form ref=\"form\" :model=\"coordinateForm\" label-width=\"140px\">\r\n <el-form-item label=\"坐标转换开关：\">\r\n <el-switch v-model=\"coordinateForm.coordinateClose\"></el-switch>\r\n </el-form-item>\r\n <el-form-item label=\"模型：\" v-if=\"coordinateForm.coordinateClose==true\">\r\n\r\n <el-radio-group v-model=\"coordinateForm.model\">\r\n <el-radio label=\"Georeferencing\"></el-radio>\r\n \r\n <el-radio label=\"其他\"></el-radio>\r\n </el-radio-group>\r\n <div class=\"warning\">\r\n <i class=\"el-icon-warning\" style=\"color: #409EFF; margin: 0 3px 0 10px;\"></i>地理参照允许测量物理速度和静态图像源的距离。\r\n </div>\r\n </el-form-item>\r\n <el-form-item label=\"坐标转换：\" v-if=\"coordinateForm.coordinateClose==true\">\r\n <el-radio-group v-model=\"coordinateForm.coordinateTransformation\">\r\n <el-radio label=\"84坐标系\"></el-radio>\r\n <el-radio label=\"其他\"></el-radio>\r\n </el-radio-group>\r\n </el-form-item>\r\n <div style=\"width:100%;height:300px\" v-if=\"coordinateForm.coordinateClose==true\" >\r\n <iframe id=\"mapModuleTop\" @load=\"load\" src=\"./VideoWeb/index.html\" frameborder=\"0\" style=\"width: 100%; height: calc(100% - 50px)\" ></iframe>\r\n <!-- <iframe src=\"./VideoWeb/index.html\" style=\"height: 100%; width: 100%;border: none\" \r\n ref=\"iframe\"></iframe> -->\r\n </div>\r\n <el-table border :data=\"coordinateTableData\" v-if=\"coordinateForm.coordinateClose==true\">\r\n <el-table-column prop=\"name\" label=\"点名称\" align=\"center\" >\r\n <template slot-scope=\"scope\">\r\n <el-input\r\n v-if=\"scope.$index === 0\"\r\n v-model=\"scope.row.name\"\r\n maxlength=\"30\"\r\n placeholder=\"Required\"\r\n />\r\n <span v-else v-text=\"scope.row.name\"></span>\r\n </template>\r\n </el-table-column>\r\n <el-table-column prop=\"longitude\" label=\"经度\" align=\"center\">\r\n <template slot-scope=\"scope\">\r\n <el-input\r\n v-if=\"scope.row.isEdit\"\r\n v-model=\"scope.row.longitude\"\r\n maxlength=\"20\"\r\n placeholder=\"Required\"\r\n />\r\n <span v-else v-text=\"scope.row.longitude\"></span>\r\n </template>\r\n </el-table-column>\r\n <el-table-column prop=\"latitude\" label=\"纬度\" align=\"center\">\r\n <template slot-scope=\"scope\">\r\n <el-input\r\n v-if=\"scope.row.isEdit\"\r\n v-model=\"scope.row.latitude\"\r\n maxlength=\"20\"\r\n placeholder=\"Required\"\r\n />\r\n <span v-else v-text=\"scope.row.latitude\"></span>\r\n </template>\r\n </el-table-column>\r\n <el-table-column label=\"操作\" align=\"center\" class-name=\"small-padding fixed-width\">\r\n <template slot-scope=\"scope\">\r\n <el-button\r\n v-if=\"scope.$index === 0\"\r\n size=\"mini\"\r\n type=\"text\"\r\n style=\"color: #2090c1\"\r\n @click=\"handleAdd(scope.row)\"\r\n >Add\r\n </el-button>\r\n <el-button\r\n v-if=\"scope.$index !== 0\"\r\n size=\"mini\"\r\n type=\"text\"\r\n style=\"color: #2090c1\"\r\n @click=\"handleUpdate(scope.row)\"\r\n >{{ scope.row.isEdit ? 'Apply' : 'Edit' }}\r\n </el-button>\r\n <el-button\r\n v-if=\"scope.$index !== 0\"\r\n size=\"mini\"\r\n type=\"text\"\r\n style=\"color: #F56C6C\"\r\n @click=\"handleDelete(scope.row)\"\r\n >{{ scope.row.isEdit ? 'Cancel' : 'Delete' }}\r\n </el-button>\r\n </template>\r\n </el-table-column>\r\n</el-table>\r\n<div style=\"margin-top:15px\">\r\n<el-button type=\"primary\" @click=\"handleagain()\" size=\"small\" style=\"width:150px\" v-if=\"coordinateForm.coordinateClose==true\">保存</el-button>\r\n</div>\r\n\r\n</el-form>\r\n </div>\r\n \r\n </div>\r\n <div class=\"dataBoard\">\r\n <div class=\"section\">\r\n <div class=\"warning\">\r\n <i class=\"el-icon-warning\" style=\"color: #409EFF; margin: 0 3px 0 10px;\"></i>在视频/动图上设置进口出口道\r\n </div>\r\n <p class=\"board-title\">车道识别配置</p>\r\n \r\n <el-form ref=\"form\" :model=\"laneform\" label-width=\"350px\"> \r\n <!-- <p>车道识别配置</p> -->\r\n <el-form-item label=\"车道识别配置开关：\" label-width=\"150px\">\r\n <el-switch v-model=\"laneform.laneClose\"></el-switch>\r\n </el-form-item> \r\n <div style=\"width:100%;height:300px\" v-if=\"laneform.laneClose==true\">\r\n <iframe id=\"mapModule\" src=\"./VideoWeb/index.html\" frameborder=\"0\" style=\"width: 100%; height: calc(100% - 50px)\"></iframe>\r\n </div>\r\n <el-form-item label=\"各车道中心线（区域检测器）：\" style=\"width:300px\" v-if=\"laneform.laneClose==true\">\r\n <el-switch v-model=\"laneform.areaDetector\"></el-switch>\r\n </el-form-item>\r\n <el-form-item label=\"自动识别各车道中心点坐标（断面检测器）：\" style=\"width:300px\" v-if=\"laneform.laneClose==true\">\r\n <el-switch v-model=\"laneform.sectionDetector\"></el-switch>\r\n </el-form-item>\r\n <el-button type=\"primary\" @click=\"handleagain()\" size=\"small\" style=\"width:150px\" v-if=\"laneform.laneClose==true\">保存</el-button>\r\n \r\n \r\n </el-form>\r\n </div>\r\n \r\n </div> \r\n <div class=\"dataBoard\">\r\n <div class=\"section\">\r\n <div class=\"warning\">\r\n <i class=\"el-icon-warning\" style=\"color: #409EFF; margin: 0 3px 0 10px;\"></i>您可以自定义进行视频分析的区域，区域之外的部分将被忽略。此功能可以帮助您检测和跟踪高分辨率视频特定部分的较小对象，实现检测器的数字变焦功能。\r\n </div>\r\n <p class=\"board-title\">识别区域</p>\r\n \r\n <el-form ref=\"form\" :model=\"identificationAreaform\" label-width=\"140px\"> \r\n <!-- <p>车道识别配置</p> -->\r\n \r\n <el-form-item label=\"识别区域开关\" style=\"width:250px\">\r\n <el-switch v-model=\"identificationAreaform.identificationAreaClose\"></el-switch>\r\n </el-form-item>\r\n <div style=\"width:100%;height:300px\" v-if=\"identificationAreaform.identificationAreaClose==true\">\r\n <iframe id=\"mapModule\" src=\"./VideoWeb/index.html\" frameborder=\"0\" style=\"width: 100%; height: calc(100% - 50px)\"></iframe>\r\n </div>\r\n <el-button type=\"primary\" @click=\"handleagain()\" size=\"small\" style=\"width:150px\" v-if=\"identificationAreaform.identificationAreaClose==true\">保存</el-button>\r\n \r\n </el-form>\r\n </div>\r\n \r\n </div> \r\n <div class=\"dataBoard\">\r\n <div class=\"section\">\r\n <div class=\"warning\">\r\n <i class=\"el-icon-warning\" style=\"color: #409EFF; margin: 0 3px 0 10px;\"></i>为轨迹预测滤波算法定义细化轨迹的时间窗口。数值越小，延迟越小，适用于实时性要求高的场景；数值越大，轨迹的连续性越好，目标即使越过一些障碍也不容易丢失。\r\n </div>\r\n <p class=\"board-title\">轨迹平滑</p>\r\n \r\n <el-form ref=\"form\" :model=\"trajectorySmoothingform\" label-width=\"140px\"> \r\n <el-form-item label=\"轨迹平滑开关\" style=\"width:250px\">\r\n <el-switch v-model=\"trajectorySmoothingform.trajectorySmoothingClose\"></el-switch>\r\n </el-form-item> \r\n <el-form-item label=\"预测滤波时间\" style=\"width:250px\" v-if=\"trajectorySmoothingform.trajectorySmoothingClose==true\">\r\n <el-input-number v-model=\"trajectorySmoothingform.time\" @change=\"handleChange\" :min=\"2000\" :max=\"3000\" label=\"预测滤波时间\"></el-input-number>\r\n </el-form-item>\r\n <el-button type=\"primary\" @click=\"handleagain()\" size=\"small\" style=\"width:150px\" v-if=\"trajectorySmoothingform.trajectorySmoothingClose==true\">保存</el-button>\r\n </el-form>\r\n </div>\r\n \r\n </div> \r\n <div class=\"dataBoard\">\r\n <div class=\"section\">\r\n <div class=\"warning\">\r\n <i class=\"el-icon-warning\" style=\"color: #409EFF; margin: 0 3px 0 10px;\"></i>车牌识别开关。牌照信息表示与目标属性。（断面号牌，与断面设置关联）\r\n </div>\r\n <p class=\"board-title\">车牌识别</p>\r\n \r\n <el-form ref=\"form\" :model=\"licensePlateform\" label-width=\"140px\"> \r\n <el-form-item label=\"车牌识别开关\" style=\"width:250px\">\r\n <el-switch v-model=\"licensePlateform.licensePlateClose\"></el-switch>\r\n </el-form-item> \r\n <div style=\"width:100%;height:300px\" v-if=\"licensePlateform.licensePlateClose==true\">\r\n <iframe id=\"mapModule\" src=\"./VideoWeb/index.html\" frameborder=\"0\" style=\"width: 100%; height: calc(100% - 50px)\"></iframe>\r\n </div>\r\n <el-table border :data=\"licensePlateTableData\" v-if=\"licensePlateform.licensePlateClose==true\">\r\n <el-table-column prop=\"sectionPlate\" label=\"断面号牌\" align=\"center\">\r\n <template slot-scope=\"scope\">\r\n <el-input\r\n v-if=\"scope.$index === 0\"\r\n v-model=\"scope.row.sectionPlate\"\r\n maxlength=\"30\"\r\n placeholder=\"Required\"\r\n />\r\n <span v-else v-text=\"scope.row.sectionPlate\"></span>\r\n </template>\r\n </el-table-column>\r\n <el-table-column prop=\"setAssociation\" label=\"断面设置关联\" align=\"center\">\r\n <template slot-scope=\"scope\">\r\n <el-input\r\n v-if=\"scope.row.isEdit\"\r\n v-model=\"scope.row.setAssociation\"\r\n maxlength=\"20\"\r\n placeholder=\"Required\"\r\n />\r\n <span v-else v-text=\"scope.row.setAssociation\"></span>\r\n </template>\r\n </el-table-column>\r\n <el-table-column prop=\"thresholdValue\" label=\"车牌匹配阈值\" align=\"center\">\r\n <template slot-scope=\"scope\">\r\n <el-input\r\n v-if=\"scope.row.isEdit\"\r\n v-model=\"scope.row.thresholdValue\"\r\n maxlength=\"20\"\r\n placeholder=\"Required\"\r\n />\r\n <span v-else v-text=\"scope.row.thresholdValue\"></span>\r\n </template>\r\n </el-table-column>\r\n <el-table-column label=\"操作\" align=\"center\" class-name=\"small-padding fixed-width\">\r\n <template slot-scope=\"scope\">\r\n <el-button\r\n v-if=\"scope.$index === 0\"\r\n size=\"mini\"\r\n type=\"text\"\r\n style=\"color: #2090c1\"\r\n @click=\"handleAdd(scope.row)\"\r\n >Add\r\n </el-button>\r\n <el-button\r\n v-if=\"scope.$index !== 0\"\r\n size=\"mini\"\r\n type=\"text\"\r\n style=\"color: #2090c1\"\r\n @click=\"handleUpdate(scope.row)\"\r\n >{{ scope.row.isEdit ? 'Apply' : 'Edit' }}\r\n </el-button>\r\n <el-button\r\n v-if=\"scope.$index !== 0\"\r\n size=\"mini\"\r\n type=\"text\"\r\n style=\"color: #F56C6C\"\r\n @click=\"handleDelete(scope.row)\"\r\n >{{ scope.row.isEdit ? 'Cancel' : 'Delete' }}\r\n </el-button>\r\n </template>\r\n </el-table-column>\r\n</el-table>\r\n<div style=\"margin-top:15px\">\r\n<el-button type=\"primary\" @click=\"handleagain()\" size=\"small\" style=\"width:150px\" v-if=\"licensePlateform.licensePlateClose==true\">保存</el-button>\r\n</div>\r\n\r\n \r\n </el-form>\r\n </div>\r\n \r\n </div> \r\n <div class=\"dataBoard\">\r\n <div class=\"section\">\r\n <div class=\"warning\">\r\n <i class=\"el-icon-warning\" style=\"color: #409EFF; margin: 0 3px 0 10px;\"></i>位移、速度、加速度的阈值，例如位移＜δ，速度＜v，加速度＜a，则判断车辆停车\r\n </div>\r\n <p class=\"board-title\">停车状态</p>\r\n \r\n <el-form :inline=\"true\" :model=\"stopStateform\" class=\"demo-form-inline\" label-width=\"140px\">\r\n <el-form-item label=\"位移：\" >\r\n <el-input-number v-model=\"stopStateform.displacement\" @change=\"handleChange\" :min=\"2000\" :max=\"3000\" label=\"位移\"></el-input-number>\r\n </el-form-item>\r\n <el-form-item label=\"速度：\" >\r\n <el-input-number v-model=\"stopStateform.speed\" @change=\"handleChange\" :min=\"2000\" :max=\"3000\" label=\"速度\"></el-input-number>\r\n</el-form-item>\r\n <el-form-item label=\"加速度：\">\r\n <el-input-number v-model=\"stopStateform.acceleration\" @change=\"handleChange\" :min=\"2000\" :max=\"3000\" label=\"加速度\"></el-input-number>\r\n </el-form-item>\r\n \r\n</el-form>\r\n<div style=\"margin-top:15px\">\r\n<el-button type=\"primary\" @click=\"handleagain()\" size=\"small\" style=\"width:150px\">保存</el-button>\r\n</div>\r\n\r\n </div>\r\n \r\n </div> \r\n <div class=\"dataBoard\">\r\n <div class=\"section\">\r\n <p class=\"board-title\">通信设置</p>\r\n <el-form :model=\"communicationform\" class=\"demo-form-inline\" label-width=\"200px\">\r\n <el-form-item label=\"更新频率：\" style=\"margin-bottom: 20px;\">\r\n <el-input v-model=\"communicationform.renewalFrequency\" style=\"width:200px;\"></el-input>\r\n </el-form-item>\r\n <div class=\"warning\">\r\n <i class=\"el-icon-warning\" style=\"color: #409EFF; margin: 0 3px 0 10px;\"></i>更新频率可以根据链路带宽进行设置。\r\n </div>\r\n <el-form-item label=\"类型：\" style=\"margin-bottom: 20px;\">\r\n <el-radio-group v-model=\"communicationform.type\" >\r\n <el-radio label=\"快速-用于高带宽连接\"></el-radio>\r\n <el-radio label=\"平衡-适用于大多数连接\"></el-radio>\r\n <el-radio label=\"慢速-用于低带宽连接\"></el-radio>\r\n <el-radio label=\"自定义\"></el-radio>\r\n </el-radio-group>\r\n </el-form-item>\r\n <el-form-item label=\"请求轻型有效载荷：\" v-if=\"communicationform.type=='自定义'\">\r\n <el-input v-model=\"communicationform.name\" style=\"width:200px;margin-bottom: 20px;\"></el-input>ms\r\n </el-form-item>\r\n <el-form-item label=\"请求重型有效载荷：\" v-if=\"communicationform.type=='自定义'\">\r\n <el-input v-model=\"communicationform.name\" style=\"width:200px;margin-bottom: 20px;\"></el-input>ms\r\n </el-form-item>\r\n <el-form-item label=\"FPS分配器：\" v-if=\"communicationform.type=='自定义'\">\r\n <el-input v-model=\"communicationform.name\" style=\"width:200px;margin-bottom: 20px;\"></el-input>\r\n </el-form-item>\r\n <el-form-item label=\"框架决议：\" v-if=\"communicationform.type=='自定义'\">\r\n <el-select v-model=\"communicationform.region\" placeholder=\"框架决议\" style=\"margin-bottom: 20px;\">\r\n <el-option label=\"自动\" value=\"shanghai\"></el-option>\r\n <el-option label=\"区域二\" value=\"beijing\"></el-option>\r\n </el-select>\r\n </el-form-item>\r\n <el-form-item label=\"压缩格式：\" v-if=\"communicationform.type=='自定义'\">\r\n <el-select v-model=\"communicationform.region\" placeholder=\"压缩格式\" style=\"margin-bottom: 20px;\">\r\n <el-option label=\"JPG\" value=\"shanghai\"></el-option>\r\n <el-option label=\"区域二\" value=\"beijing\"></el-option>\r\n </el-select>\r\n </el-form-item>\r\n <el-form-item label=\"压缩率：\" v-if=\"communicationform.type=='自定义'\">\r\n <el-input v-model=\"communicationform.name\" style=\"width:200px\"></el-input>\r\n </el-form-item>\r\n <el-button type=\"primary\" @click=\"handleagain()\" size=\"small\" style=\"width:150px\" >保存</el-button>\r\n</el-form>\r\n </div>\r\n \r\n </div> \r\n\r\n </div>\r\n </div>\r\n</template>\r\n \r\n <script>\r\n import mqtt from \"mqtt\"; // mqtt协议\r\nexport default {\r\n data() {\r\n return {\r\n sizeForm: {\r\n name: '',\r\n region: '',\r\n date1: '',\r\n date2: '',\r\n delivery: false,\r\n type: [],\r\n resource: '',\r\n desc: ''\r\n },\r\n formInline: {\r\n user: '',\r\n region: ''\r\n },\r\n //最上部表单\r\n topForm:{\r\n\r\n },\r\n //坐标转换\r\n coordinateForm:{\r\n coordinateClose:false,\r\n model:'Georeferencing',\r\n coordinateTransformation:'84坐标系', \r\n },\r\n coordinateTableData:[\r\n {\r\n name:'11',\r\n longitude:'111',\r\n inIp:'01',\r\n latitude:''\r\n },{\r\n name:'22',\r\n longitude:'222',\r\n inIp:'02',\r\n latitude:''\r\n },{\r\n name:'33',\r\n longitude:'333',\r\n inIp:'03',\r\n latitude:''\r\n },\r\n ],\r\n //车道识别配置\r\n laneform: {\r\n laneClose:false,\r\n areaDetector:false,\r\n sectionDetector:false,\r\n },\r\n //识别区域\r\n identificationAreaform: {\r\n identificationAreaClose:false\r\n },\r\n //轨迹平滑\r\n trajectorySmoothingform: {\r\n trajectorySmoothingClose:false,\r\n time:''\r\n },\r\n // 车牌识别\r\n licensePlateform: {\r\n licensePlateClose:false,\r\n },\r\n licensePlateTableData:[\r\n {\r\n thresholdValue:'11',\r\n sectionPlate:'111',\r\n inIp:'01',\r\n setAssociation:''\r\n },{\r\n thresholdValue:'22',\r\n sectionPlate:'222',\r\n inIp:'02',\r\n setAssociation:''\r\n },{\r\n thresholdValue:'33',\r\n sectionPlate:'333',\r\n inIp:'03',\r\n setAssociation:''\r\n },\r\n ],\r\n //停车状态\r\n stopStateform: {\r\n displacement:'2000',\r\n speed:'2000',\r\n acceleration:'2000',\r\n },\r\n //通信设置\r\n communicationform: {\r\n type:'快速-用于高带宽连接',\r\n renewalFrequency:''\r\n },\r\n form: {\r\n name: '',\r\n region: '',\r\n date1: '',\r\n date2: '',\r\n delivery: false,\r\n type: [],\r\n resource: '',\r\n desc: ''\r\n },\r\n tableData: [\r\n {\r\n name:'11',\r\n inPort:'111',\r\n inIp:'01'\r\n },{\r\n name:'22',\r\n inPort:'222',\r\n inIp:'02'\r\n },{\r\n name:'33',\r\n inPort:'333',\r\n inIp:'03'\r\n },\r\n ],\r\n \t\tinternalIpList: [],\r\n fileList: []\r\n };\r\n },\r\n created() {\r\n// this.getDataByMqtt()\r\n// this.testMqtt()\r\n// var iframe = document.getElementById(\"mapModule\");\r\n // iframe.onload = function () {\r\n // setTimeout(() => {\r\n // this.testMqtt()\r\n // }, 5000);\r\n // };\r\n// iframe.onload = () => {\r\n// setTimeout(() => {\r\n// this.load()\r\n// }, 5000);// 这样每次都会触发\r\n// }\r\n\r\n },\r\n methods: {\r\n \r\n load(){\r\n console.log(\"1111\")\r\n var iframe = document.getElementById(\"mapModuleTop\");\r\n console.log(\"iframe\",iframe)\r\n iframe.onload = () => {\r\n // setTimeout(() => {\r\n this.testMqtt()\r\n // }, 5000);\r\n }\r\n },\r\n testMqtt() {\r\n console.log(\"222\")\r\n this.getDataByMqtt()\r\n\r\n },\r\n handleChange(){},\r\n handleagain() {\r\n this.$confirm('此操作将重新启动系统, 是否继续?', '提示', {\r\n confirmButtonText: '确定',\r\n cancelButtonText: '取消',\r\n type: 'warning'\r\n })\r\n .then(() => {\r\n // this.$message({\r\n // type: 'success',\r\n // message: '删除成功!'\r\n // });\r\n })\r\n .catch(() => {\r\n this.$message({\r\n type: 'info',\r\n message: '已取消'\r\n });\r\n });\r\n },\r\n handleReset() {\r\n this.$confirm('此操作将重置默认值, 是否继续?', '提示', {\r\n confirmButtonText: '确定',\r\n cancelButtonText: '取消',\r\n type: 'warning'\r\n })\r\n .then(() => {\r\n // this.$message({\r\n // type: 'success',\r\n // message: '删除成功!'\r\n // });\r\n })\r\n .catch(() => {\r\n this.$message({\r\n type: 'info',\r\n message: '已取消重置'\r\n });\r\n });\r\n },\r\n handleRemove(file, fileList) {\r\n console.log(file, fileList);\r\n },\r\n handlePreview(file) {\r\n console.log(file);\r\n },\r\n handleExceed(files, fileList) {\r\n this.$message.warning(\r\n `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`\r\n );\r\n },\r\n beforeRemove(file, fileList) {\r\n return this.$confirm(`确定移除 ${file.name}？`);\r\n },\r\n // 获取列表\r\n\t\tgetReverseShellList() {\r\n\t // getShellList().then(res => {\r\n\t // if (res.code === 200) {\r\n\t // if (res.data && res.data.length > 0) {\r\n\t // \t// 获取到的数据加上 isEdit是false， 默认是文本\r\n\t // res.data.forEach(item => {\r\n\t // item['isEdit'] = false\r\n\t // })\r\n\t // }\r\n\t // this.tableData = res.data\r\n\t // 在表格列表前插入一行，用来新增数据\r\n\t this.tableData.unshift({\r\n\t name: '',\r\n\t inIp: '',\r\n\t inPort: null,\r\n\t outPort: null,\r\n\t enabled: null,\r\n\t isEdit: true\r\n\t })\r\n\t // }\r\n\t // })\r\n\t },\r\n\t // 新增按钮\r\n\t handleAdd(row) {\r\n\t for (let key in row) {\r\n\t \t// 判断一行字段是否输入完整\r\n\t if (row[key] === '' || row[key] === null || typeof row[key] === 'undefined') {\r\n\t this.msgError('Please complete the information')\r\n\t return\r\n\t }\r\n\t }\r\n\t const params = {\r\n\t name: row.name,\r\n\t inIp: row.inIp,\r\n\t // inPort: parseInt(row.inPort),\r\n\t // outPort: parseInt(row.outPort),\r\n\t // enabled: row.enabled\r\n\t }\r\n this.getReverseShellList()\r\n\t // addShell(params).then(res => {\r\n\t // if (res.code === 200) {\r\n\t // this.msgSuccess('Add reverse shell successfully')\r\n\t // row.isEdit = false\r\n\t // this.getReverseShellList()\r\n\t // }\r\n\t // })\r\n\t },\r\n\t // 编辑或者Apply按钮\r\n\t handleUpdate(row) {\r\n\t // 点击Apply时\r\n\t if (row.isEdit) {\r\n\t for (let key in row) {\r\n\t if (row[key] === '' || row[key] === null || typeof row[key] === 'undefined') {\r\n\t this.msgError('Please complete the information')\r\n\t return\r\n\t }\r\n\t }\r\n\t const params = {\r\n\t name: row.name,\r\n\t inIp: row.inIp,\r\n\t inPort: parseInt(row.inPort),\r\n\t outPort: parseInt(row.outPort),\r\n\t enabled: row.enabled\r\n\t }\r\n\t // updateShell(params).then(res => {\r\n\t // if (res.code === 200) {\r\n\t // this.msgSuccess('Update reverse shell successfully')\r\n\t // this.getReverseShellList()\r\n\t // }\r\n\t // })\r\n\t } else {\r\n\t \t// 点击编辑时\r\n\t row.isEdit = true\r\n\t }\r\n\t },\r\n\t // 删除或取消按钮\r\n\t handleDelete(row) {\r\n\t // 点击取消时\r\n\t if (row.isEdit) {\r\n\t this.getReverseShellList()\r\n\t } else {\r\n\t \t// 点击删除时\r\n\t this.$confirm('Are you sure to delete reverse shell?', 'warning', {\r\n\t confirmButtonText: 'Sure',\r\n\t cancelButtonText: 'Cancel',\r\n\t type: 'warning'\r\n\t }).then(() => {\r\n\t // deleteShell(row.name).then(res => {\r\n\t // if (res.code === 200) {\r\n\t // this.msgSuccess('Delete reverse shell successfully')\r\n\t // this.getReverseShellList()\r\n\t // }\r\n\t // })\r\n\t }).catch(() => {\r\n\t })\r\n\t }\r\n\t },\r\n // mqtt订阅（独立）\r\n getDataByMqtt(url, topic, cIdNum) {\r\n // var that = this\r\n // that.$refs.iframe.contentWindow.getDestination(1)\r\n // console.log(\"1111\",document.getElementById(\"mapModule\"))\r\n // document.getElementById(\"mapModule\").contentWindow.getDestination(1)\r\n const clientId = \"test_id_\" + String(new Date().getTime()); // 用户名\r\n // const host = 'ws://49.234.27.18:10087/'; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt\r\n const host = 'ws://172.16.1.168:10087/';\r\n\r\n const options = {\r\n // 配置\r\n // 测试：订阅本机IP\r\n // host: host,\r\n // port: port,\r\n // host:\"172.16.1.168:10086\",\r\n keepalive: 60, // 心跳时间，默认60s，设置为0禁用\r\n username: 'admin', // 用户名（可选）\r\n password: '123456', // 密码（可选）\r\n clientId: clientId, // 客户端ID，默认随机生成\r\n protocolId: \"MQTT\",\r\n protocolVersion: 4,\r\n clean: true, // false在离线时接收QoS1和2的消息\r\n reconnectPeriod: 2000, // 重连间隔，默认1000毫秒\r\n connectTimeout: 30 * 1000, // 收到CONNACK之前的等待时间\r\n will: {\r\n // 遗嘱消息（客户端严重断开连接时Broker将自动发送的消息）\r\n topic: \"img1\", // 要发布的主题\r\n payload: \"[MQTT-TEST] 遗嘱消息：连接异常断开！\", // 要发布的消息\r\n qos: 0, // QoS(Quality of Service)，QoS0：只负责发，QoS1：保证消息至少送达1次，QoS2：保证消息到且仅到1次\r\n retain: false, // 保留标志\r\n },\r\n };\r\n if (this.mqttClient == undefined) {\r\n this.mqttClient = mqtt.connect(host, options); // 连接\r\n // const client = mqtt.connect(host, options); // 连接\r\n // const client = mqtt.connect(host) // 连接\r\n // 错误回调\r\n // console.log(\"this.mqttClient\", this.mqttClient)\r\n this.mqttClient.on(\"error\", (err) => {\r\n console.log(\"[MQTT-TEST] 连接错误：\", err);\r\n this.mqttClient.end();\r\n });\r\n // 重连回调\r\n this.mqttClient.on(\"reconnect\", (reconnect) => {\r\n // console.log(\"[MQTT-TEST] 重连中……\", reconnect);\r\n });\r\n // 连接回调\r\n this.mqttClient.on(\"connect\", (connect) => {\r\n // console.log(\"[MQTT-TEST] 已连接的客户端ID: \", connect);\r\n // 订阅\r\n this.mqttClient.subscribe('img0', { qos: 0 });\r\n this.mqttClient.subscribe('img1', { qos: 0 });\r\n this.mqttClient.subscribe('img2', { qos: 0 });\r\n this.mqttClient.subscribe('img3', { qos: 0 });\r\n this.mqttClient.subscribe('img4', { qos: 0 });\r\n this.mqttClient.subscribe('img5', { qos: 0 });\r\n this.mqttClient.subscribe('stream0', { qos: 0 });\r\n this.mqttClient.subscribe('stream1', { qos: 0 });\r\n this.mqttClient.subscribe('stream2', { qos: 0 });\r\n this.mqttClient.subscribe('stream3', { qos: 0 });\r\n this.mqttClient.subscribe('stream4', { qos: 0 });\r\n this.mqttClient.subscribe('stream5', { qos: 0 });\r\n\r\n });\r\n // 接收回调\r\n this.mqttClient.on(\"message\", (topic, message, packet) => {\r\n \r\n if (topic.indexOf(\"img0\") != -1) {\r\n // try {\r\n const utf8decoder = new TextDecoder()\r\n const u8arr = new Uint8Array(message)\r\n const temp = utf8decoder.decode(u8arr)\t// 将二进制数据转为字符串\r\n const msg = JSON.parse(temp)\t\t//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据\r\n // debugger\r\n // console.log(\"msg\", msg) //msg为转换后的JSON数据\r\n // console.log(\"msg.pic\", msg.pic) \r\n // debugger\r\n // var that = this\r\n \r\n // document.getElementById(\"mapModule\").contentWindow.getDestination(JSON.stringify(msg))\r\n // window.parent.getDestination(JSON.stringify(msg));\r\n // debugger\r\n // unity.SendMessage('AAA', 'SendImage', JSON.stringify(msg));\r\n // this.imgUrl = 'data:image/png;base64,' + msg.pic;\r\n // console.log(\"imageUrl\", imageUrl)\r\n \r\n // } \r\n // catch {\r\n // let imageType = 'arraybuffer';\r\n // const blob = new Blob([message], { type: imageType })\r\n // const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)\r\n // // console.log(\"imageUrl\", imageUrl)\r\n // }\r\n } else if (topic.indexOf(\"img1\") != -1) {\r\n try {\r\n const utf8decoder = new TextDecoder()\r\n const u8arr = new Uint8Array(message)\r\n const temp = utf8decoder.decode(u8arr)\t// 将二进制数据转为字符串\r\n const msg = JSON.parse(temp)\t\t//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据\r\n console.log(\"msg\", msg) //msg为转换后的JSON数据\r\n this.imgUrl1 = 'data:image/png;base64,' + msg.pic;\r\n console.log(\"imageUrl\", imageUrl)\r\n } catch {\r\n let imageType = 'arraybuffer';\r\n const blob = new Blob([message], { type: imageType })\r\n const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)\r\n console.log(\"imageUrl\", imageUrl)\r\n }\r\n } else if (topic.indexOf(\"img2\") != -1) {\r\n try {\r\n const utf8decoder = new TextDecoder()\r\n const u8arr = new Uint8Array(message)\r\n const temp = utf8decoder.decode(u8arr)\t// 将二进制数据转为字符串\r\n const msg = JSON.parse(temp)\t\t//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据\r\n console.log(\"msg\", msg) //msg为转换后的JSON数据\r\n this.imgUrl2 = 'data:image/png;base64,' + msg.pic;\r\n console.log(\"imageUrl\", imageUrl)\r\n } catch {\r\n let imageType = 'arraybuffer';\r\n const blob = new Blob([message], { type: imageType })\r\n const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)\r\n console.log(\"imageUrl\", imageUrl)\r\n }\r\n } else if (topic.indexOf(\"img3\") != -1) {\r\n try {\r\n const utf8decoder = new TextDecoder()\r\n const u8arr = new Uint8Array(message)\r\n const temp = utf8decoder.decode(u8arr)\t// 将二进制数据转为字符串\r\n const msg = JSON.parse(temp)\t\t//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据\r\n console.log(\"msg\", msg) //msg为转换后的JSON数据\r\n this.imgUrl3 = 'data:image/png;base64,' + msg.pic;\r\n console.log(\"imageUrl\", imageUrl)\r\n } catch {\r\n let imageType = 'arraybuffer';\r\n const blob = new Blob([message], { type: imageType })\r\n const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)\r\n console.log(\"imageUrl\", imageUrl)\r\n }\r\n } else if (topic.indexOf(\"img4\") != -1) {\r\n try {\r\n const utf8decoder = new TextDecoder()\r\n const u8arr = new Uint8Array(message)\r\n const temp = utf8decoder.decode(u8arr)\t// 将二进制数据转为字符串\r\n const msg = JSON.parse(temp)\t\t//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据\r\n console.log(\"msg\", msg) //msg为转换后的JSON数据\r\n this.imgUrl4 = 'data:image/png;base64,' + msg.pic;\r\n console.log(\"imageUrl\", imageUrl)\r\n } catch {\r\n let imageType = 'arraybuffer';\r\n const blob = new Blob([message], { type: imageType })\r\n const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)\r\n console.log(\"imageUrl\", imageUrl)\r\n }\r\n } else if (topic.indexOf(\"img5\") != -1) {\r\n try {\r\n const utf8decoder = new TextDecoder()\r\n const u8arr = new Uint8Array(message)\r\n const temp = utf8decoder.decode(u8arr)\t// 将二进制数据转为字符串\r\n const msg = JSON.parse(temp)\t\t//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据\r\n console.log(\"msg\", msg) //msg为转换后的JSON数据\r\n this.imgUrl5 = 'data:image/png;base64,' + msg.pic;\r\n console.log(\"imageUrl\", imageUrl)\r\n } catch {\r\n let imageType = 'arraybuffer';\r\n const blob = new Blob([message], { type: imageType })\r\n const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)\r\n console.log(\"imageUrl\", imageUrl)\r\n }\r\n } else if (topic.indexOf(\"stream0\") != -1) {\r\n // console.log(\r\n // `[MQTT-TEST] 从主题 \"${topic}\" 收到的内容: ${message.toString()}`,\r\n // new Date(),\r\n // new Date().getMilliseconds()\r\n // );\r\n } else if (topic.indexOf(\"stream0\") != -1) {\r\n // console.log(\r\n // `[MQTT-TEST] 从主题 \"${topic}\" 收到的内容: ${message.toString()}`,\r\n // new Date(),\r\n // new Date().getMilliseconds()\r\n // );\r\n } else if (topic.indexOf(\"stream1\") != -1) {\r\n console.log(\r\n `[MQTT-TEST] 从主题 \"${topic}\" 收到的内容: ${message.toString()}`,\r\n new Date(),\r\n new Date().getMilliseconds()\r\n );\r\n } else if (topic.indexOf(\"stream2\") != -1) {\r\n console.log(\r\n `[MQTT-TEST] 从主题 \"${topic}\" 收到的内容: ${message.toString()}`,\r\n new Date(),\r\n new Date().getMilliseconds()\r\n );\r\n } else if (topic.indexOf(\"stream3\") != -1) {\r\n console.log(\r\n `[MQTT-TEST] 从主题 \"${topic}\" 收到的内容: ${message.toString()}`,\r\n new Date(),\r\n new Date().getMilliseconds()\r\n );\r\n } else if (topic.indexOf(\"stream4\") != -1) {\r\n console.log(\r\n `[MQTT-TEST] 从主题 \"${topic}\" 收到的内容: ${message.toString()}`,\r\n new Date(),\r\n new Date().getMilliseconds()\r\n );\r\n } else if (topic.indexOf(\"stream5\") != -1) {\r\n console.log(\r\n `[MQTT-TEST] 从主题 \"${topic}\" 收到的内容: ${message.toString()}`,\r\n new Date(),\r\n new Date().getMilliseconds()\r\n );\r\n }\r\n\r\n });\r\n }\r\n\r\n\r\n },\r\n\r\n }\r\n};\r\n</script>\r\n \r\n<style lang=\"scss\" scoped>\r\n// /deep/ .el-form-item__content {\r\n// display: flex;\r\n// flex-flow: row nowrap;\r\n// align-items: center;\r\n// }\r\n// /deep/ .el-form-item__label {\r\n// text-align: left;\r\n// font-size: 16px;\r\n// }\r\n.dataBoard {\r\n display: flex;\r\n justify-content: space-between;\r\n}\r\n.top .section {\r\n// width: 80%;\r\n// border: 1px solid gray;\r\n box-sizing: border-box;\r\n padding: 15px;\r\n margin-bottom: 1%;\r\n}\r\n.dataBoard .region,\r\n.dataBoard .section {\r\n width: 80%;\r\n// border: 1px solid gray;\r\n border: 1px solid #E4E7ED;\r\n box-sizing: border-box;\r\n padding: 15px;\r\n margin-bottom: 3%;\r\n}\r\n\r\n.dataBoard .board-title {\r\n font-size: 17px;\r\n font-weight: bolder;\r\n position: relative;\r\n margin-bottom: 30px;\r\n}\r\n.container {\r\n width: 100%;\r\n height: 100%;\r\n p {\r\n width: 95%;\r\n font-size: 25px;\r\n text-align: left;\r\n border-bottom: 1px solid black;\r\n margin-bottom: 20px;\r\n }\r\n}\r\n</style>\r\n "]}]} |