<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: {
        // 触发的原始数据
        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("newVal",newVal,'流量数据')
                this.triggerList = newVal;
                //  //console.log("oldVal",oldVal)
                // 触发数据
                var _this = this;
                if (newVal.length != 0 && _this.sectionData) {
                    _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;
                                }
                                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>
