1625 lines
51 KiB
Vue
1625 lines
51 KiB
Vue
<template>
|
||
<div v-loading="loading" style="position: relative">
|
||
<div id="boxr">
|
||
<div id="rmsp" :style="`height:${vh};overflow: hidden;`">
|
||
<div class="bx" id="rms"></div>
|
||
</div>
|
||
</div>
|
||
<!-- <el-button
|
||
style="position: absolute; right: 10px; top: 0px; z-index: 20000"
|
||
type="primary"
|
||
link
|
||
icon="el-icon-Download"
|
||
title="生成图片"
|
||
@click="download"
|
||
>
|
||
下载
|
||
</el-button> -->
|
||
</div>
|
||
</template>
|
||
<script lang="js">
|
||
import html2canvas from "html2canvas";
|
||
import $ from "jquery";
|
||
import * as echarts from 'echarts'
|
||
import { mainHeight } from '@/utils/layout'
|
||
// url: '@/assets/img/point.png',
|
||
// url2: ("@/assets/dw.png"),
|
||
import url from '@/assets/img/point.png';
|
||
import url2 from '@/assets/img/dw.png';
|
||
export default {
|
||
props: {
|
||
value: {
|
||
type: Number,
|
||
default: 2,
|
||
},
|
||
flag: {
|
||
type: [String, Number, Boolean],
|
||
default: 3,
|
||
},
|
||
parentHeight: {
|
||
type: [String, Number, Boolean],
|
||
default: 0
|
||
},
|
||
DColor: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
boxoList: {
|
||
type: [Object, Array],
|
||
},
|
||
wp: {
|
||
type: [Object, Array],
|
||
},
|
||
height: {
|
||
type: [String, Number],
|
||
default: false,
|
||
},
|
||
|
||
},
|
||
data() {
|
||
return {
|
||
zoom: "",
|
||
loading: true,
|
||
tabvalue: this.value,
|
||
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: [],
|
||
fz: "",
|
||
titles: "",
|
||
vh: null,
|
||
vw: null,
|
||
echartlist: null,
|
||
myChartess: null,
|
||
myChartess1: null,
|
||
myChartess2: null,
|
||
myChartess3: null,
|
||
myChartess4: null,
|
||
myChartess5: null,
|
||
|
||
};
|
||
},
|
||
watch: {
|
||
value: function (a, b) {
|
||
if (a == 2) {
|
||
//alert(a)
|
||
this.initWaves();
|
||
} else {
|
||
//alert(a)
|
||
this.initWaves();
|
||
}
|
||
},
|
||
},
|
||
created() {
|
||
if (this.flag == 1) {
|
||
this.vh = mainHeight(165).height
|
||
} else if (this.height != false) {
|
||
this.vh = this.height
|
||
} else {
|
||
this.vh = mainHeight(165, 2).height
|
||
}
|
||
if (this.parentHeight != 0) {
|
||
this.vh = mainHeight(this.parentHeight, 2).height
|
||
|
||
}
|
||
this.vw = '100%'
|
||
},
|
||
mounted() {
|
||
// this.$wave = $("#wave").eq(0);
|
||
this.zoom = 1 / document.body.style.zoom;
|
||
window.addEventListener("resize", () => {
|
||
this.zoom = 1 / document.body.style.zoom;
|
||
});
|
||
// this.$rms = $("#rms").eq(0);
|
||
this.query();
|
||
},
|
||
beforeDestroy() {
|
||
this.backbxlb()
|
||
},
|
||
methods: {
|
||
backbxlb() {
|
||
this.waveDatas = []
|
||
|
||
// 清理所有可能的 echarts 实例
|
||
const chartNames = ['myChartess', 'myChartess1', 'myChartess2', 'myChartess3', 'myChartess4', 'myChartess5']
|
||
|
||
chartNames.forEach(name => {
|
||
if (this[name]) {
|
||
this[name].dispose()
|
||
this[name] = null
|
||
}
|
||
})
|
||
|
||
// 断开 echarts 实例连接
|
||
echarts.disconnect(chartNames.map(name => this[name]).filter(Boolean))
|
||
// this.waveDatas = []
|
||
// if(this.myChartess){this.myChartess.dispose(); this.myChartess=null; }
|
||
// if(this.myChartess1){this.myChartess1.dispose(); this.myChartess1=null; }
|
||
// if(this.myChartess2){this.myChartess2.dispose(); this.myChartess2=null; }
|
||
// if(this.myChartess3){this.myChartess3.dispose(); this.myChartess3=null; }
|
||
// if(this.myChartess4){this.myChartess4.dispose(); this.myChartess4=null; }
|
||
// if(this.myChartess5){this.myChartess5.dispose(); this.myChartess5=null; }
|
||
|
||
// echarts.disconnect([this.myChartess,this.myChartess1,this.myChartess2,this.myChartess3,this.myChartess4,this.myChartess5])
|
||
|
||
// if (this.echartlist.length > 0) {
|
||
|
||
// this.waveDatas = []
|
||
// this.echartlist.forEach(item => {
|
||
// item.dispose(); // 销毁echarts实例
|
||
|
||
|
||
// })
|
||
|
||
|
||
// }
|
||
},
|
||
download() {
|
||
// 转换成canvas
|
||
html2canvas(document.getElementById("boxr"), {
|
||
scale: 2,
|
||
}).then(function (canvas) {
|
||
// 创建a标签，实现下载
|
||
let creatIMg = document.createElement("a");
|
||
creatIMg.download = "rms波形.png"; // 设置下载的文件名，
|
||
creatIMg.href = canvas.toDataURL(); // 下载url
|
||
creatIMg.click();
|
||
creatIMg.remove(); // 下载之后把创建的元素删除
|
||
});
|
||
},
|
||
query() {
|
||
this.loading = true;
|
||
// let from={
|
||
// lineId:this.boxoList.lineId,
|
||
// timeId:this.boxoList.timeId,
|
||
// }
|
||
// getMonitorEventAnalyseWave(from).then(res=>{
|
||
// this.wp=res.data
|
||
this.initWaves();
|
||
// })
|
||
},
|
||
//波形总体数据构造函数
|
||
waveData(
|
||
instantF,
|
||
instantS,
|
||
RMSF,
|
||
RMSS,
|
||
RMSFMinDetail,
|
||
RMSSMinDetail,
|
||
shunshiF,
|
||
shunshiS,
|
||
RMSFWave,
|
||
RMSSWave,
|
||
title,
|
||
unit
|
||
) {
|
||
/*瞬时一次值最大最小值*/
|
||
this.instantF = instantF;
|
||
/*瞬时二次值最大最小值*/
|
||
this.instantS = instantS;
|
||
/*RMS一次值最大最小值*/
|
||
this.RMSF = RMSF;
|
||
/*RMS二次值最大最小值*/
|
||
this.RMSS = RMSS;
|
||
/*RMS一次值最小值具体的X Y周的位置，已经具体的相别*/
|
||
this.RMSFMinDetail = RMSFMinDetail;
|
||
/*RMS二次值最小值具体的X Y周的位置，已经具体的相别*/
|
||
this.RMSSMinDetail = RMSSMinDetail;
|
||
/*瞬时值一次值3相详细数据*/
|
||
this.shunshiF = shunshiF;
|
||
/*瞬时值二次值3相详细数据*/
|
||
this.shunshiS = shunshiS;
|
||
/*RMS一次值3相详细数据*/
|
||
this.RMSFWave = RMSFWave;
|
||
/*RMS二次值3相详细数据*/
|
||
this.RMSSWave = RMSSWave;
|
||
/*三相名称*/
|
||
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(2) +
|
||
"% 持续时间：" +
|
||
this.boxoList.duration +
|
||
"s";
|
||
} else if (this.boxoList.systemType == "ZL") {
|
||
this.titles =
|
||
// "变电站名称：" +
|
||
// this.boxoList.equipmentName +
|
||
" 监测点名称：" +
|
||
this.boxoList.equipmentName +
|
||
" 发生时刻：" +
|
||
this.boxoList.startTime +
|
||
" 暂降(骤升)幅值：" +
|
||
this.boxoList.evtParamVVaDepth +
|
||
" 持续时间：" +
|
||
this.boxoList.evtParamTm +
|
||
"s";
|
||
} else {
|
||
this.titles =
|
||
"变电站名称：" +
|
||
this.boxoList.subName +
|
||
" 监测点名称：" +
|
||
this.boxoList.lineName +
|
||
" 发生时刻：" +
|
||
this.boxoList.startTime +
|
||
" 暂降(骤升)幅值：" +
|
||
(this.boxoList.featureAmplitude * 100).toFixed(2) +
|
||
"% 持续时间：" +
|
||
this.boxoList.duration +
|
||
"s";
|
||
}
|
||
|
||
// this.eventValue = this.boxoList.eventValue;
|
||
// this.persistTime = this.boxoList.persistTime;
|
||
// this.lineName = this.boxoList.lineName; //监测点名称：
|
||
// this.isOpen = this.boxoList.openTri;
|
||
// this.subName = this.boxoList.subName; //变电站名称：
|
||
//首先根据标题的长度，计算出需要绘制几份图（常见的有1张或2张，后期如果出现双路电压电流，便是4张波形图），考虑到波形的相数，实际情况更复杂些
|
||
//相的数量
|
||
this.iphasic = this.wp.iphasic;
|
||
if (this.iphasic === 0) {
|
||
this.iphasic = 1;
|
||
}
|
||
let picCounts = (this.wp.waveTitle.length - 1) / this.iphasic;
|
||
this.waveDatas = [];
|
||
//循环筛选需求的数据
|
||
for (let i = 0; i < picCounts; i++) {
|
||
this.fliteWaveData(this.wp, i)
|
||
this.waveDatas.push({
|
||
instantF: this.instantF,
|
||
instantS: this.instantS,
|
||
RMSF: this.RMSF,
|
||
RMSS: this.RMSS,
|
||
RMSFMinDetail: this.RMSFMinDetail,
|
||
RMSSMinDetail: this.RMSSMinDetail,
|
||
shunshiF: this.shunshiF,
|
||
shunshiS: this.shunshiS,
|
||
RMSFWave: this.RMSFWave,
|
||
RMSSWave: this.RMSSWave,
|
||
title: this.title,
|
||
unit: this.unit
|
||
|
||
});
|
||
}
|
||
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);
|
||
}
|
||
},
|
||
//获取横向一个波形的全部数据，包括瞬时波形的一次、二次值，RMS波形的一次、二次值，如果是电压的话，还需要计算出对应的最大最小值
|
||
fliteWaveData(wp, step) {
|
||
let shunData = wp.listWaveData;
|
||
let rmsData = wp.listRmsData;
|
||
// console.log(
|
||
// rmsData
|
||
// );
|
||
let pt = Number(wp.pt) / 1000;
|
||
let ct = Number(wp.ct);
|
||
let titleList = wp.waveTitle;
|
||
//首先判断当前绘制的是电压还是电流
|
||
let xishu = pt; //默认电压，二次值转一次值乘以pt
|
||
//三相名称
|
||
let aTitle = "",
|
||
bTitle = "",
|
||
cTitle = "",
|
||
unit = "电压";
|
||
//RMS最小值横、纵坐标、相别名称
|
||
let rmsvFirstX = 0,
|
||
rmsvFirstY = 0,
|
||
rmsvSecondX = 0,
|
||
rmsvSecondY = 0,
|
||
firstZhou = "a",
|
||
secondeZhou = "a";
|
||
//每个波形对应的最大最小值
|
||
let ifmax, ifmin, ismax, ismin, rfmax, rfmin, rsmax, rsmin;
|
||
let shunshiFA = [],
|
||
shunshiFB = [],
|
||
shunshiFC = [],
|
||
shunshiSA = [],
|
||
shunshiSB = [],
|
||
shunshiSC = [],
|
||
rmsFA = [],
|
||
rsmFB = [],
|
||
rmsFC = [],
|
||
rmsSA = [],
|
||
rsmSB = [],
|
||
rmsSC = [];
|
||
//给瞬时赋个初始值
|
||
if (shunData.length > 0) {
|
||
if (titleList[this.iphasic * step + 1].substring(0, 1) !== "U") {
|
||
xishu = ct;
|
||
unit = "电流";
|
||
}
|
||
for (let 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];
|
||
}
|
||
|
||
if (rmsData[0][this.iphasic * step + 1] !== undefined) {
|
||
rfmax = rmsData[0][this.iphasic * step + 1] * xishu;
|
||
rfmin = rmsData[0][this.iphasic * step + 1] * xishu;
|
||
rmsvFirstY = rmsData[0][this.iphasic * step + 1] * xishu;
|
||
rmsvFirstX = rmsData[0][0];
|
||
rsmax = rmsData[0][this.iphasic * step + 1];
|
||
rsmin = rmsData[0][this.iphasic * step + 1];
|
||
rmsvSecondY = rmsData[0][this.iphasic * step + 1];
|
||
rmsvSecondX = rmsData[0][0];
|
||
}
|
||
//瞬时值--同时还需要获取出瞬时值的一次、二次的最大最小值
|
||
for (let shun = 0; shun < shunData.length; shun++) {
|
||
if (shunData[shun][this.iphasic * step + 1] === undefined) {
|
||
break;
|
||
}
|
||
let shunFirstA = []
|
||
let shunFirstB = []
|
||
let shunFirstC = []
|
||
let shunSecondA = []
|
||
let shunSecondB = []
|
||
let shunSecondC = []
|
||
//根据波形数据相的数量来筛选数据
|
||
switch (this.iphasic) {
|
||
case 1:
|
||
shunFirstA = shunData[shun][this.iphasic * step + 1] * xishu;
|
||
shunshiFA.push([shunData[shun][0], shunFirstA]);
|
||
ifmax = ifmax > shunFirstA ? ifmax : shunFirstA;
|
||
ifmin = ifmin < shunFirstA ? ifmin : shunFirstA;
|
||
|
||
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:
|
||
shunFirstA = shunData[shun][this.iphasic * step + 1] * xishu;
|
||
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);
|
||
|
||
shunSecondA = shunData[shun][this.iphasic * step + 1];
|
||
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:
|
||
shunFirstA = shunData[shun][this.iphasic * step + 1] * xishu;
|
||
|
||
shunFirstB = shunData[shun][this.iphasic * step + 2] * xishu;
|
||
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);
|
||
}
|
||
|
||
shunSecondA = shunData[shun][this.iphasic * step + 1];
|
||
shunSecondB = shunData[shun][this.iphasic * step + 2];
|
||
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;
|
||
}
|
||
}
|
||
|
||
//RMS值--同时还需要获取出RMS值的一次、二次的最大最小值
|
||
for (let rms = 0; rms < rmsData.length; rms++) {
|
||
if (rmsData[rms][this.iphasic * step + 1] === undefined) {
|
||
break;
|
||
}
|
||
let rmsFirstA = []
|
||
let rmsFirstB = []
|
||
let rmsFirstC = []
|
||
let rmsSecondA = []
|
||
let rmsSecondB = []
|
||
let rmsSecondC = []
|
||
//根据波形数据相的数量来筛选数据
|
||
switch (this.iphasic) {
|
||
case 1:
|
||
rmsFirstA = rmsData[rms][this.iphasic * step + 1] * xishu;
|
||
rmsFA.push([rmsData[rms][0], rmsFirstA]);
|
||
rfmax = rfmax > rmsFirstA ? rfmax : rmsFirstA;
|
||
rfmin = rfmin < rmsFirstA ? rfmin : rmsFirstA;
|
||
if (rfmin < rmsvFirstY) {
|
||
rmsvFirstY = rfmin;
|
||
firstZhou = "a";
|
||
rmsvFirstX = rmsData[rms][0];
|
||
}
|
||
|
||
rmsSecondA = rmsData[rms][this.iphasic * step + 1];
|
||
rmsSA.push([rmsData[rms][0], rmsSecondA]);
|
||
rsmax = rsmax > rmsSecondA ? rsmax : rmsSecondA;
|
||
rsmin = rsmin < rmsSecondA ? rsmin : rmsSecondA;
|
||
if (rsmin < rmsvSecondY) {
|
||
rmsvSecondY = rsmin;
|
||
secondeZhou = "a";
|
||
rmsvSecondX = rmsData[rms][0];
|
||
}
|
||
break;
|
||
case 2:
|
||
rmsFirstA = rmsData[rms][this.iphasic * step + 1] * xishu;
|
||
rmsFirstB = rmsData[rms][this.iphasic * step + 2] * xishu;
|
||
rmsFA.push([rmsData[rms][0], rmsFirstA]);
|
||
rsmFB.push([rmsData[rms][0], rmsFirstB]);
|
||
rfmax = this.getMaxTwo(rfmax, rmsFirstA, rmsFirstB);
|
||
rfmin = this.getMinOpen(rfmin, rmsFirstA, rmsFirstB);
|
||
if (rfmin < rmsvFirstY) {
|
||
rmsvFirstY = rfmin;
|
||
if (rfmin === rmsFirstA) {
|
||
firstZhou = "a";
|
||
} else if (rfmin === rmsFirstB) {
|
||
firstZhou = "b";
|
||
}
|
||
rmsvFirstX = rmsData[rms][0];
|
||
}
|
||
|
||
rmsSecondA = rmsData[rms][this.iphasic * step + 1];
|
||
rmsSecondB = rmsData[rms][this.iphasic * step + 2];
|
||
rmsSA.push([rmsData[rms][0], rmsSecondA]);
|
||
rsmSB.push([rmsData[rms][0], rmsSecondB]);
|
||
rsmax = this.getMaxTwo(rsmax, rmsSecondA, rmsSecondB);
|
||
rsmin = this.getMinOpen(rsmin, rmsSecondA, rmsSecondB);
|
||
if (rsmin < rmsvSecondY) {
|
||
rmsvSecondY = rsmin;
|
||
if (rsmin === rmsSecondA) {
|
||
secondeZhou = "a";
|
||
} else if (rsmin === rmsSecondB) {
|
||
secondeZhou = "b";
|
||
}
|
||
rmsvSecondX = rmsData[rms][0];
|
||
}
|
||
break;
|
||
case 3:
|
||
rmsFirstA = rmsData[rms][this.iphasic * step + 1] * xishu;
|
||
rmsFirstB = rmsData[rms][this.iphasic * step + 2] * xishu;
|
||
rmsFirstC = rmsData[rms][this.iphasic * step + 3] * xishu;
|
||
rmsFA.push([rmsData[rms][0], rmsFirstA]);
|
||
rsmFB.push([rmsData[rms][0], rmsFirstB]);
|
||
rmsFC.push([rmsData[rms][0], rmsFirstC]);
|
||
rfmax = this.getMax(rfmax, rmsFirstA, rmsFirstB, rmsFirstC);
|
||
if (this.isOpen) {
|
||
rfmin = this.getMinOpen(rfmin, rmsFirstA, rmsFirstC);
|
||
} else {
|
||
rfmin = this.getMin(rfmin, rmsFirstA, rmsFirstB, rmsFirstC);
|
||
}
|
||
if (rfmin < rmsvFirstY) {
|
||
rmsvFirstY = rfmin;
|
||
if (rfmin === rmsFirstA) {
|
||
firstZhou = "a";
|
||
} else if (rfmin === rmsFirstB) {
|
||
firstZhou = "b";
|
||
} else {
|
||
firstZhou = "c";
|
||
}
|
||
rmsvFirstX = rmsData[rms][0];
|
||
}
|
||
|
||
rmsSecondA = rmsData[rms][this.iphasic * step + 1];
|
||
rmsSecondB = rmsData[rms][this.iphasic * step + 2];
|
||
rmsSecondC = rmsData[rms][this.iphasic * step + 3];
|
||
rmsSA.push([rmsData[rms][0], rmsSecondA]);
|
||
rsmSB.push([rmsData[rms][0], rmsSecondB]);
|
||
rmsSC.push([rmsData[rms][0], rmsSecondC]);
|
||
rsmax = this.getMax(rsmax, rmsSecondA, rmsSecondB, rmsSecondC);
|
||
if (this.isOpen) {
|
||
rsmin = this.getMinOpen(rsmin, rmsSecondA, rmsSecondC);
|
||
} else {
|
||
rsmin = this.getMin(rsmin, rmsSecondA, rmsSecondB, rmsSecondC);
|
||
}
|
||
if (rsmin < rmsvSecondY) {
|
||
rmsvSecondY = rsmin;
|
||
if (rsmin === rmsSecondA) {
|
||
secondeZhou = "a";
|
||
} else if (rsmin === rmsSecondB) {
|
||
secondeZhou = "b";
|
||
} else {
|
||
secondeZhou = "c";
|
||
}
|
||
rmsvSecondX = rmsData[rms][0];
|
||
}
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
//瞬时一次值最大最小值
|
||
let instantFAn = {};
|
||
let instantSAn = {};
|
||
//let color;
|
||
|
||
let instantF = {};
|
||
let instantS = {};
|
||
let RMSF = {};
|
||
let RMSS = {};
|
||
let RMSFMinDetail = {};
|
||
let RMSSMinDetail = {};
|
||
let shunshiF = {};
|
||
let shunshiS = {};
|
||
let RMSFWave = {};
|
||
let RMSSWave = {};
|
||
let 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);
|
||
rmsFA = rmsFA.slice(0);
|
||
rsmFB = rsmFB.slice(0);
|
||
rmsFC = rmsFC.slice(0);
|
||
|
||
shunshiSA = shunshiSA.slice(0);
|
||
shunshiSB = shunshiSB.slice(0);
|
||
shunshiSC = shunshiSC.slice(0);
|
||
rmsSA = rmsSA.slice(0);
|
||
rsmSB = rsmSB.slice(0);
|
||
rmsSC = rmsSC.slice(0);
|
||
|
||
shunshiF.shunshiFA = shunshiFA;
|
||
shunshiF.shunshiFB = shunshiFB;
|
||
shunshiF.shunshiFC = shunshiFC;
|
||
|
||
shunshiS.shunshiSA = shunshiSA;
|
||
shunshiS.shunshiSB = shunshiSB;
|
||
shunshiS.shunshiSC = shunshiSC;
|
||
|
||
RMSFWave.rmsFA = rmsFA;
|
||
RMSFWave.rmsFB = rsmFB;
|
||
RMSFWave.rmsFC = rmsFC;
|
||
|
||
RMSSWave.rmsSA = rmsSA;
|
||
RMSSWave.rmsSB = rsmSB;
|
||
RMSSWave.rmsSC = rmsSC;
|
||
|
||
//赋值对应的最大最小值
|
||
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;
|
||
}
|
||
RMSF.max = rfmax;
|
||
RMSF.min = rfmin;
|
||
RMSS.max = rsmax;
|
||
RMSS.min = rsmin;
|
||
//精确到小数位2位
|
||
rmsvFirstY = rmsvFirstY;
|
||
rmsvSecondY = rmsvSecondY;
|
||
RMSFMinDetail.rmsvFirstX = rmsvFirstX;
|
||
RMSFMinDetail.rmsvFirstY = rmsvFirstY;
|
||
RMSFMinDetail.firstZhou = firstZhou;
|
||
|
||
RMSSMinDetail.rmsvSecondX = rmsvSecondX;
|
||
RMSSMinDetail.rmsvSecondY = rmsvSecondY;
|
||
RMSSMinDetail.secondeZhou = secondeZhou;
|
||
return this.waveData(
|
||
instantF,
|
||
instantS,
|
||
RMSF,
|
||
RMSS,
|
||
RMSFMinDetail,
|
||
RMSSMinDetail,
|
||
shunshiF,
|
||
shunshiS,
|
||
RMSFWave,
|
||
RMSSWave,
|
||
title,
|
||
unit
|
||
);
|
||
},
|
||
//开始画图
|
||
initWave(waveDatas, time, type, severity, isOpen) {
|
||
//清除之前增加的div
|
||
// $("#wave ~ .bx").remove();
|
||
this.echartlist = []
|
||
$("#rms ~ .bx").remove();
|
||
//设置暂降触发点的位置 一次值与二次值Y轴不同（不是计算出来的）
|
||
// let height = $(window).height() - 90;
|
||
let picHeight;
|
||
let show = true;
|
||
if (isOpen) {
|
||
show = false;
|
||
}
|
||
//let v = $("#interval").val();
|
||
let isvisible = false;
|
||
let cu = null,
|
||
rmscu = null,
|
||
rmscm = null,
|
||
title = null,
|
||
unit = null,
|
||
max = null,
|
||
min = null;
|
||
let a = null,
|
||
b = "",
|
||
c = "";
|
||
let adata = null,
|
||
bdata = null,
|
||
cdata = null;
|
||
let radata = null,
|
||
rbdata = null,
|
||
rcdata = null;
|
||
let rmsvX = 0,
|
||
rmsvY = 0,
|
||
zhou = 0;
|
||
// if (null == waveDatas || waveDatas.length === 1) {
|
||
// picHeight = height;
|
||
// } else if (waveDatas.length > 1) {
|
||
// picHeight = height * 0.45;
|
||
// }
|
||
picHeight = this.vh;
|
||
//this.waveHeight = picHeight
|
||
// this.waveHeight = picHeight
|
||
this.rmsHeight = picHeight;
|
||
// this.$rms.css("height", picHeight);
|
||
// this.$rms.css("width", this.vw);
|
||
// this.rmsHeight = picHeight
|
||
// $wave.css("height", picHeight);
|
||
// $rms.css("height", picHeight);
|
||
let colors = [];
|
||
if (null == waveDatas) {
|
||
cu = [];
|
||
rmscu = [];
|
||
rmscm = [];
|
||
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]];
|
||
rmscu = [[0, waveDatas[0].RMSF.min]];
|
||
rmscm = [[0, waveDatas[0].RMSF.max]];
|
||
max = waveDatas[0].instantF.max;
|
||
min = waveDatas[0].instantF.min;
|
||
adata = waveDatas[0].shunshiF.shunshiFA;
|
||
|
||
radata = waveDatas[0].RMSFWave.rmsFA;
|
||
|
||
rmsvX = waveDatas[0].RMSFMinDetail.rmsvFirstX;
|
||
rmsvY = waveDatas[0].RMSFMinDetail.rmsvFirstY;
|
||
zhou = waveDatas[0].RMSFMinDetail.firstZhou;
|
||
} else {
|
||
cu = [[0, waveDatas[0].instantS.min]];
|
||
rmscu = [[0, waveDatas[0].RMSS.min]];
|
||
rmscm = [[0, waveDatas[0].RMSS.max]];
|
||
max = waveDatas[0].instantS.max;
|
||
min = waveDatas[0].instantS.min;
|
||
adata = waveDatas[0].shunshiS.shunshiSA;
|
||
|
||
radata = waveDatas[0].RMSSWave.rmsSA;
|
||
|
||
rmsvX = waveDatas[0].RMSSMinDetail.rmsvSecondX;
|
||
rmsvY = waveDatas[0].RMSSMinDetail.rmsvSecondY;
|
||
zhou = waveDatas[0].RMSSMinDetail.secondeZhou;
|
||
}
|
||
|
||
colors.push("#DAA520");
|
||
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]];
|
||
rmscu = [[0, waveDatas[0].RMSF.min]];
|
||
rmscm = [[0, waveDatas[0].RMSF.max]];
|
||
max = waveDatas[0].instantF.max;
|
||
min = waveDatas[0].instantF.min;
|
||
adata = waveDatas[0].shunshiF.shunshiFA;
|
||
bdata = waveDatas[0].shunshiF.shunshiFB;
|
||
|
||
radata = waveDatas[0].RMSFWave.rmsFA;
|
||
rbdata = waveDatas[0].RMSFWave.rmsFB;
|
||
|
||
rmsvX = waveDatas[0].RMSFMinDetail.rmsvFirstX;
|
||
rmsvY = waveDatas[0].RMSFMinDetail.rmsvFirstY;
|
||
zhou = waveDatas[0].RMSFMinDetail.firstZhou;
|
||
} else {
|
||
cu = [[0, waveDatas[0].instantS.min]];
|
||
rmscu = [[0, waveDatas[0].RMSS.min]];
|
||
rmscm = [[0, waveDatas[0].RMSS.max]];
|
||
max = waveDatas[0].instantS.max;
|
||
min = waveDatas[0].instantS.min;
|
||
adata = waveDatas[0].shunshiS.shunshiSA;
|
||
bdata = waveDatas[0].shunshiS.shunshiSB;
|
||
|
||
radata = waveDatas[0].RMSSWave.rmsSA;
|
||
rbdata = waveDatas[0].RMSSWave.rmsSB;
|
||
|
||
rmsvX = waveDatas[0].RMSSMinDetail.rmsvSecondX;
|
||
rmsvY = waveDatas[0].RMSSMinDetail.rmsvSecondY;
|
||
zhou = waveDatas[0].RMSSMinDetail.secondeZhou;
|
||
}
|
||
colors.push("#DAA520");
|
||
colors.push("#2E8B57");
|
||
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]];
|
||
rmscu = [[0, waveDatas[0].RMSF.min]];
|
||
rmscm = [[0, waveDatas[0].RMSF.max]];
|
||
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;
|
||
radata = waveDatas[0].RMSFWave.rmsFA;
|
||
rbdata = waveDatas[0].RMSFWave.rmsFB;
|
||
rcdata = waveDatas[0].RMSFWave.rmsFC;
|
||
rmsvX = waveDatas[0].RMSFMinDetail.rmsvFirstX;
|
||
rmsvY = waveDatas[0].RMSFMinDetail.rmsvFirstY;
|
||
zhou = waveDatas[0].RMSFMinDetail.firstZhou;
|
||
} else {
|
||
cu = [[0, waveDatas[0].instantS.min]];
|
||
rmscu = [[0, waveDatas[0].RMSS.min]];
|
||
rmscm = [[0, waveDatas[0].RMSS.max]];
|
||
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;
|
||
radata = waveDatas[0].RMSSWave.rmsSA;
|
||
rbdata = waveDatas[0].RMSSWave.rmsSB;
|
||
rcdata = waveDatas[0].RMSSWave.rmsSC;
|
||
rmsvX = waveDatas[0].RMSSMinDetail.rmsvSecondX;
|
||
rmsvY = waveDatas[0].RMSSMinDetail.rmsvSecondY;
|
||
zhou = waveDatas[0].RMSSMinDetail.secondeZhou;
|
||
}
|
||
colors.push("#DAA520");
|
||
colors.push("#2E8B57");
|
||
colors.push("#A52a2a");
|
||
break;
|
||
}
|
||
if (waveDatas[0].unit === "电压") {
|
||
let xdata = this.wp.listRmsData[0][0];
|
||
if (this.value === 1) {
|
||
this.fz = [
|
||
this.wp.listRmsMinData[0][0],
|
||
(
|
||
(this.wp.listRmsMinData[0][1] * Number(this.wp.pt)) /
|
||
1000
|
||
).toFixed(2),
|
||
];
|
||
// (this.fz * Number(this.wp.pt)) / 1000;
|
||
unit = "kV";
|
||
} else {
|
||
this.fz = [
|
||
this.wp.listRmsMinData[0][0],
|
||
this.wp.listRmsMinData[0][1],
|
||
];
|
||
unit = "V";
|
||
}
|
||
} else {
|
||
unit = "A";
|
||
}
|
||
//把剩余的DIV先拼接好
|
||
for (var step = waveDatas.length - 1; 0 < step && step < waveDatas.length; step--) {
|
||
let rmsId = "rms" + step;
|
||
let newDivRms = $(
|
||
` <div style="height:${this.vh
|
||
};overflow: hidden;"><div class='bx' id='${rmsId}' ></div></div>`
|
||
);
|
||
newDivRms.insertAfter($("#rmsp"));
|
||
$("#" + rmsId).css("height", picHeight);
|
||
$("#" + rmsId).css("width", this.vw);
|
||
}
|
||
} else {
|
||
cu = [];
|
||
// rmscu = [];
|
||
title =
|
||
"变电站名称：" +
|
||
this.subName +
|
||
" 监测点名称：" +
|
||
this.lineName +
|
||
" 发生时刻：" +
|
||
this.time +
|
||
" 暂降(骤升)幅值：" +
|
||
(this.eventValue * 1).toFixed(0) +
|
||
"% 持续时间：" +
|
||
this.persistTime +
|
||
"s";
|
||
}
|
||
//绘制横向第一个波形图
|
||
//绘制瞬时波形图
|
||
// 绘制RMS波形图
|
||
let _this = this;
|
||
|
||
let myChartes = echarts.init(document.getElementById("rms"));
|
||
// console.log("==========", radata);
|
||
let echartsColor = { WordColor: "#000", thread: "#000000", FigureColor: ["#07CCCA ", "#00BFF5", "#FFBF00", "#77DA63", "#D5FF6B", "#Ff6600", "#FF9100", "#5B6E96", "#66FFCC", "#B3B3B3", "#FF00FF", "#CC00FF", "#FF9999"] }
|
||
setTimeout(() => {
|
||
document.getElementById("rms").style.width = '100%';
|
||
document.getElementById("rms").style.height = _this.vh;
|
||
}, 0);
|
||
let option = {
|
||
tooltip: {
|
||
top: "10px",
|
||
trigger: "axis",
|
||
borderColor: "grey",
|
||
formatter: function (params) {
|
||
let tips = "";
|
||
tips += "时刻:" + params[0].data[0] + "</br/>";
|
||
|
||
for (let i = 0; i < params.length; i++) {
|
||
if (params[i].seriesName != "暂降触发点") {
|
||
|
||
tips +=
|
||
params[i].seriesName + ":" + (params[i].value[1] - 0).toFixed(2) + "<br/>";
|
||
}
|
||
}
|
||
return tips;
|
||
},
|
||
// axisPointer: {
|
||
// type: "cross",
|
||
// label: {
|
||
|
||
// color: "#fff",
|
||
// fontSize: '0.8rem',
|
||
// },
|
||
// },
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontStyle: "normal",
|
||
opacity: 0.35,
|
||
fontSize: 14,
|
||
},
|
||
backgroundColor: "rgba(0,0,0,0.55)",
|
||
borderWidth: 0,
|
||
},
|
||
title: {
|
||
left: "center",
|
||
text: title,
|
||
subtitle: {
|
||
text: "电压",
|
||
align: "left",
|
||
},
|
||
textStyle: {
|
||
fontSize: "0.8rem",
|
||
color: _this.DColor ? "#fff" : echartsColor.WordColor,
|
||
},
|
||
},
|
||
legend: {
|
||
right: 50,
|
||
top: 25,
|
||
verticalAlign: "top",
|
||
enabled: true,
|
||
itemDistance: 5,
|
||
textStyle: {
|
||
fontSize: "0.7rem",
|
||
color: _this.DColor ? "#fff" : echartsColor.WordColor,
|
||
rich: {
|
||
a: {
|
||
verticalAlign: "middle",
|
||
},
|
||
},
|
||
|
||
padding: [0, 0, 0, 0], //[上、右、下、左]
|
||
},
|
||
},
|
||
toolbox: {
|
||
right: 20,
|
||
top: 15,
|
||
feature: {
|
||
// 移除默认的 saveAsImage
|
||
// saveAsImage: { title: '保存图片' }
|
||
myCustomDownload: {
|
||
title: '', // 按钮标题
|
||
icon: 'path://M892.342857 463.238095l-73.142857-68.266666-258.438095 258.438095V29.257143h-97.52381v624.152381L204.8 394.971429 131.657143 463.238095l380.342857 380.342857zM107.27619 897.219048h804.571429v97.523809H107.27619z', // 自定义图标路径
|
||
|
||
onclick: function () {
|
||
_this.download()
|
||
}
|
||
}
|
||
}
|
||
},
|
||
xAxis: {
|
||
type: "value",
|
||
name: "时间\n(ms)",
|
||
min: _this.wp.listRmsData[0][0],
|
||
max: _this.wp.listRmsData[_this.wp.listRmsData.length - 1][0] + 1,
|
||
boundaryGap: false,
|
||
title: {
|
||
text: "ms",
|
||
textStyle: {
|
||
fontSize: "0.6rem",
|
||
color: _this.DColor ? "#fff" : echartsColor.WordColor,
|
||
},
|
||
enabled: true,
|
||
align: "high",
|
||
},
|
||
nameTextStyle: {
|
||
fontSize: "0.6rem",
|
||
},
|
||
labels: {
|
||
formatter: function () {
|
||
return this.value;
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
alignWithLabel: true,
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: _this.DColor ? "#fff" : echartsColor.thread,
|
||
},
|
||
onZero: false, //-----------重点
|
||
},
|
||
axisLabel: {
|
||
fontSize: "0.6rem",
|
||
color: _this.DColor ? "#fff" : echartsColor.WordColor,
|
||
// interval: 50,
|
||
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,
|
||
},
|
||
max: rmscm[0][1] * 1.06,
|
||
min: rmscu[0][1] - rmscu[0][1] * 0.04,
|
||
boundaryGap: [0, "100%"],
|
||
showLastLabel: true,
|
||
// max: max.toFixed(2),
|
||
// min: min.toFixed(2),
|
||
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: {
|
||
lineStyle: {
|
||
// 使用深浅的间隔色
|
||
color: [_this.DColor ? "#fff" : echartsColor.thread],
|
||
type: "dashed",
|
||
opacity: 0.5,
|
||
},
|
||
},
|
||
},
|
||
grid: {
|
||
left: "1%",
|
||
right: "45px",
|
||
bottom: "40px",
|
||
top: '70px',
|
||
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: "average",
|
||
itemStyle: {
|
||
color: "#DAA520",
|
||
},
|
||
data: radata,
|
||
},
|
||
{
|
||
name: b,
|
||
type: "line",
|
||
smooth: true,
|
||
symbol: "none",
|
||
sampling: "average",
|
||
itemStyle: {
|
||
color: "#2E8B57",
|
||
},
|
||
data: rbdata,
|
||
},
|
||
{
|
||
name: c,
|
||
type: "line",
|
||
smooth: true,
|
||
symbol: "none",
|
||
sampling: "average",
|
||
itemStyle: {
|
||
color: "#A52a2a",
|
||
},
|
||
data: rcdata,
|
||
},
|
||
{
|
||
name: "暂降触发点",
|
||
type: "scatter",
|
||
symbol: "image://" + url,
|
||
itemStyle: {
|
||
width: 18,
|
||
height: 18,
|
||
},
|
||
data: rmscu,
|
||
},
|
||
// {
|
||
// type: 'flags',
|
||
// color: '#34c0e2',
|
||
// name: '最小暂降幅值',
|
||
// cursor: 'pointer',
|
||
// visible: isvisible,
|
||
// showInLegend: isvisible,
|
||
// data: [{
|
||
// x: rmsvX,
|
||
// title: rmsvY
|
||
// }],
|
||
// onSeries: zhou,
|
||
// shape: 'flag'
|
||
// }
|
||
{
|
||
name: "最小暂降幅值",
|
||
type: "scatter",
|
||
symbol: "image://" + url2,
|
||
itemStyle: {
|
||
width: 45,
|
||
height: 45,
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: [5, -20],
|
||
color: "#000",
|
||
fontSize: "14px",
|
||
fontWeight: "bold",
|
||
borderType: "solid",
|
||
borderWidth: 0.5,
|
||
backgroundColor: "#ffff",
|
||
borderColor: "#0099FF",
|
||
},
|
||
data: [this.fz],
|
||
},
|
||
],
|
||
};
|
||
myChartes.setOption(option)
|
||
// window.echartsArr.push(myChartes);
|
||
setTimeout(() => {
|
||
myChartes.resize();
|
||
this.loading = false;
|
||
}, 500);
|
||
// this.echartlist.push(myChartes)
|
||
this.myChartess=myChartes
|
||
//第一个波形图数据绘制完毕后，绘制后续的波形图
|
||
if (waveDatas !== null && waveDatas.length > 1) {
|
||
let waveDatasTemp = waveDatas.slice(1);
|
||
waveDatasTemp.reverse();
|
||
for (let step = 0; step < waveDatasTemp.length; step++) {
|
||
let waveDataTemp = waveDatasTemp[step];
|
||
|
||
this.drawPics(waveDataTemp, picHeight, step, show, myChartes, rmscm, rmscu, title);
|
||
}
|
||
}
|
||
},
|
||
//绘制剩余横向的波形图
|
||
drawPics(waveDataTemp, picHeight, step, show, myChartes1, rmscm, rmscu, title) {
|
||
step = step + 1;
|
||
//新建瞬时DIV和RMS波形DIV
|
||
// let waveId = 'wave' + step;
|
||
let rmsId = "rms" + step;
|
||
// let v = $("#interval").val();
|
||
let a = "",
|
||
b = "",
|
||
c = "";
|
||
let max, min, unit;
|
||
let adata = null,
|
||
bdata = null,
|
||
cdata = null;
|
||
let radata = null,
|
||
rbdata = null,
|
||
rcdata = null;
|
||
let colors = [];
|
||
switch (this.iphasic) {
|
||
case 1:
|
||
a = waveDataTemp.title.aTitle;
|
||
colors.push("yellow");
|
||
colors.push("#fff");
|
||
colors.push("#fff");
|
||
break;
|
||
case 2:
|
||
a = waveDataTemp.title.aTitle;
|
||
b = waveDataTemp.title.bTitle;
|
||
colors.push("yellow");
|
||
colors.push("green");
|
||
colors.push("#fff");
|
||
break;
|
||
case 3:
|
||
a = waveDataTemp.title.aTitle;
|
||
b = waveDataTemp.title.bTitle;
|
||
c = waveDataTemp.title.cTitle;
|
||
colors.push("yellow");
|
||
colors.push("green");
|
||
colors.push("red");
|
||
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;
|
||
radata = waveDataTemp.RMSFWave.rmsFA;
|
||
rbdata = waveDataTemp.RMSFWave.rmsFB;
|
||
rcdata = waveDataTemp.RMSFWave.rmsFC;
|
||
} else {
|
||
max = waveDataTemp.instantS.max;
|
||
min = waveDataTemp.instantS.min;
|
||
adata = waveDataTemp.shunshiS.shunshiSA;
|
||
bdata = waveDataTemp.shunshiS.shunshiSB;
|
||
cdata = waveDataTemp.shunshiS.shunshiSC;
|
||
radata = waveDataTemp.RMSSWave.rmsSA;
|
||
rbdata = waveDataTemp.RMSSWave.rmsSB;
|
||
rcdata = waveDataTemp.RMSSWave.rmsSC;
|
||
}
|
||
if (waveDataTemp.unit === "电压") {
|
||
if (this.value === 1) {
|
||
unit = "kV";
|
||
} else {
|
||
unit = "V";
|
||
}
|
||
} else {
|
||
unit = "A";
|
||
}
|
||
//绘制rms波形
|
||
let _this = this;
|
||
|
||
let myChartes = echarts.init(document.getElementById(rmsId));
|
||
//debugger
|
||
let titlename = ''
|
||
if (this.boxoList.systemType == "ZL") {
|
||
let str = []
|
||
str = rmsId.split('s')
|
||
let str1 = Number(str[1])
|
||
|
||
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
|
||
}
|
||
}
|
||
|
||
});
|
||
}
|
||
let echartsColor = { WordColor: "#000", thread: "#000000", FigureColor: ["#07CCCA ", "#00BFF5", "#FFBF00", "#77DA63", "#D5FF6B", "#Ff6600", "#FF9100", "#5B6E96", "#66FFCC", "#B3B3B3", "#FF00FF", "#CC00FF", "#FF9999"] }
|
||
let option = {
|
||
tooltip: {
|
||
trigger: "axis",
|
||
borderColor: "grey",
|
||
backgroundColor: "#fff",
|
||
style: {
|
||
color: "#000",
|
||
fontSize: "15px",
|
||
padding: 10,
|
||
},
|
||
formatter: function (params) {
|
||
// console.log(params)
|
||
let tips = "";
|
||
tips += "时刻:" + params[0].data[0] + "</br/>";
|
||
|
||
for (let i = 0; i < params.length; i++) {
|
||
if (params[i].seriesName != "暂降触发点") {
|
||
tips +=
|
||
params[i].seriesName + ":" + (params[i].value[1] - 0).toFixed(2) + "<br/>";
|
||
}
|
||
}
|
||
return tips;
|
||
},
|
||
// axisPointer: {
|
||
// type: "cross",
|
||
// label: {
|
||
// color: "#fff",
|
||
// fontSize: '0.8rem',
|
||
// },
|
||
// },
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontStyle: "normal",
|
||
opacity: 0.35,
|
||
fontSize: 14,
|
||
},
|
||
backgroundColor: "rgba(0,0,0,0.55)",
|
||
borderWidth: 0,
|
||
},
|
||
title: {
|
||
left: "center",
|
||
text: titlename,
|
||
textStyle: {
|
||
fontSize: "0.8rem",
|
||
color: _this.DColor ? "#fff" : echartsColor.WordColor,
|
||
},
|
||
},
|
||
legend: {
|
||
right: 50,
|
||
top: 25,
|
||
verticalAlign: "top",
|
||
enabled: true,
|
||
itemDistance: 5,
|
||
textStyle: {
|
||
fontSize: "0.7rem",
|
||
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)",
|
||
min: _this.wp.listRmsData[0][0],
|
||
max: _this.wp.listRmsData[_this.wp.listRmsData.length - 1][0] + 1,
|
||
boundaryGap: false,
|
||
title: {
|
||
text: "ms",
|
||
textStyle: {
|
||
fontSize: "0.6rem",
|
||
color: _this.DColor ? "#fff" : echartsColor.WordColor,
|
||
},
|
||
enabled: true,
|
||
align: "high",
|
||
},
|
||
labels: {
|
||
formatter: function () {
|
||
return this.value;
|
||
},
|
||
},
|
||
nameTextStyle: {
|
||
fontSize: "0.6rem",
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
alignWithLabel: true,
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: _this.DColor ? "#fff" : echartsColor.thread,
|
||
},
|
||
onZero: false, //-----------重点
|
||
},
|
||
axisLabel: {
|
||
fontSize: "0.6rem",
|
||
color: _this.DColor ? "#fff" : echartsColor.WordColor,
|
||
// interval: 50,
|
||
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,
|
||
},
|
||
// max: rmscm[0][1] * 1.01,
|
||
// min: rmscu[0][1] - rmscu[0][1] * 0.01,
|
||
boundaryGap: [0, "100%"],
|
||
showLastLabel: true,
|
||
// max: max.toFixed(2),
|
||
// min: min.toFixed(2),
|
||
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: {
|
||
lineStyle: {
|
||
// 使用深浅的间隔色
|
||
color: [_this.DColor ? "#fff" : echartsColor.thread],
|
||
type: "dashed",
|
||
opacity: 0.5,
|
||
},
|
||
},
|
||
},
|
||
grid: {
|
||
left: "1%",
|
||
right: "45px",
|
||
bottom: "40px",
|
||
top: '70px',
|
||
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: "average",
|
||
itemStyle: {
|
||
color: "#DAA520",
|
||
},
|
||
data: radata,
|
||
},
|
||
{
|
||
name: b,
|
||
type: "line",
|
||
smooth: true,
|
||
symbol: "none",
|
||
sampling: "average",
|
||
itemStyle: {
|
||
color: "#2E8B57",
|
||
},
|
||
data: rbdata,
|
||
},
|
||
{
|
||
name: c,
|
||
type: "line",
|
||
smooth: true,
|
||
symbol: "none",
|
||
sampling: "average",
|
||
itemStyle: {
|
||
color: "#A52a2a",
|
||
},
|
||
data: rcdata,
|
||
},
|
||
],
|
||
};
|
||
myChartes.setOption(option)
|
||
// window.echartsArr.push(myChartes);
|
||
setTimeout(() => {
|
||
myChartes.resize();
|
||
this.loading = false;
|
||
}, 500);
|
||
// this.echartlist.push(myChartes)
|
||
this[`myChartess${step}`]=myChartes
|
||
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>
|