diff --git a/package.json b/package.json
index 595b301..00323a6 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,8 @@
     "vue-router": "^3.0.3",
     "vue-schart": "^2.0.0",
     "vuedraggable": "^2.17.0",
-    "vuex": "^3.6.2"
+    "vuex": "^3.6.2",
+    "lodash": "^4.17.15"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.9.0",
diff --git a/src/components/newchart/avgChart.vue b/src/components/newchart/avgChart.vue
new file mode 100644
index 0000000..c2fb5d2
--- /dev/null
+++ b/src/components/newchart/avgChart.vue
@@ -0,0 +1,254 @@
+<template>
+    <!-- 均值图 -->
+    <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 + '-' + '均值图' + '-' + status }}</span>
+            </div>
+        </div>
+        <div id="barChart" ref="barChart" style="width: 705px; height: 300px"></div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'barChart', //均值图图组件
+    props: {
+        list: {
+            type: Array,
+            default() {
+                return [];
+            }
+        },
+        typeValue: {
+            type: Object
+        },
+        // 组件名称
+        componentName: {
+            type: String
+        },
+        chartName: {
+            type: String
+        },
+        status: {
+            type: String
+        }
+    },
+    data() {
+        return {};
+    },
+    methods: {
+        drawBar(arr) {
+            // console.log("均值图",arr)
+            if (arr && Object.keys(arr).length > 0) {
+                arr.avg = arr.avg ? Math.abs(arr.avg) : 0;
+                arr.med = arr.med ? Math.abs(arr.med) : 0;
+                arr.max = arr.max ? Math.abs(arr.max) : 0;
+                arr.min = arr.min ? Math.abs(arr.min) : 0;
+            }
+            let myChart = this.$echarts.getInstanceByDom(this.$refs.barChart);
+            if (myChart == null) {
+                myChart = this.$echarts.init(this.$refs.barChart);
+            }
+            let chartData = [{ stage: '', number: 40 }];
+            let option = {
+                tooltip: {},
+                color: ['#0EECE4'],
+                grid: {
+                    left: '0%',
+                    right: '0%',
+                    bottom: '10%',
+                    top: '15%',
+                    z: 22
+                },
+                xAxis: [
+                    {
+                        type: 'category',
+                        gridIndex: 0,
+                        data: chartData.map((item) => item.stage),
+                        axisLine: {
+                            show: false
+                        },
+                        axisLabel: {
+                            show: false
+                        }
+                    }
+                ],
+                yAxis: {
+                    type: 'value',
+
+                    splitArea: { show: false },
+                    gridIndex: 0,
+                    min: 0,
+                    splitNumber: 12,
+                    splitLine: {
+                        show: false
+                    },
+                    axisLine: {
+                        show: false
+                    },
+                    axisTick: {
+                        show: false
+                    },
+                    axisLabel: {
+                        show: false
+                    },
+                    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',
+                        stack: 'val',
+                        barWidth: 150,
+                        xAxisIndex: 0,
+                        yAxisIndex: 0,
+                        label: {
+                            show: true,
+                            position: 'right',
+                            // offset: [10, 20],
+                            distance: 15,
+                            color: '#000',
+                            fontSize: 17,
+                            formatter: '{c}' + '[avg]'
+                        },
+                        itemStyle: {
+                            color: '#89c6ff'
+                        },
+                        data: [arr.avg],
+                        zlevel: 9
+                    },
+                    {
+                        name: '中间值',
+                        type: 'bar',
+                        barWidth: 150,
+                        stack: 'val',
+                        label: {
+                            show: true,
+                            position: 'left',
+                            distance: 15,
+                            color: '#000',
+                            fontSize: 17,
+                            formatter: '{c}' + '[med]',
+                            rich: {}
+                        },
+                        itemStyle: {
+                            color: '#67b4fd'
+                        },
+                        data: [arr.med],
+                        zlevel: 9
+                    },
+
+                    {
+                        name: '最大值',
+                        type: 'bar',
+                        stack: 'val',
+                        barWidth: 150,
+                        barGap: '-100%',
+                        data: [arr.max],
+                        label: {
+                            show: true,
+                            position: 'right',
+                            distance: 10,
+                            color: '#000',
+                            fontSize: 17,
+                            offset: [0, -30],
+                            formatter: '{c}' + '[max]'
+                        },
+                        itemStyle: {
+                            color: '#319cff'
+                        },
+                        zlevel: 9
+                    },
+                    {
+                        name: '最小值',
+                        type: 'bar',
+                        stack: 'val',
+                        barWidth: 150,
+                        barGap: '-100%',
+                        data: [arr.min],
+                        label: {
+                            offset: [10, 20],
+                            show: true,
+                            position: 'left',
+                            distance: 10,
+                            color: '#000',
+                            offset: [0, -30],
+                            fontSize: 17,
+                            formatter: '{c}' + '[min]'
+                        },
+                        // tooltip: {
+                        //     backgroundColor: 'transparent',
+                        //     formatter: ' '
+                        // },
+                        itemStyle: {
+                            color: '#328adc'
+                        },
+                        zlevel: 9
+                    }
+                ]
+            };
+            myChart.setOption(option);
+            window.addEventListener('resize', function () {
+                myChart.resize();
+            });
+            //  this.$nextTick(() => {
+            //     myChart.setOption(option)
+            //     myChart.resize();
+            // })
+        }
+    },
+    mounted() {
+        // this.drawBar(this.typeValue);
+    },
+    watch: {
+        list: {
+            handler: function (newval, oldVal) {
+                if (newval && newval.length > 0) {
+                    this.$nextTick(() => {
+                        this.drawBar(newval[0]);
+                    });
+                }
+            },
+            deep: true
+            // immediate: true
+        }
+    }
+};
+</script>
+<style>
+.tableTitle {
+    background: #f7f8fa;
+    margin-bottom: 5px;
+    padding: 8px;
+}
+</style>
diff --git a/src/components/newchart/barChart.vue b/src/components/newchart/barChart.vue
new file mode 100644
index 0000000..19a9908
--- /dev/null
+++ b/src/components/newchart/barChart.vue
@@ -0,0 +1,162 @@
+<template>
+    <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 + '-' + '柱状图' + '-' + status }}</span>
+            </div>
+        </div>
+        <div id="barChart" ref="barChart" style="width: 705px; height: 300px"></div>
+    </div>
+</template>
+
+<script>
+import { getNameFromTargetType } from '@/utils/targetType';
+export default {
+    name: 'barChart', //饼图组件
+    props: {
+        list: Array,
+        default() {
+            return [];
+        },
+        pageType: {
+            type: String
+        },
+        title: {
+            type: String
+        },
+        status: {
+            type: String
+        },
+        componentName: {
+            type: String
+        },
+        chartName: {
+            type: String
+        },
+        typeValue: {
+            type: Object
+        }
+    },
+    data() {
+        return {};
+    },
+    created() {},
+    methods: {
+        drawBar(newVal) {
+            if (newVal && newVal.type_data && newVal.type_data.length > 0) {
+                var xData = newVal.type_data.map((ele) => {
+                    return getNameFromTargetType(ele.name);
+                });
+                var yData = newVal.type_data.map((ele) => {
+                    return ele.quantity;
+                });
+            }
+            let myChart = this.$echarts.getInstanceByDom(this.$refs.barChart);
+            if (myChart == null) {
+                myChart = this.$echarts.init(this.$refs.barChart);
+            }
+            let option = {
+                color: ['#7262FD', '#FC5A5A'],
+                tooltip: {
+                    confine: true
+                },
+                grid: {
+                    left: '5%',
+                    right: '5%',
+                    bottom: '0%',
+                    top: '5%',
+                    containLabel: true
+                },
+                xAxis: {
+                    type: 'category',
+                    data: xData,
+                    axisLine: {
+                        lineStyle: {
+                            color: '#000'
+                        }
+                    },
+                    axisLabel: {
+                        interval: 0,
+                        fontSize: 12,
+                        color: '#000',
+                        rotate: 30
+                    },
+                    axisTick: {
+                        show: false
+                    }
+                },
+                yAxis: [
+                    {
+                        type: 'value',
+                        min: 0,
+                        minInterval: 1,
+                        splitArea: {
+                            show: false
+                        },
+
+                        axisLine: {
+                            show: true
+                        },
+                        axisTick: {
+                            show: false
+                        },
+                        splitLine: {
+                            lineStyle: {
+                                color: '#eeebeb',
+                                type: 'dashed' // dotted 虚线
+                            }
+                        },
+                        axisLabel: {
+                            fontSize: 12,
+                            color: '#000',
+                            fontFamily: 'Bebas'
+                        }
+                    }
+                ],
+                series: [
+                    {
+                        type: 'bar',
+                        barWidth: 20,
+                        itemStyle: { barBorderRadius: [5, 5, 0, 0] },
+                        name: '时间',
+                        data: yData
+                    }
+                ]
+            };
+            myChart.setOption(option);
+            window.addEventListener('resize', function () {
+                myChart.resize();
+            });
+            //  this.$nextTick(() => {
+            //     myChart.setOption(option)
+            //     myChart.resize();
+            // })
+        }
+    },
+    mounted() {},
+    watch: {
+        list: {
+            handler: function (newval, oldVal) {
+                if (newval && newval.length > 0) {
+                    this.$nextTick(() => {
+                        this.drawBar(newval[0]);
+                    });
+                }
+            },
+            deep: true
+            // immediate: true
+        }
+    }
+};
+</script>
diff --git a/src/components/newchart/detailDialog.vue b/src/components/newchart/detailDialog.vue
new file mode 100644
index 0000000..67e84f8
--- /dev/null
+++ b/src/components/newchart/detailDialog.vue
@@ -0,0 +1,125 @@
+<template>
+    <div>
+        <!-- <div class="down">
+            <el-dropdown trigger="click" @command="handleCommand">
+                <span class="moreIcon"></span>
+                <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item command="show">查看详情</el-dropdown-item>
+                </el-dropdown-menu>
+            </el-dropdown>
+        </div> -->
+        <el-dialog title="编辑" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
+            <el-form label-width="80px">
+                <el-form-item label="val1">
+                    <el-time-select
+                        placeholder="起始时间"
+                        v-model="startTime"
+                        :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }"
+                    >
+                    </el-time-select>
+                    <el-time-select
+                        placeholder="结束时间"
+                        v-model="endTime"
+                        :picker-options="{ start: '08:30', step: '00:15', end: '18:30', minTime: startTime }"
+                    >
+                    </el-time-select>
+                </el-form-item>
+                <el-form-item label="val2">
+                    <el-select v-model="value" placeholder="请选择">
+                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="val3">
+                    <el-input></el-input>
+                </el-form-item>
+                <el-form-item label="val4">
+                    <el-checkbox-group v-model="checkList">
+                        <el-checkbox label="数值"></el-checkbox>
+                        <el-checkbox label="表格"></el-checkbox>
+                        <el-checkbox label="时间曲线图"></el-checkbox>
+                        <el-checkbox label="均值图"></el-checkbox>
+                    </el-checkbox-group>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" @click="onSubmit">确认</el-button>
+                    <el-button @click="dialogVisible = false">取消</el-button>
+                </el-form-item>
+            </el-form>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'detailDialog', //速度组件
+    props: {},
+    data() {
+        return {
+            dialogVisible: false,
+            startTime: '',
+            endTime: '',
+            checkList: ['复选框 A'],
+            options: [
+                {
+                    value: '选项1',
+                    label: '黄金糕'
+                },
+                {
+                    value: '选项2',
+                    label: '双皮奶'
+                },
+                {
+                    value: '选项3',
+                    label: '蚵仔煎'
+                },
+                {
+                    value: '选项4',
+                    label: '龙须面'
+                },
+                {
+                    value: '选项5',
+                    label: '北京烤鸭'
+                }
+            ],
+            value: ''
+        };
+    },
+    methods: {
+        onSubmit() {},
+        handleCommand(command) {
+            // 用户名下拉菜单选择事件
+            if (command == 'show') {
+                this.dialogVisible = true;
+            }
+        },
+        handleClose(done) {
+            this.$confirm('确认关闭？')
+                .then((_) => {
+                    done();
+                })
+                .catch((_) => {});
+        }
+    },
+    mounted() {}
+};
+</script>
+<style scoped>
+.down {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    z-index: 100;
+}
+.down .moreIcon{
+    width: 5px;
+    height: 18px;
+    background-size: 5px 18px;
+    position: relative;
+    z-index: 100;
+    background-image: url(../../assets/img/more.png);
+    display: block;
+}
+.el-form-item {
+    margin-bottom: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/newchart/lineChart.vue b/src/components/newchart/lineChart.vue
new file mode 100644
index 0000000..b0e1d96
--- /dev/null
+++ b/src/components/newchart/lineChart.vue
@@ -0,0 +1,451 @@
+<template>
+    <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 + '-' + '曲线图' + '-' + status,
+                }}</span>
+            </div>
+        </div>
+        <div id="lineChart" ref="lineChart" style="width: 705px; height: 300px"></div>
+    </div>
+</template>
+
+<script>
+import { getNameFromTargetType } from '@/utils/targetType';
+export default {
+    name: 'lineChart', //折线图组件
+    props: {
+        itemData: {
+            type: Object,
+            default() {
+                return {};
+            }
+        },
+        originalDataArr: {
+            type: Array,
+            default() {
+                return [];
+            }
+        },
+        list: {
+            type: Array,
+            default() {
+                return [];
+            }
+        },
+        pageType: {
+            type: String
+        },
+        title: {
+            type: String
+        },
+        // 时间模式
+        status: {
+            type: String
+        },
+        // 组件名称
+        componentName: {
+            type: String
+        },
+        chartName: {
+            type: String
+        },
+        // 单个数据接收
+        typeValue: {
+            type: Object,
+            default() {
+                return {};
+            }
+        }
+    },
+    data() {
+        return {
+            xData: [],
+            yData: [],
+            yData1: [],
+            yData2: [],
+            yData3: [],
+            arrN: [],
+            // series: []
+            // triggerType:'触发时刻'
+            myChart: null,
+            tooltip: {
+                show: true,
+                trigger: 'axis',
+                backgroundColor: 'rgba(1, 13, 19, 0.5)',
+                borderWidth: 1,
+                axisPointer: {
+                    type: 'shadow'
+                    // label: {
+                    //   show: true,
+                    // },
+                },
+
+                textStyle: {
+                    color: 'rgba(212, 232, 254, 1)'
+                    // fontSize: fontChart(0.24),
+                },
+                extraCssText: 'z-index:2'
+            },
+            name: 'km/h',
+            series: [],
+
+            //
+            listArr: []
+        };
+    },
+    created() {
+        // console.log(this.componentName + '-' + JSON.stringify(this.itemData));
+        // console.log( this.componentName + '-' + this.chartName + '-' + '曲线图','40');
+    },
+
+    methods: {
+        drawLine(newVal, title, timeMode) {
+            // console.log('newVal == ', newVal)
+            let myChart = this.$echarts.getInstanceByDom(this.$refs.lineChart);
+            if (myChart == null) {
+                myChart = this.$echarts.init(this.$refs.lineChart);
+            }
+            // var series = []
+            if (newVal) {
+                this.xData = newVal.map((val) => {
+                    return val.time;
+                });
+            }
+
+            // myChart.showLoading()　　//开启loading
+            let option = {
+                legend: {},
+                grid: {
+                    left: '2%',
+                    right: '4%',
+                    bottom: '10%',
+                    top: '20%',
+                    containLabel: true
+                },
+                tooltip: this.tooltip,
+                xAxis: [
+                    {
+                        type: 'category',
+                        axisLine: {
+                            show: true,
+                            lineStyle: {
+                                color: '#eeebeb',
+                                type: 'dashed'
+                            }
+                        },
+                        axisTick: {
+                            show: false
+                        },
+                        axisLabel: {
+                            color: '#6c6c6c'
+                        },
+                        splitLine: {
+                            show: false
+                        },
+                        boundaryGap: ['5%', '5%'],
+
+                        data: this.xData.reverse()
+                    }
+                ],
+                yAxis: [
+                    {
+                        type: 'value',
+                        name: this.name,
+                        axisLabel: {
+                            color: '#6c6c6c'
+                        },
+                        splitLine: {
+                            lineStyle: {
+                                color: '#eeebeb',
+                                type: 'dashed'
+                            }
+                        },
+                        axisLine: {
+                            show: false
+                        },
+                        axisTick: {
+                            show: false
+                        }
+                    }
+                ],
+                series: this.getMessage(newVal, title, timeMode)
+            };
+            myChart.setOption(option);
+            window.addEventListener('resize', function () {
+                myChart.resize();
+            });
+            //  this.$nextTick(() => {
+            //   myChart.setOption(option)
+            //                 myChart.resize();
+            //             })
+        },
+        //传值对应字段返回相应字段数组
+        extractKeyValues(arr, key) {
+            return arr.map((item) => {
+                if (key == 'speed' && item[key]) {
+                    return Math.abs(item[key]);
+                }
+                return item[key];
+            });
+        },
+        getMessage(newVal, title, timeMode) {
+            if (newVal) {
+                var series = [
+                    {
+                        name: '',
+                        type: 'line',
+                        symbolSize: 6,
+                        smooth: true,
+                        itemStyle: {
+                            color: '#fb864b',
+                            borderColor: '#fb864b'
+                            // borderWidth: 2
+                        },
+                        data: []
+                    }
+                ];
+
+                if (title === '类型') {
+                    this.tooltip = {
+                        show: true,
+                        confine: true,
+                        trigger: 'axis',
+                        backgroundColor: 'rgba(1, 13, 19, 0.5)',
+                        borderWidth: 1,
+                        axisPointer: {
+                            type: 'shadow'
+                            // label: {
+                            //   show: true,
+                            // },
+                        },
+
+                        textStyle: {
+                            color: 'rgba(212, 232, 254, 1)'
+                            // fontSize: fontChart(0.24),
+                        },
+                        extraCssText: 'z-index:2'
+                    };
+                    this.name = '';
+                    series[0].name = '总量';
+                    //获取每种类型数据逻辑有问题
+                    // 映射出类型数组
+                    // let arr = newVal.map(function (ele) {
+                    //     if (ele.type_data != null) {
+                    //         return ele.type_data;
+                    //     }
+                    // });
+                    // var mapN = [];
+                    // if (arr && arr.length > 0) {
+                    //     for (var t = 0; t < arr.length; t++) {
+                    //         if (arr[t] && arr[t].length > 0) {
+                    //             for (var i = 0; i < arr[t].length; i++) {
+                    //                 mapN.push(arr[t][i]);
+                    //             }
+                    //         }
+                    //     }
+                    // }
+                    // var lineArr = [];
+                    // if (newVal[0].type_data != undefined) {
+                    //     newVal[0].type_data.forEach((ele) => {
+                    //         lineArr.push({
+                    //             name: ele.name,
+                    //             type: 'line',
+                    //             data: [],
+                    //             smooth: true
+                    //         });
+                    //     });
+                    // }
+                    // console.log('newVal', newVal);
+                    //获取每种类型数据逻辑有问题
+                    // mapN.forEach((ele, index) => {
+
+                    //     if (lineArr[index] && lineArr[index].data) {
+                    //         let t = ele.quantity
+                    //         if(ele.value||ele.value===0){
+                    //             t = ele.value
+                    //         }
+                    //         lineArr[index].data.push(t);
+                    //     }
+                    // });
+                    // console.log('lineArr', lineArr);
+                    var lineArr = [];
+                    let seriesArr = this.extractKeyValues(newVal, 'type_data');
+                    if (seriesArr && seriesArr.length > 0) {
+                        const firstLevel = seriesArr.find((i) => i && i.length > 0);
+                        if (firstLevel && firstLevel.length > 0) {
+                            for (let i = 0; i < firstLevel.length; i++) {
+                                const item = firstLevel[i];
+                                if (item) {
+                                    const valueList = seriesArr.map((arr) => {
+                                        if (arr) {
+                                            let t = arr[i] && arr[i].value;
+                                            if (arr[i] && (arr[i].quantity || arr[i].quantity === 0)) {
+                                                t = arr[i].quantity;
+                                            }
+                                            return t;
+                                        }
+                                        return 0;
+                                    });
+
+                                    lineArr.push({
+                                        name: getNameFromTargetType(item.name),
+                                        data: valueList,
+                                        type: 'line',
+                                        smooth: true
+                                    });
+                                }
+                            }
+                        }
+                    }
+
+                    if (lineArr && lineArr.length > 0) {
+                        for (let j = 0; j < lineArr.length; j++) {
+                            series.push(lineArr[j]);
+                        }
+                    }
+
+                    // 总和数量
+                    let mapNR1 = [];
+                    newVal.map(function (ele) {
+                        if (ele.type_data != null) {
+                            let sum = ele.type_data.reduce(function (prev, cur) {
+                                let t = cur.quantity;
+                                if (cur.value || cur.value === 0) {
+                                    t = cur.value;
+                                }
+                                return t + prev;
+                            }, 0);
+                            mapNR1.push(sum);
+                        }
+                    });
+                    series[0].data = mapNR1;
+                } else if (title === '速度') {
+                    let unit = 'km/h';
+                    if (this.originalDataArr && this.originalDataArr.length > 0) {
+                        if (this.originalDataArr[0].speed >= 0) {
+                            unit = 'km/h';
+                        } else {
+                            unit = 'pix/s';
+                        }
+                    }
+                    this.tooltip = {
+                        formatter: `{a} {b}:{c}${unit}`,
+                        show: true,
+                        confine: true
+                    };
+                    this.name = unit;
+                    // console.log(this.status + '-速度-' + JSON.stringify(newVal));
+                    series[0].data = newVal.map((val) => {
+                        if (val.speed == -1) {
+                            return '-';
+                        }
+                        return Math.abs(val.speed);
+                    });
+                } else if (title === '流量') {
+                    this.name = '辆';
+                    if (this.status != '实时触发') {
+                        this.name = `辆/${this.itemData.cycleInterval}${this.itemData.unit}`;
+                    }
+                    series[0].data = newVal.map((ele) => {
+                        return ele.in_flow + ele.out_flow;
+                    });
+                } else if (title === '车头时距') {
+                    this.name = '秒';
+                    this.tooltip = {
+                        formatter: '{a} {b}:{c}/s',
+                        show: true,
+                        confine: true
+                    };
+                    series[0].data = newVal.map((val) => {
+                        if (timeMode == '固定间隔') {
+                            if (val.ave_headway == -1) {
+                                return '-';
+                            }
+                            return val.ave_headway;
+                        } else {
+                            return val.headway;
+                        }
+                    });
+                } else if (title === '排队数') {
+                    this.name = '辆';
+                    if (this.status != '实时触发') {
+                        this.name = `辆/${this.itemData.cycleInterval}${this.itemData.unit}`;
+                    }
+                    series[0].data = newVal.map((val) => {
+                        // return val.n_queue;
+                        if (timeMode == '固定间隔') {
+                            return val.ave_queue;
+                        } else {
+                            return val.n_queue;
+                        }
+                    });
+                } else if (title === '检测数') {
+                    this.name = '辆';
+                    if (this.status != '实时触发') {
+                        this.name = `辆/${this.itemData.cycleInterval}${this.itemData.unit}`;
+                    }
+                    series[0].data = newVal.map((val) => {
+                        if (timeMode == '固定间隔') {
+                            return val.ave_stay;
+                        } else {
+                            return val.n_stay;
+                        }
+                    });
+                } else if (title === '延误') {
+                    this.name = '秒';
+                    series[0].data = newVal.map((val) => {
+                        return val.ave_delay;
+                    });
+                } else if (title === '拥堵') {
+                    this.name = '秒';
+                    series[0].data = newVal.map((val) => {});
+                }
+                series.forEach((ele) => {
+                    ele.data.reverse();
+                });
+                return series;
+            }
+        }
+    },
+    mounted() {
+        // if (this.historyData.length != 0) {
+        //     this.drawLine(this.historyData, this.title, this.status);
+        // }
+        // this.getMessage(this.list)
+        // console.log(this.$parent.dataArr, '父组件的dataArr');
+        // this.$set(this.$parent.dataArr)
+    },
+    watch: {
+        list: {
+            handler: function (newval, oldVal) {
+                if (newval && newval.length > 0) {
+                    this.$nextTick(() => {
+                        this.drawLine(newval, this.title, this.status);
+                    });
+                }
+            },
+            deep: true
+            // immediate: true
+        }
+    }
+};
+</script>
+<style scoped>
+.tableTitle {
+    background: #f7f8fa;
+    margin-bottom: 5px;
+    padding: 8px;
+}
+</style>
diff --git a/src/components/newchart/pieChart.vue b/src/components/newchart/pieChart.vue
new file mode 100644
index 0000000..f0f100c
--- /dev/null
+++ b/src/components/newchart/pieChart.vue
@@ -0,0 +1,178 @@
+<template>
+    <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 + '-' + '饼状图'+'-'+status, }}</span>
+            </div>
+        </div>
+        <div id="pieChart" ref="pieChart" style="width: 705px; height: 300px"></div>
+    </div>
+</template>
+
+<script>
+import { getNameFromTargetType } from '@/utils/targetType';
+export default {
+    name: 'pieChart', //饼图图组件
+    props: {
+        list: {
+            type: Array,
+            default() {
+                return [];
+            }
+        },
+        componentName: {
+            type: String
+        },
+        chartName: {
+            type: String
+        },
+        typeValue: {
+            type: Object
+        },
+        status: {
+            type: String
+        }
+    },
+    data() {
+        return {};
+    },
+    created() {},
+    methods: {
+        drawPie(newVal) {
+            // var legend = [];
+            var seriesData = [];
+            if (newVal && newVal.type_data && newVal.type_data.length > 0) {
+                // var legend = newVal.type_data.map((ele) => {
+                //   return ele.name;
+                // });
+                
+                newVal.type_data.forEach((ele) => {
+                    //   console.log(JSON.stringify(ele))
+                    // if (ele.quantity != 0) {
+                        seriesData.push({
+                            name: getNameFromTargetType(ele.name),
+                            value: ele.quantity
+                        });
+                        // legend.push(ele.name)
+                    // }
+                });
+            }
+            let myChart = this.$echarts.getInstanceByDom(this.$refs.pieChart);
+            if (!myChart) {
+                myChart = this.$echarts.init(this.$refs.pieChart);
+            }
+            var color = [
+                '#0CD2E6',
+                '#3751E6',
+                '#FFC722',
+                '#00FFFF',
+                '#00FF80',
+                '#FFEA00',
+                '#FF7300',
+                '#9500B3',
+                '#3377FF',
+                '#5087EC',
+                '#68BBC4',
+                '#58A55C',
+                '#F2BD42',
+                '#EE752F',
+                '#D95040',
+                '#14CAFB'
+            ];
+            let option = {
+                // title: {
+                //     show: true,
+                //     text: this.componentName + '-' + this.chartName + '-' + '饼状图',
+                //     textStyle: {
+                //         lineHeight: '30'
+                //     }
+                // },
+                color: color,
+                animation: false,
+                legend: {
+                    top: 20,
+                    right: 10,
+                    bottom: 20,
+                    orient: 'vertical',
+                    textStyle: {}
+                    // data: legend
+                },
+                tooltip: {},
+                series: [
+                    {
+                        type: 'pie',
+                        center: ['30%', '55%'],
+                        radius: '70%',
+                        label: {
+                            normal: {
+                                show: false
+                            }
+                        },
+                        labelLine: {
+                            show: false,
+                            length: 0,
+                            length2: 0
+                        },
+                        label: {
+                            normal: {
+                                show: true,
+                                position: 'inside',
+                                formatter: '{value|{c}}',
+                                rich: {
+                                    value: {
+                                        fontSize: 20,
+                                        color: '#ffffff'
+                                    }
+                                }
+                            }
+                        },
+                        data: seriesData
+                    }
+                ]
+            };
+
+            myChart.setOption(option);
+            window.addEventListener('resize', function () {
+                myChart.resize();
+            });
+            //  this.$nextTick(() => {
+            //     myChart.setOption(option)
+            //     myChart.resize();
+            // })
+        }
+    },
+    mounted() {},
+    watch: {
+        list: {
+            handler: function (newval, oldVal) {
+                // console.log('pieChart', newval);
+                if (newval && newval.length > 0) {
+                    this.$nextTick(() => {
+                        this.drawPie(newval[0]);
+                    });
+                }
+            },
+            deep: true
+            // immediate: true
+        }
+    }
+};
+</script>
+<style scoped>
+.tableTitle {
+    background: #f7f8fa;
+    margin-bottom: 5px;
+    padding: 8px;
+}
+</style>
diff --git a/src/components/newchart/regionTable.vue b/src/components/newchart/regionTable.vue
new file mode 100644
index 0000000..33d541c
--- /dev/null
+++ b/src/components/newchart/regionTable.vue
@@ -0,0 +1,276 @@
+<template>
+    <!-- 区域的表格 -->
+    <div class="tableContent">
+        <!-- <div class="down">
+            <el-dropdown trigger="click" @command="handleCommand">
+                <span class="moreIcon"></span>
+                <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item command="show">查看详情</el-dropdown-item>
+                </el-dropdown-menu>
+            </el-dropdown>
+        </div> -->
+
+        <div v-if="msg" class="regionBox">
+            <!-- 实时触发 -->
+            <el-table :data="msg" height="609" 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>
+                <el-table-column align="center" prop="time" label="时间戳"></el-table-column>
+                <el-table-column align="center" label="目标类型" prop="type">
+                    <template slot-scope="scope">
+                        {{getNameFromTargetType(scope.row.type)}}
+                    </template>
+                    <!-- <template slot-scope="scope">
+                        <span v-if="scope.row.type == 'Person'">行人</span>
+                        <span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
+                        <span v-if="scope.row.type == 'Non_Motor'">非机动车</span>
+                        <span v-if="scope.row.type == 'Motor Vehicle|Non_Motor'">机动车|非机动车</span>
+                        <span v-if="scope.row.type == 'Motor Vehicle|Person'">机动车|行人</span>
+                        <span v-if="scope.row.type == 'Person|Non_Motor'">行人|非机动车</span>
+                        <span v-if="scope.row.type == 'Person|Motor Vehicle'">行人机动车</span>
+                        <span v-if="scope.row.type == 'Person|Non_Motor|Motor Vehicle'">行人|非机动车|机动车</span>
+                        <span v-if="scope.row.type == 'Person|Motor Vehicle|Non_Motor'">行人|非机动车|机动车</span>
+                        <span v-if="scope.row.type == 'Non_Motor|Person|Motor Vehicle'">行人|非机动车|机动车</span>
+                        <span v-if="scope.row.type == 'Non_Motor|Motor Vehicle|Person'">行人|非机动车|机动车</span>
+                        <span v-if="scope.row.type == 'Motor Vehicle|Non_Motor|Person'">行人|非机动车|机动车</span>
+                        <span v-if="scope.row.type == 'Motor Vehicle|Person|Non_Motor'">行人|非机动车|机动车</span>
+                        <span v-if="scope.row.type == 'Non_Motor|Motor Vehicle'">非机动车|机动车</span>
+                        <span v-if="scope.row.type == 'Non_Motor|Person'">非机动车|行人</span>
+                    </template> -->
+                </el-table-column>
+                <el-table-column align="center" prop="n_stay" label="存车数"></el-table-column>
+                <el-table-column align="center" prop="n_queue" label="排队数"></el-table-column>
+                <el-table-column align="center" prop="occ" label="占用状态">
+                    <template slot-scope="scope">
+                        <span v-if="scope.row.occ == '1'">占用</span>
+                    </template>
+                </el-table-column>
+                <el-table-column align="center" prop="speed" label="空间平均速度">
+                    <template slot-scope="scope">
+                        {{
+                            scope.row.speed && scope.row.speed != '-' && scope.row.speed != '-1'
+                                ? Math.abs(scope.row.speed)
+                                : scope.row.speed == '-1'
+                                ? '-'
+                                : scope.row.speed
+                        }}
+                    </template>
+                </el-table-column>
+            </el-table>
+            <el-table :data="msg" height="609" 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>
+                <el-table-column align="center" prop="time" label="时间戳"></el-table-column>
+                <el-table-column align="center" label="目标类型" prop="type">
+                    <template slot-scope="scope">
+                        {{getNameFromTargetType(scope.row.type)}}
+                    </template>
+                    <!-- <template slot-scope="scope">
+                        <span v-if="scope.row.type == 'Person'">行人</span>
+                        <span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
+                        <span v-if="scope.row.type == 'Non_Motor'">非机动车</span>
+                        <span v-if="scope.row.type == 'Motor Vehicle|Non_Motor'">机动车|非机动车</span>
+                        <span v-if="scope.row.type == 'Motor Vehicle|Person'">机动车|行人</span>
+                        <span v-if="scope.row.type == 'Person|Non_Motor'">行人|非机动车</span>
+                        <span v-if="scope.row.type == 'Person|Motor Vehicle'">行人机动车</span>
+                        <span v-if="scope.row.type == 'Person|Non_Motor|Motor Vehicle'">行人|非机动车|机动车</span>
+                        <span v-if="scope.row.type == 'Person|Motor Vehicle|Non_Motor'">行人|非机动车|机动车</span>
+                        <span v-if="scope.row.type == 'Non_Motor|Person|Motor Vehicle'">行人|非机动车|机动车</span>
+                        <span v-if="scope.row.type == 'Non_Motor|Motor Vehicle|Person'">行人|非机动车|机动车</span>
+                        <span v-if="scope.row.type == 'Motor Vehicle|Non_Motor|Person'">行人|非机动车|机动车</span>
+                        <span v-if="scope.row.type == 'Motor Vehicle|Person|Non_Motor'">行人|非机动车|机动车</span>
+                        <span v-if="scope.row.type == 'Non_Motor|Motor Vehicle'">非机动车|机动车</span>
+                        <span v-if="scope.row.type == 'Non_Motor|Person'">非机动车|行人</span>
+                    </template> -->
+                </el-table-column>
+                <el-table-column align="center" prop="n_stay" label="存车数"></el-table-column>
+                <el-table-column align="center" prop="n_queue" label="排队数"></el-table-column>
+                <el-table-column align="center" prop="occ" label="占用状态">
+                    <template slot-scope="scope">
+                        <span v-if="scope.row.occ == '1'">占用</span>
+                    </template>
+                </el-table-column>
+                <el-table-column align="center" prop="speed" label="空间平均速度">
+                    <template slot-scope="scope">
+                        {{
+                            scope.row.speed && scope.row.speed != '-' && scope.row.speed != '-1'
+                                ? Math.abs(scope.row.speed)
+                                : scope.row.speed == '-1'
+                                ? '-'
+                                : scope.row.speed
+                        }}
+                    </template>
+                </el-table-column>
+            </el-table>
+            <!-- 固定间隔 -->
+            <el-table :data="msg" height="609" 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>
+                <el-table-column align="center" label="目标类型" prop="type">
+                    <template slot-scope="scope">
+                        {{getNameFromTargetType(scope.row.type)}}
+                    </template>
+                    <!-- <template slot-scope="scope">
+                        <span v-if="scope.row.type == 'Person'">行人</span>
+                        <span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
+                        <span v-if="scope.row.type == 'Non_Motor'">非机动车</span>
+                        <span v-if="scope.row.type == 'Motor Vehicle|Non_Motor'">机动车|非机动车</span>
+                        <span v-if="scope.row.type == 'Motor Vehicle|Person'">机动车|行人</span>
+                        <span v-if="scope.row.type == 'Person|Non_Motor'">行人|非机动车</span>
+                        <span v-if="scope.row.type == 'Person|Motor Vehicle'">行人机动车</span>
+                        <span v-if="scope.row.type == 'Person|Non_Motor|Motor Vehicle'">行人|非机动车|机动车</span>
+                        <span v-if="scope.row.type == 'Person|Motor Vehicle|Non_Motor'">行人|非机动车|机动车</span>
+                        <span v-if="scope.row.type == 'Non_Motor|Person|Motor Vehicle'">行人|非机动车|机动车</span>
+                        <span v-if="scope.row.type == 'Non_Motor|Motor Vehicle|Person'">行人|非机动车|机动车</span>
+                        <span v-if="scope.row.type == 'Motor Vehicle|Non_Motor|Person'">行人|非机动车|机动车</span>
+                        <span v-if="scope.row.type == 'Motor Vehicle|Person|Non_Motor'">行人|非机动车|机动车</span>
+                        <span v-if="scope.row.type == 'Non_Motor|Motor Vehicle'">非机动车|机动车</span>
+                        <span v-if="scope.row.type == 'Non_Motor|Person'">非机动车|行人</span>
+                    </template> -->
+                </el-table-column>
+                <el-table-column align="center" prop="in_flow" label="驶入流量"></el-table-column>
+                <el-table-column align="center" prop="out_flow" label="驶离流量"></el-table-column>
+                <el-table-column align="center" prop="ave_stay" label="平均存车数"></el-table-column>
+                <el-table-column align="center" prop="ave_queue" label="平均排队数"></el-table-column>
+                <el-table-column align="center" prop="ave_occ" label="平均占有率"></el-table-column>
+                <el-table-column align="center" prop="ave_delay" label="平均延误"></el-table-column>
+                <el-table-column align="center" prop="speed" label="平均速度">
+                    <template slot-scope="scope">
+                        {{
+                            scope.row.speed && scope.row.speed != '-' && scope.row.speed != '-1'
+                                ? Math.abs(scope.row.speed)
+                                : scope.row.speed == '-1'
+                                ? '-'
+                                : scope.row.speed
+                        }}
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+
+        <el-dialog title="编辑" :append-to-body="true" :visible.sync="dialogVisible" width="40%">
+            <el-form :model="msg" label-width="80px">
+                <el-form-item label="val1">
+                    <el-time-select
+                        placeholder="起始时间"
+                        v-model="startTime"
+                        :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }"
+                    >
+                    </el-time-select>
+                    <el-time-select
+                        placeholder="结束时间"
+                        v-model="endTime"
+                        :picker-options="{ start: '08:30', step: '00:15', end: '18:30', minTime: startTime }"
+                    >
+                    </el-time-select>
+                </el-form-item>
+                <el-form-item label="val2">
+                    <el-select>
+                        <el-option> </el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="val3">
+                    <el-input v-model="dialogVisible"></el-input>
+                </el-form-item>
+                <el-form-item label="val4">
+                    <el-checkbox-group v-model="checkList">
+                        <el-checkbox label="数值"></el-checkbox>
+                        <el-checkbox label="表格"></el-checkbox>
+                        <el-checkbox label="时间曲线图"></el-checkbox>
+                        <el-checkbox label="均值图"></el-checkbox>
+                    </el-checkbox-group>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary">确认</el-button>
+                    <el-button @click="dialogVisible = false">取消</el-button>
+                </el-form-item>
+            </el-form>
+        </el-dialog>
+    </div>
+</template>
+  
+<script>
+import { getNameFromTargetType } from '@/utils/targetType';
+import tableShow from './tableShow.vue';
+export default {
+  components: { tableShow },
+    name: 'tableShow', //表格组件
+    props: {
+        msg: {
+            type: Array
+            // default() {
+            //     return [];
+            // }
+        },
+        triggerType: {
+            type: String
+        }
+    },
+    data() {
+        return {
+            getNameFromTargetType,
+            dialogVisible: false,
+            startTime: '',
+            endTime: '',
+            checkList: ['复选框 A']
+        };
+    },
+    methods: {
+        handleCommand(command) {
+            // 用户名下拉菜单选择事件
+            if (command == 'show') {
+                this.dialogVisible = true;
+            }
+        }
+    },
+    mounted() {
+        // console.log(this.type,'129129');
+    },
+    watch: {
+        msg: {
+            handler(newVal) {
+                // console.log(newVal,'流量数据table');
+            }
+        }
+    }
+};
+</script>
+<style scoped lang="scss">
+/deep/ .el-table {
+    // height: 709px !important;
+    // overflow-y: scroll;
+    z-index: 900;
+}
+.el-table::-webkit-scrollbar {
+    width: 0 !important;
+}
+.tableContent {
+    position: relative;
+}
+
+.down {
+    position: absolute;
+    top: -35px;
+    right: 5px;
+    z-index: 100;
+}
+
+.down .moreIcon {
+    width: 5px;
+    height: 18px;
+    background-size: 5px 18px;
+    background-image: url(../../assets/img/more.png);
+    display: block;
+}
+
+.el-form-item {
+    margin-bottom: 20px;
+}
+
+.tableContent {
+    border: 1px solid #e4e7ed;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/newchart/tableShow.vue b/src/components/newchart/tableShow.vue
new file mode 100644
index 0000000..66a6a40
--- /dev/null
+++ b/src/components/newchart/tableShow.vue
@@ -0,0 +1,312 @@
+<template>
+    <!-- 断面的表格 -->
+    <div class="tableContent">
+        <!-- <div class="down">
+            <el-dropdown trigger="click" @command="handleCommand">
+                <span class="moreIcon"></span>
+                <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item command="show">查看详情</el-dropdown-item>
+                </el-dropdown-menu>
+            </el-dropdown>
+        </div> -->
+        <!-- 实时触发 -->
+
+        <!-- 实时触发 -->
+        <div v-if="msg && msg.length > 0">
+            <el-table :data="msg" height="609" 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>
+                <el-table-column align="center" prop="time" label="时间戳"></el-table-column>
+                <!-- <el-table-column align="center" prop="" label="视频帧"></el-table-column> -->
+                <el-table-column align="center" label="目标类型" prop="type">
+                    <template slot-scope="scope">
+                        {{getNameFromTargetType(scope.row.type)}}
+                    </template>
+                    <!-- <template slot-scope="scope">
+                        <span v-if="scope.row.type == 'Person'">行人</span>
+                        <span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
+                        <span v-if="scope.row.type == 'Non_Motor'">非机动车</span>
+                        <span v-if="scope.row.type == 'Motor Vehicle|Non_Motor'">机动车|非机动车</span>
+                        <span v-if="scope.row.type == 'Motor Vehicle|Person'">机动车|行人</span>
+                        <span v-if="scope.row.type == 'Person|Non_Motor'">行人|非机动车</span>
+                        <span v-if="scope.row.type == 'Person|Motor Vehicle'">行人|机动车</span>
+                        <span v-if="scope.row.type == 'Person|Non_Motor|Motor Vehicle'">行人|非机动车|机动车</span>
+                        <span v-if="scope.row.type == 'Person|Motor Vehicle|Non_Motor'">行人|非机动车|机动车</span>
+                        <span v-if="scope.row.type == 'Non_Motor|Person|Motor Vehicle'">行人|非机动车|机动车</span>
+                        <span v-if="scope.row.type == 'Non_Motor|Motor Vehicle|Person'">行人|非机动车|机动车</span>
+                        <span v-if="scope.row.type == 'Motor Vehicle|Non_Motor|Person'">行人|非机动车|机动车</span>
+                        <span v-if="scope.row.type == 'Motor Vehicle|Person|Non_Motor'">行人|非机动车|机动车</span>
+                        <span v-if="scope.row.type == 'Non_Motor|Motor Vehicle'">非机动车|机动车</span>
+                        <span v-if="scope.row.type == 'Non_Motor|Person'">非机动车|行人</span>
+                    </template> -->
+                </el-table-column>
+                <el-table-column align="center" prop="n_stay" label="存车数"></el-table-column>
+                <el-table-column align="center" prop="n_queue" label="排队数"></el-table-column>
+                <el-table-column align="center" prop="occ" label="占用状态"></el-table-column>
+                <el-table-column align="center" prop="speed" label="空间平均速度">
+                    <template slot-scope="scope">
+                        {{
+                            scope.row.speed && scope.row.speed != '-' && scope.row.speed != '-1'
+                                ? Math.abs(scope.row.speed)
+                                : scope.row.speed == '-1'
+                                ? '-'
+                                : scope.row.speed
+                        }}
+                    </template>
+                </el-table-column>
+            </el-table>
+            <el-table :data="msg" height="609" 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>
+                <el-table-column align="center" prop="time" label="时间戳"></el-table-column>
+                <!-- <el-table-column align="center" prop="" label="视频帧"></el-table-column> -->
+                <el-table-column align="center" label="目标类型" prop="type">
+                    <template slot-scope="scope">
+                        {{getNameFromTargetType(scope.row.type)}}
+                    </template>
+                    <!-- <template slot-scope="scope">
+                        <span v-if="scope.row.type == 'Person'">行人</span>
+                        <span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
+                        <span v-if="scope.row.type == 'Non_Motor'">非机动车</span>
+                        <span v-if="scope.row.type == 'Motor Vehicle|Non_Motor'">机动车|非机动车</span>
+                        <span v-if="scope.row.type == 'Motor Vehicle|Person'">机动车|行人</span>
+                        <span v-if="scope.row.type == 'Person|Non_Motor'">行人|非机动车</span>
+                        <span v-if="scope.row.type == 'Person|Motor Vehicle'">行人|机动车</span>
+                        <span v-if="scope.row.type == 'Person|Non_Motor|Motor Vehicle'">行人|非机动车|机动车</span>
+                        <span v-if="scope.row.type == 'Person|Motor Vehicle|Non_Motor'">行人|非机动车|机动车</span>
+                        <span v-if="scope.row.type == 'Non_Motor|Person|Motor Vehicle'">行人|非机动车|机动车</span>
+                        <span v-if="scope.row.type == 'Non_Motor|Motor Vehicle|Person'">行人|非机动车|机动车</span>
+                        <span v-if="scope.row.type == 'Motor Vehicle|Non_Motor|Person'">行人|非机动车|机动车</span>
+                        <span v-if="scope.row.type == 'Motor Vehicle|Person|Non_Motor'">行人|非机动车|机动车</span>
+                        <span v-if="scope.row.type == 'Non_Motor|Motor Vehicle'">非机动车|机动车</span>
+                        <span v-if="scope.row.type == 'Non_Motor|Person'">非机动车|行人</span>
+                    </template> -->
+                </el-table-column>
+                <el-table-column align="center" prop="n_stay" label="存车数"></el-table-column>
+                <el-table-column align="center" prop="n_queue" label="排队数"></el-table-column>
+                <el-table-column align="center" prop="occ" label="占用状态"></el-table-column>
+                <el-table-column align="center" prop="speed" label="空间平均速度">
+                    <template slot-scope="scope">
+                        {{
+                            scope.row.speed && scope.row.speed != '-' && scope.row.speed != '-1'
+                                ? Math.abs(scope.row.speed)
+                                : scope.row.speed == '-1'
+                                ? '-'
+                                : scope.row.speed
+                        }}
+                    </template>
+                </el-table-column>
+            </el-table>
+
+            <!-- 固定间隔 -->
+            <el-table :data="msg" height="609" 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="time" label="时间戳"></el-table-column>
+                <el-table-column align="center" prop="interval" label="时间序号"></el-table-column>
+                <el-table-column align="center" prop="type" label="目标类型">
+                    <template slot-scope="scope">
+                        {{getNameFromTargetType(scope.row.type)}}
+                    </template>
+                    <!-- <template slot-scope="scope">
+                        <span v-if="scope.row.type == 'Person'">行人</span>
+                        <span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
+                        <span v-if="scope.row.type == 'Non_Motor'">非机动车</span>
+                        <span v-if="scope.row.type == 'Motor Vehicle|Non_Motor'">机动车|非机动车</span>
+                        <span v-if="scope.row.type == 'Motor Vehicle|Person'">机动车|行人</span>
+                        <span v-if="scope.row.type == 'Person|Non_Motor'">行人|非机动车</span>
+                        <span v-if="scope.row.type == 'Person|Non_Motor|Motor Vehicle'">行人|非机动车|机动车</span>
+                        <span v-if="scope.row.type == 'Person|Motor Vehicle|Non_Motor'">行人|非机动车|机动车</span>
+                        <span v-if="scope.row.type == 'Non_Motor|Person|Motor Vehicle'">行人|非机动车|机动车</span>
+                        <span v-if="scope.row.type == 'Non_Motor|Motor Vehicle|Person'">行人|非机动车|机动车</span>
+                        <span v-if="scope.row.type == 'Motor Vehicle|Non_Motor|Person'">行人|非机动车|机动车</span>
+                        <span v-if="scope.row.type == 'Motor Vehicle|Person|Non_Motor'">行人|非机动车|机动车</span>
+                        <span v-if="scope.row.type == 'Non_Motor|Motor Vehicle'">非机动车|机动车</span>
+                        <span v-if="scope.row.type == 'Non_Motor|Person'">非机动车|行人</span>
+                    </template> -->
+                </el-table-column>
+                <el-table-column align="center" prop="in_flow" label="入流流量"></el-table-column>
+                <el-table-column align="center" prop="out_flow" label="出流流量"></el-table-column>
+                <el-table-column align="center" prop="flow" label="断面流量"></el-table-column>
+                <el-table-column align="center" prop="in_spd" label="入流平均速度">
+                    <template slot-scope="scope">
+                        {{
+                            scope.row.in_spd && scope.row.in_spd != '-' && scope.row.speed != '-1'
+                                ? Math.abs(scope.row.in_spd)
+                                : scope.row.in_spd == '-1'
+                                ? '-'
+                                : scope.row.in_spd
+                        }}
+                    </template>
+                </el-table-column>
+                <el-table-column align="center" prop="out_spd" label="出流平均速度">
+                    <template slot-scope="scope">
+                        {{
+                            scope.row.out_spd && scope.row.out_spd != '-' && scope.row.out_spd != '-1'
+                                ? Math.abs(scope.row.out_spd)
+                                : scope.row.out_spd == '-1'
+                                ? '-'
+                                : scope.row.out_spd
+                        }}
+                    </template>
+                </el-table-column>
+                <el-table-column align="center" prop="speed" label="断面的平均速度">
+                    <template slot-scope="scope">
+                        {{
+                            scope.row.speed && scope.row.speed != '-' && scope.row.speed != '-1'
+                                ? Math.abs(scope.row.speed)
+                                : scope.row.speed == '-1'
+                                ? '-'
+                                : scope.row.speed
+                        }}
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+        <div v-else>
+            <el-empty :image-size="100"></el-empty>
+        </div>
+        <el-dialog title="编辑" :append-to-body="true" :visible.sync="dialogVisible" width="40%">
+            <el-form :model="msg" label-width="80px">
+                <el-form-item label="val1">
+                    <el-time-select
+                        placeholder="起始时间"
+                        v-model="startTime"
+                        :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }"
+                    >
+                    </el-time-select>
+                    <el-time-select
+                        placeholder="结束时间"
+                        v-model="endTime"
+                        :picker-options="{ start: '08:30', step: '00:15', end: '18:30', minTime: startTime }"
+                    >
+                    </el-time-select>
+                </el-form-item>
+                <el-form-item label="val2">
+                    <el-select v-model="value" placeholder="请选择">
+                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+                    </el-select>
+                </el-form-item>
+                <!-- <el-form-item label="val3">
+                    <el-input v-model="msg[0].val3"></el-input>
+                </el-form-item> -->
+                <el-form-item label="val4">
+                    <el-checkbox-group v-model="checkList">
+                        <el-checkbox label="数值"></el-checkbox>
+                        <el-checkbox label="表格"></el-checkbox>
+                        <el-checkbox label="时间曲线图"></el-checkbox>
+                        <el-checkbox label="均值图"></el-checkbox>
+                    </el-checkbox-group>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary">确认</el-button>
+                    <el-button @click="dialogVisible = false">取消</el-button>
+                </el-form-item>
+            </el-form>
+        </el-dialog>
+    </div>
+</template>
+  
+<script>
+import { getNameFromTargetType } from '@/utils/targetType';
+export default {
+    name: 'tableShow', //表格组件
+    props: {
+        msg: {
+            type: Array,
+            default() {
+                return [];
+            }
+        },
+        triggerType: {
+            type: String
+        }
+    },
+    data() {
+        return {
+            getNameFromTargetType,
+            dialogVisible: false,
+            startTime: '',
+            endTime: '',
+            checkList: ['复选框 A'],
+            options: [
+                {
+                    value: '选项1',
+                    label: '黄金糕'
+                },
+                {
+                    value: '选项2',
+                    label: '双皮奶'
+                },
+                {
+                    value: '选项3',
+                    label: '蚵仔煎'
+                },
+                {
+                    value: '选项4',
+                    label: '龙须面'
+                },
+                {
+                    value: '选项5',
+                    label: '北京烤鸭'
+                }
+            ],
+            value: ''
+        };
+    },
+    watch: {
+        msg: {
+            handler(newVal) {
+                // console.log('断面', newVal);
+                // console.log('断面-triggerType', this.triggerType);
+            }
+            // immediate: true
+        }
+    },
+    methods: {
+        handleCommand(command) {
+            // 用户名下拉菜单选择事件
+            if (command == 'show') {
+                this.dialogVisible = true;
+            }
+        },
+        onSubmit() {},
+        handleClose() {}
+    },
+    mounted() {}
+};
+</script>
+<style scoped lang="scss">
+/deep/ .el-table {
+    // height: 709px !important;
+    // overflow-y: scroll;
+    z-index: 900;
+}
+.el-table::-webkit-scrollbar {
+    width: 0 !important;
+}
+.tableContent {
+    position: relative;
+}
+
+.down {
+    position: absolute;
+    top: -35px;
+    right: 5px;
+    z-index: 100;
+}
+
+.down .moreIcon {
+    width: 5px;
+    height: 18px;
+    background-size: 5px 18px;
+    background-image: url(../../assets/img/more.png);
+    display: block;
+}
+
+.el-form-item {
+    margin-bottom: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/newchart/thermalChart.vue b/src/components/newchart/thermalChart.vue
new file mode 100644
index 0000000..0c3c69e
--- /dev/null
+++ b/src/components/newchart/thermalChart.vue
@@ -0,0 +1,217 @@
+<template>
+    <div id="thermalChart" ref="thermalChart" style="width: 705px; height: 300px"></div>
+</template>
+
+<script>
+export default {
+    name: 'thermalChart', //热点图组件
+    data() {
+        return {
+            thermalChartData: []
+        };
+    },
+    created() {},
+    props: {
+        list: {
+            type: Array,
+            default() {
+                return [];
+            }
+        },
+        pageType: {
+            type: String
+        },
+        title: {
+            type: String
+        },
+        startEndData:{
+            type:Object,
+            default() {
+                return {};
+            }
+        }
+        // status: {
+        //     type: String
+        // },
+        // componentName: {
+        //     type: String
+        // },
+    },
+    methods: {
+        //处理od组件数据
+        ODhanlde(odData) {
+            // console.log(odData,'oddata');
+            // var odData = this.odData
+            var chartData = [];
+            var start = [];
+            if (odData && odData.length > 0) {
+                for (let i = 0; i < odData.length; i++) {
+                    let item = odData[i].data;
+                    if (item && item.length > 0) {
+                        for (let j = 0; j < item.length; j++) {
+                            start.push(item[j].start);
+                            // 数组去重
+
+                            // od图的数据
+                            chartData.push([i, j, item[j].quantity]);
+                            // console.log([i,j,item[j].val]);
+                        }
+                    }
+                }
+            }
+            // this.thermalChartData = chartData
+            // console.log(chartData,'处理过后的odssssssssssssss');
+            return chartData;
+            // console.log(chartData, this.unique(start), 'od图的数据');
+        },
+        //数组去重
+        unique(arr) {
+            let newArr = [];
+            arr.forEach((item) => {
+                return newArr.includes(item) ? '' : newArr.push(item);
+            });
+            return newArr;
+        },
+        isObject(variable) {
+            return typeof variable === 'object' && variable !== null && !Array.isArray(variable);
+        },
+        // 绘制热力图
+        drawThermalChart(odData, startEnd) {
+            let startEndStart = [],
+                startEndEnd = [];
+            if (this.isObject(startEnd)) {
+                if (startEnd.start) {
+                    startEndStart = startEnd.start.split(',');
+                }
+                if (startEnd.start) {
+                    startEndEnd = startEnd.end.split(',');
+                }
+            }
+            let myChart = this.$echarts.init(this.$refs.thermalChart);
+            let option = {
+                dataZoom: [
+                    {
+                        id: 'dataZoomY',
+                        type: 'slider',
+                        yAxisIndex: [0],
+                        startValue: 0,
+                        endValue: 10,
+                        filterMode: 'empty'
+                    }
+                ],
+                tooltip: {
+                    position: 'top'
+                    // formatter: function (params) {
+                    //     return (
+                    //         "学历：" + days[params.value[1]] + "<br/>" + "人数：" + params.data[2]
+                    //     );
+                    // },
+                },
+                animation: false,
+                grid: {
+                    left: '3%',
+                    right: '8%',
+                    bottom: '8%',
+                    containLabel: true
+                },
+                xAxis: {
+                    type: 'category',
+                    data: startEndStart,
+                    axisLine: {
+                        lineStyle: {
+                            color: '#000'
+                        }
+                    },
+                    axisLabel: {
+                        interval: 0,
+                        rotate: 40
+                    },
+                    splitArea: {
+                        show: true
+                    }
+                    // name: "镇街",
+                },
+                yAxis: {
+                    type: 'category',
+                    data: startEndEnd,
+                    axisLine: {
+                        lineStyle: {
+                            color: '#000'
+                        }
+                    },
+                    axisLabel: {
+                        interval: 0,
+                        rotate: 40
+                    },
+                    splitArea: {
+                        show: true
+                    }
+                    // name: "",
+                },
+                visualMap: {
+                    min: 1,
+                    max: 50,
+                    calculable: true,
+                    orient: 'horizontal',
+                    left: 'center',
+                    bottom: '1%',
+                    text: ['50', '1'], // 文本，默认为数值文本
+                    //color:['#20a0ff','#D2EDFF'],
+                    calculable: false,
+                    color: ['#22DDDD', '#fec42c', '#80F1BE']
+                },
+                series: [
+                    {
+                        name: 'OD图',
+                        type: 'heatmap',
+                        data: this.ODhanlde(odData),
+                        label: {
+                            normal: {
+                                show: true
+                            }
+                        },
+                        itemStyle: {
+                            emphasis: {
+                                shadowBlur: 10,
+                                shadowColor: 'rgba(120, 0, 0, 0.5)'
+                            }
+                        }
+                    }
+                ]
+            };
+            if (myChart) {
+                myChart.setOption(option);
+                window.addEventListener('resize', function () {
+                    myChart.resize();
+                });
+            }
+
+            //   this.$nextTick(() => {
+            //     myChart.setOption(option)
+            //     myChart.resize();
+            // })
+        }
+    },
+    mounted() {
+        this.drawThermalChart()
+    },
+    watch: {
+        list: {
+            handler: function (newval, oldVal) {
+                if (newval && newval.length > 0) {
+                    this.$nextTick(() => {
+                        this.drawThermalChart(newval[0].ob_data,this.startEndData);
+                    });
+                }
+            },
+            deep: true
+            // immediate: true
+        }
+    }
+};
+</script>
+<style scoped>
+.a{
+    color: rgba(120, 0, 0, 0.5);
+}
+</style>
diff --git a/src/components/sensorFusion/echartsPie.vue b/src/components/sensorFusion/echartsPie.vue
index 0ff0b99..19d585c 100644
--- a/src/components/sensorFusion/echartsPie.vue
+++ b/src/components/sensorFusion/echartsPie.vue
@@ -97,10 +97,10 @@ export default {
             if(seriesData&&seriesData.length>0){
                 let temp=[];
                 seriesData.forEach((ele) => {
-                    if (ele.value != 0) {
+                    // if (ele.value != 0) {
                         ele.name = getNameFromTargetType(ele.name);
                         temp.push(ele)
-                    }
+                    // }
                 })
                 seriesData = temp
             }
diff --git a/src/components/sensorFusion/meanValue.vue b/src/components/sensorFusion/meanValue.vue
index 5fe6169..e77cfce 100644
--- a/src/components/sensorFusion/meanValue.vue
+++ b/src/components/sensorFusion/meanValue.vue
@@ -65,64 +65,71 @@ export default {
     },
     methods: {
         initEcharts() {
-            this.max = [];
-            this.min = [];
-            this.med = [];
-            this.avg = [];
-            // console.log("均值图",arr)
-            // let myChart = this.$echarts.getInstanceByDom(this.$refs.barChart);
-            // if (myChart == null) {
-            //     myChart = this.$echarts.init(this.$refs.barChart);
+            // this.max = [];
+            // this.min = [];
+            // this.med = [];
+            // this.avg = [];
+            // // console.log("均值图",arr)
+            // // let myChart = this.$echarts.getInstanceByDom(this.$refs.barChart);
+            // // if (myChart == null) {
+            // //     myChart = this.$echarts.init(this.$refs.barChart);
+            // // }
+            // // this.dataProcessing(this.dataList);
+            // if (this.dataList.length > 10) {
+            //     this.dataList = this.dataList.slice(-10);
             // }
-            // this.dataProcessing(this.dataList);
-            if (this.dataList.length > 10) {
-                this.dataList = this.dataList.slice(-10);
-            }
-            for (let i = 0; i < this.dataList.length; i++) {
-                if (this.dataList[i].max) {
-                    this.max.push(Math.abs(this.dataList[i].max.toFixed(2)));
-                } else {
-                    this.max.push(0);
-                }
+            // for (let i = 0; i < this.dataList.length; i++) {
+            //     if (this.dataList[i].max) {
+            //         this.max.push(Math.abs(this.dataList[i].max.toFixed(2)));
+            //     } else {
+            //         this.max.push(0);
+            //     }
 
-                if (this.dataList[i].min) {
-                    this.min.push(Math.abs(this.dataList[i].min.toFixed(2)));
-                } else {
-                    this.min.push(0);
-                }
+            //     if (this.dataList[i].min) {
+            //         this.min.push(Math.abs(this.dataList[i].min.toFixed(2)));
+            //     } else {
+            //         this.min.push(0);
+            //     }
 
-                if (this.dataList[i].med) {
-                    this.med.push(Math.abs(this.dataList[i].med.toFixed(2)));
-                } else {
-                    this.med.push(0);
-                }
+            //     if (this.dataList[i].med) {
+            //         this.med.push(Math.abs(this.dataList[i].med.toFixed(2)));
+            //     } else {
+            //         this.med.push(0);
+            //     }
 
-                if (this.dataList[i].avg) {
-                    this.avg.push(Math.abs(this.dataList[i].avg.toFixed(2)));
-                } else {
-                    this.avg.push(0);
-                }
+            //     if (this.dataList[i].avg) {
+            //         this.avg.push(Math.abs(this.dataList[i].avg.toFixed(2)));
+            //     } else {
+            //         this.avg.push(0);
+            //     }
 
-                // this.max.push(Math.abs(this.dataList[i].max.toFixed(2)));
-                // this.min.push(Math.abs(this.dataList[i].min.toFixed(2)));
-                // this.med.push(Math.abs(this.dataList[i].med.toFixed(2)));
-                // this.avg.push(Math.abs(this.dataList[i].avg.toFixed(2)));
-            }
+            //     // this.max.push(Math.abs(this.dataList[i].max.toFixed(2)));
+            //     // this.min.push(Math.abs(this.dataList[i].min.toFixed(2)));
+            //     // this.med.push(Math.abs(this.dataList[i].med.toFixed(2)));
+            //     // this.avg.push(Math.abs(this.dataList[i].avg.toFixed(2)));
+            // }
             let maxData = '';
             let minData = '';
             let medData = '';
             let avgData = '';
-            for (let i = 0; i < this.max.length; i++) {
-                maxData = this.max[i];
-            }
-            for (let i = 0; i < this.min.length; i++) {
-                minData = this.min[i];
-            }
-            for (let i = 0; i < this.med.length; i++) {
-                medData = this.med[i];
-            }
-            for (let i = 0; i < this.avg.length; i++) {
-                avgData = this.avg[i];
+            // for (let i = 0; i < this.max.length; i++) {
+            //     maxData = this.max[i];
+            // }
+            // for (let i = 0; i < this.min.length; i++) {
+            //     minData = this.min[i];
+            // }
+            // for (let i = 0; i < this.med.length; i++) {
+            //     medData = this.med[i];
+            // }
+            // for (let i = 0; i < this.avg.length; i++) {
+            //     avgData = this.avg[i];
+            // }
+            let arr = this.dataList[0]||{}
+            if (arr && Object.keys(arr).length > 0) {
+                avgData = arr.avg ? Math.abs(arr.avg).toFixed(2) : 0;
+                medData = arr.med ? Math.abs(arr.med).toFixed(2) : 0;
+                maxData = arr.max ? Math.abs(arr.max).toFixed(2) : 0;
+                minData = arr.min ? Math.abs(arr.min).toFixed(2) : 0;
             }
             let myChart = this.chart;
             let chartData = [{ stage: '', number: 40 }];
@@ -310,45 +317,51 @@ export default {
         }, 300);
     },
     watch: {
-        intersectionName: {
-            handler: function (oldValues, newValues) {
-                this.$nextTick(() => {
-                    this.initEcharts();
-                });
-            }
-        },
-        chatShowType: {
-            handler: function (oldValues, newValues) {
-                let that = this;
-                setTimeout(() => {
-                    that.$nextTick(() => {
-                        this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
-                        if (this.chart == null) {
-                            this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
-                        }
-                        that.initEcharts();
-                    });
-                }, 300);
-            }
-        },
-        echartsRef: {
-            handler: function (oldValues, newValues) {
-                console.log('old', oldValues);
-                console.log('newV', newValues);
-                let that = this;
-                setTimeout(() => {
-                    that.$nextTick(() => {
-                        this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
-                        if (this.chart == null) {
-                            this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
-                        }
-                        that.initEcharts();
-                    });
-                }, 300);
-            }
-        },
+        // intersectionName: {
+        //     handler: function (oldValues, newValues) {
+        //         this.$nextTick(() => {
+        //             this.initEcharts();
+        //         });
+        //     }
+        // },
+        // chatShowType: {
+        //     handler: function (oldValues, newValues) {
+        //         let that = this;
+        //         setTimeout(() => {
+        //             that.$nextTick(() => {
+        //                 this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
+        //                 if (this.chart == null) {
+        //                     this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
+        //                 }
+        //                 that.initEcharts();
+        //             });
+        //         }, 300);
+        //     }
+        // },
+        // echartsRef: {
+        //     handler: function (newValues, oldValues) {
+        //         console.log('old', oldValues);
+        //         console.log('newV', newValues);
+        //         let that = this;
+        //         setTimeout(() => {
+        //             that.$nextTick(() => {
+        //                 this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
+        //                 if (this.chart == null) {
+        //                     this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
+        //                 }
+        //                 that.initEcharts();
+        //             });
+        //         }, 300);
+        //     }
+        // },
         dataList: {
-            handler: function (oldValues, newValues) {
+            handler: function (newValues, oldValues) {
+                // if(newValues&&newValues.length>0) {
+                //     if(newValues[0].name=='gate1'){
+                //         console.log('newV', newValues);
+                //     }
+                // }
+                
                 this.$nextTick(() => {
                     this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
                     if (this.chart == null) {
diff --git a/src/components/target/newtypeChart.vue b/src/components/target/newtypeChart.vue
new file mode 100644
index 0000000..bebc396
--- /dev/null
+++ b/src/components/target/newtypeChart.vue
@@ -0,0 +1,404 @@
+<template>
+    <!-- 触发类型 -->
+    <div class="setion">
+        <!-- <p class="chartTitle"><span class="titleIcon"></span> {{ componentName }} {{ triggerType }}</p> -->
+        <!-- 触发数据数值渲染 -->
+        <div class="typeContent">
+            <div v-if="newDataArr && newDataArr.length > 0">
+                <div v-if="title == '类型'" style="display: flex; flex-wrap: wrap">
+                    <el-card
+                        v-for="(n, i) in latestDataArr.type_data"
+                        :key="i"
+                        style="width: 150px; margin-bottom: 20px; text-align: center"
+                    >
+                        <div>
+                            <span style="font-size: 15px">{{ getNameFromTargetType(n.name) }}</span
+                            ><br />
+                            <span style="font-size: 30px; font-weight: bold">{{
+                                n.quantity || n.quantity === 0 ? n.quantity : ' - '
+                            }}</span>
+                            <span style="font-size: 15px" v-if="n.quantity || n.quantity === 0"> 个</span>
+                        </div>
+                        <div>
+                            <div>
+                                {{ latestDataArr.time ? latestDataArr.time : '' }}
+                            </div>
+                        </div>
+                    </el-card>
+                </div>
+            </div>
+            <el-card v-show="echartArr.includes('数值')" class="spacialCard">
+                <div v-if="newDataArr && newDataArr.length > 0">
+                    <div v-if="title == '类型'">
+                        <span style="font-size: 15px">类型数量总和</span><br />
+                        <span style="font-size: 30px; font-weight: bold">
+                            {{ getTotal(newDataArr) }}
+                        </span>
+                        <span style="font-size: 15px">个</span>
+                    </div>
+                    <div style="font-size: 30px; font-weight: bold" v-if="title == '速度' && dataArr && dataArr.length > 0">
+                        <span style="font-size: 15px">速度</span><br />
+
+                        <!-- <span style="font-size: 30px; font-weight: bold">{{ typeValue.speed }}</span> -->
+                        <span style="font-size: 30px; font-weight: bold">
+                            <span v-if="(latestDataArr.speed && latestDataArr.speed != -1) || latestDataArr.speed === 0">
+                                {{ Math.abs(latestDataArr.speed) }}
+                            </span>
+                            <span v-else> - </span>
+                        </span>
+                        <span style="font-size: 20px; font-weight: 200">
+                            <span v-if="(latestDataArr.speed && latestDataArr.speed != -1) || latestDataArr.speed === 0">
+                                {{ latestDataArr.speed > 0 || latestDataArr.speed === 0 ? 'km/h' : 'pix/s' }}
+                            </span>
+                        </span>
+                    </div>
+                    <div style="font-size: 30px; font-weight: bold" v-if="title == '流量' && dataArr && dataArr.length > 0">
+                        <span style="font-size: 15px">流量</span><br />
+                        <span style="font-size: 30px; font-weight: bold" v-if="itemData.flowType && itemData.flowType == '出流'">{{
+                            latestDataArr.out_flow || latestDataArr.out_flow === 0 ? latestDataArr.out_flow : ' - '
+                        }}</span>
+                        <span style="font-size: 30px; font-weight: bold" v-if="itemData.flowType && itemData.flowType == '入流'">{{
+                            latestDataArr.in_flow || latestDataArr.in_flow === 0 ? latestDataArr.in_flow : ' - '
+                        }}</span>
+                        <span style="font-size: 20px; font-weight: 200">辆</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">{{
+                            latestDataArr.headway || latestDataArr.headway === 0
+                                ? latestDataArr.headway == -1
+                                    ? ' - '
+                                    : latestDataArr.headway
+                                : ' - '
+                        }}</span>
+                        <!-- <span style="font-size: 30px; font-weight: bold">100</span> -->
+                        <span style="font-size: 20px; font-weight: 200">秒</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">
+                            {{
+                                latestDataArr.n_queue || latestDataArr.n_queue === 0
+                                    ? latestDataArr.n_queue == -1
+                                        ? ' - '
+                                        : latestDataArr.n_queue
+                                    : ' - '
+                            }}
+                        </span>
+                        <span style="font-size: 20px; font-weight: 200">辆</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">{{
+                            latestDataArr.n_stay || latestDataArr.n_stay === 0 ? latestDataArr.n_stay : ' - '
+                        }}</span>
+                        <span style="font-size: 20px; font-weight: 200">辆</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">{{
+                            latestDataArr.ave_delay || latestDataArr.ave_delay === 0 ? latestDataArr.ave_delay : ' - '
+                        }}</span>
+                        <span style="font-size: 20px; font-weight: 200">秒</span>
+                    </div>
+                    <div>
+                        <div v-if="latestDataArr.time">
+                            <!-- {{ latestDataArr.time ? latestDataArr.time : '' }} -->
+                            <div>{{ latestDataArr.time.slice(0, 11) }}</div>
+                            <div>{{ latestDataArr.time.slice(11) }}</div>
+                        </div>
+                    </div>
+                </div>
+                <div v-else>
+                    <el-empty :image-size="100"></el-empty>
+                </div>
+            </el-card>
+        </div>
+        <div v-show="echartArr.includes('表格')">
+            <div class="tableTitle" v-if="newDataArr && newDataArr.length > 0">
+                <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 + '-' + '表格' + '-' + triggerType }}</span>
+                </div>
+                <div class="tableTime">
+                    {{ newDataArr[0].time ? newDataArr[0].time : '' }}
+                </div>
+            </div>
+            <div v-if="pageType == '断面'" style="margin-bottom: 20px; border: 1px solid #e4e7ed">
+                <tableShow :msg="newDataArrAbs" :triggerType="triggerType" />
+            </div>
+            <div v-if="pageType == '区域'">
+                <regionTable :msg="newDataArrAbs" :triggerType="triggerType" />
+            </div>
+        </div>
+        <div class="border" v-if="echartArr.includes('曲线图')">
+            <detailDialog />
+            <lineChart
+                :componentName="componentName"
+                :itemData="itemData"
+                :originalDataArr="newDataArr"
+                :chartName="chartName"
+                :pageType="pageType"
+                :list="newDataArrAbs"
+                :status="triggerType"
+                :title="title"
+                :typeValue="typeValue"
+                ref="lineChartRef"
+            />
+        </div>
+        <div class="border" v-if="echartArr.includes('饼状图')">
+            <detailDialog />
+            <pieChart
+                :componentName="componentName"
+                :chartName="chartName"
+                :pageType="pageType"
+                :list="newDataArrAbs"
+                :status="triggerType"
+                :title="title"
+                :typeValue="typeValue"
+                ref="pieChartRef"
+            />
+        </div>
+        <div class="border" v-if="echartArr.includes('均值图')">
+            <detailDialog />
+            <avgChart
+                ref="avgChartRef"
+                :componentName="componentName"
+                :chartName="chartName"
+                :pageType="pageType"
+                :list="newDataArrAbs"
+                :status="triggerType"
+                :title="title"
+                :typeValue="typeValue"
+            />
+        </div>
+        <div class="border" v-if="echartArr.includes('直方图')">
+            <detailDialog />
+            <barChart
+                :componentName="componentName"
+                :chartName="chartName"
+                :pageType="pageType"
+                :list="newDataArrAbs"
+                :status="triggerType"
+                :title="title"
+                :typeValue="typeValue"
+                ref="barChartRef"
+            />
+        </div>
+        <div class="border" v-if="echartArr.includes('矩阵图')">
+            <detailDialog />
+            <thermalChart
+                :componentName="componentName"
+                :pageType="pageType"
+                :list="newDataArrAbs"
+                :status="triggerType"
+                :title="title"
+                :typeValue="typeValue"
+                :startEndData="startEndData"
+                ref="ODChartRef"
+            />
+        </div>
+    </div>
+</template>
+
+<script>
+import _ from 'lodash';
+import avgChart from '../newchart/avgChart.vue';
+import lineChart from '../newchart/lineChart.vue';
+import barChart from '../newchart/barChart.vue';
+import tableShow from '../newchart/tableShow.vue';
+import pieChart from '../newchart/pieChart.vue';
+import detailDialog from '../newchart/detailDialog.vue';
+import regionTable from '../newchart/regionTable.vue';
+import thermalChart from '../newchart/thermalChart.vue';
+import { getNameFromTargetType } from '@/utils/targetType';
+export default {
+    name: 'typeChart', //类型组件
+    props: [
+        'typeValue',
+        'itemData',
+        'pageType',
+        'triggerType',
+        'dataArr',
+        'cycleAccumulateData',
+        'echartArr',
+        'componentName',
+        'title',
+        'chartName',
+        'startEndData'
+    ],
+    components: {
+        lineChart,
+        barChart,
+        tableShow,
+        detailDialog,
+        regionTable,
+        pieChart,
+        avgChart,
+        thermalChart
+    },
+    data() {
+        return {
+            getNameFromTargetType
+        };
+    },
+    created() {},
+    methods: {
+        // 计算类型数量的总和
+        // getDataArr(val) {
+        //     this.newDataArr = val;
+        //     this.getNewQueue(this.newDataArr);
+        // },
+        getTotal(dataArr) {
+            if (this.title == '类型') {
+                if (dataArr && dataArr.length > 0) {
+                    if (dataArr[0].type_data && dataArr[0].type_data.length > 0) {
+                        return dataArr[0].type_data.reduce(function (prev, cur) {
+                            return cur.quantity + prev;
+                        }, 0);
+                    }
+                    return 0;
+                }
+                return 0;
+            }
+        }
+    },
+
+    computed: {
+        latestDataArr() {
+            //最新一条数据
+            if (this.dataArr && this.dataArr.length > 0) {
+                let latestDataArr = _.cloneDeep(this.dataArr[0]);
+                return latestDataArr;
+            }
+            if (this.cycleAccumulateData && this.cycleAccumulateData.length > 0) {
+                let latestDataArr = _.cloneDeep(this.cycleAccumulateData[0]);
+                return latestDataArr;
+            }
+            return {};
+        },
+        newDataArr() {
+            if (this.dataArr && this.dataArr.length > 0) {
+                let dataArr = _.cloneDeep(this.dataArr);
+                return dataArr;
+            }
+            return [];
+        },
+        // 处理数据图表数据-1需要改成‘-’
+        newDataArrAbs() {
+            // console.log('newDataArrAbs1', this.newDataArr);
+            let arr = [];
+            if (this.newDataArr.length > 0) {
+                let newlist = JSON.parse(JSON.stringify(this.newDataArr));
+                for (const item of newlist) {
+                    if (!isNaN(item.speed) && (item.speed !== -1 || item.speed === 0)) {
+                        item.speed = Math.abs(item.speed);
+                    } else {
+                        item.speed = '-';
+                    }
+
+                    if (!isNaN(item.flow) && (item.headway !== -1 || item.headway === 0)) {
+                        item.flow = item.flow;
+                    } else {
+                        item.flow = '-';
+                    }
+
+                    if (!isNaN(item.headway) && (item.headway !== -1 || item.headway === 0)) {
+                        item.headway = item.headway;
+                    } else {
+                        item.headway = '-';
+                    }
+
+                    if (!isNaN(item.n_stay) && (item.n_stay !== -1 || item.n_stay === 0)) {
+                        item.n_stay = item.n_stay;
+                    } else {
+                        item.n_stay = '-';
+                    }
+
+                    if (!isNaN(item.n_queue) && (item.n_queue !== -1 || item.n_queue === 0)) {
+                        item.n_queue = item.n_queue;
+                    } else {
+                        item.n_queue = '-';
+                    }
+                    if (!isNaN(item.ave_queue) && (item.ave_queue !== -1 || item.ave_queue === 0)) {
+                        item.n_queue = item.ave_queue;
+                    } else {
+                        item.ave_queue = '-';
+                    }
+
+                    if (!isNaN(item.ave_delay) && (item.ave_delay !== -1 || item.ave_delay === 0)) {
+                        item.ave_delay = item.ave_delay;
+                    } else {
+                        item.ave_delay = '-';
+                    }
+                    if (!isNaN(item.in_spd) && (item.in_spd !== -1 || item.in_spd === 0)) {
+                        item.in_spd = item.in_spd;
+                    } else {
+                        item.in_spd = '-';
+                    }
+                    if (!isNaN(item.out_spd) && (item.out_spd !== -1 || item.out_spd === 0)) {
+                        item.out_spd = item.out_spd;
+                    } else {
+                        item.out_spd = '-';
+                    }
+                    arr.push(Object.assign({}, item));
+                }
+            }
+            // console.log('triggerType',this.triggerType)
+            // console.log('newDataArrAbs2', arr);
+            return arr;
+        }
+    },
+    mounted() {},
+    watch: {
+        // 监听触发数据
+        // dataArr: {
+        //     handler(newVal) {
+        //         console.log('newtypeChart', newVal);
+        //         // if (newVal &&newVal.length >0) {
+        //         //     this.getNewQueue(newVal);
+        //         // }
+        //     },
+        //     immediate: true,
+        //     deep:true,
+        // }
+    }
+};
+</script>
+<style scoped>
+.spacialCard {
+    width: 150px;
+    margin-bottom: 20px;
+    text-align: center;
+}
+
+::v-deep.spacialCard .el-card__body {
+    padding: 10px;
+}
+
+.tableTitle {
+    background: #f7f8fa;
+    margin-bottom: 5px;
+    padding: 8px;
+}
+
+.typeContent {
+    box-sizing: border-box;
+}
+
+.border {
+    width: 100%;
+    margin-bottom: 20px;
+    position: relative;
+}
+</style>
diff --git a/src/views/bounced/dataBoard-old.vue b/src/views/bounced/dataBoard-old.vue
new file mode 100644
index 0000000..8bd6508
--- /dev/null
+++ b/src/views/bounced/dataBoard-old.vue
@@ -0,0 +1,1049 @@
+<template>
+    <div ref="box" class="box" v-loading="loading">
+        <el-empty v-show="!loading&&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'">
+                <!-- 断面 -->
+                <!-- :class="sectionData.length <= 1 ? 'sectionBox' : 'section'" -->
+                <div class="plate1" ref="plate1">
+                    <div class="section" ref="section" v-for="s in sectionData" :key="s.analogAreaComponentId">
+                        <template>
+                            <div ref="sectionContent">
+                                <div>
+                                    <p class="board-title">
+                                        <span>{{ s.title }}</span>
+                                    </p>
+                                    <!-- <span class="downPull1" data-num="1" @click="sectionHandle(i)"></span> -->
+                                </div>
+                                <el-tabs>
+                                    <el-collapse v-model="acticveName" @change="handleChange">
+                                        <div style="position: relative" v-for="o in s.children" :key="o.analogAreaComponentId">
+                                            <div class="titleGnag"></div>
+                                            <el-collapse-item :title="o.componentName + o.timeMode" :name="o.analogAreaComponentId">
+                                                <!--触发的组件  -->
+                                                <typeChart
+                                                    ref="typeChartRef"
+                                                    v-if="o.timeMode === '实时触发'"
+                                                    :itemData="o"
+                                                    :pageType="o.graphicType"
+                                                    :triggerType="o.timeMode"
+                                                    :componentName="o.componentName"
+                                                    :dataArr="o.trigger"
+                                                    :echartArr="o.presentationForm"
+                                                    :title="o.componentName.split('_')[0]"
+                                                    :chartName="o.combinationName"
+                                                    :typeValue="typeTimeMode"
+                                                    :startEndData="{ start: o.startSectionNames, end: o.endSectionNames }"
+                                                />
+                                                <typeChart
+                                                    ref="typeChartRef1"
+                                                    v-if="o.timeMode === '固定时刻'"
+                                                    :itemData="o"
+                                                    :pageType="o.graphicType"
+                                                    :triggerType="o.timeMode"
+                                                    :componentName="o.componentName"
+                                                    :dataArr="o.cycleTimeData"
+                                                    :echartArr="o.presentationForm"
+                                                    :title="o.componentName.split('_')[0]"
+                                                    :chartName="o.combinationName"
+                                                    :typeValue="typeCycleTimeData"
+                                                    :startEndData="{ start: o.startSectionNames, end: o.endSectionNames }"
+                                                />
+
+                                                <!-- 固定间隔的组件 -->
+                                                <typeChart
+                                                    ref="typeChartRef2"
+                                                    style="width: 100%"
+                                                    v-if="o.timeMode === '固定间隔'"
+                                                    :itemData="o"
+                                                    :pageType="o.graphicType"
+                                                    :triggerType="o.timeMode"
+                                                    :componentName="o.componentName"
+                                                    :dataArr="o.cycleStatisticsData"
+                                                    :echartArr="o.presentationForm"
+                                                    :title="o.componentName.split('_')[0]"
+                                                    :chartName="o.combinationName"
+                                                    :typeValue="typeCycleStatistics"
+                                                    :startEndData="{ start: o.startSectionNames, end: o.endSectionNames }"
+                                                />
+                                            </el-collapse-item>
+                                        </div>
+                                    </el-collapse>
+                                </el-tabs>
+                            </div>
+                        </template>
+                    </div>
+                </div>
+            </div>
+        </el-scrollbar>
+        <!-- 详情框 -->
+    </div>
+</template>
+<script>
+import typeChart from '../../components/target/typeChart.vue';
+// import {mapMutation} from 'vuex'
+import { getComponentSection } from '../../api/index';
+export default {
+    components: {
+        typeChart
+    },
+    props: {
+        activeName: {
+            type: String
+        },
+        triggerData: {
+            type: Array,
+            default() {
+                return [];
+            }
+        },
+        // 触发数据
+        triggerListData: {
+            type: Array,
+            default() {
+                return [];
+            }
+        },
+        // 固定时刻数据
+        cycleTimeData: {
+            type: Array,
+            default() {
+                return [];
+            }
+        },
+        //固定间隔
+        cycleStatisticsData: {
+            type: Array,
+            default() {
+                return [];
+            }
+        },
+        //周期统计实时累计数据主题
+        cycleAccumulateData: {
+            type: Array,
+            default() {
+                return [];
+            }
+        },
+        //历史数据
+        cycleHistoryData: {
+            type: Object,
+            default() {
+                return {};
+            }
+        }
+    },
+    data() {
+        return {
+            loading:false,
+            acticveName: [],
+            title1: '01断面',
+            title2: '01区域',
+            dialogVisible: false,
+
+            idVal: '',
+            //组件数组
+            componentList: [],
+            // 触发数据数组
+            triggerList: [],
+
+            sectionData: [],
+
+            // 单个区域或者断面的表格触发数据
+            tableList: [],
+
+            // 路线数据
+            headWay: [],
+
+            tripData: [],
+
+            sectionArr: [],
+
+            //触发的类型数值看板显示
+            typeTimeMode: {},
+            // 固定时刻的数值看板展示
+            typeCycleTimeData: {},
+            typeCycleStatistics: {},
+
+            // 各个组件分类
+            classify: []
+            // cycleHistoryData:''
+        };
+    },
+    // beforeCeated(){
+
+    // },
+    created() {
+        // this.getNew()
+        // //console.log("cycleHistoryData",this.cycleHistoryData)
+    },
+    methods: {
+        // 手风琴下拉切换
+        handleChange(val) {
+            // setTimeout(() => {
+            //                 this.$nextTick(function () {
+            //         var myEvent = new Event("resize");
+            //         window.dispatchEvent(myEvent);
+            //     });
+            //     }, 3000);
+        },
+        getNew() {
+            // this.idVal = ;
+            this.loading=true;
+            getComponentSection({ VideoId: this.$route.query.id, Number: 10 }).then((res) => {
+                if (res.data.code == 200) {
+                    //console.log(res.data.data, '组件的数据');
+                    this.componentList = res.data.data;
+                    this.siftData();
+                }
+            }).finally(()=>{
+                this.loading=false;
+            });
+        },
+
+        siftData() {
+            this.sectionArr = [];
+            this.sectionData = [];
+            this.classify = [];
+            this.componentList.forEach((val) => {
+                //    //console.log("val",val)
+                this.sectionArr.push(val.combinationName);
+                this.sectionArr = Array.from(new Set(this.sectionArr));
+            });
+            this.sectionData = this.sectionArr.map((item) => {
+                item = { title: item, children: [] };
+                this.acticveName = [];
+                this.componentList.forEach((val) => {
+                    if (item.title == val.combinationName) {
+                        this.classify.push(val);
+                        item.children.push(val);
+                        if (val.timeMode == '固定间隔' || this.cycleStatisticsData.length == 0) {
+                            item.cycleStatisticsData = val.cycleStatisticsData;
+                        }
+                        if (val.timeMode == '固定时刻' || this.cycleTimeData.length == 0) {
+                            item.cycleTimeData = val.cycleTimeData;
+                        }
+                    }
+                    this.acticveName.push([val.analogAreaComponentId]);
+                });
+                return item;
+            });
+        },
+        // 组件图标点击下拉事件
+        sectionHandle(i) {
+            // let sections = document.querySelectorAll('.section');
+            let sectionBox = document.querySelectorAll('.sectionBox');
+            let downPulls1 = document.querySelectorAll('.downPull1');
+            // 断面的小图标
+            downPulls1[i].dataset.num++;
+            if (downPulls1[i].dataset.num % 2 == 0) {
+                downPulls1[i].style.cssText = 'transform: rotate(180deg);transition: all 0.5s linear;';
+                // sections[i].style.height = 'auto';
+                if (sectionBox[i] != undefined) {
+                    // sectionBox[i].style.height = 'auto';
+                }
+            } else {
+                downPulls1[i].style.cssText = 'transition: all 0.5s linear;';
+                // sections[i].style.height = '500px';
+                if (sectionBox[i] != undefined) {
+                }
+            }
+        },
+
+        // 触发数据的类型数值
+
+        //循环方法
+        getRef(data, timeMode) {
+            for (let i = 0; i < data.length; i++) {
+                let refItem = data[i];
+                if (data.length != 0 && refItem.dataArr && refItem.dataArr.length > 0) {
+                    if (refItem.echartArr.includes('时间曲线图')) {
+                        refItem.$refs.lineChartRef.drawLine(refItem.dataArr, refItem.componentName.split('_')[0], timeMode);
+                    }
+                    if (refItem.echartArr.includes('数值')) {
+                        refItem.getDataArr(refItem.dataArr);
+                    }
+                    if (refItem.echartArr.includes('表格')) {
+                        refItem.getDataArr(refItem.dataArr);
+                    }
+                    if (refItem.echartArr.includes('直方图') && refItem.$refs.barChartRef.drawBar) {
+                        // 数据改变重新渲染柱状图
+                        refItem.$refs.barChartRef.drawBar(refItem.dataArr[0]);
+                    }
+                    if (refItem.echartArr.includes('饼状图') && refItem.$refs.pieChartRef.drawPie) {
+                        // 数据改变重新渲染饼图
+                        refItem.$refs.pieChartRef.drawPie(refItem.dataArr[0]);
+                    }
+                    if (refItem.echartArr.includes('均值图') && refItem.$refs.avgChartRef != undefined) {
+                        refItem.$refs.avgChartRef.drawBar(refItem.dataArr[0]);
+                    }
+                    if (
+                        refItem.componentName.includes('OD') &&
+                        refItem.$refs.ODChartRef != undefined &&
+                        refItem.dataArr[0].ob_data &&
+                        refItem.dataArr[0].ob_data.length != 0
+                    ) {
+                        refItem.$refs.ODChartRef.drawThermalChart(refItem.dataArr[0].ob_data, refItem.startEndData);
+                    }
+                }
+            }
+        },
+        //处理离线视频历史数据
+        changecycleHistoryData() {}
+    },
+    mounted() {},
+    watch: {
+        // 触发的原始数据 作用是给3d那边，界面不需要展示
+        // triggerData: {
+        //     handler(newVal, oldVal) {},
+        //     immediate: true
+        // },
+        componentList: {
+            handler(newVal) {
+                //console.log('componentList', newVal);
+
+                if (newVal != undefined && newVal.length != 0) {
+                    newVal.forEach((ele) => {
+                        if (ele.timeMode == '固定间隔' && this.$route.query.type == '实时视频') {
+                            //console.log('实时视频', '固定间隔');
+                            this.$nextTick(() => {
+                                // var thatNN = this;
+                                ele.cycleStatisticsData.forEach((item) => {
+                                    if (item.type_data != null) {
+                                        this.typeCycleStatistics = item;
+                                    }
+                                });
+                                if (this.$refs.typeChartRef2 != undefined) {
+                                    // // 轮循固定时刻生成的各类组件
+                                    //console.log('轮循固定时刻生成的各类组件')
+                                    this.getRef(this.$refs.typeChartRef2, ele.timeMode);
+                                }
+                            });
+                        }
+                        if (ele.timeMode == '固定时刻' && this.$route.query.type == '实时视频') {
+                            //console.log('实时视频', '固定时刻');
+                            this.$nextTick(() => {
+                                ele.cycleTimeData.forEach((item) => {
+                                    if (item.type_data != null) {
+                                        item.time = item.time.split('.')[0];
+
+                                        this.typeCycleStatistics = item;
+                                    }
+                                    // thatN.$nextTick(() => {
+                                });
+                                if (this.$refs.typeChartRef1 != undefined) {
+                                    // // 轮循固定时刻生成的各类组件
+                                    this.getRef(this.$refs.typeChartRef1, ele.timeMode);
+                                }
+                            });
+                        }
+                        if (ele.timeMode == '固定间隔' && this.$route.query.type == '离线视频') {
+                            if (
+                                this.cycleHistoryData.CycleStatisticsData != undefined &&
+                                this.cycleHistoryData.CycleStatisticsData.lenght != 0
+                            ) {
+                                this.cycleHistoryData.CycleStatisticsData.forEach((ne) => {
+                                    if (ne.component_id == ele.analogAreaComponentId) {
+                                        ele.cycleStatisticsData = ne.cycleStatisticsData;
+                                    }
+                                });
+                                this.$nextTick(() => {
+                                    ele.cycleStatisticsData.forEach((item) => {
+                                        var timeNew = item.time.split('.')[0];
+                                        var dateLength = timeNew.length;
+                                        var key = timeNew.substring(dateLength - 8, dateLength);
+                                        item.time = key;
+                                        if (item.type_data != null) {
+                                            this.typeCycleStatistics = item;
+                                        }
+                                        // thatN.$nextTick(() => {
+                                    });
+                                    if (this.$refs.typeChartRef2 != undefined) {
+                                        // // 轮循固定时刻生成的各类组件
+                                        this.getRef(this.$refs.typeChartRef2, '固定间隔');
+                                    }
+                                });
+                            }
+                        }
+                        if (ele.timeMode == '固定时刻' && this.$route.query.type == '离线视频') {
+                            if (this.cycleHistoryData.CycleTimeData != undefined && this.cycleHistoryData.CycleTimeData.lenght != 0) {
+                                this.cycleHistoryData.CycleTimeData.forEach((ne) => {
+                                    if (ne.component_id == ele.analogAreaComponentId) {
+                                        ele.cycleTimeData = ne.cycleTimeData;
+                                    }
+                                });
+                                this.$nextTick(() => {
+                                    ele.cycleTimeData.forEach((item) => {
+                                        //   if(this.$route.query.type=='离线视频'){
+                                        var timeNew = item.time.split('.')[0];
+                                        var dateLength = timeNew.length;
+                                        var key = timeNew.substring(dateLength - 8, dateLength);
+                                        item.time = key;
+                                        // }else{
+                                        //      item.time = item.time.split('.')[0];
+                                        // }
+                                        if (item.type_data != null) {
+                                            this.typeCycleStatistics = item;
+                                        }
+                                    });
+                                    if (this.$refs.typeChartRef1 != undefined) {
+                                        // // 轮循固定时刻生成的各类组件
+
+                                        this.getRef(this.$refs.typeChartRef1, '固定时刻');
+                                    }
+                                });
+                            }
+                        }
+                    });
+                }
+            },
+            immediate: true,
+            deep: true
+        },
+        cycleHistoryData: {
+            handler(newVal) {
+                // debugger
+                //console.log('历史', newVal);
+                // //console.log("历史",oldVal)
+                if (newVal != undefined) {
+                    // newVal.forEach(ele => {
+                    if (newVal.CycleStatisticsData) {
+                        newVal.CycleStatisticsData.forEach((ele) => {
+                            this.$nextTick(() => {
+                                // var thatNN = this;
+                                ele.cycleStatisticsData.forEach((item) => {
+                                    if (item.type_data != null) {
+                                        if (this.$route.query.type == '离线视频') {
+                                            var timeNew = item.time.split('.')[0];
+                                            var dateLength = timeNew.length;
+                                            var key = timeNew.substring(dateLength - 8, dateLength);
+                                            item.time = key;
+                                        } else {
+                                            item.time = item.time.split('.')[0];
+                                        }
+                                        this.typeCycleStatistics = item;
+                                    }
+                                });
+                                if (this.$refs.typeChartRef2 != undefined) {
+                                    // // 轮循固定时刻生成的各类组件
+                                    this.getRef(this.$refs.typeChartRef2, '固定间隔');
+                                }
+                            });
+                        });
+                    }
+                    if (newVal.CycleTimeData) {
+                        newVal.CycleTimeData.forEach((ele) => {
+                            this.$nextTick(() => {
+                                //    debugger
+                                // var thatNN = this;
+                                ele.cycleTimeData.forEach((item) => {
+                                    if (this.$route.query.type == '离线视频') {
+                                        var timeNew = item.time.split('.')[0];
+                                        var dateLength = timeNew.length;
+                                        var key = timeNew.substring(dateLength - 8, dateLength);
+                                        item.time = key;
+                                    } else {
+                                        item.time = item.time.split('.')[0];
+                                    }
+                                    if (item.type_data != null) {
+                                        this.typeCycleStatistics = item;
+                                    }
+                                });
+                                if (this.$refs.typeChartRef1 != undefined) {
+                                    // // 轮循固定时刻生成的各类组件
+                                    this.getRef(this.$refs.typeChartRef1, '固定时刻');
+                                }
+                            });
+                        });
+                    }
+
+                    // });
+                }
+            },
+            immediate: true,
+            deep: true
+        },
+        // activeName:'channge',
+        // 处理过的触发数据
+        triggerListData: {
+            handler(newVal) {
+                // console.log("实时触发triggerListData-",newVal)
+                this.triggerList = newVal;
+                //  //console.log("oldVal",oldVal)
+                // 触发数据
+                var _this = this;
+                if (newVal.length != 0 && _this.sectionData.length>0) {
+                    _this.classify.forEach((ele, index) => {
+                        if (ele.trigger == undefined && ele.timeMode == '实时触发') {
+                            ele.trigger = [];
+                        }
+                        newVal.forEach((item) => {
+                            if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '实时触发') {
+                                // //console.log(ele.analogAreaComponentId, 'analogAreaComponentId');
+                                // //console.log(item.component_id, 'component_id');
+                                if (ele.trigger.length == 10) {
+                                    ele.trigger.pop();
+                                }
+                                if (this.$route.query.type == '离线视频') {
+                                    var timeNew = item.time.split('.')[0];
+                                    var dateLength = timeNew.length;
+                                    var key = timeNew.substring(dateLength - 8, dateLength);
+                                    item.time = key;
+                                } else {
+                                    item.time = item.time.split('.')[0];
+                                }
+
+                                // 该时间的触发数据
+                                if (item.type_data != null) {
+                                    _this.typeTimeMode = item;
+                                }
+                                //component_type
+                                // if(item.component_name=='车头时距_4'){
+                                //     console.log("dataBoard实时触发triggerListData-item",item)
+                                // }
+                                ele.trigger.unshift(item);
+                                _this.$nextTick(() => {
+                                    if (_this.$refs.typeChartRef != undefined) {
+                                        for (let i = 0; i < _this.$refs.typeChartRef.length; i++) {
+                                            // //console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据');
+                                            let itemTypeChart = _this.$refs.typeChartRef[i];
+                                            if (itemTypeChart.dataArr != undefined && itemTypeChart.dataArr.length != 0) {
+                                                if (itemTypeChart.echartArr.includes('时间曲线图')) {
+                                                    _this.$refs.typeChartRef[i].$refs.lineChartRef.drawLine(
+                                                        _this.$refs.typeChartRef[i].dataArr,
+                                                        _this.$refs.typeChartRef[i].componentName.split('_')[0],
+                                                        '实时触发'
+                                                    );
+                                                }
+                                                if (itemTypeChart.echartArr.includes('数值')) {
+                                                    _this.$refs.typeChartRef[i].getDataArr(_this.$refs.typeChartRef[i].dataArr);
+                                                }
+                                                if (itemTypeChart.echartArr.includes('表格')) {
+                                                    _this.$refs.typeChartRef[i].getDataArr(_this.$refs.typeChartRef[i].dataArr);
+                                                }
+                                                if (
+                                                    itemTypeChart.echartArr.includes('直方图') &&
+                                                    itemTypeChart.componentName.split('_')[0]
+                                                ) {
+                                                    // 数据改变重新渲染柱状图
+                                                    itemTypeChart.$refs.barChartRef.drawBar(itemTypeChart.dataArr[0]);
+                                                }
+                                                if (
+                                                    itemTypeChart.echartArr.includes('饼状图') &&
+                                                    itemTypeChart.componentName.split('_')[0]
+                                                ) {
+                                                    // 数据改变重新渲染饼图
+                                                    itemTypeChart.$refs.pieChartRef.drawPie(itemTypeChart.dataArr[0]);
+                                                }
+                                                if (
+                                                    itemTypeChart.echartArr.includes('均值图') &&
+                                                    itemTypeChart.$refs.avgChartRef != undefined
+                                                ) {
+                                                    itemTypeChart.$refs.avgChartRef.drawBar(itemTypeChart.dataArr[0]);
+                                                }
+                                                if (
+                                                    itemTypeChart.componentName.includes('OD') &&
+                                                    itemTypeChart.$refs.ODChartRef != undefined &&
+                                                    itemTypeChart.dataArr[0].ob_data &&
+                                                    itemTypeChart.dataArr[0].ob_data.length != 0
+                                                ) {
+                                                    itemTypeChart.$refs.ODChartRef.drawThermalChart(
+                                                        itemTypeChart.dataArr[0].ob_data,
+                                                        itemTypeChart.startEndData
+                                                    );
+                                                }
+                                            }
+                                        }
+                                    }
+                                });
+                            }
+                        });
+                    });
+                }
+            },
+            immediate: true
+        },
+        // 固定时刻的数据
+        cycleTimeData: {
+            handler(newVal) {
+                // 监听到打印固定时刻数据
+                // console.log(newVal, '固定时刻数据');
+
+                if (newVal != undefined && newVal.length != 0 && this.sectionData) {
+                    var thatN = this;
+                    thatN.classify.forEach((ele, index) => {
+                        newVal.forEach((item) => {
+                            if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '固定时刻') {
+                                if (ele.cycleTimeData.length == 10) {
+                                    ele.cycleTimeData.pop();
+                                }
+                                // item.time = item.time.split('.')[0];
+                                if (this.$route.query.type == '离线视频') {
+                                    var timeNew = item.time.split('.')[0];
+                                    var dateLength = timeNew.length;
+                                    var key = timeNew.substring(dateLength - 8, dateLength);
+                                    item.time = key;
+                                } else {
+                                    item.time = item.time.split('.')[0];
+                                }
+                                if (item.type_data != null) {
+                                    // 固定时刻的类型数据
+                                    thatN.typeCycleTimeData = item;
+                                }
+                                ele.cycleTimeData.unshift(item);
+
+                                // thatN.$nextTick(() => {
+                                if (thatN.$refs.typeChartRef1 != undefined) {
+                                    // //console.log("thatN.$refs.typeChartRef1",thatN.$refs.typeChartRef1)
+                                    // 轮循固定时刻生成的各类组件
+                                    for (let i = 0; i < thatN.$refs.typeChartRef1.length; i++) {
+                                        let itemTypeChartRef1 = thatN.$refs.typeChartRef1[i];
+                                        if (
+                                            itemTypeChartRef1.length != 0 &&
+                                            itemTypeChartRef1.dataArr != undefined &&
+                                            itemTypeChartRef1.dataArr.length != 0
+                                        ) {
+                                            if (itemTypeChartRef1.echartArr.includes('时间曲线图')) {
+                                                thatN.$refs.typeChartRef1[i].$refs.lineChartRef.drawLine(
+                                                    thatN.$refs.typeChartRef1[i].dataArr,
+                                                    thatN.$refs.typeChartRef1[i].componentName.split('_')[0],
+                                                    '固定时刻'
+                                                );
+                                            }
+                                            if (itemTypeChartRef1.echartArr.includes('数值')) {
+                                                thatN.$refs.typeChartRef1[i].getDataArr(thatN.$refs.typeChartRef1[i].dataArr);
+                                            }
+                                            if (itemTypeChartRef1.echartArr.includes('表格')) {
+                                                thatN.$refs.typeChartRef1[i].getDataArr(thatN.$refs.typeChartRef1[i].dataArr);
+                                            }
+                                            if (
+                                                itemTypeChartRef1.echartArr.includes('直方图') &&
+                                                itemTypeChartRef1.$refs.barChartRef.drawBar
+                                            ) {
+                                                // 数据改变重新渲染柱状图
+                                                itemTypeChartRef1.$refs.barChartRef.drawBar(itemTypeChartRef1.dataArr[0]);
+                                            }
+                                            if (
+                                                itemTypeChartRef1.echartArr.includes('饼状图') &&
+                                                itemTypeChartRef1.$refs.pieChartRef.drawPie
+                                            ) {
+                                                // 数据改变重新渲染饼图
+                                                itemTypeChartRef1.$refs.pieChartRef.drawPie(itemTypeChartRef1.dataArr[0]);
+                                            }
+                                            if (
+                                                itemTypeChartRef1.echartArr.includes('均值图') &&
+                                                itemTypeChartRef1.$refs.avgChartRef != undefined
+                                            ) {
+                                                itemTypeChartRef1.$refs.avgChartRef.drawBar(itemTypeChartRef1.dataArr[0]);
+                                            }
+                                            if (
+                                                itemTypeChartRef1.componentName.includes('OD') &&
+                                                itemTypeChartRef1.$refs.ODChartRef != undefined &&
+                                                itemTypeChartRef1.dataArr[0].ob_data &&
+                                                itemTypeChartRef1.dataArr[0].ob_data.length != 0
+                                            ) {
+                                                // console.log('固定时刻-od',itemTypeChartRef1.dataArr[0].ob_data)
+                                                itemTypeChartRef1.$refs.ODChartRef.drawThermalChart(
+                                                    itemTypeChartRef1.dataArr[0].ob_data,
+                                                    itemTypeChartRef1.startEndData
+                                                );
+                                            }
+                                        }
+                                    }
+
+                                    // });
+                                }
+                            }
+                        });
+                    });
+                }
+                // else {
+                //     var _thatN = this
+                //     _thatN.classify.forEach((ele, index) => {
+
+                //         // newVal.forEach(item => {
+                //         if (ele.timeMode == '固定时刻') {
+                //             if (ele.cycleTimeData.length == 10) {
+                //                 ele.cycleTimeData.pop();
+                //             }
+                //                 // item.time = item.time.split('.')[0];
+                //                 // if (item.type_data != null) {
+                //                 //     // 固定时刻的类型数据
+                //                 //     _thatN.typeCycleTimeData = item;
+                //                 // }
+                //                 // ele.cycleTimeData.unshift(item);
+                //                 // _thatN.$nextTick(() => {
+                //                 if (_thatN.$refs.typeChartRef1 != undefined) {
+                //                     // //console.log("thatN.$refs.typeChartRef1",_thatN.$refs.typeChartRef1)
+                //                     // 轮循固定时刻生成的各类组件
+                //                     for (let i = 0; i < _thatN.$refs.typeChartRef1.length; i++) {
+                //                         let itemTypeChartRef1 = thatN.$refs.typeChartRef1[i]
+                //                         if (itemTypeChartRef1.length != 0 && itemTypeChartRef1.dataArr != undefined && itemTypeChartRef1.dataArr.length != 0) {
+
+                //                             if (itemTypeChartRef1.echartArr.includes('时间曲线图')) {
+                //                                 _thatN.$refs.typeChartRef1[i].$refs.lineChartRef.drawLine(_thatN.$refs.typeChartRef1[i].dataArr, _thatN.$refs.typeChartRef1[i].componentName.split('_')[0], '固定时刻')
+                //                             }
+                //                             if (itemTypeChartRef1.echartArr.includes('数值')) {
+                //                                 _thatN.$refs.typeChartRef1[i].getDataArr(_thatN.$refs.typeChartRef1[i].dataArr)
+                //                             }
+
+                //                             if (itemTypeChartRef1.echartArr.includes('直方图') && itemTypeChartRef1.$refs.barChartRef.drawBar) {
+                //                                 // 数据改变重新渲染柱状图
+                //                                 itemTypeChartRef1.$refs.barChartRef.drawBar(itemTypeChartRef1.dataArr[0])
+                //                             }
+                //                             if (itemTypeChartRef1.echartArr.includes('饼状图') && itemTypeChartRef1.$refs.pieChartRef.drawPie) {
+                //                                 // 数据改变重新渲染饼图
+                //                                 itemTypeChartRef1.$refs.pieChartRef.drawPie(itemTypeChartRef1.dataArr[0])
+                //                             }
+                //                             if (itemTypeChartRef1.echartArr.includes('均值图') && itemTypeChartRef1.$refs.avgChartRef.drawBar) {
+                //                                 itemTypeChartRef1.$refs.avgChartRef.drawBar(itemTypeChartRef1.dataArr[0])
+                //                             }
+                //                             if (itemTypeChartRef1.componentName.includes('OD') && itemTypeChartRef1.$refs.ODChartRef != undefined && itemTypeChartRef1.dataArr[0].ob_data.length != 0) {
+                //                                 itemTypeChartRef1.$refs.ODChartRef.drawThermalChart(itemTypeChartRef1.dataArr[0].ob_data, itemTypeChartRef1.startEndData)
+                //                             }
+
+                //                     }
+                //                 }
+
+                //                 // });
+                //             }
+                //         }
+                //         // });
+                //     });
+                // }
+            },
+            immediate: true
+        },
+        //固定间隔
+        cycleStatisticsData: {
+            handler(newVal) {
+                // console.log('固定间隔', newVal);
+                if (newVal != undefined && newVal.length != 0 && this.sectionData) {
+                    var that = this;
+                    that.classify.forEach((ele, index) => {
+                        newVal.forEach((item) => {
+                            if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '固定间隔') {
+                                if (ele.cycleStatisticsData.length == 10) {
+                                    ele.cycleStatisticsData.pop();
+                                }
+
+                                if (this.$route.query.type == '离线视频') {
+                                    var timeNew = item.time.split('.')[0];
+                                    var dateLength = timeNew.length;
+                                    var key = timeNew.substring(dateLength - 8, dateLength);
+                                    item.time = key;
+                                } else {
+                                    item.time = item.time.split('.')[0];
+                                }
+                                if (item.type_data != null) {
+                                    that.typeCycleStatistics = item;
+                                }
+                                ele.cycleStatisticsData.unshift(item);
+                                if (that.$refs.typeChartRef2 != undefined) {
+                                    for (let i = 0; i < that.$refs.typeChartRef2.length; i++) {
+                                        let itemTypeChartRef2 = that.$refs.typeChartRef2[i];
+
+                                        if (
+                                            itemTypeChartRef2.length != 0 &&
+                                            itemTypeChartRef2.dataArr != undefined &&
+                                            itemTypeChartRef2.dataArr.length != 0
+                                        ) {
+                                            if (itemTypeChartRef2.echartArr.includes('时间曲线图')) {
+                                                that.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(
+                                                    that.$refs.typeChartRef2[i].dataArr,
+                                                    that.$refs.typeChartRef2[i].componentName.split('_')[0],
+                                                    '固定间隔'
+                                                );
+                                            }
+                                            if (itemTypeChartRef2.echartArr.includes('数值')) {
+                                                that.$refs.typeChartRef2[i].getDataArr(that.$refs.typeChartRef2[i].dataArr);
+                                            }
+                                            if (itemTypeChartRef2.echartArr.includes('表格')) {
+                                                that.$refs.typeChartRef2[i].getDataArr(that.$refs.typeChartRef2[i].dataArr);
+                                            }
+                                            // //console.log(item,'组件数据');
+                                            if (
+                                                itemTypeChartRef2.echartArr.includes('直方图') &&
+                                                itemTypeChartRef2.$refs.barChartRef.drawBar
+                                            ) {
+                                                // 数据改变重新渲染柱状图
+                                                // //console.log(item, '组件');
+                                                itemTypeChartRef2.$refs.barChartRef.drawBar(itemTypeChartRef2.dataArr[0]);
+                                            }
+                                            if (
+                                                itemTypeChartRef2.echartArr.includes('饼状图') &&
+                                                itemTypeChartRef2.$refs.pieChartRef.drawPie
+                                            ) {
+                                                // 数据改变重新渲染饼图
+                                                itemTypeChartRef2.$refs.pieChartRef.drawPie(itemTypeChartRef2.dataArr[0]);
+                                            }
+                                            if (
+                                                itemTypeChartRef2.echartArr.includes('均值图') &&
+                                                itemTypeChartRef2.$refs.avgChartRef != undefined
+                                            ) {
+                                                itemTypeChartRef2.$refs.avgChartRef.drawBar(itemTypeChartRef2.dataArr[0]);
+                                            }
+                                            if (
+                                                itemTypeChartRef2.componentName.includes('OD') &&
+                                                itemTypeChartRef2.$refs.ODChartRef != undefined &&
+                                                itemTypeChartRef2.dataArr[0].ob_data &&
+                                                itemTypeChartRef2.dataArr[0].ob_data.length != 0
+                                            ) {
+                                                itemTypeChartRef2.$refs.ODChartRef.drawThermalChart(
+                                                    itemTypeChartRef2.dataArr[0].ob_data,
+                                                    itemTypeChartRef2.startEndData
+                                                );
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        });
+                    });
+                }
+                // else {
+
+                //     var _that = this
+                //     _that.classify.forEach(ele => {
+                //         if (ele.timeMode == '固定间隔') {
+                //             if (ele.cycleStatisticsData.length == 10) {
+                //                 ele.cycleStatisticsData.pop();
+                //             }
+                //                 // item.time = item.time.split('.')[0];
+                //                 //  if (item.type_data != null) {
+                //                 //       _that.typeCycleStatistics = item;
+                //                 //  }
+                //                 // ele.cycleStatisticsData.unshift(item);
+                //                 if (_that.$refs.typeChartRef2 != undefined) {
+                //                     for (let i = 0; i < _that.$refs.typeChartRef2.length; i++) {
+                //                         let itemTypeChartRef2 = _that.$refs.typeChartRef2[i];
+                //                         // //console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据');
+                //                         if (itemTypeChartRef2.length != 0 && itemTypeChartRef2.dataArr != undefined && itemTypeChartRef2.dataArr.length != 0) {
+                //                             // this.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(this.$refs.typeChartRef2[i].dataArr, _this.$refs.typeChartRe2f[i].componentName.split('_')[0])
+                //                             if (itemTypeChartRef2.echartArr.includes('时间曲线图')) {
+                //                                 _that.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(_that.$refs.typeChartRef2[i].dataArr, _that.$refs.typeChartRef2[i].componentName.split('_')[0], '固定间隔')
+                //                             }
+                //                             if (itemTypeChartRef2.echartArr.includes('数值')) {
+                //                                 _that.$refs.typeChartRef2[i].getDataArr(_that.$refs.typeChartRef2[i].dataArr)
+                //                             }
+                //                             // //console.log(item,'组件数据');
+                //                             if (itemTypeChartRef2.echartArr.includes('直方图') && itemTypeChartRef2.$refs.barChartRef.drawBar) {
+                //                                 // 数据改变重新渲染柱状图
+                //                                 // //console.log(item, '组件');
+                //                                 itemTypeChartRef2.$refs.barChartRef.drawBar(itemTypeChartRef2.dataArr[0])
+                //                             }
+                //                             if (itemTypeChartRef2.echartArr.includes('饼状图') && itemTypeChartRef2.$refs.pieChartRef.drawPie) {
+                //                                 // 数据改变重新渲染饼图
+                //                                 itemTypeChartRef2.$refs.pieChartRef.drawPie(itemTypeChartRef2.dataArr[0])
+                //                             }
+
+                //                             //  if (item.echartArr.includes('均值图') && item.$refs.avgChartRef != undefined && item.dataArr.length != 0) {
+                //                             //     item.$refs.avgChartRef.drawBar(item.dataArr[0])
+                //                             // }
+                //                             if (itemTypeChartRef2.echartArr.includes('均值图') && itemTypeChartRef2.$refs.avgChartRef != undefined) {
+                //                                 itemTypeChartRef2.$refs.avgChartRef.drawBar(itemTypeChartRef2.dataArr[0])
+                //                             }
+                //                         }
+
+                //                 }
+
+                //             }
+                //         }
+
+                //     });
+                // }
+            },
+            immediate: true
+        },
+        //周期统计实时累计数据主题
+        cycleAccumulateData: {
+            handler(newVal) {
+                // console.log('周期统计实时累计数据主题', newVal);
+                if (newVal != undefined && newVal.length != 0 && this.sectionData) {
+                    var that = this;
+                    that.classify.forEach((ele, index) => {
+                        newVal.forEach((item) => {
+                            if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '固定间隔') {
+                                // if (ele.cycleStatisticsData.length == 10) {
+                                //     ele.cycleStatisticsData.pop();
+                                // }
+
+                                if (this.$route.query.type == '离线视频') {
+                                    var timeNew = item.time.split('.')[0];
+                                    var dateLength = timeNew.length;
+                                    var key = timeNew.substring(dateLength - 8, dateLength);
+                                    item.time = key;
+                                } else {
+                                    item.time = item.time.split('.')[0];
+                                }
+                                if (item.type_data != null) {
+                                    that.typeCycleStatistics = item;
+                                }
+                                // ele.cycleStatisticsData.unshift(item);
+                                if (that.$refs.typeChartRef2 != undefined) {
+                                    for (let i = 0; i < that.$refs.typeChartRef2.length; i++) {
+                                        let itemTypeChartRef2 = that.$refs.typeChartRef2[i];
+
+                                        if (
+                                            itemTypeChartRef2.length != 0 &&
+                                            itemTypeChartRef2.dataArr != undefined &&
+                                            itemTypeChartRef2.dataArr.length != 0
+                                        ) {
+                                            //console.log('itemTypeChartRef2.echartArr',itemTypeChartRef2.echartArr)
+                                            if (
+                                                itemTypeChartRef2.echartArr.includes('数值') &&
+                                                itemTypeChartRef2.itemData.analogAreaComponentId == item.component_id
+                                            ) {
+                                                //只需要修改数值组件,逻辑存在问题
+                                                itemTypeChartRef2.getcycleAccumulateDataArr([item]);
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        });
+                    });
+                }
+            },
+            immediate: true
+        }
+    }
+};
+</script>
+
+<style>
+.titleGnag {
+    width: 3px;
+    height: 18px;
+    display: inline-block;
+    background-color: #3297ff;
+    position: absolute;
+    top: 14px;
+}
+
+.el-collapse-item__header {
+    font-size: 15px;
+    margin-left: 10px;
+}
+</style>
+<style scoped lang="scss">
+* {
+    margin: 0;
+    padding: 0;
+}
+
+.plate1,
+.plate2 {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+
+/deep/ .el-scrollbar__view {
+    display: inline-block !important;
+    width: 100%;
+}
+
+/deep/ .el-scrollbar__wrap {
+    overflow-x: hidden !important;
+}
+
+.scrollbar {
+    height: 100vh;
+    overflow-x: hidden !important;
+
+    .dataBoard {
+        height: 100%;
+    }
+}
+
+.dataBoard .region,
+.dataBoard .section {
+    width: 48%;
+    border: 1px solid #e4e7ed;
+    box-sizing: border-box;
+    padding: 15px;
+    height: auto;
+    position: relative;
+    transition: all 1s;
+    overflow: hidden;
+}
+
+.dataBoard .sectionBox {
+    width: 100%;
+    height: auto;
+    border: 1px solid #e4e7ed;
+    box-sizing: border-box;
+    padding: 15px;
+    position: relative;
+    transition: all 1s;
+    overflow: hidden;
+}
+
+.dataBoard .sectionBox:nth-child(1) {
+    margin-bottom: 4vh;
+}
+
+.dataBoard .section {
+    float: left;
+    margin-top: 20px;
+}
+
+.dataBoard .section:nth-child(1),
+.dataBoard .section:nth-child(2) {
+    margin-top: 0;
+}
+
+/* .downUp{
+  height: 2000px !important;
+} */
+
+.dataBoard .board-title {
+    font-size: 17px;
+    font-weight: 400;
+    position: relative;
+    margin-bottom: 15px;
+    border-bottom: 1px solid #e4e7ed;
+}
+
+.dataBoard .board-title span {
+    padding: 5px 10px 5px 10px;
+    border-bottom: 1px solid #79b7f8;
+    /* display: block; */
+    display: inline-block;
+}
+
+.test-div i {
+    font-size: 25px;
+}
+
+.down {
+    position: absolute;
+    top: 0;
+    right: 0;
+}
+
+.downPull,
+.downPull1 {
+    position: absolute;
+    top: 20px;
+    right: 17px;
+    cursor: pointer;
+    background-size: 14px 9px;
+    background-image: url(../../assets/img/downpull.png);
+    width: 14px;
+    height: 9px;
+}
+
+.upActive {
+    transform: rotate(180deg);
+    transition: all 0.5s linear;
+    /* transform-origin: 7px 7px; */
+}
+
+.active {
+    transition: all 0.5s linear;
+}
+</style>
diff --git a/src/views/bounced/dataBoard.vue b/src/views/bounced/dataBoard.vue
index dd4d2e9..22aa19c 100644
--- a/src/views/bounced/dataBoard.vue
+++ b/src/views/bounced/dataBoard.vue
@@ -1,6 +1,6 @@
 <template>
     <div ref="box" class="box" v-loading="loading">
-        <el-empty v-show="!loading&&sectionData.length == 0" :image-size="400"></el-empty>
+        <el-empty v-show="!loading && 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'">
@@ -14,7 +14,6 @@
                                     <p class="board-title">
                                         <span>{{ s.title }}</span>
                                     </p>
-                                    <!-- <span class="downPull1" data-num="1" @click="sectionHandle(i)"></span> -->
                                 </div>
                                 <el-tabs>
                                     <el-collapse v-model="acticveName" @change="handleChange">
@@ -22,7 +21,7 @@
                                             <div class="titleGnag"></div>
                                             <el-collapse-item :title="o.componentName + o.timeMode" :name="o.analogAreaComponentId">
                                                 <!--触发的组件  -->
-                                                <typeChart
+                                                <newtypeChart
                                                     ref="typeChartRef"
                                                     v-if="o.timeMode === '实时触发'"
                                                     :itemData="o"
@@ -36,7 +35,7 @@
                                                     :typeValue="typeTimeMode"
                                                     :startEndData="{ start: o.startSectionNames, end: o.endSectionNames }"
                                                 />
-                                                <typeChart
+                                                <newtypeChart
                                                     ref="typeChartRef1"
                                                     v-if="o.timeMode === '固定时刻'"
                                                     :itemData="o"
@@ -52,7 +51,7 @@
                                                 />
 
                                                 <!-- 固定间隔的组件 -->
-                                                <typeChart
+                                                <newtypeChart
                                                     ref="typeChartRef2"
                                                     style="width: 100%"
                                                     v-if="o.timeMode === '固定间隔'"
@@ -61,6 +60,7 @@
                                                     :triggerType="o.timeMode"
                                                     :componentName="o.componentName"
                                                     :dataArr="o.cycleStatisticsData"
+                                                    :cycleAccumulateData="o.cycleAccumulateData"
                                                     :echartArr="o.presentationForm"
                                                     :title="o.componentName.split('_')[0]"
                                                     :chartName="o.combinationName"
@@ -81,12 +81,13 @@
     </div>
 </template>
 <script>
-import typeChart from '../../components/target/typeChart.vue';
+import newtypeChart from '../../components/target/newtypeChart.vue';
 // import {mapMutation} from 'vuex'
 import { getComponentSection } from '../../api/index';
+import { update } from '../../api/aboutMachine';
 export default {
     components: {
-        typeChart
+        newtypeChart
     },
     props: {
         activeName: {
@@ -136,48 +137,37 @@ export default {
     },
     data() {
         return {
-            loading:false,
+            loading: false,
             acticveName: [],
-            title1: '01断面',
-            title2: '01区域',
-            dialogVisible: false,
-
-            idVal: '',
             //组件数组
             componentList: [],
             // 触发数据数组
             triggerList: [],
 
             sectionData: [],
-
-            // 单个区域或者断面的表格触发数据
-            tableList: [],
-
-            // 路线数据
-            headWay: [],
-
-            tripData: [],
-
             sectionArr: [],
 
             //触发的类型数值看板显示
-            typeTimeMode: {},
-            // 固定时刻的数值看板展示
-            typeCycleTimeData: {},
-            typeCycleStatistics: {},
+            // "type_data":[{//类型数据，只供类型组件使用，只有组件类型为类型的时候，这个字段才有值
+            //     "name":"electric bicycle",//类型名称
+            //     "quantity":0//数量
+            // }],
+            // "ob_data":[{//od数据，只供od组件使用，只有组件类型为OD的时候，这个字段才有值
+            //     "end":"gate1",
+            //     "data":[{
+            //         "start":"zone1",
+            //         "quantity":0
+            //     }]
+            // }]
+            typeTimeMode: {}, //实时触发类型数据，只供类型组件使用，只有组件类型为类型的时候，这个字段才有值，目前用不到，typeChart组件是直接拿的dataArr[0]来展示的
+            typeCycleTimeData: {}, // 固定时刻的数值看板展示-类型数据，目前用不到，typeChart组件是直接拿的dataArr[0]来展示的
+            typeCycleStatistics: {}, //固定间隔的数值看板展示-类型数据，目前用不到，typeChart组件是直接拿的dataArr[0]来展示的
 
             // 各个组件分类
             classify: []
-            // cycleHistoryData:''
         };
     },
-    // beforeCeated(){
-
-    // },
-    created() {
-        // this.getNew()
-        // //console.log("cycleHistoryData",this.cycleHistoryData)
-    },
+    created() {},
     methods: {
         // 手风琴下拉切换
         handleChange(val) {
@@ -188,24 +178,27 @@ export default {
             //     });
             //     }, 3000);
         },
+        //点击数据看板tab会执行获取所有配置的组件
         getNew() {
-            // this.idVal = ;
-            this.loading=true;
-            getComponentSection({ VideoId: this.$route.query.id, Number: 10 }).then((res) => {
-                if (res.data.code == 200) {
-                    //console.log(res.data.data, '组件的数据');
-                    this.componentList = res.data.data;
-                    this.siftData();
-                }
-            }).finally(()=>{
-                this.loading=false;
-            });
+            this.loading = true;
+            getComponentSection({ VideoId: this.$route.query.id, Number: 10 })
+                .then((res) => {
+                    if (res.data.code == 200) {
+                        //console.log(res.data.data, '组件的数据');
+                        this.componentList = res.data.data;
+                        this.siftData();
+                    }
+                })
+                .finally(() => {
+                    this.loading = false;
+                });
         },
-
+        //组件数据根据分类重组到相同分类下
         siftData() {
+            //获取分类
             this.sectionArr = [];
             this.sectionData = [];
-            this.classify = [];
+            // this.classify = []; //通过相同赋值来改变sectionData里面children数据的改变不太合理，所以这边不用了
             this.componentList.forEach((val) => {
                 //    //console.log("val",val)
                 this.sectionArr.push(val.combinationName);
@@ -213,697 +206,145 @@ export default {
             });
             this.sectionData = this.sectionArr.map((item) => {
                 item = { title: item, children: [] };
-                this.acticveName = [];
+                this.acticveName = []; //存储collapse组件的展开，默认全部收缩
                 this.componentList.forEach((val) => {
                     if (item.title == val.combinationName) {
-                        this.classify.push(val);
+                        // this.classify.push(val);
+                        //trigger 为实时触发存储的数据，cycleTimeData为固定时刻存储的数据，cycleStatisticsData为固定间隔存储的数据
+                        //在接口返回的componentList组件中没有trigger字段
+                        if (!val.trigger) {
+                            val.trigger = [];
+                        }
+                        //固定间隔还有个周期统计实时累计数据主题
+                        if (!val.cycleAccumulateData) {
+                            val.cycleAccumulateData = [];
+                        }
                         item.children.push(val);
-                        if (val.timeMode == '固定间隔' || this.cycleStatisticsData.length == 0) {
-                            item.cycleStatisticsData = val.cycleStatisticsData;
-                        }
-                        if (val.timeMode == '固定时刻' || this.cycleTimeData.length == 0) {
-                            item.cycleTimeData = val.cycleTimeData;
-                        }
+                        //把cycleStatisticsData，cycleTimeData存给children同级别暂时没理解为啥怎么做
+                        // if (val.timeMode == '固定间隔' || this.cycleStatisticsData.length == 0) {
+                        //     item.cycleStatisticsData = val.cycleStatisticsData;
+                        // }
+                        // if (val.timeMode == '固定时刻' || this.cycleTimeData.length == 0) {
+                        //     item.cycleTimeData = val.cycleTimeData;
+                        // }
                     }
-                    this.acticveName.push([val.analogAreaComponentId]);
+                    // this.acticveName.push(val.analogAreaComponentId);
                 });
                 return item;
             });
+            // console.log('折叠面板-', this.acticveName);
         },
-        // 组件图标点击下拉事件
-        sectionHandle(i) {
-            // let sections = document.querySelectorAll('.section');
-            let sectionBox = document.querySelectorAll('.sectionBox');
-            let downPulls1 = document.querySelectorAll('.downPull1');
-            // 断面的小图标
-            downPulls1[i].dataset.num++;
-            if (downPulls1[i].dataset.num % 2 == 0) {
-                downPulls1[i].style.cssText = 'transform: rotate(180deg);transition: all 0.5s linear;';
-                // sections[i].style.height = 'auto';
-                if (sectionBox[i] != undefined) {
-                    // sectionBox[i].style.height = 'auto';
+        updateSectionData(newVal, updateKey, timeMode) {
+            this.sectionData.forEach((item) => {
+                //item.title == val.combinationName
+                if (item.children && item.children.length > 0) {
+                    item.children.forEach((cItem) => {
+                        if (cItem.timeMode == timeMode) {
+                            //找出对应timeMode的mqtt数据
+                            newVal.forEach((nItem) => {
+                                if (cItem.analogAreaComponentId == nItem.component_id) {
+                                    if (cItem[updateKey].length > 9) {
+                                        this.$set(cItem, updateKey, cItem[updateKey].slice(0, 9));
+                                    }
+                                    //这里逻辑不知道为啥这样处理time，用的原逻辑
+                                    if (this.$route.query.type == '离线视频') {
+                                        var timeNew = nItem.time.split('.')[0];
+                                        var dateLength = timeNew.length;
+                                        var key = timeNew.substring(dateLength - 8, dateLength);
+                                        nItem.time = key;
+                                    } else {
+                                        nItem.time = nItem.time.split('.')[0];
+                                    }
+                                    // cItem[updateKey].unshift(nItem);
+                                    this.$set(cItem, updateKey, [nItem, ...cItem[updateKey]]);
+                                }
+                            });
+                        }
+                    });
                 }
-            } else {
-                downPulls1[i].style.cssText = 'transition: all 0.5s linear;';
-                // sections[i].style.height = '500px';
-                if (sectionBox[i] != undefined) {
-                }
-            }
-        },
-
-        // 触发数据的类型数值
-
-        //循环方法
-        getRef(data, timeMode) {
-            for (let i = 0; i < data.length; i++) {
-                let refItem = data[i];
-                if (data.length != 0 && refItem.dataArr && refItem.dataArr.length > 0) {
-                    if (refItem.echartArr.includes('时间曲线图')) {
-                        refItem.$refs.lineChartRef.drawLine(refItem.dataArr, refItem.componentName.split('_')[0], timeMode);
-                    }
-                    if (refItem.echartArr.includes('数值')) {
-                        refItem.getDataArr(refItem.dataArr);
-                    }
-                    if (refItem.echartArr.includes('表格')) {
-                        refItem.getDataArr(refItem.dataArr);
-                    }
-                    if (refItem.echartArr.includes('直方图') && refItem.$refs.barChartRef.drawBar) {
-                        // 数据改变重新渲染柱状图
-                        refItem.$refs.barChartRef.drawBar(refItem.dataArr[0]);
-                    }
-                    if (refItem.echartArr.includes('饼状图') && refItem.$refs.pieChartRef.drawPie) {
-                        // 数据改变重新渲染饼图
-                        refItem.$refs.pieChartRef.drawPie(refItem.dataArr[0]);
-                    }
-                    if (refItem.echartArr.includes('均值图') && refItem.$refs.avgChartRef != undefined) {
-                        refItem.$refs.avgChartRef.drawBar(refItem.dataArr[0]);
-                    }
-                    if (
-                        refItem.componentName.includes('OD') &&
-                        refItem.$refs.ODChartRef != undefined &&
-                        refItem.dataArr[0].ob_data &&
-                        refItem.dataArr[0].ob_data.length != 0
-                    ) {
-                        refItem.$refs.ODChartRef.drawThermalChart(refItem.dataArr[0].ob_data, refItem.startEndData);
-                    }
-                }
-            }
-        },
-        //处理离线视频历史数据
-        changecycleHistoryData() {}
+            });
+            this.$forceUpdate();
+            // console.log('sectionData', this.sectionData);
+        }
     },
     mounted() {},
     watch: {
-        // 触发的原始数据
-        triggerData: {
-            handler(newVal, oldVal) {},
-            immediate: true
-        },
-        componentList: {
-            handler(newVal) {
-                //console.log('componentList', newVal);
-
-                if (newVal != undefined && newVal.length != 0) {
-                    newVal.forEach((ele) => {
-                        if (ele.timeMode == '固定间隔' && this.$route.query.type == '实时视频') {
-                            //console.log('实时视频', '固定间隔');
-                            this.$nextTick(() => {
-                                // var thatNN = this;
-                                ele.cycleStatisticsData.forEach((item) => {
-                                    if (item.type_data != null) {
-                                        this.typeCycleStatistics = item;
-                                    }
-                                });
-                                if (this.$refs.typeChartRef2 != undefined) {
-                                    // // 轮循固定时刻生成的各类组件
-                                    //console.log('轮循固定时刻生成的各类组件')
-                                    this.getRef(this.$refs.typeChartRef2, ele.timeMode);
-                                }
-                            });
-                        }
-                        if (ele.timeMode == '固定时刻' && this.$route.query.type == '实时视频') {
-                            //console.log('实时视频', '固定时刻');
-                            this.$nextTick(() => {
-                                ele.cycleTimeData.forEach((item) => {
-                                    if (item.type_data != null) {
-                                        item.time = item.time.split('.')[0];
-
-                                        this.typeCycleStatistics = item;
-                                    }
-                                    // thatN.$nextTick(() => {
-                                });
-                                if (this.$refs.typeChartRef1 != undefined) {
-                                    // // 轮循固定时刻生成的各类组件
-                                    this.getRef(this.$refs.typeChartRef1, ele.timeMode);
-                                }
-                            });
-                        }
-                        if (ele.timeMode == '固定间隔' && this.$route.query.type == '离线视频') {
-                            if (
-                                this.cycleHistoryData.CycleStatisticsData != undefined &&
-                                this.cycleHistoryData.CycleStatisticsData.lenght != 0
-                            ) {
-                                this.cycleHistoryData.CycleStatisticsData.forEach((ne) => {
-                                    if (ne.component_id == ele.analogAreaComponentId) {
-                                        ele.cycleStatisticsData = ne.cycleStatisticsData;
-                                    }
-                                });
-                                this.$nextTick(() => {
-                                    ele.cycleStatisticsData.forEach((item) => {
-                                        var timeNew = item.time.split('.')[0];
-                                        var dateLength = timeNew.length;
-                                        var key = timeNew.substring(dateLength - 8, dateLength);
-                                        item.time = key;
-                                        if (item.type_data != null) {
-                                            this.typeCycleStatistics = item;
-                                        }
-                                        // thatN.$nextTick(() => {
-                                    });
-                                    if (this.$refs.typeChartRef2 != undefined) {
-                                        // // 轮循固定时刻生成的各类组件
-                                        this.getRef(this.$refs.typeChartRef2, '固定间隔');
-                                    }
-                                });
-                            }
-                        }
-                        if (ele.timeMode == '固定时刻' && this.$route.query.type == '离线视频') {
-                            if (this.cycleHistoryData.CycleTimeData != undefined && this.cycleHistoryData.CycleTimeData.lenght != 0) {
-                                this.cycleHistoryData.CycleTimeData.forEach((ne) => {
-                                    if (ne.component_id == ele.analogAreaComponentId) {
-                                        ele.cycleTimeData = ne.cycleTimeData;
-                                    }
-                                });
-                                this.$nextTick(() => {
-                                    ele.cycleTimeData.forEach((item) => {
-                                        //   if(this.$route.query.type=='离线视频'){
-                                        var timeNew = item.time.split('.')[0];
-                                        var dateLength = timeNew.length;
-                                        var key = timeNew.substring(dateLength - 8, dateLength);
-                                        item.time = key;
-                                        // }else{
-                                        //      item.time = item.time.split('.')[0];
-                                        // }
-                                        if (item.type_data != null) {
-                                            this.typeCycleStatistics = item;
-                                        }
-                                    });
-                                    if (this.$refs.typeChartRef1 != undefined) {
-                                        // // 轮循固定时刻生成的各类组件
-
-                                        this.getRef(this.$refs.typeChartRef1, '固定时刻');
-                                    }
-                                });
-                            }
-                        }
-                    });
-                }
-            },
-            immediate: true,
-            deep: true
-        },
+        // 触发的原始数据 作用是给3d那边，界面不需要展示
+        // triggerData: {
+        //     handler(newVal, oldVal) {},
+        //     immediate: true
+        // },
+        //离线历史数据
         cycleHistoryData: {
             handler(newVal) {
                 // debugger
-                //console.log('历史', newVal);
-                // //console.log("历史",oldVal)
-                if (newVal != undefined) {
-                    // newVal.forEach(ele => {
-                    if (newVal.CycleStatisticsData) {
+                // console.log('历史cycleHistoryData-', newVal);
+                //该主题只会有固定间隔和固定时刻数据
+                if (newVal && this.sectionData.length > 0) {
+                    //更新sectionData对应的analogAreaComponentId和timeMode更新数据
+                    if (newVal.CycleStatisticsData && newVal.CycleStatisticsData.length > 0) {
                         newVal.CycleStatisticsData.forEach((ele) => {
-                            this.$nextTick(() => {
-                                // var thatNN = this;
-                                ele.cycleStatisticsData.forEach((item) => {
-                                    if (item.type_data != null) {
-                                        if (this.$route.query.type == '离线视频') {
-                                            var timeNew = item.time.split('.')[0];
-                                            var dateLength = timeNew.length;
-                                            var key = timeNew.substring(dateLength - 8, dateLength);
-                                            item.time = key;
-                                        } else {
-                                            item.time = item.time.split('.')[0];
-                                        }
-                                        this.typeCycleStatistics = item;
-                                    }
-                                });
-                                if (this.$refs.typeChartRef2 != undefined) {
-                                    // // 轮循固定时刻生成的各类组件
-                                    this.getRef(this.$refs.typeChartRef2, '固定间隔');
-                                }
-                            });
+                            if (ele.cycleStatisticsData && ele.cycleStatisticsData.length > 0) {
+                                this.updateSectionData(ele.cycleStatisticsData, 'cycleStatisticsData', '固定间隔');
+                            }
                         });
                     }
-                    if (newVal.CycleTimeData) {
-                        newVal.CycleTimeData.forEach((ele) => {
-                            this.$nextTick(() => {
-                                //    debugger
-                                // var thatNN = this;
-                                ele.cycleTimeData.forEach((item) => {
-                                    if (this.$route.query.type == '离线视频') {
-                                        var timeNew = item.time.split('.')[0];
-                                        var dateLength = timeNew.length;
-                                        var key = timeNew.substring(dateLength - 8, dateLength);
-                                        item.time = key;
-                                    } else {
-                                        item.time = item.time.split('.')[0];
-                                    }
-                                    if (item.type_data != null) {
-                                        this.typeCycleStatistics = item;
-                                    }
-                                });
-                                if (this.$refs.typeChartRef1 != undefined) {
-                                    // // 轮循固定时刻生成的各类组件
-                                    this.getRef(this.$refs.typeChartRef1, '固定时刻');
-                                }
-                            });
+                    if (newVal.cycleTimeData && newVal.cycleTimeData.length > 0) {
+                        newVal.cycleTimeData.forEach((ele) => {
+                            if (ele.cycleTimeData && ele.cycleTimeData.length > 0) {
+                                this.updateSectionData(ele.cycleTimeData, 'cycleTimeData', '固定时刻');
+                            }
                         });
                     }
-
-                    // });
                 }
             },
             immediate: true,
             deep: true
         },
-        // activeName:'channge',
         // 处理过的触发数据
         triggerListData: {
             handler(newVal) {
-                // console.log("实时触发triggerListData-",newVal)
-                this.triggerList = newVal;
-                //  //console.log("oldVal",oldVal)
+                // console.log('实时触发triggerListData-', newVal);
+                //this.triggerList = newVal; //目前看用不到这个数组
                 // 触发数据
-                var _this = this;
-                if (newVal.length != 0 && _this.sectionData.length>0) {
-                    _this.classify.forEach((ele, index) => {
-                        if (ele.trigger == undefined && ele.timeMode == '实时触发') {
-                            ele.trigger = [];
-                        }
-                        newVal.forEach((item) => {
-                            if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '实时触发') {
-                                // //console.log(ele.analogAreaComponentId, 'analogAreaComponentId');
-                                // //console.log(item.component_id, 'component_id');
-                                if (ele.trigger.length == 10) {
-                                    ele.trigger.pop();
-                                }
-                                if (this.$route.query.type == '离线视频') {
-                                    var timeNew = item.time.split('.')[0];
-                                    var dateLength = timeNew.length;
-                                    var key = timeNew.substring(dateLength - 8, dateLength);
-                                    item.time = key;
-                                } else {
-                                    item.time = item.time.split('.')[0];
-                                }
-
-                                // 该时间的触发数据
-                                if (item.type_data != null) {
-                                    _this.typeTimeMode = item;
-                                }
-                                //component_type
-                                // if(item.component_name=='车头时距_4'){
-                                //     console.log("dataBoard实时触发triggerListData-item",item)
-                                // }
-                                ele.trigger.unshift(item);
-                                _this.$nextTick(() => {
-                                    if (_this.$refs.typeChartRef != undefined) {
-                                        for (let i = 0; i < _this.$refs.typeChartRef.length; i++) {
-                                            // //console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据');
-                                            let itemTypeChart = _this.$refs.typeChartRef[i];
-                                            if (itemTypeChart.dataArr != undefined && itemTypeChart.dataArr.length != 0) {
-                                                if (itemTypeChart.echartArr.includes('时间曲线图')) {
-                                                    _this.$refs.typeChartRef[i].$refs.lineChartRef.drawLine(
-                                                        _this.$refs.typeChartRef[i].dataArr,
-                                                        _this.$refs.typeChartRef[i].componentName.split('_')[0],
-                                                        '实时触发'
-                                                    );
-                                                }
-                                                if (itemTypeChart.echartArr.includes('数值')) {
-                                                    _this.$refs.typeChartRef[i].getDataArr(_this.$refs.typeChartRef[i].dataArr);
-                                                }
-                                                if (itemTypeChart.echartArr.includes('表格')) {
-                                                    _this.$refs.typeChartRef[i].getDataArr(_this.$refs.typeChartRef[i].dataArr);
-                                                }
-                                                if (
-                                                    itemTypeChart.echartArr.includes('直方图') &&
-                                                    itemTypeChart.componentName.split('_')[0]
-                                                ) {
-                                                    // 数据改变重新渲染柱状图
-                                                    itemTypeChart.$refs.barChartRef.drawBar(itemTypeChart.dataArr[0]);
-                                                }
-                                                if (
-                                                    itemTypeChart.echartArr.includes('饼状图') &&
-                                                    itemTypeChart.componentName.split('_')[0]
-                                                ) {
-                                                    // 数据改变重新渲染饼图
-                                                    itemTypeChart.$refs.pieChartRef.drawPie(itemTypeChart.dataArr[0]);
-                                                }
-                                                if (
-                                                    itemTypeChart.echartArr.includes('均值图') &&
-                                                    itemTypeChart.$refs.avgChartRef != undefined
-                                                ) {
-                                                    itemTypeChart.$refs.avgChartRef.drawBar(itemTypeChart.dataArr[0]);
-                                                }
-                                                if (
-                                                    itemTypeChart.componentName.includes('OD') &&
-                                                    itemTypeChart.$refs.ODChartRef != undefined &&
-                                                    itemTypeChart.dataArr[0].ob_data &&
-                                                    itemTypeChart.dataArr[0].ob_data.length != 0
-                                                ) {
-                                                    itemTypeChart.$refs.ODChartRef.drawThermalChart(
-                                                        itemTypeChart.dataArr[0].ob_data,
-                                                        itemTypeChart.startEndData
-                                                    );
-                                                }
-                                            }
-                                        }
-                                    }
-                                });
-                            }
-                        });
-                    });
+                if (newVal && newVal.length > 0 && this.sectionData.length > 0) {
+                    //更新sectionData对应的analogAreaComponentId和timeMode更新trigger数据
+                    this.updateSectionData(newVal, 'trigger', '实时触发');
                 }
             },
-            immediate: true
+            immediate: true,
+            deep: true
         },
         // 固定时刻的数据
         cycleTimeData: {
             handler(newVal) {
                 // 监听到打印固定时刻数据
                 // console.log(newVal, '固定时刻数据');
-
-                if (newVal != undefined && newVal.length != 0 && this.sectionData) {
-                    var thatN = this;
-                    thatN.classify.forEach((ele, index) => {
-                        newVal.forEach((item) => {
-                            if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '固定时刻') {
-                                if (ele.cycleTimeData.length == 10) {
-                                    ele.cycleTimeData.pop();
-                                }
-                                // item.time = item.time.split('.')[0];
-                                if (this.$route.query.type == '离线视频') {
-                                    var timeNew = item.time.split('.')[0];
-                                    var dateLength = timeNew.length;
-                                    var key = timeNew.substring(dateLength - 8, dateLength);
-                                    item.time = key;
-                                } else {
-                                    item.time = item.time.split('.')[0];
-                                }
-                                if (item.type_data != null) {
-                                    // 固定时刻的类型数据
-                                    thatN.typeCycleTimeData = item;
-                                }
-                                ele.cycleTimeData.unshift(item);
-
-                                // thatN.$nextTick(() => {
-                                if (thatN.$refs.typeChartRef1 != undefined) {
-                                    // //console.log("thatN.$refs.typeChartRef1",thatN.$refs.typeChartRef1)
-                                    // 轮循固定时刻生成的各类组件
-                                    for (let i = 0; i < thatN.$refs.typeChartRef1.length; i++) {
-                                        let itemTypeChartRef1 = thatN.$refs.typeChartRef1[i];
-                                        if (
-                                            itemTypeChartRef1.length != 0 &&
-                                            itemTypeChartRef1.dataArr != undefined &&
-                                            itemTypeChartRef1.dataArr.length != 0
-                                        ) {
-                                            if (itemTypeChartRef1.echartArr.includes('时间曲线图')) {
-                                                thatN.$refs.typeChartRef1[i].$refs.lineChartRef.drawLine(
-                                                    thatN.$refs.typeChartRef1[i].dataArr,
-                                                    thatN.$refs.typeChartRef1[i].componentName.split('_')[0],
-                                                    '固定时刻'
-                                                );
-                                            }
-                                            if (itemTypeChartRef1.echartArr.includes('数值')) {
-                                                thatN.$refs.typeChartRef1[i].getDataArr(thatN.$refs.typeChartRef1[i].dataArr);
-                                            }
-                                            if (itemTypeChartRef1.echartArr.includes('表格')) {
-                                                thatN.$refs.typeChartRef1[i].getDataArr(thatN.$refs.typeChartRef1[i].dataArr);
-                                            }
-                                            if (
-                                                itemTypeChartRef1.echartArr.includes('直方图') &&
-                                                itemTypeChartRef1.$refs.barChartRef.drawBar
-                                            ) {
-                                                // 数据改变重新渲染柱状图
-                                                itemTypeChartRef1.$refs.barChartRef.drawBar(itemTypeChartRef1.dataArr[0]);
-                                            }
-                                            if (
-                                                itemTypeChartRef1.echartArr.includes('饼状图') &&
-                                                itemTypeChartRef1.$refs.pieChartRef.drawPie
-                                            ) {
-                                                // 数据改变重新渲染饼图
-                                                itemTypeChartRef1.$refs.pieChartRef.drawPie(itemTypeChartRef1.dataArr[0]);
-                                            }
-                                            if (
-                                                itemTypeChartRef1.echartArr.includes('均值图') &&
-                                                itemTypeChartRef1.$refs.avgChartRef != undefined
-                                            ) {
-                                                itemTypeChartRef1.$refs.avgChartRef.drawBar(itemTypeChartRef1.dataArr[0]);
-                                            }
-                                            if (
-                                                itemTypeChartRef1.componentName.includes('OD') &&
-                                                itemTypeChartRef1.$refs.ODChartRef != undefined &&
-                                                itemTypeChartRef1.dataArr[0].ob_data &&
-                                                itemTypeChartRef1.dataArr[0].ob_data.length != 0
-                                            ) {
-                                                // console.log('固定时刻-od',itemTypeChartRef1.dataArr[0].ob_data)
-                                                itemTypeChartRef1.$refs.ODChartRef.drawThermalChart(
-                                                    itemTypeChartRef1.dataArr[0].ob_data,
-                                                    itemTypeChartRef1.startEndData
-                                                );
-                                            }
-                                        }
-                                    }
-
-                                    // });
-                                }
-                            }
-                        });
-                    });
+                if (newVal && newVal.length > 0 && this.sectionData.length > 0) {
+                    this.updateSectionData(newVal, 'cycleTimeData', '固定时刻');
                 }
-                // else {
-                //     var _thatN = this
-                //     _thatN.classify.forEach((ele, index) => {
-
-                //         // newVal.forEach(item => {
-                //         if (ele.timeMode == '固定时刻') {
-                //             if (ele.cycleTimeData.length == 10) {
-                //                 ele.cycleTimeData.pop();
-                //             }
-                //                 // item.time = item.time.split('.')[0];
-                //                 // if (item.type_data != null) {
-                //                 //     // 固定时刻的类型数据
-                //                 //     _thatN.typeCycleTimeData = item;
-                //                 // }
-                //                 // ele.cycleTimeData.unshift(item);
-                //                 // _thatN.$nextTick(() => {
-                //                 if (_thatN.$refs.typeChartRef1 != undefined) {
-                //                     // //console.log("thatN.$refs.typeChartRef1",_thatN.$refs.typeChartRef1)
-                //                     // 轮循固定时刻生成的各类组件
-                //                     for (let i = 0; i < _thatN.$refs.typeChartRef1.length; i++) {
-                //                         let itemTypeChartRef1 = thatN.$refs.typeChartRef1[i]
-                //                         if (itemTypeChartRef1.length != 0 && itemTypeChartRef1.dataArr != undefined && itemTypeChartRef1.dataArr.length != 0) {
-
-                //                             if (itemTypeChartRef1.echartArr.includes('时间曲线图')) {
-                //                                 _thatN.$refs.typeChartRef1[i].$refs.lineChartRef.drawLine(_thatN.$refs.typeChartRef1[i].dataArr, _thatN.$refs.typeChartRef1[i].componentName.split('_')[0], '固定时刻')
-                //                             }
-                //                             if (itemTypeChartRef1.echartArr.includes('数值')) {
-                //                                 _thatN.$refs.typeChartRef1[i].getDataArr(_thatN.$refs.typeChartRef1[i].dataArr)
-                //                             }
-
-                //                             if (itemTypeChartRef1.echartArr.includes('直方图') && itemTypeChartRef1.$refs.barChartRef.drawBar) {
-                //                                 // 数据改变重新渲染柱状图
-                //                                 itemTypeChartRef1.$refs.barChartRef.drawBar(itemTypeChartRef1.dataArr[0])
-                //                             }
-                //                             if (itemTypeChartRef1.echartArr.includes('饼状图') && itemTypeChartRef1.$refs.pieChartRef.drawPie) {
-                //                                 // 数据改变重新渲染饼图
-                //                                 itemTypeChartRef1.$refs.pieChartRef.drawPie(itemTypeChartRef1.dataArr[0])
-                //                             }
-                //                             if (itemTypeChartRef1.echartArr.includes('均值图') && itemTypeChartRef1.$refs.avgChartRef.drawBar) {
-                //                                 itemTypeChartRef1.$refs.avgChartRef.drawBar(itemTypeChartRef1.dataArr[0])
-                //                             }
-                //                             if (itemTypeChartRef1.componentName.includes('OD') && itemTypeChartRef1.$refs.ODChartRef != undefined && itemTypeChartRef1.dataArr[0].ob_data.length != 0) {
-                //                                 itemTypeChartRef1.$refs.ODChartRef.drawThermalChart(itemTypeChartRef1.dataArr[0].ob_data, itemTypeChartRef1.startEndData)
-                //                             }
-
-                //                     }
-                //                 }
-
-                //                 // });
-                //             }
-                //         }
-                //         // });
-                //     });
-                // }
             },
-            immediate: true
+            immediate: true,
+            deep: true
         },
         //固定间隔
         cycleStatisticsData: {
             handler(newVal) {
                 // console.log('固定间隔', newVal);
-                if (newVal != undefined && newVal.length != 0 && this.sectionData) {
-                    var that = this;
-                    that.classify.forEach((ele, index) => {
-                        newVal.forEach((item) => {
-                            if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '固定间隔') {
-                                if (ele.cycleStatisticsData.length == 10) {
-                                    ele.cycleStatisticsData.pop();
-                                }
-
-                                if (this.$route.query.type == '离线视频') {
-                                    var timeNew = item.time.split('.')[0];
-                                    var dateLength = timeNew.length;
-                                    var key = timeNew.substring(dateLength - 8, dateLength);
-                                    item.time = key;
-                                } else {
-                                    item.time = item.time.split('.')[0];
-                                }
-                                if (item.type_data != null) {
-                                    that.typeCycleStatistics = item;
-                                }
-                                ele.cycleStatisticsData.unshift(item);
-                                if (that.$refs.typeChartRef2 != undefined) {
-                                    for (let i = 0; i < that.$refs.typeChartRef2.length; i++) {
-                                        let itemTypeChartRef2 = that.$refs.typeChartRef2[i];
-
-                                        if (
-                                            itemTypeChartRef2.length != 0 &&
-                                            itemTypeChartRef2.dataArr != undefined &&
-                                            itemTypeChartRef2.dataArr.length != 0
-                                        ) {
-                                            if (itemTypeChartRef2.echartArr.includes('时间曲线图')) {
-                                                that.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(
-                                                    that.$refs.typeChartRef2[i].dataArr,
-                                                    that.$refs.typeChartRef2[i].componentName.split('_')[0],
-                                                    '固定间隔'
-                                                );
-                                            }
-                                            if (itemTypeChartRef2.echartArr.includes('数值')) {
-                                                that.$refs.typeChartRef2[i].getDataArr(that.$refs.typeChartRef2[i].dataArr);
-                                            }
-                                            if (itemTypeChartRef2.echartArr.includes('表格')) {
-                                                that.$refs.typeChartRef2[i].getDataArr(that.$refs.typeChartRef2[i].dataArr);
-                                            }
-                                            // //console.log(item,'组件数据');
-                                            if (
-                                                itemTypeChartRef2.echartArr.includes('直方图') &&
-                                                itemTypeChartRef2.$refs.barChartRef.drawBar
-                                            ) {
-                                                // 数据改变重新渲染柱状图
-                                                // //console.log(item, '组件');
-                                                itemTypeChartRef2.$refs.barChartRef.drawBar(itemTypeChartRef2.dataArr[0]);
-                                            }
-                                            if (
-                                                itemTypeChartRef2.echartArr.includes('饼状图') &&
-                                                itemTypeChartRef2.$refs.pieChartRef.drawPie
-                                            ) {
-                                                // 数据改变重新渲染饼图
-                                                itemTypeChartRef2.$refs.pieChartRef.drawPie(itemTypeChartRef2.dataArr[0]);
-                                            }
-                                            if (
-                                                itemTypeChartRef2.echartArr.includes('均值图') &&
-                                                itemTypeChartRef2.$refs.avgChartRef != undefined
-                                            ) {
-                                                itemTypeChartRef2.$refs.avgChartRef.drawBar(itemTypeChartRef2.dataArr[0]);
-                                            }
-                                            if (
-                                                itemTypeChartRef2.componentName.includes('OD') &&
-                                                itemTypeChartRef2.$refs.ODChartRef != undefined &&
-                                                itemTypeChartRef2.dataArr[0].ob_data &&
-                                                itemTypeChartRef2.dataArr[0].ob_data.length != 0
-                                            ) {
-                                                itemTypeChartRef2.$refs.ODChartRef.drawThermalChart(
-                                                    itemTypeChartRef2.dataArr[0].ob_data,
-                                                    itemTypeChartRef2.startEndData
-                                                );
-                                            }
-                                        }
-                                    }
-                                }
-                            }
-                        });
-                    });
+                if (newVal && newVal.length > 0 && this.sectionData.length > 0) {
+                    this.updateSectionData(newVal, 'cycleStatisticsData', '固定间隔');
                 }
-                // else {
-
-                //     var _that = this
-                //     _that.classify.forEach(ele => {
-                //         if (ele.timeMode == '固定间隔') {
-                //             if (ele.cycleStatisticsData.length == 10) {
-                //                 ele.cycleStatisticsData.pop();
-                //             }
-                //                 // item.time = item.time.split('.')[0];
-                //                 //  if (item.type_data != null) {
-                //                 //       _that.typeCycleStatistics = item;
-                //                 //  }
-                //                 // ele.cycleStatisticsData.unshift(item);
-                //                 if (_that.$refs.typeChartRef2 != undefined) {
-                //                     for (let i = 0; i < _that.$refs.typeChartRef2.length; i++) {
-                //                         let itemTypeChartRef2 = _that.$refs.typeChartRef2[i];
-                //                         // //console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据');
-                //                         if (itemTypeChartRef2.length != 0 && itemTypeChartRef2.dataArr != undefined && itemTypeChartRef2.dataArr.length != 0) {
-                //                             // this.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(this.$refs.typeChartRef2[i].dataArr, _this.$refs.typeChartRe2f[i].componentName.split('_')[0])
-                //                             if (itemTypeChartRef2.echartArr.includes('时间曲线图')) {
-                //                                 _that.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(_that.$refs.typeChartRef2[i].dataArr, _that.$refs.typeChartRef2[i].componentName.split('_')[0], '固定间隔')
-                //                             }
-                //                             if (itemTypeChartRef2.echartArr.includes('数值')) {
-                //                                 _that.$refs.typeChartRef2[i].getDataArr(_that.$refs.typeChartRef2[i].dataArr)
-                //                             }
-                //                             // //console.log(item,'组件数据');
-                //                             if (itemTypeChartRef2.echartArr.includes('直方图') && itemTypeChartRef2.$refs.barChartRef.drawBar) {
-                //                                 // 数据改变重新渲染柱状图
-                //                                 // //console.log(item, '组件');
-                //                                 itemTypeChartRef2.$refs.barChartRef.drawBar(itemTypeChartRef2.dataArr[0])
-                //                             }
-                //                             if (itemTypeChartRef2.echartArr.includes('饼状图') && itemTypeChartRef2.$refs.pieChartRef.drawPie) {
-                //                                 // 数据改变重新渲染饼图
-                //                                 itemTypeChartRef2.$refs.pieChartRef.drawPie(itemTypeChartRef2.dataArr[0])
-                //                             }
-
-                //                             //  if (item.echartArr.includes('均值图') && item.$refs.avgChartRef != undefined && item.dataArr.length != 0) {
-                //                             //     item.$refs.avgChartRef.drawBar(item.dataArr[0])
-                //                             // }
-                //                             if (itemTypeChartRef2.echartArr.includes('均值图') && itemTypeChartRef2.$refs.avgChartRef != undefined) {
-                //                                 itemTypeChartRef2.$refs.avgChartRef.drawBar(itemTypeChartRef2.dataArr[0])
-                //                             }
-                //                         }
-
-                //                 }
-
-                //             }
-                //         }
-
-                //     });
-                // }
             },
-            immediate: true
+            immediate: true,
+            deep: true
         },
         //周期统计实时累计数据主题
         cycleAccumulateData: {
             handler(newVal) {
                 // console.log('周期统计实时累计数据主题', newVal);
-                if (newVal != undefined && newVal.length != 0 && this.sectionData) {
-                    var that = this;
-                    that.classify.forEach((ele, index) => {
-                        newVal.forEach((item) => {
-                            if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '固定间隔') {
-                                // if (ele.cycleStatisticsData.length == 10) {
-                                //     ele.cycleStatisticsData.pop();
-                                // }
-
-                                if (this.$route.query.type == '离线视频') {
-                                    var timeNew = item.time.split('.')[0];
-                                    var dateLength = timeNew.length;
-                                    var key = timeNew.substring(dateLength - 8, dateLength);
-                                    item.time = key;
-                                } else {
-                                    item.time = item.time.split('.')[0];
-                                }
-                                if (item.type_data != null) {
-                                    that.typeCycleStatistics = item;
-                                }
-                                // ele.cycleStatisticsData.unshift(item);
-                                if (that.$refs.typeChartRef2 != undefined) {
-                                    for (let i = 0; i < that.$refs.typeChartRef2.length; i++) {
-                                        let itemTypeChartRef2 = that.$refs.typeChartRef2[i];
-
-                                        if (
-                                            itemTypeChartRef2.length != 0 &&
-                                            itemTypeChartRef2.dataArr != undefined &&
-                                            itemTypeChartRef2.dataArr.length != 0
-                                        ) {
-                                            //console.log('itemTypeChartRef2.echartArr',itemTypeChartRef2.echartArr)
-                                            if (
-                                                itemTypeChartRef2.echartArr.includes('数值') &&
-                                                itemTypeChartRef2.itemData.analogAreaComponentId == item.component_id
-                                            ) {
-                                                //只需要修改数值组件,逻辑存在问题
-                                                itemTypeChartRef2.getcycleAccumulateDataArr([item]);
-                                            }
-                                        }
-                                    }
-                                }
-                            }
-                        });
-                    });
+                if (newVal && newVal.length > 0 && this.sectionData.length > 0) {
+                    //实时累计数据主题 只需要覆盖固定间隔主题的卡片数据，图表数据不需要更新
+                    this.updateSectionData(newVal, 'cycleAccumulateData', '固定间隔');
                 }
             },
             immediate: true
diff --git a/src/views/sensorFusion/index.vue b/src/views/sensorFusion/index.vue
index e038b3c..20bd0a4 100644
--- a/src/views/sensorFusion/index.vue
+++ b/src/views/sensorFusion/index.vue
@@ -797,7 +797,7 @@
                                                     <el-empty
                                                         :image-size="100"
                                                         description="暂无数据"
-                                                        v-if="e.triggerDataList == null"
+                                                        v-if="!e.triggerDataList || e.triggerDataList.length == 0"
                                                     ></el-empty>
                                                     <chartsPie
                                                         :echartsRef="'echartsPie' + e.duocgqrhpzId"
@@ -806,7 +806,7 @@
                                                         :dataList="e.triggerDataList"
                                                         :timeMode="'实时触发'"
                                                         :intersectionName="intersectionName"
-                                                        v-else-if="e.triggerDataList != null"
+                                                        v-else
                                                     />
                                                 </div>
                                                 <div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
@@ -854,7 +854,7 @@
                                                     <el-empty
                                                         :image-size="100"
                                                         description="暂无数据"
-                                                        v-if="e.triggerDataList == null"
+                                                        v-if="!e.triggerDataList || e.triggerDataList.length == 0"
                                                     ></el-empty>
                                                     <chartsBar
                                                         :echartsRef="'echartsBar' + e.duocgqrhpzId"
@@ -863,7 +863,7 @@
                                                         :timeMode="'实时触发'"
                                                         :intersectionName="intersectionName"
                                                         :dataList="e.triggerDataList"
-                                                        v-else-if="e.triggerDataList != null"
+                                                        v-else
                                                     />
                                                 </div>
                                                 <div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
@@ -911,7 +911,7 @@
                                                     <el-empty
                                                         :image-size="100"
                                                         description="暂无数据"
-                                                        v-if="e.triggerDataList == null"
+                                                        v-if="!e.triggerDataList || e.triggerDataList.length == 0"
                                                     ></el-empty>
                                                     <meanValue
                                                         :echartsRef="'meanValue' + e.duocgqrhpzId"
@@ -919,7 +919,7 @@
                                                         :chatShowType="chatShowType"
                                                         :intersectionName="intersectionName"
                                                         :dataList="e.triggerDataList"
-                                                        v-else-if="e.triggerDataList != null"
+                                                        v-else
                                                     />
                                                 </div>
                                                 <div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
@@ -965,7 +965,7 @@
                                                     <el-empty
                                                         :image-size="100"
                                                         description="暂无数据"
-                                                        v-if="e.triggerDataList == null"
+                                                        v-if="!e.triggerDataList || e.triggerDataList.length == 0"
                                                     ></el-empty>
                                                     <thermalOD
                                                         :echartsRef="'thermalOD' + e.duocgqrhpzId"
@@ -977,7 +977,7 @@
                                                         :endName="e.endSectionNames"
                                                         :dataList="e.triggerDataList"
                                                         :intersectionName="intersectionName"
-                                                        v-else-if="e.triggerDataList != null"
+                                                        v-else
                                                     />
                                                 </div>
                                                 <div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
@@ -1420,278 +1420,9 @@ export default {
             activeNames: ['1'], // 视频折叠
             intersectionName: [], //数据分析名称
             videoList: [],
-            intersectionList: [
-                // {
-                //     intersectionLabel: '路口数据分析',
-                //     intersectionChildList: [
-                //         {
-                //             intersectionTitle: '北进口',
-                //             children: [
-                //                 {
-                //                     name: '卡片区',
-                //                     twoContentList: [
-                //                         {
-                //                             parentTitle: '左转',
-                //                             children: [
-                //                                 {
-                //                                     childrenTitle: '流量',
-                //                                     childrenSmallTitle: '流量',
-                //                                     count: 1,
-                //                                     time: '2023-08-25 11:26:10'
-                //                                 },
-                //                                 {
-                //                                     childrenTitle: '流量',
-                //                                     childrenSmallTitle: '流量',
-                //                                     count: 1,
-                //                                     time: '2023-08-25 11:26:10'
-                //                                 },
-                //                                 {
-                //                                     childrenTitle: '流量',
-                //                                     childrenSmallTitle: '流量',
-                //                                     count: 1,
-                //                                     time: '2023-08-25 11:26:10'
-                //                                 },
-                //                                 {
-                //                                     childrenTitle: '流量',
-                //                                     childrenSmallTitle: '流量',
-                //                                     count: 1,
-                //                                     time: '2023-08-25 11:26:10'
-                //                                 },
-                //                                 {
-                //                                     childrenTitle: '流量',
-                //                                     childrenSmallTitle: '流量',
-                //                                     count: 1,
-                //                                     time: '2023-08-25 11:26:10'
-                //                                 }
-                //                             ]
-                //                         },
-                //                         {
-                //                             parentTitle: '右转',
-                //                             children: [
-                //                                 {
-                //                                     childrenTitle: '流量',
-                //                                     childrenSmallTitle: '流量',
-                //                                     count: 1,
-                //                                     time: '2023-08-25 11:26:10'
-                //                                 },
-                //                                 {
-                //                                     childrenTitle: '速度',
-                //                                     childrenSmallTitle: '速度',
-                //                                     count: 1,
-                //                                     time: '2023-08-25 11:26:10'
-                //                                 },
-                //                                 {
-                //                                     childrenTitle: '流量',
-                //                                     childrenSmallTitle: '流量',
-                //                                     count: 1,
-                //                                     time: '2023-08-25 11:26:10'
-                //                                 },
-                //                                 {
-                //                                     childrenTitle: '流量',
-                //                                     childrenSmallTitle: '流量',
-                //                                     count: 1,
-                //                                     time: '2023-08-25 11:26:10'
-                //                                 }
-                //                             ]
-                //                         },
-                //                         {
-                //                             parentTitle: '直行',
-                //                             children: [
-                //                                 {
-                //                                     childrenTitle: '流量',
-                //                                     childrenSmallTitle: '流量',
-                //                                     count: 1,
-                //                                     time: '2023-08-25 11:26:10'
-                //                                 }
-                //                             ]
-                //                         }
-                //                     ]
-                //                 },
-                //                 {
-                //                     name: '图表区',
-                //                     echartsList: [
-                //                         {
-                //                             echartsType: '线性',
-                //                             name: '视频X82_线性图表'
-                //                         },
-                //                         {
-                //                             echartsType: '线性2',
-                //                             name: '视频X82_表格'
-                //                         },
-                //                         {
-                //                             echartsType: '线性2',
-                //                             name: '视频X82_饼图'
-                //                         }
-                //                     ]
-                //                 }
-                //             ]
-                //         }
-                //     ]
-                // }
-            ],
+            intersectionList: [],
             tabPosition: '1',
-            threeData: [
-                // {
-                //     id: 1,
-                //     label: '路口数据分析页',
-                //     showInput: false,
-                //     children: [
-                //         {
-                //             id: 2,
-                //             label: '北进口',
-                //             showInput: false,
-                //             children: [
-                //                 {
-                //                     id: 3,
-                //                     label: '卡片区',
-                //                     children: [
-                //                         {
-                //                             id: 4,
-                //                             label: '左车道',
-                //                             showInput: false,
-                //                             children: [
-                //                                 {
-                //                                     id: 5,
-                //                                     label: '空间组件-指标组件'
-                //                                 },
-                //                                 {
-                //                                     id: 6,
-                //                                     label: '空间组件-指标组件'
-                //                                 },
-                //                                 {
-                //                                     id: 7,
-                //                                     label: '空间组件-指标组件'
-                //                                 },
-                //                                 {
-                //                                     id: 8,
-                //                                     label: '空间组件-指标组件'
-                //                                 }
-                //                             ]
-                //                         },
-                //                         {
-                //                             id: 9,
-                //                             label: '中车道',
-                //                             showInput: false,
-                //                             children: [
-                //                                 {
-                //                                     id: 10,
-                //                                     label: '空间组件-指标组件'
-                //                                 },
-                //                                 {
-                //                                     id: 11,
-                //                                     label: '空间组件-指标组件'
-                //                                 },
-                //                                 {
-                //                                     id: 12,
-                //                                     label: '空间组件-指标组件'
-                //                                 },
-                //                                 {
-                //                                     id: 13,
-                //                                     label: '空间组件-指标组件'
-                //                                 }
-                //                             ]
-                //                         }
-                //                     ]
-                //                 },
-                //                 {
-                //                     id: 14,
-                //                     label: '图表区',
-                //                     children: [
-                //                         {
-                //                             id: 15,
-                //                             label: '流量组件-曲线图'
-                //                         },
-                //                         {
-                //                             id: 16,
-                //                             label: '速度组件-表格'
-                //                         }
-                //                     ]
-                //                 }
-                //             ]
-                //         }
-                //     ]
-                // },
-                // {
-                //     id: 2,
-                //     label: '路段数据分析页',
-                //     showInput: false,
-                //     children: [
-                //         {
-                //             id: 3,
-                //             label: '北进口',
-                //             showInput: false,
-                //             children: [
-                //                 {
-                //                     id: 4,
-                //                     label: '卡片区',
-                //                     children: [
-                //                         {
-                //                             id: 5,
-                //                             label: '左车道',
-                //                             showInput: false,
-                //                             children: [
-                //                                 {
-                //                                     id: 6,
-                //                                     label: '空间组件-指标组件'
-                //                                 },
-                //                                 {
-                //                                     id: 7,
-                //                                     label: '空间组件-指标组件'
-                //                                 },
-                //                                 {
-                //                                     id: 8,
-                //                                     label: '空间组件-指标组件'
-                //                                 },
-                //                                 {
-                //                                     id: 9,
-                //                                     label: '空间组件-指标组件'
-                //                                 }
-                //                             ]
-                //                         },
-                //                         {
-                //                             id: 10,
-                //                             label: '中车道',
-                //                             showInput: false,
-                //                             children: [
-                //                                 {
-                //                                     id: 11,
-                //                                     label: '空间组件-指标组件'
-                //                                 },
-                //                                 {
-                //                                     id: 12,
-                //                                     label: '空间组件-指标组件'
-                //                                 },
-                //                                 {
-                //                                     id: 13,
-                //                                     label: '空间组件-指标组件'
-                //                                 },
-                //                                 {
-                //                                     id: 14,
-                //                                     label: '空间组件-指标组件'
-                //                                 }
-                //                             ]
-                //                         }
-                //                     ]
-                //                 },
-                //                 {
-                //                     id: 15,
-                //                     label: '图表区',
-                //                     children: [
-                //                         {
-                //                             id: 16,
-                //                             label: '流量组件-曲线图'
-                //                         },
-                //                         {
-                //                             id: 17,
-                //                             label: '速度组件-表格'
-                //                         }
-                //                     ]
-                //                 }
-                //             ]
-                //         }
-                //     ]
-                // }
-            ],
+            threeData: [],
             defaultProps: {
                 children: 'children',
                 label: 'label'
@@ -1843,9 +1574,9 @@ export default {
                 this.addSelectOptionField(this.intersectionList);
                 // this.addTriggerDataField(this.intersectionList);
                 //mqtt订阅
-                // this.$nextTick(() => {
-                this.getMqtt();
-                // });
+                this.$nextTick(() => {
+                    this.getMqtt();
+                });
 
                 //console.log(this.intersectionList, 'this.intersectionList');
                 //开发路口默认展开第一个
@@ -2963,7 +2694,7 @@ export default {
                             const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
                             var detId = [];
                             const msgN = JSON.parse(temp);
-                            // console.log('实时触发trigger-', msgN);
+                            // console.log('实时触发trigger-', JSON.stringify(msgN));
                             for (let j = 0; j < msgN.length; j++) {
                                 const locations = this.findLocationById(this.intersectionList, msgN[j].component_id);
                                 //处理speed正负值和-1，卡片区在html上处理了，数据源不做处理
@@ -3110,6 +2841,10 @@ export default {
                                     //     originalSpeed: msgN[j].speed
                                     // });
                                 } else if (msgN[j].component_type == '速度') {
+                                    // if(msgN[j].component_name=='速度_3'){
+                                    //   console.log('实时触发trigger-速度', msgN[j]);  
+                                    // }
+                                    
                                     //卡片区
                                     let map = {
                                         speed: msgN[j].speed,
@@ -4243,12 +3978,12 @@ export default {
                     width: 440px;
                     height: 282px;
                 }
-                // .echarts0 {
-                //     position: absolute;
-                //     width: 440px;
-                //     height: 282px;
-                //     z-index: 999;
-                // }
+                .echarts0 {
+                    // position: absolute;
+                    // width: 440px;
+                    // height: 282px;
+                    z-index: 999;
+                }
                 // .echarts1 {
                 //     position: absolute;
                 //     width: 440px;