2024-02-28 20:35:20 +08:00
|
|
|
|
<template>
|
|
|
|
|
|
<div v-loading="loading">
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<div id="boxi" :style="`height:${vh};overflow: hidden;`">
|
|
|
|
|
|
<div class="bx" id="wave"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<el-tabs type="border-card">
|
|
|
|
|
|
<el-tab-pane label="暂态波形上送" :style="'height:' + vhh">
|
2024-12-11 16:14:08 +08:00
|
|
|
|
<el-table stripe :data="Data" :height="height" border style="width: 100%"
|
|
|
|
|
|
header-cell-class-name="table_header">
|
2024-02-28 20:35:20 +08:00
|
|
|
|
<el-table-column align="center" prop="number" label="事件段"></el-table-column>
|
|
|
|
|
|
<el-table-column align="center" prop="number" label="波形起始点相位(°)">
|
|
|
|
|
|
<el-table-column align="center" prop="number" label="A相"></el-table-column>
|
|
|
|
|
|
<el-table-column align="center" prop="number" label="B相"></el-table-column>
|
|
|
|
|
|
<el-table-column align="center" prop="number" label="C相"></el-table-column>
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column align="center" prop="number" label="跳变段电压变化率(V/ms)">
|
|
|
|
|
|
<el-table-column align="center" prop="number" label="A相"></el-table-column>
|
|
|
|
|
|
<el-table-column align="center" prop="number" label="B相"></el-table-column>
|
|
|
|
|
|
<el-table-column align="center" prop="number" label="C相"></el-table-column>
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column align="center" prop="number" label="相位跳变(°)">
|
|
|
|
|
|
<el-table-column align="center" prop="number" label="A相"></el-table-column>
|
|
|
|
|
|
<el-table-column align="center" prop="number" label="B相"></el-table-column>
|
|
|
|
|
|
<el-table-column align="center" prop="number" label="C相"></el-table-column>
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column align="center" prop="number" label="总分段数目"></el-table-column>
|
2024-12-11 16:14:08 +08:00
|
|
|
|
<el-table-column align="center" prop="number" label="三相电压不平衡度(%)" width="180"></el-table-column>
|
2024-02-28 20:35:20 +08:00
|
|
|
|
<el-table-column align="center" prop="number" label="暂降类型"></el-table-column>
|
|
|
|
|
|
<el-table-column align="center" prop="number" label="暂降原因"></el-table-column>
|
|
|
|
|
|
</el-table>
|
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
|
</el-tabs>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
import { downloadWaveFile, getMonitorEventAnalyseWave } from '@/api/event-boot/transient'
|
|
|
|
|
|
import { mainHeight } from '@/utils/layout'
|
|
|
|
|
|
import * as echarts from 'echarts'
|
|
|
|
|
|
import url from '@/assets/img/point.png'
|
|
|
|
|
|
import $ from 'jquery'
|
|
|
|
|
|
export default {
|
|
|
|
|
|
props: {
|
|
|
|
|
|
flag: {
|
|
|
|
|
|
type: Boolean,
|
|
|
|
|
|
default: false
|
|
|
|
|
|
},
|
|
|
|
|
|
DColor: {
|
|
|
|
|
|
type: Boolean,
|
|
|
|
|
|
default: false
|
|
|
|
|
|
},
|
|
|
|
|
|
boxoList: {
|
|
|
|
|
|
type: [Object, Array]
|
|
|
|
|
|
},
|
|
|
|
|
|
GJList: {
|
|
|
|
|
|
type: [Object, Array]
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
data() {
|
|
|
|
|
|
return {
|
|
|
|
|
|
loading: true,
|
|
|
|
|
|
|
|
|
|
|
|
valA: 0,
|
|
|
|
|
|
isOpen: false,
|
|
|
|
|
|
time: '',
|
|
|
|
|
|
type: '',
|
|
|
|
|
|
severity: '',
|
|
|
|
|
|
iphasic: '',
|
|
|
|
|
|
eventValue: '',
|
|
|
|
|
|
persistTime: '',
|
|
|
|
|
|
lineName: '',
|
|
|
|
|
|
subName: '',
|
|
|
|
|
|
waveDatas: [],
|
|
|
|
|
|
|
|
|
|
|
|
Data: [],
|
|
|
|
|
|
height: null,
|
|
|
|
|
|
vhh: null,
|
|
|
|
|
|
ptpass: '',
|
|
|
|
|
|
waveHeight: undefined,
|
|
|
|
|
|
$wave: undefined,
|
|
|
|
|
|
color: '#006565',
|
|
|
|
|
|
charts: {},
|
|
|
|
|
|
arrpoints: [],
|
|
|
|
|
|
titles: '',
|
|
|
|
|
|
vh: null,
|
|
|
|
|
|
vw: null,
|
|
|
|
|
|
zoom: ''
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
2024-12-11 16:14:08 +08:00
|
|
|
|
created() { },
|
2024-02-28 20:35:20 +08:00
|
|
|
|
watch: {
|
|
|
|
|
|
value: function (a, b) {
|
|
|
|
|
|
if (a == 2) {
|
|
|
|
|
|
// $("#wave1").remove();
|
|
|
|
|
|
this.initWaves()
|
|
|
|
|
|
} else {
|
|
|
|
|
|
$('#wave1').remove()
|
|
|
|
|
|
this.initWaves()
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
mounted() {
|
|
|
|
|
|
this.setHeight()
|
|
|
|
|
|
window.addEventListener('resize', this.setHeight)
|
|
|
|
|
|
this.$wave = $('#wave').eq(0)
|
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
|
this.query()
|
|
|
|
|
|
})
|
|
|
|
|
|
},
|
|
|
|
|
|
beforeDestroy() {
|
|
|
|
|
|
window.removeEventListener('resize', this.setHeight)
|
|
|
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
setHeight() {
|
|
|
|
|
|
this.zoom = 1 / document.body.style.zoom
|
|
|
|
|
|
if (this.flag) {
|
|
|
|
|
|
// console.log(123);
|
|
|
|
|
|
this.vh = mainHeight(250).height
|
|
|
|
|
|
} else {
|
|
|
|
|
|
// console.log(3333);
|
|
|
|
|
|
this.vh = mainHeight(270).height
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
query() {
|
|
|
|
|
|
this.loading = true
|
|
|
|
|
|
this.initWave()
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
//开始画图
|
|
|
|
|
|
initWave() {
|
|
|
|
|
|
//清除之前增加的div
|
|
|
|
|
|
// $("#wave ~ .bx1").remove();
|
|
|
|
|
|
$('div.bx1').remove()
|
|
|
|
|
|
//设置暂降触发点的位置 一次值与二次值Y轴不同（不是计算出来的）
|
|
|
|
|
|
// var height = $(window).height() - 90;
|
|
|
|
|
|
var picHeight
|
|
|
|
|
|
var show = true
|
|
|
|
|
|
|
|
|
|
|
|
//var v = $("#interval").val();
|
|
|
|
|
|
var isvisible = false
|
|
|
|
|
|
|
|
|
|
|
|
picHeight = this.vh
|
|
|
|
|
|
// this.$wave.css('height', picHeight)
|
|
|
|
|
|
// this.$wave.css('width', '100%')
|
|
|
|
|
|
$('#wave').css('height', picHeight)
|
|
|
|
|
|
$('#wave').css('width', this.vw)
|
|
|
|
|
|
|
|
|
|
|
|
var adata = []
|
|
|
|
|
|
var bdata = []
|
|
|
|
|
|
var cdata = []
|
|
|
|
|
|
var max = 0
|
|
|
|
|
|
var min = 0
|
|
|
|
|
|
//绘制横向第一个波形图
|
|
|
|
|
|
this.GJList.smp_x.forEach((item, ind) => {
|
|
|
|
|
|
if (this.GJList.smp_a[ind] > max) {
|
|
|
|
|
|
max = this.GJList.smp_a[ind]
|
|
|
|
|
|
} else if (this.GJList.smp_a[ind] < min) {
|
|
|
|
|
|
min = this.GJList.smp_a[ind]
|
|
|
|
|
|
}
|
|
|
|
|
|
if (this.GJList.smp_b[ind] > max) {
|
|
|
|
|
|
max = this.GJList.smp_b[ind]
|
|
|
|
|
|
} else if (this.GJList.smp_b[ind] < min) {
|
|
|
|
|
|
min = this.GJList.smp_b[ind]
|
|
|
|
|
|
}
|
|
|
|
|
|
if (this.GJList.smp_c[ind] > max) {
|
|
|
|
|
|
max = this.GJList.smp_c[ind]
|
|
|
|
|
|
} else if (this.GJList.smp_c[ind] < min) {
|
|
|
|
|
|
min = this.GJList.smp_c[ind]
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
adata.push([item, this.GJList.smp_a[ind]])
|
|
|
|
|
|
bdata.push([item, this.GJList.smp_b[ind]])
|
|
|
|
|
|
cdata.push([item, this.GJList.smp_c[ind]])
|
|
|
|
|
|
})
|
|
|
|
|
|
//绘制瞬时波形图
|
|
|
|
|
|
// const echarts = require('echarts')
|
|
|
|
|
|
let wave = document.getElementById('wave')
|
|
|
|
|
|
let _this = this
|
|
|
|
|
|
var myChartes = echarts.init(wave)
|
|
|
|
|
|
let echartsColor = {
|
|
|
|
|
|
WordColor: '#000',
|
|
|
|
|
|
thread: '#000000',
|
|
|
|
|
|
FigureColor: [
|
|
|
|
|
|
'#07CCCA ',
|
|
|
|
|
|
'#00BFF5',
|
|
|
|
|
|
'#FFBF00',
|
|
|
|
|
|
'#77DA63',
|
|
|
|
|
|
'#D5FF6B',
|
|
|
|
|
|
'#Ff6600',
|
|
|
|
|
|
'#FF9100',
|
|
|
|
|
|
'#5B6E96',
|
|
|
|
|
|
'#66FFCC',
|
|
|
|
|
|
'#B3B3B3',
|
|
|
|
|
|
'#FF00FF',
|
|
|
|
|
|
'#CC00FF',
|
|
|
|
|
|
'#FF9999'
|
|
|
|
|
|
]
|
|
|
|
|
|
}
|
|
|
|
|
|
var option = {
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
top: '10px',
|
|
|
|
|
|
trigger: 'axis',
|
|
|
|
|
|
borderColor: 'grey',
|
|
|
|
|
|
backgroundColor: '#fff',
|
|
|
|
|
|
style: {
|
|
|
|
|
|
color: '#000',
|
|
|
|
|
|
fontSize: '15px',
|
|
|
|
|
|
padding: 10
|
|
|
|
|
|
},
|
|
|
|
|
|
formatter: function (params) {
|
|
|
|
|
|
// console.log(params)
|
|
|
|
|
|
var tips = ''
|
|
|
|
|
|
tips += '时刻:' + params[0].data[0] + '</br/>'
|
|
|
|
|
|
|
|
|
|
|
|
for (var i = 0; i < params.length; i++) {
|
|
|
|
|
|
if (params[i].seriesName != '暂降触发点') {
|
|
|
|
|
|
tips += params[i].seriesName + ':' + params[i].value[1] + '<br/>'
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
return tips
|
|
|
|
|
|
},
|
|
|
|
|
|
// axisPointer: {
|
|
|
|
|
|
// type: "cross",
|
|
|
|
|
|
// label: {
|
|
|
|
|
|
// color: "#fff",
|
|
|
|
|
|
// fontSize: 16,
|
|
|
|
|
|
// },
|
|
|
|
|
|
// },
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: '#fff',
|
|
|
|
|
|
fontStyle: 'normal',
|
|
|
|
|
|
opacity: 0.35,
|
|
|
|
|
|
fontSize: 14
|
|
|
|
|
|
},
|
2024-12-11 16:14:08 +08:00
|
|
|
|
backgroundColor: 'rgba(0,0,0,0.55)',
|
2024-02-28 20:35:20 +08:00
|
|
|
|
borderWidth: 0
|
|
|
|
|
|
},
|
2024-12-11 16:14:08 +08:00
|
|
|
|
|
2024-02-28 20:35:20 +08:00
|
|
|
|
title: {
|
|
|
|
|
|
left: 'center',
|
|
|
|
|
|
text: '发生时刻：' + this.boxoList.startTime + ' PT变化:' + this.boxoList.measurementPointName,
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
fontSize: 16,
|
|
|
|
|
|
color: _this.DColor ? '#fff' : echartsColor.WordColor
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
legend: {
|
|
|
|
|
|
left: '5%',
|
|
|
|
|
|
top: '20',
|
|
|
|
|
|
verticalAlign: 'top',
|
|
|
|
|
|
enabled: true,
|
|
|
|
|
|
itemDistance: 5,
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: _this.DColor ? '#fff' : echartsColor.WordColor,
|
|
|
|
|
|
rich: {
|
|
|
|
|
|
a: {
|
|
|
|
|
|
verticalAlign: 'middle'
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
padding: [2, 0, 0, 0] //[上、右、下、左]
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
toolbox: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
feature: {
|
|
|
|
|
|
//restore: {},
|
|
|
|
|
|
saveAsImage: {
|
|
|
|
|
|
iconStyle: {
|
|
|
|
|
|
borderColor: _this.DColor ? '#fff' : echartsColor.WordColor
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
xAxis: {
|
|
|
|
|
|
type: 'value',
|
|
|
|
|
|
name: '时刻',
|
|
|
|
|
|
boundaryGap: false,
|
|
|
|
|
|
min: this.GJList.smp_x[0],
|
|
|
|
|
|
max: this.GJList.smp_x[this.GJList.smp_x.length - 1] + 1,
|
|
|
|
|
|
title: {
|
|
|
|
|
|
text: 'ms',
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
|
color: _this.DColor ? '#fff' : echartsColor.WordColor
|
|
|
|
|
|
},
|
|
|
|
|
|
enabled: true,
|
|
|
|
|
|
align: 'high'
|
|
|
|
|
|
},
|
|
|
|
|
|
splitLine: {
|
|
|
|
|
|
show: false
|
|
|
|
|
|
},
|
|
|
|
|
|
axisTick: {
|
|
|
|
|
|
alignWithLabel: true
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: _this.DColor ? '#fff' : echartsColor.thread
|
|
|
|
|
|
},
|
|
|
|
|
|
onZero: false //-----------重点
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
color: _this.DColor ? '#fff' : echartsColor.WordColor,
|
|
|
|
|
|
formatter: function (value, index) {
|
|
|
|
|
|
if (_this.valA != (value - 0).toFixed(0)) {
|
|
|
|
|
|
_this.valA = (value - 0).toFixed(0)
|
|
|
|
|
|
return (value - 0).toFixed(0)
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
//rotate:39
|
|
|
|
|
|
}
|
|
|
|
|
|
// data: this.syncExtremes,
|
|
|
|
|
|
},
|
|
|
|
|
|
yAxis: {
|
|
|
|
|
|
type: 'value',
|
|
|
|
|
|
name: 'kV',
|
|
|
|
|
|
title: {
|
|
|
|
|
|
align: 'high',
|
|
|
|
|
|
offset: 0,
|
|
|
|
|
|
text: 'kV',
|
|
|
|
|
|
rotation: 0,
|
|
|
|
|
|
y: -10
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
boundaryGap: [0, '100%'],
|
|
|
|
|
|
showLastLabel: true,
|
|
|
|
|
|
max: (max + 10).toFixed(2),
|
|
|
|
|
|
min: (min - 10).toFixed(2),
|
|
|
|
|
|
opposite: false,
|
|
|
|
|
|
nameTextStyle: {
|
|
|
|
|
|
color: _this.DColor ? '#fff' : echartsColor.WordColor
|
|
|
|
|
|
},
|
|
|
|
|
|
//minInterval: 1,
|
|
|
|
|
|
type: 'value',
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: _this.DColor ? '#fff' : echartsColor.thread
|
|
|
|
|
|
},
|
|
|
|
|
|
onZero: false //-----------重点
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
color: _this.DColor ? '#fff' : echartsColor.WordColor,
|
|
|
|
|
|
formatter: function (value, index) {
|
|
|
|
|
|
return (value - 0).toFixed(2)
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
splitLine: {
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
// 使用深浅的间隔色
|
|
|
|
|
|
color: [_this.DColor ? '#fff' : echartsColor.thread],
|
|
|
|
|
|
type: 'dashed',
|
|
|
|
|
|
opacity: 0.5
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
grid: {
|
|
|
|
|
|
left: '1%',
|
|
|
|
|
|
right: '40px',
|
|
|
|
|
|
bottom: '40px',
|
|
|
|
|
|
top: '55px',
|
|
|
|
|
|
containLabel: true
|
|
|
|
|
|
},
|
|
|
|
|
|
dataZoom: [
|
|
|
|
|
|
{
|
|
|
|
|
|
type: 'inside',
|
|
|
|
|
|
height: 13,
|
|
|
|
|
|
start: 0,
|
|
|
|
|
|
bottom: '20px',
|
|
|
|
|
|
end: 100
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
start: 0,
|
|
|
|
|
|
height: 13,
|
|
|
|
|
|
bottom: '20px',
|
|
|
|
|
|
end: 100
|
|
|
|
|
|
}
|
|
|
|
|
|
],
|
|
|
|
|
|
series: [
|
|
|
|
|
|
{
|
|
|
|
|
|
name: 'A相',
|
|
|
|
|
|
type: 'line',
|
|
|
|
|
|
smooth: true,
|
|
|
|
|
|
symbol: 'none',
|
|
|
|
|
|
sampling: 'lttb',
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
color: '#FFCC00'
|
|
|
|
|
|
},
|
|
|
|
|
|
data: adata
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: 'B相',
|
|
|
|
|
|
type: 'line',
|
|
|
|
|
|
smooth: true,
|
|
|
|
|
|
symbol: 'none',
|
|
|
|
|
|
sampling: 'lttb',
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
color: '#009900'
|
|
|
|
|
|
},
|
|
|
|
|
|
data: bdata
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: 'C相',
|
|
|
|
|
|
type: 'line',
|
|
|
|
|
|
smooth: true,
|
|
|
|
|
|
symbol: 'none',
|
|
|
|
|
|
sampling: 'lttb',
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
color: '#CC0000'
|
|
|
|
|
|
},
|
|
|
|
|
|
data: cdata
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '暂降触发点',
|
|
|
|
|
|
type: 'scatter',
|
|
|
|
|
|
symbol: 'image://' + url,
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
width: 16,
|
|
|
|
|
|
height: 16
|
|
|
|
|
|
},
|
|
|
|
|
|
data: [[0, min]]
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
myChartes.setOption(option)
|
|
|
|
|
|
// window.echartsArr.push(myChartes)
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
|
myChartes.resize()
|
|
|
|
|
|
this.loading = false
|
|
|
|
|
|
}, 400)
|
|
|
|
|
|
|
|
|
|
|
|
//第一个波形图数据绘制完毕后，绘制后续的波形图
|
|
|
|
|
|
|
|
|
|
|
|
// let waveDatasTemp = waveDatas.slice(1);
|
|
|
|
|
|
// waveDatasTemp.reverse();
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
