{"remainingRequest":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!E:\\视频边缘计算管理平台\\TransFlow\\src\\views\\bounced\\dataBoard.vue?vue&type=script&lang=js&","dependencies":[{"path":"E:\\视频边缘计算管理平台\\TransFlow\\src\\views\\bounced\\dataBoard.vue","mtime":1675419623862},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\babel-loader\\lib\\index.js","mtime":499162500000},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\r\nimport typeChart from '../../components/target/typeChart.vue';\r\nimport OD from '../../components/target/OD.vue';\r\n// import {mapMutation} from 'vuex'\r\nimport { getComponentSection } from '../../api/index';\r\nexport default {\r\n    components: {\r\n        typeChart,\r\n        OD\r\n    },\r\n    props: {\r\n        activeName: {\r\n            type: String\r\n        },\r\n        triggerData: {\r\n            type: Array,\r\n            default() {\r\n                return [];\r\n            }\r\n        }\r\n    },\r\n    data() {\r\n        return {\r\n            title1: '01断面',\r\n            title2: '01区域',\r\n            dialogVisible: false,\r\n            // 触发数据断面与区域相同\r\n            tableData: [\r\n                {\r\n                    steam_id: 0,\r\n                    timestamp: '2022-10-01 09:15:11.156',\r\n                    obj_id: 125,\r\n                    type: 'Person',\r\n                    plate: '苏A0131M',\r\n                    speed: 35.2,\r\n                    event: 'in',\r\n                    lane: 0,\r\n                    headWay: 19\r\n                },\r\n                {\r\n                    steam_id: 0,\r\n                    timestamp: '2022-10-01 09:15:12.156',\r\n                    obj_id: 125,\r\n                    type: 'Motor Vehicle',\r\n                    plate: '苏A0131M',\r\n                    speed: 70.2,\r\n                    event: 'in',\r\n                    lane: 0,\r\n                    headWay: 6.5\r\n                },\r\n                {\r\n                    steam_id: 0,\r\n                    timestamp: '2022-10-01 09:15:13.156',\r\n                    obj_id: 125,\r\n                    type: 'Non_Motor',\r\n                    plate: '苏A0131M',\r\n                    speed: 60.2,\r\n                    event: 'in',\r\n                    lane: 0,\r\n                    headWay: 10.5\r\n                },\r\n                {\r\n                    steam_id: 0,\r\n                    timestamp: '2022-10-01 09:15:14.156',\r\n                    obj_id: 125,\r\n                    type: 'Non_Motor',\r\n                    plate: '苏A0131M',\r\n                    speed: 60.2,\r\n                    event: 'in',\r\n                    lane: 0,\r\n                    headWay: 2.5\r\n                },\r\n                {\r\n                    steam_id: 0,\r\n                    timestamp: '2022-10-01 09:15:15.156',\r\n                    obj_id: 125,\r\n                    type: 'Motor Vehicle',\r\n                    plate: '苏A0131M',\r\n                    speed: 60.2,\r\n                    event: 'in',\r\n                    lane: 0,\r\n                    headWay: 11.5\r\n                }\r\n            ],\r\n\r\n            // 断面的周期统计\r\n            sectionList: [\r\n                {\r\n                    steam_id: '0',\r\n                    gate_id: 'Gate_1',\r\n                    name: '西进口',\r\n                    timestamp: '2022-10-1',\r\n                    interval: '53',\r\n                    type: 'truck',\r\n                    in_flow: 90,\r\n                    out_flow: 120,\r\n                    flow: 147,\r\n                    in_spd: 20.1,\r\n                    out_spd: 30.6,\r\n                    speed: 30\r\n                },\r\n                {\r\n                    steam_id: '0',\r\n                    gate_id: 'Gate_1',\r\n                    name: '西进口',\r\n                    timestamp: '2022-10-1',\r\n                    interval: '53',\r\n                    type: 'truck',\r\n                    in_flow: 90,\r\n                    out_flow: 120,\r\n                    flow: 123,\r\n                    in_spd: 20.1,\r\n                    out_spd: 30.6,\r\n                    speed: 40\r\n                },\r\n                {\r\n                    steam_id: '0',\r\n                    gate_id: 'Gate_1',\r\n                    name: '西进口',\r\n                    timestamp: '2022-10-1',\r\n                    interval: '53',\r\n                    type: 'truck',\r\n                    in_flow: 90,\r\n                    out_flow: 80,\r\n                    flow: 210,\r\n                    in_spd: 20.1,\r\n                    out_spd: 30.6,\r\n                    speed: 50\r\n                },\r\n                {\r\n                    steam_id: '0',\r\n                    gate_id: 'Gate_1',\r\n                    name: '西进口',\r\n                    timestamp: '2022-10-1',\r\n                    interval: '53',\r\n                    type: 'truck',\r\n                    in_flow: 90,\r\n                    out_flow: 120,\r\n                    flow: 210,\r\n                    in_spd: 20.1,\r\n                    out_spd: 30.6,\r\n                    speed: 77\r\n                }\r\n            ],\r\n            // 区域的周期时刻\r\n            regionList1: [\r\n                {\r\n                    zone_id: '0',\r\n                    gate_id: 'Zone_1',\r\n                    name: '西进口左1',\r\n                    timestamp: '2022-10-1',\r\n                    frame: 1000,\r\n                    type: 'car',\r\n                    n_stay: 3,\r\n                    n_queue: 2,\r\n                    occ: 1,\r\n                    speed: 5.6\r\n                },\r\n                {\r\n                    zone_id: '0',\r\n                    gate_id: 'Zone_1',\r\n                    name: '西进口左1',\r\n                    timestamp: '2022-10-1',\r\n                    frame: 1000,\r\n                    type: 'car',\r\n                    n_stay: 3,\r\n                    n_queue: 2,\r\n                    occ: 1,\r\n                    speed: 12.6\r\n                },\r\n                {\r\n                    zone_id: '0',\r\n                    gate_id: 'Zone_1',\r\n                    name: '西进口左1',\r\n                    timestamp: '2022-10-1',\r\n                    frame: 1000,\r\n                    type: 'car',\r\n                    n_stay: 3,\r\n                    n_queue: 2,\r\n                    occ: 1,\r\n                    speed: 10\r\n                },\r\n                {\r\n                    zone_id: '0',\r\n                    gate_id: 'Zone_1',\r\n                    name: '西进口左1',\r\n                    timestamp: '2022-10-1',\r\n                    frame: 1000,\r\n                    type: 'car',\r\n                    n_stay: 3,\r\n                    n_queue: 2,\r\n                    occ: 1,\r\n                    speed: 6\r\n                }\r\n            ],\r\n            // 区域的周期统计\r\n            regionList2: [\r\n                {\r\n                    zone_id: '0',\r\n                    gate_id: 'Zone_1',\r\n                    name: '西进口左1',\r\n                    timestamp: '2022-10-1',\r\n                    type: 'car',\r\n                    enter_flow: 1,\r\n                    leave_flow: 3,\r\n                    ave_stay: 3.2,\r\n                    ave_queue: 2.9,\r\n                    ave_occ: 0.56,\r\n                    ave_delay: 8,\r\n                    ave_speed: 12\r\n                },\r\n                {\r\n                    zone_id: '0',\r\n                    gate_id: 'Zone_1',\r\n                    name: '西进口左1',\r\n                    timestamp: '2022-10-1',\r\n                    type: 'car',\r\n                    enter_flow: 1,\r\n                    leave_flow: 3,\r\n                    ave_stay: 3.2,\r\n                    ave_queue: 2.9,\r\n                    ave_occ: 0.56,\r\n                    ave_delay: 7,\r\n                    ave_speed: 22\r\n                },\r\n                {\r\n                    zone_id: '0',\r\n                    gate_id: 'Zone_1',\r\n                    name: '西进口左1',\r\n                    timestamp: '2022-10-1',\r\n                    type: 'car',\r\n                    enter_flow: 1,\r\n                    leave_flow: 3,\r\n                    ave_stay: 3.2,\r\n                    ave_queue: 2.9,\r\n                    ave_occ: 0.56,\r\n                    ave_delay: 17,\r\n                    ave_speed: 12\r\n                }\r\n            ],\r\n\r\n\r\n\r\n            idVal: '',\r\n            //组件数组\r\n            componentList: [],\r\n            // 触发数据数组\r\n            triggerList: [],\r\n\r\n            sectionData: [],\r\n\r\n\r\n\r\n            // 单个区域或者断面的表格触发数据\r\n            tableList: [],\r\n\r\n\r\n            // 路线数据\r\n            headWay: [],\r\n\r\n            itemsDataObject: {\r\n\r\n            }\r\n        };\r\n    },\r\n    created() {\r\n        this.idVal = this.$route.query.id;\r\n        getComponentSection({ VideoId: this.idVal }).then((res) => {\r\n            if (res.data.code == 200) {\r\n                console.log(res.data.data, '11111111111111111');\r\n                this.componentList = res.data.data;\r\n                // 断面\r\n                var sectionArr = [];\r\n                // 区域\r\n                res.data.data.forEach((val) => {\r\n                    sectionArr.push(val.combinationName);\r\n                    sectionArr = Array.from(new Set(sectionArr));\r\n                });\r\n                this.sectionData = sectionArr.map((item) => {\r\n                    item = { title: item, children: [] };\r\n                    res.data.data.forEach((val) => {\r\n                        if (item.title == val.combinationName) {\r\n                            item.children.push(val);\r\n                        }\r\n                    });\r\n                    return item;\r\n                });\r\n            } else if (res.data.code == 404) {\r\n            }\r\n        });\r\n\r\n    },\r\n    methods: {\r\n\r\n\r\n        // 组件图标点击下拉事件\r\n        sectionHandle(i) {\r\n            let sections = document.querySelectorAll('.section');\r\n            let downPulls1 = document.querySelectorAll('.downPull1');\r\n            // 断面的小图标\r\n            downPulls1[i].dataset.num++;\r\n\r\n            if (downPulls1[i].dataset.num % 2 == 0) {\r\n                downPulls1[i].style.cssText = 'transform: rotate(180deg);transition: all 0.5s linear;';\r\n                sections[i].style.height = sections[i].firstChild.offsetHeight + 20 + 'px';\r\n            } else {\r\n                downPulls1[i].style.cssText = 'transition: all 0.5s linear;';\r\n                sections[i].style.height = '500px';\r\n\r\n\r\n            }\r\n        },\r\n        //递归筛选\r\n        // counterCalc(sdata, tdata) {\r\n        //     this.headWay = this.triggerList.filter((val) => {\r\n        //         return val.det_id ==  sdata.graphId\r\n        //     })\r\n        //     debugger\r\n        //     console.log(this.headWay);\r\n        //     // sdata.forEach( => {\r\n\r\n        //     // });\r\n        // },\r\n\r\n        // 筛选触发数据\r\n        tripHandle(s) {\r\n            // debugger\r\n            this.triggerList.forEach(item => {\r\n                if (this.itemsDataObject[item.obj_id]) {\r\n                    if (this.itemsDataObject[item.obj_id].det_id !== item.det_id || this.itemsDataObject[item.obj_id].det_id.split('-').pop() !== item.det_id) {\r\n                        this.itemsDataObject[item.obj_id] = { ...item, det_id: this.itemsDataObject[item.obj_id].det_id + '-' + item.det_id }\r\n                    }\r\n                } else {\r\n                    this.itemsDataObject[item.obj_id] = item\r\n                }\r\n            })\r\n            // debugger\r\n            console.log(this.itemsDataObject, '364');\r\n            // var key = s.graphId + 'out';\r\n            // var data = wayLine[key];\r\n\r\n            // var counter = data.length;//流程\r\n            // if (s.superiorData.length > 0) {\r\n            //     var arr = this.counterCalc(s.superiorData, data);\r\n            //     return\r\n            // }\r\n            // this.counterCalc(s,data)\r\n            /*\r\n            var dataMap = {};//data\r\n            var zoneStruct = [{\r\n                a:123,\r\n                b:456,\r\n                end:456\r\n            },{\r\n                a:123,\r\n                b:789,\r\n                c:888,\r\n                end:888\r\n            },{\r\n                a:123,\r\n                b:456,\r\n                c:888,\r\n                end:888\r\n            },{\r\n                a:123,\r\n                end:123\r\n            }]\r\n\r\n            var objArr={}\r\n            \r\n            if(dataMap[s.graphId]==undefined){\r\n                dataMap[s.graphId]=[]\r\n            }\r\n            dataMap[s.graphId].push(s)\r\n\r\n            var arr = zoneStruct.find(end==s.graphId);\r\n\r\n            s.objectid\r\n\r\n            //arr == dataMap[s.graphId] 是相同的\r\n            */\r\n            // console.log(s);\r\n            // 单个区域或者断面的触发数据\r\n            // let arr = this.triggerList.filter((val) => {\r\n            //     return val.det_id == s.graphId\r\n\r\n            // })\r\n            // console.log(arr);\r\n\r\n        }\r\n    },\r\n    mounted() {\r\n    },\r\n    watch: {\r\n\r\n        // 触发数据\r\n        triggerData: {\r\n            handler(newVal, oldVal) {\r\n                //var wayLine = {};//路线数据\r\n\r\n                // newVal.forEach(ele => {\r\n\r\n                // });\r\n                // if (wayLine[newVal.det_id + '' + newVal.event] == undefined) {\r\n                //     wayLine[newVal.det_id + '' + newVal.event] = [];\r\n                // }\r\n                // wayLine[newVal.det_id + '' + newVal.event].push(newVal);\r\n\r\n\r\n\r\n                // this.$store.commit('setMqtt',newVal)\r\n                console.log(newVal, 'newVal');\r\n                this.triggerList = newVal;\r\n                for (let i = 0; i < this.triggerList.length; i++) {\r\n                    if (this.triggerList[i].headWay == -1) {\r\n                        this.triggerList[i].headWay = '';\r\n                    } else if (this.triggerList[i].lane == -1) {\r\n                        this.triggerList[i].lane = '';\r\n                    }\r\n                }\r\n\r\n\r\n            },\r\n            immediate: true\r\n        }\r\n    }\r\n};\r\n",{"version":3,"sources":["dataBoard.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;AAIA;AACA;AACA;AACA;AACA;;AAEA;;;;AAIA;AACA;;;AAGA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;;AAGA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;;;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA;AACA;AACA","file":"dataBoard.vue","sourceRoot":"src/views/bounced","sourcesContent":["<template>\r\n    <div ref=\"box\" class=\"box\">\r\n        <!-- <p class=\"title\" style=\"margin-bottom: 20px;font-size: 20px;font-weight: 400;\">数据看板</p> -->\r\n        <el-scrollbar class=\"scrollbar\">\r\n            <div class=\"dataBoard\" ref='dataBoard' v-if=\"activeName == 'second'\">\r\n                <!-- 断面 -->\r\n                <div class=\"plate1\" ref=\"plate1\">\r\n                    <div class=\"section\" ref=\"section\" v-for=\"(s, i) in sectionData\" :key=\"s.analogAreaComponentId\">\r\n                        <template>\r\n                            <div ref=\"sectionContent\">\r\n                                <div>\r\n                                    <p class=\"board-title\">\r\n                                        <span>{{ s.title }}</span>\r\n                                    </p>\r\n                                    <span class=\"downPull1\" data-num=\"1\" @click=\"sectionHandle(i)\"></span>\r\n                                </div>\r\n                                <div v-for=\"o in s.children\" :key=\"o.analogAreaComponentId\">\r\n\r\n                                    <OD v-if=\"o.componentName.includes('OD')\" :pageType=\"o.graphicType\" triggerType=\"触发\"\r\n                                        :componentName=\"o.componentName\" :echartArr=\"o.presentationForm\" />\r\n                                    <typeChart v-else :pageType=\"o.graphicType\" triggerType=\"触发\"\r\n                                        :componentName=\"o.componentName\" :data=\"tableData\"\r\n                                        :echartArr=\"o.presentationForm\" :title=\"o.componentName.split('_')[0]\" />\r\n                                </div>\r\n                                <!-- :data=\"triggerList.length != 0 ? triggerList : tableData\" -->\r\n                            </div>\r\n                        </template>\r\n                    </div>\r\n                </div>\r\n\r\n\r\n            </div>\r\n        </el-scrollbar>\r\n        <!-- 详情框 -->\r\n    </div>\r\n</template>\r\n <!-- :data=\"triggerList.length != 0 ? tripHandle(o) : tableData\" -->\r\n<script>\r\nimport typeChart from '../../components/target/typeChart.vue';\r\nimport OD from '../../components/target/OD.vue';\r\n// import {mapMutation} from 'vuex'\r\nimport { getComponentSection } from '../../api/index';\r\nexport default {\r\n    components: {\r\n        typeChart,\r\n        OD\r\n    },\r\n    props: {\r\n        activeName: {\r\n            type: String\r\n        },\r\n        triggerData: {\r\n            type: Array,\r\n            default() {\r\n                return [];\r\n            }\r\n        }\r\n    },\r\n    data() {\r\n        return {\r\n            title1: '01断面',\r\n            title2: '01区域',\r\n            dialogVisible: false,\r\n            // 触发数据断面与区域相同\r\n            tableData: [\r\n                {\r\n                    steam_id: 0,\r\n                    timestamp: '2022-10-01 09:15:11.156',\r\n                    obj_id: 125,\r\n                    type: 'Person',\r\n                    plate: '苏A0131M',\r\n                    speed: 35.2,\r\n                    event: 'in',\r\n                    lane: 0,\r\n                    headWay: 19\r\n                },\r\n                {\r\n                    steam_id: 0,\r\n                    timestamp: '2022-10-01 09:15:12.156',\r\n                    obj_id: 125,\r\n                    type: 'Motor Vehicle',\r\n                    plate: '苏A0131M',\r\n                    speed: 70.2,\r\n                    event: 'in',\r\n                    lane: 0,\r\n                    headWay: 6.5\r\n                },\r\n                {\r\n                    steam_id: 0,\r\n                    timestamp: '2022-10-01 09:15:13.156',\r\n                    obj_id: 125,\r\n                    type: 'Non_Motor',\r\n                    plate: '苏A0131M',\r\n                    speed: 60.2,\r\n                    event: 'in',\r\n                    lane: 0,\r\n                    headWay: 10.5\r\n                },\r\n                {\r\n                    steam_id: 0,\r\n                    timestamp: '2022-10-01 09:15:14.156',\r\n                    obj_id: 125,\r\n                    type: 'Non_Motor',\r\n                    plate: '苏A0131M',\r\n                    speed: 60.2,\r\n                    event: 'in',\r\n                    lane: 0,\r\n                    headWay: 2.5\r\n                },\r\n                {\r\n                    steam_id: 0,\r\n                    timestamp: '2022-10-01 09:15:15.156',\r\n                    obj_id: 125,\r\n                    type: 'Motor Vehicle',\r\n                    plate: '苏A0131M',\r\n                    speed: 60.2,\r\n                    event: 'in',\r\n                    lane: 0,\r\n                    headWay: 11.5\r\n                }\r\n            ],\r\n\r\n            // 断面的周期统计\r\n            sectionList: [\r\n                {\r\n                    steam_id: '0',\r\n                    gate_id: 'Gate_1',\r\n                    name: '西进口',\r\n                    timestamp: '2022-10-1',\r\n                    interval: '53',\r\n                    type: 'truck',\r\n                    in_flow: 90,\r\n                    out_flow: 120,\r\n                    flow: 147,\r\n                    in_spd: 20.1,\r\n                    out_spd: 30.6,\r\n                    speed: 30\r\n                },\r\n                {\r\n                    steam_id: '0',\r\n                    gate_id: 'Gate_1',\r\n                    name: '西进口',\r\n                    timestamp: '2022-10-1',\r\n                    interval: '53',\r\n                    type: 'truck',\r\n                    in_flow: 90,\r\n                    out_flow: 120,\r\n                    flow: 123,\r\n                    in_spd: 20.1,\r\n                    out_spd: 30.6,\r\n                    speed: 40\r\n                },\r\n                {\r\n                    steam_id: '0',\r\n                    gate_id: 'Gate_1',\r\n                    name: '西进口',\r\n                    timestamp: '2022-10-1',\r\n                    interval: '53',\r\n                    type: 'truck',\r\n                    in_flow: 90,\r\n                    out_flow: 80,\r\n                    flow: 210,\r\n                    in_spd: 20.1,\r\n                    out_spd: 30.6,\r\n                    speed: 50\r\n                },\r\n                {\r\n                    steam_id: '0',\r\n                    gate_id: 'Gate_1',\r\n                    name: '西进口',\r\n                    timestamp: '2022-10-1',\r\n                    interval: '53',\r\n                    type: 'truck',\r\n                    in_flow: 90,\r\n                    out_flow: 120,\r\n                    flow: 210,\r\n                    in_spd: 20.1,\r\n                    out_spd: 30.6,\r\n                    speed: 77\r\n                }\r\n            ],\r\n            // 区域的周期时刻\r\n            regionList1: [\r\n                {\r\n                    zone_id: '0',\r\n                    gate_id: 'Zone_1',\r\n                    name: '西进口左1',\r\n                    timestamp: '2022-10-1',\r\n                    frame: 1000,\r\n                    type: 'car',\r\n                    n_stay: 3,\r\n                    n_queue: 2,\r\n                    occ: 1,\r\n                    speed: 5.6\r\n                },\r\n                {\r\n                    zone_id: '0',\r\n                    gate_id: 'Zone_1',\r\n                    name: '西进口左1',\r\n                    timestamp: '2022-10-1',\r\n                    frame: 1000,\r\n                    type: 'car',\r\n                    n_stay: 3,\r\n                    n_queue: 2,\r\n                    occ: 1,\r\n                    speed: 12.6\r\n                },\r\n                {\r\n                    zone_id: '0',\r\n                    gate_id: 'Zone_1',\r\n                    name: '西进口左1',\r\n                    timestamp: '2022-10-1',\r\n                    frame: 1000,\r\n                    type: 'car',\r\n                    n_stay: 3,\r\n                    n_queue: 2,\r\n                    occ: 1,\r\n                    speed: 10\r\n                },\r\n                {\r\n                    zone_id: '0',\r\n                    gate_id: 'Zone_1',\r\n                    name: '西进口左1',\r\n                    timestamp: '2022-10-1',\r\n                    frame: 1000,\r\n                    type: 'car',\r\n                    n_stay: 3,\r\n                    n_queue: 2,\r\n                    occ: 1,\r\n                    speed: 6\r\n                }\r\n            ],\r\n            // 区域的周期统计\r\n            regionList2: [\r\n                {\r\n                    zone_id: '0',\r\n                    gate_id: 'Zone_1',\r\n                    name: '西进口左1',\r\n                    timestamp: '2022-10-1',\r\n                    type: 'car',\r\n                    enter_flow: 1,\r\n                    leave_flow: 3,\r\n                    ave_stay: 3.2,\r\n                    ave_queue: 2.9,\r\n                    ave_occ: 0.56,\r\n                    ave_delay: 8,\r\n                    ave_speed: 12\r\n                },\r\n                {\r\n                    zone_id: '0',\r\n                    gate_id: 'Zone_1',\r\n                    name: '西进口左1',\r\n                    timestamp: '2022-10-1',\r\n                    type: 'car',\r\n                    enter_flow: 1,\r\n                    leave_flow: 3,\r\n                    ave_stay: 3.2,\r\n                    ave_queue: 2.9,\r\n                    ave_occ: 0.56,\r\n                    ave_delay: 7,\r\n                    ave_speed: 22\r\n                },\r\n                {\r\n                    zone_id: '0',\r\n                    gate_id: 'Zone_1',\r\n                    name: '西进口左1',\r\n                    timestamp: '2022-10-1',\r\n                    type: 'car',\r\n                    enter_flow: 1,\r\n                    leave_flow: 3,\r\n                    ave_stay: 3.2,\r\n                    ave_queue: 2.9,\r\n                    ave_occ: 0.56,\r\n                    ave_delay: 17,\r\n                    ave_speed: 12\r\n                }\r\n            ],\r\n\r\n\r\n\r\n            idVal: '',\r\n            //组件数组\r\n            componentList: [],\r\n            // 触发数据数组\r\n            triggerList: [],\r\n\r\n            sectionData: [],\r\n\r\n\r\n\r\n            // 单个区域或者断面的表格触发数据\r\n            tableList: [],\r\n\r\n\r\n            // 路线数据\r\n            headWay: [],\r\n\r\n            itemsDataObject: {\r\n\r\n            }\r\n        };\r\n    },\r\n    created() {\r\n        this.idVal = this.$route.query.id;\r\n        getComponentSection({ VideoId: this.idVal }).then((res) => {\r\n            if (res.data.code == 200) {\r\n                console.log(res.data.data, '11111111111111111');\r\n                this.componentList = res.data.data;\r\n                // 断面\r\n                var sectionArr = [];\r\n                // 区域\r\n                res.data.data.forEach((val) => {\r\n                    sectionArr.push(val.combinationName);\r\n                    sectionArr = Array.from(new Set(sectionArr));\r\n                });\r\n                this.sectionData = sectionArr.map((item) => {\r\n                    item = { title: item, children: [] };\r\n                    res.data.data.forEach((val) => {\r\n                        if (item.title == val.combinationName) {\r\n                            item.children.push(val);\r\n                        }\r\n                    });\r\n                    return item;\r\n                });\r\n            } else if (res.data.code == 404) {\r\n            }\r\n        });\r\n\r\n    },\r\n    methods: {\r\n\r\n\r\n        // 组件图标点击下拉事件\r\n        sectionHandle(i) {\r\n            let sections = document.querySelectorAll('.section');\r\n            let downPulls1 = document.querySelectorAll('.downPull1');\r\n            // 断面的小图标\r\n            downPulls1[i].dataset.num++;\r\n\r\n            if (downPulls1[i].dataset.num % 2 == 0) {\r\n                downPulls1[i].style.cssText = 'transform: rotate(180deg);transition: all 0.5s linear;';\r\n                sections[i].style.height = sections[i].firstChild.offsetHeight + 20 + 'px';\r\n            } else {\r\n                downPulls1[i].style.cssText = 'transition: all 0.5s linear;';\r\n                sections[i].style.height = '500px';\r\n\r\n\r\n            }\r\n        },\r\n        //递归筛选\r\n        // counterCalc(sdata, tdata) {\r\n        //     this.headWay = this.triggerList.filter((val) => {\r\n        //         return val.det_id ==  sdata.graphId\r\n        //     })\r\n        //     debugger\r\n        //     console.log(this.headWay);\r\n        //     // sdata.forEach( => {\r\n\r\n        //     // });\r\n        // },\r\n\r\n        // 筛选触发数据\r\n        tripHandle(s) {\r\n            // debugger\r\n            this.triggerList.forEach(item => {\r\n                if (this.itemsDataObject[item.obj_id]) {\r\n                    if (this.itemsDataObject[item.obj_id].det_id !== item.det_id || this.itemsDataObject[item.obj_id].det_id.split('-').pop() !== item.det_id) {\r\n                        this.itemsDataObject[item.obj_id] = { ...item, det_id: this.itemsDataObject[item.obj_id].det_id + '-' + item.det_id }\r\n                    }\r\n                } else {\r\n                    this.itemsDataObject[item.obj_id] = item\r\n                }\r\n            })\r\n            // debugger\r\n            console.log(this.itemsDataObject, '364');\r\n            // var key = s.graphId + 'out';\r\n            // var data = wayLine[key];\r\n\r\n            // var counter = data.length;//流程\r\n            // if (s.superiorData.length > 0) {\r\n            //     var arr = this.counterCalc(s.superiorData, data);\r\n            //     return\r\n            // }\r\n            // this.counterCalc(s,data)\r\n            /*\r\n            var dataMap = {};//data\r\n            var zoneStruct = [{\r\n                a:123,\r\n                b:456,\r\n                end:456\r\n            },{\r\n                a:123,\r\n                b:789,\r\n                c:888,\r\n                end:888\r\n            },{\r\n                a:123,\r\n                b:456,\r\n                c:888,\r\n                end:888\r\n            },{\r\n                a:123,\r\n                end:123\r\n            }]\r\n\r\n            var objArr={}\r\n            \r\n            if(dataMap[s.graphId]==undefined){\r\n                dataMap[s.graphId]=[]\r\n            }\r\n            dataMap[s.graphId].push(s)\r\n\r\n            var arr = zoneStruct.find(end==s.graphId);\r\n\r\n            s.objectid\r\n\r\n            //arr == dataMap[s.graphId] 是相同的\r\n            */\r\n            // console.log(s);\r\n            // 单个区域或者断面的触发数据\r\n            // let arr = this.triggerList.filter((val) => {\r\n            //     return val.det_id == s.graphId\r\n\r\n            // })\r\n            // console.log(arr);\r\n\r\n        }\r\n    },\r\n    mounted() {\r\n    },\r\n    watch: {\r\n\r\n        // 触发数据\r\n        triggerData: {\r\n            handler(newVal, oldVal) {\r\n                //var wayLine = {};//路线数据\r\n\r\n                // newVal.forEach(ele => {\r\n\r\n                // });\r\n                // if (wayLine[newVal.det_id + '' + newVal.event] == undefined) {\r\n                //     wayLine[newVal.det_id + '' + newVal.event] = [];\r\n                // }\r\n                // wayLine[newVal.det_id + '' + newVal.event].push(newVal);\r\n\r\n\r\n\r\n                // this.$store.commit('setMqtt',newVal)\r\n                console.log(newVal, 'newVal');\r\n                this.triggerList = newVal;\r\n                for (let i = 0; i < this.triggerList.length; i++) {\r\n                    if (this.triggerList[i].headWay == -1) {\r\n                        this.triggerList[i].headWay = '';\r\n                    } else if (this.triggerList[i].lane == -1) {\r\n                        this.triggerList[i].lane = '';\r\n                    }\r\n                }\r\n\r\n\r\n            },\r\n            immediate: true\r\n        }\r\n    }\r\n};\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n* {\r\n    margin: 0;\r\n    padding: 0;\r\n}\r\n\r\n.plate1,\r\n.plate2 {\r\n    width: 100%;\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    justify-content: space-between;\r\n}\r\n\r\n/deep/ .el-scrollbar__view {\r\n    display: inline-block !important;\r\n    width: 100%\r\n}\r\n\r\n/deep/ .el-scrollbar__wrap {\r\n    overflow-x: hidden !important;\r\n}\r\n\r\n.scrollbar {\r\n    height: 100vh;\r\n    overflow-x: hidden !important;\r\n\r\n    .dataBoard {\r\n        height: 100%;\r\n    }\r\n}\r\n\r\n.dataBoard .region,\r\n.dataBoard .section {\r\n    width: 48%;\r\n    border: 1px solid #e4e7ed;\r\n    box-sizing: border-box;\r\n    padding: 15px;\r\n    height: 500px;\r\n    position: relative;\r\n    transition: all 1s;\r\n    overflow: hidden;\r\n}\r\n.dataBoard .section{\r\n    float: left;\r\n    margin-top: 20px;\r\n}\r\n.dataBoard .section:nth-child(1),\r\n.dataBoard .section:nth-child(2) {\r\n    margin-top: 0;\r\n}\r\n\r\n/* .downUp{\r\n  height: 2000px !important;\r\n} */\r\n\r\n.dataBoard .board-title {\r\n    font-size: 17px;\r\n    font-weight: 400;\r\n    position: relative;\r\n    margin-bottom: 15px;\r\n    border-bottom: 1px solid #e4e7ed;\r\n}\r\n\r\n.dataBoard .board-title span {\r\n    padding: 5px 10px 5px 10px;\r\n    border-bottom: 1px solid #79b7f8;\r\n    /* display: block; */\r\n    display: inline-block;\r\n}\r\n\r\n.test-div i {\r\n    font-size: 25px;\r\n}\r\n\r\n.down {\r\n    position: absolute;\r\n    top: 0;\r\n    right: 0;\r\n}\r\n\r\n.downPull,\r\n.downPull1 {\r\n    position: absolute;\r\n    top: 20px;\r\n    right: 17px;\r\n    cursor: pointer;\r\n    background-size: 14px 9px;\r\n    background-image: url(../../assets/img/downpull.png);\r\n    width: 14px;\r\n    height: 9px;\r\n}\r\n\r\n.upActive {\r\n    transform: rotate(180deg);\r\n    transition: all 0.5s linear;\r\n    /* transform-origin: 7px 7px; */\r\n}\r\n\r\n.active {\r\n    transition: all 0.5s linear;\r\n}\r\n</style>"]}]}