perf(iot产品与设备模块): 优化产品与设备的增删改查功能

1.优化产品新增功能
2.优化设备新增功能
3.新增产品详情功能
4.新增设备详情功能

src/api/product.ts

@@ -47,7 +47,7 @@ export function queryProductListAll(data: ProductRecord) {
 }
 
 // 查看详情
-export function queryProductDetail(id: number) {
+export function queryProductDetail(id: number | undefined) {
   return axios.get(`/api/rest/product/${id}`);
 }
 

src/router/routes/modules/iot.ts

@@ -34,7 +34,18 @@ const IOT: AppRouteRecordRaw = {
         requiresAuth: true,
         permissions: ['*'],
       },
-    }
+    },
+    {
+      path: 'product/:id',
+      name: 'productDetail',
+      component: () => import('@/views/iot/product/components/product-detail.vue'),
+      meta: {
+        title: '产品详情',
+        requiresAuth: true,
+        showInMenu: false,
+        permissions: ['*'],
+      },
+    },
   ],
 };
 

src/views/iot/device/components/device-detail.vue

@@ -0,0 +1,70 @@
+<template>
+  <a-button
+    type="outline"
+    size="small"
+    status="success"
+    style="padding: 7px; margin-right: 10px"
+    @click="handleClick"
+  >
+    <template #icon><icon-list /></template>
+    详情
+  </a-button>
+
+  <a-modal
+    width="600px"
+    :visible="visible"
+    @cancel="handleCancel"
+  >
+    <template #title>设备详情</template>
+    <a-descriptions style="margin-top: 20px" :data="formData" size="large" :title=formData.name :column="1">
+      <a-descriptions-item label="产品名称">{{formData.productId}}</a-descriptions-item>
+      <a-descriptions-item label="硬件版本">{{formData.hardwareVersion}}</a-descriptions-item>
+      <a-descriptions-item label="固件版本">{{formData.firmwareVersion}}</a-descriptions-item>
+      <a-descriptions-item label="扩展属性">{{formData.extendParams}}</a-descriptions-item>
+    </a-descriptions>
+
+    <template #footer>
+<!--      <a-button class="editor-button"  @click="handleCancel">取消</a-button>-->
+      <a-button class="editor-button"  type="primary" @click="handleCancel">确定</a-button>
+    </template>
+  </a-modal>
+</template>
+
+<script lang="ts" setup>
+  import useVisible from '@/hooks/visible';
+  import {  defineEmits, PropType, ref } from 'vue';
+  import { DeviceCreateRecord } from '@/api/device';
+  import '@wangeditor/editor/dist/css/style.css'
+
+
+  const props = defineProps({
+    prem: {
+      type: Object as PropType<DeviceCreateRecord>,
+    },
+    isCreate: Boolean,
+  });
+  const emit = defineEmits(['refresh']);
+  const { visible, setVisible } = useVisible(false);
+
+  const formData = ref<any>({
+    ...props.prem,
+  });
+
+
+  // 组件被点击
+  const handleClick = () => {
+    setVisible(true);
+  };
+
+  // 关闭
+  const handleCancel = async () => {
+    setVisible(false);
+  };
+
+</script>
+
+<style scoped>
+  .editor-button{
+    position: static
+  }
+</style>

src/views/iot/device/index.vue

@@ -162,16 +162,17 @@
           {{ record.online == true? '是' : '否' }}
         </template>
         <template #operations="{ record }">
-          <a-button
+<!--          <a-button-->
-            type="outline"
+<!--            type="outline"-->
-            size="small"
+<!--            size="small"-->
-            status="success"
+<!--            status="success"-->
-            style="padding: 7px; margin-right: 10px"
+<!--            style="padding: 7px; margin-right: 10px"-->
-            @click="openDetail(record.id)"
+<!--            @click="openDetail(record.id)"-->
-          >
+<!--          >-->
-            <template #icon><icon-list /></template>
+<!--            <template #icon><icon-list /></template>-->
-            详情
+<!--            详情-->
-          </a-button>
+<!--          </a-button>-->
+          <DeviceDetail :prem="record" />
           <DeviceEdit
             ref="editUserRef"
             :prem="record"
@@ -222,6 +223,7 @@
   import { deleteDevice, DeviceRecord, queryDeviceList } from '@/api/device';
   import DeviceEdit from '@/views/iot/device/components/device-edit.vue';
   import BulletinEdit from '@/views/system/bulletin/components/bulletin-edit.vue';
