465 lines
10 KiB
Vue
465 lines
10 KiB
Vue
<template>
|
|
<div class="console-info-panel">
|
|
<h2 class="panel-title">系统状态</h2>
|
|
|
|
<div class="info-grid">
|
|
<!-- 用户登录状态 -->
|
|
<div class="info-card">
|
|
<div class="info-label">用户登录状态</div>
|
|
<div class="info-value">
|
|
<span :class="['status-badge', isLoggedIn ? 'status-success' : 'status-error']">
|
|
{{ isLoggedIn ? '已登录' : '未登录' }}
|
|
</span>
|
|
</div>
|
|
<div v-if="isLoggedIn && userName" class="info-detail">
|
|
<span class="detail-label">账号:</span>
|
|
<span class="detail-value">{{ userName }}</span>
|
|
</div>
|
|
<div v-if="isLoggedIn && remainingDays !== null" class="info-detail">
|
|
<span class="detail-label">剩余天数:</span>
|
|
<span :class="['detail-value', remainingDays <= 0 ? 'text-error' : remainingDays <= 3 ? 'text-warning' : '']">
|
|
{{ remainingDays }} 天
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 当前平台 -->
|
|
<div class="info-card">
|
|
<div class="info-label">当前平台</div>
|
|
<div class="info-value">{{ currentPlatform }}</div>
|
|
<div class="info-detail">
|
|
<span class="detail-label">平台登录:</span>
|
|
<span :class="['status-badge', isPlatformLoggedIn ? 'status-success' : 'status-warning']">
|
|
{{ isPlatformLoggedIn ? '已登录' : '未登录' }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 设备信息 -->
|
|
<div class="info-card">
|
|
<div class="info-label">设备信息</div>
|
|
<div class="info-detail">
|
|
<span class="detail-label">设备SN码:</span>
|
|
<span class="detail-value">{{ snCode || '-' }}</span>
|
|
</div>
|
|
<div class="info-detail">
|
|
<span class="detail-label">设备ID:</span>
|
|
<span class="detail-value">{{ deviceId || '-' }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 系统信息 -->
|
|
<div class="info-card system-info-card">
|
|
<div class="info-label">系统信息</div>
|
|
<div class="system-info-grid">
|
|
<div class="system-info-item">
|
|
<span class="system-info-label">运行时间:</span>
|
|
<span class="system-info-value">{{ uptime }}</span>
|
|
</div>
|
|
<div class="system-info-item">
|
|
<span class="system-info-label">CPU:</span>
|
|
<span class="system-info-value">{{ cpuUsage }}</span>
|
|
</div>
|
|
<div class="system-info-item">
|
|
<span class="system-info-label">内存:</span>
|
|
<span class="system-info-value">{{ memUsage }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 任务区域 -->
|
|
<div class="task-section">
|
|
<!-- 当前执行任务 - 100%宽度 -->
|
|
<div class="info-card task-card-full">
|
|
<div class="info-label">当前执行任务</div>
|
|
<div v-if="currentTask" class="task-info">
|
|
<div class="task-name">{{ currentTask.taskName || currentTask.taskType || '-' }}</div>
|
|
<div class="task-status">
|
|
<span :class="['status-badge', getTaskStatusClass(currentTask.status)]">
|
|
{{ getTaskStatusText(currentTask.status) }}
|
|
</span>
|
|
</div>
|
|
<div v-if="currentTask.progress !== null" class="task-progress">
|
|
<div class="progress-bar">
|
|
<div
|
|
class="progress-fill"
|
|
:style="{ width: currentTask.progress + '%' }"
|
|
></div>
|
|
</div>
|
|
<span class="progress-text">{{ currentTask.progress }}%</span>
|
|
</div>
|
|
<div v-if="currentTask.currentStep" class="task-step">
|
|
<span class="step-label">当前步骤:</span>
|
|
<span class="step-value">{{ currentTask.currentStep }}</span>
|
|
</div>
|
|
</div>
|
|
<div v-else class="no-task">
|
|
<span class="no-task-text">暂无执行中的任务</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 即将执行的任务列表 -->
|
|
<div class="info-card task-card-full pending-tasks-card">
|
|
<div class="info-label">即将执行的任务</div>
|
|
<div v-if="pendingTasks && pendingTasks.length > 0" class="pending-tasks-list">
|
|
<div v-for="(task, index) in pendingTasks" :key="index" class="pending-task-item">
|
|
<div class="pending-task-name">{{ task.taskName || task.taskType || '未知任务' }}</div>
|
|
<div class="pending-task-meta">
|
|
<span :class="['status-badge', getTaskStatusClass(task.status)]">
|
|
{{ getTaskStatusText(task.status) }}
|
|
</span>
|
|
<span v-if="task.scheduledTime" class="task-time">
|
|
计划时间: {{ formatTime(task.scheduledTime) }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="no-task">
|
|
<span class="no-task-text">暂无待执行的任务</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'ConsoleInfoPanel',
|
|
props: {
|
|
isLoggedIn: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
userName: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
remainingDays: {
|
|
type: Number,
|
|
default: null
|
|
},
|
|
currentPlatform: {
|
|
type: String,
|
|
default: '-'
|
|
},
|
|
isPlatformLoggedIn: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
snCode: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
deviceId: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
currentTask: {
|
|
type: Object,
|
|
default: null
|
|
},
|
|
pendingTasks: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
uptime: {
|
|
type: String,
|
|
default: '0分钟'
|
|
},
|
|
cpuUsage: {
|
|
type: String,
|
|
default: '0%'
|
|
},
|
|
memUsage: {
|
|
type: String,
|
|
default: '0MB'
|
|
}
|
|
},
|
|
methods: {
|
|
formatTime(timeStr) {
|
|
if (!timeStr) return '-';
|
|
try {
|
|
const date = new Date(timeStr);
|
|
return date.toLocaleString('zh-CN', {
|
|
month: '2-digit',
|
|
day: '2-digit',
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
});
|
|
} catch (e) {
|
|
return timeStr;
|
|
}
|
|
},
|
|
getTaskStatusClass(status) {
|
|
const statusMap = {
|
|
'running': 'status-info',
|
|
'pending': 'status-warning',
|
|
'completed': 'status-success',
|
|
'failed': 'status-error',
|
|
'timeout': 'status-error',
|
|
'cancelled': 'status-warning'
|
|
};
|
|
return statusMap[status] || 'status-warning';
|
|
},
|
|
|
|
getTaskStatusText(status) {
|
|
const statusMap = {
|
|
'running': '执行中',
|
|
'pending': '待执行',
|
|
'completed': '已完成',
|
|
'failed': '失败',
|
|
'timeout': '超时',
|
|
'cancelled': '已取消'
|
|
};
|
|
return statusMap[status] || status || '未知';
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.console-info-panel {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.panel-title {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
margin-bottom: 20px;
|
|
color: #333;
|
|
}
|
|
|
|
.info-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 20px;
|
|
}
|
|
|
|
.info-card {
|
|
background: #fff;
|
|
border: 1px solid #e0e0e0;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
|
|
}
|
|
|
|
.task-section {
|
|
grid-column: 1 / -1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
.task-card-full {
|
|
width: 100%;
|
|
}
|
|
|
|
.pending-tasks-card {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.pending-tasks-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.pending-task-item {
|
|
padding: 12px;
|
|
background: #f9f9f9;
|
|
border-radius: 6px;
|
|
border-left: 3px solid #ff9800;
|
|
|
|
.pending-task-name {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #333;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.pending-task-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
font-size: 12px;
|
|
|
|
.task-time {
|
|
color: #666;
|
|
}
|
|
}
|
|
}
|
|
|
|
.info-label {
|
|
font-size: 14px;
|
|
color: #666;
|
|
margin-bottom: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.info-value {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.info-detail {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 8px;
|
|
font-size: 14px;
|
|
|
|
.detail-label {
|
|
color: #666;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.detail-value {
|
|
color: #333;
|
|
font-weight: 500;
|
|
|
|
&.text-error {
|
|
color: #f44336;
|
|
}
|
|
|
|
&.text-warning {
|
|
color: #ff9800;
|
|
}
|
|
}
|
|
}
|
|
|
|
.status-badge {
|
|
display: inline-block;
|
|
padding: 4px 12px;
|
|
border-radius: 12px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
|
|
&.status-success {
|
|
background: #e8f5e9;
|
|
color: #4caf50;
|
|
}
|
|
|
|
&.status-error {
|
|
background: #ffebee;
|
|
color: #f44336;
|
|
}
|
|
|
|
&.status-warning {
|
|
background: #fff3e0;
|
|
color: #ff9800;
|
|
}
|
|
|
|
&.status-info {
|
|
background: #e3f2fd;
|
|
color: #2196f3;
|
|
}
|
|
}
|
|
|
|
.task-info {
|
|
.task-name {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.task-status {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.task-progress {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 10px;
|
|
|
|
.progress-bar {
|
|
flex: 1;
|
|
height: 8px;
|
|
background: #e0e0e0;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, #4caf50, #8bc34a);
|
|
transition: width 0.3s ease;
|
|
}
|
|
}
|
|
|
|
.progress-text {
|
|
font-size: 12px;
|
|
color: #666;
|
|
min-width: 40px;
|
|
}
|
|
}
|
|
|
|
.task-step {
|
|
font-size: 14px;
|
|
color: #666;
|
|
|
|
.step-label {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.step-value {
|
|
color: #333;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
}
|
|
|
|
.no-task {
|
|
text-align: center;
|
|
padding: 20px;
|
|
color: #999;
|
|
|
|
.no-task-text {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
.system-info-card {
|
|
.system-info-grid {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 20px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.system-info-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.system-info-label {
|
|
font-weight: 500;
|
|
color: #666;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.system-info-value {
|
|
color: #333;
|
|
font-weight: 600;
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.info-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.task-section {
|
|
grid-column: 1;
|
|
}
|
|
}
|
|
</style>
|
|
|