20230224

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;"
+                    style="width: 10px;height:10px;border-radius: 50%;background-color: #3297ff;display: inline-block;vertical-align: middle;margin-right: 8px;"></span>
-                ></span>
+                <span style="font-size:18px;">{{ this.componentName + '-' + this.chartName + '-' + '曲线图' + '-' + status,
-                <span style="font-size:18px;">{{this.componentName + '-' + this.chartName + '-' + '曲线图'+'-'+status, }}</span>
+                                    }}</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,12 +138,13 @@ 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();
             });
         }
@@ -183,9 +186,9 @@ export default {
                             confine: true
                         };
                         this.series[0].name = '总量';
-                    console.log("折线图",newVal)
+                        console.log('折线图', newVal);
                         // 映射出类型数组
-                        let arr = newVal.map(function(ele) {
+                        let arr = newVal.map(function (ele) {
                             if (ele.type_data != null) {
                                 return ele.type_data;
                             }
@@ -196,23 +199,32 @@ export default {
                                 mapN.push(arr[t][i]);
                             }
                         }
-                        var lineArr = [];
+                        var lineArr = [{
-                        // 遍历需要多少条类型折线
+                            name: '机动车',
-                        if (this.typeValue) {
+                            type: 'line',
-                            console.log("this.typeValue.type_data",this.typeValue.type_data)
+                            data: [],
-                          if (this.typeValue.type_data!=undefined) {  
+                            smooth: true
-                            this.typeValue.type_data.forEach(ele => {
+                        }, {
-                                lineArr.push({
+                            name: '非机动车',
-                                    name: ele.name,
+                            type: 'line',
-                                    type: 'line',
+                            data: [],
-                                    data: [],
+                            smooth: true
-                                    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
+                        //         });
+                        //     });
+                        // }
                         mapN.forEach(ele => {
                             if (ele.name == '机动车') {
                                 lineArr[0].data.push(ele.quantity);
@@ -227,9 +239,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);
@@ -257,7 +269,7 @@ export default {
                             return ele.in_flow + ele.out_flow;
                         });
                     } else if (this.title == '车头时距') {
-                        console.log("车头时距",newVal)
+                        console.log('车头时距', newVal);
                         this.tooltip = {
                             formatter: '{a} {b}:{c}/s',
                             show: true,
@@ -266,19 +278,21 @@ export default {
                         this.series[0].data = newVal.map(val => {
                             return val.headway;
                         });
-                    } else if (this.title == '排队数') {
+                    } else if (this.title == '排队数' && this.status == '触发') {
-                        console.log("排队数",newVal)
                         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;
                         });
                     } else if (this.title == '延误') {
                         this.series[0].data = newVal.map(val => {
-                              return val.ave_delay;
+                            return val.ave_delay;
                         });
                     } else if (this.title == '拥堵') {
                         this.series[0].data = newVal.map(val => {});
@@ -289,10 +303,13 @@ export default {
                             this.drawLine();
                         });
                     }
+
+                    this.drawLine()
+
                 }
             },
-            immediate: true
+            deep: true
-        },
+        }
     }
 };
 </script>

src/components/chart/regionTable.vue

@@ -14,7 +14,7 @@
 
         <div v-if="msg">
             <!-- 触发 -->
-            <el-table :data="msg" style="width: 100%" v-if="type == '触发' ">
+            <el-table :data="msg" style="width: 100%" v-if="triggerType == '触发' ">
                 <!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column> -->
                 <!-- <el-table-column align="center" prop="graphical_id" label="区域编号"></el-table-column> -->
                 <el-table-column align="center" prop="name" label="区域名称"></el-table-column>
@@ -48,7 +48,7 @@
                 </el-table-column>
                 <el-table-column align="center" prop="speed" label="空间平均速度"></el-table-column>
             </el-table>
-            <el-table :data="msg" style="width: 100%" v-if="type == '周期时刻' ">
+            <el-table :data="msg" style="width: 100%" v-if="triggerType == '周期时刻' ">
                 <!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column> -->
                 <!-- <el-table-column align="center" prop="graphical_id" label="区域编号"></el-table-column> -->
                 <el-table-column align="center" prop="name" label="区域名称"></el-table-column>
@@ -83,7 +83,7 @@
                 <el-table-column align="center" prop="speed" label="空间平均速度"></el-table-column>
             </el-table>
             <!-- 周期统计 -->
-            <el-table :data="msg" style="width: 100%" v-if="type == '周期统计'">
+            <el-table :data="msg" style="width: 100%" v-if="triggerType == '周期统计'">
                 <!-- <el-table-column align="center" prop="zone_id" label="区域编号"></el-table-column> -->
                 <el-table-column align="center" prop="name" label="区域名称"></el-table-column>
                 <el-table-column align="center" prop="time" label="时间戳"></el-table-column>
@@ -161,7 +161,7 @@ export default {
                 return [];
             }
         },
-        type: {
+        triggerType: {
             type: String
         },
     },

src/components/chart/tableShow.vue

@@ -13,7 +13,7 @@
 
         <!-- 触发 -->
         <div v-if="msg">
-            <el-table :data="msg" style="width: 100%" v-if="type == '触发'">
+            <el-table :data="msg" style="width: 100%" v-if="triggerType == '触发'">
                 <!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column>
                 <el-table-column align="center" prop="zone_id" label="区域编号"></el-table-column> -->
                 <el-table-column align="center" prop="name" label="区域名称"></el-table-column>
@@ -47,7 +47,7 @@
 
 
             <!-- 周期统计 -->
-            <el-table :data="msg" style="width: 100%" v-if="type == '周期统计'">
+            <el-table :data="msg" style="width: 100%" v-if="triggerType == '周期统计'">
                 <el-table-column align="center" prop="gate_id" label="断面编号"></el-table-column>
                 <el-table-column align="center" prop="name" label="断面名称"></el-table-column>
                 <el-table-column align="center" prop="timestamp" label="时间戳"></el-table-column>
@@ -128,7 +128,7 @@ export default {
                 return [];
             }
         },
-        type: {
+        triggerType: {
             type: String
         }
     },

src/components/target/typeChart.vue

@@ -1,15 +1,14 @@
-<template
+<template><!-- 触发类型 -->
-    ><!-- 触发类型 -->
+    <div class="setion">
-    <div class="setion" v-if="isRefer">
         <p class="chartTitle"><span class="titleIcon"></span> {{ componentName }} {{ triggerType }}</p>
         <!-- 触发数据数值渲染 -->
         <div class="typeContent" v-if="triggerType == '触发' || '周期时刻'">
             <div v-if="dataArr && dataArr.length != 0 && dataArr!=undefined">
                 <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
+                            <span style="font-size: 15px;">{{ n.name }}</span><br />
-                            ><br />
                             <span style="font-size: 30px; font-weight: bold">{{ n.quantity }}</span>
                         </div>
                         <div>
@@ -77,10 +76,10 @@
                 </div>
             </div>
             <div v-if="pageType == '断面'" style="margin-bottom: 20px; border: 1px solid #e4e7ed">
-                <tableShow :msg="dataArr" :type="triggerType" />
+                <tableShow :msg="dataArr" :triggerType="triggerType" />
             </div>
             <div v-if="pageType == '区域'">
-                <regionTable :msg="dataArr" :type="triggerType" />
+                <regionTable :msg="dataArr" :triggerType="triggerType" />
             </div>
         </div>
         <div class="border" v-if="echartArr.includes('曲线图')">
@@ -98,40 +97,18 @@
         </div>
         <div class="border" v-if="echartArr.includes('饼状图')">
             <detailDialog />
-            <pieChart
+            <pieChart :componentName="componentName" :chartName="chartName" :pageType="pageType" :list="dataArr"
-                :componentName="componentName"
+                :status="triggerType" :title="title" :typeValue="typeValue" />
-                :chartName="chartName"
-                :pageType="pageType"
-                :list="dataArr"
-                :status="triggerType"
-                :title="title"
-                :typeValue="typeValue"
-            />
         </div>
         <div class="border" v-if="echartArr.includes('均值图')">
             <detailDialog />
-            <avgChart
+            <avgChart ref="avgRefChart" :componentName="componentName" :chartName="chartName" :pageType="pageType"
-                ref="avgRefChart"
+                :list="dataArr" :status="triggerType" :title="title" :typeValue="typeValue" />
-                :componentName="componentName"
-                :chartName="chartName"
-                :pageType="pageType"
-                :list="dataArr"
-                :status="triggerType"
-                :title="title"
-                :typeValue="typeValue"
-            />
         </div>
         <div class="border" v-if="echartArr.includes('直方图')">
             <detailDialog />
-            <barChart
+            <barChart :componentName="componentName" :chartName="chartName" :pageType="pageType" :list="dataArr"
-                :componentName="componentName"
+                :status="triggerType" :title="title" :typeValue="typeValue" />
-                :chartName="chartName"
-                :pageType="pageType"
-                :list="dataArr"
-                :status="triggerType"
-                :title="title"
-                :typeValue="typeValue"
-            />
         </div>
     </div>
 </template>
@@ -171,7 +148,9 @@ export default {
             queue:'',
         };
     },
-    created() {},
+    created() { 
+       
+    },
     methods: {
         // 计算类型的数值
         getNewQueue(dataArr){
@@ -194,7 +173,7 @@ export default {
     },
 
     computed: {},
-    mounted() {},
+    mounted() { },
     watch: {
         // 监听触发数据
         dataArr: {
@@ -230,6 +209,7 @@ export default {
     margin-bottom: 5px;
     padding: 8px;
 }
+
 .typeContent {
     box-sizing: border-box;
 }

src/views/AnalysisMain.vue

@@ -528,6 +528,7 @@ destroyed: function () {
                             });
                         }) 
                 this.videoList=arr
+                this.videoTypeForm.videoType = this.videoList[0].type
                 if(this.videoList.length=='0'){
                     this.videoTypeShow = true
                 }else{

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'">
@@ -371,8 +371,11 @@ export default {
             typeCycleStatistics: {}
         };
     },
+    // beforeCeated(){
+
+    // },
     created() {
-        this.getNew()
+        // this.getNew()
     },
     methods: {
         getNew(){
@@ -386,8 +389,8 @@ export default {
         });
         },
         siftData() {
-            // this.sectionArr=[]
+            this.sectionArr=[]
-            // this.sectionData=[]
+            this.sectionData=[]
             this.componentList.forEach(val => {
                 // var newSectionArr = []
                 // newSectionArr.push(val.combinationName)
@@ -408,8 +411,6 @@ export default {
                 });
                 return item;
             });
-            console.log( "this.sectionData",this.sectionData)
-            // = newSectionData
 
         },
         // 组件图标点击下拉事件
@@ -433,19 +434,19 @@ export default {
                 }
             }
         },
