1 line
113 KiB
JSON
1 line
113 KiB
JSON
{"remainingRequest":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!E:\\视频边缘计算管理平台\\TransFlow\\src\\views\\index.vue?vue&type=script&lang=js&","dependencies":[{"path":"E:\\视频边缘计算管理平台\\TransFlow\\src\\views\\index.vue","mtime":1675645740324},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\babel-loader\\lib\\index.js","mtime":499162500000},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"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\r\n// import mqtt from \"mqtt\"; // mqtt协议\r\nimport editModal from '@/views/bounced/maintenanceRemind';\r\nimport analysisConfiguration from '@/views/bounced/analysisConfiguration';\r\nimport dataBoard from '@/views/bounced/dataBoard';\r\nimport {\r\n getComponentData,\r\n getSectionalData,\r\n getVideoStatus,\r\n startTrafficAnalysis,\r\n startVideoAnalysis,\r\n getAnalysisData\r\n} from '../api/index';\r\nimport serverUrl from '../config/apiurl.js';\r\nimport axios from 'axios';\r\n// mqtt\r\n// import mqttHandle from \"../../../utils/mqttHandle\";\r\nimport mqttConfig from '@/utils/mqttConfig.js';\r\nvar mqtt; //mqtt 处理对象（全局变量）\r\nvar client;\r\n// //判断\r\nexport default {\r\n data() {\r\n return {\r\n max: '',\r\n receiveNews: '',\r\n topicSends: ['img0', 'stream0', 'trajectory0', 'detection0'],\r\n trajectory: false, //轨迹\r\n hideBoxShow: true, //隐藏箱子按钮显示隐藏\r\n closeStatus: null,\r\n modelOthers: false,\r\n componentShow: '',\r\n isShowBtn: true, //菜单按钮隐藏\r\n isShowBtn1: false, //菜单按钮显示\r\n inputVal: '',\r\n dialogFormVisible: false,\r\n areaComponent: false,\r\n indexModule: false,\r\n disabledTrafficAnalysis:true,\r\n disabledVideoAnalysis:false,\r\n //判断模拟区，画布区\r\n numberNew: 1,\r\n speed: false,\r\n component: false,\r\n sectionals: [],\r\n activeName: 'first',\r\n VideoId: '',\r\n title: '断面',\r\n componentTitle: '速度',\r\n form: {\r\n name: '',\r\n type: '',\r\n id: '',\r\n coordinate: '',\r\n Direction: '双向',\r\n StoppingSpeed: '5'\r\n },\r\n //初始图形名称\r\n startFigureName: '',\r\n areaComponentform: {\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 timeSelect: [\r\n {\r\n label: '秒',\r\n value: '秒'\r\n },\r\n {\r\n label: '分钟',\r\n value: '分钟'\r\n },\r\n {\r\n label: '小时',\r\n value: '小时'\r\n }\r\n ],\r\n titName: '',\r\n componentForm: {\r\n //单位\r\n company: '',\r\n componentName: '',\r\n componentParameterId: '01888e05fac246b29e3a19a27c3d2ab0',\r\n //周期间隔\r\n cycleInterval: '',\r\n startSectionIds: '',\r\n startSectionNames: '',\r\n endSectionIds: '',\r\n endSectionNames: '',\r\n endValue: '',\r\n //展现形式\r\n presentationForm: '',\r\n presentation: [],\r\n startValue: '',\r\n timeMode: '',\r\n type: [],\r\n startSection: [],\r\n endSection: [],\r\n componentType: '',\r\n typeFiltering: '',\r\n typeData: [],\r\n flow:'出流'\r\n\r\n },\r\n // typeData: ['小汽车', '公交车', '卡车', '非机动车', '行人'],\r\n typeData:['机动车','非机动车','行人'],\r\n //展现形式\r\n presentation: ['数值', '表格', '时间曲线图', '均值图'],\r\n trackForm: {\r\n name: ''\r\n },\r\n nowTime: '',\r\n ins: 0,\r\n btnPic: [],\r\n Data: [\r\n {\r\n title: 'xx路口',\r\n url: ''\r\n },\r\n {\r\n title: '数据看板',\r\n url: ''\r\n },\r\n {\r\n title: '分析配置',\r\n url: ''\r\n },\r\n {\r\n title: '分析配置',\r\n url: ''\r\n }\r\n ],\r\n messageInfo: [],\r\n orderList: [],\r\n enterList: [],\r\n stockInfo: [],\r\n perCent: 0,\r\n perCent1: 0,\r\n perCent2: 0,\r\n facToal: '',\r\n wbContent: '',\r\n // wxContent:'',\r\n inContent: '',\r\n outContent: '',\r\n containerDetails: '',\r\n locdesc: '',\r\n weatherItem: {},\r\n loadingShow1: true,\r\n number: '',\r\n componentId: '',\r\n analysisConfigurationdata: {},\r\n //触发数据\r\n triggerData: [],\r\n triggerListData:[],\r\n //视频类型\r\n videoType: '',\r\n videoAnalysisShow: false,\r\n trafficAnalysisShow: false,\r\n //控制unity展示\r\n videoUnityShow:true,\r\n videoAnalysisSta:'',\r\n analysis:{\r\n trafficAnalysisPath1:'',\r\n trafficAnalysisPath2:'',\r\n videoAnalysisPath:'',\r\n videoName:'',\r\n videoPath:'',\r\n videoTotalFrames:'',\r\n videoType:''\r\n },\r\n description:'请点击视频分析'\r\n };\r\n },\r\n\r\n //离开当前页面后执行\r\n destroyed: function() {\r\n //console.log(\"离开当前页\")\r\n // client.publish('msg_stream',JSON.stringify({\"msg_flag\":-1}))\r\n //client.end();\r\n },\r\n created() {\r\n window.getFigure = this.getFigureD;\r\n window.getModifyTheName = this.getModifyTheNameN;\r\n // window.getModifyTheName = this.getModifyTheNameN;\r\n window.getSingleComponentId = this.getSingleComponentIdN;\r\n window.getSimulationAreaEdit = this.getSimulationAreaEdit;\r\n window.OnScene = this.OnSceneN;\r\n this.getAllSectionalData(this.$route.query.id);\r\n this.VideoId = this.$route.query.id;\r\n this.number = this.$route.query.num;\r\n this.titName = this.$route.query.name;\r\n // this.videoType = this.$route.query.type;\r\n if (this.$route.query.type == '实时视频') {\r\n this.videoAnalysisShow = false;\r\n this.trafficAnalysisShow = false;\r\n document.getElementById('mapModule').contentWindow.lixianVideo(JSON.stringify(this.analysis));\r\n this.createMqtt();\r\n } else if (this.$route.query.type == '离线视频'){\r\n this.videoAnalysisShow = true;\r\n this.trafficAnalysisShow = true;\r\n this.getAnalysisStatus()\r\n // if(this.$route.query.status=='未分析'){\r\n // }\r\n // if(this.$route.query.status=='未分析'){\r\n // // document.getElementById('mapModule').contentWindow.lixianVideo(\"实时视频\");\r\n // }else{\r\n // } \r\n }\r\n },\r\n mounted() {\r\n \r\n },\r\n methods: {\r\n /** 创建mqtt */\r\n createMqtt() {\r\n //创建链接，接收数据\r\n this.topicSends = ['stream' + this.number, 'trajectory' + this.number, 'detection' + this.number,'trigger-'+ this.$route.query.id];\r\n window.PubScribe(this.topicSends, this.number, this.realInfo);\r\n // mqtt = mqttConfig;\r\n /*mqtt = new mqttConfig(this.topicSends);\r\n client = mqtt.createConnect();\r\n client.subscribe(['img'+this.number,'stream'+this.number, 'trajectory'+this.number, 'detection'+this.number], { qos: 0 }, (err)=> {\r\n if (!err) {\r\n console.log(\"订阅成功\");\r\n // setTimeout(function() {\r\n client.publish('msg_stream',JSON.stringify({\"msg_flag\":parseInt(this.number)}))\r\n // }, 1000);\r\n\r\n } else {\r\n console.log('消息订阅失败！')\r\n }\r\n\r\n });\r\n client.on(\"message\", (topic, message) => {\r\n //数据分类\r\n try {\r\n // this.receiveNews = this.receiveNews.concat(message);\r\n // this.realInfo(topic, this.receiveNews);\r\n this.realInfo(topic, message);\r\n } catch (error) {\r\n\r\n }\r\n });*/\r\n },\r\n //获取视频分析，交通分析状态数据\r\n getAnalysisStatus(){\r\n getVideoStatus(this.$route.query.id).then(res => {\r\n console.log(\"res.data\",res.data)\r\n //视频分析状态\r\n if(res.data.data.videoAnalysisStatus == '未分析'){\r\n this.disabledTrafficAnalysis= true\r\n // this.videoUnityShow = false\r\n this.videoUnityShow = true\r\n this.analysisData()\r\n }else if(res.data.data.videoAnalysisStatus == '分析中'){\r\n this.disabledVideoAnalysis= true\r\n this.videoUnityShow = false\r\n setTimeout(() => {\r\n this.getAnalysisStatus()\r\n }, 5000); \r\n }else if(res.data.data.videoAnalysisStatus == '已分析'){\r\n this.videoUnityShow = true\r\n this.videoAnalysisSta = res.data.data.videoAnalysisStatus\r\n this.disabledTrafficAnalysis= false\r\n this.analysisData()\r\n //交通分析状态\r\n }else if(res.data.data.trafficAnalysisStatus=='未分析'){\r\n this.disabledVideoAnalysis= true\r\n }else if(res.data.data.trafficAnalysisStatus=='分析中'){\r\n this.disabledVideoAnalysis= true\r\n this.disabledTrafficAnalysis= true\r\n }else if(res.data.data.videoAnalysisStatus == '已分析'||res.data.data.trafficAnalysisStatus == '已分析'){\r\n this.disabledVideoAnalysis= false\r\n this.disabledTrafficAnalysis= true\r\n }\r\n });\r\n },\r\n //分析视频按钮\r\n videoAnalysisBtn() {\r\n startVideoAnalysis(this.$route.query.id).then(res => {\r\n //\r\n if(res.data.msg=='请求成功'){\r\n this.$message({\r\n message: '启动成功',\r\n type: 'success'\r\n });\r\n if(this.videoAnalysisSta=='已分析'){\r\n\r\n }else if(this.videoAnalysisSta=='分析中'){\r\n this.description = '正在分析中'\r\n setTimeout(() => {\r\n this.getAnalysisStatus()\r\n }, 5000); \r\n }else if(this.videoAnalysisSta=='未分析'){\r\n // setTimeout(() => {\r\n // this.getAnalysisStatus()\r\n // }, 5000); \r\n } \r\n } \r\n });\r\n },\r\n //交通分析\r\n trafficAnalysisBtn() {\r\n startTrafficAnalysis(this.$route.query.id).then(res => {\r\n //\r\n console.log(\"res.data\",res.data.data)\r\n if (res.data.code == 200) {\r\n this.$message({\r\n message: res.data.msg,\r\n type: 'success'\r\n });\r\n }else{\r\n this.$message({\r\n message: res.data.msg,\r\n type: 'warning'\r\n });\r\n }\r\n });\r\n },\r\n //获取视频分析结果\r\n analysisData(){\r\n getAnalysisData(this.$route.query.id).then(res => {\r\n console.log(\"res.data.data\",res.data.data)\r\n this.analysis.trafficAnalysisPath1 = res.data.data.trafficAnalysisPath1\r\n this.analysis.trafficAnalysisPath2 = res.data.data.trafficAnalysisPath2\r\n this.analysis.videoAnalysisPath = res.data.data.videoAnalysisPath\r\n this.analysis.videoName = res.data.data.videoName\r\n this.analysis.videoPath = res.data.data.videoPath\r\n this.analysis.videoTotalFrames = res.data.data.videoTotalFrames\r\n this.analysis.videoType=this.$route.query.type\r\n \r\n });\r\n },\r\n //停止订阅mqtt\r\n disConnect() {\r\n /*if (client != null) {\r\n client.unsubscribe(this.topicSends);\r\n client = null;\r\n }*/\r\n },\r\n /** 实时数据分类 */\r\n realInfo(topic, message) {\r\n switch (topic) {\r\n // 接收托片\r\n case 'img'+this.number: \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 document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));\r\n if (msg.rate == 'high') {\r\n document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));\r\n } else {\r\n this.analysisConfigurationdata = msg;\r\n }\r\n } catch (error) {}\r\n break;\r\n // 树结构\r\n case 'stream'+this.number:\r\n try {\r\n const utf8decoder1 = new TextDecoder();\r\n const u8arr = new Uint8Array(message);\r\n const temp = utf8decoder1.decode(u8arr); // 将二进制数据转为字符串\r\n const msg = JSON.parse(temp);\r\n document.getElementById('mapModule').contentWindow.getData(JSON.stringify(msg));\r\n } catch (error) {}\r\n break;\r\n // 控制台输出\r\n case 'trajectory'+this.number: \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);\r\n document.getElementById('mapModule').contentWindow.getGuiJi(JSON.stringify(msg));\r\n } catch (error) {}\r\n break;\r\n // 触发\r\n case 'detection'+this.number: \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 var detId = [];\r\n const msgN = JSON.parse(temp);\r\n this.triggerData = msgN;\r\n if (temp.length != 0) {\r\n for (let i = 0; i < msgN.length; i++) {\r\n detId.push(msgN[i].det_id);\r\n }\r\n document.getElementById('mapModule').contentWindow.getChuFa(JSON.stringify(detId));\r\n }\r\n } catch (error) {}\r\n break;\r\n case 'trigger-'+this.$route.query.id:\r\n try {\r\n // console.log(\"trigger_msgN\",message)\r\n const utf8decoder = new TextDecoder();\r\n const u8arr = new Uint8Array(message);\r\n const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串\r\n var detId = [];\r\n const msgN = JSON.parse(temp);\r\n // console.log(\"trigger_msgN\",msgN)\r\n this.triggerListData = msgN;\r\n } catch (error) {}\r\n break;\r\n }\r\n this.receiveNews = '';\r\n },\r\n // handleClick(tab, event) {\r\n // console.log(tab, event);\r\n // },\r\n changeCompany(val) {\r\n console.log('val', val);\r\n if (val == '小时') {\r\n this.max = '24';\r\n } else {\r\n this.max = '100';\r\n }\r\n },\r\n //初始化unity\r\n OnSceneN() {\r\n document.getElementById('mapModule').contentWindow.postVideoId(JSON.stringify(this.$route.query.id));\r\n document.getElementById('mapModule').contentWindow.lixianVideo(JSON.stringify(this.analysis));\r\n },\r\n // //新增组件根据组件id获取单个组件数据\r\n getSingleComponentIdN(id, type, name) {\r\n console.log('id', id);\r\n console.log('type', type);\r\n console.log('name', name);\r\n this.componentId = id;\r\n this.componentForm.componentType = type;\r\n this.componentTitle = type;\r\n getComponentData({ AnalogAreaComponentId: id }).then(res => {\r\n console.log('res', res);\r\n if (res.data.code == 200) {\r\n console.log('res', res.data.data);\r\n this.component = true;\r\n if (res.data.data.company != '') {\r\n this.componentForm.company = res.data.data.company;\r\n }\r\n // this.componentForm.componentName = res.data.data.componentName+'-'+type\r\n this.componentForm.componentName = res.data.data.componentName;\r\n if (res.data.data.timeMode != '') {\r\n this.componentForm.timeMode = res.data.data.timeMode;\r\n }else{\r\n console.log(\"this.componentForm.timeMode\",this.componentForm.timeMode);\r\n console.log(\"this.componentForm.componentType\",this.componentForm.componentType);\r\n if(this.componentForm.componentType=='延误'||this.componentForm.componentType=='拥堵'){\r\n console.log(\"this.componentForm.timeMode\",this.componentForm.timeMode);\r\n this.componentForm.timeMode = '周期统计'\r\n }else{\r\n this.componentForm.timeMode = '触发'\r\n }\r\n }\r\n this.componentForm.componentParameterId = res.data.data.componentParameterId;\r\n this.componentForm.cycleInterval = res.data.data.cycleInterval;\r\n this.componentForm.startSectionIds = res.data.data.startSectionIds;\r\n this.componentForm.startSectionNames = res.data.data.startSectionNames;\r\n this.componentForm.endSectionIds = res.data.data.endSectionIds;\r\n this.componentForm.endSectionNames = res.data.data.endSectionNames;\r\n this.componentForm.company = res.data.data.company;\r\n this.componentForm.endValue = res.data.data.endValue;\r\n this.componentForm.startValue = res.data.data.startValue;\r\n this.componentForm.presentationForm = res.data.data.presentationForm;\r\n this.getAllSectionalData(this.$route.query.id);\r\n // this.componentForm.typeFiltering = res.data.data.typeFiltering\r\n // this.componentForm.type = res.data.data.type\r\n if (res.data.data.startSectionIds != '') {\r\n console.log('startSectionIds', res.data.data.startSectionIds);\r\n var startSectionIdArr = [];\r\n var startSectionArr = [];\r\n startSectionIdArr = res.data.data.startSectionIds.split(',');\r\n console.log('this.sectionals', this.sectionals);\r\n console.log('startSectionIdArr', startSectionIdArr);\r\n startSectionIdArr.forEach(item => {\r\n this.sectionals.forEach(items => {\r\n if (item == items.graphicId) {\r\n startSectionArr.push(items.graphicName);\r\n this.componentForm.startSection = startSectionArr;\r\n }\r\n });\r\n });\r\n }\r\n if (res.data.data.endSectionIds != '') {\r\n console.log('endSectionIds', res.data.data.endSectionIds);\r\n var endSectionIdArr = [];\r\n var endSectionArr = [];\r\n endSectionIdArr = res.data.data.endSectionIds.split(',');\r\n console.log('this.sectionals', this.sectionals);\r\n console.log('endSectionIdArr', endSectionIdArr);\r\n endSectionIdArr.forEach(item => {\r\n this.sectionals.forEach(items => {\r\n if (item == items.graphicId) {\r\n endSectionArr.push(items.graphicName);\r\n this.componentForm.endSection = endSectionArr;\r\n }\r\n });\r\n });\r\n }\r\n if (this.componentForm.presentationForm != '') {\r\n var arr = [];\r\n arr = this.componentForm.presentationForm.split(',');\r\n this.componentForm.presentation = arr;\r\n } else if (this.componentForm.presentationForm == '') {\r\n this.componentForm.presentation = [];\r\n }\r\n if (res.data.data.type != '') {\r\n var arr = [];\r\n arr = res.data.data.type.split(',');\r\n this.componentForm.type = arr;\r\n } else {\r\n this.componentForm.type = [];\r\n }\r\n console.log('this.componentForm', this.componentForm);\r\n }\r\n });\r\n },\r\n //修改模拟区组件、图形\r\n getSimulationAreaEdit(id, type, componentType, name, number) {\r\n console.log('number', number);\r\n this.numberNew = number;\r\n if (type == '图形') {\r\n this.form.id = id;\r\n this.form.name = name;\r\n this.form.type = componentType;\r\n this.startFigureName = name;\r\n if (this.form.type == '轨迹') {\r\n this.dialogFormVisible = true;\r\n } else if (this.form.type == '区域') {\r\n this.dialogFormVisible = true;\r\n } else if (this.form.type == '断面') {\r\n this.dialogFormVisible = true;\r\n }\r\n } else if (type == '组件') {\r\n this.componentId = id;\r\n this.componentForm.componentType = componentType;\r\n this.componentTitle = componentType;\r\n getComponentData({ AnalogAreaComponentId: id }).then(res => {\r\n console.log('res', res);\r\n if (res.data.code == 200) {\r\n console.log('res', res.data.data);\r\n this.component = true;\r\n if (res.data.data.company != '') {\r\n this.componentForm.company = res.data.data.company;\r\n }\r\n if (res.data.data.timeMode != '') {\r\n this.componentForm.timeMode = res.data.data.timeMode;\r\n }else{\r\n if(this.componentForm.componentType=='延误'||this.componentForm.componentType=='拥堵'){\r\n this.componentForm.timeMode = '周期统计'\r\n }else{\r\n this.componentForm.timeMode = '触发'\r\n }\r\n }\r\n this.componentForm.componentName = res.data.data.componentName;\r\n this.componentForm.componentParameterId = res.data.data.componentParameterId;\r\n this.componentForm.cycleInterval = res.data.data.cycleInterval;\r\n this.componentForm.startSectionIds = res.data.data.startSectionIds;\r\n this.componentForm.startSectionNames = res.data.data.startSectionNames;\r\n this.componentForm.endSectionIds = res.data.data.endSectionIds;\r\n this.componentForm.endSectionNames = res.data.data.endSectionNames;\r\n this.componentForm.endValue = res.data.data.endValue;\r\n this.componentForm.startValue = res.data.data.startValue;\r\n this.componentForm.presentationForm = res.data.data.presentationForm;\r\n // this.componentForm.type = res.data.data.type\r\n if (res.data.data.startSectionIds != '') {\r\n console.log('startSectionIds', res.data.data.startSectionIds);\r\n var startSectionIdArr = [];\r\n var startSectionArr = [];\r\n startSectionIdArr = res.data.data.startSectionIds.split(',');\r\n console.log('this.sectionals', this.sectionals);\r\n console.log('startSectionIdArr', startSectionIdArr);\r\n startSectionIdArr.forEach(item => {\r\n this.sectionals.forEach(items => {\r\n if (item == items.graphicId) {\r\n startSectionArr.push(items.graphicName);\r\n this.componentForm.startSection = startSectionArr;\r\n }\r\n });\r\n });\r\n }\r\n if (res.data.data.endSectionIds != '') {\r\n console.log('endSectionIds', res.data.data.endSectionIds);\r\n var endSectionIdArr = [];\r\n var endSectionArr = [];\r\n endSectionIdArr = res.data.data.endSectionIds.split(',');\r\n console.log('this.sectionals', this.sectionals);\r\n console.log('endSectionIdArr', endSectionIdArr);\r\n endSectionIdArr.forEach(item => {\r\n this.sectionals.forEach(items => {\r\n if (item == items.graphicId) {\r\n endSectionArr.push(items.graphicName);\r\n this.componentForm.endSection = endSectionArr;\r\n }\r\n });\r\n });\r\n }\r\n if (this.componentForm.presentationForm != '') {\r\n var arr = [];\r\n arr = this.componentForm.presentationForm.split(',');\r\n this.componentForm.presentation = arr;\r\n } else if (this.componentForm.presentationForm == '') {\r\n this.componentForm.presentation = [];\r\n }\r\n if (res.data.data.type != '') {\r\n var arr = [];\r\n arr = res.data.data.type.split(',');\r\n this.componentForm.type = arr;\r\n } else {\r\n this.componentForm.type = [];\r\n }\r\n }\r\n });\r\n }\r\n },\r\n //获取所有断面数据\r\n getAllSectionalData(VideoId) {\r\n getSectionalData({ VideoId: VideoId }).then(res => {\r\n console.log('res', res);\r\n if (res.data.code == 200) {\r\n this.sectionals = res.data.data;\r\n }\r\n });\r\n },\r\n figureType(type) {\r\n if (type == 'Move') {\r\n type = '轨迹';\r\n } else if (type == 'Poly') {\r\n type = '区域';\r\n } else if (type == 'Line') {\r\n type = '断面';\r\n }\r\n return type;\r\n },\r\n getFigureD(item, index, indexNew) {\r\n console.log('图形类型', item);\r\n console.log('初始图形名称', index);\r\n this.startFigureName = index;\r\n console.log('图形位置', indexNew);\r\n this.dialogFormVisible = true;\r\n this.form.name = index;\r\n this.form.type = this.figureType(item);\r\n this.form.coordinate = indexNew;\r\n this.form.id = '';\r\n this.title = this.figureType(item);\r\n },\r\n //双击图形修改图形名称弹框\r\n getModifyTheNameN(data, number) {\r\n console.log('data', data);\r\n console.log('number', number);\r\n this.numberNew = number;\r\n var arr = [];\r\n arr = data.split(',');\r\n console.log('arr', arr);\r\n this.form.id = arr[0];\r\n this.form.name = arr[1];\r\n this.form.type = arr[2];\r\n this.startFigureName = arr[1];\r\n if (this.form.type == '轨迹') {\r\n // this.open2()\r\n this.dialogFormVisible = true;\r\n } else if (this.form.type == '区域') {\r\n this.dialogFormVisible = true;\r\n } else if (this.form.type == '断面') {\r\n this.dialogFormVisible = true;\r\n }\r\n },\r\n //新增、编辑图形确认按钮\r\n onSubmit(form) {\r\n console.log('form', form);\r\n //新增\r\n if (form.id == '') {\r\n let formData = new FormData();\r\n if (form.type == '断面') {\r\n formData.append('GraphicName', form.name);\r\n formData.append('GraphicType', form.type);\r\n formData.append('Coordinate', form.coordinate);\r\n formData.append('VideoId', this.VideoId);\r\n formData.append('Direction', form.Direction);\r\n } else if (form.type == '区域') {\r\n formData.append('GraphicName', form.name);\r\n formData.append('GraphicType', form.type);\r\n formData.append('Coordinate', form.coordinate);\r\n formData.append('VideoId', this.VideoId);\r\n // formData.append(\"Direction\",form.Direction);\r\n // formData.append(\"StoppingSpeed\",form.StoppingSpeed);\r\n } else {\r\n formData.append('GraphicName', form.name);\r\n formData.append('GraphicType', form.type);\r\n formData.append('Coordinate', form.coordinate);\r\n formData.append('VideoId', this.VideoId);\r\n // formData.append(\"Direction\",form.Direction);\r\n }\r\n\r\n axios({\r\n method: 'post',\r\n url: serverUrl.addFigure,\r\n data: formData\r\n }).then(res => {\r\n console.log('res', res);\r\n\r\n if (res.data.code == 200) {\r\n this.$message({\r\n message: res.data.msg,\r\n type: 'success'\r\n });\r\n setTimeout(() => { \r\n this.$message({\r\n type: \"warning\",\r\n message: \"请点击交通分析，获取最新数据！\",\r\n showClose: true,\r\n duration:0,\r\n });\r\n }, 3000);\r\n \r\n document.getElementById('mapModule').contentWindow.postFigureId(JSON.stringify(res.data.data));\r\n document\r\n .getElementById('mapModule')\r\n .contentWindow.postFigureName(\r\n JSON.stringify(res.data.data + ',' + form.name + ',' + this.startFigureName + ',' + this.numberNew)\r\n );\r\n this.dialogFormVisible = false;\r\n } else {\r\n this.$message({\r\n message: res.data.msg,\r\n type: 'warning'\r\n });\r\n }\r\n });\r\n } else {\r\n //编辑\r\n let formData = new FormData();\r\n if (form.type == '断面') {\r\n formData.append('GraphicName', form.name);\r\n formData.append('GraphicType', form.type);\r\n formData.append('Direction', form.Direction);\r\n formData.append('GraphicId', form.id);\r\n formData.append('VideoId', this.VideoId);\r\n } else if (form.type == '区域') {\r\n formData.append('GraphicName', form.name);\r\n formData.append('GraphicType', form.type);\r\n formData.append('Direction', form.Direction);\r\n formData.append('GraphicId', form.id);\r\n formData.append('VideoId', this.VideoId);\r\n formData.append('StoppingSpeed', form.StoppingSpeed);\r\n } else {\r\n formData.append('GraphicName', form.name);\r\n formData.append('GraphicType', form.type);\r\n // formData.append(\"Direction\",form.Direction);\r\n formData.append('GraphicId', form.id);\r\n formData.append('VideoId', this.VideoId);\r\n }\r\n axios({\r\n method: 'post',\r\n url: serverUrl.editFigure,\r\n data: formData\r\n }).then(res => {\r\n console.log('res', res);\r\n\r\n if (res.data.code == 200) {\r\n this.$message({\r\n message: res.data.msg,\r\n type: 'success'\r\n });\r\n setTimeout(() => { \r\n this.$message({\r\n type: \"warning\",\r\n message: \"请点击交通分析，获取最新数据！\",\r\n showClose: true,\r\n duration:0,\r\n });\r\n }, 5000);\r\n console.log('startFigureName', this.startFigureName);\r\n document.getElementById('mapModule').contentWindow.postFigureId(JSON.stringify(res.data.data));\r\n console.log('this.numberNew', this.numberNew);\r\n document\r\n .getElementById('mapModule')\r\n .contentWindow.postFigureName(\r\n JSON.stringify(form.id + ',' + form.name + ',' + this.startFigureName + ',' + this.numberNew)\r\n );\r\n this.dialogFormVisible = false;\r\n } else {\r\n this.$message({\r\n message: res.data.msg,\r\n type: 'warning'\r\n });\r\n }\r\n });\r\n }\r\n },\r\n //新增编辑组件取消\r\n onSubmitComponent(componentForm) {\r\n this.component = false;\r\n let formData = new FormData();\r\n if (componentForm.componentType == 'OD') {\r\n //名称\r\n formData.append('componentName', componentForm.componentName);\r\n //单位\r\n formData.append('company', componentForm.company);\r\n //id\r\n formData.append('componentParameterId', componentForm.componentParameterId);\r\n formData.append('cycleInterval', componentForm.cycleInterval);\r\n formData.append('startSectionIds', componentForm.startSectionIds);\r\n formData.append('startSectionNames', componentForm.startSectionNames);\r\n formData.append('endSectionIds', componentForm.endSectionIds);\r\n formData.append('endSectionNames', componentForm.endSectionNames);\r\n formData.append('endValue', componentForm.endValue);\r\n formData.append('startValue', componentForm.startValue);\r\n formData.append('timeMode', componentForm.timeMode);\r\n formData.append('presentationForm', '矩阵图');\r\n } else if (componentForm.componentType == '类型') {\r\n //名称\r\n formData.append('componentName', componentForm.componentName);\r\n //单位\r\n formData.append('company', componentForm.company);\r\n //id\r\n formData.append('componentParameterId', componentForm.componentParameterId);\r\n formData.append('cycleInterval', componentForm.cycleInterval);\r\n formData.append('endValue', componentForm.endValue);\r\n formData.append('startValue', componentForm.startValue);\r\n formData.append('timeMode', componentForm.timeMode);\r\n formData.append('presentationForm', componentForm.presentationForm);\r\n formData.append('type', componentForm.type);\r\n } else {\r\n //名称\r\n formData.append('componentName', componentForm.componentName);\r\n //单位\r\n formData.append('company', componentForm.company);\r\n //id\r\n formData.append('componentParameterId', componentForm.componentParameterId);\r\n formData.append('cycleInterval', componentForm.cycleInterval);\r\n formData.append('endValue', componentForm.endValue);\r\n formData.append('startValue', componentForm.startValue);\r\n formData.append('timeMode', componentForm.timeMode);\r\n formData.append('presentationForm', componentForm.presentationForm);\r\n }\r\n axios({\r\n method: 'post',\r\n url: serverUrl.editComponent,\r\n data: formData\r\n }).then(res => {\r\n console.log('res', res);\r\n\r\n if (res.data.code == 200) {\r\n this.$message({\r\n message: res.data.msg,\r\n type: 'success'\r\n });\r\n // document.getElementById(\"mapModule\").contentWindow.postFigureId(JSON.stringify(res.data.data))\r\n document.getElementById('mapModule').contentWindow.editComponent(this.componentId + ',' + componentForm.componentName);\r\n this.dialogFormVisible = false;\r\n } else {\r\n this.$message({\r\n message: res.data.msg,\r\n type: 'warning'\r\n });\r\n }\r\n });\r\n },\r\n //新增编辑组件取消\r\n closeComponent(componentForm) {\r\n this.component = false;\r\n this.componentForm = {\r\n //单位\r\n company: '',\r\n componentName: '',\r\n componentParameterId: '01888e05fac246b29e3a19a27c3d2ab0',\r\n //周期间隔\r\n cycleInterval: '',\r\n startSectionIds: '',\r\n startSectionNames: '',\r\n endSectionIds: '',\r\n endSectionNames: '',\r\n endValue: '',\r\n //展现形式\r\n presentationForm: '',\r\n presentation: [],\r\n startValue: '',\r\n timeMode: '',\r\n type: [],\r\n startSection: [],\r\n endSection: [],\r\n componentType: '',\r\n typeFiltering: '',\r\n typeData: []\r\n };\r\n document.getElementById('mapModule').contentWindow.editComponent('');\r\n },\r\n //新增、编辑图形取消按钮\r\n closeFigure(form) {\r\n console.log('form', form);\r\n if (form.id != '') {\r\n this.dialogFormVisible = false;\r\n document.getElementById('mapModule').contentWindow.closeEdit(JSON.stringify(form.type + ',' + form.id));\r\n } else {\r\n this.dialogFormVisible = false;\r\n document.getElementById('mapModule').contentWindow.delFigure();\r\n }\r\n },\r\n closeComponentForm() {\r\n this.component = false;\r\n document.getElementById('mapModule').contentWindow.editComponent('');\r\n },\r\n closeForm(form) {\r\n if (this.form.id != '') {\r\n this.dialogFormVisible = false;\r\n document.getElementById('mapModule').contentWindow.closeEdit(JSON.stringify(form.type + ',' + form.id));\r\n } else {\r\n this.dialogFormVisible = false;\r\n document.getElementById('mapModule').contentWindow.delFigure();\r\n }\r\n },\r\n //改变起点\r\n handleCheckedStartSection(value) {\r\n console.log('改变起点', value);\r\n var startSectionIdArr = [];\r\n var startSectionNameArr = [];\r\n value.forEach(item => {\r\n this.sectionals.forEach(items => {\r\n if (item == items.graphicName) {\r\n startSectionIdArr.push(items.graphicId);\r\n startSectionNameArr.push(items.graphicName);\r\n let newStartSectionId = startSectionIdArr.join(',');\r\n let newStartSectionName = startSectionNameArr.join(',');\r\n this.componentForm.startSectionIds = newStartSectionId;\r\n this.componentForm.startSectionNames = newStartSectionName;\r\n }\r\n });\r\n });\r\n },\r\n //改变终点\r\n handleCheckedendSection(value) {\r\n console.log('改变终点', value);\r\n var endSectionIdArr = [];\r\n var endSectionNameArr = [];\r\n value.forEach(item => {\r\n this.sectionals.forEach(items => {\r\n if (item == items.graphicName) {\r\n endSectionIdArr.push(items.graphicId);\r\n endSectionNameArr.push(items.graphicName);\r\n let newendSectionId = endSectionIdArr.join(',');\r\n let newEndSectionName = endSectionNameArr.join(',');\r\n console.log('newendSectionId', newendSectionId);\r\n console.log('newEndSectionName', newEndSectionName);\r\n this.componentForm.endSectionIds = newendSectionId;\r\n this.componentForm.endSectionNames = newEndSectionName;\r\n }\r\n });\r\n });\r\n },\r\n //修改展现形式\r\n handlePresentation(value) {\r\n console.log('展现形式', value);\r\n let presentation = value.join(',');\r\n this.componentForm.presentationForm = presentation;\r\n console.log('this.componentForm.presentationForm', this.componentForm.presentationForm);\r\n },\r\n //类型数据\r\n handleTypeData(value) {\r\n console.log('类型数据', value);\r\n let type = value.join(',');\r\n this.componentForm.typeData = type;\r\n },\r\n //模型加载等待\r\n loadingShow(data) {\r\n this.loadingShow1 = data;\r\n },\r\n\r\n handleSearch() {\r\n this.modelOthers = true;\r\n this.$refs.htModels.finbBox(this.inputVal);\r\n console.log(this.$refs.htModels, 'asdasdasd');\r\n this.inputVal = '';\r\n },\r\n handleRow(val) {\r\n this.modelOthers = true;\r\n this.$refs.htModels.finbBox(val);\r\n },\r\n // 天气\r\n handleWather() {\r\n axios({\r\n url: 'https://restapi.amap.com/v3/weather/weatherInfo?key=bc2b906032fdd8a63cbd0790d656b1d7&city=620100',\r\n methods: ''\r\n }).then(res => {\r\n this.weatherItem = res.data.lives[0];\r\n console.log(this.weatherItem, 'asdsads');\r\n });\r\n }\r\n },\r\n components: {\r\n editModal,\r\n analysisConfiguration,\r\n dataBoard\r\n }\r\n};\r\n",{"version":3,"sources":["index.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8KA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;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;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;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;;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;;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;;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;;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;;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;;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","file":"index.vue","sourceRoot":"src/views","sourcesContent":["<template>\r\n <div class=\"content-box\">\r\n <!-- <div class=\"container\"> -->\r\n <div>\r\n <!-- <el-tabs type=\"border-card\" v-model=\"activeName\" tab-position=\"left\"> -->\r\n <el-tabs type=\"border-card\" v-model=\"activeName\">\r\n <el-tab-pane :label=\"titName\" name=\"first\">\r\n <div class=\"mapModuleApp\">\r\n <iframe\r\n id=\"mapModule\"\r\n src=\"./VideoWeb/index.html\"\r\n frameborder=\"0\"\r\n style=\"width: 100%; height:100%;\"\r\n scrolling=\"no\"\r\n v-if=\"videoUnityShow\"\r\n ></iframe>\r\n <!-- <iframe src=\"./VideoWeb/index.html\" style=\"height: 100%; width: 100%;border: none\" ref=\"iframe\"></iframe> -->\r\n <el-empty :description=\"description\" v-if=\"videoAnalysisShow\">\r\n <!-- <el-button type=\"primary\">按钮</el-button> -->\r\n <!-- <el-button type=\"primary\" size=\"mini\" @click=\"videoAnalysisBtn\" v-if=\"videoAnalysisShow\">视频分析</el-button> -->\r\n </el-empty>\r\n </div>\r\n </el-tab-pane>\r\n <el-tab-pane label=\"数据看板\" name=\"second\">\r\n <dataBoard :activeName=\"activeName\" :triggerData=\"triggerData\" :triggerListData=\"triggerListData\"></dataBoard>\r\n </el-tab-pane>\r\n <el-tab-pane label=\"分析配置\" name=\"third\">\r\n <analysisConfiguration :analysisConfigurationdata=\"analysisConfigurationdata\"></analysisConfiguration>\r\n </el-tab-pane>\r\n <el-tab-pane label=\"分析状态\" name=\"fourth\">\r\n <editModal></editModal>\r\n </el-tab-pane>\r\n <el-tab-pane label=\"存储\" name=\"five\">存储</el-tab-pane>\r\n </el-tabs>\r\n <el-button class=\"videoAnalysis\" type=\"primary\" size=\"mini\" @click=\"videoAnalysisBtn\" v-if=\"videoAnalysisShow\" :disabled='disabledVideoAnalysis'\r\n >视频分析</el-button>\r\n <el-button class=\"trafficAnalysis\" type=\"primary\" plain size=\"mini\" @click=\"trafficAnalysisBtn\" v-if=\"trafficAnalysisShow\" :disabled='disabledTrafficAnalysis'\r\n >交通分析</el-button>\r\n </div>\r\n <el-drawer\r\n class=\"new-dialog\"\r\n :visible.sync=\"dialogFormVisible\"\r\n direction=\"btt\"\r\n custom-class=\"demo-drawer\"\r\n ref=\"drawer\"\r\n :modal=\"false\"\r\n :close-on-click-modal=\"false\"\r\n v-alterELDialogMarginTop=\"{ marginTop: '0vh' }\"\r\n width=\"100%\"\r\n :wrapperClosable=\"false\"\r\n :with-header=\"false\"\r\n size=\"100%\"\r\n >\r\n <div class=\"formBox\">\r\n <el-form ref=\"form\" :model=\"form\" label-width=\"80px\" :inline=\"true\">\r\n <el-form-item label=\"组件名称\">\r\n <el-input v-model=\"form.name\"></el-input>\r\n </el-form-item>\r\n <el-form-item label=\"断面方向\" v-if=\"form.type == '断面'\">\r\n <el-select v-model=\"form.Direction\" placeholder=\"请选择类型\">\r\n <el-option label=\"正向\" value=\"正向\"></el-option>\r\n <el-option label=\"反向\" value=\"反向\"></el-option>\r\n <el-option label=\"双向\" value=\"双向\"></el-option>\r\n </el-select>\r\n </el-form-item>\r\n <el-form-item>\r\n <el-button type=\"primary\" @click=\"onSubmit(form)\">确认</el-button>\r\n <el-button @click=\"closeFigure(form)\">取消</el-button>\r\n </el-form-item>\r\n </el-form>\r\n </div>\r\n </el-drawer>\r\n <!-- 组件弹框 -->\r\n <el-dialog :title=\"componentTitle + '指标组件'\" width=\"40%\" :visible.sync=\"component\">\r\n <el-form ref=\"form\" :model=\"componentForm\" label-width=\"150px\" @close=\"closeComponentForm()\">\r\n <el-form-item label=\"名称：\">\r\n <el-input v-model=\"componentForm.componentName\"></el-input>\r\n </el-form-item>\r\n\r\n <el-form-item label=\"类型筛选：\" v-if=\"componentForm.componentType == '类型'\">\r\n <el-checkbox-group v-model=\"componentForm.type\" @change=\"handleTypeData\">\r\n <el-checkbox v-for=\"item in typeData\" :label=\"item\" :key=\"item\">{{ item }}</el-checkbox>\r\n </el-checkbox-group>\r\n </el-form-item>\r\n <el-form-item label=\"数值筛选：\" v-if=\"componentForm.componentType != 'OD' &&componentForm.componentType != '类型'&&componentForm.componentType != '流量'\">\r\n <el-input-number v-model=\"componentForm.startValue\"></el-input-number>\r\n <el-input-number v-model=\"componentForm.endValue\" style=\"margin-left:5%\"></el-input-number>\r\n </el-form-item>\r\n <el-form-item label=\"流量类型：\" v-if=\"componentForm.componentType=='流量'\">\r\n <el-radio-group v-model=\"componentForm.flow\" >\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=\"时间模式：\">\r\n <el-select v-model=\"componentForm.timeMode\" placeholder=\"请选择时间模式\">\r\n <el-option label=\"触发\" value=\"触发\" v-if=\"componentForm.componentType != '延误'&&componentForm.componentType != '拥堵'\"></el-option>\r\n <el-option\r\n label=\"周期时刻\"\r\n value=\"周期时刻\"\r\n v-if=\"\r\n componentForm.componentType != '排队数' &&\r\n componentForm.componentType != '检测数' &&\r\n componentForm.componentType != '延误' &&\r\n componentForm.componentType != '拥堵'&&\r\n componentForm.componentType != '流量'\r\n \"></el-option>\r\n <el-option label=\"周期统计\" value=\"周期统计\" v-if=\"componentForm.componentType != 'OD'\">\r\n </el-option>\r\n </el-select>\r\n </el-form-item>\r\n <!-- <el-form-item label=\"触发类型：\" v-if=\"componentForm.timeModel=='touch'\">\r\n <el-radio-group v-model=\"componentForm.touchType\" >\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=\"componentForm.timeMode != '触发'\">\r\n <!-- <el-slider v-model=\"componentForm.cycleInterval\" show-input>\r\n </el-slider> -->\r\n <div style=\"display:inline\">\r\n <el-select v-model=\"componentForm.company\" placeholder=\"请选择单位\" @change=\"changeCompany\">\r\n <!-- <el-option v-for=\"item in timeSelect\" :key=\"item.value\" :label=\"item.label\" :value=\"item.value\"></el-option> -->\r\n <el-option label=\"秒\" value=\"秒\" v-if=\"componentForm.timeMode != '周期统计'\"></el-option>\r\n <el-option\r\n label=\"分钟\"\r\n value=\"分钟\"\r\n ></el-option>\r\n <el-option label=\"小时\" value=\"小时\" ></el-option>\r\n </el-select>\r\n <el-slider v-model=\"componentForm.cycleInterval\" :max=\"max\"> </el-slider>\r\n </div>\r\n </el-form-item>\r\n <!-- <el-form-item label=\"单位：\" ></el-form-item> -->\r\n <el-form-item label=\"起点：\" v-if=\"componentForm.componentType == 'OD'\">\r\n <el-checkbox-group v-model=\"componentForm.startSection\" @change=\"handleCheckedStartSection\">\r\n <el-checkbox v-for=\"item in sectionals\" :label=\"item.graphicName\" :key=\"item.graphicId\">{{\r\n item.graphicName\r\n }}</el-checkbox>\r\n </el-checkbox-group>\r\n </el-form-item>\r\n <el-form-item label=\"终点：\" v-if=\"componentForm.componentType == 'OD'\">\r\n <el-checkbox-group v-model=\"componentForm.endSection\" @change=\"handleCheckedendSection\">\r\n <el-checkbox v-for=\"item in sectionals\" :label=\"item.graphicName\" :key=\"item.graphicId\">{{\r\n item.graphicName\r\n }}</el-checkbox>\r\n </el-checkbox-group>\r\n </el-form-item>\r\n <el-form-item label=\"展现形式：\" v-if=\"componentForm.componentType != 'OD'\">\r\n <el-checkbox-group v-model=\"componentForm.presentation\" @change=\"handlePresentation\">\r\n <el-checkbox label=\"数值\" name=\"presentation\"></el-checkbox>\r\n <el-checkbox label=\"表格\" name=\"presentation\" v-if=\"componentForm.componentType != '拥堵'\"></el-checkbox>\r\n <el-checkbox label=\"时间曲线图\" name=\"type\"></el-checkbox>\r\n <el-checkbox label=\"直方图\" name=\"presentation\" v-if=\"componentForm.componentType == '类型'\"></el-checkbox>\r\n <el-checkbox label=\"饼状图\" name=\"presentation\" v-if=\"componentForm.componentType == '类型'\"></el-checkbox>\r\n <el-checkbox label=\"均值图\" name=\"presentation\" v-if=\"componentForm.componentType != '拥堵'\"></el-checkbox>\r\n </el-checkbox-group>\r\n <!-- <el-checkbox-group v-model=\"componentForm.presentation\" @change=\"handlePresentation\">\r\n <el-checkbox v-for=\"item in sectionals\" :label=\"item.graphicName\" :key=\"item.graphicId\" >{{item.graphicName}}</el-checkbox>\r\n </el-checkbox-group> -->\r\n </el-form-item>\r\n\r\n <el-form-item>\r\n <el-button type=\"primary\" @click=\"onSubmitComponent(componentForm)\">确认</el-button>\r\n <el-button @click=\"closeComponent(componentForm)\">取消</el-button>\r\n </el-form-item>\r\n </el-form>\r\n </el-dialog>\r\n\r\n <!-- </div> -->\r\n </div>\r\n</template>\r\n\r\n<script>\r\n// import mqtt from \"mqtt\"; // mqtt协议\r\nimport editModal from '@/views/bounced/maintenanceRemind';\r\nimport analysisConfiguration from '@/views/bounced/analysisConfiguration';\r\nimport dataBoard from '@/views/bounced/dataBoard';\r\nimport {\r\n getComponentData,\r\n getSectionalData,\r\n getVideoStatus,\r\n startTrafficAnalysis,\r\n startVideoAnalysis,\r\n getAnalysisData\r\n} from '../api/index';\r\nimport serverUrl from '../config/apiurl.js';\r\nimport axios from 'axios';\r\n// mqtt\r\n// import mqttHandle from \"../../../utils/mqttHandle\";\r\nimport mqttConfig from '@/utils/mqttConfig.js';\r\nvar mqtt; //mqtt 处理对象（全局变量）\r\nvar client;\r\n// //判断\r\nexport default {\r\n data() {\r\n return {\r\n max: '',\r\n receiveNews: '',\r\n topicSends: ['img0', 'stream0', 'trajectory0', 'detection0'],\r\n trajectory: false, //轨迹\r\n hideBoxShow: true, //隐藏箱子按钮显示隐藏\r\n closeStatus: null,\r\n modelOthers: false,\r\n componentShow: '',\r\n isShowBtn: true, //菜单按钮隐藏\r\n isShowBtn1: false, //菜单按钮显示\r\n inputVal: '',\r\n dialogFormVisible: false,\r\n areaComponent: false,\r\n indexModule: false,\r\n disabledTrafficAnalysis:true,\r\n disabledVideoAnalysis:false,\r\n //判断模拟区，画布区\r\n numberNew: 1,\r\n speed: false,\r\n component: false,\r\n sectionals: [],\r\n activeName: 'first',\r\n VideoId: '',\r\n title: '断面',\r\n componentTitle: '速度',\r\n form: {\r\n name: '',\r\n type: '',\r\n id: '',\r\n coordinate: '',\r\n Direction: '双向',\r\n StoppingSpeed: '5'\r\n },\r\n //初始图形名称\r\n startFigureName: '',\r\n areaComponentform: {\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 timeSelect: [\r\n {\r\n label: '秒',\r\n value: '秒'\r\n },\r\n {\r\n label: '分钟',\r\n value: '分钟'\r\n },\r\n {\r\n label: '小时',\r\n value: '小时'\r\n }\r\n ],\r\n titName: '',\r\n componentForm: {\r\n //单位\r\n company: '',\r\n componentName: '',\r\n componentParameterId: '01888e05fac246b29e3a19a27c3d2ab0',\r\n //周期间隔\r\n cycleInterval: '',\r\n startSectionIds: '',\r\n startSectionNames: '',\r\n endSectionIds: '',\r\n endSectionNames: '',\r\n endValue: '',\r\n //展现形式\r\n presentationForm: '',\r\n presentation: [],\r\n startValue: '',\r\n timeMode: '',\r\n type: [],\r\n startSection: [],\r\n endSection: [],\r\n componentType: '',\r\n typeFiltering: '',\r\n typeData: [],\r\n flow:'出流'\r\n\r\n },\r\n // typeData: ['小汽车', '公交车', '卡车', '非机动车', '行人'],\r\n typeData:['机动车','非机动车','行人'],\r\n //展现形式\r\n presentation: ['数值', '表格', '时间曲线图', '均值图'],\r\n trackForm: {\r\n name: ''\r\n },\r\n nowTime: '',\r\n ins: 0,\r\n btnPic: [],\r\n Data: [\r\n {\r\n title: 'xx路口',\r\n url: ''\r\n },\r\n {\r\n title: '数据看板',\r\n url: ''\r\n },\r\n {\r\n title: '分析配置',\r\n url: ''\r\n },\r\n {\r\n title: '分析配置',\r\n url: ''\r\n }\r\n ],\r\n messageInfo: [],\r\n orderList: [],\r\n enterList: [],\r\n stockInfo: [],\r\n perCent: 0,\r\n perCent1: 0,\r\n perCent2: 0,\r\n facToal: '',\r\n wbContent: '',\r\n // wxContent:'',\r\n inContent: '',\r\n outContent: '',\r\n containerDetails: '',\r\n locdesc: '',\r\n weatherItem: {},\r\n loadingShow1: true,\r\n number: '',\r\n componentId: '',\r\n analysisConfigurationdata: {},\r\n //触发数据\r\n triggerData: [],\r\n triggerListData:[],\r\n //视频类型\r\n videoType: '',\r\n videoAnalysisShow: false,\r\n trafficAnalysisShow: false,\r\n //控制unity展示\r\n videoUnityShow:true,\r\n videoAnalysisSta:'',\r\n analysis:{\r\n trafficAnalysisPath1:'',\r\n trafficAnalysisPath2:'',\r\n videoAnalysisPath:'',\r\n videoName:'',\r\n videoPath:'',\r\n videoTotalFrames:'',\r\n videoType:''\r\n },\r\n description:'请点击视频分析'\r\n };\r\n },\r\n\r\n //离开当前页面后执行\r\n destroyed: function() {\r\n //console.log(\"离开当前页\")\r\n // client.publish('msg_stream',JSON.stringify({\"msg_flag\":-1}))\r\n //client.end();\r\n },\r\n created() {\r\n window.getFigure = this.getFigureD;\r\n window.getModifyTheName = this.getModifyTheNameN;\r\n // window.getModifyTheName = this.getModifyTheNameN;\r\n window.getSingleComponentId = this.getSingleComponentIdN;\r\n window.getSimulationAreaEdit = this.getSimulationAreaEdit;\r\n window.OnScene = this.OnSceneN;\r\n this.getAllSectionalData(this.$route.query.id);\r\n this.VideoId = this.$route.query.id;\r\n this.number = this.$route.query.num;\r\n this.titName = this.$route.query.name;\r\n // this.videoType = this.$route.query.type;\r\n if (this.$route.query.type == '实时视频') {\r\n this.videoAnalysisShow = false;\r\n this.trafficAnalysisShow = false;\r\n document.getElementById('mapModule').contentWindow.lixianVideo(JSON.stringify(this.analysis));\r\n this.createMqtt();\r\n } else if (this.$route.query.type == '离线视频'){\r\n this.videoAnalysisShow = true;\r\n this.trafficAnalysisShow = true;\r\n this.getAnalysisStatus()\r\n // if(this.$route.query.status=='未分析'){\r\n // }\r\n // if(this.$route.query.status=='未分析'){\r\n // // document.getElementById('mapModule').contentWindow.lixianVideo(\"实时视频\");\r\n // }else{\r\n // } \r\n }\r\n },\r\n mounted() {\r\n \r\n },\r\n methods: {\r\n /** 创建mqtt */\r\n createMqtt() {\r\n //创建链接，接收数据\r\n this.topicSends = ['stream' + this.number, 'trajectory' + this.number, 'detection' + this.number,'trigger-'+ this.$route.query.id];\r\n window.PubScribe(this.topicSends, this.number, this.realInfo);\r\n // mqtt = mqttConfig;\r\n /*mqtt = new mqttConfig(this.topicSends);\r\n client = mqtt.createConnect();\r\n client.subscribe(['img'+this.number,'stream'+this.number, 'trajectory'+this.number, 'detection'+this.number], { qos: 0 }, (err)=> {\r\n if (!err) {\r\n console.log(\"订阅成功\");\r\n // setTimeout(function() {\r\n client.publish('msg_stream',JSON.stringify({\"msg_flag\":parseInt(this.number)}))\r\n // }, 1000);\r\n\r\n } else {\r\n console.log('消息订阅失败！')\r\n }\r\n\r\n });\r\n client.on(\"message\", (topic, message) => {\r\n //数据分类\r\n try {\r\n // this.receiveNews = this.receiveNews.concat(message);\r\n // this.realInfo(topic, this.receiveNews);\r\n this.realInfo(topic, message);\r\n } catch (error) {\r\n\r\n }\r\n });*/\r\n },\r\n //获取视频分析，交通分析状态数据\r\n getAnalysisStatus(){\r\n getVideoStatus(this.$route.query.id).then(res => {\r\n console.log(\"res.data\",res.data)\r\n //视频分析状态\r\n if(res.data.data.videoAnalysisStatus == '未分析'){\r\n this.disabledTrafficAnalysis= true\r\n // this.videoUnityShow = false\r\n this.videoUnityShow = true\r\n this.analysisData()\r\n }else if(res.data.data.videoAnalysisStatus == '分析中'){\r\n this.disabledVideoAnalysis= true\r\n this.videoUnityShow = false\r\n setTimeout(() => {\r\n this.getAnalysisStatus()\r\n }, 5000); \r\n }else if(res.data.data.videoAnalysisStatus == '已分析'){\r\n this.videoUnityShow = true\r\n this.videoAnalysisSta = res.data.data.videoAnalysisStatus\r\n this.disabledTrafficAnalysis= false\r\n this.analysisData()\r\n //交通分析状态\r\n }else if(res.data.data.trafficAnalysisStatus=='未分析'){\r\n this.disabledVideoAnalysis= true\r\n }else if(res.data.data.trafficAnalysisStatus=='分析中'){\r\n this.disabledVideoAnalysis= true\r\n this.disabledTrafficAnalysis= true\r\n }else if(res.data.data.videoAnalysisStatus == '已分析'||res.data.data.trafficAnalysisStatus == '已分析'){\r\n this.disabledVideoAnalysis= false\r\n this.disabledTrafficAnalysis= true\r\n }\r\n });\r\n },\r\n //分析视频按钮\r\n videoAnalysisBtn() {\r\n startVideoAnalysis(this.$route.query.id).then(res => {\r\n //\r\n if(res.data.msg=='请求成功'){\r\n this.$message({\r\n message: '启动成功',\r\n type: 'success'\r\n });\r\n if(this.videoAnalysisSta=='已分析'){\r\n\r\n }else if(this.videoAnalysisSta=='分析中'){\r\n this.description = '正在分析中'\r\n setTimeout(() => {\r\n this.getAnalysisStatus()\r\n }, 5000); \r\n }else if(this.videoAnalysisSta=='未分析'){\r\n // setTimeout(() => {\r\n // this.getAnalysisStatus()\r\n // }, 5000); \r\n } \r\n } \r\n });\r\n },\r\n //交通分析\r\n trafficAnalysisBtn() {\r\n startTrafficAnalysis(this.$route.query.id).then(res => {\r\n //\r\n console.log(\"res.data\",res.data.data)\r\n if (res.data.code == 200) {\r\n this.$message({\r\n message: res.data.msg,\r\n type: 'success'\r\n });\r\n }else{\r\n this.$message({\r\n message: res.data.msg,\r\n type: 'warning'\r\n });\r\n }\r\n });\r\n },\r\n //获取视频分析结果\r\n analysisData(){\r\n getAnalysisData(this.$route.query.id).then(res => {\r\n console.log(\"res.data.data\",res.data.data)\r\n this.analysis.trafficAnalysisPath1 = res.data.data.trafficAnalysisPath1\r\n this.analysis.trafficAnalysisPath2 = res.data.data.trafficAnalysisPath2\r\n this.analysis.videoAnalysisPath = res.data.data.videoAnalysisPath\r\n this.analysis.videoName = res.data.data.videoName\r\n this.analysis.videoPath = res.data.data.videoPath\r\n this.analysis.videoTotalFrames = res.data.data.videoTotalFrames\r\n this.analysis.videoType=this.$route.query.type\r\n \r\n });\r\n },\r\n //停止订阅mqtt\r\n disConnect() {\r\n /*if (client != null) {\r\n client.unsubscribe(this.topicSends);\r\n client = null;\r\n }*/\r\n },\r\n /** 实时数据分类 */\r\n realInfo(topic, message) {\r\n switch (topic) {\r\n // 接收托片\r\n case 'img'+this.number: \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 document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));\r\n if (msg.rate == 'high') {\r\n document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));\r\n } else {\r\n this.analysisConfigurationdata = msg;\r\n }\r\n } catch (error) {}\r\n break;\r\n // 树结构\r\n case 'stream'+this.number:\r\n try {\r\n const utf8decoder1 = new TextDecoder();\r\n const u8arr = new Uint8Array(message);\r\n const temp = utf8decoder1.decode(u8arr); // 将二进制数据转为字符串\r\n const msg = JSON.parse(temp);\r\n document.getElementById('mapModule').contentWindow.getData(JSON.stringify(msg));\r\n } catch (error) {}\r\n break;\r\n // 控制台输出\r\n case 'trajectory'+this.number: \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);\r\n document.getElementById('mapModule').contentWindow.getGuiJi(JSON.stringify(msg));\r\n } catch (error) {}\r\n break;\r\n // 触发\r\n case 'detection'+this.number: \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 var detId = [];\r\n const msgN = JSON.parse(temp);\r\n this.triggerData = msgN;\r\n if (temp.length != 0) {\r\n for (let i = 0; i < msgN.length; i++) {\r\n detId.push(msgN[i].det_id);\r\n }\r\n document.getElementById('mapModule').contentWindow.getChuFa(JSON.stringify(detId));\r\n }\r\n } catch (error) {}\r\n break;\r\n case 'trigger-'+this.$route.query.id:\r\n try {\r\n // console.log(\"trigger_msgN\",message)\r\n const utf8decoder = new TextDecoder();\r\n const u8arr = new Uint8Array(message);\r\n const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串\r\n var detId = [];\r\n const msgN = JSON.parse(temp);\r\n // console.log(\"trigger_msgN\",msgN)\r\n this.triggerListData = msgN;\r\n } catch (error) {}\r\n break;\r\n }\r\n this.receiveNews = '';\r\n },\r\n // handleClick(tab, event) {\r\n // console.log(tab, event);\r\n // },\r\n changeCompany(val) {\r\n console.log('val', val);\r\n if (val == '小时') {\r\n this.max = '24';\r\n } else {\r\n this.max = '100';\r\n }\r\n },\r\n //初始化unity\r\n OnSceneN() {\r\n document.getElementById('mapModule').contentWindow.postVideoId(JSON.stringify(this.$route.query.id));\r\n document.getElementById('mapModule').contentWindow.lixianVideo(JSON.stringify(this.analysis));\r\n },\r\n // //新增组件根据组件id获取单个组件数据\r\n getSingleComponentIdN(id, type, name) {\r\n console.log('id', id);\r\n console.log('type', type);\r\n console.log('name', name);\r\n this.componentId = id;\r\n this.componentForm.componentType = type;\r\n this.componentTitle = type;\r\n getComponentData({ AnalogAreaComponentId: id }).then(res => {\r\n console.log('res', res);\r\n if (res.data.code == 200) {\r\n console.log('res', res.data.data);\r\n this.component = true;\r\n if (res.data.data.company != '') {\r\n this.componentForm.company = res.data.data.company;\r\n }\r\n // this.componentForm.componentName = res.data.data.componentName+'-'+type\r\n this.componentForm.componentName = res.data.data.componentName;\r\n if (res.data.data.timeMode != '') {\r\n this.componentForm.timeMode = res.data.data.timeMode;\r\n }else{\r\n console.log(\"this.componentForm.timeMode\",this.componentForm.timeMode);\r\n console.log(\"this.componentForm.componentType\",this.componentForm.componentType);\r\n if(this.componentForm.componentType=='延误'||this.componentForm.componentType=='拥堵'){\r\n console.log(\"this.componentForm.timeMode\",this.componentForm.timeMode);\r\n this.componentForm.timeMode = '周期统计'\r\n }else{\r\n this.componentForm.timeMode = '触发'\r\n }\r\n }\r\n this.componentForm.componentParameterId = res.data.data.componentParameterId;\r\n this.componentForm.cycleInterval = res.data.data.cycleInterval;\r\n this.componentForm.startSectionIds = res.data.data.startSectionIds;\r\n this.componentForm.startSectionNames = res.data.data.startSectionNames;\r\n this.componentForm.endSectionIds = res.data.data.endSectionIds;\r\n this.componentForm.endSectionNames = res.data.data.endSectionNames;\r\n this.componentForm.company = res.data.data.company;\r\n this.componentForm.endValue = res.data.data.endValue;\r\n this.componentForm.startValue = res.data.data.startValue;\r\n this.componentForm.presentationForm = res.data.data.presentationForm;\r\n this.getAllSectionalData(this.$route.query.id);\r\n // this.componentForm.typeFiltering = res.data.data.typeFiltering\r\n // this.componentForm.type = res.data.data.type\r\n if (res.data.data.startSectionIds != '') {\r\n console.log('startSectionIds', res.data.data.startSectionIds);\r\n var startSectionIdArr = [];\r\n var startSectionArr = [];\r\n startSectionIdArr = res.data.data.startSectionIds.split(',');\r\n console.log('this.sectionals', this.sectionals);\r\n console.log('startSectionIdArr', startSectionIdArr);\r\n startSectionIdArr.forEach(item => {\r\n this.sectionals.forEach(items => {\r\n if (item == items.graphicId) {\r\n startSectionArr.push(items.graphicName);\r\n this.componentForm.startSection = startSectionArr;\r\n }\r\n });\r\n });\r\n }\r\n if (res.data.data.endSectionIds != '') {\r\n console.log('endSectionIds', res.data.data.endSectionIds);\r\n var endSectionIdArr = [];\r\n var endSectionArr = [];\r\n endSectionIdArr = res.data.data.endSectionIds.split(',');\r\n console.log('this.sectionals', this.sectionals);\r\n console.log('endSectionIdArr', endSectionIdArr);\r\n endSectionIdArr.forEach(item => {\r\n this.sectionals.forEach(items => {\r\n if (item == items.graphicId) {\r\n endSectionArr.push(items.graphicName);\r\n this.componentForm.endSection = endSectionArr;\r\n }\r\n });\r\n });\r\n }\r\n if (this.componentForm.presentationForm != '') {\r\n var arr = [];\r\n arr = this.componentForm.presentationForm.split(',');\r\n this.componentForm.presentation = arr;\r\n } else if (this.componentForm.presentationForm == '') {\r\n this.componentForm.presentation = [];\r\n }\r\n if (res.data.data.type != '') {\r\n var arr = [];\r\n arr = res.data.data.type.split(',');\r\n this.componentForm.type = arr;\r\n } else {\r\n this.componentForm.type = [];\r\n }\r\n console.log('this.componentForm', this.componentForm);\r\n }\r\n });\r\n },\r\n //修改模拟区组件、图形\r\n getSimulationAreaEdit(id, type, componentType, name, number) {\r\n console.log('number', number);\r\n this.numberNew = number;\r\n if (type == '图形') {\r\n this.form.id = id;\r\n this.form.name = name;\r\n this.form.type = componentType;\r\n this.startFigureName = name;\r\n if (this.form.type == '轨迹') {\r\n this.dialogFormVisible = true;\r\n } else if (this.form.type == '区域') {\r\n this.dialogFormVisible = true;\r\n } else if (this.form.type == '断面') {\r\n this.dialogFormVisible = true;\r\n }\r\n } else if (type == '组件') {\r\n this.componentId = id;\r\n this.componentForm.componentType = componentType;\r\n this.componentTitle = componentType;\r\n getComponentData({ AnalogAreaComponentId: id }).then(res => {\r\n console.log('res', res);\r\n if (res.data.code == 200) {\r\n console.log('res', res.data.data);\r\n this.component = true;\r\n if (res.data.data.company != '') {\r\n this.componentForm.company = res.data.data.company;\r\n }\r\n if (res.data.data.timeMode != '') {\r\n this.componentForm.timeMode = res.data.data.timeMode;\r\n }else{\r\n if(this.componentForm.componentType=='延误'||this.componentForm.componentType=='拥堵'){\r\n this.componentForm.timeMode = '周期统计'\r\n }else{\r\n this.componentForm.timeMode = '触发'\r\n }\r\n }\r\n this.componentForm.componentName = res.data.data.componentName;\r\n this.componentForm.componentParameterId = res.data.data.componentParameterId;\r\n this.componentForm.cycleInterval = res.data.data.cycleInterval;\r\n this.componentForm.startSectionIds = res.data.data.startSectionIds;\r\n this.componentForm.startSectionNames = res.data.data.startSectionNames;\r\n this.componentForm.endSectionIds = res.data.data.endSectionIds;\r\n this.componentForm.endSectionNames = res.data.data.endSectionNames;\r\n this.componentForm.endValue = res.data.data.endValue;\r\n this.componentForm.startValue = res.data.data.startValue;\r\n this.componentForm.presentationForm = res.data.data.presentationForm;\r\n // this.componentForm.type = res.data.data.type\r\n if (res.data.data.startSectionIds != '') {\r\n console.log('startSectionIds', res.data.data.startSectionIds);\r\n var startSectionIdArr = [];\r\n var startSectionArr = [];\r\n startSectionIdArr = res.data.data.startSectionIds.split(',');\r\n console.log('this.sectionals', this.sectionals);\r\n console.log('startSectionIdArr', startSectionIdArr);\r\n startSectionIdArr.forEach(item => {\r\n this.sectionals.forEach(items => {\r\n if (item == items.graphicId) {\r\n startSectionArr.push(items.graphicName);\r\n this.componentForm.startSection = startSectionArr;\r\n }\r\n });\r\n });\r\n }\r\n if (res.data.data.endSectionIds != '') {\r\n console.log('endSectionIds', res.data.data.endSectionIds);\r\n var endSectionIdArr = [];\r\n var endSectionArr = [];\r\n endSectionIdArr = res.data.data.endSectionIds.split(',');\r\n console.log('this.sectionals', this.sectionals);\r\n console.log('endSectionIdArr', endSectionIdArr);\r\n endSectionIdArr.forEach(item => {\r\n this.sectionals.forEach(items => {\r\n if (item == items.graphicId) {\r\n endSectionArr.push(items.graphicName);\r\n this.componentForm.endSection = endSectionArr;\r\n }\r\n });\r\n });\r\n }\r\n if (this.componentForm.presentationForm != '') {\r\n var arr = [];\r\n arr = this.componentForm.presentationForm.split(',');\r\n this.componentForm.presentation = arr;\r\n } else if (this.componentForm.presentationForm == '') {\r\n this.componentForm.presentation = [];\r\n }\r\n if (res.data.data.type != '') {\r\n var arr = [];\r\n arr = res.data.data.type.split(',');\r\n this.componentForm.type = arr;\r\n } else {\r\n this.componentForm.type = [];\r\n }\r\n }\r\n });\r\n }\r\n },\r\n //获取所有断面数据\r\n getAllSectionalData(VideoId) {\r\n getSectionalData({ VideoId: VideoId }).then(res => {\r\n console.log('res', res);\r\n if (res.data.code == 200) {\r\n this.sectionals = res.data.data;\r\n }\r\n });\r\n },\r\n figureType(type) {\r\n if (type == 'Move') {\r\n type = '轨迹';\r\n } else if (type == 'Poly') {\r\n type = '区域';\r\n } else if (type == 'Line') {\r\n type = '断面';\r\n }\r\n return type;\r\n },\r\n getFigureD(item, index, indexNew) {\r\n console.log('图形类型', item);\r\n console.log('初始图形名称', index);\r\n this.startFigureName = index;\r\n console.log('图形位置', indexNew);\r\n this.dialogFormVisible = true;\r\n this.form.name = index;\r\n this.form.type = this.figureType(item);\r\n this.form.coordinate = indexNew;\r\n this.form.id = '';\r\n this.title = this.figureType(item);\r\n },\r\n //双击图形修改图形名称弹框\r\n getModifyTheNameN(data, number) {\r\n console.log('data', data);\r\n console.log('number', number);\r\n this.numberNew = number;\r\n var arr = [];\r\n arr = data.split(',');\r\n console.log('arr', arr);\r\n this.form.id = arr[0];\r\n this.form.name = arr[1];\r\n this.form.type = arr[2];\r\n this.startFigureName = arr[1];\r\n if (this.form.type == '轨迹') {\r\n // this.open2()\r\n this.dialogFormVisible = true;\r\n } else if (this.form.type == '区域') {\r\n this.dialogFormVisible = true;\r\n } else if (this.form.type == '断面') {\r\n this.dialogFormVisible = true;\r\n }\r\n },\r\n //新增、编辑图形确认按钮\r\n onSubmit(form) {\r\n console.log('form', form);\r\n //新增\r\n if (form.id == '') {\r\n let formData = new FormData();\r\n if (form.type == '断面') {\r\n formData.append('GraphicName', form.name);\r\n formData.append('GraphicType', form.type);\r\n formData.append('Coordinate', form.coordinate);\r\n formData.append('VideoId', this.VideoId);\r\n formData.append('Direction', form.Direction);\r\n } else if (form.type == '区域') {\r\n formData.append('GraphicName', form.name);\r\n formData.append('GraphicType', form.type);\r\n formData.append('Coordinate', form.coordinate);\r\n formData.append('VideoId', this.VideoId);\r\n // formData.append(\"Direction\",form.Direction);\r\n // formData.append(\"StoppingSpeed\",form.StoppingSpeed);\r\n } else {\r\n formData.append('GraphicName', form.name);\r\n formData.append('GraphicType', form.type);\r\n formData.append('Coordinate', form.coordinate);\r\n formData.append('VideoId', this.VideoId);\r\n // formData.append(\"Direction\",form.Direction);\r\n }\r\n\r\n axios({\r\n method: 'post',\r\n url: serverUrl.addFigure,\r\n data: formData\r\n }).then(res => {\r\n console.log('res', res);\r\n\r\n if (res.data.code == 200) {\r\n this.$message({\r\n message: res.data.msg,\r\n type: 'success'\r\n });\r\n setTimeout(() => { \r\n this.$message({\r\n type: \"warning\",\r\n message: \"请点击交通分析，获取最新数据！\",\r\n showClose: true,\r\n duration:0,\r\n });\r\n }, 3000);\r\n \r\n document.getElementById('mapModule').contentWindow.postFigureId(JSON.stringify(res.data.data));\r\n document\r\n .getElementById('mapModule')\r\n .contentWindow.postFigureName(\r\n JSON.stringify(res.data.data + ',' + form.name + ',' + this.startFigureName + ',' + this.numberNew)\r\n );\r\n this.dialogFormVisible = false;\r\n } else {\r\n this.$message({\r\n message: res.data.msg,\r\n type: 'warning'\r\n });\r\n }\r\n });\r\n } else {\r\n //编辑\r\n let formData = new FormData();\r\n if (form.type == '断面') {\r\n formData.append('GraphicName', form.name);\r\n formData.append('GraphicType', form.type);\r\n formData.append('Direction', form.Direction);\r\n formData.append('GraphicId', form.id);\r\n formData.append('VideoId', this.VideoId);\r\n } else if (form.type == '区域') {\r\n formData.append('GraphicName', form.name);\r\n formData.append('GraphicType', form.type);\r\n formData.append('Direction', form.Direction);\r\n formData.append('GraphicId', form.id);\r\n formData.append('VideoId', this.VideoId);\r\n formData.append('StoppingSpeed', form.StoppingSpeed);\r\n } else {\r\n formData.append('GraphicName', form.name);\r\n formData.append('GraphicType', form.type);\r\n // formData.append(\"Direction\",form.Direction);\r\n formData.append('GraphicId', form.id);\r\n formData.append('VideoId', this.VideoId);\r\n }\r\n axios({\r\n method: 'post',\r\n url: serverUrl.editFigure,\r\n data: formData\r\n }).then(res => {\r\n console.log('res', res);\r\n\r\n if (res.data.code == 200) {\r\n this.$message({\r\n message: res.data.msg,\r\n type: 'success'\r\n });\r\n setTimeout(() => { \r\n this.$message({\r\n type: \"warning\",\r\n message: \"请点击交通分析，获取最新数据！\",\r\n showClose: true,\r\n duration:0,\r\n });\r\n }, 5000);\r\n console.log('startFigureName', this.startFigureName);\r\n document.getElementById('mapModule').contentWindow.postFigureId(JSON.stringify(res.data.data));\r\n console.log('this.numberNew', this.numberNew);\r\n document\r\n .getElementById('mapModule')\r\n .contentWindow.postFigureName(\r\n JSON.stringify(form.id + ',' + form.name + ',' + this.startFigureName + ',' + this.numberNew)\r\n );\r\n this.dialogFormVisible = false;\r\n } else {\r\n this.$message({\r\n message: res.data.msg,\r\n type: 'warning'\r\n });\r\n }\r\n });\r\n }\r\n },\r\n //新增编辑组件取消\r\n onSubmitComponent(componentForm) {\r\n this.component = false;\r\n let formData = new FormData();\r\n if (componentForm.componentType == 'OD') {\r\n //名称\r\n formData.append('componentName', componentForm.componentName);\r\n //单位\r\n formData.append('company', componentForm.company);\r\n //id\r\n formData.append('componentParameterId', componentForm.componentParameterId);\r\n formData.append('cycleInterval', componentForm.cycleInterval);\r\n formData.append('startSectionIds', componentForm.startSectionIds);\r\n formData.append('startSectionNames', componentForm.startSectionNames);\r\n formData.append('endSectionIds', componentForm.endSectionIds);\r\n formData.append('endSectionNames', componentForm.endSectionNames);\r\n formData.append('endValue', componentForm.endValue);\r\n formData.append('startValue', componentForm.startValue);\r\n formData.append('timeMode', componentForm.timeMode);\r\n formData.append('presentationForm', '矩阵图');\r\n } else if (componentForm.componentType == '类型') {\r\n //名称\r\n formData.append('componentName', componentForm.componentName);\r\n //单位\r\n formData.append('company', componentForm.company);\r\n //id\r\n formData.append('componentParameterId', componentForm.componentParameterId);\r\n formData.append('cycleInterval', componentForm.cycleInterval);\r\n formData.append('endValue', componentForm.endValue);\r\n formData.append('startValue', componentForm.startValue);\r\n formData.append('timeMode', componentForm.timeMode);\r\n formData.append('presentationForm', componentForm.presentationForm);\r\n formData.append('type', componentForm.type);\r\n } else {\r\n //名称\r\n formData.append('componentName', componentForm.componentName);\r\n //单位\r\n formData.append('company', componentForm.company);\r\n //id\r\n formData.append('componentParameterId', componentForm.componentParameterId);\r\n formData.append('cycleInterval', componentForm.cycleInterval);\r\n formData.append('endValue', componentForm.endValue);\r\n formData.append('startValue', componentForm.startValue);\r\n formData.append('timeMode', componentForm.timeMode);\r\n formData.append('presentationForm', componentForm.presentationForm);\r\n }\r\n axios({\r\n method: 'post',\r\n url: serverUrl.editComponent,\r\n data: formData\r\n }).then(res => {\r\n console.log('res', res);\r\n\r\n if (res.data.code == 200) {\r\n this.$message({\r\n message: res.data.msg,\r\n type: 'success'\r\n });\r\n // document.getElementById(\"mapModule\").contentWindow.postFigureId(JSON.stringify(res.data.data))\r\n document.getElementById('mapModule').contentWindow.editComponent(this.componentId + ',' + componentForm.componentName);\r\n this.dialogFormVisible = false;\r\n } else {\r\n this.$message({\r\n message: res.data.msg,\r\n type: 'warning'\r\n });\r\n }\r\n });\r\n },\r\n //新增编辑组件取消\r\n closeComponent(componentForm) {\r\n this.component = false;\r\n this.componentForm = {\r\n //单位\r\n company: '',\r\n componentName: '',\r\n componentParameterId: '01888e05fac246b29e3a19a27c3d2ab0',\r\n //周期间隔\r\n cycleInterval: '',\r\n startSectionIds: '',\r\n startSectionNames: '',\r\n endSectionIds: '',\r\n endSectionNames: '',\r\n endValue: '',\r\n //展现形式\r\n presentationForm: '',\r\n presentation: [],\r\n startValue: '',\r\n timeMode: '',\r\n type: [],\r\n startSection: [],\r\n endSection: [],\r\n componentType: '',\r\n typeFiltering: '',\r\n typeData: []\r\n };\r\n document.getElementById('mapModule').contentWindow.editComponent('');\r\n },\r\n //新增、编辑图形取消按钮\r\n closeFigure(form) {\r\n console.log('form', form);\r\n if (form.id != '') {\r\n this.dialogFormVisible = false;\r\n document.getElementById('mapModule').contentWindow.closeEdit(JSON.stringify(form.type + ',' + form.id));\r\n } else {\r\n this.dialogFormVisible = false;\r\n document.getElementById('mapModule').contentWindow.delFigure();\r\n }\r\n },\r\n closeComponentForm() {\r\n this.component = false;\r\n document.getElementById('mapModule').contentWindow.editComponent('');\r\n },\r\n closeForm(form) {\r\n if (this.form.id != '') {\r\n this.dialogFormVisible = false;\r\n document.getElementById('mapModule').contentWindow.closeEdit(JSON.stringify(form.type + ',' + form.id));\r\n } else {\r\n this.dialogFormVisible = false;\r\n document.getElementById('mapModule').contentWindow.delFigure();\r\n }\r\n },\r\n //改变起点\r\n handleCheckedStartSection(value) {\r\n console.log('改变起点', value);\r\n var startSectionIdArr = [];\r\n var startSectionNameArr = [];\r\n value.forEach(item => {\r\n this.sectionals.forEach(items => {\r\n if (item == items.graphicName) {\r\n startSectionIdArr.push(items.graphicId);\r\n startSectionNameArr.push(items.graphicName);\r\n let newStartSectionId = startSectionIdArr.join(',');\r\n let newStartSectionName = startSectionNameArr.join(',');\r\n this.componentForm.startSectionIds = newStartSectionId;\r\n this.componentForm.startSectionNames = newStartSectionName;\r\n }\r\n });\r\n });\r\n },\r\n //改变终点\r\n handleCheckedendSection(value) {\r\n console.log('改变终点', value);\r\n var endSectionIdArr = [];\r\n var endSectionNameArr = [];\r\n value.forEach(item => {\r\n this.sectionals.forEach(items => {\r\n if (item == items.graphicName) {\r\n endSectionIdArr.push(items.graphicId);\r\n endSectionNameArr.push(items.graphicName);\r\n let newendSectionId = endSectionIdArr.join(',');\r\n let newEndSectionName = endSectionNameArr.join(',');\r\n console.log('newendSectionId', newendSectionId);\r\n console.log('newEndSectionName', newEndSectionName);\r\n this.componentForm.endSectionIds = newendSectionId;\r\n this.componentForm.endSectionNames = newEndSectionName;\r\n }\r\n });\r\n });\r\n },\r\n //修改展现形式\r\n handlePresentation(value) {\r\n console.log('展现形式', value);\r\n let presentation = value.join(',');\r\n this.componentForm.presentationForm = presentation;\r\n console.log('this.componentForm.presentationForm', this.componentForm.presentationForm);\r\n },\r\n //类型数据\r\n handleTypeData(value) {\r\n console.log('类型数据', value);\r\n let type = value.join(',');\r\n this.componentForm.typeData = type;\r\n },\r\n //模型加载等待\r\n loadingShow(data) {\r\n this.loadingShow1 = data;\r\n },\r\n\r\n handleSearch() {\r\n this.modelOthers = true;\r\n this.$refs.htModels.finbBox(this.inputVal);\r\n console.log(this.$refs.htModels, 'asdasdasd');\r\n this.inputVal = '';\r\n },\r\n handleRow(val) {\r\n this.modelOthers = true;\r\n this.$refs.htModels.finbBox(val);\r\n },\r\n // 天气\r\n handleWather() {\r\n axios({\r\n url: 'https://restapi.amap.com/v3/weather/weatherInfo?key=bc2b906032fdd8a63cbd0790d656b1d7&city=620100',\r\n methods: ''\r\n }).then(res => {\r\n this.weatherItem = res.data.lives[0];\r\n console.log(this.weatherItem, 'asdsads');\r\n });\r\n }\r\n },\r\n components: {\r\n editModal,\r\n analysisConfiguration,\r\n dataBoard\r\n }\r\n};\r\n</script>\r\n<style scoped>\r\n.el-form-item {\r\n margin-bottom: 15px;\r\n}\r\n\r\n.content-box::-webkit-scrollbar {\r\n display: none; /* Chrome Safari */\r\n}\r\n.new-dialog {\r\n width: 49%;\r\n height: 11%;\r\n left: calc(24vw);\r\n top: 90vh;\r\n bottom: 0 /* right:auto;; */;\r\n}\r\n.formBox {\r\n margin-top: 20px;\r\n margin-left: 20px;\r\n}\r\n/* .new-dialog .el-dialog {\r\n width:100%!important;\r\n margin: 0vh auto !important;\r\n margin-top: 0vh!important;\r\n} */\r\n.new-dialog .el-dialog {\r\n width: 100% !important;\r\n margin: 0 auto 0px !important;\r\n /* margin-top: 0vh!important; */\r\n}\r\n.new-dialog .el-dialog__wrapper::-webkit-scrollbar {\r\n display: none; /* Chrome Safari */\r\n}\r\n.new-dialog .customWidth {\r\n width: 100%;\r\n min-width: 150px;\r\n}\r\n.mapModuleApp {\r\n /* width:100%; */\r\n width: 1600px;\r\n height: 900px;\r\n display: inline-block;\r\n border: 1px soild #eee;\r\n}\r\n.el-drawer.btt,\r\n.el-drawer.ttb {\r\n width: 100%;\r\n left: 0;\r\n right: 0;\r\n height: 100% !important;\r\n}\r\n\r\n.el-drawer__container {\r\n position: relative;\r\n left: 0;\r\n right: 0;\r\n top: 0;\r\n bottom: 0;\r\n height: 100%;\r\n width: 100%;\r\n}\r\n.videoAnalysis {\r\n position: absolute;\r\n right: 200px;\r\n top: 17px;\r\n}\r\n.trafficAnalysis {\r\n position: absolute;\r\n right: 100px;\r\n top: 17px;\r\n}\r\n</style>\r\n"]}]} |