1 line
37 KiB
JSON
1 line
37 KiB
JSON
{"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":1675997966063},{"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//\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 triggerListData: {\r\n type: Array,\r\n default() {\r\n return [];\r\n }\r\n },\r\n // 周期时刻数据\r\n cycleTimeData: {\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 time: '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 time: '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 time: '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 time: '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 time: '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\r\n tripData: [],\r\n\r\n sectionArr: []\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 this.siftData()\r\n // 处理获取过来的数据\r\n // this.componentList.forEach((val) => {\r\n // this.sectionArr.push(val.combinationName);\r\n // this.sectionArr = Array.from(new Set(this.sectionArr));\r\n // });\r\n // this.sectionData = this.sectionArr.map((item) => {\r\n // item = { title: item, children: [] };\r\n // this.componentList.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 console.log(this.sectionData, '455');\r\n } else if (res.data.code == 404) {\r\n }\r\n });\r\n\r\n },\r\n methods: {\r\n\r\n siftData() {\r\n this.componentList.forEach((val) => {\r\n this.sectionArr.push(val.combinationName);\r\n this.sectionArr = Array.from(new Set(this.sectionArr));\r\n });\r\n this.sectionData = this.sectionArr.map((item) => {\r\n item = { title: item, children: [] };\r\n this.componentList.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 },\r\n // 组件图标点击下拉事件\r\n sectionHandle(i) {\r\n let sections = document.querySelectorAll('.section');\r\n let sectionBox = document.querySelectorAll('.sectionBox');\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 = 'auto';\r\n if (sectionBox[i] != undefined) {\r\n sectionBox[i].style.height = 'auto';\r\n }\r\n\r\n } else {\r\n downPulls1[i].style.cssText = 'transition: all 0.5s linear;';\r\n sections[i].style.height = '500px';\r\n if (sectionBox[i] != undefined) {\r\n sectionBox[i].style.height = '48vh'\r\n }\r\n\r\n\r\n }\r\n },\r\n\r\n\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 },\r\n immediate: true\r\n },\r\n\r\n // 处理过的触发数据\r\n triggerListData: {\r\n handler(newVal) {\r\n this.triggerList = newVal\r\n // 触发数据\r\n // console.log(newVal, 'triggerlistData');\r\n if (newVal) {\r\n this.componentList.forEach(ele => {\r\n if (ele.trigger == undefined && ele.timeMode == '触发') {\r\n ele.trigger = []\r\n }\r\n newVal.forEach(item => {\r\n if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '触发') {\r\n if (ele.trigger.length == 10) {\r\n ele.trigger.pop()\r\n\r\n } else {\r\n ele.trigger.unshift(item)\r\n }\r\n }\r\n })\r\n })\r\n }\r\n },\r\n immediate: true\r\n\r\n },\r\n // 周期时刻的数据\r\n cycleTimeData: {\r\n handler(newVal) {\r\n // 监听到打印周期时刻数据\r\n console.log(newVal, '440');\r\n if (newVal.length != 0) {\r\n this.componentList.forEach(ele => {\r\n if (ele.cycleTimeData == undefined && ele.timeMode == '周期时刻') {\r\n ele.cycleTimeData = []\r\n }\r\n newVal.forEach(item => {\r\n if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '周期时刻' && ele.analogAreaGraphId == item.graphical_id) {\r\n if (ele.cycleTimeData.length == 10) {\r\n ele.cycleTimeData.slice(ele.cycleTimeData.length-1,0)\r\n\r\n } else {\r\n ele.cycleTimeData.unshift(item)\r\n }\r\n }\r\n })\r\n })\r\n console.log(this.sectionData, '455');\r\n }\r\n },\r\n immediate: true\r\n }\r\n },\r\n\r\n\r\n\r\n};\r\n",{"version":3,"sources":["dataBoard.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA;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;;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;;;AAGA;;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;;AAEA;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;;AAEA;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;;;AAGA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;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;;;;AAIA","file":"dataBoard.vue","sourceRoot":"src/views/bounced","sourcesContent":["<template>\r\n <div ref=\"box\" class=\"box\">\r\n <el-empty v-show=\"componentList.length == 0\" :image-size=\"400\"></el-empty>\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=\"sectionData.length <= 2 ? 'sectionBox' : 'section'\" ref=\"section\"\r\n 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 :dataArr=\"o.trigger\" :title=\"o.componentName.split('_')[0]\"\r\n :chartName='o.combinationName' />\r\n <typeChart v-else :pageType=\"o.graphicType\" :triggerType=\"o.timeMode\"\r\n :componentName=\"o.componentName\"\r\n :dataArr=\"o.timeMode == '触发' ? o.trigger : o.cycleTimeData\"\r\n :echartArr=\"o.presentationForm\" :title=\"o.componentName.split('_')[0]\"\r\n :chartName='o.combinationName' />\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 </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 triggerListData: {\r\n type: Array,\r\n default() {\r\n return [];\r\n }\r\n },\r\n // 周期时刻数据\r\n cycleTimeData: {\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 time: '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 time: '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 time: '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 time: '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 time: '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\r\n tripData: [],\r\n\r\n sectionArr: []\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 this.siftData()\r\n // 处理获取过来的数据\r\n // this.componentList.forEach((val) => {\r\n // this.sectionArr.push(val.combinationName);\r\n // this.sectionArr = Array.from(new Set(this.sectionArr));\r\n // });\r\n // this.sectionData = this.sectionArr.map((item) => {\r\n // item = { title: item, children: [] };\r\n // this.componentList.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 console.log(this.sectionData, '455');\r\n } else if (res.data.code == 404) {\r\n }\r\n });\r\n\r\n },\r\n methods: {\r\n\r\n siftData() {\r\n this.componentList.forEach((val) => {\r\n this.sectionArr.push(val.combinationName);\r\n this.sectionArr = Array.from(new Set(this.sectionArr));\r\n });\r\n this.sectionData = this.sectionArr.map((item) => {\r\n item = { title: item, children: [] };\r\n this.componentList.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 },\r\n // 组件图标点击下拉事件\r\n sectionHandle(i) {\r\n let sections = document.querySelectorAll('.section');\r\n let sectionBox = document.querySelectorAll('.sectionBox');\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 = 'auto';\r\n if (sectionBox[i] != undefined) {\r\n sectionBox[i].style.height = 'auto';\r\n }\r\n\r\n } else {\r\n downPulls1[i].style.cssText = 'transition: all 0.5s linear;';\r\n sections[i].style.height = '500px';\r\n if (sectionBox[i] != undefined) {\r\n sectionBox[i].style.height = '48vh'\r\n }\r\n\r\n\r\n }\r\n },\r\n\r\n\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 },\r\n immediate: true\r\n },\r\n\r\n // 处理过的触发数据\r\n triggerListData: {\r\n handler(newVal) {\r\n this.triggerList = newVal\r\n // 触发数据\r\n // console.log(newVal, 'triggerlistData');\r\n if (newVal) {\r\n this.componentList.forEach(ele => {\r\n if (ele.trigger == undefined && ele.timeMode == '触发') {\r\n ele.trigger = []\r\n }\r\n newVal.forEach(item => {\r\n if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '触发') {\r\n if (ele.trigger.length == 10) {\r\n ele.trigger.pop()\r\n\r\n } else {\r\n ele.trigger.unshift(item)\r\n }\r\n }\r\n })\r\n })\r\n }\r\n },\r\n immediate: true\r\n\r\n },\r\n // 周期时刻的数据\r\n cycleTimeData: {\r\n handler(newVal) {\r\n // 监听到打印周期时刻数据\r\n console.log(newVal, '440');\r\n if (newVal.length != 0) {\r\n this.componentList.forEach(ele => {\r\n if (ele.cycleTimeData == undefined && ele.timeMode == '周期时刻') {\r\n ele.cycleTimeData = []\r\n }\r\n newVal.forEach(item => {\r\n if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '周期时刻' && ele.analogAreaGraphId == item.graphical_id) {\r\n if (ele.cycleTimeData.length == 10) {\r\n ele.cycleTimeData.slice(ele.cycleTimeData.length-1,0)\r\n\r\n } else {\r\n ele.cycleTimeData.unshift(item)\r\n }\r\n }\r\n })\r\n })\r\n console.log(this.sectionData, '455');\r\n }\r\n },\r\n immediate: true\r\n }\r\n },\r\n\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\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\r\n.dataBoard .sectionBox {\r\n width: 100%;\r\n height: 48vh;\r\n border: 1px solid #e4e7ed;\r\n box-sizing: border-box;\r\n padding: 15px;\r\n position: relative;\r\n transition: all 1s;\r\n overflow: hidden;\r\n}\r\n\r\n.dataBoard .sectionBox:nth-child(1) {\r\n margin-bottom: 4vh;\r\n}\r\n\r\n.dataBoard .section {\r\n float: left;\r\n margin-top: 20px;\r\n}\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>"]}]} |