feat: 产品详情(未完成)

src/api/iot/model.ts

@@ -28,6 +28,11 @@ export const delModel = (id: string) => {
   })
 }
 
+/**
+ * 此函数使用提供的数据向“/model”端点发送 POST 请求。
+ * @param data - `data` 参数是一个 `IOT.API.MODEL.Model` 类型的对象，其中包含创建新模型所需的信息。该对象可能包含模型名称、描述和任何其他相关详细信息等属性。
+ * @returns `addModel` 函数返回一个解析为字符串的 Promise。该字符串是在使用提供的 data 对象向 model 端点发出 POST 请求后服务器的响应。
+ */
 export const addModel = (data: IOT.API.MODEL.Model) => {
   return request<string>({
     url: '/model',
@@ -35,3 +40,10 @@ export const addModel = (data: IOT.API.MODEL.Model) => {
     data
   })
 }
+
+export const getModelById = (id: string) => {
+  return request<IOT.API.MODEL.ModelDot>({
+    url: `/model/${id}`,
+    method: 'GET'
+  })
+}

src/controller/iot/model.ts

@@ -1,5 +1,6 @@
-import { addModel, delModel, getModel } from '@/api/iot/model'
+import { addModel, delModel, getModel, getModelById } from '@/api/iot/model'
 import { message } from 'ant-design-vue'
+
 export class ModelController {
   static list () {
 
@@ -18,6 +19,11 @@ export class ModelController {
 
   }
 
+  static async detail (id: string) {
+    const { data } = await getModelById(id)
+    return data
+  }
+
   static async del (id: string) {
     const { data } = await delModel(id)
     if (data) {

src/layout/sider.vue

@@ -18,7 +18,7 @@
             >
 
             <template v-for="item in appRouter.router.sider.route" :key="item.path">
-              <a-sub-menu  v-if="item.children" :key="item.path" >
+              <a-sub-menu  v-if="item.children && item.children.filter(_ => !_.hidden)" :key="item.path" >
                 <template #title>
                   <user-outlined />
                   <span>
@@ -29,7 +29,6 @@
                   <user-outlined />{{_.name}}
                 </a-menu-item>
               </a-sub-menu>
-              <!-- v-if="!item.children"  :key="item.path" -->
               <a-menu-item v-if="!item.children"  :key="item.path"  @click="changeRoute(item)" >
                 <user-outlined />
                 <span>{{item.name}}</span>

src/pages/Iot/model/detail.vue

@@ -0,0 +1,55 @@
+<template>
+  <a-card
+
+  >
+  <!--  -->
+  <template #title>
+    <a-row :gutter="[8, 8]">
+      <a-col> <h1>{{state.model?.modelLabel}}</h1> </a-col>
+      <a-col> <span class="subtitle" >ID: {{state.model?.id}}</span> </a-col>
+    </a-row>
+  </template>
+  <a-descriptions
+    :column="{ xs: 1, sm: 1, md: 2, lg: 2, xl: 2}"
+    :labelStyle="{color: '#8a8e99'}"
+    :contentStyle="{fontSize: '12px'}"
+  >
+        <a-descriptions-item label="产品名称">{{state.model?.modelLabel}}</a-descriptions-item>
+        <a-descriptions-item label="设备类型">{{state.model?.deviceType}}</a-descriptions-item>
+        <a-descriptions-item label="协议类型">{{state.model?.transportType}}</a-descriptions-item>
+        <a-descriptions-item label="数据类型">{{state.model?.payloadType}}</a-descriptions-item>
+        <a-descriptions-item label="产品描述">{{state.model?.modelDescription}}</a-descriptions-item>
+  </a-descriptions>
+  </a-card>
+</template>
+
+<script lang="ts" setup >
+import { ModelController } from '@/controller'
+import { onMounted, reactive } from 'vue'
+import { useRoute } from 'vue-router'
+
+const queryParams = useRoute().query as {id: string}
+
+const state = reactive<{
+  model: IOT.API.MODEL.ModelDot | null
+}>({
+  model: null
+})
+
+const getModelById = async (id: string) => {
+  state.model = await ModelController.detail(id)
+}
+
+onMounted(() => {
+  getModelById(queryParams.id)
+})
+
+</script>
+
+<style lang="less" scoped >
+@import "~@/styles/theme.less";
+.subtitle {
+  font-size: 12px;
+  color: @label-color;
+}
+</style>

src/pages/Iot/model/index.vue

@@ -31,7 +31,7 @@
       <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'action'">
             <a-space>
-              <a href="#">查看</a>
+              <a href="#" @click="goDetailPage(record.id)" >查看</a>
                 <a-popconfirm
                   title="确实要删除吗？"
                   ok-text="确定"
@@ -83,6 +83,7 @@ import { CommonController, ModelController } from '@/controller/index'
 import { onMounted, reactive } from 'vue'
 import { computed } from '@vue/reactivity'
 import { Form } from 'ant-design-vue'
+import { useRouter } from 'vue-router'
 
 const columns = [
   {
@@ -137,6 +138,8 @@ const modalTitle = computed(() => state.opraState === 'add' ? '新增产品' : '
 
 const useForm = Form.useForm
 
+const router = useRouter()
+
 const modelRef = reactive({
   modelLabel: '',
   transportType: '',
@@ -161,6 +164,10 @@ const ok = () => {
   })
 }
 
+const goDetailPage = (id: string) => {
+  router.push({ path: '/product/detail', query: { id } })
+}
+
 const confirmDel = async (id: string) => {
   await ModelController.del(id)
   getModel()

src/router/index.ts

@@ -17,6 +17,12 @@ const routes: Array<ROUTER.RoutesProps> = [
         path: '/product',
         name: '产品',
         component: () => import('@/pages/iot/model/index.vue')
+      },
+      {
+        path: '/product/detail',
+        name: '产品详情',
+        hidden: true,
+        component: () => import('@/pages/iot/model/detail.vue')
       }
       // {
       //   path: '/deviceAccess',

src/styles/theme.less

@@ -2,4 +2,9 @@
 
 
 @primary-color: red;
-@border-radius-base: 10px;
+@border-radius-base: 10px;
+
+
+
+
+@label-color: #8a8e99;