-
@@ -136,6 +101,8 @@ import HeaderBar from "@/components/HeaderBar.vue";
import ManualAddDeviceDialog from "@/components/ManualAddDeviceDialog.vue";
import VersionFooter from "@/components/VersionFooter.vue";
import MacAddressMask from "@/components/MacAddressMask.vue";
+import CustomButton from "@/components/CustomButton.vue";
+import CustomTable from "@/components/CustomTable.vue";
export default {
components: {
@@ -144,6 +111,8 @@ export default {
ManualAddDeviceDialog,
VersionFooter,
MacAddressMask,
+ CustomButton,
+ CustomTable,
},
data() {
return {
@@ -160,7 +129,7 @@ export default {
loading: false,
userApi: null,
firmwareTypes: [],
- mqttServiceAvailable: false, // MQTT服务是否可用
+ mqttServiceAvailable: false,
};
},
computed: {
@@ -178,28 +147,24 @@ export default {
const end = start + this.pageSize;
return this.filteredDeviceList.slice(start, end);
},
- pageCount() {
- return Math.ceil(this.filteredDeviceList.length / this.pageSize);
- },
- // 计算当前页是否全选
isCurrentPageAllSelected() {
return this.paginatedDeviceList.length > 0 &&
this.paginatedDeviceList.every(device => device.selected);
},
- 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);
+ tableColumns() {
+ const columns = [
+ { prop: 'model', label: this.$t('device.model'), align: 'center' },
+ { prop: 'firmwareVersion', label: this.$t('device.firmwareVersion'), align: 'center' },
+ { prop: 'macAddress', label: this.$t('device.macAddress'), align: 'center' },
+ { prop: 'bindTime', label: this.$t('device.bindTime'), align: 'center' },
+ { prop: 'lastConversation', label: this.$t('device.lastConversation'), align: 'center' },
+ ];
+ if (this.mqttServiceAvailable) {
+ columns.push({ prop: 'deviceStatus', label: this.$t('device.deviceStatus'), align: 'center' });
}
-
- for (let i = start; i <= end; i++) {
- pages.push(i);
- }
- return pages;
+ columns.push({ prop: 'remark', label: this.$t('device.remark'), align: 'center' });
+ columns.push({ prop: 'otaSwitch', label: this.$t('device.autoUpdate'), align: 'center' });
+ return columns;
},
},
mounted() {
@@ -313,14 +278,12 @@ export default {
row._submitting = false;
});
},
- // 备注输入框：失焦时提交
onRemarkBlur(row) {
row.isEdit = false;
setTimeout(() => {
this.submitRemark(row);
- }, 100); // 延迟 100ms，避开 enter+blur 同时触发的窗口
+ }, 100);
},
- // 备注输入框：按回车时提交
onRemarkEnter(row) {
row.isEdit = false;
this.submitRemark(row);
@@ -354,15 +317,6 @@ export default {
sessionStorage.setItem('devicePath', window.location.href);
window.location.href = url;
},
- goFirst() {
- this.currentPage = 1;
- },
- goPrev() {
- if (this.currentPage > 1) this.currentPage--;
- },
- goNext() {
- if (this.currentPage < this.pageCount) this.currentPage++;
- },
goToPage(page) {
this.currentPage = page;
},
@@ -389,7 +343,6 @@ export default {
otaSwitch: device.autoUpdate === 1,
rawBindTime: new Date(device.createDate).getTime(),
selected: false,
- // 初始设置为离线状态
deviceStatus: 'offline'
};
})
@@ -397,7 +350,6 @@ export default {
this.activeSearchKeyword = "";
this.searchKeyword = "";
- // 获取设备列表后，立即获取设备状态
this.fetchDeviceStatus(agentId);
} else {
this.$message.error(data.msg || this.$t('device.getListFailed'));
@@ -405,47 +357,35 @@ export default {
});
},
- // 获取设备状态
fetchDeviceStatus(agentId) {
- // 开启表格等待状态，处理动态加载表头导致鼠标所在行的hover事件无法移除的问题
this.loading = true;
Api.device.getDeviceStatus(agentId, ({ data }) => {
this.loading = false;
if (data.code === 0) {
try {
- // 解析后端返回的设备状态JSON
const statusData = JSON.parse(data.data);
- // 直接使用解析后的数据作为设备状态映射（不需要devices字段包装）
if (statusData && typeof statusData === 'object') {
- // 成功获取到设备状态
this.mqttServiceAvailable = true;
- // 更新设备状态
this.updateDeviceStatusFromResponse(statusData);
} else {
- // 数据格式不正确，MQTT服务不可用
this.mqttServiceAvailable = false;
}
} catch (error) {
- // JSON解析失败，MQTT服务不可用
this.mqttServiceAvailable = false;
}
} else {
- // 接口调用失败，MQTT服务不可用
this.mqttServiceAvailable = false;
}
});
},
- // 根据API响应更新设备状态
updateDeviceStatusFromResponse(deviceStatusMap) {
this.deviceList.forEach(device => {
- // 构建设备的MQTT客户端ID
const macAddress = device.macAddress ? device.macAddress.replace(/:/g, '_') : 'unknown';
const groupId = device.model ? device.model.replace(/:/g, '_') : 'GID_default';
const mqttClientId = `${groupId}@@@${macAddress}@@@${macAddress}`;
- // 从状态映射中获取设备状态
if (deviceStatusMap[mqttClientId]) {
const statusInfo = deviceStatusMap[mqttClientId];
@@ -462,17 +402,10 @@ export default {
device.deviceStatus = isOnline ? 'online' : 'offline';
} else {
- // 如果没有找到对应的状态信息，默认为离线
device.deviceStatus = 'offline';
}
});
},
- headerCellClassName({ columnIndex }) {
- if (columnIndex === 0) {
- return "custom-selection-header";
- }
- return "";
- },
getFirmwareTypeName(type) {
const firmwareType = this.firmwareTypes.find(item => item.key === type)
return firmwareType ? firmwareType.name : type
@@ -492,7 +425,6 @@ export default {
this.$message.error(msg || this.$t('message.error'))
})
},
- // 判断是否可以生成表情、主题、字体bin文件
isGenerate(row) {
const version = row.firmwareVersion.replace(/\./g, '');
return Number(version) >= 200;
@@ -503,13 +435,13 @@ export default {
if (isNaN(ts)) return '-';
const date = new Date(ts);
if (isNaN(date.getTime())) return '-';
- return date.toLocaleString(); // 自动适配本地时区
+ return date.toLocaleString();
},
}
};
-
-
- {{ isCurrentPageAllSelected ? $t('common.deselectAll') : $t('common.selectAll') }}
-
-
- {{ $t('device.bindWithCode') }}
-
-
- {{ $t('device.manualAdd') }}
-
-
- {{ $t('device.unbind') }}
-
-
-
-
-
-
-
-
-
-
-
-
- {{ $t('dictManagement.totalRecords').replace('{total}', deviceList.length) }}
-
+
+
+ {{ getFirmwareTypeName(scope.row.model) }}
+
+
+ {{ $t('device.online') }}
+ {{ $t('device.offline') }}
+
+
+
+ {{ $t('device.unbind') }}
+
+
+ {{ $t('device.deviceThemeGeneration') }}
+
+
+
+
+
+ {{ $t('device.management') }}
+
+ {{ $t('device.search') }}
+
+ {{ isCurrentPageAllSelected ? $t('common.deselectAll') : $t('common.selectAll') }}
+
+
+ {{ $t('device.bindWithCode') }}
+
+
+ {{ $t('device.manualAdd') }}
+
+
+ {{ $t('device.unbind') }}
+
+
+
+