Web/admin-sjzx
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改测试bug

Browse Source
This commit is contained in:
GGJ
2024-12-06 16:11:33 +08:00
parent 5db2b1428c
commit 366f561aa5
18 changed files with 541 additions and 456 deletions
Download Patch File Download Diff File Expand all files Collapse all files

218
src/components/echarts/shushiboxi.vue
View File

@@ -5,14 +5,8 @@
<div class="bx" id="wave"></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 style="position: absolute; right: 10px; top: 0px; z-index: 20000" type="primary" link
icon="el-icon-Download" title="生成图片" @click="download">
下载
</el-button>
</div>
@@ -23,6 +17,8 @@ import $ from 'jquery'
import * as echarts from 'echarts'
import { mainHeight } from '@/utils/layout'
import url from '@/assets/img/point.png'
import { t } from 'vxe-table'
import { set } from '@vueuse/core'
export default {
props: {
value: {
@@ -72,15 +68,16 @@ export default {
titles: '',
vh: null,
vw: null,
zoom: ''
zoom: '',
echartlist: null
}
},
created() {
if (this.flag == 1) {
this.vh = mainHeight(165).height
} else {
this.vh = mainHeight(165,2).height
} else {
this.vh = mainHeight(165, 2).height
}
this.vw = '100%'
},
@@ -96,7 +93,7 @@ export default {
}
},
mounted() {
// console.log(`123123`,this.boxoList,this.wp);
// console.log(`123123`,this.boxoList,this.wp);
this.zoom = 1 / document.body.style.zoom
window.addEventListener('resize', () => {
this.zoom = 1 / document.body.style.zoom
@@ -107,13 +104,27 @@ export default {
})
},
methods: {
download() {
backbxlb() {
if (this.echartlist.length>0) {
console.log(123111);
this.waveDatas = []
this.echartlist.forEach(item => {
item.dispose(); // 销毁echarts实例
})
}
},
download() {
// 转换成canvas
html2canvas(document.getElementById('boxsj'), {
scale: 2
}).then(function (canvas) {
// 创建a标签，实现下载
var creatIMg = document.createElement('a')
let creatIMg = document.createElement('a')
creatIMg.download = '瞬间波形.png' // 设置下载的文件名，
creatIMg.href = canvas.toDataURL() // 下载url
creatIMg.click()
@@ -190,18 +201,18 @@ export default {
if (this.iphasic === 0) {
this.iphasic = 1
}
var picCounts = (this.wp.waveTitle.length - 1) / this.iphasic
let picCounts = (this.wp.waveTitle.length - 1) / this.iphasic
this.waveDatas = []
//循环筛选需求的数据
for (var i = 0; i < picCounts; i++) {
for (let i = 0; i < picCounts; i++) {
this.fliteWaveData(this.wp, i)
this.waveDatas.push({
instantF :this.instantF,
instantS :this.instantS,
shunshiF :this.shunshiF,
shunshiS :this.shunshiS,
title :this.title,
unit :this.unit,
instantF: this.instantF,
instantS: this.instantS,
shunshiF: this.shunshiF,
shunshiS: this.shunshiS,
title: this.title,
unit: this.unit,
})
@@ -224,21 +235,21 @@ export default {
//获取横向一个波形的全部数据，包括瞬时波形的一次、二次值，如果是电压的话，还需要计算出对应的最大最小值
fliteWaveData(wp, step) {
var shunData = wp.listWaveData
var pt = Number(wp.pt) / 1000
var ct = Number(wp.ct)
var titleList = wp.waveTitle
let shunData = wp.listWaveData
let pt = Number(wp.pt) / 1000
let ct = Number(wp.ct)
let titleList = wp.waveTitle
//首先判断当前绘制的是电压还是电流
var xishu = pt //默认电压，二次值转一次值乘以pt
let xishu = pt //默认电压，二次值转一次值乘以pt
//三相名称
var aTitle = '',
let aTitle = '',
bTitle = '',
cTitle = '',
unit = '电压'
//每个波形对应的最大最小值
var ifmax, ifmin, ismax, ismin
let ifmax, ifmin, ismax, ismin
var shunshiFA = [],
let shunshiFA = [],
shunshiFB = [],
shunshiFC = [],
shunshiSA = [],
@@ -250,7 +261,7 @@ export default {
xishu = ct
unit = '电流'
}
for (var i = 1; i <= this.iphasic; i++) {
for (let i = 1; i <= this.iphasic; i++) {
switch (i) {
case 1:
aTitle = titleList[this.iphasic * step + i].substring(1)
@@ -271,42 +282,50 @@ export default {
}
//瞬时值--同时还需要获取出瞬时值的一次、二次的最大最小值
for (var shun = 0; shun < shunData.length; shun++) {
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:
var shunFirstA = shunData[shun][this.iphasic * step + 1] * xishu
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]
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
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)
var shunSecondA = shunData[shun][this.iphasic * step + 1]
var shunSecondB = shunData[shun][this.iphasic * step + 2]
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:
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
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])
@@ -318,9 +337,9 @@ export default {
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]
let shunSecondA = shunData[shun][this.iphasic * step + 1]
let shunSecondB = shunData[shun][this.iphasic * step + 2]
let 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])
@@ -336,15 +355,15 @@ export default {
}
}
//瞬时一次值最大最小值
var instantFAn = {}
var instantSAn = {}
//var color;
let instantFAn = {}
let instantSAn = {}
//let color;
var instantF = {}
var instantS = {}
var shunshiF = {}
var shunshiS = {}
var title = {}
let instantF = {}
let instantS = {}
let shunshiF = {}
let shunshiS = {}
let title = {}
//三相名称
title.aTitle = aTitle
@@ -383,38 +402,38 @@ export default {
}
return this.waveData(instantF, instantS, shunshiF, shunshiS, title, unit)
return this.waveData(instantF, instantS, shunshiF, shunshiS, title, unit)
},
//开始画图
initWave(waveDatas, time, type, severity, isOpen) {
this.echartlist=[]
//清除之前增加的div
// $("#wave ~ .bx1").remove();
$('div.bx1').remove()
//设置暂降触发点的位置 一次值与二次值Y轴不同（不是计算出来的）
// var height = $(window).height() - 90;
var picHeight
var show = true
// let height = $(window).height() - 90;
let picHeight
let 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 = []
//let v = $("#interval").val();
let isvisible = false
let cu = null,
title = null,
unit = null,
max = null,
min = null
let a = null,
b = null,
c = null
let adata = null,
bdata = null,
cdata = null
picHeight = this.vh
// this.$wave.css('height', picHeight)
// this.$wave.css('width', this.vw)
var colors = []
let colors = []
if (null == waveDatas) {
cu = []
title = '该事件暂无波形图'
@@ -499,9 +518,9 @@ export default {
unit = 'A'
}
//把剩余的DIV先拼接好
for (var step = 1; step < waveDatas.length; step++) {
var waveId = 'wave' + step
var newDivShunshi = $(` <div style="height:${this.vh};overflow: hidden;">
for (let step = 1; step < waveDatas.length; step++) {
let waveId = 'wave' + step
let newDivShunshi = $(` <div style="height:${this.vh};overflow: hidden;">
<div class='bx1' id='${waveId}'>
</div>
</div>`)
@@ -531,13 +550,13 @@ export default {
let wave = document.getElementById('wave')
let _this = this
var myChartes = echarts.init(wave)
let echartsColor = {WordColor:"#000",thread:"#000000",FigureColor:["#07CCCA ","#00BFF5","#FFBF00","#77DA63","#D5FF6B","#Ff6600","#FF9100","#5B6E96","#66FFCC","#B3B3B3","#FF00FF","#CC00FF","#FF9999"]}
let myChartes = echarts.init(wave)
let echartsColor = { WordColor: "#000", thread: "#000000", FigureColor: ["#07CCCA ", "#00BFF5", "#FFBF00", "#77DA63", "#D5FF6B", "#Ff6600", "#FF9100", "#5B6E96", "#66FFCC", "#B3B3B3", "#FF00FF", "#CC00FF", "#FF9999"] }
setTimeout(() => {
wave.style.width ='100%';
wave.style.height =_this.vh;
wave.style.width = '100%';
wave.style.height = _this.vh;
}, 0);
var option = {
let option = {
tooltip: {
top: '10px',
trigger: 'axis',
@@ -550,10 +569,10 @@ export default {
},
formatter: function (params) {
// console.log(params)
var tips = ''
let tips = ''
tips += '时刻:' + params[0].data[0] + '</br/>'
for (var i = 0; i < params.length; i++) {
for (let i = 0; i < params.length; i++) {
if (params[i].seriesName != '暂降触发点') {
tips += params[i].seriesName + ':' + (params[i].value[1] - 0).toFixed(2) + '<br/>'
}
@@ -776,13 +795,14 @@ export default {
myChartes.resize()
this.loading = false
}, 400)
this.echartlist.push(myChartes)
//第一个波形图数据绘制完毕后，绘制后续的波形图
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]
for (let step = 0; step < waveDatasTemp.length; step++) {
let waveDataTemp = waveDatasTemp[step]
this.drawPics(waveDataTemp, picHeight, step, show, myChartes, title)
}
}
@@ -792,15 +812,15 @@ export default {
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 = []
let waveId = 'wave' + step
let a = null,
b = null,
c = null
let max, min, unit
let adata = null,
bdata = null,
cdata = null
let colors = []
switch (this.iphasic) {
case 1:
a = waveDataTemp.title.aTitle
@@ -847,13 +867,14 @@ export default {
} else {
unit = 'A'
}
let titlename = ''
// 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) {
@@ -894,18 +915,18 @@ export default {
}
})
}
var myChartes = echarts.init(waveIds)
let echartsColor = {WordColor:"#000",thread:"#000000",FigureColor:["#07CCCA ","#00BFF5","#FFBF00","#77DA63","#D5FF6B","#Ff6600","#FF9100","#5B6E96","#66FFCC","#B3B3B3","#FF00FF","#CC00FF","#FF9999"]}
var option = {
let myChartes = echarts.init(waveIds)
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',
formatter: function (params) {
// console.log(params)
var tips = ''
let tips = ''
tips += '时刻:' + params[0].data[0] + '</br/>'
for (var i = 0; i < params.length; i++) {
for (let i = 0; i < params.length; i++) {
if (params[i].seriesName != '暂降触发点') {
tips += params[i].seriesName + ':' + (params[i].value[1] - 0).toFixed(2) + '<br/>'
}
@@ -1119,6 +1140,7 @@ export default {
myChartes.resize()
this.loading = false
}, 400)
this.echartlist.push(myChartes)
echarts.connect([myChartes1, myChartes])
},
//根据多个值的比较返回其中最大值