增加设备告警消息

wangrong

2026-07-18 bb3806ca1c0cf681748537030af3cea98e918489

增加设备告警消息

 src/modules/push/views/devicealarm.vue

New file
@@ -0,0 +1,260 @@
<template>
    <cl-crud ref="Crud">
        <cl-row>
            <!-- 刷新按钮 -->
            <cl-refresh-btn />
            <!-- 新增按钮 -->
            <cl-add-btn />
            <!-- 删除按钮 -->
            <cl-multi-delete-btn />
            <cl-flex1 />
            <!-- 条件搜索 -->
            <cl-search ref="Search" />
        </cl-row>

        <cl-row>
            <!-- 数据表格 -->
            <cl-table ref="Table" />
        </cl-row>

        <cl-row>
            <cl-flex1 />
            <!-- 分页控件 -->
            <cl-pagination />
        </cl-row>

        <!-- 新增、编辑 -->
        <cl-upsert ref="Upsert" />
    </cl-crud>
</template>

<script lang="ts" setup>
    defineOptions({
        name: "push-devicealarm"
    });

    import { useCrud, useTable, useUpsert, useSearch } from "@cool-vue/crud";
    import { useCool } from "/@/cool";
    import { useI18n } from "vue-i18n";
    import { reactive } from "vue";

    const { service } = useCool();
    const { t } = useI18n();

    // 选项
    const options = reactive({
        channelType: [
            { label: t('视频通道'), value: 0, type: "danger" },
            { label: t('IO通道'), value: 1, type: "success" }
        ],
        crypt: [
            { label: t('不加密'), value: 0 },
            { label: t('用户加密'), value: 1 },
            { label: t('平台加密'), value: 2 }
        ],
        status: [
            { label: t('开始'), value: 0, type: "danger" },
            { label: t('停止'), value: 1, type: "success" }
        ]
    });

    // cl-upsert
    const Upsert = useUpsert({
        items: [
            {
                label: t('设备序列号'),
                prop: "devSerial",
                component: { name: "el-input", props: { clearable: true } },
                span: 12,
                required: true
            },
            {
                label: t('通道号'),
                prop: "channelNo",
                hook: "number",
                component: { name: "el-input-number", props: { min: 0 } },
                span: 12,
                required: true
            },
            {
                label: t('选择报警消息'),
                prop: "alarmId",
                component: { name: "el-input", props: { clearable: true } },
                span: 12,
                required: true
            },
            {
                label: t('报警时间戳'),
                prop: "alarmTime",
                component: {
                    name: "el-date-picker",
                    props: { type: "datetime", valueFormat: "YYYY-MM-DD HH:mm:ss" }
                },
                span: 12,
                required: true
            },
            {
                label: t('报警类型'),
                prop: "alarmType",
                component: { name: "el-input", props: { clearable: true } },
                span: 12,
                required: true
            },
            {
                label: t('通道名称'),
                prop: "channelName",
                component: { name: "el-input", props: { clearable: true } },
                span: 12,
                required: true
            },
            {
                label: t('通道类型'),
                prop: "channelType",
                component: { name: "el-radio-group", options: options.channelType },
                value: 0,
                required: true
            },
            {
                label: t('加密密码'),
                prop: "checksum",
                component: { name: "el-input", props: { clearable: true } },
                span: 12
            },
            {
                label: t('图片加密类型'),
                prop: "crypt",
                component: { name: "el-radio-group", options: options.crypt },
                value: 0,
                required: true
            },
            {
                label: t('自定义信息'),
                prop: "customInfo",
                component: { name: "el-input", props: { clearable: true } },
                span: 12
            },
            {
                label: t('自定义协议类型'),
                prop: "customType",
                component: { name: "el-input", props: { clearable: true } },
                span: 12
            },
            {
                label: t('告警描述'),
                prop: "describe",
                component: { name: "el-input", props: { type: "textarea", rows: 4 } }
            },
            {
                label: t('位置信息'),
                prop: "location",
                component: { name: "el-input", props: { clearable: true } },
                span: 12
            },
            {
                label: t('选择关联'),
                prop: "relationId",
                component: { name: "el-input", props: { clearable: true } },
                span: 12
            },
            {
                label: t('报警状态'),
                prop: "status",
                component: { name: "el-radio-group", options: options.status },
                value: 0,
                required: true
            },
            {
                label: t('告警图片列表'),
                prop: "pictureList",
                component: { name: "cl-upload", props: { multiple: true } }
            }
        ]
    });

    // cl-table
    const Table = useTable({
        columns: [
            { type: "selection" },
            { label: t('设备序列号'), prop: "devSerial", minWidth: 140 },
            { label: t('通道号'), prop: "channelNo", minWidth: 140, sortable: "custom" },
            { label: t('报警消息ID'), prop: "alarmId", minWidth: 140 },
            {
                label: t('报警时间戳'),
                prop: "alarmTime",
                minWidth: 170,
                sortable: "custom",
                component: { name: "cl-date-text" }
            },
            { label: t('报警类型'), prop: "alarmType", minWidth: 140 },
            { label: t('通道名称'), prop: "channelName", minWidth: 140 },
            {
                label: t('通道类型'),
                prop: "channelType",
                minWidth: 120,
                dict: options.channelType
            },
            { label: t('加密密码'), prop: "checksum", minWidth: 140 },
            {
                label: t('图片加密类型'),
                prop: "crypt",
                minWidth: 120,
                dict: options.crypt
            },
            { label: t('自定义信息'), prop: "customInfo", minWidth: 140 },
            { label: t('自定义协议类型'), prop: "customType", minWidth: 140 },
            {
                label: t('告警描述'),
                prop: "describe",
                showOverflowTooltip: true,
                minWidth: 200
            },
            { label: t('位置信息'), prop: "location", minWidth: 140 },
            { label: t('关联ID'), prop: "relationId", minWidth: 140 },
            {
                label: t('报警状态'),
                prop: "status",
                minWidth: 120,
                dict: options.status
            },
            {
                label: t('告警图片列表'),
                prop: "pictureList",
                minWidth: 100,
                component: { name: "cl-image", props: { size: 60 } }
            },
            {
                label: t('创建时间'),
                prop: "createTime",
                minWidth: 170,
                sortable: "desc",
                component: { name: "cl-date-text" }
            },
            {
                label: t('更新时间'),
                prop: "updateTime",
                minWidth: 170,
                sortable: "custom",
                component: { name: "cl-date-text" }
            },
            { type: "op", buttons: ["edit", "delete"] }
        ]
    });

    // cl-search
    const Search = useSearch();

    // cl-crud
    const Crud = useCrud(
        {
            service: service.push.devicealarm
        },
        (app) => {
            app.refresh();
        }
    );

    // 刷新
    function refresh(params?: any) {
        Crud.value?.refresh(params);
    }
</script>