admin-govern/src/components/cockpit/trendComparison/index.vue

<template>
    <div class="device-control">
        <!--趋势对比 -->
        <div v-show="fullscreen">
            <!-- <PointTree :height="flag ? 106 : 50" @node-click="nodeClick" @pointTypeChange="pointTypeChange"></PointTree> -->
            <APFTree :height="flag ? 126 : 70" @node-click="handleNodeClick"  @init="handleNodeClick"></APFTree>
        </div>
        <div>

            <TableHeader datePicker ref="TableHeaderRef" :timeKeyList="prop.timeKey" :showReset="false"
                @selectChange="selectChange" v-if="fullscreen">
                <template v-slot:select>
                    <!-- <el-form-item label="监测对象">
                        <el-select filterable v-model="tableStore.table.params.sensitiveUserId" placeholder="请选择监测对象"
                            clearable>
                            <el-option v-for="item in idList" :key="item.id" :label="item.name" :value="item.id" />
                        </el-select>
                    </el-form-item> -->
                    <!-- <el-form-item label="监测点名称">
                    <el-select v-model="tableStore.table.params.lineId" placeholder="请选择监测点名称" clearable>
                        <el-option
                            v-for="item in lineIdList"
                            :key="item.lineId"
                            :label="item.name"
                            :value="item.lineId"
                        />
                    </el-select>
                </el-form-item> -->
                    <el-form-item label="电能质量指标">
                        <el-select v-model="tableStore.table.params.indicator" placeholder="请选择电能质量指标" clearable>
                            <el-option v-for="item in indicatorList" :key="item.id" :label="item.name"
                                :value="item.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-radio-group v-model="tableStore.table.params.dataLevel" @change="tableStore.index()">
                            <el-radio-button label="一次值" value="Primary" />
                            <el-radio-button label="二次值" value="Secondary" />
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="统计类型">
                        <el-select style="min-width: 120px !important" placeholder="请选择"
                            v-model="tableStore.table.params.valueType">
                            <el-option value="max" label="最大值"></el-option>
                            <el-option value="min" label="最小值"></el-option>
                            <el-option value="avg" label="平均值"></el-option>
                            <el-option value="cp95" label="cp95"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <div v-if="shouldShowHarmonicCount()"
                            style="display: flex; color: var(--el-text-color-regular)">
                            <span style="width: 160px">{{ getHarmonicTypeName() }}谐波次数</span>
                            <el-select v-model="tableStore.table.params.harmonicCount" placeholder="请选择谐波次数"
                                style="min-width: 80px !important">
                                <el-option v-for="num in harmonicCountOptions" :key="num" :label="num"
                                    :value="num"></el-option>
                            </el-select>
                        </div>
                    </el-form-item>
                </template>
            </TableHeader>
            <my-echart v-loading="tableStore.table.loading" class="tall" :options="echartList" :style="{
                width: `calc(${prop.width} - ${fullscreen ? 290 : 0}px)`,
                height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px)`
            }" />
        </div>
        <!-- <el-empty description="暂无数据" /> -->
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide, reactive, watch, h, computed, nextTick } from 'vue'
import TableStore from '@/utils/tableStore'
import TableHeader from '@/components/table/header/index.vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { useConfig } from '@/stores/config'
import { queryByCode, queryCsDictTree } from '@/api/system-boot/dictTree'
import { getListByIds } from '@/api/harmonic-boot/cockpit/cockpit'
import { getTime } from '@/utils/formatTime'
import { yMethod, exportSeriesCSV, completeTimeSeries } from '@/utils/echartMethod'
import APFTree from '@/components/tree/govern/APFTree.vue'
const prop = defineProps({
    w: { type: [String, Number] },
    h: { type: [String, Number] },
    width: { type: [String, Number] },
    height: { type: [String, Number] },
    timeKey: { type: Array as () => string[] },
    timeValue: { type: Object },
    interval: { type: Number },
    flag: { type: Boolean }
})

const TableHeaderRef = ref()
const config = useConfig()

// 计算是否全屏展示
const fullscreen = computed(() => {
    const w = Number(prop.w)
    const h = Number(prop.h)
    if (!isNaN(w) && !isNaN(h) && w === 12 && h === 6) {
        // 执行相应逻辑
        return true
    } else {
        return false
    }
})
// 添加谐波次数选项（2-50）
const harmonicCountOptions = ref(Array.from({ length: 49 }, (_, i) => i + 2))

const indicatorList = ref()

const echartList = ref()
const timeControl = ref(false)

const headerHeight = ref(57)

// 监测对象
const idList = ref([])

// 监测对象
const initListByIds = () => {
    getListByIds({}).then((res: any) => {
        if (res.data?.length > 0) {
            idList.value = res.data
            
        } else {
            tableStore.index()
        }
    })
}


const exportSubjectName = ref('')

const handleNodeClick = async (data: any) => {


    if (data?.level == 3 || data?.level == 2) {
        exportSubjectName.value = data.name || ''
        tableStore.exportName = { subject: exportSubjectName.value, feature: '趋势对比' }
        tableStore.table.params.sensitiveUserId = data.id
        await tableStore.index()
    } else {
        tableStore.table.loading = false
    }
}


const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
    headerHeight.value = height

    if (datePickerValue && datePickerValue.timeValue) {
        // 更新时间参数
        tableStore.table.params.searchBeginTime = datePickerValue.timeValue[0]
        tableStore.table.params.searchEndTime = datePickerValue.timeValue[1]
    }
}

const initCode = () => {
    queryByCode('steady_state_limit_trend').then(res => {
        queryCsDictTree(res.data.id).then(item => {
            indicatorList.value = item.data
            tableStore.table.params.indicator = indicatorList.value[0].id
            nextTick(() => {
                // tableStore.index()
            })
        })
    })
}
// 治理前
const chartsListBefore = ref()
// 治理后
const chartsListAfter = ref()

const setEchart = () => {
    // 从接口数据中提取治理前和治理后的数据
    const beforeData = chartsListBefore.value || []
    const afterData = chartsListAfter.value || []

    // 按相位分组数据
    const beforeGroupedByPhase: any = {}
    const afterGroupedByPhase: any = {}

    // 处理治理前数据
    beforeData.forEach((item: any) => {
        const phase = item.phase || 'default'
        if (!beforeGroupedByPhase[phase]) {
            beforeGroupedByPhase[phase] = []
        }
        beforeGroupedByPhase[phase].push([item.time, item.statisticalData, item.unit, 'solid'])
    })

    // 处理治理后数据
    afterData.forEach((item: any) => {
        const phase = item.phase || 'default'
        if (!afterGroupedByPhase[phase]) {
            afterGroupedByPhase[phase] = []
        }
        afterGroupedByPhase[phase].push([item.time, item.statisticalData, item.unit, 'dashed'])
    })

    // 构建系列数据
    const series: any = []

    // 定义相位颜色
    const phaseColors: any = {
        A: '#DAA520',
        B: '#2E8B57',
        C: '#A52a2a'
    }

    // 添加治理前数据系列（实线）
    Object.keys(beforeGroupedByPhase).forEach(phase => {
        const phaseName = phase === 'default' ? '' : `${phase}相`
        const color = phaseColors[phase] || config.layout.elementUiPrimary[0]

        series.push({
            name: `${phaseName}_治理前`,
            type: 'line',
            showSymbol: false,
            smooth: true,
            symbol: 'none',
            data: beforeGroupedByPhase[phase],
            itemStyle: {
                normal: {
                    color: color
                }
            },
            lineStyle: {
                type: 'solid', // 实线
            },
            yAxisIndex: 0
        })
    })

    // 添加治理后数据系列（虚线）
    Object.keys(afterGroupedByPhase).forEach(phase => {
        const phaseName = phase === 'default' ? '' : `${phase}相`
        const color = phaseColors[phase] || config.layout.elementUiPrimary[0]

        series.push({
            name: `${phaseName}_治理后`,
            type: 'line',
            showSymbol: false,
            smooth: true,
            symbol: 'none',
            data: timeControl.value ? completeTimeSeries(afterGroupedByPhase[phase]) : afterGroupedByPhase[phase],
            itemStyle: {
                normal: {
                    color: color
                }
            },
            lineStyle: {
                type: 'dashed', // 虚线
            },
            yAxisIndex: 0
        })
    })

    // 获取指标名称用于图表标题
    let titleText = '治理前后对比'
    if (beforeData.length > 0 && beforeData[0].anotherName) {
        titleText = beforeData[0].anotherName+'治理前后对比'
    } else if (afterData.length > 0 && afterData[0].anotherName) {
        titleText = afterData[0].anotherName+'治理前后对比'
    }

    // statisticalData
    //  chartsListBefore.value.map((item: any) => item.statisticalData)
    //         chartsListAfter.value = tableStore.table.data.after


    // 构建图例数据
    const legendData = series.map((item: any, index: number) => {
        let color = config.layout.elementUiPrimary[0]
        const name = item.name
        if (name.includes('A相')) {
            color = '#DAA520'
        } else if (name.includes('B相')) {
            color = '#2E8B57'
        } else if (name.includes('C相')) {
            color = '#A52a2a'
        }

        // 判断是治理前还是治理后，设置不同的线条样式
        const isBefore = name.includes('治理前')

        return {
            name: item.name,
            // icon: isBefore
            //     ? 'rect'
            //     : 'path://M0,2 L8,2 L8,6 L0,6 Z M12,2 L20,2 L20,6 L12,6 Z M24,2 L32,2 L32,6 L24,6 Z M36,2 L44,2 L44,6 L36,6 Z', // 矩形组成的粗虚线
            itemStyle: {
                color: color // 明确指定图例图标的颜色
            },
            lineStyle: {
                type: isBefore ? 'solid' : 'dashed', // 治理前实线，治理后虚线
                width: 2
            }
        }
    })
    let [min, max] = yMethod(
        [...chartsListBefore.value.map((item: any) => item.statisticalData),
        ...chartsListAfter.value.map((item: any) => item.statisticalData)]
    )
    echartList.value = {
        exportFileName: {
            subject: exportSubjectName.value,
            feature: '趋势对比',
            date: tableStore.table.params.searchEndTime || tableStore.table.params.searchBeginTime
        },
        title: {
            text: titleText
        },
        tooltip: {
            axisPointer: {
                type: 'cross',
                label: {
                    color: '#fff',
                    fontSize: 16
                }
            },
            textStyle: {
                color: '#fff',
                fontStyle: 'normal',
                opacity: 0.35,
                fontSize: 14
            },
            backgroundColor: 'rgba(0,0,0,0.55)',
            borderWidth: 0,
            formatter(params: any) {
                const xname = params[0].value[0]
                let str = `${xname}<br>`
                params.forEach((el: any, index: any) => {
                    let marker = ''
                    if (el.value[3] == 'dashed') {
                        for (let i = 0; i < 3; i++) {
                            marker += `<span style="display:inline-block;border: 2px ${el.color} solid;margin-right:5px;width:10px;height:0px;background-color:#ffffff00;"></span>`
                        }
                    } else {
                        marker = `<span style="display:inline-block;border: 2px ${el.color} ${el.value[3]};margin-right:5px;width:40px;height:0px;background-color:#ffffff00;"></span>`//`<span style="display:inline-block;border: 2px ${el.color} ${el.value[3]};margin-right:5px;width:40px;height:0px;background-color:#ffffff00;"></span>`

                    }

                    str += `${marker}${el.seriesName.split('(')[0]}：${el.value[1] != null ? el.value[1] + ' ' + (el.value[2] == null ? '' : el.value[2]) : '-'
                        }<br>`
                })
                return str
            }
        },
        legend: {
            data: legendData,
            // icon: 'rect',
            itemWidth: 18,
            itemHeight: 3,
            type: 'scroll',

            itemStyle: {
                borderWidth: 0
            },
            lineStyle: {
                width: 2 // 确保图例线条宽度与系列线条宽度一致
            }
        },
        xAxis: {
            type: 'time',
            axisLabel: {
                formatter: {
                    day: '{MM}-{dd}',
                    month: '{MM}',
                    year: '{yyyy}'
                }
            }
        },
        yAxis: {
            name: beforeData.length > 0 ? beforeData[0].unit : afterData.length > 0 ? afterData[0].unit : '',
            max: max,
            min: min,
        },
        grid: {
            left: '10px',
            right: '20px'
        },
        toolbox: {
            featureProps: {
                myTool1: {
                    show: true,
                    title: '下载csv',
                    icon: 'path://M642 673.1H301.6c-9.9 0-17.9-8-17.9-17.9s8-17.9 17.9-17.9H642c9.9 0 17.9 8 17.9 17.9s-8 17.9-17.9 17.9zM642 511.8H301.6c-9.9 0-17.9-8-17.9-17.9 0-9.9 8-17.9 17.9-17.9H642c9.9 0 17.9 8 17.9 17.9 0 9.9-8 17.9-17.9 17.9zM480.7 350.6H301.6c-9.9 0-17.9-8-17.9-17.9s8-17.9 17.9-17.9h179.2c9.9 0 17.9 8 17.9 17.9s-8.1 17.9-18 17.9zM874.9 350.6H695.7c-49.4 0-89.6-40.2-89.6-89.6V81.9c0-9.9 8-17.9 17.9-17.9 9.9 0 17.9 8 17.9 17.9V261c0 29.6 24.1 53.7 53.7 53.7h179.2c9.9 0 17.9 8 17.9 17.9s-7.9 18-17.8 18zM794.3 959.7H221c-49.4 0-89.6-40.2-89.6-89.6V153.5c0-49.4 40.2-89.6 89.6-89.6h403.1c4.8 0 9.3 1.9 12.7 5.2L887.6 320c3.4 3.4 5.2 7.9 5.2 12.7v537.5c0 52.7-51.9 89.5-98.5 89.5zM221 99.8c-29.6 0-53.7 24.1-53.7 53.7v716.6c0 29.6 24.1 53.7 53.7 53.7h573.3c29 0 62.7-23.5 62.7-53.7v-530L616.7 99.8H221z',
                    onclick: () => {
                        exportSeriesCSV(echartList.value.series, echartList.value.exportFileName)
                    }
                },
                myTool2: {
                    show: true,
                    title: timeControl.value ? '关闭缺失数据' : '缺失数据',
                    icon: 'path://M832 512l-192-192v128H128v128h512v128l192-192zM192 512l192 192v-128h512v-128H384V320L192 512z',
                    iconStyle: timeControl.value ? { borderColor: '#409EFF' } : {},
                    onclick: () => {
                        setTimeControl()
                    }
                }
            }
        },
        series: series
    }
}

const setTimeControl = () => {
    timeControl.value = !timeControl.value
    setEchart()
}

const tableStore: any = new TableStore({
    url: '/cs-device-boot/csGroup/sensitiveUserTrendData',
    method: 'POST',
    showPage: false,
    exportName: '趋势对比',
    column: [],
    beforeSearchFun: () => {
        setTime()
        // if (!tableStore.table.params.sensitiveUserId && idList.value?.length > 0) {
        //     tableStore.table.params.sensitiveUserId = idList.value[0].id
        // }
        let lists: any = []
        // 处理电能质量指标
        const selectedIndicator = indicatorList.value?.find(
            (item: any) => item.id === tableStore.table.params.indicator
        )
        if (selectedIndicator) {
            let frequencys = ''
            if (selectedIndicator.name.includes('谐波含有率')) {
                frequencys = tableStore.table.params.harmonicCount
            }

            lists.push({
                statisticalId: tableStore.table.params.indicator,
                frequency: frequencys !== null && frequencys !== undefined ? String(frequencys) : ''
            })
        }

        // 将 lists 添加到请求参数中
        tableStore.table.params.list = lists
    },
    loadCallback: () => {
        tableStore.table.height = `calc(${prop.height} - 80px)`
        // 数据加载完成后的处理
        if (tableStore.table.data) {
            chartsListBefore.value = tableStore.table.data.before
            chartsListAfter.value = tableStore.table.data.after
            setEchart()
        }
    }
})

tableStore.table.params.indicator = ''
tableStore.table.params.exceedingTheLimit = ''
tableStore.table.params.dataLevel = 'Primary'
tableStore.table.params.valueType = 'avg'
provide('tableStore', tableStore)

onMounted(() => {
    initCode()
    // initListByIds()
})

const setTime = () => {
    const time = getTime(
        (TableHeaderRef.value?.datePickerRef.interval || prop.interval) ?? 0,
        prop.timeKey,
        fullscreen.value
            ? [tableStore.table.params.searchBeginTime, tableStore.table.params.searchEndTime]
            : prop.timeValue
    )

    if (Array.isArray(time)) {
        tableStore.table.params.searchBeginTime = time[0]
        tableStore.table.params.searchEndTime = time[1]
        TableHeaderRef.value?.setInterval(time[2] - 0)
        TableHeaderRef.value?.setTimeInterval([time[0], time[1]])
    } else {
        console.warn('获取时间失败，time 不是一个有效数组')
    }
}

// 判断是否应该显示谐波次数选择框
const shouldShowHarmonicCount = () => {
    if (!tableStore.table.params.indicator || !indicatorList.value) return false

    const currentIndicator = indicatorList.value.find((item: any) => item.id === tableStore.table.params.indicator)

    return (
        currentIndicator &&
        (currentIndicator.name.includes('幅值') || currentIndicator.name.includes('含有率'))
    )
}

// 获取谐波类型名称
const getHarmonicTypeName = () => {
    const currentIndicator = indicatorList.value.find((item: any) => item.id === tableStore.table.params.indicator)

    if (currentIndicator) {
        if (currentIndicator.name.includes('电压')) {
            return '电压'
        } else if (currentIndicator.name.includes('电流')) {
            return '电流'
        }
    }
    return ''
}

watch(
    () => prop.timeKey,
    val => {
        tableStore.index()
    }
)
watch(
    () => prop.timeValue,
    (newVal, oldVal) => {
        tableStore.index()
    },
    {
        deep: true
    }
)

// 监听指标变化，当指标变化时重置谐波次数
watch(
    () => tableStore.table.params.indicator,
    newVal => {
        if (shouldShowHarmonicCount()) {
            // 如果之前没有设置过谐波次数，则默认设置为2
            if (!tableStore.table.params.harmonicCount) {
                tableStore.table.params.harmonicCount = 2
            }
        } else {
            // 如果不是谐波含有率指标，则清除谐波次数设置
            tableStore.table.params.harmonicCount = ''
        }
    }
)
</script>
<style lang="scss" scoped>
// :deep(.el-select) {
//     min-width: 80px;
// }
.device-control {
    display: flex;
}

:deep(.cn-tree) {
    padding: 0 10px 0 0 !important;
}
</style>