From 7328db1a231243e980f30c981e3e50db87d7000d Mon Sep 17 00:00:00 2001
From: Kven <2955163637@qq.com>
Date: Mon, 24 Mar 2025 20:47:06 +0800
Subject: [PATCH] =?UTF-8?q?feat(iot):=20=E4=BC=98=E5=8C=96=E8=AE=BE?=
 =?UTF-8?q?=E5=A4=87=E5=92=8C=E4=BA=A7=E5=93=81=E8=AF=A6=E6=83=85=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

-调整设备和产品详情页面的布局结构
- 添加设备和产品预览图片
- 优化事件记录展示方式
- 增加设备编辑功能
- 重构事件记录查询接口
---
 package.json                                  |   1 +
 src/api/device.ts                             |   4 +-
 src/api/tsl.ts                                |   8 +-
 .../iot/device/components/device-detail.vue   | 147 +++++++++++++-----
 .../iot/device/components/device-edit.vue     |  39 ++++-
 src/views/iot/device/index.vue                |   2 +-
 src/views/iot/deviceMap/index.vue             |  45 +++---
 .../iot/product/components/product-detail.vue |  74 +++++----
 .../iot/product/components/product-edit.vue   |   8 +-
 9 files changed, 214 insertions(+), 114 deletions(-)

diff --git a/package.json b/package.json
index 92a666e..872d270 100644
--- a/package.json
+++ b/package.json
@@ -55,6 +55,7 @@
     "vue": "^3.2.40",
     "vue-echarts": "^6.2.3",
     "vue-i18n": "^9.2.2",
+    "vue-json-pretty": "^2.4.0",
     "vue-quill-editor": "^3.0.6",
     "vue-router": "^4.0.14",
     "xlsx": "^0.18.5"
