From bdd99287cfd5252bea4647ea04762e2fcba8e7eb Mon Sep 17 00:00:00 2001
From: Kven <2955163637@qq.com>
Date: Wed, 19 Mar 2025 17:53:25 +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=E7=9B=B8=E5=85=B3=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加设备名称模糊查询功能
- 更新设备详情和列表展示样式
- 修改产品编辑界面，移除不必要的上传功能
- 优化产品 TSL界面，增加事件状态切换功能
- 重构部分 API 接口命名
---
 src/api/device.ts                             |  11 +-
 src/api/product.ts                            |  17 ++-
 src/api/tsl.ts                                |   5 +
 .../iot/device/components/device-detail.vue   |  10 +-
 .../iot/device/components/device-edit.vue     |   6 +-
 src/views/iot/device/index.vue                |   4 +-
 src/views/iot/deviceMap/index.vue             | 101 ++++++++++++++++--
 .../iot/product/components/product-edit.vue   |  90 ++++++++--------
 .../iot/product/components/product-tsl.vue    |  53 +++++++--
 9 files changed, 219 insertions(+), 78 deletions(-)

diff --git a/src/api/device.ts b/src/api/device.ts
index a1a2209..18a4ae5 100644
--- a/src/api/device.ts
+++ b/src/api/device.ts
@@ -50,12 +50,21 @@ export function queryDeviceList(data: DeviceRecord) {
   });
 }
 
+// 名称模糊查询
+export function queryDeviceByNameList(data: any) {
+  return axios({
+    url: `/api/rest/device/list`,
+    method: 'get',
+    params: data,
+  });
+}
+
 // 查看详情
 export function queryDeviceDetail(id: number) {
   return axios.get(`/api/rest/device/${id}`);
 }
 // 名称模糊查询
