yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat（iot）：优化 alert 的代码实现。

pull/345/head
YunaiV 2026-05-18 12:36:58 +08:00
parent 81b4690998
commit 88515705dc
5 changed files with 38 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
apps/web-antd/src/views/iot/alert/config/data.ts
View File

@ -9,6 +9,7 @@ import { getSimpleUserList } from '#/api/system/user';
import { getRangePickerDefaultProps } from '#/utils';
/** 新增/修改告警配置的表单 */
// TODO @AI：两行=》1 行；
export function useFormSchema(): VbenFormSchema[] {
return [
{
@ -28,6 +29,7 @@ export function useFormSchema(): VbenFormSchema[] {
},
rules: 'required',
},
// TODO @AI：vue + ep 貌似也要改成 teatarea！
{
fieldName: 'description',
label: '配置描述',
@ -56,8 +58,11 @@ export function useFormSchema(): VbenFormSchema[] {
buttonStyle: 'solid',
optionType: 'button',
},
// TODO @AI：defaultValue 这种要枚举值哇？
defaultValue: 0,
rules: 'required',
},
// TODO @AI：可能 label 比较宽，需要拉长点。
{
fieldName: 'sceneRuleIds',
label: '关联场景联动规则',
@ -69,6 +74,7 @@ export function useFormSchema(): VbenFormSchema[] {
mode: 'multiple',
placeholder: '请选择关联的场景联动规则',
},
defaultValue: [],
rules: 'required',
},
{
@ -82,6 +88,7 @@ export function useFormSchema(): VbenFormSchema[] {
mode: 'multiple',
placeholder: '请选择接收的用户',
},
defaultValue: [],
rules: 'required',
},
{
@ -93,6 +100,7 @@ export function useFormSchema(): VbenFormSchema[] {
mode: 'multiple',
placeholder: '请选择接收类型',
},
defaultValue: [],
rules: 'required',
},
];
@ -155,7 +163,10 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
field: 'level',
title: '告警级别',
minWidth: 100,
slots: { default: 'level' },
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.IOT_ALERT_LEVEL },
},
},
{
field: 'status',
@ -170,7 +181,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
field: 'sceneRuleIds',
title: '关联场景联动规则',
minWidth: 150,
slots: { default: 'sceneRules' },
formatter: ({ cellValue }) => `${cellValue?.length || 0} 条`,
},
{
field: 'receiveUserNames',

27
apps/web-antd/src/views/iot/alert/config/index.vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts">
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { AlertConfig } from '#/api/iot/alert/config';
import type { AlertConfigApi } from '#/api/iot/alert/config';
import { Page, useVbenModal } from '@vben/common-ui';
import { DICT_TYPE } from '@vben/constants';
@ -12,7 +12,7 @@ import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { deleteAlertConfig, getAlertConfigPage } from '#/api/iot/alert/config';
import { $t } from '#/locales';
import AlertConfigForm from '../modules/alert-config-form.vue';
import AlertConfigForm from '../modules/form.vue';
import { useGridColumns, useGridFormSchema } from './data';
defineOptions({ name: 'IoTAlertConfig' });
@ -33,12 +33,12 @@ function handleCreate() {
}
/** 编辑告警配置 */
function handleEdit(row: AlertConfig) {
function handleEdit(row: AlertConfigApi.AlertConfig) {
formModalApi.setData(row).open();
}
/** 删除告警配置 */
async function handleDelete(row: AlertConfig) {
async function handleDelete(row: AlertConfigApi.AlertConfig) {
const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting', [row.name]),
duration: 0,
@ -81,7 +81,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
refresh: true,
search: true,
},
} as VxeTableGridOptions<AlertConfig>,
} as VxeTableGridOptions<AlertConfigApi.AlertConfig>,
});
</script>
@ -102,20 +102,9 @@ const [Grid, gridApi] = useVbenVxeGrid({
]"
/>
</template>
<!-- TODO @AI：可以在 data 里渲染么？应该 antd 里有例子的； -->
<!-- 告警级别列 -->
<template #level="{ row }">
<Tag>
{{ getDictLabel(DICT_TYPE.IOT_ALERT_LEVEL, row.level) }}
</Tag>
</template>
<!-- TODO @AI：可以在 data 里渲染么？应该 antd 里有例子的； -->
<!-- 关联场景联动规则列 -->
<template #sceneRules="{ row }">
<span>{{ row.sceneRuleIds?.length || 0 }} 条</span>
</template>
<!-- TODO @AI：可以在 data 里渲染么？应该 antd 里有例子的； -->
<!-- 接收类型列 -->
<!-- TODO DONE @AI：告警级别已改用 CellDict 在 data.ts 渲染 -->
<!-- TODO DONE @AI：关联场景联动规则计数已改用 formatter 在 data.ts 渲染 -->
<!-- TODO DONE @AI：接收类型是 number[] 多 Tag，CellDict 只能渲染单值，保留 slot -->
<template #receiveTypes="{ row }">
<Tag
v-for="(type, index) in row.receiveTypes"

19
apps/web-antd/src/views/iot/alert/modules/alert-config-form.vue → apps/web-antd/src/views/iot/alert/modules/form.vue
View File

@ -1,7 +1,6 @@
<script setup lang="ts">
// TODO @AI：是不是要简化成 form.vue？类似 system user form 的情况？
// TODO @AI：整体风格，看看是不是要对齐下 system user form 的风格；
import type { AlertConfig } from '#/api/iot/alert/config';
// TODO @AI：是不是应该拿到【config/modules】里？
import type { AlertConfigApi } from '#/api/iot/alert/config';
import { computed, ref } from 'vue';
@ -22,7 +21,7 @@ import { useFormSchema } from '../config/data';
defineOptions({ name: 'IoTAlertConfigForm' });
const emit = defineEmits(['success']);
const formData = ref<AlertConfig>();
const formData = ref<AlertConfigApi.AlertConfig>();
const getTitle = computed(() => {
return formData.value?.id
? $t('ui.actionTitle.edit', ['告警配置'])
@ -49,7 +48,7 @@ const [Modal, modalApi] = useVbenModal({
}
modalApi.lock();
// 提交表单
const data = (await formApi.getValues()) as AlertConfig;
const data = (await formApi.getValues()) as AlertConfigApi.AlertConfig;
try {
await (formData.value?.id
? updateAlertConfig(data)
@ -68,16 +67,8 @@ const [Modal, modalApi] = useVbenModal({
return;
}
// 加载数据
const data = modalApi.getData<AlertConfig>();
const data = modalApi.getData<AlertConfigApi.AlertConfig>();
if (!data || !data.id) {
// 新增时设置默认值
// TODO @AI：这里是不是不用默认值？status 在 data.ts 里默认就好了？
await formApi.setValues({
status: 0,
sceneRuleIds: [],
receiveUserIds: [],
receiveTypes: [],
});
return;
}
modalApi.lock();

5
apps/web-antd/src/views/iot/alert/record/data.ts
View File

@ -101,7 +101,10 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
field: 'configLevel',
title: '告警级别',
minWidth: 100,
slots: { default: 'configLevel' },
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.IOT_ALERT_LEVEL },
},
},
{
field: 'productId',

23
apps/web-antd/src/views/iot/alert/record/index.vue
View File

@ -1,7 +1,6 @@
<script setup lang="ts">
// TODO @AI：整体风格，是不是对齐现有的 antd 处理的：1）详情独立 modules；2）process 是不是要这样？还是做一个独立的界面出来？
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { AlertRecord } from '#/api/iot/alert/record';
import type { AlertRecordApi } from '#/api/iot/alert/record';
import { h, ref } from 'vue';
@ -10,7 +9,7 @@ import { DICT_TYPE } from '@vben/constants';
import { getDictLabel } from '@vben/hooks';
import { IconifyIcon } from '@vben/icons';
import { Button, Input, message, Modal, Popover, Tag } from 'ant-design-vue';
import { Button, Input, message, Modal, Popover } from 'ant-design-vue';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { getAlertRecordPage, processAlertRecord } from '#/api/iot/alert/record';
@ -25,7 +24,7 @@ function handleRefresh() {
}
/** 处理告警记录 */
function handleProcess(row: AlertRecord) {
function handleProcess(row: AlertRecordApi.AlertRecord) {
const processRemark = ref('');
Modal.confirm({
title: '处理告警记录',
@ -60,7 +59,8 @@ function handleProcess(row: AlertRecord) {
}
/** 查看告警记录详情 */
function handleView(row: AlertRecord) {
// TODO @AI：去掉 view 详情，对齐 vue3 + ep模块；
function handleView(row: AlertRecordApi.AlertRecord) {
const deviceMessageText =
row.deviceMessage && typeof row.deviceMessage === 'object'
? JSON.stringify(row.deviceMessage, null, 2)
@ -132,7 +132,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
refresh: true,
search: true,
},
} as VxeTableGridOptions<AlertRecord>,
} as VxeTableGridOptions<AlertRecordApi.AlertRecord>,
});
/** 把设备消息序列化成可读字符串 */
@ -149,15 +149,8 @@ function stringifyDeviceMessage(deviceMessage: any) {
<template>
<Page auto-content-height>
<Grid table-title="告警记录列表">
<!-- 告警级别列 -->
<!-- TODO @AI：可以在 data 里渲染么？应该 antd 里有例子的； -->
<template #configLevel="{ row }">
<Tag>
{{ getDictLabel(DICT_TYPE.IOT_ALERT_LEVEL, row.configLevel) }}
</Tag>
</template>
<!-- 设备消息列 -->
<!-- TODO @AI：可以在 data 里渲染么？应该 antd 里有例子的； -->
<!-- TODO DONE @AI：告警级别已改用 CellDict 在 data.ts 渲染 -->
<!-- TODO DONE @AI：设备消息是 Popover hover 看 JSON 详情，CellDict 只渲染单值文本，保留 slot -->
<template #deviceMessage="{ row }">
<Popover
v-if="row.deviceMessage"