From 0f21d854398923bdb531eb4d8e31a054fb08b5e0 Mon Sep 17 00:00:00 2001
From: Hobart <kolusai@hotmail.com>
Date: Tue, 21 Feb 2023 19:01:06 +0800
Subject: [PATCH] bug

---
 src/components/chart/avgChart.vue   | 144 ++++++-----
 src/components/chart/barChart.vue   | 118 +++++----
 src/components/chart/lineChart.vue  |  37 ++-
 src/components/chart/pieChart.vue   |  56 +++--
 src/components/target/typeChart.vue | 123 +++++----
 src/views/bounced/dataBoard.vue     |  14 +-
 src/views/index.vue                 | 377 +++++++++++++++-------------
 7 files changed, 485 insertions(+), 384 deletions(-)

diff --git a/src/components/chart/avgChart.vue b/src/components/chart/avgChart.vue
index 31a17156..a456efe1 100644
--- a/src/components/chart/avgChart.vue
+++ b/src/components/chart/avgChart.vue
@@ -1,5 +1,15 @@
 <template>
-    <div id="barChart" ref="barChart" style="width: 100%; height: 300px"></div>
+    <div style="width: 100%;margin-top: 5px;">
+        <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;">{{ componentName + '-' + chartName + '-' + '均值图' }}</span>
+            </div>
+        </div>
+        <div id="barChart" ref="barChart" style="width: 100%; height: 300px"></div>
+    </div>
 </template>
 
 <script>
