1046 lines
54 KiB
Vue
1046 lines
54 KiB
Vue
<template>
|
|
<div ref="box" class="box" v-loading="loading">
|
|
<el-empty v-show="!loading&§ionData.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'">
|
|
<!-- 断面 -->
|
|
<!-- :class="sectionData.length <= 1 ? 'sectionBox' : 'section'" -->
|
|
<div class="plate1" ref="plate1">
|
|
<div class="section" ref="section" v-for="s 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" @change="handleChange">
|
|
<div style="position: relative" v-for="o in s.children" :key="o.analogAreaComponentId">
|
|
<div class="titleGnag"></div>
|
|
<el-collapse-item :title="o.componentName + o.timeMode" :name="o.analogAreaComponentId">
|
|
<!--触发的组件 -->
|
|
<typeChart
|
|
ref="typeChartRef"
|
|
v-if="o.timeMode === '实时触发'"
|
|
:itemData="o"
|
|
: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"
|
|
:startEndData="{ start: o.startSectionNames, end: o.endSectionNames }"
|
|
/>
|
|
<typeChart
|
|
ref="typeChartRef1"
|
|
v-if="o.timeMode === '固定时刻'"
|
|
:itemData="o"
|
|
: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"
|
|
:startEndData="{ start: o.startSectionNames, end: o.endSectionNames }"
|
|
/>
|
|
|
|
<!-- 固定间隔的组件 -->
|
|
<typeChart
|
|
ref="typeChartRef2"
|
|
style="width: 100%"
|
|
v-if="o.timeMode === '固定间隔'"
|
|
:itemData="o"
|
|
:pageType="o.graphicType"
|
|
:triggerType="o.timeMode"
|
|
:componentName="o.componentName"
|
|
:dataArr="o.cycleStatisticsData"
|
|
:echartArr="o.presentationForm"
|
|
:title="o.componentName.split('_')[0]"
|
|
:chartName="o.combinationName"
|
|
:typeValue="typeCycleStatistics"
|
|
:startEndData="{ start: o.startSectionNames, end: o.endSectionNames }"
|
|
/>
|
|
</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 {mapMutation} from 'vuex'
|
|
import { getComponentSection } from '../../api/index';
|
|
export default {
|
|
components: {
|
|
typeChart
|
|
},
|
|
props: {
|
|
activeName: {
|
|
type: String
|
|
},
|
|
triggerData: {
|
|
type: Array,
|
|
default() {
|
|
return [];
|
|
}
|
|
},
|
|
// 触发数据
|
|
triggerListData: {
|
|
type: Array,
|
|
default() {
|
|
return [];
|
|
}
|
|
},
|
|
// 固定时刻数据
|
|
cycleTimeData: {
|
|
type: Array,
|
|
default() {
|
|
return [];
|
|
}
|
|
},
|
|
//固定间隔
|
|
cycleStatisticsData: {
|
|
type: Array,
|
|
default() {
|
|
return [];
|
|
}
|
|
},
|
|
//周期统计实时累计数据主题
|
|
cycleAccumulateData: {
|
|
type: Array,
|
|
default() {
|
|
return [];
|
|
}
|
|
},
|
|
//历史数据
|
|
cycleHistoryData: {
|
|
type: Object,
|
|
default() {
|
|
return {};
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
loading:false,
|
|
acticveName: [],
|
|
title1: '01断面',
|
|
title2: '01区域',
|
|
dialogVisible: false,
|
|
|
|
idVal: '',
|
|
//组件数组
|
|
componentList: [],
|
|
// 触发数据数组
|
|
triggerList: [],
|
|
|
|
sectionData: [],
|
|
|
|
// 单个区域或者断面的表格触发数据
|
|
tableList: [],
|
|
|
|
// 路线数据
|
|
headWay: [],
|
|
|
|
tripData: [],
|
|
|
|
sectionArr: [],
|
|
|
|
//触发的类型数值看板显示
|
|
typeTimeMode: {},
|
|
// 固定时刻的数值看板展示
|
|
typeCycleTimeData: {},
|
|
typeCycleStatistics: {},
|
|
|
|
// 各个组件分类
|
|
classify: []
|
|
// cycleHistoryData:''
|
|
};
|
|
},
|
|
// beforeCeated(){
|
|
|
|
// },
|
|
created() {
|
|
// this.getNew()
|
|
// //console.log("cycleHistoryData",this.cycleHistoryData)
|
|
},
|
|
methods: {
|
|
// 手风琴下拉切换
|
|
handleChange(val) {
|
|
// setTimeout(() => {
|
|
// this.$nextTick(function () {
|
|
// var myEvent = new Event("resize");
|
|
// window.dispatchEvent(myEvent);
|
|
// });
|
|
// }, 3000);
|
|
},
|
|
getNew() {
|
|
// this.idVal = ;
|
|
this.loading=true;
|
|
getComponentSection({ VideoId: this.$route.query.id, Number: 10 }).then((res) => {
|
|
if (res.data.code == 200) {
|
|
//console.log(res.data.data, '组件的数据');
|
|
this.componentList = res.data.data;
|
|
this.siftData();
|
|
}
|
|
}).finally(()=>{
|
|
this.loading=false;
|
|
});
|
|
},
|
|
|
|
siftData() {
|
|
this.sectionArr = [];
|
|
this.sectionData = [];
|
|
this.classify = [];
|
|
this.componentList.forEach((val) => {
|
|
// //console.log("val",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);
|
|
if (val.timeMode == '固定间隔' || this.cycleStatisticsData.length == 0) {
|
|
item.cycleStatisticsData = val.cycleStatisticsData;
|
|
}
|
|
if (val.timeMode == '固定时刻' || this.cycleTimeData.length == 0) {
|
|
item.cycleTimeData = val.cycleTimeData;
|
|
}
|
|
}
|
|
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) {
|
|
}
|
|
}
|
|
},
|
|
|
|
// 触发数据的类型数值
|
|
|
|
//循环方法
|
|
getRef(data, timeMode) {
|
|
for (let i = 0; i < data.length; i++) {
|
|
let refItem = data[i];
|
|
if (data.length != 0 && refItem.dataArr && refItem.dataArr.length > 0) {
|
|
if (refItem.echartArr.includes('时间曲线图')) {
|
|
refItem.$refs.lineChartRef.drawLine(refItem.dataArr, refItem.componentName.split('_')[0], timeMode);
|
|
}
|
|
if (refItem.echartArr.includes('数值')) {
|
|
refItem.getDataArr(refItem.dataArr);
|
|
}
|
|
if (refItem.echartArr.includes('表格')) {
|
|
refItem.getDataArr(refItem.dataArr);
|
|
}
|
|
if (refItem.echartArr.includes('直方图') && refItem.$refs.barChartRef.drawBar) {
|
|
// 数据改变重新渲染柱状图
|
|
refItem.$refs.barChartRef.drawBar(refItem.dataArr[0]);
|
|
}
|
|
if (refItem.echartArr.includes('饼状图') && refItem.$refs.pieChartRef.drawPie) {
|
|
// 数据改变重新渲染饼图
|
|
refItem.$refs.pieChartRef.drawPie(refItem.dataArr[0]);
|
|
}
|
|
if (refItem.echartArr.includes('均值图') && refItem.$refs.avgChartRef != undefined) {
|
|
refItem.$refs.avgChartRef.drawBar(refItem.dataArr[0]);
|
|
}
|
|
if (
|
|
refItem.componentName.includes('OD') &&
|
|
refItem.$refs.ODChartRef != undefined &&
|
|
refItem.dataArr[0].ob_data &&
|
|
refItem.dataArr[0].ob_data.length != 0
|
|
) {
|
|
refItem.$refs.ODChartRef.drawThermalChart(refItem.dataArr[0].ob_data, refItem.startEndData);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
//处理离线视频历史数据
|
|
changecycleHistoryData() {}
|
|
},
|
|
mounted() {},
|
|
watch: {
|
|
// 触发的原始数据
|
|
triggerData: {
|
|
handler(newVal, oldVal) {},
|
|
immediate: true
|
|
},
|
|
componentList: {
|
|
handler(newVal) {
|
|
//console.log('componentList', newVal);
|
|
|
|
if (newVal != undefined && newVal.length != 0) {
|
|
newVal.forEach((ele) => {
|
|
if (ele.timeMode == '固定间隔' && this.$route.query.type == '实时视频') {
|
|
//console.log('实时视频', '固定间隔');
|
|
this.$nextTick(() => {
|
|
// var thatNN = this;
|
|
ele.cycleStatisticsData.forEach((item) => {
|
|
if (item.type_data != null) {
|
|
this.typeCycleStatistics = item;
|
|
}
|
|
});
|
|
if (this.$refs.typeChartRef2 != undefined) {
|
|
// // 轮循固定时刻生成的各类组件
|
|
//console.log('轮循固定时刻生成的各类组件')
|
|
this.getRef(this.$refs.typeChartRef2, ele.timeMode);
|
|
}
|
|
});
|
|
}
|
|
if (ele.timeMode == '固定时刻' && this.$route.query.type == '实时视频') {
|
|
//console.log('实时视频', '固定时刻');
|
|
this.$nextTick(() => {
|
|
ele.cycleTimeData.forEach((item) => {
|
|
if (item.type_data != null) {
|
|
item.time = item.time.split('.')[0];
|
|
|
|
this.typeCycleStatistics = item;
|
|
}
|
|
// thatN.$nextTick(() => {
|
|
});
|
|
if (this.$refs.typeChartRef1 != undefined) {
|
|
// // 轮循固定时刻生成的各类组件
|
|
this.getRef(this.$refs.typeChartRef1, ele.timeMode);
|
|
}
|
|
});
|
|
}
|
|
if (ele.timeMode == '固定间隔' && this.$route.query.type == '离线视频') {
|
|
if (
|
|
this.cycleHistoryData.CycleStatisticsData != undefined &&
|
|
this.cycleHistoryData.CycleStatisticsData.lenght != 0
|
|
) {
|
|
this.cycleHistoryData.CycleStatisticsData.forEach((ne) => {
|
|
if (ne.component_id == ele.analogAreaComponentId) {
|
|
ele.cycleStatisticsData = ne.cycleStatisticsData;
|
|
}
|
|
});
|
|
this.$nextTick(() => {
|
|
ele.cycleStatisticsData.forEach((item) => {
|
|
var timeNew = item.time.split('.')[0];
|
|
var dateLength = timeNew.length;
|
|
var key = timeNew.substring(dateLength - 8, dateLength);
|
|
item.time = key;
|
|
if (item.type_data != null) {
|
|
this.typeCycleStatistics = item;
|
|
}
|
|
// thatN.$nextTick(() => {
|
|
});
|
|
if (this.$refs.typeChartRef2 != undefined) {
|
|
// // 轮循固定时刻生成的各类组件
|
|
this.getRef(this.$refs.typeChartRef2, '固定间隔');
|
|
}
|
|
});
|
|
}
|
|
}
|
|
if (ele.timeMode == '固定时刻' && this.$route.query.type == '离线视频') {
|
|
if (this.cycleHistoryData.CycleTimeData != undefined && this.cycleHistoryData.CycleTimeData.lenght != 0) {
|
|
this.cycleHistoryData.CycleTimeData.forEach((ne) => {
|
|
if (ne.component_id == ele.analogAreaComponentId) {
|
|
ele.cycleTimeData = ne.cycleTimeData;
|
|
}
|
|
});
|
|
this.$nextTick(() => {
|
|
ele.cycleTimeData.forEach((item) => {
|
|
// if(this.$route.query.type=='离线视频'){
|
|
var timeNew = item.time.split('.')[0];
|
|
var dateLength = timeNew.length;
|
|
var key = timeNew.substring(dateLength - 8, dateLength);
|
|
item.time = key;
|
|
// }else{
|
|
// item.time = item.time.split('.')[0];
|
|
// }
|
|
if (item.type_data != null) {
|
|
this.typeCycleStatistics = item;
|
|
}
|
|
});
|
|
if (this.$refs.typeChartRef1 != undefined) {
|
|
// // 轮循固定时刻生成的各类组件
|
|
|
|
this.getRef(this.$refs.typeChartRef1, '固定时刻');
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|
|
}
|
|
},
|
|
immediate: true,
|
|
deep: true
|
|
},
|
|
cycleHistoryData: {
|
|
handler(newVal) {
|
|
// debugger
|
|
//console.log('历史', newVal);
|
|
// //console.log("历史",oldVal)
|
|
if (newVal != undefined) {
|
|
// newVal.forEach(ele => {
|
|
if (newVal.CycleStatisticsData) {
|
|
newVal.CycleStatisticsData.forEach((ele) => {
|
|
this.$nextTick(() => {
|
|
// var thatNN = this;
|
|
ele.cycleStatisticsData.forEach((item) => {
|
|
if (item.type_data != null) {
|
|
if (this.$route.query.type == '离线视频') {
|
|
var timeNew = item.time.split('.')[0];
|
|
var dateLength = timeNew.length;
|
|
var key = timeNew.substring(dateLength - 8, dateLength);
|
|
item.time = key;
|
|
} else {
|
|
item.time = item.time.split('.')[0];
|
|
}
|
|
this.typeCycleStatistics = item;
|
|
}
|
|
});
|
|
if (this.$refs.typeChartRef2 != undefined) {
|
|
// // 轮循固定时刻生成的各类组件
|
|
this.getRef(this.$refs.typeChartRef2, '固定间隔');
|
|
}
|
|
});
|
|
});
|
|
}
|
|
if (newVal.CycleTimeData) {
|
|
newVal.CycleTimeData.forEach((ele) => {
|
|
this.$nextTick(() => {
|
|
// debugger
|
|
// var thatNN = this;
|
|
ele.cycleTimeData.forEach((item) => {
|
|
if (this.$route.query.type == '离线视频') {
|
|
var timeNew = item.time.split('.')[0];
|
|
var dateLength = timeNew.length;
|
|
var key = timeNew.substring(dateLength - 8, dateLength);
|
|
item.time = key;
|
|
} else {
|
|
item.time = item.time.split('.')[0];
|
|
}
|
|
if (item.type_data != null) {
|
|
this.typeCycleStatistics = item;
|
|
}
|
|
});
|
|
if (this.$refs.typeChartRef1 != undefined) {
|
|
// // 轮循固定时刻生成的各类组件
|
|
this.getRef(this.$refs.typeChartRef1, '固定时刻');
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
// });
|
|
}
|
|
},
|
|
immediate: true,
|
|
deep: true
|
|
},
|
|
// activeName:'channge',
|
|
// 处理过的触发数据
|
|
triggerListData: {
|
|
handler(newVal) {
|
|
// //console.log("newVal",newVal,'流量数据')
|
|
this.triggerList = newVal;
|
|
// //console.log("oldVal",oldVal)
|
|
// 触发数据
|
|
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 == '实时触发') {
|
|
// //console.log(ele.analogAreaComponentId, 'analogAreaComponentId');
|
|
// //console.log(item.component_id, 'component_id');
|
|
if (ele.trigger.length == 10) {
|
|
ele.trigger.pop();
|
|
}
|
|
if (this.$route.query.type == '离线视频') {
|
|
var timeNew = item.time.split('.')[0];
|
|
var dateLength = timeNew.length;
|
|
var key = timeNew.substring(dateLength - 8, dateLength);
|
|
item.time = key;
|
|
} else {
|
|
item.time = item.time.split('.')[0];
|
|
}
|
|
|
|
// 该时间的触发数据
|
|
if (item.type_data != null) {
|
|
_this.typeTimeMode = item;
|
|
}
|
|
ele.trigger.unshift(item);
|
|
_this.$nextTick(() => {
|
|
if (_this.$refs.typeChartRef != undefined) {
|
|
for (let i = 0; i < _this.$refs.typeChartRef.length; i++) {
|
|
// //console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据');
|
|
let itemTypeChart = _this.$refs.typeChartRef[i];
|
|
if (itemTypeChart.dataArr != undefined && itemTypeChart.dataArr.length != 0) {
|
|
if (itemTypeChart.echartArr.includes('时间曲线图')) {
|
|
_this.$refs.typeChartRef[i].$refs.lineChartRef.drawLine(
|
|
_this.$refs.typeChartRef[i].dataArr,
|
|
_this.$refs.typeChartRef[i].componentName.split('_')[0],
|
|
'实时触发'
|
|
);
|
|
}
|
|
if (itemTypeChart.echartArr.includes('数值')) {
|
|
_this.$refs.typeChartRef[i].getDataArr(_this.$refs.typeChartRef[i].dataArr);
|
|
}
|
|
if (itemTypeChart.echartArr.includes('表格')) {
|
|
_this.$refs.typeChartRef[i].getDataArr(_this.$refs.typeChartRef[i].dataArr);
|
|
}
|
|
if (
|
|
itemTypeChart.echartArr.includes('直方图') &&
|
|
itemTypeChart.componentName.split('_')[0]
|
|
) {
|
|
// 数据改变重新渲染柱状图
|
|
itemTypeChart.$refs.barChartRef.drawBar(itemTypeChart.dataArr[0]);
|
|
}
|
|
if (
|
|
itemTypeChart.echartArr.includes('饼状图') &&
|
|
itemTypeChart.componentName.split('_')[0]
|
|
) {
|
|
// 数据改变重新渲染饼图
|
|
itemTypeChart.$refs.pieChartRef.drawPie(itemTypeChart.dataArr[0]);
|
|
}
|
|
if (
|
|
itemTypeChart.echartArr.includes('均值图') &&
|
|
itemTypeChart.$refs.avgChartRef != undefined
|
|
) {
|
|
itemTypeChart.$refs.avgChartRef.drawBar(itemTypeChart.dataArr[0]);
|
|
}
|
|
if (
|
|
itemTypeChart.componentName.includes('OD') &&
|
|
itemTypeChart.$refs.ODChartRef != undefined &&
|
|
itemTypeChart.dataArr[0].ob_data &&
|
|
itemTypeChart.dataArr[0].ob_data.length != 0
|
|
) {
|
|
itemTypeChart.$refs.ODChartRef.drawThermalChart(
|
|
itemTypeChart.dataArr[0].ob_data,
|
|
itemTypeChart.startEndData
|
|
);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
});
|
|
}
|
|
},
|
|
immediate: true
|
|
},
|
|
// 固定时刻的数据
|
|
cycleTimeData: {
|
|
handler(newVal) {
|
|
// 监听到打印固定时刻数据
|
|
// console.log(newVal, '固定时刻数据');
|
|
|
|
if (newVal != undefined && newVal.length != 0 && this.sectionData) {
|
|
var thatN = this;
|
|
thatN.classify.forEach((ele, index) => {
|
|
newVal.forEach((item) => {
|
|
if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '固定时刻') {
|
|
if (ele.cycleTimeData.length == 10) {
|
|
ele.cycleTimeData.pop();
|
|
}
|
|
// item.time = item.time.split('.')[0];
|
|
if (this.$route.query.type == '离线视频') {
|
|
var timeNew = item.time.split('.')[0];
|
|
var dateLength = timeNew.length;
|
|
var key = timeNew.substring(dateLength - 8, dateLength);
|
|
item.time = key;
|
|
} else {
|
|
item.time = item.time.split('.')[0];
|
|
}
|
|
if (item.type_data != null) {
|
|
// 固定时刻的类型数据
|
|
thatN.typeCycleTimeData = item;
|
|
}
|
|
ele.cycleTimeData.unshift(item);
|
|
|
|
// thatN.$nextTick(() => {
|
|
if (thatN.$refs.typeChartRef1 != undefined) {
|
|
// //console.log("thatN.$refs.typeChartRef1",thatN.$refs.typeChartRef1)
|
|
// 轮循固定时刻生成的各类组件
|
|
for (let i = 0; i < thatN.$refs.typeChartRef1.length; i++) {
|
|
let itemTypeChartRef1 = thatN.$refs.typeChartRef1[i];
|
|
if (
|
|
itemTypeChartRef1.length != 0 &&
|
|
itemTypeChartRef1.dataArr != undefined &&
|
|
itemTypeChartRef1.dataArr.length != 0
|
|
) {
|
|
if (itemTypeChartRef1.echartArr.includes('时间曲线图')) {
|
|
thatN.$refs.typeChartRef1[i].$refs.lineChartRef.drawLine(
|
|
thatN.$refs.typeChartRef1[i].dataArr,
|
|
thatN.$refs.typeChartRef1[i].componentName.split('_')[0],
|
|
'固定时刻'
|
|
);
|
|
}
|
|
if (itemTypeChartRef1.echartArr.includes('数值')) {
|
|
thatN.$refs.typeChartRef1[i].getDataArr(thatN.$refs.typeChartRef1[i].dataArr);
|
|
}
|
|
if (itemTypeChartRef1.echartArr.includes('表格')) {
|
|
thatN.$refs.typeChartRef1[i].getDataArr(thatN.$refs.typeChartRef1[i].dataArr);
|
|
}
|
|
if (
|
|
itemTypeChartRef1.echartArr.includes('直方图') &&
|
|
itemTypeChartRef1.$refs.barChartRef.drawBar
|
|
) {
|
|
// 数据改变重新渲染柱状图
|
|
itemTypeChartRef1.$refs.barChartRef.drawBar(itemTypeChartRef1.dataArr[0]);
|
|
}
|
|
if (
|
|
itemTypeChartRef1.echartArr.includes('饼状图') &&
|
|
itemTypeChartRef1.$refs.pieChartRef.drawPie
|
|
) {
|
|
// 数据改变重新渲染饼图
|
|
itemTypeChartRef1.$refs.pieChartRef.drawPie(itemTypeChartRef1.dataArr[0]);
|
|
}
|
|
if (
|
|
itemTypeChartRef1.echartArr.includes('均值图') &&
|
|
itemTypeChartRef1.$refs.avgChartRef != undefined
|
|
) {
|
|
itemTypeChartRef1.$refs.avgChartRef.drawBar(itemTypeChartRef1.dataArr[0]);
|
|
}
|
|
if (
|
|
itemTypeChartRef1.componentName.includes('OD') &&
|
|
itemTypeChartRef1.$refs.ODChartRef != undefined &&
|
|
itemTypeChartRef1.dataArr[0].ob_data &&
|
|
itemTypeChartRef1.dataArr[0].ob_data.length != 0
|
|
) {
|
|
// console.log('固定时刻-od',itemTypeChartRef1.dataArr[0].ob_data)
|
|
itemTypeChartRef1.$refs.ODChartRef.drawThermalChart(
|
|
itemTypeChartRef1.dataArr[0].ob_data,
|
|
itemTypeChartRef1.startEndData
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
// });
|
|
}
|
|
}
|
|
});
|
|
});
|
|
}
|
|
// else {
|
|
// var _thatN = this
|
|
// _thatN.classify.forEach((ele, index) => {
|
|
|
|
// // newVal.forEach(item => {
|
|
// if (ele.timeMode == '固定时刻') {
|
|
// if (ele.cycleTimeData.length == 10) {
|
|
// ele.cycleTimeData.pop();
|
|
// }
|
|
// // item.time = item.time.split('.')[0];
|
|
// // if (item.type_data != null) {
|
|
// // // 固定时刻的类型数据
|
|
// // _thatN.typeCycleTimeData = item;
|
|
// // }
|
|
// // ele.cycleTimeData.unshift(item);
|
|
// // _thatN.$nextTick(() => {
|
|
// if (_thatN.$refs.typeChartRef1 != undefined) {
|
|
// // //console.log("thatN.$refs.typeChartRef1",_thatN.$refs.typeChartRef1)
|
|
// // 轮循固定时刻生成的各类组件
|
|
// for (let i = 0; i < _thatN.$refs.typeChartRef1.length; i++) {
|
|
// let itemTypeChartRef1 = thatN.$refs.typeChartRef1[i]
|
|
// if (itemTypeChartRef1.length != 0 && itemTypeChartRef1.dataArr != undefined && itemTypeChartRef1.dataArr.length != 0) {
|
|
|
|
// if (itemTypeChartRef1.echartArr.includes('时间曲线图')) {
|
|
// _thatN.$refs.typeChartRef1[i].$refs.lineChartRef.drawLine(_thatN.$refs.typeChartRef1[i].dataArr, _thatN.$refs.typeChartRef1[i].componentName.split('_')[0], '固定时刻')
|
|
// }
|
|
// if (itemTypeChartRef1.echartArr.includes('数值')) {
|
|
// _thatN.$refs.typeChartRef1[i].getDataArr(_thatN.$refs.typeChartRef1[i].dataArr)
|
|
// }
|
|
|
|
// if (itemTypeChartRef1.echartArr.includes('直方图') && itemTypeChartRef1.$refs.barChartRef.drawBar) {
|
|
// // 数据改变重新渲染柱状图
|
|
// itemTypeChartRef1.$refs.barChartRef.drawBar(itemTypeChartRef1.dataArr[0])
|
|
// }
|
|
// if (itemTypeChartRef1.echartArr.includes('饼状图') && itemTypeChartRef1.$refs.pieChartRef.drawPie) {
|
|
// // 数据改变重新渲染饼图
|
|
// itemTypeChartRef1.$refs.pieChartRef.drawPie(itemTypeChartRef1.dataArr[0])
|
|
// }
|
|
// if (itemTypeChartRef1.echartArr.includes('均值图') && itemTypeChartRef1.$refs.avgChartRef.drawBar) {
|
|
// itemTypeChartRef1.$refs.avgChartRef.drawBar(itemTypeChartRef1.dataArr[0])
|
|
// }
|
|
// if (itemTypeChartRef1.componentName.includes('OD') && itemTypeChartRef1.$refs.ODChartRef != undefined && itemTypeChartRef1.dataArr[0].ob_data.length != 0) {
|
|
// itemTypeChartRef1.$refs.ODChartRef.drawThermalChart(itemTypeChartRef1.dataArr[0].ob_data, itemTypeChartRef1.startEndData)
|
|
// }
|
|
|
|
// }
|
|
// }
|
|
|
|
// // });
|
|
// }
|
|
// }
|
|
// // });
|
|
// });
|
|
// }
|
|
},
|
|
immediate: true
|
|
},
|
|
//固定间隔
|
|
cycleStatisticsData: {
|
|
handler(newVal) {
|
|
// console.log('固定间隔', newVal);
|
|
if (newVal != undefined && newVal.length != 0 && this.sectionData) {
|
|
var that = this;
|
|
that.classify.forEach((ele, index) => {
|
|
newVal.forEach((item) => {
|
|
if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '固定间隔') {
|
|
if (ele.cycleStatisticsData.length == 10) {
|
|
ele.cycleStatisticsData.pop();
|
|
}
|
|
|
|
if (this.$route.query.type == '离线视频') {
|
|
var timeNew = item.time.split('.')[0];
|
|
var dateLength = timeNew.length;
|
|
var key = timeNew.substring(dateLength - 8, dateLength);
|
|
item.time = key;
|
|
} else {
|
|
item.time = item.time.split('.')[0];
|
|
}
|
|
if (item.type_data != null) {
|
|
that.typeCycleStatistics = item;
|
|
}
|
|
ele.cycleStatisticsData.unshift(item);
|
|
if (that.$refs.typeChartRef2 != undefined) {
|
|
for (let i = 0; i < that.$refs.typeChartRef2.length; i++) {
|
|
let itemTypeChartRef2 = that.$refs.typeChartRef2[i];
|
|
|
|
if (
|
|
itemTypeChartRef2.length != 0 &&
|
|
itemTypeChartRef2.dataArr != undefined &&
|
|
itemTypeChartRef2.dataArr.length != 0
|
|
) {
|
|
if (itemTypeChartRef2.echartArr.includes('时间曲线图')) {
|
|
that.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(
|
|
that.$refs.typeChartRef2[i].dataArr,
|
|
that.$refs.typeChartRef2[i].componentName.split('_')[0],
|
|
'固定间隔'
|
|
);
|
|
}
|
|
if (itemTypeChartRef2.echartArr.includes('数值')) {
|
|
that.$refs.typeChartRef2[i].getDataArr(that.$refs.typeChartRef2[i].dataArr);
|
|
}
|
|
if (itemTypeChartRef2.echartArr.includes('表格')) {
|
|
that.$refs.typeChartRef2[i].getDataArr(that.$refs.typeChartRef2[i].dataArr);
|
|
}
|
|
// //console.log(item,'组件数据');
|
|
if (
|
|
itemTypeChartRef2.echartArr.includes('直方图') &&
|
|
itemTypeChartRef2.$refs.barChartRef.drawBar
|
|
) {
|
|
// 数据改变重新渲染柱状图
|
|
// //console.log(item, '组件');
|
|
itemTypeChartRef2.$refs.barChartRef.drawBar(itemTypeChartRef2.dataArr[0]);
|
|
}
|
|
if (
|
|
itemTypeChartRef2.echartArr.includes('饼状图') &&
|
|
itemTypeChartRef2.$refs.pieChartRef.drawPie
|
|
) {
|
|
// 数据改变重新渲染饼图
|
|
itemTypeChartRef2.$refs.pieChartRef.drawPie(itemTypeChartRef2.dataArr[0]);
|
|
}
|
|
if (
|
|
itemTypeChartRef2.echartArr.includes('均值图') &&
|
|
itemTypeChartRef2.$refs.avgChartRef != undefined
|
|
) {
|
|
itemTypeChartRef2.$refs.avgChartRef.drawBar(itemTypeChartRef2.dataArr[0]);
|
|
}
|
|
if (
|
|
itemTypeChartRef2.componentName.includes('OD') &&
|
|
itemTypeChartRef2.$refs.ODChartRef != undefined &&
|
|
itemTypeChartRef2.dataArr[0].ob_data &&
|
|
itemTypeChartRef2.dataArr[0].ob_data.length != 0
|
|
) {
|
|
itemTypeChartRef2.$refs.ODChartRef.drawThermalChart(
|
|
itemTypeChartRef2.dataArr[0].ob_data,
|
|
itemTypeChartRef2.startEndData
|
|
);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
});
|
|
}
|
|
// else {
|
|
|
|
// var _that = this
|
|
// _that.classify.forEach(ele => {
|
|
// if (ele.timeMode == '固定间隔') {
|
|
// if (ele.cycleStatisticsData.length == 10) {
|
|
// ele.cycleStatisticsData.pop();
|
|
// }
|
|
// // item.time = item.time.split('.')[0];
|
|
// // if (item.type_data != null) {
|
|
// // _that.typeCycleStatistics = item;
|
|
// // }
|
|
// // ele.cycleStatisticsData.unshift(item);
|
|
// if (_that.$refs.typeChartRef2 != undefined) {
|
|
// for (let i = 0; i < _that.$refs.typeChartRef2.length; i++) {
|
|
// let itemTypeChartRef2 = _that.$refs.typeChartRef2[i];
|
|
// // //console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据');
|
|
// if (itemTypeChartRef2.length != 0 && itemTypeChartRef2.dataArr != undefined && itemTypeChartRef2.dataArr.length != 0) {
|
|
// // this.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(this.$refs.typeChartRef2[i].dataArr, _this.$refs.typeChartRe2f[i].componentName.split('_')[0])
|
|
// if (itemTypeChartRef2.echartArr.includes('时间曲线图')) {
|
|
// _that.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(_that.$refs.typeChartRef2[i].dataArr, _that.$refs.typeChartRef2[i].componentName.split('_')[0], '固定间隔')
|
|
// }
|
|
// if (itemTypeChartRef2.echartArr.includes('数值')) {
|
|
// _that.$refs.typeChartRef2[i].getDataArr(_that.$refs.typeChartRef2[i].dataArr)
|
|
// }
|
|
// // //console.log(item,'组件数据');
|
|
// if (itemTypeChartRef2.echartArr.includes('直方图') && itemTypeChartRef2.$refs.barChartRef.drawBar) {
|
|
// // 数据改变重新渲染柱状图
|
|
// // //console.log(item, '组件');
|
|
// itemTypeChartRef2.$refs.barChartRef.drawBar(itemTypeChartRef2.dataArr[0])
|
|
// }
|
|
// if (itemTypeChartRef2.echartArr.includes('饼状图') && itemTypeChartRef2.$refs.pieChartRef.drawPie) {
|
|
// // 数据改变重新渲染饼图
|
|
// itemTypeChartRef2.$refs.pieChartRef.drawPie(itemTypeChartRef2.dataArr[0])
|
|
// }
|
|
|
|
// // if (item.echartArr.includes('均值图') && item.$refs.avgChartRef != undefined && item.dataArr.length != 0) {
|
|
// // item.$refs.avgChartRef.drawBar(item.dataArr[0])
|
|
// // }
|
|
// if (itemTypeChartRef2.echartArr.includes('均值图') && itemTypeChartRef2.$refs.avgChartRef != undefined) {
|
|
// itemTypeChartRef2.$refs.avgChartRef.drawBar(itemTypeChartRef2.dataArr[0])
|
|
// }
|
|
// }
|
|
|
|
// }
|
|
|
|
// }
|
|
// }
|
|
|
|
// });
|
|
// }
|
|
},
|
|
immediate: true
|
|
},
|
|
//周期统计实时累计数据主题
|
|
cycleAccumulateData: {
|
|
handler(newVal) {
|
|
// console.log('周期统计实时累计数据主题', newVal);
|
|
if (newVal != undefined && newVal.length != 0 && this.sectionData) {
|
|
var that = this;
|
|
that.classify.forEach((ele, index) => {
|
|
newVal.forEach((item) => {
|
|
if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '固定间隔') {
|
|
// if (ele.cycleStatisticsData.length == 10) {
|
|
// ele.cycleStatisticsData.pop();
|
|
// }
|
|
|
|
if (this.$route.query.type == '离线视频') {
|
|
var timeNew = item.time.split('.')[0];
|
|
var dateLength = timeNew.length;
|
|
var key = timeNew.substring(dateLength - 8, dateLength);
|
|
item.time = key;
|
|
} else {
|
|
item.time = item.time.split('.')[0];
|
|
}
|
|
if (item.type_data != null) {
|
|
that.typeCycleStatistics = item;
|
|
}
|
|
// ele.cycleStatisticsData.unshift(item);
|
|
if (that.$refs.typeChartRef2 != undefined) {
|
|
for (let i = 0; i < that.$refs.typeChartRef2.length; i++) {
|
|
let itemTypeChartRef2 = that.$refs.typeChartRef2[i];
|
|
|
|
if (
|
|
itemTypeChartRef2.length != 0 &&
|
|
itemTypeChartRef2.dataArr != undefined &&
|
|
itemTypeChartRef2.dataArr.length != 0
|
|
) {
|
|
//console.log('itemTypeChartRef2.echartArr',itemTypeChartRef2.echartArr)
|
|
if (
|
|
itemTypeChartRef2.echartArr.includes('数值') &&
|
|
itemTypeChartRef2.itemData.analogAreaComponentId == item.component_id
|
|
) {
|
|
//只需要修改数值组件,逻辑存在问题
|
|
itemTypeChartRef2.getcycleAccumulateDataArr([item]);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
});
|
|
}
|
|
},
|
|
immediate: true
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.titleGnag {
|
|
width: 3px;
|
|
height: 18px;
|
|
display: inline-block;
|
|
background-color: #3297ff;
|
|
position: absolute;
|
|
top: 14px;
|
|
}
|
|
|
|
.el-collapse-item__header {
|
|
font-size: 15px;
|
|
margin-left: 10px;
|
|
}
|
|
</style>
|
|
<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>
|