From 4aea2eaed59742807e339962901f5b4537b102ef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=89=E6=B5=A9=E6=B5=A9?= <1036606149@qq.com>
Date: Sat, 7 Sep 2024 09:46:52 +0800
Subject: [PATCH 01/11] =?UTF-8?q?=E6=96=B0=E5=A2=9E=EF=BC=9AIOT=20?=
 =?UTF-8?q?=E4=BA=A7=E5=93=81=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/iot/product/index.ts                  |  50 +++++
 src/router/modules/remaining.ts               |  21 ++
 src/utils/dict.ts                             |  10 +-
 src/views/iot/product/ProductForm.vue         | 203 +++++++++++++++++
 .../product/detail/ProductDetailsHeader.vue   |  45 ++++
 .../iot/product/detail/ProductDetailsInfo.vue |  37 ++++
 src/views/iot/product/detail/index.vue        |  51 +++++
 src/views/iot/product/index.vue               | 206 ++++++++++++++++++
 8 files changed, 622 insertions(+), 1 deletion(-)
 create mode 100644 src/api/iot/product/index.ts
 create mode 100644 src/views/iot/product/ProductForm.vue
 create mode 100644 src/views/iot/product/detail/ProductDetailsHeader.vue
 create mode 100644 src/views/iot/product/detail/ProductDetailsInfo.vue
 create mode 100644 src/views/iot/product/detail/index.vue
 create mode 100644 src/views/iot/product/index.vue

diff --git a/src/api/iot/product/index.ts b/src/api/iot/product/index.ts
new file mode 100644
index 00000000..4c18426b
--- /dev/null
+++ b/src/api/iot/product/index.ts
@@ -0,0 +1,50 @@
+import request from '@/config/axios'
+
+// iot 产品 VO
+export interface ProductVO {
+  name: string // 产品名称
+  id: number // 产品ID
+  productKey: string // 产品标识
+  protocolId: number // 协议编号（脚本解析 id）
+  categoryId: number // 产品所属品类标识符
+  description: string // 产品描述
+  validateType: number // 数据校验级别, 0: 强校验, 1: 弱校验, 2: 免校验
+  status: number // 产品状态, 0: DEVELOPMENT_STATUS, 1: RELEASE_STATUS
+  deviceType: number // 设备类型, 0: 直连设备, 1: 网关子设备, 2: 网关设备
+  netType: number // 联网方式, 0: Wi-Fi, 1: Cellular, 2: Ethernet, 3: 其他
+  protocolType: number // 接入网关协议, 0: modbus, 1: opc-ua, 2: customize, 3: ble, 4: zigbee
+  dataFormat: number // 数据格式, 0: 透传模式, 1: Alink JSON
+}
+
+// iot 产品 API
+export const ProductApi = {
+  // 查询iot 产品分页
+  getProductPage: async (params: any) => {
+    return await request.get({ url: `/iot/product/page`, params })
+  },
+
+  // 查询iot 产品详情
+  getProduct: async (id: number) => {
+    return await request.get({ url: `/iot/product/get?id=` + id })
+  },
+
+  // 新增iot 产品
+  createProduct: async (data: ProductVO) => {
+    return await request.post({ url: `/iot/product/create`, data })
+  },
+
+  // 修改iot 产品
+  updateProduct: async (data: ProductVO) => {
+    return await request.put({ url: `/iot/product/update`, data })
+  },
+
+  // 删除iot 产品
+  deleteProduct: async (id: number) => {
+    return await request.delete({ url: `/iot/product/delete?id=` + id })
+  },
+
+  // 导出iot 产品 Excel
+  exportProduct: async (params) => {
+    return await request.download({ url: `/iot/product/export-excel`, params })
+  }
+}
\ No newline at end of file
diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts
index f19d93ec..6b6acbcf 100644
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -594,6 +594,27 @@ const remainingRouter: AppRouteRecordRaw[] = [
         }
       }
     ]
+  },
+  {
+    path: '/iot',
+    component: Layout,
+    name: 'IOT',
+    meta: {
+      hidden: true
+    },
+    children: [
+      {
+        path: 'product/detail/:id',
+        name: 'IotProductDetail',
+        meta: {
+          title: '产品详情',
+          noCache: true,
+          hidden: true,
+          activeMenu: '/iot/product'
+        },
+        component: () => import('@/views/iot/product/detail/index.vue')
+      }
+    ]
   }
 ]
 
diff --git a/src/utils/dict.ts b/src/utils/dict.ts
index 7fbcfebc..4a8c017c 100644
--- a/src/utils/dict.ts
+++ b/src/utils/dict.ts
@@ -226,5 +226,13 @@ export enum DICT_TYPE {
   AI_WRITE_LENGTH = 'ai_write_length', // AI 写作长度
   AI_WRITE_FORMAT = 'ai_write_format', // AI 写作格式
   AI_WRITE_TONE = 'ai_write_tone', // AI 写作语气
-  AI_WRITE_LANGUAGE = 'ai_write_language' // AI 写作语言
+  AI_WRITE_LANGUAGE = 'ai_write_language', // AI 写作语言
+
+  // ========== IOT - 物联网模块  ==========
+  IOT_NET_TYPE = 'iot_net_type', // IOT 联网方式
+  IOT_VALIDATE_TYPE = 'iot_validate_type', // IOT 数据校验级别
+  IOT_PRODUCT_STATUS = 'iot_product_status', // IOT 产品状态
+  IOT_PRODUCT_DEVICE_TYPE = 'iot_product_device_type', // IOT 产品设备类型
+  IOT_DATA_FORMAT = 'iot_data_format', // IOT 数据格式
+  IOT_PROTOCOL_TYPE = 'iot_protocol_type' // IOT 接入网关协议
 }
