新增设备状态提示功能,优化设备状态获取逻辑,提升用户体验

This commit is contained in:
yahaozhang
2025-09-16 14:36:54 +08:00
parent 65e6d94f00
commit cac99b5c1d

View File

@@ -1,5 +1,16 @@
<template>
<div class="link-generate" :class="{ 'mobile-layout': isMobile }">
<!-- 设备状态提示 -->
<div class="device-status-alert" v-if="deviceStatusLoaded">
<el-alert
:title="deviceStatusText"
:type="deviceStatusType"
show-icon
:closable="false"
class="status-alert"
/>
</div>
<!-- 生成表单 -->
<el-card class="generate-form-card">
<template #header>
@@ -525,6 +536,7 @@ import {
import { generateLinks, fetchLinks, deleteLink, batchDeleteLinks, batchDeleteByStatus } from '@/api/links'
import { copyToClipboard as copyText, exportToExcel as exportExcelUtil } from '@/utils/links'
import { LINK_CONFIG, STATUS_CONFIG, EXPORT_CONFIG } from '@/config/links'
import { getAllDeviceStatus } from '@/api/devices'
// 响应式数据
const generateFormRef = ref()
@@ -534,6 +546,11 @@ const linkList = ref([])
const isMobile = ref(false)
// 设备状态相关
const deviceStatusLoaded = ref(false)
const deviceStatusText = ref('')
const deviceStatusType = ref('info')
// 检测移动端
const checkMobile = () => {
isMobile.value = window.innerWidth <= 768
@@ -692,6 +709,33 @@ const refreshList = () => {
return getLinkList()
}
// 获取设备状态
const getDeviceStatus = async () => {
try {
const data = await getAllDeviceStatus()
// 计算空闲设备数量(冷却空闲 + 完全空闲)
const idleCooldownCount = data?.idleCooldownCount || 0
const idleFreeCount = data?.idleFreeCount || 0
const totalIdleCount = idleCooldownCount + idleFreeCount
deviceStatusLoaded.value = true
if (totalIdleCount > 0) {
deviceStatusText.value = `当前有空闲设备可用`
deviceStatusType.value = 'success'
} else {
deviceStatusText.value = '当前暂无空闲设备,请稍后再试'
deviceStatusType.value = 'warning'
}
} catch (error) {
console.error('获取设备状态失败:', error)
deviceStatusLoaded.value = true
deviceStatusText.value = '无法获取设备状态'
deviceStatusType.value = 'error'
}
}
// 分页处理
const handleSizeChange = (size) => {
pagination.pageSize = size
@@ -1055,6 +1099,8 @@ const copyCurrentBatchSingleLink = async () => {
if (batchDownloadDialog.count !== 1 || !batchDownloadDialog.singleCodeNo) return
const url = generateLinkUrl(batchDownloadDialog.singleCodeNo)
await copyToClipboard(url)
// 复制完成后关闭弹窗
closeBatchDownloadDialog()
}
const handleBatchDeleteByStatus = async () => {
@@ -1118,6 +1164,7 @@ onMounted(() => {
checkMobile()
window.addEventListener('resize', checkMobile)
getLinkList()
getDeviceStatus()
// 初始化表单默认值
generateForm.times = 1
@@ -1136,6 +1183,15 @@ onUnmounted(() => {
min-height: 100vh;
}
/* 设备状态提示样式 */
.device-status-alert {
margin-bottom: 20px;
}
.status-alert {
border-radius: 8px;
}
.generate-form-card,
.link-list-card {
margin-bottom: 20px;
@@ -1458,6 +1514,14 @@ onUnmounted(() => {
background: #f5f7fa;
}
.device-status-alert {
margin-bottom: 16px;
}
.status-alert {
border-radius: 12px;
}
.mobile-layout {
background: #f5f7fa;
}