【修改功能】IOT：设备历史数据展示

src/api/iot/device/index.ts

@@ -93,11 +93,11 @@ export const DeviceApi = {
 
   // 获取设备属性最新数据
   getDevicePropertiesLatestData: async (params: any) => {
-    return await request.get({ url: `/iot/device/data/latest-data`, params })
+    return await request.get({ url: `/iot/device/data/latest`, params })
   },
 
   // 获取设备属性历史数据
   getDevicePropertiesHistoryData: async (params: any) => {
-    return await request.get({ url: `/iot/device/data/history-data`, params })
+    return await request.get({ url: `/iot/device/data/history`, params })
   }
 }

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

@@ -1,7 +1,7 @@
 <template>
   <ContentWrap>
-    <el-tabs>
+    <el-tabs v-model="activeTab">
-      <el-tab-pane label="运行状态">
+      <el-tab-pane label="运行状态" name="status">
         <ContentWrap>
           <!-- 搜索工作栏 -->
           <el-form
@@ -68,10 +68,10 @@
           <DeviceDataDetail ref="detailRef" :device="device" :product="product" />
         </ContentWrap>
       </el-tab-pane>
-      <el-tab-pane label="事件管理">
+      <el-tab-pane label="事件管理" name="event">
         <p>事件管理</p>
       </el-tab-pane>
-      <el-tab-pane label="服务调用">
+      <el-tab-pane label="服务调用" name="service">
         <p>服务调用</p>
       </el-tab-pane>
     </el-tabs>
@@ -94,6 +94,7 @@ const queryParams = reactive({
 })
 
 const queryFormRef = ref() // 搜索的表单
+const activeTab = ref('status') // 默认选中的标签
 
 /** 查询列表 */
 const getList = async () => {

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

@@ -6,13 +6,13 @@
     @refresh="getDeviceData(id)"
   />
   <el-col>
-    <el-tabs>
+    <el-tabs v-model="activeTab">
-      <el-tab-pane label="设备信息">
+      <el-tab-pane label="设备信息" name="info">
-        <DeviceDetailsInfo :product="product" :device="device" />
+        <DeviceDetailsInfo v-if="activeTab === 'info'" :product="product" :device="device" />
       </el-tab-pane>
       <el-tab-pane label="Topic 列表" />
-      <el-tab-pane label="物模型数据">
+      <el-tab-pane label="物模型数据" name="model">
-        <DeviceDetailsModel :product="product" :device="device" />
+        <DeviceDetailsModel v-if="activeTab === 'model'" :product="product" :device="device" />
       </el-tab-pane>
       <el-tab-pane label="子设备管理" v-if="product.deviceType === DeviceTypeEnum.GATEWAY" />
       <el-tab-pane label="设备影子" />
@@ -35,6 +35,7 @@ const id = Number(route.params.id) // 编号
 const loading = ref(true) // 加载中
 const product = ref<ProductVO>({} as ProductVO) // 产品详情
 const device = ref<DeviceVO>({} as DeviceVO) // 设备详情
+const activeTab = ref('info') // 默认激活的标签页
 
 /** 获取设备详情 */
 const getDeviceData = async (id: number) => {
@@ -51,11 +52,8 @@ const getDeviceData = async (id: number) => {
 /** 获取产品详情 */
 const getProductData = async (id: number) => {
   product.value = await ProductApi.getProduct(id)
-  console.log(product.value)
 }
 
-/** 获取物模型 */
-
 /** 初始化 */
 const { delView } = useTagsViewStore() // 视图操作
 const { currentRoute } = useRouter() // 路由