{"remainingRequest":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\babel-loader\\lib\\index.js!E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js??ref--0-0!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":1675215549928},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1674961932750},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\babel-loader\\lib\\index.js","mtime":1674961932551},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1674961932750},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\vue-loader\\lib\\index.js","mtime":1674961940096}],"contextDependencies":[],"result":["import \"core-js/modules/es6.set\";\nimport \"core-js/modules/es6.string.iterator\";\nimport \"core-js/modules/es6.array.from\";\nimport \"core-js/modules/web.dom.iterable\";\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//\nimport typeChart from \"../../components/target/typeChart.vue\";\nimport OD from \"../../components/target/OD.vue\";\nimport { getComponentSection } from \"../../api/index\";\nexport default {\n  components: {\n    typeChart: typeChart,\n    OD: OD\n  },\n  props: {\n    activeName: {\n      type: String\n    },\n    triggerData: {\n      type: Array,\n      default: function _default() {\n        return [];\n      }\n    }\n  },\n  data: function data() {\n    return {\n      title1: '01断面',\n      title2: '01区域',\n      dialogVisible: false,\n      // 触发数据断面与区域相同\n      tableData: [{\n        steam_id: 0,\n        timestamp: '2022-10-01 09:15:10.156',\n        obj_id: 125,\n        type: 'car',\n        plate: '苏A0131M',\n        speed: 35.2,\n        event: 'in',\n        lane: 0,\n        headWay: 19\n      }, {\n        steam_id: 0,\n        timestamp: '2022-10-01 09:15:10.156',\n        obj_id: 125,\n        type: 'car',\n        plate: '苏A0131M',\n        speed: 70.2,\n        event: 'in',\n        lane: 0,\n        headWay: 6.5\n      }, {\n        steam_id: 0,\n        timestamp: '2022-10-01 09:15:10.156',\n        obj_id: 125,\n        type: 'car',\n        plate: '苏A0131M',\n        speed: 60.2,\n        event: 'in',\n        lane: 0,\n        headWay: 10.5\n      }, {\n        steam_id: 0,\n        timestamp: '2022-10-01 09:15:10.156',\n        obj_id: 125,\n        type: 'car',\n        plate: '苏A0131M',\n        speed: 60.2,\n        event: 'in',\n        lane: 0,\n        headWay: 2.5\n      }, {\n        steam_id: 0,\n        timestamp: '2022-10-01 09:15:10.156',\n        obj_id: 125,\n        type: 'car',\n        plate: '苏A0131M',\n        speed: 60.2,\n        event: 'in',\n        lane: 0,\n        headWay: 11.5\n      }],\n      // 断面的周期统计\n      sectionList: [{\n        steam_id: '0',\n        gate_id: 'Gate_1',\n        name: '西进口',\n        timestamp: '2022-10-1',\n        interval: '53',\n        type: 'truck',\n        in_flow: 90,\n        out_flow: 120,\n        flow: 147,\n        in_spd: 20.1,\n        out_spd: 30.6,\n        speed: 30\n      }, {\n        steam_id: '0',\n        gate_id: 'Gate_1',\n        name: '西进口',\n        timestamp: '2022-10-1',\n        interval: '53',\n        type: 'truck',\n        in_flow: 90,\n        out_flow: 120,\n        flow: 123,\n        in_spd: 20.1,\n        out_spd: 30.6,\n        speed: 40\n      }, {\n        steam_id: '0',\n        gate_id: 'Gate_1',\n        name: '西进口',\n        timestamp: '2022-10-1',\n        interval: '53',\n        type: 'truck',\n        in_flow: 90,\n        out_flow: 80,\n        flow: 210,\n        in_spd: 20.1,\n        out_spd: 30.6,\n        speed: 50\n      }, {\n        steam_id: '0',\n        gate_id: 'Gate_1',\n        name: '西进口',\n        timestamp: '2022-10-1',\n        interval: '53',\n        type: 'truck',\n        in_flow: 90,\n        out_flow: 120,\n        flow: 210,\n        in_spd: 20.1,\n        out_spd: 30.6,\n        speed: 77\n      }],\n      // 区域的周期时刻\n      regionList1: [{\n        zone_id: '0',\n        gate_id: 'Zone_1',\n        name: '西进口左1',\n        timestamp: '2022-10-1',\n        frame: 1000,\n        type: 'car',\n        n_stay: 3,\n        n_queue: 2,\n        occ: 1,\n        speed: 5.6\n      }, {\n        zone_id: '0',\n        gate_id: 'Zone_1',\n        name: '西进口左1',\n        timestamp: '2022-10-1',\n        frame: 1000,\n        type: 'car',\n        n_stay: 3,\n        n_queue: 2,\n        occ: 1,\n        speed: 12.6\n      }, {\n        zone_id: '0',\n        gate_id: 'Zone_1',\n        name: '西进口左1',\n        timestamp: '2022-10-1',\n        frame: 1000,\n        type: 'car',\n        n_stay: 3,\n        n_queue: 2,\n        occ: 1,\n        speed: 10\n      }, {\n        zone_id: '0',\n        gate_id: 'Zone_1',\n        name: '西进口左1',\n        timestamp: '2022-10-1',\n        frame: 1000,\n        type: 'car',\n        n_stay: 3,\n        n_queue: 2,\n        occ: 1,\n        speed: 6\n      }],\n      // 区域的周期统计\n      regionList2: [{\n        zone_id: '0',\n        gate_id: 'Zone_1',\n        name: '西进口左1',\n        timestamp: '2022-10-1',\n        type: 'car',\n        enter_flow: 1,\n        leave_flow: 3,\n        ave_stay: 3.2,\n        ave_queue: 2.9,\n        ave_occ: 0.56,\n        ave_delay: 8,\n        ave_speed: 12\n      }, {\n        zone_id: '0',\n        gate_id: 'Zone_1',\n        name: '西进口左1',\n        timestamp: '2022-10-1',\n        type: 'car',\n        enter_flow: 1,\n        leave_flow: 3,\n        ave_stay: 3.2,\n        ave_queue: 2.9,\n        ave_occ: 0.56,\n        ave_delay: 7,\n        ave_speed: 22\n      }, {\n        zone_id: '0',\n        gate_id: 'Zone_1',\n        name: '西进口左1',\n        timestamp: '2022-10-1',\n        type: 'car',\n        enter_flow: 1,\n        leave_flow: 3,\n        ave_stay: 3.2,\n        ave_queue: 2.9,\n        ave_occ: 0.56,\n        ave_delay: 17,\n        ave_speed: 12\n      }],\n      // sectionShow: false,\n      // regionShow: false,\n      count1: false,\n      count2: false,\n      idVal: '',\n      //组件数组\n      componentList: [],\n      // 触发数据数组\n      triggerList: [],\n      //断面的数组\n      sectionData: [],\n      // 区域的数组\n      regionData: []\n    };\n  },\n  created: function created() {\n    var _this = this;\n\n    // console.log();\n    // console.log(this.$route.query.id);\n    // console.log(this.$route.query.id);\n    this.idVal = this.$route.query.id;\n    getComponentSection({\n      VideoId: this.idVal\n    }).then(function (res) {\n      // console.log(res);\n      if (res.data.code == 200) {\n        console.log(res.data.data, '11111111111111111');\n        _this.componentList = res.data.data; // 断面\n\n        var sectionArr = []; // 区域\n\n        var regionArr = [];\n        res.data.data.forEach(function (val) {\n          regionArr.push(val.combinationName);\n          regionArr = Array.from(new Set(regionArr));\n        });\n        _this.regionData = regionArr.map(function (item) {\n          item = {\n            title: item,\n            children: []\n          };\n          res.data.data.forEach(function (val) {\n            if (item.title == val.combinationName) {\n              item.children.push(val);\n            }\n          });\n          return item;\n        }); // this.sectionData = sectionArr.map((item) => {\n        //     item = { title: item, children: [] };\n        //     res.data.data.forEach((val) => {\n        //         if (item.title == val.combinationName && val.graphicType == '断面') {\n        //             item.children.push(val);\n        //         }\n        //     });\n        //     return item;\n        // });\n        // console.log(this.regionData, 'regionArr');\n        // console.log(, '111111');\n      } else if (res.data.code == 404) {}\n    });\n  },\n  methods: {\n    // 组件图标点击事件\n    sectionHandle: function sectionHandle(i) {\n      var sections = document.querySelectorAll('.section');\n      var downPulls1 = document.querySelectorAll('.downPull1'); // 断面的小图标\n\n      downPulls1[i].dataset.num++;\n\n      if (downPulls1[i].dataset.num % 2 == 0) {\n        downPulls1[i].style.cssText = 'transform: rotate(180deg);transition: all 0.5s linear;';\n        this.$refs.dataBoard.style.height = 'auto';\n\n        if (sections[i].firstChild.offsetHeight + 30 < 500) {\n          sections[i].style.height = 500;\n          return;\n        } else if (sections[i].firstChild.offsetHeight + 30 < 1030) {\n          this.$refs.dataBoard.style.height = '1030px';\n        }\n\n        sections[i].style.height = sections[i].firstChild.offsetHeight + 20 + 'px';\n      } else {\n        downPulls1[i].style.cssText = 'transition: all 0.5s linear;';\n        sections[i].style.height = '500px';\n      }\n    },\n    // 筛选触发数据\n    tripHandle: function tripHandle(s) {\n      // if (s.superiorData) {\n      //     let arr = this.triggerList.filter((val) => {\n      //         return val.det_id == s.graphId\n      //     })\n      //     let arrId = arr.map((val) => {\n      //         return val.obj_id\n      //     })\n      //     console.log(arrId);\n      //     // \n      //     console.log(s.superiorData[0].graphId);\n      //     let arr1 = this.triggerList.filter((val) => {\n      //         return val.det_id == s.superiorData[0].graphId\n      //     })\n      //     console.log(arr1, '428');\n      // }\n      // console.log(this.triggerList);\n      // 单个区域或者断面的触发数据\n      return this.triggerList.filter(function (val) {\n        return val.det_id == s.graphId;\n      });\n    }\n  },\n  mounted: function mounted() {\n    var dataBoard = document.querySelector('.dataBoard');\n\n    if (this.regionData.length <= 2 || this.sectionData.length <= 2) {\n      dataBoard.style.height = '1030px';\n    } else {\n      dataBoard.style.height = 'auto';\n    }\n  },\n  watch: {\n    // 触发数据\n    triggerData: {\n      handler: function handler(newVal, oldVal) {\n        console.log(newVal, 'newVal');\n        this.triggerList = newVal;\n\n        for (var i = 0; i < this.triggerList.length; i++) {\n          if (this.triggerList[i].headWay == -1) {\n            this.triggerList[i].headWay = '';\n          } else if (this.triggerList[i].lane == -1) {\n            this.triggerList[i].lane = '';\n          }\n        }\n      },\n      immediate: true\n    }\n  }\n};",{"version":3,"sources":["dataBoard.vue"],"names":[],"mappings":"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","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\r\n        <div class=\"dataBoard\" ref='dataBoard' v-if=\"activeName == 'second'\"\r\n            :style=\"sectionData.length > 2 || regionData.length > 2 ? 'height:auto' : 'height:1030px'\">\r\n            <!-- 断面 -->\r\n            <div class=\"plate1\" ref=\"plate1\">\r\n                <div class=\"section\" ref=\"section\" v-for=\"(s, i) in regionData\" :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                                <typeChart :pageType=\"o.graphicType\" triggerType=\"触发\" :componentName=\"o.componentName\"\r\n                                    :data=\"tripHandle(o)\" :echartArr=\"o.presentationForm\" />\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\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\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:10.156',\r\n                    obj_id: 125,\r\n                    type: 'car',\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:10.156',\r\n                    obj_id: 125,\r\n                    type: 'car',\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:10.156',\r\n                    obj_id: 125,\r\n                    type: 'car',\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:10.156',\r\n                    obj_id: 125,\r\n                    type: 'car',\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:10.156',\r\n                    obj_id: 125,\r\n                    type: 'car',\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            // sectionShow: false,\r\n            // regionShow: false,\r\n\r\n            count1: false,\r\n            count2: false,\r\n\r\n            idVal: '',\r\n            //组件数组\r\n            componentList: [],\r\n            // 触发数据数组\r\n            triggerList: [],\r\n            //断面的数组\r\n            sectionData: [],\r\n            // 区域的数组\r\n            regionData: []\r\n        };\r\n    },\r\n    created() {\r\n        // console.log();\r\n        // console.log(this.$route.query.id);\r\n        // console.log(this.$route.query.id);\r\n        this.idVal = this.$route.query.id;\r\n        getComponentSection({ VideoId: this.idVal }).then((res) => {\r\n            // console.log(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                var regionArr = [];\r\n                res.data.data.forEach((val) => {\r\n                    regionArr.push(val.combinationName);\r\n                    regionArr = Array.from(new Set(regionArr));\r\n                });\r\n                this.regionData = regionArr.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                // 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 && val.graphicType == '断面') {\r\n                //             item.children.push(val);\r\n                //         }\r\n                //     });\r\n                //     return item;\r\n                // });\r\n                // console.log(this.regionData, 'regionArr');\r\n                // console.log(, '111111');\r\n            } else if (res.data.code == 404) {\r\n            }\r\n        });\r\n\r\n    },\r\n    methods: {\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                this.$refs.dataBoard.style.height = 'auto'\r\n                if (sections[i].firstChild.offsetHeight + 30 < 500) {\r\n                    sections[i].style.height = 500\r\n                    return\r\n                } else if (sections[i].firstChild.offsetHeight + 30 <1030) {\r\n                    this.$refs.dataBoard.style.height = '1030px'\r\n                }\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        // 筛选触发数据\r\n        tripHandle(s) {\r\n            // if (s.superiorData) {\r\n            //     let arr = this.triggerList.filter((val) => {\r\n            //         return val.det_id == s.graphId\r\n            //     })\r\n            //     let arrId = arr.map((val) => {\r\n            //         return val.obj_id\r\n            //     })\r\n            //     console.log(arrId);\r\n            //     // \r\n            //     console.log(s.superiorData[0].graphId);\r\n            //     let arr1 = this.triggerList.filter((val) => {\r\n\r\n            //         return val.det_id == s.superiorData[0].graphId\r\n            //     })\r\n            //     console.log(arr1, '428');\r\n            // }\r\n            // console.log(this.triggerList);\r\n            // 单个区域或者断面的触发数据\r\n            return this.triggerList.filter((val)=>{\r\n                return val.det_id == s.graphId\r\n\r\n            })\r\n\r\n\r\n        }\r\n    },\r\n    mounted() {\r\n        let dataBoard = document.querySelector('.dataBoard')\r\n        if (this.regionData.length <= 2 || this.sectionData.length <= 2) {\r\n            dataBoard.style.height = '1030px'\r\n        } else {\r\n            dataBoard.style.height = 'auto'\r\n        }\r\n    },\r\n    watch: {\r\n        // 触发数据\r\n        triggerData: {\r\n            handler(newVal, oldVal) {\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            immediate: true\r\n        }\r\n    }\r\n};\r\n</script>\r\n\r\n<style scoped>\r\n* {\r\n    margin: 0;\r\n    padding: 0;\r\n}\r\n\r\n/* .box {\r\n    overflow-y: scroll;\r\n} */\r\n.dataBoard {\r\n    /* display: flex;\r\n    justify-content: space-between;\r\n    flex-wrap: wrap; */\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.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    margin-top: 30px;\r\n}\r\n\r\n.dataBoard .region:nth-child(1),\r\n.dataBoard .section:nth-child(1) {\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>"],"sourceRoot":"src/views/bounced"}]}