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