修改 波形样式

src/components/cockpit/transientStatistics/components/transientStatisticsDetail.vue

@@ -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)

src/components/echarts/rmsboxi.vue

@@ -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) {
+    if (props.parentHeight == 999) {
-        return '690px'
-    } else if (props.parentHeight != 0) {
         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');
+    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)
 
     // 初始化 Web Worker
-    worker.value = new Worker(new URL('./rmsWorker.js', import.meta.url));
+    worker.value = new Worker(new URL('./rmsWorker.js', import.meta.url))
-    worker.value.onmessage = (e) => {
+    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');
+    const zoomValue = document.body.style.getPropertyValue('zoom')
-    zoom.value = 1 / (zoomValue ? parseFloat(zoomValue) : 1);
+    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(
-            worker.value.postMessage(JSON.stringify({
+                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 aTitle = '',
-    let rmsvFirstX = 0, rmsvFirstY = 0, rmsvSecondX = 0, rmsvSecondY = 0, firstZhou = 'a', secondeZhou = 'a'
+        bTitle = '',
-    let ifmax = 0, ifmin = 0, ismax = 0, ismin = 0, rfmax = 0, rfmin = 0, rsmax = 0, rsmin = 0
+        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]);
+                rmsFB.push([rmsData[rms][0], rmsFirstB3])
-                rmsFC.push([rmsData[rms][0], rmsFirstC3]);
+                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 a: string | null = null,
-    let radata: number[][] = [], rbdata: number[][] = [], rcdata: number[][] = []
+        b: string | null = null,
-    let rmsvX: any = 0, rmsvY: any = 0, zhou = ''
+        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 = [
+                fz.value = [props.wp.listRmsMinData[0][0], props.wp.listRmsMinData[0][1]]
-                    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 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(() => {
@@ -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
+    charts.filter(Boolean).forEach(chart => {
-        .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 => {

src/components/echarts/shushiboxi.vue

@@ -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) {
+    if (props.parentHeight == 999) {
-        return '690px'
-    } else if (props.parentHeight != 0) {
         return '310px'
-    } else {
+    } else if (props.parentHeight != 0) {
-        return '350px'
+        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]