smart-flow/yudao-ui-admin-vben
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: eslint

Browse Source
This commit is contained in:
hw
2025-11-07 09:43:39 +08:00
parent 02fa21488c 9248a321fe
commit c745304e5f
680 changed files with 15309 additions and 9837 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/web-antd/src/views/iot/device/device/data.ts
View File

@@ -239,7 +239,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
label: '设备状态',
component: 'Select',
componentProps: {
options: getDictOptions(DICT_TYPE.IOT_DEVICE_STATUS, 'number'),
options: getDictOptions(DICT_TYPE.IOT_DEVICE_STATE, 'number'),
placeholder: '请选择设备状态',
allowClear: true,
},
@@ -295,12 +295,12 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
slots: { default: 'groups' },
},
{
field: 'status',
field: 'state',
title: '设备状态',
minWidth: 100,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.IOT_DEVICE_STATUS },
props: { type: DICT_TYPE.IOT_DEVICE_STATE },
},
},
{

2
apps/web-antd/src/views/iot/device/device/index.vue
View File

@@ -307,7 +307,7 @@ onMounted(async () => {
style="width: 200px"
>
<Select.Option
v-for="dict in getIntDictOptions(DICT_TYPE.IOT_DEVICE_STATUS)"
v-for="dict in getIntDictOptions(DICT_TYPE.IOT_DEVICE_STATE)"
:key="dict.value"
:value="dict.value"
>

4
apps/web-antd/src/views/iot/device/device/modules/components/DeviceTableSelect.vue
View File

@@ -294,7 +294,7 @@ onMounted(async () => {
style="width: 240px"
>
<Select.Option
v-for="dict in getIntDictOptions(DICT_TYPE.IOT_DEVICE_STATUS)"
v-for="dict in getIntDictOptions(DICT_TYPE.IOT_DEVICE_STATE)"
:key="dict.value"
:value="dict.value"
>
@@ -373,7 +373,7 @@ onMounted(async () => {
</template>
<template v-else-if="column.key === 'status'">
<DictTag
:type="DICT_TYPE.IOT_DEVICE_STATUS"
:type="DICT_TYPE.IOT_DEVICE_STATE"
:value="record.status"
/>
</template>

10
apps/web-antd/src/views/iot/device/device/modules/detail/DeviceDetailsInfo.vue
View File

@@ -106,7 +106,7 @@ function handleAuthInfoDialogClose() {
</Descriptions.Item>
<Descriptions.Item label="当前状态">
<DictTag
:type="DICT_TYPE.IOT_DEVICE_STATUS"
:type="DICT_TYPE.IOT_DEVICE_STATE"
:value="device.state"
/>
</Descriptions.Item>
@@ -181,7 +181,7 @@ function handleAuthInfoDialogClose() {
style="width: calc(100% - 80px)"
/>
<Button @click="copyToClipboard(authInfo.clientId)" type="primary">
<IconifyIcon icon="ph:copy" />
<IconifyIcon icon="lucide:copy" />
</Button>
</Input.Group>
</Form.Item>
@@ -193,7 +193,7 @@ function handleAuthInfoDialogClose() {
style="width: calc(100% - 80px)"
/>
<Button @click="copyToClipboard(authInfo.username)" type="primary">
<IconifyIcon icon="ph:copy" />
<IconifyIcon icon="lucide:copy" />
</Button>
</Input.Group>
</Form.Item>
@@ -210,11 +210,11 @@ function handleAuthInfoDialogClose() {
type="primary"
>
<IconifyIcon
:icon="authPasswordVisible ? 'ph:eye-slash' : 'ph:eye'"
:icon="authPasswordVisible ? 'lucide:eye-off' : 'lucide:eye'"
/>
</Button>
<Button @click="copyToClipboard(authInfo.password)" type="primary">
<IconifyIcon icon="ph:copy" />
<IconifyIcon icon="lucide:copy" />
</Button>
</Input.Group>
</Form.Item>

21
apps/web-antd/src/views/iot/device/device/modules/detail/DeviceDetailsThingModelProperty.vue
View File

@@ -165,18 +165,15 @@ onMounted(() => {
>
<!-- 添加渐变背景层 -->
<div
class="pointer-events-none absolute left-0 right-0 top-0 h-[50px] bg-gradient-to-b from-[#eefaff] to-transparent"
class="from-muted pointer-events-none absolute left-0 right-0 top-0 h-12 bg-gradient-to-b to-transparent"
></div>
<div class="relative p-4">
<!-- 标题区域 -->
<div class="mb-3 flex items-center">
<div class="mr-2.5 flex items-center">
<IconifyIcon
icon="ep:cpu"
class="text-[18px] text-[#0070ff]"
/>
<IconifyIcon icon="ep:cpu" class="text-primary text-lg" />
</div>
<div class="font-600 flex-1 text-[16px]">{{ item.name }}</div>
<div class="flex-1 text-base font-bold">{{ item.name }}</div>
<!-- 标识符 -->
<div class="mr-2 inline-flex items-center">
<Tag size="small" color="blue">
@@ -198,22 +195,22 @@ onMounted(() => {
>
<IconifyIcon
icon="ep:data-line"
class="text-[18px] text-[#0070ff]"
class="text-primary text-lg"
/>
</div>
</div>
<!-- 信息区域 -->
<div class="text-[14px]">
<div class="text-sm">
<div class="mb-2.5 last:mb-0">
<span class="mr-2.5 text-[#717c8e]">属性值</span>
<span class="font-600 text-[#0b1d30]">
<span class="text-muted-foreground mr-2.5">属性值</span>
<span class="text-foreground font-bold">
{{ formatValueWithUnit(item) }}
</span>
</div>
<div class="mb-2.5 last:mb-0">
<span class="mr-2.5 text-[#717c8e]">更新时间</span>
<span class="text-[12px] text-[#0b1d30]">
<span class="text-muted-foreground mr-2.5">更新时间</span>
<span class="text-foreground text-sm">
{{ item.updateTime ? formatDate(item.updateTime) : '-' }}
</span>
</div>

53
apps/web-antd/src/views/iot/device/group/data.ts
View File

@@ -1,12 +1,13 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { DICT_TYPE } from '@vben/constants';
import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { z } from '#/adapter/form';
import { getSimpleDeviceGroupList } from '#/api/iot/device/group';
import { getRangePickerDefaultProps } from '#/utils';
/** 新增/修改设备分组的表单 */
/** 新增/修改的表单 */
export function useFormSchema(): VbenFormSchema[] {
return [
{
@@ -30,16 +31,15 @@ export function useFormSchema(): VbenFormSchema[] {
.max(64, '分组名称长度不能超过 64 个字符'),
},
{
fieldName: 'parentId',
label: '父级分组',
component: 'ApiTreeSelect',
fieldName: 'status',
label: '分组状态',
component: 'RadioGroup',
componentProps: {
api: getSimpleDeviceGroupList,
labelField: 'name',
valueField: 'id',
placeholder: '请选择父级分组',
allowClear: true,
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
buttonStyle: 'solid',
optionType: 'button',
},
rules: z.number().default(CommonStatusEnum.ENABLE),
},
{
fieldName: 'description',
@@ -65,6 +65,15 @@ export function useGridFormSchema(): VbenFormSchema[] {
allowClear: true,
},
},
{
fieldName: 'createTime',
label: '创建时间',
component: 'RangePicker',
componentProps: {
...getRangePickerDefaultProps(),
allowClear: true,
},
},
];
}
@@ -72,14 +81,13 @@ export function useGridFormSchema(): VbenFormSchema[] {
export function useGridColumns(): VxeTableGridOptions['columns'] {
return [
{
field: 'name',
title: '分组名称',
minWidth: 200,
treeNode: true,
field: 'id',
title: 'ID',
minWidth: 100,
},
{
field: 'description',
title: '分组描述',
field: 'name',
title: '分组名称',
minWidth: 200,
},
{
@@ -92,9 +100,9 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
},
},
{
field: 'deviceCount',
title: '设备数量',
minWidth: 100,
field: 'description',
title: '分组描述',
minWidth: 200,
},
{
field: 'createTime',
@@ -102,6 +110,11 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
minWidth: 180,
formatter: 'formatDateTime',
},
{
field: 'deviceCount',
title: '设备数量',
minWidth: 100,
},
{
title: '操作',
width: 200,

13
apps/web-antd/src/views/iot/device/group/index.vue
View File

@@ -3,7 +3,6 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { IotDeviceGroupApi } from '#/api/iot/device/group';
import { Page, useVbenModal } from '@vben/common-ui';
import { handleTree } from '@vben/utils';
import { message } from 'ant-design-vue';
@@ -62,24 +61,14 @@ const [Grid, gridApi] = useVbenVxeGrid({
columns: useGridColumns(),
height: 'auto',
keepSource: true,
treeConfig: {
transform: true,
rowField: 'id',
parentField: 'parentId',
},
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
const data = await getDeviceGroupPage({
return await getDeviceGroupPage({
pageNo: page.currentPage,
pageSize: page.pageSize,
...formValues,
});
// 转换为树形结构
return {
...data,
list: handleTree(data.list, 'id', 'parentId'),
};
},
},
},

6
apps/web-antd/src/views/iot/device/group/modules/device-group-form.vue
View File

@@ -39,8 +39,10 @@ const [Form, formApi] = useVbenForm({
},
schema: useFormSchema(),
showCollapseButton: false,
showDefaultActions: false,
});
// TODO @haohao：参考别的 form；1）文件的命名可以简化；2）代码可以在简化下；
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
const { valid } = await formApi.validate();
@@ -70,9 +72,13 @@ const [Modal, modalApi] = useVbenModal({
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
formData.value = undefined;
await formApi.resetForm();
return;
}
// 重置表单
await formApi.resetForm();
const data = modalApi.getData<IotDeviceGroupApi.DeviceGroup>();
// 如果没有数据或没有 id，表示是新增
if (!data || !data.id) {

53
apps/web-antd/src/views/iot/product/category/data.ts
View File

@@ -1,12 +1,13 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { DICT_TYPE } from '@vben/constants';
import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { z } from '#/adapter/form';
import { getSimpleProductCategoryList } from '#/api/iot/product/category';
import { getRangePickerDefaultProps } from '#/utils';
/** 新增/修改产品分类的表单 */
/** 新增/修改的表单 */
export function useFormSchema(): VbenFormSchema[] {
return [
{
@@ -19,51 +20,37 @@ export function useFormSchema(): VbenFormSchema[] {
},
{
fieldName: 'name',
label: '分类名称',
label: '分类名字',
component: 'Input',
componentProps: {
placeholder: '请输入分类名称',
placeholder: '请输入分类名字',
},
rules: z
.string()
.min(1, '分类名称不能为空')
.max(64, '分类名称长度不能超过 64 个字符'),
},
{
fieldName: 'parentId',
label: '父级分类',
component: 'ApiTreeSelect',
componentProps: {
api: getSimpleProductCategoryList,
labelField: 'name',
valueField: 'id',
placeholder: '请选择父级分类',
allowClear: true,
},
.min(1, '分类名字不能为空')
.max(64, '分类名字长度不能超过 64 个字符'),
},
{
fieldName: 'sort',
label: '排序',
label: '分类排序',
component: 'InputNumber',
componentProps: {
placeholder: '请输入排序',
placeholder: '请输入分类排序',
class: 'w-full',
min: 0,
},
rules: 'required',
rules: z.number().min(0, '分类排序不能为空'),
},
{
fieldName: 'status',
label: '状态',
label: '分类状态',
component: 'RadioGroup',
defaultValue: 1,
componentProps: {
options: [
{ label: '开启', value: 1 },
{ label: '关闭', value: 0 },
],
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
buttonStyle: 'solid',
optionType: 'button',
},
rules: 'required',
rules: z.number().default(CommonStatusEnum.ENABLE),
},
{
fieldName: 'description',
@@ -82,10 +69,10 @@ export function useGridFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'name',
label: '分类名称',
label: '分类名字',
component: 'Input',
componentProps: {
placeholder: '请输入分类名称',
placeholder: '请输入分类名字',
allowClear: true,
},
},
@@ -94,9 +81,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
label: '创建时间',
component: 'RangePicker',
componentProps: {
placeholder: ['开始日期', '结束日期'],
...getRangePickerDefaultProps(),
allowClear: true,
class: 'w-full',
},
},
];
@@ -114,7 +100,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
field: 'name',
title: '名字',
minWidth: 200,
treeNode: true,
},
{
field: 'sort',

20
apps/web-antd/src/views/iot/product/category/index.vue
View File

@@ -3,7 +3,6 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { IotProductCategoryApi } from '#/api/iot/product/category';
import { Page, useVbenModal } from '@vben/common-ui';
import { handleTree } from '@vben/utils';
import { message } from 'ant-design-vue';
@@ -70,16 +69,11 @@ const [Grid, gridApi] = useVbenVxeGrid({
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
const data = await getProductCategoryPage({
return await getProductCategoryPage({
pageNo: page.currentPage,
pageSize: page.pageSize,
...formValues,
});
// 转换为树形结构
return {
...data,
list: handleTree(data.list, 'id', 'parentId'),
};
},
},
},
@@ -91,16 +85,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
refresh: true,
search: true,
},
treeConfig: {
parentField: 'parentId',
rowField: 'id',
transform: true,
expandAll: true,
reserve: true,
trigger: 'default',
iconOpen: '',
iconClose: '',
},
} as VxeTableGridOptions<IotProductCategoryApi.ProductCategory>,
});
</script>
@@ -121,8 +105,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
]"
/>
</template>
<!-- 操作列 -->
<template #actions="{ row }">
<TableAction
:actions="[

34
apps/web-antd/src/views/iot/product/category/modules/ProductCategoryForm.vue
View File

@@ -38,6 +38,7 @@ const [Form, formApi] = useVbenForm({
showDefaultActions: false,
});
// TODO @haohao：参考别的 form；1）文件的命名可以简化；2）代码可以在简化下；
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
const { valid } = await formApi.validate();
@@ -63,13 +64,17 @@ const [Modal, modalApi] = useVbenModal({
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
formData.value = undefined;
formApi.resetForm();
return;
}
// 加载数据
let data = modalApi.getData<
IotProductCategoryApi.ProductCategory & { parentId?: number }
>();
if (!data) {
// 重置表单
await formApi.resetForm();
const data = modalApi.getData<IotProductCategoryApi.ProductCategory>();
// 如果没有数据或没有 id，表示是新增
if (!data || !data.id) {
formData.value = undefined;
// 新增模式：设置默认值
await formApi.setValues({
sort: 0,
@@ -77,23 +82,12 @@ const [Modal, modalApi] = useVbenModal({
});
return;
}
// 编辑模式：加载数据
modalApi.lock();
try {
if (data.id) {
// 编辑模式：加载完整数据
data = await getProductCategory(data.id);
} else if (data.parentId) {
// 新增下级分类：设置父级ID
await formApi.setValues({
parentId: data.parentId,
sort: 0,
status: 1,
});
return;
}
// 设置到 values
formData.value = data;
await formApi.setValues(data);
formData.value = await getProductCategory(data.id);
await formApi.setValues(formData.value);
} finally {
modalApi.unlock();
}

28
apps/web-antd/src/views/iot/product/product/modules/ProductCardView.vue
View File

@@ -19,6 +19,7 @@ import {
import { getProductPage } from '#/api/iot/product/product';
// TODO @haohao：命名不太对；可以简化下；
defineOptions({ name: 'ProductCardView' });
const props = defineProps<Props>();
@@ -101,7 +102,7 @@ defineExpose({
<template>
<div class="product-card-view">
<!-- 产品卡片列表 -->
<div v-loading="loading" class="min-h-[400px]">
<div v-loading="loading" class="min-h-96">
<Row v-if="list.length > 0" :gutter="[16, 16]">
<Col
v-for="item in list"
@@ -118,7 +119,7 @@ defineExpose({
<div class="product-icon">
<IconifyIcon
:icon="item.icon || 'ant-design:inbox-outlined'"
class="text-[32px]"
class="text-3xl"
/>
</div>
<div class="ml-3 min-w-0 flex-1">
@@ -161,7 +162,7 @@ defineExpose({
<div class="product-3d-icon">
<IconifyIcon
icon="ant-design:box-plot-outlined"
class="text-[80px]"
class="text-2xl"
/>
</div>
</div>
@@ -195,16 +196,33 @@ defineExpose({
/>
物模型
</Button>
<Tooltip v-if="item.status === 1" title="启用状态的产品不能删除">
<Button
size="small"
danger
disabled
class="action-btn action-btn-delete !w-8"
>
<IconifyIcon
icon="ant-design:delete-outlined"
class="text-sm"
/>
</Button>
</Tooltip>
<Popconfirm
v-else
:title="`确认删除产品 ${item.name} 吗?`"
@confirm="emit('delete', item)"
>
<Button
size="small"
danger
class="action-btn action-btn-delete"
class="action-btn action-btn-delete !w-8"
>
<IconifyIcon icon="ant-design:delete-outlined" />
<IconifyIcon
icon="ant-design:delete-outlined"
class="text-sm"
/>
</Button>
</Popconfirm>
</div>

8
apps/web-antd/src/views/iot/rule/scene/form/configs/CurrentTimeConditionConfig.vue
View File

@@ -170,7 +170,7 @@ watch(
</script>
<template>
<div class="gap-16px flex flex-col">
<div class="flex flex-col gap-4">
<Row :gutter="16">
<!-- 时间操作符选择 -->
<Col :span="8">
@@ -190,7 +190,7 @@ watch(
:value="option.value"
>
<div class="flex w-full items-center justify-between">
<div class="gap-8px flex items-center">
<div class="flex items-center gap-2">
<IconifyIcon :icon="option.icon" :class="option.iconClass" />
<span>{{ option.label }}</span>
</div>
@@ -225,9 +225,7 @@ watch(
value-format="YYYY-MM-DD HH:mm:ss"
class="w-full"
/>
<div v-else class="text-14px text-[var(--el-text-color-placeholder)]">
无需设置时间值
</div>
<div v-else class="text-secondary text-sm">无需设置时间值</div>
</Form.Item>
</Col>

8
apps/web-antd/src/views/iot/rule/scene/form/configs/DeviceTriggerConfig.vue
View File

@@ -161,11 +161,11 @@ function removeConditionGroup() {
@click="addSubGroup"
:disabled="(trigger.conditionGroups?.length || 0) >= maxSubGroups"
>
<IconifyIcon icon="ep:plus" />
<IconifyIcon icon="lucide:plus" />
添加子条件组
</Button>
<Button danger size="small" text @click="removeConditionGroup">
<IconifyIcon icon="ep:delete" />
<IconifyIcon icon="lucide:trash-2" />
删除条件组
</Button>
</div>
@@ -215,7 +215,7 @@ function removeConditionGroup() {
@click="removeSubGroup(subGroupIndex)"
class="hover:bg-red-50"
>
<IconifyIcon icon="ep:delete" />
<IconifyIcon icon="lucide:trash-2" />
删除组
</Button>
</div>
@@ -258,7 +258,7 @@ function removeConditionGroup() {
class="p-24px rounded-8px border-2 border-dashed border-orange-200 bg-orange-50 text-center"
>
<div class="gap-12px flex flex-col items-center">
<IconifyIcon icon="ep:plus" class="text-32px text-orange-400" />
<IconifyIcon icon="lucide:plus" class="text-32px text-orange-400" />
<div class="text-orange-600">
<p class="text-14px font-500 mb-4px">暂无子条件组</p>
<p class="text-12px">点击上方"添加子条件组"按钮开始配置</p>

14
apps/web-antd/src/views/iot/rule/scene/form/configs/MainConditionInnerConfig.vue
View File

@@ -173,7 +173,7 @@ function handlePropertyChange(propertyInfo: any) {
</script>
<template>
<div class="space-y-16px">
<div class="space-y-4">
<!-- 触发事件类型选择 -->
<Form.Item label="触发事件类型" required>
<Select
@@ -192,7 +192,7 @@ function handlePropertyChange(propertyInfo: any) {
</Form.Item>
<!-- 设备属性条件配置 -->
<div v-if="isDevicePropertyTrigger" class="space-y-16px">
<div v-if="isDevicePropertyTrigger" class="space-y-4">
<!-- 产品设备选择 -->
<Row :gutter="16">
<Col :span="12">
@@ -292,7 +292,7 @@ function handlePropertyChange(propertyInfo: any) {
</div>
<!-- 设备状态条件配置 -->
<div v-else-if="isDeviceStatusTrigger" class="space-y-16px">
<div v-else-if="isDeviceStatusTrigger" class="space-y-4">
<!-- 设备状态触发器使用简化的配置 -->
<Row :gutter="16">
<Col :span="12">
@@ -364,13 +364,11 @@ function handlePropertyChange(propertyInfo: any) {
</div>
<!-- 其他触发类型的提示 -->
<div v-else class="py-20px text-center">
<p class="text-14px mb-4px text-[var(--el-text-color-secondary)]">
<div v-else class="py-5 text-center">
<p class="text-secondary mb-1 text-sm">
当前触发事件类型：{{ getTriggerTypeLabel(triggerType) }}
</p>
<p class="text-12px text-[var(--el-text-color-placeholder)]">
此触发类型暂不需要配置额外条件
</p>
<p class="text-secondary text-xs">此触发类型暂不需要配置额外条件</p>
</div>
</div>
</template>

45
apps/web-antd/src/views/iot/rule/scene/form/configs/SubConditionGroupConfig.vue
View File

@@ -83,27 +83,24 @@ function updateCondition(index: number, condition: TriggerCondition) {
</script>
<template>
<div class="p-16px">
<div class="p-4">
<!-- 空状态 -->
<div v-if="!subGroup || subGroup.length === 0" class="py-24px text-center">
<div class="gap-12px flex flex-col items-center">
<IconifyIcon
icon="ep:plus"
class="text-32px text-[var(--el-text-color-placeholder)]"
/>
<div class="text-[var(--el-text-color-secondary)]">
<p class="text-14px font-500 mb-4px">暂无条件</p>
<p class="text-12px">点击下方按钮添加第一个条件</p>
<div v-if="!subGroup || subGroup.length === 0" class="py-6 text-center">
<div class="flex flex-col items-center gap-3">
<IconifyIcon icon="lucide:plus" class="text-8 text-secondary" />
<div class="text-secondary">
<p class="mb-1 text-base font-bold">暂无条件</p>
<p class="text-xs">点击下方按钮添加第一个条件</p>
</div>
<Button type="primary" @click="addCondition">
<IconifyIcon icon="ep:plus" />
<IconifyIcon icon="lucide:plus" />
添加条件
</Button>
</div>
</div>
<!-- 条件列表 -->
<div v-else class="space-y-16px">
<div v-else class="space-y-4">
<div
v-for="(condition, conditionIndex) in subGroup"
:key="`condition-${conditionIndex}`"
@@ -111,20 +108,18 @@ function updateCondition(index: number, condition: TriggerCondition) {
>
<!-- 条件配置 -->
<div
class="rounded-6px border border-[var(--el-border-color-lighter)] bg-[var(--el-fill-color-blank)] shadow-sm"
class="rounded-3px border-border bg-fill-color-blank border shadow-sm"
>
<div
class="p-12px rounded-t-4px flex items-center justify-between border-b border-[var(--el-border-color-lighter)] bg-[var(--el-fill-color-light)]"
class="rounded-t-1 border-border bg-fill-color-blank flex items-center justify-between border-b p-3"
>
<div class="gap-8px flex items-center">
<div class="flex items-center gap-2">
<div
class="w-20px h-20px text-10px flex items-center justify-center rounded-full bg-blue-500 font-bold text-white"
class="bg-primary flex size-5 items-center justify-center rounded-full text-xs font-bold text-white"
>
{{ conditionIndex + 1 }}
</div>
<span
class="text-12px font-500 text-[var(--el-text-color-primary)]"
>
<span class="text-primary text-base font-bold">
条件 {{ conditionIndex + 1 }}
</span>
</div>
@@ -136,11 +131,11 @@ function updateCondition(index: number, condition: TriggerCondition) {
v-if="subGroup!.length > 1"
class="hover:bg-red-50"
>
<IconifyIcon icon="ep:delete" />
<IconifyIcon icon="lucide:trash-2" />
</Button>
</div>
<div class="p-12px">
<div class="p-3">
<ConditionConfig
:model-value="condition"
@update:model-value="
@@ -158,15 +153,13 @@ function updateCondition(index: number, condition: TriggerCondition) {
v-if="
subGroup && subGroup.length > 0 && subGroup.length < maxConditions
"
class="py-16px text-center"
class="py-4 text-center"
>
<Button type="primary" plain @click="addCondition">
<IconifyIcon icon="ep:plus" />
<IconifyIcon icon="lucide:plus" />
继续添加条件
</Button>
<span
class="mt-8px text-12px block text-[var(--el-text-color-secondary)]"
>
<span class="text-secondary mt-2 block text-xs">
最多可添加 {{ maxConditions }} 个条件
</span>
</div>

121
apps/web-antd/src/views/iot/rule/scene/form/inputs/JsonParamsInput.vue
View File

@@ -198,25 +198,25 @@ const emptyMessage = computed(() => {
});
// 计算属性：无配置消息
const noConfigMessage = computed(() => {
switch (props.type) {
case JsonParamsInputTypeEnum.CUSTOM: {
return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.CUSTOM;
}
case JsonParamsInputTypeEnum.EVENT: {
return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.EVENT;
}
case JsonParamsInputTypeEnum.PROPERTY: {
return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.PROPERTY;
}
case JsonParamsInputTypeEnum.SERVICE: {
return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.SERVICE;
}
default: {
return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.DEFAULT;
}
}
});
// const noConfigMessage = computed(() => {
// switch (props.type) {
// case JsonParamsInputTypeEnum.CUSTOM: {
// return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.CUSTOM;
// }
// case JsonParamsInputTypeEnum.EVENT: {
// return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.EVENT;
// }
// case JsonParamsInputTypeEnum.PROPERTY: {
// return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.PROPERTY;
// }
// case JsonParamsInputTypeEnum.SERVICE: {
// return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.SERVICE;
// }
// default: {
// return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.DEFAULT;
// }
// }
// });
/**
* 处理参数变化事件
@@ -415,7 +415,7 @@ watch(
<template>
<!-- 参数配置 -->
<div class="space-y-12px w-full">
<div class="w-full space-y-3">
<!-- JSON 输入框 -->
<div class="relative">
<Input.TextArea
@@ -427,7 +427,7 @@ watch(
:class="{ 'is-error': jsonError }"
/>
<!-- 查看详细示例弹出层 -->
<div class="top-8px right-8px absolute">
<div class="absolute right-2 top-2">
<Popover
placement="leftTop"
:width="450"
@@ -450,79 +450,64 @@ watch(
<!-- 弹出层内容 -->
<div class="json-params-detail-content">
<div class="gap-8px mb-16px flex items-center">
<IconifyIcon
:icon="titleIcon"
class="text-18px text-[var(--el-color-primary)]"
/>
<span
class="text-16px font-600 text-[var(--el-text-color-primary)]"
>
<div class="mb-4 flex items-center gap-2">
<IconifyIcon :icon="titleIcon" class="text-primary text-lg" />
<span class="text-primary text-base font-bold">
{{ title }}
</span>
</div>
<div class="space-y-16px">
<div class="space-y-4">
<!-- 参数列表 -->
<div v-if="paramsList.length > 0">
<div class="gap-8px mb-8px flex items-center">
<div class="mb-2 flex items-center gap-2">
<IconifyIcon
:icon="paramsIcon"
class="text-14px text-[var(--el-color-primary)]"
class="text-primary text-base"
/>
<span
class="text-14px font-500 text-[var(--el-text-color-primary)]"
>
<span class="text-primary text-base font-bold">
{{ paramsLabel }}
</span>
</div>
<div class="ml-22px space-y-8px">
<div class="ml-6 space-y-2">
<div
v-for="param in paramsList"
:key="param.identifier"
class="p-8px rounded-4px flex items-center justify-between bg-[var(--el-fill-color-lighter)]"
class="bg-card flex items-center justify-between rounded-lg p-2"
>
<div class="flex-1">
<div
class="text-12px font-500 text-[var(--el-text-color-primary)]"
>
<div class="text-primary text-base font-bold">
{{ param.name }}
<Tag
v-if="param.required"
size="small"
type="danger"
class="ml-4px"
class="ml-1"
>
{{ JSON_PARAMS_INPUT_CONSTANTS.REQUIRED_TAG }}
</Tag>
</div>
<div
class="text-11px text-[var(--el-text-color-secondary)]"
>
<div class="text-secondary text-xs">
{{ param.identifier }}
</div>
</div>
<div class="gap-8px flex items-center">
<div class="flex items-center gap-2">
<Tag :type="getParamTypeTag(param.dataType)" size="small">
{{ getParamTypeName(param.dataType) }}
</Tag>
<span
class="text-11px text-[var(--el-text-color-secondary)]"
>
<span class="text-secondary text-xs">
{{ getExampleValue(param) }}
</span>
</div>
</div>
</div>
<div class="mt-12px ml-22px">
<div
class="text-12px mb-6px text-[var(--el-text-color-secondary)]"
>
<div class="ml-6 mt-3">
<div class="text-secondary mb-1 text-xs">
{{ JSON_PARAMS_INPUT_CONSTANTS.COMPLETE_JSON_FORMAT }}
</div>
<pre
class="p-12px rounded-4px text-11px border-l-3px overflow-x-auto border-[var(--el-color-primary)] bg-[var(--el-fill-color-light)] text-[var(--el-text-color-primary)]"
class="bg-card border-l-3px border-primary text-primary overflow-x-auto rounded-lg p-3 text-sm"
>
<code>{{ generateExampleJson() }}</code>
</pre>
@@ -531,8 +516,8 @@ watch(
<!-- 无参数提示 -->
<div v-else>
<div class="py-16px text-center">
<p class="text-14px text-[var(--el-text-color-secondary)]">
<div class="py-4 text-center">
<p class="text-secondary text-sm">
{{ emptyMessage }}
</p>
</div>
@@ -545,37 +530,29 @@ watch(
<!-- 验证状态和错误提示 -->
<div class="flex items-center justify-between">
<div class="gap-8px flex items-center">
<div class="flex items-center gap-2">
<IconifyIcon
:icon="
jsonError
? JSON_PARAMS_INPUT_ICONS.STATUS_ICONS.ERROR
: JSON_PARAMS_INPUT_ICONS.STATUS_ICONS.SUCCESS
"
:class="
jsonError
? 'text-[var(--el-color-danger)]'
: 'text-[var(--el-color-success)]'
"
class="text-14px"
:class="jsonError ? 'text-danger' : 'text-success'"
class="text-sm"
/>
<span
:class="
jsonError
? 'text-[var(--el-color-danger)]'
: 'text-[var(--el-color-success)]'
"
class="text-12px"
:class="jsonError ? 'text-danger' : 'text-success'"
class="text-xs"
>
{{ jsonError || JSON_PARAMS_INPUT_CONSTANTS.JSON_FORMAT_CORRECT }}
</span>
</div>
<!-- 快速填充按钮 -->
<div v-if="paramsList.length > 0" class="gap-8px flex items-center">
<span class="text-12px text-[var(--el-text-color-secondary)]">{{
JSON_PARAMS_INPUT_CONSTANTS.QUICK_FILL_LABEL
}}</span>
<div v-if="paramsList.length > 0" class="flex items-center gap-2">
<span class="text-secondary text-xs">
{{ JSON_PARAMS_INPUT_CONSTANTS.QUICK_FILL_LABEL }}
</span>
<Button size="small" type="primary" plain @click="fillExampleJson">
{{ JSON_PARAMS_INPUT_CONSTANTS.EXAMPLE_DATA_BUTTON }}
</Button>

18
apps/web-antd/src/views/iot/rule/scene/form/inputs/ValueInput.vue
View File

@@ -186,7 +186,7 @@ watch(
operator ===
IotRuleSceneTriggerConditionParameterOperatorEnum.BETWEEN.value
"
class="w-full! gap-8px flex items-center"
class="w-full! flex items-center gap-2"
>
<Input
v-model="rangeStart"
@@ -196,11 +196,7 @@ watch(
class="min-w-0 flex-1"
style="width: auto !important"
/>
<span
class="text-12px whitespace-nowrap text-[var(--el-text-color-secondary)]"
>
至
</span>
<span class="text-secondary whitespace-nowrap text-xs"> 至 </span>
<Input
v-model="rangeEnd"
:type="getInputType()"
@@ -226,18 +222,16 @@ watch(
<Tooltip content="多个值用逗号分隔，如：1,2,3" placement="top">
<IconifyIcon
icon="ep:question-filled"
class="cursor-help text-[var(--el-text-color-placeholder)]"
class="cursor-help text-gray-400"
/>
</Tooltip>
</template>
</Input>
<div
v-if="listPreview.length > 0"
class="mt-8px gap-6px flex flex-wrap items-center"
class="mt-2 flex flex-wrap items-center gap-1"
>
<span class="text-12px text-[var(--el-text-color-secondary)]">
解析结果：
</span>
<span class="text-secondary text-xs"> 解析结果： </span>
<Tag
v-for="(item, index) in listPreview"
:key="index"
@@ -288,7 +282,7 @@ watch(
:content="`单位：${propertyConfig.unit}`"
placement="top"
>
<span class="text-12px px-4px text-[var(--el-text-color-secondary)]">
<span class="text-secondary px-1 text-xs">
{{ propertyConfig.unit }}
</span>
</Tooltip>

28
apps/web-antd/src/views/iot/rule/scene/form/sections/ActionSection.vue
View File

@@ -100,7 +100,7 @@ function removeAction(index: number) {
* @param type 执行器类型
*/
function updateActionType(index: number, type: number) {
actions.value[index].type = type.toString();
actions.value[index]!.type = type.toString();
onActionTypeChange(actions.value[index] as Action, type);
}
@@ -119,7 +119,7 @@ function updateAction(index: number, action: Action) {
* @param alertConfigId 告警配置ID
*/
function updateActionAlertConfig(index: number, alertConfigId?: number) {
actions.value[index].alertConfigId = alertConfigId;
actions.value[index]!.alertConfigId = alertConfigId;
if (actions.value[index]) {
actions.value[index].alertConfigId = alertConfigId;
}
@@ -153,7 +153,7 @@ function onActionTypeChange(action: Action, type: any) {
</script>
<template>
<Card class="rounded-8px border-primary border" shadow="never">
<Card class="border-primary rounded-lg border" shadow="never">
<template #title>
<div class="flex items-center justify-between">
<div class="gap-8px flex items-center">
@@ -186,18 +186,18 @@ function onActionTypeChange(action: Action, type: any) {
<div
v-for="(action, index) in actions"
:key="`action-${index}`"
class="rounded-8px border-2 border-blue-200 bg-blue-50 shadow-sm transition-shadow hover:shadow-md"
class="rounded-lg border-2 border-blue-200 bg-blue-50 shadow-sm transition-shadow hover:shadow-md"
>
<!-- 执行器头部 - 蓝色主题 -->
<div
class="p-16px rounded-t-6px flex items-center justify-between border-b border-blue-200 bg-gradient-to-r from-blue-50 to-sky-50"
class="flex items-center justify-between rounded-t-lg border-b border-blue-200 bg-gradient-to-r from-blue-50 to-sky-50 p-4"
>
<div class="gap-12px flex items-center">
<div
class="gap-8px text-16px font-600 flex items-center text-blue-700"
class="font-600 flex items-center gap-2 text-base text-blue-700"
>
<div
class="w-24px h-24px text-12px flex items-center justify-center rounded-full bg-blue-500 font-bold text-white"
class="flex size-6 items-center justify-center rounded-full bg-blue-500 text-xs font-bold text-white"
>
{{ index + 1 }}
</div>
@@ -220,7 +220,7 @@ function onActionTypeChange(action: Action, type: any) {
@click="removeAction(index)"
class="hover:bg-red-50"
>
<IconifyIcon icon="ep:delete" />
<IconifyIcon icon="lucide:trash-2" />
删除
</Button>
</div>
@@ -275,16 +275,14 @@ function onActionTypeChange(action: Action, type: any) {
action.type ===
IotRuleSceneActionTypeEnum.ALERT_TRIGGER.toString()
"
class="rounded-6px p-16px border-border bg-fill-color-blank border"
class="border-border bg-fill-color-blank rounded-lg border p-4"
>
<div class="gap-8px mb-8px flex items-center">
<IconifyIcon icon="ep:warning" class="text-16px text-warning" />
<span class="text-14px font-600 text-primary">触发告警</span>
<div class="mb-2 flex items-center gap-2">
<IconifyIcon icon="ep:warning" class="text-warning text-base" />
<span class="font-600 text-primary text-sm">触发告警</span>
<Tag size="small" type="warning">自动执行</Tag>
</div>
<div
class="text-12px leading-relaxed text-[var(--el-text-color-secondary)]"
>
<div class="text-secondary text-xs leading-relaxed">
当触发条件满足时，系统将自动发送告警通知，可在菜单 [告警中心 ->
告警配置] 管理。
</div>

15
apps/web-antd/src/views/iot/rule/scene/form/sections/TriggerSection.vue
View File

@@ -71,7 +71,7 @@ function removeTrigger(index: number) {
* @param type 触发器类型
*/
function updateTriggerType(index: number, type: number) {
triggers.value[index].type = type;
triggers.value[index]!.type = type.toString();
onTriggerTypeChange(index, type);
}
@@ -90,7 +90,7 @@ function updateTriggerDeviceConfig(index: number, newTrigger: Trigger) {
* @param cronExpression CRON 表达式
*/
function updateTriggerCronConfig(index: number, cronExpression?: string) {
triggers.value[index].cronExpression = cronExpression;
triggers.value[index]!.cronExpression = cronExpression;
}
/**
@@ -99,7 +99,7 @@ function updateTriggerCronConfig(index: number, cronExpression?: string) {
* @param _ 触发器类型（未使用）
*/
function onTriggerTypeChange(index: number, _: number) {
const triggerItem = triggers.value[index];
const triggerItem = triggers.value[index]!;
triggerItem.productId = undefined;
triggerItem.deviceId = undefined;
triggerItem.identifier = undefined;
@@ -127,7 +127,7 @@ onMounted(() => {
<Tag size="small" type="info"> {{ triggers.length }} 个触发器 </Tag>
</div>
<Button type="primary" size="small" @click="addTrigger">
<IconifyIcon icon="ep:plus" />
<IconifyIcon icon="lucide:plus" />
添加触发器
</Button>
</div>
@@ -173,7 +173,7 @@ onMounted(() => {
@click="removeTrigger(index)"
class="hover:bg-red-50"
>
<IconifyIcon icon="ep:delete" />
<IconifyIcon icon="lucide:trash-2" />
删除
</Button>
</div>
@@ -203,7 +203,10 @@ onMounted(() => {
<div
class="gap-8px p-12px px-16px rounded-6px border-primary bg-background flex items-center border"
>
<IconifyIcon icon="ep:timer" class="text-18px text-danger" />
<IconifyIcon
icon="lucide:timer"
class="text-18px text-danger"
/>
<span class="text-14px font-500 text-primary">
定时触发配置
</span>