【功能修改】IoT：设备详情的代码优化

Author: YunaiV

src/api/iot/device/index.ts renamed to src/api/iot/device/device/index.ts

@@ -637,7 +637,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
           hidden: true,
           activeMenu: '/iot/device'
         },
-        component: () => import('@/views/iot/device/detail/index.vue')
+        component: () => import('@/views/iot/device/device/detail/index.vue')
       }
     ]
   }

src/router/modules/remaining.ts

@@ -85,7 +85,7 @@
   </Dialog>
 </template>
 <script setup lang="ts">
-import { DeviceApi, DeviceVO } from '@/api/iot/device'
+import { DeviceApi, DeviceVO } from '@/api/iot/device/device'
 import { DeviceGroupApi } from '@/api/iot/device/group'
 import { DeviceTypeEnum, ProductApi, ProductVO } from '@/api/iot/product/product'
 import { UploadImg } from '@/components/UploadFile'

src/views/iot/device/device/DeviceForm.vue

@@ -26,7 +26,7 @@
 </template>
 
 <script setup lang="ts">
-import { DeviceApi } from '@/api/iot/device'
+import { DeviceApi } from '@/api/iot/device/device'
 import { DeviceGroupApi } from '@/api/iot/device/group'
 
 defineOptions({ name: 'IoTDeviceGroupForm' })

src/views/iot/device/device/DeviceGroupForm.vue

@@ -53,10 +53,9 @@
   </Dialog>
 </template>
 <script setup lang="ts">
-import { DeviceApi, DeviceHistoryDataVO, DeviceVO } from '@/api/iot/device'
+import { DeviceApi, DeviceHistoryDataVO, DeviceVO } from '@/api/iot/device/device'
 import { ProductVO } from '@/api/iot/product/product'
 import { beginOfDay, dateFormatter, endOfDay, formatDate } from '@/utils/formatTime'
-import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 
 const props = defineProps<{ product: ProductVO; device: DeviceVO }>()
 

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

@@ -35,24 +35,22 @@
   <DeviceForm ref="formRef" @success="emit('refresh')" />
 </template>
 <script setup lang="ts">
-import { ref } from 'vue'
-import DeviceForm from '@/views/iot/device/DeviceForm.vue'
+import DeviceForm from '@/views/iot/device/device/DeviceForm.vue'
 import { ProductVO } from '@/api/iot/product/product'
-import { DeviceVO } from '@/api/iot/device'
-import { useRouter } from 'vue-router'
+import { DeviceVO } from '@/api/iot/device/device'
 
 const message = useMessage()
 const router = useRouter()
 
-// 操作修改
+const { product, device } = defineProps<{ product: ProductVO; device: DeviceVO }>()
+const emit = defineEmits(['refresh'])
+
+/** 操作修改 */
 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'])
