新增设备状态提示功能,优化设备状态获取逻辑,提升用户体验
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user