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

<template>
    <div>
        <!-- 综合评估详情 -->
        <el-dialog draggable title="指标合格率统计" v-model="dialogVisible" append-to-body width="70%">
            <TableHeader datePicker showExport :showReset="false">
                <template v-slot:select>
                    <el-form-item label="监测点名称">
                        <el-select
                            v-model="tableStore.table.params.searchValue"
                            placeholder="请选择监测点名称"
                            style="width: 240px"
                        >
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </template>
            </TableHeader>
            <Table ref="tableRef" @cell-click="cellClickEvent" isGroup :height="height"></Table>
        </el-dialog>
        <!-- 谐波电流、谐波电压占有率 -->
        <HarmonicRatio‌ ref="harmonicRatio‌Ref" />
    </div>
</template>
<script setup lang="ts">
import { ref, provide } 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/listOfMainMonitoringPoints/components/harmonicRatio‌.vue'
const dialogVisible: any = ref(false)
const harmonicRatio‌Ref: any = ref(null)
const options = [
    {
        value: '35kV进线',
        label: '35kV进线'
    }
]
const height = mainHeight(0, 2).height as any
const loop50 = (key: string) => {
    let list: any[] = []
    for (let i = 2; i < 51; i++) {
        list.push({
            title: i + '次',
            // field: key + i,
            field: 'flicker',
            width: '80',
            render: 'customTemplate',
            customTemplate: (row: any) => {
                return `<span style='cursor: pointer;text-decoration: underline;'>${row.flicker}</span>`
            }
        })
    }
    return list
}
const tableStore: any = new TableStore({
    url: '/user-boot/role/selectRoleDetail?id=0',
    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'
        },
        {
            title: '名称',
            field: 'name',
            width: '150'
        },
        {
            title: '闪变越限(分钟)',
            field: 'flicker',
            width: '80',
            render: 'customTemplate',
            customTemplate: (row: any) => {
                return `<span style='cursor: pointer;text-decoration: underline;'>${row.flicker}</span>`
            }
        },
        {
            title: '谐波电压越限(分钟)',
            children: loop50('voltage')
        },
        {
            title: '谐波电流越限(分钟)',
            children: loop50('harmonicCurrent')
        },
        {
            title: '三相不平衡度越限(分钟)',
            field: 'flicker',
            width: '100'
        },
        {
            title: '电压偏差越限(分钟)',
            field: 'flicker',
            width: '100'
        },
        {
            title: '频率偏差越限(分钟)',
            field: 'flicker',
            width: '100'
        }
    ],
    beforeSearchFun: () => {},
    loadCallback: () => {
        tableStore.table.data = [
            {
                time: '2024-01-01 00:00:00',
                name: '35kV进线',
                flicker: '0'
            },
            {
                time: '2024-01-01 00:00:00',
                name: '35kV进线',
                flicker: '0'
            },
            {
                time: '2024-01-01 00:00:00',
                name: '35kV进线',
                flicker: '0'
            }
        ]
    }
})

tableStore.table.params.searchValue = ''
provide('tableStore', tableStore)
const open = async (row: any) => {
    dialogVisible.value = true
    tableStore.index()
}

// 点击行
const cellClickEvent = ({ row, column }: any) => {
    if (column.field != 'name' && column.field != 'time') {
        harmonicRatio‌Ref.value.openDialog(row)
    }
}


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