diff --git a/src/api/device.ts b/src/api/device.ts
index c699379..9139783 100644
--- a/src/api/device.ts
+++ b/src/api/device.ts
@@ -11,11 +11,13 @@ export interface DeviceRecord {
   pageable?: string;
   longitude?: number;
   latitude?: number;
-  icon?: string;
+  icon?: object;
   hardwareVersion?: string;
   firmwareVersion?: string;
   productName?: string;
   id?: number;
+  warning?: string;
+  iconId?: number;
 }
 
 export interface DeviceCreateRecord {
diff --git a/src/api/tsl.ts b/src/api/tsl.ts
index c655bf7..7e5e29a 100644
--- a/src/api/tsl.ts
+++ b/src/api/tsl.ts
@@ -52,12 +52,8 @@ export function queryEventList(data: eventRecord) {
 }
 
 // 事件记录
-export function queryEventLog(data: eventRecord) {
-  return axios({
-    url: '/api/rest/tsl/event/log',
-    method: 'get',
-    params: data,
-  });
+export function queryEventLog(clientId: number) {
+  return axios.get(`/api/rest/tsl/event/${clientId}/log`)
 }
 
 export function createServe(data: any) {
diff --git a/src/views/iot/device/components/device-detail.vue b/src/views/iot/device/components/device-detail.vue
index 56d02e5..385762c 100644
--- a/src/views/iot/device/components/device-detail.vue
+++ b/src/views/iot/device/components/device-detail.vue
@@ -2,9 +2,11 @@
   <div class="container">
     <Breadcrumb :items="['物联网管理', '设备管理', '设备详情']" />
     <a-card class="general-card" title=" ">
-      <a-descriptions v-model="renderData" size="large">
-        <template #title
-          ><h3 style="margin-top: -15px"
+      <a-row :gutter="16">
+        <a-col :span="16">
+          <a-descriptions v-model="renderData" size="large">
+            <template #title
+            ><h3 style="margin-top: -15px"
             ><a-button
               class="nav-btn"
               type="outline"
@@ -13,26 +15,31 @@
             >
               <icon-undo />
             </a-button>
-            设备详情</h3
-          >
-        </template>
-        <a-descriptions-item label="设备名称">{{
-          renderData.name
-        }}</a-descriptions-item>
-        <a-descriptions-item label="硬件版本">{{
-          renderData.hardwareVersion
-        }}</a-descriptions-item>
-        <a-descriptions-item label="固件版本">{{
-          renderData.firmwareVersion
-        }}</a-descriptions-item>
-        <a-descriptions-item label="所属产品">{{
-          renderData.productName
-        }}</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>
+              设备详情</h3
+            >
+            </template>
+            <a-descriptions-item label="设备名称">{{
+                renderData.name
+              }}</a-descriptions-item>
+            <a-descriptions-item label="硬件版本">{{
+                renderData.hardwareVersion
+              }}</a-descriptions-item>
+            <a-descriptions-item label="固件版本">{{
+                renderData.firmwareVersion
+              }}</a-descriptions-item>
+            <a-descriptions-item label="所属产品">{{
+                renderData.productName
+              }}</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>
+        </a-col>
+        <a-col :span="4">
+          <a-image :src="previewUrl" width="100px" />
+        </a-col>
+      </a-row>
     </a-card>
     <a-card class="general-card" style="margin-top: 10px">
       <a-tabs
@@ -89,14 +96,8 @@
               <div>{{ dayjs(record.recordTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
             </template>
             <template #content="{ record }">
-              <div v-if="record.content">
-                <span v-for="(value, key, index) in record.content" :key="key">
-                  <template v-if="index === 0">
-                    <strong>{{ key }}:</strong> {{ value }}
-                  </template>
-                </span>
-                <span v-if="Object.keys(record.content).length > 1">. . . . . .</span>
-              </div>
+              <vue-json-pretty v-if="record.content" :data="record.content" :deep="0" />
+              <div v-else>/</div>
             </template>
             <template #operations="{ record }">
               <a-button type="text" @click="openDetailModal(record)">
@@ -108,8 +109,16 @@
         </a-tab-pane>
         <a-tab-pane key="5" tab="事件记录" title="事件记录">
           <a-table :columns="deviceEventColumns" :data="deviceEventData" >
+            <template #recordTime="{ record }">
+              <div>{{ dayjs(record.recordData.recordTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
+            </template>
+            <template #content="{ record }">
+              <vue-json-pretty v-if="record.recordData.content" :data="record.recordData.content" :deep="0" >
+              </vue-json-pretty>
+              <div v-else>/</div>
+            </template>
             <template #operations="{ record }">
-              <a-button type="text" @click="openDetailModal(record)">
+              <a-button type="text" @click="openEventDetailModal(record)">
                 <icon-list />
                 详情
               </a-button>
@@ -150,11 +159,33 @@
         <a-button @click="closeDetailModal">关闭</a-button>
       </template>
       <div v-if="selectedRecord">
-        <p><strong>上报时间:</strong> {{ dayjs(selectedRecord.recordTime).format('YYYY-MM-DD HH:mm:ss') }}</p>
-        <div v-if="selectedRecord.content">
-          <div v-for="(value, key) in selectedRecord.content" :key="key">
-            <strong>{{ key }}:</strong> {{ value }}
-          </div>
+        <p>
+          <strong>上报时间:</strong> {{ dayjs(selectedRecord.recordTime).format('YYYY-MM-DD HH:mm:ss') }}
+        </p>
+        <strong>内容:</strong>
+        <div style="border: 1px solid #e5e5e5; border-radius: 4px; padding: 8px; margin-top: 8px;">
+          <vue-json-pretty :data="selectedRecord.content" :deep="1" />
+        </div>
+      </div>
+    </a-modal>
+
+    <!-- 事件记录详情模态框 -->
+    <a-modal
+      :visible="eventDetailVisible"
+      @cancel="closeEventDetailModal"
+      title="事件记录详情"
+    >
+      <template #footer>
+        <a-button @click="closeEventDetailModal">关闭</a-button>
+      </template>
+      <div v-if="selectedEventRecord">
+          <strong>事件名称:</strong> {{ selectedEventRecord.name }}
+        <p>
+          <strong>发生时间:</strong> {{ dayjs(selectedEventRecord.recordData.recordTime).format('YYYY-MM-DD HH:mm:ss') }}
+        </p>
+        <strong>内容:</strong>
+        <div style="border: 1px solid #e5e5e5; border-radius: 4px; padding: 8px; margin-top: 8px;">
+          <vue-json-pretty :data="selectedEventRecord.recordData.content" :deep="1" />
         </div>
       </div>
     </a-modal>
@@ -164,13 +195,15 @@
 <script lang="ts" setup>
   import dayjs from 'dayjs';
   import { useRoute } from 'vue-router';
-  import { onMounted, ref } from 'vue';
+  import { onMounted, reactive, ref } from 'vue';
   import { Message } from '@arco-design/web-vue';
   import { queryDeviceDetail, queryDeviceRecord, sendCommand } from '@/api/device';
   import { queryEventLog, queryServeDetail, queryServeList } from '@/api/tsl';
   import useVisible from '@/hooks/visible';
+  import VueJsonPretty from 'vue-json-pretty';
   import dynamicForm from './dynamic-form.vue';
   import DeviceMap from './device-map.vue';
+  import 'vue-json-pretty/lib/styles.css';
 
   const route = useRoute();
   const { visible, setVisible } = useVisible();
@@ -207,6 +240,7 @@
       title: '内容',
       dataIndex: 'content',
       slotName: 'content',
+      ellipsis: true,
     },
     {
       title: '操作',
@@ -237,6 +271,16 @@
       dataIndex: 'name',
       slotName: 'name',
     },
+    {
+      title: '发生时间',
+      dataIndex: 'recordData.recordTime',
+      slotName: 'recordTime',
+    },
+    {
+      title: '内容',
+      dataIndex: 'recordData.content',
+      slotName: 'content',
+    },
     {
       title: '操作',
       dataIndex: 'operations',
@@ -244,10 +288,15 @@
     },
   ];;
   const activeKey = ref('1');
+  const previewUrl = ref('');
 
   const detailVisible = ref(false);
   const selectedRecord = ref<any>(null);
 
+  // 事件记录详情模态框状态
+  const eventDetailVisible = ref(false);
+  const selectedEventRecord = ref<any>(null);
+
   const openDetailModal = (record: any) => {
     selectedRecord.value = record;
     detailVisible.value = true;
@@ -262,6 +311,9 @@
     {
       clientId: 0,
       productId: 0,
+      preview: {
+        url: '',
+      },
     }
   );
   const deviceReportData = ref([]);
@@ -274,6 +326,7 @@
       // 1. 先获取设备详情
       const detailRes = await queryDeviceDetail(Id);
       renderData.value = detailRes.data;
+      previewUrl.value = renderData.value.preview.url;
 
       // 2. 根据设备详情中的 clientId 和 productId 调用其他接口
       const [recordRes, serveRes, eventRes] = await Promise.all([
@@ -287,11 +340,7 @@
           size: 10,
           current: 1,
         }),
-        queryEventLog({
-          clientId: renderData.value.clientId,
-          size: 10,
-          current: 1,
-        }),
+        queryEventLog(renderData.value.clientId),
       ]);
 
       // 3. 更新其他数据
@@ -355,6 +404,18 @@
     }
   };
 
+  // 打开事件记录详情模态框
+  const openEventDetailModal = (record: any) => {
+    selectedEventRecord.value = record;
+    eventDetailVisible.value = true;
+  };
+
+  // 关闭事件记录详情模态框
+  const closeEventDetailModal = () => {
+    eventDetailVisible.value = false;
+    selectedEventRecord.value = null;
+  };
+
   onMounted(() => {
     fetchData(id);
   });
diff --git a/src/views/iot/device/components/device-edit.vue b/src/views/iot/device/components/device-edit.vue
index 17a5284..6ee4ac1 100644
--- a/src/views/iot/device/components/device-edit.vue
+++ b/src/views/iot/device/components/device-edit.vue
@@ -61,6 +61,21 @@
       >
         <a-input v-model="formData.name" placeholder="请输入设备名称" />
       </a-form-item>
+      <!-- 客户机序列号 -->
+      <a-form-item
+        field="clientId"
+        label="客户机ID"
+        :rules="[
+          { max: 12, message: '客户机ID不能超过12位' }
+        ]"
+        :validate-trigger="['change']"
+      >
+        <a-input
+          v-model="formData.clientId"
+          placeholder="请输入客户机ID"
+          :max-length="12"
+        />
+      </a-form-item>
       <!-- 硬件版本 -->
       <a-form-item
         field="hardwareVersion"
@@ -85,6 +100,29 @@
           placeholder="请输入固件版本"
         />
       </a-form-item>
+      <!-- 纬度 -->
+      <a-form-item
+        field="latitude"
+        label="纬度"
+        :validate-trigger="['change']"
+      >
+        <a-input
+          v-model="formData.latitude"
+          placeholder="请输入纬度"
+        />
+      </a-form-item>
+      <!-- 经度 -->
+      <a-form-item
+        field="longitude"
+        label="经度"
+        :validate-trigger="['change']"
+      >
+        <a-input
+          v-model="formData.longitude"
+          placeholder="请输入经度"
+        />
+      </a-form-item>
+
       <a-form-item field="remark" label="备注">
         <a-textarea v-model="formData.remark" placeholder="请输入描述" />
       </a-form-item>
@@ -157,7 +195,6 @@
   import '@wangeditor/editor/dist/css/style.css';
   import {
     createDevice,
-    queryDeviceByName,
     queryDeviceDetail, queryProductByName,
     updateDevice
   } from '@/api/device';
diff --git a/src/views/iot/device/index.vue b/src/views/iot/device/index.vue
index 508232f..a8230fb 100644
--- a/src/views/iot/device/index.vue
+++ b/src/views/iot/device/index.vue
@@ -47,7 +47,7 @@
                 </a-form-item>
               </a-col>
               <a-col :span="10">
-                <a-form-item field="isOnline" label="在线">
+                <a-form-item field="online" label="在线">
                   <a-select
                     v-model="formModel.isOnline"
                     style="width: 360px"
diff --git a/src/views/iot/deviceMap/index.vue b/src/views/iot/deviceMap/index.vue
index c5008ef..0eb532a 100644
--- a/src/views/iot/deviceMap/index.vue
+++ b/src/views/iot/deviceMap/index.vue
@@ -1,6 +1,6 @@
 <template>
   <a-layout>
-    <a-layout-sider style="width:300px;" :resize-directions="['right']">
+    <a-layout-sider style="width:300px;background-color: transparent;" :resize-directions="['right']">
       <!-- 搜索框 -->
       <a-card>
         <a-input-search
@@ -35,8 +35,7 @@
                   :size="70"
                 >
                   <a-image
-                    :src=device.previewUrl
-                    @error="handleImageError"
+                    :src="getImageUrl(device.previewId)"
                   />
                 </a-avatar>
                 <a-descriptions layout="inline-horizontal" :style="{ marginLeft: '10px'}">
@@ -50,23 +49,6 @@
           </a-card>
         </a-col>
       </a-row>
-<!--      <a-list>-->
-<!--        <a-list-item v-for="device in deviceList" :key="device.id" @click="selectDevice(device)">-->
-<!--          <a-list-item-meta-->
-<!--            :title="device.name"-->
-<!--            :description="device.name"-->
-<!--          >-->
-<!--            <template #avatar>-->
-<!--              <a-avatar shape="square">-->
-<!--                <img-->
-<!--                  alt="avatar"-->
-<!--                  src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"-->
-<!--                />-->
-<!--              </a-avatar>-->
-<!--            </template>-->
-<!--          </a-list-item-meta>-->
-<!--        </a-list-item>-->
-<!--      </a-list>-->
     </a-layout-sider>
     <a-layout-content>
       <div id="container"></div>
@@ -92,6 +74,15 @@
   };
 
 
+  // 获取图片 URL 的函数
+  const getImageUrl = (previewId: string) => {
+    if (!previewId) {
+      return 'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp';
+    }
+    return `/api/rest/attachment/${previewId}`;
+  };
+
+
   // 防抖搜索函数
   const handleSearch = debounce(async (value: string) => {
     try {
@@ -113,10 +104,10 @@
     }
   }, 300); // 防抖时间设置为 300ms
 
-  const handleImageError = (event: Event) => {
-    const img = event.target as HTMLImageElement;
-    img.src = 'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp'; // 替换为默认图片
-  };
+  // const handleImageError = (event: Event) => {
+  //   const img = event.target as HTMLImageElement;
+  //   img.src = 'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp'; // 替换为默认图片
+  // };
 
   AMapLoader.load({
     key: 'a4e80eed798a56451b226dcfca81b846', // 申请好的Web端开发者Key，首次调用 load 时必填
@@ -136,9 +127,11 @@
           const lngLat = [device.longitude, device.latitude];
           const content = document.createElement('div');
           content.className = 'custom-content-marker';
-          content.innerHTML = `
-      <img src="https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png" alt="标记点" />`;
+          const markerIcon = device.warning === '1'
+            ? `/api/rest/attachment/${device.icon?.url}` // 警告标记
+            : `/api/rest/attachment/${device.icon?.url}`; // 默认标记
 
+          content.innerHTML = `<img src="${markerIcon}" alt="标记点" />`;
           // 创建标记点
           const marker = new AMap.Marker({
             position: lngLat,
diff --git a/src/views/iot/product/components/product-detail.vue b/src/views/iot/product/components/product-detail.vue
index 6ad1b1b..5342b4c 100644
--- a/src/views/iot/product/components/product-detail.vue
+++ b/src/views/iot/product/components/product-detail.vue
@@ -2,39 +2,45 @@
   <div class="container">
     <Breadcrumb :items="['物联网管理', '产品管理', '产品详情']" />
     <a-card class="general-card" title=" ">
-      <a-descriptions v-model="renderData" size="large">
-        <template #title
-          ><h3 style="margin-top: -15px">
-            <a-button
-              class="nav-btn"
-              type="outline"
-              :shape="'circle'"
-              @click="() => $router.go(-1)"
-            >
-              <icon-undo />
-            </a-button>
-            产品详情</h3
-          >
-        </template>
-        <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>
+      <a-row :gutter="10">
+        <a-col :span="16">
+          <a-descriptions v-model="renderData" size="large">
+            <template #title
+            ><h3 style="margin-top: -15px">
+              <a-button
+                class="nav-btn"
+                type="outline"
+                :shape="'circle'"
+                @click="() => $router.go(-1)"
+              >
+                <icon-undo />
+              </a-button>
+              产品详情</h3>
+            </template>
+            <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>
+        </a-col>
+        <a-col :span="4">
+          <a-image :src="previewUrl" width="100px" />
+        </a-col>
+      </a-row>
     </a-card>
     <a-card class="general-card" style="margin-top: 10px">
       <a-tabs
@@ -88,9 +94,11 @@
   ];
   const activeKey = ref('1');
   const renderData = ref([]);
+  const previewUrl = ref('');
   const fetchData = async (Id: number) => {
     const res = await queryProductDetail(Id);
     renderData.value = res.data;
+    previewUrl.value = res.data.preview.url;
   };
   const handleMenuClick = (e: any) => {
     activeKey.value = e;
diff --git a/src/views/iot/product/components/product-edit.vue b/src/views/iot/product/components/product-edit.vue
index b8e937c..48304d2 100644
--- a/src/views/iot/product/components/product-edit.vue
+++ b/src/views/iot/product/components/product-edit.vue
@@ -84,6 +84,7 @@
         <a-upload
           show-file-list
           :file-list="previewList"
+          image-preview
           :limit="1"
           list-type="picture-card"
           :custom-request="(option: any) => customRequest(option, 'preview')"
@@ -96,6 +97,7 @@
       >
         <a-upload
           show-file-list
+          list-type="picture"
           :file-list="iconList"
           :limit="1"
           :custom-request="(option: any) => customRequest(option, 'icon')"
@@ -275,11 +277,11 @@
       onSuccess(res.data);
       if (type === 'preview') {
         formData.value.preview = formData.value.preview || [];
-        formData.value.preview.push(res.data);
+        formData.value.preview = res.data;
         formData.value.previewId = res.data.id;
       } else if (type === 'icon') {
         formData.value.icon = formData.value.icon || [];
-        formData.value.icon.push(res.data);
+        formData.value.icon = res.data;
         formData.value.iconId = res.data.id;
       }
     } else {
@@ -295,7 +297,7 @@
       }
       // 调用删除接口
       const res = await deleteAttachment(fileId);
-      if (res.status === 200) {
+      if (res.data === true) {
         // 删除成功后
         Message.success('删除成功');
       } else {