feat: 告警记录

罗广辉

2026-01-08 2cd8417af7a6deb52b6fc7596d7a2b85dd0367d6

feat: 告警记录

 applications/drone-command/src/views/recordManage/alarmRecords.vue

File was deleted

 applications/drone-command/src/views/recordManage/alarmRecords/FormDiaLog.vue

New file
@@ -0,0 +1,140 @@
<template>
    <el-dialog v-model="visible" :title="dialogTitle" @closed="handleClosed" destroy-on-close>
        <el-form ref="formRef" :model="formData" :rules="rules" :disabled="dialogReadonly" label-width="100px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="无人机名称" prop="droneName">
                        <el-input v-model="formData.droneName" maxlength="50" placeholder="请输入" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="区域" prop="areaCode">
                        <el-input v-model="formData.areaCode" maxlength="50" placeholder="请输入" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="设备类型" prop="droneType">
                        <el-input v-model="formData.droneType" maxlength="50" placeholder="请输入" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="告警类型" prop="alarmType">
                        <el-input v-model="formData.alarmType" maxlength="50" placeholder="请输入" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="告警时间" prop="alarmTime">
                        <el-input v-model="formData.alarmTime" maxlength="50" placeholder="请输入" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="触发原因" prop="triggerReason">
                        <el-input v-model="formData.triggerReason" maxlength="200" placeholder="请输入" clearable />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <el-button @click="handleCancel">{{ dialogReadonly ? '关闭' : '取消' }}</el-button>
            <el-button
                v-if="!dialogReadonly"
                type="primary"
                :loading="submitting"
                :disabled="submitting"
                @click="handleSubmit"
            >
                确定
            </el-button>
        </template>
    </el-dialog>
</template>

