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

48907bde · YunaiV · dc2dbcbc · 48907bde · 48907bde · 48907bde
Commit 48907bde authored Dec 07, 2024 by YunaiV
5 changed files
--- a/src/api/iot/product/product/index.ts
+++ b/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 = {

--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -117,6 +117,20 @@ export function toAnyString() {
 }
 /**
+ * 生成指定长度的随机字符串
+ * 
+ * @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
+}
+/**
 * 首字母大写
 */
 export function firstUpperCase(str: string) {

--- a/src/views/iot/product/product/detail/ProductDetailsHeader.vue
+++ b/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 }}
+        {{ product.deviceCount ?? '加载中...' }}
-        <el-button @click="goToManagement(product.id)">前往管理</el-button>
+        <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) => {
+const goToDeviceList = (productId: number) => {
-  push({ name: 'IoTDevice', query: { productId } })
+  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)

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

--- a/src/views/iot/product/product/detail/index.vue
+++ b/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)
+    return await DeviceApi.getDeviceCount(productId)
-    console.log('Device count response:', count)
-    return count
  } 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>