<script lang="ts" setup>
|
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
import type { RuleSceneApi } from '#/api/iot/rule/scene';
|
|
import { ref } from 'vue';
|
|
import { Page, useVbenDrawer } from '..\..\..\..\packages\effects\common-ui\src';
|
import {
|
CommonStatusEnum,
|
DICT_TYPE,
|
getActionTypeLabel,
|
getTriggerTypeLabel,
|
IotRuleSceneTriggerTypeEnum,
|
} from '..\..\..\..\packages\constants\src';
|
import { IconifyIcon } from '..\..\..\..\packages\icons\src';
|
import { CronUtils, formatDateTime } from '..\..\..\..\packages\utils\src';
|
|
import { Card, Col, message, Row, Tag, Tooltip } from 'ant-design-vue';
|
|
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
|
import {
|
deleteSceneRule,
|
getSceneRulePage,
|
updateSceneRuleStatus,
|
} from '#/api/iot/rule/scene';
|
import { DictTag } from '#/components/dict-tag';
|
import { $t } from '#/locales';
|
|
import { useGridColumns, useGridFormSchema } from './data';
|
import Form from './modules/form.vue';
|
|
const [FormDrawer, formDrawerApi] = useVbenDrawer({
|
connectedComponent: Form,
|
destroyOnClose: true,
|
});
|
|
const statistics = ref({
|
total: 0,
|
enabled: 0,
|
disabled: 0,
|
timerRules: 0,
|
}); // 统计数据
|
|
/** 刷新表格 */
|
function handleRefresh() {
|
gridApi.query();
|
}
|
|
/** 创建场景规则 */
|
function handleCreate() {
|
formDrawerApi.setData(null).open();
|
}
|
|
/** 编辑场景规则 */
|
function handleEdit(row: RuleSceneApi.SceneRule) {
|
formDrawerApi.setData(row).open();
|
}
|
|
/** 启用/停用场景规则 */
|
async function handleToggleStatus(row: RuleSceneApi.SceneRule) {
|
const newStatus =
|
row.status === CommonStatusEnum.ENABLE
|
? CommonStatusEnum.DISABLE
|
: CommonStatusEnum.ENABLE;
|
const hideLoading = message.loading({
|
content:
|
newStatus === CommonStatusEnum.ENABLE ? '正在启用...' : '正在停用...',
|
duration: 0,
|
});
|
try {
|
await updateSceneRuleStatus(row.id as number, newStatus);
|
message.success({
|
content: newStatus === CommonStatusEnum.ENABLE ? '启用成功' : '停用成功',
|
});
|
handleRefresh();
|
} finally {
|
hideLoading();
|
}
|
}
|
|
/** 删除场景规则 */
|
async function handleDelete(row: RuleSceneApi.SceneRule) {
|
const hideLoading = message.loading({
|
content: $t('ui.actionMessage.deleting', [row.name]),
|
duration: 0,
|
});
|
try {
|
await deleteSceneRule(row.id as number);
|
message.success({
|
content: $t('ui.actionMessage.deleteSuccess', [row.name]),
|
});
|
handleRefresh();
|
} finally {
|
hideLoading();
|
}
|
}
|
|
/** 判断规则是否包含定时触发器 */
|
function hasTimerTrigger(row: RuleSceneApi.SceneRule): boolean {
|
return (
|
row.triggers?.some(
|
(trigger) => trigger.type === IotRuleSceneTriggerTypeEnum.TIMER,
|
) || false
|
);
|
}
|
|
/** 触发条件摘要文本（拼接所有触发器） */
|
function getTriggerSummary(row: RuleSceneApi.SceneRule): string {
|
if (!row.triggers?.length) return '无触发器';
|
return row.triggers
|
.map((trigger) => {
|
const type = trigger.type ?? 0;
|
let description = getTriggerTypeLabel(type);
|
if (
|
(type === IotRuleSceneTriggerTypeEnum.DEVICE_PROPERTY_POST ||
|
type === IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST ||
|
type === IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE) &&
|
trigger.identifier
|
) {
|
description += ` (${trigger.identifier})`;
|
} else if (type === IotRuleSceneTriggerTypeEnum.TIMER) {
|
description = `${getTriggerTypeLabel(type)} (${CronUtils.format(trigger.cronExpression || '')})`;
|
}
|
if (trigger.deviceId) {
|
description += ` [设备 ID: ${trigger.deviceId}]`;
|
} else if (trigger.productId) {
|
description += ` [产品 ID: ${trigger.productId}]`;
|
}
|
return description;
|
})
|
.join(', ');
|
}
|
|
/** 执行动作摘要文本（拼接所有动作） */
|
function getActionSummary(row: RuleSceneApi.SceneRule): string {
|
if (!row.actions?.length) return '无执行器';
|
return row.actions
|
.map((action) => {
|
let description = getActionTypeLabel(action.type ?? 0);
|
if (action.deviceId) {
|
description += ` [设备 ID: ${action.deviceId}]`;
|
} else if (action.productId) {
|
description += ` [产品 ID: ${action.productId}]`;
|
}
|
if (action.alertConfigId) {
|
description += ` [告警配置 ID: ${action.alertConfigId}]`;
|
}
|
return description;
|
})
|
.join(', ');
|
}
|
|
/** 取定时触发器的 CRON 频率描述 */
|
function getCronFrequency(row: RuleSceneApi.SceneRule): string {
|
const timerTrigger = row.triggers?.find(
|
(trigger) => trigger.type === IotRuleSceneTriggerTypeEnum.TIMER,
|
);
|
return timerTrigger?.cronExpression
|
? CronUtils.getFrequencyDescription(timerTrigger.cronExpression)
|
: '';
|
}
|
|
/** 取定时触发器原始 CRON 表达式 */
|
function getCronExpression(row: RuleSceneApi.SceneRule): string {
|
const timerTrigger = row.triggers?.find(
|
(trigger) => trigger.type === IotRuleSceneTriggerTypeEnum.TIMER,
|
);
|
return timerTrigger?.cronExpression || '';
|
}
|
|
/** 取定时触发器下次执行时间 */
|
function getNextExecutionTime(row: RuleSceneApi.SceneRule): Date | null {
|
const timerTrigger = row.triggers?.find(
|
(trigger) => trigger.type === IotRuleSceneTriggerTypeEnum.TIMER,
|
);
|
return timerTrigger?.cronExpression
|
? CronUtils.getNextExecutionTime(timerTrigger.cronExpression)
|
: null;
|
}
|
|
/** 刷新规则统计卡片数据 */
|
function updateStatistics(rows: RuleSceneApi.SceneRule[], total?: number) {
|
statistics.value = {
|
total: total ?? rows.length,
|
enabled: rows.filter((item) => item.status === CommonStatusEnum.ENABLE)
|
.length,
|
disabled: rows.filter((item) => item.status === CommonStatusEnum.DISABLE)
|
.length,
|
timerRules: rows.filter((item) => hasTimerTrigger(item)).length,
|
};
|
}
|
|
const [Grid, gridApi] = useVbenVxeGrid({
|
formOptions: {
|
schema: useGridFormSchema(),
|
},
|
gridOptions: {
|
columns: useGridColumns(),
|
height: 'auto',
|
keepSource: true,
|
proxyConfig: {
|
ajax: {
|
query: async ({ page }, formValues) => {
|
const result = await getSceneRulePage({
|
pageNo: page.currentPage,
|
pageSize: page.pageSize,
|
...formValues,
|
});
|
updateStatistics(result.list || [], result.total);
|
return result;
|
},
|
},
|
},
|
rowConfig: {
|
keyField: 'id',
|
isHover: true,
|
},
|
toolbarConfig: {
|
refresh: true,
|
search: true,
|
},
|
} as VxeTableGridOptions<RuleSceneApi.SceneRule>,
|
});
|
</script>
|
|
<template>
|
<Page auto-content-height>
|
<FormDrawer @success="handleRefresh" />
|
|
<!-- 统计卡片 -->
|
<Row :gutter="16" class="mb-4">
|
<Col :span="6">
|
<Card :body-style="{ padding: '12px 16px' }">
|
<div class="flex items-center">
|
<div
|
class="w-10 h-10 rounded-lg flex items-center justify-center text-xl text-white mr-3 bg-gradient-to-br from-indigo-500 to-purple-600"
|
>
|
<IconifyIcon icon="ant-design:file-text-outlined" />
|
</div>
|
<div class="leading-tight">
|
<div class="text-xl font-semibold">
|
{{ statistics.total }}
|
</div>
|
<div class="text-xs text-muted-foreground">总规则数</div>
|
</div>
|
</div>
|
</Card>
|
</Col>
|
<Col :span="6">
|
<Card :body-style="{ padding: '12px 16px' }">
|
<div class="flex items-center">
|
<div
|
class="w-10 h-10 rounded-lg flex items-center justify-center text-xl text-white mr-3 bg-gradient-to-br from-pink-400 to-red-500"
|
>
|
<IconifyIcon icon="ant-design:check-outlined" />
|
</div>
|
<div class="leading-tight">
|
<div class="text-xl font-semibold">
|
{{ statistics.enabled }}
|
</div>
|
<div class="text-xs text-muted-foreground">启用规则</div>
|
</div>
|
</div>
|
</Card>
|
</Col>
|
<Col :span="6">
|
<Card :body-style="{ padding: '12px 16px' }">
|
<div class="flex items-center">
|
<div
|
class="w-10 h-10 rounded-lg flex items-center justify-center text-xl text-white mr-3 bg-gradient-to-br from-cyan-400 to-blue-500"
|
>
|
<IconifyIcon icon="ant-design:close-outlined" />
|
</div>
|
<div class="leading-tight">
|
<div class="text-xl font-semibold">
|
{{ statistics.disabled }}
|
</div>
|
<div class="text-xs text-muted-foreground">禁用规则</div>
|
</div>
|
</div>
|
</Card>
|
</Col>
|
<Col :span="6">
|
<Card :body-style="{ padding: '12px 16px' }">
|
<div class="flex items-center">
|
<div
|
class="w-10 h-10 rounded-lg flex items-center justify-center text-xl text-white mr-3 bg-gradient-to-br from-green-400 to-teal-400"
|
>
|
<IconifyIcon icon="lucide:timer" />
|
</div>
|
<div class="leading-tight">
|
<div class="text-xl font-semibold">
|
{{ statistics.timerRules }}
|
</div>
|
<div class="text-xs text-muted-foreground">定时规则</div>
|
</div>
|
</div>
|
</Card>
|
</Col>
|
</Row>
|
|
<Grid table-title="场景规则列表">
|
<template #toolbar-tools>
|
<TableAction
|
:actions="[
|
{
|
label: $t('ui.actionTitle.create', ['场景规则']),
|
type: 'primary',
|
icon: ACTION_ICON.ADD,
|
onClick: handleCreate,
|
},
|
]"
|
/>
|
</template>
|
<!-- 规则名称列：名称 + 状态 tag inline + 描述 -->
|
<template #name="{ row }">
|
<div class="flex items-center gap-2">
|
<span class="font-medium text-foreground">{{ row.name }}</span>
|
<DictTag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" />
|
</div>
|
<Tooltip
|
v-if="row.description"
|
:title="row.description"
|
placement="top"
|
>
|
<div
|
class="mt-1 max-w-[200px] truncate text-xs text-muted-foreground"
|
>
|
{{ row.description }}
|
</div>
|
</Tooltip>
|
</template>
|
<!-- 触发条件列：单 tag 汇总 + 定时触发额外信息 -->
|
<template #triggers="{ row }">
|
<div class="space-y-1">
|
<Tag color="processing" class="m-0">{{ getTriggerSummary(row) }}</Tag>
|
<Tooltip
|
v-if="hasTimerTrigger(row)"
|
:title="getCronExpression(row)"
|
placement="top"
|
>
|
<div class="text-xs text-muted-foreground">
|
<IconifyIcon icon="lucide:clock" class="mr-1 inline" />
|
{{ getCronFrequency(row) }}
|
<template v-if="getNextExecutionTime(row)">
|
· 下次 {{ formatDateTime(getNextExecutionTime(row) as Date) }}
|
</template>
|
</div>
|
</Tooltip>
|
</div>
|
</template>
|
<!-- 执行动作列：单 tag 汇总 -->
|
<template #actionsCol="{ row }">
|
<Tag color="success" class="m-0">{{ getActionSummary(row) }}</Tag>
|
</template>
|
<!-- 最近触发列 -->
|
<template #lastTriggerTime="{ row }">
|
<span v-if="row.lastTriggerTime">
|
{{ formatDateTime(row.lastTriggerTime) }}
|
</span>
|
<span v-else class="text-muted-foreground">未触发</span>
|
</template>
|
<template #actions="{ row }">
|
<TableAction
|
:actions="[
|
{
|
label: row.status === CommonStatusEnum.ENABLE ? '停用' : '启用',
|
type: 'link',
|
icon:
|
row.status === CommonStatusEnum.ENABLE
|
? 'ant-design:stop-outlined'
|
: 'ant-design:check-circle-outlined',
|
popConfirm: {
|
title: `确认${row.status === CommonStatusEnum.ENABLE ? '停用' : '启用'}场景规则「${row.name}」吗？`,
|
confirm: handleToggleStatus.bind(null, row),
|
},
|
},
|
{
|
label: $t('common.edit'),
|
type: 'link',
|
icon: ACTION_ICON.EDIT,
|
onClick: handleEdit.bind(null, row),
|
},
|
{
|
label: $t('common.delete'),
|
type: 'link',
|
danger: true,
|
icon: ACTION_ICON.DELETE,
|
popConfirm: {
|
title: $t('ui.actionMessage.deleteConfirm', [row.name]),
|
confirm: handleDelete.bind(null, row),
|
},
|
},
|
]"
|
/>
|
</template>
|
</Grid>
|
</Page>
|
</template>
|
