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

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

@@ -149,7 +149,8 @@ const tableStore: any = new TableStore({
// 在打开弹窗时立即设置高度 // 在打开弹窗时立即设置高度
nextTick(() => { nextTick(() => {
if (waveFormAnalysisRef.value) { if (waveFormAnalysisRef.value) {
waveFormAnalysisRef.value.setHeight(false, 360) // waveFormAnalysisRef.value.setHeight(false, 360)
waveFormAnalysisRef.value.setHeight(1, 50, 1.8)
} }
}) })
await analyseWave(row.id) await analyseWave(row.id)

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

@@ -615,7 +615,7 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
enabled: true, enabled: true,
itemDistance: 5, itemDistance: 5,
textStyle: { textStyle: {
fontSize: '14px', fontSize: '12px',
color: props.DColor ? '#000' : echartsColor.WordColor, color: props.DColor ? '#000' : echartsColor.WordColor,
rich: { a: { verticalAlign: 'middle' } }, rich: { a: { verticalAlign: 'middle' } },
padding: [0, 0, 0, 0] padding: [0, 0, 0, 0]
@@ -641,13 +641,13 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
title: { title: {
text: 'ms', text: 'ms',
textStyle: { textStyle: {
fontSize: '14px', fontSize: '12px',
color: props.DColor ? '#000' : echartsColor.WordColor color: props.DColor ? '#000' : echartsColor.WordColor
}, },
enabled: true, enabled: true,
align: 'high' align: 'high'
}, },
nameTextStyle: { fontSize: '14px' }, nameTextStyle: { fontSize: '12px' },
labels: { labels: {
formatter: function () { formatter: function () {
return this.value return this.value
@@ -662,7 +662,7 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
onZero: false onZero: false
}, },
axisLabel: { axisLabel: {
fontSize: '14px', fontSize: '12px',
color: props.DColor ? '#000' : echartsColor.WordColor, color: props.DColor ? '#000' : echartsColor.WordColor,
formatter: function (value: number) { formatter: function (value: number) {
if (valA.value != (value - 0).toFixed(0)) { if (valA.value != (value - 0).toFixed(0)) {
@@ -689,7 +689,7 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
showLastLabel: true, showLastLabel: true,
opposite: false, opposite: false,
nameTextStyle: { nameTextStyle: {
fontSize: '14px', fontSize: '12px',
color: props.DColor ? '#000' : echartsColor.WordColor color: props.DColor ? '#000' : echartsColor.WordColor
}, },
axisLine: { axisLine: {
@@ -700,7 +700,7 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
onZero: false onZero: false
}, },
axisLabel: { axisLabel: {
fontSize: '14px', fontSize: '12px',
color: props.DColor ? '#000' : echartsColor.WordColor, color: props.DColor ? '#000' : echartsColor.WordColor,
formatter: function (value: number) { formatter: function (value: number) {
return (value - 0).toFixed(2) return (value - 0).toFixed(2)
@@ -718,7 +718,7 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
left: '1%', left: '1%',
right: '45px', right: '45px',
bottom: '40px', bottom: '40px',
top: '70px', top: '60px',
containLabel: true containLabel: true
}, },
dataZoom: [ dataZoom: [
@@ -780,7 +780,7 @@ const initWave = (waveDatas: WaveData[] | null, time: string | null, type: strin
show: true, show: true,
position: [5, -20], position: [5, -20],
color: '#000', color: '#000',
fontSize: '14px', fontSize: '12px',
fontWeight: 'bold', fontWeight: 'bold',
borderType: 'solid', borderType: 'solid',
borderWidth: 0.5, borderWidth: 0.5,
@@ -917,7 +917,7 @@ const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show:
enabled: true, enabled: true,
itemDistance: 5, itemDistance: 5,
textStyle: { textStyle: {
fontSize: '14px', fontSize: '12px',
color: props.DColor ? '#000' : echartsColor.WordColor, color: props.DColor ? '#000' : echartsColor.WordColor,
rich: { a: { verticalAlign: 'middle' } }, rich: { a: { verticalAlign: 'middle' } },
padding: [0, 0, 0, 0] padding: [0, 0, 0, 0]
@@ -932,7 +932,7 @@ const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show:
title: { title: {
text: 'ms', text: 'ms',
textStyle: { textStyle: {
fontSize: '14px', fontSize: '12px',
color: props.DColor ? '#000' : echartsColor.WordColor color: props.DColor ? '#000' : echartsColor.WordColor
}, },
enabled: true, enabled: true,
@@ -943,7 +943,7 @@ const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show:
return this.value return this.value
} }
}, },
nameTextStyle: { fontSize: '14px' }, nameTextStyle: { fontSize: '12px' },
splitLine: { show: false }, splitLine: { show: false },
axisTick: { alignWithLabel: true }, axisTick: { alignWithLabel: true },
axisLine: { axisLine: {
@@ -953,7 +953,7 @@ const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show:
onZero: false onZero: false
}, },
axisLabel: { axisLabel: {
fontSize: '14px', fontSize: '12px',
color: props.DColor ? '#000' : echartsColor.WordColor, color: props.DColor ? '#000' : echartsColor.WordColor,
formatter: function (value: number) { formatter: function (value: number) {
if (valB.value != (value - 0).toFixed(0)) { if (valB.value != (value - 0).toFixed(0)) {
@@ -978,7 +978,7 @@ const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show:
showLastLabel: true, showLastLabel: true,
opposite: false, opposite: false,
nameTextStyle: { nameTextStyle: {
fontSize: '14px', fontSize: '12px',
color: props.DColor ? '#000' : echartsColor.WordColor color: props.DColor ? '#000' : echartsColor.WordColor
}, },
axisLine: { axisLine: {
@@ -989,7 +989,7 @@ const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show:
onZero: false onZero: false
}, },
axisLabel: { axisLabel: {
fontSize: '14px', fontSize: '12px',
color: props.DColor ? '#000' : echartsColor.WordColor, color: props.DColor ? '#000' : echartsColor.WordColor,
formatter: function (value: number) { formatter: function (value: number) {
return (value - 0).toFixed(2) return (value - 0).toFixed(2)
@@ -1007,7 +1007,7 @@ const drawPics = (waveDataTemp: WaveData, picHeight: string, step: number, show:
left: '1%', left: '1%',
right: '45px', right: '45px',
bottom: '40px', bottom: '40px',
top: '70px', top: '60px',
containLabel: true containLabel: true
}, },
dataZoom: [ dataZoom: [

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

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

376
src/views/govern/device/control/tabs/components/waveFormAnalysis.vue
View File

@@ -1,184 +1,192 @@
<!-- 暂态事件-波形分析组件 --> <!-- 暂态事件-波形分析组件 -->
<template> <template>
<div class="home"> <div class="home">
<div class="home_header"> <div class="home_header">
<!-- <el-form-item label="值类型选择"> <!-- <el-form-item label="值类型选择">
<el-select @change="changeView" v-model.trim="value" placeholder="请选择值类型"> <el-select @change="changeView" v-model.trim="value" placeholder="请选择值类型">
<el-option <el-option
v-for="(item, index) in options" v-for="(item, index) in options"
:key="index" :key="index"
:label="item.label" :label="item.label"
:value="item.value" :value="item.value"
></el-option> ></el-option>
</el-select> </el-select>
</el-form-item> --> </el-form-item> -->
<el-radio-group v-model.trim="theTypeOfValue" @change="changeView"> <el-radio-group v-model.trim="theTypeOfValue" @change="changeView">
<el-radio-button label="一次值" :value="1" /> <el-radio-button label="一次值" :value="1" />
<el-radio-button label="二次值" :value="2" /> <el-radio-button label="二次值" :value="2" />
</el-radio-group>
</el-radio-group>
<el-button @click="handleBack" :icon="Back">返回</el-button>
<el-button @click="handleBack" :icon="Back">返回</el-button> </div>
<el-tabs
</div> class="home_body"
<el-tabs class="home_body" type="border-card" v-model.trim="activeName1" @tab-click="handleClick" type="border-card"
v-loading="loading"> v-model.trim="activeName1"
@tab-click="handleClick"
<el-tab-pane label="瞬时波形" name="ssbx" :style="'height:' + bxecharts + ';overflow-y: scroll;'"> v-loading="loading"
<shushiboxi v-if="isWp && wp && activeName == 'ssbx' && showBoxi" :value="value" :boxoList="boxoList" >
:parentHeight="parentHeight" :wp="wp"> <el-tab-pane label="瞬时波形" name="ssbx" :style="'height:' + bxecharts + ';overflow-y: auto;'">
</shushiboxi> <shushiboxi
</el-tab-pane> v-if="isWp && wp && activeName == 'ssbx' && showBoxi"
<el-tab-pane label="RMS波形" name="rmsbx" :style="'height:' + bxecharts + ';overflow-y: scroll;'"> :value="value"
<rmsboxi v-if="isWp && wp && activeName == 'rmsbx' && showBoxi" :value="value" :boxoList="boxoList" :boxoList="boxoList"
:parentHeight="parentHeight" :wp="wp"> :parentHeight="parentHeight"
</rmsboxi> :wp="wp"
</el-tab-pane> ></shushiboxi>
</el-tabs> </el-tab-pane>
</div> <el-tab-pane label="RMS波形" name="rmsbx" :style="'height:' + bxecharts + ';overflow-y: auto;'">
</template> <rmsboxi
<script lang="ts" setup> v-if="isWp && wp && activeName == 'rmsbx' && showBoxi"
import { ref, onMounted, reactive, defineExpose, watch, defineEmits } from 'vue' :value="value"
import { VxeGridProps, VxeGridPropTypes } from 'vxe-table' :boxoList="boxoList"
import { defaultAttribute } from '@/components/table/defaultAttribute' :parentHeight="parentHeight"
import shushiboxi from '@/components/echarts/shushiboxi.vue' :wp="wp"
import rmsboxi from '@/components/echarts/rmsboxi.vue' ></rmsboxi>
import MyEchart from '@/components/echarts/MyEchart.vue' </el-tab-pane>
import { Platform, TrendCharts, DataLine, Back } from '@element-plus/icons-vue' </el-tabs>
import { mainHeight } from '@/utils/layout' </div>
const props = defineProps(['wp']) </template>
const searchForm = ref({ <script lang="ts" setup>
type: 0 import { ref, onMounted, reactive, defineExpose, watch, defineEmits } from 'vue'
}) import { VxeGridProps, VxeGridPropTypes } from 'vxe-table'
const emit = defineEmits(['handleHideCharts']) import { defaultAttribute } from '@/components/table/defaultAttribute'
const parentHeight = ref(0) import shushiboxi from '@/components/echarts/shushiboxi.vue'
const loading = ref(false) import rmsboxi from '@/components/echarts/rmsboxi.vue'
const tableList: any = ref([]) import MyEchart from '@/components/echarts/MyEchart.vue'
for (let i = 0; i < 300; i++) { import { Platform, TrendCharts, DataLine, Back } from '@element-plus/icons-vue'
tableList.value.push({ import { mainHeight } from '@/utils/layout'
name: i + 1, const props = defineProps(['wp'])
value: Math.floor(Math.random() * 101) const searchForm = ref({
}) type: 0
} })
interface RowVO { const emit = defineEmits(['handleHideCharts'])
[key: string]: any const parentHeight = ref(0)
} const loading = ref(false)
//谐波电压含有率 const tableList: any = ref([])
const gridOptions = ref<VxeGridProps<RowVO>>({ for (let i = 0; i < 300; i++) {
border: true, tableList.value.push({
showOverflow: true, name: i + 1,
showHeader: false, value: Math.floor(Math.random() * 101)
columns: [], })
data: [], }
columnConfig: { interface RowVO {
resizable: true [key: string]: any
}, }
align: 'center' //谐波电压含有率
}) const gridOptions = ref<VxeGridProps<RowVO>>({
gridOptions.value = { ...defaultAttribute, ...gridOptions.value } border: true,
showOverflow: true,
const yAxisUnit: any = ref('') showHeader: false,
columns: [],
const echartsData1: any = ref([]), data: [],
echartsData2: any = ref([]), columnConfig: {
echartsData3: any = ref([]), resizable: true
barCharts1 = ref(), },
barCharts2 = ref(), align: 'center'
barCharts3 = ref() })
gridOptions.value = { ...defaultAttribute, ...gridOptions.value }
const view = ref(true)
const view2 = ref(false) const yAxisUnit: any = ref('')
const showBoxi = ref(true)
const activeName1 = ref('ssbx') const echartsData1: any = ref([]),
const activeName = ref('ssbx') echartsData2: any = ref([]),
const wp = ref({}) echartsData3: any = ref([]),
const theTypeOfValue = ref(1) barCharts1 = ref(),
const value = ref(1) barCharts2 = ref(),
barCharts3 = ref()
const isWp = ref(false) const view = ref(true)
const boxoList: any = ref([]) const view2 = ref(false)
const getWpData = (val: any, list: any) => { const showBoxi = ref(true)
wp.value = val const activeName1 = ref('ssbx')
isWp.value = true const activeName = ref('ssbx')
boxoList.value = list const wp = ref({})
const theTypeOfValue = ref(1)
console.log(wp.value, val, 'ggggghhhh') const value = ref(1)
}
const changeView = () => { const isWp = ref(false)
showBoxi.value = false const boxoList: any = ref([])
loading.value = true const getWpData = (val: any, list: any) => {
setTimeout(() => { wp.value = val
value.value = theTypeOfValue.value isWp.value = true
showBoxi.value = true boxoList.value = list
}, 500)
setTimeout(() => { console.log(wp.value, val, 'ggggghhhh')
loading.value = false }
}, 1500) const changeView = () => {
} showBoxi.value = false
const bxecharts: any = ref(mainHeight(190).height as any) loading.value = true
setTimeout(() => {
const handleClick = (tab: any, event: any) => { value.value = theTypeOfValue.value
loading.value = true showBoxi.value = true
setTimeout(() => { }, 500)
activeName.value = tab.paneName setTimeout(() => {
}, 500) loading.value = false
setTimeout(() => { }, 1500)
loading.value = false }
}, 1500) const bxecharts: any = ref(mainHeight(190).height as any)
}
const handleBack = () => { const handleClick = (tab: any, event: any) => {
emit('handleHideCharts') loading.value = true
} setTimeout(() => {
const setHeight = (h: any, vh: any) => { activeName.value = tab.paneName
if (h != false) { }, 500)
parentHeight.value = h setTimeout(() => {
} loading.value = false
}, 1500)
setTimeout(() => { }
bxecharts.value = mainHeight(vh).height const handleBack = () => {
}, 100) emit('handleHideCharts')
} }
onMounted(() => { }) const setHeight = (h: any, vh: any, num = 1) => {
defineExpose({ getWpData, setHeight }) if (h != false) {
</script> parentHeight.value = h
<style lang="scss" scoped> }
// .tab_info {
// width: 100%; setTimeout(() => {
// height: calc(100vh - 450px); bxecharts.value = mainHeight(vh,num).height
}, 100)
// // overflow: auto; }
// // padding-bottom: 20px; onMounted(() => {})
// .charts { defineExpose({ getWpData, setHeight })
// width: 100%; </script>
// margin-top: 10px; <style lang="scss" scoped>
// height: calc(100vh - 450px); // .tab_info {
// } // width: 100%;
// } // height: calc(100vh - 450px);
.home { // // overflow: auto;
width: 100%; // // padding-bottom: 20px;
height: 100%; // .charts {
display: flex; // width: 100%;
flex-direction: column; // margin-top: 10px;
position: relative; // height: calc(100vh - 450px);
// }
.home_header { // }
height: 50px; .home {
display: flex; width: 100%;
align-items: center; height: 100%;
justify-content: space-between; display: flex;
flex-direction: column;
.el-select { position: relative;
width: 200px !important;
} .home_header {
} height: 50px;
display: flex;
.home_body { align-items: center;
// margin-top: 20px; justify-content: space-between;
flex: 1;
} .el-select {
} width: 200px !important;
</style> }
}
.home_body {
// margin-top: 20px;
flex: 1;
}
}
</style>