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

e36e4858 · puhui999 · 187b5b03 · e36e4858 · e36e4858 · e36e4858
Commit e36e4858 authored Dec 16, 2024 by puhui999
7 changed files
--- a/src/api/iot/thinkmodelfunction/index.ts
+++ b/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) => {
+  getProductThingModelPage: async (params: any) => {
-    return await request.get({ url: `/iot/think-model-function/page`, params })
+    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) => {
+  getProductThingModel: async (id: number) => {
-    return await request.get({ url: `/iot/think-model-function/get?id=` + id })
+    return await request.get({ url: `/iot/product-thing-model/get?id=` + id })
  },
  // 新增产品物模型
-  createThinkModelFunction: async (data: ThingModelData) => {
+  createProductThingModel: async (data: ThingModelData) => {
-    return await request.post({ url: `/iot/think-model-function/create`, data })
+    return await request.post({ url: `/iot/product-thing-model/create`, data })
  },
  // 修改产品物模型
-  updateThinkModelFunction: async (data: ThingModelData) => {
+  updateProductThingModel: async (data: ThingModelData) => {
-    return await request.put({ url: `/iot/think-model-function/update`, data })
+    return await request.put({ url: `/iot/product-thing-model/update`, data })
  },
  // 删除产品物模型
-  deleteThinkModelFunction: async (id: number) => {
+  deleteProductThingModel: async (id: number) => {
-    return await request.delete({ url: `/iot/think-model-function/delete?id=` + id })
+    return await request.delete({ url: `/iot/product-thing-model/delete?id=` + id })
  }
 }
--- a/src/views/iot/product/product/detail/ThingModel/ThingModelDataSpecs.vue
+++ b/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-form-item v-if="property.dataType === DataSpecsDataType.TEXT" label="数据长度" prop="text">
-    <el-input v-model="property.length" class="w-255px!" placeholder="请输入文本字节长度">
+    <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-form-item v-if="property.dataType === DataSpecsDataType.DATE" label="时间格式" prop="date">
-    <el-input disabled class="w-255px!" placeholder="String类型的UTC时间戳（毫秒）" />
+    <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>

--- a/src/views/iot/product/product/detail/ThingModel/ThingModelForm.vue
+++ b/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()

--- a/src/views/iot/product/product/detail/ThingModel/config.ts
+++ b/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
+}
--- a/src/views/iot/product/product/detail/ThingModel/index.vue
+++ b/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()

--- a/src/views/iot/product/product/detail/index.vue
+++ b/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" />

--- a/src/views/iot/product/product/index.vue
+++ b/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="handleQuery">
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+          <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-col v-for="item in list" :key="item.id" :lg="6" :md="12" :sm="12" :xs="24" class="mb-4">
-        <el-card class="h-full transition-colors" :body-style="{ padding: '0' }">
+        <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 v-else v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
-      <el-table-column label="ID" align="center" prop="id" />
+      <el-table-column align="center" label="ID" prop="id" />
-      <el-table-column label="ProductKey" align="center" prop="productKey" />
+      <el-table-column align="center" label="ProductKey" prop="productKey" />
-      <el-table-column label="品类" align="center" prop="categoryName" />
+      <el-table-column align="center" label="品类" prop="categoryName" />
-      <el-table-column label="设备类型" align="center" prop="deviceType">
+      <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' }
  })
 }