{"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":1673836338605},{"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//\n//\n//\n//\n\r\n// import mqtt from \"mqtt\"; // mqtt协议\r\nimport editModal from '@/views/bounced/maintenanceRemind';\r\nimport analysisConfiguration from '@/views/bounced/analysisConfiguration';\r\nimport dataBoard from '@/views/bounced/dataBoard';\r\nimport { 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\n//  var number = 1\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            //判断模拟区，画布区\r\n            numberNew: 1,\r\n            speed: false,\r\n            component: false,\r\n            sectionals: [],\r\n            activeName: 'first',\r\n            VideoId: '',\r\n            title: '断面',\r\n            componentTitle: '速度',\r\n            form: {\r\n                name: '',\r\n                type: '',\r\n                id: '',\r\n                coordinate: '',\r\n                Direction: '正向',\r\n                StoppingSpeed: '5'\r\n            },\r\n            //初始图形名称\r\n            startFigureName: '',\r\n            areaComponentform: {\r\n                name: '',\r\n                region: '',\r\n                date1: '',\r\n                date2: '',\r\n                delivery: false,\r\n                type: [],\r\n                resource: '实时（触发）',\r\n                desc: ''\r\n            },\r\n            timeSelect: [\r\n                {\r\n                    label: '秒',\r\n                    value: '秒'\r\n                },\r\n                {\r\n                    label: '分钟',\r\n                    value: '分钟'\r\n                },\r\n                {\r\n                    label: '小时',\r\n                    value: '小时'\r\n                },\r\n                {\r\n                    label: '天',\r\n                    value: '天'\r\n                }\r\n            ],\r\n            titName: '',\r\n            componentForm: {\r\n                //单位\r\n                company: '秒',\r\n                componentName: '',\r\n                componentParameterId: '01888e05fac246b29e3a19a27c3d2ab0',\r\n                //周期间隔\r\n                cycleInterval: '',\r\n                startSectionIds: '',\r\n                startSectionNames: '',\r\n                endSectionIds: '',\r\n                endSectionNames: '',\r\n                endValue: '',\r\n                //展现形式\r\n                presentationForm: '',\r\n                presentation: [],\r\n                startValue: '',\r\n                timeMode: '触发',\r\n                type: [],\r\n                startSection: [],\r\n                endSection: [],\r\n                componentType: '',\r\n                typeFiltering: '',\r\n                typeData: []\r\n            },\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            analysisConfigurationdata: {},\r\n            //触发数据\r\n            triggerData: ''\r\n        };\r\n    },\r\n\r\n    //离开当前页面后执行\r\n    destroyed: function () {\r\n        console.log('离开当前页');\r\n        //   client.publish('msg_stream',JSON.stringify({\"msg_flag\":-1}))\r\n        client.end();\r\n    },\r\n    created() {\r\n        window.getFigure = this.getFigureD;\r\n        window.getModifyTheName = this.getModifyTheNameN;\r\n        // window.getModifyTheName = this.getModifyTheNameN;\r\n        window.getSingleComponentId = this.getSingleComponentIdN;\r\n        window.getSimulationAreaEdit = this.getSimulationAreaEdit;\r\n        window.OnScene = this.OnSceneN;\r\n        this.getAllSectionalData(this.$route.query.id);\r\n        this.VideoId = this.$route.query.id;\r\n        this.number = this.$route.query.num;\r\n        this.titName = this.$route.query.name;\r\n    },\r\n    mounted() {\r\n        // this.testMqtt()\r\n\r\n        //   this.getSingleComponentIdN()\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            this.topicSends = ['img' + this.number, 'stream' + this.number, 'trajectory' + this.number, 'detection' + this.number];\r\n            mqtt = new mqttConfig(this.topicSends);\r\n            client = mqtt.createConnect();\r\n            client.subscribe(\r\n                ['img' + this.number, 'stream' + this.number, 'trajectory' + this.number, 'detection' + this.number],\r\n                { qos: 0 },\r\n                (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        //停止订阅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); // 将二进制数据转为字符串\r\n                        const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据\r\n                        document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));\r\n                        if (msg.rate == 'high') {\r\n                            document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));\r\n                        } else {\r\n                            this.analysisConfigurationdata = msg;\r\n                        }\r\n                    } catch (error) {}\r\n                    break;\r\n                // 树结构\r\n                case '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); // 将二进制数据转为字符串\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); // 将二进制数据转为字符串\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); // 将二进制数据转为字符串\r\n                        //   console.log(\"temp\",temp)\r\n                        var detId = [];\r\n                        const msgN = JSON.parse(temp);\r\n                        //  console.log(\"msgN\",msgN)\r\n                        this.triggerData = msgN;\r\n                        if (temp.length != 0) {\r\n                            for (let i = 0; i < msgN.length; i++) {\r\n                                detId.push(msgN[i].det_id);\r\n                            }\r\n                            // 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                    } 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.componentName = res.data.data.componentName;\r\n                    this.componentForm.componentParameterId = res.data.data.componentParameterId;\r\n                    this.componentForm.cycleInterval = res.data.data.cycleInterval;\r\n                    this.componentForm.startSectionIds = res.data.data.startSectionIds;\r\n                    this.componentForm.startSectionNames = res.data.data.startSectionNames;\r\n                    this.componentForm.endSectionIds = res.data.data.endSectionIds;\r\n                    this.componentForm.endSectionNames = res.data.data.endSectionNames;\r\n                    this.componentForm.endValue = res.data.data.endValue;\r\n                    this.componentForm.startValue = res.data.data.startValue;\r\n                    this.componentForm.presentationForm = res.data.data.presentationForm;\r\n\r\n                    // this.componentForm.typeFiltering = res.data.data.typeFiltering\r\n                    // this.componentForm.type = res.data.data.type\r\n                    if (res.data.data.startSectionIds != '') {\r\n                        console.log('startSectionIds', res.data.data.startSectionIds);\r\n                        var startSectionIdArr = [];\r\n                        var startSectionArr = [];\r\n                        startSectionIdArr = res.data.data.startSectionIds.split(',');\r\n                        console.log('this.sectionals', this.sectionals);\r\n                        console.log('startSectionIdArr', startSectionIdArr);\r\n                        startSectionIdArr.forEach((item) => {\r\n                            this.sectionals.forEach((items) => {\r\n                                if (item == items.graphicId) {\r\n                                    startSectionArr.push(items.graphicName);\r\n                                    this.componentForm.startSection = startSectionArr;\r\n                                }\r\n                            });\r\n                        });\r\n                    }\r\n                    if (res.data.data.endSectionIds != '') {\r\n                        console.log('endSectionIds', res.data.data.endSectionIds);\r\n                        var endSectionIdArr = [];\r\n                        var endSectionArr = [];\r\n                        endSectionIdArr = res.data.data.endSectionIds.split(',');\r\n                        console.log('this.sectionals', this.sectionals);\r\n                        console.log('endSectionIdArr', endSectionIdArr);\r\n                        endSectionIdArr.forEach((item) => {\r\n                            this.sectionals.forEach((items) => {\r\n                                if (item == items.graphicId) {\r\n                                    endSectionArr.push(items.graphicName);\r\n                                    this.componentForm.endSection = endSectionArr;\r\n                                }\r\n                            });\r\n                        });\r\n                    }\r\n                    // if(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                    if (this.componentForm.presentationForm != '') {\r\n                        var arr = [];\r\n                        arr = this.componentForm.presentationForm.split(',');\r\n                        this.componentForm.presentation = arr;\r\n                    } else if (this.componentForm.presentationForm == '') {\r\n                        this.componentForm.presentation = [];\r\n                    }\r\n                    if (res.data.data.type != '') {\r\n                        var arr = [];\r\n                        arr = res.data.data.type.split(',');\r\n                        this.componentForm.type = arr;\r\n                    } else {\r\n                        this.componentForm.type = [];\r\n                    }\r\n                    console.log('this.componentForm', this.componentForm);\r\n                }\r\n            });\r\n        },\r\n        //修改模拟区组件、图形\r\n        getSimulationAreaEdit(id, type, componentType, name, number) {\r\n            console.log('number', number);\r\n            this.numberNew = number;\r\n            if (type == '图形') {\r\n                this.form.id = id;\r\n                this.form.name = name;\r\n                this.form.type = componentType;\r\n                this.startFigureName = name;\r\n                if (this.form.type == '轨迹') {\r\n                    this.dialogFormVisible = true;\r\n                } else if (this.form.type == '区域') {\r\n                    this.dialogFormVisible = true;\r\n                } else if (this.form.type == '断面') {\r\n                    this.dialogFormVisible = true;\r\n                }\r\n            } else if (type == '组件') {\r\n                this.componentId = id;\r\n                this.componentForm.componentType = componentType;\r\n                this.componentTitle = componentType;\r\n                getComponentData({ AnalogAreaComponentId: id }).then((res) => {\r\n                    console.log('res', res);\r\n                    if (res.data.code == 200) {\r\n                        console.log('res', res.data.data);\r\n                        this.component = true;\r\n                        if (res.data.data.company != '') {\r\n                            this.componentForm.company = res.data.data.company;\r\n                        }\r\n                        if (res.data.data.timeMode != '') {\r\n                            this.componentForm.timeMode = res.data.data.timeMode;\r\n                        }\r\n                        // this.componentForm.componentName = res.data.data.componentName+'-'+type\r\n                        this.componentForm.componentName = res.data.data.componentName;\r\n                        this.componentForm.componentParameterId = res.data.data.componentParameterId;\r\n                        this.componentForm.cycleInterval = res.data.data.cycleInterval;\r\n                        this.componentForm.startSectionIds = res.data.data.startSectionIds;\r\n                        this.componentForm.startSectionNames = res.data.data.startSectionNames;\r\n                        this.componentForm.endSectionIds = res.data.data.endSectionIds;\r\n                        this.componentForm.endSectionNames = res.data.data.endSectionNames;\r\n                        this.componentForm.endValue = res.data.data.endValue;\r\n                        this.componentForm.startValue = res.data.data.startValue;\r\n                        this.componentForm.presentationForm = res.data.data.presentationForm;\r\n                        // this.componentForm.type = res.data.data.type\r\n                        if (res.data.data.startSectionIds != '') {\r\n                            console.log('startSectionIds', res.data.data.startSectionIds);\r\n                            var startSectionIdArr = [];\r\n                            var startSectionArr = [];\r\n                            startSectionIdArr = res.data.data.startSectionIds.split(',');\r\n                            console.log('this.sectionals', this.sectionals);\r\n                            console.log('startSectionIdArr', startSectionIdArr);\r\n                            startSectionIdArr.forEach((item) => {\r\n                                this.sectionals.forEach((items) => {\r\n                                    if (item == items.graphicId) {\r\n                                        startSectionArr.push(items.graphicName);\r\n                                        this.componentForm.startSection = startSectionArr;\r\n                                    }\r\n                                });\r\n                            });\r\n                        }\r\n                        if (res.data.data.endSectionIds != '') {\r\n                            console.log('endSectionIds', res.data.data.endSectionIds);\r\n                            var endSectionIdArr = [];\r\n                            var endSectionArr = [];\r\n                            endSectionIdArr = res.data.data.endSectionIds.split(',');\r\n                            console.log('this.sectionals', this.sectionals);\r\n                            console.log('endSectionIdArr', endSectionIdArr);\r\n                            endSectionIdArr.forEach((item) => {\r\n                                this.sectionals.forEach((items) => {\r\n                                    if (item == items.graphicId) {\r\n                                        endSectionArr.push(items.graphicName);\r\n                                        this.componentForm.endSection = endSectionArr;\r\n                                    }\r\n                                });\r\n                            });\r\n                        }\r\n                        if (this.componentForm.presentationForm != '') {\r\n                            var arr = [];\r\n                            arr = this.componentForm.presentationForm.split(',');\r\n                            this.componentForm.presentation = arr;\r\n                        } else if (this.componentForm.presentationForm == '') {\r\n                            this.componentForm.presentation = [];\r\n                        }\r\n                        if (res.data.data.type != '') {\r\n                            var arr = [];\r\n                            arr = res.data.data.type.split(',');\r\n                            this.componentForm.type = arr;\r\n                        } else {\r\n                            this.componentForm.type = [];\r\n                        }\r\n                    }\r\n                });\r\n            }\r\n        },\r\n        //获取所有断面数据\r\n        getAllSectionalData(VideoId) {\r\n            getSectionalData({ VideoId: VideoId }).then((res) => {\r\n                console.log('res', res);\r\n                if (res.data.code == 200) {\r\n                    this.sectionals = res.data.data;\r\n                }\r\n            });\r\n        },\r\n        figureType(type) {\r\n            if (type == 'Move') {\r\n                type = '轨迹';\r\n            } else if (type == 'Poly') {\r\n                type = '区域';\r\n            } else if (type == 'Line') {\r\n                type = '断面';\r\n            }\r\n            return type;\r\n        },\r\n        getFigureD(item, index, indexNew) {\r\n            console.log('图形类型', item);\r\n            console.log('初始图形名称', index);\r\n            this.startFigureName = index;\r\n            console.log('图形位置', indexNew);\r\n            this.dialogFormVisible = true;\r\n            this.form.name = index;\r\n            this.form.type = this.figureType(item);\r\n            this.form.coordinate = indexNew;\r\n            this.form.id = '';\r\n            this.title = this.figureType(item);\r\n        },\r\n        //双击图形修改图形名称弹框\r\n        getModifyTheNameN(data, number) {\r\n            console.log('data', data);\r\n            console.log('number', number);\r\n            this.numberNew = number;\r\n            var arr = [];\r\n            arr = data.split(',');\r\n            console.log('arr', arr);\r\n            this.form.id = arr[0];\r\n            this.form.name = arr[1];\r\n            this.form.type = arr[2];\r\n            this.startFigureName = arr[1];\r\n            if (this.form.type == '轨迹') {\r\n                // this.open2()\r\n                this.dialogFormVisible = true;\r\n            } else if (this.form.type == '区域') {\r\n                this.dialogFormVisible = true;\r\n            } else if (this.form.type == '断面') {\r\n                this.dialogFormVisible = true;\r\n            }\r\n        },\r\n        //新增、编辑图形确认按钮\r\n        onSubmit(form) {\r\n            console.log('form', form);\r\n            //新增\r\n            if (form.id == '') {\r\n                let formData = new FormData();\r\n                if (form.type == '断面') {\r\n                    formData.append('GraphicName', form.name);\r\n                    formData.append('GraphicType', form.type);\r\n                    formData.append('Coordinate', form.coordinate);\r\n                    formData.append('VideoId', this.VideoId);\r\n                    formData.append('Direction', form.Direction);\r\n                } else if (form.type == '区域') {\r\n                    formData.append('GraphicName', form.name);\r\n                    formData.append('GraphicType', form.type);\r\n                    formData.append('Coordinate', form.coordinate);\r\n                    formData.append('VideoId', this.VideoId);\r\n                    // formData.append(\"Direction\",form.Direction);\r\n                    // formData.append(\"StoppingSpeed\",form.StoppingSpeed);\r\n                } else {\r\n                    formData.append('GraphicName', form.name);\r\n                    formData.append('GraphicType', form.type);\r\n                    formData.append('Coordinate', form.coordinate);\r\n                    formData.append('VideoId', this.VideoId);\r\n                    // formData.append(\"Direction\",form.Direction);\r\n                }\r\n\r\n                axios({\r\n                    method: 'post',\r\n                    url: serverUrl.addFigure,\r\n                    data: formData\r\n                }).then((res) => {\r\n                    console.log('res', res);\r\n\r\n                    if (res.data.code == 200) {\r\n                        this.$message({\r\n                            message: res.data.msg,\r\n                            type: 'success'\r\n                        });\r\n                        document.getElementById('mapModule').contentWindow.postFigureId(JSON.stringify(res.data.data));\r\n                        document\r\n                            .getElementById('mapModule')\r\n                            .contentWindow.postFigureName(\r\n                                JSON.stringify(res.data.data + ',' + form.name + ',' + this.startFigureName + ',' + this.numberNew)\r\n                            );\r\n                        this.dialogFormVisible = false;\r\n                    } else {\r\n                        this.$message({\r\n                            message: res.data.msg,\r\n                            type: 'warning'\r\n                        });\r\n                    }\r\n                });\r\n            } else {\r\n                //编辑\r\n                let formData = new FormData();\r\n                if (form.type == '断面') {\r\n                    formData.append('GraphicName', form.name);\r\n                    formData.append('GraphicType', form.type);\r\n                    formData.append('Direction', form.Direction);\r\n                    formData.append('GraphicId', form.id);\r\n                    formData.append('VideoId', this.VideoId);\r\n                } else if (form.type == '区域') {\r\n                    formData.append('GraphicName', form.name);\r\n                    formData.append('GraphicType', form.type);\r\n                    formData.append('Direction', form.Direction);\r\n                    formData.append('GraphicId', form.id);\r\n                    formData.append('VideoId', this.VideoId);\r\n                    formData.append('StoppingSpeed', form.StoppingSpeed);\r\n                } else {\r\n                    formData.append('GraphicName', form.name);\r\n                    formData.append('GraphicType', form.type);\r\n                    // formData.append(\"Direction\",form.Direction);\r\n                    formData.append('GraphicId', form.id);\r\n                    formData.append('VideoId', this.VideoId);\r\n                }\r\n                axios({\r\n                    method: 'post',\r\n                    url: serverUrl.editFigure,\r\n                    data: formData\r\n                }).then((res) => {\r\n                    console.log('res', res);\r\n\r\n                    if (res.data.code == 200) {\r\n                        this.$message({\r\n                            message: res.data.msg,\r\n                            type: 'success'\r\n                        });\r\n                        console.log('startFigureName', this.startFigureName);\r\n                        // document.getElementById(\"mapModule\").contentWindow.postFigureId(JSON.stringify(res.data.data))\r\n                        console.log('this.numberNew', this.numberNew);\r\n                        document\r\n                            .getElementById('mapModule')\r\n                            .contentWindow.postFigureName(\r\n                                JSON.stringify(form.id + ',' + form.name + ',' + this.startFigureName + ',' + this.numberNew)\r\n                            );\r\n                        this.dialogFormVisible = false;\r\n                    } else {\r\n                        this.$message({\r\n                            message: res.data.msg,\r\n                            type: 'warning'\r\n                        });\r\n                    }\r\n                });\r\n            }\r\n        },\r\n        //新增编辑组件取消\r\n        onSubmitComponent(componentForm) {\r\n            this.component = false;\r\n            let formData = new FormData();\r\n            if (componentForm.componentType == 'OD') {\r\n                //名称\r\n                formData.append('componentName', componentForm.componentName);\r\n                //单位\r\n                formData.append('company', componentForm.company);\r\n                //id\r\n                formData.append('componentParameterId', componentForm.componentParameterId);\r\n                formData.append('cycleInterval', componentForm.cycleInterval);\r\n                formData.append('startSectionIds', componentForm.startSectionIds);\r\n                formData.append('startSectionNames', componentForm.startSectionNames);\r\n                formData.append('endSectionIds', componentForm.endSectionIds);\r\n                formData.append('endSectionNames', componentForm.endSectionNames);\r\n                formData.append('endValue', componentForm.endValue);\r\n                formData.append('startValue', componentForm.startValue);\r\n                formData.append('timeMode', componentForm.timeMode);\r\n                formData.append('presentationForm', '矩阵图');\r\n            } else if (componentForm.componentType == '类型') {\r\n                //名称\r\n                formData.append('componentName', componentForm.componentName);\r\n                //单位\r\n                formData.append('company', componentForm.company);\r\n                //id\r\n                formData.append('componentParameterId', componentForm.componentParameterId);\r\n                formData.append('cycleInterval', componentForm.cycleInterval);\r\n                formData.append('endValue', componentForm.endValue);\r\n                formData.append('startValue', componentForm.startValue);\r\n                formData.append('timeMode', componentForm.timeMode);\r\n                formData.append('presentationForm', componentForm.presentationForm);\r\n                formData.append('type', componentForm.type);\r\n            } else {\r\n                //名称\r\n                formData.append('componentName', componentForm.componentName);\r\n                //单位\r\n                formData.append('company', componentForm.company);\r\n                //id\r\n                formData.append('componentParameterId', componentForm.componentParameterId);\r\n                formData.append('cycleInterval', componentForm.cycleInterval);\r\n                formData.append('endValue', componentForm.endValue);\r\n                formData.append('startValue', componentForm.startValue);\r\n                formData.append('timeMode', componentForm.timeMode);\r\n                formData.append('presentationForm', componentForm.presentationForm);\r\n            }\r\n            axios({\r\n                method: 'post',\r\n                url: serverUrl.editComponent,\r\n                data: formData\r\n            }).then((res) => {\r\n                console.log('res', res);\r\n\r\n                if (res.data.code == 200) {\r\n                    this.$message({\r\n                        message: res.data.msg,\r\n                        type: 'success'\r\n                    });\r\n                    document.getElementById('mapModule').contentWindow.postFigureId(JSON.stringify(res.data.data));\r\n                    document.getElementById('mapModule').contentWindow.editComponent(this.componentId + ',' + componentForm.componentName);\r\n                    this.dialogFormVisible = false;\r\n                } else {\r\n                    this.$message({\r\n                        message: res.data.msg,\r\n                        type: 'warning'\r\n                    });\r\n                }\r\n            });\r\n        },\r\n        //新增编辑组件取消\r\n        closeComponent(componentForm) {\r\n            this.component = false;\r\n            this.componentForm = {\r\n                //单位\r\n                company: '秒',\r\n                componentName: '',\r\n                componentParameterId: '01888e05fac246b29e3a19a27c3d2ab0',\r\n                //周期间隔\r\n                cycleInterval: '',\r\n                startSectionIds: '',\r\n                startSectionNames: '',\r\n                endSectionIds: '',\r\n                endSectionNames: '',\r\n                endValue: '',\r\n                //展现形式\r\n                presentationForm: '',\r\n                presentation: [],\r\n                startValue: '',\r\n                timeMode: '触发',\r\n                type: [],\r\n                startSection: [],\r\n                endSection: [],\r\n                componentType: '',\r\n                typeFiltering: '',\r\n                typeData: []\r\n            };\r\n        },\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            } else {\r\n                this.dialogFormVisible = false;\r\n                document.getElementById('mapModule').contentWindow.delFigure();\r\n            }\r\n        },\r\n        closeComponentForm() {\r\n            this.component = false;\r\n        },\r\n        closeForm(form) {\r\n            if (this.form.id != '') {\r\n                this.dialogFormVisible = false;\r\n                document.getElementById('mapModule').contentWindow.closeEdit(JSON.stringify(form.type + ',' + form.id));\r\n                //  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        handlePresentation(value) {\r\n            console.log('展现形式', value);\r\n            let presentation = value.join(',');\r\n            this.componentForm.presentationForm = presentation;\r\n            console.log('this.componentForm.presentationForm', this.componentForm.presentationForm);\r\n        },\r\n        //类型数据\r\n        handleTypeData(value) {\r\n            console.log('类型数据', value);\r\n            let type = value.join(',');\r\n            this.componentForm.typeData = type;\r\n        },\r\n        //模型加载等待\r\n        loadingShow(data) {\r\n            this.loadingShow1 = data;\r\n        },\r\n\r\n        handleSearch() {\r\n            this.modelOthers = true;\r\n            this.$refs.htModels.finbBox(this.inputVal);\r\n            console.log(this.$refs.htModels, 'asdasdasd');\r\n            this.inputVal = '';\r\n        },\r\n        handleRow(val) {\r\n            this.modelOthers = true;\r\n            this.$refs.htModels.finbBox(val);\r\n        },\r\n        // 天气\r\n        handleWather() {\r\n            axios({\r\n                url: 'https://restapi.amap.com/v3/weather/weatherInfo?key=bc2b906032fdd8a63cbd0790d656b1d7&city=620100',\r\n                methods: ''\r\n            }).then((res) => {\r\n                this.weatherItem = res.data.lives[0];\r\n                console.log(this.weatherItem, 'asdsads');\r\n            });\r\n        }\r\n    },\r\n    components: {\r\n        editModal,\r\n        analysisConfiguration,\r\n        dataBoard\r\n    }\r\n};\r\n",{"version":3,"sources":["index.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4NA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;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;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"index.vue","sourceRoot":"src/views","sourcesContent":["<template>\r\n    <div class=\"content-box\">\r\n        <!-- <div class=\"container\"> -->\r\n        <div class=\"tab-box\">\r\n            <!-- <el-tabs type=\"border-card\"  v-model=\"activeName\" tab-position=\"left\"> -->\r\n            <el-tabs v-model=\"activeName\">\r\n                <el-tab-pane :label=\"titName\" name=\"first\">\r\n                    <div class=\"mapModuleApp\">\r\n                        <iframe\r\n                            id=\"mapModule\"\r\n                            src=\"./VideoWeb/index.html\"\r\n                            frameborder=\"0\"\r\n                            style=\"width: 100%; height: 100%\"\r\n                            scrolling=\"no\"\r\n                        ></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                </el-tab-pane>\r\n                <el-tab-pane label=\"数据看板\" name=\"second\">\r\n                    <dataBoard :activeName=\"activeName\" :triggerData=\"triggerData\"></dataBoard>\r\n                </el-tab-pane>\r\n                <el-tab-pane label=\"分析配置\" name=\"third\">\r\n                    <analysisConfiguration :analysisConfigurationdata=\"analysisConfigurationdata\"></analysisConfiguration>\r\n                </el-tab-pane>\r\n                <el-tab-pane label=\"分析状态\" name=\"fourth\">\r\n                    <editModal></editModal>\r\n                </el-tab-pane>\r\n                <el-tab-pane label=\"存储\" name=\"five\">存储</el-tab-pane>\r\n            </el-tabs>\r\n            <!-- <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        </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' }\"\r\n            width=\"100%\"\r\n            :wrapperClosable=\"false\"\r\n            :with-header=\"false\"\r\n            size=\"100%\"\r\n        >\r\n            <div class=\"formBox\">\r\n                <el-form ref=\"form\" :model=\"form\" label-width=\"80px\" :inline=\"true\">\r\n                    <el-form-item label=\"组件名称\">\r\n                        <el-input v-model=\"form.name\"></el-input>\r\n                    </el-form-item>\r\n                    <el-form-item label=\"断面方向\" v-if=\"form.type == '断面'\">\r\n                        <el-select v-model=\"form.Direction\" placeholder=\"请选择类型\">\r\n                            <el-option label=\"正向\" value=\"正向\"></el-option>\r\n                            <el-option label=\"反向\" value=\"反向\"></el-option>\r\n                            <el-option label=\"双向\" value=\"双向\"></el-option>\r\n                        </el-select>\r\n                    </el-form-item>\r\n                    <!-- <el-form-item 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        </el-drawer>\r\n        <!-- 组件弹框 -->\r\n        <el-dialog :title=\"componentTitle + '指标组件'\" width=\"40%\" :visible.sync=\"component\">\r\n            <el-form ref=\"form\" :model=\"componentForm\" label-width=\"150px\" @close=\"closeComponentForm()\">\r\n                <el-form-item label=\"名称：\">\r\n                    <el-input v-model=\"componentForm.componentName\"></el-input>\r\n                </el-form-item>\r\n\r\n                <el-form-item label=\"类型筛选：\" v-if=\"componentForm.componentType == '类型'\">\r\n                    <el-checkbox-group v-model=\"componentForm.type\" @change=\"handleTypeData\">\r\n                        <el-checkbox v-for=\"item in typeData\" :label=\"item\" :key=\"item\">{{ item }}</el-checkbox>\r\n                        <!-- <el-checkbox label=\"小汽车\" name=\"type\" ></el-checkbox>\r\n                <el-checkbox label=\"公交车\" name=\"type\" ></el-checkbox>\r\n                <el-checkbox label=\"卡车\" name=\"type\" ></el-checkbox>\r\n                <el-checkbox label=\"非机动车\" name=\"type\" ></el-checkbox>\r\n                <el-checkbox label=\"行人\" name=\"type\" ></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\r\n                            label=\"周期时刻\"\r\n                            value=\"timeing\"\r\n                            v-if=\"\r\n                                componentForm.componentType != '排队数' &&\r\n                                componentForm.componentType != '检测数' &&\r\n                                componentForm.componentType != '延误' &&\r\n                                componentForm.componentType != '拥堵'\r\n                            \"\r\n                        ></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\"> </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 v-for=\"item in timeSelect\" :key=\"item.value\" :label=\"item.label\" :value=\"item.value\"></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\">{{\r\n                            item.graphicName\r\n                        }}</el-checkbox>\r\n                    </el-checkbox-group>\r\n                </el-form-item>\r\n                <el-form-item label=\"终点：\" v-if=\"componentForm.componentType == 'OD'\">\r\n                    <el-checkbox-group v-model=\"componentForm.endSection\" @change=\"handleCheckedendSection\">\r\n                        <el-checkbox v-for=\"item in sectionals\" :label=\"item.graphicName\" :key=\"item.graphicId\">{{\r\n                            item.graphicName\r\n                        }}</el-checkbox>\r\n                    </el-checkbox-group>\r\n                </el-form-item>\r\n                <el-form-item label=\"展现形式：\" v-if=\"componentForm.componentType != 'OD'\">\r\n                    <el-checkbox-group v-model=\"componentForm.presentation\" @change=\"handlePresentation\">\r\n                        <el-checkbox label=\"数值\" name=\"presentation\"></el-checkbox>\r\n                        <el-checkbox label=\"表格\" name=\"presentation\" v-if=\"componentForm.componentType != '拥堵'\"></el-checkbox>\r\n                        <el-checkbox label=\"时间曲线图\" name=\"type\"></el-checkbox>\r\n                        <el-checkbox label=\"直方图\" name=\"presentation\" v-if=\"componentForm.componentType == '类型'\"></el-checkbox>\r\n                        <el-checkbox label=\"饼状图\" name=\"presentation\" v-if=\"componentForm.componentType == '类型'\"></el-checkbox>\r\n                        <el-checkbox label=\"均值图\" name=\"presentation\" v-if=\"componentForm.componentType != '拥堵'\"></el-checkbox>\r\n                    </el-checkbox-group>\r\n                    <!-- <el-checkbox-group v-model=\"componentForm.presentation\" @change=\"handlePresentation\">\r\n              <el-checkbox v-for=\"item in sectionals\" :label=\"item.graphicName\" :key=\"item.graphicId\" >{{item.graphicName}}</el-checkbox>\r\n            </el-checkbox-group> -->\r\n                </el-form-item>\r\n\r\n                <el-form-item>\r\n                    <el-button type=\"primary\" @click=\"onSubmitComponent(componentForm)\">确认</el-button>\r\n                    <el-button @click=\"closeComponent(componentForm)\">取消</el-button>\r\n                </el-form-item>\r\n            </el-form>\r\n        </el-dialog>\r\n\r\n        <!-- </div> -->\r\n    </div>\r\n</template>\r\n\r\n<script>\r\n// import mqtt from \"mqtt\"; // mqtt协议\r\nimport editModal from '@/views/bounced/maintenanceRemind';\r\nimport analysisConfiguration from '@/views/bounced/analysisConfiguration';\r\nimport dataBoard from '@/views/bounced/dataBoard';\r\nimport { 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\n//  var number = 1\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            //判断模拟区，画布区\r\n            numberNew: 1,\r\n            speed: false,\r\n            component: false,\r\n            sectionals: [],\r\n            activeName: 'first',\r\n            VideoId: '',\r\n            title: '断面',\r\n            componentTitle: '速度',\r\n            form: {\r\n                name: '',\r\n                type: '',\r\n                id: '',\r\n                coordinate: '',\r\n                Direction: '正向',\r\n                StoppingSpeed: '5'\r\n            },\r\n            //初始图形名称\r\n            startFigureName: '',\r\n            areaComponentform: {\r\n                name: '',\r\n                region: '',\r\n                date1: '',\r\n                date2: '',\r\n                delivery: false,\r\n                type: [],\r\n                resource: '实时（触发）',\r\n                desc: ''\r\n            },\r\n            timeSelect: [\r\n                {\r\n                    label: '秒',\r\n                    value: '秒'\r\n                },\r\n                {\r\n                    label: '分钟',\r\n                    value: '分钟'\r\n                },\r\n                {\r\n                    label: '小时',\r\n                    value: '小时'\r\n                },\r\n                {\r\n                    label: '天',\r\n                    value: '天'\r\n                }\r\n            ],\r\n            titName: '',\r\n            componentForm: {\r\n                //单位\r\n                company: '秒',\r\n                componentName: '',\r\n                componentParameterId: '01888e05fac246b29e3a19a27c3d2ab0',\r\n                //周期间隔\r\n                cycleInterval: '',\r\n                startSectionIds: '',\r\n                startSectionNames: '',\r\n                endSectionIds: '',\r\n                endSectionNames: '',\r\n                endValue: '',\r\n                //展现形式\r\n                presentationForm: '',\r\n                presentation: [],\r\n                startValue: '',\r\n                timeMode: '触发',\r\n                type: [],\r\n                startSection: [],\r\n                endSection: [],\r\n                componentType: '',\r\n                typeFiltering: '',\r\n                typeData: []\r\n            },\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            analysisConfigurationdata: {},\r\n            //触发数据\r\n            triggerData: ''\r\n        };\r\n    },\r\n\r\n    //离开当前页面后执行\r\n    destroyed: function () {\r\n        console.log('离开当前页');\r\n        //   client.publish('msg_stream',JSON.stringify({\"msg_flag\":-1}))\r\n        client.end();\r\n    },\r\n    created() {\r\n        window.getFigure = this.getFigureD;\r\n        window.getModifyTheName = this.getModifyTheNameN;\r\n        // window.getModifyTheName = this.getModifyTheNameN;\r\n        window.getSingleComponentId = this.getSingleComponentIdN;\r\n        window.getSimulationAreaEdit = this.getSimulationAreaEdit;\r\n        window.OnScene = this.OnSceneN;\r\n        this.getAllSectionalData(this.$route.query.id);\r\n        this.VideoId = this.$route.query.id;\r\n        this.number = this.$route.query.num;\r\n        this.titName = this.$route.query.name;\r\n    },\r\n    mounted() {\r\n        // this.testMqtt()\r\n\r\n        //   this.getSingleComponentIdN()\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            this.topicSends = ['img' + this.number, 'stream' + this.number, 'trajectory' + this.number, 'detection' + this.number];\r\n            mqtt = new mqttConfig(this.topicSends);\r\n            client = mqtt.createConnect();\r\n            client.subscribe(\r\n                ['img' + this.number, 'stream' + this.number, 'trajectory' + this.number, 'detection' + this.number],\r\n                { qos: 0 },\r\n                (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        //停止订阅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); // 将二进制数据转为字符串\r\n                        const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据\r\n                        document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));\r\n                        if (msg.rate == 'high') {\r\n                            document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));\r\n                        } else {\r\n                            this.analysisConfigurationdata = msg;\r\n                        }\r\n                    } catch (error) {}\r\n                    break;\r\n                // 树结构\r\n                case '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); // 将二进制数据转为字符串\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); // 将二进制数据转为字符串\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); // 将二进制数据转为字符串\r\n                        //   console.log(\"temp\",temp)\r\n                        var detId = [];\r\n                        const msgN = JSON.parse(temp);\r\n                        //  console.log(\"msgN\",msgN)\r\n                        this.triggerData = msgN;\r\n                        if (temp.length != 0) {\r\n                            for (let i = 0; i < msgN.length; i++) {\r\n                                detId.push(msgN[i].det_id);\r\n                            }\r\n                            // 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                    } 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.componentName = res.data.data.componentName;\r\n                    this.componentForm.componentParameterId = res.data.data.componentParameterId;\r\n                    this.componentForm.cycleInterval = res.data.data.cycleInterval;\r\n                    this.componentForm.startSectionIds = res.data.data.startSectionIds;\r\n                    this.componentForm.startSectionNames = res.data.data.startSectionNames;\r\n                    this.componentForm.endSectionIds = res.data.data.endSectionIds;\r\n                    this.componentForm.endSectionNames = res.data.data.endSectionNames;\r\n                    this.componentForm.endValue = res.data.data.endValue;\r\n                    this.componentForm.startValue = res.data.data.startValue;\r\n                    this.componentForm.presentationForm = res.data.data.presentationForm;\r\n\r\n                    // this.componentForm.typeFiltering = res.data.data.typeFiltering\r\n                    // this.componentForm.type = res.data.data.type\r\n                    if (res.data.data.startSectionIds != '') {\r\n                        console.log('startSectionIds', res.data.data.startSectionIds);\r\n                        var startSectionIdArr = [];\r\n                        var startSectionArr = [];\r\n                        startSectionIdArr = res.data.data.startSectionIds.split(',');\r\n                        console.log('this.sectionals', this.sectionals);\r\n                        console.log('startSectionIdArr', startSectionIdArr);\r\n                        startSectionIdArr.forEach((item) => {\r\n                            this.sectionals.forEach((items) => {\r\n                                if (item == items.graphicId) {\r\n                                    startSectionArr.push(items.graphicName);\r\n                                    this.componentForm.startSection = startSectionArr;\r\n                                }\r\n                            });\r\n                        });\r\n                    }\r\n                    if (res.data.data.endSectionIds != '') {\r\n                        console.log('endSectionIds', res.data.data.endSectionIds);\r\n                        var endSectionIdArr = [];\r\n                        var endSectionArr = [];\r\n                        endSectionIdArr = res.data.data.endSectionIds.split(',');\r\n                        console.log('this.sectionals', this.sectionals);\r\n                        console.log('endSectionIdArr', endSectionIdArr);\r\n                        endSectionIdArr.forEach((item) => {\r\n                            this.sectionals.forEach((items) => {\r\n                                if (item == items.graphicId) {\r\n                                    endSectionArr.push(items.graphicName);\r\n                                    this.componentForm.endSection = endSectionArr;\r\n                                }\r\n                            });\r\n                        });\r\n                    }\r\n                    // if(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                    if (this.componentForm.presentationForm != '') {\r\n                        var arr = [];\r\n                        arr = this.componentForm.presentationForm.split(',');\r\n                        this.componentForm.presentation = arr;\r\n                    } else if (this.componentForm.presentationForm == '') {\r\n                        this.componentForm.presentation = [];\r\n                    }\r\n                    if (res.data.data.type != '') {\r\n                        var arr = [];\r\n                        arr = res.data.data.type.split(',');\r\n                        this.componentForm.type = arr;\r\n                    } else {\r\n                        this.componentForm.type = [];\r\n                    }\r\n                    console.log('this.componentForm', this.componentForm);\r\n                }\r\n            });\r\n        },\r\n        //修改模拟区组件、图形\r\n        getSimulationAreaEdit(id, type, componentType, name, number) {\r\n            console.log('number', number);\r\n            this.numberNew = number;\r\n            if (type == '图形') {\r\n                this.form.id = id;\r\n                this.form.name = name;\r\n                this.form.type = componentType;\r\n                this.startFigureName = name;\r\n                if (this.form.type == '轨迹') {\r\n                    this.dialogFormVisible = true;\r\n                } else if (this.form.type == '区域') {\r\n                    this.dialogFormVisible = true;\r\n                } else if (this.form.type == '断面') {\r\n                    this.dialogFormVisible = true;\r\n                }\r\n            } else if (type == '组件') {\r\n                this.componentId = id;\r\n                this.componentForm.componentType = componentType;\r\n                this.componentTitle = componentType;\r\n                getComponentData({ AnalogAreaComponentId: id }).then((res) => {\r\n                    console.log('res', res);\r\n                    if (res.data.code == 200) {\r\n                        console.log('res', res.data.data);\r\n                        this.component = true;\r\n                        if (res.data.data.company != '') {\r\n                            this.componentForm.company = res.data.data.company;\r\n                        }\r\n                        if (res.data.data.timeMode != '') {\r\n                            this.componentForm.timeMode = res.data.data.timeMode;\r\n                        }\r\n                        // this.componentForm.componentName = res.data.data.componentName+'-'+type\r\n                        this.componentForm.componentName = res.data.data.componentName;\r\n                        this.componentForm.componentParameterId = res.data.data.componentParameterId;\r\n                        this.componentForm.cycleInterval = res.data.data.cycleInterval;\r\n                        this.componentForm.startSectionIds = res.data.data.startSectionIds;\r\n                        this.componentForm.startSectionNames = res.data.data.startSectionNames;\r\n                        this.componentForm.endSectionIds = res.data.data.endSectionIds;\r\n                        this.componentForm.endSectionNames = res.data.data.endSectionNames;\r\n                        this.componentForm.endValue = res.data.data.endValue;\r\n                        this.componentForm.startValue = res.data.data.startValue;\r\n                        this.componentForm.presentationForm = res.data.data.presentationForm;\r\n                        // this.componentForm.type = res.data.data.type\r\n                        if (res.data.data.startSectionIds != '') {\r\n                            console.log('startSectionIds', res.data.data.startSectionIds);\r\n                            var startSectionIdArr = [];\r\n                            var startSectionArr = [];\r\n                            startSectionIdArr = res.data.data.startSectionIds.split(',');\r\n                            console.log('this.sectionals', this.sectionals);\r\n                            console.log('startSectionIdArr', startSectionIdArr);\r\n                            startSectionIdArr.forEach((item) => {\r\n                                this.sectionals.forEach((items) => {\r\n                                    if (item == items.graphicId) {\r\n                                        startSectionArr.push(items.graphicName);\r\n                                        this.componentForm.startSection = startSectionArr;\r\n                                    }\r\n                                });\r\n                            });\r\n                        }\r\n                        if (res.data.data.endSectionIds != '') {\r\n                            console.log('endSectionIds', res.data.data.endSectionIds);\r\n                            var endSectionIdArr = [];\r\n                            var endSectionArr = [];\r\n                            endSectionIdArr = res.data.data.endSectionIds.split(',');\r\n                            console.log('this.sectionals', this.sectionals);\r\n                            console.log('endSectionIdArr', endSectionIdArr);\r\n                            endSectionIdArr.forEach((item) => {\r\n                                this.sectionals.forEach((items) => {\r\n                                    if (item == items.graphicId) {\r\n                                        endSectionArr.push(items.graphicName);\r\n                                        this.componentForm.endSection = endSectionArr;\r\n                                    }\r\n                                });\r\n                            });\r\n                        }\r\n                        if (this.componentForm.presentationForm != '') {\r\n                            var arr = [];\r\n                            arr = this.componentForm.presentationForm.split(',');\r\n                            this.componentForm.presentation = arr;\r\n                        } else if (this.componentForm.presentationForm == '') {\r\n                            this.componentForm.presentation = [];\r\n                        }\r\n                        if (res.data.data.type != '') {\r\n                            var arr = [];\r\n                            arr = res.data.data.type.split(',');\r\n                            this.componentForm.type = arr;\r\n                        } else {\r\n                            this.componentForm.type = [];\r\n                        }\r\n                    }\r\n                });\r\n            }\r\n        },\r\n        //获取所有断面数据\r\n        getAllSectionalData(VideoId) {\r\n            getSectionalData({ VideoId: VideoId }).then((res) => {\r\n                console.log('res', res);\r\n                if (res.data.code == 200) {\r\n                    this.sectionals = res.data.data;\r\n                }\r\n            });\r\n        },\r\n        figureType(type) {\r\n            if (type == 'Move') {\r\n                type = '轨迹';\r\n            } else if (type == 'Poly') {\r\n                type = '区域';\r\n            } else if (type == 'Line') {\r\n                type = '断面';\r\n            }\r\n            return type;\r\n        },\r\n        getFigureD(item, index, indexNew) {\r\n            console.log('图形类型', item);\r\n            console.log('初始图形名称', index);\r\n            this.startFigureName = index;\r\n            console.log('图形位置', indexNew);\r\n            this.dialogFormVisible = true;\r\n            this.form.name = index;\r\n            this.form.type = this.figureType(item);\r\n            this.form.coordinate = indexNew;\r\n            this.form.id = '';\r\n            this.title = this.figureType(item);\r\n        },\r\n        //双击图形修改图形名称弹框\r\n        getModifyTheNameN(data, number) {\r\n            console.log('data', data);\r\n            console.log('number', number);\r\n            this.numberNew = number;\r\n            var arr = [];\r\n            arr = data.split(',');\r\n            console.log('arr', arr);\r\n            this.form.id = arr[0];\r\n            this.form.name = arr[1];\r\n            this.form.type = arr[2];\r\n            this.startFigureName = arr[1];\r\n            if (this.form.type == '轨迹') {\r\n                // this.open2()\r\n                this.dialogFormVisible = true;\r\n            } else if (this.form.type == '区域') {\r\n                this.dialogFormVisible = true;\r\n            } else if (this.form.type == '断面') {\r\n                this.dialogFormVisible = true;\r\n            }\r\n        },\r\n        //新增、编辑图形确认按钮\r\n        onSubmit(form) {\r\n            console.log('form', form);\r\n            //新增\r\n            if (form.id == '') {\r\n                let formData = new FormData();\r\n                if (form.type == '断面') {\r\n                    formData.append('GraphicName', form.name);\r\n                    formData.append('GraphicType', form.type);\r\n                    formData.append('Coordinate', form.coordinate);\r\n                    formData.append('VideoId', this.VideoId);\r\n                    formData.append('Direction', form.Direction);\r\n                } else if (form.type == '区域') {\r\n                    formData.append('GraphicName', form.name);\r\n                    formData.append('GraphicType', form.type);\r\n                    formData.append('Coordinate', form.coordinate);\r\n                    formData.append('VideoId', this.VideoId);\r\n                    // formData.append(\"Direction\",form.Direction);\r\n                    // formData.append(\"StoppingSpeed\",form.StoppingSpeed);\r\n                } else {\r\n                    formData.append('GraphicName', form.name);\r\n                    formData.append('GraphicType', form.type);\r\n                    formData.append('Coordinate', form.coordinate);\r\n                    formData.append('VideoId', this.VideoId);\r\n                    // formData.append(\"Direction\",form.Direction);\r\n                }\r\n\r\n                axios({\r\n                    method: 'post',\r\n                    url: serverUrl.addFigure,\r\n                    data: formData\r\n                }).then((res) => {\r\n                    console.log('res', res);\r\n\r\n                    if (res.data.code == 200) {\r\n                        this.$message({\r\n                            message: res.data.msg,\r\n                            type: 'success'\r\n                        });\r\n                        document.getElementById('mapModule').contentWindow.postFigureId(JSON.stringify(res.data.data));\r\n                        document\r\n                            .getElementById('mapModule')\r\n                            .contentWindow.postFigureName(\r\n                                JSON.stringify(res.data.data + ',' + form.name + ',' + this.startFigureName + ',' + this.numberNew)\r\n                            );\r\n                        this.dialogFormVisible = false;\r\n                    } else {\r\n                        this.$message({\r\n                            message: res.data.msg,\r\n                            type: 'warning'\r\n                        });\r\n                    }\r\n                });\r\n            } else {\r\n                //编辑\r\n                let formData = new FormData();\r\n                if (form.type == '断面') {\r\n                    formData.append('GraphicName', form.name);\r\n                    formData.append('GraphicType', form.type);\r\n                    formData.append('Direction', form.Direction);\r\n                    formData.append('GraphicId', form.id);\r\n                    formData.append('VideoId', this.VideoId);\r\n                } else if (form.type == '区域') {\r\n                    formData.append('GraphicName', form.name);\r\n                    formData.append('GraphicType', form.type);\r\n                    formData.append('Direction', form.Direction);\r\n                    formData.append('GraphicId', form.id);\r\n                    formData.append('VideoId', this.VideoId);\r\n                    formData.append('StoppingSpeed', form.StoppingSpeed);\r\n                } else {\r\n                    formData.append('GraphicName', form.name);\r\n                    formData.append('GraphicType', form.type);\r\n                    // formData.append(\"Direction\",form.Direction);\r\n                    formData.append('GraphicId', form.id);\r\n                    formData.append('VideoId', this.VideoId);\r\n                }\r\n                axios({\r\n                    method: 'post',\r\n                    url: serverUrl.editFigure,\r\n                    data: formData\r\n                }).then((res) => {\r\n                    console.log('res', res);\r\n\r\n                    if (res.data.code == 200) {\r\n                        this.$message({\r\n                            message: res.data.msg,\r\n                            type: 'success'\r\n                        });\r\n                        console.log('startFigureName', this.startFigureName);\r\n                        // document.getElementById(\"mapModule\").contentWindow.postFigureId(JSON.stringify(res.data.data))\r\n                        console.log('this.numberNew', this.numberNew);\r\n                        document\r\n                            .getElementById('mapModule')\r\n                            .contentWindow.postFigureName(\r\n                                JSON.stringify(form.id + ',' + form.name + ',' + this.startFigureName + ',' + this.numberNew)\r\n                            );\r\n                        this.dialogFormVisible = false;\r\n                    } else {\r\n                        this.$message({\r\n                            message: res.data.msg,\r\n                            type: 'warning'\r\n                        });\r\n                    }\r\n                });\r\n            }\r\n        },\r\n        //新增编辑组件取消\r\n        onSubmitComponent(componentForm) {\r\n            this.component = false;\r\n            let formData = new FormData();\r\n            if (componentForm.componentType == 'OD') {\r\n                //名称\r\n                formData.append('componentName', componentForm.componentName);\r\n                //单位\r\n                formData.append('company', componentForm.company);\r\n                //id\r\n                formData.append('componentParameterId', componentForm.componentParameterId);\r\n                formData.append('cycleInterval', componentForm.cycleInterval);\r\n                formData.append('startSectionIds', componentForm.startSectionIds);\r\n                formData.append('startSectionNames', componentForm.startSectionNames);\r\n                formData.append('endSectionIds', componentForm.endSectionIds);\r\n                formData.append('endSectionNames', componentForm.endSectionNames);\r\n                formData.append('endValue', componentForm.endValue);\r\n                formData.append('startValue', componentForm.startValue);\r\n                formData.append('timeMode', componentForm.timeMode);\r\n                formData.append('presentationForm', '矩阵图');\r\n            } else if (componentForm.componentType == '类型') {\r\n                //名称\r\n                formData.append('componentName', componentForm.componentName);\r\n                //单位\r\n                formData.append('company', componentForm.company);\r\n                //id\r\n                formData.append('componentParameterId', componentForm.componentParameterId);\r\n                formData.append('cycleInterval', componentForm.cycleInterval);\r\n                formData.append('endValue', componentForm.endValue);\r\n                formData.append('startValue', componentForm.startValue);\r\n                formData.append('timeMode', componentForm.timeMode);\r\n                formData.append('presentationForm', componentForm.presentationForm);\r\n                formData.append('type', componentForm.type);\r\n            } else {\r\n                //名称\r\n                formData.append('componentName', componentForm.componentName);\r\n                //单位\r\n                formData.append('company', componentForm.company);\r\n                //id\r\n                formData.append('componentParameterId', componentForm.componentParameterId);\r\n                formData.append('cycleInterval', componentForm.cycleInterval);\r\n                formData.append('endValue', componentForm.endValue);\r\n                formData.append('startValue', componentForm.startValue);\r\n                formData.append('timeMode', componentForm.timeMode);\r\n                formData.append('presentationForm', componentForm.presentationForm);\r\n            }\r\n            axios({\r\n                method: 'post',\r\n                url: serverUrl.editComponent,\r\n                data: formData\r\n            }).then((res) => {\r\n                console.log('res', res);\r\n\r\n                if (res.data.code == 200) {\r\n                    this.$message({\r\n                        message: res.data.msg,\r\n                        type: 'success'\r\n                    });\r\n                    document.getElementById('mapModule').contentWindow.postFigureId(JSON.stringify(res.data.data));\r\n                    document.getElementById('mapModule').contentWindow.editComponent(this.componentId + ',' + componentForm.componentName);\r\n                    this.dialogFormVisible = false;\r\n                } else {\r\n                    this.$message({\r\n                        message: res.data.msg,\r\n                        type: 'warning'\r\n                    });\r\n                }\r\n            });\r\n        },\r\n        //新增编辑组件取消\r\n        closeComponent(componentForm) {\r\n            this.component = false;\r\n            this.componentForm = {\r\n                //单位\r\n                company: '秒',\r\n                componentName: '',\r\n                componentParameterId: '01888e05fac246b29e3a19a27c3d2ab0',\r\n                //周期间隔\r\n                cycleInterval: '',\r\n                startSectionIds: '',\r\n                startSectionNames: '',\r\n                endSectionIds: '',\r\n                endSectionNames: '',\r\n                endValue: '',\r\n                //展现形式\r\n                presentationForm: '',\r\n                presentation: [],\r\n                startValue: '',\r\n                timeMode: '触发',\r\n                type: [],\r\n                startSection: [],\r\n                endSection: [],\r\n                componentType: '',\r\n                typeFiltering: '',\r\n                typeData: []\r\n            };\r\n        },\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            } else {\r\n                this.dialogFormVisible = false;\r\n                document.getElementById('mapModule').contentWindow.delFigure();\r\n            }\r\n        },\r\n        closeComponentForm() {\r\n            this.component = false;\r\n        },\r\n        closeForm(form) {\r\n            if (this.form.id != '') {\r\n                this.dialogFormVisible = false;\r\n                document.getElementById('mapModule').contentWindow.closeEdit(JSON.stringify(form.type + ',' + form.id));\r\n                //  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        handlePresentation(value) {\r\n            console.log('展现形式', value);\r\n            let presentation = value.join(',');\r\n            this.componentForm.presentationForm = presentation;\r\n            console.log('this.componentForm.presentationForm', this.componentForm.presentationForm);\r\n        },\r\n        //类型数据\r\n        handleTypeData(value) {\r\n            console.log('类型数据', value);\r\n            let type = value.join(',');\r\n            this.componentForm.typeData = type;\r\n        },\r\n        //模型加载等待\r\n        loadingShow(data) {\r\n            this.loadingShow1 = data;\r\n        },\r\n\r\n        handleSearch() {\r\n            this.modelOthers = true;\r\n            this.$refs.htModels.finbBox(this.inputVal);\r\n            console.log(this.$refs.htModels, 'asdasdasd');\r\n            this.inputVal = '';\r\n        },\r\n        handleRow(val) {\r\n            this.modelOthers = true;\r\n            this.$refs.htModels.finbBox(val);\r\n        },\r\n        // 天气\r\n        handleWather() {\r\n            axios({\r\n                url: 'https://restapi.amap.com/v3/weather/weatherInfo?key=bc2b906032fdd8a63cbd0790d656b1d7&city=620100',\r\n                methods: ''\r\n            }).then((res) => {\r\n                this.weatherItem = res.data.lives[0];\r\n                console.log(this.weatherItem, 'asdsads');\r\n            });\r\n        }\r\n    },\r\n    components: {\r\n        editModal,\r\n        analysisConfiguration,\r\n        dataBoard\r\n    }\r\n};\r\n</script>\r\n<style scoped>\r\n.el-form-item {\r\n    margin-bottom: 15px;\r\n}\r\n.content-box::-webkit-scrollbar {\r\n    display: none; /* Chrome Safari */\r\n}\r\n.content-box .tab-box {\r\n    padding: 10px 20px;\r\n    background-color: #fff;\r\n    /* border-radius: 10px; */\r\n}\r\n.new-dialog {\r\n    width: 49%;\r\n    height: 11%;\r\n    left: calc(24vw);\r\n    top: 90vh;\r\n    bottom: 0 /* right:auto;; */;\r\n}\r\n.formBox {\r\n    margin-top: 20px;\r\n    margin-left: 20px;\r\n}\r\n/* .new-dialog .el-dialog {\r\n    width:100%!important;\r\n        margin: 0vh auto !important;\r\n        margin-top: 0vh!important;\r\n} */\r\n.new-dialog .el-dialog {\r\n    width: 100% !important;\r\n    margin: 0 auto 0px !important;\r\n    /* margin-top: 0vh!important; */\r\n}\r\n.new-dialog .el-dialog__wrapper::-webkit-scrollbar {\r\n    display: none; /* Chrome Safari */\r\n}\r\n.new-dialog .customWidth {\r\n    width: 100%;\r\n    min-width: 150px;\r\n}\r\n.mapModuleApp {\r\n    /* width:100%; */\r\n    width: 1600px;\r\n    height: 900px;\r\n    display: inline-block;\r\n    border: 1px soild #eee;\r\n}\r\n.el-drawer.btt,\r\n.el-drawer.ttb {\r\n    width: 100%;\r\n    left: 0;\r\n    right: 0;\r\n    height: 100% !important;\r\n}\r\n\r\n.el-drawer__container {\r\n    position: relative;\r\n    left: 0;\r\n    right: 0;\r\n    top: 0;\r\n    bottom: 0;\r\n    height: 100%;\r\n    width: 100%;\r\n}\r\n</style>\r\n"]}]}