From 8b96a47daaedd4aaeca4fb8b4ae0a27aa65f0e60 Mon Sep 17 00:00:00 2001
From: Hobart <kolusai@hotmail.com>
Date: Wed, 22 Feb 2023 11:23:30 +0800
Subject: [PATCH] =?UTF-8?q?bug=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/target/typeChart.vue | 5 +-
src/views/bounced/dataBoard.vue | 240 +++++++++++++---------------
2 files changed, 115 insertions(+), 130 deletions(-)
diff --git a/src/components/target/typeChart.vue b/src/components/target/typeChart.vue
index 6db72da7..7f3c4161 100644
--- a/src/components/target/typeChart.vue
+++ b/src/components/target/typeChart.vue
@@ -31,7 +31,7 @@
<div style="font-size: 30px; font-weight: bold" v-if="title == '速度'">
<span style="font-size: 15px;">速度</span><br />
<!-- <span style="font-size: 30px; font-weight: bold">{{ typeValue.speed }}</span> -->
- <span style="font-size: 30px; font-weight: bold">{{ dataArr[0].speed }}</span>
+ <span style="font-size: 30px; font-weight: bold">{{ dataArr[0].speed }}</span>
</div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '流量'">
<span style="font-size: 15px;">流量</span><br />
@@ -39,7 +39,7 @@
</div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '车头时距'">
<span style="font-size: 15px;">车头时距</span><br />
- <span style="font-size: 30px; font-weight: bold">{{ dataArr[0].headway}}</span>
+ <span style="font-size: 30px; font-weight: bold">{{ dataArr[0].headway }}</span>
</div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '排队数'">
<span style="font-size: 15px;">排队数</span><br />
@@ -86,6 +86,7 @@
<div class="border" v-if="echartArr.includes('曲线图')">
<detailDialog />
<lineChart
+ style="width:100%;"
:componentName="componentName"
:chartName="chartName"
:pageType="pageType"
diff --git a/src/views/bounced/dataBoard.vue b/src/views/bounced/dataBoard.vue
index da3d8940..d825992f 100644
--- a/src/views/bounced/dataBoard.vue
+++ b/src/views/bounced/dataBoard.vue
@@ -3,53 +3,79 @@
<el-empty v-show="componentList.length == 0" :image-size="400"></el-empty>
<!-- <p class="title" style="margin-bottom: 20px;font-size: 20px;font-weight: 400;">数据看板</p> -->
<el-scrollbar class="scrollbar">
- <div class="dataBoard" ref='dataBoard' v-if="activeName == 'second'">
+ <div class="dataBoard" ref="dataBoard" v-if="activeName == 'second'">
<!-- 断面 -->
<div class="plate1" ref="plate1">
- <div :class="sectionData.length <= 2 ? 'sectionBox' : 'section'" ref="section"
- v-for="(s, i) in sectionData" :key="s.analogAreaComponentId">
+ <div
+ :class="sectionData.length <= 2 ? 'sectionBox' : 'section'"
+ ref="section"
+ v-for="(s, i) in sectionData"
+ :key="s.analogAreaComponentId"
+ >
<template>
- <div ref="sectionContent">
+ <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">
+ <el-collapse v-model="s.children[0].analogAreaComponentId">
+ <div v-for="o in s.children" :key="o.analogAreaComponentId">
+ <el-collapse-item :title=o.componentName :name="o.analogAreaComponentId" >
+ <OD
+ v-if="o.componentName.includes('OD')"
+ :pageType="o.graphicType"
+ triggerType="触发"
+ :componentName="o.componentName"
+ :echartArr="o.presentationForm"
+ :dataArr="o.trigger"
+ :title="o.componentName.split('_')[0]"
+ :chartName="o.combinationName"
+ />
+ <!--触发的组件 -->
+ <typeChart
+ v-if="o.timeMode === '触发'"
+ :pageType="o.graphicType"
+ :triggerType="o.timeMode"
+ :componentName="o.componentName"
+ :dataArr="o.trigger"
+ :echartArr="o.presentationForm"
+ :title="o.componentName.split('_')[0]"
+ :chartName="o.combinationName"
+ :typeValue="typeValue"
+ />
+ <typeChart
+ v-if="o.timeMode === '周期时刻'"
+ :pageType="o.graphicType"
+ :triggerType="o.timeMode"
+ :componentName="o.componentName"
+ :dataArr="o.cycleTimeData"
+ :echartArr="o.presentationForm"
+ :title="o.componentName.split('_')[0]"
+ :chartName="o.combinationName"
+ :typeValue="typeCycleTimeData"
+ />
+ <!-- 周期统计的组件 -->
+ <typeChart
+ style="width: 100%;"
+ v-if="o.timeMode === '周期统计'"
+ :pageType="o.graphicType"
+ :triggerType="o.timeMode"
+ :componentName="o.componentName"
+ :dataArr="o.cycleStatistics"
+ :echartArr="o.presentationForm"
+ :title="o.componentName.split('_')[0]"
+ :chartName="o.combinationName"
+ :typeValue="typeCycleStatistics"
+ />
+ </el-collapse-item>
- <!-- <OD v-if="o.componentName.includes('OD')" :pageType="o.graphicType" triggerType="触发"
- :componentName="o.componentName" :echartArr="o.presentationForm"
- :dataArr="o.trigger" :title="o.componentName.split('_')[0]"
- :chartName='o.combinationName' />
- <typeChart v-else :pageType="o.graphicType" :triggerType="o.timeMode"
- :componentName="o.componentName"
- :dataArr="o.timeMode == '触发' ? o.trigger : o.cycleTimeData"
- :echartArr="o.presentationForm" :title="o.componentName.split('_')[0]"
- :chartName='o.combinationName'
- :typeValue="o.timeMode == '触发' ? typeValue : typeCycleTimeData" /> -->
- <OD v-if="o.componentName.includes('OD')" :pageType="o.graphicType" triggerType="触发"
- :componentName="o.componentName" :echartArr="o.presentationForm"
- :dataArr="o.trigger" :title="o.componentName.split('_')[0]"
- :chartName="o.combinationName" />
- <!--触发的组件 -->
- <typeChart v-if="o.timeMode === '触发'" :pageType="o.graphicType" :triggerType="o.timeMode"
- :componentName="o.componentName" :dataArr="o.trigger"
- :echartArr="o.presentationForm" :title="o.componentName.split('_')[0]"
- :chartName="o.combinationName" :typeValue="typeValue" />
- <typeChart v-if="o.timeMode === '周期时刻'" :pageType="o.graphicType"
- :triggerType="o.timeMode" :componentName="o.componentName"
- :dataArr="o.cycleTimeData" :echartArr="o.presentationForm"
- :title="o.componentName.split('_')[0]" :chartName="o.combinationName"
- :typeValue="typeCycleTimeData" />
- <!-- 周期统计的组件 -->
- <typeChart v-if="o.timeMode === '周期统计'" :pageType="o.graphicType"
- :triggerType="o.timeMode" :componentName="o.componentName"
- :dataArr="o.cycleStatistics" :echartArr="o.presentationForm"
- :title="o.componentName.split('_')[0]" :chartName="o.combinationName"
- :typeValue="typeCycleStatistics" />
- </div>
- <!-- :data="triggerList.length != 0 ? triggerList : tableData" -->
+ </div>
+
+ </el-collapse>
+
+ </el-tabs>
</div>
</template>
</div>
@@ -57,9 +83,9 @@
</div>
</el-scrollbar>
<!-- 详情框 -->
-</div>
+ </div>
</template>
- <!-- :data="triggerList.length != 0 ? tripHandle(o) : tableData" -->
+<!-- :data="triggerList.length != 0 ? tripHandle(o) : tableData" -->
<script>
import typeChart from '../../components/target/typeChart.vue';
import OD from '../../components/target/OD.vue';
@@ -100,10 +126,11 @@ export default {
default() {
return [];
}
- },
+ }
},
data() {
return {
+ acticveName: '1',
title1: '01断面',
title2: '01区域',
dialogVisible: false,
@@ -322,8 +349,6 @@ export default {
}
],
-
-
idVal: '',
//组件数组
componentList: [],
@@ -332,16 +357,12 @@ export default {
sectionData: [],
-
-
// 单个区域或者断面的表格触发数据
tableList: [],
-
// 路线数据
headWay: [],
-
tripData: [],
sectionArr: [],
@@ -350,46 +371,27 @@ export default {
typeValue: {},
// 周期时刻的数值看板展示
typeCycleTimeData: {},
- typeCycleStatistics:{}
+ typeCycleStatistics: {}
};
},
created() {
this.idVal = this.$route.query.id;
- getComponentSection({ VideoId: this.idVal }).then((res) => {
+ getComponentSection({ VideoId: this.idVal }).then(res => {
if (res.data.code == 200) {
- console.log(res.data.data, '11111111111111111');
- this.componentList = res.data.data
- this.siftData()
- // 处理获取过来的数据
- // this.componentList.forEach((val) => {
- // this.sectionArr.push(val.combinationName);
- // this.sectionArr = Array.from(new Set(this.sectionArr));
- // });
- // this.sectionData = this.sectionArr.map((item) => {
- // item = { title: item, children: [] };
- // this.componentList.forEach((val) => {
- // if (item.title == val.combinationName) {
- // item.children.push(val);
- // }
- // });
- // return item;
- // });
- console.log(this.sectionData, '455');
- } else if (res.data.code == 404) {
+ this.componentList = res.data.data;
+ this.siftData();
}
});
-
},
methods: {
-
siftData() {
- this.componentList.forEach((val) => {
+ this.componentList.forEach(val => {
this.sectionArr.push(val.combinationName);
this.sectionArr = Array.from(new Set(this.sectionArr));
});
- this.sectionData = this.sectionArr.map((item) => {
+ this.sectionData = this.sectionArr.map(item => {
item = { title: item, children: [] };
- this.componentList.forEach((val) => {
+ this.componentList.forEach(val => {
if (item.title == val.combinationName) {
item.children.push(val);
}
@@ -404,69 +406,58 @@ export default {
let downPulls1 = document.querySelectorAll('.downPull1');
// 断面的小图标
downPulls1[i].dataset.num++;
-
if (downPulls1[i].dataset.num % 2 == 0) {
downPulls1[i].style.cssText = 'transform: rotate(180deg);transition: all 0.5s linear;';
- sections[i].style.height = 'auto';
+ // sections[i].style.height = 'auto';
if (sectionBox[i] != undefined) {
- sectionBox[i].style.height = 'auto';
+ // sectionBox[i].style.height = 'auto';
}
-
} else {
downPulls1[i].style.cssText = 'transition: all 0.5s linear;';
- sections[i].style.height = '500px';
+ // sections[i].style.height = '500px';
if (sectionBox[i] != undefined) {
- sectionBox[i].style.height = '48vh'
+ // sectionBox[i].style.height = '48vh';
}
-
-
}
- },
-
+ }
// 触发数据的类型数值
-
- },
- mounted() {
},
+ mounted() {},
watch: {
-
// 触发的原始数据
triggerData: {
- handler(newVal, oldVal) {
- },
+ handler(newVal, oldVal) {},
immediate: true
},
// 处理过的触发数据
triggerListData: {
handler(newVal) {
- this.triggerList = newVal
+ this.triggerList = newVal;
// 触发数据
// console.log(newVal, 'triggerlistData');
this.componentList.forEach(ele => {
if (ele.trigger == undefined && ele.timeMode == '触发') {
- ele.trigger = []
+ ele.trigger = [];
}
newVal.forEach(item => {
if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '触发') {
if (ele.trigger.length == 10) {
- ele.trigger.pop()
-
+ ele.trigger.pop();
} else {
- item.time = item.time.split('.')[0]
+ item.time = item.time.split('.')[0];
// 该时间的触发数据
if (item.type_data != null) {
// console.log(item,'461461');
- this.typeValue = item
+ this.typeValue = item;
}
- ele.trigger.unshift(item)
+ ele.trigger.unshift(item);
}
}
- })
- })
- console.log(this.sectionData,'触发的筛选数据');
+ });
+ });
},
immediate: true
},
@@ -478,24 +469,27 @@ export default {
if (newVal.length != 0) {
this.componentList.forEach(ele => {
if (ele.cycleTimeData == undefined && ele.timeMode == '周期时刻') {
- ele.cycleTimeData = []
+ ele.cycleTimeData = [];
}
newVal.forEach(item => {
- if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '周期时刻' && ele.analogAreaGraphId == item.graphical_id) {
+ if (
+ ele.analogAreaComponentId == item.component_id &&
+ ele.timeMode == '周期时刻' &&
+ ele.analogAreaGraphId == item.graphical_id
+ ) {
if (ele.cycleTimeData.length == 10) {
- ele.cycleTimeData.slice(ele.cycleTimeData.length-1,0)
+ ele.cycleTimeData.slice(ele.cycleTimeData.length - 1, 0);
} else {
- item.time = item.time.split('.')[0]
- if(item.type_data!=null){
+ item.time = item.time.split('.')[0];
+ if (item.type_data != null) {
// 周期时刻的类型数据
- this.typeCycleTimeData = item
+ this.typeCycleTimeData = item;
}
- ele.cycleTimeData.unshift(item)
+ ele.cycleTimeData.unshift(item);
}
}
- })
- })
- console.log(this.sectionData, '455');
+ });
+ });
}
},
immediate: true
@@ -516,19 +510,14 @@ export default {
ele.cycleStatistics = [];
}
newVal.forEach(item => {
- if (
- ele.analogAreaComponentId == item.component_id &&
- ele.timeMode == '周期统计'
- ) {
+ if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '周期统计') {
if (ele.cycleStatistics.length == 10) {
ele.cycleStatistics.pop();
} else {
- item.time = item.time.split('.')[0]
+ item.time = item.time.split('.')[0];
if (item.type_data != null) {
-
- //周期时刻的类型数据
- this.typeCycleStatistics = item;
-
+ //周期时刻的类型数据
+ this.typeCycleStatistics = item;
}
ele.cycleStatistics.unshift(item);
}
@@ -536,9 +525,8 @@ export default {
});
});
}
- console.log(this.sectionData, '周期统计筛选数据');
}
- },
+ }
// activeName: {
// handler(newVal) {
// if (newVal == "second") {
@@ -554,10 +542,7 @@ export default {
// },
// immediate: true
// }
- },
-
-
-
+ }
};
</script>
@@ -577,7 +562,7 @@ export default {
/deep/ .el-scrollbar__view {
display: inline-block !important;
- width: 100%
+ width: 100%;
}
/deep/ .el-scrollbar__wrap {
@@ -591,7 +576,6 @@ export default {
.dataBoard {
height: 100%;
}
-
}
.dataBoard .region,
@@ -600,7 +584,7 @@ export default {
border: 1px solid #e4e7ed;
box-sizing: border-box;
padding: 15px;
- height: 500px;
+ height: auto;
position: relative;
transition: all 1s;
overflow: hidden;
@@ -608,7 +592,7 @@ export default {
.dataBoard .sectionBox {
width: 100%;
- height: 48vh;
+ height: auto;
border: 1px solid #e4e7ed;
box-sizing: border-box;
padding: 15px;
@@ -681,4 +665,4 @@ export default {
.active {
transition: all 0.5s linear;
}
-</style>
\ No newline at end of file
+</style>