!628 【功能新增】IOT: ThingModel 服务和事件

Merge pull request !628 from puhui999/feature/iot

src/api/iot/thingmodel/index.ts

@@ -11,7 +11,7 @@ export interface ThingModelData {
   productId?: number // 产品编号
   productKey?: string // 产品标识
   dataType: string // 数据类型，与 dataSpecs 的 dataType 保持一致
-  type: ProductFunctionTypeEnum // 功能类型
+  type: number // 功能类型
   property: ThingModelProperty // 属性
   event?: ThingModelEvent // 事件
   service?: ThingModelService // 服务
@@ -38,19 +38,6 @@ export interface ThingModelService {
   [key: string]: any
 }
 
-// IOT 产品功能（物模型）类型枚举类
-export enum ProductFunctionTypeEnum {
-  PROPERTY = 1, // 属性
-  SERVICE = 2, // 服务
-  EVENT = 3 // 事件
-}
-
-// IOT 产品功能（物模型）访问模式枚举类
-export enum ProductFunctionAccessModeEnum {
-  READ_WRITE = 'rw', // 读写
-  READ_ONLY = 'r' // 只读
-}
-
 // IoT 产品物模型 API
 export const ThingModelApi = {
   // 查询产品物模型分页

src/utils/dict.ts

@@ -238,7 +238,7 @@ export enum DICT_TYPE {
   IOT_DEVICE_STATUS = 'iot_device_status', // IOT 设备状态
   IOT_PRODUCT_THING_MODEL_TYPE = 'iot_product_thing_model_type', // IOT 产品功能类型
   IOT_DATA_TYPE = 'iot_data_type', // IOT 数据类型
-  IOT_UNIT_TYPE = 'iot_unit_type', // IOT 单位类型
+  IOT_PRODUCT_THING_MODEL_UNIT = 'iot_product_thing_model_unit', // IOT 物模型单位
   IOT_RW_TYPE = 'iot_rw_type', // IOT 读写类型
   IOT_PLUGIN_DEPLOY_TYPE = 'iot_plugin_deploy_type', // IOT 插件部署类型
   IOT_PLUGIN_STATUS = 'iot_plugin_status', // IOT 插件状态

src/views/iot/thingmodel/ThingModelEvent.vue

@@ -0,0 +1,47 @@
+<template>
+  <el-form-item
+    :rules="[{ required: true, message: '请选择事件类型', trigger: 'change' }]"
+    label="事件类型"
+    prop="event.type"
+  >
+    <el-radio-group v-model="thingModelEvent.type">
+      <el-radio :value="ThingModelEventType.INFO.value">
+        {{ ThingModelEventType.INFO.label }}
+      </el-radio>
+      <el-radio :value="ThingModelEventType.ALERT.value">
+        {{ ThingModelEventType.ALERT.label }}
+      </el-radio>
+      <el-radio :value="ThingModelEventType.ERROR.value">
+        {{ ThingModelEventType.ERROR.label }}
+      </el-radio>
+    </el-radio-group>
+  </el-form-item>
+  <el-form-item label="输出参数">
+    <ThingModelInputOutputParam
+      v-model="thingModelEvent.outputParams"
+      :direction="ThingModelParamDirection.OUTPUT"
+    />
+  </el-form-item>
+</template>
+
+<script lang="ts" setup>
+import ThingModelInputOutputParam from './ThingModelInputOutputParam.vue'
+import { useVModel } from '@vueuse/core'
+import { ThingModelEvent } from '@/api/iot/thingmodel'
+import { ThingModelParamDirection, ThingModelEventType } from './config'
+
+/** IoT 物模型事件 */
+defineOptions({ name: 'ThingModelEvent' })
+
+const props = defineProps<{ modelValue: any; isStructDataSpecs?: boolean }>()
+const emits = defineEmits(['update:modelValue'])
+const thingModelEvent = useVModel(props, 'modelValue', emits) as Ref<ThingModelEvent>
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-form-item) {
+  .el-form-item {
+    margin-bottom: 0;
+  }
+}
+</style>

src/views/iot/thingmodel/ThingModelForm.vue

@@ -25,10 +25,26 @@
         <el-input v-model="formData.identifier" placeholder="请输入标识符" />
       </el-form-item>
       <!-- 属性配置 -->
-      <ThingModelDataSpecs
+      <ThingModelProperty
-        v-if="formData.type === ProductFunctionTypeEnum.PROPERTY"
+        v-if="formData.type === ThingModelType.PROPERTY"
         v-model="formData.property"
       />
+      <!-- 服务配置 -->
+      <ThingModelService
+        v-if="formData.type === ThingModelType.SERVICE"
+        v-model="formData.service"
+      />
+      <!-- 事件配置 -->
+      <ThingModelEvent v-if="formData.type === ThingModelType.EVENT" v-model="formData.event" />
+      <el-form-item label="描述" prop="description">
+        <el-input
+          v-model="formData.description"
+          :maxlength="200"
+          :rows="3"
+          placeholder="请输入属性描述"
+          type="textarea"
+        />
+      </el-form-item>
     </el-form>
 
     <template #footer>
@@ -40,12 +56,15 @@
 
 <script lang="ts" setup>
 import { ProductVO } from '@/api/iot/product/product'
-import ThingModelDataSpecs from './ThingModelDataSpecs.vue'
+import ThingModelProperty from './ThingModelProperty.vue'
-import { ProductFunctionTypeEnum, ThingModelApi, ThingModelData } from '@/api/iot/thingmodel'
+import ThingModelService from './ThingModelService.vue'
+import ThingModelEvent from './ThingModelEvent.vue'
+import { ThingModelApi, ThingModelData } from '@/api/iot/thingmodel'
 import { IOT_PROVIDE_KEY } from '@/views/iot/utils/constants'
-import { DataSpecsDataType, ThingModelFormRules } from './config'
+import { DataSpecsDataType, ThingModelFormRules, ThingModelType } from './config'
 import { cloneDeep } from 'lodash-es'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { isEmpty } from '@/utils/is'
 
 /** IoT 物模型数据表单 */
 defineOptions({ name: 'IoTProductThingModelForm' })
@@ -60,14 +79,16 @@ const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const formData = ref<ThingModelData>({
-  type: ProductFunctionTypeEnum.PROPERTY,
+  type: ThingModelType.PROPERTY,
   dataType: DataSpecsDataType.INT,
   property: {
     dataType: DataSpecsDataType.INT,
     dataSpecs: {
       dataType: DataSpecsDataType.INT
     }
-  }
+  },
+  service: {},
+  event: {}
 })
 
 const formRef = ref() // 表单 Ref
@@ -92,6 +113,7 @@ defineExpose({ open, close: () => (dialogVisible.value = false) })
 /** 提交表单 */
 const emit = defineEmits(['success'])
 const submitForm = async () => {
+  debugger
   await formRef.value.validate()
   formLoading.value = true
   try {
@@ -99,10 +121,7 @@ const submitForm = async () => {
     // 信息补全
     data.productId = product!.value.id
     data.productKey = product!.value.productKey
-    data.description = data.property.description
+    fillExtraAttributes(data)
-    data.dataType = data.property.dataType
-    data.property.identifier = data.identifier
-    data.property.name = data.name
     if (formType.value === 'create') {
       await ThingModelApi.createThingModel(data)
       message.success(t('common.createSuccess'))
@@ -117,17 +136,60 @@ const submitForm = async () => {
   }
 }
 
+/** 填写额外的属性 */
+const fillExtraAttributes = (data: any) => {
+  // 处理不同类型的情况
+  // 属性
+  if (data.type === ThingModelType.PROPERTY) {
+    removeDataSpecs(data.property)
+    data.dataType = data.property.dataType
+    data.property.identifier = data.identifier
+    data.property.name = data.name
+    delete data.service
+    delete data.event
+  }
+  // 服务
+  if (data.type === ThingModelType.SERVICE) {
+    removeDataSpecs(data.service)
+    data.dataType = data.service.dataType
+    data.service.identifier = data.identifier
+    data.service.name = data.name
+    delete data.property
+    delete data.event
+  }
+  // 事件
+  if (data.type === ThingModelType.EVENT) {
+    removeDataSpecs(data.event)
+    data.dataType = data.event.dataType
+    data.event.identifier = data.identifier
+    data.event.name = data.name
+    delete data.property
+    delete data.service
+  }
+}
+/** 处理 dataSpecs 为空的情况 */
+const removeDataSpecs = (val: any) => {
+  if (isEmpty(val.dataSpecs)) {
+    delete val.dataSpecs
+  }
+  if (isEmpty(val.dataSpecsList)) {
+    delete val.dataSpecsList
+  }
+}
+
 /** 重置表单 */
 const resetForm = () => {
   formData.value = {
-    type: ProductFunctionTypeEnum.PROPERTY,
+    type: ThingModelType.PROPERTY,
     dataType: DataSpecsDataType.INT,
     property: {
       dataType: DataSpecsDataType.INT,
       dataSpecs: {
         dataType: DataSpecsDataType.INT
       }
-    }
+    },
+    service: {},
+    event: {}
   }
   formRef.value?.resetFields()
 }

src/views/iot/thingmodel/ThingModelInputOutputParam.vue

@@ -0,0 +1,153 @@
+<template>
+  <div
+    v-for="(item, index) in thingModelParams"
+    :key="index"
+    class="w-1/1 param-item flex justify-between px-10px mb-10px"
+  >
+    <span>参数名称：{{ item.name }}</span>
+    <div class="btn">
+      <el-button link type="primary" @click="openParamForm(item)">编辑</el-button>
+      <el-divider direction="vertical" />
+      <el-button link type="danger" @click="deleteParamItem(index)">删除</el-button>
+    </div>
+  </div>
+  <el-button link type="primary" @click="openParamForm(null)">+新增参数</el-button>
+
+  <!-- param 表单 -->
+  <Dialog v-model="dialogVisible" :title="dialogTitle" append-to-body>
+    <el-form
+      ref="paramFormRef"
+      v-loading="formLoading"
+      :model="formData"
+      :rules="ThingModelFormRules"
+      label-width="100px"
+    >
+      <el-form-item label="参数名称" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入功能名称" />
+      </el-form-item>
+      <el-form-item label="标识符" prop="identifier">
+        <el-input v-model="formData.identifier" placeholder="请输入标识符" />
+      </el-form-item>
+      <!-- 属性配置 -->
+      <ThingModelProperty v-model="formData.property" is-params />
+    </el-form>
+
+    <template #footer>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+
+<script lang="ts" setup>
+import { useVModel } from '@vueuse/core'
+import ThingModelProperty from './ThingModelProperty.vue'
+import { DataSpecsDataType, ThingModelFormRules } from './config'
+import { isEmpty } from '@/utils/is'
+
+/** 输入输出参数配置组件 */
+defineOptions({ name: 'ThingModelInputOutputParam' })
+
+const props = defineProps<{ modelValue: any; direction: string }>()
+const emits = defineEmits(['update:modelValue'])
+const thingModelParams = useVModel(props, 'modelValue', emits) as Ref<any[]>
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('新增参数') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const paramFormRef = ref() // 表单 ref
+const formData = ref<any>({
+  dataType: DataSpecsDataType.INT,
+  property: {
+    dataType: DataSpecsDataType.INT,
+    dataSpecs: {
+      dataType: DataSpecsDataType.INT
+    }
+  }
+})
+
+/** 打开 param 表单 */
+const openParamForm = (val: any) => {
+  dialogVisible.value = true
+  resetForm()
+  if (isEmpty(val)) {
+    return
+  }
+  // 编辑时回显数据
+  formData.value = {
+    identifier: val.identifier,
+    name: val.name,
+    description: val.description,
+    property: {
+      dataType: val.dataType,
+      dataSpecs: val.dataSpecs,
+      dataSpecsList: val.dataSpecsList
+    }
+  }
+}
+/** 删除 param 项 */
+const deleteParamItem = (index: number) => {
+  thingModelParams.value.splice(index, 1)
+}
+
+/** 添加参数 */
+const submitForm = async () => {
+  // 初始化参数列表
+  if (isEmpty(thingModelParams.value)) {
+    thingModelParams.value = []
+  }
+  // 校验参数
+  await paramFormRef.value.validate()
+  try {
+    const data = unref(formData)
+    // 构建数据对象
+    const item = {
+      identifier: data.identifier,
+      name: data.name,
+      description: data.description,
+      dataType: data.property.dataType,
+      paraOrder: 0, // TODO @puhui999: 先写死默认看看后续
+      direction: props.direction,
+      dataSpecs:
+        !!data.property.dataSpecs && Object.keys(data.property.dataSpecs).length > 1
+          ? data.property.dataSpecs
+          : undefined,
+      dataSpecsList: isEmpty(data.property.dataSpecsList) ? undefined : data.property.dataSpecsList
+    }
+
+    // 查找是否已有相同 identifier 的项
+    const existingIndex = thingModelParams.value.findIndex(
+      (spec) => spec.identifier === data.identifier
+    )
+    if (existingIndex > -1) {
+      // 更新已有项
+      thingModelParams.value[existingIndex] = item
+    } else {
+      // 添加新项
+      thingModelParams.value.push(item)
+    }
+  } finally {
+    // 隐藏对话框
+    dialogVisible.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    dataType: DataSpecsDataType.INT,
+    property: {
+      dataType: DataSpecsDataType.INT,
+      dataSpecs: {
+        dataType: DataSpecsDataType.INT
+      }
+    }
+  }
+  paramFormRef.value?.resetFields()
+}
+</script>
+
+<style lang="scss" scoped>
+.param-item {
+  background-color: #e4f2fd;
+}
+</style>

src/views/iot/thingmodel/ThingModelProperty.vue

@@ -75,26 +75,26 @@
     v-if="property.dataType === DataSpecsDataType.STRUCT"
     v-model="property.dataSpecsList"
   />
-  <el-form-item v-if="!isStructDataSpecs" label="读写类型" prop="property.accessMode">
+  <el-form-item v-if="!isStructDataSpecs && !isParams" label="读写类型" prop="property.accessMode">
     <el-radio-group v-model="property.accessMode">
-      <el-radio label="rw">读写</el-radio>
+      <el-radio :label="ThingModelAccessMode.READ_WRITE.value">
-      <el-radio label="r">只读</el-radio>
+        {{ ThingModelAccessMode.READ_WRITE.label }}
+      </el-radio>
+      <el-radio :label="ThingModelAccessMode.READ_ONLY.value">
+        {{ ThingModelAccessMode.READ_ONLY.label }}
+      </el-radio>
     </el-radio-group>
   </el-form-item>
-  <el-form-item label="属性描述" prop="description">
-    <el-input
-      v-model="property.description"
-      :maxlength="200"
-      :rows="3"
-      placeholder="请输入属性描述"
-      type="textarea"
-    />
-  </el-form-item>
 </template>
 
 <script lang="ts" setup>
 import { useVModel } from '@vueuse/core'
-import { DataSpecsDataType, dataTypeOptions, validateBoolName } from './config'
+import {
+  DataSpecsDataType,
+  dataTypeOptions,
+  ThingModelAccessMode,
+  validateBoolName
+} from './config'
 import {
   ThingModelArrayDataSpecs,
   ThingModelEnumDataSpecs,
@@ -103,10 +103,10 @@ import {
 } from './dataSpecs'
 import { ThingModelProperty } from '@/api/iot/thingmodel'
 
-/** IoT 物模型数据 */
+/** IoT 物模型属性 */
-defineOptions({ name: 'ThingModelDataSpecs' })
+defineOptions({ name: 'ThingModelProperty' })
 
-const props = defineProps<{ modelValue: any; isStructDataSpecs?: boolean }>()
+const props = defineProps<{ modelValue: any; isStructDataSpecs?: boolean; isParams?: boolean }>()
 const emits = defineEmits(['update:modelValue'])
 const property = useVModel(props, 'modelValue', emits) as Ref<ThingModelProperty>
 const getDataTypeOptions = computed(() => {
@@ -117,12 +117,14 @@ const getDataTypeOptions = computed(() => {
           !([DataSpecsDataType.STRUCT, DataSpecsDataType.ARRAY] as any[]).includes(item.value)
       )
 }) // 获得数据类型列表
+
 /** 属性值的数据类型切换时初始化相关数据 */
 const handleChange = (dataType: any) => {
   property.value.dataSpecsList = []
   property.value.dataSpecs = {}
-
+  // 不是列表型数据才设置 dataSpecs.dataType
-  property.value.dataSpecs.dataType = dataType
+  ![DataSpecsDataType.ENUM, DataSpecsDataType.BOOL, DataSpecsDataType.STRUCT].includes(dataType) &&
+    (property.value.dataSpecs.dataType = dataType)
   switch (dataType) {
     case DataSpecsDataType.ENUM:
       property.value.dataSpecsList.push({

src/views/iot/thingmodel/ThingModelService.vue

@@ -0,0 +1,50 @@
+<template>
+  <el-form-item
+    :rules="[{ required: true, message: '请选择调用方式', trigger: 'change' }]"
+    label="调用方式"
+    prop="service.callType"
+  >
+    <el-radio-group v-model="service.callType">
+      <el-radio :value="ThingModelServiceCallType.ASYNC.value">
+        {{ ThingModelServiceCallType.ASYNC.label }}
+      </el-radio>
+      <el-radio :value="ThingModelServiceCallType.SYNC.value">
+        {{ ThingModelServiceCallType.SYNC.label }}
+      </el-radio>
+    </el-radio-group>
+  </el-form-item>
+  <el-form-item label="输入参数">
+    <ThingModelInputOutputParam
+      v-model="service.inputParams"
+      :direction="ThingModelParamDirection.INPUT"
+    />
+  </el-form-item>
+  <el-form-item label="输出参数">
+    <ThingModelInputOutputParam
+      v-model="service.outputParams"
+      :direction="ThingModelParamDirection.OUTPUT"
+    />
+  </el-form-item>
+</template>
+
+<script lang="ts" setup>
+import ThingModelInputOutputParam from './ThingModelInputOutputParam.vue'
+import { useVModel } from '@vueuse/core'
+import { ThingModelService } from '@/api/iot/thingmodel'
+import { ThingModelParamDirection, ThingModelServiceCallType } from './config'
+
+/** IoT 物模型服务 */
+defineOptions({ name: 'ThingModelService' })
+
+const props = defineProps<{ modelValue: any; isStructDataSpecs?: boolean }>()
+const emits = defineEmits(['update:modelValue'])
+const service = useVModel(props, 'modelValue', emits) as Ref<ThingModelService>
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-form-item) {
+  .el-form-item {
+    margin-bottom: 0;
+  }
+}
+</style>

src/views/iot/thingmodel/config.ts

@@ -48,9 +48,69 @@ export const dataTypeOptions = [
 
 /** 获得物体模型数据类型配置项名称 */
 export const getDataTypeOptionsLabel = (value: string) => {
+  if (isEmpty(value)) {
+    return value
+  }
   return dataTypeOptions.find((option) => option.value === value)?.label
 }
 
+// IOT 产品物模型类型枚举类
+export const ThingModelType = {
+  PROPERTY: 1, // 属性
+  SERVICE: 2, // 服务
+  EVENT: 3 // 事件
+} as const
+
+// IOT 产品物模型访问模式枚举类
+export const ThingModelAccessMode = {
+  READ_WRITE: {
+    label: '读写',
+    value: 'rw'
+  },
+  READ_ONLY: {
+    label: '只读',
+    value: 'r'
+  }
+} as const
+
+// IOT 产品物模型服务调用方式枚举
+export const ThingModelServiceCallType = {
+  ASYNC: {
+    label: '异步调用',
+    value: 'async'
+  },
+  SYNC: {
+    label: '同步调用',
+    value: 'sync'
+  }
+} as const
+export const getCallTypeByValue = (value: string): string | undefined =>
+  Object.values(ThingModelServiceCallType).find((type) => type.value === value)?.label
+
+// IOT 产品物模型事件类型枚举
+export const ThingModelEventType = {
+  INFO: {
+    label: '信息',
+    value: 'info'
+  },
+  ALERT: {
+    label: '告警',
+    value: 'alert'
+  },
+  ERROR: {
+    label: '故障',
+    value: 'error'
+  }
+} as const
+export const getEventTypeByValue = (value: string): string | undefined =>
+  Object.values(ThingModelEventType).find((type) => type.value === value)?.label
+
+// IOT 产品物模型参数是输入参数还是输出参数
+export const ThingModelParamDirection = {
+  INPUT: 'input', // 输入参数
+  OUTPUT: 'output' // 输出参数
+} as const
+
 /** 公共校验规则 */
 export const ThingModelFormRules = {
   name: [

src/views/iot/thingmodel/dataSpecs/ThingModelNumberDataSpecs.vue

@@ -47,10 +47,10 @@
       @change="unitChange"
     >
       <el-option
-        v-for="(item, index) in UnifyUnitSpecsDTO"
+        v-for="(item, index) in getStrDictOptions(DICT_TYPE.IOT_PRODUCT_THING_MODEL_UNIT)"
         :key="index"
-        :label="item.Name + '-' + item.Symbol"
+        :label="item.label + '-' + item.value"
-        :value="item.Name + '-' + item.Symbol"
+        :value="item.label + '-' + item.value"
       />
     </el-select>
   </el-form-item>
@@ -58,8 +58,8 @@
 
 <script lang="ts" setup>
 import { useVModel } from '@vueuse/core'
-import { UnifyUnitSpecsDTO } from '@/views/iot/utils/constants'
 import { DataSpecsNumberDataVO } from '../config'
+import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
 
 /** 数值型的 dataSpecs 配置组件 */
 defineOptions({ name: 'ThingModelNumberDataSpecs' })

src/views/iot/thingmodel/dataSpecs/ThingModelStructDataSpecs.vue

@@ -35,7 +35,7 @@
         <el-input v-model="formData.identifier" placeholder="请输入标识符" />
       </el-form-item>
       <!-- 属性配置 -->
-      <ThingModelDataSpecs v-model="formData.property" is-struct-data-specs />
+      <ThingModelProperty v-model="formData.property" is-struct-data-specs />
     </el-form>
 
     <template #footer>
@@ -47,7 +47,7 @@
 
 <script lang="ts" setup>
 import { useVModel } from '@vueuse/core'
-import ThingModelDataSpecs from '../ThingModelDataSpecs.vue'
+import ThingModelProperty from '../ThingModelProperty.vue'
 import { DataSpecsDataType, ThingModelFormRules } from '../config'
 import { isEmpty } from '@/utils/is'
 
@@ -111,7 +111,7 @@ const submitForm = async () => {
         !!data.property.dataSpecs && Object.keys(data.property.dataSpecs).length > 1
           ? data.property.dataSpecs
           : undefined,
-      dataSpecsList: data.property.dataSpecsList
+      dataSpecsList: isEmpty(data.property.dataSpecsList) ? undefined : data.property.dataSpecsList
     }
 
     // 查找是否已有相同 identifier 的项

src/views/iot/thingmodel/index.vue

@@ -56,13 +56,63 @@
         <el-table-column align="center" label="标识符" prop="identifier" />
         <el-table-column align="center" label="数据类型" prop="identifier">
           <template #default="{ row }">
-            {{ dataTypeOptionsLabel(row.property.dataType) ?? '-' }}
+            {{ dataTypeOptionsLabel(row.property?.dataType) ?? '-' }}
           </template>
         </el-table-column>
-        <el-table-column align="center" label="数据定义" prop="identifier">
+        <el-table-column align="left" label="数据定义" prop="identifier">
           <template #default="{ row }">
-            <!-- TODO puhui999: 数据定义展示待完善 -->
+            <!-- 属性 -->
-            {{ row.property.dataSpecs ?? row.property.dataSpecsList }}
+            <template v-if="row.type === ThingModelType.PROPERTY">
+              <!-- 非列表型：数值 -->
+              <div
+                v-if="
+                  [
+                    DataSpecsDataType.INT,
+                    DataSpecsDataType.DOUBLE,
+                    DataSpecsDataType.FLOAT
+                  ].includes(row.property.dataType)
+                "
+              >
+                取值范围：{{ `${row.property.dataSpecs.min}~${row.property.dataSpecs.max}` }}
+              </div>
+              <!-- 非列表型：文本 -->
+              <div v-if="DataSpecsDataType.TEXT === row.property.dataType">
+                数据长度：{{ row.property.dataSpecs.length }}
+              </div>
+              <!-- 列表型: 数组、结构、时间（特殊） -->
+              <div
+                v-if="
+                  [
+                    DataSpecsDataType.ARRAY,
+                    DataSpecsDataType.STRUCT,
+                    DataSpecsDataType.DATE
+                  ].includes(row.property.dataType)
+                "
+              >
+                -
+              </div>
+              <!-- 列表型: 布尔值、枚举 -->
+              <div
+                v-if="
+                  [DataSpecsDataType.BOOL, DataSpecsDataType.ENUM].includes(row.property.dataType)
+                "
+              >
+                <div>
+                  {{ DataSpecsDataType.BOOL === row.property.dataType ? '布尔值' : '枚举值' }}：
+                </div>
+                <div v-for="item in row.property.dataSpecsList" :key="item.value">
+                  {{ `${item.name}-${item.value}` }}
+                </div>
+              </div>
+            </template>
+            <!-- 服务 -->
+            <div v-if="row.type === ThingModelType.SERVICE">
+              调用方式：{{ getCallTypeByValue(row.service.callType) }}
+            </div>
+            <!-- 事件 -->
+            <div v-if="row.type === ThingModelType.EVENT">
+              事件类型：{{ getEventTypeByValue(row.event.type) }}
+            </div>
           </template>
         </el-table-column>
         <el-table-column align="center" label="操作">
@@ -104,7 +154,14 @@ import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import ThingModelForm from './ThingModelForm.vue'
 import { ProductVO } from '@/api/iot/product/product'
 import { IOT_PROVIDE_KEY } from '@/views/iot/utils/constants'
-import { getDataTypeOptionsLabel } from '@/views/iot/thingmodel/config'
+import {
+  DataSpecsDataType,
+  getCallTypeByValue,
+  getDataTypeOptionsLabel,
+  getEventTypeByValue,
+  ThingModelType
+} from './config'
+import { ThingModelNumberDataSpecs } from '@/views/iot/thingmodel/dataSpecs'
 
 defineOptions({ name: 'IoTProductThingModel' })
 

src/views/iot/utils/constants.ts

@@ -2,534 +2,3 @@
 export const IOT_PROVIDE_KEY = {
   PRODUCT: 'IOT_PRODUCT'
 }
-// TODO puhui999: 物模型数字数据类型单位类型，后面改成字典获取
-export const UnifyUnitSpecsDTO = [
-  {
-    Symbol: 'L/min',
-    Name: '升每分钟'
-  },
-  {
-    Symbol: 'mg/kg',
-    Name: '毫克每千克'
-  },
-  {
-    Symbol: 'NTU',
-    Name: '浊度'
-  },
-  {
-    Symbol: 'pH',
-    Name: 'PH值'
-  },
-  {
-    Symbol: 'dS/m',
-    Name: '土壤EC值'
-  },
-  {
-    Symbol: 'W/㎡',
-    Name: '太阳总辐射'
-  },
-  {
-    Symbol: 'mm/hour',
-    Name: '降雨量'
-  },
-  {
-    Symbol: 'var',
-    Name: '乏'
-  },
-  {
-    Symbol: 'cP',
-    Name: '厘泊'
-  },
-  {
-    Symbol: 'aw',
-    Name: '饱和度'
-  },
-  {
-    Symbol: 'pcs',
-    Name: '个'
-  },
-  {
-    Symbol: 'cst',
-    Name: '厘斯'
-  },
-  {
-    Symbol: 'bar',
-    Name: '巴'
-  },
-  {
-    Symbol: 'ppt',
-    Name: '纳克每升'
-  },
-  {
-    Symbol: 'ppb',
-    Name: '微克每升'
-  },
-  {
-    Symbol: 'uS/cm',
-    Name: '微西每厘米'
-  },
-  {
-    Symbol: 'N/C',
-    Name: '牛顿每库仑'
-  },
-  {
-    Symbol: 'V/m',
-    Name: '伏特每米'
-  },
-  {
-    Symbol: 'ml/min',
-    Name: '滴速'
-  },
-  {
-    Symbol: 'mmHg',
-    Name: '毫米汞柱'
-  },
-  {
-    Symbol: 'mmol/L',
-    Name: '血糖'
-  },
-  {
-    Symbol: 'mm/s',
-    Name: '毫米每秒'
-  },
-  {
-    Symbol: 'turn/m',
-    Name: '转每分钟'
-  },
-  {
-    Symbol: 'count',
-    Name: '次'
-  },
-  {
-    Symbol: 'gear',
-    Name: '档'
-  },
-  {
-    Symbol: 'stepCount',
-    Name: '步'
-  },
-  {
-    Symbol: 'Nm3/h',
-    Name: '标准立方米每小时'
-  },
-  {
-    Symbol: 'kV',
-    Name: '千伏'
-  },
-  {
-    Symbol: 'kVA',
-    Name: '千伏安'
-  },
-  {
-    Symbol: 'kVar',
-    Name: '千乏'
-  },
-  {
-    Symbol: 'uw/cm2',
-    Name: '微瓦每平方厘米'
-  },
-  {
-    Symbol: '只',
-    Name: '只'
-  },
-  {
-    Symbol: '%RH',
-    Name: '相对湿度'
-  },
-  {
-    Symbol: 'm³/s',
-    Name: '立方米每秒'
-  },
-  {
-    Symbol: 'kg/s',
-    Name: '公斤每秒'
-  },
-  {
-    Symbol: 'r/min',
-    Name: '转每分钟'
-  },
-  {
-    Symbol: 't/h',
-    Name: '吨每小时'
-  },
-  {
-    Symbol: 'KCL/h',
-    Name: '千卡每小时'
-  },
-  {
-    Symbol: 'L/s',
-    Name: '升每秒'
-  },
-  {
-    Symbol: 'Mpa',
-    Name: '兆帕'
-  },
-  {
-    Symbol: 'm³/h',
-    Name: '立方米每小时'
-  },
-  {
-    Symbol: 'kvarh',
-    Name: '千乏时'
-  },
-  {
-    Symbol: 'μg/L',
-    Name: '微克每升'
-  },
-  {
-    Symbol: 'kcal',
-    Name: '千卡路里'
-  },
-  {
-    Symbol: 'GB',
-    Name: '吉字节'
-  },
-  {
-    Symbol: 'MB',
-    Name: '兆字节'
-  },
-  {
-    Symbol: 'KB',
-    Name: '千字节'
-  },
-  {
-    Symbol: 'B',
-    Name: '字节'
-  },
-  {
-    Symbol: 'μg/(d㎡·d)',
-    Name: '微克每平方分米每天'
-  },
-  {
-    Symbol: '',
-    Name: '无'
-  },
-  {
-    Symbol: 'ppm',
-    Name: '百万分率'
-  },
-  {
-    Symbol: 'pixel',
-    Name: '像素'
-  },
-  {
-    Symbol: 'Lux',
-    Name: '照度'
-  },
-  {
-    Symbol: 'grav',
-    Name: '重力加速度'
-  },
-  {
-    Symbol: 'dB',
-    Name: '分贝'
-  },
-  {
-    Symbol: '%',
-    Name: '百分比'
-  },
-  {
-    Symbol: 'lm',
-    Name: '流明'
-  },
-  {
-    Symbol: 'bit',
-    Name: '比特'
-  },
-  {
-    Symbol: 'g/mL',
-    Name: '克每毫升'
-  },
-  {
-    Symbol: 'g/L',
-    Name: '克每升'
-  },
-  {
-    Symbol: 'mg/L',
-    Name: '毫克每升'
-  },
-  {
-    Symbol: 'μg/m³',
-    Name: '微克每立方米'
-  },
-  {
-    Symbol: 'mg/m³',
-    Name: '毫克每立方米'
-  },
-  {
-    Symbol: 'g/m³',
-    Name: '克每立方米'
-  },
-  {
-    Symbol: 'kg/m³',
-    Name: '千克每立方米'
-  },
-  {
-    Symbol: 'nF',
-    Name: '纳法'
-  },
-  {
-    Symbol: 'pF',
-    Name: '皮法'
-  },
-  {
-    Symbol: 'μF',
-    Name: '微法'
-  },
-  {
-    Symbol: 'F',
-    Name: '法拉'
-  },
-  {
-    Symbol: 'Ω',
-    Name: '欧姆'
-  },
-  {
-    Symbol: 'μA',
-    Name: '微安'
-  },
-  {
-    Symbol: 'mA',
-    Name: '毫安'
-  },
-  {
-    Symbol: 'kA',
-    Name: '千安'
-  },
-  {
-    Symbol: 'A',
-    Name: '安培'
-  },
-  {
-    Symbol: 'mV',
-    Name: '毫伏'
-  },
-  {
-    Symbol: 'V',
-    Name: '伏特'
-  },
-  {
-    Symbol: 'ms',
-    Name: '毫秒'
-  },
-  {
-    Symbol: 's',
-    Name: '秒'
-  },
-  {
-    Symbol: 'min',
-    Name: '分钟'
-  },
-  {
-    Symbol: 'h',
-    Name: '小时'
-  },
-  {
-    Symbol: 'day',
-    Name: '日'
-  },
-  {
-    Symbol: 'week',
-    Name: '周'
-  },
-  {
-    Symbol: 'month',
-    Name: '月'
-  },
-  {
-    Symbol: 'year',
-    Name: '年'
-  },
-  {
-    Symbol: 'kn',
-    Name: '节'
-  },
-  {
-    Symbol: 'km/h',
-    Name: '千米每小时'
-  },
-  {
-    Symbol: 'm/s',
-    Name: '米每秒'
-  },
-  {
-    Symbol: '″',
-    Name: '秒'
-  },
-  {
-    Symbol: '′',
-    Name: '分'
-  },
-  {
-    Symbol: '°',
-    Name: '度'
-  },
-  {
-    Symbol: 'rad',
-    Name: '弧度'
-  },
-  {
-    Symbol: 'Hz',
-    Name: '赫兹'
-  },
-  {
-    Symbol: 'μW',
-    Name: '微瓦'
-  },
-  {
-    Symbol: 'mW',
-    Name: '毫瓦'
-  },
-  {
-    Symbol: 'kW',
-    Name: '千瓦特'
-  },
-  {
-    Symbol: 'W',
-    Name: '瓦特'
-  },
-  {
-    Symbol: 'cal',
-    Name: '卡路里'
-  },
-  {
-    Symbol: 'kW·h',
-    Name: '千瓦时'
-  },
-  {
-    Symbol: 'Wh',
-    Name: '瓦时'
-  },
-  {
-    Symbol: 'eV',
-    Name: '电子伏'
-  },
-  {
-    Symbol: 'kJ',
-    Name: '千焦'
-  },
-  {
-    Symbol: 'J',
-    Name: '焦耳'
-  },
-  {
-    Symbol: '℉',
-    Name: '华氏度'
-  },
-  {
-    Symbol: 'K',
-    Name: '开尔文'
-  },
-  {
-    Symbol: 't',
-    Name: '吨'
-  },
-  {
-    Symbol: '°C',
-    Name: '摄氏度'
-  },
-  {
-    Symbol: 'mPa',
-    Name: '毫帕'
-  },
-  {
-    Symbol: 'hPa',
-    Name: '百帕'
-  },
-  {
-    Symbol: 'kPa',
-    Name: '千帕'
-  },
-  {
-    Symbol: 'Pa',
-    Name: '帕斯卡'
-  },
-  {
-    Symbol: 'mg',
-    Name: '毫克'
-  },
-  {
-    Symbol: 'g',
-    Name: '克'
-  },
-  {
-    Symbol: 'kg',
-    Name: '千克'
-  },
-  {
-    Symbol: 'N',
-    Name: '牛'
-  },
-  {
-    Symbol: 'mL',
-    Name: '毫升'
-  },
-  {
-    Symbol: 'L',
-    Name: '升'
-  },
-  {
-    Symbol: 'mm³',
-    Name: '立方毫米'
-  },
-  {
-    Symbol: 'cm³',
-    Name: '立方厘米'
-  },
-  {
-    Symbol: 'km³',
-    Name: '立方千米'
-  },
-  {
-    Symbol: 'm³',
-    Name: '立方米'
-  },
-  {
-    Symbol: 'h㎡',
-    Name: '公顷'
-  },
-  {
-    Symbol: 'c㎡',
-    Name: '平方厘米'
-  },
-  {
-    Symbol: 'm㎡',
-    Name: '平方毫米'
-  },
-  {
-    Symbol: 'k㎡',
-    Name: '平方千米'
-  },
-  {
-    Symbol: '㎡',
-    Name: '平方米'
-  },
-  {
-    Symbol: 'nm',
-    Name: '纳米'
-  },
-  {
-    Symbol: 'μm',
-    Name: '微米'
-  },
-  {
-    Symbol: 'mm',
-    Name: '毫米'
-  },
-  {
-    Symbol: 'cm',
-    Name: '厘米'
-  },
-  {
-    Symbol: 'dm',
-    Name: '分米'
-  },
-  {
-    Symbol: 'km',
-    Name: '千米'
-  },
-  {
-    Symbol: 'm',
-    Name: '米'
-  }
-]