Files
admin-sjzx/src/components/echarts/rmsboxi.vue

1545 lines
48 KiB
Vue
Raw Normal View History

2024-02-19 13:44:32 +08:00
<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,
},
DColor: {
type: Boolean,
default: false,
},
boxoList: {
type: [Object, Array],
},
wp: {
type: [Object, Array],
},
},
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,
};
},
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 {
this.vh = mainHeight(165,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();
},
methods: {
download() {
// 转换成canvas
html2canvas(document.getElementById("boxr"), {
scale: 2,
}).then(function (canvas) {
// 创建a标签实现下载
var 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(0) +
"% 持续时间:" +
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(0) +
"% 持续时间:" +
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;
}
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({
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) {
var shunData = wp.listWaveData;
var rmsData = wp.listRmsData;
// console.log(
// rmsData
// );
var pt = Number(wp.pt) / 1000;
var ct = Number(wp.ct);
var titleList = wp.waveTitle;
//首先判断当前绘制的是电压还是电流
var xishu = pt; //默认电压二次值转一次值乘以pt
//三相名称
var aTitle = "",
bTitle = "",
cTitle = "",
unit = "电压";
//RMS最小值横、纵坐标、相别名称
var rmsvFirstX = 0,
rmsvFirstY = 0,
rmsvSecondX = 0,
rmsvSecondY = 0,
firstZhou = "a",
secondeZhou = "a";
//每个波形对应的最大最小值
var ifmax, ifmin, ismax, ismin, rfmax, rfmin, rsmax, rsmin;
var 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 (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];
}
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 (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;
}
}
//RMS值--同时还需要获取出RMS值的一次、二次的最大最小值
for (var rms = 0; rms < rmsData.length; rms++) {
if (rmsData[rms][this.iphasic * step + 1] === undefined) {
break;
}
//根据波形数据相的数量来筛选数据
switch (this.iphasic) {
case 1:
var 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];
}
var 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:
var rmsFirstA = rmsData[rms][this.iphasic * step + 1] * xishu;
var 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];
}
var rmsSecondA = rmsData[rms][this.iphasic * step + 1];
var 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:
var rmsFirstA = rmsData[rms][this.iphasic * step + 1] * xishu;
var rmsFirstB = rmsData[rms][this.iphasic * step + 2] * xishu;
var 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];
}
var rmsSecondA = rmsData[rms][this.iphasic * step + 1];
var rmsSecondB = rmsData[rms][this.iphasic * step + 2];
var 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;
}
}
}
//瞬时一次值最大最小值
var instantFAn = {};
var instantSAn = {};
//var color;
var instantF = {};
var instantS = {};
var RMSF = {};
var RMSS = {};
var RMSFMinDetail = {};
var RMSSMinDetail = {};
var shunshiF = {};
var shunshiS = {};
var RMSFWave = {};
var RMSSWave = {};
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);
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();
$("#rms ~ .bx").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 = [],
rmscu = [],
rmscm = [],
title,
unit,
max,
min;
var a = "",
b = "",
c = "";
var adata = [],
bdata = [],
cdata = [];
var radata = [],
rbdata = [],
rcdata = [];
var 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);
var 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("#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]];
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("#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]];
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("#FFCC00");
colors.push("#009900");
colors.push("#CC0000");
break;
}
if (waveDatas[0].unit === "电压") {
var 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 = 1; step < waveDatas.length; step++) {
var rmsId = "rms" + step;
var newDivRms = $(
` <div style="height:${
this.vh
};overflow: hidden;"><div class='bx' id='${rmsId}' style="zoom:${
this.zoom
};transform:scale(${
1 / this.zoom
});transform-origin:0 0;"></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 * 100).toFixed(0) +
"% 持续时间:" +
this.persistTime +
"s";
}
//绘制横向第一个波形图
//绘制瞬时波形图
// 绘制RMS波形图
let _this = this;
var 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);
var option = {
tooltip: {
top: "10px",
trigger: "axis",
borderColor: "grey",
formatter: function (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;
},
// 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.35)",
borderWidth: 0,
},
title: {
left: "center",
text: "电网侧-电压 "+title,
subtitle: {
text: "电压",
align: "left",
},
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)",
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: "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",
sampling: "lttb",
itemStyle: {
color: "#FFCC00",
},
data: radata,
},
{
name: b,
type: "line",
smooth: true,
symbol: "none",
sampling: "lttb",
itemStyle: {
color: "#009900",
},
data: rbdata,
},
{
name: c,
type: "line",
smooth: true,
symbol: "none",
sampling: "lttb",
itemStyle: {
color: "#CC0000",
},
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);
//第一个波形图数据绘制完毕后,绘制后续的波形图
if (waveDatas !== null && waveDatas.length > 1) {
var 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,rmscm,rmscu,title);
}
}
},
//绘制剩余横向的波形图
drawPics(waveDataTemp, picHeight, step, show, myChartes1,rmscm,rmscu,title) {
step = step + 1;
//新建瞬时DIV和RMS波形DIV
// var waveId = 'wave' + step;
var rmsId = "rms" + step;
// var v = $("#interval").val();
var a = "",
b = "",
c = "";
var max, min, unit;
var adata = [],
bdata = [],
cdata = [];
var radata = [],
rbdata = [],
rcdata = [];
var 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;
var myChartes = echarts.init(document.getElementById(rmsId));
//debugger
if(this.boxoList.systemType == "ZL"){
let str =[]
str = rmsId.split('s')
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
}
}
});
}
let echartsColor = {WordColor:"#000",thread:"#000000",FigureColor:["#07CCCA ","#00BFF5","#FFBF00","#77DA63","#D5FF6B","#Ff6600","#FF9100","#5B6E96","#66FFCC","#B3B3B3","#FF00FF","#CC00FF","#FF9999"]}
var option = {
tooltip: {
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]-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.35)",
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)",
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: "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",
sampling: "lttb",
itemStyle: {
color: "#FFCC00",
},
data: radata,
},
{
name: b,
type: "line",
smooth: true,
symbol: "none",
sampling: "lttb",
itemStyle: {
color: "#009900",
},
data: rbdata,
},
{
name: c,
type: "line",
smooth: true,
symbol: "none",
sampling: "lttb",
itemStyle: {
color: "#CC0000",
},
data: rcdata,
},
],
};
myChartes.setOption(option)
// window.echartsArr.push(myChartes);
setTimeout(() => {
myChartes.resize();
this.loading = false;
}, 500);
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>