From 25b90985a2f843ef63fbb4fce47c69cffbf51eee Mon Sep 17 00:00:00 2001
From: Hobart <kolusai@hotmail.com>
Date: Thu, 2 Feb 2023 13:06:19 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BC=95=E7=94=A8api?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/index.vue | 2015 ++++++++++++++++++++++---------------------
 1 file changed, 1015 insertions(+), 1000 deletions(-)

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