From f0aa7df3b04ba0cb644e565f175291c7c6b6e7f6 Mon Sep 17 00:00:00 2001 From: CGD <3030332422@qq.com> Date: Sat, 12 Apr 2025 08:27:03 +0800 Subject: [PATCH 1/2] =?UTF-8?q?update:=E5=AE=8C=E6=88=90=E2=80=9C=E5=88=86?= =?UTF-8?q?=E9=A1=B5=E5=99=A8=E2=80=9D=E6=A0=B7=E5=BC=8F=E7=9A=84=E6=9B=BF?= =?UTF-8?q?=E6=8D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/views/DeviceManagement.vue | 108 ++++++++++++++++-- 1 file changed, 96 insertions(+), 12 deletions(-) diff --git a/main/manager-web/src/views/DeviceManagement.vue b/main/manager-web/src/views/DeviceManagement.vue index baad8e63..13d5a640 100644 --- a/main/manager-web/src/views/DeviceManagement.vue +++ b/main/manager-web/src/views/DeviceManagement.vue @@ -7,7 +7,7 @@ + 添加设备 - + @@ -39,9 +39,26 @@ - +
+
+ +
+
+ + + + + 共{{ deviceList.length }}条记录 +
+
©2025 xiaozhi-esp32-server @@ -75,7 +92,25 @@ export default { const start = (this.currentPage - 1) * this.pageSize; const end = start + this.pageSize; return this.deviceList.slice(start, end); - } + }, + pageCount() { + return Math.ceil(this.deviceList.length / this.pageSize); + }, + visiblePages() { + const pages = []; + const maxVisible = 3; + let start = Math.max(1, this.currentPage - 1); + let end = Math.min(this.pageCount, start + maxVisible - 1); + + if (end - start + 1 < maxVisible) { + start = Math.max(1, end - maxVisible + 1); + } + + for (let i = start; i <= end; i++) { + pages.push(i); + } + return pages; + }, }, mounted() { const agentId = this.$route.query.agentId; @@ -115,12 +150,19 @@ export default { }); }); }, - handleSizeChange(val) { - this.pageSize = val; + goFirst() { + this.currentPage = 1; }, - handleCurrentChange(val) { - this.currentPage = val; + goPrev() { + if (this.currentPage > 1) this.currentPage--; }, + goNext() { + if (this.currentPage < this.pageCount) this.currentPage++; + }, + goToPage(page) { + this.currentPage = page; + }, + fetchBindDevices(agentId) { this.loading = true; Api.device.getAgentBindDevices(agentId, ({ data }) => { @@ -213,8 +255,50 @@ export default { vertical-align: middle; } -.pagination { - margin-top: 20px; - text-align: right; +.custom-pagination { + display: flex; + align-items: center; + gap: 8px; + margin-top: 15px; +} + +.pagination-btn { + min-width: 28px; + height: 32px; + padding: 0 12px; + border-radius: 4px; + border: 1px solid #e4e7ed; + background: #dee7ff; + color: #606266; + font-size: 14px; + cursor: pointer; + transition: all 0.3s ease; +} + +.pagination-btn:first-child, +.pagination-btn:nth-child(2), +.pagination-btn:nth-last-child(2) { + min-width: 60px; +} + +.pagination-btn:hover { + background: #d7dce6; +} + +.pagination-btn:disabled { + opacity: 0.6; + cursor: not-allowed; +} + +.pagination-btn.active { + background: #5f70f3 !important; + color: #ffffff !important; + border-color: #5f70f3 !important; +} + +.total-text { + color: #909399; + font-size: 14px; + margin-left: 10px; } From 7c73f060eda95a88f32736ca106659c33675bbcc Mon Sep 17 00:00:00 2001 From: CGD <3030332422@qq.com> Date: Sat, 12 Apr 2025 09:28:19 +0800 Subject: [PATCH 2/2] =?UTF-8?q?update:=E6=B7=BB=E5=8A=A0=E4=BA=86=E6=8C=89?= =?UTF-8?q?=E9=92=AE=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/views/DeviceManagement.vue | 81 +++++++++++++++---- 1 file changed, 64 insertions(+), 17 deletions(-) diff --git a/main/manager-web/src/views/DeviceManagement.vue b/main/manager-web/src/views/DeviceManagement.vue index 13d5a640..bffefb07 100644 --- a/main/manager-web/src/views/DeviceManagement.vue +++ b/main/manager-web/src/views/DeviceManagement.vue @@ -4,10 +4,8 @@

设备列表

- - + 添加设备 - - + + @@ -41,7 +39,12 @@
- + + {{ isAllSelected ? '取消全选' : '全选' }} + + + 新增 +
@@ -79,6 +82,8 @@ export default { data() { return { addDeviceDialogVisible: false, + selectedDevices: [], + isAllSelected: false, currentAgentId: this.$route.query.agentId || '', currentPage: 1, pageSize: 5, @@ -119,6 +124,16 @@ export default { } }, methods: { + + handleSelectionChange(val) { + this.selectedDevices = val; + this.isAllSelected = val.length === this.paginatedDeviceList.length; + }, + toggleAllSelection() { + this.$refs.deviceTable.toggleAllSelection(); + }, + + handleAddDevice() { this.addDeviceDialogVisible = true; }, @@ -222,21 +237,18 @@ export default { } .add-device-btn { - float: right; - background: #409eff; - border: none; - border-radius: 10px; - width: 105px; + background: linear-gradient(135deg, #6b8cff, #a966ff) !important; + border: none !important; + color: white !important; + margin-left: 10px; height: 32px; - display: flex; - align-items: center; - justify-content: center; - font-size: 14px; - gap: 8px; - margin-bottom: 15px; + padding: 7px 12px; + border-radius: 4px !important; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); &:hover { - background: #3a8ee6; + transform: translateY(-1px); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); } } @@ -301,4 +313,39 @@ export default { font-size: 14px; margin-left: 10px; } + +.table_bottom { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 20px; +} + +.ctrl_btn { + display: flex; + gap: 8px; + padding-left: 26px; + + .el-button { + min-width: 72px; + height: 32px; + padding: 7px 12px; + border-radius: 4px; + border: none; + transition: all 0.3s; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); + + &:hover { + transform: translateY(-1px); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); + } + } + + .el-button--primary { + background: #5f70f3; + color: white; + } +} + +