{"remainingRequest":"D:\\Hjm项目\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\Hjm项目\\TransFlow\\src\\views\\index.vue?vue&type=script&lang=js&","dependencies":[{"path":"D:\\Hjm项目\\TransFlow\\src\\views\\index.vue","mtime":1673575849760},{"path":"D:\\Hjm项目\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\Hjm项目\\TransFlow\\node_modules\\babel-loader\\lib\\index.js","mtime":499162500000},{"path":"D:\\Hjm项目\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\Hjm项目\\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//\n//\n//\n//\n//\n//\n//\n//\n//\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\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 {getComponentData,getSectionalData} 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// var topicSends; //订阅的topic 例如：[\"Time1\", \"EngineMain1\", \"Console1\", \"Location1\"]\r\n \r\nexport default {\r\n  data() {\r\n    return {\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      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          label:'分钟',\r\n         value:'分钟'  \r\n        },{\r\n          label:'小时',\r\n         value:'小时'  \r\n        },{\r\n          label:'天',\r\n         value:'天'  \r\n        }\r\n      ],\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    },\r\n    typeData:[\"小汽车\",\"公交车\",\"卡车\",\"非机动车\",\"行人\"],\r\n    //展现形式\r\n    presentation:['数值','表格','时间曲线图','均值图'],\r\n\r\n      trackForm:{\r\n        name:\"\"\r\n      },\r\n      //   dateTime: this.$moment(new Date()).format(\"LL\"),\r\n      nowTime: \"\",\r\n      //   weekday: this.$moment().format(\"dddd\"),\r\n      ins: 0,\r\n      imgUrl: '',\r\n      imgUrl1: '',\r\n      imgUrl2: '',\r\n      imgUrl3: '',\r\n      imgUrl4: '',\r\n      imgUrl5: '',\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    //   carInfo: [], //小车信息\r\n    //   carName: '',\r\n    //   palletizerInfo: [], //码垛机信息\r\n    //   palletizerName: '',\r\n    //   destackerInfo: [], //拆垛机信息\r\n    //   destackerName: '',\r\n    //   hoistInfo: [], //提升机信息’\r\n    //   hoistName: '',\r\n    //   battaryStationInfo: [],//快换电池装置\r\n    //   battaryStationName: \"\",\r\n    //   conveyorInfo: [], //输送机信息\r\n    //   conveyorName: \"\",\r\n    };\r\n  },\r\n  mounted() {\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.getSingleComponentIdN()\r\n  },\r\n  //离开当前页面后执行\r\ndestroyed: function () {\r\n console.log(\"离开当前页\")\r\n  client.publish('msg_stream',JSON.stringify({\"msg_flag\":-1})) \r\n},\r\n\r\n  created() {\r\n    // this.testMqtt()\r\n   this.componentForm.company = this.timeSelect[0].value;\r\n   this.createMqtt();\r\n  },\r\n  methods: {\r\n     /** 创建mqtt */\r\n    createMqtt() {\r\n      //创建链接，接收数据\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            client.publish('msg_stream',JSON.stringify({\"msg_flag\":parseInt(this.number)})) \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    //停止订阅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 \"img0\":\r\n        case \"img1\":\r\n        case \"img2\":\r\n          try {\r\n             const utf8decoder = new TextDecoder()\r\n              const u8arr = new Uint8Array(message)\r\n              const temp = utf8decoder.decode(u8arr)\t// 将二进制数据转为字符串\r\n              const msg = JSON.parse(temp)\t\t//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据\r\n                document.getElementById(\"mapModule\").contentWindow.getDestination(JSON.stringify(msg))\r\n          } catch (error) {}\r\n          break;\r\n        // 树结构\r\n        case \"stream0\":\r\n        case \"stream1\":\r\n        case \"stream2\":\r\n          try {\r\n            const utf8decoder1 = new TextDecoder()\r\n              const u8arr = new Uint8Array(message)\r\n              const temp = utf8decoder1.decode(u8arr)\t// 将二进制数据转为字符串\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 \"trajectory0\":\r\n        case \"trajectory1\":\r\n        case \"trajectory2\":\r\n        case \"trajectory3\":\r\n          try {\r\n            const utf8decoder = new TextDecoder()\r\n              const u8arr = new Uint8Array(message)\r\n            //    console.log(\"message11\",message)\r\n              const temp = utf8decoder.decode(u8arr)\t// 将二进制数据转为字符串\r\n            //   console.log(\"temp11\",temp)\r\n              const msg = JSON.parse(temp)\r\n                //  console.log(\"msg11\",msg)\r\n                document.getElementById(\"mapModule\").contentWindow.getGuiJi(JSON.stringify(msg))\r\n          } catch (error) {}\r\n          break;\r\n        // 触发\r\n        case \"detection0\":\r\n        case \"detection1\":\r\n        case \"detection2\":\r\n          try {\r\n             const utf8decoder = new TextDecoder()\r\n              const u8arr = new Uint8Array(message)\r\n            //   console.log(\"message\",message)\r\n              const temp = utf8decoder.decode(u8arr)\t// 将二进制数据转为字符串\r\n            //   console.log(\"temp\",temp)\r\n            var detId = []\r\n             const msgN = JSON.parse(temp)\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                // console.log(\"detId\",detId)\r\n            //   const msg = detId\r\n            //   console.log(\"msg\",msg)\r\n                document.getElementById(\"mapModule\").contentWindow.getChuFa(JSON.stringify(detId))\r\n                // document.getElementById(\"mapModule\").contentWindow.getChuFa(detId)\r\n             }\r\n             \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   \r\n    //初始化unity\r\n    OnSceneN(){\r\n         document.getElementById(\"mapModule\").contentWindow.postVideoId(JSON.stringify(this.$route.query.id))\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           if(res.data.data.timeMode!=''){\r\n            this.componentForm.timeMode = res.data.data.timeMode\r\n           }\r\n            this.componentForm.componentName = res.data.data.componentName+'-'+type\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\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(res.data.data.presentationForm!=''){\r\n                var presentationN = []\r\n                presentationN  = res.data.data.presentationForm.split(',')\r\n                this.componentForm.presentation = presentationN\r\n            }\r\n        }\r\n        })\r\n    },\r\n    //修改模拟区组件、图形\r\n    getSimulationAreaEdit(id,type,componentType,name){\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           }\r\n            this.componentForm.componentName = res.data.data.componentName+'-'+type\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\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(res.data.data.presentationForm!=''){\r\n                var presentationN = []\r\n                presentationN  = res.data.data.presentationForm.split(',')\r\n                this.componentForm.presentation = presentationN\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    },\r\n    //双击图形修改图形名称弹框\r\n    getModifyTheNameN(data){\r\n        console.log(\"data\",data)\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                document.getElementById(\"mapModule\").contentWindow.postFigureId(JSON.stringify(res.data.data))\r\n                document.getElementById(\"mapModule\").contentWindow.postFigureName(JSON.stringify(res.data.data+','+form.name+','+this.startFigureName))\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             }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(\"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             }\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                console.log(\"startFigureName\",this.startFigureName)\r\n                // document.getElementById(\"mapModule\").contentWindow.postFigureId(JSON.stringify(res.data.data))\r\n                document.getElementById(\"mapModule\").contentWindow.postFigureName(JSON.stringify(form.id+','+form.name+','+this.startFigureName))\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    },\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                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                formData.append(\"type\",componentForm.type);\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(JSON.stringify(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    }, \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            document.getElementById(\"mapModule\").contentWindow.closeEdit(JSON.stringify(form.type+','+form.id))\r\n\r\n        }else{\r\n             this.dialogFormVisible = false\r\n        document.getElementById(\"mapModule\").contentWindow.delFigure()\r\n        }\r\n       \r\n    },\r\n    closeComponentForm(){\r\n        this.component = false\r\n    },\r\n    closeForm(form){\r\n        \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            //  document.getElementById(\"mapModule\").contentWindow.closeEdit(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    //修改展现形式\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    loadingShow(data) {\r\n      this.loadingShow1 = data\r\n    },\r\n\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({ url: 'https://restapi.amap.com/v3/weather/weatherInfo?key=bc2b906032fdd8a63cbd0790d656b1d7&city=620100', methods: '' }).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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+MA;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;;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;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;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;;AAEA;AACA;AACA;AACA;;AAEA;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;;;;AAIA;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\r\n    <!-- <div class=\"container\"> -->\r\n    <div >\r\n      <el-tabs type=\"border-card\"  v-model=\"activeName\">\r\n        <el-tab-pane label=\"xx路口\" name=\"first\" >\r\n            <div class=\"mapModuleApp\">\r\n                     <iframe id=\"mapModule\" src=\"./VideoWeb/index.html\" frameborder=\"0\" style=\"width: 100%; height:100%;\" scrolling='no'></iframe>\r\n                      <!-- <iframe src=\"./VideoWeb/index.html\" style=\"height: 100%; width: 100%;border: none\" \r\n          ref=\"iframe\"></iframe> -->\r\n                </div>\r\n                 <!-- <div style=\"width:20%;height:100%;display:inline-block;border:1px soild #eee;padding:15px;\">\r\n\r\n            <el-button type=\"primary\" @click=\"dialogFormVisible = true\">断面组件</el-button>\r\n            <el-button type=\"primary\" @click=\"areaComponent = true\">区域组件</el-button>\r\n            <el-button type=\"primary\" @click=\"trajectory=true\">轨迹组件</el-button>\r\n            <el-button type=\"primary\" @click=\"speed = true\">速度组件</el-button>\r\n            <el-button type=\"primary\" @click=\"flow = true\">流量组件</el-button>\r\n            <el-button type=\"primary\" @click=\"indexModule = true\">车头时距</el-button>\r\n            <el-button type=\"primary\" @click=\"indexModule = true\">排队数</el-button>\r\n            <el-button type=\"primary\" @click=\"indexModule = true\">检测数</el-button>\r\n            <el-button type=\"primary\" @click=\"indexModule = true\">延误</el-button>\r\n            <el-button type=\"primary\" @click=\"indexModule = true\">拥堵</el-button>\r\n\r\n          </div> -->\r\n     \r\n        </el-tab-pane>\r\n        <el-tab-pane label=\"数据看板\" name=\"second\">\r\n          <dataBoard :activeName=\"activeName\"></dataBoard>\r\n        </el-tab-pane>\r\n        <el-tab-pane label=\"分析配置\" name=\"third\">\r\n          <analysisConfiguration></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      <!-- <div style=\"width:30%;height:300px;display:inline-block\">\r\n    <img :src='imgUrl' width=\"100%\" height=\"100%\"/>\r\n  </div>  \r\n  <div style=\"width:30%;height:300px;display:inline-block\">\r\n    <img :src='imgUrl1' width=\"100%\" height=\"100%\"/>\r\n  </div> \r\n  <div style=\"width:30%;height:300px;display:inline-block\">\r\n    <img :src='imgUrl2' width=\"100%\" height=\"100%\"/>\r\n  </div> \r\n  <div style=\"width:30%;height:300px;display:inline-block\">\r\n    <img :src='imgUrl3' width=\"100%\" height=\"100%\"/>\r\n  </div> \r\n  <div style=\"width:30%;height:300px;display:inline-block\">\r\n    <img :src='imgUrl4' width=\"100%\" height=\"100%\"/>\r\n  </div> \r\n  <div style=\"width:30%;height:300px;display:inline-block\">\r\n    <img :src='imgUrl5' width=\"100%\" height=\"100%\"/>\r\n  </div>  -->\r\n\r\n    </div>\r\n    <!-- <div id=\"dialog\" style=\"height:500px\"> -->\r\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)'>\r\n            <el-form ref=\"form\" :model=\"form\" label-width=\"80px\">\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 label=\"速度阈值\" v-if=\"form.type=='区域'\">\r\n            <el-input-number v-model=\"form.StoppingSpeed\" :precision=\"1\" :step=\"0.1\"></el-input-number>\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        \r\n      </el-dialog> -->\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'}\" customClass='customWidth' width=\"100%\" \r\n  :wrapperClosable=\"false\" \r\n  :with-header=\"false\"\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 label=\"速度阈值\" v-if=\"form.type=='区域'\">\r\n            <el-input-number v-model=\"form.StoppingSpeed\" :precision=\"1\" :step=\"0.1\"></el-input-number>\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     \r\n       \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.typeFiltering\" >\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'\">\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=\"时间模式：\">\r\n            <el-select v-model=\"componentForm.timeMode\" placeholder=\"请选择时间模式\">\r\n              <el-option label=\"触发\" value=\"touch\"></el-option>\r\n              <el-option label=\"周期时刻\" value=\"timeing\"  v-if=\"componentForm.componentType!='排队数'&&componentForm.componentType!='检测数'&&componentForm.componentType!='延误'&&componentForm.componentType!='拥堵'\"></el-option>\r\n              <el-option label=\"周期统计\" value=\"date\" v-if=\"componentForm.componentType!='OD'\"></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=\"周期间隔：\">\r\n          <!-- <el-slider v-model=\"componentForm.cycleInterval\" show-input>\r\n            </el-slider> -->\r\n            <el-slider v-model=\"componentForm.cycleInterval\">\r\n            </el-slider>\r\n             <el-select v-model=\"componentForm.company\" placeholder=\"请选择单位\">\r\n              <!-- <el-option label=\"秒\" value=\"ss\"></el-option>\r\n              <el-option label=\"分钟\" value=\"mm\"></el-option>\r\n              <el-option label=\"小时\" value=\"hh\"></el-option>\r\n              <el-option label=\"天\" value=\"dd\"></el-option> -->\r\n              <el-option\r\n\t\t\t   v-for=\"item in timeSelect\"\r\n\t\t\t   :key=\"item.value\"\r\n\t\t\t   :label=\"item.label\"\r\n\t\t\t   :value=\"item.value\"\r\n\t\t\t ></el-option>\r\n            </el-select>\r\n        </el-form-item>\r\n        <!-- <el-form-item label=\"单位：\" >\r\n         \r\n        </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\" >{{item.graphicName}}</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\" >{{item.graphicName}}</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=\"type\" ></el-checkbox>\r\n              <el-checkbox label=\"表格\" name=\"type\" v-if=\"componentForm.componentType!='拥堵'\"></el-checkbox>\r\n              <el-checkbox label=\"时间曲线图\" name=\"type\"></el-checkbox>\r\n               <el-checkbox label=\"直方图\" name=\"type\"  v-if=\"componentForm.componentType=='类型'\"></el-checkbox>\r\n                <el-checkbox label=\"饼状图\" name=\"type\" v-if=\"componentForm.componentType=='类型'\"></el-checkbox>\r\n              <el-checkbox label=\"均值图\" name=\"type\" v-if=\"componentForm.componentType!='拥堵'\"></el-checkbox>\r\n             \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      \r\n    <!-- </div> -->\r\n  </div>\r\n</template>\r\n\r\n<script>\r\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 {getComponentData,getSectionalData} 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// var topicSends; //订阅的topic 例如：[\"Time1\", \"EngineMain1\", \"Console1\", \"Location1\"]\r\n \r\nexport default {\r\n  data() {\r\n    return {\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      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          label:'分钟',\r\n         value:'分钟'  \r\n        },{\r\n          label:'小时',\r\n         value:'小时'  \r\n        },{\r\n          label:'天',\r\n         value:'天'  \r\n        }\r\n      ],\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    },\r\n    typeData:[\"小汽车\",\"公交车\",\"卡车\",\"非机动车\",\"行人\"],\r\n    //展现形式\r\n    presentation:['数值','表格','时间曲线图','均值图'],\r\n\r\n      trackForm:{\r\n        name:\"\"\r\n      },\r\n      //   dateTime: this.$moment(new Date()).format(\"LL\"),\r\n      nowTime: \"\",\r\n      //   weekday: this.$moment().format(\"dddd\"),\r\n      ins: 0,\r\n      imgUrl: '',\r\n      imgUrl1: '',\r\n      imgUrl2: '',\r\n      imgUrl3: '',\r\n      imgUrl4: '',\r\n      imgUrl5: '',\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    //   carInfo: [], //小车信息\r\n    //   carName: '',\r\n    //   palletizerInfo: [], //码垛机信息\r\n    //   palletizerName: '',\r\n    //   destackerInfo: [], //拆垛机信息\r\n    //   destackerName: '',\r\n    //   hoistInfo: [], //提升机信息’\r\n    //   hoistName: '',\r\n    //   battaryStationInfo: [],//快换电池装置\r\n    //   battaryStationName: \"\",\r\n    //   conveyorInfo: [], //输送机信息\r\n    //   conveyorName: \"\",\r\n    };\r\n  },\r\n  mounted() {\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.getSingleComponentIdN()\r\n  },\r\n  //离开当前页面后执行\r\ndestroyed: function () {\r\n console.log(\"离开当前页\")\r\n  client.publish('msg_stream',JSON.stringify({\"msg_flag\":-1})) \r\n},\r\n\r\n  created() {\r\n    // this.testMqtt()\r\n   this.componentForm.company = this.timeSelect[0].value;\r\n   this.createMqtt();\r\n  },\r\n  methods: {\r\n     /** 创建mqtt */\r\n    createMqtt() {\r\n      //创建链接，接收数据\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            client.publish('msg_stream',JSON.stringify({\"msg_flag\":parseInt(this.number)})) \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    //停止订阅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 \"img0\":\r\n        case \"img1\":\r\n        case \"img2\":\r\n          try {\r\n             const utf8decoder = new TextDecoder()\r\n              const u8arr = new Uint8Array(message)\r\n              const temp = utf8decoder.decode(u8arr)\t// 将二进制数据转为字符串\r\n              const msg = JSON.parse(temp)\t\t//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据\r\n                document.getElementById(\"mapModule\").contentWindow.getDestination(JSON.stringify(msg))\r\n          } catch (error) {}\r\n          break;\r\n        // 树结构\r\n        case \"stream0\":\r\n        case \"stream1\":\r\n        case \"stream2\":\r\n          try {\r\n            const utf8decoder1 = new TextDecoder()\r\n              const u8arr = new Uint8Array(message)\r\n              const temp = utf8decoder1.decode(u8arr)\t// 将二进制数据转为字符串\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 \"trajectory0\":\r\n        case \"trajectory1\":\r\n        case \"trajectory2\":\r\n        case \"trajectory3\":\r\n          try {\r\n            const utf8decoder = new TextDecoder()\r\n              const u8arr = new Uint8Array(message)\r\n            //    console.log(\"message11\",message)\r\n              const temp = utf8decoder.decode(u8arr)\t// 将二进制数据转为字符串\r\n            //   console.log(\"temp11\",temp)\r\n              const msg = JSON.parse(temp)\r\n                //  console.log(\"msg11\",msg)\r\n                document.getElementById(\"mapModule\").contentWindow.getGuiJi(JSON.stringify(msg))\r\n          } catch (error) {}\r\n          break;\r\n        // 触发\r\n        case \"detection0\":\r\n        case \"detection1\":\r\n        case \"detection2\":\r\n          try {\r\n             const utf8decoder = new TextDecoder()\r\n              const u8arr = new Uint8Array(message)\r\n            //   console.log(\"message\",message)\r\n              const temp = utf8decoder.decode(u8arr)\t// 将二进制数据转为字符串\r\n            //   console.log(\"temp\",temp)\r\n            var detId = []\r\n             const msgN = JSON.parse(temp)\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                // console.log(\"detId\",detId)\r\n            //   const msg = detId\r\n            //   console.log(\"msg\",msg)\r\n                document.getElementById(\"mapModule\").contentWindow.getChuFa(JSON.stringify(detId))\r\n                // document.getElementById(\"mapModule\").contentWindow.getChuFa(detId)\r\n             }\r\n             \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   \r\n    //初始化unity\r\n    OnSceneN(){\r\n         document.getElementById(\"mapModule\").contentWindow.postVideoId(JSON.stringify(this.$route.query.id))\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           if(res.data.data.timeMode!=''){\r\n            this.componentForm.timeMode = res.data.data.timeMode\r\n           }\r\n            this.componentForm.componentName = res.data.data.componentName+'-'+type\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\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(res.data.data.presentationForm!=''){\r\n                var presentationN = []\r\n                presentationN  = res.data.data.presentationForm.split(',')\r\n                this.componentForm.presentation = presentationN\r\n            }\r\n        }\r\n        })\r\n    },\r\n    //修改模拟区组件、图形\r\n    getSimulationAreaEdit(id,type,componentType,name){\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           }\r\n            this.componentForm.componentName = res.data.data.componentName+'-'+type\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\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(res.data.data.presentationForm!=''){\r\n                var presentationN = []\r\n                presentationN  = res.data.data.presentationForm.split(',')\r\n                this.componentForm.presentation = presentationN\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    },\r\n    //双击图形修改图形名称弹框\r\n    getModifyTheNameN(data){\r\n        console.log(\"data\",data)\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                document.getElementById(\"mapModule\").contentWindow.postFigureId(JSON.stringify(res.data.data))\r\n                document.getElementById(\"mapModule\").contentWindow.postFigureName(JSON.stringify(res.data.data+','+form.name+','+this.startFigureName))\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             }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(\"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             }\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                console.log(\"startFigureName\",this.startFigureName)\r\n                // document.getElementById(\"mapModule\").contentWindow.postFigureId(JSON.stringify(res.data.data))\r\n                document.getElementById(\"mapModule\").contentWindow.postFigureName(JSON.stringify(form.id+','+form.name+','+this.startFigureName))\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    },\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                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                formData.append(\"type\",componentForm.type);\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(JSON.stringify(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    }, \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            document.getElementById(\"mapModule\").contentWindow.closeEdit(JSON.stringify(form.type+','+form.id))\r\n\r\n        }else{\r\n             this.dialogFormVisible = false\r\n        document.getElementById(\"mapModule\").contentWindow.delFigure()\r\n        }\r\n       \r\n    },\r\n    closeComponentForm(){\r\n        this.component = false\r\n    },\r\n    closeForm(form){\r\n        \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            //  document.getElementById(\"mapModule\").contentWindow.closeEdit(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    //修改展现形式\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    loadingShow(data) {\r\n      this.loadingShow1 = data\r\n    },\r\n\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({ url: 'https://restapi.amap.com/v3/weather/weatherInfo?key=bc2b906032fdd8a63cbd0790d656b1d7&city=620100', methods: '' }).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: 29%;\r\n    left: calc(26vw);\r\n    top: 71vh;\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\nmin-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\r\n</style>\r\n"]}]}