From 274ecb5dcaa4f3668cca3d2dbc12cb865b7f7b9a Mon Sep 17 00:00:00 2001 From: puhui999 Date: Mon, 28 Jul 2025 16:45:43 +0800 Subject: [PATCH] =?UTF-8?q?perf=EF=BC=9A=E3=80=90IoT=20=E7=89=A9=E8=81=94?= =?UTF-8?q?=E7=BD=91=E3=80=91=E5=9C=BA=E6=99=AF=E8=81=94=E5=8A=A8=E8=A7=A6?= =?UTF-8?q?=E5=8F=91=E5=99=A8=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .vscode/settings.json | 2 +- src/api/iot/rule/scene/scene.types.ts | 13 +- .../scene/IoT场景联动规则表单设计思路文档.md | 1102 ----------------- .../IotThingModelTSLRespVO数据结构文档.md | 469 ------- .../form/configs/DeviceTriggerConfig.vue | 30 +- .../scene/form/configs/TimerTriggerConfig.vue | 64 +- .../rule/scene/form/inputs/CronBuilder.vue | 242 ---- .../iot/rule/scene/form/inputs/CronInput.vue | 141 --- .../scene/form/inputs/DescriptionInput.vue | 178 --- .../iot/rule/scene/form/inputs/NameInput.vue | 111 -- .../rule/scene/form/inputs/StatusRadio.vue | 158 --- .../scene/form/sections/BasicInfoSection.vue | 38 +- .../scene/form/sections/TriggerSection.vue | 146 +-- .../form/selectors/TriggerTypeSelector.vue | 142 --- 14 files changed, 96 insertions(+), 2740 deletions(-) delete mode 100644 src/views/iot/rule/scene/IoT场景联动规则表单设计思路文档.md delete mode 100644 src/views/iot/rule/scene/IotThingModelTSLRespVO数据结构文档.md delete mode 100644 src/views/iot/rule/scene/form/inputs/CronBuilder.vue delete mode 100644 src/views/iot/rule/scene/form/inputs/CronInput.vue delete mode 100644 src/views/iot/rule/scene/form/inputs/DescriptionInput.vue delete mode 100644 src/views/iot/rule/scene/form/inputs/NameInput.vue delete mode 100644 src/views/iot/rule/scene/form/inputs/StatusRadio.vue delete mode 100644 src/views/iot/rule/scene/form/selectors/TriggerTypeSelector.vue diff --git a/.vscode/settings.json b/.vscode/settings.json index 568f1669..74ab52a7 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -88,7 +88,7 @@ }, "editor.formatOnSave": true, "[vue]": { - "editor.defaultFormatter": "octref.vetur" + "editor.defaultFormatter": "esbenp.prettier-vscode" }, "i18n-ally.localesPaths": ["src/locales"], "i18n-ally.keystyle": "nested", diff --git a/src/api/iot/rule/scene/scene.types.ts b/src/api/iot/rule/scene/scene.types.ts index ca021e72..05523bc5 100644 --- a/src/api/iot/rule/scene/scene.types.ts +++ b/src/api/iot/rule/scene/scene.types.ts @@ -173,12 +173,13 @@ interface IotRuleScene extends TenantBaseDO { actions: ActionConfig[] // 执行器数组（必填，至少一个） } -// 工具类型 -// TODO @puhui999：这些在瞅瞅~ -type TriggerType = (typeof IotRuleSceneTriggerTypeEnum)[keyof typeof IotRuleSceneTriggerTypeEnum] -type ActionType = (typeof IotRuleSceneActionTypeEnum)[keyof typeof IotRuleSceneActionTypeEnum] -type MessageType = (typeof IotDeviceMessageTypeEnum)[keyof typeof IotDeviceMessageTypeEnum] -type OperatorType = +// 工具类型 - 从枚举中提取类型 +export type TriggerType = + (typeof IotRuleSceneTriggerTypeEnum)[keyof typeof IotRuleSceneTriggerTypeEnum] +export type ActionType = + (typeof IotRuleSceneActionTypeEnum)[keyof typeof IotRuleSceneActionTypeEnum] +export type MessageType = (typeof IotDeviceMessageTypeEnum)[keyof typeof IotDeviceMessageTypeEnum] +export type OperatorType = (typeof IotRuleSceneTriggerConditionParameterOperatorEnum)[keyof typeof IotRuleSceneTriggerConditionParameterOperatorEnum]['value'] // 表单验证规则类型 diff --git a/src/views/iot/rule/scene/IoT场景联动规则表单设计思路文档.md b/src/views/iot/rule/scene/IoT场景联动规则表单设计思路文档.md deleted file mode 100644 index 17e93304..00000000 --- a/src/views/iot/rule/scene/IoT场景联动规则表单设计思路文档.md +++ /dev/null @@ -1,1102 +0,0 @@ -// TODO @puhui999：这些后续需要删除哈 -# IoT场景联动规则表单设计思路文档 - -## 概述 - -本文档详细描述了IoT场景联动规则表单的设计思路，包括表单结构、组件设计、数据流转和用户交互逻辑。通过Mermaid图直观展示各个组件之间的关系和数据流向。 - -## 表单整体架构设计 - -### 1. 表单主体结构 - -表单采用分步骤设计，包含以下主要部分： - -- **基础信息配置**：场景名称、描述、状态 -- **触发器配置**：设备触发或定时触发 -- **执行器配置**：设备控制或告警配置 -- **预览与保存**：配置预览和最终保存 - -### 2. 组件层次结构图 - -```mermaid -graph TB - A[RuleSceneForm
主表单组件] --> B[BasicInfoSection
基础信息] - A --> C[TriggerSection
触发器配置] - A --> D[ActionSection
执行器配置] - A --> E[PreviewSection
预览区域] - - %% 基础信息组件 - B --> B1[NameInput
场景名称输入] - B --> B2[DescriptionInput
场景描述输入] - B --> B3[StatusRadio
状态选择] - - %% 触发器配置组件 - C --> C1[TriggerTypeSelector
触发类型选择器] - C --> C2[DeviceTriggerConfig
设备触发配置] - C --> C3[TimerTriggerConfig
定时触发配置] - - %% 设备触发配置子组件 - C2 --> C21[ProductSelector
产品选择器] - C2 --> C22[DeviceSelector
设备选择器] - C2 --> C23[PropertySelector
属性选择器] - C2 --> C24[OperatorSelector
操作符选择器] - C2 --> C25[ValueInput
值输入] - C2 --> C26[ConditionGroupConfig
条件分组配置] - - %% 定时触发配置子组件 - C3 --> C31[CronInput
CRON表达式输入] - C3 --> C32[CronBuilder
可视化CRON构建器] - C3 --> C33[NextExecutionPreview
下次执行时间预览] - - %% 执行器配置组件 - D --> D1[ActionTypeSelector
执行类型选择器] - D --> D2[DeviceControlConfig
设备控制配置] - D --> D3[AlertConfig
告警配置] - - %% 设备控制配置子组件 - D2 --> D21[TargetProductSelector
目标产品选择器] - D2 --> D22[TargetDeviceSelector
目标设备选择器] - D2 --> D23[ControlTypeSelector
控制类型选择器] - D2 --> D24[ParamsConfig
参数配置] - - %% 告警配置子组件 - D3 --> D31[AlertConfigSelector
告警配置选择器] - - %% 预览区域组件 - E --> E1[ConfigPreview
配置预览] - E --> E2[ValidationResult
验证结果] - E --> E3[SaveButton
保存按钮] - - %% 样式定义 - classDef mainComponent fill:#e1f5fe,stroke:#01579b,stroke-width:2px - classDef sectionComponent fill:#f3e5f5,stroke:#4a148c,stroke-width:2px - classDef subComponent fill:#e8f5e8,stroke:#1b5e20,stroke-width:2px - - class A mainComponent - class B,C,D,E sectionComponent - class B1,B2,B3,C1,C2,C3,C21,C22,C23,C24,C25,C26,C31,C32,C33,D1,D2,D3,D21,D22,D23,D24,D31,E1,E2,E3 subComponent -``` - -### 3. 组件层次结构文本 - -```text -RuleSceneForm (主表单) -├── BasicInfoSection (基础信息) -│ ├── NameInput (场景名称输入) -│ ├── DescriptionInput (场景描述输入) -│ └── StatusRadio (状态选择) -├── TriggerSection (触发器配置) -│ ├── TriggerTypeSelector (触发类型选择) -│ ├── DeviceTriggerConfig (设备触发配置) -│ │ ├── ProductSelector (产品选择器) -│ │ ├── DeviceSelector (设备选择器) -│ │ ├── PropertySelector (属性选择器) -│ │ ├── OperatorSelector (操作符选择器) -│ │ ├── ValueInput (值输入) -│ │ └── ConditionGroupConfig (条件分组配置) -│ └── TimerTriggerConfig (定时触发配置) -│ ├── CronInput (CRON表达式输入) -│ ├── CronBuilder (可视化CRON构建器) -│ └── NextExecutionPreview (下次执行时间预览) -├── ActionSection (执行器配置) -│ ├── ActionTypeSelector (执行类型选择) -│ ├── DeviceControlConfig (设备控制配置) -│ │ ├── TargetProductSelector (目标产品选择器) -│ │ ├── TargetDeviceSelector (目标设备选择器) -│ │ ├── ControlTypeSelector (控制类型选择器) -│ │ └── ParamsConfig (参数配置) -│ └── AlertConfig (告警配置) -│ └── AlertConfigSelector (告警配置选择器) -└── PreviewSection (预览区域) - ├── ConfigPreview (配置预览) - ├── ValidationResult (验证结果) - └── SaveButton (保存按钮) -``` - -## 表单数据结构设计 - -### 1. 表单数据模型结构图 - -```mermaid -classDiagram - class RuleSceneFormData { - +number id? - +string name - +string description? - +number status - +TriggerFormData[] triggers - +ActionFormData[] actions - +validateForm() boolean - +toApiFormat() ApiRequestData - } - - class TriggerFormData { - +number type - +number productId? - +number deviceId? - +string identifier? - +string operator? - +string value? - +string cronExpression? - +ConditionGroupFormData[] conditionGroups? - +validateTrigger() boolean - +isDeviceTrigger() boolean - +isTimerTrigger() boolean - } - - class ActionFormData { - +number type - +number productId? - +number deviceId? - +Record params? - +number alertConfigId? - +validateAction() boolean - +isDeviceAction() boolean - +isAlertAction() boolean - } - - class ConditionGroupFormData { - +ConditionFormData[] conditions - +string logicOperator - +validateGroup() boolean - } - - class ConditionFormData { - +number type - +number productId - +number deviceId - +string identifier - +string operator - +string param - +validateCondition() boolean - } - - class TriggerTypeEnum { - <> - DEVICE_STATE_UPDATE: 1 - DEVICE_PROPERTY_POST: 2 - DEVICE_EVENT_POST: 3 - DEVICE_SERVICE_INVOKE: 4 - TIMER: 100 - } - - class ActionTypeEnum { - <> - DEVICE_PROPERTY_SET: 1 - DEVICE_SERVICE_INVOKE: 2 - ALERT_TRIGGER: 100 - ALERT_RECOVER: 101 - } - - class OperatorEnum { - <> - EQUALS: "=" - NOT_EQUALS: "!=" - GREATER_THAN: ">" - LESS_THAN: "<" - IN: "in" - BETWEEN: "between" - } - - RuleSceneFormData "1" --> "*" TriggerFormData : contains - RuleSceneFormData "1" --> "*" ActionFormData : contains - TriggerFormData "1" --> "*" ConditionGroupFormData : contains - ConditionGroupFormData "1" --> "*" ConditionFormData : contains - TriggerFormData --> TriggerTypeEnum : uses - ActionFormData --> ActionTypeEnum : uses - ConditionFormData --> OperatorEnum : uses -``` - -### 2. 表单数据模型代码 - -```typescript -interface RuleSceneFormData { - // 基础信息 - id?: number; - name: string; - description?: string; - status: number; - - // 触发器配置 - triggers: TriggerFormData[]; - - // 执行器配置 - actions: ActionFormData[]; -} - -interface TriggerFormData { - type: number; - productId?: number; - deviceId?: number; - identifier?: string; - operator?: string; - value?: string; - cronExpression?: string; - conditionGroups?: ConditionGroupFormData[]; -} - -interface ActionFormData { - type: number; - productId?: number; - deviceId?: number; - params?: Record; - alertConfigId?: number; -} - -interface ConditionGroupFormData { - conditions: ConditionFormData[]; - logicOperator: 'AND' | 'OR'; -} - -interface ConditionFormData { - type: number; - productId: number; - deviceId: number; - identifier: string; - operator: string; - param: string; -} -``` - -### 2. 表单验证规则 - -```typescript -const validationRules = { - name: [ - { required: true, message: '场景名称不能为空' }, - { max: 50, message: '场景名称不能超过50个字符' } - ], - status: [ - { required: true, message: '场景状态不能为空' }, - { type: 'enum', enum: [0, 1], message: '状态值必须为0或1' } - ], - triggers: [ - { required: true, message: '触发器配置不能为空' }, - { type: 'array', min: 1, message: '至少需要一个触发器' } - ], - actions: [ - { required: true, message: '执行器配置不能为空' }, - { type: 'array', min: 1, message: '至少需要一个执行器' } - ] -}; -``` - -## 核心组件设计 - -### 1. 基础信息组件 (BasicInfoSection) - -```vue - -``` - -### 2. 触发器配置组件 (TriggerSection) - -```vue - -``` - -### 3. 执行器配置组件 (ActionSection) - -```vue - -``` - -## 表单交互流程设计 - -### 1. 表单初始化流程图 - -```mermaid -flowchart TD - A[页面加载] --> B[初始化表单数据结构] - B --> C[获取基础数据] - C --> C1[加载产品列表] - C --> C2[加载告警配置列表] - C --> C3[加载用户权限信息] - C1 --> D[表单渲染] - C2 --> D - C3 --> D - D --> E[建立双向数据绑定] - E --> F[表单就绪] - - %% 错误处理 - C --> G{数据加载失败?} - G -->|是| H[显示错误信息] - G -->|否| D - H --> I[提供重试选项] - I --> C -``` - -### 2. 触发器配置流程图 - -```mermaid -flowchart TD - A[开始配置触发器] --> B[选择触发类型] - B --> C{触发类型} - - %% 设备触发分支 - C -->|设备触发| D[设备触发配置] - D --> D1[选择产品] - D1 --> D2[加载设备列表] - D2 --> D3[选择设备] - D3 --> D4[加载物模型] - D4 --> D5[选择属性/事件] - D5 --> D6[选择操作符] - D6 --> D7[输入比较值] - D7 --> D8[配置条件分组] - D8 --> E[触发器配置完成] - - %% 定时触发分支 - C -->|定时触发| F[定时触发配置] - F --> F1[输入CRON表达式] - F1 --> F2{表达式格式} - F2 -->|正确| F3[显示下次执行时间] - F2 -->|错误| F4[显示错误提示] - F4 --> F5[提供可视化编辑器] - F5 --> F1 - F3 --> E - - %% 验证 - E --> G[验证触发器配置] - G --> H{验证通过?} - H -->|是| I[保存触发器配置] - H -->|否| J[显示验证错误] - J --> D -``` - -### 3. 执行器配置流程图 - -```mermaid -flowchart TD - A[开始配置执行器] --> B[选择执行类型] - B --> C{执行类型} - - %% 设备控制分支 - C -->|设备控制| D[设备控制配置] - D --> D1[选择目标产品] - D1 --> D2[加载目标设备列表] - D2 --> D3[选择目标设备] - D3 --> D4[选择控制类型] - D4 --> D5{控制类型} - D5 -->|属性设置| D6[配置属性参数] - D5 -->|服务调用| D7[配置服务参数] - D6 --> E[执行器配置完成] - D7 --> E - - %% 告警分支 - C -->|告警触发/恢复| F[告警配置] - F --> F1[选择告警配置项] - F1 --> F2[配置告警参数] - F2 --> E - - %% 验证 - E --> G[验证执行器配置] - G --> H{验证通过?} - H -->|是| I[保存执行器配置] - H -->|否| J[显示验证错误] - J --> D -``` - -### 4. 表单提交流程图 - -```mermaid -flowchart TD - A[用户点击保存] --> B[表单验证] - B --> C{验证通过?} - C -->|否| D[显示验证错误] - D --> E[用户修正错误] - E --> B - - C -->|是| F[数据转换] - F --> G[转换为API格式] - G --> H[提交请求] - H --> I{请求成功?} - - I -->|是| J[显示成功消息] - J --> K[跳转到列表页面] - - I -->|否| L[显示错误消息] - L --> M[提供重试选项] - M --> H - - %% 加载状态 - H --> N[显示加载状态] - N --> I -``` - -### 5. 数据流转图 - -```mermaid -flowchart LR - A[用户输入] --> B[表单组件] - B --> C[数据验证] - C --> D[状态管理] - D --> E[API调用] - E --> F[后端处理] - F --> G[数据库存储] - - %% 反向数据流 - G --> H[响应数据] - H --> I[状态更新] - I --> J[UI更新] - J --> K[用户反馈] - - %% 错误处理流 - C --> L{验证失败?} - L -->|是| M[错误提示] - M --> A - - E --> N{请求失败?} - N -->|是| O[错误处理] - O --> K -``` - -## 组件状态管理设计 - -### 1. 状态管理架构图 - -```mermaid -graph TB - A[全局状态管理] --> B[表单状态] - A --> C[UI状态] - A --> D[数据缓存状态] - - %% 表单状态 - B --> B1[formData
表单数据] - B --> B2[validationErrors
验证错误] - B --> B3[isDirty
数据变更标识] - B --> B4[isSubmitting
提交状态] - - %% UI状态 - C --> C1[loading
加载状态] - C --> C2[activeStep
当前步骤] - C --> C3[expandedSections
展开的区域] - C --> C4[modalVisible
弹窗显示状态] - - %% 数据缓存状态 - D --> D1[productList
产品列表] - D --> D2[deviceList
设备列表] - D --> D3[thingModelList
物模型列表] - D --> D4[alertConfigList
告警配置列表] - - %% 状态操作 - E[状态操作] --> E1[updateFormData
更新表单数据] - E --> E2[validateForm
验证表单] - E --> E3[resetForm
重置表单] - E --> E4[submitForm
提交表单] - - %% 样式定义 - classDef stateClass fill:#e3f2fd,stroke:#1976d2,stroke-width:2px - classDef actionClass fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px - - class A,B,C,D stateClass - class E,E1,E2,E3,E4 actionClass -``` - -### 2. 组件通信图 - -```mermaid -sequenceDiagram - participant U as User - participant F as FormComponent - participant T as TriggerSection - participant A as ActionSection - participant S as StateManager - participant API as BackendAPI - - U->>F: 填写基础信息 - F->>S: updateFormData(basicInfo) - S-->>F: 状态更新完成 - - U->>T: 配置触发器 - T->>S: updateTriggers(triggerData) - S->>API: loadDeviceList(productId) - API-->>S: 返回设备列表 - S-->>T: 更新设备选项 - - U->>A: 配置执行器 - A->>S: updateActions(actionData) - S-->>A: 状态更新完成 - - U->>F: 点击保存 - F->>S: validateForm() - S-->>F: 验证结果 - - alt 验证通过 - F->>S: submitForm() - S->>API: saveRuleScene(formData) - API-->>S: 保存结果 - S-->>F: 显示成功消息 - else 验证失败 - S-->>F: 显示错误信息 - end -``` - -### 3. 数据流向图 - -```mermaid -flowchart LR - A[用户操作] --> B[组件事件] - B --> C[状态更新] - C --> D[数据验证] - D --> E{验证通过?} - - E -->|是| F[更新状态] - E -->|否| G[显示错误] - - F --> H[触发副作用] - H --> I[API调用] - I --> J[更新缓存] - J --> K[UI重新渲染] - - G --> L[用户修正] - L --> A - - %% 样式 - classDef processClass fill:#e8f5e8,stroke:#2e7d32,stroke-width:2px - classDef decisionClass fill:#fff3e0,stroke:#f57c00,stroke-width:2px - classDef errorClass fill:#ffebee,stroke:#d32f2f,stroke-width:2px - - class A,B,C,D,F,H,I,J,K,L processClass - class E decisionClass - class G errorClass -``` - -## 用户体验优化 - -### 1. 智能提示和帮助 - -- **字段说明**：为复杂字段提供详细说明和示例 -- **实时验证**：输入时实时验证数据格式 -- **智能推荐**：根据已选择的产品推荐相关设备 -- **预览功能**：实时预览配置效果 - -### 2. 错误处理和反馈 - -- **表单验证**：清晰的错误提示信息 -- **数据加载**：加载状态和错误重试机制 -- **保存反馈**：明确的成功/失败反馈 - -### 3. 操作便利性 - -- **批量操作**：支持批量添加/删除触发器和执行器 -- **模板功能**：提供常用场景模板 -- **导入导出**：支持配置的导入和导出 - -## 响应式设计考虑 - -### 1. 移动端适配 - -- **布局调整**：在小屏幕上采用垂直布局 -- **操作优化**：增大点击区域，优化触摸操作 -- **内容精简**：在移动端隐藏非必要信息 - -### 2. 不同屏幕尺寸适配 - -- **大屏幕**：充分利用空间，并排显示更多内容 -- **中等屏幕**：平衡内容密度和可读性 -- **小屏幕**：优先显示核心功能 - -## 性能优化策略 - -### 1. 组件懒加载 - -```javascript -// 懒加载复杂组件 -const DeviceTriggerConfig = defineAsyncComponent(() => - import('./components/DeviceTriggerConfig.vue') -); -``` - -### 2. 数据缓存 - -```javascript -// 缓存产品和设备数据 -const productCache = new Map(); -const deviceCache = new Map(); -``` - -### 3. 防抖处理 - -```javascript -// 搜索防抖 -const debouncedSearch = debounce(searchDevices, 300); -``` - -## 可访问性设计 - -### 1. 键盘导航 - -- 支持Tab键在表单元素间导航 -- 提供快捷键操作 - -### 2. 屏幕阅读器支持 - -- 为表单元素提供适当的标签 -- 使用ARIA属性增强可访问性 - -### 3. 颜色和对比度 - -- 确保足够的颜色对比度 -- 不仅依赖颜色传达信息 - -## 表单验证策略 - -### 1. 验证层次结构图 - -```mermaid -graph TB - A[表单验证] --> B[字段级验证] - A --> C[组件级验证] - A --> D[表单级验证] - A --> E[业务级验证] - - %% 字段级验证 - B --> B1[必填验证] - B --> B2[格式验证] - B --> B3[长度验证] - B --> B4[类型验证] - - %% 组件级验证 - C --> C1[触发器验证] - C --> C2[执行器验证] - C --> C3[条件组合验证] - - %% 表单级验证 - D --> D1[数据完整性验证] - D --> D2[逻辑一致性验证] - D --> D3[依赖关系验证] - - %% 业务级验证 - E --> E1[设备权限验证] - E --> E2[产品可用性验证] - E --> E3[规则冲突验证] - - %% 样式定义 - classDef levelClass fill:#e1f5fe,stroke:#01579b,stroke-width:2px - classDef validationClass fill:#f3e5f5,stroke:#4a148c,stroke-width:2px - - class A levelClass - class B,C,D,E levelClass - class B1,B2,B3,B4,C1,C2,C3,D1,D2,D3,E1,E2,E3 validationClass -``` - -### 2. 验证时机图 - -```mermaid -stateDiagram-v2 - [*] --> 字段输入 - 字段输入 --> 实时验证: onChange - 实时验证 --> 显示错误: 验证失败 - 实时验证 --> 清除错误: 验证通过 - 显示错误 --> 字段输入: 用户修正 - 清除错误 --> 字段输入: 继续输入 - - 字段输入 --> 失焦验证: onBlur - 失焦验证 --> 显示警告: 格式错误 - 失焦验证 --> 正常状态: 格式正确 - 显示警告 --> 字段输入: 重新聚焦 - 正常状态 --> 字段输入: 重新聚焦 - - 字段输入 --> 表单提交: 用户提交 - 表单提交 --> 全量验证 - 全量验证 --> 提交成功: 验证通过 - 全量验证 --> 显示错误: 验证失败 - 提交成功 --> [*] - 显示错误 --> 字段输入: 用户修正 -``` - -## 测试策略 - -### 1. 测试金字塔图 - -```mermaid -graph TB - A[测试金字塔] --> B[单元测试
Unit Tests
70%] - A --> C[集成测试
Integration Tests
20%] - A --> D[端到端测试
E2E Tests
10%] - - %% 单元测试详细 - B --> B1[组件渲染测试] - B --> B2[数据验证逻辑测试] - B --> B3[用户交互测试] - B --> B4[工具函数测试] - - %% 集成测试详细 - C --> C1[表单提交流程测试] - C --> C2[API调用测试] - C --> C3[数据转换测试] - C --> C4[组件间通信测试] - - %% 端到端测试详细 - D --> D1[完整用户流程测试] - D --> D2[浏览器兼容性测试] - D --> D3[响应式设计测试] - D --> D4[性能测试] - - %% 样式定义 - classDef pyramidClass fill:#e8f5e8,stroke:#2e7d32,stroke-width:3px - classDef unitClass fill:#e3f2fd,stroke:#1976d2,stroke-width:2px - classDef integrationClass fill:#fff3e0,stroke:#f57c00,stroke-width:2px - classDef e2eClass fill:#ffebee,stroke:#d32f2f,stroke-width:2px - - class A pyramidClass - class B,B1,B2,B3,B4 unitClass - class C,C1,C2,C3,C4 integrationClass - class D,D1,D2,D3,D4 e2eClass -``` - -### 2. 测试用例覆盖图 - -```mermaid -mindmap - root((测试用例覆盖)) - 功能测试 - 基础信息 - 名称输入验证 - 描述输入验证 - 状态切换测试 - 触发器配置 - 设备触发配置 - 定时触发配置 - 条件组合测试 - 执行器配置 - 设备控制配置 - 告警配置测试 - 表单提交 - 验证流程测试 - 保存流程测试 - - 异常测试 - 网络异常 - API调用失败 - 超时处理 - 数据异常 - 格式错误处理 - 空数据处理 - 用户异常 - 权限不足 - 操作冲突 - - 性能测试 - 加载性能 - 首屏加载时间 - 组件渲染性能 - 交互性能 - 表单响应速度 - 数据处理性能 - 内存性能 - 内存泄漏检测 - 组件销毁测试 - - 兼容性测试 - 浏览器兼容 - Chrome测试 - Firefox测试 - Safari测试 - Edge测试 - 设备兼容 - 桌面端测试 - 平板端测试 - 移动端测试 -``` - -## 表单设计架构总览 - -### 完整架构图 - -```mermaid -graph TB - %% 用户界面层 - subgraph "用户界面层 (UI Layer)" - A[RuleSceneForm 主表单] - B[BasicInfoSection 基础信息] - C[TriggerSection 触发器配置] - D[ActionSection 执行器配置] - E[PreviewSection 预览区域] - end - - %% 状态管理层 - subgraph "状态管理层 (State Management)" - F[FormState 表单状态] - G[ValidationState 验证状态] - H[UIState 界面状态] - I[CacheState 缓存状态] - end - - %% 业务逻辑层 - subgraph "业务逻辑层 (Business Logic)" - J[FormValidator 表单验证器] - K[DataTransformer 数据转换器] - L[ConfigBuilder 配置构建器] - M[RuleEngine 规则引擎] - end - - %% 数据访问层 - subgraph "数据访问层 (Data Access)" - N[ProductAPI 产品接口] - O[DeviceAPI 设备接口] - P[RuleSceneAPI 规则场景接口] - Q[AlertAPI 告警接口] - end - - %% 工具层 - subgraph "工具层 (Utilities)" - R[CronValidator CRON验证器] - S[TypeChecker 类型检查器] - T[ErrorHandler 错误处理器] - U[Logger 日志记录器] - end - - %% 连接关系 - A --> B - A --> C - A --> D - A --> E - - B --> F - C --> F - D --> F - E --> F - - F --> J - G --> J - H --> K - I --> L - - J --> M - K --> M - L --> M - - M --> N - M --> O - M --> P - M --> Q - - J --> R - K --> S - M --> T - A --> U - - %% 样式定义 - classDef uiClass fill:#e3f2fd,stroke:#1976d2,stroke-width:2px - classDef stateClass fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px - classDef businessClass fill:#e8f5e8,stroke:#2e7d32,stroke-width:2px - classDef dataClass fill:#fff3e0,stroke:#f57c00,stroke-width:2px - classDef utilClass fill:#fce4ec,stroke:#c2185b,stroke-width:2px - - class A,B,C,D,E uiClass - class F,G,H,I stateClass - class J,K,L,M businessClass - class N,O,P,Q dataClass - class R,S,T,U utilClass -``` - -### 设计原则总结 - -```mermaid -mindmap - root((表单设计原则)) - 用户体验 - 直观易用 - 清晰的视觉层次 - 一致的交互模式 - 智能的操作提示 - 响应迅速 - 实时验证反馈 - 快速数据加载 - 流畅的动画效果 - 错误友好 - 明确的错误信息 - 便捷的错误修正 - 优雅的异常处理 - - 技术架构 - 组件化设计 - 高内聚低耦合 - 可复用的组件 - 清晰的组件边界 - 状态管理 - 集中式状态管理 - 可预测的状态变更 - 高效的状态同步 - 数据流控制 - 单向数据流 - 明确的数据来源 - 可追踪的数据变更 - - 质量保证 - 代码质量 - 类型安全 - 代码规范 - 充分的注释 - 测试覆盖 - 单元测试 - 集成测试 - 端到端测试 - 性能优化 - 懒加载 - 缓存策略 - 防抖节流 - - 可维护性 - 模块化结构 - 清晰的目录结构 - 合理的文件组织 - 明确的依赖关系 - 文档完善 - API文档 - 组件文档 - 使用说明 - 扩展性设计 - 插件化架构 - 配置化开发 - 版本兼容性 -``` - -## 总结 - -IoT场景联动规则表单设计需要考虑： - -### 1. 核心设计要点 - -- **复杂性管理**：通过组件化和分步骤设计降低复杂度 -- **用户体验**：提供直观的操作界面和智能提示 -- **数据完整性**：完善的验证机制确保数据质量 -- **扩展性**：模块化设计支持功能扩展 -- **性能优化**：合理的加载和缓存策略 -- **可访问性**：确保所有用户都能正常使用 - -### 2. 技术实现要点 - -- **状态管理**：采用集中式状态管理，确保数据流的可控性 -- **组件设计**：高内聚低耦合的组件架构，提高代码复用性 -- **验证策略**：多层次的验证机制，保证数据质量 -- **错误处理**：完善的错误处理和用户反馈机制 -- **性能优化**：懒加载、缓存、防抖等优化策略 - -### 3. 质量保证 - -- **测试覆盖**：完整的测试金字塔，确保代码质量 -- **文档完善**：详细的设计文档和使用说明 -- **代码规范**：统一的编码规范和类型安全 - -通过以上设计思路和详细的Mermaid图表，可以构建一个功能完善、用户友好、技术先进的IoT场景联动规则配置表单系统。 diff --git a/src/views/iot/rule/scene/IotThingModelTSLRespVO数据结构文档.md b/src/views/iot/rule/scene/IotThingModelTSLRespVO数据结构文档.md deleted file mode 100644 index 7ad53a65..00000000 --- a/src/views/iot/rule/scene/IotThingModelTSLRespVO数据结构文档.md +++ /dev/null @@ -1,469 +0,0 @@ -// TODO @puhui999：这些后续需要删除哈 -# IotThingModelTSLRespVO 数据结构文档 - -## 概述 - -`IotThingModelTSLRespVO` 是IoT产品物模型TSL（Thing Specification Language）的响应数据结构，用于返回完整的产品物模型定义，包括属性、事件和服务的详细信息。TSL是阿里云IoT平台定义的一套物模型描述规范。 - -## 主体数据结构 - -### IotThingModelTSLRespVO - -```typescript -interface IotThingModelTSLRespVO { - productId: number; // 产品编号（必填） - productKey: string; // 产品标识（必填） - properties: ThingModelProperty[]; // 属性列表（必填） - events: ThingModelEvent[]; // 事件列表（必填） - services: ThingModelService[]; // 服务列表（必填） -} -``` - -**字段说明：** -- `productId`: 产品编号，唯一标识一个IoT产品 -- `productKey`: 产品标识符，用于设备连接和识别 -- `properties`: 设备属性列表，描述设备的状态信息 -- `events`: 设备事件列表，描述设备主动上报的事件 -- `services`: 设备服务列表，描述可以调用的设备功能 - -## 属性数据结构 (ThingModelProperty) - -### 基本结构 - -```typescript -interface ThingModelProperty { - identifier: string; // 属性标识符（必填） - name: string; // 属性名称（必填） - accessMode: string; // 访问模式（必填） - required?: boolean; // 是否必选 - dataType: string; // 数据类型（必填） - dataSpecs?: ThingModelDataSpecs; // 数据规范（非列表型） - dataSpecsList?: ThingModelDataSpecs[]; // 数据规范（列表型） -} -``` - -### 字段详细说明 - -#### identifier（属性标识符） -- **类型**: `string` -- **必填**: 是 -- **格式**: 正则表达式 `^[a-zA-Z][a-zA-Z0-9_]{0,31}$` -- **说明**: 只能由字母、数字和下划线组成，必须以字母开头，长度不超过32个字符 -- **示例**: `"temperature"`, `"humidity"`, `"power_status"` - -#### name（属性名称） -- **类型**: `string` -- **必填**: 是 -- **说明**: 属性的显示名称，用于界面展示 -- **示例**: `"温度"`, `"湿度"`, `"电源状态"` - -#### accessMode（访问模式） -- **类型**: `string` -- **必填**: 是 -- **枚举值**: - - `"r"`: 只读，设备只能上报，平台不能下发 - - `"rw"`: 读写，设备可以上报，平台也可以下发 -- **示例**: `"r"`, `"rw"` - -#### dataType（数据类型） -- **类型**: `string` -- **必填**: 是 -- **枚举值**: - - `"int"`: 整数型 - - `"float"`: 单精度浮点型 - - `"double"`: 双精度浮点型 - - `"enum"`: 枚举型 - - `"bool"`: 布尔型 - - `"text"`: 文本型 - - `"date"`: 时间型 - - `"struct"`: 结构体型 - - `"array"`: 数组型 - -## 事件数据结构 (ThingModelEvent) - -### 基本结构 - -```typescript -interface ThingModelEvent { - identifier: string; // 事件标识符（必填） - name: string; // 事件名称（必填） - required?: boolean; // 是否必选 - type: string; // 事件类型（必填） - outputParams?: ThingModelParam[]; // 输出参数 - method?: string; // 执行方法 -} -``` - -### 字段详细说明 - -#### type（事件类型） -- **类型**: `string` -- **必填**: 是 -- **枚举值**: - - `"info"`: 信息事件 - - `"alert"`: 告警事件 - - `"error"`: 故障事件 - -#### outputParams（输出参数） -- **类型**: `ThingModelParam[]` -- **必填**: 否 -- **说明**: 事件触发时返回的参数信息 - -## 服务数据结构 (ThingModelService) - -### 基本结构 - -```typescript -interface ThingModelService { - identifier: string; // 服务标识符（必填） - name: string; // 服务名称（必填） - required?: boolean; // 是否必选 - callType: string; // 调用类型（必填） - inputParams?: ThingModelParam[]; // 输入参数 - outputParams?: ThingModelParam[]; // 输出参数 - method?: string; // 执行方法 -} -``` - -### 字段详细说明 - -#### callType（调用类型） -- **类型**: `string` -- **必填**: 是 -- **枚举值**: - - `"async"`: 异步调用 - - `"sync"`: 同步调用 - -## 参数数据结构 (ThingModelParam) - -### 基本结构 - -```typescript -interface ThingModelParam { - identifier: string; // 参数标识符（必填） - name: string; // 参数名称（必填） - direction: string; // 参数方向（必填） - paraOrder?: number; // 参数序号 - dataType: string; // 数据类型（必填） - dataSpecs?: ThingModelDataSpecs; // 数据规范（非列表型） - dataSpecsList?: ThingModelDataSpecs[]; // 数据规范（列表型） -} -``` - -### 字段详细说明 - -#### direction（参数方向） -- **类型**: `string` -- **必填**: 是 -- **枚举值**: - - `"input"`: 输入参数 - - `"output"`: 输出参数 - -## 数据规范结构 (ThingModelDataSpecs) - -数据规范是一个抽象基类，根据不同的数据类型有不同的具体实现： - -### 1. 数值型数据规范 (ThingModelNumericDataSpec) - -适用于 `int`、`float`、`double` 类型： - -```typescript -interface ThingModelNumericDataSpec { - dataType: "int" | "float" | "double"; - max: string; // 最大值（必填） - min: string; // 最小值（必填） - step: string; // 步长（必填） - precise?: string; // 精度（float/double可选） - defaultValue?: string; // 默认值 - unit?: string; // 单位符号 - unitName?: string; // 单位名称 -} -``` - -### 2. 布尔/枚举型数据规范 (ThingModelBoolOrEnumDataSpecs) - -适用于 `bool`、`enum` 类型： - -```typescript -interface ThingModelBoolOrEnumDataSpecs { - dataType: "bool" | "enum"; - name: string; // 枚举项名称（必填） - value: number; // 枚举值（必填） -} -``` - -### 3. 文本/时间型数据规范 (ThingModelDateOrTextDataSpecs) - -适用于 `text`、`date` 类型： - -```typescript -interface ThingModelDateOrTextDataSpecs { - dataType: "text" | "date"; - length?: number; // 数据长度（text类型需要，最大2048） - defaultValue?: string; // 默认值 -} -``` - -### 4. 数组型数据规范 (ThingModelArrayDataSpecs) - -适用于 `array` 类型： - -```typescript -interface ThingModelArrayDataSpecs { - dataType: "array"; - size: number; // 数组元素个数（必填） - childDataType: string; // 数组元素数据类型（必填） - dataSpecsList?: ThingModelDataSpecs[]; // 子元素数据规范（struct类型时） -} -``` - -**childDataType 枚举值**: -- `"struct"`: 结构体 -- `"int"`: 整数 -- `"float"`: 单精度浮点 -- `"double"`: 双精度浮点 -- `"text"`: 文本 - -### 5. 结构体型数据规范 (ThingModelStructDataSpecs) - -适用于 `struct` 类型： - -```typescript -interface ThingModelStructDataSpecs { - dataType: "struct"; - identifier: string; // 属性标识符（必填） - name: string; // 属性名称（必填） - accessMode: string; // 操作类型（必填） - required?: boolean; // 是否必选 - childDataType: string; // 子数据类型（必填） - dataSpecs?: ThingModelDataSpecs; // 数据规范（非列表型） - dataSpecsList?: ThingModelDataSpecs[]; // 数据规范（列表型） -} -``` - -**childDataType 枚举值**: -- `"int"`: 整数 -- `"float"`: 单精度浮点 -- `"double"`: 双精度浮点 -- `"text"`: 文本 -- `"date"`: 时间 -- `"enum"`: 枚举 -- `"bool"`: 布尔 - -## 数据类型映射关系 - -### dataSpecs vs dataSpecsList - -- **dataSpecs**: 用于非列表型数据类型（`int`、`float`、`double`、`text`、`date`、`array`） -- **dataSpecsList**: 用于列表型数据类型（`enum`、`bool`、`struct`） - -### JSON多态序列化 - -数据规范使用Jackson的`@JsonTypeInfo`和`@JsonSubTypes`注解实现多态序列化： - -```json -{ - "dataType": "int", - "max": "100", - "min": "0", - "step": "1", - "unit": "°C", - "unitName": "摄氏度" -} -``` - -## 完整示例 - -### 温度传感器物模型示例 - -```json -{ - "productId": 1024, - "productKey": "temperature_sensor", - "properties": [ - { - "identifier": "temperature", - "name": "温度", - "accessMode": "r", - "required": true, - "dataType": "float", - "dataSpecs": { - "dataType": "float", - "max": "100.0", - "min": "-40.0", - "step": "0.1", - "precise": "1", - "unit": "°C", - "unitName": "摄氏度" - } - }, - { - "identifier": "power_switch", - "name": "电源开关", - "accessMode": "rw", - "required": false, - "dataType": "bool", - "dataSpecsList": [ - { - "dataType": "bool", - "name": "关闭", - "value": 0 - }, - { - "dataType": "bool", - "name": "开启", - "value": 1 - } - ] - } - ], - "events": [ - { - "identifier": "high_temperature_alert", - "name": "高温告警", - "required": false, - "type": "alert", - "outputParams": [ - { - "identifier": "current_temp", - "name": "当前温度", - "direction": "output", - "dataType": "float", - "dataSpecs": { - "dataType": "float", - "max": "100.0", - "min": "-40.0", - "step": "0.1" - } - } - ] - } - ], - "services": [ - { - "identifier": "reset_device", - "name": "重置设备", - "required": false, - "callType": "async", - "inputParams": [ - { - "identifier": "reset_type", - "name": "重置类型", - "direction": "input", - "dataType": "enum", - "dataSpecsList": [ - { - "dataType": "enum", - "name": "软重置", - "value": 1 - }, - { - "dataType": "enum", - "name": "硬重置", - "value": 2 - } - ] - } - ], - "outputParams": [ - { - "identifier": "result", - "name": "执行结果", - "direction": "output", - "dataType": "bool", - "dataSpecsList": [ - { - "dataType": "bool", - "name": "失败", - "value": 0 - }, - { - "dataType": "bool", - "name": "成功", - "value": 1 - } - ] - } - ] - } - ] -} -``` - -## 前端使用建议 - -### 1. TypeScript类型定义 - -建议在前端项目中定义完整的TypeScript接口，确保类型安全： - -```typescript -// 定义完整的类型接口 -export interface IotThingModelTSLRespVO { - productId: number; - productKey: string; - properties: ThingModelProperty[]; - events: ThingModelEvent[]; - services: ThingModelService[]; -} - -// 使用联合类型处理数据规范的多态性 -export type ThingModelDataSpecs = - | ThingModelNumericDataSpec - | ThingModelBoolOrEnumDataSpecs - | ThingModelDateOrTextDataSpecs - | ThingModelArrayDataSpecs - | ThingModelStructDataSpecs; -``` - -### 2. 数据验证 - -```typescript -// 验证数据类型和数据规范的一致性 -function validateDataSpecs(dataType: string, dataSpecs: any): boolean { - switch (dataType) { - case 'int': - case 'float': - case 'double': - return dataSpecs.dataType === dataType && - dataSpecs.max !== undefined && - dataSpecs.min !== undefined; - case 'bool': - case 'enum': - return Array.isArray(dataSpecs) && - dataSpecs.every(spec => spec.name && spec.value !== undefined); - // ... 其他类型验证 - default: - return false; - } -} -``` - -### 3. 数据转换工具 - -```typescript -// 将后端数据转换为前端展示格式 -function formatPropertyValue(property: ThingModelProperty, value: any): string { - if (property.dataType === 'enum' || property.dataType === 'bool') { - const spec = property.dataSpecsList?.find(s => s.value === value); - return spec?.name || String(value); - } - - if (property.dataType === 'float' || property.dataType === 'double') { - const unit = property.dataSpecs?.unit || ''; - return `${value}${unit}`; - } - - return String(value); -} -``` - -## 注意事项 - -1. **数据规范选择**: 根据`dataType`选择使用`dataSpecs`还是`dataSpecsList` -2. **标识符唯一性**: 在同一产品下，所有功能的`identifier`必须唯一 -3. **数据类型一致性**: 参数的`dataType`必须与其`dataSpecs`的`dataType`保持一致 -4. **枚举值处理**: 布尔型和枚举型数据使用`dataSpecsList`数组存储可选值 -5. **嵌套结构**: 结构体和数组类型可能包含嵌套的数据规范定义 -6. **版本兼容**: 物模型结构可能随版本演进，前端需要做好兼容性处理 - -这个数据结构为IoT设备的完整功能描述提供了标准化的格式，支持复杂的数据类型和嵌套结构，能够满足各种IoT设备的建模需求。 diff --git a/src/views/iot/rule/scene/form/configs/DeviceTriggerConfig.vue b/src/views/iot/rule/scene/form/configs/DeviceTriggerConfig.vue index e6400102..629312f2 100644 --- a/src/views/iot/rule/scene/form/configs/DeviceTriggerConfig.vue +++ b/src/views/iot/rule/scene/form/configs/DeviceTriggerConfig.vue @@ -8,25 +8,13 @@ @change="handleDeviceChange" /> - - -
- - - -
- -
+
触发条件 - - {{ trigger.conditionGroups?.length || 0 }}/{{ maxConditionGroups }} + {{ trigger.conditionGroups?.length || 0 }}个条件组
@@ -52,18 +40,13 @@ :key="`group-${groupIndex}`" class="border border-[var(--el-border-color-lighter)] rounded-6px bg-[var(--el-fill-color-blank)]" > -
+
条件组 {{ groupIndex + 1 }} - - - - + 条件间为"且"关系
diff --git a/src/views/iot/rule/scene/form/configs/TimerTriggerConfig.vue b/src/views/iot/rule/scene/form/configs/TimerTriggerConfig.vue index 5bb39ab1..6d09cf0c 100644 --- a/src/views/iot/rule/scene/form/configs/TimerTriggerConfig.vue +++ b/src/views/iot/rule/scene/form/configs/TimerTriggerConfig.vue @@ -1,52 +1,23 @@ - - + \ No newline at end of file diff --git a/src/views/iot/rule/scene/form/inputs/CronBuilder.vue b/src/views/iot/rule/scene/form/inputs/CronBuilder.vue deleted file mode 100644 index ac91daff..00000000 --- a/src/views/iot/rule/scene/form/inputs/CronBuilder.vue +++ /dev/null @@ -1,242 +0,0 @@ - - - - - - - diff --git a/src/views/iot/rule/scene/form/inputs/CronInput.vue b/src/views/iot/rule/scene/form/inputs/CronInput.vue deleted file mode 100644 index 42591878..00000000 --- a/src/views/iot/rule/scene/form/inputs/CronInput.vue +++ /dev/null @@ -1,141 +0,0 @@ - - - - - - - diff --git a/src/views/iot/rule/scene/form/inputs/DescriptionInput.vue b/src/views/iot/rule/scene/form/inputs/DescriptionInput.vue deleted file mode 100644 index 6d7db598..00000000 --- a/src/views/iot/rule/scene/form/inputs/DescriptionInput.vue +++ /dev/null @@ -1,178 +0,0 @@ - - - - - - diff --git a/src/views/iot/rule/scene/form/inputs/NameInput.vue b/src/views/iot/rule/scene/form/inputs/NameInput.vue deleted file mode 100644 index 4eba6d38..00000000 --- a/src/views/iot/rule/scene/form/inputs/NameInput.vue +++ /dev/null @@ -1,111 +0,0 @@ - - - - - - diff --git a/src/views/iot/rule/scene/form/inputs/StatusRadio.vue b/src/views/iot/rule/scene/form/inputs/StatusRadio.vue deleted file mode 100644 index d8dcc591..00000000 --- a/src/views/iot/rule/scene/form/inputs/StatusRadio.vue +++ /dev/null @@ -1,158 +0,0 @@ - - - - - - diff --git a/src/views/iot/rule/scene/form/sections/BasicInfoSection.vue b/src/views/iot/rule/scene/form/sections/BasicInfoSection.vue index 2bdbbf49..ed3245b1 100644 --- a/src/views/iot/rule/scene/form/sections/BasicInfoSection.vue +++ b/src/views/iot/rule/scene/form/sections/BasicInfoSection.vue @@ -16,23 +16,42 @@
- - + - + - - + + + {{ dict.label }} + + - - +
@@ -40,9 +59,7 @@