-        channge(oldVal, newVal){
+        // channge(oldVal, newVal){
-            console.log("old",oldVal)
+        //     console.log("old",oldVal)
-            console.log("newVal",newVal)
+        //     console.log("newVal",newVal)
-            if(oldVal=='second'){
+        //     if(oldVal=='second'){
-                this.sectionArr=[]
+        //         this.sectionArr=[]
-            this.sectionData=[]
+        //     this.sectionData=[]
-                this.getNew()
+        //         this.getNew()
-            }else if(newVal=='second'){
+        //     }else if(newVal=='second'){
-                this.sectionArr=[]
+        //         this.sectionArr=[]
-            this.sectionData=[]
+        //     this.sectionData=[]
-                  this.getNew()
+        //           this.getNew()
-            }
+        //     }
-        }
+        // }
 
         // 触发数据的类型数值
     },
@@ -456,7 +457,7 @@ export default {
             handler(newVal, oldVal) {},
             immediate: true
         },
-        activeName:'channge',
+        // activeName:'channge',
         // 处理过的触发数据
         triggerListData: {
             handler(newVal) {
@@ -492,8 +493,7 @@ export default {
         cycleTimeData: {
             handler(newVal) {
                 // 监听到打印周期时刻数据
-                console.log(newVal, '440');
+                if (newVal.length != 0 && this.sectionData) {
-                if (newVal.length != 0) {
                     this.componentList.forEach(ele => {
                         if (ele.cycleTimeData == undefined && ele.timeMode == '周期时刻') {
                             ele.cycleTimeData = [];
@@ -529,9 +529,8 @@ export default {
         // }
         cycleStatisticsData: {
             handler(newVal) {
-                console.log(newVal, '周期统计');
 
-                if (newVal.length != 0) {
+                if (newVal.length != 0 && this.sectionData) {
                     this.componentList.forEach(ele => {
                         if (ele.cycleStatisticsData == undefined && ele.timeMode == '周期统计') {
                             ele.cycleStatisticsData = [];

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" @tab-click="handleClick">
                 <el-tab-pane :label="titName" name="first">
                     <div class="mapModuleApp">
-                        <iframe
+                        <iframe id="mapModule" src="./VideoWeb/index.html" frameborder="0" style="width: 100%; height:100%;"
-                            id="mapModule"
+                            scrolling="no" v-if="videoUnityShow"></iframe>
-                            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
+                    <dataBoard ref="dataBoardRef" :activeName="activeName" :triggerData="triggerData" :triggerListData="triggerListData"
-                        :activeName="activeName"
+                        :cycleTimeData="cycleTimeData" :cycleStatisticsData="cycleStatisticsData" ></dataBoard>
-                        :triggerData="triggerData"
-                        :triggerListData="triggerListData"
-                        :cycleTimeData="cycleTimeData"
-                        :cycleStatisticsData="cycleStatisticsData"
-                    ></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
+            <el-button class="trafficAnalysis" type="primary" plain size="mini" @click="trafficAnalysisBtn"
-                class="trafficAnalysis"
+                v-if="trafficAnalysisShow" :disabled="disabledTrafficAnalysis">交通分析</el-button>
-                type="primary"
-                plain
-                size="mini"
-                @click="trafficAnalysisBtn"
-                v-if="trafficAnalysisShow"
-                :disabled="disabledTrafficAnalysis"
-                >交通分析</el-button
-            >
         </div>
-        <el-drawer
+        <el-drawer class="new-dialog" :visible.sync="dialogFormVisible" direction="btt" custom-class="demo-drawer"
-            class="new-dialog"
+            ref="drawer" :modal="false" :close-on-click-modal="false" v-alterELDialogMarginTop="{ marginTop: '0vh' }"
-            :visible.sync="dialogFormVisible"
+            width="100%" :wrapperClosable="false" :with-header="false" size="100%">
-            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-dialog :title="componentTitle + '指标组件'" width="40%" :visible.sync="component" :close-on-click-modal="false"
-            <el-form ref="form" :model="componentForm" label-width="150px" >
+            @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
+                <el-form-item label="数值筛选：" v-if="
-                    label="数值筛选："
+                    componentForm.componentType != 'OD' &&
-                    v-if="
+                    componentForm.componentType != '类型' &&
-                        componentForm.componentType != 'OD' &&
+                    componentForm.componentType != '流量'
-                            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,16 @@
                 </el-form-item>
                 <el-form-item label="时间模式：">
                     <el-select v-model="componentForm.timeMode" placeholder="请选择时间模式">
-                        <el-option
+                        <el-option label="触发" value="触发"
-                            label="触发"
+                            v-if="componentForm.componentType != '延误' && componentForm.componentType != '拥堵'"></el-option>
-                            value="触发"
+                        <el-option label="周期时刻" value="周期时刻" v-if="
-                            v-if="componentForm.componentType != '延误' && componentForm.componentType != '拥堵'"
+                            componentForm.componentType != '排队数' &&
-                        ></el-option>
+                            componentForm.componentType != '检测数' &&
-                        <el-option
+                            componentForm.componentType != '延误' &&
-                            label="周期时刻"
+                            componentForm.componentType != '拥堵' &&
-                            value="周期时刻"
+                            componentForm.componentType != '流量'&&
-                            v-if="
+                            componentForm.componentType != '流量'
-                                componentForm.componentType != '排队数' &&
+                        "></el-option>
-                                    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>
@@ -147,7 +109,9 @@
                             <el-option label="分钟" value="分钟"></el-option>
                             <el-option label="小时" value="小时"></el-option>
                         </el-select>
-                        <el-slider v-model="componentForm.cycleInterval" :max="max"> </el-slider>
+                        <!-- <el-slider v-model="componentForm.cycleInterval" :max="max" :min="min"> </el-slider> -->
+                         <el-slider v-model="componentForm.cycleInterval" :max="100" :min="1" v-if="componentForm.company != '小时'"> </el-slider>
+                         <el-slider v-model="componentForm.cycleInterval" :max="24" :min="1" v-if="componentForm.company == '小时'"> </el-slider>
                     </div>
                 </el-form-item>
                 <!-- <el-form-item label="单位：" ></el-form-item> -->
@@ -168,11 +132,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"
-                        <el-checkbox label="饼状图" name="presentation" v-if="componentForm.componentType == '类型'"></el-checkbox>
+                            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 != '拥堵' || 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>
@@ -214,7 +182,8 @@ var client;
 export default {
     data() {
         return {
-            max: '',
+            max:'100',
+            min:'1',
             receiveNews: '',
             topicSends: ['img0', 'stream0', 'trajectory0', 'detection0'],
             trajectory: false, //轨迹
@@ -280,7 +249,7 @@ export default {
                 componentName: '',
                 componentParameterId: '01888e05fac246b29e3a19a27c3d2ab0',
                 //周期间隔
-                cycleInterval: '',
+                cycleInterval: 1,
                 startSectionIds: '',
                 startSectionNames: '',
                 endSectionIds: '',
@@ -370,12 +339,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 +392,18 @@ export default {
             // }
         }
     },
-    mounted() {},
+    mounted() { },
     methods: {
+        
+        // 数据看板的标签点击
+        handleClick: function(tab, event) {
+            var that = this
+            if(tab._props.name=='second'){
+                that.$nextTick(()=>{ 
+                    that.$refs.dataBoardRef.getNew()
+                 }) 
+            }
+        },
         /** 创建mqtt */
         createMqtt() {
             //创建链接，接收数据
@@ -573,7 +555,7 @@ export default {
                         } else {
                             this.analysisConfigurationdata = msg;
                         }
-                    } catch (error) {}
+                    } catch (error) { }
                     break;
                 // 树结构
                 case 'stream' + this.number:
@@ -584,7 +566,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 +577,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 +595,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 +605,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 +618,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 {
@@ -646,8 +628,8 @@ export default {
                         const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
                         var detId = [];
                         const msgN = JSON.parse(temp);
-                        this.cycleStatistics = msgN;
+                        this.cycleStatisticsData = msgN;
-                    } catch (error) {}
+                    } catch (error) { }
                     break;
             }
             this.receiveNews = '';
@@ -718,7 +700,7 @@ export default {
                         }
                     }
                     this.componentForm.componentParameterId = res.data.data.componentParameterId;
-                    this.componentForm.cycleInterval = res.data.data.cycleInterval;
+                    this.componentForm.cycleInterval = parseInt(res.data.data.cycleInterval);
                     this.componentForm.startSectionIds = res.data.data.startSectionIds;
                     // this.componentForm.FlowType = res.data.data.flowType;
                     this.componentForm.startSectionNames = res.data.data.startSectionNames;
@@ -820,7 +802,9 @@ export default {
                         }
                         this.componentForm.componentName = res.data.data.componentName;
                         this.componentForm.componentParameterId = res.data.data.componentParameterId;
-                        this.componentForm.cycleInterval = res.data.data.cycleInterval;
+                        this.componentForm.cycleInterval = parseInt(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;
@@ -1271,19 +1255,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 +1284,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 +1302,7 @@ export default {
     display: inline-block;
     border: 1px soild #eee;
 }
+
 .el-drawer.btt,
 .el-drawer.ttb {
     width: 100%;
@@ -1325,11 +1320,13 @@ export default {
     height: 100%;
     width: 100%;
 }
+
 .videoAnalysis {
     position: absolute;
     right: 200px;
     top: 17px;
 }
+
 .trafficAnalysis {
     position: absolute;
     right: 100px;