【功能完善】IOT: 产品物模型-属性

src/api/iot/thinkmodelfunction/index.ts

@@ -10,6 +10,7 @@ export interface ThingModelData {
   description?: string // 功能描述
   productId?: number // 产品编号
   productKey?: string // 产品标识
+  dataType: string // 数据类型，与 dataSpecs 的 dataType 保持一致
   type: ProductFunctionTypeEnum // 功能类型
   property: ThingModelProperty // 属性
   event?: ThingModelEvent // 事件
@@ -53,34 +54,35 @@ export enum ProductFunctionAccessModeEnum {
 // IoT 产品物模型 API
 export const ThinkModelFunctionApi = {
   // 查询产品物模型分页
-  getThinkModelFunctionPage: async (params: any) => {
-    return await request.get({ url: `/iot/think-model-function/page`, params })
+  getProductThingModelPage: async (params: any) => {
+    return await request.get({ url: `/iot/product-thing-model/page`, params })
   },
+
   // 获得产品物模型
-  getThinkModelFunctionListByProductId: async (params: any) => {
+  getProductThingModelListByProductId: async (params: any) => {
     return await request.get({
-      url: `/iot/think-model-function/list-by-product-id`,
+      url: `/iot/product-thing-model/list-by-product-id`,
       params
     })
   },
 
   // 查询产品物模型详情
-  getThinkModelFunction: async (id: number) => {
-    return await request.get({ url: `/iot/think-model-function/get?id=` + id })
+  getProductThingModel: async (id: number) => {
+    return await request.get({ url: `/iot/product-thing-model/get?id=` + id })
   },
 
   // 新增产品物模型
-  createThinkModelFunction: async (data: ThingModelData) => {
-    return await request.post({ url: `/iot/think-model-function/create`, data })
+  createProductThingModel: async (data: ThingModelData) => {
+    return await request.post({ url: `/iot/product-thing-model/create`, data })
   },
 
   // 修改产品物模型
-  updateThinkModelFunction: async (data: ThingModelData) => {
-    return await request.put({ url: `/iot/think-model-function/update`, data })
+  updateProductThingModel: async (data: ThingModelData) => {
+    return await request.put({ url: `/iot/product-thing-model/update`, data })
   },
 
   // 删除产品物模型
-  deleteThinkModelFunction: async (id: number) => {
-    return await request.delete({ url: `/iot/think-model-function/delete?id=` + id })
+  deleteProductThingModel: async (id: number) => {
+    return await request.delete({ url: `/iot/product-thing-model/delete?id=` + id })
   }
 }

src/views/iot/product/product/detail/ThingModel/ThingModelDataSpecs.vue

@@ -24,34 +24,35 @@
     v-model="property.dataSpecsList"
   />
   <!-- 布尔型配置 -->
-  <el-form-item label="布尔值" prop="bool" v-if="property.dataType === DataSpecsDataType.BOOL">
+  <el-form-item v-if="property.dataType === DataSpecsDataType.BOOL" label="布尔值" prop="bool">
     <template v-for="item in property.dataSpecsList" :key="item.value">
       <div class="flex items-center justify-start w-1/1 mb-5px">
         <span>{{ item.value }}</span>
         <span class="mx-2">-</span>
         <el-input
           v-model="item.name"
-          class="w-255px!"
           :placeholder="`如：${item.value === 0 ? '关' : '开'}`"
+          class="w-255px!"
         />
       </div>
     </template>
   </el-form-item>
   <!-- 文本型配置 -->
-  <el-form-item label="数据长度" prop="text" v-if="property.dataType === DataSpecsDataType.TEXT">
-    <el-input v-model="property.length" class="w-255px!" placeholder="请输入文本字节长度">
+  <el-form-item v-if="property.dataType === DataSpecsDataType.TEXT" label="数据长度" prop="text">
+    <el-input v-model="property.dataSpecs.length" class="w-255px!" placeholder="请输入文本字节长度">
       <template #append>字节</template>
     </el-input>
   </el-form-item>
   <!-- 时间型配置 -->
-  <el-form-item label="时间格式" prop="date" v-if="property.dataType === DataSpecsDataType.DATE">
-    <el-input disabled class="w-255px!" placeholder="String类型的UTC时间戳（毫秒）" />
+  <el-form-item v-if="property.dataType === DataSpecsDataType.DATE" label="时间格式" prop="date">
+    <el-input class="w-255px!" disabled placeholder="String类型的UTC时间戳（毫秒）" />
   </el-form-item>
   <!-- 数组型配置-->
   <ThingModelArrayTypeDataSpecs
-    v-model="property.dataSpecs"
     v-if="property.dataType === DataSpecsDataType.ARRAY"
+    v-model="property.dataSpecs"
   />
+  <!-- TODO puhui999: Struct 属性待完善 -->
   <el-form-item label="读写类型" prop="accessMode">
     <el-radio-group v-model="property.accessMode">
       <el-radio label="rw">读写</el-radio>
@@ -84,16 +85,8 @@ const handleChange = (dataType: any) => {
   property.value.dataSpecsList = []
   property.value.dataSpecs = {}
 
+  property.value.dataSpecs.dataType = dataType
   switch (dataType) {
-    case DataSpecsDataType.INT:
-      property.value.dataSpecs.dataType = DataSpecsDataType.INT
-      break
-    case DataSpecsDataType.DOUBLE:
-      property.value.dataSpecs.dataType = DataSpecsDataType.DOUBLE
-      break
-    case DataSpecsDataType.FLOAT:
-      property.value.dataSpecs.dataType = DataSpecsDataType.FLOAT
-      break
     case DataSpecsDataType.ENUM:
       property.value.dataSpecsList.push({
         dataType: DataSpecsDataType.ENUM,
@@ -110,9 +103,6 @@ const handleChange = (dataType: any) => {
         })
       }
       break
-    case DataSpecsDataType.ARRAY:
-      property.value.dataSpecs.dataType = DataSpecsDataType.ARRAY
-      break
   }
 }
 </script>

src/views/iot/product/product/detail/ThingModel/ThingModelForm.vue

@@ -22,8 +22,8 @@
       </el-form-item>
       <!-- 属性配置 -->
       <ThingModelDataSpecs
-        v-model="formData.property"
         v-if="formData.type === ProductFunctionTypeEnum.PROPERTY"
+        v-model="formData.property"
       />
     </el-form>
 
@@ -39,11 +39,12 @@ import { ProductVO } from '@/api/iot/product/product'
 import ThingModelDataSpecs from './ThingModelDataSpecs.vue'
 import {
   ProductFunctionTypeEnum,
-  ThinkModelFunctionApi,
-  ThingModelData
+  ThingModelData,
+  ThinkModelFunctionApi
 } from '@/api/iot/thinkmodelfunction'
 import { IOT_PROVIDE_KEY } from '@/views/iot/utils/constants'
 import { DataSpecsDataType } from './config'
+import { cloneDeep } from 'lodash-es'
 
 defineOptions({ name: 'IoTProductThingModelForm' })
 
@@ -58,12 +59,15 @@ const formLoading = ref(false)
 const formType = ref('')
 const formData = ref<ThingModelData>({
   type: ProductFunctionTypeEnum.PROPERTY,
+  dataType: DataSpecsDataType.INT,
   property: {
     dataType: DataSpecsDataType.INT,
-    dataSpecsList: [],
-    dataSpecs: {}
+    dataSpecs: {
+      dataType: DataSpecsDataType.INT
+    }
   }
 })
+// TODO puhui999: 表单校验待完善
 const formRules = reactive({
   name: [
     { required: true, message: '功能名称不能为空', trigger: 'blur' },
@@ -114,7 +118,7 @@ const open = async (type: string, id?: number) => {
   if (id) {
     formLoading.value = true
     try {
-      formData.value = await ThinkModelFunctionApi.getThinkModelFunction(id)
+      formData.value = await ThinkModelFunctionApi.getProductThingModel(id)
     } finally {
       formLoading.value = false
     }
@@ -128,14 +132,19 @@ const submitForm = async () => {
   await formRef.value.validate()
   formLoading.value = true
   try {
-    const data = formData.value as unknown as ThingModelData
+    const data = cloneDeep(formData.value) as ThingModelData
+    // 信息补全
     data.productId = product!.value.id
     data.productKey = product!.value.productKey
+    data.description = data.property.description
+    data.dataType = data.property.dataType
+    data.property.identifier = data.identifier
+    data.property.name = data.name
     if (formType.value === 'create') {
-      await ThinkModelFunctionApi.createThinkModelFunction(data)
+      await ThinkModelFunctionApi.createProductThingModel(data)
       message.success(t('common.createSuccess'))
     } else {
-      await ThinkModelFunctionApi.updateThinkModelFunction(data)
+      await ThinkModelFunctionApi.updateProductThingModel(data)
       message.success(t('common.updateSuccess'))
     }
   } finally {
@@ -149,10 +158,12 @@ const submitForm = async () => {
 const resetForm = () => {
   formData.value = {
     type: ProductFunctionTypeEnum.PROPERTY,
+    dataType: DataSpecsDataType.INT,
     property: {
       dataType: DataSpecsDataType.INT,
-      dataSpecsList: [],
-      dataSpecs: {}
+      dataSpecs: {
+        dataType: DataSpecsDataType.INT
+      }
     }
   }
   formRef.value?.resetFields()

src/views/iot/product/product/detail/ThingModel/config.ts

@@ -43,3 +43,8 @@ export const dataTypeOptions = [
   { value: DataSpecsDataType.STRUCT, label: 'struct (结构体)' },
   { value: DataSpecsDataType.ARRAY, label: 'array (数组)' }
 ]
+
+/** 获得物体模型数据类型配置项名称 */
+export const getDataTypeOptionsLabel = (value: string) => {
+  return dataTypeOptions.find((option) => option.value === value)?.label
+}

src/views/iot/product/product/detail/ThingModel/index.vue

@@ -32,7 +32,12 @@
           <Icon class="mr-5px" icon="ep:refresh" />
           重置
         </el-button>
-        <el-button plain type="primary" @click="openForm('create')">
+        <el-button
+          v-hasPermi="[`iot:product-thing-model:create`]"
+          plain
+          type="primary"
+          @click="openForm('create')"
+        >
           <Icon class="mr-5px" icon="ep:plus" />
           添加功能
         </el-button>
@@ -49,12 +54,21 @@
         </el-table-column>
         <el-table-column align="center" label="功能名称" prop="name" />
         <el-table-column align="center" label="标识符" prop="identifier" />
-        <el-table-column align="center" label="数据类型" prop="identifier" />
-        <el-table-column align="center" label="数据定义" prop="identifier" />
+        <el-table-column align="center" label="数据类型" prop="identifier">
+          <template #default="{ row }">
+            {{ dataTypeOptionsLabel(row.property.dataType) ?? '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="数据定义" prop="identifier">
+          <template #default="{ row }">
+            <!-- TODO puhui999: 数据定义展示待完善 -->
+            {{ row.property.dataSpecs ?? row.property.dataSpecsList }}
+          </template>
+        </el-table-column>
         <el-table-column align="center" label="操作">
           <template #default="scope">
             <el-button
-              v-hasPermi="[`iot:think-model-function:update`]"
+              v-hasPermi="[`iot:product-thing-model:update`]"
               link
               type="primary"
               @click="openForm('update', scope.row.id)"
@@ -62,7 +76,7 @@
               编辑
             </el-button>
             <el-button
-              v-hasPermi="['iot:think-model-function:delete']"
+              v-hasPermi="['iot:product-thing-model:delete']"
               link
               type="danger"
               @click="handleDelete(scope.row.id)"
@@ -85,11 +99,12 @@
   <ThingModelForm ref="formRef" @success="getList" />
 </template>
 <script lang="ts" setup>
-import { ThinkModelFunctionApi, ThinkModelFunctionVO } from '@/api/iot/thinkmodelfunction'
+import { ThingModelData, ThinkModelFunctionApi } from '@/api/iot/thinkmodelfunction'
 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/product/product/detail/ThingModel/config'
 
 defineOptions({ name: 'IoTProductThingModel' })
 
@@ -97,7 +112,7 @@ const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
 const loading = ref(true) // 列表的加载中
-const list = ref<ThinkModelFunctionVO[]>([]) // 列表的数据
+const list = ref<ThingModelData[]>([]) // 列表的数据
 const total = ref(0) // 列表的总页数
 const queryParams = reactive({
   pageNo: 1,
@@ -108,12 +123,14 @@ const queryParams = reactive({
 
 const queryFormRef = ref() // 搜索的表单
 const product = inject<Ref<ProductVO>>(IOT_PROVIDE_KEY.PRODUCT) // 注入产品信息
+const dataTypeOptionsLabel = computed(() => (value: string) => getDataTypeOptionsLabel(value)) // 解析数据类型
+
 /** 查询列表 */
 const getList = async () => {
   loading.value = true
   try {
     queryParams.productId = product?.value?.id || -1
-    const data = await ThinkModelFunctionApi.getThinkModelFunctionPage(queryParams)
+    const data = await ThinkModelFunctionApi.getProductThingModelPage(queryParams)
     list.value = data.list
     total.value = data.total
   } finally {
@@ -145,7 +162,7 @@ const handleDelete = async (id: number) => {
     // 删除的二次确认
     await message.delConfirm()
     // 发起删除
-    await ThinkModelFunctionApi.deleteThinkModelFunction(id)
+    await ThinkModelFunctionApi.deleteProductThingModel(id)
     message.success(t('common.delSuccess'))
     // 刷新列表
     await getList()

src/views/iot/product/product/detail/index.vue

@@ -8,7 +8,7 @@
       <el-tab-pane label="Topic 类列表" name="topic">
         <ProductTopic v-if="activeTab === 'topic'" :product="product" />
       </el-tab-pane>
-      <el-tab-pane label="功能定义" lazy name="function">
+      <el-tab-pane label="功能定义" lazy name="thingModel">
         <IoTProductThingModel ref="thingModelRef" />
       </el-tab-pane>
       <el-tab-pane label="消息解析" name="message" />

src/views/iot/product/product/index.vue

@@ -2,49 +2,57 @@
   <ContentWrap>
     <!-- 搜索工作栏 -->
     <el-form
-      class="-mb-15px"
-      :model="queryParams"
       ref="queryFormRef"
       :inline="true"
+      :model="queryParams"
+      class="-mb-15px"
       label-width="68px"
     >
       <el-form-item label="产品名称" prop="name">
         <el-input
           v-model="queryParams.name"
-          placeholder="请输入产品名称"
+          class="!w-240px"
           clearable
+          placeholder="请输入产品名称"
           @keyup.enter="handleQuery"
-          class="!w-240px"
         />
       </el-form-item>
       <el-form-item label="ProductKey" prop="productKey">
         <el-input
           v-model="queryParams.productKey"
-          placeholder="请输入产品标识"
+          class="!w-240px"
           clearable
+          placeholder="请输入产品标识"
           @keyup.enter="handleQuery"
-          class="!w-240px"
         />
       </el-form-item>
       <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button @click="handleQuery">
+          <Icon class="mr-5px" icon="ep:search" />
+          搜索
+        </el-button>
+        <el-button @click="resetQuery">
+          <Icon class="mr-5px" icon="ep:refresh" />
+          重置
+        </el-button>
         <el-button
-          type="primary"
+          v-hasPermi="['iot:product:create']"
           plain
+          type="primary"
           @click="openForm('create')"
-          v-hasPermi="['iot:product:create']"
         >
-          <Icon icon="ep:plus" class="mr-5px" /> 新增
+          <Icon class="mr-5px" icon="ep:plus" />
+          新增
         </el-button>
         <el-button
-          type="success"
+          v-hasPermi="['iot:product:export']"
+          :loading="exportLoading"
           plain
+          type="success"
           @click="handleExport"
-          :loading="exportLoading"
-          v-hasPermi="['iot:product:export']"
         >
-          <Icon icon="ep:download" class="mr-5px" /> 导出
+          <Icon class="mr-5px" icon="ep:download" />
+          导出
         </el-button>
       </el-form-item>
       <!-- 视图切换按钮 -->
@@ -64,8 +72,8 @@
   <!-- 卡片视图 -->
   <ContentWrap>
     <el-row v-if="viewMode === 'card'" :gutter="16">
-      <el-col v-for="item in list" :key="item.id" :xs="24" :sm="12" :md="12" :lg="6" class="mb-4">
-        <el-card class="h-full transition-colors" :body-style="{ padding: '0' }">
+      <el-col v-for="item in list" :key="item.id" :lg="6" :md="12" :sm="12" :xs="24" class="mb-4">
+        <el-card :body-style="{ padding: '0' }" class="h-full transition-colors">
           <!-- 内容区域 -->
           <div class="p-4">
             <!-- 标题区域 -->
@@ -103,41 +111,41 @@
             <!-- 按钮组 -->
             <div class="flex items-center px-0">
               <el-button
+                v-hasPermi="['iot:product:update']"
                 class="flex-1 !px-2 !h-[32px] text-[13px]"
-                type="primary"
                 plain
+                type="primary"
                 @click="openForm('update', item.id)"
-                v-hasPermi="['iot:product:update']"
               >
-                <Icon icon="ep:edit-pen" class="mr-1" />
+                <Icon class="mr-1" icon="ep:edit-pen" />
                 编辑
               </el-button>
               <el-button
                 class="flex-1 !px-2 !h-[32px] !ml-[10px] text-[13px]"
-                type="warning"
                 plain
+                type="warning"
                 @click="openDetail(item.id)"
               >
-                <Icon icon="ep:view" class="mr-1" />
+                <Icon class="mr-1" icon="ep:view" />
                 详情
               </el-button>
               <el-button
                 class="flex-1 !px-2 !h-[32px] !ml-[10px] text-[13px]"
-                type="success"
                 plain
+                type="success"
                 @click="openObjectModel(item)"
               >
-                <Icon icon="ep:scale-to-original" class="mr-1" />
+                <Icon class="mr-1" icon="ep:scale-to-original" />
                 物模型
               </el-button>
               <div class="mx-[10px] h-[20px] w-[1px] bg-[#dcdfe6]"></div>
               <el-button
+                v-hasPermi="['iot:product:delete']"
+                :disabled="item.status === 1"
                 class="!px-2 !h-[32px] text-[13px]"
-                type="danger"
                 plain
+                type="danger"
                 @click="handleDelete(item.id)"
-                v-hasPermi="['iot:product:delete']"
-                :disabled="item.status === 1"
               >
                 <Icon icon="ep:delete" />
               </el-button>
@@ -148,68 +156,68 @@
     </el-row>
 
     <!-- 列表视图 -->
-    <el-table v-else v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-      <el-table-column label="ID" align="center" prop="id" />
-      <el-table-column label="ProductKey" align="center" prop="productKey" />
-      <el-table-column label="品类" align="center" prop="categoryName" />
-      <el-table-column label="设备类型" align="center" prop="deviceType">
+    <el-table v-else v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
+      <el-table-column align="center" label="ID" prop="id" />
+      <el-table-column align="center" label="ProductKey" prop="productKey" />
+      <el-table-column align="center" label="品类" prop="categoryName" />
+      <el-table-column align="center" label="设备类型" prop="deviceType">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :value="scope.row.deviceType" />
         </template>
       </el-table-column>
-      <el-table-column label="产品图标" align="center" prop="icon">
+      <el-table-column align="center" label="产品图标" prop="icon">
         <template #default="scope">
           <el-image
             v-if="scope.row.icon"
+            :preview-src-list="[scope.row.icon]"
             :src="scope.row.icon"
             class="w-40px h-40px"
-            :preview-src-list="[scope.row.icon]"
           />
           <span v-else>-</span>
         </template>
       </el-table-column>
-      <el-table-column label="产品图片" align="center" prop="picture">
+      <el-table-column align="center" label="产品图片" prop="picture">
         <template #default="scope">
           <el-image
             v-if="scope.row.picUrl"
+            :preview-src-list="[scope.row.picture]"
             :src="scope.row.picUrl"
             class="w-40px h-40px"
-            :preview-src-list="[scope.row.picture]"
           />
           <span v-else>-</span>
         </template>
       </el-table-column>
       <el-table-column
-        label="创建时间"
+        :formatter="dateFormatter"
         align="center"
+        label="创建时间"
         prop="createTime"
-        :formatter="dateFormatter"
         width="180px"
       />
-      <el-table-column label="操作" align="center">
+      <el-table-column align="center" label="操作">
         <template #default="scope">
           <el-button
+            v-hasPermi="['iot:product:query']"
             link
             type="primary"
             @click="openDetail(scope.row.id)"
-            v-hasPermi="['iot:product:query']"
           >
             查看
           </el-button>
           <el-button
+            v-hasPermi="['iot:product:update']"
             link
             type="primary"
             @click="openForm('update', scope.row.id)"
-            v-hasPermi="['iot:product:update']"
           >
             编辑
           </el-button>
           <el-button
+            v-hasPermi="['iot:product:delete']"
+            :disabled="scope.row.status === 1"
             link
             type="danger"
             @click="handleDelete(scope.row.id)"
-            v-hasPermi="['iot:product:delete']"
-            :disabled="scope.row.status === 1"
           >
             删除
           </el-button>
@@ -219,9 +227,9 @@
 
     <!-- 分页 -->
     <Pagination
-      :total="total"
-      v-model:page="queryParams.pageNo"
       v-model:limit="queryParams.pageSize"
+      v-model:page="queryParams.pageNo"
+      :total="total"
       @pagination="getList"
     />
   </ContentWrap>
@@ -230,7 +238,7 @@
   <ProductForm ref="formRef" @success="getList" />
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { dateFormatter } from '@/utils/formatTime'
 import { ProductApi, ProductVO } from '@/api/iot/product/product'
 import ProductForm from './ProductForm.vue'
@@ -301,7 +309,7 @@ const openObjectModel = (item: ProductVO) => {
   push({
     name: 'IoTProductDetail',
     params: { id: item.id },
-    query: { tab: 'function' }
+    query: { tab: 'thingModel' }
   })
 }