1 line
60 KiB
JSON
1 line
60 KiB
JSON
{"remainingRequest":"D:\\视频边缘1215\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\视频边缘1215\\TransFlow\\src\\views\\index.vue?vue&type=style&index=0&id=a83bd3b0&scoped=true&lang=css&","dependencies":[{"path":"D:\\视频边缘1215\\TransFlow\\src\\views\\index.vue","mtime":1673491232961},{"path":"D:\\视频边缘1215\\TransFlow\\node_modules\\css-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\视频边缘1215\\TransFlow\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":1671074747916},{"path":"D:\\视频边缘1215\\TransFlow\\node_modules\\postcss-loader\\src\\index.js","mtime":1671074746320},{"path":"D:\\视频边缘1215\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1671074740928},{"path":"D:\\视频边缘1215\\TransFlow\\node_modules\\vue-loader\\lib\\index.js","mtime":1671074747916}],"contextDependencies":[],"result":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.el-form-item {\n margin-bottom: 15px;\n}\n\n.content-box::-webkit-scrollbar {\n display: none; /* Chrome Safari */\n}\n.new-dialog{\n width: 49%;\n height: 29%;\n left: calc(26vw);\n top: 71vh;\n bottom: 0 /* right:auto;; */;\n}\n.formBox{\n margin-top: 20px;\n margin-left: 20px;\n}\n/* .new-dialog .el-dialog {\n width:100%!important;\n margin: 0vh auto !important;\n margin-top: 0vh!important;\n} */\n.new-dialog .el-dialog {\n width:100%!important;\n margin: 0 auto 0px!important;\n /* margin-top: 0vh!important; */\n}\n.new-dialog .el-dialog__wrapper::-webkit-scrollbar {\n display: none; /* Chrome Safari */\n}\n.new-dialog .customWidth{\n width: 100%;\nmin-width: 150px;\n}\n.mapModuleApp{\n /* width:100%; */\n width:1600px;\n height:900px;\n display:inline-block;\n border:1px soild #eee;\n}\n\n",{"version":3,"sources":["index.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2rCA;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","file":"index.vue","sourceRoot":"src/views","sourcesContent":["<template>\n <div class=\"content-box\">\n\n <!-- <div class=\"container\"> -->\n <div >\n <el-tabs type=\"border-card\" v-model=\"activeName\">\n <el-tab-pane label=\"xx路口\" name=\"first\" >\n <div class=\"mapModuleApp\">\n <iframe id=\"mapModule\" src=\"./VideoWeb/index.html\" frameborder=\"0\" style=\"width: 100%; height:100%;\" scrolling='no'></iframe>\n <!-- <iframe src=\"./VideoWeb/index.html\" style=\"height: 100%; width: 100%;border: none\" \n ref=\"iframe\"></iframe> -->\n </div>\n <!-- <div style=\"width:20%;height:100%;display:inline-block;border:1px soild #eee;padding:15px;\">\n\n <el-button type=\"primary\" @click=\"dialogFormVisible = true\">断面组件</el-button>\n <el-button type=\"primary\" @click=\"areaComponent = true\">区域组件</el-button>\n <el-button type=\"primary\" @click=\"trajectory=true\">轨迹组件</el-button>\n <el-button type=\"primary\" @click=\"speed = true\">速度组件</el-button>\n <el-button type=\"primary\" @click=\"flow = true\">流量组件</el-button>\n <el-button type=\"primary\" @click=\"indexModule = true\">车头时距</el-button>\n <el-button type=\"primary\" @click=\"indexModule = true\">排队数</el-button>\n <el-button type=\"primary\" @click=\"indexModule = true\">检测数</el-button>\n <el-button type=\"primary\" @click=\"indexModule = true\">延误</el-button>\n <el-button type=\"primary\" @click=\"indexModule = true\">拥堵</el-button>\n\n </div> -->\n \n </el-tab-pane>\n <el-tab-pane label=\"数据看板\" name=\"second\">\n <dataBoard :activeName=\"activeName\"></dataBoard>\n </el-tab-pane>\n <el-tab-pane label=\"分析配置\" name=\"third\">\n <analysisConfiguration></analysisConfiguration>\n </el-tab-pane>\n <el-tab-pane label=\"分析状态\" name=\"fourth\">\n <editModal></editModal>\n </el-tab-pane>\n <el-tab-pane label=\"存储\" name=\"five\">存储</el-tab-pane>\n </el-tabs>\n <!-- <div style=\"width:30%;height:300px;display:inline-block\">\n <img :src='imgUrl' width=\"100%\" height=\"100%\"/>\n </div> \n <div style=\"width:30%;height:300px;display:inline-block\">\n <img :src='imgUrl1' width=\"100%\" height=\"100%\"/>\n </div> \n <div style=\"width:30%;height:300px;display:inline-block\">\n <img :src='imgUrl2' width=\"100%\" height=\"100%\"/>\n </div> \n <div style=\"width:30%;height:300px;display:inline-block\">\n <img :src='imgUrl3' width=\"100%\" height=\"100%\"/>\n </div> \n <div style=\"width:30%;height:300px;display:inline-block\">\n <img :src='imgUrl4' width=\"100%\" height=\"100%\"/>\n </div> \n <div style=\"width:30%;height:300px;display:inline-block\">\n <img :src='imgUrl5' width=\"100%\" height=\"100%\"/>\n </div> -->\n\n </div>\n <!-- <div id=\"dialog\" style=\"height:500px\"> -->\n <!-- <el-dialog class=\"new-dialog\" :title=\"title+'组件'\" :modal=\"false\" :close-on-click-modal=\"false\" :visible.sync=\"dialogFormVisible\" v-alterELDialogMarginTop=\"{marginTop:'0vh'}\" customClass='customWidth' width=\"100%\" @close='closeForm(form)'>\n <el-form ref=\"form\" :model=\"form\" label-width=\"80px\">\n <el-form-item label=\"组件名称\">\n <el-input v-model=\"form.name\"></el-input>\n </el-form-item>\n <el-form-item label=\"断面方向\" v-if=\"form.type=='断面'\">\n <el-select v-model=\"form.Direction\" placeholder=\"请选择类型\">\n <el-option label=\"正向\" value=\"正向\"></el-option>\n <el-option label=\"反向\" value=\"反向\"></el-option>\n <el-option label=\"双向\" value=\"双向\"></el-option>\n </el-select>\n </el-form-item>\n <el-form-item label=\"速度阈值\" v-if=\"form.type=='区域'\">\n <el-input-number v-model=\"form.StoppingSpeed\" :precision=\"1\" :step=\"0.1\"></el-input-number>\n </el-form-item>\n <el-form-item>\n <el-button type=\"primary\" @click=\"onSubmit(form)\">确认</el-button>\n <el-button @click=\"closeFigure(form)\">取消</el-button>\n </el-form-item>\n </el-form>\n \n </el-dialog> -->\n <el-drawer\n class=\"new-dialog\"\n :visible.sync=\"dialogFormVisible\"\n direction=\"btt\"\n custom-class=\"demo-drawer\"\n ref=\"drawer\"\n :modal=\"false\" \n :close-on-click-modal=\"false\"\n v-alterELDialogMarginTop=\"{marginTop:'0vh'}\" customClass='customWidth' width=\"100%\" \n :wrapperClosable=\"false\" \n :with-header=\"false\"\n >\n <div class=\"formBox\">\n <el-form ref=\"form\" :model=\"form\" label-width=\"80px\" :inline=\"true\">\n <el-form-item label=\"组件名称\">\n <el-input v-model=\"form.name\"></el-input>\n </el-form-item>\n <el-form-item label=\"断面方向\" v-if=\"form.type=='断面'\">\n <el-select v-model=\"form.Direction\" placeholder=\"请选择类型\">\n <el-option label=\"正向\" value=\"正向\"></el-option>\n <el-option label=\"反向\" value=\"反向\"></el-option>\n <el-option label=\"双向\" value=\"双向\"></el-option>\n </el-select>\n </el-form-item>\n <!-- <el-form-item label=\"速度阈值\" v-if=\"form.type=='区域'\">\n <el-input-number v-model=\"form.StoppingSpeed\" :precision=\"1\" :step=\"0.1\"></el-input-number>\n </el-form-item> -->\n <el-form-item>\n <el-button type=\"primary\" @click=\"onSubmit(form)\">确认</el-button>\n <el-button @click=\"closeFigure(form)\">取消</el-button>\n </el-form-item>\n </el-form>\n </div> \n \n \n</el-drawer>\n <!-- 组件弹框 -->\n <el-dialog :title=\"componentTitle+'指标组件'\" width=\"40%\" :visible.sync=\"component\">\n <el-form ref=\"form\" :model=\"componentForm\" label-width=\"150px\" @close='closeComponentForm()'>\n <el-form-item label=\"名称：\">\n <el-input v-model=\"componentForm.componentName\"></el-input>\n </el-form-item>\n \n <el-form-item label=\"类型筛选：\" v-if=\"componentForm.componentType=='类型'\">\n <el-checkbox-group v-model=\"componentForm.typeFiltering\" >\n <el-checkbox v-for=\"item in typeData\" :label=\"item\" :key=\"item\" >{{item}}</el-checkbox>\n </el-checkbox-group>\n </el-form-item>\n <el-form-item label=\"数值筛选：\" v-if=\"componentForm.componentType!='OD'\">\n <el-input-number v-model=\"componentForm.startValue\"></el-input-number>\n <el-input-number v-model=\"componentForm.endValue\" style=\"margin-left:5%\"></el-input-number>\n </el-form-item>\n <el-form-item label=\"时间模式：\">\n <el-select v-model=\"componentForm.timeMode\" placeholder=\"请选择时间模式\">\n <el-option label=\"触发\" value=\"touch\"></el-option>\n <el-option label=\"周期时刻\" value=\"timeing\" v-if=\"componentForm.componentType!='排队数'&&componentForm.componentType!='检测数'&&componentForm.componentType!='延误'&&componentForm.componentType!='拥堵'\"></el-option>\n <el-option label=\"周期统计\" value=\"date\" v-if=\"componentForm.componentType!='OD'\"></el-option>\n </el-select>\n </el-form-item>\n <!-- <el-form-item label=\"触发类型：\" v-if=\"componentForm.timeModel=='touch'\">\n <el-radio-group v-model=\"componentForm.touchType\" >\n <el-radio label=\"实时（触发）\"></el-radio>\n <el-radio label=\"间隔\"></el-radio>\n </el-radio-group>\n </el-form-item> -->\n <el-form-item label=\"周期间隔：\">\n <!-- <el-slider v-model=\"componentForm.cycleInterval\" show-input>\n </el-slider> -->\n <el-slider v-model=\"componentForm.cycleInterval\">\n </el-slider>\n <el-select v-model=\"componentForm.company\" placeholder=\"请选择单位\">\n <!-- <el-option label=\"秒\" value=\"ss\"></el-option>\n <el-option label=\"分钟\" value=\"mm\"></el-option>\n <el-option label=\"小时\" value=\"hh\"></el-option>\n <el-option label=\"天\" value=\"dd\"></el-option> -->\n <el-option\n\t\t\t v-for=\"item in timeSelect\"\n\t\t\t :key=\"item.value\"\n\t\t\t :label=\"item.label\"\n\t\t\t :value=\"item.value\"\n\t\t\t ></el-option>\n </el-select>\n </el-form-item>\n <!-- <el-form-item label=\"单位：\" >\n \n </el-form-item> -->\n <el-form-item label=\"起点：\" v-if=\"componentForm.componentType=='OD'\">\n <el-checkbox-group v-model=\"componentForm.startSection\" @change=\"handleCheckedStartSection\">\n <el-checkbox v-for=\"item in sectionals\" :label=\"item.graphicName\" :key=\"item.graphicId\" >{{item.graphicName}}</el-checkbox>\n </el-checkbox-group>\n </el-form-item>\n <el-form-item label=\"终点：\" v-if=\"componentForm.componentType=='OD'\">\n <el-checkbox-group v-model=\"componentForm.endSection\" @change=\"handleCheckedendSection\">\n <el-checkbox v-for=\"item in sectionals\" :label=\"item.graphicName\" :key=\"item.graphicId\" >{{item.graphicName}}</el-checkbox>\n </el-checkbox-group>\n </el-form-item>\n <el-form-item label=\"展现形式：\" v-if=\"componentForm.componentType!='OD'\">\n <el-checkbox-group v-model=\"componentForm.presentation\" @change=\"handlePresentation\">\n <el-checkbox label=\"数值\" name=\"type\" ></el-checkbox>\n <el-checkbox label=\"表格\" name=\"type\" v-if=\"componentForm.componentType!='拥堵'\"></el-checkbox>\n <el-checkbox label=\"时间曲线图\" name=\"type\"></el-checkbox>\n <el-checkbox label=\"直方图\" name=\"type\" v-if=\"componentForm.componentType=='类型'\"></el-checkbox>\n <el-checkbox label=\"饼状图\" name=\"type\" v-if=\"componentForm.componentType=='类型'\"></el-checkbox>\n <el-checkbox label=\"均值图\" name=\"type\" v-if=\"componentForm.componentType!='拥堵'\"></el-checkbox>\n \n </el-checkbox-group>\n <!-- <el-checkbox-group v-model=\"componentForm.presentation\" @change=\"handlePresentation\">\n <el-checkbox v-for=\"item in sectionals\" :label=\"item.graphicName\" :key=\"item.graphicId\" >{{item.graphicName}}</el-checkbox>\n </el-checkbox-group> -->\n </el-form-item>\n \n <el-form-item>\n <el-button type=\"primary\" @click=\"onSubmitComponent(componentForm)\">确认</el-button>\n <el-button @click=\"closeComponent(componentForm)\">取消</el-button>\n </el-form-item>\n </el-form>\n </el-dialog>\n \n \n <!-- </div> -->\n </div>\n</template>\n\n<script>\n\nimport mqtt from \"mqtt\"; // mqtt协议\nimport editModal from \"@/views/bounced/maintenanceRemind\";\nimport analysisConfiguration from \"@/views/bounced/analysisConfiguration\";\nimport dataBoard from \"@/views/bounced/dataBoard\";\nimport {getComponentData,getSectionalData} from \"../api/index\";\nimport serverUrl from \"../config/apiurl.js\"\nimport axios from 'axios'\n// mqtt\n// import mqttHandle from \"../../../utils/mqttHandle\";\nimport mqttConfig from \"@/utils/mqttConfig.js\";\n// var mqtt; //mqtt 处理对象（全局变量）\n// var client;\n// var topicSends; //订阅的topic 例如：[\"Time1\", \"EngineMain1\", \"Console1\", \"Location1\"]\n \nexport default {\n data() {\n return {\n receiveNews: \"\",\n topicSends:['img0','stream0','trajectory0','detection0'],\n trajectory:false,//轨迹\n hideBoxShow: true, //隐藏箱子按钮显示隐藏\n closeStatus: null,\n modelOthers: false,\n componentShow: \"\",\n isShowBtn: true, //菜单按钮隐藏\n isShowBtn1: false, //菜单按钮显示\n inputVal: \"\",\n dialogFormVisible: false,\n areaComponent: false,\n indexModule: false,\n speed: false,\n component:false,\n sectionals:[],\n activeName:'first',\n VideoId:'',\n title:'断面',\n componentTitle:'速度',\n form: {\n name: '',\n type:'',\n id:'',\n coordinate:'',\n Direction:'正向',\n StoppingSpeed:'5'\n },\n //初始图形名称\n startFigureName:'',\n areaComponentform: {\n name: '',\n region: '',\n date1: '',\n date2: '',\n delivery: false,\n type: [],\n resource: '实时（触发）',\n desc: ''\n },\n timeSelect:[\n {\n label:'秒',\n value:'秒' \n },{\n label:'分钟',\n value:'分钟' \n },{\n label:'小时',\n value:'小时' \n },{\n label:'天',\n value:'天' \n }\n ],\n componentForm:{\n //单位\n company: \"秒\",\n componentName: \"\",\n componentParameterId: \"01888e05fac246b29e3a19a27c3d2ab0\",\n //周期间隔\n cycleInterval: \"\",\n startSectionIds: \"\",\n startSectionNames: \"\",\n endSectionIds: \"\",\n endSectionNames: \"\",\n endValue: \"\",\n //展现形式\n presentationForm: \"\",\n presentation:[],\n startValue: \"\",\n timeMode: \"触发\",\n type: \"\",\n startSection:[],\n endSection:[],\n componentType: \"\",\n typeFiltering:''\n },\n typeData:[\"小汽车\",\"公交车\",\"卡车\",\"非机动车\",\"行人\"],\n //展现形式\n presentation:['数值','表格','时间曲线图','均值图'],\n\n trackForm:{\n name:\"\"\n },\n // dateTime: this.$moment(new Date()).format(\"LL\"),\n nowTime: \"\",\n // weekday: this.$moment().format(\"dddd\"),\n ins: 0,\n imgUrl: '',\n imgUrl1: '',\n imgUrl2: '',\n imgUrl3: '',\n imgUrl4: '',\n imgUrl5: '',\n btnPic: [],\n Data: [\n {\n title: 'xx路口',\n url: ''\n },\n {\n title: '数据看板',\n url: ''\n },\n {\n title: '分析配置',\n url: ''\n },\n {\n title: '分析配置',\n url: ''\n }\n ],\n messageInfo: [],\n orderList: [],\n enterList: [],\n stockInfo: [],\n perCent: 0,\n perCent1: 0,\n perCent2: 0,\n facToal: \"\",\n wbContent: '',\n // wxContent:'',\n inContent: '',\n outContent: '',\n containerDetails: \"\",\n locdesc: '',\n weatherItem: {},\n loadingShow1: true,\n number:'',\n componentId:''\n // carInfo: [], //小车信息\n // carName: '',\n // palletizerInfo: [], //码垛机信息\n // palletizerName: '',\n // destackerInfo: [], //拆垛机信息\n // destackerName: '',\n // hoistInfo: [], //提升机信息’\n // hoistName: '',\n // battaryStationInfo: [],//快换电池装置\n // battaryStationName: \"\",\n // conveyorInfo: [], //输送机信息\n // conveyorName: \"\",\n };\n },\n mounted() {\n window.getFigure = this.getFigureD;\n window.getModifyTheName = this.getModifyTheNameN;\n // window.getModifyTheName = this.getModifyTheNameN;\n window.getSingleComponentId = this.getSingleComponentIdN;\n window.getSimulationAreaEdit = this.getSimulationAreaEdit;\n window.OnScene = this.OnSceneN;\n this.getAllSectionalData(this.$route.query.id)\n this.VideoId = this.$route.query.id\n this.number = this.$route.query.num\n // this.getSingleComponentIdN()\n },\n created() {\n this.testMqtt()\n this.componentForm.company = this.timeSelect[0].value;\n// this.createMqtt();\n },\n methods: {\n /** 创建mqtt */\n createMqtt() {\n //创建链接，接收数据\n \n mqtt = new mqttConfig(this.topicSends);\n client = mqtt.createConnect();\n client.subscribe('img'+this.number, { qos: 0 });\n client.subscribe('stream'+this.number, { qos: 0 });\n client.subscribe('trajectory'+this.number, { qos: 0 });\n client.subscribe('detection'+this.number, { qos: 0 });\n client.on(\"message\", (topic, message) => {\n //数据分类\n try {\n this.receiveNews = this.receiveNews.concat(message);\n this.realInfo(topic, this.receiveNews);\n } catch (error) {}\n });\n client.publish('msg_flag', this.number);\n },\n //停止订阅mqtt\n disConnect() {\n if (client != null) {\n client.unsubscribe(this.topicSends);\n client = null;\n }\n },\n /** 实时数据分类 */\n realInfo(topic, message) {\n switch (topic) {\n // 接收托片\n case \"img0\":\n case \"img1\":\n case \"img2\":\n try {\n const utf8decoder = new TextDecoder()\n const u8arr = new Uint8Array(message)\n const temp = utf8decoder.decode(u8arr)\t// 将二进制数据转为字符串\n const msg = JSON.parse(temp)\t\t//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据\n document.getElementById(\"mapModule\").contentWindow.getDestination(JSON.stringify(msg))\n } catch (error) {}\n break;\n // 树结构\n case \"stream0\":\n case \"stream1\":\n case \"stream2\":\n try {\n const utf8decoder1 = new TextDecoder()\n const u8arr = new Uint8Array(message)\n const temp = utf8decoder1.decode(u8arr)\t// 将二进制数据转为字符串\n const msg = JSON.parse(temp)\n document.getElementById(\"mapModule\").contentWindow.getData(JSON.stringify(msg))\n } catch (error) {}\n break;\n // 控制台输出\n case \"trajectory0\":\n case \"trajectory1\":\n case \"trajectory2\":\n case \"trajectory3\":\n try {\n const utf8decoder = new TextDecoder()\n const u8arr = new Uint8Array(message)\n // console.log(\"message11\",message)\n const temp = utf8decoder.decode(u8arr)\t// 将二进制数据转为字符串\n // console.log(\"temp11\",temp)\n const msg = JSON.parse(temp)\n // console.log(\"msg11\",msg)\n document.getElementById(\"mapModule\").contentWindow.getGuiJi(JSON.stringify(msg))\n } catch (error) {}\n break;\n // 模型\n case \"detection0\":\n case \"detection1\":\n case \"detection2\":\n try {\n const utf8decoder = new TextDecoder()\n const u8arr = new Uint8Array(message)\n // console.log(\"message\",message)\n const temp = utf8decoder.decode(u8arr)\t// 将二进制数据转为字符串\n // console.log(\"temp\",temp)\n const msg = JSON.parse(temp)\n // console.log(\"msg\",msg)\n document.getElementById(\"mapModule\").contentWindow.getChuFa(JSON.stringify(msg))\n } catch (error) {}\n break;\n }\n this.receiveNews = \"\";\n },\n // handleClick(tab, event) {\n // console.log(tab, event);\n // },\n // 测试：mqtt测试\n testMqtt() {\n this.getDataByMqtt()\n },\n //初始化unity\n OnSceneN(){\n document.getElementById(\"mapModule\").contentWindow.postVideoId(JSON.stringify(this.$route.query.id))\n },\n // //新增组件根据组件id获取单个组件数据\n getSingleComponentIdN(id,type,name){\n console.log(\"id\",id)\n console.log(\"type\",type)\n console.log(\"name\",name)\n this.componentId = id\n this.componentForm.componentType = type\n this.componentTitle = type\n getComponentData({AnalogAreaComponentId:id}).then(res=>{\n console.log(\"res\",res)\n if(res.data.code==200){\n console.log(\"res\",res.data.data)\n this.component=true\n if(res.data.data.company!=''){\n this.componentForm.company = res.data.data.company\n }\n if(res.data.data.timeMode!=''){\n this.componentForm.timeMode = res.data.data.timeMode\n }\n this.componentForm.componentName = res.data.data.componentName+'-'+type\n this.componentForm.componentParameterId = res.data.data.componentParameterId\n this.componentForm.cycleInterval = res.data.data.cycleInterval\n this.componentForm.startSectionIds = res.data.data.startSectionIds\n this.componentForm.startSectionNames = res.data.data.startSectionNames\n this.componentForm.endSectionIds = res.data.data.endSectionIds\n this.componentForm.endSectionNames = res.data.data.endSectionNames\n this.componentForm.endValue = res.data.data.endValue\n this.componentForm.startValue = res.data.data.startValue\n this.componentForm.presentationForm = res.data.data.presentationForm\n this.componentForm.type = res.data.data.type\n if(res.data.data.startSectionIds!=''){\n console.log(\"startSectionIds\",res.data.data.startSectionIds)\n var startSectionIdArr = []\n var startSectionArr = []\n startSectionIdArr = res.data.data.startSectionIds.split(',')\n console.log(\"this.sectionals\",this.sectionals)\n console.log(\"startSectionIdArr\",startSectionIdArr)\n startSectionIdArr.forEach((item) => {\n this.sectionals.forEach((items) => {\n if (item == items.graphicId) {\n\n startSectionArr.push(items.graphicName);\n this.componentForm.startSection = startSectionArr\n }\n });\n });\n }\n if(res.data.data.endSectionIds!=''){\n console.log(\"endSectionIds\",res.data.data.endSectionIds)\n var endSectionIdArr = []\n var endSectionArr = []\n endSectionIdArr = res.data.data.endSectionIds.split(',')\n console.log(\"this.sectionals\",this.sectionals)\n console.log(\"endSectionIdArr\",endSectionIdArr)\n endSectionIdArr.forEach((item) => {\n this.sectionals.forEach((items) => {\n if (item == items.graphicId) {\n endSectionArr.push(items.graphicName);\n this.componentForm.endSection = endSectionArr\n }\n });\n });\n }\n if(res.data.data.presentationForm!=''){\n var presentationN = []\n presentationN = res.data.data.presentationForm.split(',')\n this.componentForm.presentation = presentationN\n }\n }\n })\n },\n //修改模拟区组件、图形\n getSimulationAreaEdit(id,type,componentType,name){\n if(type=='图形'){\n this.form.id = id\n this.form.name = name\n this.form.type = componentType\n this.startFigureName = name\n if(this.form.type=='轨迹'){\n this.dialogFormVisible = true\n }else if(this.form.type=='区域'){\n this.dialogFormVisible = true\n }else if(this.form.type=='断面'){\n this.dialogFormVisible = true\n }\n }else if(type=='组件'){\n this.componentId = id\n this.componentForm.componentType = componentType\n this.componentTitle = componentType\n getComponentData({AnalogAreaComponentId:id}).then(res=>{\n console.log(\"res\",res)\n if(res.data.code==200){\n console.log(\"res\",res.data.data)\n this.component=true\n if(res.data.data.company!=''){\n this.componentForm.company = res.data.data.company\n }\n if(res.data.data.timeMode!=''){\n this.componentForm.timeMode = res.data.data.timeMode\n }\n this.componentForm.componentName = res.data.data.componentName+'-'+type\n this.componentForm.componentParameterId = res.data.data.componentParameterId\n this.componentForm.cycleInterval = res.data.data.cycleInterval\n this.componentForm.startSectionIds = res.data.data.startSectionIds\n this.componentForm.startSectionNames = res.data.data.startSectionNames\n this.componentForm.endSectionIds = res.data.data.endSectionIds\n this.componentForm.endSectionNames = res.data.data.endSectionNames\n this.componentForm.endValue = res.data.data.endValue\n this.componentForm.startValue = res.data.data.startValue\n this.componentForm.presentationForm = res.data.data.presentationForm\n this.componentForm.type = res.data.data.type\n if(res.data.data.startSectionIds!=''){\n console.log(\"startSectionIds\",res.data.data.startSectionIds)\n var startSectionIdArr = []\n var startSectionArr = []\n startSectionIdArr = res.data.data.startSectionIds.split(',')\n console.log(\"this.sectionals\",this.sectionals)\n console.log(\"startSectionIdArr\",startSectionIdArr)\n startSectionIdArr.forEach((item) => {\n this.sectionals.forEach((items) => {\n if (item == items.graphicId) {\n\n startSectionArr.push(items.graphicName);\n this.componentForm.startSection = startSectionArr\n }\n });\n });\n }\n if(res.data.data.endSectionIds!=''){\n console.log(\"endSectionIds\",res.data.data.endSectionIds)\n var endSectionIdArr = []\n var endSectionArr = []\n endSectionIdArr = res.data.data.endSectionIds.split(',')\n console.log(\"this.sectionals\",this.sectionals)\n console.log(\"endSectionIdArr\",endSectionIdArr)\n endSectionIdArr.forEach((item) => {\n this.sectionals.forEach((items) => {\n if (item == items.graphicId) {\n endSectionArr.push(items.graphicName);\n this.componentForm.endSection = endSectionArr\n }\n });\n });\n }\n if(res.data.data.presentationForm!=''){\n var presentationN = []\n presentationN = res.data.data.presentationForm.split(',')\n this.componentForm.presentation = presentationN\n }\n }\n })\n }\n },\n //获取所有断面数据\n getAllSectionalData(VideoId){\n getSectionalData({VideoId:VideoId}).then(res=>{\n console.log(\"res\",res)\n if(res.data.code==200){\n this.sectionals=res.data.data\n }\n }) \n },\n figureType(type) {\n if (type == 'Move') {\n type = '轨迹'\n } else if (type == 'Poly') {\n type = '区域'\n } else if (type == 'Line') {\n type = '断面'\n }\n return type\n },\n getFigureD(item,index,indexNew){\n console.log(\"图形类型\",item)\n console.log(\"初始图形名称\",index)\n this.startFigureName = index\n console.log(\"图形位置\",indexNew)\n this.dialogFormVisible = true\n this.form.name = index\n this.form.type = this.figureType(item)\n this.form.coordinate = indexNew\n this.form.id = ''\n this.title = this.figureType(item)\n \n \n },\n //双击图形修改图形名称弹框\n getModifyTheNameN(data){\n console.log(\"data\",data)\n var arr = [];\n arr = data.split(',')\n console.log(\"arr\",arr)\n this.form.id = arr[0]\n this.form.name = arr[1]\n this.form.type = arr[2]\n this.startFigureName = arr[1]\n if(this.form.type=='轨迹'){\n // this.open2()\n this.dialogFormVisible = true\n }else if(this.form.type=='区域'){\n this.dialogFormVisible = true\n }else if(this.form.type=='断面'){\n this.dialogFormVisible = true\n }\n },\n //新增、编辑图形确认按钮\n onSubmit(form){ \n console.log(\"form\",form)\n //新增\n if(form.id==''){\n let formData = new FormData();\n if(form.type=='断面'){\n formData.append(\"GraphicName\",form.name);\n formData.append(\"GraphicType\",form.type);\n formData.append(\"Coordinate\",form.coordinate);\n formData.append(\"VideoId\",this.VideoId);\n formData.append(\"Direction\",form.Direction);\n }else if(form.type=='区域'){\n formData.append(\"GraphicName\",form.name);\n formData.append(\"GraphicType\",form.type);\n formData.append(\"Coordinate\",form.coordinate);\n formData.append(\"VideoId\",this.VideoId);\n // formData.append(\"Direction\",form.Direction);\n // formData.append(\"StoppingSpeed\",form.StoppingSpeed);\n }else{\n formData.append(\"GraphicName\",form.name);\n formData.append(\"GraphicType\",form.type);\n formData.append(\"Coordinate\",form.coordinate);\n formData.append(\"VideoId\",this.VideoId);\n // formData.append(\"Direction\",form.Direction);\n }\n \n axios({\n method: \"post\",\n url: serverUrl.addFigure,\n data:formData\n }).then((res) => {\n console.log(\"res\",res)\n \n if(res.data.code==200){\n this.$message({\n message: res.data.msg,\n type: 'success'\n });\n document.getElementById(\"mapModule\").contentWindow.postFigureId(JSON.stringify(res.data.data))\n document.getElementById(\"mapModule\").contentWindow.postFigureName(JSON.stringify(res.data.data+','+form.name+','+this.startFigureName))\n this.dialogFormVisible = false\n }else{\n this.$message({\n message: res.data.msg,\n type: 'warning'\n });\n }\n })\n }else{\n //编辑\n let formData = new FormData();\n if(form.type=='断面'){\n formData.append(\"GraphicName\",form.name);\n formData.append(\"GraphicType\",form.type);\n formData.append(\"Direction\",form.Direction);\n formData.append(\"GraphicId\",form.id);\n }else if(form.type=='区域'){\n formData.append(\"GraphicName\",form.name);\n formData.append(\"GraphicType\",form.type);\n formData.append(\"Direction\",form.Direction);\n formData.append(\"GraphicId\",form.id);\n formData.append(\"StoppingSpeed\",form.StoppingSpeed);\n }else{\n formData.append(\"GraphicName\",form.name);\n formData.append(\"GraphicType\",form.type);\n // formData.append(\"Direction\",form.Direction);\n formData.append(\"GraphicId\",form.id);\n }\n axios({\n method: \"post\",\n url: serverUrl.editFigure,\n data:formData\n }).then((res) => {\n console.log(\"res\",res)\n \n if(res.data.code==200){\n this.$message({\n message: res.data.msg,\n type: 'success'\n });\n console.log(\"startFigureName\",this.startFigureName)\n // document.getElementById(\"mapModule\").contentWindow.postFigureId(JSON.stringify(res.data.data))\n document.getElementById(\"mapModule\").contentWindow.postFigureName(JSON.stringify(form.id+','+form.name+','+this.startFigureName))\n this.dialogFormVisible = false\n }else{\n this.$message({\n message: res.data.msg,\n type: 'warning'\n });\n }\n })\n\n }\n \n },\n //新增编辑组件取消\n onSubmitComponent(componentForm){\n this.component = false\n let formData = new FormData();\n if(componentForm.componentType=='OD'){\n //名称\n formData.append(\"componentName\",componentForm.componentName);\n //单位\n formData.append(\"company\",componentForm.company);\n //id\n formData.append(\"componentParameterId\",componentForm.componentParameterId);\n formData.append(\"cycleInterval\",componentForm.cycleInterval);\n formData.append(\"startSectionIds\",componentForm.startSectionIds);\n formData.append(\"startSectionNames\",componentForm.startSectionNames);\n formData.append(\"endSectionIds\",componentForm.endSectionIds);\n formData.append(\"endSectionNames\",componentForm.endSectionNames);\n formData.append(\"endValue\",componentForm.endValue);\n formData.append(\"startValue\",componentForm.startValue);\n formData.append(\"timeMode\",componentForm.timeMode);\n formData.append(\"presentationForm\",'矩阵图');\n formData.append(\"type\",componentForm.type);\n }else{\n //名称\n formData.append(\"componentName\",componentForm.componentName);\n //单位\n formData.append(\"company\",componentForm.company);\n //id\n formData.append(\"componentParameterId\",componentForm.componentParameterId);\n formData.append(\"cycleInterval\",componentForm.cycleInterval);\n formData.append(\"endValue\",componentForm.endValue);\n formData.append(\"startValue\",componentForm.startValue);\n formData.append(\"timeMode\",componentForm.timeMode);\n formData.append(\"presentationForm\",componentForm.presentationForm);\n formData.append(\"type\",componentForm.type);\n }\n axios({\n method: \"post\",\n url: serverUrl.editComponent,\n data:formData\n }).then((res) => {\n console.log(\"res\",res)\n \n if(res.data.code==200){\n this.$message({\n message: res.data.msg,\n type: 'success'\n });\n document.getElementById(\"mapModule\").contentWindow.postFigureId(JSON.stringify(res.data.data))\n document.getElementById(\"mapModule\").contentWindow.editComponent(JSON.stringify(this.componentId+','+componentForm.componentName))\n this.dialogFormVisible = false\n }else{\n this.$message({\n message: res.data.msg,\n type: 'warning'\n });\n }\n })\n },\n //新增编辑组件取消\n closeComponent(componentForm){\n this.component = false\n }, \n //新增、编辑图形取消按钮\n closeFigure(form){\n console.log(\"form\",form)\n if(form.id!=''){\n this.dialogFormVisible = false\n // document.getElementById(\"mapModule\").contentWindow.closeEdit(JSON.stringify(form.type+','+form.id))\n document.getElementById(\"mapModule\").contentWindow.closeEdit(JSON.stringify(form.type+','+form.id))\n\n }else{\n this.dialogFormVisible = false\n document.getElementById(\"mapModule\").contentWindow.delFigure()\n }\n \n },\n closeComponentForm(){\n this.component = false\n },\n closeForm(form){\n \n if(this.form.id!=''){\n this.dialogFormVisible = false\n document.getElementById(\"mapModule\").contentWindow.closeEdit(JSON.stringify(form.type+','+form.id))\n // document.getElementById(\"mapModule\").contentWindow.closeEdit(form.type,form.id)\n }else{\n this.dialogFormVisible = false\n document.getElementById(\"mapModule\").contentWindow.delFigure()\n }\n },\n //改变起点\n handleCheckedStartSection(value){\n console.log(\"改变起点\",value)\n var startSectionIdArr = []\n var startSectionNameArr = []\n value.forEach((item) => {\n this.sectionals.forEach((items) => {\n if (item == items.graphicName) {\n startSectionIdArr.push(items.graphicId);\n startSectionNameArr.push(items.graphicName);\n let newStartSectionId = startSectionIdArr.join(\",\")\n let newStartSectionName = startSectionNameArr.join(\",\")\n this.componentForm.startSectionIds = newStartSectionId\n this.componentForm.startSectionNames = newStartSectionName\n }\n });\n });\n },\n //改变终点\n handleCheckedendSection(value){\n console.log(\"改变终点\",value)\n var endSectionIdArr = []\n var endSectionNameArr = []\n value.forEach((item) => {\n this.sectionals.forEach((items) => {\n if (item == items.graphicName) {\n endSectionIdArr.push(items.graphicId);\n endSectionNameArr.push(items.graphicName);\n let newendSectionId = endSectionIdArr.join(\",\")\n let newEndSectionName = endSectionNameArr.join(\",\")\n console.log(\"newendSectionId\",newendSectionId)\n console.log(\"newEndSectionName\",newEndSectionName)\n this.componentForm.endSectionIds = newendSectionId\n this.componentForm.endSectionNames = newEndSectionName\n\n }\n });\n });\n },\n //修改展现形式\n handlePresentation(value){\n console.log(\"展现形式\",value)\n let presentation = value.join(\",\")\n this.componentForm.presentationForm = presentation\n console.log(\"this.componentForm.presentationForm\",this.componentForm.presentationForm)\n },\n //模型加载等待\n loadingShow(data) {\n this.loadingShow1 = data\n },\n\n // mqtt订阅（独立）\n getDataByMqtt(url, topic, cIdNum) {\n \n const clientId = \"test_id_\" + String(new Date().getTime()); // 用户名\n // const host = 'ws://49.234.27.18:10087/'; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt\n const host = 'ws://172.16.1.168:10087/';\n\n const options = {\n // 配置\n // 测试：订阅本机IP\n // host: host,\n // port: port,\n // host:\"172.16.1.168:10086\",\n keepalive: 60, // 心跳时间，默认60s，设置为0禁用\n username: 'admin', // 用户名（可选）\n password: '123456', // 密码（可选）\n clientId: clientId, // 客户端ID，默认随机生成\n protocolId: \"MQTT\",\n protocolVersion: 4,\n clean: true, // false在离线时接收QoS1和2的消息\n reconnectPeriod: 2000, // 重连间隔，默认1000毫秒\n connectTimeout: 30 * 1000, // 收到CONNACK之前的等待时间\n will: {\n // 遗嘱消息（客户端严重断开连接时Broker将自动发送的消息）\n topic: \"img1\", // 要发布的主题\n payload: \"[MQTT-TEST] 遗嘱消息：连接异常断开！\", // 要发布的消息\n qos: 0, // QoS(Quality of Service)，QoS0：只负责发，QoS1：保证消息至少送达1次，QoS2：保证消息到且仅到1次\n retain: false, // 保留标志\n },\n };\n if (this.mqttClient == undefined) {\n \n this.mqttClient = mqtt.connect(host, options); // 连接\n // const client = mqtt.connect(host, options); // 连接\n // const client = mqtt.connect(host) // 连接\n // 错误回调\n // console.log(\"this.mqttClient\", this.mqttClient)\n this.mqttClient.on(\"error\", (err) => {\n console.log(\"[MQTT-TEST] 连接错误：\", err);\n this.mqttClient.end();\n });\n // 重连回调\n this.mqttClient.on(\"reconnect\", (reconnect) => {\n console.log(\"[MQTT-TEST] 重连中……\", reconnect);\n });\n \n // 连接回调\n this.mqttClient.on(\"connect\", (connect) => {\n // 订阅\n console.log(\"connect\",connect)\n // this.mqttClient.subscribe('img'+this.number, { qos: 0 });\n // this.mqttClient.subscribe('stream'+this.number, { qos: 0 });\n // this.mqttClient.subscribe('trajectory'+this.number, { qos: 0 });\n // this.mqttClient.subscribe('detection'+this.number, { qos: 0 });\n \n this.mqttClient.subscribe(['img'+this.number,'stream'+this.number, 'trajectory'+this.number, 'detection'+this.number], { qos: 0 }, (err)=> {\n if (!err) {\n console.log(\"订阅成功\");\n //向主题叫“pubtop”发布一则内容为'hello,this is a nice day!'的消息\n // this.mqttClient.publish('msg_stream', JSON.stringify({\"msg_flag\":this.number}));\n // this.mqttClient.publish('msg_stream',JSON.stringify({\"msg_flag\":this.number})) \n // this.mqttClient.publish('aaa', JSON.stringify({\"msg_flag\":parseInt(this.number)}));\n this.mqttClient.publish('msg_stream',JSON.stringify({\"msg_flag\":parseInt(this.number)})) \n } else {\n console.log('消息订阅失败！')\n }\n \n });\n \n console.log(\"1111\",JSON.stringify({\"msg_flag\":parseInt(this.number)}))\n \n \n // this.mqttClient.subscribe('stream1', { qos: 0 });\n // this.mqttClient.subscribe('stream2', { qos: 0 });\n // this.mqttClient.subscribe('stream3', { qos: 0 });\n // this.mqttClient.subscribe('stream4', { qos: 0 });\n // this.mqttClient.subscribe('stream5', { qos: 0 });\n \n });\n // this.mqttClient.publish('msg_flag', this.number);\n // 接收回调\n this.mqttClient.on(\"message\", (topic, message, packet) => {\n \n if (topic.indexOf(\"img0\") != -1) {\n try {\n const utf8decoder = new TextDecoder()\n const u8arr = new Uint8Array(message)\n const temp = utf8decoder.decode(u8arr)\t// 将二进制数据转为字符串\n const msg = JSON.parse(temp)\t\t//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据\n if(msg.rate=='high'){\n document.getElementById(\"mapModule\").contentWindow.getDestination(JSON.stringify(msg))\n }\n \n \n } catch {\n let imageType = 'arraybuffer';\n const blob = new Blob([message], { type: imageType })\n const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)\n // console.log(\"imageUrl\", imageUrl)\n }\n } else if (topic.indexOf(\"trajectory0\") != -1) {\n const utf8decoder = new TextDecoder()\n const u8arr = new Uint8Array(message)\n // console.log(\"message11\",message)\n const temp = utf8decoder.decode(u8arr)\t// 将二进制数据转为字符串\n // console.log(\"temp11\",temp)\n const msg = JSON.parse(temp)\n // console.log(\"msg11\",msg)\n document.getElementById(\"mapModule\").contentWindow.getGuiJi(JSON.stringify(msg))\n }\n else if (topic.indexOf(\"detection0\") != -1) {\n const utf8decoder = new TextDecoder()\n const u8arr = new Uint8Array(message)\n // console.log(\"message\",message)\n const temp = utf8decoder.decode(u8arr)\t// 将二进制数据转为字符串\n // console.log(\"temp\",temp)\n const msg = JSON.parse(temp)\n // console.log(\"msg\",msg)\n document.getElementById(\"mapModule\").contentWindow.getChuFa(JSON.stringify(msg))\n }\n else if (topic.indexOf(\"img1\") != -1) {\n try {\n const utf8decoder = new TextDecoder()\n const u8arr = new Uint8Array(message)\n const temp = utf8decoder.decode(u8arr)\t// 将二进制数据转为字符串\n const msg = JSON.parse(temp)\t\t//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据\n document.getElementById(\"mapModule\").contentWindow.getDestination(JSON.stringify(msg))\n \n } catch {\n let imageType = 'arraybuffer';\n const blob = new Blob([message], { type: imageType })\n const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)\n // console.log(\"imageUrl\", imageUrl)\n }\n } else if (topic.indexOf(\"img2\") != -1) {\n try {\n const utf8decoder = new TextDecoder()\n const u8arr = new Uint8Array(message)\n const temp = utf8decoder.decode(u8arr)\t// 将二进制数据转为字符串\n const msg = JSON.parse(temp)\t\t//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据\n document.getElementById(\"mapModule\").contentWindow.getDestination(JSON.stringify(msg))\n \n } catch {\n let imageType = 'arraybuffer';\n const blob = new Blob([message], { type: imageType })\n const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)\n // console.log(\"imageUrl\", imageUrl)\n }\n } else if (topic.indexOf(\"img3\") != -1) {\n try {\n const utf8decoder = new TextDecoder()\n const u8arr = new Uint8Array(message)\n const temp = utf8decoder.decode(u8arr)\t// 将二进制数据转为字符串\n const msg = JSON.parse(temp)\t\t//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据\n document.getElementById(\"mapModule\").contentWindow.getDestination(JSON.stringify(msg))\n \n } catch {\n let imageType = 'arraybuffer';\n const blob = new Blob([message], { type: imageType })\n const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)\n // console.log(\"imageUrl\", imageUrl)\n }\n } else if (topic.indexOf(\"img4\") != -1) {\n try {\n const utf8decoder = new TextDecoder()\n const u8arr = new Uint8Array(message)\n const temp = utf8decoder.decode(u8arr)\t// 将二进制数据转为字符串\n const msg = JSON.parse(temp)\t\t//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据\n document.getElementById(\"mapModule\").contentWindow.getDestination(JSON.stringify(msg))\n \n } catch {\n let imageType = 'arraybuffer';\n const blob = new Blob([message], { type: imageType })\n const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)\n // console.log(\"imageUrl\", imageUrl)\n }\n } else if (topic.indexOf(\"img5\") != -1) {\n try {\n const utf8decoder = new TextDecoder()\n const u8arr = new Uint8Array(message)\n const temp = utf8decoder.decode(u8arr)\t// 将二进制数据转为字符串\n const msg = JSON.parse(temp)\t\t//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据\n document.getElementById(\"mapModule\").contentWindow.getDestination(JSON.stringify(msg))\n \n } catch {\n let imageType = 'arraybuffer';\n const blob = new Blob([message], { type: imageType })\n const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)\n // console.log(\"imageUrl\", imageUrl)\n }\n } \n else if (topic.indexOf(\"stream0\") != -1) {\n const utf8decoder1 = new TextDecoder()\n const u8arr = new Uint8Array(message)\n const temp = utf8decoder1.decode(u8arr)\t// 将二进制数据转为字符串\n const msg = JSON.parse(temp)\n document.getElementById(\"mapModule\").contentWindow.getData(JSON.stringify(msg))\n // try {\n // const utf8decoder1 = new TextDecoder()\n // const u8arr = new Uint8Array(message)\n // const temp = utf8decoder1.decode(u8arr)\t// 将二进制数据转为字符串\n // const msg = JSON.parse(temp)\t\t//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据\n // document.getElementById(\"mapModule\").contentWindow.getData(JSON.stringify(msg))\n \n // } catch {\n // let imageType = 'arraybuffer';\n // const blob = new Blob([message], { type: imageType })\n // const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)\n // // console.log(\"imageUrl\", imageUrl)\n // }\n } else if (topic.indexOf(\"stream1\") != -1) {\n const utf8decoder = new TextDecoder()\n const u8arr = new Uint8Array(message)\n const temp = utf8decoder.decode(u8arr)\t// 将二进制数据转为字符串\n const msg = JSON.parse(temp)\n document.getElementById(\"mapModule\").contentWindow.getData(JSON.stringify(msg))\n } else if (topic.indexOf(\"stream2\") != -1) {\n const utf8decoder = new TextDecoder()\n const u8arr = new Uint8Array(message)\n const temp = utf8decoder.decode(u8arr)\t// 将二进制数据转为字符串\n const msg = JSON.parse(temp)\n document.getElementById(\"mapModule\").contentWindow.getData(JSON.stringify(msg))\n } else if (topic.indexOf(\"stream3\") != -1) {\n const utf8decoder = new TextDecoder()\n const u8arr = new Uint8Array(message)\n const temp = utf8decoder.decode(u8arr)\t// 将二进制数据转为字符串\n const msg = JSON.parse(temp)\n document.getElementById(\"mapModule\").contentWindow.getData(JSON.stringify(msg))\n } else if (topic.indexOf(\"stream4\") != -1) {\n const utf8decoder = new TextDecoder()\n const u8arr = new Uint8Array(message)\n const temp = utf8decoder.decode(u8arr)\t// 将二进制数据转为字符串\n const msg = JSON.parse(temp)\n document.getElementById(\"mapModule\").contentWindow.getData(JSON.stringify(msg))\n } else if (topic.indexOf(\"stream5\") != -1) {\n const utf8decoder = new TextDecoder()\n const u8arr = new Uint8Array(message)\n const temp = utf8decoder.decode(u8arr)\t// 将二进制数据转为字符串\n const msg = JSON.parse(temp)\n document.getElementById(\"mapModule\").contentWindow.getData(JSON.stringify(msg))\n }else{\n\n }\n\n });\n \n }\n\n\n },\n\n handleSearch() {\n this.modelOthers = true;\n this.$refs.htModels.finbBox(this.inputVal);\n console.log(this.$refs.htModels, 'asdasdasd');\n this.inputVal = ''\n },\n handleRow(val) {\n this.modelOthers = true;\n this.$refs.htModels.finbBox(val);\n },\n // 天气\n handleWather() {\n axios({ url: 'https://restapi.amap.com/v3/weather/weatherInfo?key=bc2b906032fdd8a63cbd0790d656b1d7&city=620100', methods: '' }).then(res => {\n this.weatherItem = res.data.lives[0]\n console.log(this.weatherItem, 'asdsads');\n })\n },\n Onweather(name) {\n },\n //隐藏箱子\n hideBox() {\n this.$refs.htModels.handleFirstBox();\n }\n },\n components: {\n editModal,\n analysisConfiguration,\n dataBoard\n },\n};\n</script>\n<style scoped>\n.el-form-item {\n margin-bottom: 15px;\n}\n\n.content-box::-webkit-scrollbar {\n display: none; /* Chrome Safari */\n}\n.new-dialog{\n width: 49%;\n height: 29%;\n left: calc(26vw);\n top: 71vh;\n bottom: 0 /* right:auto;; */;\n}\n.formBox{\n margin-top: 20px;\n margin-left: 20px;\n}\n/* .new-dialog .el-dialog {\n width:100%!important;\n margin: 0vh auto !important;\n margin-top: 0vh!important;\n} */\n.new-dialog .el-dialog {\n width:100%!important;\n margin: 0 auto 0px!important;\n /* margin-top: 0vh!important; */\n}\n.new-dialog .el-dialog__wrapper::-webkit-scrollbar {\n display: none; /* Chrome Safari */\n}\n.new-dialog .customWidth{\n width: 100%;\nmin-width: 150px;\n}\n.mapModuleApp{\n /* width:100%; */\n width:1600px;\n height:900px;\n display:inline-block;\n border:1px soild #eee;\n}\n\n</style>\n"]}]} |