@@ -10,10 +20,17 @@ export default {
             type: Array,
             default() {
                 return [];
-            },
+            }
         },
         typeValue: {
-            type:Object,
+            type: Object
+        },
+        // 组件名称
+        componentName: {
+            type: String
+        },
+        chartName: {
+            type: String
         }
     },
     data() {
@@ -21,23 +38,14 @@ export default {
     },
     methods: {
         drawBar(arr) {
-            let myChart = this.$echarts.getInstanceByDom(this.$refs.barChart)
+            let myChart = this.$echarts.getInstanceByDom(this.$refs.barChart);
             if (myChart == null) {
-                myChart = this.$echarts.init(this.$refs.barChart)
+                myChart = this.$echarts.init(this.$refs.barChart);
             }
-            let chartData = [{ stage: '值', number: 40 }];
+            let chartData = [{ stage: '', number: 40 }];
             let option = {
+                tooltip: {},
                 color: ['#0EECE4'],
-                tooltip: {
-                    // trigger: 'axis',
-                    confine: true
-                    // axisPointer: { // 坐标轴指示器，坐标轴触发有效
-                    //   type: 'line', // 默认为直线，可选为：'line' | 'shadow'
-                    //   lineStyle: {
-                    //     color: 'transparent',
-                    //   },
-                    // },
-                },
                 grid: {
                     left: '0%',
                     right: '0%',
@@ -49,7 +57,7 @@ export default {
                     {
                         type: 'category',
                         gridIndex: 0,
-                        data: chartData.map((item) => item.stage),
+                        data: chartData.map(item => item.stage),
                         axisLine: {
                             show: false
                         },
@@ -79,6 +87,24 @@ export default {
                     max: 200
                 },
                 series: [
+                    {
+                        name: '外框',
+                        type: 'bar',
+                        barGap: '-120%', // 设置外框粗细
+                        data: [300],
+                        barWidth: 150,
+                        itemStyle: {
+                            normal: {
+                                color: 'rgba(0,0,0,.1)', // 填充色
+                                barBorderWidth: 1, // 边框宽度
+                                label: {
+                                    // 标签显示位置
+                                    show: false
+                                }
+                            }
+                        },
+                        z: 1
+                    },
                     {
                         name: '平均值',
                         type: 'bar',
@@ -89,107 +115,113 @@ export default {
                         label: {
                             show: true,
                             position: 'right',
-                            // align: 'right',
+                            // offset: [10, 20],
                             distance: 15,
                             color: '#000',
                             fontSize: 17,
                             formatter: '{c}' + '[avg]'
                         },
                         itemStyle: {
-                            color: '#DF8414'
+                            color: '#89c6ff'
                         },
-                        data: [10],
-                        zlevel: 11
+                        data: [arr.avg],
+                        zlevel: 9
                     },
                     {
                         name: '中间值',
                         type: 'bar',
                         barWidth: 150,
-                        // xAxisIndex: 0,
-                        // yAxisIndex: 0,
                         stack: 'val',
                         label: {
                             show: true,
                             position: 'left',
                             distance: 15,
                             color: '#000',
-                            // align: 'left',
                             fontSize: 17,
                             formatter: '{c}' + '[med]',
                             rich: {}
                         },
                         itemStyle: {
-                            color: '#0E76AF'
+                            color: '#67b4fd'
                         },
-                        data: [30],
-                        zlevel: 11
+                        data: [arr.med],
+                        zlevel: 9
                     },
+
                     {
-                        name: '最小值',
+                        name: '最大值',
                         type: 'bar',
+                        stack: 'val',
                         barWidth: 150,
                         barGap: '-100%',
-                        data: [20],
+                        data: [arr.max],
                         label: {
                             show: true,
-                            position: 'bottom',
+                            position: 'right',
                             distance: 10,
                             color: '#000',
                             fontSize: 17,
-                            formatter: '{c}' + '[min]'
-                        },
-                        tooltip: {
-                            backgroundColor: 'transparent',
-                            formatter: ' '
+                            offset: [0, -30],
+                            formatter: '{c}' + '[max]'
                         },
                         itemStyle: {
-                            color: '#ABA7A7'
+                            color: '#319cff'
                         },
                         zlevel: 9
                     },
                     {
-                        name: '最大值',
+                        name: '最小值',
                         type: 'bar',
+                        stack: 'val',
                         barWidth: 150,
                         barGap: '-100%',
-                        data: [200],
+                        data: [arr.min],
                         label: {
+                            offset: [10, 20],
                             show: true,
-                            position: 'top',
-                            distance: 15,
+                            position: 'left',
+                            distance: 10,
                             color: '#000',
+                            offset: [0, -30],
                             fontSize: 17,
-                            formatter: '{c}' + '[max]'
-                        },
-                        tooltip: {
-                            backgroundColor: 'transparent',
-                            formatter: ' '
+                            formatter: '{c}' + '[min]'
                         },
+                        // tooltip: {
+                        //     backgroundColor: 'transparent',
+                        //     formatter: ' '
+                        // },
                         itemStyle: {
-                            color: '#ABA7A7'
+                            color: '#328adc'
                         },
                         zlevel: 9
                     }
                 ]
             };
-
             myChart.setOption(option);
-            window.addEventListener('resize', function () {
+            window.addEventListener('resize', function() {
                 myChart.resize();
             });
         }
     },
     mounted() {
-        this.drawBar()
+        this.drawBar(this.typeValue);
     },
     watch: {
-        // typeValue: {
-        //     handler(newVal) {
-        //         if (newVal) {
-        //             this.drawBar(newVal);
-        //         }
-        //     }
-        // }
+        typeValue: {
+            handler(newVal) {
+                if (newVal) {
+                    this.drawBar(newVal);
+                }
+            },
+            deep: true
+        }
     }
 };
 </script>
+<style>
+.tableTitle {
+    background: #f7f8fa;
+    margin-bottom: 5px;
+    padding: 8px;
+}
+</style>
diff --git a/src/components/chart/barChart.vue b/src/components/chart/barChart.vue
index 063060f4..73f1b97f 100644
--- a/src/components/chart/barChart.vue
+++ b/src/components/chart/barChart.vue
@@ -1,14 +1,24 @@
 <template>
-    <div id="barChart" ref="barChart" style="width:100%;height:300px;"></div>
+    <div style="width: 100%;margin-top: 5px;">
+        <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;">{{ componentName + '-' + chartName + '-' + '柱状图' }}</span>
+            </div>
+        </div>
+        <div id="barChart" ref="barChart" style="width:100%;height:300px;"></div>
+    </div>
 </template>
-  
+
 <script>
 export default {
     name: 'barChart', //饼图组件
     props: {
         list: Array,
         default() {
-            return []
+            return [];
         },
         pageType: {
             type: String
@@ -33,51 +43,42 @@ export default {
         return {
             xData: [],
             yData: []
-        }
-    },
-    created() {
+        };
     },
+    created() {},
     methods: {
         drawBar() {
-
-            let myChart = this.$echarts.getInstanceByDom(this.$refs.barChart)
+            let myChart = this.$echarts.getInstanceByDom(this.$refs.barChart);
             if (myChart == null) {
-                myChart = this.$echarts.init(this.$refs.barChart)
+                myChart = this.$echarts.init(this.$refs.barChart);
             }
             let option = {
                 color: ['#7262FD', '#FC5A5A'],
-                title: {
-                    show: true,
-                    text: this.componentName + '-' + this.chartName + '-' + '柱状图',
-                    textStyle: {
-                        lineHeight: '30',
-                    }
-                },
                 tooltip: {
-                    confine: true,
+                    confine: true
                 },
                 grid: {
                     left: '2%',
                     right: '4%',
                     bottom: '10%',
                     top: '20%',
-                    containLabel: true,
+                    containLabel: true
                 },
                 xAxis: {
                     type: 'category',
                     data: this.xData,
                     axisLine: {
                         lineStyle: {
-                            color: '#000',
-                        },
+                            color: '#000'
+                        }
                     },
                     axisLabel: {
                         fontSize: 12,
-                        color: '#000',
+                        color: '#000'
                     },
                     axisTick: {
-                        show: false,
-                    },
+                        show: false
+                    }
                 },
                 yAxis: [
                     {
@@ -85,70 +86,67 @@ export default {
                         min: 0,
                         minInterval: 1,
                         splitArea: {
-                            show: false,
+                            show: false
                         },
 
                         axisLine: {
-                            show: true,
+                            show: true
                         },
                         axisTick: {
-                            show: false,
+                            show: false
                         },
                         splitLine: {
                             lineStyle: {
                                 color: '#eeebeb',
-                                type: 'dashed', // dotted 虚线
-                            },
+                                type: 'dashed' // dotted 虚线
+                            }
                         },
                         axisLabel: {
                             fontSize: 12,
                             color: '#000',
-                            fontFamily: 'Bebas',
-                        },
-                    }],
-                series: [{
-                    type: 'bar',
-                    barWidth: 20,
-                    itemStyle: { barBorderRadius: [5, 5, 0, 0], },
-                    name: '时间',
-                    data: this.yData
-                },
+                            fontFamily: 'Bebas'
+                        }
+                    }
                 ],
+                series: [
+                    {
+                        type: 'bar',
+                        barWidth: 20,
+                        itemStyle: { barBorderRadius: [5, 5, 0, 0] },
+                        name: '时间',
+                        data: this.yData
+                    }
+                ]
             };
-            myChart.setOption(option)
-            // window.onresize = () => {  // 根据窗口大小变化图表自适应
-            //     myChart.resize();
-            // };
-            window.addEventListener('resize', function () {
-                myChart.resize()
-            }
-            )
-        },
+            myChart.setOption(option);
+            window.addEventListener('resize', function() {
+                myChart.resize();
+            });
+        }
     },
     mounted() {
         this.xData = this.typeValue.type_data.map(ele => {
-            return ele.name
-        })
+            return ele.name;
+        });
         this.yData = this.typeValue.type_data.map(ele => {
-            return ele.quantity
-        })
-        this.drawBar()
+            return ele.quantity;
+        });
+        this.drawBar();
     },
     watch: {
         typeValue: {
             handler(newVal) {
                 if (newVal) {
                     this.xData = newVal.type_data.map(ele => {
-                        return ele.name
-                    })
+                        return ele.name;
+                    });
                     this.yData = newVal.type_data.map(ele => {
-                        return ele.quantity
-                    })
-                    this.drawBar()
+                        return ele.quantity;
+                    });
+                    this.drawBar();
                 }
             }
