代码提交
This commit is contained in:
parent
62ab49775f
commit
e7b7125476
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -69,23 +69,22 @@ export default {
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
// console.log( this.componentName + '-' + this.chartName + '-' + '曲线图','40');
|
// console.log( this.componentName + '-' + this.chartName + '-' + '曲线图','40');
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
drawLine() {
|
drawLine(newVal, title) {
|
||||||
let myChart = this.$echarts.getInstanceByDom(this.$refs.lineChart);
|
let myChart = this.$echarts.getInstanceByDom(this.$refs.lineChart);
|
||||||
if (myChart == null) {
|
if (myChart == null) {
|
||||||
myChart = this.$echarts.init(this.$refs.lineChart);
|
myChart = this.$echarts.init(this.$refs.lineChart);
|
||||||
}
|
}
|
||||||
|
// var series = []
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// myChart.showLoading() //开启loading
|
// myChart.showLoading() //开启loading
|
||||||
let option = {
|
let option = {
|
||||||
// title: {
|
|
||||||
// show: true,
|
|
||||||
// text: this.componentName + '-' + this.chartName + '-' + '曲线图',
|
|
||||||
// textStyle: {
|
|
||||||
// lineHeight: '30'
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
legend: {},
|
legend: {},
|
||||||
grid: {
|
grid: {
|
||||||
left: '2%',
|
left: '2%',
|
||||||
|
|
@ -139,22 +138,135 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
series: this.series
|
series: this.getMessage(newVal, title)
|
||||||
};
|
};
|
||||||
myChart.setOption(option) //再设置配置
|
myChart.setOption(option)
|
||||||
// myChart.hideLoading()
|
|
||||||
// myChart.setOption(option);
|
|
||||||
// window.onresize = () => { // 根据窗口大小变化图表自适应
|
|
||||||
// myChart.resize();
|
|
||||||
// };
|
|
||||||
window.addEventListener('resize', function () {
|
window.addEventListener('resize', function () {
|
||||||
myChart.resize();
|
myChart.resize();
|
||||||
});
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
getMessage(newVal, title) {
|
||||||
|
this.xData = newVal.map(val => {
|
||||||
|
return val.time;
|
||||||
|
});
|
||||||
|
|
||||||
|
var series = [
|
||||||
|
{
|
||||||
|
name: '',
|
||||||
|
type: 'line',
|
||||||
|
symbolSize: 6,
|
||||||
|
smooth: true,
|
||||||
|
itemStyle: {
|
||||||
|
color: '#fb864b',
|
||||||
|
borderColor: '#fb864b'
|
||||||
|
// borderWidth: 2
|
||||||
|
},
|
||||||
|
data: []
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
if (title === '类型') {
|
||||||
|
this.tooltip = {
|
||||||
|
formatter: '{a} {b}:{c}个',
|
||||||
|
show: true,
|
||||||
|
confine: true
|
||||||
|
};
|
||||||
|
series[0].name = '总量';
|
||||||
|
// 映射出类型数组
|
||||||
|
let arr = newVal.map(function (ele) {
|
||||||
|
if (ele.type_data != null) {
|
||||||
|
return ele.type_data;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
var mapN = [];
|
||||||
|
for (var t = 0; t < arr.length; t++) {
|
||||||
|
for (var i = 0; i < arr[t].length; i++) {
|
||||||
|
mapN.push(arr[t][i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
var lineArr = []
|
||||||
|
if (newVal[0].type_data != undefined) {
|
||||||
|
newVal[0].type_data.forEach(ele => {
|
||||||
|
lineArr.push({
|
||||||
|
name: ele.name,
|
||||||
|
type: 'line',
|
||||||
|
data: [],
|
||||||
|
smooth: true
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
mapN.forEach(ele => {
|
||||||
|
if (ele.name == '机动车') {
|
||||||
|
lineArr[0].data.push(ele.quantity);
|
||||||
|
} else if (ele.name == '非机动车') {
|
||||||
|
lineArr[1].data.push(ele.quantity);
|
||||||
|
} else {
|
||||||
|
lineArr[2].data.push(ele.quantity);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
for (let j = 0; j < lineArr.length; j++) {
|
||||||
|
series.push(lineArr[j]);
|
||||||
|
}
|
||||||
|
// 总和数量
|
||||||
|
let mapNR1 = [];
|
||||||
|
newVal.map(function (ele) {
|
||||||
|
if (ele.type_data != null) {
|
||||||
|
var sum = ele.type_data.reduce(function (prev, cur) {
|
||||||
|
return cur.quantity + prev;
|
||||||
|
}, 0);
|
||||||
|
mapNR1.push(sum);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
series[0].data = mapNR1;
|
||||||
|
} else if (title === '速度') {
|
||||||
|
this.tooltip = {
|
||||||
|
formatter: '{a} {b}:{c}km/h',
|
||||||
|
show: true,
|
||||||
|
confine: true
|
||||||
|
};
|
||||||
|
// console.log("newVal",newVal)
|
||||||
|
series[0].data = newVal.map(val => {
|
||||||
|
return val.speed;
|
||||||
|
});
|
||||||
|
} else if (title === '流量') {
|
||||||
|
series[0].data = newVal.map(ele => {
|
||||||
|
return ele.in_flow + ele.out_flow;
|
||||||
|
});
|
||||||
|
} else if (title === '车头时距') {
|
||||||
|
this.tooltip = {
|
||||||
|
formatter: '{a} {b}:{c}/s',
|
||||||
|
show: true,
|
||||||
|
confine: true
|
||||||
|
};
|
||||||
|
series[0].data = newVal.map(val => {
|
||||||
|
return val.headway;
|
||||||
|
});
|
||||||
|
} else if (title === '排队数') {
|
||||||
|
series[0].data = newVal.map(val => {
|
||||||
|
return val.n_queue;
|
||||||
|
});
|
||||||
|
} else if (title === '检测数') {
|
||||||
|
series[0].data = newVal.map(val => {
|
||||||
|
return val.n_stay;
|
||||||
|
});
|
||||||
|
} else if (title === '延误') {
|
||||||
|
series[0].data = newVal.map(val => {
|
||||||
|
return val.ave_delay;
|
||||||
|
});
|
||||||
|
} else if (title === '拥堵') {
|
||||||
|
series[0].data = newVal.map(val => { });
|
||||||
|
}
|
||||||
|
console.log(series,'折线图数据');
|
||||||
|
return series
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.drawLine();
|
// this.drawLine();
|
||||||
console.log(this.$parent.dataArr, '父组件的dataArr');
|
// this.getMessage(this.list)
|
||||||
|
// console.log(this.$parent.dataArr, '父组件的dataArr');
|
||||||
|
// this.$set(this.$parent.dataArr)
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
listTotal() {
|
listTotal() {
|
||||||
|
|
@ -162,154 +274,11 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
list: {
|
listTotal: {
|
||||||
handler(newVal) {
|
// handler(newVal){
|
||||||
if (newVal.length != 0) {
|
// console.log(this.chartName , newVal,'数据');
|
||||||
// x轴的数据
|
// },
|
||||||
this.xData = newVal.map(val => {
|
|
||||||
return val.time;
|
|
||||||
});
|
|
||||||
|
|
||||||
this.series = [
|
|
||||||
{
|
|
||||||
name: '',
|
|
||||||
type: 'line',
|
|
||||||
symbolSize: 6,
|
|
||||||
smooth: true,
|
|
||||||
itemStyle: {
|
|
||||||
color: '#fb864b',
|
|
||||||
borderColor: '#fb864b'
|
|
||||||
// borderWidth: 2
|
|
||||||
},
|
|
||||||
data: []
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
// 区域组件触发y轴展示
|
|
||||||
if (this.title == '类型') {
|
|
||||||
this.tooltip = {
|
|
||||||
formatter: '{a} {b}:{c}个',
|
|
||||||
show: true,
|
|
||||||
confine: true
|
|
||||||
};
|
|
||||||
this.series[0].name = '总量';
|
|
||||||
console.log('折线图', newVal);
|
|
||||||
// 映射出类型数组
|
|
||||||
let arr = newVal.map(function (ele) {
|
|
||||||
if (ele.type_data != null) {
|
|
||||||
return ele.type_data;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
var mapN = [];
|
|
||||||
for (var t = 0; t < arr.length; t++) {
|
|
||||||
for (var i = 0; i < arr[t].length; i++) {
|
|
||||||
mapN.push(arr[t][i]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
var lineArr = [{
|
|
||||||
name: '机动车',
|
|
||||||
type: 'line',
|
|
||||||
data: [],
|
|
||||||
smooth: true
|
|
||||||
}, {
|
|
||||||
name: '非机动车',
|
|
||||||
type: 'line',
|
|
||||||
data: [],
|
|
||||||
smooth: true
|
|
||||||
}, {
|
|
||||||
name: '行人',
|
|
||||||
type: 'line',
|
|
||||||
data: [],
|
|
||||||
smooth: true
|
|
||||||
}];
|
|
||||||
// if (newVal[0].type_data != undefined) {
|
|
||||||
// newVal[0].type_data.forEach(ele => {
|
|
||||||
// lineArr.push({
|
|
||||||
// name: ele.name,
|
|
||||||
// type: 'line',
|
|
||||||
// data: [],
|
|
||||||
// smooth: true
|
|
||||||
// });
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
mapN.forEach(ele => {
|
|
||||||
if (ele.name == '机动车') {
|
|
||||||
lineArr[0].data.push(ele.quantity);
|
|
||||||
} else if (ele.name == '非机动车') {
|
|
||||||
lineArr[1].data.push(ele.quantity);
|
|
||||||
} else {
|
|
||||||
lineArr[2].data.push(ele.quantity);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
for (let j = 0; j < lineArr.length; j++) {
|
|
||||||
this.series.push(lineArr[j]);
|
|
||||||
}
|
|
||||||
// 总和数量
|
|
||||||
let mapNR1 = [];
|
|
||||||
newVal.map(function (ele) {
|
|
||||||
if (ele.type_data != null) {
|
|
||||||
var sum = ele.type_data.reduce(function (prev, cur) {
|
|
||||||
return cur.quantity + prev;
|
|
||||||
}, 0);
|
|
||||||
mapNR1.push(sum);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
// console.log("mapNR1", mapNR1)
|
|
||||||
this.series[0].data = mapNR1;
|
|
||||||
} else if (this.title == '速度') {
|
|
||||||
console.log('速度的折线图');
|
|
||||||
this.tooltip = {
|
|
||||||
formatter: '{a} {b}:{c}km/h',
|
|
||||||
show: true,
|
|
||||||
confine: true
|
|
||||||
};
|
|
||||||
// console.log("newVal",newVal)
|
|
||||||
this.series[0].data = newVal.map(val => {
|
|
||||||
return val.speed;
|
|
||||||
});
|
|
||||||
} else if (this.title == '流量') {
|
|
||||||
this.tooltip = {
|
|
||||||
formatter: '{a} {b}:{c}辆',
|
|
||||||
show: true,
|
|
||||||
confine: true
|
|
||||||
};
|
|
||||||
this.series[0].data = newVal.map(ele => {
|
|
||||||
return ele.in_flow + ele.out_flow;
|
|
||||||
});
|
|
||||||
} else if (this.title == '车头时距') {
|
|
||||||
console.log('车头时距', newVal);
|
|
||||||
this.tooltip = {
|
|
||||||
formatter: '{a} {b}:{c}/s',
|
|
||||||
show: true,
|
|
||||||
confine: true
|
|
||||||
};
|
|
||||||
this.series[0].data = newVal.map(val => {
|
|
||||||
return val.headway;
|
|
||||||
});
|
|
||||||
} else if (this.title == '排队数' && this.status == '触发') {
|
|
||||||
this.series[0].data = newVal.map(val => {
|
|
||||||
return val.n_queue;
|
|
||||||
});
|
|
||||||
} else if (this.title == '排队数' && this.status == '周期统计') {
|
|
||||||
this.series[0].data = newVal.map(val => {
|
|
||||||
return val.ave_queue;
|
|
||||||
});
|
|
||||||
} else if (this.title == '检测数') {
|
|
||||||
this.series[0].data = newVal.map(val => {
|
|
||||||
return val.n_stay;
|
|
||||||
});
|
|
||||||
} else if (this.title == '延误') {
|
|
||||||
this.series[0].data = newVal.map(val => {
|
|
||||||
return val.ave_delay;
|
|
||||||
});
|
|
||||||
} else if (this.title == '拥堵') {
|
|
||||||
this.series[0].data = newVal.map(val => { });
|
|
||||||
}
|
|
||||||
|
|
||||||
this.drawLine()
|
|
||||||
|
|
||||||
}
|
|
||||||
},
|
|
||||||
deep: true
|
deep: true
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div v-if="msg">
|
<div v-if="msg" class="regionBox">
|
||||||
<!-- 触发 -->
|
<!-- 触发 -->
|
||||||
<el-table :data="msg" style="width: 100%" v-if="type == '触发' ">
|
<el-table :data="msg" style="width: 100%" v-if="type == '触发' ">
|
||||||
<!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column> -->
|
<!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column> -->
|
||||||
|
|
@ -186,7 +186,13 @@ export default {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style scoped>
|
<style scoped lang="scss">
|
||||||
|
/deep/ .el-table{
|
||||||
|
height: 709px !important;
|
||||||
|
overflow-y: scroll;
|
||||||
|
|
||||||
|
}
|
||||||
|
.el-table::-webkit-scrollbar { width: 0 !important }
|
||||||
.tableContent {
|
.tableContent {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -27,6 +27,7 @@
|
||||||
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor'">机动车|非机动车</span>
|
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor'">机动车|非机动车</span>
|
||||||
<span v-if="scope.row.type == 'Motor Vehicle|Person'">机动车|行人</span>
|
<span v-if="scope.row.type == 'Motor Vehicle|Person'">机动车|行人</span>
|
||||||
<span v-if="scope.row.type == 'Person|Non_Motor'">行人|非机动车</span>
|
<span v-if="scope.row.type == 'Person|Non_Motor'">行人|非机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Person|Motor Vehicle'">行人|机动车</span>
|
||||||
<span v-if="scope.row.type == 'Person|Non_Motor|Motor Vehicle'">行人|非机动车|机动车</span>
|
<span v-if="scope.row.type == 'Person|Non_Motor|Motor Vehicle'">行人|非机动车|机动车</span>
|
||||||
<span v-if="scope.row.type == 'Person|Motor Vehicle|Non_Motor'">行人|非机动车|机动车</span>
|
<span v-if="scope.row.type == 'Person|Motor Vehicle|Non_Motor'">行人|非机动车|机动车</span>
|
||||||
<span v-if="scope.row.type == 'Non_Motor|Person|Motor Vehicle'">行人|非机动车|机动车</span>
|
<span v-if="scope.row.type == 'Non_Motor|Person|Motor Vehicle'">行人|非机动车|机动车</span>
|
||||||
|
|
@ -176,7 +177,13 @@ export default {
|
||||||
mounted() { }
|
mounted() { }
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style scoped>
|
<style scoped lang="scss">
|
||||||
|
/deep/ .el-table{
|
||||||
|
height: 709px !important;
|
||||||
|
overflow-y: scroll;
|
||||||
|
|
||||||
|
}
|
||||||
|
.el-table::-webkit-scrollbar { width: 0 !important }
|
||||||
.tableContent {
|
.tableContent {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
<template><!-- 触发类型 -->
|
<template><!-- 触发类型 -->
|
||||||
<div class="setion">
|
<div class="setion" v-if="dataArr">
|
||||||
<p class="chartTitle"><span class="titleIcon"></span> {{ componentName }} {{ triggerType }}</p>
|
<p class="chartTitle"><span class="titleIcon"></span> {{ componentName }} {{ triggerType }}</p>
|
||||||
<!-- 触发数据数值渲染 -->
|
<!-- 触发数据数值渲染 -->
|
||||||
<div class="typeContent" v-if="triggerType == '触发' || '周期时刻'">
|
<div class="typeContent" >
|
||||||
<div v-if="dataArr && dataArr.length != 0 && dataArr!=undefined">
|
<div v-if="dataArr && dataArr.length != 0 && dataArr!=undefined">
|
||||||
<div v-if="title == '类型'" style="display:flex">
|
<div v-if="title == '类型'" style="display:flex">
|
||||||
<el-card v-for="(n, i) in typeValue.type_data" :key="i"
|
<el-card v-for="(n, i) in dataArr[0].type_data" :key="i"
|
||||||
style="width: 150px; margin-bottom: 20px; text-align: center">
|
style="width: 150px; margin-bottom: 20px; text-align: center">
|
||||||
<div>
|
<div>
|
||||||
<span style="font-size: 15px;">{{ n.name }}</span><br />
|
<span style="font-size: 15px;">{{ n.name }}</span><br />
|
||||||
|
|
@ -13,7 +13,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div>
|
<div>
|
||||||
{{ typeValue.time ? typeValue.time : '' }}
|
{{ dataArr[0].time ? dataArr[0].time : '' }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
|
|
@ -24,7 +24,7 @@
|
||||||
<div v-if="title == '类型'">
|
<div v-if="title == '类型'">
|
||||||
<span style="font-size: 15px;">类型数量总和</span><br />
|
<span style="font-size: 15px;">类型数量总和</span><br />
|
||||||
<span style="font-size: 30px; font-weight: bold">
|
<span style="font-size: 30px; font-weight: bold">
|
||||||
{{ this.total }}
|
{{ getTotal() }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div style="font-size: 30px; font-weight: bold" v-if="title == '速度'">
|
<div style="font-size: 30px; font-weight: bold" v-if="title == '速度'">
|
||||||
|
|
@ -92,6 +92,7 @@
|
||||||
:status="triggerType"
|
:status="triggerType"
|
||||||
:title="title"
|
:title="title"
|
||||||
:typeValue="typeValue"
|
:typeValue="typeValue"
|
||||||
|
ref="lineChartRef"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="border" v-if="echartArr.includes('饼状图')">
|
<div class="border" v-if="echartArr.includes('饼状图')">
|
||||||
|
|
@ -146,32 +147,34 @@ export default {
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
console.log(this.title+'TYPECHARTdataArr', this.dataArr)
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 计算类型的数值
|
// 计算类型的数值
|
||||||
},
|
},
|
||||||
|
|
||||||
computed: {},
|
computed: {
|
||||||
|
// 获取类型的总数量
|
||||||
|
getTotal(){
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
mounted() { },
|
mounted() { },
|
||||||
watch: {
|
watch: {
|
||||||
// 监听触发数据
|
// 监听触发数据
|
||||||
dataArr: {
|
dataArr: {
|
||||||
handler(newVal) {
|
handler(newVal) {
|
||||||
console.log('dataArr', newVal);
|
|
||||||
},
|
},
|
||||||
|
|
||||||
immediate: true
|
immediate: true
|
||||||
},
|
},
|
||||||
typeValue: {
|
typeValue: {
|
||||||
handler(newVal) {
|
handler(newVal) {
|
||||||
this.total = 0;
|
|
||||||
if (this.title == '类型') {
|
|
||||||
newVal.type_data.forEach(ele => {
|
},
|
||||||
this.total += ele.quantity;
|
immediate:true
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
// cycleTimeData: {
|
// cycleTimeData: {
|
||||||
// handler(newVal) {
|
// handler(newVal) {
|
||||||
|
|
|
||||||
|
|
@ -25,11 +25,11 @@
|
||||||
:echartArr="o.presentationForm" :dataArr="o.trigger"
|
:echartArr="o.presentationForm" :dataArr="o.trigger"
|
||||||
:title="o.componentName.split('_')[0]" :chartName="o.combinationName" />
|
:title="o.componentName.split('_')[0]" :chartName="o.combinationName" />
|
||||||
<!--触发的组件 -->
|
<!--触发的组件 -->
|
||||||
<typeChart v-if="o.timeMode === '触发'" :pageType="o.graphicType"
|
<typeChart ref="typeChartRef" v-if="o.timeMode === '触发'"
|
||||||
:triggerType="o.timeMode" :componentName="o.componentName"
|
:pageType="o.graphicType" :triggerType="o.timeMode"
|
||||||
:dataArr="o.trigger" :echartArr="o.presentationForm"
|
:componentName="o.componentName" :dataArr="o.trigger"
|
||||||
:title="o.componentName.split('_')[0]" :chartName="o.combinationName"
|
:echartArr="o.presentationForm" :title="o.componentName.split('_')[0]"
|
||||||
:typeValue="typeTimeMode" />
|
:chartName="o.combinationName" :typeValue="typeTimeMode" />
|
||||||
<typeChart v-if="o.timeMode === '周期时刻'" :pageType="o.graphicType"
|
<typeChart v-if="o.timeMode === '周期时刻'" :pageType="o.graphicType"
|
||||||
:triggerType="o.timeMode" :componentName="o.componentName"
|
:triggerType="o.timeMode" :componentName="o.componentName"
|
||||||
:dataArr="o.cycleTimeData" :echartArr="o.presentationForm"
|
:dataArr="o.cycleTimeData" :echartArr="o.presentationForm"
|
||||||
|
|
@ -346,13 +346,14 @@ export default {
|
||||||
|
|
||||||
// },
|
// },
|
||||||
created() {
|
created() {
|
||||||
this.getNew()
|
// this.getNew()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getNew() {
|
getNew() {
|
||||||
// this.idVal = ;
|
// this.idVal = ;
|
||||||
getComponentSection({ VideoId: this.$route.query.id }).then(res => {
|
getComponentSection({ VideoId: this.$route.query.id }).then(res => {
|
||||||
if (res.data.code == 200) {
|
if (res.data.code == 200) {
|
||||||
|
console.log(res.data.data, '组件的数据');
|
||||||
this.componentList = res.data.data;
|
this.componentList = res.data.data;
|
||||||
this.siftData();
|
this.siftData();
|
||||||
}
|
}
|
||||||
|
|
@ -428,28 +429,39 @@ export default {
|
||||||
handler(newVal) {
|
handler(newVal) {
|
||||||
this.triggerList = newVal;
|
this.triggerList = newVal;
|
||||||
// 触发数据
|
// 触发数据
|
||||||
// console.log(newVal, 'triggerlistData');
|
console.log(newVal, 'triggerlistData');
|
||||||
|
var _this = this
|
||||||
|
if (newVal.length != 0 && _this.sectionData) {
|
||||||
|
_this.componentList.forEach(ele => {
|
||||||
|
|
||||||
this.componentList.forEach(ele => {
|
if (ele.trigger == undefined && ele.timeMode == '触发') {
|
||||||
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();
|
|
||||||
} else {
|
|
||||||
item.time = item.time.split('.')[0];
|
|
||||||
// 该时间的触发数据
|
|
||||||
if (item.type_data != null) {
|
|
||||||
// console.log(item,'461461');
|
|
||||||
this.typeTimeMode = item
|
|
||||||
}
|
|
||||||
ele.trigger.unshift(item);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
newVal.forEach((item, i) => {
|
||||||
|
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(() => {
|
||||||
|
if (_this.$refs.typeChartRef[i].$refs.lineChartRef.drawLine) {
|
||||||
|
_this.$refs.typeChartRef[i].$refs.lineChartRef.drawLine(ele.trigger, ele.componentName.split('_')[0])
|
||||||
|
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
});
|
});
|
||||||
});
|
|
||||||
|
|
||||||
|
}
|
||||||
},
|
},
|
||||||
immediate: true
|
immediate: true
|
||||||
},
|
},
|
||||||
|
|
@ -465,11 +477,10 @@ export default {
|
||||||
newVal.forEach(item => {
|
newVal.forEach(item => {
|
||||||
if (
|
if (
|
||||||
ele.analogAreaComponentId == item.component_id &&
|
ele.analogAreaComponentId == item.component_id &&
|
||||||
ele.timeMode == '周期时刻' &&
|
ele.timeMode == '周期时刻'
|
||||||
ele.analogAreaGraphId == item.graphical_id
|
|
||||||
) {
|
) {
|
||||||
if (ele.cycleTimeData.length == 10) {
|
if (ele.cycleTimeData.length == 10) {
|
||||||
ele.cycleTimeData.slice(ele.cycleTimeData.length - 1, 0);
|
ele.cycleTimeData.splice(newVal.length - 1, 1);
|
||||||
} else {
|
} else {
|
||||||
item.time = item.time.split('.')[0];
|
item.time = item.time.split('.')[0];
|
||||||
if (item.type_data != null) {
|
if (item.type_data != null) {
|
||||||
|
|
@ -485,12 +496,6 @@ export default {
|
||||||
},
|
},
|
||||||
immediate: true
|
immediate: true
|
||||||
},
|
},
|
||||||
// 周期统计数据
|
|
||||||
// cycleStatistics:{
|
|
||||||
// handler(newVal){
|
|
||||||
// console.log(newVal,'周期统计');
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
cycleStatistics: {
|
cycleStatistics: {
|
||||||
handler(newVal) {
|
handler(newVal) {
|
||||||
|
|
||||||
|
|
@ -502,7 +507,7 @@ export default {
|
||||||
newVal.forEach(item => {
|
newVal.forEach(item => {
|
||||||
if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '周期统计') {
|
if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '周期统计') {
|
||||||
if (ele.cycleStatistics.length == 10) {
|
if (ele.cycleStatistics.length == 10) {
|
||||||
ele.cycleStatistics.pop();
|
ele.cycleStatistics.splice(newVal.length - 1, 1);
|
||||||
} else {
|
} else {
|
||||||
item.time = item.time.split('.')[0];
|
item.time = item.time.split('.')[0];
|
||||||
if (item.type_data != null) {
|
if (item.type_data != null) {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue