From 6265d6d9239104ab51647ceeef6a295c3d37a442 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Fri, 28 Mar 2025 13:54:16 +0800
Subject: [PATCH 01/18] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E3=80=91=E5=9F=BA=E4=BA=8E=20https://github.com/josde?=
 =?UTF-8?q?jong/jsoneditor=20=E4=BA=8C=E6=AC=A1=E5=B0=81=E8=A3=85=20JsonEd?=
 =?UTF-8?q?itor=20=E7=BB=84=E4=BB=B6=EF=BC=8C=E6=8F=90=E4=BE=9B=20JSON=20?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=99=A8=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                 |   3 +-
 pnpm-lock.yaml                               |  59 +++++-----
 src/components/JsonEditor/index.ts           |   3 +
 src/components/JsonEditor/src/JsonEditor.vue | 109 +++++++++++++++++++
 src/components/JsonEditor/types/index.ts     |  80 ++++++++++++++
 5 files changed, 225 insertions(+), 29 deletions(-)
 create mode 100644 src/components/JsonEditor/index.ts
 create mode 100644 src/components/JsonEditor/src/JsonEditor.vue
 create mode 100644 src/components/JsonEditor/types/index.ts

diff --git a/package.json b/package.json
index 7673d65dc..0bb3f9117 100644
--- a/package.json
+++ b/package.json
@@ -51,6 +51,7 @@
     "fast-xml-parser": "^4.3.2",
     "highlight.js": "^11.9.0",
     "jsencrypt": "^3.3.2",
+    "jsoneditor": "^10.1.3",
     "lodash-es": "^4.17.21",
     "markdown-it": "^14.1.0",
     "markmap-common": "^0.16.0",
@@ -67,7 +68,6 @@
     "sortablejs": "^1.15.3",
     "steady-xml": "^0.1.0",
     "url": "^0.11.3",
-    "v3-jsoneditor": "^0.0.6",
     "video.js": "^7.21.5",
     "vue": "3.5.12",
     "vue-dompurify-html": "^4.1.4",
@@ -85,6 +85,7 @@
     "@iconify/json": "^2.2.187",
     "@intlify/unplugin-vue-i18n": "^2.0.0",
     "@purge-icons/generated": "^0.9.0",
+    "@types/jsoneditor": "^9.9.5",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^20.11.21",
     "@types/nprogress": "^0.2.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c57c02f52..c7ace92dc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -86,6 +86,9 @@ importers:
       jsencrypt:
         specifier: ^3.3.2
         version: 3.3.2
+      jsoneditor:
+        specifier: ^10.1.3
+        version: 10.1.3
       lodash-es:
         specifier: ^4.17.21
         version: 4.17.21
@@ -134,9 +137,6 @@ importers:
       url:
         specifier: ^0.11.3
         version: 0.11.4
-      v3-jsoneditor:
-        specifier: ^0.0.6
-        version: 0.0.6
       video.js:
         specifier: ^7.21.5
         version: 7.21.6
@@ -183,6 +183,9 @@ importers:
       '@purge-icons/generated':
         specifier: ^0.9.0
         version: 0.9.0
+      '@types/jsoneditor':
+        specifier: ^9.9.5
+        version: 9.9.5
       '@types/lodash-es':
         specifier: ^4.17.12
         version: 4.17.12
@@ -1693,6 +1696,9 @@ packages:
     resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
     engines: {node: '>=10.13.0'}
 
+  '@types/ace@0.0.52':
+    resolution: {integrity: sha512-YPF9S7fzpuyrxru+sG/rrTpZkC6gpHBPF14W3x70kqVOD+ks6jkYLapk4yceh36xej7K4HYxcyz9ZDQ2lTvwgQ==}
+
   '@types/conventional-commits-parser@5.0.1':
     resolution: {integrity: sha512-7uz5EHdzz2TqoMfV7ee61Egf5y6NkcO4FB/1iCCQnbeiI1F3xzv3vK5dBCXUCLQgGYS+mUeigK1iKQzvED+QnQ==}
 
@@ -1804,6 +1810,9 @@ packages:
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
+  '@types/jsoneditor@9.9.5':
+    resolution: {integrity: sha512-+Wex7QCirPcG90WA8/CmvDO21KUjz63/G7Yk52Yx/NhWHw5DyeET/L+wjZHAeNeNCCnMOTEtVX5gc3F4UXwXMQ==}
+
   '@types/lodash-es@4.17.12':
     resolution: {integrity: sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==}
 
@@ -2336,8 +2345,8 @@ packages:
     resolution: {integrity: sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==}
     hasBin: true
 
-  ace-builds@1.39.0:
-    resolution: {integrity: sha512-MqoZojv4gpc5QyTMor/dS6kmruDV9db9LVZbCiT4qYz6WsDiv4qyG5f7ZPc+wjUl6oLMqgCAsBjo1whdSVyMlQ==}
+  ace-builds@1.39.1:
+    resolution: {integrity: sha512-HcJbBzx8qY66t9gZo/sQu7pi0wO/CFLdYn1LxQO1WQTfIkMfyc7LRnBpsp/oNCSSU/LL83jXHN1fqyOTuIhUjg==}
 
   acorn-jsx@5.3.2:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
