2024-01-15 16:14:14 +08:00
|
|
|
|
<template>
|
|
|
|
|
|
<div v-loading="loading" class="boxbx" style="position: relative">
|
|
|
|
|
|
<div id="boxsj">
|
|
|
|
|
|
<div id="shushi" :style="`height:${vh};overflow: hidden;`">
|
|
|
|
|
|
<div class="bx" id="wave"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2024-10-16 08:49:31 +08:00
|
|
|
|
<el-button style="position: absolute; right: 10px; top: 0px; z-index: 20000" type="primary" link
|
|
|
|
|
|
icon="el-icon-Download" title="生成图片" @click="download">
|
2024-01-15 16:14:14 +08:00
|
|
|
|
下载
|
|
|
|
|
|
</el-button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<script lang="js">
|
|
|
|
|
|
import html2canvas from 'html2canvas'
|
|
|
|
|
|
import $ from 'jquery'
|
|
|
|
|
|
import * as echarts from 'echarts'
|
2024-10-15 15:31:36 +08:00
|
|
|
|
|
2024-01-15 16:14:14 +08:00
|
|
|
|
import { mainHeight } from '@/utils/layout'
|
|
|
|
|
|
import url from '@/assets/img/point.png'
|
|
|
|
|
|
export default {
|
|
|
|
|
|
props: {
|
|
|
|
|
|
value: {
|
|
|
|
|
|
type: Number,
|
|
|
|
|
|
default: 2
|
|
|
|
|
|
},
|
|
|
|
|
|
flag: {
|
|
|
|
|
|
type: [String, Number, Boolean],
|
|
|
|
|
|
default: 3
|
|
|
|
|
|
},
|
2024-12-19 10:16:08 +08:00
|
|
|
|
parentHeight: {
|
|
|
|
|
|
type: [String, Number, Boolean],
|
|
|
|
|
|
default: 0
|
|
|
|
|
|
},
|
2024-01-15 16:14:14 +08:00
|
|
|
|
DColor: {
|
|
|
|
|
|
type: Boolean,
|
|
|
|
|
|
default: false
|
|
|
|
|
|
},
|
|
|
|
|
|
boxoList: {
|
|
|
|
|
|
type: [Object, Array]
|
|
|
|
|
|
},
|
|
|
|
|
|
wp: {
|
|
|
|
|
|
type: [Object, Array]
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
data() {
|
|
|
|
|
|
return {
|
|
|
|
|
|
loading: true,
|
|
|
|
|
|
tabvalue: this.value,
|
|
|
|
|
|
// url: '@/assets/img/point.png',
|
|
|
|
|
|
valA: 0,
|
|
|
|
|
|
valB: 0,
|
|
|
|
|
|
isOpen: false,
|
|
|
|
|
|
time: '',
|
|
|
|
|
|
type: '',
|
|
|
|
|
|
severity: '',
|
|
|
|
|
|
iphasic: '',
|
|
|
|
|
|
eventValue: '',
|
|
|
|
|
|
persistTime: '',
|
|
|
|
|
|
lineName: '',
|
|
|
|
|
|
subName: '',
|
|
|
|
|
|
waveDatas: [],
|
|
|
|
|
|
ptpass: '',
|
|
|
|
|
|
waveHeight: undefined,
|
|
|
|
|
|
rmsHeight: undefined,
|
|
|
|
|
|
$wave: undefined,
|
|
|
|
|
|
$rms: undefined,
|
|
|
|
|
|
color: '#006565',
|
|
|
|
|
|
charts: {},
|
|
|
|
|
|
arrpoints: [],
|
|
|
|
|
|
titles: '',
|
|
|
|
|
|
vh: null,
|
|
|
|
|
|
vw: null,
|
|
|
|
|
|
zoom: ''
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
created() {
|
|
|
|
|
|
|
|
|
|
|
|
if (this.flag == 1) {
|
2024-10-16 20:31:54 +08:00
|
|
|
|
this.vh = mainHeight(200).height
|
2024-10-16 08:49:31 +08:00
|
|
|
|
} else {
|
2024-10-16 20:31:54 +08:00
|
|
|
|
this.vh = mainHeight(200, 2).height
|
2024-01-15 16:14:14 +08:00
|
|
|
|
}
|
2024-12-19 10:16:08 +08:00
|
|
|
|
if (this.parentHeight != 0) {
|
|
|
|
|
|
this.vh = mainHeight(this.parentHeight, 2).height
|
|
|
|
|
|
|
|
|
|
|
|
}
|
2024-01-15 16:14:14 +08:00
|
|
|
|
this.vw = '100%'
|
|
|
|
|
|
},
|
|
|
|
|
|
watch: {
|
|
|
|
|
|
value: function (a, b) {
|
|
|
|
|
|
if (a == 2) {
|
|
|
|
|
|
// $("#wave1").remove();
|
|
|
|
|
|
this.initWaves()
|
|
|
|
|
|
} else {
|
|
|
|
|
|
$('#wave1').remove()
|
|
|
|
|
|
this.initWaves()
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
mounted() {
|
2024-10-16 08:49:31 +08:00
|
|
|
|
// console.log(`123123`,this.boxoList,this.wp);
|
2024-01-15 16:14:14 +08:00
|
|
|
|
this.zoom = 1 / document.body.style.zoom
|
|
|
|
|
|
window.addEventListener('resize', () => {
|
|
|
|
|
|
this.zoom = 1 / document.body.style.zoom
|
|
|
|
|
|
})
|
|
|
|
|
|
// this.$wave = $('#wave').eq(0)
|
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
|
this.query()
|
|
|
|
|
|
})
|
|
|
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
download() {
|
|
|
|
|
|
// 转换成canvas
|
|
|
|
|
|
html2canvas(document.getElementById('boxsj'), {
|
|
|
|
|
|
scale: 2
|
|
|
|
|
|
}).then(function (canvas) {
|
|
|
|
|
|
// 创建a标签，实现下载
|
|
|
|
|
|
var creatIMg = document.createElement('a')
|
|
|
|
|
|
creatIMg.download = '瞬间波形.png' // 设置下载的文件名，
|
|
|
|
|
|
creatIMg.href = canvas.toDataURL() // 下载url
|
|
|
|
|
|
creatIMg.click()
|
|
|
|
|
|
creatIMg.remove() // 下载之后把创建的元素删除
|
|
|
|
|
|
})
|
|
|
|
|
|
},
|
|
|
|
|
|
query() {
|
|
|
|
|
|
this.loading = true
|
|
|
|
|
|
this.initWaves()
|
|
|
|
|
|
},
|
|
|
|
|
|
//波形总体数据构造函数
|
|
|
|
|
|
waveData(instantF, instantS, shunshiF, shunshiS, title, unit) {
|
|
|
|
|
|
// console.log(1);
|
|
|
|
|
|
/*瞬时一次值最大最小值*/
|
|
|
|
|
|
this.instantF = instantF
|
|
|
|
|
|
/*瞬时二次值最大最小值*/
|
|
|
|
|
|
this.instantS = instantS
|
|
|
|
|
|
/*瞬时值一次值3相详细数据*/
|
|
|
|
|
|
this.shunshiF = shunshiF
|
|
|
|
|
|
/*瞬时值二次值3相详细数据*/
|
|
|
|
|
|
this.shunshiS = shunshiS
|
|
|
|
|
|
/*三相名称*/
|
|
|
|
|
|
this.title = title
|
|
|
|
|
|
/*电压还是电流*/
|
|
|
|
|
|
this.unit = unit
|
|
|
|
|
|
},
|
|
|
|
|
|
//根据后台查询的数据，清洗数据
|
|
|
|
|
|
initWaves() {
|
|
|
|
|
|
if (null != this.wp) {
|
|
|
|
|
|
if (this.boxoList.systemType == 'pms') {
|
|
|
|
|
|
this.titles =
|
|
|
|
|
|
'变电站名称：' +
|
|
|
|
|
|
this.boxoList.powerStationName +
|
|
|
|
|
|
' 监测点名称：' +
|
|
|
|
|
|
this.boxoList.measurementPointName +
|
|
|
|
|
|
' 发生时刻：' +
|
|
|
|
|
|
this.boxoList.startTime +
|
|
|
|
|
|
' 暂降(骤升)幅值：' +
|
|
|
|
|
|
(this.boxoList.featureAmplitude * 100).toFixed(0) +
|
|
|
|
|
|
'% 持续时间：' +
|
|
|
|
|
|
this.boxoList.duration +
|
|
|
|
|
|
's'
|
|
|
|
|
|
} else if (this.boxoList.systemType == 'ZL') {
|
|
|
|
|
|
this.titles =
|
|
|
|
|
|
// "变电站名称：" +
|
|
|
|
|
|
// this.boxoList.equipmentName +
|
|
|
|
|
|
' 监测点名称：' +
|
2024-10-16 20:31:54 +08:00
|
|
|
|
this.boxoList.lineName +
|
2024-01-15 16:14:14 +08:00
|
|
|
|
' 发生时刻：' +
|
|
|
|
|
|
this.boxoList.startTime +
|
|
|
|
|
|
' 暂降(骤升)幅值：' +
|
|
|
|
|
|
this.boxoList.evtParamVVaDepth +
|
|
|
|
|
|
' 持续时间：' +
|
|
|
|
|
|
this.boxoList.evtParamTm +
|
|
|
|
|
|
's'
|
2024-10-15 15:31:36 +08:00
|
|
|
|
}
|
|
|
|
|
|
else if (this.boxoList.systemType == 'WX') {
|
2024-12-19 10:16:08 +08:00
|
|
|
|
let featureAmplitude = this.boxoList.featureAmplitude + '' ? this.boxoList.featureAmplitude.toFixed(2) : '/'
|
|
|
|
|
|
if (String(this.boxoList.featureAmplitude).split('.')[1] == '00') {
|
|
|
|
|
|
this.boxoList.featureAmplitude = String(this.boxoList.featureAmplitude).split('.')[0]
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2024-10-15 15:31:36 +08:00
|
|
|
|
this.titles =
|
2024-10-16 20:31:54 +08:00
|
|
|
|
|
2024-10-15 15:31:36 +08:00
|
|
|
|
' 监测点名称：' +
|
2024-10-16 20:31:54 +08:00
|
|
|
|
this.boxoList.lineName +
|
|
|
|
|
|
' 发生时刻：' +
|
|
|
|
|
|
this.boxoList.startTime +
|
|
|
|
|
|
' 暂降(骤升)幅值：' +
|
2024-12-19 10:16:08 +08:00
|
|
|
|
(featureAmplitude) +
|
2024-10-16 20:31:54 +08:00
|
|
|
|
'% 持续时间：' +
|
2024-12-30 10:07:26 +08:00
|
|
|
|
(this.boxoList.persistTime || this.boxoList.evtParamTm || '-') +
|
2024-10-15 15:31:36 +08:00
|
|
|
|
's'
|
2024-01-15 16:14:14 +08:00
|
|
|
|
} else {
|
|
|
|
|
|
this.titles =
|
|
|
|
|
|
'变电站名称：' +
|
2024-10-15 15:31:36 +08:00
|
|
|
|
this.boxoList.subName +
|
2024-01-15 16:14:14 +08:00
|
|
|
|
' 监测点名称：' +
|
|
|
|
|
|
this.boxoList.lineName +
|
|
|
|
|
|
' 发生时刻：' +
|
|
|
|
|
|
this.boxoList.startTime +
|
|
|
|
|
|
' 暂降(骤升)幅值：' +
|
2024-10-15 15:31:36 +08:00
|
|
|
|
(this.boxoList.featureAmplitude * 100).toFixed(0) +
|
2024-01-15 16:14:14 +08:00
|
|
|
|
'% 持续时间：' +
|
2024-10-15 15:31:36 +08:00
|
|
|
|
this.boxoList.duration +
|
2024-01-15 16:14:14 +08:00
|
|
|
|
's'
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
//首先根据标题的长度，计算出需要绘制几份图（常见的有1张或2张，后期如果出现双路电压电流，便是4张波形图），考虑到波形的相数，实际情况更复杂些
|
|
|
|
|
|
//相的数量
|
|
|
|
|
|
this.iphasic = this.wp.iphasic
|
|
|
|
|
|
if (this.iphasic === 0) {
|
|
|
|
|
|
this.iphasic = 1
|
|
|
|
|
|
}
|
|
|
|
|
|
var picCounts = (this.wp.waveTitle.length - 1) / this.iphasic
|
|
|
|
|
|
this.waveDatas = []
|
|
|
|
|
|
//循环筛选需求的数据
|
|
|
|
|
|
for (var i = 0; i < picCounts; i++) {
|
|
|
|
|
|
this.fliteWaveData(this.wp, i)
|
|
|
|
|
|
this.waveDatas.push({
|
2024-10-16 08:49:31 +08:00
|
|
|
|
instantF: this.instantF,
|
|
|
|
|
|
instantS: this.instantS,
|
|
|
|
|
|
shunshiF: this.shunshiF,
|
|
|
|
|
|
shunshiS: this.shunshiS,
|
|
|
|
|
|
title: this.title,
|
|
|
|
|
|
unit: this.unit,
|
2024-01-15 16:14:14 +08:00
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
this.time = this.wp.time
|
|
|
|
|
|
this.type = this.wp.waveType
|
|
|
|
|
|
this.severity = this.wp.yzd
|
|
|
|
|
|
//严重度为负，事件为暂升事件
|
|
|
|
|
|
if (this.severity < 0) {
|
|
|
|
|
|
this.severity = '/'
|
|
|
|
|
|
this.type = '/'
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
this.initWave(this.waveDatas, this.time, this.type, this.severity, this.isOpen)
|
|
|
|
|
|
} else {
|
|
|
|
|
|
this.initWave(null, null, null, null, null)
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
//获取横向一个波形的全部数据，包括瞬时波形的一次、二次值，如果是电压的话，还需要计算出对应的最大最小值
|
|
|
|
|
|
fliteWaveData(wp, step) {
|
|
|
|
|
|
|
|
|
|
|
|
var shunData = wp.listWaveData
|
|
|
|
|
|
var pt = Number(wp.pt) / 1000
|
|
|
|
|
|
var ct = Number(wp.ct)
|
|
|
|
|
|
var titleList = wp.waveTitle
|
|
|
|
|
|
//首先判断当前绘制的是电压还是电流
|
|
|
|
|
|
var xishu = pt //默认电压，二次值转一次值乘以pt
|
|
|
|
|
|
//三相名称
|
|
|
|
|
|
var aTitle = '',
|
|
|
|
|
|
bTitle = '',
|
|
|
|
|
|
cTitle = '',
|
|
|
|
|
|
unit = '电压'
|
|
|
|
|
|
//每个波形对应的最大最小值
|
|
|
|
|
|
var ifmax, ifmin, ismax, ismin
|
|
|
|
|
|
|
|
|
|
|
|
var shunshiFA = [],
|
|
|
|
|
|
shunshiFB = [],
|
|
|
|
|
|
shunshiFC = [],
|
|
|
|
|
|
shunshiSA = [],
|
|
|
|
|
|
shunshiSB = [],
|
|
|
|
|
|
shunshiSC = []
|
|
|
|
|
|
//给瞬时赋个初始值
|
|
|
|
|
|
if (shunData.length > 0) {
|
|
|
|
|
|
if (titleList[this.iphasic * step + 1].substring(0, 1) !== 'U') {
|
|
|
|
|
|
xishu = ct
|
|
|
|
|
|
unit = '电流'
|
|
|
|
|
|
}
|
|
|
|
|
|
for (var i = 1; i <= this.iphasic; i++) {
|
|
|
|
|
|
switch (i) {
|
|
|
|
|
|
case 1:
|
|
|
|
|
|
aTitle = titleList[this.iphasic * step + i].substring(1)
|
|
|
|
|
|
break
|
|
|
|
|
|
case 2:
|
|
|
|
|
|
bTitle = titleList[this.iphasic * step + i].substring(1)
|
|
|
|
|
|
break
|
|
|
|
|
|
case 3:
|
|
|
|
|
|
cTitle = titleList[this.iphasic * step + i].substring(1)
|
|
|
|
|
|
break
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
if (shunData[0][this.iphasic * step + 1] !== undefined) {
|
|
|
|
|
|
ifmax = shunData[0][this.iphasic * step + 1] * xishu
|
|
|
|
|
|
ifmin = shunData[0][this.iphasic * step + 1] * xishu
|
|
|
|
|
|
ismax = shunData[0][this.iphasic * step + 1]
|
|
|
|
|
|
ismin = shunData[0][this.iphasic * step + 1]
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
//瞬时值--同时还需要获取出瞬时值的一次、二次的最大最小值
|
|
|
|
|
|
for (var shun = 0; shun < shunData.length; shun++) {
|
|
|
|
|
|
if (shunData[shun][this.iphasic * step + 1] === undefined) {
|
|
|
|
|
|
break
|
|
|
|
|
|
}
|
|
|
|
|
|
//根据波形数据相的数量来筛选数据
|
|
|
|
|
|
switch (this.iphasic) {
|
|
|
|
|
|
case 1:
|
|
|
|
|
|
var shunFirstA = shunData[shun][this.iphasic * step + 1] * xishu
|
|
|
|
|
|
shunshiFA.push([shunData[shun][0], shunFirstA])
|
|
|
|
|
|
ifmax = ifmax > shunFirstA ? ifmax : shunFirstA
|
|
|
|
|
|
ifmin = ifmin < shunFirstA ? ifmin : shunFirstA
|
|
|
|
|
|
|
|
|
|
|
|
var shunSecondA = shunData[shun][this.iphasic * step + 1]
|
|
|
|
|
|
shunshiSA.push([shunData[shun][0], shunSecondA])
|
|
|
|
|
|
ismax = ismax > shunSecondA ? ismax : shunSecondA
|
|
|
|
|
|
ismin = ismin < shunSecondA ? ismin : shunSecondA
|
|
|
|
|
|
break
|
|
|
|
|
|
case 2:
|
|
|
|
|
|
var shunFirstA = shunData[shun][this.iphasic * step + 1] * xishu
|
|
|
|
|
|
var shunFirstB = shunData[shun][this.iphasic * step + 2] * xishu
|
|
|
|
|
|
shunshiFA.push([shunData[shun][0], shunFirstA])
|
|
|
|
|
|
shunshiFB.push([shunData[shun][0], shunFirstB])
|
|
|
|
|
|
ifmax = this.getMaxTwo(ifmax, shunFirstA, shunFirstB)
|
|
|
|
|
|
ifmin = this.getMinOpen(ifmin, shunFirstA, shunFirstB)
|
|
|
|
|
|
|
|
|
|
|
|
var shunSecondA = shunData[shun][this.iphasic * step + 1]
|
|
|
|
|
|
var shunSecondB = shunData[shun][this.iphasic * step + 2]
|
|
|
|
|
|
shunshiSA.push([shunData[shun][0], shunSecondA])
|
|
|
|
|
|
shunshiSB.push([shunData[shun][0], shunSecondB])
|
|
|
|
|
|
ismax = this.getMaxTwo(ismax, shunSecondA, shunSecondB)
|
|
|
|
|
|
ismin = this.getMinOpen(ismin, shunSecondA, shunSecondB)
|
|
|
|
|
|
break
|
|
|
|
|
|
case 3:
|
|
|
|
|
|
var shunFirstA = shunData[shun][this.iphasic * step + 1] * xishu
|
|
|
|
|
|
var shunFirstB = shunData[shun][this.iphasic * step + 2] * xishu
|
|
|
|
|
|
var shunFirstC = shunData[shun][this.iphasic * step + 3] * xishu
|
|
|
|
|
|
shunshiFA.push([shunData[shun][0], shunFirstA])
|
|
|
|
|
|
shunshiFB.push([shunData[shun][0], shunFirstB])
|
|
|
|
|
|
shunshiFC.push([shunData[shun][0], shunFirstC])
|
|
|
|
|
|
ifmax = this.getMax(ifmax, shunFirstA, shunFirstB, shunFirstC)
|
|
|
|
|
|
//如果接线方式是V
|
|
|
|
|
|
if (this.isOpen) {
|
|
|
|
|
|
ifmin = this.getMinOpen(ifmin, shunFirstA, shunFirstC)
|
|
|
|
|
|
} else {
|
|
|
|
|
|
ifmin = this.getMin(ifmin, shunFirstA, shunFirstB, shunFirstC)
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
var shunSecondA = shunData[shun][this.iphasic * step + 1]
|
|
|
|
|
|
var shunSecondB = shunData[shun][this.iphasic * step + 2]
|
|
|
|
|
|
var shunSecondC = shunData[shun][this.iphasic * step + 3]
|
|
|
|
|
|
shunshiSA.push([shunData[shun][0], shunSecondA])
|
|
|
|
|
|
shunshiSB.push([shunData[shun][0], shunSecondB])
|
|
|
|
|
|
shunshiSC.push([shunData[shun][0], shunSecondC])
|
|
|
|
|
|
ismax = this.getMax(ismax, shunSecondA, shunSecondB, shunSecondC)
|
|
|
|
|
|
//如果接线方式是V
|
|
|
|
|
|
if (this.isOpen) {
|
|
|
|
|
|
ismin = this.getMinOpen(ismin, shunSecondA, shunSecondC)
|
|
|
|
|
|
} else {
|
|
|
|
|
|
ismin = this.getMin(ismin, shunSecondA, shunSecondB, shunSecondC)
|
|
|
|
|
|
}
|
|
|
|
|
|
break
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
//瞬时一次值最大最小值
|
|
|
|
|
|
var instantFAn = {}
|
|
|
|
|
|
var instantSAn = {}
|
|
|
|
|
|
//var color;
|
|
|
|
|
|
|
|
|
|
|
|
var instantF = {}
|
|
|
|
|
|
var instantS = {}
|
|
|
|
|
|
var shunshiF = {}
|
|
|
|
|
|
var shunshiS = {}
|
|
|
|
|
|
var title = {}
|
|
|
|
|
|
|
|
|
|
|
|
//三相名称
|
|
|
|
|
|
title.aTitle = aTitle
|
|
|
|
|
|
title.bTitle = bTitle
|
|
|
|
|
|
title.cTitle = cTitle
|
|
|
|
|
|
|
|
|
|
|
|
//电流还是电压
|
|
|
|
|
|
title.unit = unit
|
|
|
|
|
|
|
|
|
|
|
|
//每个波形对应的三相数据
|
|
|
|
|
|
shunshiFA = shunshiFA.slice(0)
|
|
|
|
|
|
shunshiFB = shunshiFB.slice(0)
|
|
|
|
|
|
shunshiFC = shunshiFC.slice(0)
|
|
|
|
|
|
shunshiSA = shunshiSA.slice(0)
|
|
|
|
|
|
shunshiSB = shunshiSB.slice(0)
|
|
|
|
|
|
shunshiSC = shunshiSC.slice(0)
|
|
|
|
|
|
|
|
|
|
|
|
shunshiF.shunshiFA = shunshiFA
|
|
|
|
|
|
shunshiF.shunshiFB = shunshiFB
|
|
|
|
|
|
shunshiF.shunshiFC = shunshiFC
|
|
|
|
|
|
|
|
|
|
|
|
shunshiS.shunshiSA = shunshiSA
|
|
|
|
|
|
shunshiS.shunshiSB = shunshiSB
|
|
|
|
|
|
shunshiS.shunshiSC = shunshiSC
|
|
|
|
|
|
|
|
|
|
|
|
//赋值对应的最大最小值
|
|
|
|
|
|
instantF.max = ifmax
|
|
|
|
|
|
instantF.min = ifmin
|
|
|
|
|
|
instantS.max = ismax
|
|
|
|
|
|
instantS.min = ismin
|
|
|
|
|
|
if (step === 0) {
|
|
|
|
|
|
instantFAn.max = ifmax
|
|
|
|
|
|
instantFAn.min = ifmin
|
|
|
|
|
|
instantSAn.max = ismax
|
|
|
|
|
|
instantSAn.min = ismin
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
2024-10-16 08:49:31 +08:00
|
|
|
|
return this.waveData(instantF, instantS, shunshiF, shunshiS, title, unit)
|
2024-01-15 16:14:14 +08:00
|
|
|
|
},
|
|
|
|
|
|
//开始画图
|
|
|
|
|
|
initWave(waveDatas, time, type, severity, isOpen) {
|
|
|
|
|
|
|
|
|
|
|
|
//清除之前增加的div
|
|
|
|
|
|
// $("#wave ~ .bx1").remove();
|
|
|
|
|
|
$('div.bx1').remove()
|
|
|
|
|
|
//设置暂降触发点的位置 一次值与二次值Y轴不同（不是计算出来的）
|
|
|
|
|
|
// var height = $(window).height() - 90;
|
|
|
|
|
|
var picHeight
|
|
|
|
|
|
var show = true
|
|
|
|
|
|
if (isOpen) {
|
|
|
|
|
|
show = false
|
|
|
|
|
|
}
|
|
|
|
|
|
//var v = $("#interval").val();
|
|
|
|
|
|
var isvisible = false
|
|
|
|
|
|
var cu = [],
|
|
|
|
|
|
title,
|
|
|
|
|
|
unit,
|
|
|
|
|
|
max,
|
|
|
|
|
|
min
|
|
|
|
|
|
var a = '',
|
|
|
|
|
|
b = '',
|
|
|
|
|
|
c = ''
|
|
|
|
|
|
var adata = [],
|
|
|
|
|
|
bdata = [],
|
|
|
|
|
|
cdata = []
|
|
|
|
|
|
picHeight = this.vh
|
|
|
|
|
|
// this.$wave.css('height', picHeight)
|
|
|
|
|
|
// this.$wave.css('width', this.vw)
|
|
|
|
|
|
var colors = []
|
|
|
|
|
|
if (null == waveDatas) {
|
|
|
|
|
|
cu = []
|
|
|
|
|
|
title = '该事件暂无波形图'
|
|
|
|
|
|
} else if (waveDatas.length > 0) {
|
|
|
|
|
|
title = this.titles
|
|
|
|
|
|
|
|
|
|
|
|
if (Number(this.eventValue) <= 90) {
|
|
|
|
|
|
isvisible = true
|
|
|
|
|
|
}
|
|
|
|
|
|
switch (this.iphasic) {
|
|
|
|
|
|
case 1:
|
|
|
|
|
|
a = waveDatas[0].title.aTitle
|
|
|
|
|
|
if (this.value === 1) {
|
|
|
|
|
|
cu = [[0, waveDatas[0].instantF.min]]
|
|
|
|
|
|
max = waveDatas[0].instantF.max
|
|
|
|
|
|
min = waveDatas[0].instantF.min
|
|
|
|
|
|
adata = waveDatas[0].shunshiF.shunshiFA
|
|
|
|
|
|
} else {
|
|
|
|
|
|
cu = [[0, waveDatas[0].instantS.min]]
|
|
|
|
|
|
max = waveDatas[0].instantS.max
|
|
|
|
|
|
min = waveDatas[0].instantS.min
|
|
|
|
|
|
adata = waveDatas[0].shunshiS.shunshiSA
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
colors.push('#FFCC00')
|
|
|
|
|
|
colors.push('#fff')
|
|
|
|
|
|
colors.push('#fff')
|
|
|
|
|
|
break
|
|
|
|
|
|
case 2:
|
|
|
|
|
|
a = waveDatas[0].title.aTitle
|
|
|
|
|
|
b = waveDatas[0].title.bTitle
|
|
|
|
|
|
if (this.value === 1) {
|
|
|
|
|
|
cu = [[0, waveDatas[0].instantF.min]]
|
|
|
|
|
|
max = waveDatas[0].instantF.max
|
|
|
|
|
|
min = waveDatas[0].instantF.min
|
|
|
|
|
|
adata = waveDatas[0].shunshiF.shunshiFA
|
|
|
|
|
|
bdata = waveDatas[0].shunshiF.shunshiFB
|
|
|
|
|
|
} else {
|
|
|
|
|
|
cu = [[0, waveDatas[0].instantS.min]]
|
|
|
|
|
|
max = waveDatas[0].instantS.max
|
|
|
|
|
|
min = waveDatas[0].instantS.min
|
|
|
|
|
|
adata = waveDatas[0].shunshiS.shunshiSA
|
|
|
|
|
|
bdata = waveDatas[0].shunshiS.shunshiSB
|
|
|
|
|
|
}
|
|
|
|
|
|
colors.push('#FFCC00')
|
|
|
|
|
|
colors.push('#009900')
|
|
|
|
|
|
colors.push('#fff')
|
|
|
|
|
|
break
|
|
|
|
|
|
case 3:
|
|
|
|
|
|
a = waveDatas[0].title.aTitle
|
|
|
|
|
|
b = waveDatas[0].title.bTitle
|
|
|
|
|
|
c = waveDatas[0].title.cTitle
|
|
|
|
|
|
if (this.value === 1) {
|
|
|
|
|
|
cu = [[0, waveDatas[0].instantF.min]]
|
|
|
|
|
|
max = waveDatas[0].instantF.max
|
|
|
|
|
|
min = waveDatas[0].instantF.min
|
|
|
|
|
|
adata = waveDatas[0].shunshiF.shunshiFA
|
|
|
|
|
|
bdata = waveDatas[0].shunshiF.shunshiFB
|
|
|
|
|
|
cdata = waveDatas[0].shunshiF.shunshiFC
|
|
|
|
|
|
} else {
|
|
|
|
|
|
cu = [[0, waveDatas[0].instantS.min]]
|
|
|
|
|
|
max = waveDatas[0].instantS.max
|
|
|
|
|
|
min = waveDatas[0].instantS.min
|
|
|
|
|
|
adata = waveDatas[0].shunshiS.shunshiSA
|
|
|
|
|
|
bdata = waveDatas[0].shunshiS.shunshiSB
|
|
|
|
|
|
cdata = waveDatas[0].shunshiS.shunshiSC
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
colors.push('#FFCC00')
|
|
|
|
|
|
colors.push('#009900')
|
|
|
|
|
|
colors.push('#CC0000')
|
|
|
|
|
|
break
|
|
|
|
|
|
}
|
2024-12-19 10:16:08 +08:00
|
|
|
|
|
2024-01-15 16:14:14 +08:00
|
|
|
|
|
|
|
|
|
|
if (waveDatas[0].unit === '电压') {
|
|
|
|
|
|
if (this.value === 1) {
|
|
|
|
|
|
unit = 'kV'
|
|
|
|
|
|
} else {
|
|
|
|
|
|
unit = 'V'
|
|
|
|
|
|
}
|
|
|
|
|
|
} else {
|
|
|
|
|
|
unit = 'A'
|
|
|
|
|
|
}
|
2024-12-19 10:16:08 +08:00
|
|
|
|
|
2024-12-17 20:57:07 +08:00
|
|
|
|
|
2024-01-15 16:14:14 +08:00
|
|
|
|
//把剩余的DIV先拼接好
|
|
|
|
|
|
for (var step = 1; step < waveDatas.length; step++) {
|
|
|
|
|
|
var waveId = 'wave' + step
|
|
|
|
|
|
var newDivShunshi = $(` <div style="height:${this.vh};overflow: hidden;">
|
2024-10-15 15:31:36 +08:00
|
|
|
|
<div class='bx1' id='${waveId}'>
|
2024-01-15 16:14:14 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>`)
|
|
|
|
|
|
newDivShunshi.insertAfter($('#shushi'))
|
|
|
|
|
|
//第二个图高度宽度
|
|
|
|
|
|
$('#' + waveId).css('height', picHeight)
|
|
|
|
|
|
$('#' + waveId).css('width', this.vw)
|
|
|
|
|
|
}
|
|
|
|
|
|
} else {
|
|
|
|
|
|
cu = []
|
|
|
|
|
|
title =
|
|
|
|
|
|
'变电站名称：' +
|
|
|
|
|
|
this.subName +
|
|
|
|
|
|
' 监测点名称：' +
|
|
|
|
|
|
this.lineName +
|
|
|
|
|
|
' 发生时刻：' +
|
|
|
|
|
|
this.time +
|
|
|
|
|
|
' 暂降(骤升)幅值：' +
|
|
|
|
|
|
(this.eventValue * 100).toFixed(0) +
|
|
|
|
|
|
'% 持续时间：' +
|
|
|
|
|
|
this.persistTime +
|
|
|
|
|
|
's'
|
|
|
|
|
|
}
|
|
|
|
|
|
//绘制横向第一个波形图
|
|
|
|
|
|
//绘制瞬时波形图
|
|
|
|
|
|
// const echarts = require('echarts')
|
|
|
|
|
|
let wave = document.getElementById('wave')
|
|
|
|
|
|
|
|
|
|
|
|
let _this = this
|
|
|
|
|
|
var myChartes = echarts.init(wave)
|
2024-10-16 08:49:31 +08:00
|
|
|
|
let echartsColor = { WordColor: "#000", thread: "#000000", FigureColor: ["#07CCCA ", "#00BFF5", "#FFBF00", "#77DA63", "#D5FF6B", "#Ff6600", "#FF9100", "#5B6E96", "#66FFCC", "#B3B3B3", "#FF00FF", "#CC00FF", "#FF9999"] }
|
2024-01-15 16:14:14 +08:00
|
|
|
|
setTimeout(() => {
|
2024-10-16 08:49:31 +08:00
|
|
|
|
wave.style.width = '100%';
|
|
|
|
|
|
wave.style.height = _this.vh;
|
2024-01-15 16:14:14 +08:00
|
|
|
|
}, 0);
|
|
|
|
|
|
var option = {
|
2024-10-16 20:31:54 +08:00
|
|
|
|
animation: false,
|
2024-01-15 16:14:14 +08:00
|
|
|
|
tooltip: {
|
|
|
|
|
|
top: '10px',
|
|
|
|
|
|
trigger: 'axis',
|
|
|
|
|
|
borderColor: 'grey',
|
|
|
|
|
|
backgroundColor: '#fff',
|
|
|
|
|
|
style: {
|
|
|
|
|
|
color: '#000',
|
|
|
|
|
|
fontSize: '15px',
|
|
|
|
|
|
padding: 10
|
|
|
|
|
|
},
|
2024-10-16 20:31:54 +08:00
|
|
|
|
enterable: true,
|
2024-01-15 16:14:14 +08:00
|
|
|
|
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] - 0).toFixed(2) + '<br/>'
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
return tips
|
|
|
|
|
|
},
|
2024-10-16 20:31:54 +08:00
|
|
|
|
|
2024-01-15 16:14:14 +08:00
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: '#fff',
|
|
|
|
|
|
fontStyle: 'normal',
|
|
|
|
|
|
opacity: 0.35,
|
|
|
|
|
|
fontSize: 14
|
|
|
|
|
|
},
|
2024-12-11 16:33:23 +08:00
|
|
|
|
backgroundColor: 'rgba(0,0,0,0.55)',
|
2024-10-16 20:31:54 +08:00
|
|
|
|
borderWidth: 0,
|
|
|
|
|
|
|
2024-01-15 16:14:14 +08:00
|
|
|
|
},
|
|
|
|
|
|
title: {
|
|
|
|
|
|
left: 'center',
|
2024-10-16 20:31:54 +08:00
|
|
|
|
text: title,
|
2024-01-15 16:14:14 +08:00
|
|
|
|
textStyle: {
|
|
|
|
|
|
fontSize: '0.8rem',
|
|
|
|
|
|
color: _this.DColor ? '#fff' : echartsColor.WordColor
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
legend: {
|
|
|
|
|
|
left: '70px',
|
|
|
|
|
|
top: '20',
|
|
|
|
|
|
verticalAlign: 'top',
|
|
|
|
|
|
enabled: true,
|
|
|
|
|
|
itemDistance: 5,
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
fontSize: '0.6rem',
|
|
|
|
|
|
color: _this.DColor ? '#fff' : echartsColor.WordColor,
|
|
|
|
|
|
rich: {
|
|
|
|
|
|
a: {
|
|
|
|
|
|
verticalAlign: 'middle'
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
padding: [0, 0, 0, 0] //[上、右、下、左]
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
// toolbox: {
|
|
|
|
|
|
// show: step != 1 ? true : false,
|
|
|
|
|
|
// feature: {
|
|
|
|
|
|
// //restore: {},
|
|
|
|
|
|
// saveAsImage: {
|
|
|
|
|
|
// iconStyle: {
|
|
|
|
|
|
// borderColor: _this.DColor ? "#fff" : echartsColor.WordColor,
|
|
|
|
|
|
// },
|
|
|
|
|
|
// },
|
|
|
|
|
|
// },
|
|
|
|
|
|
// },
|
|
|
|
|
|
xAxis: {
|
|
|
|
|
|
type: 'value',
|
|
|
|
|
|
name: '时间\n(ms)',
|
|
|
|
|
|
boundaryGap: false,
|
|
|
|
|
|
min: _this.wp.listWaveData[0][0],
|
|
|
|
|
|
max: _this.wp.listWaveData[_this.wp.listWaveData.length - 1][0] + 1,
|
|
|
|
|
|
title: {
|
|
|
|
|
|
text: 'ms',
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
fontSize: '0.6rem',
|
|
|
|
|
|
color: _this.DColor ? '#fff' : echartsColor.WordColor
|
|
|
|
|
|
},
|
|
|
|
|
|
enabled: true,
|
|
|
|
|
|
align: 'high'
|
|
|
|
|
|
},
|
|
|
|
|
|
splitLine: {
|
|
|
|
|
|
show: false
|
|
|
|
|
|
},
|
|
|
|
|
|
nameTextStyle: {
|
|
|
|
|
|
fontSize: '0.6rem'
|
|
|
|
|
|
},
|
|
|
|
|
|
axisTick: {
|
|
|
|
|
|
alignWithLabel: true
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: _this.DColor ? '#fff' : echartsColor.thread
|
|
|
|
|
|
},
|
|
|
|
|
|
onZero: false //-----------重点
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
fontSize: '0.6rem',
|
|
|
|
|
|
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: unit,
|
|
|
|
|
|
title: {
|
|
|
|
|
|
align: 'high',
|
|
|
|
|
|
offset: 0,
|
|
|
|
|
|
text: unit,
|
|
|
|
|
|
rotation: 0,
|
|
|
|
|
|
y: -10
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
boundaryGap: [0, '100%'],
|
|
|
|
|
|
showLastLabel: true,
|
|
|
|
|
|
max: max.toFixed(2) * 1.1,
|
|
|
|
|
|
min: min.toFixed(2) > 0 ? min.toFixed(2) - min.toFixed(2) * 0.1 : min.toFixed(2) * 1.1,
|
|
|
|
|
|
opposite: false,
|
|
|
|
|
|
nameTextStyle: {
|
|
|
|
|
|
fontSize: '0.6rem',
|
|
|
|
|
|
color: _this.DColor ? '#fff' : echartsColor.WordColor
|
|
|
|
|
|
},
|
|
|
|
|
|
//minInterval: 1,
|
|
|
|
|
|
type: 'value',
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: _this.DColor ? '#fff' : echartsColor.thread
|
|
|
|
|
|
},
|
|
|
|
|
|
onZero: false //-----------重点
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
fontSize: '0.6rem',
|
|
|
|
|
|
color: _this.DColor ? '#fff' : echartsColor.WordColor,
|
|
|
|
|
|
formatter: function (value, index) {
|
|
|
|
|
|
return (value - 0).toFixed(2)
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
splitLine: {
|
2024-12-23 11:30:28 +08:00
|
|
|
|
show: false,
|
2024-01-15 16:14:14 +08:00
|
|
|
|
lineStyle: {
|
|
|
|
|
|
// 使用深浅的间隔色
|
|
|
|
|
|
color: [_this.DColor ? '#fff' : echartsColor.thread],
|
|
|
|
|
|
type: 'dashed',
|
|
|
|
|
|
opacity: 0.5
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
grid: {
|
|
|
|
|
|
left: '1%',
|
|
|
|
|
|
right: '2.8%',
|
|
|
|
|
|
bottom: '40px',
|
|
|
|
|
|
top: '15%',
|
|
|
|
|
|
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',
|
2024-10-16 20:31:54 +08:00
|
|
|
|
sampling: 'average',
|
2024-01-15 16:14:14 +08:00
|
|
|
|
itemStyle: {
|
|
|
|
|
|
color: '#FFCC00'
|
|
|
|
|
|
},
|
2024-11-01 16:17:10 +08:00
|
|
|
|
progressive: 1000,
|
2024-10-16 20:31:54 +08:00
|
|
|
|
// 渲染阈值，大于此值则启动渐进渲染
|
|
|
|
|
|
progressiveThreshold: 2000,
|
2024-11-01 16:17:10 +08:00
|
|
|
|
|
2024-10-16 20:31:54 +08:00
|
|
|
|
large: true,
|
2024-01-15 16:14:14 +08:00
|
|
|
|
data: adata
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: b,
|
|
|
|
|
|
type: 'line',
|
|
|
|
|
|
smooth: true,
|
|
|
|
|
|
symbol: 'none',
|
2024-10-16 20:31:54 +08:00
|
|
|
|
sampling: 'average',
|
2024-01-15 16:14:14 +08:00
|
|
|
|
itemStyle: {
|
|
|
|
|
|
color: '#009900'
|
|
|
|
|
|
},
|
2024-11-01 16:17:10 +08:00
|
|
|
|
progressive: 1000,
|
2024-10-16 20:31:54 +08:00
|
|
|
|
// 渲染阈值，大于此值则启动渐进渲染
|
|
|
|
|
|
progressiveThreshold: 2000,
|
2024-11-01 16:17:10 +08:00
|
|
|
|
|
2024-10-16 20:31:54 +08:00
|
|
|
|
large: true,
|
2024-01-15 16:14:14 +08:00
|
|
|
|
data: bdata
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: c,
|
|
|
|
|
|
type: 'line',
|
|
|
|
|
|
smooth: true,
|
|
|
|
|
|
symbol: 'none',
|
2024-10-16 20:31:54 +08:00
|
|
|
|
sampling: 'average',
|
2024-01-15 16:14:14 +08:00
|
|
|
|
itemStyle: {
|
|
|
|
|
|
color: '#CC0000'
|
|
|
|
|
|
},
|
2024-11-01 16:17:10 +08:00
|
|
|
|
progressive: 1000,
|
2024-10-16 20:31:54 +08:00
|
|
|
|
// 渲染阈值，大于此值则启动渐进渲染
|
|
|
|
|
|
progressiveThreshold: 2000,
|
2024-11-01 16:17:10 +08:00
|
|
|
|
|
2024-10-16 20:31:54 +08:00
|
|
|
|
large: true,
|
2024-01-15 16:14:14 +08:00
|
|
|
|
data: cdata
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '暂降触发点',
|
|
|
|
|
|
type: 'scatter',
|
|
|
|
|
|
symbol: 'image://' + url,
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
width: 18,
|
|
|
|
|
|
height: 18
|
|
|
|
|
|
},
|
2024-11-01 16:17:10 +08:00
|
|
|
|
|
2024-01-15 16:14:14 +08:00
|
|
|
|
data: cu
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
myChartes.setOption(option)
|
|
|
|
|
|
// window.echartsArr.push(myChartes)
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
|
myChartes.resize()
|
|
|
|
|
|
this.loading = false
|
|
|
|
|
|
}, 400)
|
|
|
|
|
|
|
|
|
|
|
|
//第一个波形图数据绘制完毕后，绘制后续的波形图
|
|
|
|
|
|
if (waveDatas !== null && waveDatas.length > 1) {
|
|
|
|
|
|
let waveDatasTemp = waveDatas.slice(1)
|
|
|
|
|
|
waveDatasTemp.reverse()
|
|
|
|
|
|
for (var step = 0; step < waveDatasTemp.length; step++) {
|
|
|
|
|
|
var waveDataTemp = waveDatasTemp[step]
|
|
|
|
|
|
this.drawPics(waveDataTemp, picHeight, step, show, myChartes, title)
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
//绘制剩余横向的波形图
|
|
|
|
|
|
drawPics(waveDataTemp, picHeight, step, show, myChartes1, title) {
|
|
|
|
|
|
let _this = this
|
|
|
|
|
|
step = step + 1
|
|
|
|
|
|
//新建瞬时DIV
|
|
|
|
|
|
var waveId = 'wave' + step
|
|
|
|
|
|
var a = '',
|
|
|
|
|
|
b = '',
|
|
|
|
|
|
c = ''
|
|
|
|
|
|
var max, min, unit
|
|
|
|
|
|
var adata = [],
|
|
|
|
|
|
bdata = [],
|
|
|
|
|
|
cdata = []
|
|
|
|
|
|
var colors = []
|
|
|
|
|
|
switch (this.iphasic) {
|
|
|
|
|
|
case 1:
|
|
|
|
|
|
a = waveDataTemp.title.aTitle
|
|
|
|
|
|
colors.push('#FFCC00')
|
|
|
|
|
|
colors.push('#fff')
|
|
|
|
|
|
colors.push('#fff')
|
|
|
|
|
|
break
|
|
|
|
|
|
case 2:
|
|
|
|
|
|
a = waveDataTemp.title.aTitle
|
|
|
|
|
|
b = waveDataTemp.title.bTitle
|
|
|
|
|
|
colors.push('#FFCC00')
|
|
|
|
|
|
colors.push('#009900')
|
|
|
|
|
|
colors.push('#fff')
|
|
|
|
|
|
break
|
|
|
|
|
|
case 3:
|
|
|
|
|
|
a = waveDataTemp.title.aTitle
|
|
|
|
|
|
b = waveDataTemp.title.bTitle
|
|
|
|
|
|
c = waveDataTemp.title.cTitle
|
|
|
|
|
|
colors.push('#FFCC00')
|
|
|
|
|
|
colors.push('#009900')
|
|
|
|
|
|
colors.push('#CC0000')
|
|
|
|
|
|
break
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
if (this.value === 1) {
|
|
|
|
|
|
max = waveDataTemp.instantF.max
|
|
|
|
|
|
min = waveDataTemp.instantF.min
|
|
|
|
|
|
adata = waveDataTemp.shunshiF.shunshiFA
|
|
|
|
|
|
bdata = waveDataTemp.shunshiF.shunshiFB
|
|
|
|
|
|
cdata = waveDataTemp.shunshiF.shunshiFC
|
|
|
|
|
|
} else {
|
|
|
|
|
|
max = waveDataTemp.instantS.max
|
|
|
|
|
|
min = waveDataTemp.instantS.min
|
|
|
|
|
|
adata = waveDataTemp.shunshiS.shunshiSA
|
|
|
|
|
|
bdata = waveDataTemp.shunshiS.shunshiSB
|
|
|
|
|
|
cdata = waveDataTemp.shunshiS.shunshiSC
|
|
|
|
|
|
}
|
|
|
|
|
|
if (waveDataTemp.unit === '电压') {
|
|
|
|
|
|
if (this.value === 1) {
|
|
|
|
|
|
unit = 'kV'
|
|
|
|
|
|
} else {
|
|
|
|
|
|
unit = 'V'
|
|
|
|
|
|
}
|
|
|
|
|
|
} else {
|
|
|
|
|
|
unit = 'A'
|
|
|
|
|
|
}
|
|
|
|
|
|
// const echarts = require('echarts')
|
|
|
|
|
|
let waveIds = document.getElementById(waveId)
|
|
|
|
|
|
if (this.boxoList.systemType == 'ZL') {
|
|
|
|
|
|
let str = []
|
|
|
|
|
|
str = waveId.split('e')
|
|
|
|
|
|
let str1 = Number(str[1])
|
|
|
|
|
|
var titlename = ''
|
|
|
|
|
|
this.wp.channelNames.forEach((element, i) => {
|
|
|
|
|
|
if (i == 4 || i == 7 || i == 10) {
|
|
|
|
|
|
if (str1 == 1 && i == 4) {
|
|
|
|
|
|
let s = []
|
|
|
|
|
|
let s1 = ''
|
|
|
|
|
|
s = element.split('A')
|
|
|
|
|
|
if (s[0] == 'LI') {
|
|
|
|
|
|
s1 = '电网侧-电流'
|
|
|
|
|
|
} else {
|
|
|
|
|
|
s1 = s[0] + '侧' + s[1]
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
titlename = s1 + ' ' + title
|
|
|
|
|
|
}
|
|
|
|
|
|
if (str1 == 2 && i == 7) {
|
|
|
|
|
|
let s = []
|
|
|
|
|
|
let s1 = ''
|
|
|
|
|
|
s = element.split('A')
|
|
|
|
|
|
if (s[0] == 'SU') {
|
|
|
|
|
|
s1 = '负载侧-电压'
|
|
|
|
|
|
} else {
|
|
|
|
|
|
s1 = s[0] + '侧' + s[1]
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
titlename = s1 + ' ' + title
|
|
|
|
|
|
}
|
|
|
|
|
|
if (str1 == 3 && i == 10) {
|
|
|
|
|
|
let s = []
|
|
|
|
|
|
let s1 = ''
|
|
|
|
|
|
s = element.split('A')
|
|
|
|
|
|
if (s[0] == 'SI') {
|
|
|
|
|
|
s1 = '负载侧-电流'
|
|
|
|
|
|
} else {
|
|
|
|
|
|
s1 = s[0] + '侧' + s[1]
|
|
|
|
|
|
}
|
|
|
|
|
|
titlename = s1 + ' ' + title
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
var myChartes = echarts.init(waveIds)
|
2024-10-16 08:49:31 +08:00
|
|
|
|
let echartsColor = { WordColor: "#000", thread: "#000000", FigureColor: ["#07CCCA ", "#00BFF5", "#FFBF00", "#77DA63", "#D5FF6B", "#Ff6600", "#FF9100", "#5B6E96", "#66FFCC", "#B3B3B3", "#FF00FF", "#CC00FF", "#FF9999"] }
|
2024-01-15 16:14:14 +08:00
|
|
|
|
var option = {
|
2024-10-16 20:31:54 +08:00
|
|
|
|
animation: false,
|
2024-01-15 16:14:14 +08:00
|
|
|
|
tooltip: {
|
|
|
|
|
|
trigger: 'axis',
|
|
|
|
|
|
borderColor: 'grey',
|
|
|
|
|
|
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] - 0).toFixed(2) + '<br/>'
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
return tips
|
|
|
|
|
|
},
|
2024-10-16 20:31:54 +08:00
|
|
|
|
|
2024-01-15 16:14:14 +08:00
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: '#fff',
|
|
|
|
|
|
fontStyle: 'normal',
|
|
|
|
|
|
opacity: 0.35,
|
|
|
|
|
|
fontSize: 14
|
|
|
|
|
|
},
|
2024-12-11 16:33:23 +08:00
|
|
|
|
backgroundColor: 'rgba(0,0,0,0.55)',
|
2024-01-15 16:14:14 +08:00
|
|
|
|
borderWidth: 0
|
|
|
|
|
|
},
|
|
|
|
|
|
title: {
|
|
|
|
|
|
left: 'center',
|
|
|
|
|
|
text: titlename,
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
fontSize: '0.8rem',
|
|
|
|
|
|
color: _this.DColor ? '#fff' : echartsColor.WordColor
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
legend: {
|
|
|
|
|
|
left: '70px',
|
|
|
|
|
|
top: '20',
|
|
|
|
|
|
verticalAlign: 'top',
|
|
|
|
|
|
enabled: true,
|
|
|
|
|
|
itemDistance: 5,
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
fontSize: '0.6rem',
|
|
|
|
|
|
color: _this.DColor ? '#fff' : echartsColor.WordColor,
|
|
|
|
|
|
rich: {
|
|
|
|
|
|
a: {
|
|
|
|
|
|
verticalAlign: 'middle'
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
padding: [0, 0, 0, 0] //[上、右、下、左]
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
// toolbox: {
|
|
|
|
|
|
// show: step != 1 ? true : false,
|
|
|
|
|
|
// feature: {
|
|
|
|
|
|
// //restore: {},
|
|
|
|
|
|
// saveAsImage: {
|
|
|
|
|
|
// iconStyle: {
|
|
|
|
|
|
// borderColor: _this.DColor ? '#fff' : echartsColor.WordColor
|
|
|
|
|
|
// }
|
|
|
|
|
|
// }
|
|
|
|
|
|
// }
|
|
|
|
|
|
// },
|
|
|
|
|
|
xAxis: {
|
|
|
|
|
|
type: 'value',
|
|
|
|
|
|
name: '时间\n(ms)',
|
|
|
|
|
|
boundaryGap: false,
|
|
|
|
|
|
min: _this.wp.listWaveData[0][0],
|
|
|
|
|
|
max: _this.wp.listWaveData[_this.wp.listWaveData.length - 1][0] + 1,
|
|
|
|
|
|
title: {
|
|
|
|
|
|
text: 'ms',
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
fontSize: '0.6rem',
|
|
|
|
|
|
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 //-----------重点
|
|
|
|
|
|
},
|
|
|
|
|
|
nameTextStyle: {
|
|
|
|
|
|
fontSize: '0.6rem'
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
fontSize: '0.6rem',
|
|
|
|
|
|
color: _this.DColor ? '#fff' : echartsColor.WordColor,
|
|
|
|
|
|
formatter: function (value, index) {
|
|
|
|
|
|
if (_this.valB != (value - 0).toFixed(0)) {
|
|
|
|
|
|
_this.valB = (value - 0).toFixed(0)
|
|
|
|
|
|
return (value - 0).toFixed(0)
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
//rotate:39
|
|
|
|
|
|
}
|
|
|
|
|
|
// data: this.syncExtremes,
|
|
|
|
|
|
},
|
|
|
|
|
|
yAxis: {
|
|
|
|
|
|
type: 'value',
|
|
|
|
|
|
name: unit,
|
|
|
|
|
|
title: {
|
|
|
|
|
|
align: 'high',
|
|
|
|
|
|
offset: 0,
|
|
|
|
|
|
text: unit,
|
|
|
|
|
|
rotation: 0,
|
|
|
|
|
|
y: -10
|
|
|
|
|
|
},
|
|
|
|
|
|
boundaryGap: [0, '100%'],
|
|
|
|
|
|
showLastLabel: true,
|
|
|
|
|
|
max: max.toFixed(2) * 1.1,
|
|
|
|
|
|
min: min.toFixed(2) > 0 ? min.toFixed(2) - min.toFixed(2) * 0.1 : min.toFixed(2) * 1.1,
|
|
|
|
|
|
opposite: false,
|
|
|
|
|
|
// axisLabel: {
|
|
|
|
|
|
// formatter: "{value}",
|
|
|
|
|
|
// },
|
|
|
|
|
|
nameTextStyle: {
|
|
|
|
|
|
fontSize: '0.6rem',
|
|
|
|
|
|
color: _this.DColor ? '#fff' : echartsColor.WordColor
|
|
|
|
|
|
},
|
|
|
|
|
|
//minInterval: 1,
|
|
|
|
|
|
type: 'value',
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: _this.DColor ? '#fff' : echartsColor.thread
|
|
|
|
|
|
},
|
|
|
|
|
|
onZero: false //-----------重点
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
fontSize: '0.6rem',
|
|
|
|
|
|
color: _this.DColor ? '#fff' : echartsColor.WordColor,
|
|
|
|
|
|
formatter: function (value, index) {
|
|
|
|
|
|
return (value - 0).toFixed(2)
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
splitLine: {
|
2024-12-23 11:30:28 +08:00
|
|
|
|
show: false,
|
2024-01-15 16:14:14 +08:00
|
|
|
|
lineStyle: {
|
|
|
|
|
|
// 使用深浅的间隔色
|
|
|
|
|
|
color: [_this.DColor ? '#fff' : echartsColor.thread],
|
|
|
|
|
|
type: 'dashed',
|
|
|
|
|
|
opacity: 0.5
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
grid: {
|
|
|
|
|
|
left: '1%',
|
|
|
|
|
|
right: '2.8%',
|
|
|
|
|
|
bottom: '40px',
|
|
|
|
|
|
top: '15%',
|
|
|
|
|
|
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',
|
2024-10-16 20:31:54 +08:00
|
|
|
|
sampling: 'average',
|
2024-01-15 16:14:14 +08:00
|
|
|
|
itemStyle: {
|
|
|
|
|
|
color: '#FFCC00'
|
|
|
|
|
|
},
|
2024-10-16 20:31:54 +08:00
|
|
|
|
large: true,
|
2024-11-01 16:17:10 +08:00
|
|
|
|
progressive: 1000,
|
2024-10-16 20:31:54 +08:00
|
|
|
|
// 渲染阈值，大于此值则启动渐进渲染
|
|
|
|
|
|
progressiveThreshold: 2000,
|
2024-01-15 16:14:14 +08:00
|
|
|
|
data: adata
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: b,
|
|
|
|
|
|
type: 'line',
|
|
|
|
|
|
smooth: true,
|
|
|
|
|
|
symbol: 'none',
|
2024-10-16 20:31:54 +08:00
|
|
|
|
sampling: 'average',
|
2024-01-15 16:14:14 +08:00
|
|
|
|
itemStyle: {
|
|
|
|
|
|
color: '#009900'
|
|
|
|
|
|
},
|
2024-11-01 16:17:10 +08:00
|
|
|
|
progressive: 1000,
|
2024-10-16 20:31:54 +08:00
|
|
|
|
// 渲染阈值，大于此值则启动渐进渲染
|
|
|
|
|
|
progressiveThreshold: 2000,
|
|
|
|
|
|
large: true,
|
2024-01-15 16:14:14 +08:00
|
|
|
|
data: bdata
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: c,
|
|
|
|
|
|
type: 'line',
|
|
|
|
|
|
smooth: true,
|
|
|
|
|
|
symbol: 'none',
|
2024-10-16 20:31:54 +08:00
|
|
|
|
sampling: 'average',
|
2024-01-15 16:14:14 +08:00
|
|
|
|
itemStyle: {
|
|
|
|
|
|
color: '#CC0000'
|
|
|
|
|
|
},
|
2024-11-01 16:17:10 +08:00
|
|
|
|
progressive: 1000,
|
2024-10-16 20:31:54 +08:00
|
|
|
|
// 渲染阈值，大于此值则启动渐进渲染
|
|
|
|
|
|
progressiveThreshold: 2000,
|
|
|
|
|
|
large: true,
|
2024-01-15 16:14:14 +08:00
|
|
|
|
data: cdata
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
}
|
|
|
|
|
|
myChartes.setOption(option)
|
|
|
|
|
|
// window.echartsArr.push(myChartes)
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
|
myChartes.resize()
|
|
|
|
|
|
this.loading = false
|
|
|
|
|
|
}, 400)
|
|
|
|
|
|
echarts.connect([myChartes1, myChartes])
|
|
|
|
|
|
},
|
|
|
|
|
|
//根据多个值的比较返回其中最大值
|
|
|
|
|
|
getMax(temp, tempA, tempB, tempC) {
|
|
|
|
|
|
temp = temp > tempA ? temp : tempA
|
|
|
|
|
|
temp = temp > tempB ? temp : tempB
|
|
|
|
|
|
temp = temp > tempC ? temp : tempC
|
|
|
|
|
|
return temp
|
|
|
|
|
|
},
|
|
|
|
|
|
//根据多个值的比较返回其中最大值
|
|
|
|
|
|
getMaxTwo(temp, tempA, tempB) {
|
|
|
|
|
|
temp = temp > tempA ? temp : tempA
|
|
|
|
|
|
temp = temp > tempB ? temp : tempB
|
|
|
|
|
|
return temp
|
|
|
|
|
|
},
|
|
|
|
|
|
//根据多个值的比较返回其中最小值
|
|
|
|
|
|
getMin(temp, tempA, tempB, tempC) {
|
|
|
|
|
|
temp = temp < tempA ? temp : tempA
|
|
|
|
|
|
temp = temp < tempB ? temp : tempB
|
|
|
|
|
|
temp = temp < tempC ? temp : tempC
|
|
|
|
|
|
return temp
|
|
|
|
|
|
},
|
|
|
|
|
|
getMinOpen(temp, tempA, tempB) {
|
|
|
|
|
|
temp = temp < tempA ? temp : tempA
|
|
|
|
|
|
temp = temp < tempB ? temp : tempB
|
|
|
|
|
|
return temp
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
