TransFlow/src/views/bounced/dataBoard.vue

487 lines
18 KiB
Vue

<template>
<div ref="box" class="box">
<el-empty v-show="sectionData.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="plate1" ref="plate1">
<div :class="sectionData.length <= 2 ? 'sectionBox' : '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>
<el-tabs>
<el-collapse v-model="acticveName">
<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 ref="typeChartRef" 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="typeTimeMode" />
<typeChart ref="typeChartRef1" 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 ref="typeChartRef2" 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>
</div>
</el-collapse>
</el-tabs>
</div>
</template>
</div>
</div>
</div>
</el-scrollbar>
<!-- 详情框 -->
</div>
</template>
<script>
import typeChart from '../../components/target/typeChart.vue';
import OD from '../../components/target/OD.vue';
// import {mapMutation} from 'vuex'
import { getComponentSection } from '../../api/index';
export default {
components: {
typeChart,
OD
},
props: {
activeName: {
type: String
},
triggerData: {
type: Array,
default() {
return [];
}
},
// 触发数据
triggerListData: {
type: Array,
default() {
return [];
}
},
// 周期时刻数据
cycleTimeData: {
type: Array,
default() {
return [];
}
},
//周期统计
cycleStatistics: {
type: Array,
default() {
return [];
}
}
},
data() {
return {
acticveName: [],
title1: '01断面',
title2: '01区域',
dialogVisible: false,
idVal: '',
//组件数组
componentList: [],
// 触发数据数组
triggerList: [],
sectionData: [],
// 单个区域或者断面的表格触发数据
tableList: [],
// 路线数据
headWay: [],
tripData: [],
sectionArr: [],
//触发的类型数值看板显示
typeTimeMode: {},
// 周期时刻的数值看板展示
typeCycleTimeData: {},
typeCycleStatistics: {},
// 各个组件分类
classify: []
};
},
// beforeCeated(){
// },
created() {
// this.getNew()
},
methods: {
getNew() {
// this.idVal = ;
getComponentSection({ VideoId: this.$route.query.id }).then(res => {
if (res.data.code == 200) {
console.log(res.data.data, '组件的数据');
this.componentList = res.data.data;
this.siftData();
}
});
},
siftData() {
this.sectionArr = []
this.sectionData = []
this.classify = []
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.acticveName = [];
this.componentList.forEach(val => {
if (item.title == val.combinationName) {
this.classify.push(val)
item.children.push(val);
}
this.acticveName.push(val.analogAreaComponentId);
});
return item;
});
},
// 组件图标点击下拉事件
sectionHandle(i) {
let sections = document.querySelectorAll('.section');
let sectionBox = document.querySelectorAll('.sectionBox');
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';
if (sectionBox[i] != undefined) {
// sectionBox[i].style.height = 'auto';
}
} else {
downPulls1[i].style.cssText = 'transition: all 0.5s linear;';
// sections[i].style.height = '500px';
if (sectionBox[i] != undefined) {
}
}
},
channge(oldVal, newVal) {
console.log("old", oldVal)
console.log("newVal", newVal)
if (oldVal == 'second') {
this.sectionArr = []
this.sectionData = []
this.getNew()
} else if (newVal == 'second') {
this.sectionArr = []
this.sectionData = []
this.getNew()
}
}
// 触发数据的类型数值
},
mounted() { },
watch: {
// acticveName: {
// handler(newVal) {
// if (newVal != 'second') {
// // 组件数据赋空
// this.classify = []
// }
// }
// },
// 触发的原始数据
triggerData: {
handler(newVal, oldVal) { },
immediate: true
},
// activeName:'channge',
// 处理过的触发数据
triggerListData: {
handler(newVal) {
this.triggerList = newVal;
// 触发数据
var _this = this
if (newVal.length != 0 && _this.sectionData) {
_this.classify.forEach((ele, index) => {
if (ele.trigger == undefined && ele.timeMode == '触发') {
ele.trigger = [];
}
newVal.forEach((item) => {
if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '触发') {
if (ele.trigger.length == 10) {
ele.trigger.splice(newVal.length - 1, 1);
} else {
item.time = item.time.split('.')[0];
// 该时间的触发数据
if (item.type_data != null) {
_this.typeTimeMode = item
}
ele.trigger.unshift(item);
_this.$nextTick(() => {
for (let i = 0; i < _this.$refs.typeChartRef.length; i++) {
// console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据');
let item = _this.$refs.typeChartRef[i]
_this.$refs.typeChartRef[i].$refs.lineChartRef.drawLine(_this.$refs.typeChartRef[i].dataArr,_this.$refs.typeChartRef[i].componentName.split('_')[0])
if(item.componentName.split('_')[0]=="类型"){
// 数据改变重新渲染柱状图
item.$refs.barChartRef.drawBar(item.dataArr[0])
// 数据改变重新渲染饼图
item.$refs.pieChartRef.drawPie(item.dataArr[0])
}
}
})
}
}
});
});
}
},
immediate: true
},
// 周期时刻的数据
cycleTimeData: {
handler(newVal) {
// 监听到打印周期时刻数据
console.log(newVal, '周期时刻数据');
var that = this
if (newVal.length != 0 && this.sectionData) {
that.classify.forEach((ele, index) => {
if (ele.cycleTimeData == undefined && ele.timeMode == '周期时刻') {
ele.cycleTimeData = [];
}
newVal.forEach(item => {
if (
ele.analogAreaComponentId == item.component_id &&
ele.timeMode == '周期时刻'
) {
if (ele.cycleTimeData.length == 10) {
ele.cycleTimeData.splice(newVal.length - 1, 1);
} else {
item.time = item.time.split('.')[0];
if (item.type_data != null) {
// 周期时刻的类型数据
that.typeCycleTimeData = item;
}
ele.cycleTimeData.unshift(item);
that.$nextTick(() => {
// 轮循周期时刻生成的各类组件
for (let i = 0; i < that.$refs.typeChartRef1.length; i++) {
that.$refs.typeChartRef1[i].$refs.lineChartRef.drawLine(that.$refs.typeChartRef1[i].dataArr, that.$refs.typeChartRef[i].componentName.split('_')[0])
}
})
}
}
});
});
}
},
immediate: true
},
cycleStatistics: {
handler(newVal) {
console.log(newVal,'周期统计数据');
if (newVal.length != 0 && this.sectionData) {
this.componentList.forEach(ele => {
if (ele.cycleStatistics == undefined && ele.timeMode == '周期统计') {
ele.cycleStatistics = [];
}
newVal.forEach(item => {
if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '周期统计') {
if (ele.cycleStatistics.length == 10) {
ele.cycleStatistics.splice(newVal.length - 1, 1);
} else {
item.time = item.time.split('.')[0];
if (item.type_data != null) {
//周期时刻的类型数据
this.typeCycleStatistics = item;
}
ele.cycleStatistics.unshift(item);
for (let i = 0; i < this.$refs.typeChartRef2.length; i++) {
// console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据');
this.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(this.$refs.typeChartRef2[i].dataArr,_this.$refs.typeChartRe2f[i].componentName.split('_')[0])
}
}
}
});
});
}
}
}
// activeName: {
// handler(newVal) {
// if (newVal == "second") {
// getComponentSection({ VideoId: this.$route.query.id }).then(res => {
// if (res.data.code == 200) {
// this.componentList = res.data.data;
// this.siftData();
// } else if (res.data.code == 404) {
// }
// });
// }
// },
// immediate: true
// }
}
};
</script>
<style scoped lang="scss">
* {
margin: 0;
padding: 0;
}
.plate1,
.plate2 {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
/deep/ .el-scrollbar__view {
display: inline-block !important;
width: 100%;
}
/deep/ .el-scrollbar__wrap {
overflow-x: hidden !important;
}
.scrollbar {
height: 100vh;
overflow-x: hidden !important;
.dataBoard {
height: 100%;
}
}
.dataBoard .region,
.dataBoard .section {
width: 48%;
border: 1px solid #e4e7ed;
box-sizing: border-box;
padding: 15px;
height: auto;
position: relative;
transition: all 1s;
overflow: hidden;
}
.dataBoard .sectionBox {
width: 100%;
height: auto;
border: 1px solid #e4e7ed;
box-sizing: border-box;
padding: 15px;
position: relative;
transition: all 1s;
overflow: hidden;
}
.dataBoard .sectionBox:nth-child(1) {
margin-bottom: 4vh;
}
.dataBoard .section {
float: left;
margin-top: 20px;
}
.dataBoard .section:nth-child(1),
.dataBoard .section:nth-child(2) {
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>