admin-sjzx/src/views/pqs/supervise/electricalEnergy/components1/online.vue

<template>
    <!-- <div>1 监测点信息  发起预告警单 </div> -->

    <TableHeader datePicker nextFlag theCurrentTime ref="TableHeaderRef" showExport>
        <template v-slot:select>
            <el-form-item label="区域">
                <Area ref="areaRef" v-model="tableStore.table.params.deptId" @changeValue="changeArea" />
            </el-form-item>
            <el-form-item label="监测点性质">
                <el-select v-model="tableStore.table.params.lineType" clearable placeholder="请选择监测点性质">
                    <el-option label="电网侧" value="0" />
                    <el-option label="非电网侧" value="1" />
                </el-select>
            </el-form-item>
            <el-form-item label="超标指标">
                <el-select
                    v-model="tableStore.table.params.targetList"
                    clearable
                    multiple
                    collapse-tags
                    collapse-tags-tooltip
                    placeholder="请选择超标指标"
                >
                    <el-option v-for="item in exceeded" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="数据类型">
                <el-switch
                    v-model="tableStore.table.params.dataType"
                    inline-prompt
                    active-value="1"
                    inactive-value="0"
                    active-text="超标数据"
                    inactive-text="无数据"
                />
            </el-form-item>
            <el-form-item label="预警阈值">
                <!-- <el-input v-model="tableStore.table.params.alertThreshold" placeholder="请输入预警阈值" clearable></el-input> -->
                <el-input-number
                    v-model="tableStore.table.params.alertThreshold"
                    :min="0"
                    :step="1"
                    step-strictly
                    @change="changeAlert"
                />
            </el-form-item>
            <el-form-item label="告警阈值">
                <el-input-number
                    v-model="tableStore.table.params.alarmThreshold"
                    :min="0"
                    :step="1"
                    step-strictly
                    @change="changeAlarm"
                />
            </el-form-item>
            <!-- <el-form-item label="搜索">
          <el-input
              v-model="tableStore.table.params.searchValue"
              placeholder="输入变电站、终端、监测点名称"
              clearable
          ></el-input>
      </el-form-item> -->
        </template>
        <template #operation>
            <el-button icon="el-icon-Plus" :disabled="flag != '2'" type="primary" @click="launch('发起预警单')">
                发起预警单
            </el-button>
            <el-button icon="el-icon-Plus" :disabled="flag != '2'" type="primary" @click="launch('发起告警单')">
                发起告警单
            </el-button>
        </template>
    </TableHeader>
    <Table ref="tableRef" />
    <!-- /告警单 -->
    <alarmList ref="alarmListRef" @onSubmit="tableStore.index()" />
    <!-- 详情 -->
    <detail ref="detailRef" />
</template>
<script setup lang="ts">
import { ref, onMounted, provide, nextTick } from 'vue'
import TableStore from '@/utils/tableStore'
import Area from '@/components/form/area/index.vue'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useDictData } from '@/stores/dictData'
import alarmList from './form/alarmList.vue'
import detail from './form/detail.vue'
const VITE_FLAG = import.meta.env.VITE_NAME == 'jibei'
const dictData = useDictData()
import { useRouter } from 'vue-router'