diff --git a/src/views/iot/product/ProductForm.vue b/src/views/iot/product/ProductForm.vue
new file mode 100644
index 00000000..ca7a4134
--- /dev/null
+++ b/src/views/iot/product/ProductForm.vue
@@ -0,0 +1,203 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="产品名称" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入产品名称" />
+      </el-form-item>
+      <el-form-item label="设备类型" prop="deviceType">
+        <el-radio-group v-model="formData.deviceType">
+          <el-radio
+            v-for="dict in getIntDictOptions(DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE)"
+            :key="dict.value"
+            :label="dict.value"
+          >
+            {{ dict.label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        v-if="formData.deviceType === 0 || formData.deviceType === 2"
+        label="联网方式"
+        prop="netType"
+      >
+        <el-select v-model="formData.netType" placeholder="请选择联网方式">
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.IOT_NET_TYPE)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item v-if="formData.deviceType === 1" label="接入网关协议" prop="protocolType">
+        <el-select v-model="formData.protocolType" placeholder="请选择接入网关协议">
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.IOT_PROTOCOL_TYPE)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="数据格式" prop="dataFormat">
+        <el-select v-model="formData.dataFormat" placeholder="请选择接数据格式">
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.IOT_DATA_FORMAT)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="数据校验级别" prop="validateType">
+        <el-radio-group v-model="formData.validateType">
+          <el-radio
+            v-for="dict in getIntDictOptions(DICT_TYPE.IOT_VALIDATE_TYPE)"
+            :key="dict.value"
+            :label="dict.value"
+          >
+            {{ dict.label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="产品描述" prop="description">
+        <el-input type="textarea" v-model="formData.description" placeholder="请输入产品描述" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import { ProductApi, ProductVO } from '@/api/iot/product'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+
+/** iot 产品 表单 */
+defineOptions({ name: 'ProductForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  name: undefined,
+  id: undefined,
+  productKey: undefined,
+  protocolId: undefined,
+  categoryId: undefined,
+  description: undefined,
+  validateType: undefined,
+  status: undefined,
+  deviceType: undefined,
+  netType: undefined,
+  protocolType: undefined,
+  dataFormat: undefined
+})
+const formRules = reactive({
+  name: [{ required: true, message: '产品名称不能为空', trigger: 'blur' }],
+  deviceType: [
+    {
+      required: true,
+      message: '设备类型不能为空',
+      trigger: 'change'
+    }
+  ],
+  netType: [
+    {
+      required: formData.deviceType === 0 || formData.deviceType === 2,
+      message: '联网方式不能为空',
+      trigger: 'change'
+    }
+  ],
+  protocolType: [
+    { required: formData.deviceType === 1, message: '接入网关协议不能为空', trigger: 'change' }
+  ],
+  dataFormat: [
+    {
+      required: true,
+      message: '数据格式不能为空',
+      trigger: 'change'
+    }
+  ],
+  validateType: [
+    {
+      required: true,
+      message: '数据校验级别不能为空',
+      trigger: 'change'
+    }
+  ]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await ProductApi.getProduct(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  await formRef.value.validate()
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as ProductVO
+    if (formType.value === 'create') {
+      await ProductApi.createProduct(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await ProductApi.updateProduct(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    name: undefined,
+    id: undefined,
+    productKey: undefined,
+    protocolId: undefined,
+    categoryId: undefined,
+    description: undefined,
+    validateType: undefined,
+    status: undefined,
+    deviceType: undefined,
+    netType: undefined,
+    protocolType: undefined,
+    dataFormat: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/iot/product/detail/ProductDetailsHeader.vue b/src/views/iot/product/detail/ProductDetailsHeader.vue
new file mode 100644
index 00000000..4314652b
--- /dev/null
+++ b/src/views/iot/product/detail/ProductDetailsHeader.vue
@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <div class="flex items-start justify-between">
+      <div>
+        <el-col>
+          <el-row>
+            <span class="text-xl font-bold">{{ product.name }}</span>
+          </el-row>
+        </el-col>
+      </div>
+      <div>
+        <!-- 右上：按钮 -->
+        <el-button @click="openForm('update', product.id)" v-hasPermi="['iot:product:update']">
+          编辑
+        </el-button>
+      </div>
+    </div>
+  </div>
+  <ContentWrap class="mt-10px">
+    <el-descriptions :column="5" direction="vertical">
+      <el-descriptions-item label="产品名称">{{ product.name }}</el-descriptions-item>
+      <el-descriptions-item label="产品标识">{{ product.identification }}</el-descriptions-item>
+      <el-descriptions-item label="设备类型">
+        <dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :value="product.deviceType" />
+      </el-descriptions-item>
+      <el-descriptions-item label="产品状态">
+        <dict-tag :type="DICT_TYPE.IOT_PRODUCT_STATUS" :value="product.status" />
+      </el-descriptions-item>
+    </el-descriptions>
+  </ContentWrap>
+  <!-- 表单弹窗：添加/修改 -->
+  <ProductForm ref="formRef" @success="openForm('update', product.id)" />
+</template>
+<script setup lang="ts">
+import ProductForm from '@/views/iot/product/ProductForm.vue'
+import { DICT_TYPE } from '@/utils/dict'
+import { ProductVO } from '@/api/iot/product'
+
+// 操作修改
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+const { product } = defineProps<{ product: ProductVO }>()
+</script>
diff --git a/src/views/iot/product/detail/ProductDetailsInfo.vue b/src/views/iot/product/detail/ProductDetailsInfo.vue
new file mode 100644
index 00000000..ced4a98e
--- /dev/null
+++ b/src/views/iot/product/detail/ProductDetailsInfo.vue
@@ -0,0 +1,37 @@
+<template>
+  <ContentWrap>
+    <el-collapse v-model="activeNames">
+      <el-collapse-item name="basicInfo">
+        <template #title>
+          <span class="text-base font-bold">基本信息</span>
+        </template>
+        <el-descriptions :column="4">
+          <el-descriptions-item label="产品名称">{{ product.name }}</el-descriptions-item>
+          <el-descriptions-item label="产品标识">{{ product.identification }}</el-descriptions-item>
+          <el-descriptions-item label="设备类型">
+            <dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :value="product.deviceType" />
+          </el-descriptions-item>
+          <el-descriptions-item label="数据格式">
+            <dict-tag :type="DICT_TYPE.IOT_PRODUCT_DATA_FORMAT" :value="product.dataFormat" />
+          </el-descriptions-item>
+          <el-descriptions-item label="协议类型">
+            <dict-tag :type="DICT_TYPE.IOT_PRODUCT_PROTOCOL_TYPE" :value="product.protocolType" />
+          </el-descriptions-item>
+          <el-descriptions-item label="产品状态">
+            <dict-tag :type="DICT_TYPE.IOT_PRODUCT_STATUS" :value="product.status" />
+          </el-descriptions-item>
+          <el-descriptions-item label="产品描述">{{ product.description }}</el-descriptions-item>
+        </el-descriptions>
+      </el-collapse-item>
+    </el-collapse>
+  </ContentWrap>
+</template>
+<script setup lang="ts">
+import { DICT_TYPE } from '@/utils/dict'
+import { ProductVO } from '@/api/iot/product'
+
+const { product } = defineProps<{ product: ProductVO }>()
+
+// 展示的折叠面板
+const activeNames = ref(['basicInfo'])
+</script>
diff --git a/src/views/iot/product/detail/index.vue b/src/views/iot/product/detail/index.vue
new file mode 100644
index 00000000..0a3bda5b
--- /dev/null
+++ b/src/views/iot/product/detail/index.vue
@@ -0,0 +1,51 @@
+<template>
+  <ProductDetailsHeader :loading="loading" :product="product" @refresh="getProductData(id)" />
+  <el-col>
+    <el-tabs>
+      <el-tab-pane label="详细资料">
+        <ProductDetailsInfo :product="product" />
+      </el-tab-pane>
+      <el-tab-pane label="物模型">
+        <!--        <ProductDetailsModel :product="product" />-->
+      </el-tab-pane>
+    </el-tabs>
+  </el-col>
+</template>
+<script lang="ts" setup>
+import { useTagsViewStore } from '@/store/modules/tagsView'
+import { ProductApi, ProductVO } from '@/api/iot/product'
+import ProductDetailsHeader from '@/views/iot/product/detail/ProductDetailsHeader.vue'
+import ProductDetailsInfo from '@/views/iot/product/detail/ProductDetailsInfo.vue'
+
+defineOptions({ name: 'IotProductDetail' })
+
+const route = useRoute()
+const message = useMessage()
+const id = Number(route.params.id) // 编号
+const loading = ref(true) // 加载中
+const product = ref<ProductVO>({} as ProductVO) // 详情
+
+/** 获取详情 */
+const getProductData = async (id: number) => {
+  loading.value = true
+  try {
+    product.value = await ProductApi.getProduct(id)
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 获取物模型 */
+
+/** 初始化 */
+const { delView } = useTagsViewStore() // 视图操作
+const { currentRoute } = useRouter() // 路由
+onMounted(async () => {
+  if (!id) {
+    message.warning('参数错误，产品不能为空！')
+    delView(unref(currentRoute))
+    return
+  }
+  await getProductData(id)
+})
+</script>
diff --git a/src/views/iot/product/index.vue b/src/views/iot/product/index.vue
new file mode 100644
index 00000000..9e6d06a7
--- /dev/null
+++ b/src/views/iot/product/index.vue
@@ -0,0 +1,206 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="产品名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入产品名称"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="ProductKey" prop="productKey">
+        <el-input
+          v-model="queryParams.productKey"
+          placeholder="请输入产品标识"
+          clearable
+          @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
+          type="primary"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['iot:product:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+        <el-button
+          type="success"
+          plain
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['iot:product:export']"
+        >
+          <Icon icon="ep:download" class="mr-5px" /> 导出
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <el-table-column label="产品名称" align="center" prop="name" />
+      <el-table-column label="ProductKey" align="center" prop="productKey" />
+      <el-table-column label="设备类型" align="center" prop="deviceType">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :code="scope.row.deviceType" />
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="产品状态" align="center" prop="status">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.IOT_PRODUCT_STATUS" :code="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['iot:product:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['iot:product:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <ProductForm ref="formRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import { ProductApi, ProductVO } from '@/api/iot/product'
+import ProductForm from './ProductForm.vue'
+import { DICT_TYPE } from '@/utils/dict'
+
+/** iot 产品 列表 */
+defineOptions({ name: 'Product' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const list = ref<ProductVO[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  name: undefined,
+  createTime: [],
+  productKey: undefined,
+  protocolId: undefined,
+  categoryId: undefined,
+  description: undefined,
+  validateType: undefined,
+  status: undefined,
+  deviceType: undefined,
+  netType: undefined,
+  protocolType: undefined,
+  dataFormat: undefined
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await ProductApi.getProductPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await ProductApi.deleteProduct(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await ProductApi.exportProduct(queryParams)
+    download.excel(data, 'iot 产品.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>

From e5de6a5cbd3fa30326ffe14ad85dde32d4961495 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=89=E6=B5=A9=E6=B5=A9?= <1036606149@qq.com>
Date: Sat, 7 Sep 2024 16:38:36 +0800
Subject: [PATCH 02/11] =?UTF-8?q?=E4=BF=AE=E6=94=B9=EF=BC=9AIOT=20?=
 =?UTF-8?q?=E4=BA=A7=E5=93=81=E7=AE=A1=E7=90=86=20=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E7=A6=81=E7=94=A8=E5=AD=97=E6=AE=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/iot/product/ProductForm.vue | 45 ++++++++++++++++++++-------
 1 file changed, 34 insertions(+), 11 deletions(-)

diff --git a/src/views/iot/product/ProductForm.vue b/src/views/iot/product/ProductForm.vue
index ca7a4134..f5a33cd4 100644
--- a/src/views/iot/product/ProductForm.vue
+++ b/src/views/iot/product/ProductForm.vue
@@ -10,23 +10,32 @@
       <el-form-item label="产品名称" prop="name">
         <el-input v-model="formData.name" placeholder="请输入产品名称" />
       </el-form-item>
+
       <el-form-item label="设备类型" prop="deviceType">
-        <el-radio-group v-model="formData.deviceType">
-          <el-radio
+        <el-select
+          v-model="formData.deviceType"
+          placeholder="请选择设备类型"
+          :disabled="formType === 'update'"
+        >
+          <el-option
             v-for="dict in getIntDictOptions(DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE)"
             :key="dict.value"
-            :label="dict.value"
-          >
-            {{ dict.label }}
-          </el-radio>
-        </el-radio-group>
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
       </el-form-item>
+
       <el-form-item
         v-if="formData.deviceType === 0 || formData.deviceType === 2"
         label="联网方式"
         prop="netType"
       >
-        <el-select v-model="formData.netType" placeholder="请选择联网方式">
+        <el-select
+          v-model="formData.netType"
+          placeholder="请选择联网方式"
+          :disabled="formType === 'update'"
+        >
           <el-option
             v-for="dict in getIntDictOptions(DICT_TYPE.IOT_NET_TYPE)"
             :key="dict.value"
@@ -35,8 +44,13 @@
           />
         </el-select>
       </el-form-item>
+
       <el-form-item v-if="formData.deviceType === 1" label="接入网关协议" prop="protocolType">
-        <el-select v-model="formData.protocolType" placeholder="请选择接入网关协议">
+        <el-select
+          v-model="formData.protocolType"
+          placeholder="请选择接入网关协议"
+          :disabled="formType === 'update'"
+        >
           <el-option
             v-for="dict in getIntDictOptions(DICT_TYPE.IOT_PROTOCOL_TYPE)"
             :key="dict.value"
@@ -45,8 +59,13 @@
           />
         </el-select>
       </el-form-item>
+
       <el-form-item label="数据格式" prop="dataFormat">
-        <el-select v-model="formData.dataFormat" placeholder="请选择接数据格式">
+        <el-select
+          v-model="formData.dataFormat"
+          placeholder="请选择接数据格式"
+          :disabled="formType === 'update'"
+        >
           <el-option
             v-for="dict in getIntDictOptions(DICT_TYPE.IOT_DATA_FORMAT)"
             :key="dict.value"
@@ -55,8 +74,9 @@
           />
         </el-select>
       </el-form-item>
+
       <el-form-item label="数据校验级别" prop="validateType">
-        <el-radio-group v-model="formData.validateType">
+        <el-radio-group v-model="formData.validateType" :disabled="formType === 'update'">
           <el-radio
             v-for="dict in getIntDictOptions(DICT_TYPE.IOT_VALIDATE_TYPE)"
             :key="dict.value"
@@ -66,16 +86,19 @@
           </el-radio>
         </el-radio-group>
       </el-form-item>
+
       <el-form-item label="产品描述" prop="description">
         <el-input type="textarea" v-model="formData.description" placeholder="请输入产品描述" />
       </el-form-item>
     </el-form>
+
     <template #footer>
       <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
       <el-button @click="dialogVisible = false">取 消</el-button>
     </template>
   </Dialog>
 </template>
+
 <script setup lang="ts">
 import { ProductApi, ProductVO } from '@/api/iot/product'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'

From e6d83c1bd066bd4f9ec2a2185c8a3ecb1ec22dfc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=89=E6=B5=A9=E6=B5=A9?= <1036606149@qq.com>
Date: Sat, 7 Sep 2024 19:40:53 +0800
Subject: [PATCH 03/11] =?UTF-8?q?=E4=BF=AE=E6=94=B9=EF=BC=9AIOT=20?=
 =?UTF-8?q?=E4=BA=A7=E5=93=81=E7=AE=A1=E7=90=86=20=E5=8F=91=E5=B8=83?=
 =?UTF-8?q?=E4=BA=A7=E5=93=81=E5=92=8C=E4=BA=A7=E5=93=81=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/iot/product/index.ts                  |  7 +-
 src/components/DictTag/src/DictTag.vue        | 14 ++--
 src/utils/formatTime.ts                       | 12 +--
 src/views/iot/product/ProductForm.vue         | 28 +++----
 .../product/detail/ProductDetailsHeader.vue   | 75 ++++++++++++++++---
 .../iot/product/detail/ProductDetailsInfo.vue | 51 +++++++------
 src/views/iot/product/detail/index.vue        |  6 +-
 src/views/iot/product/index.vue               | 26 +++----
 8 files changed, 139 insertions(+), 80 deletions(-)

diff --git a/src/api/iot/product/index.ts b/src/api/iot/product/index.ts
index 4c18426b..1bc45b9e 100644
--- a/src/api/iot/product/index.ts
+++ b/src/api/iot/product/index.ts
@@ -46,5 +46,10 @@ export const ProductApi = {
   // 导出iot 产品 Excel
   exportProduct: async (params) => {
     return await request.download({ url: `/iot/product/export-excel`, params })
+  },
+
+  // 更新产品状态
+  updateProductStatus: async (id: number, status: number) => {
+    return await request.put({ url: `/iot/product/update-status?id=` + id + `&status=` + status })
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/DictTag/src/DictTag.vue b/src/components/DictTag/src/DictTag.vue
index f84a47cb..8835774f 100644
--- a/src/components/DictTag/src/DictTag.vue
+++ b/src/components/DictTag/src/DictTag.vue
@@ -3,7 +3,7 @@ import { defineComponent, PropType, computed } from 'vue'
 import { isHexColor } from '@/utils/color'
 import { ElTag } from 'element-plus'
 import { DictDataType, getDictOptions } from '@/utils/dict'
-import { isArray, isString, isNumber } from '@/utils/is'
+import { isArray, isString, isNumber, isBoolean } from '@/utils/is'
 
 export default defineComponent({
   name: 'DictTag',
@@ -29,15 +29,15 @@ export default defineComponent({
   },
   setup(props) {
     const valueArr: any = computed(() => {
-      // 1.是Number类型的情况
-      if (isNumber(props.value)) {
+      // 1. 是 Number 类型和 Boolean 类型的情况
+      if (isNumber(props.value) || isBoolean(props.value)) {
         return [String(props.value)]
       }
-      // 2.是字符串（进一步判断是否有包含分隔符号 -> props.sepSymbol ）
+      // 2. 是字符串（进一步判断是否有包含分隔符号 -> props.sepSymbol ）
       else if (isString(props.value)) {
         return props.value.split(props.separator)
       }
-      // 3.数组
+      // 3. 数组
       else if (isArray(props.value)) {
         return props.value.map(String)
       }
@@ -57,7 +57,7 @@ export default defineComponent({
         <div
           class="dict-tag"
           style={{
-            display: 'flex',
+            display: 'inline-flex',
             gap: props.gutter,
             justifyContent: 'center',
             alignItems: 'center'
@@ -72,7 +72,7 @@ export default defineComponent({
                 // 添加标签的文字颜色为白色，解决自定义背景颜色时标签文字看不清的问题
                 <ElTag
                   style={dict?.cssClass ? 'color: #fff' : ''}
-                  type={dict?.colorType}
+                  type={dict?.colorType || null}
                   color={dict?.cssClass && isHexColor(dict?.cssClass) ? dict?.cssClass : ''}
                   disableTransitions={true}
                 >
diff --git a/src/utils/formatTime.ts b/src/utils/formatTime.ts
index 134a986e..99eb428c 100644
--- a/src/utils/formatTime.ts
+++ b/src/utils/formatTime.ts
@@ -56,11 +56,11 @@ export const defaultShortcuts = [
  * 时间日期转换
  * @param date 当前时间，new Date() 格式
  * @param format 需要转换的时间格式字符串
- * @description format 字符串随意，如 `YYYY-mm、YYYY-mm-dd`
- * @description format 季度："YYYY-mm-dd HH:MM:SS QQQQ"
- * @description format 星期："YYYY-mm-dd HH:MM:SS WWW"
- * @description format 几周："YYYY-mm-dd HH:MM:SS ZZZ"
- * @description format 季度 + 星期 + 几周："YYYY-mm-dd HH:MM:SS WWW QQQQ ZZZ"
+ * @description format 字符串随意，如 `YYYY-MM、YYYY-MM-DD`
+ * @description format 季度："YYYY-MM-DD HH:mm:ss QQQQ"
+ * @description format 星期："YYYY-MM-DD HH:mm:ss WWW"
+ * @description format 几周："YYYY-MM-DD HH:mm:ss ZZZ"
+ * @description format 季度 + 星期 + 几周："YYYY-MM-DD HH:mm:ss WWW QQQQ ZZZ"
  * @returns 返回拼接后的时间字符串
  */
 export function formatDate(date: Date, format?: string): string {
@@ -110,7 +110,7 @@ export function getWeek(dateTime: Date): number {
  * @description param 3天：   60 * 60* 24 * 1000 * 3
  * @returns 返回拼接后的时间字符串
  */
-export function formatPast(param: string | Date, format = 'YYYY-mm-dd HH:MM:SS'): string {
+export function formatPast(param: string | Date, format = 'YYYY-MM-DD HH:mm:ss'): string {
   // 传入格式处理、存储转换值
   let t: any, s: number
   // 获取js 时间戳
diff --git a/src/views/iot/product/ProductForm.vue b/src/views/iot/product/ProductForm.vue
index f5a33cd4..21cee6c3 100644
--- a/src/views/iot/product/ProductForm.vue
+++ b/src/views/iot/product/ProductForm.vue
@@ -103,16 +103,15 @@
 import { ProductApi, ProductVO } from '@/api/iot/product'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 
-/** iot 产品 表单 */
 defineOptions({ name: 'ProductForm' })
 
-const { t } = useI18n() // 国际化
-const message = useMessage() // 消息弹窗
+const { t } = useI18n()
+const message = useMessage()
 
-const dialogVisible = ref(false) // 弹窗的是否展示
-const dialogTitle = ref('') // 弹窗的标题
-const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const dialogVisible = ref(false)
+const dialogTitle = ref('')
+const formLoading = ref(false)
+const formType = ref('')
 const formData = ref({
   name: undefined,
   id: undefined,
@@ -161,15 +160,13 @@ const formRules = reactive({
     }
   ]
 })
-const formRef = ref() // 表单 Ref
+const formRef = ref()
 
-/** 打开弹窗 */
 const open = async (type: string, id?: number) => {
   dialogVisible.value = true
   dialogTitle.value = t('action.' + type)
   formType.value = type
   resetForm()
-  // 修改时，设置数据
   if (id) {
     formLoading.value = true
     try {
@@ -179,14 +176,11 @@ const open = async (type: string, id?: number) => {
     }
   }
 }
-defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+defineExpose({ open, close: () => (dialogVisible.value = false) })
 
-/** 提交表单 */
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const emit = defineEmits(['success'])
 const submitForm = async () => {
-  // 校验表单
   await formRef.value.validate()
-  // 提交请求
   formLoading.value = true
   try {
     const data = formData.value as unknown as ProductVO
@@ -197,15 +191,13 @@ const submitForm = async () => {
       await ProductApi.updateProduct(data)
       message.success(t('common.updateSuccess'))
     }
-    dialogVisible.value = false
-    // 发送操作成功的事件
+    dialogVisible.value = false // 确保关闭弹框
     emit('success')
   } finally {
     formLoading.value = false
   }
 }
 
-/** 重置表单 */
 const resetForm = () => {
   formData.value = {
     name: undefined,
diff --git a/src/views/iot/product/detail/ProductDetailsHeader.vue b/src/views/iot/product/detail/ProductDetailsHeader.vue
index 4314652b..b50001e8 100644
--- a/src/views/iot/product/detail/ProductDetailsHeader.vue
+++ b/src/views/iot/product/detail/ProductDetailsHeader.vue
@@ -10,36 +10,89 @@
       </div>
       <div>
         <!-- 右上：按钮 -->
-        <el-button @click="openForm('update', product.id)" v-hasPermi="['iot:product:update']">
+        <el-button
+          @click="openForm('update', product.id)"
+          v-hasPermi="['iot:product:update']"
+          v-if="product.status === 0"
+        >
           编辑
         </el-button>
+        <el-button
+          type="primary"
+          @click="confirmPublish(product.id)"
+          v-hasPermi="['iot:product:update']"
+          v-if="product.status === 0"
+        >
+          发布
+        </el-button>
+        <el-button
+          type="danger"
+          @click="confirmUnpublish(product.id)"
+          v-hasPermi="['iot:product:update']"
+          v-if="product.status === 1"
+        >
+          撤销发布
+        </el-button>
       </div>
     </div>
   </div>
   <ContentWrap class="mt-10px">
-    <el-descriptions :column="5" direction="vertical">
-      <el-descriptions-item label="产品名称">{{ product.name }}</el-descriptions-item>
-      <el-descriptions-item label="产品标识">{{ product.identification }}</el-descriptions-item>
-      <el-descriptions-item label="设备类型">
-        <dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :value="product.deviceType" />
+    <el-descriptions :column="5" direction="horizontal">
+      <el-descriptions-item label="ProductKey">
+        {{ product.productKey }}
+        <el-button @click="copyToClipboard(product.productKey)">复制</el-button>
       </el-descriptions-item>
-      <el-descriptions-item label="产品状态">
-        <dict-tag :type="DICT_TYPE.IOT_PRODUCT_STATUS" :value="product.status" />
+    </el-descriptions>
+    <el-descriptions :column="5" direction="horizontal">
+      <el-descriptions-item label="设备数">
+        0
+        <el-button @click="goToManagement(product.productKey)">前往管理</el-button>
       </el-descriptions-item>
     </el-descriptions>
   </ContentWrap>
   <!-- 表单弹窗：添加/修改 -->
-  <ProductForm ref="formRef" @success="openForm('update', product.id)" />
+  <ProductForm ref="formRef" @success="emit('refresh')" />
 </template>
 <script setup lang="ts">
 import ProductForm from '@/views/iot/product/ProductForm.vue'
-import { DICT_TYPE } from '@/utils/dict'
-import { ProductVO } from '@/api/iot/product'
+import { ProductApi, ProductVO } from '@/api/iot/product'
+
+const message = useMessage()
+const copyToClipboard = (text: string) => {
+  navigator.clipboard.writeText(text).then(() => {
+    message.success('复制成功')
+  })
+}
+const goToManagement = (productKey: string) => {
+  message.warning('暂未开放')
+}
 
 // 操作修改
 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)
+    message.success('发布成功')
+    formRef.value.close() // 关闭弹框
+    emit('refresh')
+  } catch (error) {
+    message.error('发布失败')
+  }
+}
+const confirmUnpublish = async (id: number) => {
+  try {
+    await ProductApi.updateProductStatus(id, 0)
+    message.success('撤销发布成功')
+    formRef.value.close() // 关闭弹框
+    emit('refresh')
+  } catch (error) {
+    message.error('撤销发布失败')
+  }
+}
+
 const { product } = defineProps<{ product: ProductVO }>()
+const emit = defineEmits(['refresh'])
 </script>
diff --git a/src/views/iot/product/detail/ProductDetailsInfo.vue b/src/views/iot/product/detail/ProductDetailsInfo.vue
index ced4a98e..e3b5483a 100644
--- a/src/views/iot/product/detail/ProductDetailsInfo.vue
+++ b/src/views/iot/product/detail/ProductDetailsInfo.vue
@@ -1,34 +1,41 @@
 <template>
   <ContentWrap>
     <el-collapse v-model="activeNames">
-      <el-collapse-item name="basicInfo">
-        <template #title>
-          <span class="text-base font-bold">基本信息</span>
-        </template>
-        <el-descriptions :column="4">
-          <el-descriptions-item label="产品名称">{{ product.name }}</el-descriptions-item>
-          <el-descriptions-item label="产品标识">{{ product.identification }}</el-descriptions-item>
-          <el-descriptions-item label="设备类型">
-            <dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :value="product.deviceType" />
-          </el-descriptions-item>
-          <el-descriptions-item label="数据格式">
-            <dict-tag :type="DICT_TYPE.IOT_PRODUCT_DATA_FORMAT" :value="product.dataFormat" />
-          </el-descriptions-item>
-          <el-descriptions-item label="协议类型">
-            <dict-tag :type="DICT_TYPE.IOT_PRODUCT_PROTOCOL_TYPE" :value="product.protocolType" />
-          </el-descriptions-item>
-          <el-descriptions-item label="产品状态">
-            <dict-tag :type="DICT_TYPE.IOT_PRODUCT_STATUS" :value="product.status" />
-          </el-descriptions-item>
-          <el-descriptions-item label="产品描述">{{ product.description }}</el-descriptions-item>
-        </el-descriptions>
-      </el-collapse-item>
+      <el-descriptions :column="3" title="产品信息">
+        <el-descriptions-item label="产品名称">{{ product.name }}</el-descriptions-item>
+        <el-descriptions-item label="设备类型">
+          <dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :value="product.deviceType" />
+        </el-descriptions-item>
+        <el-descriptions-item label="创建时间">{{
+          formatDate(product.createTime)
+        }}</el-descriptions-item>
+        <el-descriptions-item label="数据格式">
+          <dict-tag :type="DICT_TYPE.IOT_DATA_FORMAT" :value="product.dataFormat" />
+        </el-descriptions-item>
+        <el-descriptions-item label="数据校验级别">
+          <dict-tag :type="DICT_TYPE.IOT_VALIDATE_TYPE" :value="product.validateType" />
+        </el-descriptions-item>
+        <el-descriptions-item label="产品状态">
+          <dict-tag :type="DICT_TYPE.IOT_PRODUCT_STATUS" :value="product.status" />
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="联网方式"
+          v-if="product.deviceType === 0 || product.deviceType === 2"
+        >
+          <dict-tag :type="DICT_TYPE.IOT_NET_TYPE" :value="product.netType" />
+        </el-descriptions-item>
+        <el-descriptions-item label="接入网关协议" v-if="product.deviceType === 1">
+          <dict-tag :type="DICT_TYPE.IOT_PROTOCOL_TYPE" :value="product.protocolType" />
+        </el-descriptions-item>
+        <el-descriptions-item label="产品描述">{{ product.description }}</el-descriptions-item>
+      </el-descriptions>
     </el-collapse>
   </ContentWrap>
 </template>
 <script setup lang="ts">
 import { DICT_TYPE } from '@/utils/dict'
 import { ProductVO } from '@/api/iot/product'
+import { formatDate } from '@/utils/formatTime'
 
 const { product } = defineProps<{ product: ProductVO }>()
 
diff --git a/src/views/iot/product/detail/index.vue b/src/views/iot/product/detail/index.vue
index 0a3bda5b..8652e240 100644
--- a/src/views/iot/product/detail/index.vue
+++ b/src/views/iot/product/detail/index.vue
@@ -2,12 +2,15 @@
   <ProductDetailsHeader :loading="loading" :product="product" @refresh="getProductData(id)" />
   <el-col>
     <el-tabs>
-      <el-tab-pane label="详细资料">
+      <el-tab-pane label="产品信息">
         <ProductDetailsInfo :product="product" />
       </el-tab-pane>
+      <el-tab-pane label="Topic 类列表" />
       <el-tab-pane label="物模型">
         <!--        <ProductDetailsModel :product="product" />-->
       </el-tab-pane>
+      <el-tab-pane label="消息解析" />
+      <el-tab-pane label="服务端订阅" />
     </el-tabs>
   </el-col>
 </template>
@@ -30,6 +33,7 @@ const getProductData = async (id: number) => {
   loading.value = true
   try {
     product.value = await ProductApi.getProduct(id)
+    console.log(product.value)
   } finally {
     loading.value = false
   }
diff --git a/src/views/iot/product/index.vue b/src/views/iot/product/index.vue
index 9e6d06a7..a1f5ae4a 100644
--- a/src/views/iot/product/index.vue
+++ b/src/views/iot/product/index.vue
@@ -37,15 +37,6 @@
         >
           <Icon icon="ep:plus" class="mr-5px" /> 新增
         </el-button>
-        <el-button
-          type="success"
-          plain
-          @click="handleExport"
-          :loading="exportLoading"
-          v-hasPermi="['iot:product:export']"
-        >
-          <Icon icon="ep:download" class="mr-5px" /> 导出
-        </el-button>
       </el-form-item>
     </el-form>
   </ContentWrap>
@@ -57,7 +48,7 @@
       <el-table-column label="ProductKey" align="center" prop="productKey" />
       <el-table-column label="设备类型" align="center" prop="deviceType">
         <template #default="scope">
-          <dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :code="scope.row.deviceType" />
+          <dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :value="scope.row.deviceType" />
         </template>
       </el-table-column>
       <el-table-column
@@ -69,7 +60,7 @@
       />
       <el-table-column label="产品状态" align="center" prop="status">
         <template #default="scope">
-          <dict-tag :type="DICT_TYPE.IOT_PRODUCT_STATUS" :code="scope.row.status" />
+          <dict-tag :type="DICT_TYPE.IOT_PRODUCT_STATUS" :value="scope.row.status" />
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center">
@@ -77,16 +68,17 @@
           <el-button
             link
             type="primary"
-            @click="openForm('update', scope.row.id)"
-            v-hasPermi="['iot:product:update']"
+            @click="openDetail(scope.row.id)"
+            v-hasPermi="['iot:product:query']"
           >
-            编辑
+            查看
           </el-button>
           <el-button
             link
             type="danger"
             @click="handleDelete(scope.row.id)"
             v-hasPermi="['iot:product:delete']"
+            :disabled="scope.row.status === 1"
           >
             删除
           </el-button>
@@ -171,6 +163,12 @@ const openForm = (type: string, id?: number) => {
   formRef.value.open(type, id)
 }
 
+/** 打开详情 */
+const { currentRoute, push } = useRouter()
+const openDetail = (id: number) => {
+  push({ name: 'IotProductDetail', params: { id } })
+}
+
 /** 删除按钮操作 */
 const handleDelete = async (id: number) => {
   try {

From b69a784e8631f8b230823b8022ec53d732c50d96 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=89=E6=B5=A9=E6=B5=A9?= <1036606149@qq.com>
Date: Sat, 21 Sep 2024 09:15:27 +0800
Subject: [PATCH 04/11] =?UTF-8?q?=E3=80=90=E6=96=B0=E5=A2=9E=E3=80=91=20IO?=
 =?UTF-8?q?T=20=E8=AE=BE=E5=A4=87=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/iot/device/index.ts            |  63 ++++++
 src/api/iot/product/index.ts           |   5 +
 src/router/modules/remaining.ts        |   2 +-
 src/utils/dict.ts                      |   3 +-
 src/views/iot/device/DeviceForm.vue    | 121 +++++++++++
 src/views/iot/device/index.vue         | 276 +++++++++++++++++++++++++
 src/views/iot/product/ProductForm.vue  |   2 +-
 src/views/iot/product/detail/index.vue |   2 +-
 src/views/iot/product/index.vue        |  10 +-
 9 files changed, 477 insertions(+), 7 deletions(-)
 create mode 100644 src/api/iot/device/index.ts
 create mode 100644 src/views/iot/device/DeviceForm.vue
 create mode 100644 src/views/iot/device/index.vue

diff --git a/src/api/iot/device/index.ts b/src/api/iot/device/index.ts
new file mode 100644
index 00000000..4ee6d8d9
--- /dev/null
+++ b/src/api/iot/device/index.ts
@@ -0,0 +1,63 @@
+import request from '@/config/axios'
+
+// IoT 设备 VO
+export interface DeviceVO {
+  id: number // 设备 ID，主键，自增
+  deviceKey: string // 设备唯一标识符，全局唯一，用于识别设备
+  deviceName: string // 设备名称，在产品内唯一，用于标识设备
+  productId: number // 产品 ID，关联 iot_product 表的 id
+  productKey: string // 产品 Key，关联 iot_product 表的 product_key
+  deviceType: number // 设备类型：0 - 直连设备，1 - 网关子设备，2 - 网关设备
+  nickname: string // 设备备注名称，供用户自定义备注
+  gatewayId: number // 网关设备 ID，子设备需要关联的网关设备 ID
+  status: number // 设备状态：0 - 未激活，1 - 在线，2 - 离线，3 - 已禁用
+  statusLastUpdateTime: Date // 设备状态最后更新时间
+  lastOnlineTime: Date // 最后上线时间
+  lastOfflineTime: Date // 最后离线时间
+  activeTime: Date // 设备激活时间
+  ip: string // 设备的 IP 地址
+  firmwareVersion: string // 设备的固件版本
+  deviceSecret: string // 设备密钥，用于设备认证，需安全存储
+  mqttClientId: string // MQTT 客户端 ID
+  mqttUsername: string // MQTT 用户名
+  mqttPassword: string // MQTT 密码
+  authType: string // 认证类型（如一机一密、动态注册）
+  latitude: number // 设备位置的纬度，范围 -90.000000 ~ 90.000000
+  longitude: number // 设备位置的经度，范围 -180.000000 ~ 180.000000
+  areaId: number // 地区编码，符合国家地区编码标准，关联地区表
+  address: string // 设备详细地址
+  serialNumber: string // 设备序列号
+}
+
+// IoT 设备 API
+export const DeviceApi = {
+  // 查询IoT 设备分页
+  getDevicePage: async (params: any) => {
+    return await request.get({ url: `/iot/device/page`, params })
+  },
+
+  // 查询IoT 设备详情
+  getDevice: async (id: number) => {
+    return await request.get({ url: `/iot/device/get?id=` + id })
+  },
+
+  // 新增IoT 设备
+  createDevice: async (data: DeviceVO) => {
+    return await request.post({ url: `/iot/device/create`, data })
+  },
+
+  // 修改IoT 设备
+  updateDevice: async (data: DeviceVO) => {
+    return await request.put({ url: `/iot/device/update`, data })
+  },
+
+  // 删除IoT 设备
+  deleteDevice: async (id: number) => {
+    return await request.delete({ url: `/iot/device/delete?id=` + id })
+  },
+
+  // 导出IoT 设备 Excel
+  exportDevice: async (params) => {
+    return await request.download({ url: `/iot/device/export-excel`, params })
+  }
+}
\ No newline at end of file
diff --git a/src/api/iot/product/index.ts b/src/api/iot/product/index.ts
index 1bc45b9e..d4de1e5b 100644
--- a/src/api/iot/product/index.ts
+++ b/src/api/iot/product/index.ts
@@ -51,5 +51,10 @@ export const ProductApi = {
   // 更新产品状态
   updateProductStatus: async (id: number, status: number) => {
     return await request.put({ url: `/iot/product/update-status?id=` + id + `&status=` + status })
+  },
+
+  // 查询产品（精简)列表
+  getSimpleProductList() {
+    return request.get({ url: '/iot/product/list-all-simple' })
   }
 }
diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts
index 0a156539..4595d563 100644
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -614,7 +614,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
     children: [
       {
         path: 'product/detail/:id',
-        name: 'IotProductDetail',
+        name: 'IoTProductDetail',
         meta: {
           title: '产品详情',
           noCache: true,
diff --git a/src/utils/dict.ts b/src/utils/dict.ts
index 4a8c017c..82f9218f 100644
--- a/src/utils/dict.ts
+++ b/src/utils/dict.ts
@@ -234,5 +234,6 @@ export enum DICT_TYPE {
   IOT_PRODUCT_STATUS = 'iot_product_status', // IOT 产品状态
   IOT_PRODUCT_DEVICE_TYPE = 'iot_product_device_type', // IOT 产品设备类型
   IOT_DATA_FORMAT = 'iot_data_format', // IOT 数据格式
-  IOT_PROTOCOL_TYPE = 'iot_protocol_type' // IOT 接入网关协议
+  IOT_PROTOCOL_TYPE = 'iot_protocol_type', // IOT 接入网关协议
+  IOT_DEVICE_STATUS = 'iot_device_status' // IOT 设备状态
 }
diff --git a/src/views/iot/device/DeviceForm.vue b/src/views/iot/device/DeviceForm.vue
new file mode 100644
index 00000000..a77045c9
--- /dev/null
+++ b/src/views/iot/device/DeviceForm.vue
@@ -0,0 +1,121 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="产品" prop="productId">
+        <el-select v-model="formData.productId" placeholder="请选择产品" clearable>
+          <el-option
+            v-for="product in products"
+            :key="product.id"
+            :label="product.name"
+            :value="product.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="DeviceName" prop="deviceName">
+        <el-input v-model="formData.deviceName" placeholder="请输入 DeviceName" />
+      </el-form-item>
+      <el-form-item label="备注名称" prop="nickname">
+        <el-input v-model="formData.nickname" placeholder="请输入备注名称" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import { DeviceApi, DeviceVO } from '@/api/iot/device'
+import { ProductApi } from '@/api/iot/product'
+
+/** IoT 设备 表单 */
+defineOptions({ name: 'IoTDeviceForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined,
+  productId: undefined,
+  deviceName: undefined,
+  nickname: undefined,
+  serialNumber: undefined
+})
+const formRules = reactive({
+  productId: [{ required: true, message: '产品不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await DeviceApi.getDevice(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  await formRef.value.validate()
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as DeviceVO
+    if (formType.value === 'create') {
+      await DeviceApi.createDevice(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await DeviceApi.updateDevice(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    productId: undefined,
+    deviceName: undefined,
+    nickname: undefined
+  }
+  formRef.value?.resetFields()
+}
+
+/** 查询字典下拉列表 */
+const products = ref()
+const getProducts = async () => {
+  products.value = await ProductApi.getSimpleProductList()
+}
+
+onMounted(() => {
+  getProducts()
+})
+</script>
diff --git a/src/views/iot/device/index.vue b/src/views/iot/device/index.vue
new file mode 100644
index 00000000..e50819bd
--- /dev/null
+++ b/src/views/iot/device/index.vue
@@ -0,0 +1,276 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="产品" prop="productId">
+        <el-select
+          v-model="queryParams.productId"
+          placeholder="请选择产品"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="product in products"
+            :key="product.id"
+            :label="product.name"
+            :value="product.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="DeviceName" prop="deviceName">
+        <el-input
+          v-model="queryParams.deviceName"
+          placeholder="请输入 DeviceName"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="备注名称" prop="nickname">
+        <el-input
+          v-model="queryParams.nickname"
+          placeholder="请输入备注名称"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="设备类型" prop="deviceType">
+        <el-select
+          v-model="queryParams.deviceType"
+          placeholder="请选择设备类型"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="设备状态" prop="status">
+        <el-select
+          v-model="queryParams.status"
+          placeholder="请选择设备状态"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.IOT_DEVICE_STATUS)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </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
+          type="primary"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['iot:device:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+        <el-button
+          type="success"
+          plain
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['iot:device:export']"
+        >
+          <Icon icon="ep:download" class="mr-5px" /> 导出
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <el-table-column label="DeviceName" align="center" prop="deviceName" />
+      <el-table-column label="备注名称" align="center" prop="nickname" />
+      <el-table-column label="设备所属产品" align="center" prop="productName" />
+      <el-table-column label="设备类型" align="center" prop="deviceType" />
+      <el-table-column label="设备状态" align="center" prop="status" />
+      <el-table-column
+        label="最后上线时间"
+        align="center"
+        prop="lastOnlineTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="启用禁用">
+        <template #default="scope">
+          <el-switch
+            v-model="scope.row.status"
+            active-value="1"
+            inactive-value="0"
+            active-text="启用"
+            inactive-text="禁用"
+            @change="handleUpdate(scope.row)"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" min-width="120px">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['iot:device:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['iot:device:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <DeviceForm ref="formRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import { DeviceApi, DeviceVO } from '@/api/iot/device'
+import DeviceForm from './DeviceForm.vue'
+import { ProductApi } from '@/api/iot/product'
+
+/** IoT 设备 列表 */
+defineOptions({ name: 'IoTDevice' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const list = ref<DeviceVO[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  deviceKey: undefined,
+  deviceName: undefined,
+  productId: undefined,
+  productKey: undefined,
+  deviceType: undefined,
+  nickname: undefined,
+  gatewayId: undefined,
+  status: undefined,
+  statusLastUpdateTime: [],
+  lastOnlineTime: [],
+  lastOfflineTime: [],
+  activeTime: [],
+  ip: undefined,
+  firmwareVersion: undefined,
+  deviceSecret: undefined,
+  mqttClientId: undefined,
+  mqttUsername: undefined,
+  mqttPassword: undefined,
+  authType: undefined,
+  latitude: undefined,
+  longitude: undefined,
+  areaId: undefined,
+  address: undefined,
+  serialNumber: undefined,
+  createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await DeviceApi.getDevicePage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await DeviceApi.deleteDevice(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await DeviceApi.exportDevice(queryParams)
+    download.excel(data, '设备.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+/** 查询字典下拉列表 */
+const products = ref()
+const getProducts = async () => {
+  products.value = await ProductApi.getSimpleProductList()
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+  getProducts()
+})
+</script>
diff --git a/src/views/iot/product/ProductForm.vue b/src/views/iot/product/ProductForm.vue
index 21cee6c3..7d254a03 100644
--- a/src/views/iot/product/ProductForm.vue
+++ b/src/views/iot/product/ProductForm.vue
@@ -103,7 +103,7 @@
 import { ProductApi, ProductVO } from '@/api/iot/product'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 
-defineOptions({ name: 'ProductForm' })
+defineOptions({ name: 'IoTProductForm' })
 
 const { t } = useI18n()
 const message = useMessage()
diff --git a/src/views/iot/product/detail/index.vue b/src/views/iot/product/detail/index.vue
index 8652e240..c77fe176 100644
--- a/src/views/iot/product/detail/index.vue
+++ b/src/views/iot/product/detail/index.vue
@@ -20,7 +20,7 @@ import { ProductApi, ProductVO } from '@/api/iot/product'
 import ProductDetailsHeader from '@/views/iot/product/detail/ProductDetailsHeader.vue'
 import ProductDetailsInfo from '@/views/iot/product/detail/ProductDetailsInfo.vue'
 
-defineOptions({ name: 'IotProductDetail' })
+defineOptions({ name: 'IoTProductDetail' })
 
 const route = useRoute()
 const message = useMessage()
diff --git a/src/views/iot/product/index.vue b/src/views/iot/product/index.vue
index a1f5ae4a..d3196ac4 100644
--- a/src/views/iot/product/index.vue
+++ b/src/views/iot/product/index.vue
@@ -44,7 +44,11 @@
   <!-- 列表 -->
   <ContentWrap>
     <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-      <el-table-column label="产品名称" align="center" prop="name" />
+      <el-table-column label="产品名称" align="center" prop="name">
+        <template #default="scope">
+          <el-link @click="openDetail(scope.row.id)">{{ scope.row.name }}</el-link>
+        </template>
+      </el-table-column>
       <el-table-column label="ProductKey" align="center" prop="productKey" />
       <el-table-column label="设备类型" align="center" prop="deviceType">
         <template #default="scope">
@@ -106,7 +110,7 @@ import ProductForm from './ProductForm.vue'
 import { DICT_TYPE } from '@/utils/dict'
 
 /** iot 产品 列表 */
-defineOptions({ name: 'Product' })
+defineOptions({ name: 'IoTProduct' })
 
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
@@ -166,7 +170,7 @@ const openForm = (type: string, id?: number) => {
 /** 打开详情 */
 const { currentRoute, push } = useRouter()
 const openDetail = (id: number) => {
-  push({ name: 'IotProductDetail', params: { id } })
+  push({ name: 'IoTProductDetail', params: { id } })
 }
 
 /** 删除按钮操作 */

From 63a0e5dc3d3463caffd56eceac5defd854941288 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=89=E6=B5=A9=E6=B5=A9?= <1036606149@qq.com>
Date: Sun, 22 Sep 2024 13:17:12 +0800
Subject: [PATCH 05/11] =?UTF-8?q?=E3=80=90=E4=BC=98=E5=8C=96=E3=80=91=20IO?=
 =?UTF-8?q?T=20=E8=AE=BE=E5=A4=87=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/iot/device/index.ts         | 28 +++++++---
 src/views/iot/device/DeviceForm.vue | 42 +++++++++++++-
 src/views/iot/device/index.vue      | 86 +++++++++++++----------------
 3 files changed, 95 insertions(+), 61 deletions(-)

diff --git a/src/api/iot/device/index.ts b/src/api/iot/device/index.ts
index 4ee6d8d9..39a2e5a8 100644
--- a/src/api/iot/device/index.ts
+++ b/src/api/iot/device/index.ts
@@ -1,6 +1,6 @@
 import request from '@/config/axios'
 
-// IoT 设备 VO
+// 设备 VO
 export interface DeviceVO {
   id: number // 设备 ID，主键，自增
   deviceKey: string // 设备唯一标识符，全局唯一，用于识别设备
@@ -29,35 +29,45 @@ export interface DeviceVO {
   serialNumber: string // 设备序列号
 }
 
-// IoT 设备 API
+export interface DeviceUpdateStatusVO {
+  id: number // 设备 ID，主键，自增
+  status: number // 设备状态：0 - 未激活，1 - 在线，2 - 离线，3 - 已禁用
+}
+
+// 设备 API
 export const DeviceApi = {
-  // 查询IoT 设备分页
+  // 查询设备分页
   getDevicePage: async (params: any) => {
     return await request.get({ url: `/iot/device/page`, params })
   },
 
-  // 查询IoT 设备详情
+  // 查询设备详情
   getDevice: async (id: number) => {
     return await request.get({ url: `/iot/device/get?id=` + id })
   },
 
-  // 新增IoT 设备
+  // 新增设备
   createDevice: async (data: DeviceVO) => {
     return await request.post({ url: `/iot/device/create`, data })
   },
 
-  // 修改IoT 设备
+  // 修改设备
   updateDevice: async (data: DeviceVO) => {
     return await request.put({ url: `/iot/device/update`, data })
   },
 
-  // 删除IoT 设备
+  // 修改设备状态
+  updateDeviceStatus: async (data: DeviceUpdateStatusVO) => {
+    return await request.put({ url: `/iot/device/update-status`, data })
+  },
+
+  // 删除设备
   deleteDevice: async (id: number) => {
     return await request.delete({ url: `/iot/device/delete?id=` + id })
   },
 
-  // 导出IoT 设备 Excel
+  // 导出设备 Excel
   exportDevice: async (params) => {
     return await request.download({ url: `/iot/device/export-excel`, params })
   }
-}
\ No newline at end of file
+}
diff --git a/src/views/iot/device/DeviceForm.vue b/src/views/iot/device/DeviceForm.vue
index a77045c9..f926b6d4 100644
--- a/src/views/iot/device/DeviceForm.vue
+++ b/src/views/iot/device/DeviceForm.vue
@@ -8,7 +8,12 @@
       v-loading="formLoading"
     >
       <el-form-item label="产品" prop="productId">
-        <el-select v-model="formData.productId" placeholder="请选择产品" clearable>
+        <el-select
+          v-model="formData.productId"
+          placeholder="请选择产品"
+          :disabled="formType === 'update'"
+          clearable
+        >
           <el-option
             v-for="product in products"
             :key="product.id"
@@ -18,7 +23,11 @@
         </el-select>
       </el-form-item>
       <el-form-item label="DeviceName" prop="deviceName">
-        <el-input v-model="formData.deviceName" placeholder="请输入 DeviceName" />
+        <el-input
+          v-model="formData.deviceName"
+          placeholder="请输入 DeviceName"
+          :disabled="formType === 'update'"
+        />
       </el-form-item>
       <el-form-item label="备注名称" prop="nickname">
         <el-input v-model="formData.nickname" placeholder="请输入备注名称" />
@@ -52,7 +61,34 @@ const formData = ref({
   serialNumber: undefined
 })
 const formRules = reactive({
-  productId: [{ required: true, message: '产品不能为空', trigger: 'blur' }]
+  productId: [{ required: true, message: '产品不能为空', trigger: 'blur' }],
+  deviceName: [
+    {
+      pattern: /^[a-zA-Z0-9_.\-:@]{4,32}$/,
+      message:
+        '支持英文字母、数字、下划线（_）、中划线（-）、点号（.）、半角冒号（:）和特殊字符@，长度限制为4~32个字符',
+      trigger: 'blur'
+    }
+  ],
+  nickname: [
+    {
+      validator: (rule, value, callback) => {
+        if (value === undefined || value === null) {
+          callback()
+          return
+        }
+        const length = value.replace(/[\u4e00-\u9fa5\u3040-\u30ff]/g, 'aa').length
+        if (length < 4 || length > 64) {
+          callback(new Error('备注名称长度限制为4~64个字符，中文及日文算2个字符'))
+        } else if (!/^[\u4e00-\u9fa5\u3040-\u30ff_a-zA-Z0-9]+$/.test(value)) {
+          callback(new Error('备注名称只能包含中文、英文字母、日文、数字和下划线（_）'))
+        } else {
+          callback()
+        }
+      },
+      trigger: 'blur'
+    }
+  ]
 })
 const formRef = ref() // 表单 Ref
 
diff --git a/src/views/iot/device/index.vue b/src/views/iot/device/index.vue
index e50819bd..bb733250 100644
--- a/src/views/iot/device/index.vue
+++ b/src/views/iot/device/index.vue
@@ -72,24 +72,22 @@
         </el-select>
       </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 icon="ep:search" class="mr-5px" />
+          搜索
+        </el-button>
+        <el-button @click="resetQuery">
+          <Icon icon="ep:refresh" class="mr-5px" />
+          重置
+        </el-button>
         <el-button
           type="primary"
           plain
           @click="openForm('create')"
           v-hasPermi="['iot:device:create']"
         >
-          <Icon icon="ep:plus" class="mr-5px" /> 新增
-        </el-button>
-        <el-button
-          type="success"
-          plain
-          @click="handleExport"
-          :loading="exportLoading"
-          v-hasPermi="['iot:device:export']"
-        >
-          <Icon icon="ep:download" class="mr-5px" /> 导出
+          <Icon icon="ep:plus" class="mr-5px" />
+          新增
         </el-button>
       </el-form-item>
     </el-form>
@@ -100,9 +98,21 @@
     <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
       <el-table-column label="DeviceName" align="center" prop="deviceName" />
       <el-table-column label="备注名称" align="center" prop="nickname" />
-      <el-table-column label="设备所属产品" align="center" prop="productName" />
-      <el-table-column label="设备类型" align="center" prop="deviceType" />
-      <el-table-column label="设备状态" align="center" prop="status" />
+      <el-table-column label="设备所属产品" align="center" prop="productId">
+        <template #default="scope">
+          {{ productMap[scope.row.productId] }}
+        </template>
+      </el-table-column>
+      <el-table-column label="设备类型" align="center" 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="status">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.IOT_DEVICE_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
       <el-table-column
         label="最后上线时间"
         align="center"
@@ -110,18 +120,6 @@
         :formatter="dateFormatter"
         width="180px"
       />
-      <el-table-column label="启用禁用">
-        <template #default="scope">
-          <el-switch
-            v-model="scope.row.status"
-            active-value="1"
-            inactive-value="0"
-            active-text="启用"
-            inactive-text="禁用"
-            @change="handleUpdate(scope.row)"
-          />
-        </template>
-      </el-table-column>
       <el-table-column label="操作" align="center" min-width="120px">
         <template #default="scope">
           <el-button
@@ -160,7 +158,7 @@
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
-import { DeviceApi, DeviceVO } from '@/api/iot/device'
+import { DeviceApi, DeviceUpdateStatusVO, DeviceVO } from '@/api/iot/device'
 import DeviceForm from './DeviceForm.vue'
 import { ProductApi } from '@/api/iot/product'
 
@@ -176,35 +174,18 @@ const total = ref(0) // 列表的总页数
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
-  deviceKey: undefined,
   deviceName: undefined,
   productId: undefined,
-  productKey: undefined,
   deviceType: undefined,
   nickname: undefined,
-  gatewayId: undefined,
-  status: undefined,
-  statusLastUpdateTime: [],
-  lastOnlineTime: [],
-  lastOfflineTime: [],
-  activeTime: [],
-  ip: undefined,
-  firmwareVersion: undefined,
-  deviceSecret: undefined,
-  mqttClientId: undefined,
-  mqttUsername: undefined,
-  mqttPassword: undefined,
-  authType: undefined,
-  latitude: undefined,
-  longitude: undefined,
-  areaId: undefined,
-  address: undefined,
-  serialNumber: undefined,
-  createTime: []
+  status: undefined
 })
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
 
+/** 产品ID到名称的映射 */
+const productMap = reactive({})
+
 /** 查询列表 */
 const getList = async () => {
   loading.value = true
@@ -212,6 +193,13 @@ const getList = async () => {
     const data = await DeviceApi.getDevicePage(queryParams)
     list.value = data.list
     total.value = data.total
+    // 获取产品ID列表
+    const productIds = [...new Set(data.list.map((device) => device.productId))]
+    // 获取产品名称
+    const products = await Promise.all(productIds.map((id) => ProductApi.getProduct(id)))
+    products.forEach((product) => {
+      productMap[product.id] = product.name
+    })
   } finally {
     loading.value = false
   }

From 93a0789e34280c3607a80c5ebfdb3da5894b5e97 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=89=E6=B5=A9=E6=B5=A9?= <1036606149@qq.com>
Date: Sun, 22 Sep 2024 15:42:20 +0800
Subject: [PATCH 06/11] =?UTF-8?q?=E3=80=90=E6=96=B0=E5=A2=9E=E3=80=91=20IO?=
 =?UTF-8?q?T=20=E8=AE=BE=E5=A4=87=E7=AE=A1=E7=90=86=EF=BC=8C=E8=AE=BE?=
 =?UTF-8?q?=E5=A4=87=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/iot/device/index.ts                   |   1 +
 src/router/modules/remaining.ts               |  11 ++
 .../iot/device/detail/DeviceDetailsHeader.vue | 114 ++++++++++++
 .../iot/device/detail/DeviceDetailsInfo.vue   | 175 ++++++++++++++++++
 src/views/iot/device/detail/index.vue         |  66 +++++++
 src/views/iot/device/index.vue                |  38 ++--
 6 files changed, 387 insertions(+), 18 deletions(-)
 create mode 100644 src/views/iot/device/detail/DeviceDetailsHeader.vue
 create mode 100644 src/views/iot/device/detail/DeviceDetailsInfo.vue
 create mode 100644 src/views/iot/device/detail/index.vue

diff --git a/src/api/iot/device/index.ts b/src/api/iot/device/index.ts
index 39a2e5a8..2a1951de 100644
--- a/src/api/iot/device/index.ts
+++ b/src/api/iot/device/index.ts
@@ -15,6 +15,7 @@ export interface DeviceVO {
   lastOnlineTime: Date // 最后上线时间
   lastOfflineTime: Date // 最后离线时间
   activeTime: Date // 设备激活时间
+  createTime: Date // 创建时间
   ip: string // 设备的 IP 地址
   firmwareVersion: string // 设备的固件版本
   deviceSecret: string // 设备密钥，用于设备认证，需安全存储
diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts
index 4595d563..cba8359c 100644
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -622,6 +622,17 @@ const remainingRouter: AppRouteRecordRaw[] = [
           activeMenu: '/iot/product'
         },
         component: () => import('@/views/iot/product/detail/index.vue')
+      },
+      {
+        path: 'device/detail/:id',
+        name: 'IoTDeviceDetail',
+        meta: {
+          title: '设备详情',
+          noCache: true,
+          hidden: true,
+          activeMenu: '/iot/device'
+        },
+        component: () => import('@/views/iot/device/detail/index.vue')
       }
     ]
   }
diff --git a/src/views/iot/device/detail/DeviceDetailsHeader.vue b/src/views/iot/device/detail/DeviceDetailsHeader.vue
new file mode 100644
index 00000000..cc585f4a
--- /dev/null
+++ b/src/views/iot/device/detail/DeviceDetailsHeader.vue
@@ -0,0 +1,114 @@
+<template>
+  <div>
+    <div class="flex items-start justify-between">
+      <div>
+        <el-col>
+          <el-row>
+            <span class="text-xl font-bold">{{ device.deviceName }}</span>
+          </el-row>
+        </el-col>
+      </div>
+      <div>
+        <!-- 右上：按钮 -->
+        <el-button
+          @click="openForm('update', device.id)"
+          v-hasPermi="['iot:device:update']"
+          v-if="product.status === 0"
+        >
+          编辑
+        </el-button>
+      </div>
+    </div>
+  </div>
+  <ContentWrap class="mt-10px">
+    <el-descriptions :column="5" direction="horizontal">
+      <el-descriptions-item label="产品">
+        <el-link @click="goToProductDetail(product.id)">{{ product.name }}</el-link>
+      </el-descriptions-item>
+      <el-descriptions-item label="ProductKey">
+        {{ product.productKey }}
+        <el-button @click="copyToClipboard(product.productKey)">复制</el-button>
+      </el-descriptions-item>
+    </el-descriptions>
+  </ContentWrap>
+  <!-- 表单弹窗：添加/修改 -->
+  <DeviceForm ref="formRef" @success="emit('refresh')" />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import DeviceForm from '@/views/iot/device/DeviceForm.vue'
+import { ProductVO } from '@/api/iot/product'
+import { DeviceVO } from '@/api/iot/device'
+import { useRouter } from 'vue-router'
+
+const message = useMessage()
+const router = useRouter()
+
+// 操作修改
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+const { product, device } = defineProps<{ product: ProductVO; device: DeviceVO }>()
+const emit = defineEmits(['refresh'])
+
+/**
+ * 将文本复制到剪贴板
+ *
+ * @param text 需要复制的文本
+ */
+const copyToClipboard = async (text: string) => {
+  if (!navigator.clipboard) {
+    // 浏览器不支持 Clipboard API，使用回退方法
+    const textarea = document.createElement('textarea')
+    textarea.value = text
+    // 防止页面滚动
+    textarea.style.position = 'fixed'
+    textarea.style.top = '0'
+    textarea.style.left = '0'
+    textarea.style.width = '2em'
+    textarea.style.height = '2em'
+    textarea.style.padding = '0'
+    textarea.style.border = 'none'
+    textarea.style.outline = 'none'
+    textarea.style.boxShadow = 'none'
+    textarea.style.background = 'transparent'
+    document.body.appendChild(textarea)
+    textarea.focus()
+    textarea.select()
+
+    try {
+      const successful = document.execCommand('copy')
+      if (successful) {
+        message.success('复制成功！')
+      } else {
+        message.error('复制失败，请手动复制')
+      }
+    } catch (err) {
+      console.error('Fallback: Oops, unable to copy', err)
+      message.error('复制失败，请手动复制')
+    }
+
+    document.body.removeChild(textarea)
+    return
+  }
+
+  try {
+    await navigator.clipboard.writeText(text)
+    message.success('复制成功！')
+  } catch (err) {
+    console.error('Async: Could not copy text: ', err)
+    message.error('复制失败，请手动复制')
+  }
+}
+
+/**
+ * 跳转到产品详情页面
+ *
+ * @param productId 产品 ID
+ */
+const goToProductDetail = (productId: number) => {
+  router.push({ name: 'IoTProductDetail', params: { id: productId } })
+}
+</script>
diff --git a/src/views/iot/device/detail/DeviceDetailsInfo.vue b/src/views/iot/device/detail/DeviceDetailsInfo.vue
new file mode 100644
index 00000000..2acbaabb
--- /dev/null
+++ b/src/views/iot/device/detail/DeviceDetailsInfo.vue
@@ -0,0 +1,175 @@
+<template>
+  <ContentWrap>
+    <el-collapse v-model="activeNames">
+      <el-descriptions :column="3" title="设备信息">
+        <el-descriptions-item label="产品名称">{{ product.name }}</el-descriptions-item>
+        <el-descriptions-item label="ProductKey"
+          >{{ product.productKey }}
+          <el-button @click="copyToClipboard(product.productKey)">复制</el-button>
+        </el-descriptions-item>
+        <el-descriptions-item label="设备类型">
+          <dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :value="product.deviceType" />
+        </el-descriptions-item>
+        <el-descriptions-item label="DeviceName"
+          >{{ device.deviceName }}
+          <el-button @click="copyToClipboard(device.deviceName)">复制</el-button>
+        </el-descriptions-item>
+        <el-descriptions-item label="备注名称">{{ device.nickname }}</el-descriptions-item>
+        <el-descriptions-item label="创建时间">{{
+          formatDate(device.createTime)
+        }}</el-descriptions-item>
+        <el-descriptions-item label="激活时间">{{
+          formatDate(device.activeTime)
+        }}</el-descriptions-item>
+        <el-descriptions-item label="最后上线时间">{{
+          formatDate(device.lastOnlineTime)
+        }}</el-descriptions-item>
+        <el-descriptions-item label="当前状态">
+          <dict-tag :type="DICT_TYPE.IOT_DEVICE_STATUS" :value="device.status" />
+        </el-descriptions-item>
+        <el-descriptions-item label="最后离线时间" :span="3">{{
+          formatDate(device.lastOfflineTime)
+        }}</el-descriptions-item>
+        <el-descriptions-item label="MQTT 连接参数">
+          <el-button type="primary" @click="openMqttParams">查看</el-button>
+        </el-descriptions-item>
+      </el-descriptions>
+    </el-collapse>
+
+    <!-- MQTT 连接参数弹框 -->
+    <Dialog
+      title="MQTT 连接参数"
+      v-model="mqttDialogVisible"
+      width="50%"
+      :before-close="handleCloseMqttDialog"
+    >
+      <el-form :model="mqttParams" label-width="120px">
+        <el-form-item label="clientId">
+          <el-input v-model="mqttParams.mqttClientId" readonly>
+            <template #append>
+              <el-button @click="copyToClipboard(mqttParams.mqttClientId)" type="primary">
+                <Icon icon="ph:copy" />
+              </el-button>
+            </template>
+          </el-input>
+        </el-form-item>
+
+        <el-form-item label="username">
+          <el-input v-model="mqttParams.mqttUsername" readonly>
+            <template #append>
+              <el-button @click="copyToClipboard(mqttParams.mqttUsername)" type="primary">
+                <Icon icon="ph:copy" />
+              </el-button>
+            </template>
+          </el-input>
+        </el-form-item>
+
+        <el-form-item label="passwd">
+          <el-input v-model="mqttParams.mqttPassword" readonly type="password">
+            <template #append>
+              <el-button @click="copyToClipboard(mqttParams.mqttPassword)" type="primary">
+                <Icon icon="ph:copy" />
+              </el-button>
+            </template>
+          </el-input>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="mqttDialogVisible = false">关闭</el-button>
+      </template>
+    </Dialog>
+  </ContentWrap>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import { DICT_TYPE } from '@/utils/dict'
+import { ProductVO } from '@/api/iot/product'
+import { formatDate } from '@/utils/formatTime'
+import { DeviceVO } from '@/api/iot/device'
+
+// 消息提示
+const message = useMessage()
+
+// 路由实例
+const router = useRouter()
+
+// 定义 Props
+const { product, device } = defineProps<{ product: ProductVO; device: DeviceVO }>()
+
+// 定义 Emits
+const emit = defineEmits(['refresh'])
+
+// 展示的折叠面板
+const activeNames = ref(['basicInfo'])
+
+// 复制到剪贴板方法
+const copyToClipboard = async (text: string) => {
+  if (!navigator.clipboard) {
+    // 浏览器不支持 Clipboard API，使用回退方法
+    const textarea = document.createElement('textarea')
+    textarea.value = text
+    // 防止页面滚动
+    textarea.style.position = 'fixed'
+    textarea.style.top = '0'
+    textarea.style.left = '0'
+    textarea.style.width = '2em'
+    textarea.style.height = '2em'
+    textarea.style.padding = '0'
+    textarea.style.border = 'none'
+    textarea.style.outline = 'none'
+    textarea.style.boxShadow = 'none'
+    textarea.style.background = 'transparent'
+    document.body.appendChild(textarea)
+    textarea.focus()
+    textarea.select()
+
+    try {
+      const successful = document.execCommand('copy')
+      if (successful) {
+        message.success('复制成功！')
+      } else {
+        message.error('复制失败，请手动复制')
+      }
+    } catch (err) {
+      console.error('Fallback: Oops, unable to copy', err)
+      message.error('复制失败，请手动复制')
+    }
+
+    document.body.removeChild(textarea)
+    return
+  }
+
+  try {
+    await navigator.clipboard.writeText(text)
+    message.success('复制成功！')
+  } catch (err) {
+    console.error('Async: Could not copy text: ', err)
+    message.error('复制失败，请手动复制')
+  }
+}
+
+// 定义 MQTT 弹框的可见性
+const mqttDialogVisible = ref(false)
+
+// 定义 MQTT 参数对象
+const mqttParams = ref({
+  mqttClientId: '',
+  mqttUsername: '',
+  mqttPassword: ''
+})
+
+// 打开 MQTT 参数弹框的方法
+const openMqttParams = () => {
+  mqttParams.value = {
+    mqttClientId: device.mqttClientId || 'N/A',
+    mqttUsername: device.mqttUsername || 'N/A',
+    mqttPassword: device.mqttPassword || 'N/A'
+  }
+  mqttDialogVisible.value = true
+}
+
+// 关闭 MQTT 弹框的方法
+const handleCloseMqttDialog = () => {
+  mqttDialogVisible.value = false
+}
+</script>
diff --git a/src/views/iot/device/detail/index.vue b/src/views/iot/device/detail/index.vue
new file mode 100644
index 00000000..2db16bbc
--- /dev/null
+++ b/src/views/iot/device/detail/index.vue
@@ -0,0 +1,66 @@
+<template>
+  <DeviceDetailsHeader
+    :loading="loading"
+    :product="product"
+    :device="device"
+    @refresh="getDeviceData(id)"
+  />
+  <el-col>
+    <el-tabs>
+      <el-tab-pane label="设备信息">
+        <DeviceDetailsInfo :product="product" :device="device" />
+      </el-tab-pane>
+      <el-tab-pane label="Topic 列表" />
+      <el-tab-pane label="物模型数据" />
+      <el-tab-pane label="子设备管理" />
+    </el-tabs>
+  </el-col>
+</template>
+<script lang="ts" setup>
+import { useTagsViewStore } from '@/store/modules/tagsView'
+import { DeviceApi, DeviceVO } from '@/api/iot/device'
+import { ProductApi, ProductVO } from '@/api/iot/product'
+import DeviceDetailsHeader from '@/views/iot/device/detail/DeviceDetailsHeader.vue'
+import DeviceDetailsInfo from '@/views/iot/device/detail/DeviceDetailsInfo.vue'
+
+defineOptions({ name: 'IoTDeviceDetail' })
+
+const route = useRoute()
+const message = useMessage()
+const id = Number(route.params.id) // 编号
+const loading = ref(true) // 加载中
+const product = ref<ProductVO>({} as ProductVO) // 产品详情
+const device = ref<DeviceVO>({} as DeviceVO) // 设备详情
+
+/** 获取设备详情 */
+const getDeviceData = async (id: number) => {
+  loading.value = true
+  try {
+    device.value = await DeviceApi.getDevice(id)
+    console.log(product.value)
+    await getProductData(device.value.productId)
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 获取产品详情 */
+const getProductData = async (id: number) => {
+  product.value = await ProductApi.getProduct(id)
+  console.log(product.value)
+}
+
+/** 获取物模型 */
+
+/** 初始化 */
+const { delView } = useTagsViewStore() // 视图操作
+const { currentRoute } = useRouter() // 路由
+onMounted(async () => {
+  if (!id) {
+    message.warning('参数错误，产品不能为空！')
+    delView(unref(currentRoute))
+    return
+  }
+  await getDeviceData(id)
+})
+</script>
diff --git a/src/views/iot/device/index.vue b/src/views/iot/device/index.vue
index bb733250..566c78a6 100644
--- a/src/views/iot/device/index.vue
+++ b/src/views/iot/device/index.vue
@@ -96,7 +96,11 @@
   <!-- 列表 -->
   <ContentWrap>
     <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-      <el-table-column label="DeviceName" align="center" prop="deviceName" />
+      <el-table-column label="DeviceName" align="center" prop="deviceName">
+        <template #default="scope">
+          <el-link @click="openDetail(scope.row.id)">{{ scope.row.deviceName }}</el-link>
+        </template>
+      </el-table-column>
       <el-table-column label="备注名称" align="center" prop="nickname" />
       <el-table-column label="设备所属产品" align="center" prop="productId">
         <template #default="scope">
@@ -122,6 +126,14 @@
       />
       <el-table-column label="操作" align="center" min-width="120px">
         <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openDetail(scope.row.id)"
+            v-hasPermi="['iot:product:query']"
+          >
+            查看
+          </el-button>
           <el-button
             link
             type="primary"
@@ -157,8 +169,7 @@
 <script setup lang="ts">
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
-import download from '@/utils/download'
-import { DeviceApi, DeviceUpdateStatusVO, DeviceVO } from '@/api/iot/device'
+import { DeviceApi, DeviceVO } from '@/api/iot/device'
 import DeviceForm from './DeviceForm.vue'
 import { ProductApi } from '@/api/iot/product'
 
@@ -223,6 +234,12 @@ const openForm = (type: string, id?: number) => {
   formRef.value.open(type, id)
 }
 
+/** 打开详情 */
+const { currentRoute, push } = useRouter()
+const openDetail = (id: number) => {
+  push({ name: 'IoTDeviceDetail', params: { id } })
+}
+
 /** 删除按钮操作 */
 const handleDelete = async (id: number) => {
   try {
@@ -235,21 +252,6 @@ const handleDelete = async (id: number) => {
     await getList()
   } catch {}
 }
-
-/** 导出按钮操作 */
-const handleExport = async () => {
-  try {
-    // 导出的二次确认
-    await message.exportConfirm()
-    // 发起导出
-    exportLoading.value = true
-    const data = await DeviceApi.exportDevice(queryParams)
-    download.excel(data, '设备.xls')
-  } catch {
-  } finally {
-    exportLoading.value = false
-  }
-}
 /** 查询字典下拉列表 */
 const products = ref()
 const getProducts = async () => {

From 6aaf6112916e7ac3a6410a944558d257ae3cba91 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=89=E6=B5=A9=E6=B5=A9?= <1036606149@qq.com>
Date: Mon, 23 Sep 2024 23:34:21 +0800
Subject: [PATCH 07/11] =?UTF-8?q?=E3=80=90=E6=96=B0=E5=A2=9E=E3=80=91=20IO?=
 =?UTF-8?q?T=20=E4=BA=A7=E5=93=81=E7=AE=A1=E7=90=86=EF=BC=8CTopic=20?=
 =?UTF-8?q?=E7=B1=BB=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/iot/device/index.ts                   |   6 +-
 src/api/iot/product/index.ts                  |   1 +
 .../iot/device/detail/DeviceDetailsHeader.vue |  47 +---
 .../iot/device/detail/DeviceDetailsInfo.vue   |  47 +---
 .../product/detail/ProductDetailsHeader.vue   |  14 +-
 src/views/iot/product/detail/ProductTopic.vue | 229 ++++++++++++++++++
 src/views/iot/product/detail/index.vue        |  31 ++-
 7 files changed, 275 insertions(+), 100 deletions(-)
 create mode 100644 src/views/iot/product/detail/ProductTopic.vue

diff --git a/src/api/iot/device/index.ts b/src/api/iot/device/index.ts
index 2a1951de..24d48789 100644
--- a/src/api/iot/device/index.ts
+++ b/src/api/iot/device/index.ts
@@ -67,8 +67,8 @@ export const DeviceApi = {
     return await request.delete({ url: `/iot/device/delete?id=` + id })
   },
 
-  // 导出设备 Excel
-  exportDevice: async (params) => {
-    return await request.download({ url: `/iot/device/export-excel`, params })
+  // 获取设备数量
+  getDeviceCount: async (productId: number) => {
+    return await request.get({ url: `/iot/device/count?productId=` + productId })
   }
 }
diff --git a/src/api/iot/product/index.ts b/src/api/iot/product/index.ts
index d4de1e5b..2a8d430f 100644
--- a/src/api/iot/product/index.ts
+++ b/src/api/iot/product/index.ts
@@ -14,6 +14,7 @@ export interface ProductVO {
   netType: number // 联网方式, 0: Wi-Fi, 1: Cellular, 2: Ethernet, 3: 其他
   protocolType: number // 接入网关协议, 0: modbus, 1: opc-ua, 2: customize, 3: ble, 4: zigbee
   dataFormat: number // 数据格式, 0: 透传模式, 1: Alink JSON
+  deviceCount: number // 设备数量
 }
 
 // iot 产品 API
diff --git a/src/views/iot/device/detail/DeviceDetailsHeader.vue b/src/views/iot/device/detail/DeviceDetailsHeader.vue
index cc585f4a..4360cab1 100644
--- a/src/views/iot/device/detail/DeviceDetailsHeader.vue
+++ b/src/views/iot/device/detail/DeviceDetailsHeader.vue
@@ -58,49 +58,10 @@ const emit = defineEmits(['refresh'])
  *
  * @param text 需要复制的文本
  */
-const copyToClipboard = async (text: string) => {
-  if (!navigator.clipboard) {
-    // 浏览器不支持 Clipboard API，使用回退方法
-    const textarea = document.createElement('textarea')
-    textarea.value = text
-    // 防止页面滚动
-    textarea.style.position = 'fixed'
-    textarea.style.top = '0'
-    textarea.style.left = '0'
-    textarea.style.width = '2em'
-    textarea.style.height = '2em'
-    textarea.style.padding = '0'
-    textarea.style.border = 'none'
-    textarea.style.outline = 'none'
-    textarea.style.boxShadow = 'none'
-    textarea.style.background = 'transparent'
-    document.body.appendChild(textarea)
-    textarea.focus()
-    textarea.select()
-
-    try {
-      const successful = document.execCommand('copy')
-      if (successful) {
-        message.success('复制成功！')
-      } else {
-        message.error('复制失败，请手动复制')
-      }
-    } catch (err) {
-      console.error('Fallback: Oops, unable to copy', err)
-      message.error('复制失败，请手动复制')
-    }
-
-    document.body.removeChild(textarea)
-    return
-  }
-
-  try {
-    await navigator.clipboard.writeText(text)
-    message.success('复制成功！')
-  } catch (err) {
-    console.error('Async: Could not copy text: ', err)
-    message.error('复制失败，请手动复制')
-  }
+const copyToClipboard = (text: string) => {
+  navigator.clipboard.writeText(text).then(() => {
+    message.success('复制成功')
+  })
 }
 
 /**
diff --git a/src/views/iot/device/detail/DeviceDetailsInfo.vue b/src/views/iot/device/detail/DeviceDetailsInfo.vue
index 2acbaabb..77084625 100644
--- a/src/views/iot/device/detail/DeviceDetailsInfo.vue
+++ b/src/views/iot/device/detail/DeviceDetailsInfo.vue
@@ -103,49 +103,10 @@ const emit = defineEmits(['refresh'])
 const activeNames = ref(['basicInfo'])
 
 // 复制到剪贴板方法
-const copyToClipboard = async (text: string) => {
-  if (!navigator.clipboard) {
-    // 浏览器不支持 Clipboard API，使用回退方法
-    const textarea = document.createElement('textarea')
-    textarea.value = text
-    // 防止页面滚动
-    textarea.style.position = 'fixed'
-    textarea.style.top = '0'
-    textarea.style.left = '0'
-    textarea.style.width = '2em'
-    textarea.style.height = '2em'
-    textarea.style.padding = '0'
-    textarea.style.border = 'none'
-    textarea.style.outline = 'none'
-    textarea.style.boxShadow = 'none'
-    textarea.style.background = 'transparent'
-    document.body.appendChild(textarea)
-    textarea.focus()
-    textarea.select()
-
-    try {
-      const successful = document.execCommand('copy')
-      if (successful) {
-        message.success('复制成功！')
-      } else {
-        message.error('复制失败，请手动复制')
-      }
-    } catch (err) {
-      console.error('Fallback: Oops, unable to copy', err)
-      message.error('复制失败，请手动复制')
-    }
-
-    document.body.removeChild(textarea)
-    return
-  }
-
-  try {
-    await navigator.clipboard.writeText(text)
-    message.success('复制成功！')
-  } catch (err) {
-    console.error('Async: Could not copy text: ', err)
-    message.error('复制失败，请手动复制')
-  }
+const copyToClipboard = (text: string) => {
+  navigator.clipboard.writeText(text).then(() => {
+    message.success('复制成功')
+  })
 }
 
 // 定义 MQTT 弹框的可见性
diff --git a/src/views/iot/product/detail/ProductDetailsHeader.vue b/src/views/iot/product/detail/ProductDetailsHeader.vue
index b50001e8..db0849ed 100644
--- a/src/views/iot/product/detail/ProductDetailsHeader.vue
+++ b/src/views/iot/product/detail/ProductDetailsHeader.vue
@@ -45,8 +45,8 @@
     </el-descriptions>
     <el-descriptions :column="5" direction="horizontal">
       <el-descriptions-item label="设备数">
-        0
-        <el-button @click="goToManagement(product.productKey)">前往管理</el-button>
+        {{ product.deviceCount }}
+        <el-button @click="goToManagement(product.id)">前往管理</el-button>
       </el-descriptions-item>
     </el-descriptions>
   </ContentWrap>
@@ -63,8 +63,11 @@ const copyToClipboard = (text: string) => {
     message.success('复制成功')
   })
 }
-const goToManagement = (productKey: string) => {
-  message.warning('暂未开放')
+
+// 路由跳转到设备管理
+const { currentRoute, push } = useRouter()
+const goToManagement = (productId: string) => {
+  push({ name: 'IoTDevice', query: { productId } })
 }
 
 // 操作修改
@@ -93,6 +96,9 @@ const confirmUnpublish = async (id: number) => {
   }
 }
 
+// 定义 Props
 const { product } = defineProps<{ product: ProductVO }>()
+
+// 定义 Emits
 const emit = defineEmits(['refresh'])
 </script>
diff --git a/src/views/iot/product/detail/ProductTopic.vue b/src/views/iot/product/detail/ProductTopic.vue
new file mode 100644
index 00000000..071a5236
--- /dev/null
+++ b/src/views/iot/product/detail/ProductTopic.vue
@@ -0,0 +1,229 @@
+<template>
+  <ContentWrap>
+    <el-tabs>
+      <el-tab-pane label="基础通信 Topic">
+        <Table :columns="columns1" :data="data1" :span-method="objectSpanMethod" />
+      </el-tab-pane>
+      <el-tab-pane label="物模型通信 Topic">
+        <Table :columns="columns2" :data="data2" :span-method="objectSpanMethod" />
+      </el-tab-pane>
+    </el-tabs>
+  </ContentWrap>
+</template>
+<script setup lang="ts">
+import { ProductVO } from '@/api/iot/product'
+
+const { product } = defineProps<{ product: ProductVO }>()
+// 定义列
+const columns1 = reactive([
+  {
+    label: '功能',
+    field: 'function',
+    width: 150
+  },
+  {
+    label: 'Topic 类',
+    field: 'topicClass',
+    width: 500
+  },
+  {
+    label: '操作权限',
+    field: 'operationPermission',
+    width: 100
+  },
+  {
+    label: '描述',
+    field: 'description'
+  }
+])
+
+const columns2 = reactive([
+  {
+    label: '功能',
+    field: 'function',
+    width: 150
+  },
+  {
+    label: 'Topic 类',
+    field: 'topicClass',
+    width: 500
+  },
+  {
+    label: '操作权限',
+    field: 'operationPermission',
+    width: 150
+  },
+  {
+    label: '描述',
+    field: 'description'
+  }
+])
+
+// 定义数据
+const data1 = reactive([
+  {
+    function: 'OTA 升级',
+    topicClass: '/ota/device/inform/' + product.productKey + '/${deviceName}',
+    operationPermission: '发布',
+    description: '设备上报固件升级信息'
+  },
+  {
+    function: 'OTA 升级',
+    topicClass: '/ota/device/upgrade/' + product.productKey + '/${deviceName}',
+    operationPermission: '订阅',
+    description: '固件升级信息下行'
+  },
+  {
+    function: 'OTA 升级',
+    topicClass: '/sys/' + product.productKey + '/${deviceName}/thing/ota/firmware/get',
+    operationPermission: '发布',
+    description: '设备上报固件升级进度'
+  },
+  {
+    function: 'OTA 升级',
+    topicClass: '/sys/' + product.productKey + '/${deviceName}/thing/ota/firmware/get',
+    operationPermission: '发布',
+    description: '设备主动拉取固件升级信息'
+  },
+  {
+    function: '设备标签',
+    topicClass: '/sys/' + product.productKey + '/${deviceName}/thing/deviceinfo/update',
+    operationPermission: '发布',
+    description: '设备上报标签数据'
+  },
+  {
+    function: '设备标签',
+    topicClass: '/sys/' + product.productKey + '/${deviceName}/thing/deviceinfo/update_reply',
+    operationPermission: '订阅',
+    description: '云端响应标签上报'
+  },
+  {
+    function: '设备标签',
+    topicClass: '/sys/' + product.productKey + '/${deviceName}/thing/deviceinfo/delete',
+    operationPermission: '订阅',
+    description: '设备删除标签信息'
+  },
+  {
+    function: '设备标签',
+    topicClass: '/sys/' + product.productKey + '/${deviceName}/thing/deviceinfo/delete_reply',
+    operationPermission: '订阅',
+    description: '云端响应标签删除'
+  },
+  {
+    function: '时钟同步',
+    topicClass: '/ext/ntp/' + product.productKey + '/${deviceName}/request',
+    operationPermission: '发布',
+    description: 'NTP 时钟同步请求'
+  },
+  {
+    function: '时钟同步',
+    topicClass: '/ext/ntp/' + product.productKey + '/${deviceName}/response',
+    operationPermission: '订阅',
+    description: 'NTP 时钟同步响应'
+  },
+  {
+    function: '设备影子',
+    topicClass: '/shadow/update/' + product.productKey + '/${deviceName}',
+    operationPermission: '发布',
+    description: '设备影子发布'
+  },
+  {
+    function: '设备影子',
+    topicClass: '/shadow/get/' + product.productKey + '/${deviceName}',
+    operationPermission: '订阅',
+    description: '设备接收影子变更'
+  },
+  {
+    function: '配置更新',
+    topicClass: '/sys/' + product.productKey + '/${deviceName}/thing/config/push',
+    operationPermission: '订阅',
+    description: '云端主动下推配置信息'
+  },
+  {
+    function: '配置更新',
+    topicClass: '/sys/' + product.productKey + '/${deviceName}/thing/config/get',
+    operationPermission: '发布',
+    description: '设备端查询配置信息'
+  },
+  {
+    function: '配置更新',
+    topicClass: '/sys/' + product.productKey + '/${deviceName}/thing/config/get_reply',
+    operationPermission: '订阅',
+    description: '云端响应配置信息'
+  },
+  {
+    function: '广播',
+    topicClass: '/broadcast/' + product.productKey + '/${identifier}',
+    operationPermission: '订阅',
+    description: '广播 Topic，identifier 为用户自定义字符串'
+  }
+])
+
+const data2 = reactive([
+  {
+    function: '属性上报',
+    topicClass: '/sys/' + product.productKey + '/${deviceName}/thing/event/property/post',
+    operationPermission: '发布',
+    description: '设备属性上报'
+  },
+  {
+    function: '属性上报',
+    topicClass: '/sys/' + product.productKey + '/${deviceName}/thing/event/property/post_reply',
+    operationPermission: '订阅',
+    description: '云端响应属性上报'
+  },
+  {
+    function: '属性设置',
+    topicClass: '/sys/' + product.productKey + '/${deviceName}/thing/service/property/set',
+    operationPermission: '订阅',
+    description: '设备属性设置'
+  },
+  {
+    function: '事件上报',
+    topicClass:
+      '/sys/' + product.productKey + '/${deviceName}/thing/event/${tsl.event.identifier}/post',
+    operationPermission: '发布',
+    description: '设备事件上报'
+  },
+  {
+    function: '事件上报',
+    topicClass:
+      '/sys/' +
+      product.productKey +
+      '/${deviceName}/thing/event/${tsl.event.identifier}/post_reply',
+    operationPermission: '订阅',
+    description: '云端响应事件上报'
+  },
+  {
+    function: '服务调用',
+    topicClass:
+      '/sys/' + product.productKey + '/${deviceName}/thing/service/${tsl.service.identifier}',
+    operationPermission: '订阅',
+    description: '设备服务调用'
+  },
+  {
+    function: '服务调用',
+    topicClass:
+      '/sys/' + product.productKey + '/${deviceName}/thing/service/${tsl.service.identifier}_reply',
+    operationPermission: '发布',
+    description: '设备端响应服务调用'
+  }
+])
+
+// 合并单元格
+const objectSpanMethod = ({ row, column, rowIndex, columnIndex }: SpanMethodProps) => {
+  if (columnIndex === 0 || columnIndex === 2) {
+    if (rowIndex % 2 === 0) {
+      return {
+        rowspan: 2,
+        colspan: 1
+      }
+    } else {
+      return {
+        rowspan: 0,
+        colspan: 0
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/iot/product/detail/index.vue b/src/views/iot/product/detail/index.vue
index c77fe176..6510ff3f 100644
--- a/src/views/iot/product/detail/index.vue
+++ b/src/views/iot/product/detail/index.vue
@@ -1,11 +1,13 @@
 <template>
-  <ProductDetailsHeader :loading="loading" :product="product" @refresh="getProductData(id)" />
+  <ProductDetailsHeader :loading="loading" :product="product" @refresh="() => getProductData(id)" />
   <el-col>
     <el-tabs>
       <el-tab-pane label="产品信息">
         <ProductDetailsInfo :product="product" />
       </el-tab-pane>
-      <el-tab-pane label="Topic 类列表" />
+      <el-tab-pane label="Topic 类列表">
+        <ProductTopic :product="product" />
+      </el-tab-pane>
       <el-tab-pane label="物模型">
         <!--        <ProductDetailsModel :product="product" />-->
       </el-tab-pane>
@@ -15,10 +17,10 @@
   </el-col>
 </template>
 <script lang="ts" setup>
-import { useTagsViewStore } from '@/store/modules/tagsView'
 import { ProductApi, ProductVO } from '@/api/iot/product'
 import ProductDetailsHeader from '@/views/iot/product/detail/ProductDetailsHeader.vue'
 import ProductDetailsInfo from '@/views/iot/product/detail/ProductDetailsInfo.vue'
+import { DeviceApi } from '@/api/iot/device'
 
 defineOptions({ name: 'IoTProductDetail' })
 
@@ -33,17 +35,25 @@ const getProductData = async (id: number) => {
   loading.value = true
   try {
     product.value = await ProductApi.getProduct(id)
-    console.log(product.value)
+    console.log('Product data:', product.value)
   } finally {
     loading.value = false
   }
 }
 
-/** 获取物模型 */
+// 查询设备数量
+const getDeviceCount = async (productId: string) => {
+  try {
+    const count = await DeviceApi.getDeviceCount(productId)
+    console.log('Device count response:', count)
+    return count
+  } catch (error) {
+    console.error('Error fetching device count:', error)
+    return 0
+  }
+}
 
 /** 初始化 */
-const { delView } = useTagsViewStore() // 视图操作
-const { currentRoute } = useRouter() // 路由
 onMounted(async () => {
   if (!id) {
     message.warning('参数错误，产品不能为空！')
@@ -51,5 +61,12 @@ onMounted(async () => {
     return
   }
   await getProductData(id)
+  // 查询设备数量
+  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>

From 0e3ebbd2b8b314057a01c6d9b30682d2c07d0fb5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=89=E6=B5=A9=E6=B5=A9?= <1036606149@qq.com>
Date: Tue, 24 Sep 2024 23:18:42 +0800
Subject: [PATCH 08/11] =?UTF-8?q?=E3=80=90=E4=BC=98=E5=8C=96=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=E3=80=91=20IOT=20=E4=BA=A7=E5=93=81=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=EF=BC=8CTopic=20=E7=B1=BB=E5=88=97=E8=A1=A8=E5=B1=95=E7=A4=BA?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/iot/product/detail/ProductTopic.vue | 413 +++++++++---------
 src/views/iot/product/detail/index.vue        |   3 +-
 2 files changed, 215 insertions(+), 201 deletions(-)

diff --git a/src/views/iot/product/detail/ProductTopic.vue b/src/views/iot/product/detail/ProductTopic.vue
index 071a5236..79ca2808 100644
--- a/src/views/iot/product/detail/ProductTopic.vue
+++ b/src/views/iot/product/detail/ProductTopic.vue
@@ -2,10 +2,24 @@
   <ContentWrap>
     <el-tabs>
       <el-tab-pane label="基础通信 Topic">
-        <Table :columns="columns1" :data="data1" :span-method="objectSpanMethod" />
+        <Table
+          :columns="columns1"
+          :data="data1"
+          :span-method="createSpanMethod(data1)"
+          align="left"
+          headerAlign="left"
+          border="true"
+        />
       </el-tab-pane>
       <el-tab-pane label="物模型通信 Topic">
-        <Table :columns="columns2" :data="data2" :span-method="objectSpanMethod" />
+        <Table
+          :columns="columns2"
+          :data="data2"
+          :span-method="createSpanMethod(data2)"
+          align="left"
+          headerAlign="left"
+          border="true"
+        />
       </el-tab-pane>
     </el-tabs>
   </ContentWrap>
@@ -13,215 +27,214 @@
 <script setup lang="ts">
 import { ProductVO } from '@/api/iot/product'
 
-const { product } = defineProps<{ product: ProductVO }>()
+const props = defineProps<{ product: ProductVO }>()
+
 // 定义列
 const columns1 = reactive([
-  {
-    label: '功能',
-    field: 'function',
-    width: 150
-  },
-  {
-    label: 'Topic 类',
-    field: 'topicClass',
-    width: 500
-  },
-  {
-    label: '操作权限',
-    field: 'operationPermission',
-    width: 100
-  },
-  {
-    label: '描述',
-    field: 'description'
-  }
+  { label: '功能', field: 'function', width: 150 },
+  { label: 'Topic 类', field: 'topicClass', width: 800 },
+  { label: '操作权限', field: 'operationPermission', width: 100 },
+  { label: '描述', field: 'description' }
 ])
 
 const columns2 = reactive([
-  {
-    label: '功能',
-    field: 'function',
-    width: 150
-  },
-  {
-    label: 'Topic 类',
-    field: 'topicClass',
-    width: 500
-  },
-  {
-    label: '操作权限',
-    field: 'operationPermission',
-    width: 150
-  },
-  {
-    label: '描述',
-    field: 'description'
-  }
+  { label: '功能', field: 'function', width: 150 },
+  { label: 'Topic 类', field: 'topicClass', width: 800 },
+  { label: '操作权限', field: 'operationPermission', width: 100 },
+  { label: '描述', field: 'description' }
 ])
 
-// 定义数据
-const data1 = reactive([
-  {
-    function: 'OTA 升级',
-    topicClass: '/ota/device/inform/' + product.productKey + '/${deviceName}',
-    operationPermission: '发布',
-    description: '设备上报固件升级信息'
-  },
-  {
-    function: 'OTA 升级',
-    topicClass: '/ota/device/upgrade/' + product.productKey + '/${deviceName}',
-    operationPermission: '订阅',
-    description: '固件升级信息下行'
-  },
-  {
-    function: 'OTA 升级',
-    topicClass: '/sys/' + product.productKey + '/${deviceName}/thing/ota/firmware/get',
-    operationPermission: '发布',
-    description: '设备上报固件升级进度'
-  },
-  {
-    function: 'OTA 升级',
-    topicClass: '/sys/' + product.productKey + '/${deviceName}/thing/ota/firmware/get',
-    operationPermission: '发布',
-    description: '设备主动拉取固件升级信息'
-  },
-  {
-    function: '设备标签',
-    topicClass: '/sys/' + product.productKey + '/${deviceName}/thing/deviceinfo/update',
-    operationPermission: '发布',
-    description: '设备上报标签数据'
-  },
-  {
-    function: '设备标签',
-    topicClass: '/sys/' + product.productKey + '/${deviceName}/thing/deviceinfo/update_reply',
-    operationPermission: '订阅',
-    description: '云端响应标签上报'
-  },
-  {
-    function: '设备标签',
-    topicClass: '/sys/' + product.productKey + '/${deviceName}/thing/deviceinfo/delete',
-    operationPermission: '订阅',
-    description: '设备删除标签信息'
-  },
-  {
-    function: '设备标签',
-    topicClass: '/sys/' + product.productKey + '/${deviceName}/thing/deviceinfo/delete_reply',
-    operationPermission: '订阅',
-    description: '云端响应标签删除'
-  },
-  {
-    function: '时钟同步',
-    topicClass: '/ext/ntp/' + product.productKey + '/${deviceName}/request',
-    operationPermission: '发布',
-    description: 'NTP 时钟同步请求'
-  },
-  {
-    function: '时钟同步',
-    topicClass: '/ext/ntp/' + product.productKey + '/${deviceName}/response',
-    operationPermission: '订阅',
-    description: 'NTP 时钟同步响应'
-  },
-  {
-    function: '设备影子',
-    topicClass: '/shadow/update/' + product.productKey + '/${deviceName}',
-    operationPermission: '发布',
-    description: '设备影子发布'
-  },
-  {
-    function: '设备影子',
-    topicClass: '/shadow/get/' + product.productKey + '/${deviceName}',
-    operationPermission: '订阅',
-    description: '设备接收影子变更'
-  },
-  {
-    function: '配置更新',
-    topicClass: '/sys/' + product.productKey + '/${deviceName}/thing/config/push',
-    operationPermission: '订阅',
-    description: '云端主动下推配置信息'
-  },
-  {
-    function: '配置更新',
-    topicClass: '/sys/' + product.productKey + '/${deviceName}/thing/config/get',
-    operationPermission: '发布',
-    description: '设备端查询配置信息'
-  },
-  {
-    function: '配置更新',
-    topicClass: '/sys/' + product.productKey + '/${deviceName}/thing/config/get_reply',
-    operationPermission: '订阅',
-    description: '云端响应配置信息'
-  },
-  {
-    function: '广播',
-    topicClass: '/broadcast/' + product.productKey + '/${identifier}',
-    operationPermission: '订阅',
-    description: '广播 Topic，identifier 为用户自定义字符串'
-  }
-])
+const data1 = computed(() => {
+  if (!props.product || !props.product.productKey) return []
+  return [
+    {
+      function: 'OTA 升级',
+      topicClass: `/ota/device/inform/${props.product.productKey}/\${deviceName}`,
+      operationPermission: '发布',
+      description: '设备上报固件升级信息'
+    },
+    {
+      function: 'OTA 升级',
+      topicClass: `/ota/device/upgrade/${props.product.productKey}/\${deviceName}`,
+      operationPermission: '订阅',
+      description: '固件升级信息下行'
+    },
+    {
+      function: 'OTA 升级',
+      topicClass: `/sys/${props.product.productKey}/\${deviceName}/thing/ota/firmware/get`,
+      operationPermission: '发布',
+      description: '设备上报固件升级进度'
+    },
+    {
+      function: 'OTA 升级',
+      topicClass: `/sys/${props.product.productKey}/\${deviceName}/thing/ota/firmware/get`,
+      operationPermission: '发布',
+      description: '设备主动拉取固件升级信息'
+    },
+    {
+      function: '设备标签',
+      topicClass: `/sys/${props.product.productKey}/\${deviceName}/thing/deviceinfo/update`,
+      operationPermission: '发布',
+      description: '设备上报标签数据'
+    },
+    {
+      function: '设备标签',
+      topicClass: `/sys/${props.product.productKey}/\${deviceName}/thing/deviceinfo/update_reply`,
+      operationPermission: '订阅',
+      description: '云端响应标签上报'
+    },
+    {
+      function: '设备标签',
+      topicClass: `/sys/${props.product.productKey}/\${deviceName}/thing/deviceinfo/delete`,
+      operationPermission: '订阅',
+      description: '设备删除标签信息'
+    },
+    {
+      function: '设备标签',
+      topicClass: `/sys/${props.product.productKey}/\${deviceName}/thing/deviceinfo/delete_reply`,
+      operationPermission: '订阅',
+      description: '云端响应标签删除'
+    },
+    {
+      function: '时钟同步',
+      topicClass: `/ext/ntp/${props.product.productKey}/\${deviceName}/request`,
+      operationPermission: '发布',
+      description: 'NTP 时钟同步请求'
+    },
+    {
+      function: '时钟同步',
+      topicClass: `/ext/ntp/${props.product.productKey}/\${deviceName}/response`,
+      operationPermission: '订阅',
+      description: 'NTP 时钟同步响应'
+    },
+    {
+      function: '设备影子',
+      topicClass: `/shadow/update/${props.product.productKey}/\${deviceName}`,
+      operationPermission: '发布',
+      description: '设备影子发布'
+    },
+    {
+      function: '设备影子',
+      topicClass: `/shadow/get/${props.product.productKey}/\${deviceName}`,
+      operationPermission: '订阅',
+      description: '设备接收影子变更'
+    },
+    {
+      function: '配置更新',
+      topicClass: `/sys/${props.product.productKey}/\${deviceName}/thing/config/push`,
+      operationPermission: '订阅',
+      description: '云端主动下推配置信息'
+    },
+    {
+      function: '配置更新',
+      topicClass: `/sys/${props.product.productKey}/\${deviceName}/thing/config/get`,
+      operationPermission: '发布',
+      description: '设备端查询配置信息'
+    },
+    {
+      function: '配置更新',
+      topicClass: `/sys/${props.product.productKey}/\${deviceName}/thing/config/get_reply`,
+      operationPermission: '订阅',
+      description: '云端响应配置信息'
+    },
+    {
+      function: '广播',
+      topicClass: `/broadcast/${props.product.productKey}/\${identifier}`,
+      operationPermission: '订阅',
+      description: '广播 Topic，identifier 为用户自定义字符串'
+    }
+  ]
+})
 
-const data2 = reactive([
-  {
-    function: '属性上报',
-    topicClass: '/sys/' + product.productKey + '/${deviceName}/thing/event/property/post',
-    operationPermission: '发布',
-    description: '设备属性上报'
-  },
-  {
-    function: '属性上报',
-    topicClass: '/sys/' + product.productKey + '/${deviceName}/thing/event/property/post_reply',
-    operationPermission: '订阅',
-    description: '云端响应属性上报'
-  },
-  {
-    function: '属性设置',
-    topicClass: '/sys/' + product.productKey + '/${deviceName}/thing/service/property/set',
-    operationPermission: '订阅',
-    description: '设备属性设置'
-  },
-  {
-    function: '事件上报',
-    topicClass:
-      '/sys/' + product.productKey + '/${deviceName}/thing/event/${tsl.event.identifier}/post',
-    operationPermission: '发布',
-    description: '设备事件上报'
-  },
-  {
-    function: '事件上报',
-    topicClass:
-      '/sys/' +
-      product.productKey +
-      '/${deviceName}/thing/event/${tsl.event.identifier}/post_reply',
-    operationPermission: '订阅',
-    description: '云端响应事件上报'
-  },
-  {
-    function: '服务调用',
-    topicClass:
-      '/sys/' + product.productKey + '/${deviceName}/thing/service/${tsl.service.identifier}',
-    operationPermission: '订阅',
-    description: '设备服务调用'
-  },
-  {
-    function: '服务调用',
-    topicClass:
-      '/sys/' + product.productKey + '/${deviceName}/thing/service/${tsl.service.identifier}_reply',
-    operationPermission: '发布',
-    description: '设备端响应服务调用'
-  }
-])
+const data2 = computed(() => {
+  if (!props.product || !props.product.productKey) return []
+  return [
+    {
+      function: '属性上报',
+      topicClass: `/sys/${props.product.productKey}/\${deviceName}/thing/event/property/post`,
+      operationPermission: '发布',
+      description: '设备属性上报'
+    },
+    {
+      function: '属性上报',
+      topicClass: `/sys/${props.product.productKey}/\${deviceName}/thing/event/property/post_reply`,
+      operationPermission: '订阅',
+      description: '云端响应属性上报'
+    },
+    {
+      function: '属性设置',
+      topicClass: `/sys/${props.product.productKey}/\${deviceName}/thing/service/property/set`,
+      operationPermission: '订阅',
+      description: '设备属性设置'
+    },
+    {
+      function: '事件上报',
+      topicClass: `/sys/${props.product.productKey}/\${deviceName}/thing/event/\${tsl.event.identifier}/post`,
+      operationPermission: '发布',
+      description: '设备事件上报'
+    },
+    {
+      function: '事件上报',
+      topicClass: `/sys/${props.product.productKey}/\${deviceName}/thing/event/\${tsl.event.identifier}/post_reply`,
+      operationPermission: '订阅',
+      description: '云端响应事件上报'
+    },
+    {
+      function: '服务调用',
+      topicClass: `/sys/${props.product.productKey}/\${deviceName}/thing/service/\${tsl.service.identifier}`,
+      operationPermission: '订阅',
+      description: '设备服务调用'
+    },
+    {
+      function: '服务调用',
+      topicClass: `/sys/${props.product.productKey}/\${deviceName}/thing/service/\${tsl.service.identifier}_reply`,
+      operationPermission: '发布',
+      description: '设备端响应服务调用'
+    }
+  ]
+})
 
-// 合并单元格
-const objectSpanMethod = ({ row, column, rowIndex, columnIndex }: SpanMethodProps) => {
-  if (columnIndex === 0 || columnIndex === 2) {
-    if (rowIndex % 2 === 0) {
-      return {
-        rowspan: 2,
-        colspan: 1
+// 通用的单元格合并方法生成器
+const createSpanMethod = (data: any[]) => {
+  // 预处理，计算每个功能的合并行数
+  const rowspanMap: Record<number, number> = {}
+  let currentFunction = ''
+  let startIndex = 0
+  let count = 0
+
+  data.forEach((item, index) => {
+    if (item.function !== currentFunction) {
+      if (count > 0) {
+        rowspanMap[startIndex] = count
       }
+      currentFunction = item.function
+      startIndex = index
+      count = 1
     } else {
-      return {
-        rowspan: 0,
-        colspan: 0
+      count++
+    }
+  })
+
+  // 处理最后一组
+  if (count > 0) {
+    rowspanMap[startIndex] = count
+  }
+
+  // 返回 span 方法
+  return ({ row, column, rowIndex, columnIndex }: SpanMethodProps) => {
+    if (columnIndex === 0) {
+      // 仅对“功能”列进行合并
+      const rowspan = rowspanMap[rowIndex] || 0
+      if (rowspan > 0) {
+        return {
+          rowspan,
+          colspan: 1
+        }
+      } else {
+        return {
+          rowspan: 0,
+          colspan: 0
+        }
       }
     }
   }
diff --git a/src/views/iot/product/detail/index.vue b/src/views/iot/product/detail/index.vue
index 6510ff3f..6ff97bb8 100644
--- a/src/views/iot/product/detail/index.vue
+++ b/src/views/iot/product/detail/index.vue
@@ -18,9 +18,10 @@
 </template>
 <script lang="ts" setup>
 import { ProductApi, ProductVO } from '@/api/iot/product'
+import { DeviceApi } from '@/api/iot/device'
 import ProductDetailsHeader from '@/views/iot/product/detail/ProductDetailsHeader.vue'
 import ProductDetailsInfo from '@/views/iot/product/detail/ProductDetailsInfo.vue'
-import { DeviceApi } from '@/api/iot/device'
+import ProductTopic from '@/views/iot/product/detail/ProductTopic.vue'
 
 defineOptions({ name: 'IoTProductDetail' })
 

From 81a710c02df7ba92c64b7c0b73d4b933efe9af2b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=89=E6=B5=A9=E6=B5=A9?= <1036606149@qq.com>
Date: Sun, 29 Sep 2024 21:58:03 +0800
Subject: [PATCH 09/11] =?UTF-8?q?=E3=80=90=E6=96=B0=E5=A2=9E=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=E3=80=91=20IOT=20=E4=BA=A7=E5=93=81=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=EF=BC=8C=E7=89=A9=E6=A8=A1=E5=9E=8B=E6=96=B0=E5=A2=9E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/iot/thinkmodelfunction/index.ts       |  55 +++++
 src/utils/dict.ts                             |   6 +-
 .../iot/product/detail/ThinkModelFunction.vue | 149 ++++++++++++++
 .../product/detail/ThinkModelFunctionForm.vue | 194 ++++++++++++++++++
 src/views/iot/product/detail/index.vue        |  20 +-
 5 files changed, 414 insertions(+), 10 deletions(-)
 create mode 100644 src/api/iot/thinkmodelfunction/index.ts
 create mode 100644 src/views/iot/product/detail/ThinkModelFunction.vue
 create mode 100644 src/views/iot/product/detail/ThinkModelFunctionForm.vue

diff --git a/src/api/iot/thinkmodelfunction/index.ts b/src/api/iot/thinkmodelfunction/index.ts
new file mode 100644
index 00000000..29f06a78
--- /dev/null
+++ b/src/api/iot/thinkmodelfunction/index.ts
@@ -0,0 +1,55 @@
+import request from '@/config/axios'
+
+// IoT 产品物模型 VO
+export interface ThinkModelFunctionVO {
+  id: number // 物模型功能编号
+  identifier: string // 功能标识
+  name: string // 功能名称
+  description: string // 功能描述
+  productId: number // 产品ID（关联 IotProductDO 的 id）
+  productKey: string // 产品Key（关联 IotProductDO 的 productKey）
+  type: number // 功能类型（1 - 属性，2 - 服务，3 - 事件）
+  property: string // 属性（存储 ThingModelProperty 的 JSON 数据）
+  event: string // 事件（存储 ThingModelEvent 的 JSON 数据）
+  service: string // 服务（存储服务的 JSON 数据）
+}
+
+// IoT 产品物模型 API
+export const ThinkModelFunctionApi = {
+  // 查询IoT 产品物模型分页
+  getThinkModelFunctionPage: async (params: any) => {
+    return await request.get({ url: `/iot/think-model-function/page`, params })
+  },
+  // 获得IoT 产品物模型
+  getThinkModelFunctionListByProductId: async (params: any) => {
+    return await request.get({
+      url: `/iot/think-model-function/list-by-product-id`,
+      params
+    })
+  },
+
+  // 查询IoT 产品物模型详情
+  getThinkModelFunction: async (id: number) => {
+    return await request.get({ url: `/iot/think-model-function/get?id=` + id })
+  },
+
+  // 新增IoT 产品物模型
+  createThinkModelFunction: async (data: ThinkModelFunctionVO) => {
+    return await request.post({ url: `/iot/think-model-function/create`, data })
+  },
+
+  // 修改IoT 产品物模型
+  updateThinkModelFunction: async (data: ThinkModelFunctionVO) => {
+    return await request.put({ url: `/iot/think-model-function/update`, data })
+  },
+
+  // 删除IoT 产品物模型
+  deleteThinkModelFunction: async (id: number) => {
+    return await request.delete({ url: `/iot/think-model-function/delete?id=` + id })
+  },
+
+  // 导出IoT 产品物模型 Excel
+  exportThinkModelFunction: async (params) => {
+    return await request.download({ url: `/iot/think-model-function/export-excel`, params })
+  }
+}
diff --git a/src/utils/dict.ts b/src/utils/dict.ts
index 82f9218f..e8deb60a 100644
--- a/src/utils/dict.ts
+++ b/src/utils/dict.ts
@@ -235,5 +235,9 @@ export enum DICT_TYPE {
   IOT_PRODUCT_DEVICE_TYPE = 'iot_product_device_type', // IOT 产品设备类型
   IOT_DATA_FORMAT = 'iot_data_format', // IOT 数据格式
   IOT_PROTOCOL_TYPE = 'iot_protocol_type', // IOT 接入网关协议
-  IOT_DEVICE_STATUS = 'iot_device_status' // IOT 设备状态
+  IOT_DEVICE_STATUS = 'iot_device_status', // IOT 设备状态
+  IOT_PRODUCT_FUNCTION_TYPE = 'iot_product_function_type', // IOT 产品功能类型
+  IOT_DATA_TYPE = 'iot_data_type', // IOT 数据类型
+  IOT_UNIT_TYPE = 'iot_unit_type', // IOT 单位类型
+  IOT_RW_TYPE = 'iot_rw_type' // IOT 读写类型
 }
diff --git a/src/views/iot/product/detail/ThinkModelFunction.vue b/src/views/iot/product/detail/ThinkModelFunction.vue
new file mode 100644
index 00000000..95089c62
--- /dev/null
+++ b/src/views/iot/product/detail/ThinkModelFunction.vue
@@ -0,0 +1,149 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="功能类型" prop="name">
+        <el-select
+          v-model="queryParams.type"
+          placeholder="请选择功能类型"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.IOT_PRODUCT_FUNCTION_TYPE)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </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
+          type="primary"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['iot:think-model-function:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 添加功能
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+  <ContentWrap>
+    <el-tabs>
+      <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+        <el-table-column label="功能类型" align="center" prop="type" />
+        <el-table-column label="功能名称" align="center" prop="name" />
+        <el-table-column label="标识符" align="center" prop="identifier" />
+        <el-table-column label="操作" align="center">
+          <template #default="scope">
+            <el-button
+              link
+              type="primary"
+              @click="openForm('update', scope.row.id)"
+              v-hasPermi="[`iot:think-model-function:update`]"
+            >
+              编辑
+            </el-button>
+            <el-button
+              link
+              type="danger"
+              @click="handleDelete(scope.row.id)"
+              v-hasPermi="['iot:think-model-function:delete']"
+            >
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 分页 -->
+      <Pagination
+        :total="total"
+        v-model:page="queryParams.pageNo"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </el-tabs>
+  </ContentWrap>
+  <!-- 表单弹窗：添加/修改 -->
+  <ThinkModelFunctionForm ref="formRef" :product="product" @success="getList" />
+</template>
+<script setup lang="ts">
+import { ProductVO } from '@/api/iot/product'
+import { ThinkModelFunctionApi, ThinkModelFunctionVO } from '@/api/iot/thinkmodelfunction'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import ThinkModelFunctionForm from '@/views/iot/product/detail/ThinkModelFunctionForm.vue'
+
+const props = defineProps<{ product: ProductVO }>()
+
+const message = useMessage() // 消息弹窗
+
+const loading = ref(true) // 列表的加载中
+const list = ref<ThinkModelFunctionVO[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  type: undefined,
+  productId: undefined
+})
+
+const queryFormRef = ref() // 搜索的表单
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    queryParams.productId = props.product.id
+    const data = await ThinkModelFunctionApi.getThinkModelFunctionPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  queryParams.type = undefined
+  handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await ThinkModelFunctionApi.deleteThinkModelFunction(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
diff --git a/src/views/iot/product/detail/ThinkModelFunctionForm.vue b/src/views/iot/product/detail/ThinkModelFunctionForm.vue
new file mode 100644
index 00000000..976ca717
--- /dev/null
+++ b/src/views/iot/product/detail/ThinkModelFunctionForm.vue
@@ -0,0 +1,194 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="功能类型" prop="type">
+        <el-select v-model="formData.type" placeholder="请选择功能类型">
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.IOT_PRODUCT_FUNCTION_TYPE)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <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>
+      <el-form-item label="数据类型" prop="dataType">
+        <el-select v-model="formData.dataType" placeholder="请选择数据类型">
+          <el-option key="int" label="int32 (整数型)" value="int" />
+          <el-option key="float" label="float (单精度浮点型)" value="float" />
+          <el-option key="double" label="double (双精度浮点型)" value="double" />
+          <el-option key="text" label="text (文本型)" value="text" />
+          <el-option key="date" label="date (日期型)" value="date" />
+          <el-option key="bool" label="bool (布尔型)" value="bool" />
+          <el-option key="enum" label="enum (枚举型)" value="enum" />
+          <el-option key="struct" label="struct (结构体)" value="struct" />
+          <el-option key="array" label="array (数组)" value="array" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="取值范围" prop="range">
+        <el-input v-model="formData.property.dataType.specs.min" placeholder="请输入最小值" />
+        <span class="mx-2">~</span>
+        <el-input v-model="formData.property.dataType.specs.max" placeholder="请输入最大值" />
+      </el-form-item>
+
+      <el-form-item label="步长" prop="step">
+        <el-input v-model="formData.property.dataType.specs.step" placeholder="请输入步长" />
+      </el-form-item>
+      <el-form-item label="单位" prop="unit">
+        <el-select v-model="formData.property.dataType.specs.unit" placeholder="请选择单位">
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.IOT_UNIT_TYPE)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="读写类型" prop="accessMode">
+        <el-radio-group v-model="formData.property.accessMode">
+          <el-radio label="rw">读写</el-radio>
+          <el-radio label="r">只读</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="功能描述" prop="description">
+        <el-input type="textarea" v-model="formData.description" placeholder="请输入功能描述" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { ProductVO } from '@/api/iot/product'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { ThinkModelFunctionApi, ThinkModelFunctionVO } from '@/api/iot/thinkmodelfunction'
+
+const props = defineProps<{ product: ProductVO }>()
+
+defineOptions({ name: 'ThinkModelFunctionForm' })
+
+const { t } = useI18n()
+const message = useMessage()
+
+const dialogVisible = ref(false)
+const dialogTitle = ref('')
+const formLoading = ref(false)
+const formType = ref('')
+const formData = ref({
+  id: undefined,
+  productId: undefined,
+  productKey: undefined,
+  identifier: undefined,
+  name: undefined,
+  description: undefined,
+  type: undefined,
+  property: {
+    identifier: undefined,
+    name: undefined,
+    accessMode: undefined,
+    required: true,
+    dataType: {
+      type: undefined,
+      specs: {
+        min: undefined,
+        max: undefined,
+        step: undefined,
+        unit: undefined
+      }
+    }
+  }
+})
+const formRules = reactive({
+  name: [{ required: true, message: '功能名称不能为空', trigger: 'blur' }],
+  type: [{ required: true, message: '功能类型不能为空', trigger: 'blur' }],
+  identifier: [{ required: true, message: '标识符不能为空', trigger: 'blur' }],
+  property: {
+    dataType: {
+      type: [{ required: true, message: '数据类型不能为空', trigger: 'blur' }]
+    },
+    accessMode: [{ required: true, message: '读写类型不能为空', trigger: 'blur' }]
+  }
+})
+const formRef = ref()
+
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await ThinkModelFunctionApi.getThinkModelFunction(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open, close: () => (dialogVisible.value = false) })
+
+const emit = defineEmits(['success'])
+const submitForm = async () => {
+  await formRef.value.validate()
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as ThinkModelFunctionVO
+    data.productId = props.product.id
+    data.productKey = props.product.productKey
+    if (formType.value === 'create') {
+      await ThinkModelFunctionApi.createThinkModelFunction(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await ThinkModelFunctionApi.updateThinkModelFunction(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false // 确保关闭弹框
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    productId: undefined,
+    productKey: undefined,
+    identifier: undefined,
+    name: undefined,
+    description: undefined,
+    type: undefined,
+    property: {
+      identifier: undefined,
+      name: undefined,
+      accessMode: undefined,
+      required: true,
+      dataType: {
+        type: undefined,
+        specs: {
+          min: undefined,
+          max: undefined,
+          step: undefined,
+          unit: undefined
+        }
+      }
+    }
+  }
+  formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/iot/product/detail/index.vue b/src/views/iot/product/detail/index.vue
index 6ff97bb8..f57fc4d6 100644
--- a/src/views/iot/product/detail/index.vue
+++ b/src/views/iot/product/detail/index.vue
@@ -1,18 +1,18 @@
 <template>
   <ProductDetailsHeader :loading="loading" :product="product" @refresh="() => getProductData(id)" />
   <el-col>
-    <el-tabs>
-      <el-tab-pane label="产品信息">
-        <ProductDetailsInfo :product="product" />
+    <el-tabs v-model="activeTab">
+      <el-tab-pane label="产品信息" name="info">
+        <ProductDetailsInfo v-if="activeTab === 'info'" :product="product" />
       </el-tab-pane>
-      <el-tab-pane label="Topic 类列表">
-        <ProductTopic :product="product" />
+      <el-tab-pane label="Topic 类列表" name="topic">
+        <ProductTopic v-if="activeTab === 'topic'" :product="product" />
       </el-tab-pane>
-      <el-tab-pane label="物模型">
-        <!--        <ProductDetailsModel :product="product" />-->
+      <el-tab-pane label="功能定义" name="function">
+        <ThinkModelFunction v-if="activeTab === 'function'" :product="product" />
       </el-tab-pane>
-      <el-tab-pane label="消息解析" />
-      <el-tab-pane label="服务端订阅" />
+      <el-tab-pane label="消息解析" name="message" />
+      <el-tab-pane label="服务端订阅" name="subscription" />
     </el-tabs>
   </el-col>
 </template>
@@ -22,6 +22,7 @@ import { DeviceApi } from '@/api/iot/device'
 import ProductDetailsHeader from '@/views/iot/product/detail/ProductDetailsHeader.vue'
 import ProductDetailsInfo from '@/views/iot/product/detail/ProductDetailsInfo.vue'
 import ProductTopic from '@/views/iot/product/detail/ProductTopic.vue'
+import ThinkModelFunction from '@/views/iot/product/detail/ThinkModelFunction.vue'
 
 defineOptions({ name: 'IoTProductDetail' })
 
@@ -30,6 +31,7 @@ const message = useMessage()
 const id = Number(route.params.id) // 编号
 const loading = ref(true) // 加载中
 const product = ref<ProductVO>({} as ProductVO) // 详情
+const activeTab = ref('info') // 默认激活的标签页
 
 /** 获取详情 */
 const getProductData = async (id: number) => {

From 4b2800f723a3c39dbc8efe496ab78920120d5a98 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=89=E6=B5=A9=E6=B5=A9?= <1036606149@qq.com>
Date: Mon, 30 Sep 2024 12:19:55 +0800
Subject: [PATCH 10/11] =?UTF-8?q?=E3=80=90=E4=BF=AE=E6=94=B9=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=E3=80=91=20IOT=20=E7=89=A9=E6=A8=A1=E5=9E=8B=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=9F=E8=83=BD=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../iot/product/detail/ThinkModelFunction.vue |   6 +-
 .../product/detail/ThinkModelFunctionForm.vue | 106 ++++++++++++------
 2 files changed, 75 insertions(+), 37 deletions(-)

diff --git a/src/views/iot/product/detail/ThinkModelFunction.vue b/src/views/iot/product/detail/ThinkModelFunction.vue
index 95089c62..cc2119c5 100644
--- a/src/views/iot/product/detail/ThinkModelFunction.vue
+++ b/src/views/iot/product/detail/ThinkModelFunction.vue
@@ -40,7 +40,11 @@
   <ContentWrap>
     <el-tabs>
       <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-        <el-table-column label="功能类型" align="center" prop="type" />
+        <el-table-column label="功能类型" align="center" prop="type">
+          <template #default="scope">
+            <dict-tag :type="DICT_TYPE.IOT_PRODUCT_FUNCTION_TYPE" :value="scope.row.type" />
+          </template>
+        </el-table-column>
         <el-table-column label="功能名称" align="center" prop="name" />
         <el-table-column label="标识符" align="center" prop="identifier" />
         <el-table-column label="操作" align="center">
diff --git a/src/views/iot/product/detail/ThinkModelFunctionForm.vue b/src/views/iot/product/detail/ThinkModelFunctionForm.vue
index 976ca717..0ea2a756 100644
--- a/src/views/iot/product/detail/ThinkModelFunctionForm.vue
+++ b/src/views/iot/product/detail/ThinkModelFunctionForm.vue
@@ -8,35 +8,40 @@
       v-loading="formLoading"
     >
       <el-form-item label="功能类型" prop="type">
-        <el-select v-model="formData.type" placeholder="请选择功能类型">
-          <el-option
-            v-for="dict in getIntDictOptions(DICT_TYPE.IOT_PRODUCT_FUNCTION_TYPE)"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
+        <el-radio-group v-model="formData.type">
+          <el-radio-button value="1"> 属性 </el-radio-button>
+          <el-radio-button value="2"> 服务 </el-radio-button>
+          <el-radio-button value="3"> 事件 </el-radio-button>
+        </el-radio-group>
       </el-form-item>
       <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-input
+          v-model="formData.identifier"
+          placeholder="请输入标识符"
+          :disabled="formType === 'update'"
+        />
       </el-form-item>
-      <el-form-item label="数据类型" prop="dataType">
-        <el-select v-model="formData.dataType" placeholder="请选择数据类型">
+      <el-form-item label="数据类型" prop="type">
+        <el-select
+          v-model="formData.property.dataType.type"
+          placeholder="请选择数据类型"
+          :disabled="formType === 'update'"
+        >
           <el-option key="int" label="int32 (整数型)" value="int" />
           <el-option key="float" label="float (单精度浮点型)" value="float" />
           <el-option key="double" label="double (双精度浮点型)" value="double" />
-          <el-option key="text" label="text (文本型)" value="text" />
-          <el-option key="date" label="date (日期型)" value="date" />
-          <el-option key="bool" label="bool (布尔型)" value="bool" />
-          <el-option key="enum" label="enum (枚举型)" value="enum" />
-          <el-option key="struct" label="struct (结构体)" value="struct" />
-          <el-option key="array" label="array (数组)" value="array" />
+          <!--          <el-option key="text" label="text (文本型)" value="text" />-->
+          <!--          <el-option key="date" label="date (日期型)" value="date" />-->
+          <!--          <el-option key="bool" label="bool (布尔型)" value="bool" />-->
+          <!--          <el-option key="enum" label="enum (枚举型)" value="enum" />-->
+          <!--          <el-option key="struct" label="struct (结构体)" value="struct" />-->
+          <!--          <el-option key="array" label="array (数组)" value="array" />-->
         </el-select>
       </el-form-item>
-      <el-form-item label="取值范围" prop="range">
+      <el-form-item label="取值范围" prop="max">
         <el-input v-model="formData.property.dataType.specs.min" placeholder="请输入最小值" />
         <span class="mx-2">~</span>
         <el-input v-model="formData.property.dataType.specs.max" placeholder="请输入最大值" />
@@ -46,14 +51,7 @@
         <el-input v-model="formData.property.dataType.specs.step" placeholder="请输入步长" />
       </el-form-item>
       <el-form-item label="单位" prop="unit">
-        <el-select v-model="formData.property.dataType.specs.unit" placeholder="请选择单位">
-          <el-option
-            v-for="dict in getIntDictOptions(DICT_TYPE.IOT_UNIT_TYPE)"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
+        <el-input v-model="formData.property.dataType.specs.unit" placeholder="请输入单位" />
       </el-form-item>
       <el-form-item label="读写类型" prop="accessMode">
         <el-radio-group v-model="formData.property.accessMode">
@@ -61,8 +59,12 @@
           <el-radio label="r">只读</el-radio>
         </el-radio-group>
       </el-form-item>
-      <el-form-item label="功能描述" prop="description">
-        <el-input type="textarea" v-model="formData.description" placeholder="请输入功能描述" />
+      <el-form-item label="属性描述" prop="property.description">
+        <el-input
+          type="textarea"
+          v-model="formData.property.description"
+          placeholder="请输入属性描述"
+        />
       </el-form-item>
     </el-form>
 
@@ -96,11 +98,11 @@ const formData = ref({
   identifier: undefined,
   name: undefined,
   description: undefined,
-  type: undefined,
+  type: '1',
   property: {
     identifier: undefined,
     name: undefined,
-    accessMode: undefined,
+    accessMode: 'rw',
     required: true,
     dataType: {
       type: undefined,
@@ -110,13 +112,44 @@ const formData = ref({
         step: undefined,
         unit: undefined
       }
-    }
+    },
+    description: undefined // 添加这一行
   }
 })
 const formRules = reactive({
-  name: [{ required: true, message: '功能名称不能为空', trigger: 'blur' }],
+  name: [
+    { required: true, message: '功能名称不能为空', trigger: 'blur' },
+    {
+      pattern: /^[\u4e00-\u9fa5a-zA-Z0-9][\u4e00-\u9fa5a-zA-Z0-9\-_/\.]{0,29}$/,
+      message:
+        '支持中文、大小写字母、日文、数字、短划线、下划线、斜杠和小数点，必须以中文、英文或数字开头，不超过 30 个字符',
+      trigger: 'blur'
+    }
+  ],
   type: [{ required: true, message: '功能类型不能为空', trigger: 'blur' }],
-  identifier: [{ required: true, message: '标识符不能为空', trigger: 'blur' }],
+  identifier: [
+    { required: true, message: '标识符不能为空', trigger: 'blur' },
+    {
+      pattern: /^[a-zA-Z0-9_]{1,50}$/,
+      message: '支持大小写字母、数字和下划线，不超过 50 个字符',
+      trigger: 'blur'
+    },
+    {
+      validator: (rule, value, callback) => {
+        const reservedKeywords = ['set', 'get', 'post', 'property', 'event', 'time', 'value']
+        if (reservedKeywords.includes(value)) {
+          callback(
+            new Error(
+              'set, get, post, property, event, time, value 是系统保留字段，不能用于标识符定义'
+            )
+          )
+        } else {
+          callback()
+        }
+      },
+      trigger: 'blur'
+    }
+  ],
   property: {
     dataType: {
       type: [{ required: true, message: '数据类型不能为空', trigger: 'blur' }]
@@ -172,11 +205,11 @@ const resetForm = () => {
     identifier: undefined,
     name: undefined,
     description: undefined,
-    type: undefined,
+    type: '1',
     property: {
       identifier: undefined,
       name: undefined,
-      accessMode: undefined,
+      accessMode: 'rw',
       required: true,
       dataType: {
         type: undefined,
@@ -186,7 +219,8 @@ const resetForm = () => {
           step: undefined,
           unit: undefined
         }
-      }
+      },
+      description: undefined // 确保重置 description 字段
     }
   }
   formRef.value?.resetFields()

From 6d641177b824c7c44fed9f6d005105e2d186ce4e Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 1 Oct 2024 19:29:24 +0800
Subject: [PATCH 11/11] =?UTF-8?q?=E3=80=90=E4=BB=A3=E7=A0=81=E8=AF=84?=
 =?UTF-8?q?=E5=AE=A1=E3=80=91IoT=EF=BC=9A=E4=BA=A7=E5=93=81=E3=80=81?=
 =?UTF-8?q?=E8=AE=BE=E5=A4=87=E3=80=81=E7=89=A9=E6=A8=A1=E5=9E=8B=E7=9A=84?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/iot/device/index.ts                   | 28 ++++----
 src/api/iot/product/index.ts                  | 35 ++++-----
 src/api/iot/thinkmodelfunction/index.ts       | 26 +++----
 src/views/iot/device/DeviceForm.vue           |  7 +-
 .../iot/device/detail/DeviceDetailsHeader.vue |  1 +
 .../iot/device/detail/DeviceDetailsInfo.vue   | 71 ++++++++-----------
 src/views/iot/device/index.vue                |  7 +-
 src/views/iot/product/ProductForm.vue         | 28 ++------
 .../product/detail/ProductDetailsHeader.vue   | 17 +++--
 .../iot/product/detail/ProductDetailsInfo.vue |  6 +-
 src/views/iot/product/detail/ProductTopic.vue |  1 +
 .../iot/product/detail/ThinkModelFunction.vue |  3 +-
 .../product/detail/ThinkModelFunctionForm.vue |  7 +-
 src/views/iot/product/detail/index.vue        |  7 +-
 src/views/iot/product/index.vue               | 19 +----
 15 files changed, 114 insertions(+), 149 deletions(-)

diff --git a/src/api/iot/device/index.ts b/src/api/iot/device/index.ts
index 24d48789..903874b7 100644
--- a/src/api/iot/device/index.ts
+++ b/src/api/iot/device/index.ts
@@ -1,16 +1,16 @@
 import request from '@/config/axios'
 
-// 设备 VO
+// IoT 设备 VO
 export interface DeviceVO {
   id: number // 设备 ID，主键，自增
-  deviceKey: string // 设备唯一标识符，全局唯一，用于识别设备
-  deviceName: string // 设备名称，在产品内唯一，用于标识设备
-  productId: number // 产品 ID，关联 iot_product 表的 id
-  productKey: string // 产品 Key，关联 iot_product 表的 product_key
-  deviceType: number // 设备类型：0 - 直连设备，1 - 网关子设备，2 - 网关设备
-  nickname: string // 设备备注名称，供用户自定义备注
-  gatewayId: number // 网关设备 ID，子设备需要关联的网关设备 ID
-  status: number // 设备状态：0 - 未激活，1 - 在线，2 - 离线，3 - 已禁用
+  deviceKey: string // 设备唯一标识符
+  deviceName: string // 设备名称
+  productId: number // 产品编号
+  productKey: string // 产品标识
+  deviceType: number // 设备类型
+  nickname: string // 设备备注名称
+  gatewayId: number // 网关设备 ID
+  status: number // 设备状态
   statusLastUpdateTime: Date // 设备状态最后更新时间
   lastOnlineTime: Date // 最后上线时间
   lastOfflineTime: Date // 最后离线时间
@@ -22,17 +22,17 @@ export interface DeviceVO {
   mqttClientId: string // MQTT 客户端 ID
   mqttUsername: string // MQTT 用户名
   mqttPassword: string // MQTT 密码
-  authType: string // 认证类型（如一机一密、动态注册）
-  latitude: number // 设备位置的纬度，范围 -90.000000 ~ 90.000000
-  longitude: number // 设备位置的经度，范围 -180.000000 ~ 180.000000
-  areaId: number // 地区编码，符合国家地区编码标准，关联地区表
+  authType: string // 认证类型
+  latitude: number // 设备位置的纬度
+  longitude: number // 设备位置的经度
+  areaId: number // 地区编码
   address: string // 设备详细地址
   serialNumber: string // 设备序列号
 }
 
 export interface DeviceUpdateStatusVO {
   id: number // 设备 ID，主键，自增
-  status: number // 设备状态：0 - 未激活，1 - 在线，2 - 离线，3 - 已禁用
+  status: number // 设备状态
 }
 
 // 设备 API
diff --git a/src/api/iot/product/index.ts b/src/api/iot/product/index.ts
index 2a8d430f..1ffa490d 100644
--- a/src/api/iot/product/index.ts
+++ b/src/api/iot/product/index.ts
@@ -1,50 +1,51 @@
 import request from '@/config/axios'
 
-// iot 产品 VO
+// IoT 产品 VO
 export interface ProductVO {
+  id: number // 产品编号
   name: string // 产品名称
-  id: number // 产品ID
   productKey: string // 产品标识
-  protocolId: number // 协议编号（脚本解析 id）
+  protocolId: number // 协议编号
   categoryId: number // 产品所属品类标识符
   description: string // 产品描述
-  validateType: number // 数据校验级别, 0: 强校验, 1: 弱校验, 2: 免校验
-  status: number // 产品状态, 0: DEVELOPMENT_STATUS, 1: RELEASE_STATUS
-  deviceType: number // 设备类型, 0: 直连设备, 1: 网关子设备, 2: 网关设备
-  netType: number // 联网方式, 0: Wi-Fi, 1: Cellular, 2: Ethernet, 3: 其他
-  protocolType: number // 接入网关协议, 0: modbus, 1: opc-ua, 2: customize, 3: ble, 4: zigbee
-  dataFormat: number // 数据格式, 0: 透传模式, 1: Alink JSON
+  validateType: number // 数据校验级别
+  status: number // 产品状态
+  deviceType: number // 设备类型
+  netType: number // 联网方式
+  protocolType: number // 接入网关协议
+  dataFormat: number // 数据格式
   deviceCount: number // 设备数量
+  createTime: Date // 创建时间
 }
 
-// iot 产品 API
+// IoT 产品 API
 export const ProductApi = {
-  // 查询iot 产品分页
+  // 查询产品分页
   getProductPage: async (params: any) => {
     return await request.get({ url: `/iot/product/page`, params })
   },
 
-  // 查询iot 产品详情
+  // 查询产品详情
   getProduct: async (id: number) => {
     return await request.get({ url: `/iot/product/get?id=` + id })
   },
 
-  // 新增iot 产品
+  // 新增产品
   createProduct: async (data: ProductVO) => {
     return await request.post({ url: `/iot/product/create`, data })
   },
 
-  // 修改iot 产品
+  // 修改产品
   updateProduct: async (data: ProductVO) => {
     return await request.put({ url: `/iot/product/update`, data })
   },
 
-  // 删除iot 产品
+  // 删除产品
   deleteProduct: async (id: number) => {
     return await request.delete({ url: `/iot/product/delete?id=` + id })
   },
 
-  // 导出iot 产品 Excel
+  // 导出产品 Excel
   exportProduct: async (params) => {
     return await request.download({ url: `/iot/product/export-excel`, params })
   },
@@ -54,7 +55,7 @@ export const ProductApi = {
     return await request.put({ url: `/iot/product/update-status?id=` + id + `&status=` + status })
   },
 
-  // 查询产品（精简)列表
+  // 查询产品（精简）列表
   getSimpleProductList() {
     return request.get({ url: '/iot/product/list-all-simple' })
   }
diff --git a/src/api/iot/thinkmodelfunction/index.ts b/src/api/iot/thinkmodelfunction/index.ts
index 29f06a78..bd2e2d0f 100644
--- a/src/api/iot/thinkmodelfunction/index.ts
+++ b/src/api/iot/thinkmodelfunction/index.ts
@@ -6,21 +6,21 @@ export interface ThinkModelFunctionVO {
   identifier: string // 功能标识
   name: string // 功能名称
   description: string // 功能描述
-  productId: number // 产品ID（关联 IotProductDO 的 id）
-  productKey: string // 产品Key（关联 IotProductDO 的 productKey）
-  type: number // 功能类型（1 - 属性，2 - 服务，3 - 事件）
-  property: string // 属性（存储 ThingModelProperty 的 JSON 数据）
-  event: string // 事件（存储 ThingModelEvent 的 JSON 数据）
-  service: string // 服务（存储服务的 JSON 数据）
+  productId: number // 产品编号
+  productKey: string // 产品标识
+  type: number // 功能类型
+  property: string // 属性
+  event: string // 事件
+  service: string // 服务
 }
 
 // IoT 产品物模型 API
 export const ThinkModelFunctionApi = {
-  // 查询IoT 产品物模型分页
+  // 查询产品物模型分页
   getThinkModelFunctionPage: async (params: any) => {
     return await request.get({ url: `/iot/think-model-function/page`, params })
   },
-  // 获得IoT 产品物模型
+  // 获得产品物模型
   getThinkModelFunctionListByProductId: async (params: any) => {
     return await request.get({
       url: `/iot/think-model-function/list-by-product-id`,
@@ -28,27 +28,27 @@ export const ThinkModelFunctionApi = {
     })
   },
 
-  // 查询IoT 产品物模型详情
+  // 查询产品物模型详情
   getThinkModelFunction: async (id: number) => {
     return await request.get({ url: `/iot/think-model-function/get?id=` + id })
   },
 
-  // 新增IoT 产品物模型
+  // 新增产品物模型
   createThinkModelFunction: async (data: ThinkModelFunctionVO) => {
     return await request.post({ url: `/iot/think-model-function/create`, data })
   },
 
-  // 修改IoT 产品物模型
+  // 修改产品物模型
   updateThinkModelFunction: async (data: ThinkModelFunctionVO) => {
     return await request.put({ url: `/iot/think-model-function/update`, data })
   },
 
-  // 删除IoT 产品物模型
+  // 删除产品物模型
   deleteThinkModelFunction: async (id: number) => {
     return await request.delete({ url: `/iot/think-model-function/delete?id=` + id })
   },
 
-  // 导出IoT 产品物模型 Excel
+  // 导出产品物模型 Excel
   exportThinkModelFunction: async (params) => {
     return await request.download({ url: `/iot/think-model-function/export-excel`, params })
   }
diff --git a/src/views/iot/device/DeviceForm.vue b/src/views/iot/device/DeviceForm.vue
index f926b6d4..cb026012 100644
--- a/src/views/iot/device/DeviceForm.vue
+++ b/src/views/iot/device/DeviceForm.vue
@@ -57,8 +57,7 @@ const formData = ref({
   id: undefined,
   productId: undefined,
   deviceName: undefined,
-  nickname: undefined,
-  serialNumber: undefined
+  nickname: undefined
 })
 const formRules = reactive({
   productId: [{ required: true, message: '产品不能为空', trigger: 'blur' }],
@@ -66,7 +65,7 @@ const formRules = reactive({
     {
       pattern: /^[a-zA-Z0-9_.\-:@]{4,32}$/,
       message:
-        '支持英文字母、数字、下划线（_）、中划线（-）、点号（.）、半角冒号（:）和特殊字符@，长度限制为4~32个字符',
+        '支持英文字母、数字、下划线（_）、中划线（-）、点号（.）、半角冒号（:）和特殊字符@，长度限制为 4~32 个字符',
       trigger: 'blur'
     }
   ],
@@ -79,7 +78,7 @@ const formRules = reactive({
         }
         const length = value.replace(/[\u4e00-\u9fa5\u3040-\u30ff]/g, 'aa').length
         if (length < 4 || length > 64) {
-          callback(new Error('备注名称长度限制为4~64个字符，中文及日文算2个字符'))
+          callback(new Error('备注名称长度限制为 4~64 个字符，中文及日文算 2 个字符'))
         } else if (!/^[\u4e00-\u9fa5\u3040-\u30ff_a-zA-Z0-9]+$/.test(value)) {
           callback(new Error('备注名称只能包含中文、英文字母、日文、数字和下划线（_）'))
         } else {
diff --git a/src/views/iot/device/detail/DeviceDetailsHeader.vue b/src/views/iot/device/detail/DeviceDetailsHeader.vue
index 4360cab1..62960529 100644
--- a/src/views/iot/device/detail/DeviceDetailsHeader.vue
+++ b/src/views/iot/device/detail/DeviceDetailsHeader.vue
@@ -59,6 +59,7 @@ const emit = defineEmits(['refresh'])
  * @param text 需要复制的文本
  */
 const copyToClipboard = (text: string) => {
+  // TODO @haohao：可以考虑用 await 异步转同步哈
   navigator.clipboard.writeText(text).then(() => {
     message.success('复制成功')
   })
diff --git a/src/views/iot/device/detail/DeviceDetailsInfo.vue b/src/views/iot/device/detail/DeviceDetailsInfo.vue
index 77084625..59b9d254 100644
--- a/src/views/iot/device/detail/DeviceDetailsInfo.vue
+++ b/src/views/iot/device/detail/DeviceDetailsInfo.vue
@@ -3,33 +3,33 @@
     <el-collapse v-model="activeNames">
       <el-descriptions :column="3" title="设备信息">
         <el-descriptions-item label="产品名称">{{ product.name }}</el-descriptions-item>
-        <el-descriptions-item label="ProductKey"
-          >{{ product.productKey }}
+        <el-descriptions-item label="ProductKey">
+          {{ product.productKey }}
           <el-button @click="copyToClipboard(product.productKey)">复制</el-button>
         </el-descriptions-item>
         <el-descriptions-item label="设备类型">
           <dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :value="product.deviceType" />
         </el-descriptions-item>
-        <el-descriptions-item label="DeviceName"
-          >{{ device.deviceName }}
+        <el-descriptions-item label="DeviceName">
+          {{ device.deviceName }}
           <el-button @click="copyToClipboard(device.deviceName)">复制</el-button>
         </el-descriptions-item>
         <el-descriptions-item label="备注名称">{{ device.nickname }}</el-descriptions-item>
-        <el-descriptions-item label="创建时间">{{
-          formatDate(device.createTime)
-        }}</el-descriptions-item>
-        <el-descriptions-item label="激活时间">{{
-          formatDate(device.activeTime)
-        }}</el-descriptions-item>
-        <el-descriptions-item label="最后上线时间">{{
-          formatDate(device.lastOnlineTime)
-        }}</el-descriptions-item>
+        <el-descriptions-item label="创建时间">
+          {{ formatDate(device.createTime) }}
+        </el-descriptions-item>
+        <el-descriptions-item label="激活时间">
+          {{ formatDate(device.activeTime) }}
+        </el-descriptions-item>
+        <el-descriptions-item label="最后上线时间">
+          {{ formatDate(device.lastOnlineTime) }}
+        </el-descriptions-item>
         <el-descriptions-item label="当前状态">
           <dict-tag :type="DICT_TYPE.IOT_DEVICE_STATUS" :value="device.status" />
         </el-descriptions-item>
-        <el-descriptions-item label="最后离线时间" :span="3">{{
-          formatDate(device.lastOfflineTime)
-        }}</el-descriptions-item>
+        <el-descriptions-item label="最后离线时间" :span="3">
+          {{ formatDate(device.lastOfflineTime) }}
+        </el-descriptions-item>
         <el-descriptions-item label="MQTT 连接参数">
           <el-button type="primary" @click="openMqttParams">查看</el-button>
         </el-descriptions-item>
@@ -53,7 +53,6 @@
             </template>
           </el-input>
         </el-form-item>
-
         <el-form-item label="username">
           <el-input v-model="mqttParams.mqttUsername" readonly>
             <template #append>
@@ -63,7 +62,6 @@
             </template>
           </el-input>
         </el-form-item>
-
         <el-form-item label="passwd">
           <el-input v-model="mqttParams.mqttPassword" readonly type="password">
             <template #append>
@@ -87,39 +85,28 @@ import { ProductVO } from '@/api/iot/product'
 import { formatDate } from '@/utils/formatTime'
 import { DeviceVO } from '@/api/iot/device'
 
-// 消息提示
-const message = useMessage()
+const message = useMessage() // 消息提示
 
-// 路由实例
-const router = useRouter()
+const { product, device } = defineProps<{ product: ProductVO; device: DeviceVO }>() // 定义 Props
 
-// 定义 Props
-const { product, device } = defineProps<{ product: ProductVO; device: DeviceVO }>()
+const emit = defineEmits(['refresh']) // 定义 Emits
 
-// 定义 Emits
-const emit = defineEmits(['refresh'])
+const activeNames = ref(['basicInfo']) // 展示的折叠面板
+const mqttDialogVisible = ref(false) // 定义 MQTT 弹框的可见性
+const mqttParams = ref({
+  mqttClientId: '',
+  mqttUsername: '',
+  mqttPassword: ''
+}) // 定义 MQTT 参数对象
 
-// 展示的折叠面板
-const activeNames = ref(['basicInfo'])
-
-// 复制到剪贴板方法
+/** 复制到剪贴板方法 */
 const copyToClipboard = (text: string) => {
   navigator.clipboard.writeText(text).then(() => {
     message.success('复制成功')
   })
 }
 
-// 定义 MQTT 弹框的可见性
-const mqttDialogVisible = ref(false)
-
-// 定义 MQTT 参数对象
-const mqttParams = ref({
-  mqttClientId: '',
-  mqttUsername: '',
-  mqttPassword: ''
-})
-
-// 打开 MQTT 参数弹框的方法
+/** 打开 MQTT 参数弹框的方法 */
 const openMqttParams = () => {
   mqttParams.value = {
     mqttClientId: device.mqttClientId || 'N/A',
@@ -129,7 +116,7 @@ const openMqttParams = () => {
   mqttDialogVisible.value = true
 }
 
-// 关闭 MQTT 弹框的方法
+/** 关闭 MQTT 弹框的方法 */
 const handleCloseMqttDialog = () => {
   mqttDialogVisible.value = false
 }
diff --git a/src/views/iot/device/index.vue b/src/views/iot/device/index.vue
index 566c78a6..784b1482 100644
--- a/src/views/iot/device/index.vue
+++ b/src/views/iot/device/index.vue
@@ -192,9 +192,8 @@ const queryParams = reactive({
   status: undefined
 })
 const queryFormRef = ref() // 搜索的表单
-const exportLoading = ref(false) // 导出的加载中
 
-/** 产品ID到名称的映射 */
+/** 产品标号和名称的映射 */
 const productMap = reactive({})
 
 /** 查询列表 */
@@ -207,6 +206,7 @@ const getList = async () => {
     // 获取产品ID列表
     const productIds = [...new Set(data.list.map((device) => device.productId))]
     // 获取产品名称
+    // TODO @haohao：最好后端拼接哈
     const products = await Promise.all(productIds.map((id) => ProductApi.getProduct(id)))
     products.forEach((product) => {
       productMap[product.id] = product.name
@@ -235,7 +235,7 @@ const openForm = (type: string, id?: number) => {
 }
 
 /** 打开详情 */
-const { currentRoute, push } = useRouter()
+const { push } = useRouter()
 const openDetail = (id: number) => {
   push({ name: 'IoTDeviceDetail', params: { id } })
 }
@@ -252,6 +252,7 @@ const handleDelete = async (id: number) => {
     await getList()
   } catch {}
 }
+
 /** 查询字典下拉列表 */
 const products = ref()
 const getProducts = async () => {
diff --git a/src/views/iot/product/ProductForm.vue b/src/views/iot/product/ProductForm.vue
index 7d254a03..75d6efcc 100644
--- a/src/views/iot/product/ProductForm.vue
+++ b/src/views/iot/product/ProductForm.vue
@@ -128,15 +128,10 @@ const formData = ref({
 })
 const formRules = reactive({
   name: [{ required: true, message: '产品名称不能为空', trigger: 'blur' }],
-  deviceType: [
-    {
-      required: true,
-      message: '设备类型不能为空',
-      trigger: 'change'
-    }
-  ],
+  deviceType: [{ required: true, message: '设备类型不能为空', trigger: 'change' }],
   netType: [
     {
+      // TODO @haohao：0、1、/2 最好前端也枚举下；另外，这里的 required 可以直接设置为 true。然后表单那些 v-if。只要不存在，它自动就不校验了哈
       required: formData.deviceType === 0 || formData.deviceType === 2,
       message: '联网方式不能为空',
       trigger: 'change'
@@ -145,23 +140,12 @@ const formRules = reactive({
   protocolType: [
     { required: formData.deviceType === 1, message: '接入网关协议不能为空', trigger: 'change' }
   ],
-  dataFormat: [
-    {
-      required: true,
-      message: '数据格式不能为空',
-      trigger: 'change'
-    }
-  ],
-  validateType: [
-    {
-      required: true,
-      message: '数据校验级别不能为空',
-      trigger: 'change'
-    }
-  ]
+  dataFormat: [{ required: true, message: '数据格式不能为空', trigger: 'change' }],
+  validateType: [{ required: true, message: '数据校验级别不能为空', trigger: 'change' }]
 })
 const formRef = ref()
 
+/** 打开弹窗 */
 const open = async (type: string, id?: number) => {
   dialogVisible.value = true
   dialogTitle.value = t('action.' + type)
@@ -178,6 +162,7 @@ const open = async (type: string, id?: number) => {
 }
 defineExpose({ open, close: () => (dialogVisible.value = false) })
 
+/** 提交表单 */
 const emit = defineEmits(['success'])
 const submitForm = async () => {
   await formRef.value.validate()
@@ -198,6 +183,7 @@ const submitForm = async () => {
   }
 }
 
+/** 重置表单 */
 const resetForm = () => {
   formData.value = {
     name: undefined,
diff --git a/src/views/iot/product/detail/ProductDetailsHeader.vue b/src/views/iot/product/detail/ProductDetailsHeader.vue
index db0849ed..ba009516 100644
--- a/src/views/iot/product/detail/ProductDetailsHeader.vue
+++ b/src/views/iot/product/detail/ProductDetailsHeader.vue
@@ -58,19 +58,24 @@ import ProductForm from '@/views/iot/product/ProductForm.vue'
 import { ProductApi, ProductVO } from '@/api/iot/product'
 
 const message = useMessage()
+
+const { product } = defineProps<{ product: ProductVO }>() // 定义 Props
+
+/** 处理复制 */
 const copyToClipboard = (text: string) => {
   navigator.clipboard.writeText(text).then(() => {
     message.success('复制成功')
   })
 }
 
-// 路由跳转到设备管理
-const { currentRoute, push } = useRouter()
+/** 路由跳转到设备管理 */
+const { push } = useRouter()
 const goToManagement = (productId: string) => {
   push({ name: 'IoTDevice', query: { productId } })
 }
 
-// 操作修改
+/** 操作修改 */
+const emit = defineEmits(['refresh']) // 定义 Emits
 const formRef = ref()
 const openForm = (type: string, id?: number) => {
   formRef.value.open(type, id)
@@ -95,10 +100,4 @@ const confirmUnpublish = async (id: number) => {
     message.error('撤销发布失败')
   }
 }
-
-// 定义 Props
-const { product } = defineProps<{ product: ProductVO }>()
-
-// 定义 Emits
-const emit = defineEmits(['refresh'])
 </script>
diff --git a/src/views/iot/product/detail/ProductDetailsInfo.vue b/src/views/iot/product/detail/ProductDetailsInfo.vue
index e3b5483a..5153045e 100644
--- a/src/views/iot/product/detail/ProductDetailsInfo.vue
+++ b/src/views/iot/product/detail/ProductDetailsInfo.vue
@@ -6,9 +6,9 @@
         <el-descriptions-item label="设备类型">
           <dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :value="product.deviceType" />
         </el-descriptions-item>
-        <el-descriptions-item label="创建时间">{{
-          formatDate(product.createTime)
-        }}</el-descriptions-item>
+        <el-descriptions-item label="创建时间">
+          {{ formatDate(product.createTime) }}
+        </el-descriptions-item>
         <el-descriptions-item label="数据格式">
           <dict-tag :type="DICT_TYPE.IOT_DATA_FORMAT" :value="product.dataFormat" />
         </el-descriptions-item>
diff --git a/src/views/iot/product/detail/ProductTopic.vue b/src/views/iot/product/detail/ProductTopic.vue
index 79ca2808..c327bb65 100644
--- a/src/views/iot/product/detail/ProductTopic.vue
+++ b/src/views/iot/product/detail/ProductTopic.vue
@@ -44,6 +44,7 @@ const columns2 = reactive([
   { label: '描述', field: 'description' }
 ])
 
+// TODO @haohao：这个，有没可能写到一个枚举里，方便后续维护？ /Users/yunai/Java/yudao-ui-admin-vue3/src/views/ai/utils/constants.ts
 const data1 = computed(() => {
   if (!props.product || !props.product.productKey) return []
   return [
diff --git a/src/views/iot/product/detail/ThinkModelFunction.vue b/src/views/iot/product/detail/ThinkModelFunction.vue
index cc2119c5..5a75d109 100644
--- a/src/views/iot/product/detail/ThinkModelFunction.vue
+++ b/src/views/iot/product/detail/ThinkModelFunction.vue
@@ -88,6 +88,7 @@ import ThinkModelFunctionForm from '@/views/iot/product/detail/ThinkModelFunctio
 
 const props = defineProps<{ product: ProductVO }>()
 
+const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
 const loading = ref(true) // 列表的加载中
@@ -97,7 +98,7 @@ const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
   type: undefined,
-  productId: undefined
+  productId: -1
 })
 
 const queryFormRef = ref() // 搜索的表单
diff --git a/src/views/iot/product/detail/ThinkModelFunctionForm.vue b/src/views/iot/product/detail/ThinkModelFunctionForm.vue
index 0ea2a756..895692e0 100644
--- a/src/views/iot/product/detail/ThinkModelFunctionForm.vue
+++ b/src/views/iot/product/detail/ThinkModelFunctionForm.vue
@@ -46,7 +46,6 @@
         <span class="mx-2">~</span>
         <el-input v-model="formData.property.dataType.specs.max" placeholder="请输入最大值" />
       </el-form-item>
-
       <el-form-item label="步长" prop="step">
         <el-input v-model="formData.property.dataType.specs.step" placeholder="请输入步长" />
       </el-form-item>
@@ -77,7 +76,6 @@
 
 <script setup lang="ts">
 import { ProductVO } from '@/api/iot/product'
-import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { ThinkModelFunctionApi, ThinkModelFunctionVO } from '@/api/iot/thinkmodelfunction'
 
 const props = defineProps<{ product: ProductVO }>()
@@ -159,6 +157,7 @@ const formRules = reactive({
 })
 const formRef = ref()
 
+/** 打开弹窗 */
 const open = async (type: string, id?: number) => {
   dialogVisible.value = true
   dialogTitle.value = t('action.' + type)
@@ -175,6 +174,7 @@ const open = async (type: string, id?: number) => {
 }
 defineExpose({ open, close: () => (dialogVisible.value = false) })
 
+/** 提交表单 */
 const emit = defineEmits(['success'])
 const submitForm = async () => {
   await formRef.value.validate()
@@ -197,6 +197,7 @@ const submitForm = async () => {
   }
 }
 
+/** 重置表单 */
 const resetForm = () => {
   formData.value = {
     id: undefined,
@@ -205,7 +206,7 @@ const resetForm = () => {
     identifier: undefined,
     name: undefined,
     description: undefined,
-    type: '1',
+    type: '1', // todo @HAOHAO：看看枚举下
     property: {
       identifier: undefined,
       name: undefined,
diff --git a/src/views/iot/product/detail/index.vue b/src/views/iot/product/detail/index.vue
index f57fc4d6..ddc5e185 100644
--- a/src/views/iot/product/detail/index.vue
+++ b/src/views/iot/product/detail/index.vue
@@ -23,9 +23,14 @@ import ProductDetailsHeader from '@/views/iot/product/detail/ProductDetailsHeade
 import ProductDetailsInfo from '@/views/iot/product/detail/ProductDetailsInfo.vue'
 import ProductTopic from '@/views/iot/product/detail/ProductTopic.vue'
 import ThinkModelFunction from '@/views/iot/product/detail/ThinkModelFunction.vue'
+import { useTagsViewStore } from '@/store/modules/tagsView'
+import { useRouter } from 'vue-router'
 
 defineOptions({ name: 'IoTProductDetail' })
 
+const { delView } = useTagsViewStore() // 视图操作
+const { currentRoute } = useRouter()
+
 const route = useRoute()
 const message = useMessage()
 const id = Number(route.params.id) // 编号
@@ -45,7 +50,7 @@ const getProductData = async (id: number) => {
 }
 
 // 查询设备数量
-const getDeviceCount = async (productId: string) => {
+const getDeviceCount = async (productId: number) => {
   try {
     const count = await DeviceApi.getDeviceCount(productId)
     console.log('Device count response:', count)
diff --git a/src/views/iot/product/index.vue b/src/views/iot/product/index.vue
index d3196ac4..fa285819 100644
--- a/src/views/iot/product/index.vue
+++ b/src/views/iot/product/index.vue
@@ -104,7 +104,6 @@
 
 <script setup lang="ts">
 import { dateFormatter } from '@/utils/formatTime'
-import download from '@/utils/download'
 import { ProductApi, ProductVO } from '@/api/iot/product'
 import ProductForm from './ProductForm.vue'
 import { DICT_TYPE } from '@/utils/dict'
@@ -135,7 +134,6 @@ const queryParams = reactive({
   dataFormat: undefined
 })
 const queryFormRef = ref() // 搜索的表单
-const exportLoading = ref(false) // 导出的加载中
 
 /** 查询列表 */
 const getList = async () => {
@@ -168,7 +166,7 @@ const openForm = (type: string, id?: number) => {
 }
 
 /** 打开详情 */
-const { currentRoute, push } = useRouter()
+const { push } = useRouter()
 const openDetail = (id: number) => {
   push({ name: 'IoTProductDetail', params: { id } })
 }
@@ -186,21 +184,6 @@ const handleDelete = async (id: number) => {
   } catch {}
 }
 
-/** 导出按钮操作 */
-const handleExport = async () => {
-  try {
-    // 导出的二次确认
-    await message.exportConfirm()
-    // 发起导出
-    exportLoading.value = true
-    const data = await ProductApi.exportProduct(queryParams)
-    download.excel(data, 'iot 产品.xls')
-  } catch {
-  } finally {
-    exportLoading.value = false
-  }
-}
-
 /** 初始化 **/
 onMounted(() => {
   getList()