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