Merge pull request #521 from xinnan-tech/web-device-bind

Web device bind

main/manager-web/src/apis/module/user.js

@@ -18,51 +18,6 @@ export default {
                 })
             }).send()
     },
-    // 获取设备信息
-    getHomeList(callback) {
-        RequestService.sendRequest().url(`${getServiceUrl()}/api/v1/user/device/bind`)
-            .method('GET')
-            .success((res) => {
-                RequestService.clearRequestTime()
-                callback(res)
-            })
-            .fail(() => {
-                RequestService.reAjaxFun(() => {
-                    this.getUserInfo()
-                })
-            }).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()
-    },
-    // 绑定设备
-    bindDevice(deviceCode, callback) {
-        RequestService.sendRequest()
-            .url(`${getServiceUrl()}/api/v1/user/device/bind/${deviceCode}`)
-            .method('POST')
-            .success((res) => {
-                RequestService.clearRequestTime();
-                callback(res);
-            })
-            .fail((err) => {
-                console.error('绑定设备失败:', err);
-                RequestService.reAjaxFun(() => {
-                    this.bindDevice(deviceCode, callback);
-                });
-            }).send();
-    },
     // 获取验证码
     getCaptcha(uuid, callback) {
 
@@ -158,7 +113,7 @@ export default {
                 });
             }).send();
     },
-
+    // 用户信息获取
     getUserInfo(callback) {
         RequestService.sendRequest()
             .url(`${getServiceUrl()}/api/v1/user/info`)
@@ -257,4 +212,20 @@ export default {
                 });
             }).send();
     },
+    // 已绑设备
+     getAgentBindDevices(agentId, callback) {
+         RequestService.sendRequest()
+             .url(`${getServiceUrl()}/api/v1/user/agent/device/bind/${agentId}`)
+             .method('GET')
+             .success((res) => {
+                 RequestService.clearRequestTime();
+                 callback(res);
+             })
+             .fail((err) => {
+                 console.error('获取设备列表失败:', err);
+                 RequestService.reAjaxFun(() => {
+                     this.getAgentBindDevices(agentId, callback);
+                 });
+             }).send();
+     },
 }

main/manager-web/src/components/DeviceItem.vue

@@ -26,7 +26,7 @@
       <div class="settings-btn">
         历史对话
       </div>
-      <div class="settings-btn"  @click="$emit('deviceManage')">
+      <div class="settings-btn"  @click="handleDeviceManage">
         设备管理
       </div>
     </div>
@@ -51,6 +51,9 @@ export default {
     },
     handleConfigure() {
       this.$router.push({ path: '/role-config', query: { agentId: this.device.agentId } });
+    },
+    handleDeviceManage() {
+      this.$router.push({ path: '/device-management', query: { agentId: this.device.agentId } });
     }
   }
 }

main/manager-web/src/components/HeaderBar.vue

@@ -25,7 +25,7 @@
         <img alt="" src="@/assets/home/avatar.png" style="width: 21px;height: 21px;"/>
         <el-dropdown trigger="click">
           <span class="el-dropdown-link">
-             {{ userInfo.username || '加载中...' }}<i class="el-icon-arrow-down el-icon--right"></i>
+             {{ userInfo.mobile || '加载中...' }}<i class="el-icon-arrow-down el-icon--right"></i>
           </span>
           <el-dropdown-menu slot="dropdown">
             <el-dropdown-item icon="el-icon-plus" @click.native="">个人中心</el-dropdown-item>

main/manager-web/src/views/DeviceManagement.vue

@@ -1,20 +1,20 @@
 <template>
   <div class="welcome">
-        <HeaderBar />
+    <HeaderBar />
     <el-main style="padding: 20px; display: flex; flex-direction: column;">
       <div class="table-container">
-         <h3 class="device-list-title">设备列表</h3>
+        <h3 class="device-list-title">设备列表</h3>
         <el-button type="primary" class="add-device-btn" @click="handleAddDevice">
           + 添加设备
         </el-button>
-        <el-table :data="deviceList" style="width: 100%; margin-top: 20px" border stripe>
+        <el-table :data="paginatedDeviceList" style="width: 100%; margin-top: 20px" border stripe>
           <el-table-column label="设备型号" prop="model" flex></el-table-column>
           <el-table-column label="固件版本" prop="firmwareVersion" width="120"></el-table-column>
           <el-table-column label="Mac地址" prop="macAddress"></el-table-column>
           <el-table-column label="绑定时间" prop="bindTime" width="200"></el-table-column>
           <el-table-column label="最近对话" prop="lastConversation" width="140"></el-table-column>
           <el-table-column label="备注" width="180">