<script setup>
import { computed, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { fieldRules } from '@ztzf/utils'
import { fwDroneAlarmRecordDetailApi, fwDroneAlarmRecordSubmitApi } from './fwDroneAlarmRecord'

const initForm = () => ({
    // 表单默认值
    id: '', // 主键id
    alarmTime: '', // 告警时间
    alarmType: '', // 告警类型
    areaCode: '', // 区域
    droneName: '', // 无人机名称
    droneType: '', // 设备类型
    triggerReason: '', // 触发原因
})

const emit = defineEmits(['success'])
const formRef = ref(null) // 表单实例
const formData = ref(initForm()) // 表单数据
const visible = ref(false) // 弹框显隐
const dialogMode = ref('add') // 弹框模式
const submitting = ref(false)
const dialogReadonly = computed(() => dialogMode.value === 'view')
const dialogTitle = computed(() => {
    if (dialogMode.value === 'edit') {
        return '编辑'
    } else if (dialogMode.value === 'view') {
        return '查看'
    } else {
        return '新增'
    }
})

const rules = {
    droneName: fieldRules(true, 50),
    areaCode: fieldRules(true, 50),
    droneType: fieldRules(true, 50),
    alarmType: fieldRules(true, 50),
    alarmTime: fieldRules(true, 50),
    triggerReason: fieldRules(false, 200),
}

// 关闭弹框
function handleCancel() {
    visible.value = false
}

// 提交新增/编辑
async function handleSubmit() {
    const isValid = await formRef.value?.validate().catch(() => false)
    if (!isValid) return
    submitting.value = true
    try {
        await fwDroneAlarmRecordSubmitApi(formData.value)
        ElMessage.success(dialogMode.value === 'add' ? '新增成功' : '更新成功')
        visible.value = false
        emit('success')
    } finally {
        submitting.value = false
    }
}

// 加载详情
async function loadDetail() {
    if (!formData.value.id) return
    const res = await fwDroneAlarmRecordDetailApi({ id: formData.value.id })
    formData.value = res?.data?.data ?? {}
}

// 关闭后重置
function handleClosed() {
    formData.value = initForm()
}

// 打开弹框
async function open({ mode, row } = {}) {
    dialogMode.value = mode || 'add'
    formData.value = row
    visible.value = true
    if (dialogMode.value === 'add') {
        formData.value = initForm()
    } else {
        await loadDetail()
    }
}

defineExpose({ open })
</script>

 applications/drone-command/src/views/recordManage/alarmRecords/alarmRecords.vue

New file
@@ -0,0 +1,171 @@
<template>
    <basic-container>
        <el-form ref="queryParamsRef" :model="searchParams">
            <el-row :gutter="16">
                <el-col :span="4">
                    <el-form-item label="无人机名称" prop="droneName">
                        <el-input v-model="searchParams.droneName" placeholder="请输入" clearable @clear="getList" />
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="区域" prop="areaCode">
                        <el-input v-model="searchParams.areaCode" placeholder="请输入" clearable @clear="getList" />
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="设备类型" prop="droneType">
                        <el-select v-model="searchParams.droneType" placeholder="请选择" clearable @clear="getList">
                            <el-option
                                v-for="item in dictObj.deviceType"
                                :key="item.dictKey"
                                :label="item.dictValue"
                                :value="item.dictKey"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item>
                        <el-button @click="resetForm">重置</el-button>
                        <el-button type="primary" @click="handleSearch">查询</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <el-table v-loading="loading" :data="list">
            <el-table-column type="index" width="60" label="序号" />
            <el-table-column prop="droneName" label="无人机名称" />
            <el-table-column prop="droneSerialNo" label="无人机序列号" />
            <el-table-column prop="alarmTime" label="告警时间" />
            <el-table-column prop="areaCode" label="区域" />
            <el-table-column prop="triggerReason" label="触发原因" />
            <el-table-column label="侦测反制设备">
                <template v-slot="{ row }">
                    {{ getCounterDeviceName(row) }}
                </template>
            </el-table-column>
            <el-table-column prop="droneType" label="设备类型">
                <template v-slot="{ row }">
                    {{ getDeviceTypeName(row.droneType) }}
                </template>
            </el-table-column>
            <el-table-column label="设备编码">
                <template v-slot="{ row }">
                    {{ getDeviceCode(row) }}
                </template>
            </el-table-column>
            <el-table-column label="设备状态">
                <template v-slot="{ row }">
                    {{ getDeviceStatus(row) }}
                </template>
            </el-table-column>
<!--            <el-table-column label="操作">-->
<!--                <template v-slot="{ row }">-->
<!--                    <el-link @click="handleView(row)" type="primary">查看</el-link>-->
<!--                </template>-->
<!--            </el-table-column>-->
        </el-table>

        <div>
            <el-pagination
                v-model:current-page="searchParams.current"
                v-model:page-size="searchParams.size"
                :total="total"
                @change="getList"
            />
        </div>

        <FormDiaLog ref="dialogRef" />
    </basic-container>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue'
import { getDictionaryByCode } from '@/api/system/dictbiz'
import { fwDroneAlarmRecordPageApi } from './fwDroneAlarmRecord'
import FormDiaLog from './FormDiaLog.vue'

const initSearchParams = () => ({
    droneName: '', // 无人机名称
    areaCode: '', // 区域
    droneType: '', // 设备类型
    current: 1, // 当前页
    size: 10, // 每页大小
})
const searchParams = ref(initSearchParams()) // 查询参数
const total = ref(0) // 总条数
const loading = ref(false) // 列表加载中
const list = ref([]) // 列表数据
const queryParamsRef = ref(null) // 查询表单实例
const dialogRef = ref(null) // 弹框实例
const dictObj = ref({
    deviceType: [],
})
const deviceTypeMap = computed(() => {
    const map = new Map()
    dictObj.value.deviceType.forEach(item => {
        map.set(item.dictKey, item.dictValue)
    })
    return map
})

// 获取列表
async function getList() {
    loading.value = true
    try {
        const res = await fwDroneAlarmRecordPageApi(searchParams.value)
        list.value = res?.data?.data?.records ?? []
        total.value = res?.data?.data?.total ?? 0
    } finally {
        loading.value = false
    }
}

// 查询
function handleSearch() {
    searchParams.value.current = 1
    getList()
}

// 重置查询
function resetForm() {
    queryParamsRef.value?.resetFields()
    searchParams.value.current = 1
    getList()
}

// 查看
function handleView(row) {
    dialogRef.value?.open({ mode: 'view', row: { ...row } })
}

function getCounterDeviceName(row) {
    return row.deviceName || row.deviceId || '-'
}

function getDeviceCode(row) {
    return row.deviceCode || row.deviceId || '-'
}

function getDeviceStatus(row) {
    return row.deviceStatus ?? row.status ?? '-'
}

function getDeviceTypeName(value) {
    return deviceTypeMap.value.get(value) || value || '-'
}

// 获取字典
function getDictList() {
    getDictionaryByCode('deviceType').then(res => {
        dictObj.value = res.data.data
    })
}

onMounted(() => {
    getList()
    getDictList()
})
</script>
<style scoped lang="scss"></style>

 applications/drone-command/src/views/recordManage/alarmRecords/fwDroneAlarmRecord.js

New file
@@ -0,0 +1,37 @@
import request from '@/axios'

// 查list
export const fwDroneAlarmRecordPageApi = params => {
    return request({
        url: `/drone-fw/record/fwDroneAlarmRecord/page`,
        method: 'get',
        params,
    })
}

// 增加或更新
export const fwDroneAlarmRecordSubmitApi = data => {
    return request({
        url: `/drone-fw/record/fwDroneAlarmRecord/submit`,
        method: 'post',
        data,
    })
}

//删除
export const fwDroneAlarmRecordRemoveApi = params => {
    return request({
        url: `/drone-fw/record/fwDroneAlarmRecord/remove`,
        method: 'post',
        params,
    })
}

//详情
export const fwDroneAlarmRecordDetailApi = params => {
    return request({
        url: `/drone-fw/record/fwDroneAlarmRecord/detail`,
        method: 'get',
        params,
    })
}

 applications/drone-command/src/views/recordManage/historyTracks/historyTracks.vue