feat: 设备详情

src/controller/iot/device.ts

@@ -53,7 +53,8 @@ export class DeviceContriller {
   }
 
   static async byId (id: string) {
-    return await getDeviceById(id)
+    const { data } = await getDeviceById(id)
+    return data
   }
 
   static async pageSub (id: string, params: IOT.API.DEVICE.QueryPamars) {

src/pages/Iot/device/components/overview.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="overview" >
+    <a-row>
+      <a-col><a-space><span>{{state.deviceDetail?.deviceCode}}</span><a-button type="primary" @click="state.visible = true" >修改</a-button></a-space></a-col>
+    </a-row>
+  </div>
+
+  <modal-pro
+    label="hellp"
+    :visible="state.visible"
+  >
+
+  </modal-pro>
+</template>
+
+<script lang="ts" setup >
+import { DeviceContriller } from '@/controller'
+import { onMounted, reactive } from 'vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+
+const deviceId = route.query.id as string
+
+const state = reactive<{
+  deviceDetail: IOT.API.DEVICE.Device | null,
+  visible: boolean
+}>({
+  deviceDetail: null,
+  visible: false
+})
+
+onMounted(async () => {
+  state.deviceDetail = await DeviceContriller.byId(deviceId)
+})
+
+</script>
+
+<style lang="less" scoped >
+</style>

src/pages/Iot/device/detail.vue

@@ -0,0 +1,52 @@
+<template>
+  <a-card>
+    <a-tabs v-model:activeKey="state.tabsActive">
+      <a-tab-pane
+        v-for="item in tabs"
+        :key="item.key"
+        :tab="item.name"
+      >
+        <over-view />
+      </a-tab-pane>
+    </a-tabs>
+  </a-card>
+</template>
+
+<script lang="ts" setup >
+import { reactive } from 'vue'
+import OverView from './components/overview.vue'
+const tabs = [
+  {
+    name: '概述',
+    key: '1'
+  },
+  {
+    name: '云端下发',
+    key: '2'
+  },
+  {
+    name: '设备影子',
+    key: '3'
+  },
+  {
+    name: '消息跟踪',
+    key: '4'
+  },
+  {
+    name: '子设备',
+    key: '5'
+  },
+  {
+    name: '标签',
+    key: '6'
+  }
+]
+
+const state = reactive({
+  tabsActive: '1'
+})
+</script>
+
+<style lang="less" scoped >
+
+</style>

src/pages/Iot/device/index.vue

@@ -56,7 +56,7 @@
         </template>
         <template v-if="column.key === 'action'">
             <a-space>
-              <a>查看</a>
+              <a @click="goDetailPage(record.id)">查看</a>
               <a>调试</a>
               <a>冻结</a>
                 <a-popconfirm
@@ -118,8 +118,10 @@ import { DeviceContriller, ModelController } from '@/controller/index'
 import { onMounted, reactive } from 'vue'
 import { Form, message } from 'ant-design-vue'
 import { DeviceAuthTypeEnum } from '@/enum/common'
+import { useRouter } from 'vue-router'
 
 const useForm = Form.useForm
+const router = useRouter()
 
 const columns = [
 
@@ -212,6 +214,10 @@ const { resetFields: resetFieldsDevice, validate: validateDevice, validateInfos:
   deviceCode: [{ required: true, message: '请填写设备码' }]
 }))
 
+const goDetailPage = (id: string) => {
+  router.push({ path: '/device/detail', query: { id } })
+}
+
 const delDevice = async (id: string) => {
   await DeviceContriller.del(id)
   getDevicePage()
@@ -222,9 +228,12 @@ const ok = () => {
     message.warn('两次密匙输入不同')
     return
   }
-  validateDevice().then(async () => {
+  validateDevice().then(async (r) => {
+    console.log('validateDevice:', r)
+
     await DeviceContriller.post(deviceState)
     state.visible = false
+    getDevicePage()
   })
 }
 

src/router/index.ts

@@ -41,6 +41,12 @@ const routes: Array<ROUTER.RoutesProps> = [
             name: '所有设备',
             component: () => import('@/pages/iot/device/index.vue')
           },
+          {
+            path: '/device/detail',
+            name: '设备详情',
+            hidden: true,
+            component: () => import('@/pages/iot/device/detail.vue')
+          },
           {
             path: '/device/group',
             name: '群组',