const router = useRouter() // 路由对象
//字典获取超标指标
const exceeded = dictData.getBasicData('Steady_Statis')
const tableRef = ref()
const industry = dictData.getBasicData('Business_Type')
const TableHeaderRef = ref()
const alarmListRef = ref()
const flagTime = ref(false)
const detailRef = ref()
const list: any = ref({
    deptId: '',
    searchBeginTime: '',
    searchEndTime: '',
    alertThreshold: '',
    alarmThreshold: ''
})
const level: any = ref(dictData.state.area[0]?.level)
const flag: any = ref('')
const tableStore = new TableStore({
    url: '/supervision-boot/onlineMonitor/list',
    publicHeight: 65,
    method: 'POST',
    filename: '在线监测',
    // isWebPaging:true,
    column: [
        { title: '', type: 'checkbox', width: 40 },
        {
            title: '序号',

            align: 'center',
            width: 80,
            formatter: (row: any) => {
                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
            }
        },
        { field: 'dept', title: '负责单位' },
        { field: 'substation', title: '变电站名称' },
        { field: 'deviceName', title: '终端名称' },
        { field: 'lineName', title: '监测点名称' },

        {
            field: 'businessType',
            title: '监测对象类型',

            formatter: (row: any) => {
                return industry.find((item: any) => item.id == row.cellValue)?.name || '/'
            }
        },
        { field: 'objectName', title: '监测对象名称' },
        {
            field: 'targetType',
            title: '指标类型',
            formatter: (row: any) => {
                return exceeded.find((item: any) => item.id == row.cellValue)?.name || '/'
            }
        },

        {
            field: 'overLimitDay',
            title: '累计超标天数',
            formatter: (row: any) => {
                return row.cellValue != null ? row.cellValue : '/'
            }
        },
        {
            field: 'updateTime',
            visible: flagTime,
            title: '最新数据时间'
        },
        {
            title: '操作',
            width: '180',
            align: 'center',
            render: 'buttons',
            fixed: 'right',
            buttons: [
                {
                    name: 'productSetting',
                    title: '详情',
                    type: 'primary',
                    icon: 'el-icon-EditPen',
                    render: 'basicButton',
                    disabled: row => {
                        return row.targetType == 0
                    },
                    click: row => {
                        detailRef.value.open({
                            text: '详情',
                            row: row,
                            list: list.value
                        })
                    }
                },
                {
                    name: 'productSetting',
                    title: '查看预警单',
                    type: 'primary',
                    icon: 'el-icon-EditPen',
                    render: 'basicButton',
                    disabled: row => {
                        return row.step != 1
                    },
                    click: row => {
                        router.push({
                            name: 'supervision/supervision/manage' + (VITE_FLAG ? '3' : ''),
                            query: {
                                type: 3,
                                t: Date.now()
                            }
                        })
                    }
                },
                {
                    name: 'productSetting',
                    title: '查看告警单',
                    type: 'primary',
                    icon: 'el-icon-EditPen',
                    render: 'basicButton',
                    disabled: row => {
                        return row.step != 2
                    },
                    click: row => {
                        router.push({
                            name: 'supervision/supervision/manage' + (VITE_FLAG ? '4' : ''),
                            query: {
                                type: 4,
                                t: Date.now()
                            }
                        })
                    }
                }
                // {
                //     name: 'productSetting',
                //     title: '发起告警单',
                //     type: 'warning',
                //     disabled: row => {
                //         return row.overLimitDay < tableStore.table.params.alarmThreshold
                //     },
                //     icon: 'el-icon-EditPen',
                //     render: 'basicButton',

                //     click: async row => {
                //         // handleWarningAlarmFlag(row).then(res => {
                //         //     console.log(res)
                //         //     ElMessage.success('发起告警单成功！')
                //         //     tableStore.index()
                //         // })
                //         const { value } = await ElMessageBox.prompt('', '整改意见', {
                //             confirmButtonText: '确定',
                //             cancelButtonText: '取消',

                //             inputType: 'textarea',
                //             inputPattern: /^[\s\S]*.*\S[\s\S]*$/, // 判断非空，且非空格
                //             inputErrorMessage: '请输入整改意见'
                //         })
                //         handleWarningAlarmFlag({ ...row, reformAdvice: value }).then(res => {
                //             ElMessage.success('发起告警单成功！')
                //             tableStore.index()
                //         })
                //     }
                // },
                // {
                //     name: 'edit',
                //     title: '发起预警单',
                //     type: 'primary',
                //     icon: 'el-icon-Open',
                //     disabled: row => {
                //         return row.overLimitDay >= tableStore.table.params.alarmThreshold
                //     },
                //     render: 'basicButton',

                //     click: async row => {
                //         // handleWarningAlarmFlag(row).then(res => {
                //         //     console.log(res)
                //         //     ElMessage.success('发起预警单成功！')
                //         //     tableStore.index()
                //         // })
                //         const { value } = await ElMessageBox.prompt('', '整改意见', {
                //             confirmButtonText: '确定',
                //             cancelButtonText: '取消',

                //             inputType: 'textarea',
                //             inputPattern: /^[\s\S]*.*\S[\s\S]*$/, // 判断非空，且非空格
                //             inputErrorMessage: '请输入整改意见'
                //         })
                //         handleWarningAlarmFlag({ ...row, reformAdvice: value }).then(res => {
                //             ElMessage.success('发起预警单成功！')
                //             tableStore.index()
                //         })
                //     }
                // }
            ]
        }
    ],
    beforeSearchFun: () => {
        tableStore.table.params.currentPage = tableStore.table.params.pageNum
        list.value.deptId = tableStore.table.params.deptId

        list.value.searchBeginTime = tableStore.table.params.searchBeginTime
        list.value.searchEndTime = tableStore.table.params.searchEndTime
        if (tableStore.table.params.alertThreshold != '') {
            list.value.alertThreshold = tableStore.table.params.alertThreshold
        }
        list.value.lineType = tableStore.table.params.lineType
        list.value.alarmThreshold = tableStore.table.params.alarmThreshold
        flag.value = level.value
        flagTime.value = tableStore.table.params.dataType == 0 ? true : false
    },
    loadCallback: () => {
        // tableStore.table.data = [
        //     {
        //         orgName: '张家口',
        //         subName: '110kV马头山风电场',
        //         lineName: '111口头线',
        //         voltageScale: '110kV',
        //         overDay: '20',
        //         overDays: '10'
        //     },
        //     {
        //         orgName: '张家口',
        //         subName: '110kV韩家庄风电场',
        //         lineName: '111缘韩一线',
        //         voltageScale: '110kV',
        //         overDay: '20',
        //         overDays: '16'
        //     }
        // ]
    }
})
tableStore.table.params.alertThreshold = 5
tableStore.table.params.alarmThreshold = 5
tableStore.table.params.targetList = exceeded.filter(item => item.code == 'Total_Indicator')[0].id
    ? [exceeded.filter(item => item.code == 'Total_Indicator')[0].id]
    : []
