-
设备列表
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ scope.row.remark }}
-
-
-
-
-
-
-
-
-
-
-
-
- 解绑
-
-
-
-
-
-
-
- {{ isAllSelected ? '取消全选' : '全选' }}
-
-
- 新增
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ scope.row.remark }}
+
+
+
+
+
+
+
+
+
+
+
+
+ 解绑
+
+
+
+
+
+
+
+
+ {{ isAllSelected ? '取消全选' : '全选' }}
+
+
+ 新增
+
+ 解绑
+
+
+
-
-
+
+
+
+
@@ -77,22 +104,35 @@ export default {
addDeviceDialogVisible: false,
selectedDevices: [],
isAllSelected: false,
+ searchKeyword: "",
+ activeSearchKeyword: "",
currentAgentId: this.$route.query.agentId || '',
currentPage: 1,
pageSize: 5,
deviceList: [],
loading: false,
userApi: null,
+
};
},
computed: {
+ filteredDeviceList() {
+ const keyword = this.activeSearchKeyword.toLowerCase();
+ if (!keyword) return this.deviceList;
+ return this.deviceList.filter(device =>
+ (device.model && device.model.toLowerCase().includes(keyword)) ||
+ (device.macAddress && device.macAddress.toLowerCase().includes(keyword))
+ );
+ },
+
paginatedDeviceList() {
const start = (this.currentPage - 1) * this.pageSize;
const end = start + this.pageSize;
- return this.deviceList.slice(start, end);
+ return this.filteredDeviceList.slice(start, end);
},
pageCount() {
- return Math.ceil(this.deviceList.length / this.pageSize);
+ return Math.ceil(this.filteredDeviceList.length / this.pageSize);
+
},
visiblePages() {
const pages = [];
@@ -108,7 +148,7 @@ export default {
pages.push(i);
}
return pages;
- },
+ }
},
mounted() {
const agentId = this.$route.query.agentId;
@@ -117,6 +157,10 @@ export default {
}
},
methods: {
+ handleSearch() {
+ this.activeSearchKeyword = this.searchKeyword;
+ this.currentPage = 1;
+ },
handleSelectionChange(val) {
this.selectedDevices = val;
@@ -126,6 +170,55 @@ export default {
this.$refs.deviceTable.toggleAllSelection();
},
+ deleteSelected() {
+ if (this.selectedDevices.length === 0) {
+ this.$message.warning({
+ message: '请至少选择一条记录',
+ showClose: true
+ });
+ return;
+ }
+
+ this.$confirm(`确认要解绑选中的 ${this.selectedDevices.length} 台设备吗？`, '警告', {
+ confirmButtonText: '确定',
+ cancelButtonText: '取消',
+ type: 'warning'
+ }).then(() => {
+ const deviceIds = this.selectedDevices.map(device => device.device_id);
+ this.batchUnbindDevices(deviceIds);
+ });
+ },
+
+ batchUnbindDevices(deviceIds) {
+ const promises = deviceIds.map(id => {
+ return new Promise((resolve, reject) => {
+ Api.device.unbindDevice(id, ({ data }) => {
+ if (data.code === 0) {
+ resolve();
+ } else {
+ reject(data.msg || '解绑失败');
+ }
+ });
+ });
+ });
+
+ Promise.all(promises)
+ .then(() => {
+ this.$message.success({
+ message: `成功解绑 ${deviceIds.length} 台设备`,
+ showClose: true
+ });
+ this.fetchBindDevices(this.currentAgentId);
+ this.selectedDevices = [];
+ this.isAllSelected = false;
+ })
+ .catch(error => {
+ this.$message.error({
+ message: error || '批量解绑过程中出现错误',
+ showClose: true
+ });
+ });
+ },
handleAddDevice() {
this.addDeviceDialogVisible = true;
@@ -176,9 +269,7 @@ export default {
Api.device.getAgentBindDevices(agentId, ({ data }) => {
this.loading = false;
if (data.code === 0) {
- // 格式化日期并按照绑定时间降序排列
this.deviceList = data.data.map(device => {
- // 格式化绑定时间
const bindDate = new Date(device.createDate);
const formattedBindTime = `${bindDate.getFullYear()}-${(bindDate.getMonth() + 1).toString().padStart(2, '0')}-${bindDate.getDate().toString().padStart(2, '0')} ${bindDate.getHours().toString().padStart(2, '0')}:${bindDate.getMinutes().toString().padStart(2, '0')}:${bindDate.getSeconds().toString().padStart(2, '0')}`;
return {
@@ -186,25 +277,30 @@ export default {
model: device.board,
firmwareVersion: device.appVersion,
macAddress: device.macAddress,
- bindTime: formattedBindTime, // 使用格式化后的时间
+ bindTime: formattedBindTime,
lastConversation: device.lastConnectedAt,
remark: device.alias,
isEdit: false,
otaSwitch: device.autoUpdate === 1,
- // 添加原始时间用于排序
rawBindTime: new Date(device.createDate).getTime()
};
})
- // 按照绑定时间降序排序
- .sort((a, b) => a.rawBindTime - b.rawBindTime);
+ .sort((a, b) => a.rawBindTime - b.rawBindTime);
+ this.activeSearchKeyword = "";
+ this.searchKeyword = "";
} else {
this.$message.error(data.msg || '获取设备列表失败');
}
});
},
+ headerCellClassName({columnIndex}) {
+ if (columnIndex === 0) {
+ return "custom-selection-header";
+ }
+ return "";
+ }
}
};
-
diff --git a/main/manager-web/src/views/ParamsManagement.vue b/main/manager-web/src/views/ParamsManagement.vue
index 02f912a1..c815a77b 100644
--- a/main/manager-web/src/views/ParamsManagement.vue
+++ b/main/manager-web/src/views/ParamsManagement.vue
@@ -16,7 +16,7 @@
+ :header-cell-class-name="headerCellClassName" :max-height="tableMaxHeight">
删除
@@ -80,10 +89,12 @@ export default {
paramsList: [],
currentPage: 1,
pageSize: 5,
+ pageSizeOptions: [5, 10, 20, 50, 100],
total: 0,
dialogVisible: false,
dialogTitle: "新增参数",
isAllSelected: false,
+ tableMaxHeight: 400,
paramForm: {
id: null,
paramCode: "",
@@ -94,7 +105,9 @@ export default {
},
created() {
this.fetchParams();
+
},
+
computed: {
pageCount() {
return Math.ceil(this.total / this.pageSize);
@@ -116,6 +129,11 @@ export default {
},
},
methods: {
+ handlePageSizeChange(val) {
+ this.pageSize = val;
+ this.currentPage = 1;
+ this.fetchParams();
+ },
fetchParams() {
Api.admin.getParamsList(
{
@@ -190,7 +208,6 @@ export default {
return;
}
-
const paramCount = params.length;
this.$confirm(`确定要删除选中的${paramCount}个参数吗？`, '警告', {
confirmButtonText: '确定',
@@ -210,7 +227,7 @@ export default {
message: `成功删除${paramCount}个参数`,
showClose: true
});
- this.fetchParams(); // 刷新参数列表
+ this.fetchParams();
} else {
this.$message.error({
message: data.msg || '删除失败，请重试',
@@ -279,12 +296,16 @@ export default {
}
.main-wrapper {
- margin: 5px 22px;
- border-radius: 15px;
- min-height: 600px;
- box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
- position: relative;
- background: rgba(237, 242, 255, 0.5);
+ margin: 5px 22px;
+ border-radius: 15px;
+ min-height: calc(100vh - 350px);
+ height: auto;
+ max-height: 80vh;
+ box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+ position: relative;
+ background: rgba(237, 242, 255, 0.5);
+ display: flex;
+ flex-direction: column;
}
.operation-bar {
@@ -344,6 +365,7 @@ export default {
justify-content: space-between;
align-items: center;
margin-top: 10px;
+ padding-bottom: 10px;
}
.ctrl_btn {
@@ -386,9 +408,14 @@ export default {
gap: 8px;
margin-top: 15px;
+ .el-select {
+ margin-right: 8px;
+ }
+
.pagination-btn:first-child,
.pagination-btn:nth-child(2),
- .pagination-btn:nth-last-child(2) {
+ .pagination-btn:nth-last-child(2),
+ .pagination-btn:nth-child(3) {
min-width: 60px;
height: 32px;
padding: 0 12px;
@@ -410,7 +437,7 @@ export default {
}
}
- .pagination-btn:not(:first-child):not(:nth-child(2)):not(:nth-last-child(2)) {
+ .pagination-btn:not(:first-child):not(:nth-child(3)):not(:nth-child(2)):not(:nth-last-child(2)) {
min-width: 28px;
height: 32px;
padding: 0;
@@ -446,6 +473,7 @@ export default {
:deep(.transparent-table) {
background: white;
+ flex: 1;
.el-table__header th {
background: white !important;
@@ -534,4 +562,29 @@ export default {
overflow: hidden;
text-overflow: ellipsis;
}
+
+.page-size-select {
+ width: 100px;
+ margin-right: 8px;
+
+ :deep(.el-input__inner) {
+ height: 32px;
+ line-height: 32px;
+ border-radius: 4px;
+ border: 1px solid #e4e7ed;
+ background: #dee7ff;
+ color: #606266;
+ font-size: 14px;
+ }
+
+ :deep(.el-input__suffix) {
+ line-height: 32px;
+ }
+}
+
+:deep(.el-table) {
+ .el-table__body-wrapper {
+ transition: height 0.3s ease;
+ }
+}
diff --git a/main/manager-web/src/views/UserManagement.vue b/main/manager-web/src/views/UserManagement.vue
index 617ad04c..d43af456 100644
--- a/main/manager-web/src/views/UserManagement.vue
+++ b/main/manager-web/src/views/UserManagement.vue
@@ -69,6 +69,7 @@