-
         }
     }
-}
-</script>
\ No newline at end of file
+};
+</script>
diff --git a/src/components/chart/lineChart.vue b/src/components/chart/lineChart.vue
index 68b84b8d..b3a21181 100644
--- a/src/components/chart/lineChart.vue
+++ b/src/components/chart/lineChart.vue
@@ -1,5 +1,15 @@
 <template>
-    <div id="lineChart" ref="lineChart" style="width: 100%; height: 300px"></div>
+    <div style="width: 100%;margin-top: 5px;">
+        <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 + '-' + '曲线图', }}</span>
+            </div>
+        </div>
+        <div id="lineChart" ref="lineChart" style="width: 100%; height: 300px"></div>
+    </div>
 </template>
 
 <script>
@@ -41,7 +51,6 @@ export default {
         return {
             xData: [],
             yData: [],
-
             yData1: [],
             yData2: [],
             yData3: [],
@@ -65,13 +74,13 @@ export default {
                 myChart = this.$echarts.init(this.$refs.lineChart);
             }
             let option = {
-                title: {
-                    show: true,
-                    text: this.componentName + '-' + this.chartName + '-' + '曲线图',
-                    textStyle: {
-                        lineHeight: '30'
-                    }
-                },
+                // title: {
+                //     show: true,
+                //     text: this.componentName + '-' + this.chartName + '-' + '曲线图',
+                //     textStyle: {
+                //         lineHeight: '30'
+                //     }
+                // },
                 legend: {},
                 grid: {
                     left: '2%',
@@ -265,7 +274,7 @@ export default {
                     }
                     if (this.$refs.lineChart) {
                         this.$nextTick(() => {
-                            // this.drawLine();
+                            this.drawLine();
                         });
                     }
                 }
@@ -278,4 +287,10 @@ export default {
     }
 };
 </script>
-<style scoped></style>
+<style scoped>
+.tableTitle {
+    background: #f7f8fa;
+    margin-bottom: 5px;
+    padding: 8px;
+}
+</style>
diff --git a/src/components/chart/pieChart.vue b/src/components/chart/pieChart.vue
index 67a169b2..1685c8fb 100644
--- a/src/components/chart/pieChart.vue
+++ b/src/components/chart/pieChart.vue
@@ -1,5 +1,15 @@
 <template>
-    <div id="pieChart" ref="pieChart" style="width:100%;height:300px;"></div>
+    <div style="width: 100%;margin-top: 5px;">
+        <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 + '-' + '饼状图', }}</span>
+            </div>
+        </div>
+        <div id="pieChart" ref="pieChart" style="width:100%;height:300px;"></div>
+    </div>
 </template>
 
 <script>
@@ -43,7 +53,7 @@ export default {
             ]
         };
     },
