【功能完善】IoT: 场景联动

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 // 比较值
 }

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;

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;

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>

src/views/iot/rule/scene/components/action/ActionExecutor.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <div class="m-10px">
       <!-- 产品设备回显区域 -->
       <div class="relative bg-[#eff3f7] h-50px flex items-center px-10px">
@@ -76,6 +77,7 @@
       :product-id="product?.id"
       @success="handleDeviceSelect"
     />
+  </div>
 </template>
 
 <script setup lang="ts">

src/views/iot/rule/scene/components/listener/DeviceListener.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <div class="m-10px">
       <div class="relative bg-[#eff3f7] h-50px flex items-center px-10px">
         <div class="flex items-center mr-60px">
@@ -62,11 +63,12 @@
               <el-option label="事件" :value="IotDeviceMessageTypeEnum.EVENT" />
             </el-select>
           </div>
-        <div class="">
+          <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"
@@ -135,6 +137,7 @@
       :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 []
 })

src/views/iot/rule/scene/components/listener/DeviceListenerCondition.vue

@@ -1,10 +1,14 @@
 <template>
-  <div class="device-listener-condition">
+  <div class="flex items-center w-1/1">
+    <!-- 选择服务 -->
     <el-select
-      v-model="conditionParameter.identifier"
-      class="!w-240px mr-10px"
+      v-if="
+        [IotDeviceMessageTypeEnum.SERVICE, IotDeviceMessageTypeEnum.EVENT].includes(conditionType)
+      "
+      v-model="conditionParameter.identifier0"
+      class="!w-150px mr-10px"
       clearable
-      placeholder="请选择物模型"
+      placeholder="请选择服务"
     >
       <el-option
         v-for="thingModel in thingModels"
@@ -13,23 +17,33 @@
         :value="thingModel.identifier"
       />
     </el-select>
+    <el-select
+      v-model="conditionParameter.identifier"
+      class="!w-150px mr-10px"
+      clearable
+      placeholder="请选择物模型"
+    >
+      <el-option
+        v-for="thingModel in getThingModels"
+        :key="thingModel.identifier"
+        :label="thingModel.name"
+        :value="thingModel.identifier"
+      />
+    </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
+/** 属性就是 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 || []
       )
-  // 属性
-  if (model?.dataSpecs) {
-    return model.dataSpecs.dataType
   }
-  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>