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:45:42 +08:00
parent 800ec7f0cf
commit 1a146afcd7
3 changed files with 219 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/cockpit/transientStatistics/components/transientStatisticsDetail.vue
View File

@@ -150,7 +150,7 @@ const tableStore: any = new TableStore({
nextTick(() => {
if (waveFormAnalysisRef.value) {
// waveFormAnalysisRef.value.setHeight(false, 360)
waveFormAnalysisRef.value.setHeight(1, 50, 1.8)
waveFormAnalysisRef.value.setHeight(999, 130, 1.6666666)
}
})
await analyseWave(row.id)

257
src/components/echarts/rmsboxi.vue
View File

@@ -1,8 +1,5 @@
<template>
<div v-loading="loading"
style="position: relative;height: 100%;">
<div v-loading="loading" style="position: relative; height: 100%">
<div id="boxr">
<div id="rmsp" :style="`height:${vh};overflow: hidden;`">
<div class="bx" id="rms"></div>
@@ -16,6 +13,7 @@ import { ref, computed, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'
import html2canvas from 'html2canvas'
import $ from 'jquery'
import * as echarts from 'echarts'
import { mainHeight } from '@/utils/layout'
import url from '@/assets/img/point.png'
import url2 from '@/assets/img/dw.png'
const worker = ref<Worker | null>(null)
@@ -66,7 +64,7 @@ interface WaveData {
interface Props {
value?: number
flag?: string | number | boolean
parentHeight?: string | number | boolean
parentHeight?: any
DColor?: boolean
boxoList?: any
wp?: any
@@ -78,7 +76,7 @@ const props = withDefaults(defineProps<Props>(), {
parentHeight: 0,
DColor: false,
boxoList: () => ({}),
wp: () => ({}),
wp: () => ({})
})
const loading = ref(true)
@@ -110,34 +108,41 @@ const myChartess4 = ref<echarts.ECharts | null>(null)
const myChartess5 = ref<echarts.ECharts | null>(null)
const vh = computed(() => {
if (props.flag == 1) {
return '690px'
} else if (props.parentHeight != 0) {
if (props.parentHeight == 999) {
return '310px'
} else if (props.parentHeight != 0) {
return mainHeight(props.parentHeight, 2).height
}
if (props.flag == 1) {
return mainHeight(200).height
} else {
return '350px'
return mainHeight(200, 2).height
}
})
const vw = computed(() => '100%')
watch(() => props.value, (newVal) => {
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)
// 初始化 Web Worker
worker.value = new Worker(new URL('./rmsWorker.js', import.meta.url));
worker.value.onmessage = (e) => {
worker.value = new Worker(new URL('./rmsWorker.js', import.meta.url))
worker.value.onmessage = e => {
if (e.data.success) {
const data = e.data
titles.value = data.titles
@@ -171,15 +176,15 @@ onBeforeUnmount(() => {
})
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 boxr = document.getElementById('boxr')
if (boxr) {
html2canvas(boxr, {
scale: 2,
scale: 2
}).then(function (canvas) {
const creatIMg = document.createElement('a')
creatIMg.download = 'rms波形.png'
@@ -195,13 +200,14 @@ const query = () => {
if (props.wp) {
// 使用 Worker 处理数据
if (worker.value) {
worker.value.postMessage(JSON.stringify({
worker.value.postMessage(
JSON.stringify({
wp: props.wp,
isOpen: isOpen.value,
value: props.value,
boxoList: props.boxoList
}))
})
)
}
} else {
initWave(null, null, null, null, null)
@@ -240,7 +246,6 @@ const waveData = (
const initWaves = () => {
if (props.wp) {
iphasic.value = props.wp.iphasic || 1
const picCounts = (props.wp.waveTitle.length - 1) / iphasic.value
waveDatas.value = []
@@ -266,15 +271,29 @@ const initWaves = () => {
}
const fliteWaveData = (wp: any, step: number): WaveData => {
const rmsData = wp.listRmsData
const pt = Number(wp.pt) / 1000
const ct = Number(wp.ct)
const titleList = wp.waveTitle
let xishu = pt
let aTitle = '', bTitle = '', cTitle = '', unit = '电压'
let rmsvFirstX = 0, rmsvFirstY = 0, rmsvSecondX = 0, rmsvSecondY = 0, firstZhou = 'a', secondeZhou = 'a'
let ifmax = 0, ifmin = 0, ismax = 0, ismin = 0, rfmax = 0, rfmin = 0, rsmax = 0, rsmin = 0
let aTitle = '',
bTitle = '',
cTitle = '',
unit = '电压'
let rmsvFirstX = 0,
rmsvFirstY = 0,
rmsvSecondX = 0,
rmsvSecondY = 0,
firstZhou = 'a',
secondeZhou = 'a'
let ifmax = 0,
ifmin = 0,
ismax = 0,
ismin = 0,
rfmax = 0,
rfmin = 0,
rsmax = 0,
rsmin = 0
const shunshiFA: number[][] = []
const shunshiFB: number[][] = []
@@ -289,7 +308,6 @@ const fliteWaveData = (wp: any, step: number): WaveData => {
const rmsSB: number[][] = []
const rmsSC: number[][] = []
if (titleList[iphasic.value * step + 1]?.substring(0, 1) !== 'U') {
xishu = ct
unit = '电流'
@@ -309,8 +327,6 @@ const fliteWaveData = (wp: any, step: number): WaveData => {
}
}
if (rmsData[0][iphasic.value * step + 1] !== undefined) {
rfmax = rmsData[0][iphasic.value * step + 1] * xishu
rfmin = rmsData[0][iphasic.value * step + 1] * xishu
@@ -322,8 +338,6 @@ const fliteWaveData = (wp: any, step: number): WaveData => {
rmsvSecondX = rmsData[0][0]
}
for (let rms = 0; rms < rmsData.length; rms++) {
if (rmsData[rms][iphasic.value * step + 1] === undefined) {
break
@@ -388,12 +402,14 @@ const fliteWaveData = (wp: any, step: number): WaveData => {
const rmsFirstA3 = rmsData[rms][iphasic.value * step + 1] * xishu
const rmsFirstB3 = rmsData[rms][iphasic.value * step + 2] * xishu
const rmsFirstC3 = rmsData[rms][iphasic.value * step + 3] * xishu
rmsFA.push([rmsData[rms][0], rmsFirstA3]);
rmsFA.push([rmsData[rms][0], rmsFirstA3])
rmsFB.push([rmsData[rms][0], rmsFirstB3]);
rmsFC.push([rmsData[rms][0], rmsFirstC3]);
rmsFB.push([rmsData[rms][0], rmsFirstB3])
rmsFC.push([rmsData[rms][0], rmsFirstC3])
rfmax = getMax(rfmax, rmsFirstA3, rmsFirstB3, rmsFirstC3)
rfmin = isOpen.value ? getMinOpen(rfmin, rmsFirstA3, rmsFirstC3) : getMin(rfmin, rmsFirstA3, rmsFirstB3, rmsFirstC3)
rfmin = isOpen.value
? getMinOpen(rfmin, rmsFirstA3, rmsFirstC3)
: getMin(rfmin, rmsFirstA3, rmsFirstB3, rmsFirstC3)
if (rfmin < rmsvFirstY) {
rmsvFirstY = rfmin
if (rfmin === rmsFirstA3) {
@@ -413,7 +429,9 @@ const fliteWaveData = (wp: any, step: number): WaveData => {
rmsSB.push([rmsData[rms][0], rmsSecondB3])
rmsSC.push([rmsData[rms][0], rmsSecondC3])
rsmax = getMax(rsmax, rmsSecondA3, rmsSecondB3, rmsSecondC3)
rsmin = isOpen.value ? getMinOpen(rsmin, rmsSecondA3, rmsSecondC3) : getMin(rsmin, rmsSecondA3, rmsSecondB3, rmsSecondC3)
rsmin = isOpen.value
? getMinOpen(rsmin, rmsSecondA3, rmsSecondC3)
: getMin(rsmin, rmsSecondA3, rmsSecondB3, rmsSecondC3)
if (rsmin < rmsvSecondY) {
rmsvSecondY = rsmin
if (rsmin === rmsSecondA3) {
@@ -429,7 +447,6 @@ const fliteWaveData = (wp: any, step: number): WaveData => {
}
}
const instantF = { max: ifmax, min: ifmin }
const instantS = { max: ismax, min: ismin }
const RMSF = { max: rfmax, min: rfmin }
@@ -442,11 +459,29 @@ const fliteWaveData = (wp: any, step: number): WaveData => {
const RMSSWave = { rmsSA, rmsSB, rmsSC }
const title = { aTitle, bTitle, cTitle, unit }
return waveData(instantF, instantS, RMSF, RMSS, RMSFMinDetail, RMSSMinDetail, shunshiF, shunshiS, RMSFWave, RMSSWave, title, unit)
return waveData(
instantF,
instantS,
RMSF,
RMSS,
RMSFMinDetail,
RMSSMinDetail,
shunshiF,
shunshiS,
RMSFWave,
RMSSWave,
title,
unit
)
}
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.bx').remove()
let picHeight = vh.value
@@ -456,9 +491,15 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
let rmscm: number[][] = []
let titleText = ''
let unit = ''
let a: string | null = null, b: string | null = null, c: string | null = null
let radata: number[][] = [], rbdata: number[][] = [], rcdata: number[][] = []
let rmsvX: any = 0, rmsvY: any = 0, zhou = ''
let a: string | null = null,
b: string | null = null,
c: string | null = null
let radata: number[][] = [],
rbdata: number[][] = [],
rcdata: number[][] = []
let rmsvX: any = 0,
rmsvY: any = 0,
zhou = ''
if (!waveDatas) {
titleText = '该事件暂无波形图'
@@ -543,10 +584,7 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
]
unit = 'kV'
} else {
fz.value = [
props.wp.listRmsMinData[0][0],
props.wp.listRmsMinData[0][1]
]
fz.value = [props.wp.listRmsMinData[0][0], props.wp.listRmsMinData[0][1]]
unit = 'V'
}
} else {
@@ -555,18 +593,40 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
for (let step = waveDatas.length - 1; step > 0 && step < waveDatas.length; step--) {
const rmsId = 'rms' + step
const newDivRms = $(`<div style="height:${vh.value};overflow: hidden;"><div class='bx' id='${rmsId}'></div></div>`)
const newDivRms = $(
`<div style="height:${vh.value};overflow: hidden;"><div class='bx' id='${rmsId}'></div></div>`
)
newDivRms.insertAfter($('#rmsp'))
$(`#${rmsId}`).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 rms = document.getElementById('rmsp')
if (!rms) return
const myChartes = echarts.init(rms)
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(() => {
rms.style.width = '100%'
@@ -582,7 +642,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
@@ -684,7 +749,7 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
y: -10
},
max: rmscm[0]?.[1] * 1.06 || 0,
min: rmscu[0]?.[1] - (rmscu[0]?.[1] * 0.04) || 0,
min: rmscu[0]?.[1] - rmscu[0]?.[1] * 0.04 || 0,
boundaryGap: [0, '100%'],
showLastLabel: true,
opposite: false,
@@ -792,7 +857,6 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
]
}
myChartes.setOption(option)
myChartess.value = myChartes
@@ -809,12 +873,25 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
}
}
const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show: boolean, myChartes1: echarts.ECharts, rmscm: number[][], rmscu: number[][], title: string) => {
const drawPics = (
waveDataTemp: WaveData,
picHeight: string,
step: number,
show: boolean,
myChartes1: echarts.ECharts,
rmscm: number[][],
rmscu: number[][],
title: string
) => {
step = step + 1
const rmsId = 'rms' + step
let a = '', b = '', c = ''
let a = '',
b = '',
c = ''
let unit = ''
let radata: number[][] = [], rbdata: number[][] = [], rcdata: number[][] = []
let radata: number[][] = [],
rbdata: number[][] = [],
rcdata: number[][] = []
switch (iphasic.value) {
case 1:
@@ -877,7 +954,25 @@ const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show:
if (!rmsIds) return
const myChartes = echarts.init(rmsIds)
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: {
@@ -888,7 +983,12 @@ const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show:
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
@@ -904,7 +1004,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
@@ -1059,11 +1159,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(() => {
@@ -1076,7 +1186,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) {
@@ -1092,13 +1209,11 @@ const backbxlb = () => {
myChartess5.value = null
// echarts.disconnect(charts.filter(Boolean) as echarts.ECharts[])
charts
.filter(Boolean)
.forEach(chart => {
charts.filter(Boolean).forEach(chart => {
if (chart && typeof chart.dispose === 'function') {
chart.dispose();
chart.dispose()
}
});
})
}
const getMax = (temp: number, tempA: number, tempB: number, tempC: number): number => {

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

@@ -13,6 +13,7 @@ import { ref, computed, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'
import html2canvas from 'html2canvas'
import $ from 'jquery'
import * as echarts from 'echarts'
import { mainHeight } from '@/utils/layout'
import url from '@/assets/img/point.png'
// 创建Worker
let waveDataWorker: Worker | null = null
@@ -41,7 +42,7 @@ interface WaveData {
interface Props {
value?: number
flag?: string | number | boolean
parentHeight?: string | number | boolean
parentHeight?: any
DColor?: boolean
boxoList?: any
wp?: any
@@ -86,13 +87,25 @@ const myChartess4 = ref<echarts.ECharts | null>(null)
const myChartess5 = ref<echarts.ECharts | null>(null)
const vh = computed(() => {
if (props.flag == 1) {
return '690px'
} else if (props.parentHeight != 0) {
if (props.parentHeight == 999) {
return '310px'
} else {
return '350px'
} else if (props.parentHeight != 0) {
return mainHeight(props.parentHeight, 2).height
}
if (props.flag == 1) {
return mainHeight(200).height
} else {
return mainHeight(200, 2).height
}
// if (props.flag == 1) {
// return '690px'
// } else if (props.parentHeight != 0) {
// return '310px'
// } else {
// return '350px'
// }
})
const vw = computed(() => '100%')
@@ -403,7 +416,7 @@ const initWave = (
enabled: true,
itemDistance: 5,
textStyle: {
fontSize:12,
fontSize: 12,
color: props.DColor ? '#000' : echartsColor.WordColor,
rich: { a: { verticalAlign: 'middle' } },
padding: [0, 0, 0, 0]