新增设备状态提示功能,优化设备状态获取逻辑,提升用户体验
This commit is contained in:
@@ -1,5 +1,16 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="link-generate" :class="{ 'mobile-layout': isMobile }">
|
<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">
|
<el-card class="generate-form-card">
|
||||||
<template #header>
|
<template #header>
|
||||||
@@ -525,6 +536,7 @@ import {
|
|||||||
import { generateLinks, fetchLinks, deleteLink, batchDeleteLinks, batchDeleteByStatus } from '@/api/links'
|
import { generateLinks, fetchLinks, deleteLink, batchDeleteLinks, batchDeleteByStatus } from '@/api/links'
|
||||||
import { copyToClipboard as copyText, exportToExcel as exportExcelUtil } from '@/utils/links'
|
import { copyToClipboard as copyText, exportToExcel as exportExcelUtil } from '@/utils/links'
|
||||||
import { LINK_CONFIG, STATUS_CONFIG, EXPORT_CONFIG } from '@/config/links'
|
import { LINK_CONFIG, STATUS_CONFIG, EXPORT_CONFIG } from '@/config/links'
|
||||||
|
import { getAllDeviceStatus } from '@/api/devices'
|
||||||
|
|
||||||
// 响应式数据
|
// 响应式数据
|
||||||
const generateFormRef = ref()
|
const generateFormRef = ref()
|
||||||
@@ -534,6 +546,11 @@ const linkList = ref([])
|
|||||||
|
|
||||||
const isMobile = ref(false)
|
const isMobile = ref(false)
|
||||||
|
|
||||||
|
// 设备状态相关
|
||||||
|
const deviceStatusLoaded = ref(false)
|
||||||
|
const deviceStatusText = ref('')
|
||||||
|
const deviceStatusType = ref('info')
|
||||||
|
|
||||||
// 检测移动端
|
// 检测移动端
|
||||||
const checkMobile = () => {
|
const checkMobile = () => {
|
||||||
isMobile.value = window.innerWidth <= 768
|
isMobile.value = window.innerWidth <= 768
|
||||||
@@ -692,6 +709,33 @@ const refreshList = () => {
|
|||||||
return getLinkList()
|
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) => {
|
const handleSizeChange = (size) => {
|
||||||
pagination.pageSize = size
|
pagination.pageSize = size
|
||||||
@@ -1055,6 +1099,8 @@ const copyCurrentBatchSingleLink = async () => {
|
|||||||
if (batchDownloadDialog.count !== 1 || !batchDownloadDialog.singleCodeNo) return
|
if (batchDownloadDialog.count !== 1 || !batchDownloadDialog.singleCodeNo) return
|
||||||
const url = generateLinkUrl(batchDownloadDialog.singleCodeNo)
|
const url = generateLinkUrl(batchDownloadDialog.singleCodeNo)
|
||||||
await copyToClipboard(url)
|
await copyToClipboard(url)
|
||||||
|
// 复制完成后关闭弹窗
|
||||||
|
closeBatchDownloadDialog()
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleBatchDeleteByStatus = async () => {
|
const handleBatchDeleteByStatus = async () => {
|
||||||
@@ -1118,6 +1164,7 @@ onMounted(() => {
|
|||||||
checkMobile()
|
checkMobile()
|
||||||
window.addEventListener('resize', checkMobile)
|
window.addEventListener('resize', checkMobile)
|
||||||
getLinkList()
|
getLinkList()
|
||||||
|
getDeviceStatus()
|
||||||
|
|
||||||
// 初始化表单默认值
|
// 初始化表单默认值
|
||||||
generateForm.times = 1
|
generateForm.times = 1
|
||||||
@@ -1136,6 +1183,15 @@ onUnmounted(() => {
|
|||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 设备状态提示样式 */
|
||||||
|
.device-status-alert {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-alert {
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
.generate-form-card,
|
.generate-form-card,
|
||||||
.link-list-card {
|
.link-list-card {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
@@ -1458,6 +1514,14 @@ onUnmounted(() => {
|
|||||||
background: #f5f7fa;
|
background: #f5f7fa;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.device-status-alert {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-alert {
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
.mobile-layout {
|
.mobile-layout {
|
||||||
background: #f5f7fa;
|
background: #f5f7fa;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user