-             <template slot-scope="scope">
+            <template slot-scope="scope">
               <el-input v-if="scope.row.isEdit" v-model="scope.row.remark" size="mini" @blur="stopEditRemark(scope.$index)"></el-input>
               <span v-else>
                 <i v-if="!scope.row.remark" class="el-icon-edit" @click="startEditRemark(scope.$index, scope.row)"></i>
@@ -37,6 +37,16 @@
             </template>
           </el-table-column>
         </el-table>
+        <el-pagination
+          class="pagination"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="currentPage"
+          :page-sizes="[5, 10, 20, 50]"
+          :page-size="pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="deviceList.length"
+        ></el-pagination>
       </div>
       <div style="font-size: 12px; font-weight: 400; margin-top: auto; padding-top: 30px; color: #979db1;">
         ©2025 xiaozhi-esp32-server
@@ -55,43 +65,27 @@ export default {
   data() {
     return {
       addDeviceDialogVisible: false,
-      deviceList: [
-        {
-          model: 'xingzhi-cube-0.96oled-wifi',
-          firmwareVersion: '1.4.6',
-          macAddress: 'fc:01:2c:c5:d5:7c',
-          bindTime: '2025-03-10 18:16:21',
-          lastConversation: '6 天前',
-          remark: '',
-          isEdit: false,
-          otaSwitch: false
-        },
-        {
-          model: 'xingzhi-board-1.3tft-ble',
-          firmwareVersion: '2.1.0',
-          macAddress: 'ac:12:3d:e7:f8:9a',
-          bindTime: '2025-03-12 09:30:15',
-          lastConversation: '4 天前',
-          remark: '测试设备',
-          isEdit: false,
-          otaSwitch: true
-      },
-      {
-        model: 'xingzhi-kit-0.91oled-4g',
-        firmwareVersion: '1.8.3',
-        macAddress: 'bc:45:6f:1e:2d:3c',
-        bindTime: '2025-03-15 14:22:08',
-        lastConversation: '2 天前',
-        remark: '生产环境设备',
-        isEdit: false,
-        otaSwitch: false
-      },
-      ]
+      currentPage: 1,
+      pageSize: 5,
+      deviceList: [],
+      loading: false,
     };
   },
+  computed: {
+    paginatedDeviceList() {
+      const start = (this.currentPage - 1) * this.pageSize;
+      const end = start + this.pageSize;
+      return this.deviceList.slice(start, end);
+    }
+  },
+  mounted() {
+    const agentId = this.$route.query.agentId;
+    if (agentId) {
+      this.fetchBindDevices(agentId);
+    }
+  },
   methods: {
     handleAddDevice() {
-      // 添加设备逻辑
       this.addDeviceDialogVisible = true;
     },
     startEditRemark(index, row) {
@@ -101,12 +95,42 @@ export default {
       this.deviceList[index].isEdit = false;
     },
     handleUnbind(device) {
-      // 解绑逻辑
       console.log('解绑设备', device);
     },
     handleDeviceAdded(deviceCode) {
-      console.log('添加的智慧体名称：', deviceCode);
+      console.log('添加的智能体名称：', deviceCode);
     },
+    handleSizeChange(val) {
+      this.pageSize = val;
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val;
+    },
+     fetchBindDevices(agentId) {
+        this.loading = true;
+        import('@/apis/module/user').then(({ default: userApi }) => {
+          userApi.getAgentBindDevices(agentId, ({ data }) => {
+            this.loading = false;
+            if (data.code === 0) {
+              this.deviceList = data.data[0]?.list.map(device => ({
+                id: device.id,
+                model: device.device_type,
+                firmwareVersion: device.app_version,
+                macAddress: device.mac_address,
+                lastConversation: device.recent_chat_time,
+                remark: '',
+                isEdit: false,
+                otaSwitch: device.ota_upgrade === 1
+              }));
+            } else {
+              this.$message.error(data.msg || '获取设备列表失败');
+            }
+          });
+        }).catch(error => {
+          console.error('模块加载失败:', error);
+          this.$message.error('功能模块加载失败');
+        });
+     },
   }
 };
 </script>
@@ -166,4 +190,8 @@ export default {
   vertical-align: middle;
 }
 
-</style>
+.pagination {
+  margin-top: 20px;
+  text-align: right;
+}
+</style>

main/manager-web/src/views/roleConfig.vue

@@ -225,6 +225,7 @@ export default {
 },
   mounted() {
     const agentId = this.$route.query.agentId;
+    console.log('agentId2222',agentId);
     if (agentId) {
       this.fetchAgentConfig(agentId);
     }