505 lines
17 KiB
Vue
505 lines
17 KiB
Vue
<template>
|
|
<div ref="box" class="box">
|
|
<!-- <p class="title" style="margin-bottom: 20px;font-size: 20px;font-weight: 400;">数据看板</p> -->
|
|
|
|
<div class="dataBoard" v-if="activeName == 'second'" :style="componentList.length > 4 ? 'height:auto' : 'height:1050px'">
|
|
<!-- 断面 -->
|
|
<div class="plate1">
|
|
<div class="section" ref="section" v-for="(s, i) 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>
|
|
<div v-for="o in s.children" :key="o.analogAreaComponentId">
|
|
<typeChart
|
|
:pageType="o.graphicType"
|
|
triggerType="触发"
|
|
:componentName="o.componentName"
|
|
:data="triggerList.length != 0 ? triggerList : tableData"
|
|
:echartArr="o.presentationForm"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 区域 -->
|
|
<div class="plate2">
|
|
<div class="region" ref="region" v-for="(s, i) in regionData" :key="s.analogAreaComponentId">
|
|
<div ref="regionContent">
|
|
<div>
|
|
<p class="board-title">
|
|
<span>{{ s.title }}</span>
|
|
</p>
|
|
<span class="downPull" data-num="1" @click="regionHandle(i)"></span>
|
|
</div>
|
|
<div v-for="o in s.children" :key="o.analogAreaComponentId">
|
|
<OD
|
|
v-if="o.componentName.includes('OD')"
|
|
:pageType="o.graphicType"
|
|
triggerType="触发"
|
|
:componentName="o.componentName"
|
|
:echartArr="o.presentationForm"
|
|
/>
|
|
<typeChart
|
|
v-else
|
|
:pageType="o.graphicType"
|
|
triggerType="触发"
|
|
:componentName="o.componentName"
|
|
:data="triggerList.length != 0 ? triggerList : tableData"
|
|
:echartArr="o.presentationForm"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 详情框 -->
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import typeChart from '../../components/target/typeChart.vue';
|
|
import OD from '../../components/target/OD.vue';
|
|
|
|
import { getComponentSection } from '../../api/index';
|
|
export default {
|
|
components: {
|
|
typeChart,
|
|
OD
|
|
},
|
|
props: {
|
|
activeName: {
|
|
type: String
|
|
},
|
|
triggerData: {
|
|
type: Array,
|
|
default() {
|
|
return [];
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
title1: '01断面',
|
|
title2: '01区域',
|
|
dialogVisible: false,
|
|
// 触发数据断面与区域相同
|
|
tableData: [
|
|
{
|
|
steam_id: 0,
|
|
timestamp: '2022-10-01 09:15:10.156',
|
|
obj_id: 125,
|
|
type: 'car',
|
|
plate: '苏A0131M',
|
|
speed: 35.2,
|
|
event: 'in',
|
|
lane: 0,
|
|
headWay: 19
|
|
},
|
|
{
|
|
steam_id: 0,
|
|
timestamp: '2022-10-01 09:15:10.156',
|
|
obj_id: 125,
|
|
type: 'car',
|
|
plate: '苏A0131M',
|
|
speed: 70.2,
|
|
event: 'in',
|
|
lane: 0,
|
|
headWay: 6.5
|
|
},
|
|
{
|
|
steam_id: 0,
|
|
timestamp: '2022-10-01 09:15:10.156',
|
|
obj_id: 125,
|
|
type: 'car',
|
|
plate: '苏A0131M',
|
|
speed: 60.2,
|
|
event: 'in',
|
|
lane: 0,
|
|
headWay: 10.5
|
|
},
|
|
{
|
|
steam_id: 0,
|
|
timestamp: '2022-10-01 09:15:10.156',
|
|
obj_id: 125,
|
|
type: 'car',
|
|
plate: '苏A0131M',
|
|
speed: 60.2,
|
|
event: 'in',
|
|
lane: 0,
|
|
headWay: 2.5
|
|
},
|
|
{
|
|
steam_id: 0,
|
|
timestamp: '2022-10-01 09:15:10.156',
|
|
obj_id: 125,
|
|
type: 'car',
|
|
plate: '苏A0131M',
|
|
speed: 60.2,
|
|
event: 'in',
|
|
lane: 0,
|
|
headWay: 11.5
|
|
}
|
|
],
|
|
|
|
// 断面的周期统计
|
|
sectionList: [
|
|
{
|
|
steam_id: '0',
|
|
gate_id: 'Gate_1',
|
|
name: '西进口',
|
|
timestamp: '2022-10-1',
|
|
interval: '53',
|
|
type: 'truck',
|
|
in_flow: 90,
|
|
out_flow: 120,
|
|
flow: 147,
|
|
in_spd: 20.1,
|
|
out_spd: 30.6,
|
|
speed: 30
|
|
},
|
|
{
|
|
steam_id: '0',
|
|
gate_id: 'Gate_1',
|
|
name: '西进口',
|
|
timestamp: '2022-10-1',
|
|
interval: '53',
|
|
type: 'truck',
|
|
in_flow: 90,
|
|
out_flow: 120,
|
|
flow: 123,
|
|
in_spd: 20.1,
|
|
out_spd: 30.6,
|
|
speed: 40
|
|
},
|
|
{
|
|
steam_id: '0',
|
|
gate_id: 'Gate_1',
|
|
name: '西进口',
|
|
timestamp: '2022-10-1',
|
|
interval: '53',
|
|
type: 'truck',
|
|
in_flow: 90,
|
|
out_flow: 80,
|
|
flow: 210,
|
|
in_spd: 20.1,
|
|
out_spd: 30.6,
|
|
speed: 50
|
|
},
|
|
{
|
|
steam_id: '0',
|
|
gate_id: 'Gate_1',
|
|
name: '西进口',
|
|
timestamp: '2022-10-1',
|
|
interval: '53',
|
|
type: 'truck',
|
|
in_flow: 90,
|
|
out_flow: 120,
|
|
flow: 210,
|
|
in_spd: 20.1,
|
|
out_spd: 30.6,
|
|
speed: 77
|
|
}
|
|
],
|
|
// 区域的周期时刻
|
|
regionList1: [
|
|
{
|
|
zone_id: '0',
|
|
gate_id: 'Zone_1',
|
|
name: '西进口左1',
|
|
timestamp: '2022-10-1',
|
|
frame: 1000,
|
|
type: 'car',
|
|
n_stay: 3,
|
|
n_queue: 2,
|
|
occ: 1,
|
|
speed: 5.6
|
|
},
|
|
{
|
|
zone_id: '0',
|
|
gate_id: 'Zone_1',
|
|
name: '西进口左1',
|
|
timestamp: '2022-10-1',
|
|
frame: 1000,
|
|
type: 'car',
|
|
n_stay: 3,
|
|
n_queue: 2,
|
|
occ: 1,
|
|
speed: 12.6
|
|
},
|
|
{
|
|
zone_id: '0',
|
|
gate_id: 'Zone_1',
|
|
name: '西进口左1',
|
|
timestamp: '2022-10-1',
|
|
frame: 1000,
|
|
type: 'car',
|
|
n_stay: 3,
|
|
n_queue: 2,
|
|
occ: 1,
|
|
speed: 10
|
|
},
|
|
{
|
|
zone_id: '0',
|
|
gate_id: 'Zone_1',
|
|
name: '西进口左1',
|
|
timestamp: '2022-10-1',
|
|
frame: 1000,
|
|
type: 'car',
|
|
n_stay: 3,
|
|
n_queue: 2,
|
|
occ: 1,
|
|
speed: 6
|
|
}
|
|
],
|
|
// 区域的周期统计
|
|
regionList2: [
|
|
{
|
|
zone_id: '0',
|
|
gate_id: 'Zone_1',
|
|
name: '西进口左1',
|
|
timestamp: '2022-10-1',
|
|
type: 'car',
|
|
enter_flow: 1,
|
|
leave_flow: 3,
|
|
ave_stay: 3.2,
|
|
ave_queue: 2.9,
|
|
ave_occ: 0.56,
|
|
ave_delay: 8,
|
|
ave_speed: 12
|
|
},
|
|
{
|
|
zone_id: '0',
|
|
gate_id: 'Zone_1',
|
|
name: '西进口左1',
|
|
timestamp: '2022-10-1',
|
|
type: 'car',
|
|
enter_flow: 1,
|
|
leave_flow: 3,
|
|
ave_stay: 3.2,
|
|
ave_queue: 2.9,
|
|
ave_occ: 0.56,
|
|
ave_delay: 7,
|
|
ave_speed: 22
|
|
},
|
|
{
|
|
zone_id: '0',
|
|
gate_id: 'Zone_1',
|
|
name: '西进口左1',
|
|
timestamp: '2022-10-1',
|
|
type: 'car',
|
|
enter_flow: 1,
|
|
leave_flow: 3,
|
|
ave_stay: 3.2,
|
|
ave_queue: 2.9,
|
|
ave_occ: 0.56,
|
|
ave_delay: 17,
|
|
ave_speed: 12
|
|
}
|
|
],
|
|
|
|
// sectionShow: false,
|
|
// regionShow: false,
|
|
|
|
count1: false,
|
|
count2: false,
|
|
|
|
idVal: '',
|
|
//组件数组
|
|
componentList: [],
|
|
// 触发数据数组
|
|
triggerList: [],
|
|
//断面的数组
|
|
sectionData: [],
|
|
// 区域的数组
|
|
regionData: []
|
|
};
|
|
},
|
|
created() {
|
|
// console.log(this.$route.query.id);
|
|
// console.log(this.$route.query.id);
|
|
this.idVal = this.$route.query.id;
|
|
getComponentSection({ VideoId: this.idVal }).then((res) => {
|
|
// console.log(res);
|
|
if (res.data.code == 200) {
|
|
// console.log(res.data.data, '11111111111111111');
|
|
this.componentList = res.data.data;
|
|
// 断面
|
|
var sectionArr = [];
|
|
// 区域
|
|
var regionArr = [];
|
|
res.data.data.forEach((val) => {
|
|
if (val.graphicType == '区域') {
|
|
regionArr.push(val.combinationName);
|
|
regionArr = Array.from(new Set(regionArr));
|
|
} else {
|
|
sectionArr.push(val.combinationName);
|
|
sectionArr = Array.from(new Set(sectionArr));
|
|
}
|
|
});
|
|
this.regionData = regionArr.map((item) => {
|
|
item = { title: item, children: [] };
|
|
res.data.data.forEach((val) => {
|
|
if (item.title == val.combinationName && val.graphicType == '区域') {
|
|
item.children.push(val);
|
|
}
|
|
});
|
|
return item;
|
|
});
|
|
this.sectionData = sectionArr.map((item) => {
|
|
item = { title: item, children: [] };
|
|
res.data.data.forEach((val) => {
|
|
if (item.title == val.combinationName && val.graphicType == '断面') {
|
|
item.children.push(val);
|
|
}
|
|
});
|
|
return item;
|
|
});
|
|
// console.log(this.regionData, 'regionArr');
|
|
// console.log(, '111111');
|
|
} else if (res.data.code == 404) {
|
|
}
|
|
});
|
|
},
|
|
methods: {
|
|
// 区域点击事件
|
|
regionHandle(i) {
|
|
//获取区域内box的所有标签
|
|
let regions = document.querySelectorAll('.region');
|
|
let downPulls = document.querySelectorAll('.downPull');
|
|
downPulls[i].dataset.num++;
|
|
// console.log(downPulls[i].dataset.num);
|
|
// 判断datasetid能否整除2能整除进行操作
|
|
if (downPulls[i].dataset.num % 2 == 0) {
|
|
downPulls[i].style.cssText = 'transform: rotate(180deg);transition: all 0.5s linear;';
|
|
regions[i].style.height = regions[i].firstChild.offsetHeight + 30 + 'px';
|
|
} else {
|
|
downPulls[i].style.cssText = 'transition: all 0.5s linear;';
|
|
regions[i].style.height = '500px';
|
|
}
|
|
},
|
|
// 断面点击事件
|
|
sectionHandle(i) {
|
|
let sections = document.querySelectorAll('.section');
|
|
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 = sections[i].firstChild.offsetHeight + 20 + 'px';
|
|
} else {
|
|
downPulls1[i].style.cssText = 'transition: all 0.5s linear;';
|
|
sections[i].style.height = '500px';
|
|
}
|
|
}
|
|
},
|
|
mounted() {},
|
|
watch: {
|
|
triggerData: {
|
|
handler(newVal, oldVal) {
|
|
// console.log(newVal, 'newVal');
|
|
this.triggerList = newVal;
|
|
for (let i = 0; i < this.triggerList.length; i++) {
|
|
if (this.triggerList[i].headWay == -1) {
|
|
this.triggerList[i].headWay = '';
|
|
} else if (this.triggerList[i].lane == -1) {
|
|
this.triggerList[i].lane = '';
|
|
}
|
|
}
|
|
},
|
|
immediate: true
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* .box {
|
|
overflow-y: scroll;
|
|
} */
|
|
.dataBoard {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
}
|
|
.plate1,
|
|
.plate2 {
|
|
width: 48%;
|
|
}
|
|
.dataBoard .region,
|
|
.dataBoard .section {
|
|
width: 100%;
|
|
border: 1px solid #e4e7ed;
|
|
box-sizing: border-box;
|
|
padding: 15px;
|
|
height: 500px;
|
|
position: relative;
|
|
transition: all 1s;
|
|
overflow: hidden;
|
|
margin-top: 30px;
|
|
}
|
|
.dataBoard .region:nth-child(1),
|
|
.dataBoard .section:nth-child(1) {
|
|
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> |