From 16601a67e334f8e183c39be73dd44cef93e9aaf2 Mon Sep 17 00:00:00 2001
From: CGD <3030332422@qq.com>
Date: Mon, 10 Mar 2025 18:21:59 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E8=A7=A3=E7=BB=91=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=20(#264)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 main/manager-web/src/apis/module/user.js | 15 ++++++
 main/manager-web/src/utils/constant.js   |  3 ++
 main/manager-web/src/views/home.vue      | 66 +++++++++++++++++++-----
 3 files changed, 70 insertions(+), 14 deletions(-)

diff --git a/main/manager-web/src/apis/module/user.js b/main/manager-web/src/apis/module/user.js
index b59959cd..7a6815b2 100755
--- a/main/manager-web/src/apis/module/user.js
+++ b/main/manager-web/src/apis/module/user.js
@@ -43,4 +43,19 @@ export default {
                 })
             }).send()
     },
+    // 解绑设备
+    unbindDevice(device_id, callback) {
+        RequestService.sendRequest()
+            .url(`${getServiceUrl()}/api/v1/user/device/unbind/${device_id}`)
+            .method('PUT')
+            .success((res) => {
+                RequestService.clearRequestTime();
+                callback(res);
+            })
+            .fail(() => {
+                RequestService.reAjaxFun(() => {
+                  this.unbindDevice(device_id, callback);
+                });
+              }).send()
+    },
 }
diff --git a/main/manager-web/src/utils/constant.js b/main/manager-web/src/utils/constant.js
index f34abb32..460ea8ef 100755
--- a/main/manager-web/src/utils/constant.js
+++ b/main/manager-web/src/utils/constant.js
@@ -1,6 +1,9 @@
 const HAVE_NO_RESULT = '暂无'
 export default {
     HAVE_NO_RESULT, // 项目的配置信息
+    PAGE: {
+        LOGIN: '/login',
+    },
     STORAGE_KEY: {
         TOKEN: 'TOKEN',
         PUBLIC_KEY: 'PUBLIC_KEY',
diff --git a/main/manager-web/src/views/home.vue b/main/manager-web/src/views/home.vue
index 12ab7689..2ed345d6 100644
--- a/main/manager-web/src/views/home.vue
+++ b/main/manager-web/src/views/home.vue
@@ -21,9 +21,9 @@
           </div>
           <div style="display: flex;align-items: center;gap: 8px;margin-top: 10px">
             <div class="serach-box">
-              <el-input placeholder="输入名称搜索.." v-model="serach" style="border: none; background: transparent;" />
+              <el-input placeholder="输入名称搜索.." v-model="serach" style="border: none; background: transparent;" @keyup.enter.native="handleSearch"  />
               <img src="@/assets/home/search.png" alt=""
-                style="width: 12px;height: 12px;margin-right: 11px;cursor: pointer;" />
+                style="width: 12px;height: 12px;margin-right: 11px;cursor: pointer;" @click="handleSearch" />
             </div>
             <img src="@/assets/home/avatar.png" alt="" style="width: 21px;height: 21px;" />
             <div class="user-info">
@@ -56,16 +56,16 @@
             </div>
           </div>
           <div
-            style="display: flex;flex-wrap: wrap;margin-top: 15px;gap: 15px;justify-content: space-between;box-sizing: border-box;">
-            <div class="device-item" v-for="(item,index) in deviceList" :key="index">
-              <div style="display: flex;justify-content: space-between;">
+            style="display: flex;flex-wrap: wrap;margin-top: 15px;gap: 15px;justify-content: flex-start;box-sizing: border-box;">
+            <div class="device-item" v-for="(item,index) in filteredDeviceList" :key="index">
+              <div style="display: flex;justify-content: space-between; align-items: center; ">
                 <div style="font-weight: 700;font-size: 18px;text-align: left;color: #3d4566;">
 <!--                  CC:ba:97:11:a6:ac-->
                   {{item.list[0]?.mac_address}}
                 </div>
-                <div>
+                <div style="display: flex;align-items: center;">
                   <img src="@/assets/home/delete.png" alt=""
-                    style="width: 18px;height: 18px;margin-right: 8px;" />
+                    style="width: 18px;height: 18px;margin-right: 8px;" @click="unbindDevice(item.list[0]?.id)" />
                   <img src="@/assets/home/info.png" alt="" style="width: 18px;height: 18px;" />
                 </div>
               </div>
@@ -229,7 +229,9 @@ export default {
   name: 'home',
   data() {
     return {
-      serach: '',
+      serach: '', // 搜索框输入内容
+      deviceList: [], // 原始设备列表
+      filteredDeviceList: [], // 过滤后的设备列表
       switchValue: false,
       addDeviceDialogVisible: false,
       deviceCode: "",
@@ -250,8 +252,7 @@ export default {
       }],
       userInfo: {
         mobile: '' // 初始化用户信息
-      },
-      deviceList:[]
+      }
     };
   },
   methods: {
@@ -270,14 +271,51 @@ export default {
     // 获取已绑设备
     getList(){
       Api.user.getHomeList(({data})=>{
-        console.log(data.data)
-        this.deviceList = data.data
+        this.deviceList = data.data; // 保存原始设备列表
+        this.filteredDeviceList = data.data; // 初始化过滤后的设备列表
       })
-    }
+    },
+    // 处理搜索
+    handleSearch() {
+      if (this.serach.trim() === '') {
+        // 如果搜索框为空，显示全部设备
+        this.filteredDeviceList = this.deviceList;
+      } else {
+        // 过滤设备列表
+        this.filteredDeviceList = this.deviceList.filter(device => {
+          return (
+            device.list[0]?.mac_address?.includes(this.serach) ||  // 匹配MAC地址
+            device.list[0]?.device_type?.includes(this.serach) ||  // 匹配设备型号
+            device.list[0]?.app_version?.includes(this.serach)     // 匹配APP版本
+          );
+        });
+      }
+    },
+    // 解绑设备
+    unbindDevice(device_id) {
+      this.$confirm('确定要解绑该设备吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        // 调用解绑设备的接口
+        Api.user.unbindDevice(device_id, ({ data }) => {
+          if (data.code === 0) {
+            this.$message.success('解绑成功');
+            this.getList();
+          } else {
+            this.$message.error(data.msg || '解绑失败');
+          }
+        });
+      }).catch(() => {
+        // 用户取消操作
+        this.$message.info('已取消解绑');
+      });
+    },
   },
   mounted() {
     this.fetchUserInfo(); // 组件加载时获取用户信息
-    this.getList()
+    this.getList(); // 初始化设备列表
   }
 }
 </script>