admin-govern/src/views/govern/alarm/multiCondition.vue

<template>
    <el-dialog v-model="visible" title="事件筛选" width="450px" append-to-body draggable class="transient-filter-dialog">
        <el-form label-width="auto" class="filter-form">
            <el-form-item label="暂态幅值(%)">
                <div class="range-inputs">
                    <el-input-number v-model="params.featureAmplitudeMin" class="range-input-item" :min="0" :max="180"
                        :precision="2" :step="0.01" :controls="false" placeholder="0" />
                    <span class="range-sep">&lt;&ensp;&ensp;&ensp;幅值&ensp;&ensp;&ensp;&lt;</span>
                    <el-input-number v-model="params.featureAmplitudeMax" class="range-input-item" :min="0" :max="180"
                        :precision="2" :step="0.01" :controls="false" placeholder="180" />
                </div>
            </el-form-item>
            <el-form-item label="暂态持续时间(s)">
                <div class="range-inputs">
                    <el-input-number v-model="params.evtParamTmMin" class="range-input-item" :min="0" :max="60"
                        :precision="2" :step="0.01" :controls="false" placeholder="X秒" />
                    <span class="range-sep">&lt;&ensp;持续时间&ensp;&lt;</span>
                    <el-input-number v-model="params.evtParamTmMax" class="range-input-item" :min="0" :max="60"
                        :precision="2" :step="0.01" :controls="false" placeholder="X秒" />
                </div>
            </el-form-item>
            <el-form-item label="事件严重度">
                <div class="range-inputs">
                    <el-input-number v-model="params.severityMin" class="range-input-item" :min="0" :max="10"
                        :precision="2" :step="1" :controls="false" placeholder="0" />
                    <span class="range-sep">&lt;&emsp;严重度&emsp; &lt;</span>
                    <el-input-number v-model="params.severityMax" class="range-input-item" :min="0" :max="10"
                        :precision="2" :step="1" :controls="false" placeholder="10" />
                </div>
            </el-form-item>
            <el-form-item label="触发类型">
                <el-select v-model="params.target" clearable placeholder="请选择触发类型" multiple collapse-tags
                    style="width: 317px">
                    <el-option v-for="item in eventTypeList" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="是否存在波形">
                <el-select v-model="params.fileFlag" clearable placeholder="请选择是否存在波形" style="width: 317px">
                    <el-option v-for="item in fileFlagOptions" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <div>
                <el-button type="primary" @click="onConfirm">确认</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'

const getDefaultFilterParams = () => ({
    featureAmplitudeMin: undefined as number | undefined,
    featureAmplitudeMax: undefined as number | undefined,
    evtParamTmMin: undefined as number | undefined,
    evtParamTmMax: undefined as number | undefined,
    severityMin: undefined as number | undefined,
    severityMax: undefined as number | undefined,
    target: [] as string[],
    fileFlag: '' as string | number
})

const visible = defineModel<boolean>('visible', { default: false })

const props = defineProps<{
    params: Record<string, any>
}>()

const emit = defineEmits<{
    confirm: []
}>()

const eventTypeList = [
    { label: '暂降', value: '暂降' },
    { label: '暂升', value: '暂升' },
    { label: '中断', value: '中断' },
    { label: '瞬态', value: '瞬态' },
    { label: '振荡', value: '振荡' },
]

const fileFlagOptions = [
    { label: '存在', value: 1 },
    { label: '不存在', value: 0 }
]

const validateRange = (
    min: number | undefined,
    max: number | undefined,
    label: string,
    options?: { maxLimit?: number }
) => {
    const hasMin = min != null && !Number.isNaN(min)
    const hasMax = max != null && !Number.isNaN(max)

    if (!hasMin && !hasMax) return true

    // 只填最小值或最大值其中一个时，不做范围校验
    if (hasMin !== hasMax) return true

    if (max! <= min!) {
        ElMessage.warning(`${label}最大值必须大于最小值`)
        return false
    }

    if (options?.maxLimit !== undefined && max! > options.maxLimit) {
        ElMessage.warning(`${label}最大值不能大于${options.maxLimit}`)
        return false
    }

    return true
}

const reset = () => {
    Object.assign(props.params, getDefaultFilterParams())
}

const onConfirm = () => {
    const { featureAmplitudeMin, featureAmplitudeMax, evtParamTmMin, evtParamTmMax, severityMin, severityMax } = props.params

    if (!validateRange(featureAmplitudeMin, featureAmplitudeMax, '暂态幅值', { maxLimit: 180 })) {
        return
    }
    if (!validateRange(evtParamTmMin, evtParamTmMax, '暂态持续时间', { maxLimit: 60 })) {
        return
    }
    if (!validateRange(severityMin, severityMax, '严重度', { maxLimit: 10 })) {
        return
    }
    visible.value = false
    emit('confirm')



}

defineExpose({ reset })
</script>

<style scoped lang="scss">
.range-inputs {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;

    .range-input-item {
        width: 120px;

        :deep(.el-input__wrapper) {
            width: 100%;
        }
    }

    .range-sep {
        flex-shrink: 0;
        color: var(--el-text-color-regular);
        font-size: 14px;
        white-space: nowrap;
    }
}
</style>