-export function queryDeviceByName(data: any) {
+export function queryProductByName(data: any) {
   return axios({
     url: `/api/rest/product/fuzzy`,
     method: 'get',
diff --git a/src/api/product.ts b/src/api/product.ts
index ad14eff..365daff 100644
--- a/src/api/product.ts
+++ b/src/api/product.ts
@@ -67,12 +67,19 @@ export function deleteProduct(id: number) {
   return axios.delete(`/api/rest/product/${id}`);
 }
 
-// 文件上传
+// 添加附件
 export function addAttachments(data: any) {
-  return axios.post(`/api/rest/product/upload`, data);
+  return axios({
+    method: 'post',
+    url: '/api/rest/attachment',
+    headers: {
+      'Content-Type': 'multipart/form-data',
+    },
+    data,
+  });
 }
 
-// 文件删除
-export function deleteAttachment(id: number) {
-  return axios.delete(`/api/rest/product/attachments/${id}`);
+// 删除附件
+export function deleteAttachment(id: string) {
+  return axios.delete(`/api/rest/attachment/delete/${id}`);
 }
diff --git a/src/api/tsl.ts b/src/api/tsl.ts
index 01f25e0..c655bf7 100644
--- a/src/api/tsl.ts
+++ b/src/api/tsl.ts
@@ -88,3 +88,8 @@ export function deleteEvent(data: any) {
 export function queryServeDetail(id: number) {
   return axios.get(`/api/rest/tsl/serve/${id}`);
 }
+
+// 事件启用
+export function enableEvent(id: number) {
+  return axios.patch(`/api/rest/tsl/event/toggle/${id}`);
+}
diff --git a/src/views/iot/device/components/device-detail.vue b/src/views/iot/device/components/device-detail.vue
index bb10245..56d02e5 100644
--- a/src/views/iot/device/components/device-detail.vue
+++ b/src/views/iot/device/components/device-detail.vue
@@ -271,8 +271,12 @@
   const fields = ref([]);
   const fetchData = async (Id: number) => {
     try {
-      const [detailRes, recordRes, serveRes, eventRes] = await Promise.all([
-        queryDeviceDetail(Id),
+      // 1. 先获取设备详情
+      const detailRes = await queryDeviceDetail(Id);
+      renderData.value = detailRes.data;
+
+      // 2. 根据设备详情中的 clientId 和 productId 调用其他接口
+      const [recordRes, serveRes, eventRes] = await Promise.all([
         queryDeviceRecord({
           clientId: renderData.value.clientId,
           size: 10,
@@ -290,7 +294,7 @@
         }),
       ]);
 
-      renderData.value = detailRes.data;
+      // 3. 更新其他数据
       deviceReportData.value = recordRes.data.records;
       deviceServerData.value = serveRes.data.records;
       deviceEventData.value = eventRes.data.records;
diff --git a/src/views/iot/device/components/device-edit.vue b/src/views/iot/device/components/device-edit.vue
index 0524729..17a5284 100644
--- a/src/views/iot/device/components/device-edit.vue
+++ b/src/views/iot/device/components/device-edit.vue
@@ -158,8 +158,8 @@
   import {
     createDevice,
     queryDeviceByName,
-    queryDeviceDetail,
-    updateDevice,
+    queryDeviceDetail, queryProductByName,
+    updateDevice
   } from '@/api/device';
   import type { SelectOptionData } from '@arco-design/web-vue/es/select/interface';
   import { queryProductDetail } from '@/api/product';
@@ -243,7 +243,7 @@
       loading.value = true;
       options.value = [];
       window.setTimeout(async () => {
-        const res = await queryDeviceByName({
+        const res = await queryProductByName({
           name: value,
         });
         options.value = res.data.map((item: any) => {
diff --git a/src/views/iot/device/index.vue b/src/views/iot/device/index.vue
index 27cda9d..ce3d5ec 100644
--- a/src/views/iot/device/index.vue
+++ b/src/views/iot/device/index.vue
@@ -235,7 +235,7 @@
   import useTableOption from '@/hooks/table-option';
   import { Message } from '@arco-design/web-vue';
   import { useRouter } from 'vue-router';
-  import { deleteDevice, DeviceRecord, queryDeviceByName, queryDeviceList } from '@/api/device';
+  import { deleteDevice, DeviceRecord, queryDeviceList, queryProductByName } from '@/api/device';
   import DeviceEdit from '@/views/iot/device/components/device-edit.vue';
 
   const generateFormModel = () => {
@@ -342,7 +342,7 @@
       loading.value = true;
       options.value = [];
       window.setTimeout(async () => {
-        const res = await queryDeviceByName({
+        const res = await queryProductByName({
           name: value,
         });
         options.value = res.data.map((item: any) => {
diff --git a/src/views/iot/deviceMap/index.vue b/src/views/iot/deviceMap/index.vue
index 97a7f0d..c5008ef 100644
--- a/src/views/iot/deviceMap/index.vue
+++ b/src/views/iot/deviceMap/index.vue
@@ -1,6 +1,17 @@
 <template>
   <a-layout>
-    <a-layout-sider :resize-directions="['right']">
+    <a-layout-sider style="width:300px;" :resize-directions="['right']">
+      <!-- 搜索框 -->
+      <a-card>
+        <a-input-search
+          v-model="searchKeyword"
+          placeholder="设备名称"
+          @change="handleSearch"
+          @search="handleSearch"
+          style="margin-bottom: 16px"
+        />
+      </a-card>
+<!--       设备列表 -->
       <a-row>
         <a-col
           :span="24"
@@ -8,9 +19,54 @@
           :key="device.id"
           @click="selectDevice(device)"
         >
-          {{ device.name }}
+          <a-card hoverable :style="{ margin: '5px', height: '100px' }">
+            <div
+              :style="{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+              }"
+            >
+              <span
+                :style="{ display: 'flex', alignItems: 'center', color: '#1D2129' }"
+              >
+                <a-avatar
+                  shape="square"
+                  :size="70"
+                >
+                  <a-image
+                    :src=device.previewUrl
+                    @error="handleImageError"
+                  />
+                </a-avatar>
+                <a-descriptions layout="inline-horizontal" :style="{ marginLeft: '10px'}">
+                     <a-descriptions-item label="设备名称" :span="3">{{ device.name }}</a-descriptions-item>
+<!--                 <a-descriptions-item label="硬件版本">{{ device.hardwareVersion }}</a-descriptions-item>-->
+<!--                 <a-descriptions-item label="固件版本">{{ device.firmwareVersion }}</a-descriptions-item>-->
+                     <a-descriptions-item label="所属产品">{{ device.productName }}</a-descriptions-item>
+                   </a-descriptions>
+              </span>
+            </div>
+          </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>
@@ -21,17 +77,47 @@
 <script lang="ts" setup>
   import { onMounted, ref } from 'vue';
   import AMapLoader from '@amap/amap-jsapi-loader';
-  import { DeviceRecord, queryDeviceList } from '@/api/device';
+  import { DeviceRecord, queryDeviceByNameList, queryDeviceList } from '@/api/device';
   import '@amap/amap-jsapi-types';
   import router from '@/router';
   import { Message } from '@arco-design/web-vue';
+  import { debounce } from '@arco-design/web-vue/es/_utils/debounce';
 
   let map: any = null;
   const deviceList = ref<DeviceRecord[]>([]);
+  const searchKeyword = ref(''); // 搜索关键字
+  const isLoading = ref(false); // 加载状态
   let selectDevice = (device: DeviceRecord) => {
     console.log(device);
   };
 
+
+  // 防抖搜索函数
+  const handleSearch = debounce(async (value: string) => {
+    try {
+      isLoading.value = true; // 开始加载
+      if (value) {
+        const res = await queryDeviceByNameList({
+          name: value,
+        });
+        deviceList.value = res.data;
+      } else {
+        // 如果搜索框为空，恢复显示全部设备列表
+        const response = await queryDeviceByNameList({});
+        deviceList.value = response.data;
+      }
+    } catch (error) {
+      Message.error('搜索失败，请稍后重试');
+    } finally {
+      isLoading.value = false; // 结束加载
+    }
+  }, 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'; // 替换为默认图片
+  };
+
   AMapLoader.load({
     key: 'a4e80eed798a56451b226dcfca81b846', // 申请好的Web端开发者Key，首次调用 load 时必填
     version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
@@ -100,12 +186,9 @@
   // 将依赖于 AMap 的代码放在 then 回调中
   onMounted(() => {
     // 获取设备列表
-    queryDeviceList({
-      current: 1,
-      size: 10,
-    })
+    queryDeviceByNameList({})
       .then((response) => {
-        deviceList.value = response.data.records;
+        deviceList.value = response.data;
       })
       .catch(() => {
         Message.error('获取设备列表失败');
@@ -120,7 +203,7 @@
 <style scoped>
   #container {
     width: 100%;
-    height: 800px;
+    height: 100vh;
   }
 
   .custom-content-marker img {
diff --git a/src/views/iot/product/components/product-edit.vue b/src/views/iot/product/components/product-edit.vue
index 4833232..1646ea7 100644
--- a/src/views/iot/product/components/product-edit.vue
+++ b/src/views/iot/product/components/product-edit.vue
@@ -77,33 +77,31 @@
       <a-form-item field="remark" label="备注">
         <a-textarea v-model="formData.remark" placeholder="请输入备注" />
       </a-form-item>
-      <!-- 上传预览图 -->
-      <a-form-item
-        label="预览图"
-      >
-        <a-upload
-          v-model="formData.preview"
-          show-file-list
-          :file-list="previewList"
-          :limit="1"
-          list-type="picture-card"
-          :custom-request="(option: any) => customRequest(option, 'preview')"
-          @before-remove="beforeRemove"
-        />
-      </a-form-item>
-      <!-- 上传预览图 -->
-      <a-form-item
-        label="图标"
-      >
-        <a-upload
-          v-model="formData.icon"
-          show-file-list
-          :file-list="iconList"
-          :limit="1"
-          :custom-request="(option: any) => customRequest(option, 'icon')"
-          @before-remove="beforeRemove"
-        />
-      </a-form-item>
+<!--      &lt;!&ndash; 上传预览图 &ndash;&gt;-->
+<!--      <a-form-item-->
+<!--        label="预览图"-->
+<!--      >-->
+<!--        <a-upload-->
+<!--          show-file-list-->
+<!--          :file-list="previewList"-->
+<!--          :limit="1"-->
+<!--          list-type="picture-card"-->
+<!--          :custom-request="(option: any) => customRequest(option, 'preview')"-->
+<!--          @before-remove="beforeRemove"-->
+<!--        />-->
+<!--      </a-form-item>-->
+<!--      &lt;!&ndash; 上传图标 &ndash;&gt;-->
+<!--      <a-form-item-->
+<!--        label="图标"-->
+<!--      >-->
+<!--        <a-upload-->
+<!--          show-file-list-->
+<!--          :file-list="iconList"-->
+<!--          :limit="1"-->
+<!--          :custom-request="(option: any) => customRequest(option, 'icon')"-->
+<!--          @before-remove="beforeRemove"-->
+<!--        />-->
+<!--      </a-form-item>-->
       <!-- 参数   -->
       <a-form-item field="params" label="参数">
         <div style="width: 100%">
@@ -257,26 +255,22 @@
     paramsData.value = res.data.params;
   };
 
-  // 预览图列表
-  const previewList = computed(() => {
-    return formData.value.preview?.map((item: any) => {
-      return {
-        name: item.fileName,
-        url: item.url,
-        uid: item.id,
-      };
-    });
-  });
-  // 图标列表
-  const iconList = computed(() => {
-    return formData.value.icon?.map((item: any) => {
-      return {
-        name: item.fileName,
-        url: item.url,
-        uid: item.id,
-      };
-    });
-  });
+  // // 预览图列表
+  // const previewList = computed(() => {
+  //   return  {
+  //     name: formData.value.preview?.fileName,
+  //     url: formData.value.preview?.url,
+  //     uid: formData.value.preview?.id,
+  //   }
+  // });
+  // // 图标列表
+  // const iconList = computed(() => {
+  //   return {
+  //     name: formData.value.icon?.fileName,
+  //     url: formData.value.icon?.url,
+  //     uid: formData.value.icon?.id,
+  //   }
+  // });
   // 自定义预览图上传
   const customRequest = async (option: any,type: string) => {
     const { fileItem, onSuccess, onError } = option;
@@ -289,9 +283,11 @@
       if (type === 'preview') {
         formData.value.preview = formData.value.preview || [];
         formData.value.preview.push(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.iconId = res.data.id;
       }
     } else {
       onError(res.data);
diff --git a/src/views/iot/product/components/product-tsl.vue b/src/views/iot/product/components/product-tsl.vue
index bfc19b2..bb3353f 100644
--- a/src/views/iot/product/components/product-tsl.vue
+++ b/src/views/iot/product/components/product-tsl.vue
@@ -86,6 +86,12 @@
             <template #type="{ record }">
               <div>{{ record.type === 'PASSIVE' ? '主动' : '被动' }}</div>
             </template>
+            <template #enabled="{ record }">
+              <a-switch
+                v-model="record.enabled"
+                @change="handleToggleEventStatus(record)"
+              />
+            </template>
             <template #operation="{ record }">
               <a-button
                 v-permission="['iot:event:delete']"
@@ -124,7 +130,7 @@
         >
           <a-input
             v-model="propertyAddData.name"
-            placeholder="请输入设备名称"
+            placeholder="请输入属性名称"
           />
         </a-form-item>
         <!-- 标识 -->
@@ -393,14 +399,14 @@
                   style="width: 140px"
                 />
                 <a-select
-                v-model="param.comparisonType"
+                v-model="param.compareType"
                 :options="comparisonTypeOptions"
                 allow-search
                 placeholder="比较类型"
                 style="width: 140px"
                 />
                 <a-input
-                  v-model="param.default"
+                  v-model="param.defaultValue"
                   placeholder="默认值"
                   allow-clear
                   style="width: 140px"
@@ -446,10 +452,10 @@
     createServe,
     deleteEvent,
     deleteProperty,
-    deleteServe,
+    deleteServe, enableEvent,
     queryEventList,
     queryPropertyList,
-    queryServeList,
+    queryServeList
   } from '@/api/tsl';
   import type { SelectOptionData } from '@arco-design/web-vue/es/select/interface';
   import { FormInstance } from '@arco-design/web-vue/es/form';
@@ -524,6 +530,11 @@
       dataIndex: 'type',
       slotName: 'type',
     },
+    {
+      title: '状态',
+      dataIndex: 'enabled',
+      slotName: 'enabled',
+    },
     {
       title: '备注',
       dataIndex: 'remark',
@@ -586,16 +597,24 @@
   const comparisonTypeOptions = computed<SelectOptionData[]>(() => [
     {
       label: '大于',
-      value: 'GREATER',
+      value: 'GT',
     },
     {
       label: '小于',
-      value: 'LESS',
+      value: 'LT',
     },
     {
       label: '等于',
-      value: 'EQUAL',
+      value: 'EQ',
     },
+    {
+      label: '大于等于',
+      value: 'GE',
+    },
+    {
+      label: '小于等于',
+      value: 'LE',
+    }
   ]);
   const eventTypeOptions = computed<SelectOptionData[]>(() => [
     {
@@ -670,6 +689,7 @@
       identifier: '',
       dataType: '',
       type: '',
+      defaultValue: '',
     },
   ]);
   const propertyCreateRef = ref<FormInstance>();
@@ -814,6 +834,23 @@
       await fetchData(id);
     }
   };
+
+  // 切换事件状态
+  const handleToggleEventStatus = async (record: any) => {
+    try {
+      const res = await enableEvent(record.id);
+      if (res.status === 200) {
+        Message.success({
+          content: '状态更新成功',
+          duration: 5 * 1000,
+        });
+        await fetchData(id);
+      }
+    } catch (error) {
+      console.error('状态更新失败:', error);
+    }
+  };
+
   // 删除事件
   const handleDeleteEvent = async (record: any) => {
     const res = await deleteEvent(record.id);