diff --git a/node_modules/.cache/babel-loader/ebcbf507f66a6b4210cfde98cae6e2ca.json b/node_modules/.cache/babel-loader/ebcbf507f66a6b4210cfde98cae6e2ca.json index 342d8b0a..2f183d00 100644 --- a/node_modules/.cache/babel-loader/ebcbf507f66a6b4210cfde98cae6e2ca.json +++ b/node_modules/.cache/babel-loader/ebcbf507f66a6b4210cfde98cae6e2ca.json @@ -1 +1 @@ -{"remainingRequest":"D:\\视频边缘1215\\TransFlow\\node_modules\\babel-loader\\lib\\index.js!D:\\视频边缘1215\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js??ref--0-0!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":1672741926736},{"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":["import \"core-js/modules/es6.regexp.to-string\";\nimport \"core-js/modules/es6.typed.uint8-array\";\nimport \"core-js/modules/es6.function.name\";\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\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协议\n\nexport default {\n data: function 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 coordinateForm: {\n coordinateClose: false,\n model: 'Georeferencing',\n coordinateTransformation: '84坐标系'\n },\n coordinateTableData: [{\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 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 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 stopStateform: {\n displacement: '2000',\n speed: '2000',\n acceleration: '2000'\n },\n //通信设置\n communicationform: {\n type: '快速-用于高带宽连接'\n },\n form: {\n name: '',\n region: '',\n date1: '',\n date2: '',\n delivery: false,\n type: [],\n resource: '',\n desc: ''\n },\n tableData: [{\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 internalIpList: [],\n fileList: []\n };\n },\n created: function created() {// this.getDataByMqtt()\n // this.testMqtt()\n },\n methods: {\n testMqtt: function testMqtt() {\n this.getDataByMqtt();\n },\n handleChange: function handleChange() {},\n handleagain: function handleagain() {\n var _this = this;\n\n this.$confirm('此操作将重新启动系统, 是否继续?', '提示', {\n confirmButtonText: '确定',\n cancelButtonText: '取消',\n type: 'warning'\n }).then(function () {// this.$message({\n // type: 'success',\n // message: '删除成功!'\n // });\n }).catch(function () {\n _this.$message({\n type: 'info',\n message: '已取消'\n });\n });\n },\n handleReset: function handleReset() {\n var _this2 = this;\n\n this.$confirm('此操作将重置默认值, 是否继续?', '提示', {\n confirmButtonText: '确定',\n cancelButtonText: '取消',\n type: 'warning'\n }).then(function () {// this.$message({\n // type: 'success',\n // message: '删除成功!'\n // });\n }).catch(function () {\n _this2.$message({\n type: 'info',\n message: '已取消重置'\n });\n });\n },\n handleRemove: function handleRemove(file, fileList) {\n console.log(file, fileList);\n },\n handlePreview: function handlePreview(file) {\n console.log(file);\n },\n handleExceed: function handleExceed(files, fileList) {\n this.$message.warning(\"\\u5F53\\u524D\\u9650\\u5236\\u9009\\u62E9 3 \\u4E2A\\u6587\\u4EF6\\uFF0C\\u672C\\u6B21\\u9009\\u62E9\\u4E86 \".concat(files.length, \" \\u4E2A\\u6587\\u4EF6\\uFF0C\\u5171\\u9009\\u62E9\\u4E86 \").concat(files.length + fileList.length, \" \\u4E2A\\u6587\\u4EF6\"));\n },\n beforeRemove: function beforeRemove(file, fileList) {\n return this.$confirm(\"\\u786E\\u5B9A\\u79FB\\u9664 \".concat(file.name, \"\\uFF1F\"));\n },\n // 获取列表\n getReverseShellList: function getReverseShellList() {\n // getShellList().then(res => {\n // if (res.code === 200) {\n // if (res.data && res.data.length > 0) {\n // \t// 获取到的数据加上 isEdit是false, 默认是文本\n // res.data.forEach(item => {\n // item['isEdit'] = false\n // })\n // }\n // this.tableData = res.data\n // 在表格列表前插入一行,用来新增数据\n this.tableData.unshift({\n name: '',\n inIp: '',\n inPort: null,\n outPort: null,\n enabled: null,\n isEdit: true\n }); // }\n // })\n },\n // 新增按钮\n handleAdd: function handleAdd(row) {\n for (var key in row) {\n // 判断一行字段是否输入完整\n if (row[key] === '' || row[key] === null || typeof row[key] === 'undefined') {\n this.msgError('Please complete the information');\n return;\n }\n }\n\n var params = {\n name: row.name,\n inIp: row.inIp // inPort: parseInt(row.inPort),\n // outPort: parseInt(row.outPort),\n // enabled: row.enabled\n\n };\n this.getReverseShellList(); // addShell(params).then(res => {\n // if (res.code === 200) {\n // this.msgSuccess('Add reverse shell successfully')\n // row.isEdit = false\n // this.getReverseShellList()\n // }\n // })\n },\n // 编辑或者Apply按钮\n handleUpdate: function handleUpdate(row) {\n // 点击Apply时\n if (row.isEdit) {\n for (var key in row) {\n if (row[key] === '' || row[key] === null || typeof row[key] === 'undefined') {\n this.msgError('Please complete the information');\n return;\n }\n }\n\n var params = {\n name: row.name,\n inIp: row.inIp,\n inPort: parseInt(row.inPort),\n outPort: parseInt(row.outPort),\n enabled: row.enabled\n }; // updateShell(params).then(res => {\n // if (res.code === 200) {\n // this.msgSuccess('Update reverse shell successfully')\n // this.getReverseShellList()\n // }\n // })\n } else {\n // 点击编辑时\n row.isEdit = true;\n }\n },\n // 删除或取消按钮\n handleDelete: function handleDelete(row) {\n // 点击取消时\n if (row.isEdit) {\n this.getReverseShellList();\n } else {\n // 点击删除时\n this.$confirm('Are you sure to delete reverse shell?', 'warning', {\n confirmButtonText: 'Sure',\n cancelButtonText: 'Cancel',\n type: 'warning'\n }).then(function () {// deleteShell(row.name).then(res => {\n // if (res.code === 200) {\n // this.msgSuccess('Delete reverse shell successfully')\n // this.getReverseShellList()\n // }\n // })\n }).catch(function () {});\n }\n },\n // mqtt订阅(独立)\n getDataByMqtt: function getDataByMqtt(url, topic, cIdNum) {\n var _this3 = this;\n\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 var clientId = \"test_id_\" + String(new Date().getTime()); // 用户名\n // const host = 'ws://49.234.27.18:10087/'; // 一个测试用url,改成给的,ws://broker.emqx.io:8083/mqtt\n\n var host = 'ws://172.16.1.168:10087/';\n var options = {\n // 配置\n // 测试:订阅本机IP\n // host: host,\n // port: port,\n // host:\"172.16.1.168:10086\",\n keepalive: 60,\n // 心跳时间,默认60s,设置为0禁用\n username: 'admin',\n // 用户名(可选)\n password: '123456',\n // 密码(可选)\n clientId: clientId,\n // 客户端ID,默认随机生成\n protocolId: \"MQTT\",\n protocolVersion: 4,\n clean: true,\n // false在离线时接收QoS1和2的消息\n reconnectPeriod: 2000,\n // 重连间隔,默认1000毫秒\n connectTimeout: 30 * 1000,\n // 收到CONNACK之前的等待时间\n will: {\n // 遗嘱消息(客户端严重断开连接时Broker将自动发送的消息)\n topic: \"img1\",\n // 要发布的主题\n payload: \"[MQTT-TEST] 遗嘱消息:连接异常断开!\",\n // 要发布的消息\n qos: 0,\n // QoS(Quality of Service),QoS0:只负责发,QoS1:保证消息至少送达1次,QoS2:保证消息到且仅到1次\n retain: false // 保留标志\n\n }\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\n this.mqttClient.on(\"error\", function (err) {\n console.log(\"[MQTT-TEST] 连接错误:\", err);\n\n _this3.mqttClient.end();\n }); // 重连回调\n\n this.mqttClient.on(\"reconnect\", function (reconnect) {// console.log(\"[MQTT-TEST] 重连中……\", reconnect);\n }); // 连接回调\n\n this.mqttClient.on(\"connect\", function (connect) {\n // console.log(\"[MQTT-TEST] 已连接的客户端ID: \", connect);\n // 订阅\n _this3.mqttClient.subscribe('img0', {\n qos: 0\n });\n\n _this3.mqttClient.subscribe('img1', {\n qos: 0\n });\n\n _this3.mqttClient.subscribe('img2', {\n qos: 0\n });\n\n _this3.mqttClient.subscribe('img3', {\n qos: 0\n });\n\n _this3.mqttClient.subscribe('img4', {\n qos: 0\n });\n\n _this3.mqttClient.subscribe('img5', {\n qos: 0\n });\n\n _this3.mqttClient.subscribe('stream0', {\n qos: 0\n });\n\n _this3.mqttClient.subscribe('stream1', {\n qos: 0\n });\n\n _this3.mqttClient.subscribe('stream2', {\n qos: 0\n });\n\n _this3.mqttClient.subscribe('stream3', {\n qos: 0\n });\n\n _this3.mqttClient.subscribe('stream4', {\n qos: 0\n });\n\n _this3.mqttClient.subscribe('stream5', {\n qos: 0\n });\n }); // 接收回调\n\n this.mqttClient.on(\"message\", function (topic, message, packet) {\n if (topic.indexOf(\"img0\") != -1) {\n // try {\n var utf8decoder = new TextDecoder();\n var u8arr = new Uint8Array(message);\n var temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串\n\n var msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片,不报错则返回的是JSON的错误提示数据\n // debugger\n // console.log(\"msg\", msg) //msg为转换后的JSON数据\n // console.log(\"msg.pic\", msg.pic) \n // debugger\n // var that = this\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 // 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 var _utf8decoder = new TextDecoder();\n\n var _u8arr = new Uint8Array(message);\n\n var _temp = _utf8decoder.decode(_u8arr); // 将二进制数据转为字符串\n\n\n var _msg = JSON.parse(_temp); //这一步报错则返回的是二进制流图片,不报错则返回的是JSON的错误提示数据\n\n\n console.log(\"msg\", _msg); //msg为转换后的JSON数据\n\n _this3.imgUrl1 = 'data:image/png;base64,' + _msg.pic;\n console.log(\"imageUrl\", imageUrl);\n } catch (_unused) {\n var imageType = 'arraybuffer';\n var blob = new Blob([message], {\n type: imageType\n });\n\n var _imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);\n\n console.log(\"imageUrl\", _imageUrl);\n }\n } else if (topic.indexOf(\"img2\") != -1) {\n try {\n var _utf8decoder2 = new TextDecoder();\n\n var _u8arr2 = new Uint8Array(message);\n\n var _temp2 = _utf8decoder2.decode(_u8arr2); // 将二进制数据转为字符串\n\n\n var _msg2 = JSON.parse(_temp2); //这一步报错则返回的是二进制流图片,不报错则返回的是JSON的错误提示数据\n\n\n console.log(\"msg\", _msg2); //msg为转换后的JSON数据\n\n _this3.imgUrl2 = 'data:image/png;base64,' + _msg2.pic;\n console.log(\"imageUrl\", imageUrl);\n } catch (_unused2) {\n var _imageType = 'arraybuffer';\n\n var _blob = new Blob([message], {\n type: _imageType\n });\n\n var _imageUrl2 = (window.URL || window.webkitURL).createObjectURL(_blob);\n\n console.log(\"imageUrl\", _imageUrl2);\n }\n } else if (topic.indexOf(\"img3\") != -1) {\n try {\n var _utf8decoder3 = new TextDecoder();\n\n var _u8arr3 = new Uint8Array(message);\n\n var _temp3 = _utf8decoder3.decode(_u8arr3); // 将二进制数据转为字符串\n\n\n var _msg3 = JSON.parse(_temp3); //这一步报错则返回的是二进制流图片,不报错则返回的是JSON的错误提示数据\n\n\n console.log(\"msg\", _msg3); //msg为转换后的JSON数据\n\n _this3.imgUrl3 = 'data:image/png;base64,' + _msg3.pic;\n console.log(\"imageUrl\", imageUrl);\n } catch (_unused3) {\n var _imageType2 = 'arraybuffer';\n\n var _blob2 = new Blob([message], {\n type: _imageType2\n });\n\n var _imageUrl3 = (window.URL || window.webkitURL).createObjectURL(_blob2);\n\n console.log(\"imageUrl\", _imageUrl3);\n }\n } else if (topic.indexOf(\"img4\") != -1) {\n try {\n var _utf8decoder4 = new TextDecoder();\n\n var _u8arr4 = new Uint8Array(message);\n\n var _temp4 = _utf8decoder4.decode(_u8arr4); // 将二进制数据转为字符串\n\n\n var _msg4 = JSON.parse(_temp4); //这一步报错则返回的是二进制流图片,不报错则返回的是JSON的错误提示数据\n\n\n console.log(\"msg\", _msg4); //msg为转换后的JSON数据\n\n _this3.imgUrl4 = 'data:image/png;base64,' + _msg4.pic;\n console.log(\"imageUrl\", imageUrl);\n } catch (_unused4) {\n var _imageType3 = 'arraybuffer';\n\n var _blob3 = new Blob([message], {\n type: _imageType3\n });\n\n var _imageUrl4 = (window.URL || window.webkitURL).createObjectURL(_blob3);\n\n console.log(\"imageUrl\", _imageUrl4);\n }\n } else if (topic.indexOf(\"img5\") != -1) {\n try {\n var _utf8decoder5 = new TextDecoder();\n\n var _u8arr5 = new Uint8Array(message);\n\n var _temp5 = _utf8decoder5.decode(_u8arr5); // 将二进制数据转为字符串\n\n\n var _msg5 = JSON.parse(_temp5); //这一步报错则返回的是二进制流图片,不报错则返回的是JSON的错误提示数据\n\n\n console.log(\"msg\", _msg5); //msg为转换后的JSON数据\n\n _this3.imgUrl5 = 'data:image/png;base64,' + _msg5.pic;\n console.log(\"imageUrl\", imageUrl);\n } catch (_unused5) {\n var _imageType4 = 'arraybuffer';\n\n var _blob4 = new Blob([message], {\n type: _imageType4\n });\n\n var _imageUrl5 = (window.URL || window.webkitURL).createObjectURL(_blob4);\n\n console.log(\"imageUrl\", _imageUrl5);\n }\n } else if (topic.indexOf(\"stream0\") != -1) {// console.log(\n // `[MQTT-TEST] 从主题 \"${topic}\" 收到的内容: ${message.toString()}`,\n // new Date(),\n // new Date().getMilliseconds()\n // );\n } else if (topic.indexOf(\"stream0\") != -1) {// 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(\"[MQTT-TEST] \\u4ECE\\u4E3B\\u9898 \\\"\".concat(topic, \"\\\" \\u6536\\u5230\\u7684\\u5185\\u5BB9: \").concat(message.toString()), new Date(), new Date().getMilliseconds());\n } else if (topic.indexOf(\"stream2\") != -1) {\n console.log(\"[MQTT-TEST] \\u4ECE\\u4E3B\\u9898 \\\"\".concat(topic, \"\\\" \\u6536\\u5230\\u7684\\u5185\\u5BB9: \").concat(message.toString()), new Date(), new Date().getMilliseconds());\n } else if (topic.indexOf(\"stream3\") != -1) {\n console.log(\"[MQTT-TEST] \\u4ECE\\u4E3B\\u9898 \\\"\".concat(topic, \"\\\" \\u6536\\u5230\\u7684\\u5185\\u5BB9: \").concat(message.toString()), new Date(), new Date().getMilliseconds());\n } else if (topic.indexOf(\"stream4\") != -1) {\n console.log(\"[MQTT-TEST] \\u4ECE\\u4E3B\\u9898 \\\"\".concat(topic, \"\\\" \\u6536\\u5230\\u7684\\u5185\\u5BB9: \").concat(message.toString()), new Date(), new Date().getMilliseconds());\n } else if (topic.indexOf(\"stream5\") != -1) {\n console.log(\"[MQTT-TEST] \\u4ECE\\u4E3B\\u9898 \\\"\".concat(topic, \"\\\" \\u6536\\u5230\\u7684\\u5185\\u5BB9: \").concat(message.toString()), new Date(), new Date().getMilliseconds());\n }\n });\n }\n }\n }\n};",{"version":3,"sources":["analysisConfiguration.vue"],"names":[],"mappings":"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","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 <p class=\"board-title\">坐标转换</p>\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 <el-radio-group v-model=\"coordinateForm.model\">\r\n <el-radio label=\"Georeferencing\"></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=\"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\">\r\n <iframe id=\"mapModule\" src=\"./VideoWeb/index.html\" frameborder=\"0\" style=\"width: 100%; height:100%;\" ></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 <p class=\"board-title\">车道识别配置</p>\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 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 <p class=\"board-title\">识别区域</p>\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 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 <p class=\"board-title\">轨迹平滑</p>\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 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 <p class=\"board-title\">车牌识别</p>\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 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 <p class=\"board-title\">停车状态</p>\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 :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-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\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 },\r\n methods: {\r\n testMqtt() {\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 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 "],"sourceRoot":"src/views/bounced"}]} \ No newline at end of file +{"remainingRequest":"D:\\视频边缘1215\\TransFlow\\node_modules\\babel-loader\\lib\\index.js!D:\\视频边缘1215\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js??ref--0-0!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":1672809677780},{"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":["import \"core-js/modules/es6.regexp.to-string\";\nimport \"core-js/modules/es6.typed.uint8-array\";\nimport \"core-js/modules/es6.function.name\";\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\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协议\n\nexport default {\n data: function 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 coordinateForm: {\n coordinateClose: false,\n model: 'Georeferencing',\n coordinateTransformation: '84坐标系'\n },\n coordinateTableData: [{\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 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 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 stopStateform: {\n displacement: '2000',\n speed: '2000',\n acceleration: '2000'\n },\n //通信设置\n communicationform: {\n type: '快速-用于高带宽连接'\n },\n form: {\n name: '',\n region: '',\n date1: '',\n date2: '',\n delivery: false,\n type: [],\n resource: '',\n desc: ''\n },\n tableData: [{\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 internalIpList: [],\n fileList: []\n };\n },\n created: function created() {// 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 methods: {\n load: function load() {\n var _this = this;\n\n console.log(\"1111\");\n var iframe = document.getElementById(\"mapModuleTop\");\n console.log(\"iframe\", iframe); // if (iframe.attachEvent) {\n // setTimeout(() => {\n // this.testMqtt()\n // }, 5000);\n // }else{\n // console.log(\"3333\") \n // }\n\n iframe.onload = function () {\n // setTimeout(() => {\n _this.testMqtt(); // }, 5000);\n\n };\n },\n testMqtt: function testMqtt() {\n console.log(\"222\");\n this.getDataByMqtt();\n },\n handleChange: function handleChange() {},\n handleagain: function handleagain() {\n var _this2 = this;\n\n this.$confirm('此操作将重新启动系统, 是否继续?', '提示', {\n confirmButtonText: '确定',\n cancelButtonText: '取消',\n type: 'warning'\n }).then(function () {// this.$message({\n // type: 'success',\n // message: '删除成功!'\n // });\n }).catch(function () {\n _this2.$message({\n type: 'info',\n message: '已取消'\n });\n });\n },\n handleReset: function handleReset() {\n var _this3 = this;\n\n this.$confirm('此操作将重置默认值, 是否继续?', '提示', {\n confirmButtonText: '确定',\n cancelButtonText: '取消',\n type: 'warning'\n }).then(function () {// this.$message({\n // type: 'success',\n // message: '删除成功!'\n // });\n }).catch(function () {\n _this3.$message({\n type: 'info',\n message: '已取消重置'\n });\n });\n },\n handleRemove: function handleRemove(file, fileList) {\n console.log(file, fileList);\n },\n handlePreview: function handlePreview(file) {\n console.log(file);\n },\n handleExceed: function handleExceed(files, fileList) {\n this.$message.warning(\"\\u5F53\\u524D\\u9650\\u5236\\u9009\\u62E9 3 \\u4E2A\\u6587\\u4EF6\\uFF0C\\u672C\\u6B21\\u9009\\u62E9\\u4E86 \".concat(files.length, \" \\u4E2A\\u6587\\u4EF6\\uFF0C\\u5171\\u9009\\u62E9\\u4E86 \").concat(files.length + fileList.length, \" \\u4E2A\\u6587\\u4EF6\"));\n },\n beforeRemove: function beforeRemove(file, fileList) {\n return this.$confirm(\"\\u786E\\u5B9A\\u79FB\\u9664 \".concat(file.name, \"\\uFF1F\"));\n },\n // 获取列表\n getReverseShellList: function getReverseShellList() {\n // getShellList().then(res => {\n // if (res.code === 200) {\n // if (res.data && res.data.length > 0) {\n // \t// 获取到的数据加上 isEdit是false, 默认是文本\n // res.data.forEach(item => {\n // item['isEdit'] = false\n // })\n // }\n // this.tableData = res.data\n // 在表格列表前插入一行,用来新增数据\n this.tableData.unshift({\n name: '',\n inIp: '',\n inPort: null,\n outPort: null,\n enabled: null,\n isEdit: true\n }); // }\n // })\n },\n // 新增按钮\n handleAdd: function handleAdd(row) {\n for (var key in row) {\n // 判断一行字段是否输入完整\n if (row[key] === '' || row[key] === null || typeof row[key] === 'undefined') {\n this.msgError('Please complete the information');\n return;\n }\n }\n\n var params = {\n name: row.name,\n inIp: row.inIp // inPort: parseInt(row.inPort),\n // outPort: parseInt(row.outPort),\n // enabled: row.enabled\n\n };\n this.getReverseShellList(); // addShell(params).then(res => {\n // if (res.code === 200) {\n // this.msgSuccess('Add reverse shell successfully')\n // row.isEdit = false\n // this.getReverseShellList()\n // }\n // })\n },\n // 编辑或者Apply按钮\n handleUpdate: function handleUpdate(row) {\n // 点击Apply时\n if (row.isEdit) {\n for (var key in row) {\n if (row[key] === '' || row[key] === null || typeof row[key] === 'undefined') {\n this.msgError('Please complete the information');\n return;\n }\n }\n\n var params = {\n name: row.name,\n inIp: row.inIp,\n inPort: parseInt(row.inPort),\n outPort: parseInt(row.outPort),\n enabled: row.enabled\n }; // updateShell(params).then(res => {\n // if (res.code === 200) {\n // this.msgSuccess('Update reverse shell successfully')\n // this.getReverseShellList()\n // }\n // })\n } else {\n // 点击编辑时\n row.isEdit = true;\n }\n },\n // 删除或取消按钮\n handleDelete: function handleDelete(row) {\n // 点击取消时\n if (row.isEdit) {\n this.getReverseShellList();\n } else {\n // 点击删除时\n this.$confirm('Are you sure to delete reverse shell?', 'warning', {\n confirmButtonText: 'Sure',\n cancelButtonText: 'Cancel',\n type: 'warning'\n }).then(function () {// deleteShell(row.name).then(res => {\n // if (res.code === 200) {\n // this.msgSuccess('Delete reverse shell successfully')\n // this.getReverseShellList()\n // }\n // })\n }).catch(function () {});\n }\n },\n // mqtt订阅(独立)\n getDataByMqtt: function getDataByMqtt(url, topic, cIdNum) {\n var _this4 = this;\n\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 var clientId = \"test_id_\" + String(new Date().getTime()); // 用户名\n // const host = 'ws://49.234.27.18:10087/'; // 一个测试用url,改成给的,ws://broker.emqx.io:8083/mqtt\n\n var host = 'ws://172.16.1.168:10087/';\n var options = {\n // 配置\n // 测试:订阅本机IP\n // host: host,\n // port: port,\n // host:\"172.16.1.168:10086\",\n keepalive: 60,\n // 心跳时间,默认60s,设置为0禁用\n username: 'admin',\n // 用户名(可选)\n password: '123456',\n // 密码(可选)\n clientId: clientId,\n // 客户端ID,默认随机生成\n protocolId: \"MQTT\",\n protocolVersion: 4,\n clean: true,\n // false在离线时接收QoS1和2的消息\n reconnectPeriod: 2000,\n // 重连间隔,默认1000毫秒\n connectTimeout: 30 * 1000,\n // 收到CONNACK之前的等待时间\n will: {\n // 遗嘱消息(客户端严重断开连接时Broker将自动发送的消息)\n topic: \"img1\",\n // 要发布的主题\n payload: \"[MQTT-TEST] 遗嘱消息:连接异常断开!\",\n // 要发布的消息\n qos: 0,\n // QoS(Quality of Service),QoS0:只负责发,QoS1:保证消息至少送达1次,QoS2:保证消息到且仅到1次\n retain: false // 保留标志\n\n }\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\n this.mqttClient.on(\"error\", function (err) {\n console.log(\"[MQTT-TEST] 连接错误:\", err);\n\n _this4.mqttClient.end();\n }); // 重连回调\n\n this.mqttClient.on(\"reconnect\", function (reconnect) {// console.log(\"[MQTT-TEST] 重连中……\", reconnect);\n }); // 连接回调\n\n this.mqttClient.on(\"connect\", function (connect) {\n // console.log(\"[MQTT-TEST] 已连接的客户端ID: \", connect);\n // 订阅\n _this4.mqttClient.subscribe('img0', {\n qos: 0\n });\n\n _this4.mqttClient.subscribe('img1', {\n qos: 0\n });\n\n _this4.mqttClient.subscribe('img2', {\n qos: 0\n });\n\n _this4.mqttClient.subscribe('img3', {\n qos: 0\n });\n\n _this4.mqttClient.subscribe('img4', {\n qos: 0\n });\n\n _this4.mqttClient.subscribe('img5', {\n qos: 0\n });\n\n _this4.mqttClient.subscribe('stream0', {\n qos: 0\n });\n\n _this4.mqttClient.subscribe('stream1', {\n qos: 0\n });\n\n _this4.mqttClient.subscribe('stream2', {\n qos: 0\n });\n\n _this4.mqttClient.subscribe('stream3', {\n qos: 0\n });\n\n _this4.mqttClient.subscribe('stream4', {\n qos: 0\n });\n\n _this4.mqttClient.subscribe('stream5', {\n qos: 0\n });\n }); // 接收回调\n\n this.mqttClient.on(\"message\", function (topic, message, packet) {\n if (topic.indexOf(\"img0\") != -1) {\n // try {\n var utf8decoder = new TextDecoder();\n var u8arr = new Uint8Array(message);\n var temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串\n\n var msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片,不报错则返回的是JSON的错误提示数据\n // debugger\n // console.log(\"msg\", msg) //msg为转换后的JSON数据\n // console.log(\"msg.pic\", msg.pic) \n // debugger\n // var that = this\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 // 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 var _utf8decoder = new TextDecoder();\n\n var _u8arr = new Uint8Array(message);\n\n var _temp = _utf8decoder.decode(_u8arr); // 将二进制数据转为字符串\n\n\n var _msg = JSON.parse(_temp); //这一步报错则返回的是二进制流图片,不报错则返回的是JSON的错误提示数据\n\n\n console.log(\"msg\", _msg); //msg为转换后的JSON数据\n\n _this4.imgUrl1 = 'data:image/png;base64,' + _msg.pic;\n console.log(\"imageUrl\", imageUrl);\n } catch (_unused) {\n var imageType = 'arraybuffer';\n var blob = new Blob([message], {\n type: imageType\n });\n\n var _imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);\n\n console.log(\"imageUrl\", _imageUrl);\n }\n } else if (topic.indexOf(\"img2\") != -1) {\n try {\n var _utf8decoder2 = new TextDecoder();\n\n var _u8arr2 = new Uint8Array(message);\n\n var _temp2 = _utf8decoder2.decode(_u8arr2); // 将二进制数据转为字符串\n\n\n var _msg2 = JSON.parse(_temp2); //这一步报错则返回的是二进制流图片,不报错则返回的是JSON的错误提示数据\n\n\n console.log(\"msg\", _msg2); //msg为转换后的JSON数据\n\n _this4.imgUrl2 = 'data:image/png;base64,' + _msg2.pic;\n console.log(\"imageUrl\", imageUrl);\n } catch (_unused2) {\n var _imageType = 'arraybuffer';\n\n var _blob = new Blob([message], {\n type: _imageType\n });\n\n var _imageUrl2 = (window.URL || window.webkitURL).createObjectURL(_blob);\n\n console.log(\"imageUrl\", _imageUrl2);\n }\n } else if (topic.indexOf(\"img3\") != -1) {\n try {\n var _utf8decoder3 = new TextDecoder();\n\n var _u8arr3 = new Uint8Array(message);\n\n var _temp3 = _utf8decoder3.decode(_u8arr3); // 将二进制数据转为字符串\n\n\n var _msg3 = JSON.parse(_temp3); //这一步报错则返回的是二进制流图片,不报错则返回的是JSON的错误提示数据\n\n\n console.log(\"msg\", _msg3); //msg为转换后的JSON数据\n\n _this4.imgUrl3 = 'data:image/png;base64,' + _msg3.pic;\n console.log(\"imageUrl\", imageUrl);\n } catch (_unused3) {\n var _imageType2 = 'arraybuffer';\n\n var _blob2 = new Blob([message], {\n type: _imageType2\n });\n\n var _imageUrl3 = (window.URL || window.webkitURL).createObjectURL(_blob2);\n\n console.log(\"imageUrl\", _imageUrl3);\n }\n } else if (topic.indexOf(\"img4\") != -1) {\n try {\n var _utf8decoder4 = new TextDecoder();\n\n var _u8arr4 = new Uint8Array(message);\n\n var _temp4 = _utf8decoder4.decode(_u8arr4); // 将二进制数据转为字符串\n\n\n var _msg4 = JSON.parse(_temp4); //这一步报错则返回的是二进制流图片,不报错则返回的是JSON的错误提示数据\n\n\n console.log(\"msg\", _msg4); //msg为转换后的JSON数据\n\n _this4.imgUrl4 = 'data:image/png;base64,' + _msg4.pic;\n console.log(\"imageUrl\", imageUrl);\n } catch (_unused4) {\n var _imageType3 = 'arraybuffer';\n\n var _blob3 = new Blob([message], {\n type: _imageType3\n });\n\n var _imageUrl4 = (window.URL || window.webkitURL).createObjectURL(_blob3);\n\n console.log(\"imageUrl\", _imageUrl4);\n }\n } else if (topic.indexOf(\"img5\") != -1) {\n try {\n var _utf8decoder5 = new TextDecoder();\n\n var _u8arr5 = new Uint8Array(message);\n\n var _temp5 = _utf8decoder5.decode(_u8arr5); // 将二进制数据转为字符串\n\n\n var _msg5 = JSON.parse(_temp5); //这一步报错则返回的是二进制流图片,不报错则返回的是JSON的错误提示数据\n\n\n console.log(\"msg\", _msg5); //msg为转换后的JSON数据\n\n _this4.imgUrl5 = 'data:image/png;base64,' + _msg5.pic;\n console.log(\"imageUrl\", imageUrl);\n } catch (_unused5) {\n var _imageType4 = 'arraybuffer';\n\n var _blob4 = new Blob([message], {\n type: _imageType4\n });\n\n var _imageUrl5 = (window.URL || window.webkitURL).createObjectURL(_blob4);\n\n console.log(\"imageUrl\", _imageUrl5);\n }\n } else if (topic.indexOf(\"stream0\") != -1) {// console.log(\n // `[MQTT-TEST] 从主题 \"${topic}\" 收到的内容: ${message.toString()}`,\n // new Date(),\n // new Date().getMilliseconds()\n // );\n } else if (topic.indexOf(\"stream0\") != -1) {// 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(\"[MQTT-TEST] \\u4ECE\\u4E3B\\u9898 \\\"\".concat(topic, \"\\\" \\u6536\\u5230\\u7684\\u5185\\u5BB9: \").concat(message.toString()), new Date(), new Date().getMilliseconds());\n } else if (topic.indexOf(\"stream2\") != -1) {\n console.log(\"[MQTT-TEST] \\u4ECE\\u4E3B\\u9898 \\\"\".concat(topic, \"\\\" \\u6536\\u5230\\u7684\\u5185\\u5BB9: \").concat(message.toString()), new Date(), new Date().getMilliseconds());\n } else if (topic.indexOf(\"stream3\") != -1) {\n console.log(\"[MQTT-TEST] \\u4ECE\\u4E3B\\u9898 \\\"\".concat(topic, \"\\\" \\u6536\\u5230\\u7684\\u5185\\u5BB9: \").concat(message.toString()), new Date(), new Date().getMilliseconds());\n } else if (topic.indexOf(\"stream4\") != -1) {\n console.log(\"[MQTT-TEST] \\u4ECE\\u4E3B\\u9898 \\\"\".concat(topic, \"\\\" \\u6536\\u5230\\u7684\\u5185\\u5BB9: \").concat(message.toString()), new Date(), new Date().getMilliseconds());\n } else if (topic.indexOf(\"stream5\") != -1) {\n console.log(\"[MQTT-TEST] \\u4ECE\\u4E3B\\u9898 \\\"\".concat(topic, \"\\\" \\u6536\\u5230\\u7684\\u5185\\u5BB9: \").concat(message.toString()), new Date(), new Date().getMilliseconds());\n }\n });\n }\n }\n }\n};",{"version":3,"sources":["analysisConfiguration.vue"],"names":[],"mappings":"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","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 <p class=\"board-title\">坐标转换</p>\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 <el-radio-group v-model=\"coordinateForm.model\">\r\n <el-radio label=\"Georeferencing\"></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=\"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\" >\r\n <iframe id=\"mapModuleTop\" @load=\"load\" src=\"./VideoWeb/index.html\" frameborder=\"0\" style=\"width: 100%; height:100%;\" ></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 <p class=\"board-title\">车道识别配置</p>\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 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 <p class=\"board-title\">识别区域</p>\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 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 <p class=\"board-title\">轨迹平滑</p>\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 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 <p class=\"board-title\">车牌识别</p>\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 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 <p class=\"board-title\">停车状态</p>\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 :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-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\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 // if (iframe.attachEvent) {\r\n // setTimeout(() => {\r\n // this.testMqtt()\r\n // }, 5000);\r\n // }else{\r\n // console.log(\"3333\") \r\n // }\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 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 "],"sourceRoot":"src/views/bounced"}]} \ No newline at end of file diff --git a/node_modules/.cache/babel-loader/f068ef3330d09ff4e61d35edd6ca7a60.json b/node_modules/.cache/babel-loader/f068ef3330d09ff4e61d35edd6ca7a60.json index 58111c3e..aa0f8a4d 100644 --- a/node_modules/.cache/babel-loader/f068ef3330d09ff4e61d35edd6ca7a60.json +++ b/node_modules/.cache/babel-loader/f068ef3330d09ff4e61d35edd6ca7a60.json @@ -1 +1 @@ -{"remainingRequest":"D:\\视频边缘1215\\TransFlow\\node_modules\\babel-loader\\lib\\index.js!D:\\视频边缘1215\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js??ref--0-0!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":1672741609576},{"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},{"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":["import \"core-js/modules/es6.regexp.to-string\";\nimport \"core-js/modules/es6.typed.uint8-array\";\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\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协议\n\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: function data() {\n return {\n trajectory: false,\n //轨迹\n hideBoxShow: true,\n //隐藏箱子按钮显示隐藏\n closeStatus: null,\n modelOthers: false,\n componentShow: \"\",\n isShowBtn: true,\n //菜单按钮隐藏\n isShowBtn1: false,\n //菜单按钮显示\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 title: 'xx路口',\n url: ''\n }, {\n title: '数据看板',\n url: ''\n }, {\n title: '分析配置',\n url: ''\n }, {\n title: '分析配置',\n url: ''\n }],\n statusInfo: [{\n count: 15,\n name: \"穿梭车在线数量\",\n // icon: require(\"../assets/images/运行设备图标.png\"),\n color: \"#01A8FC\"\n }, {\n count: 26,\n name: \"任务数量\",\n // icon: require(\"../assets/images/故障设备图标.png\"),\n color: \"#FDA401\"\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 //小车信息\n carName: '',\n palletizerInfo: [],\n //码垛机信息\n palletizerName: '',\n destackerInfo: [],\n //拆垛机信息\n destackerName: '',\n hoistInfo: [],\n //提升机信息’\n hoistName: '',\n battaryStationInfo: [],\n //快换电池装置\n battaryStationName: \"\",\n conveyorInfo: [],\n //输送机信息\n conveyorName: \"\"\n };\n },\n mounted: function mounted() {// this.getMessage();\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: function created() {\n this.testMqtt();\n },\n methods: {\n // 测试:mqtt测试\n testMqtt: function testMqtt() {// 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 // 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 // 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: function onSubmit() {},\n //模型加载等待\n loadingShow: function loadingShow(data) {\n this.loadingShow1 = data;\n },\n // mqtt订阅(独立)\n getDataByMqtt: function getDataByMqtt(url, topic, cIdNum) {\n var _this = this;\n\n var clientId = \"test_id_\" + String(new Date().getTime()); // 用户名\n // const host = 'ws://49.234.27.18:10087/'; // 一个测试用url,改成给的,ws://broker.emqx.io:8083/mqtt\n\n var host = 'ws://172.16.1.168:10087/';\n var options = {\n // 配置\n // 测试:订阅本机IP\n // host: host,\n // port: port,\n // host:\"172.16.1.168:10086\",\n keepalive: 60,\n // 心跳时间,默认60s,设置为0禁用\n username: 'admin',\n // 用户名(可选)\n password: '123456',\n // 密码(可选)\n clientId: clientId,\n // 客户端ID,默认随机生成\n protocolId: \"MQTT\",\n protocolVersion: 4,\n clean: true,\n // false在离线时接收QoS1和2的消息\n reconnectPeriod: 2000,\n // 重连间隔,默认1000毫秒\n connectTimeout: 30 * 1000,\n // 收到CONNACK之前的等待时间\n will: {\n // 遗嘱消息(客户端严重断开连接时Broker将自动发送的消息)\n topic: \"img1\",\n // 要发布的主题\n payload: \"[MQTT-TEST] 遗嘱消息:连接异常断开!\",\n // 要发布的消息\n qos: 0,\n // QoS(Quality of Service),QoS0:只负责发,QoS1:保证消息至少送达1次,QoS2:保证消息到且仅到1次\n retain: false // 保留标志\n\n }\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\n this.mqttClient.on(\"error\", function (err) {\n console.log(\"[MQTT-TEST] 连接错误:\", err);\n\n _this.mqttClient.end();\n }); // 重连回调\n\n this.mqttClient.on(\"reconnect\", function (reconnect) {// console.log(\"[MQTT-TEST] 重连中……\", reconnect);\n }); // 连接回调\n\n this.mqttClient.on(\"connect\", function (connect) {\n // console.log(\"[MQTT-TEST] 已连接的客户端ID: \", connect);\n // 订阅\n _this.mqttClient.subscribe('img0', {\n qos: 0\n });\n\n _this.mqttClient.subscribe('img1', {\n qos: 0\n });\n\n _this.mqttClient.subscribe('img2', {\n qos: 0\n });\n\n _this.mqttClient.subscribe('img3', {\n qos: 0\n });\n\n _this.mqttClient.subscribe('img4', {\n qos: 0\n });\n\n _this.mqttClient.subscribe('img5', {\n qos: 0\n });\n\n _this.mqttClient.subscribe('stream0', {\n qos: 0\n });\n\n _this.mqttClient.subscribe('stream1', {\n qos: 0\n });\n\n _this.mqttClient.subscribe('stream2', {\n qos: 0\n });\n\n _this.mqttClient.subscribe('stream3', {\n qos: 0\n });\n\n _this.mqttClient.subscribe('stream4', {\n qos: 0\n });\n\n _this.mqttClient.subscribe('stream5', {\n qos: 0\n });\n }); // 接收回调\n\n this.mqttClient.on(\"message\", function (topic, message, packet) {\n // debugger\n // return\n // console.log(\"[MQTT-TEST] 已连接的客户端ID: \", message);\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 var utf8decoder = new TextDecoder();\n var u8arr = new Uint8Array(message);\n var temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串\n\n var msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片,不报错则返回的是JSON的错误提示数据\n // debugger\n // console.log(\"msg\", msg) //msg为转换后的JSON数据\n\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; // console.log(\"imageUrl\", imageUrl)\n } catch (_unused) {\n var imageType = 'arraybuffer';\n var blob = new Blob([message], {\n type: imageType\n });\n\n var _imageUrl = (window.URL || window.webkitURL).createObjectURL(blob); // console.log(\"imageUrl\", imageUrl)\n\n }\n } else if (topic.indexOf(\"img1\") != -1) {\n try {\n var _utf8decoder = new TextDecoder();\n\n var _u8arr = new Uint8Array(message);\n\n var _temp = _utf8decoder.decode(_u8arr); // 将二进制数据转为字符串\n\n\n var _msg = JSON.parse(_temp); //这一步报错则返回的是二进制流图片,不报错则返回的是JSON的错误提示数据\n // console.log(\"msg\", msg) //msg为转换后的JSON数据\n\n\n _this.imgUrl1 = 'data:image/png;base64,' + _msg.pic;\n console.log(\"imageUrl\", imageUrl);\n } catch (_unused2) {\n var _imageType = 'arraybuffer';\n\n var _blob = new Blob([message], {\n type: _imageType\n });\n\n var _imageUrl2 = (window.URL || window.webkitURL).createObjectURL(_blob);\n\n console.log(\"imageUrl\", _imageUrl2);\n }\n } else if (topic.indexOf(\"img2\") != -1) {\n try {\n var _utf8decoder2 = new TextDecoder();\n\n var _u8arr2 = new Uint8Array(message);\n\n var _temp2 = _utf8decoder2.decode(_u8arr2); // 将二进制数据转为字符串\n\n\n var _msg2 = JSON.parse(_temp2); //这一步报错则返回的是二进制流图片,不报错则返回的是JSON的错误提示数据\n\n\n console.log(\"msg\", _msg2); //msg为转换后的JSON数据\n\n _this.imgUrl2 = 'data:image/png;base64,' + _msg2.pic;\n console.log(\"imageUrl\", imageUrl);\n } catch (_unused3) {\n var _imageType2 = 'arraybuffer';\n\n var _blob2 = new Blob([message], {\n type: _imageType2\n });\n\n var _imageUrl3 = (window.URL || window.webkitURL).createObjectURL(_blob2);\n\n console.log(\"imageUrl\", _imageUrl3);\n }\n } else if (topic.indexOf(\"img3\") != -1) {\n try {\n var _utf8decoder3 = new TextDecoder();\n\n var _u8arr3 = new Uint8Array(message);\n\n var _temp3 = _utf8decoder3.decode(_u8arr3); // 将二进制数据转为字符串\n\n\n var _msg3 = JSON.parse(_temp3); //这一步报错则返回的是二进制流图片,不报错则返回的是JSON的错误提示数据\n\n\n console.log(\"msg\", _msg3); //msg为转换后的JSON数据\n\n _this.imgUrl3 = 'data:image/png;base64,' + _msg3.pic;\n console.log(\"imageUrl\", imageUrl);\n } catch (_unused4) {\n var _imageType3 = 'arraybuffer';\n\n var _blob3 = new Blob([message], {\n type: _imageType3\n });\n\n var _imageUrl4 = (window.URL || window.webkitURL).createObjectURL(_blob3);\n\n console.log(\"imageUrl\", _imageUrl4);\n }\n } else if (topic.indexOf(\"img4\") != -1) {\n try {\n var _utf8decoder4 = new TextDecoder();\n\n var _u8arr4 = new Uint8Array(message);\n\n var _temp4 = _utf8decoder4.decode(_u8arr4); // 将二进制数据转为字符串\n\n\n var _msg4 = JSON.parse(_temp4); //这一步报错则返回的是二进制流图片,不报错则返回的是JSON的错误提示数据\n\n\n console.log(\"msg\", _msg4); //msg为转换后的JSON数据\n\n _this.imgUrl4 = 'data:image/png;base64,' + _msg4.pic;\n console.log(\"imageUrl\", imageUrl);\n } catch (_unused5) {\n var _imageType4 = 'arraybuffer';\n\n var _blob4 = new Blob([message], {\n type: _imageType4\n });\n\n var _imageUrl5 = (window.URL || window.webkitURL).createObjectURL(_blob4);\n\n console.log(\"imageUrl\", _imageUrl5);\n }\n } else if (topic.indexOf(\"img5\") != -1) {\n try {\n var _utf8decoder5 = new TextDecoder();\n\n var _u8arr5 = new Uint8Array(message);\n\n var _temp5 = _utf8decoder5.decode(_u8arr5); // 将二进制数据转为字符串\n\n\n var _msg5 = JSON.parse(_temp5); //这一步报错则返回的是二进制流图片,不报错则返回的是JSON的错误提示数据\n\n\n console.log(\"msg\", _msg5); //msg为转换后的JSON数据\n\n _this.imgUrl5 = 'data:image/png;base64,' + _msg5.pic;\n console.log(\"imageUrl\", imageUrl);\n } catch (_unused6) {\n var _imageType5 = 'arraybuffer';\n\n var _blob5 = new Blob([message], {\n type: _imageType5\n });\n\n var _imageUrl6 = (window.URL || window.webkitURL).createObjectURL(_blob5);\n\n console.log(\"imageUrl\", _imageUrl6);\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 var _utf8decoder6 = new TextDecoder();\n\n var _u8arr6 = new Uint8Array(message);\n\n var _temp6 = _utf8decoder6.decode(_u8arr6); // 将二进制数据转为字符串\n\n\n var _msg6 = JSON.parse(_temp6); // console.log(\"msg\",msg)\n // debugger\n\n\n document.getElementById(\"mapModule\").contentWindow.getData(JSON.stringify(_msg6));\n } else if (topic.indexOf(\"stream1\") != -1) {\n console.log(\"[MQTT-TEST] \\u4ECE\\u4E3B\\u9898 \\\"\".concat(topic, \"\\\" \\u6536\\u5230\\u7684\\u5185\\u5BB9: \").concat(message.toString()), new Date(), new Date().getMilliseconds());\n } else if (topic.indexOf(\"stream2\") != -1) {\n console.log(\"[MQTT-TEST] \\u4ECE\\u4E3B\\u9898 \\\"\".concat(topic, \"\\\" \\u6536\\u5230\\u7684\\u5185\\u5BB9: \").concat(message.toString()), new Date(), new Date().getMilliseconds());\n } else if (topic.indexOf(\"stream3\") != -1) {\n console.log(\"[MQTT-TEST] \\u4ECE\\u4E3B\\u9898 \\\"\".concat(topic, \"\\\" \\u6536\\u5230\\u7684\\u5185\\u5BB9: \").concat(message.toString()), new Date(), new Date().getMilliseconds());\n } else if (topic.indexOf(\"stream4\") != -1) {\n console.log(\"[MQTT-TEST] \\u4ECE\\u4E3B\\u9898 \\\"\".concat(topic, \"\\\" \\u6536\\u5230\\u7684\\u5185\\u5BB9: \").concat(message.toString()), new Date(), new Date().getMilliseconds());\n } else if (topic.indexOf(\"stream5\") != -1) {\n console.log(\"[MQTT-TEST] \\u4ECE\\u4E3B\\u9898 \\\"\".concat(topic, \"\\\" \\u6536\\u5230\\u7684\\u5185\\u5BB9: \").concat(message.toString()), new Date(), new Date().getMilliseconds());\n }\n });\n }\n },\n handleSearch: function 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: function handleRow(val) {\n this.modelOthers = true;\n this.$refs.htModels.finbBox(val);\n },\n // 天气\n handleWather: function handleWather() {\n var _this2 = this;\n\n axios({\n url: 'https://restapi.amap.com/v3/weather/weatherInfo?key=bc2b906032fdd8a63cbd0790d656b1d7&city=620100',\n methods: ''\n }).then(function (res) {\n _this2.weatherItem = res.data.lives[0];\n console.log(_this2.weatherItem, 'asdsads');\n });\n },\n Onweather: function Onweather(name) {// 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: function hideBox() {\n this.$refs.htModels.handleFirstBox();\n }\n },\n components: {\n editModal: editModal,\n analysisConfiguration: analysisConfiguration,\n dataBoard: dataBoard\n }\n};",{"version":3,"sources":["index.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuLA,OAAA,IAAA,MAAA,MAAA,C,CAAA;;AACA,OAAA,SAAA,MAAA,mCAAA;AACA,OAAA,qBAAA,MAAA,uCAAA;AACA,OAAA,SAAA,MAAA,2BAAA;AACA,OAAA,KAAA,MAAA,OAAA;AACA,eAAA;AACA,EAAA,IADA,kBACA;AACA,WAAA;AACA,MAAA,UAAA,EAAA,KADA;AACA;AACA,MAAA,WAAA,EAAA,IAFA;AAEA;AACA,MAAA,WAAA,EAAA,IAHA;AAIA,MAAA,WAAA,EAAA,KAJA;AAKA,MAAA,aAAA,EAAA,EALA;AAMA,MAAA,SAAA,EAAA,IANA;AAMA;AACA,MAAA,UAAA,EAAA,KAPA;AAOA;AACA,MAAA,QAAA,EAAA,EARA;AASA,MAAA,iBAAA,EAAA,KATA;AAUA,MAAA,aAAA,EAAA,KAVA;AAWA,MAAA,WAAA,EAAA,KAXA;AAYA,MAAA,KAAA,EAAA,KAZA;AAaA,MAAA,IAAA,EAAA;AACA,QAAA,IAAA,EAAA,EADA;AAEA,QAAA,MAAA,EAAA,EAFA;AAGA,QAAA,KAAA,EAAA,EAHA;AAIA,QAAA,KAAA,EAAA,EAJA;AAKA,QAAA,QAAA,EAAA,KALA;AAMA,QAAA,IAAA,EAAA,EANA;AAOA,QAAA,QAAA,EAAA,QAPA;AAQA,QAAA,IAAA,EAAA;AARA,OAbA;AAuBA,MAAA,iBAAA,EAAA;AACA,QAAA,IAAA,EAAA,EADA;AAEA,QAAA,MAAA,EAAA,EAFA;AAGA,QAAA,KAAA,EAAA,EAHA;AAIA,QAAA,KAAA,EAAA,EAJA;AAKA,QAAA,QAAA,EAAA,KALA;AAMA,QAAA,IAAA,EAAA,EANA;AAOA,QAAA,QAAA,EAAA,QAPA;AAQA,QAAA,IAAA,EAAA;AARA,OAvBA;AAiCA,MAAA,SAAA,EAAA;AACA,QAAA,IAAA,EAAA,EADA;AAEA,QAAA,SAAA,EAAA,OAFA;AAGA,QAAA,SAAA,EAAA,QAHA;AAIA,QAAA,GAAA,EAAA,EAJA;AAKA,QAAA,IAAA,EAAA,EALA;AAMA,QAAA,IAAA,EAAA,EANA;AAOA,QAAA,IAAA,EAAA;AAPA,OAjCA;AA0CA,MAAA,SAAA,EAAA;AACA,QAAA,IAAA,EAAA;AADA,OA1CA;AA6CA;AACA,MAAA,OAAA,EAAA,EA9CA;AA+CA;AACA,MAAA,GAAA,EAAA,CAhDA;AAiDA,MAAA,MAAA,EAAA,EAjDA;AAkDA,MAAA,OAAA,EAAA,EAlDA;AAmDA,MAAA,OAAA,EAAA,EAnDA;AAoDA,MAAA,OAAA,EAAA,EApDA;AAqDA,MAAA,OAAA,EAAA,EArDA;AAsDA,MAAA,OAAA,EAAA,EAtDA;AAuDA,MAAA,MAAA,EAAA,EAvDA;AAwDA,MAAA,IAAA,EAAA,CACA;AACA,QAAA,KAAA,EAAA,MADA;AAEA,QAAA,GAAA,EAAA;AAFA,OADA,EAKA;AACA,QAAA,KAAA,EAAA,MADA;AAEA,QAAA,GAAA,EAAA;AAFA,OALA,EASA;AACA,QAAA,KAAA,EAAA,MADA;AAEA,QAAA,GAAA,EAAA;AAFA,OATA,EAaA;AACA,QAAA,KAAA,EAAA,MADA;AAEA,QAAA,GAAA,EAAA;AAFA,OAbA,CAxDA;AA0EA,MAAA,UAAA,EAAA,CACA;AACA,QAAA,KAAA,EAAA,EADA;AAEA,QAAA,IAAA,EAAA,SAFA;AAGA;AACA,QAAA,KAAA,EAAA;AAJA,OADA,EAOA;AACA,QAAA,KAAA,EAAA,EADA;AAEA,QAAA,IAAA,EAAA,MAFA;AAGA;AACA,QAAA,KAAA,EAAA;AAJA,OAPA,CA1EA;AAwFA,MAAA,WAAA,EAAA,EAxFA;AAyFA,MAAA,SAAA,EAAA,EAzFA;AA0FA,MAAA,SAAA,EAAA,EA1FA;AA2FA,MAAA,SAAA,EAAA,EA3FA;AA4FA,MAAA,OAAA,EAAA,CA5FA;AA6FA,MAAA,QAAA,EAAA,CA7FA;AA8FA,MAAA,QAAA,EAAA,CA9FA;AA+FA,MAAA,OAAA,EAAA,EA/FA;AAgGA,MAAA,SAAA,EAAA,EAhGA;AAiGA;AACA,MAAA,SAAA,EAAA,EAlGA;AAmGA,MAAA,UAAA,EAAA,EAnGA;AAoGA,MAAA,gBAAA,EAAA,EApGA;AAqGA,MAAA,OAAA,EAAA,EArGA;AAsGA,MAAA,WAAA,EAAA,EAtGA;AAuGA,MAAA,YAAA,EAAA,IAvGA;AAwGA,MAAA,OAAA,EAAA,EAxGA;AAwGA;AACA,MAAA,OAAA,EAAA,EAzGA;AA0GA,MAAA,cAAA,EAAA,EA1GA;AA0GA;AACA,MAAA,cAAA,EAAA,EA3GA;AA4GA,MAAA,aAAA,EAAA,EA5GA;AA4GA;AACA,MAAA,aAAA,EAAA,EA7GA;AA8GA,MAAA,SAAA,EAAA,EA9GA;AA8GA;AACA,MAAA,SAAA,EAAA,EA/GA;AAgHA,MAAA,kBAAA,EAAA,EAhHA;AAgHA;AACA,MAAA,kBAAA,EAAA,EAjHA;AAkHA,MAAA,YAAA,EAAA,EAlHA;AAkHA;AACA,MAAA,YAAA,EAAA;AAnHA,KAAA;AAqHA,GAvHA;AAwHA,EAAA,OAxHA,qBAwHA,CAEA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAxIA;AAyIA,EAAA,OAzIA,qBAyIA;AACA,SAAA,QAAA;AAEA,GA5IA;AA6IA,EAAA,OAAA,EAAA;AACA;AACA,IAAA,QAFA,sBAEA,CACA;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,KAtDA;AAuDA,IAAA,QAvDA,sBAuDA,CAAA,CAvDA;AAwDA;AACA,IAAA,WAzDA,uBAyDA,IAzDA,EAyDA;AACA,WAAA,YAAA,GAAA,IAAA;AACA,KA3DA;AA6DA;AACA,IAAA,aA9DA,yBA8DA,GA9DA,EA8DA,KA9DA,EA8DA,MA9DA,EA8DA;AAAA;;AAEA,UAAA,QAAA,GAAA,aAAA,MAAA,CAAA,IAAA,IAAA,GAAA,OAAA,EAAA,CAAA,CAFA,CAEA;AACA;;AACA,UAAA,IAAA,GAAA,0BAAA;AAEA,UAAA,OAAA,GAAA;AACA;AACA;AACA;AACA;AACA;AACA,QAAA,SAAA,EAAA,EANA;AAMA;AACA,QAAA,QAAA,EAAA,OAPA;AAOA;AACA,QAAA,QAAA,EAAA,QARA;AAQA;AACA,QAAA,QAAA,EAAA,QATA;AASA;AACA,QAAA,UAAA,EAAA,MAVA;AAWA,QAAA,eAAA,EAAA,CAXA;AAYA,QAAA,KAAA,EAAA,IAZA;AAYA;AACA,QAAA,eAAA,EAAA,IAbA;AAaA;AACA,QAAA,cAAA,EAAA,KAAA,IAdA;AAcA;AACA,QAAA,IAAA,EAAA;AACA;AACA,UAAA,KAAA,EAAA,MAFA;AAEA;AACA,UAAA,OAAA,EAAA,0BAHA;AAGA;AACA,UAAA,GAAA,EAAA,CAJA;AAIA;AACA,UAAA,MAAA,EAAA,KALA,CAKA;;AALA;AAfA,OAAA;;AAuBA,UAAA,KAAA,UAAA,IAAA,SAAA,EAAA;AACA,aAAA,UAAA,GAAA,IAAA,CAAA,OAAA,CAAA,IAAA,EAAA,OAAA,CAAA,CADA,CACA;AACA;AACA;AACA;AACA;;AACA,aAAA,UAAA,CAAA,EAAA,CAAA,OAAA,EAAA,UAAA,GAAA,EAAA;AACA,UAAA,OAAA,CAAA,GAAA,CAAA,mBAAA,EAAA,GAAA;;AACA,UAAA,KAAA,CAAA,UAAA,CAAA,GAAA;AACA,SAHA,EANA,CAUA;;AACA,aAAA,UAAA,CAAA,EAAA,CAAA,WAAA,EAAA,UAAA,SAAA,EAAA,CACA;AACA,SAFA,EAXA,CAcA;;AACA,aAAA,UAAA,CAAA,EAAA,CAAA,SAAA,EAAA,UAAA,OAAA,EAAA;AACA;AACA;AACA,UAAA,KAAA,CAAA,UAAA,CAAA,SAAA,CAAA,MAAA,EAAA;AAAA,YAAA,GAAA,EAAA;AAAA,WAAA;;AACA,UAAA,KAAA,CAAA,UAAA,CAAA,SAAA,CAAA,MAAA,EAAA;AAAA,YAAA,GAAA,EAAA;AAAA,WAAA;;AACA,UAAA,KAAA,CAAA,UAAA,CAAA,SAAA,CAAA,MAAA,EAAA;AAAA,YAAA,GAAA,EAAA;AAAA,WAAA;;AACA,UAAA,KAAA,CAAA,UAAA,CAAA,SAAA,CAAA,MAAA,EAAA;AAAA,YAAA,GAAA,EAAA;AAAA,WAAA;;AACA,UAAA,KAAA,CAAA,UAAA,CAAA,SAAA,CAAA,MAAA,EAAA;AAAA,YAAA,GAAA,EAAA;AAAA,WAAA;;AACA,UAAA,KAAA,CAAA,UAAA,CAAA,SAAA,CAAA,MAAA,EAAA;AAAA,YAAA,GAAA,EAAA;AAAA,WAAA;;AACA,UAAA,KAAA,CAAA,UAAA,CAAA,SAAA,CAAA,SAAA,EAAA;AAAA,YAAA,GAAA,EAAA;AAAA,WAAA;;AACA,UAAA,KAAA,CAAA,UAAA,CAAA,SAAA,CAAA,SAAA,EAAA;AAAA,YAAA,GAAA,EAAA;AAAA,WAAA;;AACA,UAAA,KAAA,CAAA,UAAA,CAAA,SAAA,CAAA,SAAA,EAAA;AAAA,YAAA,GAAA,EAAA;AAAA,WAAA;;AACA,UAAA,KAAA,CAAA,UAAA,CAAA,SAAA,CAAA,SAAA,EAAA;AAAA,YAAA,GAAA,EAAA;AAAA,WAAA;;AACA,UAAA,KAAA,CAAA,UAAA,CAAA,SAAA,CAAA,SAAA,EAAA;AAAA,YAAA,GAAA,EAAA;AAAA,WAAA;;AACA,UAAA,KAAA,CAAA,UAAA,CAAA,SAAA,CAAA,SAAA,EAAA;AAAA,YAAA,GAAA,EAAA;AAAA,WAAA;AAEA,SAhBA,EAfA,CAgCA;;AACA,aAAA,UAAA,CAAA,EAAA,CAAA,SAAA,EAAA,UAAA,KAAA,EAAA,OAAA,EAAA,MAAA,EAAA;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,cAAA,KAAA,CAAA,OAAA,CAAA,MAAA,KAAA,CAAA,CAAA,EAAA;AACA,gBAAA;AACA,kBAAA,WAAA,GAAA,IAAA,WAAA,EAAA;AACA,kBAAA,KAAA,GAAA,IAAA,UAAA,CAAA,OAAA,CAAA;AACA,kBAAA,IAAA,GAAA,WAAA,CAAA,MAAA,CAAA,KAAA,CAAA,CAHA,CAGA;;AACA,kBAAA,GAAA,GAAA,IAAA,CAAA,KAAA,CAAA,IAAA,CAAA,CAJA,CAIA;AACA;AACA;;AACA,cAAA,OAAA,CAAA,GAAA,CAAA,MAAA,EAAA,QAAA,CAAA,cAAA,CAAA,WAAA,CAAA;AACA,cAAA,QAAA,CAAA,cAAA,CAAA,WAAA,EAAA,aAAA,CAAA,cAAA,CAAA,IAAA,CAAA,SAAA,CAAA,GAAA,CAAA;AACA,cAAA,KAAA,CAAA,MAAA,GAAA,2BAAA,GAAA,CAAA,GAAA,CATA,CAUA;AAEA,aAZA,CAYA,gBAAA;AACA,kBAAA,SAAA,GAAA,aAAA;AACA,kBAAA,IAAA,GAAA,IAAA,IAAA,CAAA,CAAA,OAAA,CAAA,EAAA;AAAA,gBAAA,IAAA,EAAA;AAAA,eAAA,CAAA;;AACA,kBAAA,SAAA,GAAA,CAAA,MAAA,CAAA,GAAA,IAAA,MAAA,CAAA,SAAA,EAAA,eAAA,CAAA,IAAA,CAAA,CAHA,CAIA;;AACA;AACA,WAnBA,MAmBA,IAAA,KAAA,CAAA,OAAA,CAAA,MAAA,KAAA,CAAA,CAAA,EAAA;AACA,gBAAA;AACA,kBAAA,YAAA,GAAA,IAAA,WAAA,EAAA;;AACA,kBAAA,MAAA,GAAA,IAAA,UAAA,CAAA,OAAA,CAAA;;AACA,kBAAA,KAAA,GAAA,YAAA,CAAA,MAAA,CAAA,MAAA,CAAA,CAHA,CAGA;;;AACA,kBAAA,IAAA,GAAA,IAAA,CAAA,KAAA,CAAA,KAAA,CAAA,CAJA,CAIA;AACA;;;AACA,cAAA,KAAA,CAAA,OAAA,GAAA,2BAAA,IAAA,CAAA,GAAA;AACA,cAAA,OAAA,CAAA,GAAA,CAAA,UAAA,EAAA,QAAA;AACA,aARA,CAQA,iBAAA;AACA,kBAAA,UAAA,GAAA,aAAA;;AACA,kBAAA,KAAA,GAAA,IAAA,IAAA,CAAA,CAAA,OAAA,CAAA,EAAA;AAAA,gBAAA,IAAA,EAAA;AAAA,eAAA,CAAA;;AACA,kBAAA,UAAA,GAAA,CAAA,MAAA,CAAA,GAAA,IAAA,MAAA,CAAA,SAAA,EAAA,eAAA,CAAA,KAAA,CAAA;;AACA,cAAA,OAAA,CAAA,GAAA,CAAA,UAAA,EAAA,UAAA;AACA;AACA,WAfA,MAeA,IAAA,KAAA,CAAA,OAAA,CAAA,MAAA,KAAA,CAAA,CAAA,EAAA;AACA,gBAAA;AACA,kBAAA,aAAA,GAAA,IAAA,WAAA,EAAA;;AACA,kBAAA,OAAA,GAAA,IAAA,UAAA,CAAA,OAAA,CAAA;;AACA,kBAAA,MAAA,GAAA,aAAA,CAAA,MAAA,CAAA,OAAA,CAAA,CAHA,CAGA;;;AACA,kBAAA,KAAA,GAAA,IAAA,CAAA,KAAA,CAAA,MAAA,CAAA,CAJA,CAIA;;;AACA,cAAA,OAAA,CAAA,GAAA,CAAA,KAAA,EAAA,KAAA,EALA,CAKA;;AACA,cAAA,KAAA,CAAA,OAAA,GAAA,2BAAA,KAAA,CAAA,GAAA;AACA,cAAA,OAAA,CAAA,GAAA,CAAA,UAAA,EAAA,QAAA;AACA,aARA,CAQA,iBAAA;AACA,kBAAA,WAAA,GAAA,aAAA;;AACA,kBAAA,MAAA,GAAA,IAAA,IAAA,CAAA,CAAA,OAAA,CAAA,EAAA;AAAA,gBAAA,IAAA,EAAA;AAAA,eAAA,CAAA;;AACA,kBAAA,UAAA,GAAA,CAAA,MAAA,CAAA,GAAA,IAAA,MAAA,CAAA,SAAA,EAAA,eAAA,CAAA,MAAA,CAAA;;AACA,cAAA,OAAA,CAAA,GAAA,CAAA,UAAA,EAAA,UAAA;AACA;AACA,WAfA,MAeA,IAAA,KAAA,CAAA,OAAA,CAAA,MAAA,KAAA,CAAA,CAAA,EAAA;AACA,gBAAA;AACA,kBAAA,aAAA,GAAA,IAAA,WAAA,EAAA;;AACA,kBAAA,OAAA,GAAA,IAAA,UAAA,CAAA,OAAA,CAAA;;AACA,kBAAA,MAAA,GAAA,aAAA,CAAA,MAAA,CAAA,OAAA,CAAA,CAHA,CAGA;;;AACA,kBAAA,KAAA,GAAA,IAAA,CAAA,KAAA,CAAA,MAAA,CAAA,CAJA,CAIA;;;AACA,cAAA,OAAA,CAAA,GAAA,CAAA,KAAA,EAAA,KAAA,EALA,CAKA;;AACA,cAAA,KAAA,CAAA,OAAA,GAAA,2BAAA,KAAA,CAAA,GAAA;AACA,cAAA,OAAA,CAAA,GAAA,CAAA,UAAA,EAAA,QAAA;AACA,aARA,CAQA,iBAAA;AACA,kBAAA,WAAA,GAAA,aAAA;;AACA,kBAAA,MAAA,GAAA,IAAA,IAAA,CAAA,CAAA,OAAA,CAAA,EAAA;AAAA,gBAAA,IAAA,EAAA;AAAA,eAAA,CAAA;;AACA,kBAAA,UAAA,GAAA,CAAA,MAAA,CAAA,GAAA,IAAA,MAAA,CAAA,SAAA,EAAA,eAAA,CAAA,MAAA,CAAA;;AACA,cAAA,OAAA,CAAA,GAAA,CAAA,UAAA,EAAA,UAAA;AACA;AACA,WAfA,MAeA,IAAA,KAAA,CAAA,OAAA,CAAA,MAAA,KAAA,CAAA,CAAA,EAAA;AACA,gBAAA;AACA,kBAAA,aAAA,GAAA,IAAA,WAAA,EAAA;;AACA,kBAAA,OAAA,GAAA,IAAA,UAAA,CAAA,OAAA,CAAA;;AACA,kBAAA,MAAA,GAAA,aAAA,CAAA,MAAA,CAAA,OAAA,CAAA,CAHA,CAGA;;;AACA,kBAAA,KAAA,GAAA,IAAA,CAAA,KAAA,CAAA,MAAA,CAAA,CAJA,CAIA;;;AACA,cAAA,OAAA,CAAA,GAAA,CAAA,KAAA,EAAA,KAAA,EALA,CAKA;;AACA,cAAA,KAAA,CAAA,OAAA,GAAA,2BAAA,KAAA,CAAA,GAAA;AACA,cAAA,OAAA,CAAA,GAAA,CAAA,UAAA,EAAA,QAAA;AACA,aARA,CAQA,iBAAA;AACA,kBAAA,WAAA,GAAA,aAAA;;AACA,kBAAA,MAAA,GAAA,IAAA,IAAA,CAAA,CAAA,OAAA,CAAA,EAAA;AAAA,gBAAA,IAAA,EAAA;AAAA,eAAA,CAAA;;AACA,kBAAA,UAAA,GAAA,CAAA,MAAA,CAAA,GAAA,IAAA,MAAA,CAAA,SAAA,EAAA,eAAA,CAAA,MAAA,CAAA;;AACA,cAAA,OAAA,CAAA,GAAA,CAAA,UAAA,EAAA,UAAA;AACA;AACA,WAfA,MAeA,IAAA,KAAA,CAAA,OAAA,CAAA,MAAA,KAAA,CAAA,CAAA,EAAA;AACA,gBAAA;AACA,kBAAA,aAAA,GAAA,IAAA,WAAA,EAAA;;AACA,kBAAA,OAAA,GAAA,IAAA,UAAA,CAAA,OAAA,CAAA;;AACA,kBAAA,MAAA,GAAA,aAAA,CAAA,MAAA,CAAA,OAAA,CAAA,CAHA,CAGA;;;AACA,kBAAA,KAAA,GAAA,IAAA,CAAA,KAAA,CAAA,MAAA,CAAA,CAJA,CAIA;;;AACA,cAAA,OAAA,CAAA,GAAA,CAAA,KAAA,EAAA,KAAA,EALA,CAKA;;AACA,cAAA,KAAA,CAAA,OAAA,GAAA,2BAAA,KAAA,CAAA,GAAA;AACA,cAAA,OAAA,CAAA,GAAA,CAAA,UAAA,EAAA,QAAA;AACA,aARA,CAQA,iBAAA;AACA,kBAAA,WAAA,GAAA,aAAA;;AACA,kBAAA,MAAA,GAAA,IAAA,IAAA,CAAA,CAAA,OAAA,CAAA,EAAA;AAAA,gBAAA,IAAA,EAAA;AAAA,eAAA,CAAA;;AACA,kBAAA,UAAA,GAAA,CAAA,MAAA,CAAA,GAAA,IAAA,MAAA,CAAA,SAAA,EAAA,eAAA,CAAA,MAAA,CAAA;;AACA,cAAA,OAAA,CAAA,GAAA,CAAA,UAAA,EAAA,UAAA;AACA;AACA,WAfA,MAeA,IAAA,KAAA,CAAA,OAAA,CAAA,SAAA,KAAA,CAAA,CAAA,EAAA;AACA;AACA;AACA;AACA;AACA;AACA,gBAAA,aAAA,GAAA,IAAA,WAAA,EAAA;;AACA,gBAAA,OAAA,GAAA,IAAA,UAAA,CAAA,OAAA,CAAA;;AACA,gBAAA,MAAA,GAAA,aAAA,CAAA,MAAA,CAAA,OAAA,CAAA,CARA,CAQA;;;AACA,gBAAA,KAAA,GAAA,IAAA,CAAA,KAAA,CAAA,MAAA,CAAA,CATA,CAUA;AACA;;;AAEA,YAAA,QAAA,CAAA,cAAA,CAAA,WAAA,EAAA,aAAA,CAAA,OAAA,CAAA,IAAA,CAAA,SAAA,CAAA,KAAA,CAAA;AACA,WAdA,MAcA,IAAA,KAAA,CAAA,OAAA,CAAA,SAAA,KAAA,CAAA,CAAA,EAAA;AACA,YAAA,OAAA,CAAA,GAAA,4CACA,KADA,gDACA,OAAA,CAAA,QAAA,EADA,GAEA,IAAA,IAAA,EAFA,EAGA,IAAA,IAAA,GAAA,eAAA,EAHA;AAKA,WANA,MAMA,IAAA,KAAA,CAAA,OAAA,CAAA,SAAA,KAAA,CAAA,CAAA,EAAA;AACA,YAAA,OAAA,CAAA,GAAA,4CACA,KADA,gDACA,OAAA,CAAA,QAAA,EADA,GAEA,IAAA,IAAA,EAFA,EAGA,IAAA,IAAA,GAAA,eAAA,EAHA;AAKA,WANA,MAMA,IAAA,KAAA,CAAA,OAAA,CAAA,SAAA,KAAA,CAAA,CAAA,EAAA;AACA,YAAA,OAAA,CAAA,GAAA,4CACA,KADA,gDACA,OAAA,CAAA,QAAA,EADA,GAEA,IAAA,IAAA,EAFA,EAGA,IAAA,IAAA,GAAA,eAAA,EAHA;AAKA,WANA,MAMA,IAAA,KAAA,CAAA,OAAA,CAAA,SAAA,KAAA,CAAA,CAAA,EAAA;AACA,YAAA,OAAA,CAAA,GAAA,4CACA,KADA,gDACA,OAAA,CAAA,QAAA,EADA,GAEA,IAAA,IAAA,EAFA,EAGA,IAAA,IAAA,GAAA,eAAA,EAHA;AAKA,WANA,MAMA,IAAA,KAAA,CAAA,OAAA,CAAA,SAAA,KAAA,CAAA,CAAA,EAAA;AACA,YAAA,OAAA,CAAA,GAAA,4CACA,KADA,gDACA,OAAA,CAAA,QAAA,EADA,GAEA,IAAA,IAAA,EAFA,EAGA,IAAA,IAAA,GAAA,eAAA,EAHA;AAKA;AAEA,SAvKA;AAwKA;AAGA,KAvSA;AAySA,IAAA,YAzSA,0BAySA;AACA,WAAA,WAAA,GAAA,IAAA;AACA,WAAA,KAAA,CAAA,QAAA,CAAA,OAAA,CAAA,KAAA,QAAA;AACA,MAAA,OAAA,CAAA,GAAA,CAAA,KAAA,KAAA,CAAA,QAAA,EAAA,WAAA;AACA,WAAA,QAAA,GAAA,EAAA;AACA,KA9SA;AA+SA,IAAA,SA/SA,qBA+SA,GA/SA,EA+SA;AACA,WAAA,WAAA,GAAA,IAAA;AACA,WAAA,KAAA,CAAA,QAAA,CAAA,OAAA,CAAA,GAAA;AACA,KAlTA;AAmTA;AACA,IAAA,YApTA,0BAoTA;AAAA;;AACA,MAAA,KAAA,CAAA;AAAA,QAAA,GAAA,EAAA,kGAAA;AAAA,QAAA,OAAA,EAAA;AAAA,OAAA,CAAA,CAAA,IAAA,CAAA,UAAA,GAAA,EAAA;AACA,QAAA,MAAA,CAAA,WAAA,GAAA,GAAA,CAAA,IAAA,CAAA,KAAA,CAAA,CAAA,CAAA;AACA,QAAA,OAAA,CAAA,GAAA,CAAA,MAAA,CAAA,WAAA,EAAA,SAAA;AACA,OAHA;AAIA,KAzTA;AA0TA,IAAA,SA1TA,qBA0TA,IA1TA,EA0TA,CACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KArWA;AAsWA;AACA,IAAA,OAvWA,qBAuWA;AACA,WAAA,KAAA,CAAA,QAAA,CAAA,cAAA;AACA;AAzWA,GA7IA;AAwfA,EAAA,UAAA,EAAA;AACA,IAAA,SAAA,EAAA,SADA;AAEA,IAAA,qBAAA,EAAA,qBAFA;AAGA,IAAA,SAAA,EAAA;AAHA;AAxfA,CAAA","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.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 // debugger\n // return\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 // 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 // console.log(\n // `[MQTT-TEST] 从主题 \"${topic}\" 收到的内容: ${message.toString()}`,\n // new Date(),\n // new Date().getMilliseconds()\n // );\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 // console.log(\"msg\",msg)\n // debugger\n \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"],"sourceRoot":"src/views"}]} \ No newline at end of file +{"remainingRequest":"D:\\视频边缘1215\\TransFlow\\node_modules\\babel-loader\\lib\\index.js!D:\\视频边缘1215\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js??ref--0-0!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":1672799272806},{"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":["import \"core-js/modules/es6.regexp.to-string\";\nimport \"core-js/modules/es6.typed.uint8-array\";\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\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协议\n\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: function data() {\n return {\n trajectory: false,\n //轨迹\n hideBoxShow: true,\n //隐藏箱子按钮显示隐藏\n closeStatus: null,\n modelOthers: false,\n componentShow: \"\",\n isShowBtn: true,\n //菜单按钮隐藏\n isShowBtn1: false,\n //菜单按钮显示\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 title: 'xx路口',\n url: ''\n }, {\n title: '数据看板',\n url: ''\n }, {\n title: '分析配置',\n url: ''\n }, {\n title: '分析配置',\n url: ''\n }],\n statusInfo: [{\n count: 15,\n name: \"穿梭车在线数量\",\n // icon: require(\"../assets/images/运行设备图标.png\"),\n color: \"#01A8FC\"\n }, {\n count: 26,\n name: \"任务数量\",\n // icon: require(\"../assets/images/故障设备图标.png\"),\n color: \"#FDA401\"\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 //小车信息\n carName: '',\n palletizerInfo: [],\n //码垛机信息\n palletizerName: '',\n destackerInfo: [],\n //拆垛机信息\n destackerName: '',\n hoistInfo: [],\n //提升机信息’\n hoistName: '',\n battaryStationInfo: [],\n //快换电池装置\n battaryStationName: \"\",\n conveyorInfo: [],\n //输送机信息\n conveyorName: \"\"\n };\n },\n mounted: function mounted() {// this.getMessage();\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: function created() {\n this.testMqtt();\n },\n methods: {\n // 测试:mqtt测试\n testMqtt: function testMqtt() {\n this.getDataByMqtt(); // 小车订阅\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 // 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 // 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: function onSubmit() {},\n //模型加载等待\n loadingShow: function loadingShow(data) {\n this.loadingShow1 = data;\n },\n // mqtt订阅(独立)\n getDataByMqtt: function getDataByMqtt(url, topic, cIdNum) {\n var _this = this;\n\n var clientId = \"test_id_\" + String(new Date().getTime()); // 用户名\n // const host = 'ws://49.234.27.18:10087/'; // 一个测试用url,改成给的,ws://broker.emqx.io:8083/mqtt\n\n var host = 'ws://172.16.1.168:10087/';\n var options = {\n // 配置\n // 测试:订阅本机IP\n // host: host,\n // port: port,\n // host:\"172.16.1.168:10086\",\n keepalive: 60,\n // 心跳时间,默认60s,设置为0禁用\n username: 'admin',\n // 用户名(可选)\n password: '123456',\n // 密码(可选)\n clientId: clientId,\n // 客户端ID,默认随机生成\n protocolId: \"MQTT\",\n protocolVersion: 4,\n clean: true,\n // false在离线时接收QoS1和2的消息\n reconnectPeriod: 2000,\n // 重连间隔,默认1000毫秒\n connectTimeout: 30 * 1000,\n // 收到CONNACK之前的等待时间\n will: {\n // 遗嘱消息(客户端严重断开连接时Broker将自动发送的消息)\n topic: \"img1\",\n // 要发布的主题\n payload: \"[MQTT-TEST] 遗嘱消息:连接异常断开!\",\n // 要发布的消息\n qos: 0,\n // QoS(Quality of Service),QoS0:只负责发,QoS1:保证消息至少送达1次,QoS2:保证消息到且仅到1次\n retain: false // 保留标志\n\n }\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\n this.mqttClient.on(\"error\", function (err) {\n console.log(\"[MQTT-TEST] 连接错误:\", err);\n\n _this.mqttClient.end();\n }); // 重连回调\n\n this.mqttClient.on(\"reconnect\", function (reconnect) {// console.log(\"[MQTT-TEST] 重连中……\", reconnect);\n }); // 连接回调\n\n this.mqttClient.on(\"connect\", function (connect) {\n // console.log(\"[MQTT-TEST] 已连接的客户端ID: \", connect);\n // 订阅\n _this.mqttClient.subscribe('img0', {\n qos: 0\n }); // this.client.connect('aaa', '111')\n\n\n _this.mqttClient.publish('aaa', '111'); // this.mqttClient.subscribe('msg_stream', { msg_flag: 0 });\n\n\n _this.mqttClient.subscribe('img1', {\n qos: 0\n });\n\n _this.mqttClient.subscribe('img2', {\n qos: 0\n });\n\n _this.mqttClient.subscribe('img3', {\n qos: 0\n });\n\n _this.mqttClient.subscribe('img4', {\n qos: 0\n });\n\n _this.mqttClient.subscribe('img5', {\n qos: 0\n });\n\n _this.mqttClient.subscribe('stream0', {\n qos: 0\n });\n\n _this.mqttClient.subscribe('stream1', {\n qos: 0\n });\n\n _this.mqttClient.subscribe('stream2', {\n qos: 0\n });\n\n _this.mqttClient.subscribe('stream3', {\n qos: 0\n });\n\n _this.mqttClient.subscribe('stream4', {\n qos: 0\n });\n\n _this.mqttClient.subscribe('stream5', {\n qos: 0\n });\n }); // 接收回调\n\n this.mqttClient.on(\"message\", function (topic, message, packet) {\n if (topic.indexOf(\"img0\") != -1) {\n try {\n var utf8decoder = new TextDecoder();\n var u8arr = new Uint8Array(message);\n var temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串\n\n var msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片,不报错则返回的是JSON的错误提示数据\n // debugger\n // console.log(\"msg\", msg) //msg为转换后的JSON数据\n // console.log(\"1111\",document.getElementById(\"mapModule\"))\n\n document.getElementById(\"mapModule\").contentWindow.getDestination(JSON.stringify(msg)); // this.imgUrl = 'data:image/png;base64,' + msg.pic;\n // console.log(\"imageUrl\", imageUrl)\n } catch (_unused) {\n var imageType = 'arraybuffer';\n var blob = new Blob([message], {\n type: imageType\n });\n\n var _imageUrl = (window.URL || window.webkitURL).createObjectURL(blob); // console.log(\"imageUrl\", imageUrl)\n\n }\n } else if (topic.indexOf(\"img1\") != -1) {\n try {\n var _utf8decoder = new TextDecoder();\n\n var _u8arr = new Uint8Array(message);\n\n var _temp = _utf8decoder.decode(_u8arr); // 将二进制数据转为字符串\n\n\n var _msg = JSON.parse(_temp); //这一步报错则返回的是二进制流图片,不报错则返回的是JSON的错误提示数据\n // console.log(\"msg\", msg) //msg为转换后的JSON数据\n\n\n _this.imgUrl1 = 'data:image/png;base64,' + _msg.pic;\n console.log(\"imageUrl\", imageUrl);\n } catch (_unused2) {\n var _imageType = 'arraybuffer';\n\n var _blob = new Blob([message], {\n type: _imageType\n });\n\n var _imageUrl2 = (window.URL || window.webkitURL).createObjectURL(_blob);\n\n console.log(\"imageUrl\", _imageUrl2);\n }\n } else if (topic.indexOf(\"img2\") != -1) {\n try {\n var _utf8decoder2 = new TextDecoder();\n\n var _u8arr2 = new Uint8Array(message);\n\n var _temp2 = _utf8decoder2.decode(_u8arr2); // 将二进制数据转为字符串\n\n\n var _msg2 = JSON.parse(_temp2); //这一步报错则返回的是二进制流图片,不报错则返回的是JSON的错误提示数据\n\n\n console.log(\"msg\", _msg2); //msg为转换后的JSON数据\n\n _this.imgUrl2 = 'data:image/png;base64,' + _msg2.pic;\n console.log(\"imageUrl\", imageUrl);\n } catch (_unused3) {\n var _imageType2 = 'arraybuffer';\n\n var _blob2 = new Blob([message], {\n type: _imageType2\n });\n\n var _imageUrl3 = (window.URL || window.webkitURL).createObjectURL(_blob2);\n\n console.log(\"imageUrl\", _imageUrl3);\n }\n } else if (topic.indexOf(\"img3\") != -1) {\n try {\n var _utf8decoder3 = new TextDecoder();\n\n var _u8arr3 = new Uint8Array(message);\n\n var _temp3 = _utf8decoder3.decode(_u8arr3); // 将二进制数据转为字符串\n\n\n var _msg3 = JSON.parse(_temp3); //这一步报错则返回的是二进制流图片,不报错则返回的是JSON的错误提示数据\n\n\n console.log(\"msg\", _msg3); //msg为转换后的JSON数据\n\n _this.imgUrl3 = 'data:image/png;base64,' + _msg3.pic;\n console.log(\"imageUrl\", imageUrl);\n } catch (_unused4) {\n var _imageType3 = 'arraybuffer';\n\n var _blob3 = new Blob([message], {\n type: _imageType3\n });\n\n var _imageUrl4 = (window.URL || window.webkitURL).createObjectURL(_blob3);\n\n console.log(\"imageUrl\", _imageUrl4);\n }\n } else if (topic.indexOf(\"img4\") != -1) {\n try {\n var _utf8decoder4 = new TextDecoder();\n\n var _u8arr4 = new Uint8Array(message);\n\n var _temp4 = _utf8decoder4.decode(_u8arr4); // 将二进制数据转为字符串\n\n\n var _msg4 = JSON.parse(_temp4); //这一步报错则返回的是二进制流图片,不报错则返回的是JSON的错误提示数据\n\n\n console.log(\"msg\", _msg4); //msg为转换后的JSON数据\n\n _this.imgUrl4 = 'data:image/png;base64,' + _msg4.pic;\n console.log(\"imageUrl\", imageUrl);\n } catch (_unused5) {\n var _imageType4 = 'arraybuffer';\n\n var _blob4 = new Blob([message], {\n type: _imageType4\n });\n\n var _imageUrl5 = (window.URL || window.webkitURL).createObjectURL(_blob4);\n\n console.log(\"imageUrl\", _imageUrl5);\n }\n } else if (topic.indexOf(\"img5\") != -1) {\n try {\n var _utf8decoder5 = new TextDecoder();\n\n var _u8arr5 = new Uint8Array(message);\n\n var _temp5 = _utf8decoder5.decode(_u8arr5); // 将二进制数据转为字符串\n\n\n var _msg5 = JSON.parse(_temp5); //这一步报错则返回的是二进制流图片,不报错则返回的是JSON的错误提示数据\n\n\n console.log(\"msg\", _msg5); //msg为转换后的JSON数据\n\n _this.imgUrl5 = 'data:image/png;base64,' + _msg5.pic;\n console.log(\"imageUrl\", imageUrl);\n } catch (_unused6) {\n var _imageType5 = 'arraybuffer';\n\n var _blob5 = new Blob([message], {\n type: _imageType5\n });\n\n var _imageUrl6 = (window.URL || window.webkitURL).createObjectURL(_blob5);\n\n console.log(\"imageUrl\", _imageUrl6);\n }\n } else if (topic.indexOf(\"stream0\") != -1) {\n var _utf8decoder6 = new TextDecoder();\n\n var _u8arr6 = new Uint8Array(message);\n\n var _temp6 = _utf8decoder6.decode(_u8arr6); // 将二进制数据转为字符串\n\n\n var _msg6 = JSON.parse(_temp6);\n\n document.getElementById(\"mapModule\").contentWindow.getData(JSON.stringify(_msg6));\n } else if (topic.indexOf(\"stream1\") != -1) {\n console.log(\"[MQTT-TEST] \\u4ECE\\u4E3B\\u9898 \\\"\".concat(topic, \"\\\" \\u6536\\u5230\\u7684\\u5185\\u5BB9: \").concat(message.toString()), new Date(), new Date().getMilliseconds());\n } else if (topic.indexOf(\"stream2\") != -1) {\n console.log(\"[MQTT-TEST] \\u4ECE\\u4E3B\\u9898 \\\"\".concat(topic, \"\\\" \\u6536\\u5230\\u7684\\u5185\\u5BB9: \").concat(message.toString()), new Date(), new Date().getMilliseconds());\n } else if (topic.indexOf(\"stream3\") != -1) {\n console.log(\"[MQTT-TEST] \\u4ECE\\u4E3B\\u9898 \\\"\".concat(topic, \"\\\" \\u6536\\u5230\\u7684\\u5185\\u5BB9: \").concat(message.toString()), new Date(), new Date().getMilliseconds());\n } else if (topic.indexOf(\"stream4\") != -1) {\n console.log(\"[MQTT-TEST] \\u4ECE\\u4E3B\\u9898 \\\"\".concat(topic, \"\\\" \\u6536\\u5230\\u7684\\u5185\\u5BB9: \").concat(message.toString()), new Date(), new Date().getMilliseconds());\n } else if (topic.indexOf(\"stream5\") != -1) {\n console.log(\"[MQTT-TEST] \\u4ECE\\u4E3B\\u9898 \\\"\".concat(topic, \"\\\" \\u6536\\u5230\\u7684\\u5185\\u5BB9: \").concat(message.toString()), new Date(), new Date().getMilliseconds());\n }\n });\n }\n },\n handleSearch: function 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: function handleRow(val) {\n this.modelOthers = true;\n this.$refs.htModels.finbBox(val);\n },\n // 天气\n handleWather: function handleWather() {\n var _this2 = this;\n\n axios({\n url: 'https://restapi.amap.com/v3/weather/weatherInfo?key=bc2b906032fdd8a63cbd0790d656b1d7&city=620100',\n methods: ''\n }).then(function (res) {\n _this2.weatherItem = res.data.lives[0];\n console.log(_this2.weatherItem, 'asdsads');\n });\n },\n Onweather: function Onweather(name) {// 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: function hideBox() {\n this.$refs.htModels.handleFirstBox();\n }\n },\n components: {\n editModal: editModal,\n analysisConfiguration: analysisConfiguration,\n dataBoard: dataBoard\n }\n};",{"version":3,"sources":["index.vue"],"names":[],"mappings":"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","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"],"sourceRoot":"src/views"}]} \ No newline at end of file diff --git a/node_modules/.cache/vue-loader/03a1b3b90bbaf1b3ee12000de5b9982e.json b/node_modules/.cache/vue-loader/03a1b3b90bbaf1b3ee12000de5b9982e.json index e7f53382..c412269f 100644 --- a/node_modules/.cache/vue-loader/03a1b3b90bbaf1b3ee12000de5b9982e.json +++ b/node_modules/.cache/vue-loader/03a1b3b90bbaf1b3ee12000de5b9982e.json @@ -1 +1 @@ -{"remainingRequest":"D:\\视频边缘1215\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\视频边缘1215\\TransFlow\\src\\views\\index.vue?vue&type=template&id=a83bd3b0&scoped=true&","dependencies":[{"path":"D:\\视频边缘1215\\TransFlow\\src\\views\\index.vue","mtime":1672741609576},{"path":"D:\\视频边缘1215\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1671074740928},{"path":"D:\\视频边缘1215\\TransFlow\\node_modules\\vue-loader\\lib\\loaders\\templateLoader.js","mtime":1671074747916},{"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<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",null]} \ No newline at end of file +{"remainingRequest":"D:\\视频边缘1215\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\视频边缘1215\\TransFlow\\src\\views\\index.vue?vue&type=template&id=a83bd3b0&scoped=true&","dependencies":[{"path":"D:\\视频边缘1215\\TransFlow\\src\\views\\index.vue","mtime":1672799272806},{"path":"D:\\视频边缘1215\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1671074740928},{"path":"D:\\视频边缘1215\\TransFlow\\node_modules\\vue-loader\\lib\\loaders\\templateLoader.js","mtime":1671074747916},{"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<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",null]} \ No newline at end of file diff --git a/node_modules/.cache/vue-loader/1db22d1108c073eef47225b9519f65a3.json b/node_modules/.cache/vue-loader/1db22d1108c073eef47225b9519f65a3.json index da5bb0ca..ed52f3a2 100644 --- a/node_modules/.cache/vue-loader/1db22d1108c073eef47225b9519f65a3.json +++ b/node_modules/.cache/vue-loader/1db22d1108c073eef47225b9519f65a3.json @@ -1 +1 @@ -{"remainingRequest":"D:\\视频边缘1215\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\视频边缘1215\\TransFlow\\src\\views\\bounced\\analysisConfiguration.vue?vue&type=style&index=0&id=fd3d0d46&lang=scss&scoped=true&","dependencies":[{"path":"D:\\视频边缘1215\\TransFlow\\src\\views\\bounced\\analysisConfiguration.vue","mtime":1672741926736},{"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\\sass-loader\\dist\\cjs.js","mtime":1671074747407},{"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\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\r\n// /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 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",{"version":3,"sources":["analysisConfiguration.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA61BA;AACA;AACA;AACA;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","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 <p class=\"board-title\">坐标转换</p>\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 <el-radio-group v-model=\"coordinateForm.model\">\r\n <el-radio label=\"Georeferencing\"></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=\"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\">\r\n <iframe id=\"mapModule\" src=\"./VideoWeb/index.html\" frameborder=\"0\" style=\"width: 100%; height:100%;\" ></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 <p class=\"board-title\">车道识别配置</p>\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 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 <p class=\"board-title\">识别区域</p>\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 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 <p class=\"board-title\">轨迹平滑</p>\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 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 <p class=\"board-title\">车牌识别</p>\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 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 <p class=\"board-title\">停车状态</p>\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 :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-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\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 },\r\n methods: {\r\n testMqtt() {\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 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 "]}]} \ No newline at end of file +{"remainingRequest":"D:\\视频边缘1215\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\视频边缘1215\\TransFlow\\src\\views\\bounced\\analysisConfiguration.vue?vue&type=style&index=0&id=fd3d0d46&lang=scss&scoped=true&","dependencies":[{"path":"D:\\视频边缘1215\\TransFlow\\src\\views\\bounced\\analysisConfiguration.vue","mtime":1672809677780},{"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\\sass-loader\\dist\\cjs.js","mtime":1671074747407},{"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\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\r\n// /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 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",{"version":3,"sources":["analysisConfiguration.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA43BA;AACA;AACA;AACA;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","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 <p class=\"board-title\">坐标转换</p>\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 <el-radio-group v-model=\"coordinateForm.model\">\r\n <el-radio label=\"Georeferencing\"></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=\"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\" >\r\n <iframe id=\"mapModuleTop\" @load=\"load\" src=\"./VideoWeb/index.html\" frameborder=\"0\" style=\"width: 100%; height:100%;\" ></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 <p class=\"board-title\">车道识别配置</p>\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 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 <p class=\"board-title\">识别区域</p>\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 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 <p class=\"board-title\">轨迹平滑</p>\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 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 <p class=\"board-title\">车牌识别</p>\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 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 <p class=\"board-title\">停车状态</p>\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 :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-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\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 // if (iframe.attachEvent) {\r\n // setTimeout(() => {\r\n // this.testMqtt()\r\n // }, 5000);\r\n // }else{\r\n // console.log(\"3333\") \r\n // }\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 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 "]}]} \ No newline at end of file diff --git a/node_modules/.cache/vue-loader/3938235635ed7834f8ed3a438e794f63.json b/node_modules/.cache/vue-loader/3938235635ed7834f8ed3a438e794f63.json index f758904e..eaf9a835 100644 --- a/node_modules/.cache/vue-loader/3938235635ed7834f8ed3a438e794f63.json +++ b/node_modules/.cache/vue-loader/3938235635ed7834f8ed3a438e794f63.json @@ -1 +1 @@ -{"remainingRequest":"D:\\视频边缘1215\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\视频边缘1215\\TransFlow\\src\\views\\index.vue","dependencies":[{"path":"D:\\视频边缘1215\\TransFlow\\src\\views\\index.vue","mtime":1672741609576},{"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":["import { render, staticRenderFns } from \"./index.vue?vue&type=template&id=a83bd3b0&scoped=true&\"\nimport script from \"./index.vue?vue&type=script&lang=js&\"\nexport * from \"./index.vue?vue&type=script&lang=js&\"\nimport style0 from \"./index.vue?vue&type=style&index=0&id=a83bd3b0&scoped=true&lang=css&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"a83bd3b0\",\n null\n \n)\n\n/* hot reload */\nif (module.hot) {\n var api = require(\"D:\\\\视频边缘1215\\\\TransFlow\\\\node_modules\\\\vue-hot-reload-api\\\\dist\\\\index.js\")\n api.install(require('vue'))\n if (api.compatible) {\n module.hot.accept()\n if (!api.isRecorded('a83bd3b0')) {\n api.createRecord('a83bd3b0', component.options)\n } else {\n api.reload('a83bd3b0', component.options)\n }\n module.hot.accept(\"./index.vue?vue&type=template&id=a83bd3b0&scoped=true&\", function () {\n api.rerender('a83bd3b0', {\n render: render,\n staticRenderFns: staticRenderFns\n })\n })\n }\n}\ncomponent.options.__file = \"src/views/index.vue\"\nexport default component.exports"]} \ No newline at end of file +{"remainingRequest":"D:\\视频边缘1215\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\视频边缘1215\\TransFlow\\src\\views\\index.vue","dependencies":[{"path":"D:\\视频边缘1215\\TransFlow\\src\\views\\index.vue","mtime":1672799272806},{"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":["import { render, staticRenderFns } from \"./index.vue?vue&type=template&id=a83bd3b0&scoped=true&\"\nimport script from \"./index.vue?vue&type=script&lang=js&\"\nexport * from \"./index.vue?vue&type=script&lang=js&\"\nimport style0 from \"./index.vue?vue&type=style&index=0&id=a83bd3b0&scoped=true&lang=css&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"a83bd3b0\",\n null\n \n)\n\n/* hot reload */\nif (module.hot) {\n var api = require(\"D:\\\\视频边缘1215\\\\TransFlow\\\\node_modules\\\\vue-hot-reload-api\\\\dist\\\\index.js\")\n api.install(require('vue'))\n if (api.compatible) {\n module.hot.accept()\n if (!api.isRecorded('a83bd3b0')) {\n api.createRecord('a83bd3b0', component.options)\n } else {\n api.reload('a83bd3b0', component.options)\n }\n module.hot.accept(\"./index.vue?vue&type=template&id=a83bd3b0&scoped=true&\", function () {\n api.rerender('a83bd3b0', {\n render: render,\n staticRenderFns: staticRenderFns\n })\n })\n }\n}\ncomponent.options.__file = \"src/views/index.vue\"\nexport default component.exports"]} \ No newline at end of file diff --git a/node_modules/.cache/vue-loader/6fa4ff6ee4f1dd9a4c1ca8350800fb90.json b/node_modules/.cache/vue-loader/6fa4ff6ee4f1dd9a4c1ca8350800fb90.json index 5e024a09..d9a49599 100644 --- a/node_modules/.cache/vue-loader/6fa4ff6ee4f1dd9a4c1ca8350800fb90.json +++ b/node_modules/.cache/vue-loader/6fa4ff6ee4f1dd9a4c1ca8350800fb90.json @@ -1 +1 @@ -{"remainingRequest":"D:\\视频边缘1215\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\视频边缘1215\\TransFlow\\src\\views\\bounced\\analysisConfiguration.vue","dependencies":[{"path":"D:\\视频边缘1215\\TransFlow\\src\\views\\bounced\\analysisConfiguration.vue","mtime":1672741926736},{"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":["import { render, staticRenderFns } from \"./analysisConfiguration.vue?vue&type=template&id=fd3d0d46&scoped=true&\"\nimport script from \"./analysisConfiguration.vue?vue&type=script&lang=js&\"\nexport * from \"./analysisConfiguration.vue?vue&type=script&lang=js&\"\nimport style0 from \"./analysisConfiguration.vue?vue&type=style&index=0&id=fd3d0d46&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"fd3d0d46\",\n null\n \n)\n\n/* hot reload */\nif (module.hot) {\n var api = require(\"D:\\\\视频边缘1215\\\\TransFlow\\\\node_modules\\\\vue-hot-reload-api\\\\dist\\\\index.js\")\n api.install(require('vue'))\n if (api.compatible) {\n module.hot.accept()\n if (!api.isRecorded('fd3d0d46')) {\n api.createRecord('fd3d0d46', component.options)\n } else {\n api.reload('fd3d0d46', component.options)\n }\n module.hot.accept(\"./analysisConfiguration.vue?vue&type=template&id=fd3d0d46&scoped=true&\", function () {\n api.rerender('fd3d0d46', {\n render: render,\n staticRenderFns: staticRenderFns\n })\n })\n }\n}\ncomponent.options.__file = \"src/views/bounced/analysisConfiguration.vue\"\nexport default component.exports"]} \ No newline at end of file +{"remainingRequest":"D:\\视频边缘1215\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\视频边缘1215\\TransFlow\\src\\views\\bounced\\analysisConfiguration.vue","dependencies":[{"path":"D:\\视频边缘1215\\TransFlow\\src\\views\\bounced\\analysisConfiguration.vue","mtime":1672809677780},{"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":["import { render, staticRenderFns } from \"./analysisConfiguration.vue?vue&type=template&id=fd3d0d46&scoped=true&\"\nimport script from \"./analysisConfiguration.vue?vue&type=script&lang=js&\"\nexport * from \"./analysisConfiguration.vue?vue&type=script&lang=js&\"\nimport style0 from \"./analysisConfiguration.vue?vue&type=style&index=0&id=fd3d0d46&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"fd3d0d46\",\n null\n \n)\n\n/* hot reload */\nif (module.hot) {\n var api = require(\"D:\\\\视频边缘1215\\\\TransFlow\\\\node_modules\\\\vue-hot-reload-api\\\\dist\\\\index.js\")\n api.install(require('vue'))\n if (api.compatible) {\n module.hot.accept()\n if (!api.isRecorded('fd3d0d46')) {\n api.createRecord('fd3d0d46', component.options)\n } else {\n api.reload('fd3d0d46', component.options)\n }\n module.hot.accept(\"./analysisConfiguration.vue?vue&type=template&id=fd3d0d46&scoped=true&\", function () {\n api.rerender('fd3d0d46', {\n render: render,\n staticRenderFns: staticRenderFns\n })\n })\n }\n}\ncomponent.options.__file = \"src/views/bounced/analysisConfiguration.vue\"\nexport default component.exports"]} \ No newline at end of file diff --git a/node_modules/.cache/vue-loader/74b527b1d141c14a52267de720112ca5.json b/node_modules/.cache/vue-loader/74b527b1d141c14a52267de720112ca5.json index 8fd448db..43c36f0c 100644 --- a/node_modules/.cache/vue-loader/74b527b1d141c14a52267de720112ca5.json +++ b/node_modules/.cache/vue-loader/74b527b1d141c14a52267de720112ca5.json @@ -1 +1 @@ -{"remainingRequest":"D:\\视频边缘1215\\TransFlow\\node_modules\\vue-loader\\lib\\loaders\\templateLoader.js??vue-loader-options!D:\\视频边缘1215\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js??ref--0-0!D:\\视频边缘1215\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\视频边缘1215\\TransFlow\\src\\views\\index.vue?vue&type=template&id=a83bd3b0&scoped=true&","dependencies":[{"path":"D:\\视频边缘1215\\TransFlow\\src\\views\\index.vue","mtime":1672741609576},{"path":"D:\\视频边缘1215\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1671074740928},{"path":"D:\\视频边缘1215\\TransFlow\\node_modules\\vue-loader\\lib\\loaders\\templateLoader.js","mtime":1671074747916},{"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":["var render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\"div\", { staticClass: \"content-box\" }, [\n _c(\n \"div\",\n { staticClass: \"container\" },\n [\n _c(\n \"el-tabs\",\n { attrs: { type: \"border-card\" } },\n [\n _c(\"el-tab-pane\", { attrs: { label: \"xx路口\" } }, [\n _c(\n \"div\",\n {\n staticStyle: {\n width: \"75%\",\n height: \"900px\",\n display: \"inline-block\",\n border: \"1px soild #eee\"\n }\n },\n [\n _c(\"iframe\", {\n staticStyle: { width: \"100%\", height: \"100%\" },\n attrs: {\n id: \"mapModule\",\n src: \"./VideoWeb/index.html\",\n frameborder: \"0\"\n }\n })\n ]\n ),\n _c(\n \"div\",\n {\n staticStyle: {\n width: \"20%\",\n height: \"100%\",\n display: \"inline-block\",\n border: \"1px soild #eee\",\n padding: \"15px\"\n }\n },\n [\n _c(\n \"el-button\",\n {\n attrs: { type: \"primary\" },\n on: {\n click: function($event) {\n _vm.dialogFormVisible = true\n }\n }\n },\n [_vm._v(\"断面组件\")]\n ),\n _c(\n \"el-button\",\n {\n attrs: { type: \"primary\" },\n on: {\n click: function($event) {\n _vm.areaComponent = true\n }\n }\n },\n [_vm._v(\"区域组件\")]\n ),\n _c(\n \"el-button\",\n {\n attrs: { type: \"primary\" },\n on: {\n click: function($event) {\n _vm.trajectory = true\n }\n }\n },\n [_vm._v(\"轨迹组件\")]\n ),\n _c(\n \"el-button\",\n {\n attrs: { type: \"primary\" },\n on: {\n click: function($event) {\n _vm.speed = true\n }\n }\n },\n [_vm._v(\"速度组件\")]\n ),\n _c(\n \"el-button\",\n {\n attrs: { type: \"primary\" },\n on: {\n click: function($event) {\n _vm.flow = true\n }\n }\n },\n [_vm._v(\"流量组件\")]\n ),\n _c(\n \"el-button\",\n {\n attrs: { type: \"primary\" },\n on: {\n click: function($event) {\n _vm.indexModule = true\n }\n }\n },\n [_vm._v(\"车头时距\")]\n ),\n _c(\n \"el-button\",\n {\n attrs: { type: \"primary\" },\n on: {\n click: function($event) {\n _vm.indexModule = true\n }\n }\n },\n [_vm._v(\"排队数\")]\n ),\n _c(\n \"el-button\",\n {\n attrs: { type: \"primary\" },\n on: {\n click: function($event) {\n _vm.indexModule = true\n }\n }\n },\n [_vm._v(\"检测数\")]\n ),\n _c(\n \"el-button\",\n {\n attrs: { type: \"primary\" },\n on: {\n click: function($event) {\n _vm.indexModule = true\n }\n }\n },\n [_vm._v(\"延误\")]\n ),\n _c(\n \"el-button\",\n {\n attrs: { type: \"primary\" },\n on: {\n click: function($event) {\n _vm.indexModule = true\n }\n }\n },\n [_vm._v(\"拥堵\")]\n )\n ],\n 1\n )\n ]),\n _c(\n \"el-tab-pane\",\n { attrs: { label: \"数据看板\" } },\n [_c(\"dataBoard\")],\n 1\n ),\n _c(\n \"el-tab-pane\",\n { attrs: { label: \"分析配置\" } },\n [_c(\"analysisConfiguration\")],\n 1\n ),\n _c(\n \"el-tab-pane\",\n { attrs: { label: \"分析状态\" } },\n [_c(\"editModal\")],\n 1\n ),\n _c(\"el-tab-pane\", { attrs: { label: \"存储\" } }, [_vm._v(\"存储\")])\n ],\n 1\n )\n ],\n 1\n ),\n _c(\n \"div\",\n { staticClass: \"margin-top: 0px !important;\", attrs: { id: \"dialog\" } },\n [\n _c(\n \"el-dialog\",\n {\n attrs: {\n title: \"断面组件配置\",\n width: \"40%\",\n visible: _vm.dialogFormVisible\n },\n on: {\n \"update:visible\": function($event) {\n _vm.dialogFormVisible = $event\n }\n }\n },\n [\n _c(\n \"el-form\",\n {\n ref: \"form\",\n attrs: { model: _vm.form, \"label-width\": \"80px\" }\n },\n [\n _c(\n \"el-form-item\",\n { attrs: { label: \"断面名称\" } },\n [\n _c(\"el-input\", {\n model: {\n value: _vm.form.name,\n callback: function($$v) {\n _vm.$set(_vm.form, \"name\", $$v)\n },\n expression: \"form.name\"\n }\n })\n ],\n 1\n ),\n _c(\n \"el-form-item\",\n { attrs: { label: \"断面方向\" } },\n [\n _c(\n \"el-select\",\n {\n attrs: { placeholder: \"请选择类型\" },\n model: {\n value: _vm.form.region,\n callback: function($$v) {\n _vm.$set(_vm.form, \"region\", $$v)\n },\n expression: \"form.region\"\n }\n },\n [\n _c(\"el-option\", {\n attrs: { label: \"正向\", value: \"car\" }\n }),\n _c(\"el-option\", {\n attrs: { label: \"方向\", value: \"bus\" }\n }),\n _c(\"el-option\", {\n attrs: { label: \"双向\", value: \"kache\" }\n })\n ],\n 1\n )\n ],\n 1\n ),\n _c(\n \"el-form-item\",\n [\n _c(\n \"el-button\",\n {\n attrs: { type: \"primary\" },\n on: { click: _vm.onSubmit }\n },\n [_vm._v(\"确认\")]\n ),\n _c(\n \"el-button\",\n {\n on: {\n click: function($event) {\n _vm.dialogFormVisible = false\n }\n }\n },\n [_vm._v(\"取消\")]\n )\n ],\n 1\n )\n ],\n 1\n )\n ],\n 1\n ),\n _c(\n \"el-dialog\",\n {\n attrs: {\n title: \"区域组件配置\",\n width: \"40%\",\n visible: _vm.areaComponent\n },\n on: {\n \"update:visible\": function($event) {\n _vm.areaComponent = $event\n }\n }\n },\n [\n _c(\n \"el-form\",\n {\n ref: \"form\",\n attrs: { model: _vm.areaComponentform, \"label-width\": \"80px\" }\n },\n [\n _c(\n \"el-form-item\",\n { attrs: { label: \"区域名称\" } },\n [\n _c(\"el-input\", {\n model: {\n value: _vm.areaComponentform.name,\n callback: function($$v) {\n _vm.$set(_vm.areaComponentform, \"name\", $$v)\n },\n expression: \"areaComponentform.name\"\n }\n })\n ],\n 1\n ),\n _c(\n \"el-form-item\",\n [\n _c(\n \"el-button\",\n {\n attrs: { type: \"primary\" },\n on: { click: _vm.onSubmit }\n },\n [_vm._v(\"确认\")]\n ),\n _c(\n \"el-button\",\n {\n on: {\n click: function($event) {\n _vm.dialogFormVisible = false\n }\n }\n },\n [_vm._v(\"取消\")]\n )\n ],\n 1\n )\n ],\n 1\n )\n ],\n 1\n ),\n _c(\n \"el-dialog\",\n {\n attrs: {\n title: \"轨迹组件配置\",\n width: \"40%\",\n visible: _vm.trajectory\n },\n on: {\n \"update:visible\": function($event) {\n _vm.trajectory = $event\n }\n }\n },\n [\n _c(\n \"el-form\",\n {\n ref: \"form\",\n attrs: { model: _vm.trackForm, \"label-width\": \"80px\" }\n },\n [\n _c(\n \"el-form-item\",\n { attrs: { label: \"轨迹名称:\" } },\n [\n _c(\"el-input\", {\n model: {\n value: _vm.trackForm.name,\n callback: function($$v) {\n _vm.$set(_vm.trackForm, \"name\", $$v)\n },\n expression: \"trackForm.name\"\n }\n })\n ],\n 1\n ),\n _c(\n \"el-form-item\",\n [\n _c(\n \"el-button\",\n {\n attrs: { type: \"primary\" },\n on: { click: _vm.onSubmit }\n },\n [_vm._v(\"确认\")]\n ),\n _c(\n \"el-button\",\n {\n on: {\n click: function($event) {\n _vm.dialogFormVisible = false\n }\n }\n },\n [_vm._v(\"取消\")]\n )\n ],\n 1\n )\n ],\n 1\n )\n ],\n 1\n ),\n _c(\n \"el-dialog\",\n {\n attrs: { title: \"速度组件配置\", width: \"40%\", visible: _vm.speed },\n on: {\n \"update:visible\": function($event) {\n _vm.speed = $event\n }\n }\n },\n [\n _c(\n \"el-form\",\n {\n ref: \"form\",\n attrs: { model: _vm.speedForm, \"label-width\": \"80px\" }\n },\n [\n _c(\n \"el-form-item\",\n { attrs: { label: \"速度组件名称:\" } },\n [\n _c(\"el-input\", {\n model: {\n value: _vm.speedForm.name,\n callback: function($$v) {\n _vm.$set(_vm.speedForm, \"name\", $$v)\n },\n expression: \"speedForm.name\"\n }\n })\n ],\n 1\n ),\n _c(\n \"el-form-item\",\n { attrs: { label: \"数值筛选:\" } },\n [\n _c(\"el-input\", {\n model: {\n value: _vm.speedForm.num,\n callback: function($$v) {\n _vm.$set(_vm.speedForm, \"num\", $$v)\n },\n expression: \"speedForm.num\"\n }\n })\n ],\n 1\n ),\n _c(\n \"el-form-item\",\n { attrs: { label: \"时间模式:\" } },\n [\n _c(\n \"el-select\",\n {\n attrs: { placeholder: \"请选择时间模式\" },\n model: {\n value: _vm.speedForm.timeModel,\n callback: function($$v) {\n _vm.$set(_vm.speedForm, \"timeModel\", $$v)\n },\n expression: \"speedForm.timeModel\"\n }\n },\n [\n _c(\"el-option\", {\n attrs: { label: \"触发\", value: \"touch\" }\n }),\n _c(\"el-option\", {\n attrs: { label: \"周期时刻\", value: \"timeing\" }\n }),\n _c(\"el-option\", {\n attrs: { label: \"周期统计\", value: \"date\" }\n })\n ],\n 1\n )\n ],\n 1\n ),\n _vm.speedForm.timeModel == \"touch\"\n ? _c(\n \"el-form-item\",\n { attrs: { label: \"触发类型:\" } },\n [\n _c(\n \"el-radio-group\",\n {\n model: {\n value: _vm.speedForm.touchType,\n callback: function($$v) {\n _vm.$set(_vm.speedForm, \"touchType\", $$v)\n },\n expression: \"speedForm.touchType\"\n }\n },\n [\n _c(\"el-radio\", {\n attrs: { label: \"实时(触发)\" }\n }),\n _c(\"el-radio\", { attrs: { label: \"间隔\" } })\n ],\n 1\n )\n ],\n 1\n )\n : _vm._e(),\n _vm.speedForm.timeModel == \"timeing\"\n ? _c(\n \"el-form-item\",\n { attrs: { label: \"时刻:\" } },\n [\n _c(\"el-slider\", {\n attrs: { \"show-input\": \"\" },\n model: {\n value: _vm.speedForm.time,\n callback: function($$v) {\n _vm.$set(_vm.speedForm, \"time\", $$v)\n },\n expression: \"speedForm.time\"\n }\n })\n ],\n 1\n )\n : _vm._e(),\n _vm.speedForm.timeModel == \"date\"\n ? _c(\n \"el-form-item\",\n { attrs: { label: \"时间:\" } },\n [\n _c(\"el-date-picker\", {\n attrs: {\n type: \"datetimerange\",\n \"range-separator\": \"至\",\n \"start-placeholder\": \"开始日期\",\n \"end-placeholder\": \"结束日期\"\n },\n model: {\n value: _vm.speedForm.date,\n callback: function($$v) {\n _vm.$set(_vm.speedForm, \"date\", $$v)\n },\n expression: \"speedForm.date\"\n }\n })\n ],\n 1\n )\n : _vm._e(),\n _c(\n \"el-form-item\",\n { attrs: { label: \"展现形式:\" } },\n [\n _c(\n \"el-checkbox-group\",\n {\n model: {\n value: _vm.speedForm.type,\n callback: function($$v) {\n _vm.$set(_vm.speedForm, \"type\", $$v)\n },\n expression: \"speedForm.type\"\n }\n },\n [\n _c(\"el-checkbox\", {\n attrs: { label: \"数值\", name: \"type\" }\n }),\n _c(\"el-checkbox\", {\n attrs: { label: \"表格\", name: \"type\" }\n }),\n _c(\"el-checkbox\", {\n attrs: { label: \"时间曲线图\", name: \"type\" }\n }),\n _c(\"el-checkbox\", {\n attrs: { label: \"均值图\", name: \"type\" }\n })\n ],\n 1\n )\n ],\n 1\n ),\n _c(\n \"el-form-item\",\n [\n _c(\n \"el-button\",\n {\n attrs: { type: \"primary\" },\n on: { click: _vm.onSubmit }\n },\n [_vm._v(\"确认\")]\n ),\n _c(\n \"el-button\",\n {\n on: {\n click: function($event) {\n _vm.dialogFormVisible = false\n }\n }\n },\n [_vm._v(\"取消\")]\n )\n ],\n 1\n )\n ],\n 1\n )\n ],\n 1\n )\n ],\n 1\n )\n ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\nexport { render, staticRenderFns }"]} \ No newline at end of file +{"remainingRequest":"D:\\视频边缘1215\\TransFlow\\node_modules\\vue-loader\\lib\\loaders\\templateLoader.js??vue-loader-options!D:\\视频边缘1215\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js??ref--0-0!D:\\视频边缘1215\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\视频边缘1215\\TransFlow\\src\\views\\index.vue?vue&type=template&id=a83bd3b0&scoped=true&","dependencies":[{"path":"D:\\视频边缘1215\\TransFlow\\src\\views\\index.vue","mtime":1672799272806},{"path":"D:\\视频边缘1215\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1671074740928},{"path":"D:\\视频边缘1215\\TransFlow\\node_modules\\vue-loader\\lib\\loaders\\templateLoader.js","mtime":1671074747916},{"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":["var render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\"div\", { staticClass: \"content-box\" }, [\n _c(\n \"div\",\n { staticClass: \"container\" },\n [\n _c(\n \"el-tabs\",\n { attrs: { type: \"border-card\" } },\n [\n _c(\"el-tab-pane\", { attrs: { label: \"xx路口\" } }, [\n _c(\n \"div\",\n {\n staticStyle: {\n width: \"75%\",\n height: \"900px\",\n display: \"inline-block\",\n border: \"1px soild #eee\"\n }\n },\n [\n _c(\"iframe\", {\n staticStyle: { width: \"100%\", height: \"100%\" },\n attrs: {\n id: \"mapModule\",\n src: \"./VideoWeb/index.html\",\n frameborder: \"0\"\n }\n })\n ]\n ),\n _c(\n \"div\",\n {\n staticStyle: {\n width: \"20%\",\n height: \"100%\",\n display: \"inline-block\",\n border: \"1px soild #eee\",\n padding: \"15px\"\n }\n },\n [\n _c(\n \"el-button\",\n {\n attrs: { type: \"primary\" },\n on: {\n click: function($event) {\n _vm.dialogFormVisible = true\n }\n }\n },\n [_vm._v(\"断面组件\")]\n ),\n _c(\n \"el-button\",\n {\n attrs: { type: \"primary\" },\n on: {\n click: function($event) {\n _vm.areaComponent = true\n }\n }\n },\n [_vm._v(\"区域组件\")]\n ),\n _c(\n \"el-button\",\n {\n attrs: { type: \"primary\" },\n on: {\n click: function($event) {\n _vm.trajectory = true\n }\n }\n },\n [_vm._v(\"轨迹组件\")]\n ),\n _c(\n \"el-button\",\n {\n attrs: { type: \"primary\" },\n on: {\n click: function($event) {\n _vm.speed = true\n }\n }\n },\n [_vm._v(\"速度组件\")]\n ),\n _c(\n \"el-button\",\n {\n attrs: { type: \"primary\" },\n on: {\n click: function($event) {\n _vm.flow = true\n }\n }\n },\n [_vm._v(\"流量组件\")]\n ),\n _c(\n \"el-button\",\n {\n attrs: { type: \"primary\" },\n on: {\n click: function($event) {\n _vm.indexModule = true\n }\n }\n },\n [_vm._v(\"车头时距\")]\n ),\n _c(\n \"el-button\",\n {\n attrs: { type: \"primary\" },\n on: {\n click: function($event) {\n _vm.indexModule = true\n }\n }\n },\n [_vm._v(\"排队数\")]\n ),\n _c(\n \"el-button\",\n {\n attrs: { type: \"primary\" },\n on: {\n click: function($event) {\n _vm.indexModule = true\n }\n }\n },\n [_vm._v(\"检测数\")]\n ),\n _c(\n \"el-button\",\n {\n attrs: { type: \"primary\" },\n on: {\n click: function($event) {\n _vm.indexModule = true\n }\n }\n },\n [_vm._v(\"延误\")]\n ),\n _c(\n \"el-button\",\n {\n attrs: { type: \"primary\" },\n on: {\n click: function($event) {\n _vm.indexModule = true\n }\n }\n },\n [_vm._v(\"拥堵\")]\n )\n ],\n 1\n )\n ]),\n _c(\n \"el-tab-pane\",\n { attrs: { label: \"数据看板\" } },\n [_c(\"dataBoard\")],\n 1\n ),\n _c(\n \"el-tab-pane\",\n { attrs: { label: \"分析配置\" } },\n [_c(\"analysisConfiguration\")],\n 1\n ),\n _c(\n \"el-tab-pane\",\n { attrs: { label: \"分析状态\" } },\n [_c(\"editModal\")],\n 1\n ),\n _c(\"el-tab-pane\", { attrs: { label: \"存储\" } }, [_vm._v(\"存储\")])\n ],\n 1\n )\n ],\n 1\n ),\n _c(\n \"div\",\n { staticClass: \"margin-top: 0px !important;\", attrs: { id: \"dialog\" } },\n [\n _c(\n \"el-dialog\",\n {\n attrs: {\n title: \"断面组件配置\",\n width: \"40%\",\n visible: _vm.dialogFormVisible\n },\n on: {\n \"update:visible\": function($event) {\n _vm.dialogFormVisible = $event\n }\n }\n },\n [\n _c(\n \"el-form\",\n {\n ref: \"form\",\n attrs: { model: _vm.form, \"label-width\": \"80px\" }\n },\n [\n _c(\n \"el-form-item\",\n { attrs: { label: \"断面名称\" } },\n [\n _c(\"el-input\", {\n model: {\n value: _vm.form.name,\n callback: function($$v) {\n _vm.$set(_vm.form, \"name\", $$v)\n },\n expression: \"form.name\"\n }\n })\n ],\n 1\n ),\n _c(\n \"el-form-item\",\n { attrs: { label: \"断面方向\" } },\n [\n _c(\n \"el-select\",\n {\n attrs: { placeholder: \"请选择类型\" },\n model: {\n value: _vm.form.region,\n callback: function($$v) {\n _vm.$set(_vm.form, \"region\", $$v)\n },\n expression: \"form.region\"\n }\n },\n [\n _c(\"el-option\", {\n attrs: { label: \"正向\", value: \"car\" }\n }),\n _c(\"el-option\", {\n attrs: { label: \"方向\", value: \"bus\" }\n }),\n _c(\"el-option\", {\n attrs: { label: \"双向\", value: \"kache\" }\n })\n ],\n 1\n )\n ],\n 1\n ),\n _c(\n \"el-form-item\",\n [\n _c(\n \"el-button\",\n {\n attrs: { type: \"primary\" },\n on: { click: _vm.onSubmit }\n },\n [_vm._v(\"确认\")]\n ),\n _c(\n \"el-button\",\n {\n on: {\n click: function($event) {\n _vm.dialogFormVisible = false\n }\n }\n },\n [_vm._v(\"取消\")]\n )\n ],\n 1\n )\n ],\n 1\n )\n ],\n 1\n ),\n _c(\n \"el-dialog\",\n {\n attrs: {\n title: \"区域组件配置\",\n width: \"40%\",\n visible: _vm.areaComponent\n },\n on: {\n \"update:visible\": function($event) {\n _vm.areaComponent = $event\n }\n }\n },\n [\n _c(\n \"el-form\",\n {\n ref: \"form\",\n attrs: { model: _vm.areaComponentform, \"label-width\": \"80px\" }\n },\n [\n _c(\n \"el-form-item\",\n { attrs: { label: \"区域名称\" } },\n [\n _c(\"el-input\", {\n model: {\n value: _vm.areaComponentform.name,\n callback: function($$v) {\n _vm.$set(_vm.areaComponentform, \"name\", $$v)\n },\n expression: \"areaComponentform.name\"\n }\n })\n ],\n 1\n ),\n _c(\n \"el-form-item\",\n [\n _c(\n \"el-button\",\n {\n attrs: { type: \"primary\" },\n on: { click: _vm.onSubmit }\n },\n [_vm._v(\"确认\")]\n ),\n _c(\n \"el-button\",\n {\n on: {\n click: function($event) {\n _vm.dialogFormVisible = false\n }\n }\n },\n [_vm._v(\"取消\")]\n )\n ],\n 1\n )\n ],\n 1\n )\n ],\n 1\n ),\n _c(\n \"el-dialog\",\n {\n attrs: {\n title: \"轨迹组件配置\",\n width: \"40%\",\n visible: _vm.trajectory\n },\n on: {\n \"update:visible\": function($event) {\n _vm.trajectory = $event\n }\n }\n },\n [\n _c(\n \"el-form\",\n {\n ref: \"form\",\n attrs: { model: _vm.trackForm, \"label-width\": \"80px\" }\n },\n [\n _c(\n \"el-form-item\",\n { attrs: { label: \"轨迹名称:\" } },\n [\n _c(\"el-input\", {\n model: {\n value: _vm.trackForm.name,\n callback: function($$v) {\n _vm.$set(_vm.trackForm, \"name\", $$v)\n },\n expression: \"trackForm.name\"\n }\n })\n ],\n 1\n ),\n _c(\n \"el-form-item\",\n [\n _c(\n \"el-button\",\n {\n attrs: { type: \"primary\" },\n on: { click: _vm.onSubmit }\n },\n [_vm._v(\"确认\")]\n ),\n _c(\n \"el-button\",\n {\n on: {\n click: function($event) {\n _vm.dialogFormVisible = false\n }\n }\n },\n [_vm._v(\"取消\")]\n )\n ],\n 1\n )\n ],\n 1\n )\n ],\n 1\n ),\n _c(\n \"el-dialog\",\n {\n attrs: { title: \"速度组件配置\", width: \"40%\", visible: _vm.speed },\n on: {\n \"update:visible\": function($event) {\n _vm.speed = $event\n }\n }\n },\n [\n _c(\n \"el-form\",\n {\n ref: \"form\",\n attrs: { model: _vm.speedForm, \"label-width\": \"80px\" }\n },\n [\n _c(\n \"el-form-item\",\n { attrs: { label: \"速度组件名称:\" } },\n [\n _c(\"el-input\", {\n model: {\n value: _vm.speedForm.name,\n callback: function($$v) {\n _vm.$set(_vm.speedForm, \"name\", $$v)\n },\n expression: \"speedForm.name\"\n }\n })\n ],\n 1\n ),\n _c(\n \"el-form-item\",\n { attrs: { label: \"数值筛选:\" } },\n [\n _c(\"el-input\", {\n model: {\n value: _vm.speedForm.num,\n callback: function($$v) {\n _vm.$set(_vm.speedForm, \"num\", $$v)\n },\n expression: \"speedForm.num\"\n }\n })\n ],\n 1\n ),\n _c(\n \"el-form-item\",\n { attrs: { label: \"时间模式:\" } },\n [\n _c(\n \"el-select\",\n {\n attrs: { placeholder: \"请选择时间模式\" },\n model: {\n value: _vm.speedForm.timeModel,\n callback: function($$v) {\n _vm.$set(_vm.speedForm, \"timeModel\", $$v)\n },\n expression: \"speedForm.timeModel\"\n }\n },\n [\n _c(\"el-option\", {\n attrs: { label: \"触发\", value: \"touch\" }\n }),\n _c(\"el-option\", {\n attrs: { label: \"周期时刻\", value: \"timeing\" }\n }),\n _c(\"el-option\", {\n attrs: { label: \"周期统计\", value: \"date\" }\n })\n ],\n 1\n )\n ],\n 1\n ),\n _vm.speedForm.timeModel == \"touch\"\n ? _c(\n \"el-form-item\",\n { attrs: { label: \"触发类型:\" } },\n [\n _c(\n \"el-radio-group\",\n {\n model: {\n value: _vm.speedForm.touchType,\n callback: function($$v) {\n _vm.$set(_vm.speedForm, \"touchType\", $$v)\n },\n expression: \"speedForm.touchType\"\n }\n },\n [\n _c(\"el-radio\", {\n attrs: { label: \"实时(触发)\" }\n }),\n _c(\"el-radio\", { attrs: { label: \"间隔\" } })\n ],\n 1\n )\n ],\n 1\n )\n : _vm._e(),\n _vm.speedForm.timeModel == \"timeing\"\n ? _c(\n \"el-form-item\",\n { attrs: { label: \"时刻:\" } },\n [\n _c(\"el-slider\", {\n attrs: { \"show-input\": \"\" },\n model: {\n value: _vm.speedForm.time,\n callback: function($$v) {\n _vm.$set(_vm.speedForm, \"time\", $$v)\n },\n expression: \"speedForm.time\"\n }\n })\n ],\n 1\n )\n : _vm._e(),\n _vm.speedForm.timeModel == \"date\"\n ? _c(\n \"el-form-item\",\n { attrs: { label: \"时间:\" } },\n [\n _c(\"el-date-picker\", {\n attrs: {\n type: \"datetimerange\",\n \"range-separator\": \"至\",\n \"start-placeholder\": \"开始日期\",\n \"end-placeholder\": \"结束日期\"\n },\n model: {\n value: _vm.speedForm.date,\n callback: function($$v) {\n _vm.$set(_vm.speedForm, \"date\", $$v)\n },\n expression: \"speedForm.date\"\n }\n })\n ],\n 1\n )\n : _vm._e(),\n _c(\n \"el-form-item\",\n { attrs: { label: \"展现形式:\" } },\n [\n _c(\n \"el-checkbox-group\",\n {\n model: {\n value: _vm.speedForm.type,\n callback: function($$v) {\n _vm.$set(_vm.speedForm, \"type\", $$v)\n },\n expression: \"speedForm.type\"\n }\n },\n [\n _c(\"el-checkbox\", {\n attrs: { label: \"数值\", name: \"type\" }\n }),\n _c(\"el-checkbox\", {\n attrs: { label: \"表格\", name: \"type\" }\n }),\n _c(\"el-checkbox\", {\n attrs: { label: \"时间曲线图\", name: \"type\" }\n }),\n _c(\"el-checkbox\", {\n attrs: { label: \"均值图\", name: \"type\" }\n })\n ],\n 1\n )\n ],\n 1\n ),\n _c(\n \"el-form-item\",\n [\n _c(\n \"el-button\",\n {\n attrs: { type: \"primary\" },\n on: { click: _vm.onSubmit }\n },\n [_vm._v(\"确认\")]\n ),\n _c(\n \"el-button\",\n {\n on: {\n click: function($event) {\n _vm.dialogFormVisible = false\n }\n }\n },\n [_vm._v(\"取消\")]\n )\n ],\n 1\n )\n ],\n 1\n )\n ],\n 1\n )\n ],\n 1\n )\n ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\nexport { render, staticRenderFns }"]} \ No newline at end of file diff --git a/node_modules/.cache/vue-loader/ac3852b8fc5662ab0c9a8c128895bb4a.json b/node_modules/.cache/vue-loader/ac3852b8fc5662ab0c9a8c128895bb4a.json index fd20f70a..9c26bbfc 100644 --- a/node_modules/.cache/vue-loader/ac3852b8fc5662ab0c9a8c128895bb4a.json +++ b/node_modules/.cache/vue-loader/ac3852b8fc5662ab0c9a8c128895bb4a.json @@ -1 +1 @@ -{"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":1672741609576},{"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\n\n\n\n\n\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4rBA;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.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 // debugger\n // return\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 // 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 // console.log(\n // `[MQTT-TEST] 从主题 \"${topic}\" 收到的内容: ${message.toString()}`,\n // new Date(),\n // new Date().getMilliseconds()\n // );\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 // console.log(\"msg\",msg)\n // debugger\n \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"]}]} \ No newline at end of file +{"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"]}]} \ No newline at end of file diff --git a/node_modules/.cache/vue-loader/b13b9bbc088dffdb295e1969ec53fd5e.json b/node_modules/.cache/vue-loader/b13b9bbc088dffdb295e1969ec53fd5e.json index 409eacc3..62eeb3f7 100644 --- a/node_modules/.cache/vue-loader/b13b9bbc088dffdb295e1969ec53fd5e.json +++ b/node_modules/.cache/vue-loader/b13b9bbc088dffdb295e1969ec53fd5e.json @@ -1 +1 @@ -{"remainingRequest":"D:\\视频边缘1215\\TransFlow\\node_modules\\vue-loader\\lib\\loaders\\templateLoader.js??vue-loader-options!D:\\视频边缘1215\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js??ref--0-0!D:\\视频边缘1215\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\视频边缘1215\\TransFlow\\src\\views\\bounced\\analysisConfiguration.vue?vue&type=template&id=fd3d0d46&scoped=true&","dependencies":[{"path":"D:\\视频边缘1215\\TransFlow\\src\\views\\bounced\\analysisConfiguration.vue","mtime":1672741926736},{"path":"D:\\视频边缘1215\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1671074740928},{"path":"D:\\视频边缘1215\\TransFlow\\node_modules\\vue-loader\\lib\\loaders\\templateLoader.js","mtime":1671074747916},{"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":["var render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\"div\", [\n _c(\"div\", [\n _c(\"div\", { staticClass: \"top\" }, [\n _c(\n \"div\",\n { staticClass: \"section\" },\n [\n _c(\n \"el-form\",\n {\n staticClass: \"demo-form-inline\",\n attrs: {\n inline: true,\n model: _vm.formInline,\n \"label-width\": \"140px\"\n }\n },\n [\n _c(\"div\", { staticClass: \"warning\" }, [\n _c(\"i\", {\n staticClass: \"el-icon-warning\",\n staticStyle: { color: \"#409EFF\", margin: \"0 3px 0 10px\" }\n }),\n _vm._v(\n \"自动保存可以使系统在异常关闭后自动恢复。在这种情况下,缓存数据将会丢失,但所有存储数据将被保存。\\n \"\n )\n ]),\n _c(\n \"el-form-item\",\n { attrs: { label: \"自动保存:\" } },\n [\n _c(\"el-switch\", {\n model: {\n value: _vm.formInline.user,\n callback: function($$v) {\n _vm.$set(_vm.formInline, \"user\", $$v)\n },\n expression: \"formInline.user\"\n }\n })\n ],\n 1\n ),\n _c(\n \"el-form-item\",\n { attrs: { label: \"时间间隔:\" } },\n [\n _c(\n \"el-select\",\n {\n attrs: { placeholder: \"时间间隔\" },\n model: {\n value: _vm.formInline.region,\n callback: function($$v) {\n _vm.$set(_vm.formInline, \"region\", $$v)\n },\n expression: \"formInline.region\"\n }\n },\n [\n _c(\"el-option\", {\n attrs: { label: \"20s\", value: \"shanghai\" }\n }),\n _c(\"el-option\", {\n attrs: { label: \"30s\", value: \"beijing\" }\n })\n ],\n 1\n )\n ],\n 1\n )\n ],\n 1\n ),\n _c(\n \"el-form\",\n {\n ref: \"form\",\n attrs: { model: _vm.sizeForm, \"label-width\": \"140px\" }\n },\n [\n _c(\"div\", { staticClass: \"warning\" }, [\n _c(\"i\", {\n staticClass: \"el-icon-warning\",\n staticStyle: { color: \"#409EFF\", margin: \"0 3px 0 10px\" }\n }),\n _vm._v(\"重置分析将删除所有累计的轨迹数据\\n \")\n ]),\n _c(\n \"el-button\",\n {\n staticStyle: { width: \"150px\" },\n attrs: { type: \"primary\", size: \"small\" },\n on: {\n click: function($event) {\n return _vm.handleagain()\n }\n }\n },\n [_vm._v(\"重置\")]\n ),\n _c(\"div\", { staticClass: \"warning\" }, [\n _c(\"i\", {\n staticClass: \"el-icon-warning\",\n staticStyle: { color: \"#409EFF\", margin: \"0 3px 0 10px\" }\n }),\n _vm._v(\"在 WGS84 坐标系中输入相机位置\\n \")\n ]),\n _c(\n \"el-form-item\",\n { attrs: { label: \"相机位置:\" } },\n [\n _c(\"el-input\", {\n staticStyle: { width: \"150px\" },\n attrs: { placeholder: \"经度\" },\n model: {\n value: _vm.sizeForm.name,\n callback: function($$v) {\n _vm.$set(_vm.sizeForm, \"name\", $$v)\n },\n expression: \"sizeForm.name\"\n }\n }),\n _c(\"el-input\", {\n staticStyle: { width: \"150px\", \"margin-left\": \"20px\" },\n attrs: { placeholder: \"纬度\" },\n model: {\n value: _vm.sizeForm.name,\n callback: function($$v) {\n _vm.$set(_vm.sizeForm, \"name\", $$v)\n },\n expression: \"sizeForm.name\"\n }\n })\n ],\n 1\n )\n ],\n 1\n )\n ],\n 1\n )\n ]),\n _c(\"div\", { staticClass: \"dataBoard\" }, [\n _c(\n \"div\",\n { staticClass: \"section\" },\n [\n _c(\"p\", { staticClass: \"board-title\" }, [_vm._v(\"坐标转换\")]),\n _c(\n \"el-form\",\n {\n ref: \"form\",\n attrs: { model: _vm.coordinateForm, \"label-width\": \"140px\" }\n },\n [\n _c(\n \"el-form-item\",\n { attrs: { label: \"坐标转换开关:\" } },\n [\n _c(\"el-switch\", {\n model: {\n value: _vm.coordinateForm.coordinateClose,\n callback: function($$v) {\n _vm.$set(_vm.coordinateForm, \"coordinateClose\", $$v)\n },\n expression: \"coordinateForm.coordinateClose\"\n }\n })\n ],\n 1\n ),\n _vm.coordinateForm.coordinateClose == true\n ? _c(\n \"el-form-item\",\n { attrs: { label: \"模型:\" } },\n [\n _c(\n \"el-radio-group\",\n {\n model: {\n value: _vm.coordinateForm.model,\n callback: function($$v) {\n _vm.$set(_vm.coordinateForm, \"model\", $$v)\n },\n expression: \"coordinateForm.model\"\n }\n },\n [\n _c(\"el-radio\", {\n attrs: { label: \"Georeferencing\" }\n }),\n _c(\"el-radio\", { attrs: { label: \"其他\" } })\n ],\n 1\n )\n ],\n 1\n )\n : _vm._e(),\n _vm.coordinateForm.coordinateClose == true\n ? _c(\n \"el-form-item\",\n { attrs: { label: \"坐标转换:\" } },\n [\n _c(\n \"el-radio-group\",\n {\n model: {\n value:\n _vm.coordinateForm.coordinateTransformation,\n callback: function($$v) {\n _vm.$set(\n _vm.coordinateForm,\n \"coordinateTransformation\",\n $$v\n )\n },\n expression:\n \"coordinateForm.coordinateTransformation\"\n }\n },\n [\n _c(\"el-radio\", { attrs: { label: \"84坐标系\" } }),\n _c(\"el-radio\", { attrs: { label: \"其他\" } })\n ],\n 1\n )\n ],\n 1\n )\n : _vm._e(),\n _c(\"div\", { staticStyle: { width: \"100%\", height: \"300px\" } }, [\n _c(\"iframe\", {\n staticStyle: { width: \"100%\", height: \"100%\" },\n attrs: {\n id: \"mapModule\",\n src: \"./VideoWeb/index.html\",\n frameborder: \"0\"\n }\n })\n ]),\n _vm.coordinateForm.coordinateClose == true\n ? _c(\n \"el-table\",\n { attrs: { border: \"\", data: _vm.coordinateTableData } },\n [\n _c(\"el-table-column\", {\n attrs: {\n prop: \"name\",\n label: \"点名称\",\n align: \"center\"\n },\n scopedSlots: _vm._u(\n [\n {\n key: \"default\",\n fn: function(scope) {\n return [\n scope.$index === 0\n ? _c(\"el-input\", {\n attrs: {\n maxlength: \"30\",\n placeholder: \"Required\"\n },\n model: {\n value: scope.row.name,\n callback: function($$v) {\n _vm.$set(scope.row, \"name\", $$v)\n },\n expression: \"scope.row.name\"\n }\n })\n : _c(\"span\", {\n domProps: {\n textContent: _vm._s(scope.row.name)\n }\n })\n ]\n }\n }\n ],\n null,\n false,\n 1861943855\n )\n }),\n _c(\"el-table-column\", {\n attrs: {\n prop: \"longitude\",\n label: \"经度\",\n align: \"center\"\n },\n scopedSlots: _vm._u(\n [\n {\n key: \"default\",\n fn: function(scope) {\n return [\n scope.row.isEdit\n ? _c(\"el-input\", {\n attrs: {\n maxlength: \"20\",\n placeholder: \"Required\"\n },\n model: {\n value: scope.row.longitude,\n callback: function($$v) {\n _vm.$set(\n scope.row,\n \"longitude\",\n $$v\n )\n },\n expression: \"scope.row.longitude\"\n }\n })\n : _c(\"span\", {\n domProps: {\n textContent: _vm._s(\n scope.row.longitude\n )\n }\n })\n ]\n }\n }\n ],\n null,\n false,\n 452909755\n )\n }),\n _c(\"el-table-column\", {\n attrs: {\n prop: \"latitude\",\n label: \"纬度\",\n align: \"center\"\n },\n scopedSlots: _vm._u(\n [\n {\n key: \"default\",\n fn: function(scope) {\n return [\n scope.row.isEdit\n ? _c(\"el-input\", {\n attrs: {\n maxlength: \"20\",\n placeholder: \"Required\"\n },\n model: {\n value: scope.row.latitude,\n callback: function($$v) {\n _vm.$set(\n scope.row,\n \"latitude\",\n $$v\n )\n },\n expression: \"scope.row.latitude\"\n }\n })\n : _c(\"span\", {\n domProps: {\n textContent: _vm._s(\n scope.row.latitude\n )\n }\n })\n ]\n }\n }\n ],\n null,\n false,\n 2766622075\n )\n }),\n _c(\"el-table-column\", {\n attrs: {\n label: \"操作\",\n align: \"center\",\n \"class-name\": \"small-padding fixed-width\"\n },\n scopedSlots: _vm._u(\n [\n {\n key: \"default\",\n fn: function(scope) {\n return [\n scope.$index === 0\n ? _c(\n \"el-button\",\n {\n staticStyle: { color: \"#2090c1\" },\n attrs: {\n size: \"mini\",\n type: \"text\"\n },\n on: {\n click: function($event) {\n return _vm.handleAdd(scope.row)\n }\n }\n },\n [_vm._v(\"Add\\n \")]\n )\n : _vm._e(),\n scope.$index !== 0\n ? _c(\n \"el-button\",\n {\n staticStyle: { color: \"#2090c1\" },\n attrs: {\n size: \"mini\",\n type: \"text\"\n },\n on: {\n click: function($event) {\n return _vm.handleUpdate(\n scope.row\n )\n }\n }\n },\n [\n _vm._v(\n _vm._s(\n scope.row.isEdit\n ? \"Apply\"\n : \"Edit\"\n ) + \"\\n \"\n )\n ]\n )\n : _vm._e(),\n scope.$index !== 0\n ? _c(\n \"el-button\",\n {\n staticStyle: { color: \"#F56C6C\" },\n attrs: {\n size: \"mini\",\n type: \"text\"\n },\n on: {\n click: function($event) {\n return _vm.handleDelete(\n scope.row\n )\n }\n }\n },\n [\n _vm._v(\n _vm._s(\n scope.row.isEdit\n ? \"Cancel\"\n : \"Delete\"\n ) + \"\\n \"\n )\n ]\n )\n : _vm._e()\n ]\n }\n }\n ],\n null,\n false,\n 2713940738\n )\n })\n ],\n 1\n )\n : _vm._e(),\n _c(\n \"div\",\n { staticStyle: { \"margin-top\": \"15px\" } },\n [\n _vm.coordinateForm.coordinateClose == true\n ? _c(\n \"el-button\",\n {\n staticStyle: { width: \"150px\" },\n attrs: { type: \"primary\", size: \"small\" },\n on: {\n click: function($event) {\n return _vm.handleagain()\n }\n }\n },\n [_vm._v(\"保存\")]\n )\n : _vm._e()\n ],\n 1\n )\n ],\n 1\n )\n ],\n 1\n )\n ]),\n _c(\"div\", { staticClass: \"dataBoard\" }, [\n _c(\n \"div\",\n { staticClass: \"section\" },\n [\n _c(\"p\", { staticClass: \"board-title\" }, [_vm._v(\"车道识别配置\")]),\n _vm._m(0),\n _c(\n \"el-form\",\n {\n ref: \"form\",\n attrs: { model: _vm.laneform, \"label-width\": \"350px\" }\n },\n [\n _c(\n \"el-form-item\",\n {\n attrs: {\n label: \"车道识别配置开关:\",\n \"label-width\": \"150px\"\n }\n },\n [\n _c(\"el-switch\", {\n model: {\n value: _vm.laneform.laneClose,\n callback: function($$v) {\n _vm.$set(_vm.laneform, \"laneClose\", $$v)\n },\n expression: \"laneform.laneClose\"\n }\n })\n ],\n 1\n ),\n _vm.laneform.laneClose == true\n ? _c(\n \"el-form-item\",\n {\n staticStyle: { width: \"300px\" },\n attrs: { label: \"各车道中心线(区域检测器):\" }\n },\n [\n _c(\"el-switch\", {\n model: {\n value: _vm.laneform.areaDetector,\n callback: function($$v) {\n _vm.$set(_vm.laneform, \"areaDetector\", $$v)\n },\n expression: \"laneform.areaDetector\"\n }\n })\n ],\n 1\n )\n : _vm._e(),\n _vm.laneform.laneClose == true\n ? _c(\n \"el-form-item\",\n {\n staticStyle: { width: \"300px\" },\n attrs: {\n label: \"自动识别各车道中心点坐标(断面检测器):\"\n }\n },\n [\n _c(\"el-switch\", {\n model: {\n value: _vm.laneform.sectionDetector,\n callback: function($$v) {\n _vm.$set(_vm.laneform, \"sectionDetector\", $$v)\n },\n expression: \"laneform.sectionDetector\"\n }\n })\n ],\n 1\n )\n : _vm._e(),\n _vm.laneform.laneClose == true\n ? _c(\n \"el-button\",\n {\n staticStyle: { width: \"150px\" },\n attrs: { type: \"primary\", size: \"small\" },\n on: {\n click: function($event) {\n return _vm.handleagain()\n }\n }\n },\n [_vm._v(\"保存\")]\n )\n : _vm._e()\n ],\n 1\n )\n ],\n 1\n )\n ]),\n _c(\"div\", { staticClass: \"dataBoard\" }, [\n _c(\n \"div\",\n { staticClass: \"section\" },\n [\n _c(\"p\", { staticClass: \"board-title\" }, [_vm._v(\"识别区域\")]),\n _vm._m(1),\n _c(\n \"el-form\",\n {\n ref: \"form\",\n attrs: {\n model: _vm.identificationAreaform,\n \"label-width\": \"140px\"\n }\n },\n [\n _c(\n \"el-form-item\",\n {\n staticStyle: { width: \"250px\" },\n attrs: { label: \"识别区域开关\" }\n },\n [\n _c(\"el-switch\", {\n model: {\n value:\n _vm.identificationAreaform.identificationAreaClose,\n callback: function($$v) {\n _vm.$set(\n _vm.identificationAreaform,\n \"identificationAreaClose\",\n $$v\n )\n },\n expression:\n \"identificationAreaform.identificationAreaClose\"\n }\n })\n ],\n 1\n ),\n _vm.identificationAreaform.identificationAreaClose == true\n ? _c(\n \"el-button\",\n {\n staticStyle: { width: \"150px\" },\n attrs: { type: \"primary\", size: \"small\" },\n on: {\n click: function($event) {\n return _vm.handleagain()\n }\n }\n },\n [_vm._v(\"保存\")]\n )\n : _vm._e()\n ],\n 1\n )\n ],\n 1\n )\n ]),\n _c(\"div\", { staticClass: \"dataBoard\" }, [\n _c(\n \"div\",\n { staticClass: \"section\" },\n [\n _c(\"p\", { staticClass: \"board-title\" }, [_vm._v(\"轨迹平滑\")]),\n _vm._m(2),\n _c(\n \"el-form\",\n {\n ref: \"form\",\n attrs: {\n model: _vm.trajectorySmoothingform,\n \"label-width\": \"140px\"\n }\n },\n [\n _c(\n \"el-form-item\",\n {\n staticStyle: { width: \"250px\" },\n attrs: { label: \"轨迹平滑开关\" }\n },\n [\n _c(\"el-switch\", {\n model: {\n value:\n _vm.trajectorySmoothingform.trajectorySmoothingClose,\n callback: function($$v) {\n _vm.$set(\n _vm.trajectorySmoothingform,\n \"trajectorySmoothingClose\",\n $$v\n )\n },\n expression:\n \"trajectorySmoothingform.trajectorySmoothingClose\"\n }\n })\n ],\n 1\n ),\n _vm.trajectorySmoothingform.trajectorySmoothingClose == true\n ? _c(\n \"el-form-item\",\n {\n staticStyle: { width: \"250px\" },\n attrs: { label: \"预测滤波时间\" }\n },\n [\n _c(\"el-input-number\", {\n attrs: {\n min: 2000,\n max: 3000,\n label: \"预测滤波时间\"\n },\n on: { change: _vm.handleChange },\n model: {\n value: _vm.trajectorySmoothingform.time,\n callback: function($$v) {\n _vm.$set(_vm.trajectorySmoothingform, \"time\", $$v)\n },\n expression: \"trajectorySmoothingform.time\"\n }\n })\n ],\n 1\n )\n : _vm._e(),\n _vm.trajectorySmoothingform.trajectorySmoothingClose == true\n ? _c(\n \"el-button\",\n {\n staticStyle: { width: \"150px\" },\n attrs: { type: \"primary\", size: \"small\" },\n on: {\n click: function($event) {\n return _vm.handleagain()\n }\n }\n },\n [_vm._v(\"保存\")]\n )\n : _vm._e()\n ],\n 1\n )\n ],\n 1\n )\n ]),\n _c(\"div\", { staticClass: \"dataBoard\" }, [\n _c(\n \"div\",\n { staticClass: \"section\" },\n [\n _c(\"p\", { staticClass: \"board-title\" }, [_vm._v(\"车牌识别\")]),\n _vm._m(3),\n _c(\n \"el-form\",\n {\n ref: \"form\",\n attrs: { model: _vm.licensePlateform, \"label-width\": \"140px\" }\n },\n [\n _c(\n \"el-form-item\",\n {\n staticStyle: { width: \"250px\" },\n attrs: { label: \"车牌识别开关\" }\n },\n [\n _c(\"el-switch\", {\n model: {\n value: _vm.licensePlateform.licensePlateClose,\n callback: function($$v) {\n _vm.$set(\n _vm.licensePlateform,\n \"licensePlateClose\",\n $$v\n )\n },\n expression: \"licensePlateform.licensePlateClose\"\n }\n })\n ],\n 1\n ),\n _vm.licensePlateform.licensePlateClose == true\n ? _c(\n \"el-table\",\n {\n attrs: { border: \"\", data: _vm.licensePlateTableData }\n },\n [\n _c(\"el-table-column\", {\n attrs: {\n prop: \"sectionPlate\",\n label: \"断面号牌\",\n align: \"center\"\n },\n scopedSlots: _vm._u(\n [\n {\n key: \"default\",\n fn: function(scope) {\n return [\n scope.$index === 0\n ? _c(\"el-input\", {\n attrs: {\n maxlength: \"30\",\n placeholder: \"Required\"\n },\n model: {\n value: scope.row.sectionPlate,\n callback: function($$v) {\n _vm.$set(\n scope.row,\n \"sectionPlate\",\n $$v\n )\n },\n expression: \"scope.row.sectionPlate\"\n }\n })\n : _c(\"span\", {\n domProps: {\n textContent: _vm._s(\n scope.row.sectionPlate\n )\n }\n })\n ]\n }\n }\n ],\n null,\n false,\n 942623791\n )\n }),\n _c(\"el-table-column\", {\n attrs: {\n prop: \"setAssociation\",\n label: \"断面设置关联\",\n align: \"center\"\n },\n scopedSlots: _vm._u(\n [\n {\n key: \"default\",\n fn: function(scope) {\n return [\n scope.row.isEdit\n ? _c(\"el-input\", {\n attrs: {\n maxlength: \"20\",\n placeholder: \"Required\"\n },\n model: {\n value: scope.row.setAssociation,\n callback: function($$v) {\n _vm.$set(\n scope.row,\n \"setAssociation\",\n $$v\n )\n },\n expression:\n \"scope.row.setAssociation\"\n }\n })\n : _c(\"span\", {\n domProps: {\n textContent: _vm._s(\n scope.row.setAssociation\n )\n }\n })\n ]\n }\n }\n ],\n null,\n false,\n 95706651\n )\n }),\n _c(\"el-table-column\", {\n attrs: {\n prop: \"thresholdValue\",\n label: \"车牌匹配阈值\",\n align: \"center\"\n },\n scopedSlots: _vm._u(\n [\n {\n key: \"default\",\n fn: function(scope) {\n return [\n scope.row.isEdit\n ? _c(\"el-input\", {\n attrs: {\n maxlength: \"20\",\n placeholder: \"Required\"\n },\n model: {\n value: scope.row.thresholdValue,\n callback: function($$v) {\n _vm.$set(\n scope.row,\n \"thresholdValue\",\n $$v\n )\n },\n expression:\n \"scope.row.thresholdValue\"\n }\n })\n : _c(\"span\", {\n domProps: {\n textContent: _vm._s(\n scope.row.thresholdValue\n )\n }\n })\n ]\n }\n }\n ],\n null,\n false,\n 4003674747\n )\n }),\n _c(\"el-table-column\", {\n attrs: {\n label: \"操作\",\n align: \"center\",\n \"class-name\": \"small-padding fixed-width\"\n },\n scopedSlots: _vm._u(\n [\n {\n key: \"default\",\n fn: function(scope) {\n return [\n scope.$index === 0\n ? _c(\n \"el-button\",\n {\n staticStyle: { color: \"#2090c1\" },\n attrs: {\n size: \"mini\",\n type: \"text\"\n },\n on: {\n click: function($event) {\n return _vm.handleAdd(scope.row)\n }\n }\n },\n [_vm._v(\"Add\\n \")]\n )\n : _vm._e(),\n scope.$index !== 0\n ? _c(\n \"el-button\",\n {\n staticStyle: { color: \"#2090c1\" },\n attrs: {\n size: \"mini\",\n type: \"text\"\n },\n on: {\n click: function($event) {\n return _vm.handleUpdate(\n scope.row\n )\n }\n }\n },\n [\n _vm._v(\n _vm._s(\n scope.row.isEdit\n ? \"Apply\"\n : \"Edit\"\n ) + \"\\n \"\n )\n ]\n )\n : _vm._e(),\n scope.$index !== 0\n ? _c(\n \"el-button\",\n {\n staticStyle: { color: \"#F56C6C\" },\n attrs: {\n size: \"mini\",\n type: \"text\"\n },\n on: {\n click: function($event) {\n return _vm.handleDelete(\n scope.row\n )\n }\n }\n },\n [\n _vm._v(\n _vm._s(\n scope.row.isEdit\n ? \"Cancel\"\n : \"Delete\"\n ) + \"\\n \"\n )\n ]\n )\n : _vm._e()\n ]\n }\n }\n ],\n null,\n false,\n 2713940738\n )\n })\n ],\n 1\n )\n : _vm._e(),\n _c(\n \"div\",\n { staticStyle: { \"margin-top\": \"15px\" } },\n [\n _vm.licensePlateform.licensePlateClose == true\n ? _c(\n \"el-button\",\n {\n staticStyle: { width: \"150px\" },\n attrs: { type: \"primary\", size: \"small\" },\n on: {\n click: function($event) {\n return _vm.handleagain()\n }\n }\n },\n [_vm._v(\"保存\")]\n )\n : _vm._e()\n ],\n 1\n )\n ],\n 1\n )\n ],\n 1\n )\n ]),\n _c(\"div\", { staticClass: \"dataBoard\" }, [\n _c(\n \"div\",\n { staticClass: \"section\" },\n [\n _c(\"p\", { staticClass: \"board-title\" }, [_vm._v(\"停车状态\")]),\n _vm._m(4),\n _c(\n \"el-form\",\n {\n staticClass: \"demo-form-inline\",\n attrs: {\n inline: true,\n model: _vm.stopStateform,\n \"label-width\": \"140px\"\n }\n },\n [\n _c(\n \"el-form-item\",\n { attrs: { label: \"位移:\" } },\n [\n _c(\"el-input-number\", {\n attrs: { min: 2000, max: 3000, label: \"位移\" },\n on: { change: _vm.handleChange },\n model: {\n value: _vm.stopStateform.displacement,\n callback: function($$v) {\n _vm.$set(_vm.stopStateform, \"displacement\", $$v)\n },\n expression: \"stopStateform.displacement\"\n }\n })\n ],\n 1\n ),\n _c(\n \"el-form-item\",\n { attrs: { label: \"速度:\" } },\n [\n _c(\"el-input-number\", {\n attrs: { min: 2000, max: 3000, label: \"速度\" },\n on: { change: _vm.handleChange },\n model: {\n value: _vm.stopStateform.speed,\n callback: function($$v) {\n _vm.$set(_vm.stopStateform, \"speed\", $$v)\n },\n expression: \"stopStateform.speed\"\n }\n })\n ],\n 1\n ),\n _c(\n \"el-form-item\",\n { attrs: { label: \"加速度:\" } },\n [\n _c(\"el-input-number\", {\n attrs: { min: 2000, max: 3000, label: \"加速度\" },\n on: { change: _vm.handleChange },\n model: {\n value: _vm.stopStateform.acceleration,\n callback: function($$v) {\n _vm.$set(_vm.stopStateform, \"acceleration\", $$v)\n },\n expression: \"stopStateform.acceleration\"\n }\n })\n ],\n 1\n )\n ],\n 1\n ),\n _c(\n \"div\",\n { staticStyle: { \"margin-top\": \"15px\" } },\n [\n _c(\n \"el-button\",\n {\n staticStyle: { width: \"150px\" },\n attrs: { type: \"primary\", size: \"small\" },\n on: {\n click: function($event) {\n return _vm.handleagain()\n }\n }\n },\n [_vm._v(\"保存\")]\n )\n ],\n 1\n )\n ],\n 1\n )\n ]),\n _c(\"div\", { staticClass: \"dataBoard\" }, [\n _c(\n \"div\",\n { staticClass: \"section\" },\n [\n _c(\"p\", { staticClass: \"board-title\" }, [_vm._v(\"通信设置\")]),\n _c(\n \"el-form\",\n {\n staticClass: \"demo-form-inline\",\n attrs: { model: _vm.communicationform, \"label-width\": \"200px\" }\n },\n [\n _c(\n \"el-form-item\",\n {\n staticStyle: { \"margin-bottom\": \"20px\" },\n attrs: { label: \"类型:\" }\n },\n [\n _c(\n \"el-radio-group\",\n {\n model: {\n value: _vm.communicationform.type,\n callback: function($$v) {\n _vm.$set(_vm.communicationform, \"type\", $$v)\n },\n expression: \"communicationform.type\"\n }\n },\n [\n _c(\"el-radio\", {\n attrs: { label: \"快速-用于高带宽连接\" }\n }),\n _c(\"el-radio\", {\n attrs: { label: \"平衡-适用于大多数连接\" }\n }),\n _c(\"el-radio\", {\n attrs: { label: \"慢速-用于低带宽连接\" }\n }),\n _c(\"el-radio\", { attrs: { label: \"自定义\" } })\n ],\n 1\n )\n ],\n 1\n ),\n _vm.communicationform.type == \"自定义\"\n ? _c(\n \"el-form-item\",\n { attrs: { label: \"请求轻型有效载荷:\" } },\n [\n _c(\"el-input\", {\n staticStyle: {\n width: \"200px\",\n \"margin-bottom\": \"20px\"\n },\n model: {\n value: _vm.communicationform.name,\n callback: function($$v) {\n _vm.$set(_vm.communicationform, \"name\", $$v)\n },\n expression: \"communicationform.name\"\n }\n }),\n _vm._v(\"ms\\n \")\n ],\n 1\n )\n : _vm._e(),\n _vm.communicationform.type == \"自定义\"\n ? _c(\n \"el-form-item\",\n { attrs: { label: \"请求重型有效载荷:\" } },\n [\n _c(\"el-input\", {\n staticStyle: {\n width: \"200px\",\n \"margin-bottom\": \"20px\"\n },\n model: {\n value: _vm.communicationform.name,\n callback: function($$v) {\n _vm.$set(_vm.communicationform, \"name\", $$v)\n },\n expression: \"communicationform.name\"\n }\n }),\n _vm._v(\"ms\\n \")\n ],\n 1\n )\n : _vm._e(),\n _vm.communicationform.type == \"自定义\"\n ? _c(\n \"el-form-item\",\n { attrs: { label: \"FPS分配器:\" } },\n [\n _c(\"el-input\", {\n staticStyle: {\n width: \"200px\",\n \"margin-bottom\": \"20px\"\n },\n model: {\n value: _vm.communicationform.name,\n callback: function($$v) {\n _vm.$set(_vm.communicationform, \"name\", $$v)\n },\n expression: \"communicationform.name\"\n }\n })\n ],\n 1\n )\n : _vm._e(),\n _vm.communicationform.type == \"自定义\"\n ? _c(\n \"el-form-item\",\n { attrs: { label: \"框架决议:\" } },\n [\n _c(\n \"el-select\",\n {\n staticStyle: { \"margin-bottom\": \"20px\" },\n attrs: { placeholder: \"框架决议\" },\n model: {\n value: _vm.communicationform.region,\n callback: function($$v) {\n _vm.$set(_vm.communicationform, \"region\", $$v)\n },\n expression: \"communicationform.region\"\n }\n },\n [\n _c(\"el-option\", {\n attrs: { label: \"自动\", value: \"shanghai\" }\n }),\n _c(\"el-option\", {\n attrs: { label: \"区域二\", value: \"beijing\" }\n })\n ],\n 1\n )\n ],\n 1\n )\n : _vm._e(),\n _vm.communicationform.type == \"自定义\"\n ? _c(\n \"el-form-item\",\n { attrs: { label: \"压缩格式:\" } },\n [\n _c(\n \"el-select\",\n {\n staticStyle: { \"margin-bottom\": \"20px\" },\n attrs: { placeholder: \"压缩格式\" },\n model: {\n value: _vm.communicationform.region,\n callback: function($$v) {\n _vm.$set(_vm.communicationform, \"region\", $$v)\n },\n expression: \"communicationform.region\"\n }\n },\n [\n _c(\"el-option\", {\n attrs: { label: \"JPG\", value: \"shanghai\" }\n }),\n _c(\"el-option\", {\n attrs: { label: \"区域二\", value: \"beijing\" }\n })\n ],\n 1\n )\n ],\n 1\n )\n : _vm._e(),\n _vm.communicationform.type == \"自定义\"\n ? _c(\n \"el-form-item\",\n { attrs: { label: \"压缩率:\" } },\n [\n _c(\"el-input\", {\n staticStyle: { width: \"200px\" },\n model: {\n value: _vm.communicationform.name,\n callback: function($$v) {\n _vm.$set(_vm.communicationform, \"name\", $$v)\n },\n expression: \"communicationform.name\"\n }\n })\n ],\n 1\n )\n : _vm._e(),\n _c(\n \"el-button\",\n {\n staticStyle: { width: \"150px\" },\n attrs: { type: \"primary\", size: \"small\" },\n on: {\n click: function($event) {\n return _vm.handleagain()\n }\n }\n },\n [_vm._v(\"保存\")]\n )\n ],\n 1\n )\n ],\n 1\n )\n ])\n ])\n ])\n}\nvar staticRenderFns = [\n function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\"div\", { staticClass: \"warning\" }, [\n _c(\"i\", {\n staticClass: \"el-icon-warning\",\n staticStyle: { color: \"#409EFF\", margin: \"0 3px 0 10px\" }\n }),\n _vm._v(\"在视频/动图上设置进口出口道\\n \")\n ])\n },\n function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\"div\", { staticClass: \"warning\" }, [\n _c(\"i\", {\n staticClass: \"el-icon-warning\",\n staticStyle: { color: \"#409EFF\", margin: \"0 3px 0 10px\" }\n }),\n _vm._v(\n \"您可以自定义进行视频分析的区域,区域之外的部分将被忽略。此功能可以帮助您检测和跟踪高分辨率视频特定部分的较小对象,实现检测器的数字变焦功能。\\n \"\n )\n ])\n },\n function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\"div\", { staticClass: \"warning\" }, [\n _c(\"i\", {\n staticClass: \"el-icon-warning\",\n staticStyle: { color: \"#409EFF\", margin: \"0 3px 0 10px\" }\n }),\n _vm._v(\n \"为轨迹预测滤波算法定义细化轨迹的时间窗口。数值越小,延迟越小,适用于实时性要求高的场景;数值越大,轨迹的连续性越好,目标即使越过一些障碍也不容易丢失。\\n \"\n )\n ])\n },\n function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\"div\", { staticClass: \"warning\" }, [\n _c(\"i\", {\n staticClass: \"el-icon-warning\",\n staticStyle: { color: \"#409EFF\", margin: \"0 3px 0 10px\" }\n }),\n _vm._v(\n \"车牌识别开关。牌照信息表示与目标属性。(断面号牌,与断面设置关联)\\n \"\n )\n ])\n },\n function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\"div\", { staticClass: \"warning\" }, [\n _c(\"i\", {\n staticClass: \"el-icon-warning\",\n staticStyle: { color: \"#409EFF\", margin: \"0 3px 0 10px\" }\n }),\n _vm._v(\"更新频率:更新频率可以根据链路带宽进行设置。\\n \")\n ])\n }\n]\nrender._withStripped = true\n\nexport { render, staticRenderFns }"]} \ No newline at end of file +{"remainingRequest":"D:\\视频边缘1215\\TransFlow\\node_modules\\vue-loader\\lib\\loaders\\templateLoader.js??vue-loader-options!D:\\视频边缘1215\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js??ref--0-0!D:\\视频边缘1215\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\视频边缘1215\\TransFlow\\src\\views\\bounced\\analysisConfiguration.vue?vue&type=template&id=fd3d0d46&scoped=true&","dependencies":[{"path":"D:\\视频边缘1215\\TransFlow\\src\\views\\bounced\\analysisConfiguration.vue","mtime":1672809677780},{"path":"D:\\视频边缘1215\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1671074740928},{"path":"D:\\视频边缘1215\\TransFlow\\node_modules\\vue-loader\\lib\\loaders\\templateLoader.js","mtime":1671074747916},{"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":["var render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\"div\", [\n _c(\"div\", [\n _c(\"div\", { staticClass: \"top\" }, [\n _c(\n \"div\",\n { staticClass: \"section\" },\n [\n _c(\n \"el-form\",\n {\n staticClass: \"demo-form-inline\",\n attrs: {\n inline: true,\n model: _vm.formInline,\n \"label-width\": \"140px\"\n }\n },\n [\n _c(\"div\", { staticClass: \"warning\" }, [\n _c(\"i\", {\n staticClass: \"el-icon-warning\",\n staticStyle: { color: \"#409EFF\", margin: \"0 3px 0 10px\" }\n }),\n _vm._v(\n \"自动保存可以使系统在异常关闭后自动恢复。在这种情况下,缓存数据将会丢失,但所有存储数据将被保存。\\n \"\n )\n ]),\n _c(\n \"el-form-item\",\n { attrs: { label: \"自动保存:\" } },\n [\n _c(\"el-switch\", {\n model: {\n value: _vm.formInline.user,\n callback: function($$v) {\n _vm.$set(_vm.formInline, \"user\", $$v)\n },\n expression: \"formInline.user\"\n }\n })\n ],\n 1\n ),\n _c(\n \"el-form-item\",\n { attrs: { label: \"时间间隔:\" } },\n [\n _c(\n \"el-select\",\n {\n attrs: { placeholder: \"时间间隔\" },\n model: {\n value: _vm.formInline.region,\n callback: function($$v) {\n _vm.$set(_vm.formInline, \"region\", $$v)\n },\n expression: \"formInline.region\"\n }\n },\n [\n _c(\"el-option\", {\n attrs: { label: \"20s\", value: \"shanghai\" }\n }),\n _c(\"el-option\", {\n attrs: { label: \"30s\", value: \"beijing\" }\n })\n ],\n 1\n )\n ],\n 1\n )\n ],\n 1\n ),\n _c(\n \"el-form\",\n {\n ref: \"form\",\n attrs: { model: _vm.sizeForm, \"label-width\": \"140px\" }\n },\n [\n _c(\"div\", { staticClass: \"warning\" }, [\n _c(\"i\", {\n staticClass: \"el-icon-warning\",\n staticStyle: { color: \"#409EFF\", margin: \"0 3px 0 10px\" }\n }),\n _vm._v(\"重置分析将删除所有累计的轨迹数据\\n \")\n ]),\n _c(\n \"el-button\",\n {\n staticStyle: { width: \"150px\" },\n attrs: { type: \"primary\", size: \"small\" },\n on: {\n click: function($event) {\n return _vm.handleagain()\n }\n }\n },\n [_vm._v(\"重置\")]\n ),\n _c(\"div\", { staticClass: \"warning\" }, [\n _c(\"i\", {\n staticClass: \"el-icon-warning\",\n staticStyle: { color: \"#409EFF\", margin: \"0 3px 0 10px\" }\n }),\n _vm._v(\"在 WGS84 坐标系中输入相机位置\\n \")\n ]),\n _c(\n \"el-form-item\",\n { attrs: { label: \"相机位置:\" } },\n [\n _c(\"el-input\", {\n staticStyle: { width: \"150px\" },\n attrs: { placeholder: \"经度\" },\n model: {\n value: _vm.sizeForm.name,\n callback: function($$v) {\n _vm.$set(_vm.sizeForm, \"name\", $$v)\n },\n expression: \"sizeForm.name\"\n }\n }),\n _c(\"el-input\", {\n staticStyle: { width: \"150px\", \"margin-left\": \"20px\" },\n attrs: { placeholder: \"纬度\" },\n model: {\n value: _vm.sizeForm.name,\n callback: function($$v) {\n _vm.$set(_vm.sizeForm, \"name\", $$v)\n },\n expression: \"sizeForm.name\"\n }\n })\n ],\n 1\n )\n ],\n 1\n )\n ],\n 1\n )\n ]),\n _c(\"div\", { staticClass: \"dataBoard\" }, [\n _c(\n \"div\",\n { staticClass: \"section\" },\n [\n _c(\"p\", { staticClass: \"board-title\" }, [_vm._v(\"坐标转换\")]),\n _c(\n \"el-form\",\n {\n ref: \"form\",\n attrs: { model: _vm.coordinateForm, \"label-width\": \"140px\" }\n },\n [\n _c(\n \"el-form-item\",\n { attrs: { label: \"坐标转换开关:\" } },\n [\n _c(\"el-switch\", {\n model: {\n value: _vm.coordinateForm.coordinateClose,\n callback: function($$v) {\n _vm.$set(_vm.coordinateForm, \"coordinateClose\", $$v)\n },\n expression: \"coordinateForm.coordinateClose\"\n }\n })\n ],\n 1\n ),\n _vm.coordinateForm.coordinateClose == true\n ? _c(\n \"el-form-item\",\n { attrs: { label: \"模型:\" } },\n [\n _c(\n \"el-radio-group\",\n {\n model: {\n value: _vm.coordinateForm.model,\n callback: function($$v) {\n _vm.$set(_vm.coordinateForm, \"model\", $$v)\n },\n expression: \"coordinateForm.model\"\n }\n },\n [\n _c(\"el-radio\", {\n attrs: { label: \"Georeferencing\" }\n }),\n _c(\"el-radio\", { attrs: { label: \"其他\" } })\n ],\n 1\n )\n ],\n 1\n )\n : _vm._e(),\n _vm.coordinateForm.coordinateClose == true\n ? _c(\n \"el-form-item\",\n { attrs: { label: \"坐标转换:\" } },\n [\n _c(\n \"el-radio-group\",\n {\n model: {\n value:\n _vm.coordinateForm.coordinateTransformation,\n callback: function($$v) {\n _vm.$set(\n _vm.coordinateForm,\n \"coordinateTransformation\",\n $$v\n )\n },\n expression:\n \"coordinateForm.coordinateTransformation\"\n }\n },\n [\n _c(\"el-radio\", { attrs: { label: \"84坐标系\" } }),\n _c(\"el-radio\", { attrs: { label: \"其他\" } })\n ],\n 1\n )\n ],\n 1\n )\n : _vm._e(),\n _c(\"div\", { staticStyle: { width: \"100%\", height: \"300px\" } }, [\n _c(\"iframe\", {\n staticStyle: { width: \"100%\", height: \"100%\" },\n attrs: {\n id: \"mapModuleTop\",\n src: \"./VideoWeb/index.html\",\n frameborder: \"0\"\n },\n on: { load: _vm.load }\n })\n ]),\n _vm.coordinateForm.coordinateClose == true\n ? _c(\n \"el-table\",\n { attrs: { border: \"\", data: _vm.coordinateTableData } },\n [\n _c(\"el-table-column\", {\n attrs: {\n prop: \"name\",\n label: \"点名称\",\n align: \"center\"\n },\n scopedSlots: _vm._u(\n [\n {\n key: \"default\",\n fn: function(scope) {\n return [\n scope.$index === 0\n ? _c(\"el-input\", {\n attrs: {\n maxlength: \"30\",\n placeholder: \"Required\"\n },\n model: {\n value: scope.row.name,\n callback: function($$v) {\n _vm.$set(scope.row, \"name\", $$v)\n },\n expression: \"scope.row.name\"\n }\n })\n : _c(\"span\", {\n domProps: {\n textContent: _vm._s(scope.row.name)\n }\n })\n ]\n }\n }\n ],\n null,\n false,\n 1861943855\n )\n }),\n _c(\"el-table-column\", {\n attrs: {\n prop: \"longitude\",\n label: \"经度\",\n align: \"center\"\n },\n scopedSlots: _vm._u(\n [\n {\n key: \"default\",\n fn: function(scope) {\n return [\n scope.row.isEdit\n ? _c(\"el-input\", {\n attrs: {\n maxlength: \"20\",\n placeholder: \"Required\"\n },\n model: {\n value: scope.row.longitude,\n callback: function($$v) {\n _vm.$set(\n scope.row,\n \"longitude\",\n $$v\n )\n },\n expression: \"scope.row.longitude\"\n }\n })\n : _c(\"span\", {\n domProps: {\n textContent: _vm._s(\n scope.row.longitude\n )\n }\n })\n ]\n }\n }\n ],\n null,\n false,\n 452909755\n )\n }),\n _c(\"el-table-column\", {\n attrs: {\n prop: \"latitude\",\n label: \"纬度\",\n align: \"center\"\n },\n scopedSlots: _vm._u(\n [\n {\n key: \"default\",\n fn: function(scope) {\n return [\n scope.row.isEdit\n ? _c(\"el-input\", {\n attrs: {\n maxlength: \"20\",\n placeholder: \"Required\"\n },\n model: {\n value: scope.row.latitude,\n callback: function($$v) {\n _vm.$set(\n scope.row,\n \"latitude\",\n $$v\n )\n },\n expression: \"scope.row.latitude\"\n }\n })\n : _c(\"span\", {\n domProps: {\n textContent: _vm._s(\n scope.row.latitude\n )\n }\n })\n ]\n }\n }\n ],\n null,\n false,\n 2766622075\n )\n }),\n _c(\"el-table-column\", {\n attrs: {\n label: \"操作\",\n align: \"center\",\n \"class-name\": \"small-padding fixed-width\"\n },\n scopedSlots: _vm._u(\n [\n {\n key: \"default\",\n fn: function(scope) {\n return [\n scope.$index === 0\n ? _c(\n \"el-button\",\n {\n staticStyle: { color: \"#2090c1\" },\n attrs: {\n size: \"mini\",\n type: \"text\"\n },\n on: {\n click: function($event) {\n return _vm.handleAdd(scope.row)\n }\n }\n },\n [_vm._v(\"Add\\n \")]\n )\n : _vm._e(),\n scope.$index !== 0\n ? _c(\n \"el-button\",\n {\n staticStyle: { color: \"#2090c1\" },\n attrs: {\n size: \"mini\",\n type: \"text\"\n },\n on: {\n click: function($event) {\n return _vm.handleUpdate(\n scope.row\n )\n }\n }\n },\n [\n _vm._v(\n _vm._s(\n scope.row.isEdit\n ? \"Apply\"\n : \"Edit\"\n ) + \"\\n \"\n )\n ]\n )\n : _vm._e(),\n scope.$index !== 0\n ? _c(\n \"el-button\",\n {\n staticStyle: { color: \"#F56C6C\" },\n attrs: {\n size: \"mini\",\n type: \"text\"\n },\n on: {\n click: function($event) {\n return _vm.handleDelete(\n scope.row\n )\n }\n }\n },\n [\n _vm._v(\n _vm._s(\n scope.row.isEdit\n ? \"Cancel\"\n : \"Delete\"\n ) + \"\\n \"\n )\n ]\n )\n : _vm._e()\n ]\n }\n }\n ],\n null,\n false,\n 2713940738\n )\n })\n ],\n 1\n )\n : _vm._e(),\n _c(\n \"div\",\n { staticStyle: { \"margin-top\": \"15px\" } },\n [\n _vm.coordinateForm.coordinateClose == true\n ? _c(\n \"el-button\",\n {\n staticStyle: { width: \"150px\" },\n attrs: { type: \"primary\", size: \"small\" },\n on: {\n click: function($event) {\n return _vm.handleagain()\n }\n }\n },\n [_vm._v(\"保存\")]\n )\n : _vm._e()\n ],\n 1\n )\n ],\n 1\n )\n ],\n 1\n )\n ]),\n _c(\"div\", { staticClass: \"dataBoard\" }, [\n _c(\n \"div\",\n { staticClass: \"section\" },\n [\n _c(\"p\", { staticClass: \"board-title\" }, [_vm._v(\"车道识别配置\")]),\n _vm._m(0),\n _c(\n \"el-form\",\n {\n ref: \"form\",\n attrs: { model: _vm.laneform, \"label-width\": \"350px\" }\n },\n [\n _c(\n \"el-form-item\",\n {\n attrs: {\n label: \"车道识别配置开关:\",\n \"label-width\": \"150px\"\n }\n },\n [\n _c(\"el-switch\", {\n model: {\n value: _vm.laneform.laneClose,\n callback: function($$v) {\n _vm.$set(_vm.laneform, \"laneClose\", $$v)\n },\n expression: \"laneform.laneClose\"\n }\n })\n ],\n 1\n ),\n _vm.laneform.laneClose == true\n ? _c(\n \"el-form-item\",\n {\n staticStyle: { width: \"300px\" },\n attrs: { label: \"各车道中心线(区域检测器):\" }\n },\n [\n _c(\"el-switch\", {\n model: {\n value: _vm.laneform.areaDetector,\n callback: function($$v) {\n _vm.$set(_vm.laneform, \"areaDetector\", $$v)\n },\n expression: \"laneform.areaDetector\"\n }\n })\n ],\n 1\n )\n : _vm._e(),\n _vm.laneform.laneClose == true\n ? _c(\n \"el-form-item\",\n {\n staticStyle: { width: \"300px\" },\n attrs: {\n label: \"自动识别各车道中心点坐标(断面检测器):\"\n }\n },\n [\n _c(\"el-switch\", {\n model: {\n value: _vm.laneform.sectionDetector,\n callback: function($$v) {\n _vm.$set(_vm.laneform, \"sectionDetector\", $$v)\n },\n expression: \"laneform.sectionDetector\"\n }\n })\n ],\n 1\n )\n : _vm._e(),\n _vm.laneform.laneClose == true\n ? _c(\n \"el-button\",\n {\n staticStyle: { width: \"150px\" },\n attrs: { type: \"primary\", size: \"small\" },\n on: {\n click: function($event) {\n return _vm.handleagain()\n }\n }\n },\n [_vm._v(\"保存\")]\n )\n : _vm._e()\n ],\n 1\n )\n ],\n 1\n )\n ]),\n _c(\"div\", { staticClass: \"dataBoard\" }, [\n _c(\n \"div\",\n { staticClass: \"section\" },\n [\n _c(\"p\", { staticClass: \"board-title\" }, [_vm._v(\"识别区域\")]),\n _vm._m(1),\n _c(\n \"el-form\",\n {\n ref: \"form\",\n attrs: {\n model: _vm.identificationAreaform,\n \"label-width\": \"140px\"\n }\n },\n [\n _c(\n \"el-form-item\",\n {\n staticStyle: { width: \"250px\" },\n attrs: { label: \"识别区域开关\" }\n },\n [\n _c(\"el-switch\", {\n model: {\n value:\n _vm.identificationAreaform.identificationAreaClose,\n callback: function($$v) {\n _vm.$set(\n _vm.identificationAreaform,\n \"identificationAreaClose\",\n $$v\n )\n },\n expression:\n \"identificationAreaform.identificationAreaClose\"\n }\n })\n ],\n 1\n ),\n _vm.identificationAreaform.identificationAreaClose == true\n ? _c(\n \"el-button\",\n {\n staticStyle: { width: \"150px\" },\n attrs: { type: \"primary\", size: \"small\" },\n on: {\n click: function($event) {\n return _vm.handleagain()\n }\n }\n },\n [_vm._v(\"保存\")]\n )\n : _vm._e()\n ],\n 1\n )\n ],\n 1\n )\n ]),\n _c(\"div\", { staticClass: \"dataBoard\" }, [\n _c(\n \"div\",\n { staticClass: \"section\" },\n [\n _c(\"p\", { staticClass: \"board-title\" }, [_vm._v(\"轨迹平滑\")]),\n _vm._m(2),\n _c(\n \"el-form\",\n {\n ref: \"form\",\n attrs: {\n model: _vm.trajectorySmoothingform,\n \"label-width\": \"140px\"\n }\n },\n [\n _c(\n \"el-form-item\",\n {\n staticStyle: { width: \"250px\" },\n attrs: { label: \"轨迹平滑开关\" }\n },\n [\n _c(\"el-switch\", {\n model: {\n value:\n _vm.trajectorySmoothingform.trajectorySmoothingClose,\n callback: function($$v) {\n _vm.$set(\n _vm.trajectorySmoothingform,\n \"trajectorySmoothingClose\",\n $$v\n )\n },\n expression:\n \"trajectorySmoothingform.trajectorySmoothingClose\"\n }\n })\n ],\n 1\n ),\n _vm.trajectorySmoothingform.trajectorySmoothingClose == true\n ? _c(\n \"el-form-item\",\n {\n staticStyle: { width: \"250px\" },\n attrs: { label: \"预测滤波时间\" }\n },\n [\n _c(\"el-input-number\", {\n attrs: {\n min: 2000,\n max: 3000,\n label: \"预测滤波时间\"\n },\n on: { change: _vm.handleChange },\n model: {\n value: _vm.trajectorySmoothingform.time,\n callback: function($$v) {\n _vm.$set(_vm.trajectorySmoothingform, \"time\", $$v)\n },\n expression: \"trajectorySmoothingform.time\"\n }\n })\n ],\n 1\n )\n : _vm._e(),\n _vm.trajectorySmoothingform.trajectorySmoothingClose == true\n ? _c(\n \"el-button\",\n {\n staticStyle: { width: \"150px\" },\n attrs: { type: \"primary\", size: \"small\" },\n on: {\n click: function($event) {\n return _vm.handleagain()\n }\n }\n },\n [_vm._v(\"保存\")]\n )\n : _vm._e()\n ],\n 1\n )\n ],\n 1\n )\n ]),\n _c(\"div\", { staticClass: \"dataBoard\" }, [\n _c(\n \"div\",\n { staticClass: \"section\" },\n [\n _c(\"p\", { staticClass: \"board-title\" }, [_vm._v(\"车牌识别\")]),\n _vm._m(3),\n _c(\n \"el-form\",\n {\n ref: \"form\",\n attrs: { model: _vm.licensePlateform, \"label-width\": \"140px\" }\n },\n [\n _c(\n \"el-form-item\",\n {\n staticStyle: { width: \"250px\" },\n attrs: { label: \"车牌识别开关\" }\n },\n [\n _c(\"el-switch\", {\n model: {\n value: _vm.licensePlateform.licensePlateClose,\n callback: function($$v) {\n _vm.$set(\n _vm.licensePlateform,\n \"licensePlateClose\",\n $$v\n )\n },\n expression: \"licensePlateform.licensePlateClose\"\n }\n })\n ],\n 1\n ),\n _vm.licensePlateform.licensePlateClose == true\n ? _c(\n \"el-table\",\n {\n attrs: { border: \"\", data: _vm.licensePlateTableData }\n },\n [\n _c(\"el-table-column\", {\n attrs: {\n prop: \"sectionPlate\",\n label: \"断面号牌\",\n align: \"center\"\n },\n scopedSlots: _vm._u(\n [\n {\n key: \"default\",\n fn: function(scope) {\n return [\n scope.$index === 0\n ? _c(\"el-input\", {\n attrs: {\n maxlength: \"30\",\n placeholder: \"Required\"\n },\n model: {\n value: scope.row.sectionPlate,\n callback: function($$v) {\n _vm.$set(\n scope.row,\n \"sectionPlate\",\n $$v\n )\n },\n expression: \"scope.row.sectionPlate\"\n }\n })\n : _c(\"span\", {\n domProps: {\n textContent: _vm._s(\n scope.row.sectionPlate\n )\n }\n })\n ]\n }\n }\n ],\n null,\n false,\n 942623791\n )\n }),\n _c(\"el-table-column\", {\n attrs: {\n prop: \"setAssociation\",\n label: \"断面设置关联\",\n align: \"center\"\n },\n scopedSlots: _vm._u(\n [\n {\n key: \"default\",\n fn: function(scope) {\n return [\n scope.row.isEdit\n ? _c(\"el-input\", {\n attrs: {\n maxlength: \"20\",\n placeholder: \"Required\"\n },\n model: {\n value: scope.row.setAssociation,\n callback: function($$v) {\n _vm.$set(\n scope.row,\n \"setAssociation\",\n $$v\n )\n },\n expression:\n \"scope.row.setAssociation\"\n }\n })\n : _c(\"span\", {\n domProps: {\n textContent: _vm._s(\n scope.row.setAssociation\n )\n }\n })\n ]\n }\n }\n ],\n null,\n false,\n 95706651\n )\n }),\n _c(\"el-table-column\", {\n attrs: {\n prop: \"thresholdValue\",\n label: \"车牌匹配阈值\",\n align: \"center\"\n },\n scopedSlots: _vm._u(\n [\n {\n key: \"default\",\n fn: function(scope) {\n return [\n scope.row.isEdit\n ? _c(\"el-input\", {\n attrs: {\n maxlength: \"20\",\n placeholder: \"Required\"\n },\n model: {\n value: scope.row.thresholdValue,\n callback: function($$v) {\n _vm.$set(\n scope.row,\n \"thresholdValue\",\n $$v\n )\n },\n expression:\n \"scope.row.thresholdValue\"\n }\n })\n : _c(\"span\", {\n domProps: {\n textContent: _vm._s(\n scope.row.thresholdValue\n )\n }\n })\n ]\n }\n }\n ],\n null,\n false,\n 4003674747\n )\n }),\n _c(\"el-table-column\", {\n attrs: {\n label: \"操作\",\n align: \"center\",\n \"class-name\": \"small-padding fixed-width\"\n },\n scopedSlots: _vm._u(\n [\n {\n key: \"default\",\n fn: function(scope) {\n return [\n scope.$index === 0\n ? _c(\n \"el-button\",\n {\n staticStyle: { color: \"#2090c1\" },\n attrs: {\n size: \"mini\",\n type: \"text\"\n },\n on: {\n click: function($event) {\n return _vm.handleAdd(scope.row)\n }\n }\n },\n [_vm._v(\"Add\\n \")]\n )\n : _vm._e(),\n scope.$index !== 0\n ? _c(\n \"el-button\",\n {\n staticStyle: { color: \"#2090c1\" },\n attrs: {\n size: \"mini\",\n type: \"text\"\n },\n on: {\n click: function($event) {\n return _vm.handleUpdate(\n scope.row\n )\n }\n }\n },\n [\n _vm._v(\n _vm._s(\n scope.row.isEdit\n ? \"Apply\"\n : \"Edit\"\n ) + \"\\n \"\n )\n ]\n )\n : _vm._e(),\n scope.$index !== 0\n ? _c(\n \"el-button\",\n {\n staticStyle: { color: \"#F56C6C\" },\n attrs: {\n size: \"mini\",\n type: \"text\"\n },\n on: {\n click: function($event) {\n return _vm.handleDelete(\n scope.row\n )\n }\n }\n },\n [\n _vm._v(\n _vm._s(\n scope.row.isEdit\n ? \"Cancel\"\n : \"Delete\"\n ) + \"\\n \"\n )\n ]\n )\n : _vm._e()\n ]\n }\n }\n ],\n null,\n false,\n 2713940738\n )\n })\n ],\n 1\n )\n : _vm._e(),\n _c(\n \"div\",\n { staticStyle: { \"margin-top\": \"15px\" } },\n [\n _vm.licensePlateform.licensePlateClose == true\n ? _c(\n \"el-button\",\n {\n staticStyle: { width: \"150px\" },\n attrs: { type: \"primary\", size: \"small\" },\n on: {\n click: function($event) {\n return _vm.handleagain()\n }\n }\n },\n [_vm._v(\"保存\")]\n )\n : _vm._e()\n ],\n 1\n )\n ],\n 1\n )\n ],\n 1\n )\n ]),\n _c(\"div\", { staticClass: \"dataBoard\" }, [\n _c(\n \"div\",\n { staticClass: \"section\" },\n [\n _c(\"p\", { staticClass: \"board-title\" }, [_vm._v(\"停车状态\")]),\n _vm._m(4),\n _c(\n \"el-form\",\n {\n staticClass: \"demo-form-inline\",\n attrs: {\n inline: true,\n model: _vm.stopStateform,\n \"label-width\": \"140px\"\n }\n },\n [\n _c(\n \"el-form-item\",\n { attrs: { label: \"位移:\" } },\n [\n _c(\"el-input-number\", {\n attrs: { min: 2000, max: 3000, label: \"位移\" },\n on: { change: _vm.handleChange },\n model: {\n value: _vm.stopStateform.displacement,\n callback: function($$v) {\n _vm.$set(_vm.stopStateform, \"displacement\", $$v)\n },\n expression: \"stopStateform.displacement\"\n }\n })\n ],\n 1\n ),\n _c(\n \"el-form-item\",\n { attrs: { label: \"速度:\" } },\n [\n _c(\"el-input-number\", {\n attrs: { min: 2000, max: 3000, label: \"速度\" },\n on: { change: _vm.handleChange },\n model: {\n value: _vm.stopStateform.speed,\n callback: function($$v) {\n _vm.$set(_vm.stopStateform, \"speed\", $$v)\n },\n expression: \"stopStateform.speed\"\n }\n })\n ],\n 1\n ),\n _c(\n \"el-form-item\",\n { attrs: { label: \"加速度:\" } },\n [\n _c(\"el-input-number\", {\n attrs: { min: 2000, max: 3000, label: \"加速度\" },\n on: { change: _vm.handleChange },\n model: {\n value: _vm.stopStateform.acceleration,\n callback: function($$v) {\n _vm.$set(_vm.stopStateform, \"acceleration\", $$v)\n },\n expression: \"stopStateform.acceleration\"\n }\n })\n ],\n 1\n )\n ],\n 1\n ),\n _c(\n \"div\",\n { staticStyle: { \"margin-top\": \"15px\" } },\n [\n _c(\n \"el-button\",\n {\n staticStyle: { width: \"150px\" },\n attrs: { type: \"primary\", size: \"small\" },\n on: {\n click: function($event) {\n return _vm.handleagain()\n }\n }\n },\n [_vm._v(\"保存\")]\n )\n ],\n 1\n )\n ],\n 1\n )\n ]),\n _c(\"div\", { staticClass: \"dataBoard\" }, [\n _c(\n \"div\",\n { staticClass: \"section\" },\n [\n _c(\"p\", { staticClass: \"board-title\" }, [_vm._v(\"通信设置\")]),\n _c(\n \"el-form\",\n {\n staticClass: \"demo-form-inline\",\n attrs: { model: _vm.communicationform, \"label-width\": \"200px\" }\n },\n [\n _c(\n \"el-form-item\",\n {\n staticStyle: { \"margin-bottom\": \"20px\" },\n attrs: { label: \"类型:\" }\n },\n [\n _c(\n \"el-radio-group\",\n {\n model: {\n value: _vm.communicationform.type,\n callback: function($$v) {\n _vm.$set(_vm.communicationform, \"type\", $$v)\n },\n expression: \"communicationform.type\"\n }\n },\n [\n _c(\"el-radio\", {\n attrs: { label: \"快速-用于高带宽连接\" }\n }),\n _c(\"el-radio\", {\n attrs: { label: \"平衡-适用于大多数连接\" }\n }),\n _c(\"el-radio\", {\n attrs: { label: \"慢速-用于低带宽连接\" }\n }),\n _c(\"el-radio\", { attrs: { label: \"自定义\" } })\n ],\n 1\n )\n ],\n 1\n ),\n _vm.communicationform.type == \"自定义\"\n ? _c(\n \"el-form-item\",\n { attrs: { label: \"请求轻型有效载荷:\" } },\n [\n _c(\"el-input\", {\n staticStyle: {\n width: \"200px\",\n \"margin-bottom\": \"20px\"\n },\n model: {\n value: _vm.communicationform.name,\n callback: function($$v) {\n _vm.$set(_vm.communicationform, \"name\", $$v)\n },\n expression: \"communicationform.name\"\n }\n }),\n _vm._v(\"ms\\n \")\n ],\n 1\n )\n : _vm._e(),\n _vm.communicationform.type == \"自定义\"\n ? _c(\n \"el-form-item\",\n { attrs: { label: \"请求重型有效载荷:\" } },\n [\n _c(\"el-input\", {\n staticStyle: {\n width: \"200px\",\n \"margin-bottom\": \"20px\"\n },\n model: {\n value: _vm.communicationform.name,\n callback: function($$v) {\n _vm.$set(_vm.communicationform, \"name\", $$v)\n },\n expression: \"communicationform.name\"\n }\n }),\n _vm._v(\"ms\\n \")\n ],\n 1\n )\n : _vm._e(),\n _vm.communicationform.type == \"自定义\"\n ? _c(\n \"el-form-item\",\n { attrs: { label: \"FPS分配器:\" } },\n [\n _c(\"el-input\", {\n staticStyle: {\n width: \"200px\",\n \"margin-bottom\": \"20px\"\n },\n model: {\n value: _vm.communicationform.name,\n callback: function($$v) {\n _vm.$set(_vm.communicationform, \"name\", $$v)\n },\n expression: \"communicationform.name\"\n }\n })\n ],\n 1\n )\n : _vm._e(),\n _vm.communicationform.type == \"自定义\"\n ? _c(\n \"el-form-item\",\n { attrs: { label: \"框架决议:\" } },\n [\n _c(\n \"el-select\",\n {\n staticStyle: { \"margin-bottom\": \"20px\" },\n attrs: { placeholder: \"框架决议\" },\n model: {\n value: _vm.communicationform.region,\n callback: function($$v) {\n _vm.$set(_vm.communicationform, \"region\", $$v)\n },\n expression: \"communicationform.region\"\n }\n },\n [\n _c(\"el-option\", {\n attrs: { label: \"自动\", value: \"shanghai\" }\n }),\n _c(\"el-option\", {\n attrs: { label: \"区域二\", value: \"beijing\" }\n })\n ],\n 1\n )\n ],\n 1\n )\n : _vm._e(),\n _vm.communicationform.type == \"自定义\"\n ? _c(\n \"el-form-item\",\n { attrs: { label: \"压缩格式:\" } },\n [\n _c(\n \"el-select\",\n {\n staticStyle: { \"margin-bottom\": \"20px\" },\n attrs: { placeholder: \"压缩格式\" },\n model: {\n value: _vm.communicationform.region,\n callback: function($$v) {\n _vm.$set(_vm.communicationform, \"region\", $$v)\n },\n expression: \"communicationform.region\"\n }\n },\n [\n _c(\"el-option\", {\n attrs: { label: \"JPG\", value: \"shanghai\" }\n }),\n _c(\"el-option\", {\n attrs: { label: \"区域二\", value: \"beijing\" }\n })\n ],\n 1\n )\n ],\n 1\n )\n : _vm._e(),\n _vm.communicationform.type == \"自定义\"\n ? _c(\n \"el-form-item\",\n { attrs: { label: \"压缩率:\" } },\n [\n _c(\"el-input\", {\n staticStyle: { width: \"200px\" },\n model: {\n value: _vm.communicationform.name,\n callback: function($$v) {\n _vm.$set(_vm.communicationform, \"name\", $$v)\n },\n expression: \"communicationform.name\"\n }\n })\n ],\n 1\n )\n : _vm._e(),\n _c(\n \"el-button\",\n {\n staticStyle: { width: \"150px\" },\n attrs: { type: \"primary\", size: \"small\" },\n on: {\n click: function($event) {\n return _vm.handleagain()\n }\n }\n },\n [_vm._v(\"保存\")]\n )\n ],\n 1\n )\n ],\n 1\n )\n ])\n ])\n ])\n}\nvar staticRenderFns = [\n function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\"div\", { staticClass: \"warning\" }, [\n _c(\"i\", {\n staticClass: \"el-icon-warning\",\n staticStyle: { color: \"#409EFF\", margin: \"0 3px 0 10px\" }\n }),\n _vm._v(\"在视频/动图上设置进口出口道\\n \")\n ])\n },\n function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\"div\", { staticClass: \"warning\" }, [\n _c(\"i\", {\n staticClass: \"el-icon-warning\",\n staticStyle: { color: \"#409EFF\", margin: \"0 3px 0 10px\" }\n }),\n _vm._v(\n \"您可以自定义进行视频分析的区域,区域之外的部分将被忽略。此功能可以帮助您检测和跟踪高分辨率视频特定部分的较小对象,实现检测器的数字变焦功能。\\n \"\n )\n ])\n },\n function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\"div\", { staticClass: \"warning\" }, [\n _c(\"i\", {\n staticClass: \"el-icon-warning\",\n staticStyle: { color: \"#409EFF\", margin: \"0 3px 0 10px\" }\n }),\n _vm._v(\n \"为轨迹预测滤波算法定义细化轨迹的时间窗口。数值越小,延迟越小,适用于实时性要求高的场景;数值越大,轨迹的连续性越好,目标即使越过一些障碍也不容易丢失。\\n \"\n )\n ])\n },\n function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\"div\", { staticClass: \"warning\" }, [\n _c(\"i\", {\n staticClass: \"el-icon-warning\",\n staticStyle: { color: \"#409EFF\", margin: \"0 3px 0 10px\" }\n }),\n _vm._v(\n \"车牌识别开关。牌照信息表示与目标属性。(断面号牌,与断面设置关联)\\n \"\n )\n ])\n },\n function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\"div\", { staticClass: \"warning\" }, [\n _c(\"i\", {\n staticClass: \"el-icon-warning\",\n staticStyle: { color: \"#409EFF\", margin: \"0 3px 0 10px\" }\n }),\n _vm._v(\"更新频率:更新频率可以根据链路带宽进行设置。\\n \")\n ])\n }\n]\nrender._withStripped = true\n\nexport { render, staticRenderFns }"]} \ No newline at end of file diff --git a/node_modules/.cache/vue-loader/c53424f6868f2b1e3893cfe4a593f0b9.json b/node_modules/.cache/vue-loader/c53424f6868f2b1e3893cfe4a593f0b9.json index a07322f3..c1cfe366 100644 --- a/node_modules/.cache/vue-loader/c53424f6868f2b1e3893cfe4a593f0b9.json +++ b/node_modules/.cache/vue-loader/c53424f6868f2b1e3893cfe4a593f0b9.json @@ -1 +1 @@ -{"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":1672741926736},{"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 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\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 },\n methods: {\n testMqtt() {\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkWA;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;;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;;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 <p class=\"board-title\">坐标转换</p>\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 <el-radio-group v-model=\"coordinateForm.model\">\r\n <el-radio label=\"Georeferencing\"></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=\"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\">\r\n <iframe id=\"mapModule\" src=\"./VideoWeb/index.html\" frameborder=\"0\" style=\"width: 100%; height:100%;\" ></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 <p class=\"board-title\">车道识别配置</p>\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 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 <p class=\"board-title\">识别区域</p>\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 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 <p class=\"board-title\">轨迹平滑</p>\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 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 <p class=\"board-title\">车牌识别</p>\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 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 <p class=\"board-title\">停车状态</p>\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 :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-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\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 },\r\n methods: {\r\n testMqtt() {\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 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 "]}]} \ No newline at end of file +{"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":1672809677780},{"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 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\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 // if (iframe.attachEvent) {\n // setTimeout(() => {\n // this.testMqtt()\n // }, 5000);\n // }else{\n // console.log(\"3333\") \n // }\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkWA;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;;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;;AAEA;AACA;;AAEA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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 <p class=\"board-title\">坐标转换</p>\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 <el-radio-group v-model=\"coordinateForm.model\">\r\n <el-radio label=\"Georeferencing\"></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=\"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\" >\r\n <iframe id=\"mapModuleTop\" @load=\"load\" src=\"./VideoWeb/index.html\" frameborder=\"0\" style=\"width: 100%; height:100%;\" ></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 <p class=\"board-title\">车道识别配置</p>\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 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 <p class=\"board-title\">识别区域</p>\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 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 <p class=\"board-title\">轨迹平滑</p>\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 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 <p class=\"board-title\">车牌识别</p>\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 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 <p class=\"board-title\">停车状态</p>\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 :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-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\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 // if (iframe.attachEvent) {\r\n // setTimeout(() => {\r\n // this.testMqtt()\r\n // }, 5000);\r\n // }else{\r\n // console.log(\"3333\") \r\n // }\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 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 "]}]} \ No newline at end of file diff --git a/node_modules/.cache/vue-loader/f087da96cb49aff63ead829546c932a2.json b/node_modules/.cache/vue-loader/f087da96cb49aff63ead829546c932a2.json index 3bc233ba..7c53ace2 100644 --- a/node_modules/.cache/vue-loader/f087da96cb49aff63ead829546c932a2.json +++ b/node_modules/.cache/vue-loader/f087da96cb49aff63ead829546c932a2.json @@ -1 +1 @@ -{"remainingRequest":"D:\\视频边缘1215\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\视频边缘1215\\TransFlow\\src\\views\\bounced\\analysisConfiguration.vue?vue&type=template&id=fd3d0d46&scoped=true&","dependencies":[{"path":"D:\\视频边缘1215\\TransFlow\\src\\views\\bounced\\analysisConfiguration.vue","mtime":1672741926736},{"path":"D:\\视频边缘1215\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1671074740928},{"path":"D:\\视频边缘1215\\TransFlow\\node_modules\\vue-loader\\lib\\loaders\\templateLoader.js","mtime":1671074747916},{"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 <div >\n <div >\n <div class=\"top\">\n <div class=\"section\"> \n <el-form :inline=\"true\" :model=\"formInline\" class=\"demo-form-inline\" label-width=\"140px\">\n <div class=\"warning\">\n <i class=\"el-icon-warning\" style=\"color: #409EFF; margin: 0 3px 0 10px;\"></i>自动保存可以使系统在异常关闭后自动恢复。在这种情况下,缓存数据将会丢失,但所有存储数据将被保存。\n </div>\n <el-form-item label=\"自动保存:\" >\n <el-switch v-model=\"formInline.user\"></el-switch>\n </el-form-item>\n <el-form-item label=\"时间间隔:\">\n <el-select v-model=\"formInline.region\" placeholder=\"时间间隔\">\n <el-option label=\"20s\" value=\"shanghai\"></el-option>\n <el-option label=\"30s\" value=\"beijing\"></el-option>\n </el-select>\n </el-form-item>\n</el-form>\n <el-form ref=\"form\" :model=\"sizeForm\" label-width=\"140px\">\n <div class=\"warning\">\n <i class=\"el-icon-warning\" style=\"color: #409EFF; margin: 0 3px 0 10px;\"></i>重置分析将删除所有累计的轨迹数据\n </div>\n <!-- <el-form-item > -->\n <el-button type=\"primary\" @click=\"handleagain()\" size=\"small\" style=\"width:150px\">重置</el-button>\n <div class=\"warning\">\n <i class=\"el-icon-warning\" style=\"color: #409EFF; margin: 0 3px 0 10px;\"></i>在 WGS84 坐标系中输入相机位置\n </div>\n <el-form-item label=\"相机位置:\">\n <el-input v-model=\"sizeForm.name\" style=\"width:150px\" placeholder=\"经度\"></el-input>\n <el-input v-model=\"sizeForm.name\" style=\"width:150px;margin-left:20px\" placeholder=\"纬度\"></el-input>\n </el-form-item>\n </el-form>\n </div>\n </div> \n \n <div class=\"dataBoard\">\n <div class=\"section\">\n <p class=\"board-title\">坐标转换</p>\n <el-form ref=\"form\" :model=\"coordinateForm\" label-width=\"140px\">\n <el-form-item label=\"坐标转换开关:\">\n <el-switch v-model=\"coordinateForm.coordinateClose\"></el-switch>\n </el-form-item>\n <el-form-item label=\"模型:\" v-if=\"coordinateForm.coordinateClose==true\">\n <el-radio-group v-model=\"coordinateForm.model\">\n <el-radio label=\"Georeferencing\"></el-radio>\n <el-radio label=\"其他\"></el-radio>\n </el-radio-group>\n </el-form-item>\n <el-form-item label=\"坐标转换:\" v-if=\"coordinateForm.coordinateClose==true\">\n <el-radio-group v-model=\"coordinateForm.coordinateTransformation\">\n <el-radio label=\"84坐标系\"></el-radio>\n <el-radio label=\"其他\"></el-radio>\n </el-radio-group>\n </el-form-item>\n <div style=\"width:100%;height:300px\">\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 <el-table border :data=\"coordinateTableData\" v-if=\"coordinateForm.coordinateClose==true\">\n <el-table-column prop=\"name\" label=\"点名称\" align=\"center\" >\n <template slot-scope=\"scope\">\n <el-input\n v-if=\"scope.$index === 0\"\n v-model=\"scope.row.name\"\n maxlength=\"30\"\n placeholder=\"Required\"\n />\n <span v-else v-text=\"scope.row.name\"></span>\n </template>\n </el-table-column>\n <el-table-column prop=\"longitude\" label=\"经度\" align=\"center\">\n <template slot-scope=\"scope\">\n <el-input\n v-if=\"scope.row.isEdit\"\n v-model=\"scope.row.longitude\"\n maxlength=\"20\"\n placeholder=\"Required\"\n />\n <span v-else v-text=\"scope.row.longitude\"></span>\n </template>\n </el-table-column>\n <el-table-column prop=\"latitude\" label=\"纬度\" align=\"center\">\n <template slot-scope=\"scope\">\n <el-input\n v-if=\"scope.row.isEdit\"\n v-model=\"scope.row.latitude\"\n maxlength=\"20\"\n placeholder=\"Required\"\n />\n <span v-else v-text=\"scope.row.latitude\"></span>\n </template>\n </el-table-column>\n <el-table-column label=\"操作\" align=\"center\" class-name=\"small-padding fixed-width\">\n <template slot-scope=\"scope\">\n <el-button\n v-if=\"scope.$index === 0\"\n size=\"mini\"\n type=\"text\"\n style=\"color: #2090c1\"\n @click=\"handleAdd(scope.row)\"\n >Add\n </el-button>\n <el-button\n v-if=\"scope.$index !== 0\"\n size=\"mini\"\n type=\"text\"\n style=\"color: #2090c1\"\n @click=\"handleUpdate(scope.row)\"\n >{{ scope.row.isEdit ? 'Apply' : 'Edit' }}\n </el-button>\n <el-button\n v-if=\"scope.$index !== 0\"\n size=\"mini\"\n type=\"text\"\n style=\"color: #F56C6C\"\n @click=\"handleDelete(scope.row)\"\n >{{ scope.row.isEdit ? 'Cancel' : 'Delete' }}\n </el-button>\n </template>\n </el-table-column>\n</el-table>\n<div style=\"margin-top:15px\">\n<el-button type=\"primary\" @click=\"handleagain()\" size=\"small\" style=\"width:150px\" v-if=\"coordinateForm.coordinateClose==true\">保存</el-button>\n</div>\n\n</el-form>\n </div>\n \n </div>\n <div class=\"dataBoard\">\n <div class=\"section\">\n <p class=\"board-title\">车道识别配置</p>\n <div class=\"warning\">\n <i class=\"el-icon-warning\" style=\"color: #409EFF; margin: 0 3px 0 10px;\"></i>在视频/动图上设置进口出口道\n </div>\n <el-form ref=\"form\" :model=\"laneform\" label-width=\"350px\"> \n <!-- <p>车道识别配置</p> -->\n <el-form-item label=\"车道识别配置开关:\" label-width=\"150px\">\n <el-switch v-model=\"laneform.laneClose\"></el-switch>\n </el-form-item> \n <!-- <div style=\"width:100%;height:300px\" v-if=\"laneform.laneClose==true\">\n <iframe id=\"mapModule\" src=\"./VideoWeb/index.html\" frameborder=\"0\" style=\"width: 100%; height: calc(100% - 50px)\"></iframe>\n </div> -->\n <el-form-item label=\"各车道中心线(区域检测器):\" style=\"width:300px\" v-if=\"laneform.laneClose==true\">\n <el-switch v-model=\"laneform.areaDetector\"></el-switch>\n </el-form-item>\n <el-form-item label=\"自动识别各车道中心点坐标(断面检测器):\" style=\"width:300px\" v-if=\"laneform.laneClose==true\">\n <el-switch v-model=\"laneform.sectionDetector\"></el-switch>\n </el-form-item>\n <el-button type=\"primary\" @click=\"handleagain()\" size=\"small\" style=\"width:150px\" v-if=\"laneform.laneClose==true\">保存</el-button>\n \n \n </el-form>\n </div>\n \n </div> \n <div class=\"dataBoard\">\n <div class=\"section\">\n <p class=\"board-title\">识别区域</p>\n <div class=\"warning\">\n <i class=\"el-icon-warning\" style=\"color: #409EFF; margin: 0 3px 0 10px;\"></i>您可以自定义进行视频分析的区域,区域之外的部分将被忽略。此功能可以帮助您检测和跟踪高分辨率视频特定部分的较小对象,实现检测器的数字变焦功能。\n </div>\n <el-form ref=\"form\" :model=\"identificationAreaform\" label-width=\"140px\"> \n <!-- <p>车道识别配置</p> -->\n \n <el-form-item label=\"识别区域开关\" style=\"width:250px\">\n <el-switch v-model=\"identificationAreaform.identificationAreaClose\"></el-switch>\n </el-form-item>\n <!-- <div style=\"width:100%;height:300px\" v-if=\"identificationAreaform.identificationAreaClose==true\">\n <iframe id=\"mapModule\" src=\"./VideoWeb/index.html\" frameborder=\"0\" style=\"width: 100%; height: calc(100% - 50px)\"></iframe>\n </div> -->\n <el-button type=\"primary\" @click=\"handleagain()\" size=\"small\" style=\"width:150px\" v-if=\"identificationAreaform.identificationAreaClose==true\">保存</el-button>\n \n </el-form>\n </div>\n \n </div> \n <div class=\"dataBoard\">\n <div class=\"section\">\n <p class=\"board-title\">轨迹平滑</p>\n <div class=\"warning\">\n <i class=\"el-icon-warning\" style=\"color: #409EFF; margin: 0 3px 0 10px;\"></i>为轨迹预测滤波算法定义细化轨迹的时间窗口。数值越小,延迟越小,适用于实时性要求高的场景;数值越大,轨迹的连续性越好,目标即使越过一些障碍也不容易丢失。\n </div>\n <el-form ref=\"form\" :model=\"trajectorySmoothingform\" label-width=\"140px\"> \n <el-form-item label=\"轨迹平滑开关\" style=\"width:250px\">\n <el-switch v-model=\"trajectorySmoothingform.trajectorySmoothingClose\"></el-switch>\n </el-form-item> \n <el-form-item label=\"预测滤波时间\" style=\"width:250px\" v-if=\"trajectorySmoothingform.trajectorySmoothingClose==true\">\n <el-input-number v-model=\"trajectorySmoothingform.time\" @change=\"handleChange\" :min=\"2000\" :max=\"3000\" label=\"预测滤波时间\"></el-input-number>\n </el-form-item>\n <el-button type=\"primary\" @click=\"handleagain()\" size=\"small\" style=\"width:150px\" v-if=\"trajectorySmoothingform.trajectorySmoothingClose==true\">保存</el-button>\n </el-form>\n </div>\n \n </div> \n <div class=\"dataBoard\">\n <div class=\"section\">\n <p class=\"board-title\">车牌识别</p>\n <div class=\"warning\">\n <i class=\"el-icon-warning\" style=\"color: #409EFF; margin: 0 3px 0 10px;\"></i>车牌识别开关。牌照信息表示与目标属性。(断面号牌,与断面设置关联)\n </div>\n <el-form ref=\"form\" :model=\"licensePlateform\" label-width=\"140px\"> \n <el-form-item label=\"车牌识别开关\" style=\"width:250px\">\n <el-switch v-model=\"licensePlateform.licensePlateClose\"></el-switch>\n </el-form-item> \n <!-- <div style=\"width:100%;height:300px\" v-if=\"licensePlateform.licensePlateClose==true\">\n <iframe id=\"mapModule\" src=\"./VideoWeb/index.html\" frameborder=\"0\" style=\"width: 100%; height: calc(100% - 50px)\"></iframe>\n </div> -->\n <el-table border :data=\"licensePlateTableData\" v-if=\"licensePlateform.licensePlateClose==true\">\n <el-table-column prop=\"sectionPlate\" label=\"断面号牌\" align=\"center\">\n <template slot-scope=\"scope\">\n <el-input\n v-if=\"scope.$index === 0\"\n v-model=\"scope.row.sectionPlate\"\n maxlength=\"30\"\n placeholder=\"Required\"\n />\n <span v-else v-text=\"scope.row.sectionPlate\"></span>\n </template>\n </el-table-column>\n <el-table-column prop=\"setAssociation\" label=\"断面设置关联\" align=\"center\">\n <template slot-scope=\"scope\">\n <el-input\n v-if=\"scope.row.isEdit\"\n v-model=\"scope.row.setAssociation\"\n maxlength=\"20\"\n placeholder=\"Required\"\n />\n <span v-else v-text=\"scope.row.setAssociation\"></span>\n </template>\n </el-table-column>\n <el-table-column prop=\"thresholdValue\" label=\"车牌匹配阈值\" align=\"center\">\n <template slot-scope=\"scope\">\n <el-input\n v-if=\"scope.row.isEdit\"\n v-model=\"scope.row.thresholdValue\"\n maxlength=\"20\"\n placeholder=\"Required\"\n />\n <span v-else v-text=\"scope.row.thresholdValue\"></span>\n </template>\n </el-table-column>\n <el-table-column label=\"操作\" align=\"center\" class-name=\"small-padding fixed-width\">\n <template slot-scope=\"scope\">\n <el-button\n v-if=\"scope.$index === 0\"\n size=\"mini\"\n type=\"text\"\n style=\"color: #2090c1\"\n @click=\"handleAdd(scope.row)\"\n >Add\n </el-button>\n <el-button\n v-if=\"scope.$index !== 0\"\n size=\"mini\"\n type=\"text\"\n style=\"color: #2090c1\"\n @click=\"handleUpdate(scope.row)\"\n >{{ scope.row.isEdit ? 'Apply' : 'Edit' }}\n </el-button>\n <el-button\n v-if=\"scope.$index !== 0\"\n size=\"mini\"\n type=\"text\"\n style=\"color: #F56C6C\"\n @click=\"handleDelete(scope.row)\"\n >{{ scope.row.isEdit ? 'Cancel' : 'Delete' }}\n </el-button>\n </template>\n </el-table-column>\n</el-table>\n<div style=\"margin-top:15px\">\n<el-button type=\"primary\" @click=\"handleagain()\" size=\"small\" style=\"width:150px\" v-if=\"licensePlateform.licensePlateClose==true\">保存</el-button>\n</div>\n\n \n </el-form>\n </div>\n \n </div> \n <div class=\"dataBoard\">\n <div class=\"section\">\n <p class=\"board-title\">停车状态</p>\n <div class=\"warning\">\n <i class=\"el-icon-warning\" style=\"color: #409EFF; margin: 0 3px 0 10px;\"></i>更新频率:更新频率可以根据链路带宽进行设置。\n </div>\n <el-form :inline=\"true\" :model=\"stopStateform\" class=\"demo-form-inline\" label-width=\"140px\">\n <el-form-item label=\"位移:\" >\n <el-input-number v-model=\"stopStateform.displacement\" @change=\"handleChange\" :min=\"2000\" :max=\"3000\" label=\"位移\"></el-input-number>\n </el-form-item>\n <el-form-item label=\"速度:\" >\n <el-input-number v-model=\"stopStateform.speed\" @change=\"handleChange\" :min=\"2000\" :max=\"3000\" label=\"速度\"></el-input-number>\n</el-form-item>\n <el-form-item label=\"加速度:\">\n <el-input-number v-model=\"stopStateform.acceleration\" @change=\"handleChange\" :min=\"2000\" :max=\"3000\" label=\"加速度\"></el-input-number>\n </el-form-item>\n \n</el-form>\n<div style=\"margin-top:15px\">\n<el-button type=\"primary\" @click=\"handleagain()\" size=\"small\" style=\"width:150px\">保存</el-button>\n</div>\n\n </div>\n \n </div> \n <div class=\"dataBoard\">\n <div class=\"section\">\n <p class=\"board-title\">通信设置</p>\n <el-form :model=\"communicationform\" class=\"demo-form-inline\" label-width=\"200px\">\n <el-form-item label=\"类型:\" style=\"margin-bottom: 20px;\">\n <el-radio-group v-model=\"communicationform.type\" >\n <el-radio label=\"快速-用于高带宽连接\"></el-radio>\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=\"请求轻型有效载荷:\" v-if=\"communicationform.type=='自定义'\">\n <el-input v-model=\"communicationform.name\" style=\"width:200px;margin-bottom: 20px;\"></el-input>ms\n </el-form-item>\n <el-form-item label=\"请求重型有效载荷:\" v-if=\"communicationform.type=='自定义'\">\n <el-input v-model=\"communicationform.name\" style=\"width:200px;margin-bottom: 20px;\"></el-input>ms\n </el-form-item>\n <el-form-item label=\"FPS分配器:\" v-if=\"communicationform.type=='自定义'\">\n <el-input v-model=\"communicationform.name\" style=\"width:200px;margin-bottom: 20px;\"></el-input>\n </el-form-item>\n <el-form-item label=\"框架决议:\" v-if=\"communicationform.type=='自定义'\">\n <el-select v-model=\"communicationform.region\" placeholder=\"框架决议\" style=\"margin-bottom: 20px;\">\n <el-option label=\"自动\" value=\"shanghai\"></el-option>\n <el-option label=\"区域二\" value=\"beijing\"></el-option>\n </el-select>\n </el-form-item>\n <el-form-item label=\"压缩格式:\" v-if=\"communicationform.type=='自定义'\">\n <el-select v-model=\"communicationform.region\" placeholder=\"压缩格式\" style=\"margin-bottom: 20px;\">\n <el-option label=\"JPG\" value=\"shanghai\"></el-option>\n <el-option label=\"区域二\" value=\"beijing\"></el-option>\n </el-select>\n </el-form-item>\n <el-form-item label=\"压缩率:\" v-if=\"communicationform.type=='自定义'\">\n <el-input v-model=\"communicationform.name\" style=\"width:200px\"></el-input>\n </el-form-item>\n <el-button type=\"primary\" @click=\"handleagain()\" size=\"small\" style=\"width:150px\" >保存</el-button>\n</el-form>\n </div>\n \n </div> \n\n </div>\n </div>\n",null]} \ No newline at end of file +{"remainingRequest":"D:\\视频边缘1215\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\视频边缘1215\\TransFlow\\src\\views\\bounced\\analysisConfiguration.vue?vue&type=template&id=fd3d0d46&scoped=true&","dependencies":[{"path":"D:\\视频边缘1215\\TransFlow\\src\\views\\bounced\\analysisConfiguration.vue","mtime":1672809677780},{"path":"D:\\视频边缘1215\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1671074740928},{"path":"D:\\视频边缘1215\\TransFlow\\node_modules\\vue-loader\\lib\\loaders\\templateLoader.js","mtime":1671074747916},{"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 <div >\n <div >\n <div class=\"top\">\n <div class=\"section\"> \n <el-form :inline=\"true\" :model=\"formInline\" class=\"demo-form-inline\" label-width=\"140px\">\n <div class=\"warning\">\n <i class=\"el-icon-warning\" style=\"color: #409EFF; margin: 0 3px 0 10px;\"></i>自动保存可以使系统在异常关闭后自动恢复。在这种情况下,缓存数据将会丢失,但所有存储数据将被保存。\n </div>\n <el-form-item label=\"自动保存:\" >\n <el-switch v-model=\"formInline.user\"></el-switch>\n </el-form-item>\n <el-form-item label=\"时间间隔:\">\n <el-select v-model=\"formInline.region\" placeholder=\"时间间隔\">\n <el-option label=\"20s\" value=\"shanghai\"></el-option>\n <el-option label=\"30s\" value=\"beijing\"></el-option>\n </el-select>\n </el-form-item>\n</el-form>\n <el-form ref=\"form\" :model=\"sizeForm\" label-width=\"140px\">\n <div class=\"warning\">\n <i class=\"el-icon-warning\" style=\"color: #409EFF; margin: 0 3px 0 10px;\"></i>重置分析将删除所有累计的轨迹数据\n </div>\n <!-- <el-form-item > -->\n <el-button type=\"primary\" @click=\"handleagain()\" size=\"small\" style=\"width:150px\">重置</el-button>\n <div class=\"warning\">\n <i class=\"el-icon-warning\" style=\"color: #409EFF; margin: 0 3px 0 10px;\"></i>在 WGS84 坐标系中输入相机位置\n </div>\n <el-form-item label=\"相机位置:\">\n <el-input v-model=\"sizeForm.name\" style=\"width:150px\" placeholder=\"经度\"></el-input>\n <el-input v-model=\"sizeForm.name\" style=\"width:150px;margin-left:20px\" placeholder=\"纬度\"></el-input>\n </el-form-item>\n </el-form>\n </div>\n </div> \n \n <div class=\"dataBoard\">\n <div class=\"section\">\n <p class=\"board-title\">坐标转换</p>\n <el-form ref=\"form\" :model=\"coordinateForm\" label-width=\"140px\">\n <el-form-item label=\"坐标转换开关:\">\n <el-switch v-model=\"coordinateForm.coordinateClose\"></el-switch>\n </el-form-item>\n <el-form-item label=\"模型:\" v-if=\"coordinateForm.coordinateClose==true\">\n <el-radio-group v-model=\"coordinateForm.model\">\n <el-radio label=\"Georeferencing\"></el-radio>\n <el-radio label=\"其他\"></el-radio>\n </el-radio-group>\n </el-form-item>\n <el-form-item label=\"坐标转换:\" v-if=\"coordinateForm.coordinateClose==true\">\n <el-radio-group v-model=\"coordinateForm.coordinateTransformation\">\n <el-radio label=\"84坐标系\"></el-radio>\n <el-radio label=\"其他\"></el-radio>\n </el-radio-group>\n </el-form-item>\n <div style=\"width:100%;height:300px\" >\n <iframe id=\"mapModuleTop\" @load=\"load\" 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 <el-table border :data=\"coordinateTableData\" v-if=\"coordinateForm.coordinateClose==true\">\n <el-table-column prop=\"name\" label=\"点名称\" align=\"center\" >\n <template slot-scope=\"scope\">\n <el-input\n v-if=\"scope.$index === 0\"\n v-model=\"scope.row.name\"\n maxlength=\"30\"\n placeholder=\"Required\"\n />\n <span v-else v-text=\"scope.row.name\"></span>\n </template>\n </el-table-column>\n <el-table-column prop=\"longitude\" label=\"经度\" align=\"center\">\n <template slot-scope=\"scope\">\n <el-input\n v-if=\"scope.row.isEdit\"\n v-model=\"scope.row.longitude\"\n maxlength=\"20\"\n placeholder=\"Required\"\n />\n <span v-else v-text=\"scope.row.longitude\"></span>\n </template>\n </el-table-column>\n <el-table-column prop=\"latitude\" label=\"纬度\" align=\"center\">\n <template slot-scope=\"scope\">\n <el-input\n v-if=\"scope.row.isEdit\"\n v-model=\"scope.row.latitude\"\n maxlength=\"20\"\n placeholder=\"Required\"\n />\n <span v-else v-text=\"scope.row.latitude\"></span>\n </template>\n </el-table-column>\n <el-table-column label=\"操作\" align=\"center\" class-name=\"small-padding fixed-width\">\n <template slot-scope=\"scope\">\n <el-button\n v-if=\"scope.$index === 0\"\n size=\"mini\"\n type=\"text\"\n style=\"color: #2090c1\"\n @click=\"handleAdd(scope.row)\"\n >Add\n </el-button>\n <el-button\n v-if=\"scope.$index !== 0\"\n size=\"mini\"\n type=\"text\"\n style=\"color: #2090c1\"\n @click=\"handleUpdate(scope.row)\"\n >{{ scope.row.isEdit ? 'Apply' : 'Edit' }}\n </el-button>\n <el-button\n v-if=\"scope.$index !== 0\"\n size=\"mini\"\n type=\"text\"\n style=\"color: #F56C6C\"\n @click=\"handleDelete(scope.row)\"\n >{{ scope.row.isEdit ? 'Cancel' : 'Delete' }}\n </el-button>\n </template>\n </el-table-column>\n</el-table>\n<div style=\"margin-top:15px\">\n<el-button type=\"primary\" @click=\"handleagain()\" size=\"small\" style=\"width:150px\" v-if=\"coordinateForm.coordinateClose==true\">保存</el-button>\n</div>\n\n</el-form>\n </div>\n \n </div>\n <div class=\"dataBoard\">\n <div class=\"section\">\n <p class=\"board-title\">车道识别配置</p>\n <div class=\"warning\">\n <i class=\"el-icon-warning\" style=\"color: #409EFF; margin: 0 3px 0 10px;\"></i>在视频/动图上设置进口出口道\n </div>\n <el-form ref=\"form\" :model=\"laneform\" label-width=\"350px\"> \n <!-- <p>车道识别配置</p> -->\n <el-form-item label=\"车道识别配置开关:\" label-width=\"150px\">\n <el-switch v-model=\"laneform.laneClose\"></el-switch>\n </el-form-item> \n <!-- <div style=\"width:100%;height:300px\" v-if=\"laneform.laneClose==true\">\n <iframe id=\"mapModule\" src=\"./VideoWeb/index.html\" frameborder=\"0\" style=\"width: 100%; height: calc(100% - 50px)\"></iframe>\n </div> -->\n <el-form-item label=\"各车道中心线(区域检测器):\" style=\"width:300px\" v-if=\"laneform.laneClose==true\">\n <el-switch v-model=\"laneform.areaDetector\"></el-switch>\n </el-form-item>\n <el-form-item label=\"自动识别各车道中心点坐标(断面检测器):\" style=\"width:300px\" v-if=\"laneform.laneClose==true\">\n <el-switch v-model=\"laneform.sectionDetector\"></el-switch>\n </el-form-item>\n <el-button type=\"primary\" @click=\"handleagain()\" size=\"small\" style=\"width:150px\" v-if=\"laneform.laneClose==true\">保存</el-button>\n \n \n </el-form>\n </div>\n \n </div> \n <div class=\"dataBoard\">\n <div class=\"section\">\n <p class=\"board-title\">识别区域</p>\n <div class=\"warning\">\n <i class=\"el-icon-warning\" style=\"color: #409EFF; margin: 0 3px 0 10px;\"></i>您可以自定义进行视频分析的区域,区域之外的部分将被忽略。此功能可以帮助您检测和跟踪高分辨率视频特定部分的较小对象,实现检测器的数字变焦功能。\n </div>\n <el-form ref=\"form\" :model=\"identificationAreaform\" label-width=\"140px\"> \n <!-- <p>车道识别配置</p> -->\n \n <el-form-item label=\"识别区域开关\" style=\"width:250px\">\n <el-switch v-model=\"identificationAreaform.identificationAreaClose\"></el-switch>\n </el-form-item>\n <!-- <div style=\"width:100%;height:300px\" v-if=\"identificationAreaform.identificationAreaClose==true\">\n <iframe id=\"mapModule\" src=\"./VideoWeb/index.html\" frameborder=\"0\" style=\"width: 100%; height: calc(100% - 50px)\"></iframe>\n </div> -->\n <el-button type=\"primary\" @click=\"handleagain()\" size=\"small\" style=\"width:150px\" v-if=\"identificationAreaform.identificationAreaClose==true\">保存</el-button>\n \n </el-form>\n </div>\n \n </div> \n <div class=\"dataBoard\">\n <div class=\"section\">\n <p class=\"board-title\">轨迹平滑</p>\n <div class=\"warning\">\n <i class=\"el-icon-warning\" style=\"color: #409EFF; margin: 0 3px 0 10px;\"></i>为轨迹预测滤波算法定义细化轨迹的时间窗口。数值越小,延迟越小,适用于实时性要求高的场景;数值越大,轨迹的连续性越好,目标即使越过一些障碍也不容易丢失。\n </div>\n <el-form ref=\"form\" :model=\"trajectorySmoothingform\" label-width=\"140px\"> \n <el-form-item label=\"轨迹平滑开关\" style=\"width:250px\">\n <el-switch v-model=\"trajectorySmoothingform.trajectorySmoothingClose\"></el-switch>\n </el-form-item> \n <el-form-item label=\"预测滤波时间\" style=\"width:250px\" v-if=\"trajectorySmoothingform.trajectorySmoothingClose==true\">\n <el-input-number v-model=\"trajectorySmoothingform.time\" @change=\"handleChange\" :min=\"2000\" :max=\"3000\" label=\"预测滤波时间\"></el-input-number>\n </el-form-item>\n <el-button type=\"primary\" @click=\"handleagain()\" size=\"small\" style=\"width:150px\" v-if=\"trajectorySmoothingform.trajectorySmoothingClose==true\">保存</el-button>\n </el-form>\n </div>\n \n </div> \n <div class=\"dataBoard\">\n <div class=\"section\">\n <p class=\"board-title\">车牌识别</p>\n <div class=\"warning\">\n <i class=\"el-icon-warning\" style=\"color: #409EFF; margin: 0 3px 0 10px;\"></i>车牌识别开关。牌照信息表示与目标属性。(断面号牌,与断面设置关联)\n </div>\n <el-form ref=\"form\" :model=\"licensePlateform\" label-width=\"140px\"> \n <el-form-item label=\"车牌识别开关\" style=\"width:250px\">\n <el-switch v-model=\"licensePlateform.licensePlateClose\"></el-switch>\n </el-form-item> \n <!-- <div style=\"width:100%;height:300px\" v-if=\"licensePlateform.licensePlateClose==true\">\n <iframe id=\"mapModule\" src=\"./VideoWeb/index.html\" frameborder=\"0\" style=\"width: 100%; height: calc(100% - 50px)\"></iframe>\n </div> -->\n <el-table border :data=\"licensePlateTableData\" v-if=\"licensePlateform.licensePlateClose==true\">\n <el-table-column prop=\"sectionPlate\" label=\"断面号牌\" align=\"center\">\n <template slot-scope=\"scope\">\n <el-input\n v-if=\"scope.$index === 0\"\n v-model=\"scope.row.sectionPlate\"\n maxlength=\"30\"\n placeholder=\"Required\"\n />\n <span v-else v-text=\"scope.row.sectionPlate\"></span>\n </template>\n </el-table-column>\n <el-table-column prop=\"setAssociation\" label=\"断面设置关联\" align=\"center\">\n <template slot-scope=\"scope\">\n <el-input\n v-if=\"scope.row.isEdit\"\n v-model=\"scope.row.setAssociation\"\n maxlength=\"20\"\n placeholder=\"Required\"\n />\n <span v-else v-text=\"scope.row.setAssociation\"></span>\n </template>\n </el-table-column>\n <el-table-column prop=\"thresholdValue\" label=\"车牌匹配阈值\" align=\"center\">\n <template slot-scope=\"scope\">\n <el-input\n v-if=\"scope.row.isEdit\"\n v-model=\"scope.row.thresholdValue\"\n maxlength=\"20\"\n placeholder=\"Required\"\n />\n <span v-else v-text=\"scope.row.thresholdValue\"></span>\n </template>\n </el-table-column>\n <el-table-column label=\"操作\" align=\"center\" class-name=\"small-padding fixed-width\">\n <template slot-scope=\"scope\">\n <el-button\n v-if=\"scope.$index === 0\"\n size=\"mini\"\n type=\"text\"\n style=\"color: #2090c1\"\n @click=\"handleAdd(scope.row)\"\n >Add\n </el-button>\n <el-button\n v-if=\"scope.$index !== 0\"\n size=\"mini\"\n type=\"text\"\n style=\"color: #2090c1\"\n @click=\"handleUpdate(scope.row)\"\n >{{ scope.row.isEdit ? 'Apply' : 'Edit' }}\n </el-button>\n <el-button\n v-if=\"scope.$index !== 0\"\n size=\"mini\"\n type=\"text\"\n style=\"color: #F56C6C\"\n @click=\"handleDelete(scope.row)\"\n >{{ scope.row.isEdit ? 'Cancel' : 'Delete' }}\n </el-button>\n </template>\n </el-table-column>\n</el-table>\n<div style=\"margin-top:15px\">\n<el-button type=\"primary\" @click=\"handleagain()\" size=\"small\" style=\"width:150px\" v-if=\"licensePlateform.licensePlateClose==true\">保存</el-button>\n</div>\n\n \n </el-form>\n </div>\n \n </div> \n <div class=\"dataBoard\">\n <div class=\"section\">\n <p class=\"board-title\">停车状态</p>\n <div class=\"warning\">\n <i class=\"el-icon-warning\" style=\"color: #409EFF; margin: 0 3px 0 10px;\"></i>更新频率:更新频率可以根据链路带宽进行设置。\n </div>\n <el-form :inline=\"true\" :model=\"stopStateform\" class=\"demo-form-inline\" label-width=\"140px\">\n <el-form-item label=\"位移:\" >\n <el-input-number v-model=\"stopStateform.displacement\" @change=\"handleChange\" :min=\"2000\" :max=\"3000\" label=\"位移\"></el-input-number>\n </el-form-item>\n <el-form-item label=\"速度:\" >\n <el-input-number v-model=\"stopStateform.speed\" @change=\"handleChange\" :min=\"2000\" :max=\"3000\" label=\"速度\"></el-input-number>\n</el-form-item>\n <el-form-item label=\"加速度:\">\n <el-input-number v-model=\"stopStateform.acceleration\" @change=\"handleChange\" :min=\"2000\" :max=\"3000\" label=\"加速度\"></el-input-number>\n </el-form-item>\n \n</el-form>\n<div style=\"margin-top:15px\">\n<el-button type=\"primary\" @click=\"handleagain()\" size=\"small\" style=\"width:150px\">保存</el-button>\n</div>\n\n </div>\n \n </div> \n <div class=\"dataBoard\">\n <div class=\"section\">\n <p class=\"board-title\">通信设置</p>\n <el-form :model=\"communicationform\" class=\"demo-form-inline\" label-width=\"200px\">\n <el-form-item label=\"类型:\" style=\"margin-bottom: 20px;\">\n <el-radio-group v-model=\"communicationform.type\" >\n <el-radio label=\"快速-用于高带宽连接\"></el-radio>\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=\"请求轻型有效载荷:\" v-if=\"communicationform.type=='自定义'\">\n <el-input v-model=\"communicationform.name\" style=\"width:200px;margin-bottom: 20px;\"></el-input>ms\n </el-form-item>\n <el-form-item label=\"请求重型有效载荷:\" v-if=\"communicationform.type=='自定义'\">\n <el-input v-model=\"communicationform.name\" style=\"width:200px;margin-bottom: 20px;\"></el-input>ms\n </el-form-item>\n <el-form-item label=\"FPS分配器:\" v-if=\"communicationform.type=='自定义'\">\n <el-input v-model=\"communicationform.name\" style=\"width:200px;margin-bottom: 20px;\"></el-input>\n </el-form-item>\n <el-form-item label=\"框架决议:\" v-if=\"communicationform.type=='自定义'\">\n <el-select v-model=\"communicationform.region\" placeholder=\"框架决议\" style=\"margin-bottom: 20px;\">\n <el-option label=\"自动\" value=\"shanghai\"></el-option>\n <el-option label=\"区域二\" value=\"beijing\"></el-option>\n </el-select>\n </el-form-item>\n <el-form-item label=\"压缩格式:\" v-if=\"communicationform.type=='自定义'\">\n <el-select v-model=\"communicationform.region\" placeholder=\"压缩格式\" style=\"margin-bottom: 20px;\">\n <el-option label=\"JPG\" value=\"shanghai\"></el-option>\n <el-option label=\"区域二\" value=\"beijing\"></el-option>\n </el-select>\n </el-form-item>\n <el-form-item label=\"压缩率:\" v-if=\"communicationform.type=='自定义'\">\n <el-input v-model=\"communicationform.name\" style=\"width:200px\"></el-input>\n </el-form-item>\n <el-button type=\"primary\" @click=\"handleagain()\" size=\"small\" style=\"width:150px\" >保存</el-button>\n</el-form>\n </div>\n \n </div> \n\n </div>\n </div>\n",null]} \ No newline at end of file diff --git a/node_modules/.cache/vue-loader/f361520e87e9675aea6eaae1d0560c0f.json b/node_modules/.cache/vue-loader/f361520e87e9675aea6eaae1d0560c0f.json index 43036332..6181a3ed 100644 --- a/node_modules/.cache/vue-loader/f361520e87e9675aea6eaae1d0560c0f.json +++ b/node_modules/.cache/vue-loader/f361520e87e9675aea6eaae1d0560c0f.json @@ -1 +1 @@ -{"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":1672741609576},{"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\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.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 // debugger\n // return\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 // 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 // console.log(\n // `[MQTT-TEST] 从主题 \"${topic}\" 收到的内容: ${message.toString()}`,\n // new Date(),\n // new Date().getMilliseconds()\n // );\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 // console.log(\"msg\",msg)\n // debugger\n \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",{"version":3,"sources":["index.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuLA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;;AAEA;AACA;;AAEA;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;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;;AAEA;AACA;;;AAGA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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.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 // debugger\n // return\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 // 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 // console.log(\n // `[MQTT-TEST] 从主题 \"${topic}\" 收到的内容: ${message.toString()}`,\n // new Date(),\n // new Date().getMilliseconds()\n // );\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 // console.log(\"msg\",msg)\n // debugger\n \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"]}]} \ No newline at end of file +{"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":1672799272806},{"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\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",{"version":3,"sources":["index.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuLA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;;AAEA;AACA;;AAEA;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;;AAEA;;AAEA;AACA;;AAEA;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;;AAEA;AACA;;;AAGA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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"]}]} \ No newline at end of file diff --git a/public/VideoWeb/index.html b/public/VideoWeb/index.html index 9e77e025..30c94dba 100644 --- a/public/VideoWeb/index.html +++ b/public/VideoWeb/index.html @@ -118,38 +118,20 @@ }; //获取图像 function getDestination(string){ - // console.log("string",string) - // debugger if(unity!=null){ unity.SendMessage('AAA', 'SendImage', string); - } - + } } //获取数据 function getData(string){ - // console.log("string",string) - // debugger if(unity!=null){ unity.SendMessage('AAA', 'SendStream', string); - } - - // if(message.destinationName=='img0') - // { - // if(aaaaa!=null) - // { - // aaaaa.SendMessage('AAA', 'SendImage', message.payloadString); - // } - // } - // else if(message.destinationName=='stream0') - // { - // //原始数据 - // if(aaaaa!=null) - // { - // aaaaa.SendMessage('AAA', 'SendStream', message.payloadString); - // } - // } - - } + } + } + //获取图形数据 + function getfigureData(string){ + console.log("图形数据",string) + } document.body.appendChild(script); diff --git a/src/api/index.js b/src/api/index.js index e9d4911c..fac9e679 100644 --- a/src/api/index.js +++ b/src/api/index.js @@ -34,5 +34,6 @@ export const getDeleteShipjk = (params) => { params }) }; +//视频分析预览 diff --git a/src/views/bounced/analysisConfiguration.vue b/src/views/bounced/analysisConfiguration.vue index ef9485f7..9310eb85 100644 --- a/src/views/bounced/analysisConfiguration.vue +++ b/src/views/bounced/analysisConfiguration.vue @@ -53,8 +53,8 @@ <el-radio label="其他"></el-radio> </el-radio-group> </el-form-item> - <div style="width:100%;height:300px"> - <iframe id="mapModule" src="./VideoWeb/index.html" frameborder="0" style="width: 100%; height:100%;" ></iframe> + <div style="width:100%;height:300px" > + <iframe id="mapModuleTop" @load="load" src="./VideoWeb/index.html" frameborder="0" style="width: 100%; height:100%;" ></iframe> <!-- <iframe src="./VideoWeb/index.html" style="height: 100%; width: 100%;border: none" ref="iframe"></iframe> --> </div> @@ -478,9 +478,40 @@ export default { created() { // this.getDataByMqtt() // this.testMqtt() +// var iframe = document.getElementById("mapModule"); + // iframe.onload = function () { + // setTimeout(() => { + // this.testMqtt() + // }, 5000); + // }; +// iframe.onload = () => { +// setTimeout(() => { +// this.load() +// }, 5000);// 这样每次都会触发 +// } + }, methods: { + + load(){ + console.log("1111") + var iframe = document.getElementById("mapModuleTop"); + console.log("iframe",iframe) + // if (iframe.attachEvent) { + // setTimeout(() => { + // this.testMqtt() + // }, 5000); + // }else{ + // console.log("3333") + // } + iframe.onload = () => { + // setTimeout(() => { + this.testMqtt() + // }, 5000); + } + }, testMqtt() { + console.log("222") this.getDataByMqtt() }, diff --git a/src/views/index.vue b/src/views/index.vue index fac2ed10..904c1db3 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -330,7 +330,7 @@ export default { methods: { // 测试:mqtt测试 testMqtt() { - // this.getDataByMqtt() + this.getDataByMqtt() // 小车订阅 // for (let key in this.carId) { // this.getDataByMqtt( @@ -437,6 +437,9 @@ export default { // console.log("[MQTT-TEST] 已连接的客户端ID: ", connect); // 订阅 this.mqttClient.subscribe('img0', { qos: 0 }); + // this.client.connect('aaa', '111') + this.mqttClient.publish('aaa', '111'); + // this.mqttClient.subscribe('msg_stream', { msg_flag: 0 }); this.mqttClient.subscribe('img1', { qos: 0 }); this.mqttClient.subscribe('img2', { qos: 0 }); this.mqttClient.subscribe('img3', { qos: 0 }); @@ -448,36 +451,12 @@ export default { this.mqttClient.subscribe('stream3', { qos: 0 }); this.mqttClient.subscribe('stream4', { qos: 0 }); this.mqttClient.subscribe('stream5', { qos: 0 }); - + }); + // 接收回调 this.mqttClient.on("message", (topic, message, packet) => { - // debugger - // return - // console.log("[MQTT-TEST] 已连接的客户端ID: ", message); - - // console.log( - // `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`, - // new Date(), - // new Date().getMilliseconds() - // ); - // 解析后端数据 - // let dataReceived = JSON.parse(message.toString()); - // console.log("[MQTT-TEST] 已连接的客户端ID: ",dataReceived); - // try{ - // const utf8decoder = new TextDecoder() - // const u8arr = new Uint8Array(message) - // const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串 - // const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片,不报错则返回的是JSON的错误提示数据 - // console.log("msg",msg) //msg为转换后的JSON数据 - // this.imgUrl='data:image/png;base64,' + msg.pic; - // console.log("imageUrl",imageUrl) - // }catch{ - // let imageType = 'arraybuffer'; - // const blob = new Blob([message], { type: imageType }) - // const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob) - // console.log("imageUrl",imageUrl) - // } + if (topic.indexOf("img0") != -1) { try { const utf8decoder = new TextDecoder() @@ -486,9 +465,9 @@ export default { const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片,不报错则返回的是JSON的错误提示数据 // debugger // console.log("msg", msg) //msg为转换后的JSON数据 - console.log("1111",document.getElementById("mapModule")) - document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg)) - this.imgUrl = 'data:image/png;base64,' + msg.pic; + // console.log("1111",document.getElementById("mapModule")) + document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg)) + // this.imgUrl = 'data:image/png;base64,' + msg.pic; // console.log("imageUrl", imageUrl) } catch { @@ -573,19 +552,11 @@ export default { console.log("imageUrl", imageUrl) } } else if (topic.indexOf("stream0") != -1) { - // console.log( - // `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`, - // new Date(), - // new Date().getMilliseconds() - // ); const utf8decoder = new TextDecoder() const u8arr = new Uint8Array(message) const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串 const msg = JSON.parse(temp) - // console.log("msg",msg) - // debugger - - document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg)) + document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg)) } else if (topic.indexOf("stream1") != -1) { console.log( `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,