442 lines
16 KiB
Vue
442 lines
16 KiB
Vue
<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">
|
||
<el-table stripe :data="Data" :height="height" border style="width: 100%"
|
||
header-cell-class-name="table_header">
|
||
<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>
|
||
<el-table-column align="center" prop="number" label="三相电压不平衡度(%)" width="180"></el-table-column>
|
||
<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: ''
|
||
}
|
||
},
|
||
created() { },
|
||
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
|
||
},
|
||
backgroundColor: 'rgba(0,0,0,0.55)',
|
||
borderWidth: 0
|
||
},
|
||
|
||
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: '#DAA520'
|
||
},
|
||
data: adata
|
||
},
|
||
{
|
||
name: 'B相',
|
||
type: 'line',
|
||
smooth: true,
|
||
symbol: 'none',
|
||
sampling: 'lttb',
|
||
itemStyle: {
|
||
color: '#2E8B57'
|
||
},
|
||
data: bdata
|
||
},
|
||
{
|
||
name: 'C相',
|
||
type: 'line',
|
||
smooth: true,
|
||
symbol: 'none',
|
||
sampling: 'lttb',
|
||
itemStyle: {
|
||
color: '#A52a2a'
|
||
},
|
||
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>
|