【功能新增】IoT：产品详情，优化相关展示

src/api/iot/product/product/index.ts

@@ -7,6 +7,7 @@ export interface ProductVO {
   productKey: string // 产品标识
   protocolId: number // 协议编号
   categoryId: number // 产品所属品类标识符
+  categoryName?: string // 产品所属品类名称
   description: string // 产品描述
   validateType: number // 数据校验级别
   status: number // 产品状态
@@ -29,6 +30,11 @@ export enum DeviceTypeEnum {
   GATEWAY_SUB = 1, // 网关子设备
   GATEWAY = 2 // 网关设备
 }
+// IOT 数据格式枚举类
+export enum DataFormatEnum {
+  JSON = 0, // 标准数据格式（JSON）
+  CUSTOMIZE = 1 // 透传/自定义
+}
 
 // IoT 产品 API
 export const ProductApi = {

src/utils/index.ts

@@ -116,6 +116,20 @@ export function toAnyString() {
   return str
 }
 
+/**
+ * 生成指定长度的随机字符串
+ * 
+ * @param length 字符串长度
+ */
+export function generateRandomStr(length: number): string {
+  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+  let result = ''
+  for (let i = 0; i < length; i++) {
+    result += chars.charAt(Math.floor(Math.random() * chars.length))
+  }
+  return result
+}
+
 /**
  * 首字母大写
  */

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

@@ -45,8 +45,8 @@
     </el-descriptions>
     <el-descriptions :column="5" direction="horizontal">
       <el-descriptions-item label="设备数">
-        {{ product.deviceCount }}
-        <el-button @click="goToManagement(product.id)">前往管理</el-button>
+        {{ product.deviceCount ?? '加载中...' }}
+        <el-button @click="goToDeviceList(product.id)">前往管理</el-button>
       </el-descriptions-item>
     </el-descriptions>
   </ContentWrap>
@@ -73,16 +73,18 @@ const copyToClipboard = async (text: string) => {
 
 /** 路由跳转到设备管理 */
 const { push } = useRouter()
-const goToManagement = (productId: string) => {
-  push({ name: 'IoTDevice', query: { productId } })
+const goToDeviceList = (productId: number) => {
+  push({ name: 'IoTDevice', params: { productId } })
 }
 
-/** 操作修改 */
+/** 修改操作 */
 const emit = defineEmits(['refresh']) // 定义 Emits
 const formRef = ref()
 const openForm = (type: string, id?: number) => {
   formRef.value.open(type, id)
 }
+
+/** 发布操作 */
 const confirmPublish = async (id: number) => {
   try {
     await ProductApi.updateProductStatus(id, 1)
@@ -93,6 +95,8 @@ const confirmPublish = async (id: number) => {
     message.error('发布失败')
   }
 }
+
+/** 撤销发布操作 */
 const confirmUnpublish = async (id: number) => {
   try {
     await ProductApi.updateProductStatus(id, 0)

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

@@ -3,6 +3,7 @@
     <el-collapse v-model="activeNames">
       <el-descriptions :column="3" title="产品信息">
         <el-descriptions-item label="产品名称">{{ product.name }}</el-descriptions-item>
+        <el-descriptions-item label="所属分类">{{ product.categoryName }}</el-descriptions-item>
         <el-descriptions-item label="设备类型">
           <dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :value="product.deviceType" />
         </el-descriptions-item>
@@ -20,11 +21,14 @@
         </el-descriptions-item>
         <el-descriptions-item
           label="联网方式"
-          v-if="product.deviceType === 0 || product.deviceType === 2"
+          v-if="[DeviceTypeEnum.DEVICE, DeviceTypeEnum.GATEWAY].includes(product.deviceType)"
         >
           <dict-tag :type="DICT_TYPE.IOT_NET_TYPE" :value="product.netType" />
         </el-descriptions-item>
-        <el-descriptions-item label="接入网关协议" v-if="product.deviceType === 1">
+        <el-descriptions-item
+          label="接入网关协议"
+          v-if="product.deviceType === DeviceTypeEnum.GATEWAY_SUB"
+        >
           <dict-tag :type="DICT_TYPE.IOT_PROTOCOL_TYPE" :value="product.protocolType" />
         </el-descriptions-item>
         <el-descriptions-item label="产品描述">{{ product.description }}</el-descriptions-item>
@@ -34,7 +38,7 @@
 </template>
 <script setup lang="ts">
 import { DICT_TYPE } from '@/utils/dict'
-import { ProductVO } from '@/api/iot/product/product'
+import { DeviceTypeEnum, ProductVO } from '@/api/iot/product/product'
 import { formatDate } from '@/utils/formatTime'
 
 const { product } = defineProps<{ product: ProductVO }>()

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

@@ -33,7 +33,7 @@ const { currentRoute } = useRouter()
 
 const route = useRoute()
 const message = useMessage()
-const id = route.params.id // 编号
+const id = Number(route.params.id) // 编号
 const loading = ref(true) // 加载中
 const product = ref<ProductVO>({} as ProductVO) // 详情
 const activeTab = ref('info') // 默认激活的标签页
@@ -43,20 +43,17 @@ const getProductData = async (id: number) => {
   loading.value = true
   try {
     product.value = await ProductApi.getProduct(id)
-    console.log('Product data:', product.value)
   } finally {
     loading.value = false
   }
 }
 
-// 查询设备数量
+/** 查询设备数量 */
 const getDeviceCount = async (productId: number) => {
   try {
-    const count = await DeviceApi.getDeviceCount(productId)
-    console.log('Device count response:', count)
-    return count
+    return await DeviceApi.getDeviceCount(productId)
   } catch (error) {
-    console.error('Error fetching device count:', error)
+    console.error('Error fetching device count:', error, 'productId:', productId)
     return 0
   }
 }
@@ -72,9 +69,6 @@ onMounted(async () => {
   // 查询设备数量
   if (product.value.id) {
     product.value.deviceCount = await getDeviceCount(product.value.id)
-    console.log('Device count:', product.value.deviceCount)
-  } else {
-    console.error('Product ID is undefined')
   }
 })
 </script>