admin-govern/src/views/govern/device/control/tabs/components/harmonicSpectrum.vue

<!-- 谐波频谱 -->
<template>
    <div class="harmonic" :style="heightTop">
        <div class="harmonic_select">
            <el-form :model="searchForm" id="history_select">
                <el-form-item label="稳态指标">
                    <el-select
                        multiple
                        collapse-tags
                        collapse-tags-tooltip
                        v-model="searchForm.index"
                        placeholder="请选择统计指标"
                    >
                        <el-option
                            v-for="item in indexOptions"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-button type="primary" :loading="loading" @click="init">查询</el-button>
            </el-form>
        </div>
        <div class="harmonic_body" v-loading="loading">
            <div
                class="harmonic_body_charts"
                :style="{ height: height }"
                v-for="(item, index) in chartsList"
                :key="index"
            >
                <p class="charts_title">
                    {{
                        indexOptions.find((item: any) => {
                            return item.id == searchForm.index[index]
                        })?.name
                    }}
                </p>
                <MyEchart :ref="setChildRef(index)" :options="item.echartsData"></MyEchart>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue'
import { queryByCode, queryByid, queryCsDictTree } from '@/api/system-boot/dictTree'
import { queryStatistical } from '@/api/system-boot/csstatisticalset'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { getDeviceHarmonicSpectrumData, getRealTimeTableList } from '@/api/cs-device-boot/EquipmentDelivery.ts'
import { mainHeight } from '@/utils/layout'
import { yMethod } from '@/utils/echartMethod'
const searchForm: any = ref({})
searchForm.value = {
    index: []
}
//统计指标
const indexOptions: any = ref([])
// const legendDictList: any = ref([])
// queryByCode('portable-harmonic').then(res => {
//     queryCsDictTree(res.data.id).then(item => {
//         indexOptions.value = item.data
//         searchForm.value.index[0] = indexOptions.value[0].id
//     })
//     queryStatistical(res.data.id).then(vv => {
//         legendDictList.value = vv.data
//     })
// })
indexOptions.value = [
    {
        id: 0,
        name: '电压总有效值(kV)'
    },
    {
        id: 1,
        name: '电流总有效值(A)'
    },
    {
        id: 2,
        name: '有功功率(kW)'
    },
    {
        id: 3,
        name: '无功功率(kW)'
    },
    {
        id: 4,
        name: '基波电压总有效值(kV)'
    },
    {
        id: 5,
        name: '基波电流总有效值(A)'
    },
    {
        id: 6,
        name: '频率(Hz)'
    },
    {
        id: 7,
        name: '电压不平衡度(%)'
    },
    {
        id: 8,
        name: '电流不平衡度(%)'
    }
]
searchForm.value.index[0] = indexOptions.value[0].id
const heightTop = mainHeight(275)
let height: any = mainHeight(275).height
//谐波频谱参数
const params: any = ref({})
const getHarmonicSpectrumParams = (val: any) => {
    params.value = val
    init()
}
const chartsList: any = ref([])
const loading = ref(false)
// 为每个子组件实例设置ref
const setChildRef = (index: any) => {
    return `child-${index}`
}
const childRefs = {}
const init = () => {
    loading.value = true
    params.value.list = []
    searchForm.value.index.map((item: any) => {
        params.value.list.push({ statisticalId: item })
    })
    //查询谐波频谱
    getDeviceHarmonicSpectrumData(params.value).then(res => {
        res.data.length > 3 ? (height = mainHeight(275, 3).height) : (height = mainHeight(275, res.data.length).height)
        chartsList.value = res.data
        //数据根据相别组装成新数组
        chartsList.value.map((item: any) => {
            item.countList = []
            item.thdDataVOS = item.thdDataVOS.reduce((acc: any, current: any) => {
                const existing = acc.find((redu: any) => redu.phase == current.phase)
                if (existing) {
                    existing.list.push(current)
                } else {
                    acc.push({
                        phase: current.phase,
                        list: [current]
                    })
                }
                return acc
            }, [])
            return
        })

        //循环渲染图表
        chartsList.value &&
            chartsList.value.map((item: any, index: any) => {
                const refName = setChildRef(index)
                childRefs[refName] = ref(null) // 初始化ref
                item.echartsData = {
                    options: {
                        title: [
                            {
                                left: '10%',
                                top: 0
                                // text: item.showName
                            }
                        ],
                        // grid: {
                        //     top: '16%',
                        //     bottom: '15%', //也可设置left和right设置距离来控制图表的大小
                        //     left: '3%',
                        //     right: '4%'
                        // },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                label: {
                                    show: false
                                }
                            }
                        },
                        legend: {
                            data: [],
                            top: '2%',
                            right: '2%'
                        },
                        xAxis: {
                            name: '次数',
                            data: [],
                            axisLine: {
                                show: true, //隐藏X轴轴线
                                lineStyle: {
                                    color: '#000'
                                }
                            },
                            axisTick: {
                                show: true //隐藏X轴刻度
                            },
                            axisPointer: {
                                type: 'shadow'
                            },
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#000' //X轴文字颜色
                                }
                            },
                            boundaryGap: false
                        },
                        yAxis: {
                            type: 'value',
                            name:
                                item.thdDataVOS.length != 0 &&
                                item.thdDataVOS[0].list &&
                                item.thdDataVOS[0].list[0].unit,
                            splitLine: {
                                show: false
                            },
                            axisTick: {
                                show: true
                            },
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#000'
                                }
                            },
                            splitNumber: 5,
                            minInterval: 1
                        },
                        series: []
                    }
                }
                //横轴数据
                item.echartsData.options.xAxis.data =
                    item.thdDataVOS.length != 0 &&
                    item.thdDataVOS[0].list &&
                    item.thdDataVOS[0].list.map((ss: any) => {
                        return ss.frequency + '次'
                    })
                let aar: any = []
                //y轴数据
                item.thdDataVOS.map((vv: any) => {
                    item.echartsData.options.series.push({
                        name: vv.phase + '相',
                        type: 'line',
                        barMaxWidth: 24, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                        itemStyle: {
                            // normal: {
                            barBorderRadius: [3, 3, 0, 0]
                            // color: '#00CC99'
                            // }e
                        },
                        data: vv.list.map((vvs: any) => {
                            aar.push(vvs.statisticalData)
                            return vvs.statisticalData
                        }),
                        smooth: true, // 这里设置平滑曲线
                        symbol: 'none' // 设置为 'none' 去掉折点小圆
                    })
                    //legend数据
                    item.echartsData.options.legend.data.push(vv.phase + '相')
                })
                let [min, max] = yMethod(aar)
                item.echartsData.options.yAxis.max = max
                item.echartsData.options.yAxis.min = min
            })
        loading.value = false
    })
    return
}
watch(
    () => searchForm.value.index,
    (val: any, oldval: any) => {
        if (val && val.length != 0) {
            // init()
        }
    },
    {
        deep: true,
        immediate: true
    }
)
onMounted(() => {})
defineExpose({ getHarmonicSpectrumParams })
</script>
<style lang="scss" scoped>
.harmonic {
    width: 100%;
    // height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;

    .harmonic_select {
        width: 50%;
        height: 30px;
        display: flex;
        position: absolute;
        top: -32px;
        left: 0;
        justify-content: flex-start;

        .el-button {
            margin-left: 10px;
        }
    }

    .harmonic_body {
        flex: 1;
        overflow-y: auto;

        // padding-bottom: 200px;
        .harmonic_body_charts {
            // margin: 15px 0;
            border: 1px solid #eee;
            position: relative;

            .charts_title {
                position: absolute;
                top: 10px;
                left: 10%;
                font-size: 18px;
                font-weight: 800;
            }
        }
    }
}
</style>