代码提交

src/components/chart/lineChart.vue

@@ -3,9 +3,9 @@
         <div class="tableTitle">
             <div>
                 <span
-                    style="width: 10px;height:10px;border-radius: 50%;background-color: #3297ff;display: inline-block;vertical-align: middle;margin-right: 8px;"
-                ></span>
-                <span style="font-size:18px;">{{this.componentName + '-' + this.chartName + '-' + '曲线图'+'-'+status, }}</span>
+                    style="width: 10px;height:10px;border-radius: 50%;background-color: #3297ff;display: inline-block;vertical-align: middle;margin-right: 8px;"></span>
+                <span style="font-size:18px;">{{ this.componentName + '-' + this.chartName + '-' + '曲线图' + '-' + status,
+                                    }}</span>
             </div>
         </div>
         <div id="lineChart" ref="lineChart" style="width: 100%; height: 300px"></div>
@@ -67,12 +67,14 @@ export default {
     created() {
         // console.log( this.componentName + '-' + this.chartName + '-' + '曲线图','40');
     },
+
     methods: {
         drawLine() {
             let myChart = this.$echarts.getInstanceByDom(this.$refs.lineChart);
             if (myChart == null) {
                 myChart = this.$echarts.init(this.$refs.lineChart);
             }
+            // myChart.showLoading()　　//开启loading
             let option = {
                 // title: {
                 //     show: true,
@@ -136,23 +138,34 @@ export default {
                 ],
                 series: this.series
             };
-
-            myChart.setOption(option);
+            myChart.setOption(option)　　//再设置配置
+            // myChart.hideLoading()
+            // myChart.setOption(option);
             // window.onresize = () => {  // 根据窗口大小变化图表自适应
             //     myChart.resize();
             // };
-            window.addEventListener('resize', function() {
+            window.addEventListener('resize', function () {
                 myChart.resize();
             });
         }
     },
     mounted() {
         this.drawLine();
+<<<<<<< HEAD
+        console.log(this.title);
+=======
+>>>>>>> 1d018c9bfd7d477b50f1c160150339f6011f2622
     },
     watch: {
         list: {
             handler(newVal) {
+<<<<<<< HEAD
+                if (newVal) {
+                    console.log(this.title);
+                    console.log(newVal, this.title + '折现图的数据');
+=======
                 if (newVal.length != 0) {
+>>>>>>> 1d018c9bfd7d477b50f1c160150339f6011f2622
                     // x轴的数据
                     this.xData = newVal.map(val => {
                         return val.time;
@@ -183,7 +196,7 @@ export default {
                         this.series[0].name = '总量';
                         console.log('折线图', newVal);
                         // 映射出类型数组
-                        let arr = newVal.map(function(ele) {
+                        let arr = newVal.map(function (ele) {
                             if (ele.type_data != null) {
                                 return ele.type_data;
                             }
@@ -194,6 +207,34 @@ export default {
                                 mapN.push(arr[t][i]);
                             }
                         }
+<<<<<<< HEAD
+                        var lineArr = [{
+                            name: '机动车',
+                            type: 'line',
+                            data: [],
+                            smooth: true
+                        }, {
+                            name: '非机动车',
+                            type: 'line',
+                            data: [],
+                            smooth: true
+                        }, {
+                            name: '行人',
+                            type: 'line',
+                            data: [],
+                            smooth: true
+                        }];
+                        // if (newVal[0].type_data != undefined) {
+                        //     newVal[0].type_data.forEach(ele => {
+                        //         lineArr.push({
+                        //             name: ele.name,
+                        //             type: 'line',
+                        //             data: [],
+                        //             smooth: true
+                        //         });
+                        //     });
+                        // }
+=======
                         var lineArr = [];
                         // 遍历需要多少条类型折线
                         if (newVal[0].type_data != undefined) {
@@ -207,6 +248,7 @@ export default {
                             });
                         }
                         // 筛选类型的数量
+>>>>>>> 1d018c9bfd7d477b50f1c160150339f6011f2622
                         mapN.forEach(ele => {
                             if (ele.name == '机动车') {
                                 lineArr[0].data.push(ele.quantity);
@@ -221,9 +263,9 @@ export default {
                         }
                         // 总和数量
                         let mapNR1 = [];
-                        newVal.map(function(ele) {
+                        newVal.map(function (ele) {
                             if (ele.type_data != null) {
-                                var sum = ele.type_data.reduce(function(prev, cur) {
+                                var sum = ele.type_data.reduce(function (prev, cur) {
                                     return cur.quantity + prev;
                                 }, 0);
                                 mapNR1.push(sum);
@@ -251,7 +293,11 @@ export default {
                             return ele.in_flow + ele.out_flow;
                         });
                     } else if (this.title == '车头时距') {
+<<<<<<< HEAD
+                        console.log("车头时距", newVal)
+=======
                         console.log('车头时距', newVal);
+>>>>>>> 1d018c9bfd7d477b50f1c160150339f6011f2622
                         this.tooltip = {
                             formatter: '{a} {b}:{c}/s',
                             show: true,
@@ -260,10 +306,14 @@ export default {
                         this.series[0].data = newVal.map(val => {
                             return val.headway;
                         });
-                    } else if (this.title == '排队数') {
+                    } else if (this.title == '排队数' && this.status == '触发') {
                         this.series[0].data = newVal.map(val => {
                             return val.n_queue;
                         });
+                    } else if (this.title == '排队数' && this.status == '周期统计') {
+                        this.series[0].data = newVal.map(val => {
+                            return val.ave_queue;
+                        });
                     } else if (this.title == '检测数') {
                         this.series[0].data = newVal.map(val => {
                             return val.n_stay;
@@ -273,16 +323,18 @@ export default {
                             return val.ave_delay;
                         });
                     } else if (this.title == '拥堵') {
-                        this.series[0].data = newVal.map(val => {});
-                    }
-                    if (this.$refs.lineChart) {
-                        this.$nextTick(() => {
-                            this.drawLine();
-                        });
+                        this.series[0].data = newVal.map(val => { });
                     }
+
+                    this.drawLine()
+
                 }
             },
+<<<<<<< HEAD
+            deep: true
+=======
             immediate: true
+>>>>>>> 1d018c9bfd7d477b50f1c160150339f6011f2622
         }
     }
 };

src/components/target/typeChart.vue

@@ -1,15 +1,19 @@
-<template
-    ><!-- 触发类型 -->
-    <div class="setion" v-if="isRefer">
+<template><!-- 触发类型 -->
+    <div class="setion">
         <p class="chartTitle"><span class="titleIcon"></span> {{ componentName }} {{ triggerType }}</p>
         <!-- 触发数据数值渲染 -->
+<<<<<<< HEAD
+        <div class="typeContent">
+            <div v-if="dataArr && dataArr.length != 0">
+=======
         <div class="typeContent" v-if="triggerType == '触发' || '周期时刻'">
             <div v-if="dataArr && dataArr.length != 0 && dataArr!=undefined">
+>>>>>>> 1d018c9bfd7d477b50f1c160150339f6011f2622
                 <div v-if="title == '类型'" style="display:flex">
-                    <el-card v-for="(n, i) in typeValue.type_data" :key="i" style="width: 150px; margin-bottom: 20px; text-align: center">
+                    <el-card v-for="(n, i) in typeValue.type_data" :key="i"
+                        style="width: 150px; margin-bottom: 20px; text-align: center">
                         <div>
-                            <span style="font-size: 15px;">{{ n.name }}</span
-                            ><br />
+                            <span style="font-size: 15px;">{{ n.name }}</span><br />
                             <span style="font-size: 30px; font-weight: bold">{{ n.quantity }}</span>
                         </div>
                         <div>
@@ -21,7 +25,11 @@
                 </div>
             </div>
             <el-card v-show="echartArr.includes('数值')" style="width: 150px; margin-bottom: 20px; text-align: center">
+<<<<<<< HEAD
+                <div v-if="dataArr && dataArr.length != 0">
+=======
                 <div v-if="dataArr&& dataArr.length != 0 && dataArr!=undefined">
+>>>>>>> 1d018c9bfd7d477b50f1c160150339f6011f2622
                     <div v-if="title == '类型'">
                         <span style="font-size: 15px;">类型数量总和</span><br />
                         <span style="font-size: 30px; font-weight: bold">
@@ -68,9 +76,16 @@
             <div class="tableTitle" v-if="dataArr&& dataArr.length != 0 && dataArr!=undefined">
                 <div>
                     <span
+<<<<<<< HEAD
+                        style="width: 10px;height:10px;border-radius: 50%;background-color: #3297ff;display: inline-block;vertical-align: middle;margin-right: 8px;"></span>
+                    <span style="font-size:18px;">{{ this.chartName + '-' + this.componentName + '-' + '表格' + '-' +
+                        triggerType
+                    }}</span>
+=======
                         style="width: 10px;height:10px;border-radius: 50%;background-color: #3297ff;display: inline-block;vertical-align: middle;margin-right: 8px;"
                     ></span>
                     <span style="font-size:18px;">{{ this.chartName + '-' + this.componentName + '-' + '表格' + '-' + triggerType }}</span>
+>>>>>>> 1d018c9bfd7d477b50f1c160150339f6011f2622
                 </div>
                 <div class="tableTime">
                     {{ dataArr[0].time ? dataArr[0].time : '' }}
@@ -85,6 +100,10 @@
         </div>
         <div class="border" v-if="echartArr.includes('曲线图')">
             <detailDialog />
+<<<<<<< HEAD
+            <lineChart :componentName="componentName" :chartName="chartName" :pageType="pageType" :list="dataArr"
+                :status="triggerType" :title="title" :typeValue="typeValue" />
+=======
             <lineChart
             v-if="dataArr && dataArr.length != 0 && dataArr!=undefined"
                 :componentName="componentName"
@@ -95,43 +114,22 @@
                 :title="title"
                 :typeValue="typeValue"
             />
+>>>>>>> 1d018c9bfd7d477b50f1c160150339f6011f2622
         </div>
         <div class="border" v-if="echartArr.includes('饼状图')">
             <detailDialog />
-            <pieChart
-                :componentName="componentName"
-                :chartName="chartName"
-                :pageType="pageType"
-                :list="dataArr"
-                :status="triggerType"
-                :title="title"
-                :typeValue="typeValue"
-            />
+            <pieChart :componentName="componentName" :chartName="chartName" :pageType="pageType" :list="dataArr"
+                :status="triggerType" :title="title" :typeValue="typeValue" />
         </div>
         <div class="border" v-if="echartArr.includes('均值图')">
             <detailDialog />
-            <avgChart
-                ref="avgRefChart"
-                :componentName="componentName"
-                :chartName="chartName"
-                :pageType="pageType"
-                :list="dataArr"
-                :status="triggerType"
-                :title="title"
-                :typeValue="typeValue"
-            />
+            <avgChart ref="avgRefChart" :componentName="componentName" :chartName="chartName" :pageType="pageType"
+                :list="dataArr" :status="triggerType" :title="title" :typeValue="typeValue" />
         </div>
         <div class="border" v-if="echartArr.includes('直方图')">
             <detailDialog />
-            <barChart
-                :componentName="componentName"
-                :chartName="chartName"
-                :pageType="pageType"
-                :list="dataArr"
-                :status="triggerType"
-                :title="title"
-                :typeValue="typeValue"
-            />
+            <barChart :componentName="componentName" :chartName="chartName" :pageType="pageType" :list="dataArr"
+                :status="triggerType" :title="title" :typeValue="typeValue" />
         </div>
     </div>
 </template>
@@ -169,18 +167,24 @@ export default {
             valueShow: {}
         };
     },
-    created() {},
+    created() { 
+       
+    },
     methods: {
         // 计算类型的数值
     },
 
     computed: {},
-    mounted() {},
+    mounted() { },
     watch: {
         // 监听触发数据
         dataArr: {
             handler(newVal) {
+<<<<<<< HEAD
+                console.log("dataArr", newVal)
+=======
                 console.log('dataArr', newVal);
+>>>>>>> 1d018c9bfd7d477b50f1c160150339f6011f2622
             },
 
             immediate: true
@@ -209,6 +213,7 @@ export default {
     margin-bottom: 5px;
     padding: 8px;
 }
+
 .typeContent {
     box-sizing: border-box;
 }

src/views/bounced/dataBoard.vue

@@ -1,6 +1,6 @@
 <template>
     <div ref="box" class="box">
-        <el-empty v-show="componentList.length == 0" :image-size="400"></el-empty>
+        <el-empty v-show="sectionData.length == 0" :image-size="400"></el-empty>
         <!-- <p class="title" style="margin-bottom: 20px;font-size: 20px;font-weight: 400;">数据看板</p> -->
         <el-scrollbar class="scrollbar">
             <div class="dataBoard" ref="dataBoard" v-if="activeName == 'second'">
@@ -20,6 +20,33 @@
                                     </p>
                                     <!-- <span class="downPull1" data-num="1" @click="sectionHandle(i)"></span> -->
                                 </div>
+<<<<<<< HEAD
+                                <div v-if="s.children">
+                                    <div v-for="o in s.children" :key="o.analogAreaComponentId">
+                                        <OD v-if="o.componentName.includes('OD')" :pageType="o.graphicType" triggerType="触发"
+                                            :componentName="o.componentName" :echartArr="o.presentationForm"
+                                            :dataArr="o.trigger" :title="o.componentName.split('_')[0]"
+                                            :chartName="o.combinationName" />
+                                        <!--触发的组件  -->
+                                        <typeChart v-if="o.timeMode === '触发'" :pageType="o.graphicType"
+                                            :triggerType="o.timeMode" :componentName="o.componentName" :dataArr="o.trigger"
+                                            :echartArr="o.presentationForm" :title="o.componentName.split('_')[0]"
+                                            :chartName="o.combinationName" :typeValue="typeValue" />
+                                        <typeChart v-if="o.timeMode === '周期时刻'" :pageType="o.graphicType"
+                                            :triggerType="o.timeMode" :componentName="o.componentName"
+                                            :dataArr="o.cycleTimeData" :echartArr="o.presentationForm"
+                                            :title="o.componentName.split('_')[0]" :chartName="o.combinationName"
+                                            :typeValue="typeCycleTimeData" />
+                                        <!-- 周期统计的组件 -->
+                                        <typeChart v-if="o.timeMode === '周期统计'" :pageType="o.graphicType"
+                                            :triggerType="o.timeMode" :componentName="o.componentName"
+                                            :dataArr="o.cycleStatistics" :echartArr="o.presentationForm"
+                                            :title="o.componentName.split('_')[0]" :chartName="o.combinationName"
+                                            :typeValue="typeCycleStatistics" />
+                                    </div>
+                                </div>
+                                <!-- :data="triggerList.length != 0 ? triggerList : tableData" -->
+=======
                                 <el-tabs>
                                     <el-collapse v-model="acticveName">
                                         <div v-for="o in s.children" :key="o.analogAreaComponentId">
@@ -74,6 +101,7 @@
                                         </div>
                                     </el-collapse>
                                 </el-tabs>
+>>>>>>> 1d018c9bfd7d477b50f1c160150339f6011f2622
                             </div>
                         </template>
                     </div>
@@ -123,6 +151,15 @@ export default {
             default() {
                 return [];
             }
+<<<<<<< HEAD
+        },
+        componentList:{
+            type:Array,
+            default(){
+                return []
+            }
+=======
+>>>>>>> 1d018c9bfd7d477b50f1c160150339f6011f2622
         }
     },
     data() {
@@ -371,6 +408,9 @@ export default {
             typeCycleStatistics: {}
         };
     },
+    // beforeCeated(){
+
+    // },
     created() {
         this.getNew()
     },
@@ -402,6 +442,7 @@ export default {
                 });
                 return item;
             });
+
         },
         // 组件图标点击下拉事件
         sectionHandle(i) {
@@ -482,8 +523,7 @@ export default {
         cycleTimeData: {
             handler(newVal) {
                 // 监听到打印周期时刻数据
-                console.log(newVal, '440');
-                if (newVal.length != 0) {
+                if (newVal.length != 0 && this.sectionData) {
                     this.componentList.forEach(ele => {
                         if (ele.cycleTimeData == undefined && ele.timeMode == '周期时刻') {
                             ele.cycleTimeData = [];
@@ -519,9 +559,8 @@ export default {
         // }
         cycleStatistics: {
             handler(newVal) {
-                console.log(newVal, '周期统计');
 
-                if (newVal.length != 0) {
+                if (newVal.length != 0 && this.sectionData) {
                     this.componentList.forEach(ele => {
                         if (ele.cycleStatistics == undefined && ele.timeMode == '周期统计') {
                             ele.cycleStatistics = [];

src/views/index.vue

@@ -3,29 +3,18 @@
         <!-- <div class="container"> -->
         <div>
             <!-- <el-tabs type="border-card"  v-model="activeName" tab-position="left"> -->
-            <el-tabs type="border-card" v-model="activeName">
+            <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"
-                            v-if="videoUnityShow"
-                        ></iframe>
+                        <iframe id="mapModule" src="./VideoWeb/index.html" frameborder="0" style="width: 100%; height:100%;"
+                            scrolling="no" v-if="videoUnityShow"></iframe>
                         <!-- <iframe src="./VideoWeb/index.html" style="height: 100%; width: 100%;border: none" ref="iframe"></iframe> -->
                         <el-empty :description="description" v-if="videoAnalysisShow"> </el-empty>
                     </div>
                 </el-tab-pane>
                 <el-tab-pane label="数据看板" name="second">
-                    <dataBoard
-                        :activeName="activeName"
-                        :triggerData="triggerData"
-                        :triggerListData="triggerListData"
-                        :cycleTimeData="cycleTimeData"
-                        :cycleStatistics="cycleStatistics"
-                    ></dataBoard>
+                    <dataBoard ref="dataBoardRef" :activeName="activeName" :triggerData="triggerData" :triggerListData="triggerListData"
+                        :cycleTimeData="cycleTimeData" :cycleStatistics="cycleStatistics"  v-if="activeName='second'"></dataBoard>
                 </el-tab-pane>
                 <el-tab-pane label="分析配置" name="third">
                     <analysisConfiguration :analysisConfigurationdata="analysisConfigurationdata"></analysisConfiguration>
@@ -37,31 +26,12 @@
             </el-tabs>
             <!-- <el-button class="videoAnalysis" type="primary" size="mini" @click="videoAnalysisBtn" v-if="videoAnalysisShow" :disabled='disabledVideoAnalysis'
                 >视频分析</el-button> -->
-            <el-button
-                class="trafficAnalysis"
-                type="primary"
-                plain
-                size="mini"
-                @click="trafficAnalysisBtn"
-                v-if="trafficAnalysisShow"
-                :disabled="disabledTrafficAnalysis"
-                >交通分析</el-button
-            >
+            <el-button class="trafficAnalysis" type="primary" plain size="mini" @click="trafficAnalysisBtn"
+                v-if="trafficAnalysisShow" :disabled="disabledTrafficAnalysis">交通分析</el-button>
         </div>
-        <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%"
-        >
+        <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="组件名称">
@@ -82,8 +52,9 @@
             </div>
         </el-drawer>
         <!-- 组件弹框 -->
-        <el-dialog :title="componentTitle + '指标组件'" width="40%" :visible.sync="component" :close-on-click-modal ="false" @close="closeComponentForm()">
-            <el-form ref="form" :model="componentForm" label-width="150px" >
+        <el-dialog :title="componentTitle + '指标组件'" width="40%" :visible.sync="component" :close-on-click-modal="false"
+            @close="closeComponentForm()">
+            <el-form ref="form" :model="componentForm" label-width="150px">
                 <el-form-item label="名称：">
                     <el-input v-model="componentForm.componentName"></el-input>
                 </el-form-item>
@@ -93,14 +64,11 @@
                         <el-checkbox v-for="item in typeData" :label="item" :key="item">{{ item }}</el-checkbox>
                     </el-checkbox-group>
                 </el-form-item>
-                <el-form-item
-                    label="数值筛选："
-                    v-if="
-                        componentForm.componentType != 'OD' &&
-                            componentForm.componentType != '类型' &&
-                            componentForm.componentType != '流量'
-                    "
-                >
+                <el-form-item label="数值筛选：" v-if="
+                    componentForm.componentType != 'OD' &&
+                    componentForm.componentType != '类型' &&
+                    componentForm.componentType != '流量'
+                ">
                     <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>
@@ -112,22 +80,15 @@
                 </el-form-item>
                 <el-form-item label="时间模式：">
                     <el-select v-model="componentForm.timeMode" placeholder="请选择时间模式">
-                        <el-option
-                            label="触发"
-                            value="触发"
-                            v-if="componentForm.componentType != '延误' && componentForm.componentType != '拥堵'"
-                        ></el-option>
-                        <el-option
-                            label="周期时刻"
-                            value="周期时刻"
-                            v-if="
-                                componentForm.componentType != '排队数' &&
-                                    componentForm.componentType != '检测数' &&
-                                    componentForm.componentType != '延误' &&
-                                    componentForm.componentType != '拥堵' &&
-                                    componentForm.componentType != '流量'
-                            "
-                        ></el-option>
+                        <el-option label="触发" value="触发"
+                            v-if="componentForm.componentType != '延误' && componentForm.componentType != '拥堵'"></el-option>
+                        <el-option label="周期时刻" value="周期时刻" v-if="
+                            componentForm.componentType != '排队数' &&
+                            componentForm.componentType != '检测数' &&
+                            componentForm.componentType != '延误' &&
+                            componentForm.componentType != '拥堵' &&
+                            componentForm.componentType != '流量'
+                        "></el-option>
                         <el-option label="周期统计" value="周期统计" v-if="componentForm.componentType != 'OD'"> </el-option>
                     </el-select>
                 </el-form-item>
@@ -168,11 +129,15 @@
                 <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="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 != '拥堵'||componentForm.componentType != '流量'||componentForm.componentType != '类型'||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 label="均值图" name="presentation"
+                            v-if="componentForm.componentType != '拥堵' || componentForm.componentType != '流量' || componentForm.componentType != '类型' || 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>
@@ -370,12 +335,15 @@ export default {
                 videoType: '实时视频'
             },
             description: '请等待排队',
-            ipData: ''
+            ipData: '',
+
+
+            componentList:[]
         };
     },
 
     //离开当前页面后执行
-    destroyed: function() {
+    destroyed: function () {
         //console.log("离开当前页")
         //   client.publish('msg_stream',JSON.stringify({"msg_flag":-1}))
         //client.end();
@@ -420,8 +388,16 @@ export default {
             // }
         }
     },
-    mounted() {},
+    mounted() { },
     methods: {
+        
+        // 数据看板的标签点击
+        // handleClick(tab, event) {
+        //     if(tab._props.name=='second'){
+        //         this.$refs.dataBoardRef.getNEW()
+        //     }
+
+        // },
         /** 创建mqtt */
         createMqtt() {
             //创建链接，接收数据
@@ -573,7 +549,7 @@ export default {
                         } else {
                             this.analysisConfigurationdata = msg;
                         }
-                    } catch (error) {}
+                    } catch (error) { }
                     break;
                 // 树结构
                 case 'stream' + this.number:
@@ -584,7 +560,7 @@ export default {
                         const msg = JSON.parse(temp);
                         //   console.log("msg",msg)
                         document.getElementById('mapModule').contentWindow.getData(JSON.stringify(msg));
-                    } catch (error) {}
+                    } catch (error) { }
                     break;
                 // 控制台输出
                 case 'trajectory' + this.number:
@@ -595,7 +571,7 @@ export default {
                         const msg = JSON.parse(temp);
                         //   console.log("msg",msg)
                         document.getElementById('mapModule').contentWindow.getGuiJi(JSON.stringify(msg));
-                    } catch (error) {}
+                    } catch (error) { }
                     break;
                 // 触发
                 case 'detection' + this.number:
@@ -613,7 +589,7 @@ export default {
                             }
                             document.getElementById('mapModule').contentWindow.getChuFa(JSON.stringify(detId));
                         }
-                    } catch (error) {}
+                    } catch (error) { }
                     break;
                 case 'trigger-' + this.$route.query.id:
                     try {
@@ -623,9 +599,9 @@ export default {
                         const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
                         var detId = [];
                         const msgN = JSON.parse(temp);
-                            // console.log("trigger_msgN",msgN)
+                        // console.log("trigger_msgN",msgN)
                         this.triggerListData = msgN;
-                    } catch (error) {}
+                    } catch (error) { }
                     break;
                 case 'cycle_time-' + this.$route.query.id:
                     try {
@@ -636,7 +612,7 @@ export default {
                         var detId = [];
                         const msgN = JSON.parse(temp);
                         this.cycleTimeData = msgN;
-                    } catch (error) {}
+                    } catch (error) { }
                     break;
                 case 'cycle_statistics-' + this.$route.query.id:
                     try {
@@ -647,7 +623,7 @@ export default {
                         var detId = [];
                         const msgN = JSON.parse(temp);
                         this.cycleStatistics = msgN;
-                    } catch (error) {}
+                    } catch (error) { }
                     break;
             }
             this.receiveNews = '';
@@ -1169,7 +1145,7 @@ export default {
         closeComponentForm() {
             console.log("111")
             this.component = false;
-            
+
             document.getElementById('mapModule').contentWindow.editComponent('');
         },
         closeForm(form) {
@@ -1271,19 +1247,25 @@ export default {
 }
 
 .content-box::-webkit-scrollbar {
-    display: none; /* Chrome Safari */
+    display: none;
+    /* Chrome Safari */
 }
+
 .new-dialog {
     width: 49%;
     height: 11%;
     left: calc(24vw);
     top: 90vh;
-    bottom: 0 /* right:auto;; */;
+    bottom: 0
+        /* right:auto;; */
+    ;
 }
+
 .formBox {
     margin-top: 20px;
     margin-left: 20px;
 }
+
 /* .new-dialog .el-dialog {
     width:100%!important;
         margin: 0vh auto !important;
@@ -1294,13 +1276,17 @@ export default {
     margin: 0 auto 0px !important;
     /* margin-top: 0vh!important; */
 }
+
 .new-dialog .el-dialog__wrapper::-webkit-scrollbar {
-    display: none; /* Chrome Safari */
+    display: none;
+    /* Chrome Safari */
 }
+
 .new-dialog .customWidth {
     width: 100%;
     min-width: 150px;
 }
+
 .mapModuleApp {
     /* width:100%; */
     width: 1600px;
@@ -1308,6 +1294,7 @@ export default {
     display: inline-block;
     border: 1px soild #eee;
 }
+
 .el-drawer.btt,
 .el-drawer.ttb {
     width: 100%;
@@ -1325,11 +1312,13 @@ export default {
     height: 100%;
     width: 100%;
 }
+
 .videoAnalysis {
     position: absolute;
     right: 200px;
     top: 17px;
 }
+
 .trafficAnalysis {
     position: absolute;
     right: 100px;