-
 /** 复制到剪贴板方法 */
 const copyToClipboard = async (text: string) => {
   try {
@@ -63,11 +61,7 @@ const copyToClipboard = async (text: string) => {
   }
 }
 
-/**
- * 跳转到产品详情页面
- *
- * @param productId 产品 ID
- */
+/** 跳转到产品详情页面 */
 const goToProductDetail = (productId: number) => {
   router.push({ name: 'IoTProductDetail', params: { id: productId } })
 }

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

@@ -79,16 +79,14 @@
   </ContentWrap>
 </template>
 <script setup lang="ts">
-import { ref } from 'vue'
 import { DICT_TYPE } from '@/utils/dict'
 import { ProductVO } from '@/api/iot/product/product'
 import { formatDate } from '@/utils/formatTime'
-import { DeviceVO } from '@/api/iot/device'
+import { DeviceVO } from '@/api/iot/device/device'
 
 const message = useMessage() // 消息提示
 
 const { product, device } = defineProps<{ product: ProductVO; device: DeviceVO }>() // 定义 Props
-
 const emit = defineEmits(['refresh']) // 定义 Emits
 
 const activeNames = ref(['basicInfo']) // 展示的折叠面板

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

@@ -79,7 +79,7 @@
 </template>
 <script setup lang="ts">
 import { ProductVO } from '@/api/iot/product/product'
-import { DeviceApi, DeviceDataVO, DeviceVO } from '@/api/iot/device'
+import { DeviceApi, DeviceDataVO, DeviceVO } from '@/api/iot/device/device'
 import { dateFormatter } from '@/utils/formatTime'
 import DeviceDataDetail from './DeviceDataDetail.vue'
 

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

@@ -21,17 +21,17 @@
 </template>
 <script lang="ts" setup>
 import { useTagsViewStore } from '@/store/modules/tagsView'
-import { DeviceApi, DeviceVO } from '@/api/iot/device'
+import { DeviceApi, DeviceVO } from '@/api/iot/device/device'
 import { DeviceTypeEnum, ProductApi, ProductVO } from '@/api/iot/product/product'
-import DeviceDetailsHeader from '@/views/iot/device/detail/DeviceDetailsHeader.vue'
-import DeviceDetailsInfo from '@/views/iot/device/detail/DeviceDetailsInfo.vue'
-import DeviceDetailsModel from '@/views/iot/device/detail/DeviceDetailsModel.vue'
+import DeviceDetailsHeader from './DeviceDetailsHeader.vue'
+import DeviceDetailsInfo from './DeviceDetailsInfo.vue'
+import DeviceDetailsModel from './DeviceDetailsModel.vue'
 
 defineOptions({ name: 'IoTDeviceDetail' })
 
 const route = useRoute()
 const message = useMessage()
-const id = route.params.id // 编号
+const id = Number(route.params.id) // 将字符串转换为数字
 const loading = ref(true) // 加载中
 const product = ref<ProductVO>({} as ProductVO) // 产品详情
 const device = ref<DeviceVO>({} as DeviceVO) // 设备详情
@@ -42,7 +42,6 @@ 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
@@ -64,5 +63,6 @@ onMounted(async () => {
     return
   }
   await getDeviceData(id)
+  activeTab.value = route.query.tab as string
 })
 </script>

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

@@ -242,10 +242,10 @@
                   class="flex-1 !px-2 !h-[32px] !ml-[10px] text-[13px]"
                   type="info"
                   plain
-                  @click="openLog(item.id)"
+                  @click="openModel(item.id)"
                 >
                   <Icon icon="ep:tickets" class="mr-1" />
-                  日志
+                  数据
                 </el-button>
                 <div class="mx-[10px] h-[20px] w-[1px] bg-[#dcdfe6]"></div>
                 <el-button
@@ -321,7 +321,7 @@
           >
             查看
           </el-button>
-          <el-button link type="primary" @click="openLog(scope.row.id)"> 日志 </el-button>
+          <el-button link type="primary" @click="openModel(scope.row.id)"> 日志 </el-button>
           <el-button
             link
             type="primary"
@@ -360,7 +360,7 @@
 <script setup lang="ts">
 import { DICT_TYPE, getIntDictOptions, getDictLabel } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
-import { DeviceApi, DeviceVO, DeviceStatusEnum } from '@/api/iot/device'
+import { DeviceApi, DeviceVO, DeviceStatusEnum } from '@/api/iot/device/device'
 import DeviceForm from './DeviceForm.vue'
 import { ProductApi, ProductVO } from '@/api/iot/product/product'
 import { DeviceGroupApi, DeviceGroupVO } from '@/api/iot/device/group'
@@ -483,9 +483,9 @@ const openGroupForm = () => {
   groupFormRef.value.open(selectedIds.value)
 }
 
-/** 打开日志 */
-const openLog = (id: number) => {
-  push({ name: 'IoTDeviceDetail', params: { id }, query: { tab: 'log' } })
+/** 打开物模型数据 */
+const openModel = (id: number) => {
+  push({ name: 'IoTDeviceDetail', params: { id }, query: { tab: 'model' } })
 }
 
 /** 初始化 **/