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

修改波形样式

Browse Source
This commit is contained in:
guanj
2025-11-27 15:25:33 +08:00
parent e824f4823a
commit 800ec7f0cf
4 changed files with 383 additions and 289 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,6 @@
<template>
<div v-loading="loading" class="boxbx"
style="position: relative;height: 100%;">
<div id="boxsj" >
<div v-loading="loading" class="boxbx" style="position: relative; height: 100%">
<div id="boxsj">
<div id="shushi" :style="`height:${vh};overflow: hidden;`">
<div class="bx" id="wave"></div>
</div>
@@ -16,7 +15,7 @@ import $ from 'jquery'
import * as echarts from 'echarts'
import url from '@/assets/img/point.png'
// 创建Worker
let waveDataWorker: Worker | null = null;
let waveDataWorker: Worker | null = null
interface WaveData {
instantF: { max: number; min: number }
instantS: { max: number; min: number }
@@ -98,18 +97,21 @@ const vh = computed(() => {
const vw = computed(() => '100%')
watch(() => props.value, (newVal) => {
if (newVal == 2) {
initWaves()
} else {
$('#wave1').remove()
initWaves()
watch(
() => props.value,
newVal => {
if (newVal == 2) {
initWaves()
} else {
$('#wave1').remove()
initWaves()
}
}
})
)
onMounted(() => {
const zoomValue = document.body.style.getPropertyValue('zoom');
zoom.value = 1 / (zoomValue ? parseFloat(zoomValue) : 1);
const zoomValue = document.body.style.getPropertyValue('zoom')
zoom.value = 1 / (zoomValue ? parseFloat(zoomValue) : 1)
window.addEventListener('resize', handleResize)
nextTick(() => {
@@ -120,27 +122,27 @@ onMounted(() => {
})
onBeforeUnmount(() => {
console.log('组件卸载');
console.log('组件卸载')
if (waveDataWorker) {
waveDataWorker.terminate();
waveDataWorker = null;
waveDataWorker.terminate()
waveDataWorker = null
}
backbxlb();
window.removeEventListener('resize', handleResize);
backbxlb()
window.removeEventListener('resize', handleResize)
})
const handleResize = () => {
const zoomValue = document.body.style.getPropertyValue('zoom');
zoom.value = 1 / (zoomValue ? parseFloat(zoomValue) : 1);
const zoomValue = document.body.style.getPropertyValue('zoom')
zoom.value = 1 / (zoomValue ? parseFloat(zoomValue) : 1)
}
const download = () => {
const boxsj = document.getElementById('boxsj')
if (boxsj) {
html2canvas(boxsj, {
scale: 2,
scale: 2
}).then(function (canvas) {
const creatIMg = document.createElement('a')
creatIMg.download = '瞬间波形.png'
@@ -170,49 +172,56 @@ const waveData = (instantF: any, instantS: any, shunshiF: any, shunshiS: any, ti
// 在组件中修改initWaves函数
const initWaves = () => {
if (props.wp) {
loading.value = true;
loading.value = true
iphasic.value = props.wp.iphasic || 1
// 使用Web Worker处理数据
if (!waveDataWorker) {
waveDataWorker = new Worker(new URL('./shuWorker.js', import.meta.url));
waveDataWorker = new Worker(new URL('./shuWorker.js', import.meta.url))
waveDataWorker.onmessage = function (e) {
const data = e.data;
const data = e.data
titles.value = data.titles;
iphasic.value = data.iphasic;
time.value = data.time;
type.value = data.type;
severity.value = data.severity;
titles.value = data.titles
iphasic.value = data.iphasic
time.value = data.time
type.value = data.type
severity.value = data.severity
initWave(data.waveDatas, data.time, data.type, data.severity, isOpen.value);
loading.value = false;
};
initWave(data.waveDatas, data.time, data.type, data.severity, isOpen.value)
loading.value = false
}
waveDataWorker.onerror = function (error) {
console.error('Worker error:', error);
loading.value = false;
console.error('Worker error:', error)
loading.value = false
// 备用方案：在主线程处理数据
// processDataInMainThread();
};
}
}
// 发送数据到Worker
waveDataWorker.postMessage(JSON.stringify({
wp: props.wp,
value: props.value,
iphasic: iphasic.value,
isOpen: isOpen.value,
boxoList: props.boxoList
}));
waveDataWorker.postMessage(
JSON.stringify({
wp: props.wp,
value: props.value,
iphasic: iphasic.value,
isOpen: isOpen.value,
boxoList: props.boxoList
})
)
} else {
initWave(null, null, null, null, null);
initWave(null, null, null, null, null)
}
}
const initWave = (waveDatas: WaveData[] | null, time: string | null, type: string | null, severity: string | null, isOpen: boolean | null) => {
const initWave = (
waveDatas: WaveData[] | null,
time: string | null,
type: string | null,
severity: string | null,
isOpen: boolean | null
) => {
$('div.bx1').remove()
let picHeight = vh.value
@@ -221,9 +230,14 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
let cu: number[][] = []
let titleText = ''
let unit = ''
let max: any = 0, min: any = 0
let a: string | null = null, b: string | null = null, c: string | null = null
let adata: number[][] = [], bdata: number[][] = [], cdata: number[][] = []
let max: any = 0,
min: any = 0
let a: string | null = null,
b: string | null = null,
c: string | null = null
let adata: number[][] = [],
bdata: number[][] = [],
cdata: number[][] = []
const colors: string[] = []
if (!waveDatas) {
@@ -307,14 +321,34 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
$(`#${waveId}`).css('height', picHeight).css('width', vw.value)
}
} else {
titleText = `变电站名称：${subName.value} 监测点名称：${lineName.value} 发生时刻：${time} 残余电压：${(Number(eventValue.value) * 1).toFixed(0)}% 持续时间：${persistTime.value}s`
titleText = `变电站名称：${subName.value} 监测点名称：${lineName.value} 发生时刻：${time} 残余电压：${(
Number(eventValue.value) * 1
).toFixed(0)}% 持续时间：${persistTime.value}s`
}
const wave = document.getElementById('wave')
if (!wave) return
const myChartes = echarts.init(wave)
const echartsColor = { WordColor: "#000", thread: "#000", FigureColor: ["#07CCCA ", "#00BFF5", "#FFBF00", "#77DA63", "#D5FF6B", "#Ff6600", "#FF9100", "#5B6E96", "#66FFCC", "#B3B3B3", "#FF00FF", "#CC00FF", "#FF9999"] }
const echartsColor = {
WordColor: '#000',
thread: '#000',
FigureColor: [
'#07CCCA ',
'#00BFF5',
'#FFBF00',
'#77DA63',
'#D5FF6B',
'#Ff6600',
'#FF9100',
'#5B6E96',
'#66FFCC',
'#B3B3B3',
'#FF00FF',
'#CC00FF',
'#FF9999'
]
}
setTimeout(() => {
wave.style.width = '100%'
@@ -335,7 +369,12 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
let tips = '时刻:' + params[0].data[0] + '</br/>'
for (let i = 0; i < params.length; i++) {
if (params[i].seriesName != '暂降触发点') {
tips += params[i].marker + params[i].seriesName + ':' + (params[i].value[1] - 0).toFixed(2) + '<br/>'
tips +=
params[i].marker +
params[i].seriesName +
':' +
(params[i].value[1] - 0).toFixed(2) +
'<br/>'
}
}
return tips
@@ -345,7 +384,7 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
fontStyle: 'normal',
opacity: 0.35,
fontSize: 14
},
},
backgroundColor: 'rgba(0,0,0,0.55)',
borderWidth: 0
},
@@ -364,7 +403,7 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
enabled: true,
itemDistance: 5,
textStyle: {
fontSize: '14px',
fontSize:12,
color: props.DColor ? '#000' : echartsColor.WordColor,
rich: { a: { verticalAlign: 'middle' } },
padding: [0, 0, 0, 0]
@@ -390,14 +429,14 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
title: {
text: 'ms',
textStyle: {
fontSize: '14px',
fontSize: '12px',
color: props.DColor ? '#000' : echartsColor.WordColor
},
enabled: true,
align: 'high'
},
splitLine: { show: false },
nameTextStyle: { fontSize: '14px' },
nameTextStyle: { fontSize: '12px' },
axisTick: { alignWithLabel: true },
axisLine: {
lineStyle: {
@@ -406,7 +445,7 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
onZero: false
},
axisLabel: {
fontSize: '14px',
fontSize: '12px',
color: props.DColor ? '#000' : echartsColor.WordColor,
formatter: function (value: number) {
if (valA.value != (value - 0).toFixed(0)) {
@@ -433,7 +472,7 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
min: min.toFixed(2) > 0 ? min.toFixed(2) - min.toFixed(2) * 0.1 : min.toFixed(2) * 1.1,
opposite: false,
nameTextStyle: {
fontSize: '14px',
fontSize: '12px',
color: props.DColor ? '#000' : echartsColor.WordColor
},
axisLine: {
@@ -444,7 +483,7 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
onZero: false
},
axisLabel: {
fontSize: '14px',
fontSize: '12px',
color: props.DColor ? '#000' : echartsColor.WordColor,
formatter: function (value: number) {
return (value - 0).toFixed(2)
@@ -460,9 +499,9 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
},
grid: {
left: '1%',
right: '2.8%',
right: '45px',
bottom: '40px',
top: '70px',
top: '60px',
containLabel: true
},
dataZoom: [
@@ -537,12 +576,25 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
}
}
const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show: boolean, myChartes1: echarts.ECharts, title: string) => {
const drawPics = (
waveDataTemp: WaveData,
picHeight: string,
step: number,
show: boolean,
myChartes1: echarts.ECharts,
title: string
) => {
step = step + 1
const waveId = 'wave' + step
let a: string | null = null, b: string | null = null, c: string | null = null
let max: any = 0, min: any = 0, unit = ''
let adata: number[][] = [], bdata: number[][] = [], cdata: number[][] = []
let a: string | null = null,
b: string | null = null,
c: string | null = null
let max: any = 0,
min: any = 0,
unit = ''
let adata: number[][] = [],
bdata: number[][] = [],
cdata: number[][] = []
const colors: string[] = []
switch (iphasic.value) {
@@ -612,7 +664,25 @@ const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show:
if (!waveIds) return
const myChartes = echarts.init(waveIds)
const echartsColor = { WordColor: "#000", thread: "#000", FigureColor: ["#07CCCA ", "#00BFF5", "#FFBF00", "#77DA63", "#D5FF6B", "#Ff6600", "#FF9100", "#5B6E96", "#66FFCC", "#B3B3B3", "#FF00FF", "#CC00FF", "#FF9999"] }
const echartsColor = {
WordColor: '#000',
thread: '#000',
FigureColor: [
'#07CCCA ',
'#00BFF5',
'#FFBF00',
'#77DA63',
'#D5FF6B',
'#Ff6600',
'#FF9100',
'#5B6E96',
'#66FFCC',
'#B3B3B3',
'#FF00FF',
'#CC00FF',
'#FF9999'
]
}
const option = {
tooltip: {
@@ -638,7 +708,7 @@ const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show:
},
title: {
left: 'center',
text: '',//titlename || title,
text: '', //titlename || title,
textStyle: {
fontSize: '16px',
color: props.DColor ? '#000' : echartsColor.WordColor
@@ -651,7 +721,7 @@ const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show:
enabled: true,
itemDistance: 5,
textStyle: {
fontSize: '14px',
fontSize: 12,
color: props.DColor ? '#000' : echartsColor.WordColor,
rich: { a: { verticalAlign: 'middle' } },
padding: [0, 0, 0, 0]
@@ -666,7 +736,7 @@ const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show:
title: {
text: 'ms',
textStyle: {
fontSize: '14px',
fontSize: '12px',
color: props.DColor ? '#000' : echartsColor.WordColor
},
enabled: true,
@@ -680,9 +750,9 @@ const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show:
},
onZero: false
},
nameTextStyle: { fontSize: '14px' },
nameTextStyle: { fontSize: '12px' },
axisLabel: {
fontSize: '14px',
fontSize: '12px',
color: props.DColor ? '#000' : echartsColor.WordColor,
formatter: function (value: number) {
if (valB.value != (value - 0).toFixed(0)) {
@@ -709,7 +779,7 @@ const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show:
min: min.toFixed(2) > 0 ? min.toFixed(2) - min.toFixed(2) * 0.1 : min.toFixed(2) * 1.1,
opposite: false,
nameTextStyle: {
fontSize: '14px',
fontSize: '12px',
color: props.DColor ? '#000' : echartsColor.WordColor
},
axisLine: {
@@ -720,7 +790,7 @@ const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show:
onZero: false
},
axisLabel: {
fontSize: '14px',
fontSize: '12px',
color: props.DColor ? '#000' : echartsColor.WordColor,
formatter: function (value: number) {
return (value - 0).toFixed(2)
@@ -736,9 +806,9 @@ const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show:
},
grid: {
left: '1%',
right: '2.8%',
right: '45px',
bottom: '40px',
top: '70px',
top: '60px',
containLabel: true
},
dataZoom: [
@@ -793,11 +863,21 @@ const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show:
myChartes.setOption(option)
switch (step) {
case 1: myChartess1.value = myChartes; break
case 2: myChartess2.value = myChartes; break
case 3: myChartess3.value = myChartes; break
case 4: myChartess4.value = myChartes; break
case 5: myChartess5.value = myChartes; break
case 1:
myChartess1.value = myChartes
break
case 2:
myChartess2.value = myChartes
break
case 3:
myChartess3.value = myChartes
break
case 4:
myChartess4.value = myChartes
break
case 5:
myChartess5.value = myChartes
break
}
setTimeout(() => {
@@ -810,7 +890,14 @@ const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show:
const backbxlb = () => {
waveDatas.value = []
const charts = [myChartess.value, myChartess1.value, myChartess2.value, myChartess3.value, myChartess4.value, myChartess5.value]
const charts = [
myChartess.value,
myChartess1.value,
myChartess2.value,
myChartess3.value,
myChartess4.value,
myChartess5.value
]
charts.forEach(chart => {
if (chart) {
@@ -826,13 +913,11 @@ const backbxlb = () => {
myChartess5.value = null
// echarts.disconnect(charts.filter(Boolean) as echarts.ECharts[])
charts
.filter(Boolean)
.forEach(chart => {
if (chart && typeof chart.dispose === 'function') {
chart.dispose();
}
});
charts.filter(Boolean).forEach(chart => {
if (chart && typeof chart.dispose === 'function') {
chart.dispose()
}
})
}
const getMax = (temp: number, tempA: number, tempB: number, tempC: number): number => {
@@ -860,4 +945,4 @@ const getMinOpen = (temp: number, tempA: number, tempB: number): number => {
temp = temp < tempB ? temp : tempB
return temp
}
</script>
</script>