|
|
|
@@ -16,6 +16,7 @@ import {
|
|
|
|
|
getCursorEquipmentExtractRecords,
|
|
|
|
|
getCursorEquipmentIpLogs,
|
|
|
|
|
getCursorEquipmentList,
|
|
|
|
|
getCursorEquipmentStats,
|
|
|
|
|
updateCursorEquipment,
|
|
|
|
|
} from '../../../api/cursorEquipment';
|
|
|
|
|
|
|
|
|
@@ -33,6 +34,15 @@ const selectedRows = ref<EquipmentRow[]>([]);
|
|
|
|
|
const tableData = ref<EquipmentRow[]>([]);
|
|
|
|
|
const total = ref(0);
|
|
|
|
|
const isMobile = ref(false);
|
|
|
|
|
const summaryStats = ref({
|
|
|
|
|
total: 0,
|
|
|
|
|
online: 0,
|
|
|
|
|
offline: 0,
|
|
|
|
|
active: 0,
|
|
|
|
|
inactive: 0,
|
|
|
|
|
expired: 0,
|
|
|
|
|
disabled: 0,
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const query = reactive({
|
|
|
|
|
keyword: '',
|
|
|
|
@@ -93,18 +103,14 @@ const statusMap: Record<string, { label: string; type: string }> = {
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const summary = computed(() => {
|
|
|
|
|
const active = tableData.value.filter((item) => item.status === 'active').length;
|
|
|
|
|
const inactive = tableData.value.filter((item) => item.status === 'inactive').length;
|
|
|
|
|
const disabled = tableData.value.filter((item) => item.status === 'disabled').length;
|
|
|
|
|
const expired = tableData.value.filter((item) => item.status === 'expired').length;
|
|
|
|
|
const online = tableData.value.filter((item) => item.isOnline).length;
|
|
|
|
|
const offline = tableData.value.length - online;
|
|
|
|
|
const stats = summaryStats.value;
|
|
|
|
|
return [
|
|
|
|
|
{ label: '当前页设备', value: tableData.value.length, type: 'primary' },
|
|
|
|
|
{ label: '在线 / 离线', isOnlineOffline: true, online, offline },
|
|
|
|
|
{ label: '已激活设备', value: active, type: 'success' },
|
|
|
|
|
{ label: '未激活', value: inactive, type: 'info' },
|
|
|
|
|
{ label: '禁用/过期', value: disabled + expired, type: 'danger' },
|
|
|
|
|
{ label: '设备总数', value: stats.total, type: 'primary' },
|
|
|
|
|
{ label: '在线 / 离线', isOnlineOffline: true, online: stats.online, offline: stats.offline },
|
|
|
|
|
{ label: '已激活设备', value: stats.active, type: 'success' },
|
|
|
|
|
{ label: '未激活', value: stats.inactive, type: 'info' },
|
|
|
|
|
{ label: '过期设备', value: stats.expired, type: 'warning' },
|
|
|
|
|
{ label: '禁用设备', value: stats.disabled, type: 'danger' },
|
|
|
|
|
];
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
@@ -241,6 +247,27 @@ function handleSelectionChange(rows: EquipmentRow[]) {
|
|
|
|
|
selectedRows.value = rows;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function fetchSummary() {
|
|
|
|
|
try {
|
|
|
|
|
const res = await getCursorEquipmentStats();
|
|
|
|
|
if (res?.code !== 200) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
const data = res?.data || {};
|
|
|
|
|
summaryStats.value = {
|
|
|
|
|
total: Number(data.total || 0),
|
|
|
|
|
online: Number(data.online || 0),
|
|
|
|
|
offline: Number(data.offline || 0),
|
|
|
|
|
active: Number(data.active || 0),
|
|
|
|
|
inactive: Number(data.inactive || 0),
|
|
|
|
|
expired: Number(data.expired || 0),
|
|
|
|
|
disabled: Number(data.disabled || 0),
|
|
|
|
|
};
|
|
|
|
|
} catch {
|
|
|
|
|
// 统计失败不影响列表展示
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function fetchList() {
|
|
|
|
|
loading.value = true;
|
|
|
|
|
try {
|
|
|
|
@@ -305,7 +332,7 @@ async function handleSave(payload: EquipmentRow) {
|
|
|
|
|
}
|
|
|
|
|
ElMessage.success(payload.id ? '设备已更新' : '设备已新增');
|
|
|
|
|
editVisible.value = false;
|
|
|
|
|
await fetchList();
|
|
|
|
|
await Promise.all([fetchList(), fetchSummary()]);
|
|
|
|
|
} finally {
|
|
|
|
|
actionLoading.value = false;
|
|
|
|
|
}
|
|
|
|
@@ -322,7 +349,7 @@ async function handleDelete() {
|
|
|
|
|
}
|
|
|
|
|
ElMessage.success('设备已删除');
|
|
|
|
|
deleteVisible.value = false;
|
|
|
|
|
await fetchList();
|
|
|
|
|
await Promise.all([fetchList(), fetchSummary()]);
|
|
|
|
|
} finally {
|
|
|
|
|
actionLoading.value = false;
|
|
|
|
|
}
|
|
|
|
@@ -347,7 +374,7 @@ async function handleActivate(row: EquipmentRow) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
ElMessage.success('设备已激活');
|
|
|
|
|
await fetchList();
|
|
|
|
|
await Promise.all([fetchList(), fetchSummary()]);
|
|
|
|
|
} finally {
|
|
|
|
|
loading.value = false;
|
|
|
|
|
}
|
|
|
|
@@ -444,10 +471,14 @@ function updateDeviceType() {
|
|
|
|
|
isMobile.value = window.innerWidth <= 768;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function refreshPage() {
|
|
|
|
|
await Promise.all([fetchList(), fetchSummary()]);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
updateDeviceType();
|
|
|
|
|
window.addEventListener('resize', updateDeviceType);
|
|
|
|
|
fetchList();
|
|
|
|
|
refreshPage();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
onUnmounted(() => {
|
|
|
|
@@ -494,7 +525,7 @@ onUnmounted(() => {
|
|
|
|
|
<el-button @click="resetQuery">重置</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="toolbar-right">
|
|
|
|
|
<el-button :loading="loading" @click="fetchList">刷新</el-button>
|
|
|
|
|
<el-button :loading="loading" @click="refreshPage">刷新</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
@@ -650,7 +681,7 @@ onUnmounted(() => {
|
|
|
|
|
|
|
|
|
|
.summary-grid {
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: repeat(5, minmax(120px, 1fr));
|
|
|
|
|
grid-template-columns: repeat(6, minmax(120px, 1fr));
|
|
|
|
|
gap: 12px;
|
|
|
|
|
margin-bottom: 14px;
|
|
|
|
|
}
|
|
|
|
@@ -685,6 +716,10 @@ onUnmounted(() => {
|
|
|
|
|
color: #909399;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.is-warning {
|
|
|
|
|
color: #e6a23c;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.is-danger {
|
|
|
|
|
color: #f56c6c;
|
|
|
|
|
}
|
|
|
|
|