+  import DeviceDetail from '@/views/iot/device/components/device-detail.vue';
 
   const generateFormModel = () => {
     return {

src/views/iot/product/components/product-detail.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="container">
+    <Breadcrumb :items="['物联网管理', '产品管理','产品详情']" />
+    <a-card class="general-card" title=" ">
+      <div class="announcement-detail">
+        <a-descriptions :data="renderData" size="large" title="产品详情" bordered >
+          <a-descriptions-item label="产品名称">{{renderData.name}}</a-descriptions-item>
+          <a-descriptions-item label="产品类型">{{renderData.productType}}</a-descriptions-item>
+          <a-descriptions-item label="产品型号">{{renderData.model}}</a-descriptions-item>
+          <a-descriptions-item label="通讯协议">{{renderData.link}}</a-descriptions-item>
+          <a-descriptions-item label="备注">{{renderData.remark}}</a-descriptions-item>
+          <a-descriptions-item label="创建时间">{{dayjs(renderData.createTime).format('YYYY-MM-DD HH:mm:ss')}}</a-descriptions-item>
+          <a-descriptions-item label="扩展属性">
+            <a-table :columns="columns" :data="renderData.params" row-key="id" :pagination="false"/>
+          </a-descriptions-item>
+        </a-descriptions>
+      </div>
+    </a-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import dayjs from 'dayjs';
+  import { useRoute } from 'vue-router';
+  import { onMounted, ref } from 'vue';
+  import { queryProductDetail } from '@/api/product';
+
+  const route = useRoute();
+  const id = Number(route.params.id);
+  const columns=[
+    {
+      title: '参数名称',
+      dataIndex: 'name',
+      slotName: 'name',
+    },
+    {
+      title: '参数标识',
+      dataIndex: 'identifier',
+      slotName: 'identifier',
+    },
+    {
+      title: '数据类型',
+      dataIndex: 'dataType',
+      slotName: 'dataType',
+    },
+    {
+      title: '参数类型',
+      dataIndex: 'type',
+      slotName: 'type',
+    },
+  ];
+  const renderData = ref<any>(
+    {
+      name: '产品名称',
+      productType: '设备',
+      model: '123456',
+      link: 'TCP',
+      remark: '123456',
+      createTime: '2023-08-08 10:10:10',
+      params:[
+        {
+          name:'设备名称',
+          identifier:'1.0.0',
+          dataType:'1.0.0',
+          type:'123456',
+        },
+        {
+          name:'设备名称',
+          identifier:'1.0.0',
+          dataType:'1.0.0',
+          type:'123456',
+        },
+        {
+          name:'设备名称',
+          identifier:'1.0.0',
+          dataType:'1.0.0',
+          type:'123456',
+        },
+      ]
+    },
+  );
+  // const fetchData = async (Id: number) => {
+  //   const res = await queryProductDetail(Id);
+  //   renderData.value = res.data;
+  // };
+  // onMounted(() => {
+  //   fetchData(id);
+  // });
+</script>
+
+
+<style scoped>
+  .container {
+    padding: 0 20px 20px 20px;
+  }
+
+  .announcement-detail {
+    min-width: 800px;
+    max-width: 800px;
+    margin: auto;
+    padding: 20px;
+    border: 1px solid #ddd;
+    background-color: #fff; /* 白色背景，与淡蓝色背景区分开来 */
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+
+  h1 {
+    font-size: 24px;
+    margin-bottom: 10px;
+  }
+
+
+  .meta span {
+    margin-right: 20px;
+  }
+
+
+  .attachments li {
+    margin-bottom: 10px;
+  }
+
+  .attachments a {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    color: #1890ff;
+    text-decoration: none;
+  }
+
+  .attachments a:hover {
+    text-decoration: underline;
+  }
+</style>
+
+

src/views/iot/product/index.vue

@@ -173,6 +173,7 @@
             详情
           </a-button>
           <ProductEdit
+            :id="record.id"
             ref="editUserRef"
             :prem="record"
             :is-create="false"
@@ -332,7 +333,7 @@
   // 打开详情
   function openDetail(id:number): void{
     const url = router.resolve({
-      name: 'Detail',
+      name: 'productDetail',
       params: {id}
     }).href;
     router.push(url);