admin-govern/src/components/cockpit/indicatorFittingChart/components/overLimitDetails.vue

<template>
    <div>
        <!-- 指标越限详情  -->
        <el-dialog draggable title="指标越限详情" v-model="dialogVisible" append-to-body width="70%">
            <TableHeader datePicker showExport :showReset="false" ref="tableHeaderRef">
                <template v-slot:select>
                    <el-form-item label="监测点">
                        <el-select
                            v-model="tableStore.table.params.lineId"
                            placeholder="请选择监测点"
                            style="width: 150px"
                        >
                            <el-option
                                v-for="item in options"
                                :key="item.lineId"
                                :label="item.name"
                                :value="item.lineId"
                            />
                        </el-select>
                    </el-form-item>
                </template>
            </TableHeader>
            <Table ref="tableRef" @cell-click="cellClickEvent" isGroup :height="height"></Table>
        </el-dialog>
        <!-- 谐波电流、谐波电压占有率 -->
        <HarmonicRatio‌
            ref="harmonicRatio‌Ref"
            @close="onHarmonicRatioClose"
            v-if="dialogFlag"
        />
    </div>
</template>
<script setup lang="ts">
import { ref, provide,nextTick } from 'vue'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import TableStore from '@/utils/tableStore'
import { mainHeight } from '@/utils/layout'
import HarmonicRatio‌ from '@/components/cockpit/indicatorFittingChart/components/harmonicRatio‌.vue'
import { cslineList } from '@/api/harmonic-boot/cockpit/cockpit'

const dialogVisible: any = ref(false)
const harmonicRatio‌Ref: any = ref(null)

const dialogFlag = ref(false)

const options = ref()
const height = mainHeight(0, 2).height as any
const tableHeaderRef = ref()
const loop50 = (key: string) => {
    let list: any[] = []
    for (let i = 2; i < 26; i++) {
        list.push({
            title: i + '次',
            field: key + i + 'Overtime',
            width: '80',
            render: 'customTemplate',
            customTemplate: (row: any) => {
                return `<span style='cursor: pointer;text-decoration: underline;'>${row[key + i + 'Overtime']}</span>`
            }
        })
    }
    return list
}
const tableStore: any = new TableStore({
    url: '/cs-harmonic-boot/mainLine/statLimitRateDetails',
    method: 'POST',
    publicHeight: 30,
    showPage: false,
    exportName: '主要监测点列表',
    column: [
        {
            field: 'index',
            title: '序号',
            width: '80',
            formatter: (row: any) => {
                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
            }
        },
        {
            title: '日期',
            field: 'time',
            width: '150',
            sortable: true
        },
        {
            title: '名称',
            field: 'lineName',
            width: '150'
        },
        {
            title: '闪变越限(分钟)',
            field: 'flickerOvertime',
            width: '80',
            render: 'customTemplate',
            customTemplate: (row: any) => {
                return `<span style='cursor: pointer;text-decoration: underline;'>${row.flickerOvertime}</span>`
            }
        },
        {
            title: '谐波电压越限(分钟)',
            children: loop50('uharm')
        },
        {
            title: '谐波电流越限(分钟)',
            children: loop50('iharm')
        },
        {
            title: '三相不平衡度越限(分钟)',
            field: 'ubalanceOvertime',
            width: '100',
            render: 'customTemplate',
            customTemplate: (row: any) => {
                return `<span style='cursor: pointer;text-decoration: underline;'>${row.ubalanceOvertime}</span>`
            }
        },
        {
            title: '电压偏差越限(分钟)',
            field: 'uaberranceOvertime',
            width: '100',
            render: 'customTemplate',
            customTemplate: (row: any) => {
                return `<span style='cursor: pointer;text-decoration: underline;'>${row.uaberranceOvertime}</span>`
            }
        },
        {
            title: '频率偏差越限(分钟)',
            field: 'freqDevOvertime',
            width: '100',
            render: 'customTemplate',
            customTemplate: (row: any) => {
                return `<span style='cursor: pointer;text-decoration: underline;'>${row.freqDevOvertime}</span>`
            }
        }
    ],
     beforeSearchFun: () => {
    },
    loadCallback: () => {
    }
})


provide('tableStore', tableStore)
tableStore.table.params.sortBy = ''
tableStore.table.params.orderBy = ''
const open = async (row: any,searchBeginTime:any,searchEndTime:any) => {
    dialogVisible.value = true
    initCSlineList()
    tableStore.table.params.lineId = row.lineId

    nextTick(() => {
        tableHeaderRef.value.setTimeInterval([searchBeginTime, searchEndTime])
        tableStore.table.params.searchBeginTime =searchBeginTime
        tableStore.table.params.searchEndTime = searchEndTime
        tableStore.index()
    })

}

// 点击行
const cellClickEvent = ({ row, column }: any) => {
    if (column.field != 'name' && column.field != 'time') {
        dialogFlag.value = true
        dialogVisible.value = false
        nextTick(() => {
            harmonicRatio‌Ref.value.openDialog(row,column.field,column.title.replace(/次/g, ""))
        })

    }
}

// 谐波弹窗关闭时的回调
const onHarmonicRatioClose = () => {
    dialogFlag.value = false
    // 重新打开指标越限详情弹窗
    nextTick(() => {
        dialogVisible.value = true
    })
}

const initCSlineList = async () => {
    const res = await cslineList({})
    options.value = res.data
}



defineExpose({ open })
</script>
<style lang="scss" scoped></style>