-    created() { },
+    created() {},
     methods: {
         drawPie() {
             let myChart = this.$echarts.getInstanceByDom(this.$refs.pieChart);
@@ -52,13 +62,13 @@ export default {
             }
             var color = ['#0CD2E6', '#3751E6', '#FFC722'];
             let option = {
-                title: {
-                    show: true,
-                    text: this.componentName + '-' + this.chartName + '-' + '饼状图',
-                    textStyle: {
-                        lineHeight: '30'
-                    }
-                },
+                // title: {
+                //     show: true,
+                //     text: this.componentName + '-' + this.chartName + '-' + '饼状图',
+                //     textStyle: {
+                //         lineHeight: '30'
+                //     }
+                // },
                 color: color,
                 legend: {
                     top: 20,
@@ -105,21 +115,21 @@ export default {
             // window.onresize = () => {  // 根据窗口大小变化图表自适应
             //     myChart.resize();
             // };
-            window.addEventListener('resize', function () {
+            window.addEventListener('resize', function() {
                 myChart.resize();
             });
         }
     },
     mounted() {
-        // if (this.typeValue) {
-        //     this.typeValue.type_data.forEach(ele => {
-        //         this.seriesData.push({
-        //             name: ele.name,
-        //             value: ele.quantity
-        //         });
-        //     });
-        // }
-        this.drawPie();
+        if (this.typeValue) {
+            this.typeValue.type_data.forEach(ele => {
+                this.seriesData.push({
+                    name: ele.name,
+                    value: ele.quantity
+                });
+            });
+            this.drawPie();
+        }
     },
     watch: {
         // 监听单个的数据
@@ -143,4 +153,10 @@ export default {
     }
 };
 </script>
-<style scoped></style>
+<style scoped>
+.tableTitle {
+    background: #f7f8fa;
+    margin-bottom: 5px;
+    padding: 8px;
+}
+</style>
diff --git a/src/components/target/typeChart.vue b/src/components/target/typeChart.vue
index 896053e1..3a4b3ce9 100644
--- a/src/components/target/typeChart.vue
+++ b/src/components/target/typeChart.vue
@@ -1,15 +1,15 @@
-<template><!-- 触发类型 -->
+<template
+    ><!-- 触发类型 -->
     <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">
                 <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>
@@ -34,27 +34,19 @@
                     </div>
                     <div style="font-size: 30px; font-weight: bold" v-if="title == '流量'">
                         <span style="font-size: 15px;">流量</span><br />
-                        <span style="font-size: 30px; font-weight: bold">{{
-                            typeValue.flow
-                        }}</span>
+                        <span style="font-size: 30px; font-weight: bold">{{ typeValue.flow }}</span>
                     </div>
                     <div style="font-size: 30px; font-weight: bold" v-if="title == '车头时距'">
                         <span style="font-size: 15px;">车头时距</span><br />
-                        <span style="font-size: 30px; font-weight: bold">{{
-                            typeValue.heavy
-                        }}</span>
+                        <span style="font-size: 30px; font-weight: bold">{{ typeValue.heavy }}</span>
                     </div>
                     <div style="font-size: 30px; font-weight: bold" v-if="title == '排队数'">
                         <span style="font-size: 15px;">排队数</span>
-                        <span style="font-size: 30px; font-weight: bold">{{
-                            typeValue.n_queue
-                        }}</span>
+                        <span style="font-size: 30px; font-weight: bold">{{ typeValue.n_queue }}</span>
                     </div>
                     <div style="font-size: 30px; font-weight: bold" v-if="title == '检测数'">
                         <span style="font-size: 15px;">检测数</span>
-                        <span style="font-size: 30px; font-weight: bold">{{
-                            typeValue.n_stay
-                        }}</span>
+                        <span style="font-size: 30px; font-weight: bold">{{ typeValue.n_stay }}</span>
                     </div>
                     <div>
                         <div>
@@ -66,13 +58,14 @@
                     <el-empty :image-size="100"></el-empty>
                 </div>
             </el-card>
-
         </div>
         <div v-show="echartArr.includes('表格')">
             <div class="tableTitle">
-                <div class="">
-                    <span style="width: 10px;height:10px;border-radius: 50%;background-color: #3297ff;display: inline-block;vertical-align: middle;"></span>
-                    <span>{{ this.chartName+ '-' + this.componentName + '-' + '表格'}}</span>
+                <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.chartName + '-' + this.componentName + '-' + '表格' }}</span>
                 </div>
                 <div class="tableTime">
                     {{ typeValue.time }}
@@ -87,28 +80,56 @@
         </div>
         <div class="border" v-if="echartArr.includes('曲线图')">
             <detailDialog />
-            <lineChart :componentName="componentName" :chartName="chartName" :pageType="pageType" :list="dataArr"
-                :status="triggerType" :title="title" :typeValue = typeValue />
+            <lineChart
+                :componentName="componentName"
+                :chartName="chartName"
+                :pageType="pageType"
+                :list="dataArr"
+                :status="triggerType"
+                :title="title"
+                :typeValue="typeValue"
+            />
         </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 :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>
+    </div>
 </template>
-  
+
 <script>
 import avgChart from '../chart/avgChart.vue';
 import lineChart from '../chart/lineChart.vue';
@@ -139,40 +160,31 @@ export default {
             flow: 0,
             isRefer: true,
 
-            valueShow:{}
+            valueShow: {}
         };
     },
-    created() {
-
-    },
+    created() {},
     methods: {
         // 计算类型的数值
     },
 
-    computed: {
-
-    },
-    mounted() { },
+    computed: {},
+    mounted() {},
     watch: {
         // 监听触发数据
         dataArr: {
-            handler(newVal) {
-                
-
-            },
+            handler(newVal) {},
 
             immediate: true
         },
-        typeValue:{
-            handler(newVal){
-                this.total = 0
+        typeValue: {
+            handler(newVal) {
+                this.total = 0;
                 if (this.title == '类型') {
-                        newVal.type_data.forEach(ele => {
-                            this.total += ele.quantity
-                        })
+                    newVal.type_data.forEach(ele => {
+                        this.total += ele.quantity;
+                    });
                 }
-                
-                
             }
         }
         // cycleTimeData: {
@@ -184,6 +196,11 @@ export default {
 };
 </script>
 <style scoped>
+.tableTitle {
+    background: #f7f8fa;
+    margin-bottom: 5px;
+    padding: 8px;
+}
 .typeContent {
     box-sizing: border-box;
 }
@@ -193,4 +210,4 @@ export default {
     margin-bottom: 20px;
     position: relative;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/bounced/dataBoard.vue b/src/views/bounced/dataBoard.vue
index bf705e56..38b75598 100644
--- a/src/views/bounced/dataBoard.vue
+++ b/src/views/bounced/dataBoard.vue
@@ -429,10 +429,8 @@ export default {
                                 ele.trigger.pop();
                             } else {
                                 // 该时间的触发数据
-                                if (item.type_data != null) {
-                                    // console.log(item,'461461');
-                                    this.typeValue = item;
-                                }
+                                this.typeValue = item;
+
                                 ele.trigger.unshift(item);
                             }
                         }
@@ -460,10 +458,10 @@ export default {
                                 if (ele.cycleTimeData.length == 10) {
                                     ele.cycleTimeData.slice(ele.cycleTimeData.length - 1, 0);
                                 } else {
-                                    if (item.type_data != null) {
-                                        // 周期时刻的类型数据
-                                        this.typeCycleTimeData = item;
-                                    }
+                                    // if (item.type_data != null) {
+                                    // 周期时刻的类型数据
+                                    this.typeCycleTimeData = item;
+                                    // }
                                     ele.cycleTimeData.unshift(item);
                                 }
                             }
diff --git a/src/views/index.vue b/src/views/index.vue
index 9b2cfee6..3e1800dd 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -15,12 +15,17 @@
                             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>
+                        <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
+                        :activeName="activeName"
+                        :triggerData="triggerData"
+                        :triggerListData="triggerListData"
+                        :cycleTimeData="cycleTimeData"
+                        :cycleStatistics="cycleStatistics"
+                    ></dataBoard>
                 </el-tab-pane>
                 <el-tab-pane label="分析配置" name="third">
                     <analysisConfiguration :analysisConfigurationdata="analysisConfigurationdata"></analysisConfiguration>
@@ -32,8 +37,16 @@
             </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"
@@ -69,7 +82,7 @@
             </div>
         </el-drawer>
         <!-- 组件弹框 -->
-        <el-dialog :title="componentTitle + '指标组件'" width="40%" :visible.sync="component" :close-on-click-modal ="false">
+        <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-item label="名称：">
                     <el-input v-model="componentForm.componentName"></el-input>
@@ -80,31 +93,42 @@
                         <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>
-                 <el-form-item label="流量类型：" v-if="componentForm.componentType=='流量'">
-                    <el-radio-group v-model="componentForm.FlowType" >
-                      <el-radio label="出流"></el-radio>
-                      <el-radio label="入流"></el-radio>
+                <el-form-item label="流量类型：" v-if="componentForm.componentType == '流量'">
+                    <el-radio-group v-model="componentForm.FlowType">
+                        <el-radio label="出流"></el-radio>
+                        <el-radio label="入流"></el-radio>
                     </el-radio-group>
                 </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 != '拥堵'"
+                        ></el-option>
                         <el-option
                             label="周期时刻"
                             value="周期时刻"
                             v-if="
-                                    componentForm.componentType != '排队数' &&
+                                componentForm.componentType != '排队数' &&
                                     componentForm.componentType != '检测数' &&
                                     componentForm.componentType != '延误' &&
-                                    componentForm.componentType != '拥堵'&&
+                                    componentForm.componentType != '拥堵' &&
                                     componentForm.componentType != '流量'
-                            "></el-option>
-                        <el-option label="周期统计" value="周期统计" v-if="componentForm.componentType != 'OD'">
-                        </el-option>
+                            "
+                        ></el-option>
+                        <el-option label="周期统计" value="周期统计" v-if="componentForm.componentType != 'OD'"> </el-option>
                     </el-select>
                 </el-form-item>
                 <!-- <el-form-item label="触发类型：" v-if="componentForm.timeModel=='touch'">
@@ -119,12 +143,9 @@
                     <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-option label="秒" value="秒" v-if="componentForm.timeMode != '周期统计'"></el-option>
-                        <el-option
-                            label="分钟"
-                            value="分钟"
-                            ></el-option>
-                        <el-option label="小时" value="小时" ></el-option>
+                            <el-option label="秒" value="秒" v-if="componentForm.timeMode != '周期统计'"></el-option>
+                            <el-option label="分钟" value="分钟"></el-option>
+                            <el-option label="小时" value="小时"></el-option>
                         </el-select>
                         <el-slider v-model="componentForm.cycleInterval" :max="max"> </el-slider>
                     </div>
@@ -207,8 +228,8 @@ export default {
             dialogFormVisible: false,
             areaComponent: false,
             indexModule: false,
-            disabledTrafficAnalysis:true,
-            disabledVideoAnalysis:false,
+            disabledTrafficAnalysis: true,
+            disabledVideoAnalysis: false,
             //判断模拟区，画布区
             numberNew: 1,
             speed: false,
@@ -276,11 +297,10 @@ export default {
                 componentType: '',
                 typeFiltering: '',
                 typeData: [],
-                FlowType:'出流'
-
+                FlowType: '出流'
             },
             // typeData: ['小汽车', '公交车', '卡车', '非机动车', '行人'],
-            typeData:['机动车','非机动车','行人'],
+            typeData: ['机动车', '非机动车', '行人'],
             //展现形式
             presentation: ['数值', '表格', '时间曲线图', '均值图'],
             trackForm: {
@@ -328,29 +348,29 @@ export default {
             analysisConfigurationdata: {},
             //触发数据
             triggerData: [],
-            triggerListData:[],
+            triggerListData: [],
             //周期时刻
-            cycleTimeData:[],
+            cycleTimeData: [],
             //周期统计
-            cycleStatistics:[],
+            cycleStatistics: [],
             //视频类型
             videoType: '',
             videoAnalysisShow: false,
             trafficAnalysisShow: false,
             //控制unity展示
-            videoUnityShow:true,
-            videoAnalysisSta:'',
-            analysis:{
-                trafficAnalysisPath1:'',
-                trafficAnalysisPath2:'',
-                videoAnalysisPath:'',
-                videoName:'',
-                videoPath:'',
-                videoTotalFrames:'',
-                videoType:'实时视频'
+            videoUnityShow: true,
+            videoAnalysisSta: '',
+            analysis: {
+                trafficAnalysisPath1: '',
+                trafficAnalysisPath2: '',
+                videoAnalysisPath: '',
+                videoName: '',
+                videoPath: '',
+                videoTotalFrames: '',
+                videoType: '实时视频'
             },
-            description:'请等待排队',
-            ipData:''
+            description: '请等待排队',
+            ipData: ''
         };
     },
 
@@ -361,8 +381,8 @@ export default {
         //client.end();
     },
     created() {
-           window.OnScene = this.OnSceneN;
-          this.getAllSectionalData(this.$route.query.id);
+        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;
@@ -371,9 +391,9 @@ export default {
         // window.getModifyTheName = this.getModifyTheNameN;
         window.getSingleComponentId = this.getSingleComponentIdN;
         window.getSimulationAreaEdit = this.getSimulationAreaEdit;
-     
-        window.delSuccess= this.delSuccess;
-        
+
+        window.delSuccess = this.delSuccess;
+
         //  console.log("id",id)
         // console.log("num",num)
         // console.log("name",name)
@@ -383,31 +403,36 @@ export default {
         if (this.$route.query.type == '实时视频') {
             this.videoAnalysisShow = false;
             this.trafficAnalysisShow = false;
-            
+
             this.createMqtt();
-             
+
             // document.getElementById('mapModule').contentWindow.lixianVideo(JSON.stringify(this.analysis));
-        } else if (this.$route.query.type == '离线视频'){
+        } else if (this.$route.query.type == '离线视频') {
             this.videoAnalysisShow = true;
             this.trafficAnalysisShow = true;
-            this.getAnalysisStatus()
+            this.getAnalysisStatus();
             // this.createMqtt();
             // if(this.$route.query.status=='未分析'){
             // }
             // if(this.$route.query.status=='未分析'){
             //     // document.getElementById('mapModule').contentWindow.lixianVideo("实时视频");
             // }else{
-            // }   
+            // }
         }
     },
-    mounted() {
-       
-    },
+    mounted() {},
     methods: {
         /** 创建mqtt */
         createMqtt() {
             //创建链接，接收数据
-            this.topicSends = ['stream' + this.number, 'trajectory' + this.number, 'detection' + this.number,'trigger-'+ this.$route.query.id,'cycle_time-'+ this.$route.query.id,'cycle_statistics-'+ this.$route.query.id];
+            this.topicSends = [
+                'stream' + this.number,
+                'trajectory' + this.number,
+                'detection' + this.number,
+                'trigger-' + this.$route.query.id,
+                'cycle_time-' + this.$route.query.id,
+                'cycle_statistics-' + this.$route.query.id
+            ];
             window.PubScribe(this.topicSends, this.number, this.realInfo);
             //   mqtt = mqttConfig;
             /*mqtt = new mqttConfig(this.topicSends);
@@ -436,34 +461,34 @@ export default {
       });*/
         },
         //获取视频分析，交通分析状态数据
-        getAnalysisStatus(){
+        getAnalysisStatus() {
             getVideoStatus(this.$route.query.id).then(res => {
-                console.log("res.data",res.data)
+                console.log('res.data', res.data);
                 //视频分析状态
-                if(res.data.data.videoAnalysisStatus == '未分析'){
-                     this.disabledTrafficAnalysis= true
-                     this.videoUnityShow = true
-                     this.analysisData()
-                }else if(res.data.data.videoAnalysisStatus == '分析中'){
-                    this.disabledVideoAnalysis= true
-                    this.videoUnityShow = false
-                        setTimeout(() => {
-                        this.getAnalysisStatus()
-                        }, 5000); 
-                }else if(res.data.data.videoAnalysisStatus == '已分析'){
-                    this.videoUnityShow = true
-                    this.videoAnalysisSta = res.data.data.videoAnalysisStatus
-                    this.disabledTrafficAnalysis= false
-                    this.analysisData()
-                     //交通分析状态
-                }else if(res.data.data.trafficAnalysisStatus=='未分析'){
-                    this.disabledVideoAnalysis= true
-                }else if(res.data.data.trafficAnalysisStatus=='分析中'){
-                    this.disabledVideoAnalysis= true
-                     this.disabledTrafficAnalysis= true
-                }else if(res.data.data.videoAnalysisStatus == '已分析'||res.data.data.trafficAnalysisStatus == '已分析'){
-                     this.disabledVideoAnalysis= false
-                     this.disabledTrafficAnalysis= true
+                if (res.data.data.videoAnalysisStatus == '未分析') {
+                    this.disabledTrafficAnalysis = true;
+                    this.videoUnityShow = true;
+                    this.analysisData();
+                } else if (res.data.data.videoAnalysisStatus == '分析中') {
+                    this.disabledVideoAnalysis = true;
+                    this.videoUnityShow = false;
+                    setTimeout(() => {
+                        this.getAnalysisStatus();
+                    }, 5000);
+                } else if (res.data.data.videoAnalysisStatus == '已分析') {
+                    this.videoUnityShow = true;
+                    this.videoAnalysisSta = res.data.data.videoAnalysisStatus;
+                    this.disabledTrafficAnalysis = false;
+                    this.analysisData();
+                    //交通分析状态
+                } else if (res.data.data.trafficAnalysisStatus == '未分析') {
+                    this.disabledVideoAnalysis = true;
+                } else if (res.data.data.trafficAnalysisStatus == '分析中') {
+                    this.disabledVideoAnalysis = true;
+                    this.disabledTrafficAnalysis = true;
+                } else if (res.data.data.videoAnalysisStatus == '已分析' || res.data.data.trafficAnalysisStatus == '已分析') {
+                    this.disabledVideoAnalysis = false;
+                    this.disabledTrafficAnalysis = true;
                 }
             });
         },
@@ -471,56 +496,56 @@ export default {
         videoAnalysisBtn() {
             startVideoAnalysis(this.$route.query.id).then(res => {
                 //
-                if(res.data.msg=='请求成功'){
+                if (res.data.msg == '请求成功') {
                     this.$message({
-                            message: '启动成功',
-                            type: 'success'
-                        });
-                         setTimeout(() => {
-                        this.getAnalysisStatus()
-                        }, 5000);
+                        message: '启动成功',
+                        type: 'success'
+                    });
+                    setTimeout(() => {
+                        this.getAnalysisStatus();
+                    }, 5000);
                     // if(this.videoAnalysisSta=='已分析'){
 
                     // }else if(this.videoAnalysisSta=='分析中'){
                     //     this.description = '正在分析中'
                     //     setTimeout(() => {
                     //     this.getAnalysisStatus()
-                    //     }, 5000); 
+                    //     }, 5000);
                     // }else if(this.videoAnalysisSta=='未分析'){
-                    // }  
-                }   
+                    // }
+                }
             });
         },
         //交通分析
         trafficAnalysisBtn() {
             startTrafficAnalysis(this.$route.query.id).then(res => {
                 //
-                console.log("res.data",res.data.data)
-                 if (res.data.code == 200) {
-                        this.$message({
-                            message: res.data.msg,
-                            type: 'success'
-                        });
-                          document.getElementById('mapModule').contentWindow.addColor()
-                 }else{
-                     this.$message({
-                            message: res.data.msg,
-                            type: 'warning'
-                        });
-                 }
+                console.log('res.data', res.data.data);
+                if (res.data.code == 200) {
+                    this.$message({
+                        message: res.data.msg,
+                        type: 'success'
+                    });
+                    document.getElementById('mapModule').contentWindow.addColor();
+                } else {
+                    this.$message({
+                        message: res.data.msg,
+                        type: 'warning'
+                    });
+                }
             });
         },
         //获取视频分析结果
-        analysisData(){
-             getAnalysisData(this.$route.query.id).then(res => {
-                console.log("res.data.data",res.data.data)
-                this.analysis.trafficAnalysisPath1 = res.data.data.trafficAnalysisPath1
-                this.analysis.trafficAnalysisPath2 = res.data.data.trafficAnalysisPath2
-                this.analysis.videoAnalysisPath = res.data.data.videoAnalysisPath
-                this.analysis.videoName = res.data.data.videoName
-                this.analysis.videoPath = res.data.data.videoPath
-                this.analysis.videoTotalFrames = res.data.data.videoTotalFrames
-                this.analysis.videoType=this.$route.query.type     
+        analysisData() {
+            getAnalysisData(this.$route.query.id).then(res => {
+                console.log('res.data.data', res.data.data);
+                this.analysis.trafficAnalysisPath1 = res.data.data.trafficAnalysisPath1;
+                this.analysis.trafficAnalysisPath2 = res.data.data.trafficAnalysisPath2;
+                this.analysis.videoAnalysisPath = res.data.data.videoAnalysisPath;
+                this.analysis.videoName = res.data.data.videoName;
+                this.analysis.videoPath = res.data.data.videoPath;
+                this.analysis.videoTotalFrames = res.data.data.videoTotalFrames;
+                this.analysis.videoType = this.$route.query.type;
             });
         },
         //停止订阅mqtt
@@ -534,7 +559,7 @@ export default {
         realInfo(topic, message) {
             switch (topic) {
                 // 接收托片
-                case 'img'+this.number:   
+                case 'img' + this.number:
                     try {
                         const utf8decoder = new TextDecoder();
                         const u8arr = new Uint8Array(message);
@@ -542,7 +567,7 @@ export default {
                         const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
                         // console.log("msg",msg)
                         // document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
-                        
+
                         if (msg.rate == 'high') {
                             document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
                         } else {
@@ -551,7 +576,7 @@ export default {
                     } catch (error) {}
                     break;
                 // 树结构
-                case 'stream'+this.number:
+                case 'stream' + this.number:
                     try {
                         const utf8decoder1 = new TextDecoder();
                         const u8arr = new Uint8Array(message);
@@ -562,7 +587,7 @@ export default {
                     } catch (error) {}
                     break;
                 // 控制台输出
-                case 'trajectory'+this.number:    
+                case 'trajectory' + this.number:
                     try {
                         const utf8decoder = new TextDecoder();
                         const u8arr = new Uint8Array(message);
@@ -573,7 +598,7 @@ export default {
                     } catch (error) {}
                     break;
                 // 触发
-                case 'detection'+this.number: 
+                case 'detection' + this.number:
                     try {
                         const utf8decoder = new TextDecoder();
                         const u8arr = new Uint8Array(message);
@@ -588,41 +613,38 @@ export default {
                             }
                             document.getElementById('mapModule').contentWindow.getChuFa(JSON.stringify(detId));
                         }
-                        } catch (error) {}
-                        break;
-                    case 'trigger-'+this.$route.query.id:
-                        try {
-                            //  console.log("trigger_msgN",message)
+                    } catch (error) {}
+                    break;
+                case 'trigger-' + this.$route.query.id:
+                    try {
+                        //  console.log("trigger_msgN",message)
                         const utf8decoder = new TextDecoder();
                         const u8arr = new Uint8Array(message);
                         const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
                         var detId = [];
                         const msgN = JSON.parse(temp);
-                         console.log("trigger_msgN",msgN)
                         this.triggerListData = msgN;
                     } catch (error) {}
                     break;
-                    case 'cycle_time-'+this.$route.query.id:
-                        try {
-                            //  console.log("trigger_msgN",message)
+                case 'cycle_time-' + this.$route.query.id:
+                    try {
+                        //  console.log("trigger_msgN",message)
                         const utf8decoder = new TextDecoder();
                         const u8arr = new Uint8Array(message);
                         const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
                         var detId = [];
                         const msgN = JSON.parse(temp);
-                        //  console.log("trigger_msgN",msgN)
                         this.cycleTimeData = msgN;
                     } catch (error) {}
                     break;
-                    case 'cycle_statistics-'+this.$route.query.id:
-                        try {
-                            //  console.log("trigger_msgN",message)
+                case 'cycle_statistics-' + this.$route.query.id:
+                    try {
+                        //  console.log("trigger_msgN",message)
                         const utf8decoder = new TextDecoder();
                         const u8arr = new Uint8Array(message);
                         const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
                         var detId = [];
                         const msgN = JSON.parse(temp);
-                        //  console.log("trigger_msgN",msgN)
                         this.cycleStatistics = msgN;
                     } catch (error) {}
                     break;
@@ -643,23 +665,25 @@ export default {
         //初始化unity
         OnSceneN() {
             var ip = window.location.host;
-        this.ipData = "http://"+ip.split(":")[0]+':5000'
-        // document.getElementById('mapModule').contentWindow.getIpData(this.ipData);
-         document.getElementById('mapModule').contentWindow.getIpData('http://172.16.1.168:5000');
-         if(this.$route.query.type=='离线视频'){
-            document.getElementById('mapModule').contentWindow.lixianVideo(JSON.stringify(this.analysis)); 
-         } 
-        document.getElementById('mapModule').contentWindow.postVideoId(JSON.stringify(this.$route.query.id+ ',' +this.$route.query.type));          
+            this.ipData = 'http://' + ip.split(':')[0] + ':5000';
+            // document.getElementById('mapModule').contentWindow.getIpData(this.ipData);
+            document.getElementById('mapModule').contentWindow.getIpData('http://172.16.1.168:5000');
+            if (this.$route.query.type == '离线视频') {
+                document.getElementById('mapModule').contentWindow.lixianVideo(JSON.stringify(this.analysis));
+            }
+            document
+                .getElementById('mapModule')
+                .contentWindow.postVideoId(JSON.stringify(this.$route.query.id + ',' + this.$route.query.type));
         },
         //删除图形成功获取数据
-        delSuccess(){
-            if(this.$route.query.type=='离线视频'){
-                 this.$message({
-                            type: "warning",
-                            message: "请点击交通分析，获取最新数据！",
-                            showClose: true,
-                            duration:0,
-                    });
+        delSuccess() {
+            if (this.$route.query.type == '离线视频') {
+                this.$message({
+                    type: 'warning',
+                    message: '请点击交通分析，获取最新数据！',
+                    showClose: true,
+                    duration: 0
+                });
             }
         },
         // //新增组件根据组件id获取单个组件数据
@@ -682,14 +706,14 @@ export default {
                     this.componentForm.componentName = res.data.data.componentName;
                     if (res.data.data.timeMode != '') {
                         this.componentForm.timeMode = res.data.data.timeMode;
-                    }else{
-                        console.log("this.componentForm.timeMode",this.componentForm.timeMode);
-                        console.log("this.componentForm.componentType",this.componentForm.componentType);
-                        if(this.componentForm.componentType=='延误'||this.componentForm.componentType=='拥堵'){
-                            console.log("this.componentForm.timeMode",this.componentForm.timeMode);
-                            this.componentForm.timeMode = '周期统计'
-                        }else{
-                            this.componentForm.timeMode = '触发'
+                    } else {
+                        console.log('this.componentForm.timeMode', this.componentForm.timeMode);
+                        console.log('this.componentForm.componentType', this.componentForm.componentType);
+                        if (this.componentForm.componentType == '延误' || this.componentForm.componentType == '拥堵') {
+                            console.log('this.componentForm.timeMode', this.componentForm.timeMode);
+                            this.componentForm.timeMode = '周期统计';
+                        } else {
+                            this.componentForm.timeMode = '触发';
                         }
                     }
                     this.componentForm.componentParameterId = res.data.data.componentParameterId;
@@ -786,12 +810,12 @@ export default {
                         }
                         if (res.data.data.timeMode != '') {
                             this.componentForm.timeMode = res.data.data.timeMode;
-                        }else{
-                        if(this.componentForm.componentType=='延误'||this.componentForm.componentType=='拥堵'){
-                            this.componentForm.timeMode = '周期统计'
-                        }else{
-                            this.componentForm.timeMode = '触发'
-                        }
+                        } else {
+                            if (this.componentForm.componentType == '延误' || this.componentForm.componentType == '拥堵') {
+                                this.componentForm.timeMode = '周期统计';
+                            } else {
+                                this.componentForm.timeMode = '触发';
+                            }
                         }
                         this.componentForm.componentName = res.data.data.componentName;
                         this.componentForm.componentParameterId = res.data.data.componentParameterId;
@@ -945,7 +969,7 @@ export default {
                             message: res.data.msg,
                             type: 'success'
                         });
-                        // setTimeout(() => { 
+                        // setTimeout(() => {
                         //     this.$message({
                         //     type: "warning",
                         //     message: "请点击交通分析，获取最新数据！",
@@ -953,12 +977,14 @@ export default {
                         //     duration:0,
                         //     });
                         // }, 3000);
-                       
+
                         document.getElementById('mapModule').contentWindow.postFigureId(JSON.stringify(res.data.data));
-                        document.getElementById('mapModule').contentWindow.postFigureName(
+                        document
+                            .getElementById('mapModule')
+                            .contentWindow.postFigureName(
                                 JSON.stringify(res.data.data + ',' + form.name + ',' + this.startFigureName + ',' + this.numberNew)
                             );
-                          
+
                         this.dialogFormVisible = false;
                     } else {
                         this.$message({
@@ -1002,12 +1028,12 @@ export default {
                             message: res.data.msg,
                             type: 'success'
                         });
-                        setTimeout(() => { 
+                        setTimeout(() => {
                             this.$message({
-                            type: "warning",
-                            message: "请点击交通分析，获取最新数据！",
-                            showClose: true,
-                            duration:0,
+                                type: 'warning',
+                                message: '请点击交通分析，获取最新数据！',
+                                showClose: true,
+                                duration: 0
                             });
                         }, 5000);
                         console.log('startFigureName', this.startFigureName);
@@ -1047,8 +1073,7 @@ export default {
                 formData.append('endValue', componentForm.endValue);
                 formData.append('startValue', componentForm.startValue);
                 formData.append('timeMode', componentForm.timeMode);
-               
-                
+
                 formData.append('presentationForm', '矩阵图');
             } else if (componentForm.componentType == '类型') {
                 //名称
@@ -1075,7 +1100,7 @@ export default {
                 formData.append('startValue', componentForm.startValue);
                 formData.append('timeMode', componentForm.timeMode);
                 formData.append('presentationForm', componentForm.presentationForm);
-                 formData.append('flowType', componentForm.FlowType);
+                formData.append('flowType', componentForm.FlowType);
             }
             axios({
                 method: 'post',