TransFlow/node_modules/.cache/vue-loader/f021a68c21f8de6cb5204cc1ed1a2687.json

{"remainingRequest":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!E:\\视频边缘计算管理平台\\TransFlow\\src\\views\\bounced\\analysisConfiguration.vue?vue&type=script&lang=js&","dependencies":[{"path":"E:\\视频边缘计算管理平台\\TransFlow\\src\\views\\bounced\\analysisConfiguration.vue","mtime":1674961941273},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1674961932750},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\babel-loader\\lib\\index.js","mtime":1674961932551},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1674961932750},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\vue-loader\\lib\\index.js","mtime":1674961940096}],"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\r\nimport mqtt from 'mqtt'; // mqtt协议\r\nimport {getFeixpz,setCameraPosition,setLicensePlate,setParkingStatus,setFeixzbzh} from \"@/api/index\";\r\nexport default {\r\n     props:{\r\n        analysisConfigurationdata: {\r\n      default: () => false,\r\n            type: Object,\r\n            required: true\r\n        },\r\n    },\r\n    data() {\r\n        return {\r\n            unityDone:false,\r\n            oldName:'',\r\n          formRules:{\r\n            pointName: [\r\n              { required: true, message: '请输入点名称', trigger: 'blur' },\r\n            ],\r\n            longitude: [\r\n              { required: true, message: '请输入经度', trigger: 'blur' },\r\n            ],\r\n            latitude: [\r\n              { required: true, message: '请输入纬度', trigger: 'blur' },\r\n            ],\r\n          },\r\n          addDianForm:{\r\n            pointName:'',\r\n            longitude:\"\",\r\n            latitude:'',\r\n            oldName:''\r\n          },\r\n          dialogVisible: false,\r\n          coordinateTransformationId:'',\r\n          AnalysisSettingId:'',\r\n          contentShow:{\r\n            postion:true,\r\n            coordinate:false,\r\n            plate:true,\r\n            parking:true\r\n          },\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                longitude:'',\r\n                latitude:''\r\n            },\r\n            formInline: {\r\n                user: '',\r\n                region: ''\r\n            },\r\n            //最上部表单\r\n            topForm: {},\r\n            //坐标转换\r\n            coordinateForm: {\r\n                coordinateClose: false,\r\n                model: 'Georeferencing',\r\n                coordinateTransformation: '84坐标系',\r\n                value: '0',\r\n                num: 1\r\n            },\r\n            options: [{\r\n              value: '南',\r\n              label: '南'\r\n            }, {\r\n              value: '北',\r\n              label: '北'\r\n            }],\r\n            coordinateTableData: [\r\n                {\r\n                    name: '11',\r\n                    longitude: '111',\r\n                    inIp: '01',\r\n                    latitude: '',\r\n                    oldName:''\r\n                },\r\n                {\r\n                    name: '22',\r\n                    longitude: '222',\r\n                    inIp: '02',\r\n                    latitude: '',\r\n                    oldName:''\r\n                },\r\n                {\r\n                    name: '33',\r\n                    longitude: '333',\r\n                    inIp: '03',\r\n                    latitude: '',\r\n                    oldName:''\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: 0\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                {\r\n                    thresholdValue: '22',\r\n                    sectionPlate: '222',\r\n                    inIp: '02',\r\n                    setAssociation: ''\r\n                },\r\n                {\r\n                    thresholdValue: '33',\r\n                    sectionPlate: '333',\r\n                    inIp: '03',\r\n                    setAssociation: ''\r\n                }\r\n            ],\r\n            //停车状态\r\n            stopStateform: {\r\n                displacement: '2000',\r\n                speed: '2000',\r\n                acceleration: '2000'\r\n            },\r\n            //通信设置\r\n            communicationform: {\r\n                type: '快速-用于高带宽连接',\r\n                renewalFrequency: ''\r\n            },\r\n            form: {\r\n                name: '',\r\n                region: '',\r\n                date1: '',\r\n                date2: '',\r\n                delivery: false,\r\n                type: [],\r\n                resource: '',\r\n                desc: ''\r\n            },\r\n            tableData: [\r\n                {\r\n                    name: '11',\r\n                    inPort: '111',\r\n                    inIp: '01'\r\n                },\r\n                {\r\n                    name: '22',\r\n                    inPort: '222',\r\n                    inIp: '02'\r\n                },\r\n                {\r\n                    name: '33',\r\n                    inPort: '333',\r\n                    inIp: '03'\r\n                }\r\n            ],\r\n            internalIpList: [],\r\n            fileList: []\r\n        };\r\n    },\r\n    watch:{\r\n        analysisConfigurationdata:{\r\n            handler:function(old,newV){\r\n                // console.log(\"old\",old)\r\n                // console.log(\"newV\",newV)\r\n                if(newV!=null&&this.unityDone==true){\r\n                    console.log(newV,'yyy');\r\n                    this.$refs.analysisWeb.contentWindow.getDestination(newV)\r\n                }\r\n            }\r\n        }\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        getFeixpz({VideoId:this.$route.query.id}).then(res=>{\r\n            this.sizeForm.longitude = res.data.data.cameraPositionLongitude\r\n            this.sizeForm.latitude = res.data.data.cameraPositionLatitude\r\n            this.coordinateForm.num = res.data.data.utmArea=='-1'?'':res.data.data.utmArea\r\n            this.coordinateForm.value = res.data.data.hemisphere\r\n            this.coordinateForm.coordinateTransformation = res.data.data.coordinateTransformation\r\n            this.coordinateTableData = res.data.data.pointData!=null?res.data.data.pointData:[]\r\n            this.licensePlateform.licensePlateClose = res.data.data.licensePlateRecognitionSwitch\r\n            this.stopStateform.displacement = res.data.data.parkingDisplacement\r\n            this.stopStateform.speed = res.data.data.parkingSpeed\r\n            this.AnalysisSettingId = res.data.data.analysisSettingId\r\n            this.coordinateTransformationId = res.data.data.coordinateTransformationId\r\n            this.coordinateTableData.forEach(item=>{\r\n                item.btnShow='1'\r\n            })\r\n        })\r\n        \r\n    },\r\n    mounted(){\r\n        window.OnSceneload = this.OnSceneload;\r\n        window.saveCoordinate = this.saveCoordinate;\r\n    },\r\n    methods: {\r\n        saveCoordinate(obj){\r\n            console.log(obj);\r\n            this.coordinateTableData.forEach(item=>{\r\n                if(item.pointName == obj.pointName){\r\n                    item.imageXCoordinate=obj.imageXCoordinate\r\n                    item.imageYCoordinate=obj.imageYCoordinate\r\n                }\r\n            })\r\n        },\r\n        updateName(val){\r\n            console.log(\"val\",val.target.value);\r\n        },\r\n        handleExit(row,index){\r\n            // this.oldName = row.pointName\r\n            row.oldName = row.pointName\r\n            console.log(this.coordinateTableData,'12312');\r\n            this.$refs.analysisWeb.contentWindow.exitPoint(row.pointName)\r\n            this.coordinateTableData.forEach((item,index)=>{\r\n                if(row.pointName == item.pointName){\r\n                    item.btnShow = '2'\r\n                    this.$set(this.coordinateTableData,index,item)\r\n                }\r\n            })\r\n        },\r\n        handleconfirm(row,index){\r\n            var bol =  this.coordinateTableData.some((item,indexa)=>item.pointName==row.pointName&&indexa!=index)\r\n            if(bol==true){\r\n                this.$message({\r\n                        type: 'info',\r\n                        message: '该点位已存在'\r\n                }); \r\n                return false\r\n            }\r\n            var string = row.oldName+','+row.pointName\r\n            this.$refs.analysisWeb.contentWindow.saveDian(string)\r\n            this.coordinateTableData.forEach((item,indexnew)=>{\r\n                if(row.pointName == item.pointName){\r\n                    item.btnShow = '1'\r\n                    this.$set(this.coordinateTableData,indexnew,item)\r\n                }\r\n            })\r\n           \r\n        },\r\n        OnSceneload(newV){\r\n            this.$refs.analysisWeb.contentWindow.getDianwei(this.$route.query.id)\r\n            this.unityDone=true\r\n        },\r\n      handleDeleteDian(row){\r\n        this.$confirm('此操作将删除该点位, 是否继续?', '提示', {\r\n          confirmButtonText: '确定',\r\n          cancelButtonText: '取消',\r\n          type: 'warning'\r\n        }).then(() => {\r\n          this.coordinateTableData = this.coordinateTableData.filter(item => item.pointName!=row.pointName )\r\n          this.$refs.analysisWeb.contentWindow.deletePoint(row.pointName)\r\n          this.$message({\r\n            type: 'success',\r\n            message: '删除成功!'\r\n          });\r\n        }).catch(() => {\r\n          this.$message({\r\n            type: 'info',\r\n            message: '已取消删除'\r\n          });          \r\n        });\r\n      },\r\n      handleDian(formName){\r\n        this.$refs[formName].validate((valid) => {\r\n          if (valid) {\r\n            console.log(this.addDianForm,'addDianForm,,,');\r\n            var bol =  this.coordinateTableData.some(item=>item.pointName==this.addDianForm.pointName)\r\n            console.log(bol,'bol');\r\n            if(bol==true){\r\n                this.$message({\r\n                        type: 'info',\r\n                        message: '该点位已存在'\r\n                }); \r\n                return false\r\n            }\r\n            \r\n            this.addDianForm.btnShow = '2'\r\n            this.oldName = this.addDianForm.pointName\r\n            this.coordinateTableData.unshift(this.addDianForm)\r\n            this.dialogVisible = false\r\n            this.$refs.analysisWeb.contentWindow.setPOS(this.addDianForm.pointName)\r\n            this.addDianForm={}\r\n           \r\n          } else {\r\n            return false;\r\n          }\r\n        });\r\n      },\r\n       phoneChange(e) {\r\n        console.log(\"e\", e.currentTarget.value);\r\n        this.addDianForm.oldName = e.currentTarget.value\r\n        },\r\n      handleClose(done) {\r\n        this.$confirm('确认关闭？')\r\n          .then(_ => {\r\n            done();\r\n          })\r\n          .catch(_ => {});\r\n      },\r\n      // 坐标转换接口\r\n      handlePos(){\r\n        let params = {\r\n          CoordinateTransformationId:this.coordinateTransformationId,\r\n          UTMArea:this.coordinateForm.num==''?'-1':this.coordinateForm.num,\r\n          Hemisphere:this.coordinateForm.value,\r\n          CoordinateTransformation:this.coordinateForm.coordinateTransformation,\r\n          PointData:this.coordinateTableData\r\n        }\r\n        console.log(\"params\",JSON.stringify(params))\r\n        setFeixzbzh(params).then(res=>{\r\n          this.$message({\r\n              type: 'success',\r\n                 message: res.data.msg,\r\n          });\r\n        })\r\n      },\r\n      // 停车状态\r\n      handleParking(){\r\n        const params = new URLSearchParams();\r\n        params.append('AnalysisSettingId', this.AnalysisSettingId)\r\n        params.append('ParkingDisplacement',this.stopStateform.displacement)\r\n        params.append('ParkingSpeed',this.stopStateform.speed)\r\n        setParkingStatus(params).then(res=>{\r\n          this.$message({\r\n              type: 'success',\r\n                message: res.data.msg,\r\n          });\r\n        })\r\n      },\r\n      // 车牌识别\r\n      changeChepai(val){\r\n        console.log(val,'val111');\r\n        const params = new URLSearchParams();\r\n        params.append('AnalysisSettingId', this.AnalysisSettingId)\r\n        params.append('LicensePlateRecognitionSwitch',val)\r\n        setLicensePlate(params).then(res=>{\r\n          this.$message({\r\n              type: 'success',\r\n                message: res.data.msg,\r\n          });\r\n        })\r\n      },\r\n      // 经纬度保存\r\n      handSaveitude(){\r\n        const params = new URLSearchParams();\r\n        params.append('AnalysisSettingId', this.AnalysisSettingId)\r\n        params.append('CameraPositionLongitude', this.sizeForm.longitude)\r\n        params.append('CameraPositionLatitude', this.sizeForm.latitude)\r\n        setCameraPosition(params).then(res=>{\r\n          this.$message({\r\n              type: 'success',\r\n                message: res.data.msg,\r\n          });\r\n        })\r\n      },\r\n      // 收放\r\n      handleContent(val){\r\n        if(val == 'postion'){\r\n          this.contentShow.postion = !this.contentShow.postion\r\n        }\r\n        if(val == 'coordinate'){\r\n          this.contentShow.coordinate = !this.contentShow.coordinate\r\n        }\r\n        if(val == 'plate'){\r\n          this.contentShow.plate = !this.contentShow.plate\r\n        }\r\n        if(val == 'parking'){\r\n          this.contentShow.parking = !this.contentShow.parking\r\n        }\r\n      },\r\n      handleChange(value) {\r\n        console.log(value);\r\n      },\r\n        load() {\r\n            console.log('1111');\r\n            var iframe = document.getElementById('mapModuleTop');\r\n            console.log('iframe', iframe);\r\n            iframe.onload = () => {\r\n                // setTimeout(() => {\r\n                this.testMqtt();\r\n                // }, 5000);\r\n            };\r\n        },\r\n        testMqtt() {\r\n            console.log('222');\r\n            this.getDataByMqtt();\r\n        },\r\n        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        getReverseShellList() {\r\n            //   getShellList().then(res => {\r\n            //     if (res.code === 200) {\r\n            //       if (res.data && res.data.length > 0) {\r\n            //       \t// 获取到的数据加上 isEdit是false， 默认是文本\r\n            //         res.data.forEach(item => {\r\n            //           item['isEdit'] = false\r\n            //         })\r\n            //       }\r\n            //   this.tableData = res.data\r\n            // 在表格列表前插入一行，用来新增数据\r\n            this.tableData.unshift({\r\n                name: '',\r\n                inIp: '',\r\n                inPort: null,\r\n                outPort: null,\r\n                enabled: null,\r\n                isEdit: true\r\n            });\r\n            //     }\r\n            //   })\r\n        },\r\n        // 新增按钮\r\n        handleAdd(row) {\r\n            for (let key in row) {\r\n                // 判断一行字段是否输入完整\r\n                if (row[key] === '' || row[key] === null || typeof row[key] === 'undefined') {\r\n                    this.msgError('Please complete the information');\r\n                    return;\r\n                }\r\n            }\r\n            const params = {\r\n                name: row.name,\r\n                inIp: row.inIp\r\n                // inPort: parseInt(row.inPort),\r\n                // outPort: parseInt(row.outPort),\r\n                // enabled: row.enabled\r\n            };\r\n            this.getReverseShellList();\r\n            //   addShell(params).then(res => {\r\n            //     if (res.code === 200) {\r\n            //       this.msgSuccess('Add reverse shell successfully')\r\n            //       row.isEdit = false\r\n            //       this.getReverseShellList()\r\n            //     }\r\n            //   })\r\n        },\r\n        // 编辑或者Apply按钮\r\n        handleUpdate(row) {\r\n            // 点击Apply时\r\n            if (row.isEdit) {\r\n                for (let key in row) {\r\n                    if (row[key] === '' || row[key] === null || typeof row[key] === 'undefined') {\r\n                        this.msgError('Please complete the information');\r\n                        return;\r\n                    }\r\n                }\r\n                const params = {\r\n                    name: row.name,\r\n                    inIp: row.inIp,\r\n                    inPort: parseInt(row.inPort),\r\n                    outPort: parseInt(row.outPort),\r\n                    enabled: row.enabled\r\n                };\r\n                // updateShell(params).then(res => {\r\n                //   if (res.code === 200) {\r\n                //     this.msgSuccess('Update reverse shell successfully')\r\n                //     this.getReverseShellList()\r\n                //   }\r\n                // })\r\n            } else {\r\n                // 点击编辑时\r\n                row.isEdit = true;\r\n            }\r\n        },\r\n        // 删除或取消按钮\r\n        handleDelete(row) {\r\n            // 点击取消时\r\n            if (row.isEdit) {\r\n                this.getReverseShellList();\r\n            } else {\r\n                // 点击删除时\r\n                this.$confirm('Are you sure to delete reverse shell?', 'warning', {\r\n                    confirmButtonText: 'Sure',\r\n                    cancelButtonText: 'Cancel',\r\n                    type: 'warning'\r\n                })\r\n                    .then(() => {\r\n                        //   deleteShell(row.name).then(res => {\r\n                        //     if (res.code === 200) {\r\n                        //       this.msgSuccess('Delete reverse shell successfully')\r\n                        //       this.getReverseShellList()\r\n                        //     }\r\n                        //   })\r\n                    })\r\n                    .catch(() => {});\r\n            }\r\n        },\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            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                this.mqttClient.on('message', (topic, message, packet) => {\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); // 将二进制数据转为字符串\r\n                        const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是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); // 将二进制数据转为字符串\r\n                            const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是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); // 将二进制数据转为字符串\r\n                            const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是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); // 将二进制数据转为字符串\r\n                            const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是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); // 将二进制数据转为字符串\r\n                            const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是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); // 将二进制数据转为字符串\r\n                            const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是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",{"version":3,"sources":["analysisConfiguration.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAydA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;;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;;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;;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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":"analysisConfiguration.vue","sourceRoot":"src/views/bounced","sourcesContent":["<template>\r\n    <div class=\"analysis\">\r\n            <div class=\"top\" style=\"margin-top:10px\">\r\n                <div class=\"section\">\r\n                    <el-form :inline=\"true\" v-if=\"false\" :model=\"formInline\" class=\"demo-form-inline\" label-width=\"fit-content\">\r\n                        <div class=\"warning\">\r\n                            <p class=\"board-title\">自动保存</p>\r\n                            <i class=\"el-icon-warning\" style=\"color: #409eff; margin: 0 3px 0 10px\"></i\r\n                            >自动保存可以使系统在异常关闭后自动恢复。在这种情况下，缓存数据将会丢失，但所有存储数据将被保存。\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=\"fit-content\" style=\"margin-top:15px\">\r\n                        <div class=\"warning\" v-if=\"false\">\r\n                          <p class=\"board-title\">重置分析</p>\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 v-if=\"false\" type=\"primary\" @click=\"handleagain()\" size=\"small\" style=\"width: 150px\">重置</el-button>\r\n                        <div class=\"warning\" style=\"margin-top:15px\" @click=\"handleContent('postion')\">\r\n                            <i :class=\"contentShow.postion==false?'el-icon-arrow-right':'el-icon-arrow-down'\" style=\"font-weight: 600;font-size: 18px;margin-right: 5px;\" ></i>\r\n                            <p class=\"board-title\">相机位置</p>\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=\"相机位置：\" v-if=\"contentShow.postion\">\r\n                            <el-input v-model=\"sizeForm.longitude\" size=\"small\" style=\"width: 150px\" placeholder=\"经度\"></el-input>\r\n                            <el-input v-model=\"sizeForm.latitude\" size=\"small\" style=\"width: 150px; margin-left: 20px\" placeholder=\"纬度\"></el-input>\r\n                        </el-form-item>\r\n                    </el-form>\r\n                    <div style=\"margin-top: 15px\" v-if=\"contentShow.postion\">\r\n                        <el-button type=\"primary\" @click=\"handSaveitude()\" size=\"small\" style=\"width: 150px\">保存</el-button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"dataBoard\">\r\n                <div class=\"section\">\r\n                    <div class=\"warning\" @click=\"handleContent('coordinate')\">\r\n                        <i :class=\"contentShow.coordinate==false?'el-icon-arrow-right':'el-icon-arrow-down'\" style=\"font-weight: 600;font-size: 18px;margin-right: 5px;\" ></i>\r\n                        <p class=\"board-title\">坐标转换</p>\r\n                        <i class=\"el-icon-warning\" style=\"color: #409eff; margin: 0 3px 0 10px\"></i\r\n                        >通过将图像坐标系转换为物理坐标系，地理参考使您能够将像素测量转换为真实速度和距离。\r\n                    </div>\r\n                    <el-form ref=\"form\" :model=\"coordinateForm\" label-width=\"fit-content\" v-if=\"contentShow.coordinate\">\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=\"UTM区：\"  class=\"otherThings\">\r\n                                <el-input-number v-model=\"coordinateForm.num\" controls-position=\"right\" :precision=\"0\"  size=\"small\" :min=\"1\" :max=\"60\"></el-input-number>\r\n                                <div class=\"warning\" style=\"margin:0px\">\r\n                                    <i class=\"el-icon-warning\" style=\"color: #409eff; margin: 0 3px 0 10px\"></i\r\n                                    >地理参照允许测量物理速度和静态图像源的距离,值范围1-60。\r\n                                </div>\r\n                        </el-form-item>\r\n                        <el-form-item label=\"半球：\" >\r\n                          <el-select size=\"small\" v-model=\"coordinateForm.value\" placeholder=\"请选择\">\r\n                              <el-option\r\n                                v-for=\"(item) in options\"\r\n                                :key=\"item.value\"\r\n                                :label=\"item.label\"\r\n                                :value=\"item.value\">\r\n                              </el-option>\r\n                            </el-select>\r\n                        </el-form-item>\r\n                        <el-form-item label=\"坐标转换：\" >\r\n                            <el-radio-group v-model=\"coordinateForm.coordinateTransformation\">\r\n                                <el-radio label=\"WGS-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: 702px; margin-bottom: 10px\" >\r\n                            <iframe\r\n                                ref=\"analysisWeb\"\r\n                                src=\"./analysisWeb/index.html\"\r\n                                frameborder=\"0\"\r\n                                style=\"width: 100%; height: 100%\"\r\n                            ></iframe>\r\n                        </div>\r\n                        <div class=\"warning\">\r\n                            <el-button\r\n                                size=\"mini\"\r\n                                type=\"primary\"\r\n                                style=\"color: #fffff\"\r\n                                @click=\"dialogVisible = true\"\r\n                                >新增点\r\n                            </el-button>\r\n                            <i class=\"el-icon-warning\" style=\"color: #409eff; margin: 0 3px 0 10px\"></i\r\n                            >请至少配置4个点，不满足4个点会没有数据。\r\n                        </div>\r\n                        <el-table border :data=\"coordinateTableData\" >\r\n                            <template slot=\"empty\">\r\n                              <el-empty :image-size=\"100\" description='暂无数据'></el-empty>\r\n                            </template>\r\n                            <el-table-column prop=\"pointName\" label=\"点名称\" align=\"center\">\r\n                                <template slot-scope=\"scope\">\r\n                                    <el-input :disabled=\"scope.row.btnShow == '1'?true:false\"  v-model=\"scope.row.pointName\" maxlength=\"30\" placeholder=\"请输入\" @blur=\"updateName($event)\"/>\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 :disabled=\"scope.row.btnShow == '1'?true:false\"  v-model=\"scope.row.longitude\" maxlength=\"20\" placeholder=\"请输入\" />\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 :disabled=\"scope.row.btnShow == '1'?true:false\" v-model=\"scope.row.latitude\" maxlength=\"20\" placeholder=\"请输入\" />\r\n                                </template>\r\n                            </el-table-column>\r\n                            <el-table-column prop=\"oldName\" label=\"旧名字\" align=\"center\" v-if=\"laneform.laneClose == true\">\r\n                                <template slot-scope=\"scope\">\r\n                                    <el-input  v-model=\"scope.row.oldName\" maxlength=\"20\" placeholder=\"请输入\" />\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                                        size=\"mini\"\r\n                                        type=\"text\"\r\n                                        style=\"color: #2090c1\"\r\n                                        v-if=\"scope.row.btnShow == '1'?true:false\"\r\n                                        @click=\"handleExit(scope.row,scope.$index)\"\r\n                                        >编辑\r\n                                    </el-button>\r\n                                    <el-button\r\n                                        size=\"mini\"\r\n                                        type=\"text\"\r\n                                        style=\"color: #2090c1\"\r\n                                        v-else\r\n                                        @click=\"handleconfirm(scope.row,scope.$index)\"\r\n                                        >确认编辑\r\n                                    </el-button>\r\n                                    <el-button\r\n                                        size=\"mini\"\r\n                                        type=\"text\"\r\n                                        style=\"color: #f56c6c\"\r\n                                        @click=\"handleDeleteDian(scope.row)\"\r\n                                        >删除\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\r\n                                type=\"primary\"\r\n                                :disabled=\"coordinateTableData.length<4\"\r\n                                @click=\"handlePos()\"\r\n                                size=\"small\"\r\n                                style=\"width: 150px\"\r\n                                >保存</el-button\r\n                            >\r\n                        </div>\r\n                    </el-form>\r\n                </div>\r\n            </div>\r\n            <div class=\"dataBoard\" v-if=\"false\">\r\n                <div class=\"section\">\r\n                    <div class=\"warning\">\r\n                        <p class=\"board-title\">车道识别配置</p>\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: 400px\" v-if=\"laneform.laneClose == true\">\r\n                            <iframe id=\"mapModule\" src=\"./VideoWeb/index.html\" frameborder=\"0\" style=\"width: 100%; height: 100%\"></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\r\n                            label=\"自动识别各车道中心点坐标（断面检测器）：\"\r\n                            style=\"width: 300px\"\r\n                            v-if=\"laneform.laneClose == true\"\r\n                        >\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\"\r\n                            >保存</el-button\r\n                        >\r\n                    </el-form>\r\n                </div>\r\n            </div>\r\n            <div class=\"dataBoard\" v-if=\"false\">\r\n                <div class=\"section\">\r\n                    <div class=\"warning\">\r\n                      <p class=\"board-title\">识别区域</p>\r\n                        <i class=\"el-icon-warning\" style=\"color: #409eff; margin: 0 3px 0 10px\"></i\r\n                        >您可以自定义进行视频分析的区域，区域之外的部分将被忽略。此功能可以帮助您检测和跟踪高分辨率视频特定部分的较小对象，实现检测器的数字变焦功能。\r\n                    </div>\r\n                    \r\n\r\n                    <el-form ref=\"form\" :model=\"identificationAreaform\" label-width=\"fit-content\">\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: 400px\" v-if=\"identificationAreaform.identificationAreaClose == true\">\r\n                            <iframe id=\"mapModule\" src=\"./VideoWeb/index.html\" frameborder=\"0\" style=\"width: 100%; height: 100%\"></iframe>\r\n                        </div>\r\n                        <el-button\r\n                            type=\"primary\"\r\n                            @click=\"handleagain()\"\r\n                            size=\"small\"\r\n                            style=\"width: 150px\"\r\n                            v-if=\"identificationAreaform.identificationAreaClose == true\"\r\n                            >保存</el-button\r\n                        >\r\n                    </el-form>\r\n                </div>\r\n            </div>\r\n            <div class=\"dataBoard\" v-if=\"false\">\r\n                <div class=\"section\">\r\n                    <div class=\"warning\">\r\n                      <p class=\"board-title\">轨迹平滑</p>\r\n                        <i class=\"el-icon-warning\" style=\"color: #409eff; margin: 0 3px 0 10px\"></i\r\n                        >为轨迹预测滤波算法定义细化轨迹的时间窗口。数值越小，延迟越小，适用于实时性要求高的场景；数值越大，轨迹的连续性越好，目标即使越过一些障碍也不容易丢失。\r\n                    </div>\r\n                    <el-form ref=\"form\" :model=\"trajectorySmoothingform\" label-width=\"fit-content\">\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\r\n                            label=\"预测滤波时间：\"\r\n                            style=\"width: 250px\"\r\n                            v-if=\"trajectorySmoothingform.trajectorySmoothingClose == true\"\r\n                        >\r\n                            <el-input-number\r\n                                v-model=\"trajectorySmoothingform.time\"\r\n                                @change=\"handleChange\"\r\n                                :min=\"2000\"\r\n                                :max=\"3000\"\r\n                                label=\"预测滤波时间\"\r\n                            ></el-input-number>\r\n                        </el-form-item>\r\n                        <el-button\r\n                            type=\"primary\"\r\n                            @click=\"handleagain()\"\r\n                            size=\"small\"\r\n                            style=\"width: 150px\"\r\n                            v-if=\"trajectorySmoothingform.trajectorySmoothingClose == true\"\r\n                            >保存</el-button\r\n                        >\r\n                    </el-form>\r\n                </div>\r\n            </div>\r\n            <div class=\"dataBoard\">\r\n                <div class=\"section\">\r\n                    <div class=\"warning\" @click=\"handleContent('plate')\">\r\n                      <i :class=\"contentShow.plate==false?'el-icon-arrow-right':'el-icon-arrow-down'\" style=\"font-weight: 600;font-size: 18px;margin-right: 5px;\" ></i>\r\n                      <p class=\"board-title\">车牌识别</p>\r\n                        <i class=\"el-icon-warning\" style=\"color: #409eff; margin: 0 3px 0 10px\"></i\r\n                        >车牌识别开关。牌照信息表示与目标属性。（断面号牌，与断面设置关联）\r\n                    </div>\r\n                    <el-form ref=\"form\" :model=\"licensePlateform\" label-width=\"fit-content\" v-if=\"contentShow.plate\">\r\n                        <el-form-item label=\"车牌识别开关：\">\r\n                            <el-switch v-model=\"licensePlateform.licensePlateClose\" active-value=\"1\" inactive-value=\"0\" @change=\"changeChepai($event)\"></el-switch>\r\n                        </el-form-item>\r\n                        <!-- <div style=\"width: 100%; height: 400px; margin-bottom: 10px\" v-if=\"licensePlateform.licensePlateClose == true\"> -->\r\n                        <div style=\"width: 100%; height: 400px; margin-bottom: 10px\" v-if=\"false\">\r\n                            <iframe id=\"mapModule\" src=\"./VideoWeb/index.html\" frameborder=\"0\" style=\"width: 100%; height: 100%\"></iframe>\r\n                        </div>\r\n                        <!-- <el-table border :data=\"licensePlateTableData\" v-if=\"licensePlateform.licensePlateClose == true\"> -->\r\n                        <el-table border :data=\"licensePlateTableData\" v-if=\"false\">\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\" v-if=\"false\">\r\n                            <el-button\r\n                                type=\"primary\"\r\n                                @click=\"handleagain()\"\r\n                                size=\"small\"\r\n                                style=\"width: 150px\"\r\n                                v-if=\"licensePlateform.licensePlateClose == true\"\r\n                                >保存</el-button\r\n                            >\r\n                        </div>\r\n                    </el-form>\r\n                </div>\r\n            </div>\r\n            <div class=\"dataBoard\">\r\n                <div class=\"section\">\r\n                    <div class=\"warning\" @click=\"handleContent('parking')\">\r\n                      <i :class=\"contentShow.parking==false?'el-icon-arrow-right':'el-icon-arrow-down'\" style=\"font-weight: 600;font-size: 18px;margin-right: 5px;\" ></i>\r\n                      <p class=\"board-title\">停车状态</p>\r\n                        <i class=\"el-icon-warning\" style=\"color: #409eff; margin: 0 3px 0 10px\"></i\r\n                        >位移、速度，例如位移＜δ，速度＜v，则判断车辆停车\r\n                    </div>\r\n                    <el-form :inline=\"true\" :model=\"stopStateform\" class=\"demo-form-inline\" label-width=\"fit-content\" v-if=\"contentShow.parking\">\r\n                        <el-form-item label=\"位移：\" style=\"margin-right:10px\">\r\n                            <el-input-number\r\n                                v-model=\"stopStateform.displacement\"\r\n                                @change=\"handleChange\"\r\n                                :min=\"0\"\r\n                                :max=\"3000\"\r\n                                label=\"位移\"\r\n                            ></el-input-number>\r\n                        </el-form-item>\r\n                        <el-form-item label=\"速度：\" style=\"margin-right:10px\">\r\n                            <el-input-number\r\n                                v-model=\"stopStateform.speed\"\r\n                                @change=\"handleChange\"\r\n                                :min=\"0\"\r\n                                :max=\"3000\"\r\n                                label=\"速度\"\r\n                            ></el-input-number>\r\n                        </el-form-item>\r\n                        <el-form-item label=\"加速度：\" v-if=\"false\"> \r\n                            <el-input-number\r\n                                v-model=\"stopStateform.acceleration\"\r\n                                @change=\"handleChange\"\r\n                                :min=\"2000\"\r\n                                :max=\"3000\"\r\n                                label=\"加速度\"\r\n                            ></el-input-number>\r\n                        </el-form-item>\r\n                    </el-form>\r\n                    <div style=\"margin-top: 15px\" v-if=\"contentShow.parking\">\r\n                        <el-button type=\"primary\" @click=\"handleParking()\" size=\"small\" style=\"width: 150px\">保存</el-button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"dataBoard\" v-if=\"false\">\r\n                <div class=\"section\">\r\n                    <div class=\"warning\">\r\n                      <p class=\"board-title\">通信设置</p>\r\n                              <i class=\"el-icon-warning\" style=\"color: #409eff; margin: 0 3px 0 10px\"></i>更新频率可以根据链路带宽进行设置。\r\n                    </div>\r\n                    <el-form :model=\"communicationform\" class=\"demo-form-inline\" label-width=\"fit-content\">\r\n                        <el-form-item label=\"更新频率：\">\r\n                            <el-input v-model=\"communicationform.renewalFrequency\" style=\"width: 200px\"></el-input>\r\n                        </el-form-item>\r\n                        \r\n                        <el-form-item label=\"类型：\" style=\"display:flex\">\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            </div>\r\n            <el-dialog\r\n              title=\"新增点\"\r\n              :visible.sync=\"dialogVisible\"\r\n              width=\"30%\"\r\n              >\r\n              <el-form ref=\"addform\" :rules=\"formRules\"  :model=\"addDianForm\" label-position=\"left\" label-width=\"85px\">\r\n                  <el-form-item label=\"点名称：\" prop=\"pointName\" style=\"margin-bottom:15px\">\r\n                    <el-col :span=\"16\">\r\n                      <el-input v-model=\"addDianForm.pointName\" placeholder=\"请输入点名称\"  @blur=\"phoneChange($event)\"></el-input>\r\n                    </el-col>\r\n                  </el-form-item>\r\n                  <el-form-item label=\"经度：\" style=\"margin-bottom:15px\" prop=\"longitude\">\r\n                    <el-col :span=\"16\">\r\n                      <el-input v-model=\"addDianForm.longitude\" oninput =\"value=value.replace(/[^0-9.]/g,'')\"  placeholder=\"请输入经度\"></el-input>\r\n                    </el-col>\r\n                  </el-form-item>\r\n                  <el-form-item label=\"纬度：\" prop=\"latitude\">\r\n                    <el-col :span=\"16\">\r\n                      <el-input v-model=\"addDianForm.latitude\" oninput =\"value=value.replace(/[^0-9.]/g,'')\"  placeholder=\"请输入纬度\"></el-input>\r\n                    </el-col>\r\n                  </el-form-item>\r\n                  <el-form-item label=\"旧名称：\" prop=\"latitude\" v-if=\"laneform.laneClose == true\">\r\n                    <el-col :span=\"16\">\r\n                      <el-input v-model=\"addDianForm.oldName\"></el-input>\r\n                    </el-col>\r\n                  </el-form-item>\r\n              </el-form>\r\n              <span slot=\"footer\" class=\"dialog-footer\">\r\n                <el-button @click=\"dialogVisible = false\">取 消</el-button>\r\n                <el-button type=\"primary\" @click=\"handleDian('addform')\">确 定</el-button>\r\n              </span>\r\n            </el-dialog>\r\n    </div>\r\n</template>\r\n  \r\n  <script>\r\nimport mqtt from 'mqtt'; // mqtt协议\r\nimport {getFeixpz,setCameraPosition,setLicensePlate,setParkingStatus,setFeixzbzh} from \"@/api/index\";\r\nexport default {\r\n     props:{\r\n        analysisConfigurationdata: {\r\n      default: () => false,\r\n            type: Object,\r\n            required: true\r\n        },\r\n    },\r\n    data() {\r\n        return {\r\n            unityDone:false,\r\n            oldName:'',\r\n          formRules:{\r\n            pointName: [\r\n              { required: true, message: '请输入点名称', trigger: 'blur' },\r\n            ],\r\n            longitude: [\r\n              { required: true, message: '请输入经度', trigger: 'blur' },\r\n            ],\r\n            latitude: [\r\n              { required: true, message: '请输入纬度', trigger: 'blur' },\r\n            ],\r\n          },\r\n          addDianForm:{\r\n            pointName:'',\r\n            longitude:\"\",\r\n            latitude:'',\r\n            oldName:''\r\n          },\r\n          dialogVisible: false,\r\n          coordinateTransformationId:'',\r\n          AnalysisSettingId:'',\r\n          contentShow:{\r\n            postion:true,\r\n            coordinate:false,\r\n            plate:true,\r\n            parking:true\r\n          },\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                longitude:'',\r\n                latitude:''\r\n            },\r\n            formInline: {\r\n                user: '',\r\n                region: ''\r\n            },\r\n            //最上部表单\r\n            topForm: {},\r\n            //坐标转换\r\n            coordinateForm: {\r\n                coordinateClose: false,\r\n                model: 'Georeferencing',\r\n                coordinateTransformation: '84坐标系',\r\n                value: '0',\r\n                num: 1\r\n            },\r\n            options: [{\r\n              value: '南',\r\n              label: '南'\r\n            }, {\r\n              value: '北',\r\n              label: '北'\r\n            }],\r\n            coordinateTableData: [\r\n                {\r\n                    name: '11',\r\n                    longitude: '111',\r\n                    inIp: '01',\r\n                    latitude: '',\r\n                    oldName:''\r\n                },\r\n                {\r\n                    name: '22',\r\n                    longitude: '222',\r\n                    inIp: '02',\r\n                    latitude: '',\r\n                    oldName:''\r\n                },\r\n                {\r\n                    name: '33',\r\n                    longitude: '333',\r\n                    inIp: '03',\r\n                    latitude: '',\r\n                    oldName:''\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: 0\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                {\r\n                    thresholdValue: '22',\r\n                    sectionPlate: '222',\r\n                    inIp: '02',\r\n                    setAssociation: ''\r\n                },\r\n                {\r\n                    thresholdValue: '33',\r\n                    sectionPlate: '333',\r\n                    inIp: '03',\r\n                    setAssociation: ''\r\n                }\r\n            ],\r\n            //停车状态\r\n            stopStateform: {\r\n                displacement: '2000',\r\n                speed: '2000',\r\n                acceleration: '2000'\r\n            },\r\n            //通信设置\r\n            communicationform: {\r\n                type: '快速-用于高带宽连接',\r\n                renewalFrequency: ''\r\n            },\r\n            form: {\r\n                name: '',\r\n                region: '',\r\n                date1: '',\r\n                date2: '',\r\n                delivery: false,\r\n                type: [],\r\n                resource: '',\r\n                desc: ''\r\n            },\r\n            tableData: [\r\n                {\r\n                    name: '11',\r\n                    inPort: '111',\r\n                    inIp: '01'\r\n                },\r\n                {\r\n                    name: '22',\r\n                    inPort: '222',\r\n                    inIp: '02'\r\n                },\r\n                {\r\n                    name: '33',\r\n                    inPort: '333',\r\n                    inIp: '03'\r\n                }\r\n            ],\r\n            internalIpList: [],\r\n            fileList: []\r\n        };\r\n    },\r\n    watch:{\r\n        analysisConfigurationdata:{\r\n            handler:function(old,newV){\r\n                // console.log(\"old\",old)\r\n                // console.log(\"newV\",newV)\r\n                if(newV!=null&&this.unityDone==true){\r\n                    console.log(newV,'yyy');\r\n                    this.$refs.analysisWeb.contentWindow.getDestination(newV)\r\n                }\r\n            }\r\n        }\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        getFeixpz({VideoId:this.$route.query.id}).then(res=>{\r\n            this.sizeForm.longitude = res.data.data.cameraPositionLongitude\r\n            this.sizeForm.latitude = res.data.data.cameraPositionLatitude\r\n            this.coordinateForm.num = res.data.data.utmArea=='-1'?'':res.data.data.utmArea\r\n            this.coordinateForm.value = res.data.data.hemisphere\r\n            this.coordinateForm.coordinateTransformation = res.data.data.coordinateTransformation\r\n            this.coordinateTableData = res.data.data.pointData!=null?res.data.data.pointData:[]\r\n            this.licensePlateform.licensePlateClose = res.data.data.licensePlateRecognitionSwitch\r\n            this.stopStateform.displacement = res.data.data.parkingDisplacement\r\n            this.stopStateform.speed = res.data.data.parkingSpeed\r\n            this.AnalysisSettingId = res.data.data.analysisSettingId\r\n            this.coordinateTransformationId = res.data.data.coordinateTransformationId\r\n            this.coordinateTableData.forEach(item=>{\r\n                item.btnShow='1'\r\n            })\r\n        })\r\n        \r\n    },\r\n    mounted(){\r\n        window.OnSceneload = this.OnSceneload;\r\n        window.saveCoordinate = this.saveCoordinate;\r\n    },\r\n    methods: {\r\n        saveCoordinate(obj){\r\n            console.log(obj);\r\n            this.coordinateTableData.forEach(item=>{\r\n                if(item.pointName == obj.pointName){\r\n                    item.imageXCoordinate=obj.imageXCoordinate\r\n                    item.imageYCoordinate=obj.imageYCoordinate\r\n                }\r\n            })\r\n        },\r\n        updateName(val){\r\n            console.log(\"val\",val.target.value);\r\n        },\r\n        handleExit(row,index){\r\n            // this.oldName = row.pointName\r\n            row.oldName = row.pointName\r\n            console.log(this.coordinateTableData,'12312');\r\n            this.$refs.analysisWeb.contentWindow.exitPoint(row.pointName)\r\n            this.coordinateTableData.forEach((item,index)=>{\r\n                if(row.pointName == item.pointName){\r\n                    item.btnShow = '2'\r\n                    this.$set(this.coordinateTableData,index,item)\r\n                }\r\n            })\r\n        },\r\n        handleconfirm(row,index){\r\n            var bol =  this.coordinateTableData.some((item,indexa)=>item.pointName==row.pointName&&indexa!=index)\r\n            if(bol==true){\r\n                this.$message({\r\n                        type: 'info',\r\n                        message: '该点位已存在'\r\n                }); \r\n                return false\r\n            }\r\n            var string = row.oldName+','+row.pointName\r\n            this.$refs.analysisWeb.contentWindow.saveDian(string)\r\n            this.coordinateTableData.forEach((item,indexnew)=>{\r\n                if(row.pointName == item.pointName){\r\n                    item.btnShow = '1'\r\n                    this.$set(this.coordinateTableData,indexnew,item)\r\n                }\r\n            })\r\n           \r\n        },\r\n        OnSceneload(newV){\r\n            this.$refs.analysisWeb.contentWindow.getDianwei(this.$route.query.id)\r\n            this.unityDone=true\r\n        },\r\n      handleDeleteDian(row){\r\n        this.$confirm('此操作将删除该点位, 是否继续?', '提示', {\r\n          confirmButtonText: '确定',\r\n          cancelButtonText: '取消',\r\n          type: 'warning'\r\n        }).then(() => {\r\n          this.coordinateTableData = this.coordinateTableData.filter(item => item.pointName!=row.pointName )\r\n          this.$refs.analysisWeb.contentWindow.deletePoint(row.pointName)\r\n          this.$message({\r\n            type: 'success',\r\n            message: '删除成功!'\r\n          });\r\n        }).catch(() => {\r\n          this.$message({\r\n            type: 'info',\r\n            message: '已取消删除'\r\n          });          \r\n        });\r\n      },\r\n      handleDian(formName){\r\n        this.$refs[formName].validate((valid) => {\r\n          if (valid) {\r\n            console.log(this.addDianForm,'addDianForm,,,');\r\n            var bol =  this.coordinateTableData.some(item=>item.pointName==this.addDianForm.pointName)\r\n            console.log(bol,'bol');\r\n            if(bol==true){\r\n                this.$message({\r\n                        type: 'info',\r\n                        message: '该点位已存在'\r\n                }); \r\n                return false\r\n            }\r\n            \r\n            this.addDianForm.btnShow = '2'\r\n            this.oldName = this.addDianForm.pointName\r\n            this.coordinateTableData.unshift(this.addDianForm)\r\n            this.dialogVisible = false\r\n            this.$refs.analysisWeb.contentWindow.setPOS(this.addDianForm.pointName)\r\n            this.addDianForm={}\r\n           \r\n          } else {\r\n            return false;\r\n          }\r\n        });\r\n      },\r\n       phoneChange(e) {\r\n        console.log(\"e\", e.currentTarget.value);\r\n        this.addDianForm.oldName = e.currentTarget.value\r\n        },\r\n      handleClose(done) {\r\n        this.$confirm('确认关闭？')\r\n          .then(_ => {\r\n            done();\r\n          })\r\n          .catch(_ => {});\r\n      },\r\n      // 坐标转换接口\r\n      handlePos(){\r\n        let params = {\r\n          CoordinateTransformationId:this.coordinateTransformationId,\r\n          UTMArea:this.coordinateForm.num==''?'-1':this.coordinateForm.num,\r\n          Hemisphere:this.coordinateForm.value,\r\n          CoordinateTransformation:this.coordinateForm.coordinateTransformation,\r\n          PointData:this.coordinateTableData\r\n        }\r\n        console.log(\"params\",JSON.stringify(params))\r\n        setFeixzbzh(params).then(res=>{\r\n          this.$message({\r\n              type: 'success',\r\n                 message: res.data.msg,\r\n          });\r\n        })\r\n      },\r\n      // 停车状态\r\n      handleParking(){\r\n        const params = new URLSearchParams();\r\n        params.append('AnalysisSettingId', this.AnalysisSettingId)\r\n        params.append('ParkingDisplacement',this.stopStateform.displacement)\r\n        params.append('ParkingSpeed',this.stopStateform.speed)\r\n        setParkingStatus(params).then(res=>{\r\n          this.$message({\r\n              type: 'success',\r\n                message: res.data.msg,\r\n          });\r\n        })\r\n      },\r\n      // 车牌识别\r\n      changeChepai(val){\r\n        console.log(val,'val111');\r\n        const params = new URLSearchParams();\r\n        params.append('AnalysisSettingId', this.AnalysisSettingId)\r\n        params.append('LicensePlateRecognitionSwitch',val)\r\n        setLicensePlate(params).then(res=>{\r\n          this.$message({\r\n              type: 'success',\r\n                message: res.data.msg,\r\n          });\r\n        })\r\n      },\r\n      // 经纬度保存\r\n      handSaveitude(){\r\n        const params = new URLSearchParams();\r\n        params.append('AnalysisSettingId', this.AnalysisSettingId)\r\n        params.append('CameraPositionLongitude', this.sizeForm.longitude)\r\n        params.append('CameraPositionLatitude', this.sizeForm.latitude)\r\n        setCameraPosition(params).then(res=>{\r\n          this.$message({\r\n              type: 'success',\r\n                message: res.data.msg,\r\n          });\r\n        })\r\n      },\r\n      // 收放\r\n      handleContent(val){\r\n        if(val == 'postion'){\r\n          this.contentShow.postion = !this.contentShow.postion\r\n        }\r\n        if(val == 'coordinate'){\r\n          this.contentShow.coordinate = !this.contentShow.coordinate\r\n        }\r\n        if(val == 'plate'){\r\n          this.contentShow.plate = !this.contentShow.plate\r\n        }\r\n        if(val == 'parking'){\r\n          this.contentShow.parking = !this.contentShow.parking\r\n        }\r\n      },\r\n      handleChange(value) {\r\n        console.log(value);\r\n      },\r\n        load() {\r\n            console.log('1111');\r\n            var iframe = document.getElementById('mapModuleTop');\r\n            console.log('iframe', iframe);\r\n            iframe.onload = () => {\r\n                // setTimeout(() => {\r\n                this.testMqtt();\r\n                // }, 5000);\r\n            };\r\n        },\r\n        testMqtt() {\r\n            console.log('222');\r\n            this.getDataByMqtt();\r\n        },\r\n        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        getReverseShellList() {\r\n            //   getShellList().then(res => {\r\n            //     if (res.code === 200) {\r\n            //       if (res.data && res.data.length > 0) {\r\n            //       \t// 获取到的数据加上 isEdit是false， 默认是文本\r\n            //         res.data.forEach(item => {\r\n            //           item['isEdit'] = false\r\n            //         })\r\n            //       }\r\n            //   this.tableData = res.data\r\n            // 在表格列表前插入一行，用来新增数据\r\n            this.tableData.unshift({\r\n                name: '',\r\n                inIp: '',\r\n                inPort: null,\r\n                outPort: null,\r\n                enabled: null,\r\n                isEdit: true\r\n            });\r\n            //     }\r\n            //   })\r\n        },\r\n        // 新增按钮\r\n        handleAdd(row) {\r\n            for (let key in row) {\r\n                // 判断一行字段是否输入完整\r\n                if (row[key] === '' || row[key] === null || typeof row[key] === 'undefined') {\r\n                    this.msgError('Please complete the information');\r\n                    return;\r\n                }\r\n            }\r\n            const params = {\r\n                name: row.name,\r\n                inIp: row.inIp\r\n                // inPort: parseInt(row.inPort),\r\n                // outPort: parseInt(row.outPort),\r\n                // enabled: row.enabled\r\n            };\r\n            this.getReverseShellList();\r\n            //   addShell(params).then(res => {\r\n            //     if (res.code === 200) {\r\n            //       this.msgSuccess('Add reverse shell successfully')\r\n            //       row.isEdit = false\r\n            //       this.getReverseShellList()\r\n            //     }\r\n            //   })\r\n        },\r\n        // 编辑或者Apply按钮\r\n        handleUpdate(row) {\r\n            // 点击Apply时\r\n            if (row.isEdit) {\r\n                for (let key in row) {\r\n                    if (row[key] === '' || row[key] === null || typeof row[key] === 'undefined') {\r\n                        this.msgError('Please complete the information');\r\n                        return;\r\n                    }\r\n                }\r\n                const params = {\r\n                    name: row.name,\r\n                    inIp: row.inIp,\r\n                    inPort: parseInt(row.inPort),\r\n                    outPort: parseInt(row.outPort),\r\n                    enabled: row.enabled\r\n                };\r\n                // updateShell(params).then(res => {\r\n                //   if (res.code === 200) {\r\n                //     this.msgSuccess('Update reverse shell successfully')\r\n                //     this.getReverseShellList()\r\n                //   }\r\n                // })\r\n            } else {\r\n                // 点击编辑时\r\n                row.isEdit = true;\r\n            }\r\n        },\r\n        // 删除或取消按钮\r\n        handleDelete(row) {\r\n            // 点击取消时\r\n            if (row.isEdit) {\r\n                this.getReverseShellList();\r\n            } else {\r\n                // 点击删除时\r\n                this.$confirm('Are you sure to delete reverse shell?', 'warning', {\r\n                    confirmButtonText: 'Sure',\r\n                    cancelButtonText: 'Cancel',\r\n                    type: 'warning'\r\n                })\r\n                    .then(() => {\r\n                        //   deleteShell(row.name).then(res => {\r\n                        //     if (res.code === 200) {\r\n                        //       this.msgSuccess('Delete reverse shell successfully')\r\n                        //       this.getReverseShellList()\r\n                        //     }\r\n                        //   })\r\n                    })\r\n                    .catch(() => {});\r\n            }\r\n        },\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            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                this.mqttClient.on('message', (topic, message, packet) => {\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); // 将二进制数据转为字符串\r\n                        const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是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); // 将二进制数据转为字符串\r\n                            const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是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); // 将二进制数据转为字符串\r\n                            const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是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); // 将二进制数据转为字符串\r\n                            const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是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); // 将二进制数据转为字符串\r\n                            const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是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); // 将二进制数据转为字符串\r\n                            const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是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</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.otherThings{\r\n        display: flex;\r\n        flex-flow: row nowrap;\r\n        align-items: center;\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}\r\n.analysis{\r\n  .board-title {\r\n    font-size: 17px;\r\n    font-weight: bolder;\r\n  }\r\n}\r\n.analysis .warning{\r\n  display: flex;\r\n  flex-flow: row nowrap;\r\n  align-items: center;\r\n  margin-bottom: 15px;\r\n  cursor: pointer;\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: 0 15px;\r\n    margin-bottom: 15px;\r\n}\r\n.dataBoard .region,\r\n.dataBoard .section {\r\n    width: 80%;\r\n    //   border: 1px solid gray;\r\n    // border: 1px solid #e4e7ed;\r\n    box-sizing: border-box;\r\n    padding: 0 15px;\r\n    margin-bottom: 15px;\r\n}\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  "]}]}