【功能修改】IoT：完善设备详情的属性展示

src/views/iot/device/device/detail/DeviceDataDetail.vue

@@ -25,10 +25,6 @@
             <Icon icon="ep:search" class="mr-5px" />
             搜索
           </el-button>
-          <el-button @click="resetQuery">
-            <Icon icon="ep:refresh" class="mr-5px" />
-            重置
-          </el-button>
         </el-form-item>
       </el-form>
     </ContentWrap>
@@ -110,11 +106,5 @@ const handleQuery = () => {
   getList()
 }
 
-/** 重置按钮操作 */
-const resetQuery = () => {
-  queryFormRef.value.resetFields()
-  handleQuery()
-}
-
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 </script>

src/views/iot/device/device/detail/DeviceDetailsInfo.vue

 <!-- 设备信息 -->
 <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.onlineTime) }}
-        </el-descriptions-item>
-        <el-descriptions-item label="当前状态">
-          <dict-tag :type="DICT_TYPE.IOT_DEVICE_STATE" :value="device.status" />
-        </el-descriptions-item>
-        <el-descriptions-item label="最后离线时间" :span="3">
-          {{ formatDate(device.offlineTime) }}
-        </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>
+    <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="当前状态">
+        <dict-tag :type="DICT_TYPE.IOT_DEVICE_STATE" :value="device.state" />
+      </el-descriptions-item>
+      <el-descriptions-item label="激活时间">
+        {{ formatDate(device.activeTime) }}
+      </el-descriptions-item>
+      <el-descriptions-item label="最后上线时间">
+        {{ formatDate(device.onlineTime) }}
+      </el-descriptions-item>
+      <el-descriptions-item label="最后离线时间" :span="3">
+        {{ formatDate(device.offlineTime) }}
+      </el-descriptions-item>
+      <el-descriptions-item label="MQTT 连接参数">
+        <el-button type="primary" @click="openMqttParams">查看</el-button>
+      </el-descriptions-item>
+    </el-descriptions>
   </ContentWrap>
+
+  <!-- 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>
+
+  <!-- TODO 待开发：设备标签 -->
+  <!-- TODO 待开发：设备地图 -->
 </template>
 <script setup lang="ts">
 import { DICT_TYPE } from '@/utils/dict'
@@ -90,7 +91,6 @@ const message = useMessage() // 消息提示
 const { product, device } = defineProps<{ product: ProductVO; device: DeviceVO }>() // 定义 Props
 const emit = defineEmits(['refresh']) // 定义 Emits
 
-const activeNames = ref(['basicInfo']) // 展示的折叠面板
 const mqttDialogVisible = ref(false) // 定义 MQTT 弹框的可见性
 const mqttParams = ref({
   mqttClientId: '',

src/views/iot/device/device/detail/DeviceDetailsModel.vue

@@ -41,9 +41,9 @@
         <ContentWrap>
           <el-tabs>
             <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-              <el-table-column label="属性标识符" align="center" prop="identifier" />
-              <el-table-column label="属性名称" align="center" prop="name" />
-              <el-table-column label="数据类型" align="center" prop="dataType" />
+              <el-table-column label="属性标识符" align="center" prop="property.identifier" />
+              <el-table-column label="属性名称" align="center" prop="property.name" />
+              <el-table-column label="数据类型" align="center" prop="property.dataType" />
               <el-table-column label="属性值" align="center" prop="value" />
               <el-table-column
                 label="更新时间"
@@ -57,9 +57,9 @@
                   <el-button
                     link
                     type="primary"
-                    @click="openDetail(props.device.id, scope.row.identifier)"
+                    @click="openDetail(props.device.id, scope.row.property.identifier)"
                   >
-                    历史
+                    查看数据
                   </el-button>
                 </template>
               </el-table-column>

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

 <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="所属分类">{{ product.categoryName }}</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="[DeviceTypeEnum.DEVICE, DeviceTypeEnum.GATEWAY].includes(product.deviceType)"
-        >
-          <dict-tag :type="DICT_TYPE.IOT_NET_TYPE" :value="product.netType" />
-        </el-descriptions-item>
-        <el-descriptions-item
-          label="接入网关协议"
-          v-if="product.deviceType === DeviceTypeEnum.GATEWAY_SUB"
-        >
-          <dict-tag :type="DICT_TYPE.IOT_PROTOCOL_TYPE" :value="product.protocolType" />
-        </el-descriptions-item>
-        <el-descriptions-item label="产品描述">{{ product.description }}</el-descriptions-item>
-      </el-descriptions>
-    </el-collapse>
+    <el-descriptions :column="3" title="产品信息">
+      <el-descriptions-item label="产品名称">{{ product.name }}</el-descriptions-item>
+      <el-descriptions-item label="所属分类">{{ product.categoryName }}</el-descriptions-item>
+      <el-descriptions-item label="设备类型">
+        <dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :value="product.deviceType" />
+      </el-descriptions-item>
+      <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="[DeviceTypeEnum.DEVICE, DeviceTypeEnum.GATEWAY].includes(product.deviceType)"
+      >
+        <dict-tag :type="DICT_TYPE.IOT_NET_TYPE" :value="product.netType" />
+      </el-descriptions-item>
+      <el-descriptions-item
+        label="接入网关协议"
+        v-if="product.deviceType === DeviceTypeEnum.GATEWAY_SUB"
+      >
+        <dict-tag :type="DICT_TYPE.IOT_PROTOCOL_TYPE" :value="product.protocolType" />
+      </el-descriptions-item>
+      <el-descriptions-item label="产品描述">{{ product.description }}</el-descriptions-item>
+    </el-descriptions>
   </ContentWrap>
 </template>
 <script setup lang="ts">
@@ -42,7 +40,4 @@ import { DeviceTypeEnum, ProductVO } from '@/api/iot/product/product'
 import { formatDate } from '@/utils/formatTime'
 
 const { product } = defineProps<{ product: ProductVO }>()
-
-// 展示的折叠面板
-const activeNames = ref(['basicInfo'])
 </script>