tableStore.table.params.lineType = ''
tableStore.table.params.dataType = '1'
tableStore.table.params.deptId = dictData.state.area[0].id
provide('tableStore', tableStore)
onMounted(() => {
    // TableHeaderRef.value.setDatePicker([{label: '月', value: 3}])

    tableStore.index()
    setTimeout(() => {
        TableHeaderRef.value.showSelectChange()
    }, 10)
})

const changeAlert = e => {
    if (e == null) {
        tableStore.table.params.alertThreshold = 5
    } else {
        if (e > tableStore.table.params.alarmThreshold) {
            ElMessage.warning('预警阈值不能大于报警阈值')
            tableStore.table.params.alertThreshold = 5
        }
    }
}
const changeAlarm = e => {
    if (e == null) {
        tableStore.table.params.alarmThreshold = 5
    } else {
        if (e < tableStore.table.params.alertThreshold) {
            ElMessage.warning('报警阈值不能小于预警阈值')
            tableStore.table.params.alarmThreshold = 5
        }
    }
}
// 发起预警单
const launch = (title: string) => {
    if (tableStore.table.selection.length == 0) {
        ElMessage.warning('请选择一条数据')
        return
    }

    alarmListRef.value.open({
        text: title,
        form: list.value,
        row: tableStore.table.selection
    })
    console.log('🚀 ~ launch ~ list.value:', list.value)
}
const changeArea = e => {
    level.value = e.data.level
}
</script>

<style scoped lang="scss"></style>