@@ -4069,8 +4078,8 @@ packages:
     resolution: {integrity: sha512-WYDyuc/uFcGp6YtM2H0uKmUwieOuzeE/5YocFJLnLfclZ4inf3mRn8ZVy1s7Hxji7Jxm6Ss8gqpexD/GlKoGgg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
-  jsoneditor@9.10.5:
-    resolution: {integrity: sha512-fVZ0NMt+zm4rqTKBv2x7zPdLeaRyKo1EjJkaR1QjK4gEM1rMwICILYSW1OPxSc1qqyAoDaA/eeNrluKoxOocCA==}
+  jsoneditor@10.1.3:
+    resolution: {integrity: sha512-zvbkiduFR19vLMJN1sSvBs9baGDdQRJGmKy6+/vQzDFhx//oEd6WAkrmmTeU4NNk9MAo+ZirENuwbtJXvS9M5g==}
 
   jsonfile@6.1.0:
     resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
@@ -4079,8 +4088,8 @@ packages:
     resolution: {integrity: sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==}
     engines: {'0': node >= 0.2.0}
 
-  jsonrepair@3.1.0:
-    resolution: {integrity: sha512-idqReg23J0PVRAADmZMc5xQM3xeOX5bTB6OTyMnzq33IXJXmn9iJuWIEvGmrN80rQf4d7uLTMEDwpzujNcI0Rg==}
+  jsonrepair@3.12.0:
+    resolution: {integrity: sha512-SWfjz8SuQ0wZjwsxtSJ3Zy8vvLg6aO/kxcp9TWNPGwJKgTZVfhNEQBMk/vPOpYCDFWRxD6QWuI6IHR1t615f0w==}
     hasBin: true
 
   katex@0.16.11:
@@ -4402,9 +4411,6 @@ packages:
   mlly@1.7.3:
     resolution: {integrity: sha512-xUsx5n/mN0uQf4V548PKQ+YShA4/IW0KI1dZhrNrPCLG+xizETbHTkOa1f8/xut9JRPp8kQuMnz0oqwkTiLo/A==}
 
-  mobius1-selectr@2.4.13:
-    resolution: {integrity: sha512-Mk9qDrvU44UUL0EBhbAA1phfQZ7aMZPjwtL7wkpiBzGh8dETGqfsh50mWoX9EkjDlkONlErWXArHCKfoxVg0Bw==}
-
   moddle-xml@10.1.0:
     resolution: {integrity: sha512-erWckwLt+dYskewKXJso9u+aAZ5172lOiYxSOqKCPTy7L/xmqH1PoeoA7eVC7oJTt3PqF5TkZzUmbjGH6soQBg==}
 
@@ -5561,9 +5567,6 @@ packages:
     resolution: {integrity: sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==}
     hasBin: true
 
-  v3-jsoneditor@0.0.6:
-    resolution: {integrity: sha512-9G0sXWXUn67SBkn46ycWfwPwjuJu/lcsQaNzMtXAR2/95hMV21WfcRNsqJ+vVVrSHQehohB/9fVLwYEXz0u/KA==}
-
   vanilla-picker@2.12.3:
     resolution: {integrity: sha512-qVkT1E7yMbUsB2mmJNFmaXMWE2hF8ffqzMMwe9zdAikd8u2VfnsVY2HQcOUi2F38bgbxzlJBEdS1UUhOXdF9GQ==}
 
@@ -7334,6 +7337,8 @@ snapshots:
 
   '@trysound/sax@0.2.0': {}
 
+  '@types/ace@0.0.52': {}
+
   '@types/conventional-commits-parser@5.0.1':
     dependencies:
       '@types/node': 20.17.9
@@ -7468,6 +7473,11 @@ snapshots:
 
   '@types/json-schema@7.0.15': {}
 
+  '@types/jsoneditor@9.9.5':
+    dependencies:
+      '@types/ace': 0.0.52
+      ajv: 6.12.6
+
   '@types/lodash-es@4.17.12':
     dependencies:
       '@types/lodash': 4.17.13
@@ -7830,7 +7840,7 @@ snapshots:
   '@unocss/rule-utils@0.58.9':
     dependencies:
       '@unocss/core': 0.58.9
-      magic-string: 0.30.14
+      magic-string: 0.30.17
 
   '@unocss/rule-utils@66.1.0-beta.5':
     dependencies:
@@ -8272,7 +8282,7 @@ snapshots:
       jsonparse: 1.3.1
       through: 2.3.8
 
-  ace-builds@1.39.0: {}
+  ace-builds@1.39.1: {}
 
   acorn-jsx@5.3.2(acorn@8.14.0):
     dependencies:
@@ -10179,15 +10189,14 @@ snapshots:
       espree: 9.6.1
       semver: 7.6.3
 
-  jsoneditor@9.10.5:
+  jsoneditor@10.1.3:
     dependencies:
-      ace-builds: 1.39.0
+      ace-builds: 1.39.1
       ajv: 6.12.6
       javascript-natural-sort: 0.7.1
       jmespath: 0.16.0
       json-source-map: 0.6.1
-      jsonrepair: 3.1.0
-      mobius1-selectr: 2.4.13
+      jsonrepair: 3.12.0
       picomodal: 3.0.0
       vanilla-picker: 2.12.3
 
@@ -10199,7 +10208,7 @@ snapshots:
 
   jsonparse@1.3.1: {}
 
-  jsonrepair@3.1.0: {}
+  jsonrepair@3.12.0: {}
 
   katex@0.16.11:
     dependencies:
@@ -10550,8 +10559,6 @@ snapshots:
       pkg-types: 1.2.1
       ufo: 1.5.4
 
-  mobius1-selectr@2.4.13: {}
-
   moddle-xml@10.1.0:
     dependencies:
       min-dash: 4.2.2
@@ -11811,10 +11818,6 @@ snapshots:
 
   uuid@10.0.0: {}
 
-  v3-jsoneditor@0.0.6:
-    dependencies:
-      jsoneditor: 9.10.5
-
   vanilla-picker@2.12.3:
     dependencies:
       '@sphinxxxx/color-conversion': 2.2.2
diff --git a/src/components/JsonEditor/index.ts b/src/components/JsonEditor/index.ts
new file mode 100644
index 000000000..037b4496f
--- /dev/null
+++ b/src/components/JsonEditor/index.ts
@@ -0,0 +1,3 @@
+import JsonEditor from './src/JsonEditor.vue'
+
+export { JsonEditor }
diff --git a/src/components/JsonEditor/src/JsonEditor.vue b/src/components/JsonEditor/src/JsonEditor.vue
new file mode 100644
index 000000000..8438f7ade
--- /dev/null
+++ b/src/components/JsonEditor/src/JsonEditor.vue
@@ -0,0 +1,109 @@
+<template>
+  <div ref="jsonEditorContainer" class="json-editor" :style="{ height }"></div>
+</template>
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import JSONEditor, { JSONEditorMode, JSONEditorOptions } from 'jsoneditor'
+import 'jsoneditor/dist/jsoneditor.min.css'
+import { JsonEditorEmits, JsonEditorExpose, JsonEditorProps } from '../types'
+
+/** 基于 https://github.com/josdejong/jsoneditor 二次封装组件，提供 JSON 编辑器功能。 */
+defineOptions({ name: 'JsonEditor' })
+
+const props = withDefaults(defineProps<JsonEditorProps>(), {
+  mode: 'tree' as JSONEditorMode,
+  height: '400px',
+  showModeSelection: false,
+  showNavigationBar: false,
+  showStatusBar: false,
+  showMainMenuBar: true
+})
+
+const emits = defineEmits<JsonEditorEmits>()
+const jsonObj = useVModel(props, 'modelValue', emits) as Ref<any>
+const jsonEditorContainer = ref<HTMLElement | null>(null)
+let jsonEditor: JSONEditor | null = null
+
+// 设置默认值
+const height = props.height
+
+// 初始化JSONEditor
+const initJsonEditor = () => {
+  if (!jsonEditorContainer.value) return
+
+  // 合并默认配置和用户自定义配置
+  const options: JSONEditorOptions = {
+    mode: props.mode,
+    modes: props.showModeSelection
+      ? (['tree', 'code', 'form', 'text', 'view', 'preview'] as JSONEditorMode[])
+      : undefined,
+    navigationBar: props.showNavigationBar,
+    statusBar: props.showStatusBar,
+    mainMenuBar: props.showMainMenuBar,
+    onChangeJSON: (json: any) => {
+      jsonObj.value = json
+      emits('change', json)
+    },
+    onValidationError: (errors: any) => {
+      emits('error', errors)
+    },
+    ...props.options
+  } as JSONEditorOptions
+
+  // 创建JSONEditor实例
+  jsonEditor = new JSONEditor(jsonEditorContainer.value, options)
+
+  // 设置初始值
+  if (jsonObj.value) {
+    jsonEditor.set(jsonObj.value)
+  }
+}
+
+// 监听数据变化
+watch(
+  () => jsonObj.value,
+  (newValue) => {
+    if (!jsonEditor) return
+
+    try {
+      // 防止无限循环更新
+      const currentJson = jsonEditor.get()
+      if (JSON.stringify(currentJson) !== JSON.stringify(newValue)) {
+        jsonEditor.update(newValue)
+      }
+    } catch (error) {
+      console.error('JSON更新失败:', error)
+    }
+  },
+  { deep: true }
+)
+
+// 生命周期钩子
+onMounted(() => {
+  initJsonEditor()
+})
+
+onBeforeUnmount(() => {
+  if (jsonEditor) {
+    jsonEditor.destroy()
+    jsonEditor = null
+  }
+})
+
+// 暴露方法
+defineExpose<JsonEditorExpose>({
+  // 获取编辑器实例，以便可以调用更多JSONEditor的原生方法
+  getEditor: () => jsonEditor
+})
+</script>
+
+<style lang="scss" scoped>
+/* 隐藏 Ace 编辑器的 powered by ace 标记 */
+:deep(.jsoneditor-menu) {
+  /* 隐藏 powered by ace 标记 */
+  .jsoneditor-poweredBy {
+    display: none !important;
+  }
+}
+</style>
diff --git a/src/components/JsonEditor/types/index.ts b/src/components/JsonEditor/types/index.ts
new file mode 100644
index 000000000..b7dadd77d
--- /dev/null
+++ b/src/components/JsonEditor/types/index.ts
@@ -0,0 +1,80 @@
+import { JSONEditorOptions, JSONEditorMode } from 'jsoneditor'
+
+export interface JsonEditorProps {
+  /**
+   * JSON数据，支持双向绑定
+   */
+  modelValue: any
+  
+  /**
+   * 编辑器模式
+   * @default 'tree'
+   */
+  mode?: JSONEditorMode
+  
+  /**
+   * 编辑器高度
+   * @default '400px'
+   */
+  height?: string
+  
+  /**
+   * 是否显示模式选择下拉菜单
+   * @default false
+   */
+  showModeSelection?: boolean
+  
+  /**
+   * 是否显示导航栏
+   * @default false
+   */
+  showNavigationBar?: boolean
+  
+  /**
+   * 是否显示状态栏
+   * @default true
+   */
+  showStatusBar?: boolean
+  
+  /**
+   * 是否显示主菜单栏
+   * @default true
+   */
+  showMainMenuBar?: boolean
+  
+  /**
+   * JSONEditor配置选项
+   * @see https://github.com/josdejong/jsoneditor/blob/develop/docs/api.md
+   */
+  options?: Partial<JSONEditorOptions>
+}
+
+/**
+ * JsonEditor组件触发的事件
+ */
+export interface JsonEditorEmits {
+  /**
+   * 数据更新时触发
+   */
+  (e: 'update:modelValue', value: any): void
+  
+  /**
+   * 数据变化时触发
+   */
+  (e: 'change', value: any): void
+  
+  /**
+   * 验证错误时触发
+   */
+  (e: 'error', errors: any): void
+}
+
+/**
+ * JsonEditor组件暴露的方法
+ */
+export interface JsonEditorExpose {
+  /**
+   * 获取原始的JSONEditor实例
+   */
+  getEditor: () => any
+} 
-- 
Gitee


From 314a1c2254b7d1e1770ec9b97c1412c63306499a Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Fri, 28 Mar 2025 14:03:02 +0800
Subject: [PATCH 02/18] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=E3=80=91=E4=BF=AE=E5=A4=8D=20JsonEditor=20mode=20?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2=E4=B8=8D=E7=94=9F=E6=95=88=E7=9A=84=20bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/JsonEditor/src/JsonEditor.vue | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/components/JsonEditor/src/JsonEditor.vue b/src/components/JsonEditor/src/JsonEditor.vue
index 8438f7ade..19077aeb1 100644
--- a/src/components/JsonEditor/src/JsonEditor.vue
+++ b/src/components/JsonEditor/src/JsonEditor.vue
@@ -79,6 +79,19 @@ watch(
   { deep: true }
 )
 
+// 监听模式变化
+watch(
+  () => props.mode,
+  (newMode) => {
+    if (!jsonEditor) return
+    try {
+      jsonEditor.setMode(newMode)
+    } catch (error) {
+      console.error('切换模式失败:', error)
+    }
+  }
+)
+
 // 生命周期钩子
 onMounted(() => {
   initJsonEditor()
-- 
Gitee


From 73d83e8a88878d0d34c3b645dcf54b3e6f0e54af Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Fri, 28 Mar 2025 14:03:43 +0800
Subject: [PATCH 03/18] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=E3=80=91IoT:=20ThingModelTSL?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/iot/thingmodel/ThingModelTSL.vue | 29 ++++++++++++----------
 src/views/iot/thingmodel/index.vue         |  1 +
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/views/iot/thingmodel/ThingModelTSL.vue b/src/views/iot/thingmodel/ThingModelTSL.vue
index 19a840c53..d1de63f27 100644
--- a/src/views/iot/thingmodel/ThingModelTSL.vue
+++ b/src/views/iot/thingmodel/ThingModelTSL.vue
@@ -1,8 +1,18 @@
 <template>
   <Dialog v-model="dialogVisible" :title="dialogTitle">
-    <el-scrollbar height="600px">
-      <pre><code v-dompurify-html="highlightedCode()" class="hljs"></code></pre>
-    </el-scrollbar>
+    <div class="h-600px">
+      <JsonEditor
+        v-model="thingModelTSL"
+        :mode="viewMode === 'editor' ? 'code' : 'view'"
+        height="100%"
+      />
+    </div>
+    <template #footer>
+      <el-radio-group v-model="viewMode" size="small">
+        <el-radio-button label="code">代码视图</el-radio-button>
+        <el-radio-button label="editor">编辑器视图</el-radio-button>
+      </el-radio-group>
+    </template>
   </Dialog>
 </template>
 
@@ -19,6 +29,7 @@ defineOptions({ name: 'ThingModelTSL' })
 const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('物模型 TSL') // 弹窗的标题
 const product = inject<Ref<ProductVO>>(IOT_PROVIDE_KEY.PRODUCT) // 注入产品信息
+const viewMode = ref('code') // 查看模式：code-代码视图，editor-编辑器视图
 
 /** 打开弹窗 */
 const open = () => {
@@ -27,17 +38,9 @@ const open = () => {
 defineExpose({ open })
 
 /** 获取 TSL */
-const thingModelTSL = ref('')
+const thingModelTSL = ref({})
 const getTsl = async () => {
-  const res = await ThingModelApi.getThingModelTSLByProductId(product?.value?.id || 0)
-  thingModelTSL.value = JSON.stringify(res, null, 2)
-}
-
-/** 代码高亮 */
-const highlightedCode = () => {
-  // TODO @puhui999：可以考虑 highlight 的告警解决下；另外，可以考虑配置设置里面，有个 json editor 预览
-  const result = hljs.highlight('json', thingModelTSL.value, true)
-  return result.value || '&nbsp;'
+  thingModelTSL.value = await ThingModelApi.getThingModelTSLByProductId(product?.value?.id || 0)
 }
 
 /** 初始化 **/
diff --git a/src/views/iot/thingmodel/index.vue b/src/views/iot/thingmodel/index.vue
index 74aec6fec..1766f7396 100644
--- a/src/views/iot/thingmodel/index.vue
+++ b/src/views/iot/thingmodel/index.vue
@@ -108,6 +108,7 @@
 import { ThingModelApi, ThingModelData } from '@/api/iot/thingmodel'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import ThingModelForm from './ThingModelForm.vue'
+import ThingModelTSL from './ThingModelTSL.vue'
 import { ProductVO } from '@/api/iot/product/product'
 import { IOT_PROVIDE_KEY } from '@/views/iot/utils/constants'
 import { getDataTypeOptionsLabel } from './config'
-- 
Gitee


From bff2327ebacaef2c2b302378ad8b7a2be2bbbf1a Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Fri, 28 Mar 2025 14:05:24 +0800
Subject: [PATCH 04/18] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=E3=80=91IoT:=20ThingModelTSL?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/iot/thingmodel/ThingModelTSL.vue | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/views/iot/thingmodel/ThingModelTSL.vue b/src/views/iot/thingmodel/ThingModelTSL.vue
index d1de63f27..210dbd4b3 100644
--- a/src/views/iot/thingmodel/ThingModelTSL.vue
+++ b/src/views/iot/thingmodel/ThingModelTSL.vue
@@ -1,12 +1,10 @@
 <template>
   <Dialog v-model="dialogVisible" :title="dialogTitle">
-    <div class="h-600px">
-      <JsonEditor
-        v-model="thingModelTSL"
-        :mode="viewMode === 'editor' ? 'code' : 'view'"
-        height="100%"
-      />
-    </div>
+    <JsonEditor
+      v-model="thingModelTSL"
+      :mode="viewMode === 'editor' ? 'code' : 'view'"
+      height="600px"
+    />
     <template #footer>
       <el-radio-group v-model="viewMode" size="small">
         <el-radio-button label="code">代码视图</el-radio-button>
-- 
Gitee


From fe905721bd955b1dd6ed92b3a3ead2ecbbf7b842 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Fri, 28 Mar 2025 15:05:13 +0800
Subject: [PATCH 05/18] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=E3=80=91=E4=BF=AE=E5=A4=8D=20jsonEditor=20=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E5=9B=9E=E6=98=BE=E4=B8=8D=E7=94=9F=E6=95=88=E7=9A=84?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/JsonEditor/src/JsonEditor.vue  |  6 +--
 .../device/detail/DeviceDetailConfig.vue      | 37 ++++++-------------
 2 files changed, 14 insertions(+), 29 deletions(-)

diff --git a/src/components/JsonEditor/src/JsonEditor.vue b/src/components/JsonEditor/src/JsonEditor.vue
index 19077aeb1..ef14a1064 100644
--- a/src/components/JsonEditor/src/JsonEditor.vue
+++ b/src/components/JsonEditor/src/JsonEditor.vue
@@ -41,9 +41,9 @@ const initJsonEditor = () => {
     navigationBar: props.showNavigationBar,
     statusBar: props.showStatusBar,
     mainMenuBar: props.showMainMenuBar,
-    onChangeJSON: (json: any) => {
-      jsonObj.value = json
-      emits('change', json)
+    onChange: () => {
+      jsonObj.value = jsonEditor?.get()
+      emits('change', jsonEditor?.get())
     },
     onValidationError: (errors: any) => {
       emits('error', errors)
diff --git a/src/views/iot/device/device/detail/DeviceDetailConfig.vue b/src/views/iot/device/device/detail/DeviceDetailConfig.vue
index 13906b570..431a1150e 100644
--- a/src/views/iot/device/device/detail/DeviceDetailConfig.vue
+++ b/src/views/iot/device/device/detail/DeviceDetailConfig.vue
@@ -8,24 +8,10 @@
       class="my-4"
       description="如需编辑文件，请点击下方编辑按钮"
     />
-
-    <!-- JSON 编辑器：读模式 -->
-    <Vue3Jsoneditor
-      v-if="isEditing"
-      v-model="config"
-      :options="editorOptions"
-      height="500px"
-      currentMode="code"
-      @error="onError"
-    />
-    <!-- JSON 编辑器：写模式 -->
-    <Vue3Jsoneditor
-      v-else
+    <JsonEditor
       v-model="config"
-      :options="editorOptions"
-      height="500px"
-      currentMode="view"
-      v-loading.fullscreen.lock="loading"
+      :mode="isEditing ? 'code' : 'view'"
+      height="600px"
       @error="onError"
     />
     <div class="mt-5 text-center">
@@ -40,9 +26,11 @@
 </template>
 
 <script lang="ts" setup>
-import Vue3Jsoneditor from 'v3-jsoneditor/src/Vue3Jsoneditor.vue'
 import { DeviceApi, DeviceVO } from '@/api/iot/device/device'
 import { jsonParse } from '@/utils'
+import { isEmpty } from '@/utils/is'
+
+defineOptions({ name: 'DeviceDetailConfig' })
 
 const props = defineProps<{
   device: DeviceVO
@@ -63,12 +51,6 @@ watchEffect(() => {
 })
 
 const isEditing = ref(false) // 编辑状态
-const editorOptions = computed(() => ({
-  mainMenuBar: false,
-  navigationBar: false,
-  statusBar: false
-})) // JSON 编辑器的选项
-
 /** 启用编辑模式的函数 */
 const enableEdit = () => {
   isEditing.value = true
@@ -112,8 +94,11 @@ const updateDeviceConfig = async () => {
 }
 
 /** 处理 JSON 编辑器错误的函数 */
-const onError = (e: any) => {
-  console.log('onError', e)
+const onError = (errors: any) => {
+  if (isEmpty(errors)) {
+    hasJsonError.value = false
+    return
+  }
   hasJsonError.value = true
 }
 </script>
-- 
Gitee


From eadf26dc3b25e52b6d7d874bf028871eaccd8fba Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Fri, 28 Mar 2025 15:54:12 +0800
Subject: [PATCH 06/18] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=E3=80=91IoT:=20=E5=9C=BA=E6=99=AF=E8=81=94=E5=8A=A8?=
 =?UTF-8?q?=E6=89=A7=E8=A1=8C=E5=99=A8=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/dict.ts                             |   3 +-
 src/views/iot/rule/scene/RuleSceneForm.vue    |  43 +++-
 .../components/action/ActionExecutor.vue      | 180 +++++++++++++
 .../scene/components/action/AlertAction.vue   |  83 ++++++
 .../components/action/DataBridgeAction.vue    |  51 ++++
 .../components/action/DeviceActionControl.vue |  95 +++++++
 .../components/action/DeviceControlAction.vue | 162 ++++++++++++
 .../components/action/PropertyValueInput.vue  | 238 ++++++++++++++++++
 .../{ => listener}/ConditionSelector.vue      |   0
 .../{ => listener}/DeviceListener.vue         |   0
 .../DeviceListenerCondition.vue               |   0
 11 files changed, 847 insertions(+), 8 deletions(-)
 create mode 100644 src/views/iot/rule/scene/components/action/ActionExecutor.vue
 create mode 100644 src/views/iot/rule/scene/components/action/AlertAction.vue
 create mode 100644 src/views/iot/rule/scene/components/action/DataBridgeAction.vue
 create mode 100644 src/views/iot/rule/scene/components/action/DeviceActionControl.vue
 create mode 100644 src/views/iot/rule/scene/components/action/DeviceControlAction.vue
 create mode 100644 src/views/iot/rule/scene/components/action/PropertyValueInput.vue
 rename src/views/iot/rule/scene/components/{ => listener}/ConditionSelector.vue (100%)
 rename src/views/iot/rule/scene/components/{ => listener}/DeviceListener.vue (100%)
 rename src/views/iot/rule/scene/components/{ => listener}/DeviceListenerCondition.vue (100%)

diff --git a/src/utils/dict.ts b/src/utils/dict.ts
index e6c1babd0..653160bfe 100644
--- a/src/utils/dict.ts
+++ b/src/utils/dict.ts
@@ -247,5 +247,6 @@ export enum DICT_TYPE {
   IOT_DATA_BRIDGE_DIRECTION_ENUM = 'iot_data_bridge_direction_enum', // 桥梁方向
   IOT_DATA_BRIDGE_TYPE_ENUM = 'iot_data_bridge_type_enum', // 桥梁类型
   IOT_DEVICE_MESSAGE_TYPE_ENUM = 'iot_device_message_type_enum', // IoT 设备消息类型枚举
-  IOT_RULE_SCENE_TRIGGER_TYPE_ENUM = 'iot_rule_scene_trigger_type_enum' // IoT 场景流转的触发类型枚举
+  IOT_RULE_SCENE_TRIGGER_TYPE_ENUM = 'iot_rule_scene_trigger_type_enum', // IoT 场景流转的触发类型枚举
+  IOT_RULE_SCENE_ACTION_TYPE_ENUM = 'iot_rule_scene_action_type_enum' // IoT 规则场景的触发类型枚举
 }
diff --git a/src/views/iot/rule/scene/RuleSceneForm.vue b/src/views/iot/rule/scene/RuleSceneForm.vue
index 034c52549..5104a6693 100644
--- a/src/views/iot/rule/scene/RuleSceneForm.vue
+++ b/src/views/iot/rule/scene/RuleSceneForm.vue
@@ -49,10 +49,21 @@
           </el-button>
         </el-col>
         <el-col :span="24">
-          <el-divider content-position="left">执行动作配置</el-divider>
-          <el-form-item label="执行器数组" prop="actionConfigs">
-            <!--            <el-input v-model="formData.actions" placeholder="请输入执行器数组" />-->
-          </el-form-item>
+          <el-divider content-position="left">执行器配置</el-divider>
+          <action-executor
+            v-for="(action, index) in formData.actions"
+            :key="index"
+            :model-value="action"
+            @update:model-value="(val) => (formData.actions[index] = val)"
+            class="mb-10px"
+          >
+            <el-button type="danger" round size="small" @click="removeAction(index)">
+              <Icon icon="ep:delete" />
+            </el-button>
+          </action-executor>
+          <el-button class="ml-10px!" type="primary" size="small" @click="addAction">
+            添加执行器
+          </el-button>
         </el-col>
       </el-row>
     </el-form>
@@ -65,15 +76,18 @@
 <script setup lang="ts">
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { RuleSceneApi } from '@/api/iot/rule/scene'
-import DeviceListener from './components/DeviceListener.vue'
+import DeviceListener from './components/listener/DeviceListener.vue'
 import { CommonStatusEnum } from '@/utils/constants'
 import {
+  ActionConfig,
   IotDeviceMessageIdentifierEnum,
   IotDeviceMessageTypeEnum,
   IotRuleScene,
+  IotRuleSceneActionTypeEnum,
   IotRuleSceneTriggerTypeEnum,
   TriggerConfig
 } from '@/api/iot/rule/scene/scene.types'
+import ActionExecutor from './components/action/ActionExecutor.vue'
 
 /** IoT 场景联动表单 */
 defineOptions({ name: 'IotRuleSceneForm' })
@@ -87,7 +101,8 @@ const formLoading = ref(false) // 表单的加载中：1）修改时的数据加
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const formData = ref<IotRuleScene>({
   status: CommonStatusEnum.ENABLE,
-  triggers: [] as TriggerConfig[]
+  triggers: [] as TriggerConfig[],
+  actions: [] as ActionConfig[]
 } as IotRuleScene)
 const formRules = reactive({
   name: [{ required: true, message: '场景名称不能为空', trigger: 'blur' }],
@@ -119,6 +134,19 @@ const removeTrigger = (index: number) => {
   formData.value.triggers = newTriggers
 }
 
+/** 添加执行器 */
+const addAction = () => {
+  formData.value.actions.push({
+    type: IotRuleSceneActionTypeEnum.DEVICE_CONTROL
+  } as ActionConfig)
+}
+/** 移除执行器 */
+const removeAction = (index: number) => {
+  const newActions = [...formData.value.actions]
+  newActions.splice(index, 1)
+  formData.value.actions = newActions
+}
+
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
   dialogVisible.value = true
@@ -165,7 +193,8 @@ const submitForm = async () => {
 const resetForm = () => {
   formData.value = {
     status: CommonStatusEnum.ENABLE,
-    triggers: [] as TriggerConfig[]
+    triggers: [] as TriggerConfig[],
+    actions: [] as ActionConfig[]
   } as IotRuleScene
   formRef.value?.resetFields()
 }
diff --git a/src/views/iot/rule/scene/components/action/ActionExecutor.vue b/src/views/iot/rule/scene/components/action/ActionExecutor.vue
new file mode 100644
index 000000000..fdcdcc322
--- /dev/null
+++ b/src/views/iot/rule/scene/components/action/ActionExecutor.vue
@@ -0,0 +1,180 @@
+<template>
+  <div class="m-10px">
+    <div class="relative bg-[#eff3f7] h-50px flex items-center px-10px">
+      <div class="flex items-center mr-60px">
+        <span class="mr-10px">执行动作</span>
+        <el-select
+          v-model="actionConfig.type"
+          class="!w-240px"
+          clearable
+          placeholder="请选择执行类型"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.IOT_RULE_SCENE_ACTION_TYPE_ENUM)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </div>
+      <div
+        v-if="actionConfig.type === IotRuleSceneActionTypeEnum.DEVICE_CONTROL"
+        class="flex items-center mr-60px"
+      >
+        <span class="mr-10px">产品</span>
+        <el-button type="primary" @click="productTableSelectRef?.open()" size="small" plain>
+          {{ product ? product.name : '选择产品' }}
+        </el-button>
+      </div>
+      <div
+        v-if="actionConfig.type === IotRuleSceneActionTypeEnum.DEVICE_CONTROL"
+        class="flex items-center mr-60px"
+      >
+        <span class="mr-10px">设备</span>
+        <el-button type="primary" @click="openDeviceSelect" size="small" plain>
+          {{ isEmpty(deviceList) ? '选择设备' : actionConfig.deviceControl?.deviceNames.join(',') }}
+        </el-button>
+      </div>
+      <!-- 删除执行器 -->
+      <div class="absolute top-auto right-16px bottom-auto">
+        <el-tooltip content="删除执行器" placement="top">
+          <slot></slot>
+        </el-tooltip>
+      </div>
+    </div>
+
+    <!-- 设备控制执行器 -->
+    <DeviceControlAction
+      v-if="actionConfig.type === IotRuleSceneActionTypeEnum.DEVICE_CONTROL"
+      :model-value="actionConfig.deviceControl"
+      @update:model-value="(val) => (actionConfig.deviceControl = val)"
+    />
+
+    <!-- 告警执行器 -->
+    <AlertAction
+      v-else-if="actionConfig.type === IotRuleSceneActionTypeEnum.ALERT"
+      :model-value="actionConfig.alert"
+      @update:model-value="(val) => (actionConfig.alert = val)"
+    />
+
+    <!-- 数据桥接执行器 -->
+    <DataBridgeAction
+      v-else-if="actionConfig.type === IotRuleSceneActionTypeEnum.DATA_BRIDGE"
+      :model-value="actionConfig.dataBridgeId"
+      @update:model-value="(val) => (actionConfig.dataBridgeId = val)"
+    />
+  </div>
+
+  <!-- 产品、设备的选择 -->
+  <ProductTableSelect ref="productTableSelectRef" @success="handleProductSelect" />
+  <DeviceTableSelect
+    ref="deviceTableSelectRef"
+    multiple
+    :product-id="product?.id"
+    @success="handleDeviceSelect"
+  />
+</template>
+
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import { isEmpty } from '@/utils/is'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import ProductTableSelect from '@/views/iot/product/product/components/ProductTableSelect.vue'
+import DeviceTableSelect from '@/views/iot/device/device/components/DeviceTableSelect.vue'
+import DeviceControlAction from './DeviceControlAction.vue'
+import AlertAction from './AlertAction.vue'
+import DataBridgeAction from './DataBridgeAction.vue'
+import { ProductVO } from '@/api/iot/product/product'
+import { DeviceVO } from '@/api/iot/device/device'
+import { ThingModelApi } from '@/api/iot/thingmodel'
+import {
+  ActionAlert,
+  ActionConfig,
+  ActionDeviceControl,
+  IotRuleSceneActionTypeEnum
+} from '@/api/iot/rule/scene/scene.types'
+
+/** 场景联动之执行器组件 */
+defineOptions({ name: 'ActionExecutor' })
+
+const props = defineProps<{ modelValue: any }>()
+const emits = defineEmits(['update:modelValue'])
+const actionConfig = useVModel(props, 'modelValue', emits) as Ref<ActionConfig>
+
+const message = useMessage()
+
+// 初始化执行器结构
+const initActionConfig = () => {
+  if (!actionConfig.value) {
+    actionConfig.value = { type: IotRuleSceneActionTypeEnum.DEVICE_CONTROL } as ActionConfig
+  }
+
+  // 设备控制执行器初始化
+  if (
+    actionConfig.value.type === IotRuleSceneActionTypeEnum.DEVICE_CONTROL &&
+    !actionConfig.value.deviceControl
+  ) {
+    actionConfig.value.deviceControl = {} as ActionDeviceControl
+  }
+
+  // 告警执行器初始化
+  if (actionConfig.value.type === IotRuleSceneActionTypeEnum.ALERT && !actionConfig.value.alert) {
+    actionConfig.value.alert = {} as ActionAlert
+  }
+
+  // 数据桥接执行器初始化
+  if (
+    actionConfig.value.type === IotRuleSceneActionTypeEnum.DATA_BRIDGE &&
+    !actionConfig.value.dataBridgeId
+  ) {
+    actionConfig.value.dataBridgeId = undefined
+  }
+}
+
+// 监听执行类型变化，初始化对应配置
+watch(
+  () => actionConfig.value.type,
+  () => {
+    initActionConfig()
+  },
+  { immediate: true }
+)
+
+// 产品和设备选择
+const productTableSelectRef = ref<InstanceType<typeof ProductTableSelect>>()
+const deviceTableSelectRef = ref<InstanceType<typeof DeviceTableSelect>>()
+const product = ref<ProductVO>()
+const deviceList = ref<DeviceVO[]>([])
+
+/** 处理产品选择 */
+const handleProductSelect = (val: ProductVO) => {
+  product.value = val
+  actionConfig.value.deviceControl!.productKey = val.productKey
+  deviceList.value = []
+  getThingModelTSL()
+}
+
+/** 处理设备选择 */
+const handleDeviceSelect = (val: DeviceVO[]) => {
+  deviceList.value = val
+  actionConfig.value.deviceControl!.deviceNames = val.map((item) => item.deviceName)
+}
+
+/** 打开设备选择器 */
+const openDeviceSelect = () => {
+  if (!product.value) {
+    message.warning('请先选择一个产品')
+    return
+  }
+  deviceTableSelectRef.value?.open()
+}
+
+/** 获取产品物模型 */
+const thingModelTSL = ref<any>()
+const getThingModelTSL = async () => {
+  if (!product.value) {
+    return
+  }
+  thingModelTSL.value = await ThingModelApi.getThingModelTSLByProductId(product.value.id)
+}
+</script>
diff --git a/src/views/iot/rule/scene/components/action/AlertAction.vue b/src/views/iot/rule/scene/components/action/AlertAction.vue
new file mode 100644
index 000000000..5e4d7695d
--- /dev/null
+++ b/src/views/iot/rule/scene/components/action/AlertAction.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="bg-[#dbe5f6] p-10px">
+    <div class="flex items-center mb-10px">
+      <span class="mr-10px w-80px">接收方式</span>
+      <el-select
+        v-model="alertConfig.receiveType"
+        class="!w-160px"
+        clearable
+        placeholder="选择接收方式"
+      >
+        <el-option 
+          v-for="(value, key) in IotAlertConfigReceiveTypeEnum"
+          :key="value"
+          :label="key === 'SMS' ? '短信' : key === 'MAIL' ? '邮箱' : '通知'"
+          :value="value"
+        />
+      </el-select>
+    </div>
+    <div v-if="alertConfig.receiveType === IotAlertConfigReceiveTypeEnum.SMS" class="flex items-center mb-10px">
+      <span class="mr-10px w-80px">手机号码</span>
+      <el-select
+        v-model="alertConfig.phoneNumbers"
+        class="!w-360px"
+        multiple
+        filterable
+        allow-create
+        default-first-option
+        placeholder="请输入手机号码"
+      />
+    </div>
+    <div v-if="alertConfig.receiveType === IotAlertConfigReceiveTypeEnum.MAIL" class="flex items-center mb-10px">
+      <span class="mr-10px w-80px">邮箱地址</span>
+      <el-select
+        v-model="alertConfig.emails"
+        class="!w-360px"
+        multiple
+        filterable
+        allow-create
+        default-first-option
+        placeholder="请输入邮箱地址"
+      />
+    </div>
+    <div class="flex items-center">
+      <span class="mr-10px w-80px align-self-start">通知内容</span>
+      <el-input
+        v-model="alertConfig.content"
+        type="textarea"
+        :rows="4"
+        class="!w-360px"
+        placeholder="请输入通知内容"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import { ActionAlert, IotAlertConfigReceiveTypeEnum } from '@/api/iot/rule/scene/scene.types'
+
+/** 告警执行器组件 */
+defineOptions({ name: 'AlertAction' })
+
+const props = defineProps<{ modelValue: any }>()
+const emits = defineEmits(['update:modelValue'])
+const alertConfig = useVModel(props, 'modelValue', emits) as Ref<ActionAlert>
+
+// 初始化告警执行器结构
+const initAlertConfig = () => {
+  if (!alertConfig.value) {
+    alertConfig.value = {
+      receiveType: IotAlertConfigReceiveTypeEnum.NOTIFY,
+      phoneNumbers: [],
+      emails: [],
+      content: ''
+    } as ActionAlert
+  }
+}
+
+// 初始化
+onMounted(() => {
+  initAlertConfig()
+})
+</script> 
diff --git a/src/views/iot/rule/scene/components/action/DataBridgeAction.vue b/src/views/iot/rule/scene/components/action/DataBridgeAction.vue
new file mode 100644
index 000000000..ffca12fd7
--- /dev/null
+++ b/src/views/iot/rule/scene/components/action/DataBridgeAction.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="bg-[#dbe5f6] p-10px">
+    <div class="flex items-center">
+      <span class="mr-10px w-80px">数据桥接</span>
+      <el-select
+        v-model="dataBridgeId"
+        class="!w-240px"
+        clearable
+        placeholder="选择数据桥接"
+      >
+        <el-option
+          v-for="bridge in dataBridgeList"
+          :key="bridge.id"
+          :label="bridge.name"
+          :value="bridge.id"
+        />
+      </el-select>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+
+/** 数据桥接执行器组件 */
+defineOptions({ name: 'DataBridgeAction' })
+
+const props = defineProps<{ modelValue: any }>()
+const emits = defineEmits(['update:modelValue'])
+const dataBridgeId = useVModel(props, 'modelValue', emits)
+
+// 模拟数据桥接列表，实际项目中应该从API获取
+const dataBridgeList = ref([
+  { id: 1, name: '数据桥接1' },
+  { id: 2, name: '数据桥接2' },
+  { id: 3, name: '数据桥接3' }
+])
+
+// 实际项目中，应该从API获取数据桥接列表
+// const getDataBridgeList = async () => {
+//   try {
+//     dataBridgeList.value = await DataBridgeApi.getSimpleList()
+//   } catch (error) {
+//     console.error('获取数据桥接列表失败', error)
+//   }
+// }
+
+// onMounted(() => {
+//   getDataBridgeList()
+// })
+</script> 
diff --git a/src/views/iot/rule/scene/components/action/DeviceActionControl.vue b/src/views/iot/rule/scene/components/action/DeviceActionControl.vue
new file mode 100644
index 000000000..a1d29cb58
--- /dev/null
+++ b/src/views/iot/rule/scene/components/action/DeviceActionControl.vue
@@ -0,0 +1,95 @@
+<template>
+  <div class="device-action-control">
+    <!-- 属性设置 -->
+    <template v-if="messageType === IotDeviceMessageTypeEnum.PROPERTY">
+      <div class="flex flex-wrap gap-10px">
+        <div v-for="model in thingModels" :key="model.identifier" class="flex items-center mb-10px">
+          <span class="mr-10px inline-block min-w-80px">{{ model.name }}</span>
+          <!-- 根据属性类型渲染不同的输入控件 -->
+          <PropertyValueInput
+            :model-value="propertyData[model.identifier]"
+            :data-specs="model.dataSpecs"
+            @update:model-value="(val) => updatePropertyValue(model.identifier, val)"
+          />
+        </div>
+      </div>
+    </template>
+
+    <!-- 服务调用 -->
+    <template v-else-if="messageType === IotDeviceMessageTypeEnum.SERVICE">
+      <div class="flex flex-wrap gap-10px">
+        <template v-if="thingModels && thingModels.inputParams">
+          <div 
+            v-for="param in thingModels.inputParams" 
+            :key="param.identifier" 
+            class="flex items-center mb-10px"
+          >
+            <span class="mr-10px inline-block min-w-80px">{{ param.name }}</span>
+            <!-- 根据服务输入参数类型渲染不同的输入控件 -->
+            <PropertyValueInput
+              :model-value="serviceData[param.identifier]"
+              :data-specs="param.dataSpecs"
+              @update:model-value="(val) => updateServiceValue(param.identifier, val)"
+            />
+          </div>
+        </template>
+        <div v-else class="text-gray-500">该服务没有输入参数</div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import PropertyValueInput from './PropertyValueInput.vue'
+import { IotDeviceMessageTypeEnum } from '@/api/iot/rule/scene/scene.types'
+
+/** 设备控制执行器的参数配置组件 */
+defineOptions({ name: 'DeviceActionControl' })
+
+const props = defineProps<{
+  modelValue: any
+  thingModels: any
+  messageType: string
+  identifier: string
+}>()
+
+const emits = defineEmits(['update:modelValue'])
+const actionData = useVModel(props, 'modelValue', emits)
+
+// 属性数据
+const propertyData = computed({
+  get: () => {
+    return actionData.value || {}
+  },
+  set: (value) => {
+    actionData.value = value
+  }
+})
+
+// 服务数据
+const serviceData = computed({
+  get: () => {
+    return actionData.value || {}
+  },
+  set: (value) => {
+    actionData.value = value
+  }
+})
+
+// 更新属性值
+const updatePropertyValue = (identifier: string, value: any) => {
+  const newData = { ...propertyData.value }
+  newData[identifier] = value
+  propertyData.value = newData
+}
+
+// 更新服务参数值
+const updateServiceValue = (identifier: string, value: any) => {
+  const newData = { ...serviceData.value }
+  newData[identifier] = value
+  serviceData.value = newData
+}
+</script>
+
+<style scoped lang="scss"></style> 
diff --git a/src/views/iot/rule/scene/components/action/DeviceControlAction.vue b/src/views/iot/rule/scene/components/action/DeviceControlAction.vue
new file mode 100644
index 000000000..52adf7fd3
--- /dev/null
+++ b/src/views/iot/rule/scene/components/action/DeviceControlAction.vue
@@ -0,0 +1,162 @@
+<template>
+  <div class="bg-[#dbe5f6] p-10px">
+    <div class="flex items-center mb-10px">
+      <span class="mr-10px w-60px">产品</span>
+      <el-button type="primary" @click="productTableSelectRef?.open()" size="small" plain>
+        {{ product ? product.name : '选择产品' }}
+      </el-button>
+    </div>
+    <div class="flex items-center mb-10px">
+      <span class="mr-10px w-60px">设备</span>
+      <el-button type="primary" @click="openDeviceSelect" size="small" plain>
+        {{ isEmpty(deviceList) ? '选择设备' : deviceControlConfig.deviceNames.join(',') }}
+      </el-button>
+    </div>
+    <div class="flex items-center mb-10px">
+      <span class="mr-10px w-60px">消息类型</span>
+      <el-select
+        v-model="deviceControlConfig.type"
+        class="!w-160px"
+        clearable
+        placeholder="选择消息类型"
+      >
+        <el-option label="属性" :value="IotDeviceMessageTypeEnum.PROPERTY" />
+        <el-option label="服务" :value="IotDeviceMessageTypeEnum.SERVICE" />
+      </el-select>
+    </div>
+    <div v-if="deviceControlConfig.type" class="flex items-center mb-10px">
+      <span class="mr-10px w-60px">具体操作</span>
+      <el-select
+        v-model="deviceControlConfig.identifier"
+        class="!w-240px"
+        clearable
+        placeholder="选择操作项"
+      >
+        <template v-if="deviceControlConfig.type === IotDeviceMessageTypeEnum.PROPERTY">
+          <el-option :value="IotDeviceMessageIdentifierEnum.PROPERTY_SET" label="属性设置" />
+        </template>
+        <template v-else-if="deviceControlConfig.type === IotDeviceMessageTypeEnum.SERVICE">
+          <el-option
+            v-for="model in thingModelTSL?.services"
+            :key="model.identifier"
+            :label="model.name"
+            :value="model.identifier"
+          />
+        </template>
+      </el-select>
+    </div>
+    <DeviceActionControl
+      v-if="deviceControlConfig.identifier && deviceControlConfig.type"
+      :model-value="deviceControlConfig.data"
+      :thing-models="getThingModels()"
+      :message-type="deviceControlConfig.type"
+      :identifier="deviceControlConfig.identifier"
+      @update:model-value="(val) => (deviceControlConfig.data = val)"
+    />
+  </div>
+
+  <!-- 产品、设备的选择 -->
+  <ProductTableSelect ref="productTableSelectRef" @success="handleProductSelect" />
+  <DeviceTableSelect
+    ref="deviceTableSelectRef"
+    multiple
+    :product-id="product?.id"
+    @success="handleDeviceSelect"
+  />
+</template>
+
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import { isEmpty } from '@/utils/is'
+import ProductTableSelect from '@/views/iot/product/product/components/ProductTableSelect.vue'
+import DeviceTableSelect from '@/views/iot/device/device/components/DeviceTableSelect.vue'
+import DeviceActionControl from './DeviceActionControl.vue'
+import { ProductVO } from '@/api/iot/product/product'
+import { DeviceVO } from '@/api/iot/device/device'
+import { ThingModelApi } from '@/api/iot/thingmodel'
+import {
+  ActionDeviceControl,
+  IotDeviceMessageIdentifierEnum,
+  IotDeviceMessageTypeEnum
+} from '@/api/iot/rule/scene/scene.types'
+
+/** 设备控制执行器组件 */
+defineOptions({ name: 'DeviceControlAction' })
+
+const props = defineProps<{ modelValue: any }>()
+const emits = defineEmits(['update:modelValue'])
+const deviceControlConfig = useVModel(props, 'modelValue', emits) as Ref<ActionDeviceControl>
+
+const message = useMessage()
+
+// 初始化设备控制执行器结构
+const initDeviceControlConfig = () => {
+  if (!deviceControlConfig.value) {
+    deviceControlConfig.value = {
+      productKey: '',
+      deviceNames: [],
+      type: IotDeviceMessageTypeEnum.PROPERTY,
+      identifier: IotDeviceMessageIdentifierEnum.PROPERTY_SET,
+      data: {}
+    } as ActionDeviceControl
+  }
+}
+
+// 初始化
+onMounted(() => {
+  initDeviceControlConfig()
+})
+
+// 产品和设备选择
+const productTableSelectRef = ref<InstanceType<typeof ProductTableSelect>>()
+const deviceTableSelectRef = ref<InstanceType<typeof DeviceTableSelect>>()
+const product = ref<ProductVO>()
+const deviceList = ref<DeviceVO[]>([])
+
+/** 处理产品选择 */
+const handleProductSelect = (val: ProductVO) => {
+  product.value = val
+  deviceControlConfig.value.productKey = val.productKey
+  deviceList.value = []
+  getThingModelTSL()
+}
+
+/** 处理设备选择 */
+const handleDeviceSelect = (val: DeviceVO[]) => {
+  deviceList.value = val
+  deviceControlConfig.value.deviceNames = val.map((item) => item.deviceName)
+}
+
+/** 打开设备选择器 */
+const openDeviceSelect = () => {
+  if (!product.value) {
+    message.warning('请先选择一个产品')
+    return
+  }
+  deviceTableSelectRef.value?.open()
+}
+
+/** 获取产品物模型 */
+const thingModelTSL = ref<any>()
+const getThingModelTSL = async () => {
+  if (!product.value) {
+    return
+  }
+  thingModelTSL.value = await ThingModelApi.getThingModelTSLByProductId(product.value.id)
+}
+
+/** 根据消息类型和标识符获取对应的物模型 */
+const getThingModels = () => {
+  if (!deviceControlConfig.value) return []
+  
+  switch (deviceControlConfig.value.type) {
+    case IotDeviceMessageTypeEnum.PROPERTY:
+      return thingModelTSL.value?.properties || []
+    case IotDeviceMessageTypeEnum.SERVICE:
+      return thingModelTSL.value?.services.find(
+        (s: any) => s.identifier === deviceControlConfig.value.identifier
+      ) || {}
+  }
+  return []
+}
+</script> 
diff --git a/src/views/iot/rule/scene/components/action/PropertyValueInput.vue b/src/views/iot/rule/scene/components/action/PropertyValueInput.vue
new file mode 100644
index 000000000..5b03db09e
--- /dev/null
+++ b/src/views/iot/rule/scene/components/action/PropertyValueInput.vue
@@ -0,0 +1,238 @@
+<template>
+  <div class="property-value-input">
+    <!-- 文本类型 -->
+    <template v-if="dataType === 'text'">
+      <el-input
+        v-model="inputValue"
+        class="!w-240px"
+        :placeholder="`请输入${dataSpecs?.name || '值'}`"
+      >
+        <template v-if="dataSpecs?.unitName" #append>{{ dataSpecs.unitName }}</template>
+      </el-input>
+    </template>
+
+    <!-- 数值类型 -->
+    <template v-else-if="['int', 'float', 'double'].includes(dataType)">
+      <el-input-number
+        v-model="inputValue"
+        class="!w-240px"
+        :min="dataSpecs?.min"
+        :max="dataSpecs?.max"
+        :precision="dataType === 'int' ? 0 : 2"
+        :step="dataType === 'int' ? 1 : 0.1"
+        :placeholder="`请输入${dataSpecs?.name || '值'}`"
+      />
+      <span v-if="dataSpecs?.unitName" class="ml-5px">{{ dataSpecs.unitName }}</span>
+    </template>
+
+    <!-- 枚举类型 -->
+    <template v-else-if="dataType === 'enum'">
+      <el-select
+        v-model="inputValue"
+        class="!w-240px"
+        clearable
+        :placeholder="`请选择${dataSpecs?.name || '值'}`"
+      >
+        <el-option
+          v-for="item in dataSpecs?.enumList"
+          :key="item.value"
+          :label="item.text"
+          :value="item.value"
+        />
+      </el-select>
+    </template>
+
+    <!-- 布尔类型 -->
+    <template v-else-if="dataType === 'bool'">
+      <el-radio-group v-model="inputValue">
+        <el-radio
+          v-for="item in [
+            { value: true, label: dataSpecs?.trueText || '是' },
+            { value: false, label: dataSpecs?.falseText || '否' }
+          ]"
+          :key="String(item.value)"
+          :label="item.value"
+        >
+          {{ item.label }}
+        </el-radio>
+      </el-radio-group>
+    </template>
+
+    <!-- 日期类型 -->
+    <template v-else-if="dataType === 'date'">
+      <el-date-picker
+        v-model="inputValue"
+        class="!w-240px"
+        type="datetime"
+        :placeholder="`请选择${dataSpecs?.name || '日期'}`"
+      />
+    </template>
+
+    <!-- 结构体类型 -->
+    <template v-else-if="dataType === 'struct'">
+      <el-collapse class="w-full">
+        <el-collapse-item title="结构体参数">
+          <div
+            v-for="field in dataSpecs?.specs"
+            :key="field.identifier"
+            class="flex items-center mb-10px"
+          >
+            <span class="mr-10px inline-block min-w-80px">{{ field.name }}</span>
+            <PropertyValueInput
+              :model-value="getStructFieldValue(field.identifier)"
+              :data-specs="field"
+              @update:model-value="(val) => updateStructField(field.identifier, val)"
+            />
+          </div>
+        </el-collapse-item>
+      </el-collapse>
+    </template>
+
+    <!-- 数组类型 -->
+    <template v-else-if="dataType === 'array'">
+      <div class="flex flex-col w-full">
+        <div v-for="(item, index) in arrayValue" :key="index" class="flex items-center mb-10px">
+          <PropertyValueInput
+            :model-value="item"
+            :data-specs="dataSpecs?.arrayInfo"
+            @update:model-value="(val) => updateArrayItem(index, val)"
+          />
+          <el-button
+            type="danger"
+            size="small"
+            circle
+            class="ml-10px"
+            @click="removeArrayItem(index)"
+          >
+            <Icon icon="ep:delete" />
+          </el-button>
+        </div>
+        <el-button type="primary" size="small" plain @click="addArrayItem">添加项</el-button>
+      </div>
+    </template>
+
+    <!-- 默认文本输入 -->
+    <template v-else>
+      <el-input
+        v-model="inputValue"
+        class="!w-240px"
+        :placeholder="`请输入${dataSpecs?.name || '值'}`"
+      />
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+
+/** 属性值输入组件 */
+defineOptions({ name: 'PropertyValueInput' })
+
+const props = defineProps<{
+  modelValue: any
+  dataSpecs: any
+}>()
+
+const emits = defineEmits(['update:modelValue'])
+
+// 获取数据类型
+const dataType = computed(() => {
+  return props.dataSpecs?.dataType
+})
+
+// 基本类型的输入值
+const inputValue = computed({
+  get: () => {
+    // 对于日期类型，如果是字符串需要转换为日期对象
+    if (dataType.value === 'date' && typeof props.modelValue === 'string') {
+      return new Date(props.modelValue)
+    }
+    return props.modelValue
+  },
+  set: (value) => {
+    // 对于日期类型，需要转换为ISO字符串
+    if (dataType.value === 'date' && value instanceof Date) {
+      emits('update:modelValue', value.toISOString())
+      return
+    }
+    emits('update:modelValue', value)
+  }
+})
+
+// 结构体类型处理
+const structValue = computed({
+  get: () => {
+    return props.modelValue || {}
+  },
+  set: (value) => {
+    emits('update:modelValue', value)
+  }
+})
+
+// 获取结构体字段值
+const getStructFieldValue = (identifier: string) => {
+  return structValue.value[identifier]
+}
+
+// 更新结构体字段
+const updateStructField = (identifier: string, value: any) => {
+  const newStruct = { ...structValue.value }
+  newStruct[identifier] = value
+  structValue.value = newStruct
+}
+
+// 数组类型处理
+const arrayValue = computed({
+  get: () => {
+    return Array.isArray(props.modelValue) ? props.modelValue : []
+  },
+  set: (value) => {
+    emits('update:modelValue', value)
+  }
+})
+
+// 添加数组项
+const addArrayItem = () => {
+  const newArray = [...arrayValue.value]
+  // 根据数组元素类型创建默认值
+  const arrayItemType = props.dataSpecs?.arrayInfo?.dataType
+  let defaultValue = null
+  switch (arrayItemType) {
+    case 'int':
+    case 'float':
+    case 'double':
+      defaultValue = 0
+      break
+    case 'bool':
+      defaultValue = false
+      break
+    case 'text':
+      defaultValue = ''
+      break
+    case 'struct':
+      defaultValue = {}
+      break
+    case 'array':
+      defaultValue = []
+      break
+  }
+  newArray.push(defaultValue)
+  arrayValue.value = newArray
+}
+
+// 更新数组项
+const updateArrayItem = (index: number, value: any) => {
+  const newArray = [...arrayValue.value]
+  newArray[index] = value
+  arrayValue.value = newArray
+}
+
+// 移除数组项
+const removeArrayItem = (index: number) => {
+  const newArray = [...arrayValue.value]
+  newArray.splice(index, 1)
+  arrayValue.value = newArray
+}
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/views/iot/rule/scene/components/ConditionSelector.vue b/src/views/iot/rule/scene/components/listener/ConditionSelector.vue
similarity index 100%
rename from src/views/iot/rule/scene/components/ConditionSelector.vue
rename to src/views/iot/rule/scene/components/listener/ConditionSelector.vue
diff --git a/src/views/iot/rule/scene/components/DeviceListener.vue b/src/views/iot/rule/scene/components/listener/DeviceListener.vue
similarity index 100%
rename from src/views/iot/rule/scene/components/DeviceListener.vue
rename to src/views/iot/rule/scene/components/listener/DeviceListener.vue
diff --git a/src/views/iot/rule/scene/components/DeviceListenerCondition.vue b/src/views/iot/rule/scene/components/listener/DeviceListenerCondition.vue
similarity index 100%
rename from src/views/iot/rule/scene/components/DeviceListenerCondition.vue
rename to src/views/iot/rule/scene/components/listener/DeviceListenerCondition.vue
-- 
Gitee


From c06f7f9ebd76025988a9fbcbd39bd89405345e65 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Fri, 28 Mar 2025 17:22:52 +0800
Subject: [PATCH 07/18] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=E3=80=91IoT:=20=E5=9C=BA=E6=99=AF=E8=81=94=E5=8A=A8?=
 =?UTF-8?q?=E6=89=A7=E8=A1=8C=E5=99=A8=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/action/ActionExecutor.vue      |  63 +++--
 .../components/action/DeviceActionControl.vue |  95 -------
 .../components/action/DeviceControlAction.vue | 219 +++++++++-------
 .../components/action/PropertyValueInput.vue  | 238 ------------------
 4 files changed, 161 insertions(+), 454 deletions(-)
 delete mode 100644 src/views/iot/rule/scene/components/action/DeviceActionControl.vue
 delete mode 100644 src/views/iot/rule/scene/components/action/PropertyValueInput.vue

diff --git a/src/views/iot/rule/scene/components/action/ActionExecutor.vue b/src/views/iot/rule/scene/components/action/ActionExecutor.vue
index fdcdcc322..dbf4fb0d2 100644
--- a/src/views/iot/rule/scene/components/action/ActionExecutor.vue
+++ b/src/views/iot/rule/scene/components/action/ActionExecutor.vue
@@ -22,7 +22,7 @@
         class="flex items-center mr-60px"
       >
         <span class="mr-10px">产品</span>
-        <el-button type="primary" @click="productTableSelectRef?.open()" size="small" plain>
+        <el-button type="primary" @click="handleSelectProduct" size="small" plain>
           {{ product ? product.name : '选择产品' }}
         </el-button>
       </div>
@@ -31,8 +31,8 @@
         class="flex items-center mr-60px"
       >
         <span class="mr-10px">设备</span>
-        <el-button type="primary" @click="openDeviceSelect" size="small" plain>
-          {{ isEmpty(deviceList) ? '选择设备' : actionConfig.deviceControl?.deviceNames.join(',') }}
+        <el-button type="primary" @click="handleSelectDevice" size="small" plain>
+          {{ isEmpty(deviceList) ? '选择设备' : deviceList.map(d => d.deviceName).join(',') }}
         </el-button>
       </div>
       <!-- 删除执行器 -->
@@ -47,6 +47,7 @@
     <DeviceControlAction
       v-if="actionConfig.type === IotRuleSceneActionTypeEnum.DEVICE_CONTROL"
       :model-value="actionConfig.deviceControl"
+      :product-id="product?.id"
       @update:model-value="(val) => (actionConfig.deviceControl = val)"
     />
 
@@ -86,12 +87,13 @@ import AlertAction from './AlertAction.vue'
 import DataBridgeAction from './DataBridgeAction.vue'
 import { ProductVO } from '@/api/iot/product/product'
 import { DeviceVO } from '@/api/iot/device/device'
-import { ThingModelApi } from '@/api/iot/thingmodel'
 import {
   ActionAlert,
   ActionConfig,
   ActionDeviceControl,
-  IotRuleSceneActionTypeEnum
+  IotRuleSceneActionTypeEnum,
+  IotDeviceMessageTypeEnum,
+  IotDeviceMessageIdentifierEnum
 } from '@/api/iot/rule/scene/scene.types'
 
 /** 场景联动之执行器组件 */
@@ -114,7 +116,13 @@ const initActionConfig = () => {
     actionConfig.value.type === IotRuleSceneActionTypeEnum.DEVICE_CONTROL &&
     !actionConfig.value.deviceControl
   ) {
-    actionConfig.value.deviceControl = {} as ActionDeviceControl
+    actionConfig.value.deviceControl = {
+      productKey: '',
+      deviceNames: [],
+      type: IotDeviceMessageTypeEnum.PROPERTY,
+      identifier: IotDeviceMessageIdentifierEnum.PROPERTY_SET,
+      data: {}
+    } as ActionDeviceControl
   }
 
   // 告警执行器初始化
@@ -146,22 +154,13 @@ const deviceTableSelectRef = ref<InstanceType<typeof DeviceTableSelect>>()
 const product = ref<ProductVO>()
 const deviceList = ref<DeviceVO[]>([])
 
-/** 处理产品选择 */
-const handleProductSelect = (val: ProductVO) => {
-  product.value = val
-  actionConfig.value.deviceControl!.productKey = val.productKey
-  deviceList.value = []
-  getThingModelTSL()
+/** 处理选择产品 */
+const handleSelectProduct = () => {
+  productTableSelectRef.value?.open()
 }
 
-/** 处理设备选择 */
-const handleDeviceSelect = (val: DeviceVO[]) => {
-  deviceList.value = val
-  actionConfig.value.deviceControl!.deviceNames = val.map((item) => item.deviceName)
-}
-
-/** 打开设备选择器 */
-const openDeviceSelect = () => {
+/** 处理选择设备 */
+const handleSelectDevice = () => {
   if (!product.value) {
     message.warning('请先选择一个产品')
     return
@@ -169,12 +168,24 @@ const openDeviceSelect = () => {
   deviceTableSelectRef.value?.open()
 }
 
-/** 获取产品物模型 */
-const thingModelTSL = ref<any>()
-const getThingModelTSL = async () => {
-  if (!product.value) {
-    return
+/** 处理产品选择成功 */
+const handleProductSelect = (val: ProductVO) => {
+  product.value = val
+  if (actionConfig.value.deviceControl) {
+    actionConfig.value.deviceControl.productKey = val.productKey
+  }
+  // 重置设备选择
+  deviceList.value = []
+  if (actionConfig.value.deviceControl) {
+    actionConfig.value.deviceControl.deviceNames = []
+  }
+}
+
+/** 处理设备选择成功 */
+const handleDeviceSelect = (val: DeviceVO[]) => {
+  deviceList.value = val
+  if (actionConfig.value.deviceControl) {
+    actionConfig.value.deviceControl.deviceNames = val.map((item) => item.deviceName)
   }
-  thingModelTSL.value = await ThingModelApi.getThingModelTSLByProductId(product.value.id)
 }
 </script>
diff --git a/src/views/iot/rule/scene/components/action/DeviceActionControl.vue b/src/views/iot/rule/scene/components/action/DeviceActionControl.vue
deleted file mode 100644
index a1d29cb58..000000000
--- a/src/views/iot/rule/scene/components/action/DeviceActionControl.vue
+++ /dev/null
@@ -1,95 +0,0 @@
-<template>
-  <div class="device-action-control">
-    <!-- 属性设置 -->
-    <template v-if="messageType === IotDeviceMessageTypeEnum.PROPERTY">
-      <div class="flex flex-wrap gap-10px">
-        <div v-for="model in thingModels" :key="model.identifier" class="flex items-center mb-10px">
-          <span class="mr-10px inline-block min-w-80px">{{ model.name }}</span>
-          <!-- 根据属性类型渲染不同的输入控件 -->
-          <PropertyValueInput
-            :model-value="propertyData[model.identifier]"
-            :data-specs="model.dataSpecs"
-            @update:model-value="(val) => updatePropertyValue(model.identifier, val)"
-          />
-        </div>
-      </div>
-    </template>
-
-    <!-- 服务调用 -->
-    <template v-else-if="messageType === IotDeviceMessageTypeEnum.SERVICE">
-      <div class="flex flex-wrap gap-10px">
-        <template v-if="thingModels && thingModels.inputParams">
-          <div 
-            v-for="param in thingModels.inputParams" 
-            :key="param.identifier" 
-            class="flex items-center mb-10px"
-          >
-            <span class="mr-10px inline-block min-w-80px">{{ param.name }}</span>
-            <!-- 根据服务输入参数类型渲染不同的输入控件 -->
-            <PropertyValueInput
-              :model-value="serviceData[param.identifier]"
-              :data-specs="param.dataSpecs"
-              @update:model-value="(val) => updateServiceValue(param.identifier, val)"
-            />
-          </div>
-        </template>
-        <div v-else class="text-gray-500">该服务没有输入参数</div>
-      </div>
-    </template>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useVModel } from '@vueuse/core'
-import PropertyValueInput from './PropertyValueInput.vue'
-import { IotDeviceMessageTypeEnum } from '@/api/iot/rule/scene/scene.types'
-
-/** 设备控制执行器的参数配置组件 */
-defineOptions({ name: 'DeviceActionControl' })
-
-const props = defineProps<{
-  modelValue: any
-  thingModels: any
-  messageType: string
-  identifier: string
-}>()
-
-const emits = defineEmits(['update:modelValue'])
-const actionData = useVModel(props, 'modelValue', emits)
-
-// 属性数据
-const propertyData = computed({
-  get: () => {
-    return actionData.value || {}
-  },
-  set: (value) => {
-    actionData.value = value
-  }
-})
-
-// 服务数据
-const serviceData = computed({
-  get: () => {
-    return actionData.value || {}
-  },
-  set: (value) => {
-    actionData.value = value
-  }
-})
-
-// 更新属性值
-const updatePropertyValue = (identifier: string, value: any) => {
-  const newData = { ...propertyData.value }
-  newData[identifier] = value
-  propertyData.value = newData
-}
-
-// 更新服务参数值
-const updateServiceValue = (identifier: string, value: any) => {
-  const newData = { ...serviceData.value }
-  newData[identifier] = value
-  serviceData.value = newData
-}
-</script>
-
-<style scoped lang="scss"></style> 
diff --git a/src/views/iot/rule/scene/components/action/DeviceControlAction.vue b/src/views/iot/rule/scene/components/action/DeviceControlAction.vue
index 52adf7fd3..b04474915 100644
--- a/src/views/iot/rule/scene/components/action/DeviceControlAction.vue
+++ b/src/views/iot/rule/scene/components/action/DeviceControlAction.vue
@@ -1,78 +1,61 @@
 <template>
-  <div class="bg-[#dbe5f6] p-10px">
-    <div class="flex items-center mb-10px">
-      <span class="mr-10px w-60px">产品</span>
-      <el-button type="primary" @click="productTableSelectRef?.open()" size="small" plain>
-        {{ product ? product.name : '选择产品' }}
-      </el-button>
-    </div>
-    <div class="flex items-center mb-10px">
-      <span class="mr-10px w-60px">设备</span>
-      <el-button type="primary" @click="openDeviceSelect" size="small" plain>
-        {{ isEmpty(deviceList) ? '选择设备' : deviceControlConfig.deviceNames.join(',') }}
-      </el-button>
-    </div>
-    <div class="flex items-center mb-10px">
-      <span class="mr-10px w-60px">消息类型</span>
+  <div class="bg-[#dbe5f6] flex p-10px">
+    <div class="flex flex-col items-center justify-center mr-10px h-a">
       <el-select
         v-model="deviceControlConfig.type"
+        @change="deviceControlConfig.data = {}"
         class="!w-160px"
         clearable
-        placeholder="选择消息类型"
+        placeholder=""
       >
         <el-option label="属性" :value="IotDeviceMessageTypeEnum.PROPERTY" />
         <el-option label="服务" :value="IotDeviceMessageTypeEnum.SERVICE" />
       </el-select>
     </div>
-    <div v-if="deviceControlConfig.type" class="flex items-center mb-10px">
-      <span class="mr-10px w-60px">具体操作</span>
-      <el-select
-        v-model="deviceControlConfig.identifier"
-        class="!w-240px"
-        clearable
-        placeholder="选择操作项"
+    <div class="">
+      <div
+        class="flex items-center justify-around mb-10px last:mb-0"
+        v-for="(parameter, index) in parameters"
+        :key="index"
       >
-        <template v-if="deviceControlConfig.type === IotDeviceMessageTypeEnum.PROPERTY">
-          <el-option :value="IotDeviceMessageIdentifierEnum.PROPERTY_SET" label="属性设置" />
-        </template>
-        <template v-else-if="deviceControlConfig.type === IotDeviceMessageTypeEnum.SERVICE">
+        <el-select
+          v-model="parameter.identifier"
+          class="!w-240px mr-10px"
+          clearable
+          placeholder="请选择物模型"
+        >
           <el-option
-            v-for="model in thingModelTSL?.services"
-            :key="model.identifier"
-            :label="model.name"
-            :value="model.identifier"
+            v-for="thingModel in thingModels"
+            :key="thingModel.identifier"
+            :label="thingModel.name"
+            :value="thingModel.identifier"
           />
-        </template>
-      </el-select>
+        </el-select>
+        <el-input v-model="parameter.value" class="!w-240px mr-10px" placeholder="请输入值">
+          <template v-if="getUnitName(parameter.identifier)" #append>
+            {{ getUnitName(parameter.identifier) }}
+          </template>
+        </el-input>
+        <el-tooltip content="删除参数" placement="top">
+          <el-button type="danger" circle size="small" @click="removeParameter(index)">
+            <Icon icon="ep:delete" />
+          </el-button>
+        </el-tooltip>
+      </div>
+    </div>
+    <!-- 添加参数 -->
+    <div class="flex flex-1 flex-col items-center justify-center w-60px h-a">
+      <el-tooltip content="添加参数" placement="top">
+        <el-button type="primary" circle size="small" @click="addParameter">
+          <Icon icon="ep:plus" />
+        </el-button>
+      </el-tooltip>
     </div>
-    <DeviceActionControl
-      v-if="deviceControlConfig.identifier && deviceControlConfig.type"
-      :model-value="deviceControlConfig.data"
-      :thing-models="getThingModels()"
-      :message-type="deviceControlConfig.type"
-      :identifier="deviceControlConfig.identifier"
-      @update:model-value="(val) => (deviceControlConfig.data = val)"
-    />
   </div>
-
-  <!-- 产品、设备的选择 -->
-  <ProductTableSelect ref="productTableSelectRef" @success="handleProductSelect" />
-  <DeviceTableSelect
-    ref="deviceTableSelectRef"
-    multiple
-    :product-id="product?.id"
-    @success="handleDeviceSelect"
-  />
 </template>
 
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core'
-import { isEmpty } from '@/utils/is'
-import ProductTableSelect from '@/views/iot/product/product/components/ProductTableSelect.vue'
-import DeviceTableSelect from '@/views/iot/device/device/components/DeviceTableSelect.vue'
-import DeviceActionControl from './DeviceActionControl.vue'
-import { ProductVO } from '@/api/iot/product/product'
-import { DeviceVO } from '@/api/iot/device/device'
 import { ThingModelApi } from '@/api/iot/thingmodel'
 import {
   ActionDeviceControl,
@@ -83,12 +66,27 @@ import {
 /** 设备控制执行器组件 */
 defineOptions({ name: 'DeviceControlAction' })
 
-const props = defineProps<{ modelValue: any }>()
+const props = defineProps<{
+  modelValue: any
+  productId?: number
+}>()
 const emits = defineEmits(['update:modelValue'])
 const deviceControlConfig = useVModel(props, 'modelValue', emits) as Ref<ActionDeviceControl>
 
 const message = useMessage()
 
+/** 执行器参数 */
+const parameters = ref<{ identifier: string; value: any }[]>([])
+const addParameter = () => {
+  if (parameters.value.length >= thingModels.value.length) {
+    message.warning(`该产品只有${thingModels.value.length}个物模型！！！`)
+    return
+  }
+  parameters.value.push({ identifier: '', value: undefined })
+}
+const removeParameter = (index: number) => {
+  parameters.value.splice(index, 1)
+}
 // 初始化设备控制执行器结构
 const initDeviceControlConfig = () => {
   if (!deviceControlConfig.value) {
@@ -100,63 +98,94 @@ const initDeviceControlConfig = () => {
       data: {}
     } as ActionDeviceControl
   }
+
+  // 确保data对象存在
+  if (!deviceControlConfig.value.data) {
+    deviceControlConfig.value.data = {}
+  }
 }
 
 // 初始化
 onMounted(() => {
   initDeviceControlConfig()
+  if (props.productId) {
+    getThingModelTSL()
+  }
 })
 
-// 产品和设备选择
-const productTableSelectRef = ref<InstanceType<typeof ProductTableSelect>>()
-const deviceTableSelectRef = ref<InstanceType<typeof DeviceTableSelect>>()
-const product = ref<ProductVO>()
-const deviceList = ref<DeviceVO[]>([])
-
-/** 处理产品选择 */
-const handleProductSelect = (val: ProductVO) => {
-  product.value = val
-  deviceControlConfig.value.productKey = val.productKey
-  deviceList.value = []
-  getThingModelTSL()
-}
+// 监听productId变化
+watch(
+  () => props.productId,
+  (newVal) => {
+    if (newVal) {
+      getThingModelTSL()
+      // 当产品ID变化时，清空原有数据
+      deviceControlConfig.value.data = {}
+    } else {
+      thingModelTSL.value = undefined
+    }
+  }
+)
 
-/** 处理设备选择 */
-const handleDeviceSelect = (val: DeviceVO[]) => {
-  deviceList.value = val
-  deviceControlConfig.value.deviceNames = val.map((item) => item.deviceName)
-}
+// 监听消息类型变化
+watch(
+  () => deviceControlConfig.value.type,
+  () => {
+    // 切换消息类型时清空参数
+    deviceControlConfig.value.data = {}
+    if (deviceControlConfig.value.type === IotDeviceMessageTypeEnum.PROPERTY) {
+      deviceControlConfig.value.identifier = IotDeviceMessageIdentifierEnum.PROPERTY_SET
+    } else {
+      deviceControlConfig.value.identifier = ''
+    }
+  }
+)
 
-/** 打开设备选择器 */
-const openDeviceSelect = () => {
-  if (!product.value) {
-    message.warning('请先选择一个产品')
-    return
+// 监听identifier变化
+watch(
+  () => deviceControlConfig.value.identifier,
+  () => {
+    // 切换identifier时清空参数
+    deviceControlConfig.value.data = {}
   }
-  deviceTableSelectRef.value?.open()
-}
+)
 
 /** 获取产品物模型 */
 const thingModelTSL = ref<any>()
 const getThingModelTSL = async () => {
-  if (!product.value) {
+  if (!props.productId) {
     return
   }
-  thingModelTSL.value = await ThingModelApi.getThingModelTSLByProductId(product.value.id)
+  try {
+    thingModelTSL.value = await ThingModelApi.getThingModelTSLByProductId(props.productId)
+  } catch (error) {
+    console.error('获取物模型失败', error)
+  }
 }
-
-/** 根据消息类型和标识符获取对应的物模型 */
-const getThingModels = () => {
-  if (!deviceControlConfig.value) return []
-  
+const thingModels = computed((): any[] => {
   switch (deviceControlConfig.value.type) {
     case IotDeviceMessageTypeEnum.PROPERTY:
-      return thingModelTSL.value?.properties || []
+      return thingModelTSL.value.properties
+    // TODO puhui999: 服务和事件后续考虑
     case IotDeviceMessageTypeEnum.SERVICE:
-      return thingModelTSL.value?.services.find(
-        (s: any) => s.identifier === deviceControlConfig.value.identifier
-      ) || {}
+      return thingModelTSL.value.services
+    case IotDeviceMessageTypeEnum.EVENT:
+      return thingModelTSL.value.events
   }
   return []
-}
-</script> 
+})
+/** 获得属性单位 */
+const getUnitName = computed(() => (identifier: string) => {
+  const model = thingModels.value?.find((item: any) => item.identifier === identifier)
+  // 属性
+  if (model?.dataSpecs) {
+    return model.dataSpecs.unitName
+  }
+  // TODO puhui999: 先不考虑服务和事件的情况
+  // 服务和事件
+  // if (model?.outputParams) {
+  //   return model.dataSpecs.unitName
+  // }
+  return ''
+})
+</script>
diff --git a/src/views/iot/rule/scene/components/action/PropertyValueInput.vue b/src/views/iot/rule/scene/components/action/PropertyValueInput.vue
deleted file mode 100644
index 5b03db09e..000000000
--- a/src/views/iot/rule/scene/components/action/PropertyValueInput.vue
+++ /dev/null
@@ -1,238 +0,0 @@
-<template>
-  <div class="property-value-input">
-    <!-- 文本类型 -->
-    <template v-if="dataType === 'text'">
-      <el-input
-        v-model="inputValue"
-        class="!w-240px"
-        :placeholder="`请输入${dataSpecs?.name || '值'}`"
-      >
-        <template v-if="dataSpecs?.unitName" #append>{{ dataSpecs.unitName }}</template>
-      </el-input>
-    </template>
-
-    <!-- 数值类型 -->
-    <template v-else-if="['int', 'float', 'double'].includes(dataType)">
-      <el-input-number
-        v-model="inputValue"
-        class="!w-240px"
-        :min="dataSpecs?.min"
-        :max="dataSpecs?.max"
-        :precision="dataType === 'int' ? 0 : 2"
-        :step="dataType === 'int' ? 1 : 0.1"
-        :placeholder="`请输入${dataSpecs?.name || '值'}`"
-      />
-      <span v-if="dataSpecs?.unitName" class="ml-5px">{{ dataSpecs.unitName }}</span>
-    </template>
-
-    <!-- 枚举类型 -->
-    <template v-else-if="dataType === 'enum'">
-      <el-select
-        v-model="inputValue"
-        class="!w-240px"
-        clearable
-        :placeholder="`请选择${dataSpecs?.name || '值'}`"
-      >
-        <el-option
-          v-for="item in dataSpecs?.enumList"
-          :key="item.value"
-          :label="item.text"
-          :value="item.value"
-        />
-      </el-select>
-    </template>
-
-    <!-- 布尔类型 -->
-    <template v-else-if="dataType === 'bool'">
-      <el-radio-group v-model="inputValue">
-        <el-radio
-          v-for="item in [
-            { value: true, label: dataSpecs?.trueText || '是' },
-            { value: false, label: dataSpecs?.falseText || '否' }
-          ]"
-          :key="String(item.value)"
-          :label="item.value"
-        >
-          {{ item.label }}
-        </el-radio>
-      </el-radio-group>
-    </template>
-
-    <!-- 日期类型 -->
-    <template v-else-if="dataType === 'date'">
-      <el-date-picker
-        v-model="inputValue"
-        class="!w-240px"
-        type="datetime"
-        :placeholder="`请选择${dataSpecs?.name || '日期'}`"
-      />
-    </template>
-
-    <!-- 结构体类型 -->
-    <template v-else-if="dataType === 'struct'">
-      <el-collapse class="w-full">
-        <el-collapse-item title="结构体参数">
-          <div
-            v-for="field in dataSpecs?.specs"
-            :key="field.identifier"
-            class="flex items-center mb-10px"
-          >
-            <span class="mr-10px inline-block min-w-80px">{{ field.name }}</span>
-            <PropertyValueInput
-              :model-value="getStructFieldValue(field.identifier)"
-              :data-specs="field"
-              @update:model-value="(val) => updateStructField(field.identifier, val)"
-            />
-          </div>
-        </el-collapse-item>
-      </el-collapse>
-    </template>
-
-    <!-- 数组类型 -->
-    <template v-else-if="dataType === 'array'">
-      <div class="flex flex-col w-full">
-        <div v-for="(item, index) in arrayValue" :key="index" class="flex items-center mb-10px">
-          <PropertyValueInput
-            :model-value="item"
-            :data-specs="dataSpecs?.arrayInfo"
-            @update:model-value="(val) => updateArrayItem(index, val)"
-          />
-          <el-button
-            type="danger"
-            size="small"
-            circle
-            class="ml-10px"
-            @click="removeArrayItem(index)"
-          >
-            <Icon icon="ep:delete" />
-          </el-button>
-        </div>
-        <el-button type="primary" size="small" plain @click="addArrayItem">添加项</el-button>
-      </div>
-    </template>
-
-    <!-- 默认文本输入 -->
-    <template v-else>
-      <el-input
-        v-model="inputValue"
-        class="!w-240px"
-        :placeholder="`请输入${dataSpecs?.name || '值'}`"
-      />
-    </template>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useVModel } from '@vueuse/core'
-
-/** 属性值输入组件 */
-defineOptions({ name: 'PropertyValueInput' })
-
-const props = defineProps<{
-  modelValue: any
-  dataSpecs: any
-}>()
-
-const emits = defineEmits(['update:modelValue'])
-
-// 获取数据类型
-const dataType = computed(() => {
-  return props.dataSpecs?.dataType
-})
-
-// 基本类型的输入值
-const inputValue = computed({
-  get: () => {
-    // 对于日期类型，如果是字符串需要转换为日期对象
-    if (dataType.value === 'date' && typeof props.modelValue === 'string') {
-      return new Date(props.modelValue)
-    }
-    return props.modelValue
-  },
-  set: (value) => {
-    // 对于日期类型，需要转换为ISO字符串
-    if (dataType.value === 'date' && value instanceof Date) {
-      emits('update:modelValue', value.toISOString())
-      return
-    }
-    emits('update:modelValue', value)
-  }
-})
-
-// 结构体类型处理
-const structValue = computed({
-  get: () => {
-    return props.modelValue || {}
-  },
-  set: (value) => {
-    emits('update:modelValue', value)
-  }
-})
-
-// 获取结构体字段值
-const getStructFieldValue = (identifier: string) => {
-  return structValue.value[identifier]
-}
-
-// 更新结构体字段
-const updateStructField = (identifier: string, value: any) => {
-  const newStruct = { ...structValue.value }
-  newStruct[identifier] = value
-  structValue.value = newStruct
-}
-
-// 数组类型处理
-const arrayValue = computed({
-  get: () => {
-    return Array.isArray(props.modelValue) ? props.modelValue : []
-  },
-  set: (value) => {
-    emits('update:modelValue', value)
-  }
-})
-
-// 添加数组项
-const addArrayItem = () => {
-  const newArray = [...arrayValue.value]
-  // 根据数组元素类型创建默认值
-  const arrayItemType = props.dataSpecs?.arrayInfo?.dataType
-  let defaultValue = null
-  switch (arrayItemType) {
-    case 'int':
-    case 'float':
-    case 'double':
-      defaultValue = 0
-      break
-    case 'bool':
-      defaultValue = false
-      break
-    case 'text':
-      defaultValue = ''
-      break
-    case 'struct':
-      defaultValue = {}
-      break
-    case 'array':
-      defaultValue = []
-      break
-  }
-  newArray.push(defaultValue)
-  arrayValue.value = newArray
-}
-
-// 更新数组项
-const updateArrayItem = (index: number, value: any) => {
-  const newArray = [...arrayValue.value]
-  newArray[index] = value
-  arrayValue.value = newArray
-}
-
-// 移除数组项
-const removeArrayItem = (index: number) => {
-  const newArray = [...arrayValue.value]
-  newArray.splice(index, 1)
-  arrayValue.value = newArray
-}
-</script>
-
-<style scoped lang="scss"></style>
-- 
Gitee


From fe0d5f92f674a1dad3e34ee2fcfabf3eee9350d0 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Fri, 28 Mar 2025 17:52:41 +0800
Subject: [PATCH 08/18] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=E3=80=91IoT:=20=E5=9C=BA=E6=99=AF=E8=81=94=E5=8A=A8?=
 =?UTF-8?q?=E8=A7=A3=E5=86=B3=E7=B4=A2=E5=BC=95=E9=87=8D=E7=94=A8=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/iot/rule/scene/RuleSceneForm.vue | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/views/iot/rule/scene/RuleSceneForm.vue b/src/views/iot/rule/scene/RuleSceneForm.vue
index 5104a6693..c66d422d8 100644
--- a/src/views/iot/rule/scene/RuleSceneForm.vue
+++ b/src/views/iot/rule/scene/RuleSceneForm.vue
@@ -35,7 +35,7 @@
           <el-divider content-position="left">触发器配置</el-divider>
           <device-listener
             v-for="(trigger, index) in formData.triggers"
-            :key="index"
+            :key="`trigger-${index}-${Date.now()}`"
             :model-value="trigger"
             @update:model-value="(val) => (formData.triggers[index] = val)"
             class="mb-10px"
@@ -52,7 +52,7 @@
           <el-divider content-position="left">执行器配置</el-divider>
           <action-executor
             v-for="(action, index) in formData.actions"
-            :key="index"
+            :key="`action-${index}-${Date.now()}`"
             :model-value="action"
             @update:model-value="(val) => (formData.actions[index] = val)"
             class="mb-10px"
@@ -129,9 +129,7 @@ const addTrigger = () => {
 }
 /** 移除触发器 */
 const removeTrigger = (index: number) => {
-  const newTriggers = [...formData.value.triggers]
-  newTriggers.splice(index, 1)
-  formData.value.triggers = newTriggers
+  formData.value.triggers.splice(index, 1)
 }
 
 /** 添加执行器 */
@@ -142,9 +140,7 @@ const addAction = () => {
 }
 /** 移除执行器 */
 const removeAction = (index: number) => {
-  const newActions = [...formData.value.actions]
-  newActions.splice(index, 1)
-  formData.value.actions = newActions
+  formData.value.actions.splice(index, 1)
 }
 
 /** 打开弹窗 */
-- 
Gitee


From 5fa9e4e8552b7bc34c409107fa17b39db5ef2e74 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Fri, 28 Mar 2025 18:20:53 +0800
Subject: [PATCH 09/18] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=E3=80=91IoT:=20=E5=9C=BA=E6=99=AF=E8=81=94=E5=8A=A8?=
 =?UTF-8?q?=E6=89=A7=E8=A1=8C=E5=99=A8=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/action/ActionExecutor.vue      |  30 +++--
 .../components/action/DeviceControlAction.vue | 114 +++++++++++-------
 src/views/iot/rule/scene/index.vue            |   9 +-
 3 files changed, 93 insertions(+), 60 deletions(-)

diff --git a/src/views/iot/rule/scene/components/action/ActionExecutor.vue b/src/views/iot/rule/scene/components/action/ActionExecutor.vue
index dbf4fb0d2..c4433b602 100644
--- a/src/views/iot/rule/scene/components/action/ActionExecutor.vue
+++ b/src/views/iot/rule/scene/components/action/ActionExecutor.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="m-10px">
+    <!-- TODO puhui999: 产品设备回显 -->
     <div class="relative bg-[#eff3f7] h-50px flex items-center px-10px">
       <div class="flex items-center mr-60px">
         <span class="mr-10px">执行动作</span>
@@ -32,7 +33,7 @@
       >
         <span class="mr-10px">设备</span>
         <el-button type="primary" @click="handleSelectDevice" size="small" plain>
-          {{ isEmpty(deviceList) ? '选择设备' : deviceList.map(d => d.deviceName).join(',') }}
+          {{ isEmpty(deviceList) ? '选择设备' : deviceList.map((d) => d.deviceName).join(',') }}
         </el-button>
       </div>
       <!-- 删除执行器 -->
@@ -91,9 +92,9 @@ import {
   ActionAlert,
   ActionConfig,
   ActionDeviceControl,
-  IotRuleSceneActionTypeEnum,
+  IotDeviceMessageIdentifierEnum,
   IotDeviceMessageTypeEnum,
-  IotDeviceMessageIdentifierEnum
+  IotRuleSceneActionTypeEnum
 } from '@/api/iot/rule/scene/scene.types'
 
 /** 场景联动之执行器组件 */
@@ -139,15 +140,6 @@ const initActionConfig = () => {
   }
 }
 
-// 监听执行类型变化，初始化对应配置
-watch(
-  () => actionConfig.value.type,
-  () => {
-    initActionConfig()
-  },
-  { immediate: true }
-)
-
 // 产品和设备选择
 const productTableSelectRef = ref<InstanceType<typeof ProductTableSelect>>()
 const deviceTableSelectRef = ref<InstanceType<typeof DeviceTableSelect>>()
@@ -188,4 +180,18 @@ const handleDeviceSelect = (val: DeviceVO[]) => {
     actionConfig.value.deviceControl.deviceNames = val.map((item) => item.deviceName)
   }
 }
+
+// 监听执行类型变化，初始化对应配置
+watch(
+  () => actionConfig.value.type,
+  () => {
+    initActionConfig()
+  },
+  { immediate: true }
+)
+
+/** 初始化 */
+onMounted(() => {
+  initActionConfig()
+})
 </script>
diff --git a/src/views/iot/rule/scene/components/action/DeviceControlAction.vue b/src/views/iot/rule/scene/components/action/DeviceControlAction.vue
index b04474915..710ac6ecb 100644
--- a/src/views/iot/rule/scene/components/action/DeviceControlAction.vue
+++ b/src/views/iot/rule/scene/components/action/DeviceControlAction.vue
@@ -12,6 +12,7 @@
         <el-option label="服务" :value="IotDeviceMessageTypeEnum.SERVICE" />
       </el-select>
     </div>
+    <!-- TODO puhui999: 处理服务参数 -->
     <div class="">
       <div
         class="flex items-center justify-around mb-10px last:mb-0"
@@ -31,6 +32,7 @@
             :value="thingModel.identifier"
           />
         </el-select>
+        <!-- TODO puhui999: 输入框调整，数值型使用数字输入框校验边界，bool 值使用开关，枚举值使用下拉选择，时间值使用时间选择器 -->
         <el-input v-model="parameter.value" class="!w-240px mr-10px" placeholder="请输入值">
           <template v-if="getUnitName(parameter.identifier)" #append>
             {{ getUnitName(parameter.identifier) }}
@@ -62,6 +64,7 @@ import {
   IotDeviceMessageIdentifierEnum,
   IotDeviceMessageTypeEnum
 } from '@/api/iot/rule/scene/scene.types'
+import { isEmpty } from '@/utils/is'
 
 /** 设备控制执行器组件 */
 defineOptions({ name: 'DeviceControlAction' })
@@ -78,6 +81,10 @@ const message = useMessage()
 /** 执行器参数 */
 const parameters = ref<{ identifier: string; value: any }[]>([])
 const addParameter = () => {
+  if (!props.productId) {
+    message.warning('请先选择一个产品')
+    return
+  }
   if (parameters.value.length >= thingModels.value.length) {
     message.warning(`该产品只有${thingModels.value.length}个物模型！！！`)
     return
@@ -87,6 +94,23 @@ const addParameter = () => {
 const removeParameter = (index: number) => {
   parameters.value.splice(index, 1)
 }
+watch(
+  () => parameters.value,
+  (newVal) => {
+    if (isEmpty(newVal)) {
+      return
+    }
+    for (const parameter of newVal) {
+      if (isEmpty(parameter.identifier)) {
+        break
+      }
+      deviceControlConfig.value.data[parameter.identifier] = parameter.value
+    }
+    console.log(deviceControlConfig.value)
+  },
+  { deep: true }
+)
+
 // 初始化设备控制执行器结构
 const initDeviceControlConfig = () => {
   if (!deviceControlConfig.value) {
@@ -97,6 +121,12 @@ const initDeviceControlConfig = () => {
       identifier: IotDeviceMessageIdentifierEnum.PROPERTY_SET,
       data: {}
     } as ActionDeviceControl
+  } else {
+    // 参数回显
+    parameters.value = Object.entries(deviceControlConfig.value.data).map(([key, value]) => ({
+      identifier: key,
+      value: value
+    }))
   }
 
   // 确保data对象存在
@@ -105,51 +135,6 @@ const initDeviceControlConfig = () => {
   }
 }
 
-// 初始化
-onMounted(() => {
-  initDeviceControlConfig()
-  if (props.productId) {
-    getThingModelTSL()
-  }
-})
-
-// 监听productId变化
-watch(
-  () => props.productId,
-  (newVal) => {
-    if (newVal) {
-      getThingModelTSL()
-      // 当产品ID变化时，清空原有数据
-      deviceControlConfig.value.data = {}
-    } else {
-      thingModelTSL.value = undefined
-    }
-  }
-)
-
-// 监听消息类型变化
-watch(
-  () => deviceControlConfig.value.type,
-  () => {
-    // 切换消息类型时清空参数
-    deviceControlConfig.value.data = {}
-    if (deviceControlConfig.value.type === IotDeviceMessageTypeEnum.PROPERTY) {
-      deviceControlConfig.value.identifier = IotDeviceMessageIdentifierEnum.PROPERTY_SET
-    } else {
-      deviceControlConfig.value.identifier = ''
-    }
-  }
-)
-
-// 监听identifier变化
-watch(
-  () => deviceControlConfig.value.identifier,
-  () => {
-    // 切换identifier时清空参数
-    deviceControlConfig.value.data = {}
-  }
-)
-
 /** 获取产品物模型 */
 const thingModelTSL = ref<any>()
 const getThingModelTSL = async () => {
@@ -163,6 +148,9 @@ const getThingModelTSL = async () => {
   }
 }
 const thingModels = computed((): any[] => {
+  if (isEmpty(thingModelTSL.value)) {
+    return []
+  }
   switch (deviceControlConfig.value.type) {
     case IotDeviceMessageTypeEnum.PROPERTY:
       return thingModelTSL.value.properties
@@ -188,4 +176,40 @@ const getUnitName = computed(() => (identifier: string) => {
   // }
   return ''
 })
+
+// 监听 productId 变化
+watch(
+  () => props.productId,
+  (newVal) => {
+    if (!newVal) {
+      thingModelTSL.value = undefined
+      parameters.value = []
+      return
+    }
+    getThingModelTSL()
+    // 当产品ID变化时，清空原有数据
+    deviceControlConfig.value.data = {}
+  },
+  { immediate: true }
+)
+
+// 监听消息类型变化
+watch(
+  () => deviceControlConfig.value.type,
+  () => {
+    // 切换消息类型时清空参数
+    deviceControlConfig.value.data = {}
+    parameters.value = []
+    if (deviceControlConfig.value.type === IotDeviceMessageTypeEnum.PROPERTY) {
+      deviceControlConfig.value.identifier = IotDeviceMessageIdentifierEnum.PROPERTY_SET
+    } else if (deviceControlConfig.value.type === IotDeviceMessageTypeEnum.SERVICE) {
+      deviceControlConfig.value.identifier = IotDeviceMessageIdentifierEnum.SERVICE_INVOKE
+    }
+  }
+)
+
+// 初始化
+onMounted(() => {
+  initDeviceControlConfig()
+})
 </script>
diff --git a/src/views/iot/rule/scene/index.vue b/src/views/iot/rule/scene/index.vue
index 80c1ba975..4a05a201d 100644
--- a/src/views/iot/rule/scene/index.vue
+++ b/src/views/iot/rule/scene/index.vue
@@ -69,9 +69,12 @@
           <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
         </template>
       </el-table-column>
-      <!-- TODO @puhui999：触发器数组 => 触发器，然后展示 x 个？ ps：执行器数组也类似哈。-->
-      <el-table-column label="触发器数组" align="center" prop="triggers" />
-      <el-table-column label="执行器数组" align="center" prop="actions" />
+      <el-table-column label="触发器" align="center" prop="triggers">
+        <template #default="{ row }"> {{ row.triggers?.length }}个 </template>
+      </el-table-column>
+      <el-table-column label="执行器" align="center" prop="actions">
+        <template #default="{ row }"> {{ row.actions?.length }}个 </template>
+      </el-table-column>
       <el-table-column
         label="创建时间"
         align="center"
-- 
Gitee


From 6b99fdb41fec199ea8f825ee7d69a7ad74dfe9ed Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sat, 29 Mar 2025 12:07:27 +0800
Subject: [PATCH 10/18] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=E3=80=91IoT:=20=E5=9C=BA=E6=99=AF=E8=81=94=E5=8A=A8?=
 =?UTF-8?q?=E4=BA=A7=E5=93=81=E8=AE=BE=E5=A4=87=E4=BF=A1=E6=81=AF=E5=9B=9E?=
 =?UTF-8?q?=E6=98=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/iot/device/device/index.ts            | 11 ++++
 src/api/iot/product/product/index.ts          |  5 ++
 .../components/action/ActionExecutor.vue      | 62 ++++++++++++++++--
 .../components/listener/DeviceListener.vue    | 65 ++++++++++++++++++-
 4 files changed, 136 insertions(+), 7 deletions(-)

diff --git a/src/api/iot/device/device/index.ts b/src/api/iot/device/device/index.ts
index 252ea433c..b32eaf642 100644
--- a/src/api/iot/device/device/index.ts
+++ b/src/api/iot/device/device/index.ts
@@ -165,5 +165,16 @@ export const DeviceApi = {
   // 获取设备MQTT连接参数
   getMqttConnectionParams: async (deviceId: number) => {
     return await request.get({ url: `/iot/device/mqtt-connection-params`, params: { deviceId } })
+  },
+
+  // 根据ProductKey和DeviceNames获取设备列表
+  getDevicesByProductKeyAndNames: async (productKey: string, deviceNames: string[]) => {
+    return await request.get({
+      url: `/iot/device/get-by-product-key-and-names`,
+      params: {
+        productKey,
+        deviceNames: deviceNames.join(',')
+      }
+    })
   }
 }
diff --git a/src/api/iot/product/product/index.ts b/src/api/iot/product/product/index.ts
index 496fb049b..f03339d1a 100644
--- a/src/api/iot/product/product/index.ts
+++ b/src/api/iot/product/product/index.ts
@@ -78,5 +78,10 @@ export const ProductApi = {
   // 查询产品（精简）列表
   getSimpleProductList() {
     return request.get({ url: '/iot/product/simple-list' })
+  },
+  
+  // 根据ProductKey获取产品信息
+  getProductByKey: async (productKey: string) => {
+    return await request.get({ url: `/iot/product/get-by-key`, params: { productKey } })
   }
 }
diff --git a/src/views/iot/rule/scene/components/action/ActionExecutor.vue b/src/views/iot/rule/scene/components/action/ActionExecutor.vue
index c4433b602..3d9e4d4ac 100644
--- a/src/views/iot/rule/scene/components/action/ActionExecutor.vue
+++ b/src/views/iot/rule/scene/components/action/ActionExecutor.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="m-10px">
-    <!-- TODO puhui999: 产品设备回显 -->
+    <!-- 产品设备回显区域 -->
     <div class="relative bg-[#eff3f7] h-50px flex items-center px-10px">
       <div class="flex items-center mr-60px">
         <span class="mr-10px">执行动作</span>
@@ -79,15 +79,14 @@
 
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core'
-import { isEmpty } from '@/utils/is'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import ProductTableSelect from '@/views/iot/product/product/components/ProductTableSelect.vue'
 import DeviceTableSelect from '@/views/iot/device/device/components/DeviceTableSelect.vue'
 import DeviceControlAction from './DeviceControlAction.vue'
 import AlertAction from './AlertAction.vue'
 import DataBridgeAction from './DataBridgeAction.vue'
-import { ProductVO } from '@/api/iot/product/product'
-import { DeviceVO } from '@/api/iot/device/device'
+import { ProductApi, ProductVO } from '@/api/iot/product/product'
+import { DeviceApi, DeviceVO } from '@/api/iot/device/device'
 import {
   ActionAlert,
   ActionConfig,
@@ -190,8 +189,61 @@ watch(
   { immediate: true }
 )
 
+/**
+ * 初始化产品回显信息
+ */
+const initProductInfo = async () => {
+  if (!actionConfig.value.deviceControl?.productKey) {
+    return
+  }
+
+  try {
+    // 使用新的API直接通过productKey获取产品信息
+    const productData = await ProductApi.getProductByKey(
+      actionConfig.value.deviceControl.productKey
+    )
+    if (productData) {
+      product.value = productData
+    }
+  } catch (error) {
+    console.error('获取产品信息失败:', error)
+  }
+}
+
+/**
+ * 初始化设备回显信息
+ */
+const initDeviceInfo = async () => {
+  if (
+    !actionConfig.value.deviceControl?.productKey ||
+    !actionConfig.value.deviceControl?.deviceNames?.length
+  ) {
+    return
+  }
+
+  try {
+    // 使用新的API直接通过productKey和deviceNames获取设备列表
+    const deviceData = await DeviceApi.getDevicesByProductKeyAndNames(
+      actionConfig.value.deviceControl.productKey,
+      actionConfig.value.deviceControl.deviceNames
+    )
+
+    if (deviceData && deviceData.length > 0) {
+      deviceList.value = deviceData
+    }
+  } catch (error) {
+    console.error('获取设备信息失败:', error)
+  }
+}
+
 /** 初始化 */
-onMounted(() => {
+onMounted(async () => {
   initActionConfig()
+
+  // 初始化产品和设备回显
+  if (actionConfig.value.deviceControl) {
+    await initProductInfo()
+    await initDeviceInfo()
+  }
 })
 </script>
diff --git a/src/views/iot/rule/scene/components/listener/DeviceListener.vue b/src/views/iot/rule/scene/components/listener/DeviceListener.vue
index 1c5d32f45..6595033ce 100644
--- a/src/views/iot/rule/scene/components/listener/DeviceListener.vue
+++ b/src/views/iot/rule/scene/components/listener/DeviceListener.vue
@@ -144,8 +144,8 @@ import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import DeviceListenerCondition from './DeviceListenerCondition.vue'
 import ProductTableSelect from '@/views/iot/product/product/components/ProductTableSelect.vue'
 import DeviceTableSelect from '@/views/iot/device/device/components/DeviceTableSelect.vue'
-import { ProductVO } from '@/api/iot/product/product'
-import { DeviceVO } from '@/api/iot/device/device'
+import { ProductApi, ProductVO } from '@/api/iot/product/product'
+import { DeviceApi, DeviceVO } from '@/api/iot/device/device'
 import { ThingModelApi } from '@/api/iot/thingmodel'
 import {
   IotDeviceMessageIdentifierEnum,
@@ -219,9 +219,56 @@ const openDeviceSelect = () => {
   deviceTableSelectRef.value?.open()
 }
 
+/**
+ * 初始化产品回显信息
+ */
+const initProductInfo = async () => {
+  if (!triggerConfig.value.productKey) {
+    return
+  }
+
+  try {
+    // 使用新的API直接通过productKey获取产品信息
+    const productData = await ProductApi.getProductByKey(triggerConfig.value.productKey)
+    if (productData) {
+      product.value = productData
+      // 加载物模型数据
+      await getThingModelTSL()
+    }
+  } catch (error) {
+    console.error('获取产品信息失败:', error)
+  }
+}
+
+/**
+ * 初始化设备回显信息
+ */
+const initDeviceInfo = async () => {
+  if (!triggerConfig.value.productKey || !triggerConfig.value.deviceNames?.length) {
+    return
+  }
+
+  try {
+    // 使用新的API直接通过productKey和deviceNames获取设备列表
+    const deviceData = await DeviceApi.getDevicesByProductKeyAndNames(
+      triggerConfig.value.productKey,
+      triggerConfig.value.deviceNames
+    )
+
+    if (deviceData && deviceData.length > 0) {
+      deviceList.value = deviceData
+    }
+  } catch (error) {
+    console.error('获取设备信息失败:', error)
+  }
+}
+
 /** 获取产品物模型 */
 const thingModelTSL = ref<any>()
 const thingModels = computed(() => (condition: TriggerCondition) => {
+  if (isEmpty(thingModelTSL.value)) {
+    return []
+  }
   switch (condition.type) {
     case IotDeviceMessageTypeEnum.PROPERTY:
       return thingModelTSL.value.properties
@@ -239,4 +286,18 @@ const getThingModelTSL = async () => {
   }
   thingModelTSL.value = await ThingModelApi.getThingModelTSLByProductId(product.value.id)
 }
+
+/** 初始化 */
+onMounted(async () => {
+  // 初始化产品和设备回显
+  if (triggerConfig.value) {
+    // 初始化conditions数组，如果不存在
+    if (!triggerConfig.value.conditions) {
+      triggerConfig.value.conditions = []
+    }
+
+    await initProductInfo()
+    await initDeviceInfo()
+  }
+})
 </script>
-- 
Gitee


From 279d88e7298f1ccd5980d27c75a293be70a4d96b Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sat, 29 Mar 2025 12:52:26 +0800
Subject: [PATCH 11/18] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=E3=80=91IoT:=20=E5=9C=BA=E6=99=AF=E8=81=94=E5=8A=A8?=
 =?UTF-8?q?=E6=89=A7=E8=A1=8C=E5=99=A8-=E6=95=B0=E6=8D=AE=E6=A1=A5?=
 =?UTF-8?q?=E6=A2=81=E9=80=89=E6=8B=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/iot/device/device/index.ts            |  2 +-
 src/api/iot/rule/databridge/index.ts          |  6 +--
 .../components/action/ActionExecutor.vue      |  1 +
 .../components/action/DataBridgeAction.vue    | 37 ++++++-------------
 4 files changed, 17 insertions(+), 29 deletions(-)

diff --git a/src/api/iot/device/device/index.ts b/src/api/iot/device/device/index.ts
index b32eaf642..6b5fa1564 100644
--- a/src/api/iot/device/device/index.ts
+++ b/src/api/iot/device/device/index.ts
@@ -170,7 +170,7 @@ export const DeviceApi = {
   // 根据ProductKey和DeviceNames获取设备列表
   getDevicesByProductKeyAndNames: async (productKey: string, deviceNames: string[]) => {
     return await request.get({
-      url: `/iot/device/get-by-product-key-and-names`,
+      url: `/iot/device/list-by-product-key-and-names`,
       params: {
         productKey,
         deviceNames: deviceNames.join(',')
diff --git a/src/api/iot/rule/databridge/index.ts b/src/api/iot/rule/databridge/index.ts
index b19b8e8cf..02568ccfe 100644
--- a/src/api/iot/rule/databridge/index.ts
+++ b/src/api/iot/rule/databridge/index.ts
@@ -124,8 +124,8 @@ export const DataBridgeApi = {
     return await request.delete({ url: `/iot/data-bridge/delete?id=` + id })
   },
 
-  // 导出数据桥梁 Excel
-  exportDataBridge: async (params) => {
-    return await request.download({ url: `/iot/data-bridge/export-excel`, params })
+  // 查询数据桥梁（精简）列表
+  getSimpleDataBridgeList() {
+    return request.get({ url: '/iot/data-bridge/simple-list' })
   }
 }
diff --git a/src/views/iot/rule/scene/components/action/ActionExecutor.vue b/src/views/iot/rule/scene/components/action/ActionExecutor.vue
index 3d9e4d4ac..79b2409a2 100644
--- a/src/views/iot/rule/scene/components/action/ActionExecutor.vue
+++ b/src/views/iot/rule/scene/components/action/ActionExecutor.vue
@@ -79,6 +79,7 @@
 
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core'
+import { isEmpty } from '@/utils/is'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import ProductTableSelect from '@/views/iot/product/product/components/ProductTableSelect.vue'
 import DeviceTableSelect from '@/views/iot/device/device/components/DeviceTableSelect.vue'
diff --git a/src/views/iot/rule/scene/components/action/DataBridgeAction.vue b/src/views/iot/rule/scene/components/action/DataBridgeAction.vue
index ffca12fd7..8a4f35aad 100644
--- a/src/views/iot/rule/scene/components/action/DataBridgeAction.vue
+++ b/src/views/iot/rule/scene/components/action/DataBridgeAction.vue
@@ -1,13 +1,8 @@
 <template>
   <div class="bg-[#dbe5f6] p-10px">
     <div class="flex items-center">
-      <span class="mr-10px w-80px">数据桥接</span>
-      <el-select
-        v-model="dataBridgeId"
-        class="!w-240px"
-        clearable
-        placeholder="选择数据桥接"
-      >
+      <span class="mr-10px w-80px">数据桥梁</span>
+      <el-select v-model="dataBridgeId" class="!w-240px" clearable placeholder="选择数据桥接">
         <el-option
           v-for="bridge in dataBridgeList"
           :key="bridge.id"
@@ -21,6 +16,7 @@
 
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core'
+import { DataBridgeApi } from '@/api/iot/rule/databridge'
 
 /** 数据桥接执行器组件 */
 defineOptions({ name: 'DataBridgeAction' })
@@ -29,23 +25,14 @@ const props = defineProps<{ modelValue: any }>()
 const emits = defineEmits(['update:modelValue'])
 const dataBridgeId = useVModel(props, 'modelValue', emits)
 
-// 模拟数据桥接列表，实际项目中应该从API获取
-const dataBridgeList = ref([
-  { id: 1, name: '数据桥接1' },
-  { id: 2, name: '数据桥接2' },
-  { id: 3, name: '数据桥接3' }
-])
+const dataBridgeList = ref<any[]>([]) // 数据桥接列表
 
-// 实际项目中，应该从API获取数据桥接列表
-// const getDataBridgeList = async () => {
-//   try {
-//     dataBridgeList.value = await DataBridgeApi.getSimpleList()
-//   } catch (error) {
-//     console.error('获取数据桥接列表失败', error)
-//   }
-// }
+// 获取数据桥接列表
+const getDataBridgeList = async () => {
+  dataBridgeList.value = await DataBridgeApi.getSimpleDataBridgeList()
+}
 
-// onMounted(() => {
-//   getDataBridgeList()
-// })
-</script> 
+onMounted(() => {
+  getDataBridgeList()
+})
+</script>
-- 
Gitee


From 24cdcd10c1f56788d9f026a814207076783a62d7 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sat, 29 Mar 2025 13:04:50 +0800
Subject: [PATCH 12/18] =?UTF-8?q?=E3=80=90=E4=BB=A3=E7=A0=81=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E3=80=91IoT:=20=E5=9C=BA=E6=99=AF=E8=81=94=E5=8A=A8?=
 =?UTF-8?q?=E6=B3=A8=E9=87=8A=E6=A0=BC=E5=BC=8F=E7=BB=9F=E4=B8=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../iot/rule/scene/components/action/ActionExecutor.vue     | 6 +++---
 src/views/iot/rule/scene/components/action/AlertAction.vue  | 4 ++--
 .../iot/rule/scene/components/action/DataBridgeAction.vue   | 4 ++--
 .../rule/scene/components/action/DeviceControlAction.vue    | 6 +++---
 .../iot/rule/scene/components/listener/DeviceListener.vue   | 1 +
 5 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/views/iot/rule/scene/components/action/ActionExecutor.vue b/src/views/iot/rule/scene/components/action/ActionExecutor.vue
index 79b2409a2..83cc99f1b 100644
--- a/src/views/iot/rule/scene/components/action/ActionExecutor.vue
+++ b/src/views/iot/rule/scene/components/action/ActionExecutor.vue
@@ -106,7 +106,7 @@ const actionConfig = useVModel(props, 'modelValue', emits) as Ref<ActionConfig>
 
 const message = useMessage()
 
-// 初始化执行器结构
+/** 初始化执行器结构 */
 const initActionConfig = () => {
   if (!actionConfig.value) {
     actionConfig.value = { type: IotRuleSceneActionTypeEnum.DEVICE_CONTROL } as ActionConfig
@@ -140,7 +140,7 @@ const initActionConfig = () => {
   }
 }
 
-// 产品和设备选择
+/** 产品和设备选择 */
 const productTableSelectRef = ref<InstanceType<typeof ProductTableSelect>>()
 const deviceTableSelectRef = ref<InstanceType<typeof DeviceTableSelect>>()
 const product = ref<ProductVO>()
@@ -181,7 +181,7 @@ const handleDeviceSelect = (val: DeviceVO[]) => {
   }
 }
 
-// 监听执行类型变化，初始化对应配置
+/** 监听执行类型变化，初始化对应配置 */
 watch(
   () => actionConfig.value.type,
   () => {
diff --git a/src/views/iot/rule/scene/components/action/AlertAction.vue b/src/views/iot/rule/scene/components/action/AlertAction.vue
index 5e4d7695d..1dcebd61c 100644
--- a/src/views/iot/rule/scene/components/action/AlertAction.vue
+++ b/src/views/iot/rule/scene/components/action/AlertAction.vue
@@ -64,7 +64,7 @@ const props = defineProps<{ modelValue: any }>()
 const emits = defineEmits(['update:modelValue'])
 const alertConfig = useVModel(props, 'modelValue', emits) as Ref<ActionAlert>
 
-// 初始化告警执行器结构
+/** 初始化告警执行器结构 */
 const initAlertConfig = () => {
   if (!alertConfig.value) {
     alertConfig.value = {
@@ -76,7 +76,7 @@ const initAlertConfig = () => {
   }
 }
 
-// 初始化
+/** 初始化 */
 onMounted(() => {
   initAlertConfig()
 })
diff --git a/src/views/iot/rule/scene/components/action/DataBridgeAction.vue b/src/views/iot/rule/scene/components/action/DataBridgeAction.vue
index 8a4f35aad..c429a073f 100644
--- a/src/views/iot/rule/scene/components/action/DataBridgeAction.vue
+++ b/src/views/iot/rule/scene/components/action/DataBridgeAction.vue
@@ -25,9 +25,9 @@ const props = defineProps<{ modelValue: any }>()
 const emits = defineEmits(['update:modelValue'])
 const dataBridgeId = useVModel(props, 'modelValue', emits)
 
-const dataBridgeList = ref<any[]>([]) // 数据桥接列表
+const dataBridgeList = ref<any[]>([]) /** 数据桥接列表 */
 
-// 获取数据桥接列表
+/** 获取数据桥接列表 */
 const getDataBridgeList = async () => {
   dataBridgeList.value = await DataBridgeApi.getSimpleDataBridgeList()
 }
diff --git a/src/views/iot/rule/scene/components/action/DeviceControlAction.vue b/src/views/iot/rule/scene/components/action/DeviceControlAction.vue
index 710ac6ecb..1b15cc43b 100644
--- a/src/views/iot/rule/scene/components/action/DeviceControlAction.vue
+++ b/src/views/iot/rule/scene/components/action/DeviceControlAction.vue
@@ -111,7 +111,7 @@ watch(
   { deep: true }
 )
 
-// 初始化设备控制执行器结构
+/** 初始化设备控制执行器结构 */
 const initDeviceControlConfig = () => {
   if (!deviceControlConfig.value) {
     deviceControlConfig.value = {
@@ -177,7 +177,7 @@ const getUnitName = computed(() => (identifier: string) => {
   return ''
 })
 
-// 监听 productId 变化
+/** 监听 productId 变化 */
 watch(
   () => props.productId,
   (newVal) => {
@@ -193,7 +193,7 @@ watch(
   { immediate: true }
 )
 
-// 监听消息类型变化
+/** 监听消息类型变化 */
 watch(
   () => deviceControlConfig.value.type,
   () => {
diff --git a/src/views/iot/rule/scene/components/listener/DeviceListener.vue b/src/views/iot/rule/scene/components/listener/DeviceListener.vue
index 6595033ce..36c55b780 100644
--- a/src/views/iot/rule/scene/components/listener/DeviceListener.vue
+++ b/src/views/iot/rule/scene/components/listener/DeviceListener.vue
@@ -194,6 +194,7 @@ const removeConditionParameter = (
   conditionParameters.splice(index, 1)
 }
 
+/** 产品和设备选择引用 */
 const productTableSelectRef = ref<InstanceType<typeof ProductTableSelect>>()
 const deviceTableSelectRef = ref<InstanceType<typeof DeviceTableSelect>>()
 const product = ref<ProductVO>()
-- 
Gitee


From f52f4bcc36f3dd20ed7f26da56b651b098876635 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sat, 29 Mar 2025 13:49:51 +0800
Subject: [PATCH 13/18] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=E3=80=91IoT:=20=E5=9C=BA=E6=99=AF=E8=81=94=E5=8A=A8?=
 =?UTF-8?q?=E6=89=A7=E8=A1=8C=E5=99=A8=E6=B6=88=E6=81=AF=E7=B1=BB=E5=9E=8B?=
 =?UTF-8?q?=E4=B8=BA=E6=9C=8D=E5=8A=A1=E7=9A=84=E6=83=85=E5=86=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/action/DeviceControlAction.vue | 72 +++++++++++++------
 1 file changed, 49 insertions(+), 23 deletions(-)

diff --git a/src/views/iot/rule/scene/components/action/DeviceControlAction.vue b/src/views/iot/rule/scene/components/action/DeviceControlAction.vue
index 1b15cc43b..4b4fe84aa 100644
--- a/src/views/iot/rule/scene/components/action/DeviceControlAction.vue
+++ b/src/views/iot/rule/scene/components/action/DeviceControlAction.vue
@@ -1,24 +1,32 @@
 <template>
   <div class="bg-[#dbe5f6] flex p-10px">
     <div class="flex flex-col items-center justify-center mr-10px h-a">
-      <el-select
-        v-model="deviceControlConfig.type"
-        @change="deviceControlConfig.data = {}"
-        class="!w-160px"
-        clearable
-        placeholder=""
-      >
+      <el-select v-model="deviceControlConfig.type" class="!w-160px" clearable placeholder="">
         <el-option label="属性" :value="IotDeviceMessageTypeEnum.PROPERTY" />
         <el-option label="服务" :value="IotDeviceMessageTypeEnum.SERVICE" />
       </el-select>
     </div>
-    <!-- TODO puhui999: 处理服务参数 -->
     <div class="">
       <div
         class="flex items-center justify-around mb-10px last:mb-0"
         v-for="(parameter, index) in parameters"
         :key="index"
       >
+        <!-- 选择服务 -->
+        <el-select
+          v-if="IotDeviceMessageTypeEnum.SERVICE === deviceControlConfig.type"
+          v-model="parameter.identifier0"
+          class="!w-240px mr-10px"
+          clearable
+          placeholder="请选择服务"
+        >
+          <el-option
+            v-for="thingModel in getThingModelTSLServices"
+            :key="thingModel.identifier"
+            :label="thingModel.name"
+            :value="thingModel.identifier"
+          />
+        </el-select>
         <el-select
           v-model="parameter.identifier"
           class="!w-240px mr-10px"
@@ -26,7 +34,7 @@
           placeholder="请选择物模型"
         >
           <el-option
-            v-for="thingModel in thingModels"
+            v-for="thingModel in thingModels(parameter?.identifier0)"
             :key="thingModel.identifier"
             :label="thingModel.name"
             :value="thingModel.identifier"
@@ -79,7 +87,7 @@ const deviceControlConfig = useVModel(props, 'modelValue', emits) as Ref<ActionD
 const message = useMessage()
 
 /** 执行器参数 */
-const parameters = ref<{ identifier: string; value: any }[]>([])
+const parameters = ref<{ identifier: string; value: any; identifier0?: string }[]>([])
 const addParameter = () => {
   if (!props.productId) {
     message.warning('请先选择一个产品')
@@ -104,9 +112,19 @@ watch(
       if (isEmpty(parameter.identifier)) {
         break
       }
+      // 单独处理服务的情况
+      if (IotDeviceMessageTypeEnum.SERVICE === deviceControlConfig.value.type) {
+        if (!parameter.identifier0) {
+          continue
+        }
+        deviceControlConfig.value.data[parameter.identifier0] = {
+          identifier: parameter.identifier,
+          value: parameter.value
+        }
+        continue
+      }
       deviceControlConfig.value.data[parameter.identifier] = parameter.value
     }
-    console.log(deviceControlConfig.value)
   },
   { deep: true }
 )
@@ -122,6 +140,16 @@ const initDeviceControlConfig = () => {
       data: {}
     } as ActionDeviceControl
   } else {
+    // 单独处理服务的情况
+    if (IotDeviceMessageTypeEnum.SERVICE === deviceControlConfig.value.type) {
+      // 参数回显
+      parameters.value = Object.entries(deviceControlConfig.value.data).map(([key, value]) => ({
+        identifier0: key,
+        identifier: value.identifier,
+        value: value.value
+      }))
+      return
+    }
     // 参数回显
     parameters.value = Object.entries(deviceControlConfig.value.data).map(([key, value]) => ({
       identifier: key,
@@ -147,33 +175,31 @@ const getThingModelTSL = async () => {
     console.error('获取物模型失败', error)
   }
 }
-const thingModels = computed((): any[] => {
+const thingModels = computed(() => (identifier?: string): any[] => {
   if (isEmpty(thingModelTSL.value)) {
     return []
   }
   switch (deviceControlConfig.value.type) {
     case IotDeviceMessageTypeEnum.PROPERTY:
-      return thingModelTSL.value.properties
-    // TODO puhui999: 服务和事件后续考虑
+      return thingModelTSL.value?.properties || []
     case IotDeviceMessageTypeEnum.SERVICE:
-      return thingModelTSL.value.services
-    case IotDeviceMessageTypeEnum.EVENT:
-      return thingModelTSL.value.events
+      // TODO puhui999: 要限制只过滤出 set 类型的 service 吗？
+      const service = thingModelTSL.value.services.find(
+        (item: any) => item.identifier === identifier
+      )
+      return service?.inputParams || []
   }
   return []
 })
+/** 获取物模型服务 */
+const getThingModelTSLServices = computed(() => thingModelTSL.value?.services || [])
 /** 获得属性单位 */
 const getUnitName = computed(() => (identifier: string) => {
-  const model = thingModels.value?.find((item: any) => item.identifier === identifier)
+  const model = thingModels.value().find((item: any) => item.identifier === identifier)
   // 属性
   if (model?.dataSpecs) {
     return model.dataSpecs.unitName
   }
-  // TODO puhui999: 先不考虑服务和事件的情况
-  // 服务和事件
-  // if (model?.outputParams) {
-  //   return model.dataSpecs.unitName
-  // }
   return ''
 })
 
-- 
Gitee


From c8fce1e2549f55890b8b5afa8b6977fd1196de06 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sat, 29 Mar 2025 14:34:56 +0800
Subject: [PATCH 14/18] =?UTF-8?q?=E3=80=90=E4=BB=A3=E7=A0=81=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E3=80=91IoT:=20=E5=9C=BA=E6=99=AF=E8=81=94=E5=8A=A8?=
 =?UTF-8?q?=E5=BD=BB=E5=BA=95=E4=BF=AE=E5=A4=8D=E7=B4=A2=E5=BC=95=E9=87=8D?=
 =?UTF-8?q?=E7=94=A8=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/iot/rule/scene/scene.types.ts      |  2 ++
 src/views/iot/rule/scene/RuleSceneForm.vue | 13 ++++++++++---
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/api/iot/rule/scene/scene.types.ts b/src/api/iot/rule/scene/scene.types.ts
index 990822b9f..336c1d584 100644
--- a/src/api/iot/rule/scene/scene.types.ts
+++ b/src/api/iot/rule/scene/scene.types.ts
@@ -72,6 +72,7 @@ interface TriggerCondition {
 
 // 触发器配置
 interface TriggerConfig {
+  key: any // 解决组件索引重用
   type: number // 触发类型
   productKey: string // 产品标识
   deviceNames: string[] // 设备名称数组
@@ -98,6 +99,7 @@ interface ActionAlert {
 
 // 执行器配置
 interface ActionConfig {
+  key: any // 解决组件索引重用
   type: number // 执行类型
   deviceControl?: ActionDeviceControl // 设备控制
   alert?: ActionAlert // 告警执行
diff --git a/src/views/iot/rule/scene/RuleSceneForm.vue b/src/views/iot/rule/scene/RuleSceneForm.vue
index c66d422d8..c6d13c560 100644
--- a/src/views/iot/rule/scene/RuleSceneForm.vue
+++ b/src/views/iot/rule/scene/RuleSceneForm.vue
@@ -35,7 +35,7 @@
           <el-divider content-position="left">触发器配置</el-divider>
           <device-listener
             v-for="(trigger, index) in formData.triggers"
-            :key="`trigger-${index}-${Date.now()}`"
+            :key="trigger.key"
             :model-value="trigger"
             @update:model-value="(val) => (formData.triggers[index] = val)"
             class="mb-10px"
@@ -52,7 +52,7 @@
           <el-divider content-position="left">执行器配置</el-divider>
           <action-executor
             v-for="(action, index) in formData.actions"
-            :key="`action-${index}-${Date.now()}`"
+            :key="action.key"
             :model-value="action"
             @update:model-value="(val) => (formData.actions[index] = val)"
             class="mb-10px"
@@ -88,6 +88,7 @@ import {
   TriggerConfig
 } from '@/api/iot/rule/scene/scene.types'
 import ActionExecutor from './components/action/ActionExecutor.vue'
+import { generateUUID } from '@/utils'
 
 /** IoT 场景联动表单 */
 defineOptions({ name: 'IotRuleSceneForm' })
@@ -115,6 +116,7 @@ const formRef = ref() // 表单 Ref
 /** 添加触发器 */
 const addTrigger = () => {
   formData.value.triggers.push({
+    key: generateUUID(), // 解决组件索引重用
     type: IotRuleSceneTriggerTypeEnum.DEVICE,
     productKey: '',
     deviceNames: [],
@@ -135,6 +137,7 @@ const removeTrigger = (index: number) => {
 /** 添加执行器 */
 const addAction = () => {
   formData.value.actions.push({
+    key: generateUUID(), // 解决组件索引重用
     type: IotRuleSceneActionTypeEnum.DEVICE_CONTROL
   } as ActionConfig)
 }
@@ -153,7 +156,11 @@ const open = async (type: string, id?: number) => {
   if (id) {
     formLoading.value = true
     try {
-      formData.value = await RuleSceneApi.getRuleScene(id)
+      const data = (await RuleSceneApi.getRuleScene(id)) as IotRuleScene
+      // 解决组件索引重用
+      data.triggers?.forEach((item) => (item.key = generateUUID()))
+      data.actions?.forEach((item) => (item.key = generateUUID()))
+      formData.value = data
     } finally {
       formLoading.value = false
     }
-- 
Gitee


From 04cfded36faad82a96423fefe25222b339cac1a4 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sat, 29 Mar 2025 14:35:33 +0800
Subject: [PATCH 15/18] =?UTF-8?q?=E3=80=90=E4=BB=A3=E7=A0=81=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E3=80=91IoT:=20=E5=9C=BA=E6=99=AF=E8=81=94=E5=8A=A8?=
 =?UTF-8?q?=E6=89=A7=E8=A1=8C=E5=99=A8=E8=AE=BE=E5=A4=87=E6=8E=A7=E5=88=B6?=
 =?UTF-8?q?=E5=99=A8=E4=BF=A1=E6=81=AF=E5=9B=9E=E6=98=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/action/ActionExecutor.vue      |  1 +
 .../components/action/DeviceControlAction.vue | 23 ++++++++-----------
 2 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/src/views/iot/rule/scene/components/action/ActionExecutor.vue b/src/views/iot/rule/scene/components/action/ActionExecutor.vue
index 83cc99f1b..3fa708190 100644
--- a/src/views/iot/rule/scene/components/action/ActionExecutor.vue
+++ b/src/views/iot/rule/scene/components/action/ActionExecutor.vue
@@ -49,6 +49,7 @@
       v-if="actionConfig.type === IotRuleSceneActionTypeEnum.DEVICE_CONTROL"
       :model-value="actionConfig.deviceControl"
       :product-id="product?.id"
+      :product-key="product?.productKey"
       @update:model-value="(val) => (actionConfig.deviceControl = val)"
     />
 
diff --git a/src/views/iot/rule/scene/components/action/DeviceControlAction.vue b/src/views/iot/rule/scene/components/action/DeviceControlAction.vue
index 4b4fe84aa..6bd1528fe 100644
--- a/src/views/iot/rule/scene/components/action/DeviceControlAction.vue
+++ b/src/views/iot/rule/scene/components/action/DeviceControlAction.vue
@@ -80,6 +80,7 @@ defineOptions({ name: 'DeviceControlAction' })
 const props = defineProps<{
   modelValue: any
   productId?: number
+  productKey?: string
 }>()
 const emits = defineEmits(['update:modelValue'])
 const deviceControlConfig = useVModel(props, 'modelValue', emits) as Ref<ActionDeviceControl>
@@ -169,11 +170,7 @@ const getThingModelTSL = async () => {
   if (!props.productId) {
     return
   }
-  try {
-    thingModelTSL.value = await ThingModelApi.getThingModelTSLByProductId(props.productId)
-  } catch (error) {
-    console.error('获取物模型失败', error)
-  }
+  thingModelTSL.value = await ThingModelApi.getThingModelTSLByProductId(props.productId)
 }
 const thingModels = computed(() => (identifier?: string): any[] => {
   if (isEmpty(thingModelTSL.value)) {
@@ -183,8 +180,7 @@ const thingModels = computed(() => (identifier?: string): any[] => {
     case IotDeviceMessageTypeEnum.PROPERTY:
       return thingModelTSL.value?.properties || []
     case IotDeviceMessageTypeEnum.SERVICE:
-      // TODO puhui999: 要限制只过滤出 set 类型的 service 吗？
-      const service = thingModelTSL.value.services.find(
+      const service = thingModelTSL.value.services?.find(
         (item: any) => item.identifier === identifier
       )
       return service?.inputParams || []
@@ -200,23 +196,22 @@ const getUnitName = computed(() => (identifier: string) => {
   if (model?.dataSpecs) {
     return model.dataSpecs.unitName
   }
+  // TODO puhui999: enum、bool、struct 类型数据处理
   return ''
 })
 
 /** 监听 productId 变化 */
 watch(
   () => props.productId,
-  (newVal) => {
-    if (!newVal) {
-      thingModelTSL.value = undefined
-      parameters.value = []
+  () => {
+    getThingModelTSL()
+    if (deviceControlConfig.value && deviceControlConfig.value.productKey === props.productKey) {
       return
     }
-    getThingModelTSL()
     // 当产品ID变化时，清空原有数据
     deviceControlConfig.value.data = {}
-  },
-  { immediate: true }
+    parameters.value = []
+  }
 )
 
 /** 监听消息类型变化 */
-- 
Gitee


From 4eb7188ecfd72b4c9223d504724ae126a2dcfba9 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sat, 29 Mar 2025 17:40:21 +0800
Subject: [PATCH 16/18] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=E3=80=91IoT:=20=E5=9C=BA=E6=99=AF=E8=81=94=E5=8A=A8?=
 =?UTF-8?q?=E7=89=A9=E6=A8=A1=E5=9E=8B=E5=B1=9E=E6=80=A7=E5=8F=82=E6=95=B0?=
 =?UTF-8?q?=E8=BE=93=E5=85=A5=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../scene/components/ThingModelParamInput.vue | 118 ++++++++++++++++++
 .../components/action/DeviceControlAction.vue |  32 ++---
 2 files changed, 131 insertions(+), 19 deletions(-)
 create mode 100644 src/views/iot/rule/scene/components/ThingModelParamInput.vue

diff --git a/src/views/iot/rule/scene/components/ThingModelParamInput.vue b/src/views/iot/rule/scene/components/ThingModelParamInput.vue
new file mode 100644
index 000000000..bc602da5a
--- /dev/null
+++ b/src/views/iot/rule/scene/components/ThingModelParamInput.vue
@@ -0,0 +1,118 @@
+<template>
+  <div class="flex items-center">
+    <!-- 数值类型输入框 -->
+    <template v-if="isNumeric">
+      <el-input
+        v-model="value"
+        class="w-1/1!"
+        :placeholder="`请输入${dataSpecs.unitName ? dataSpecs.unitName : '数值'}`"
+      >
+        <template #append> {{ dataSpecs.unit }} </template>
+      </el-input>
+    </template>
+
+    <!-- 布尔类型使用开关 -->
+    <template v-else-if="isBool">
+      <el-switch
+        v-model="value"
+        size="large"
+        :active-text="dataSpecsList[1].name"
+        :active-value="dataSpecsList[1].value"
+        :inactive-text="dataSpecsList[0].name"
+        :inactive-value="dataSpecsList[0].value"
+      />
+    </template>
+
+    <!-- 枚举类型使用下拉选择 -->
+    <template v-else-if="isEnum">
+      <el-select class="w-1/1!" v-model="value">
+        <el-option
+          v-for="(item, index) in dataSpecsList"
+          :key="index"
+          :label="item.name"
+          :value="item.value"
+        />
+      </el-select>
+    </template>
+
+    <!-- 时间类型使用时间选择器 -->
+    <template v-else-if="isDate">
+      <el-date-picker
+        class="w-1/1!"
+        v-model="value"
+        type="datetime"
+        value-format="YYYY-MM-DD HH:mm:ss"
+        placeholder="选择日期时间"
+      />
+    </template>
+
+    <!-- 文本类型使用文本输入框 -->
+    <template v-else-if="isText">
+      <el-input
+        class="w-1/1!"
+        v-model="value"
+        :maxlength="dataSpecs?.length"
+        :show-word-limit="true"
+        placeholder="请输入文本"
+      />
+    </template>
+
+    <!-- array、struct 直接输入 -->
+    <template v-else>
+      <el-input class="w-1/1!" v-model="value" placeholder="请输入值" />
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useVModel } from '@vueuse/core'
+import { DataSpecsDataType } from '@/views/iot/thingmodel/config'
+
+/** 物模型属性参数输入组件 */
+defineOptions({ name: 'ThingModelParamInput' })
+
+const props = defineProps<{
+  modelValue: any // 物模型的值
+  thingModel: any // 物模型
+}>()
+
+const emits = defineEmits(['update:modelValue', 'change'])
+const value = useVModel(props, 'modelValue', emits)
+
+/** 计算属性：判断数据类型 */
+const isNumeric = computed(() =>
+  [DataSpecsDataType.INT, DataSpecsDataType.FLOAT, DataSpecsDataType.DOUBLE].includes(
+    props.thingModel?.dataType as any
+  )
+)
+const isBool = computed(() => props.thingModel?.dataType === DataSpecsDataType.BOOL)
+const isEnum = computed(() => props.thingModel?.dataType === DataSpecsDataType.ENUM)
+const isDate = computed(() => props.thingModel?.dataType === DataSpecsDataType.DATE)
+const isText = computed(() => props.thingModel?.dataType === DataSpecsDataType.TEXT)
+/** 获取数据规格 */
+const dataSpecs = computed(() => {
+  if (isNumeric.value || isDate.value || isText.value) {
+    return props.thingModel?.dataSpecs
+  }
+  return {}
+})
+const dataSpecsList = computed(() => {
+  if (isBool.value || isEnum.value) {
+    return props.thingModel?.dataSpecsList
+  }
+  return []
+})
+
+/** 物模型切换重置值 */
+watch(
+  () => props.thingModel?.dataType,
+  (_, oldValue) => {
+    if (!oldValue) {
+      return
+    }
+    value.value = undefined
+  },
+  { deep: true }
+)
+</script>
diff --git a/src/views/iot/rule/scene/components/action/DeviceControlAction.vue b/src/views/iot/rule/scene/components/action/DeviceControlAction.vue
index 6bd1528fe..1e5936a3e 100644
--- a/src/views/iot/rule/scene/components/action/DeviceControlAction.vue
+++ b/src/views/iot/rule/scene/components/action/DeviceControlAction.vue
@@ -40,12 +40,15 @@
             :value="thingModel.identifier"
           />
         </el-select>
-        <!-- TODO puhui999: 输入框调整，数值型使用数字输入框校验边界，bool 值使用开关，枚举值使用下拉选择，时间值使用时间选择器 -->
-        <el-input v-model="parameter.value" class="!w-240px mr-10px" placeholder="请输入值">
-          <template v-if="getUnitName(parameter.identifier)" #append>
-            {{ getUnitName(parameter.identifier) }}
-          </template>
-        </el-input>
+        <ThingModelParamInput
+          class="!w-240px mr-10px"
+          v-model="parameter.value"
+          :thing-model="
+            thingModels(parameter?.identifier0)?.find(
+              (item) => item.identifier === parameter.identifier
+            )
+          "
+        />
         <el-tooltip content="删除参数" placement="top">
           <el-button type="danger" circle size="small" @click="removeParameter(index)">
             <Icon icon="ep:delete" />
@@ -66,13 +69,14 @@
 
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core'
+import { isEmpty } from '@/utils/is'
 import { ThingModelApi } from '@/api/iot/thingmodel'
 import {
   ActionDeviceControl,
   IotDeviceMessageIdentifierEnum,
   IotDeviceMessageTypeEnum
 } from '@/api/iot/rule/scene/scene.types'
-import { isEmpty } from '@/utils/is'
+import ThingModelParamInput from '../ThingModelParamInput.vue'
 
 /** 设备控制执行器组件 */
 defineOptions({ name: 'DeviceControlAction' })
@@ -94,8 +98,8 @@ const addParameter = () => {
     message.warning('请先选择一个产品')
     return
   }
-  if (parameters.value.length >= thingModels.value.length) {
-    message.warning(`该产品只有${thingModels.value.length}个物模型！！！`)
+  if (parameters.value.length >= thingModels.value().length) {
+    message.warning(`该产品只有${thingModels.value().length}个物模型！！！`)
     return
   }
   parameters.value.push({ identifier: '', value: undefined })
@@ -189,16 +193,6 @@ const thingModels = computed(() => (identifier?: string): any[] => {
 })
 /** 获取物模型服务 */
 const getThingModelTSLServices = computed(() => thingModelTSL.value?.services || [])
-/** 获得属性单位 */
-const getUnitName = computed(() => (identifier: string) => {
-  const model = thingModels.value().find((item: any) => item.identifier === identifier)
-  // 属性
-  if (model?.dataSpecs) {
-    return model.dataSpecs.unitName
-  }
-  // TODO puhui999: enum、bool、struct 类型数据处理
-  return ''
-})
 
 /** 监听 productId 变化 */
 watch(
-- 
Gitee


From f46540759f00ecf3d153f4f15971cdcd9906397b Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sat, 29 Mar 2025 20:27:38 +0800
Subject: [PATCH 17/18] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=E3=80=91IoT:=20=E5=9C=BA=E6=99=AF=E8=81=94=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/iot/rule/scene/scene.types.ts         |   3 +-
 .../device/components/DeviceTableSelect.vue   |   2 +-
 .../product/components/ProductTableSelect.vue |   2 +-
 src/views/iot/rule/scene/RuleSceneForm.vue    |   2 +-
 .../components/action/ActionExecutor.vue      | 140 +++++-----
 .../components/listener/DeviceListener.vue    | 250 +++++++++---------
 .../listener/DeviceListenerCondition.vue      |  87 +++---
 7 files changed, 249 insertions(+), 237 deletions(-)

diff --git a/src/api/iot/rule/scene/scene.types.ts b/src/api/iot/rule/scene/scene.types.ts
index 336c1d584..76cdf9a3d 100644
--- a/src/api/iot/rule/scene/scene.types.ts
+++ b/src/api/iot/rule/scene/scene.types.ts
@@ -58,7 +58,8 @@ interface TenantBaseDO {
 
 // 触发条件参数
 interface TriggerConditionParameter {
-  identifier: string // 标识符（属性、事件、服务）
+  identifier0: string // 标识符（事件、服务）
+  identifier: string // 标识符（属性）
   operator: string // 操作符
   value: string // 比较值
 }
diff --git a/src/views/iot/device/device/components/DeviceTableSelect.vue b/src/views/iot/device/device/components/DeviceTableSelect.vue
index f68194029..73c252da5 100644
--- a/src/views/iot/device/device/components/DeviceTableSelect.vue
+++ b/src/views/iot/device/device/components/DeviceTableSelect.vue
@@ -117,7 +117,7 @@
           <template #default="scope">
             <el-radio
               v-model="selectedId"
-              :label="scope.row.id"
+              :value="scope.row.id"
               @change="() => handleRadioChange(scope.row)"
             >
               &nbsp;
diff --git a/src/views/iot/product/product/components/ProductTableSelect.vue b/src/views/iot/product/product/components/ProductTableSelect.vue
index f43d67786..a1ab0f2ba 100644
--- a/src/views/iot/product/product/components/ProductTableSelect.vue
+++ b/src/views/iot/product/product/components/ProductTableSelect.vue
@@ -57,7 +57,7 @@
           <template #default="scope">
             <el-radio
               v-model="selectedId"
-              :label="scope.row.id"
+              :value="scope.row.id"
               @change="() => handleRadioChange(scope.row)"
             >
               &nbsp;
diff --git a/src/views/iot/rule/scene/RuleSceneForm.vue b/src/views/iot/rule/scene/RuleSceneForm.vue
index c6d13c560..5c0c8e333 100644
--- a/src/views/iot/rule/scene/RuleSceneForm.vue
+++ b/src/views/iot/rule/scene/RuleSceneForm.vue
@@ -19,7 +19,7 @@
               <el-radio
                 v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
                 :key="dict.value"
-                :label="dict.value"
+                :value="dict.value"
               >
                 {{ dict.label }}
               </el-radio>
diff --git a/src/views/iot/rule/scene/components/action/ActionExecutor.vue b/src/views/iot/rule/scene/components/action/ActionExecutor.vue
index 3fa708190..c01db3c6b 100644
--- a/src/views/iot/rule/scene/components/action/ActionExecutor.vue
+++ b/src/views/iot/rule/scene/components/action/ActionExecutor.vue
@@ -1,81 +1,83 @@
 <template>
-  <div class="m-10px">
-    <!-- 产品设备回显区域 -->
-    <div class="relative bg-[#eff3f7] h-50px flex items-center px-10px">
-      <div class="flex items-center mr-60px">
-        <span class="mr-10px">执行动作</span>
-        <el-select
-          v-model="actionConfig.type"
-          class="!w-240px"
-          clearable
-          placeholder="请选择执行类型"
+  <div>
+    <div class="m-10px">
+      <!-- 产品设备回显区域 -->
+      <div class="relative bg-[#eff3f7] h-50px flex items-center px-10px">
+        <div class="flex items-center mr-60px">
+          <span class="mr-10px">执行动作</span>
+          <el-select
+            v-model="actionConfig.type"
+            class="!w-240px"
+            clearable
+            placeholder="请选择执行类型"
+          >
+            <el-option
+              v-for="dict in getIntDictOptions(DICT_TYPE.IOT_RULE_SCENE_ACTION_TYPE_ENUM)"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </div>
+        <div
+          v-if="actionConfig.type === IotRuleSceneActionTypeEnum.DEVICE_CONTROL"
+          class="flex items-center mr-60px"
         >
-          <el-option
-            v-for="dict in getIntDictOptions(DICT_TYPE.IOT_RULE_SCENE_ACTION_TYPE_ENUM)"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </div>
-      <div
-        v-if="actionConfig.type === IotRuleSceneActionTypeEnum.DEVICE_CONTROL"
-        class="flex items-center mr-60px"
-      >
-        <span class="mr-10px">产品</span>
-        <el-button type="primary" @click="handleSelectProduct" size="small" plain>
-          {{ product ? product.name : '选择产品' }}
-        </el-button>
+          <span class="mr-10px">产品</span>
+          <el-button type="primary" @click="handleSelectProduct" size="small" plain>
+            {{ product ? product.name : '选择产品' }}
+          </el-button>
+        </div>
+        <div
+          v-if="actionConfig.type === IotRuleSceneActionTypeEnum.DEVICE_CONTROL"
+          class="flex items-center mr-60px"
+        >
+          <span class="mr-10px">设备</span>
+          <el-button type="primary" @click="handleSelectDevice" size="small" plain>
+            {{ isEmpty(deviceList) ? '选择设备' : deviceList.map((d) => d.deviceName).join(',') }}
+          </el-button>
+        </div>
+        <!-- 删除执行器 -->
+        <div class="absolute top-auto right-16px bottom-auto">
+          <el-tooltip content="删除执行器" placement="top">
+            <slot></slot>
+          </el-tooltip>
+        </div>
       </div>
-      <div
+
+      <!-- 设备控制执行器 -->
+      <DeviceControlAction
         v-if="actionConfig.type === IotRuleSceneActionTypeEnum.DEVICE_CONTROL"
-        class="flex items-center mr-60px"
-      >
-        <span class="mr-10px">设备</span>
-        <el-button type="primary" @click="handleSelectDevice" size="small" plain>
-          {{ isEmpty(deviceList) ? '选择设备' : deviceList.map((d) => d.deviceName).join(',') }}
-        </el-button>
-      </div>
-      <!-- 删除执行器 -->
-      <div class="absolute top-auto right-16px bottom-auto">
-        <el-tooltip content="删除执行器" placement="top">
-          <slot></slot>
-        </el-tooltip>
-      </div>
+        :model-value="actionConfig.deviceControl"
+        :product-id="product?.id"
+        :product-key="product?.productKey"
+        @update:model-value="(val) => (actionConfig.deviceControl = val)"
+      />
+
+      <!-- 告警执行器 -->
+      <AlertAction
+        v-else-if="actionConfig.type === IotRuleSceneActionTypeEnum.ALERT"
+        :model-value="actionConfig.alert"
+        @update:model-value="(val) => (actionConfig.alert = val)"
+      />
+
+      <!-- 数据桥接执行器 -->
+      <DataBridgeAction
+        v-else-if="actionConfig.type === IotRuleSceneActionTypeEnum.DATA_BRIDGE"
+        :model-value="actionConfig.dataBridgeId"
+        @update:model-value="(val) => (actionConfig.dataBridgeId = val)"
+      />
     </div>
 
-    <!-- 设备控制执行器 -->
-    <DeviceControlAction
-      v-if="actionConfig.type === IotRuleSceneActionTypeEnum.DEVICE_CONTROL"
-      :model-value="actionConfig.deviceControl"
+    <!-- 产品、设备的选择 -->
+    <ProductTableSelect ref="productTableSelectRef" @success="handleProductSelect" />
+    <DeviceTableSelect
+      ref="deviceTableSelectRef"
+      multiple
       :product-id="product?.id"
-      :product-key="product?.productKey"
-      @update:model-value="(val) => (actionConfig.deviceControl = val)"
-    />
-
-    <!-- 告警执行器 -->
-    <AlertAction
-      v-else-if="actionConfig.type === IotRuleSceneActionTypeEnum.ALERT"
-      :model-value="actionConfig.alert"
-      @update:model-value="(val) => (actionConfig.alert = val)"
-    />
-
-    <!-- 数据桥接执行器 -->
-    <DataBridgeAction
-      v-else-if="actionConfig.type === IotRuleSceneActionTypeEnum.DATA_BRIDGE"
-      :model-value="actionConfig.dataBridgeId"
-      @update:model-value="(val) => (actionConfig.dataBridgeId = val)"
+      @success="handleDeviceSelect"
     />
   </div>
-
-  <!-- 产品、设备的选择 -->
-  <ProductTableSelect ref="productTableSelectRef" @success="handleProductSelect" />
-  <DeviceTableSelect
-    ref="deviceTableSelectRef"
-    multiple
-    :product-id="product?.id"
-    @success="handleDeviceSelect"
-  />
 </template>
 
 <script setup lang="ts">
diff --git a/src/views/iot/rule/scene/components/listener/DeviceListener.vue b/src/views/iot/rule/scene/components/listener/DeviceListener.vue
index 36c55b780..024fbec1d 100644
--- a/src/views/iot/rule/scene/components/listener/DeviceListener.vue
+++ b/src/views/iot/rule/scene/components/listener/DeviceListener.vue
@@ -1,140 +1,143 @@
 <template>
-  <div class="m-10px">
-    <div class="relative bg-[#eff3f7] h-50px flex items-center px-10px">
-      <div class="flex items-center mr-60px">
-        <span class="mr-10px">触发条件</span>
-        <el-select
-          v-model="triggerConfig.type"
-          class="!w-240px"
-          clearable
-          placeholder="请选择触发条件"
-        >
-          <el-option
-            v-for="dict in getIntDictOptions(DICT_TYPE.IOT_RULE_SCENE_TRIGGER_TYPE_ENUM)"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </div>
-      <div
-        v-if="triggerConfig.type === IotRuleSceneTriggerTypeEnum.DEVICE"
-        class="flex items-center mr-60px"
-      >
-        <span class="mr-10px">产品</span>
-        <el-button type="primary" @click="productTableSelectRef?.open()" size="small" plain>
-          {{ product ? product.name : '选择产品' }}
-        </el-button>
-      </div>
-      <div
-        v-if="triggerConfig.type === IotRuleSceneTriggerTypeEnum.DEVICE"
-        class="flex items-center mr-60px"
-      >
-        <span class="mr-10px">设备</span>
-        <el-button type="primary" @click="openDeviceSelect" size="small" plain>
-          {{ isEmpty(deviceList) ? '选择设备' : triggerConfig.deviceNames.join(',') }}
-        </el-button>
-      </div>
-      <!-- 删除触发器 -->
-      <div class="absolute top-auto right-16px bottom-auto">
-        <el-tooltip content="删除触发器" placement="top">
-          <slot></slot>
-        </el-tooltip>
-      </div>
-    </div>
-    <!-- 设备触发器条件 -->
-    <template v-if="triggerConfig.type === IotRuleSceneTriggerTypeEnum.DEVICE">
-      <div
-        class="bg-[#dbe5f6] flex p-10px"
-        v-for="(condition, index) in triggerConfig.conditions"
-        :key="index"
-      >
-        <div class="flex flex-col items-center justify-center mr-10px h-a">
+  <div>
+    <div class="m-10px">
+      <div class="relative bg-[#eff3f7] h-50px flex items-center px-10px">
+        <div class="flex items-center mr-60px">
+          <span class="mr-10px">触发条件</span>
           <el-select
-            v-model="condition.type"
-            @change="condition.parameters = []"
-            class="!w-160px"
+            v-model="triggerConfig.type"
+            class="!w-240px"
             clearable
-            placeholder=""
+            placeholder="请选择触发条件"
           >
-            <el-option label="属性" :value="IotDeviceMessageTypeEnum.PROPERTY" />
-            <el-option label="服务" :value="IotDeviceMessageTypeEnum.SERVICE" />
-            <el-option label="事件" :value="IotDeviceMessageTypeEnum.EVENT" />
+            <el-option
+              v-for="dict in getIntDictOptions(DICT_TYPE.IOT_RULE_SCENE_TRIGGER_TYPE_ENUM)"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
           </el-select>
         </div>
-        <div class="">
-          <DeviceListenerCondition
-            v-for="(parameter, index2) in condition.parameters"
-            :key="index2"
-            :model-value="parameter"
-            :thingModels="thingModels(condition)"
-            @update:model-value="(val) => (condition.parameters[index2] = val)"
-            class="mb-10px last:mb-0"
-          >
-            <el-tooltip content="删除参数" placement="top">
+        <div
+          v-if="triggerConfig.type === IotRuleSceneTriggerTypeEnum.DEVICE"
+          class="flex items-center mr-60px"
+        >
+          <span class="mr-10px">产品</span>
+          <el-button type="primary" @click="productTableSelectRef?.open()" size="small" plain>
+            {{ product ? product.name : '选择产品' }}
+          </el-button>
+        </div>
+        <div
+          v-if="triggerConfig.type === IotRuleSceneTriggerTypeEnum.DEVICE"
+          class="flex items-center mr-60px"
+        >
+          <span class="mr-10px">设备</span>
+          <el-button type="primary" @click="openDeviceSelect" size="small" plain>
+            {{ isEmpty(deviceList) ? '选择设备' : triggerConfig.deviceNames.join(',') }}
+          </el-button>
+        </div>
+        <!-- 删除触发器 -->
+        <div class="absolute top-auto right-16px bottom-auto">
+          <el-tooltip content="删除触发器" placement="top">
+            <slot></slot>
+          </el-tooltip>
+        </div>
+      </div>
+      <!-- 设备触发器条件 -->
+      <template v-if="triggerConfig.type === IotRuleSceneTriggerTypeEnum.DEVICE">
+        <div
+          class="bg-[#dbe5f6] flex p-10px"
+          v-for="(condition, index) in triggerConfig.conditions"
+          :key="index"
+        >
+          <div class="flex flex-col items-center justify-center mr-10px h-a">
+            <el-select
+              v-model="condition.type"
+              @change="condition.parameters = []"
+              class="!w-160px"
+              clearable
+              placeholder=""
+            >
+              <el-option label="属性" :value="IotDeviceMessageTypeEnum.PROPERTY" />
+              <el-option label="服务" :value="IotDeviceMessageTypeEnum.SERVICE" />
+              <el-option label="事件" :value="IotDeviceMessageTypeEnum.EVENT" />
+            </el-select>
+          </div>
+          <div class="w-70%">
+            <DeviceListenerCondition
+              v-for="(parameter, index2) in condition.parameters"
+              :key="index2"
+              :model-value="parameter"
+              :condition-type="condition.type"
+              :thingModels="thingModels(condition)"
+              @update:model-value="(val) => (condition.parameters[index2] = val)"
+              class="mb-10px last:mb-0"
+            >
+              <el-tooltip content="删除参数" placement="top">
+                <el-button
+                  type="danger"
+                  circle
+                  size="small"
+                  @click="removeConditionParameter(condition.parameters, index2)"
+                >
+                  <Icon icon="ep:delete" />
+                </el-button>
+              </el-tooltip>
+            </DeviceListenerCondition>
+          </div>
+          <!-- 添加参数 -->
+          <div class="flex flex-1 flex-col items-center justify-center w-60px h-a">
+            <el-tooltip content="添加参数" placement="top">
               <el-button
-                type="danger"
+                type="primary"
                 circle
                 size="small"
-                @click="removeConditionParameter(condition.parameters, index2)"
+                @click="addConditionParameter(condition.parameters)"
               >
+                <Icon icon="ep:plus" />
+              </el-button>
+            </el-tooltip>
+          </div>
+          <!-- 删除条件 -->
+          <div
+            class="device-listener-condition flex flex-1 flex-col items-center justify-center w-a h-a"
+          >
+            <el-tooltip content="删除条件" placement="top">
+              <el-button type="danger" size="small" @click="removeCondition(index)">
                 <Icon icon="ep:delete" />
               </el-button>
             </el-tooltip>
-          </DeviceListenerCondition>
-        </div>
-        <!-- 添加参数 -->
-        <div class="flex flex-1 flex-col items-center justify-center w-60px h-a">
-          <el-tooltip content="添加参数" placement="top">
-            <el-button
-              type="primary"
-              circle
-              size="small"
-              @click="addConditionParameter(condition.parameters)"
-            >
-              <Icon icon="ep:plus" />
-            </el-button>
-          </el-tooltip>
-        </div>
-        <!-- 删除条件 -->
-        <div
-          class="device-listener-condition flex flex-1 flex-col items-center justify-center w-a h-a"
-        >
-          <el-tooltip content="删除条件" placement="top">
-            <el-button type="danger" size="small" @click="removeCondition(index)">
-              <Icon icon="ep:delete" />
-            </el-button>
-          </el-tooltip>
+          </div>
         </div>
+      </template>
+      <!-- 定时触发 -->
+      <div
+        v-if="triggerConfig.type === IotRuleSceneTriggerTypeEnum.TIMER"
+        class="bg-[#dbe5f6] flex items-center justify-between p-10px"
+      >
+        <span class="w-120px">CRON 表达式</span>
+        <crontab v-model="triggerConfig.cronExpression" />
       </div>
-    </template>
-    <!-- 定时触发 -->
-    <div
-      v-if="triggerConfig.type === IotRuleSceneTriggerTypeEnum.TIMER"
-      class="bg-[#dbe5f6] flex items-center justify-between p-10px"
-    >
-      <span class="w-120px">CRON 表达式</span>
-      <crontab v-model="triggerConfig.cronExpression" />
+      <!-- 设备触发才可以设置多个触发条件 -->
+      <el-text
+        v-if="triggerConfig.type === IotRuleSceneTriggerTypeEnum.DEVICE"
+        class="ml-10px!"
+        type="primary"
+        @click="addCondition"
+      >
+        添加触发条件
+      </el-text>
     </div>
-    <!-- 设备触发才可以设置多个触发条件 -->
-    <el-text
-      v-if="triggerConfig.type === IotRuleSceneTriggerTypeEnum.DEVICE"
-      class="ml-10px!"
-      type="primary"
-      @click="addCondition"
-    >
-      添加触发条件
-    </el-text>
-  </div>
 
-  <!-- 产品、设备的选择 -->
-  <ProductTableSelect ref="productTableSelectRef" @success="handleProductSelect" />
-  <DeviceTableSelect
-    ref="deviceTableSelectRef"
-    multiple
-    :product-id="product?.id"
-    @success="handleDeviceSelect"
-  />
+    <!-- 产品、设备的选择 -->
+    <ProductTableSelect ref="productTableSelectRef" @success="handleProductSelect" />
+    <DeviceTableSelect
+      ref="deviceTableSelectRef"
+      multiple
+      :product-id="product?.id"
+      @success="handleDeviceSelect"
+    />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -272,12 +275,11 @@ const thingModels = computed(() => (condition: TriggerCondition) => {
   }
   switch (condition.type) {
     case IotDeviceMessageTypeEnum.PROPERTY:
-      return thingModelTSL.value.properties
-    // TODO puhui999: 服务和事件后续考虑
+      return thingModelTSL.value?.properties || []
     case IotDeviceMessageTypeEnum.SERVICE:
-      return thingModelTSL.value.services
+      return thingModelTSL.value?.services || []
     case IotDeviceMessageTypeEnum.EVENT:
-      return thingModelTSL.value.events
+      return thingModelTSL.value?.events || []
   }
   return []
 })
diff --git a/src/views/iot/rule/scene/components/listener/DeviceListenerCondition.vue b/src/views/iot/rule/scene/components/listener/DeviceListenerCondition.vue
index 8ada49436..3838e6311 100644
--- a/src/views/iot/rule/scene/components/listener/DeviceListenerCondition.vue
+++ b/src/views/iot/rule/scene/components/listener/DeviceListenerCondition.vue
@@ -1,13 +1,30 @@
 <template>
-  <div class="device-listener-condition">
+  <div class="flex items-center w-1/1">
+    <!-- 选择服务 -->
+    <el-select
+      v-if="
+        [IotDeviceMessageTypeEnum.SERVICE, IotDeviceMessageTypeEnum.EVENT].includes(conditionType)
+      "
+      v-model="conditionParameter.identifier0"
+      class="!w-150px mr-10px"
+      clearable
+      placeholder="请选择服务"
+    >
+      <el-option
+        v-for="thingModel in thingModels"
+        :key="thingModel.identifier"
+        :label="thingModel.name"
+        :value="thingModel.identifier"
+      />
+    </el-select>
     <el-select
       v-model="conditionParameter.identifier"
-      class="!w-240px mr-10px"
+      class="!w-150px mr-10px"
       clearable
       placeholder="请选择物模型"
     >
       <el-option
-        v-for="thingModel in thingModels"
+        v-for="thingModel in getThingModels"
         :key="thingModel.identifier"
         :label="thingModel.name"
         :value="thingModel.identifier"
@@ -15,21 +32,18 @@
     </el-select>
     <ConditionSelector
       v-model="conditionParameter.operator"
-      :data-type="getDataType"
-      class="!w-180px mr-10px"
+      :data-type="model?.dataType"
+      class="!w-150px mr-10px"
     />
-    <!-- TODO puhui999: 输入值范围校验？ -->
-    <el-input
+    <ThingModelParamInput
       v-if="
         conditionParameter.operator !==
         IotRuleSceneTriggerConditionParameterOperatorEnum.NOT_NULL.value
       "
+      class="!w-200px mr-10px"
       v-model="conditionParameter.value"
-      class="!w-240px mr-10px"
-      placeholder="请输入值"
-    >
-      <template v-if="getUnitName" #append> {{ getUnitName }} </template>
-    </el-input>
+      :thing-model="model"
+    />
     <!-- 按钮插槽 -->
     <slot></slot>
   </div>
@@ -38,43 +52,36 @@
 <script setup lang="ts">
 import ConditionSelector from './ConditionSelector.vue'
 import {
+  IotDeviceMessageTypeEnum,
   IotRuleSceneTriggerConditionParameterOperatorEnum,
   TriggerConditionParameter
 } from '@/api/iot/rule/scene/scene.types'
 import { useVModel } from '@vueuse/core'
+import ThingModelParamInput from '@/views/iot/rule/scene/components/ThingModelParamInput.vue'
 
+/** 设备触发条件 */
 defineOptions({ name: 'DeviceListenerCondition' })
-const props = defineProps<{ modelValue: any; thingModels: any }>()
+const props = defineProps<{ modelValue: any; conditionType: any; thingModels: any }>()
 const emits = defineEmits(['update:modelValue'])
 const conditionParameter = useVModel(props, 'modelValue', emits) as Ref<TriggerConditionParameter>
 
-/** 获得物模型属性类型 */
-const getDataType = computed(() => {
-  const model = props.thingModels?.find(
-    (item: any) => item.identifier === conditionParameter.value.identifier
-  )
-  // 属性
-  if (model?.dataSpecs) {
-    return model.dataSpecs.dataType
+/** 属性就是 thingModels，服务和事件取对应的 outputParams */
+const getThingModels = computed(() => {
+  switch (props.conditionType) {
+    case IotDeviceMessageTypeEnum.PROPERTY:
+      return props.thingModels || []
+    case IotDeviceMessageTypeEnum.SERVICE:
+    case IotDeviceMessageTypeEnum.EVENT:
+      return (
+        props.thingModels.find(
+          (item: any) => item.identifier === conditionParameter.value.identifier0
+        )?.outputParams || []
+      )
   }
-  return ''
 })
-/** 获得属性单位 */
-const getUnitName = computed(() => {
-  const model = props.thingModels?.find(
-    (item: any) => item.identifier === conditionParameter.value.identifier
-  )
-  // 属性
-  if (model?.dataSpecs) {
-    return model.dataSpecs.unitName
-  }
-  // TODO puhui999: 先不考虑服务和事件的情况
-  // 服务和事件
-  // if (model?.outputParams) {
-  //   return model.dataSpecs.unitName
-  // }
-  return ''
-})
-</script>
 
-<style scoped lang="scss"></style>
+/** 获得物模型属性、类型 */
+const model = computed(() =>
+  getThingModels.value.find((item: any) => item.identifier === conditionParameter.value.identifier)
+)
+</script>
-- 
Gitee


From 1bc2978bc6234247f03d9f530f3d96c6a9cf1fef Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sat, 29 Mar 2025 23:02:56 +0800
Subject: [PATCH 18/18] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=E3=80=91IoT:=20=E5=9C=BA=E6=99=AF=E8=81=94=E5=8A=A8?=
 =?UTF-8?q?=E6=89=A7=E8=A1=8C=E5=99=A8=20array=E3=80=81struct=20=E7=B1=BB?=
 =?UTF-8?q?=E5=9E=8B=E6=95=B0=E6=8D=AE=E7=BC=96=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/JsonEditor/src/JsonEditor.vue  |  6 +-
 .../scene/components/ThingModelDualView.vue   | 81 +++++++++++++++++++
 .../scene/components/ThingModelParamInput.vue | 28 ++++++-
 3 files changed, 110 insertions(+), 5 deletions(-)
 create mode 100644 src/views/iot/rule/scene/components/ThingModelDualView.vue

diff --git a/src/components/JsonEditor/src/JsonEditor.vue b/src/components/JsonEditor/src/JsonEditor.vue
index ef14a1064..f3789ee1f 100644
--- a/src/components/JsonEditor/src/JsonEditor.vue
+++ b/src/components/JsonEditor/src/JsonEditor.vue
@@ -12,7 +12,7 @@ import { JsonEditorEmits, JsonEditorExpose, JsonEditorProps } from '../types'
 defineOptions({ name: 'JsonEditor' })
 
 const props = withDefaults(defineProps<JsonEditorProps>(), {
-  mode: 'tree' as JSONEditorMode,
+  mode: 'view' as JSONEditorMode,
   height: '400px',
   showModeSelection: false,
   showNavigationBar: false,
@@ -58,6 +58,10 @@ const initJsonEditor = () => {
   if (jsonObj.value) {
     jsonEditor.set(jsonObj.value)
   }
+
+  if (props.mode === 'view') {
+    jsonEditor?.expandAll() // 默认展开全部
+  }
 }
 
 // 监听数据变化
diff --git a/src/views/iot/rule/scene/components/ThingModelDualView.vue b/src/views/iot/rule/scene/components/ThingModelDualView.vue
new file mode 100644
index 000000000..24fb60002
--- /dev/null
+++ b/src/views/iot/rule/scene/components/ThingModelDualView.vue
@@ -0,0 +1,81 @@
+<template>
+  <Dialog v-model="dialogVisible" :title="dialogTitle" :appendToBody="true" v-loading="loading">
+    <div class="flex h-600px">
+      <!-- 左侧物模型属性（view模式） -->
+      <div class="w-1/2 border-r border-gray-200 pr-2 overflow-auto">
+        <JsonEditor :model-value="thingModel" mode="view" height="600px" />
+      </div>
+
+      <!-- 右侧JSON编辑器（code模式） -->
+      <div class="w-1/2 pl-2 overflow-auto">
+        <JsonEditor v-model="editableModelTSL" mode="code" height="600px" @error="handleError" />
+      </div>
+    </div>
+
+    <template #footer>
+      <el-button @click="dialogVisible = false">取消</el-button>
+      <el-button type="primary" @click="handleSave" :disabled="hasJsonError">保存</el-button>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { isEmpty } from '@/utils/is'
+
+defineOptions({ name: 'ThingModelDualView' })
+
+const props = defineProps<{
+  modelValue: any // 物模型的值
+  thingModel: any[] // 物模型
+}>()
+const emits = defineEmits(['update:modelValue', 'change'])
+
+const message = useMessage()
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('物模型编辑器') // 弹窗的标题
+const editableModelTSL = ref([
+  {
+    identifier: '对应左侧 identifier 属性值',
+    value: '如果 identifier 是 int 类型则输入数字，具体查看产品物模型定义'
+  }
+]) // 物模型数据
+const hasJsonError = ref(false) // 是否有 JSON 格式错误
+const loading = ref(false) // 加载状态
+
+/** 打开弹窗 */
+const open = () => {
+  try {
+    // 数据回显
+    if (props.modelValue) {
+      editableModelTSL.value = JSON.parse(props.modelValue)
+    }
+  } catch (e) {
+    message.error('物模型编辑器参数')
+    console.error(e)
+  } finally {
+    dialogVisible.value = true
+    // 重置状态
+    hasJsonError.value = false
+  }
+}
+defineExpose({ open }) // 暴露方法供父组件调用
+
+/** 保存修改 */
+const handleSave = async () => {
+  try {
+    await message.confirm('确定要保存物模型参数吗？')
+    emits('update:modelValue', JSON.stringify(editableModelTSL.value))
+    message.success('保存成功')
+    dialogVisible.value = false
+  } catch {}
+}
+
+/** 处理 JSON 编辑器错误的函数 */
+const handleError = (errors: any) => {
+  if (isEmpty(errors)) {
+    hasJsonError.value = false
+    return
+  }
+  hasJsonError.value = true
+}
+</script>
diff --git a/src/views/iot/rule/scene/components/ThingModelParamInput.vue b/src/views/iot/rule/scene/components/ThingModelParamInput.vue
index bc602da5a..b6e35cbe9 100644
--- a/src/views/iot/rule/scene/components/ThingModelParamInput.vue
+++ b/src/views/iot/rule/scene/components/ThingModelParamInput.vue
@@ -59,7 +59,17 @@
 
     <!-- array、struct 直接输入 -->
     <template v-else>
-      <el-input class="w-1/1!" v-model="value" placeholder="请输入值" />
+      <el-input class="w-1/1!" :model-value="value" disabled placeholder="请输入值">
+        <template #append>
+          <el-button type="primary" @click="openJsonEditor">编辑</el-button>
+        </template>
+      </el-input>
+      <!-- array、struct 类型数据编辑 -->
+      <ThingModelDualView
+        ref="thingModelDualViewRef"
+        v-model="value"
+        :thing-model="dataSpecsList"
+      />
     </template>
   </div>
 </template>
@@ -68,6 +78,7 @@
 import { computed } from 'vue'
 import { useVModel } from '@vueuse/core'
 import { DataSpecsDataType } from '@/views/iot/thingmodel/config'
+import ThingModelDualView from './ThingModelDualView.vue'
 
 /** 物模型属性参数输入组件 */
 defineOptions({ name: 'ThingModelParamInput' })
@@ -80,6 +91,11 @@ const props = defineProps<{
 const emits = defineEmits(['update:modelValue', 'change'])
 const value = useVModel(props, 'modelValue', emits)
 
+const thingModelDualViewRef = ref<InstanceType<typeof ThingModelDualView>>()
+const openJsonEditor = () => {
+  thingModelDualViewRef.value?.open()
+}
+
 /** 计算属性：判断数据类型 */
 const isNumeric = computed(() =>
   [DataSpecsDataType.INT, DataSpecsDataType.FLOAT, DataSpecsDataType.DOUBLE].includes(
@@ -93,13 +109,17 @@ const isText = computed(() => props.thingModel?.dataType === DataSpecsDataType.T
 /** 获取数据规格 */
 const dataSpecs = computed(() => {
   if (isNumeric.value || isDate.value || isText.value) {
-    return props.thingModel?.dataSpecs
+    return props.thingModel?.dataSpecs || {}
   }
   return {}
 })
 const dataSpecsList = computed(() => {
-  if (isBool.value || isEnum.value) {
-    return props.thingModel?.dataSpecsList
+  if (
+    isBool.value ||
+    isEnum.value ||
+    [DataSpecsDataType.ARRAY, DataSpecsDataType.STRUCT].includes(props.thingModel?.dataType)
+  ) {
+    return props.thingModel?.dataSpecsList || []
   }
   return []
 })
-- 
Gitee