581 lines
32 KiB
HTML
581 lines
32 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}资源监控 - 机器人管理后台{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="page-shell system-page">
|
|
<div class="page-hero">
|
|
<div class="page-hero-copy">
|
|
<div class="page-eyebrow">Resource Overview</div>
|
|
<h1>资源监控</h1>
|
|
<p>直接观察 ABOT 所在服务器的关键资源、应用进程和基础设施状态，不再依赖额外的 glances 进程。</p>
|
|
<div class="hero-meta-row">
|
|
<div class="hero-meta-pill">
|
|
<span class="hero-meta-label">最近刷新</span>
|
|
<span class="hero-meta-value">{% raw %}{{ statusOverview.timestamp || '-' }}{% endraw %}</span>
|
|
</div>
|
|
<div class="hero-meta-pill" v-if="statusOverview.server">
|
|
<span class="hero-meta-label">主机</span>
|
|
<span class="hero-meta-value">{% raw %}{{ statusOverview.server.hostname || '-' }}{% endraw %}</span>
|
|
</div>
|
|
<div class="hero-meta-pill" v-if="statusOverview.process">
|
|
<span class="hero-meta-label">PID</span>
|
|
<span class="hero-meta-value">{% raw %}{{ statusOverview.process.pid || '-' }}{% endraw %}</span>
|
|
</div>
|
|
</div>
|
|
<div class="md2img-health-inline" v-loading="md2imgLoading">
|
|
<span class="health-title">转图运行时</span>
|
|
<el-tag size="mini" :type="runtimeTagType">{% raw %}{{ runtimeTagText }}{% endraw %}</el-tag>
|
|
<el-tag size="mini" :type="browserTagType">{% raw %}{{ browserTagText }}{% endraw %}</el-tag>
|
|
<span class="health-brief">{% raw %}{{ md2imgBrief }}{% endraw %}</span>
|
|
<span class="health-time" v-if="md2imgHealth && md2imgHealth.timestamp">
|
|
{% raw %}{{ md2imgHealth.timestamp }}{% endraw %}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="page-hero-actions">
|
|
<el-button type="success" plain :loading="md2imgWarming" @click="warmupMd2Img">
|
|
<i class="el-icon-magic-stick"></i> 预热转图
|
|
</el-button>
|
|
<el-button type="info" plain :loading="loading" @click="loadStatusOverview(true)">
|
|
<i class="el-icon-refresh"></i> 刷新监控
|
|
</el-button>
|
|
<el-button type="danger" @click="confirmRestart">
|
|
<i class="el-icon-refresh-left"></i> 重启服务
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stats-grid">
|
|
<el-card class="stat-card" shadow="hover">
|
|
<div class="stat-card__label">CPU 使用率</div>
|
|
<div class="stat-card__value">{% raw %}{{ formatPercent(cpu.usage_percent) }}{% endraw %}</div>
|
|
<div class="stat-card__meta">{% raw %}{{ cpu.logical_count || 0 }}{% endraw %} 线程 · load1 {% raw %}{{ formatNumber(cpu.load_1, 2) }}{% endraw %}</div>
|
|
<el-progress :percentage="normalizePercent(cpu.usage_percent)" :stroke-width="10" :status="progressStatus(cpu.usage_percent, 65, 85)"></el-progress>
|
|
</el-card>
|
|
<el-card class="stat-card" shadow="hover">
|
|
<div class="stat-card__label">内存使用率</div>
|
|
<div class="stat-card__value">{% raw %}{{ formatPercent(memory.usage_percent) }}{% endraw %}</div>
|
|
<div class="stat-card__meta">{% raw %}{{ formatBytes(memory.used_bytes) }}{% endraw %} / {% raw %}{{ formatBytes(memory.total_bytes) }}{% endraw %}</div>
|
|
<el-progress :percentage="normalizePercent(memory.usage_percent)" :stroke-width="10" :status="progressStatus(memory.usage_percent, 70, 88)"></el-progress>
|
|
</el-card>
|
|
<el-card class="stat-card" shadow="hover">
|
|
<div class="stat-card__label">主盘使用率</div>
|
|
<div class="stat-card__value">{% raw %}{{ formatPercent(disk.primary_usage_percent) }}{% endraw %}</div>
|
|
<div class="stat-card__meta">{% raw %}{{ formatBytes(disk.primary_used_bytes) }}{% endraw %} / {% raw %}{{ formatBytes(disk.primary_total_bytes) }}{% endraw %}</div>
|
|
<el-progress :percentage="normalizePercent(disk.primary_usage_percent)" :stroke-width="10" :status="progressStatus(disk.primary_usage_percent, 75, 90)"></el-progress>
|
|
</el-card>
|
|
<el-card class="stat-card" shadow="hover">
|
|
<div class="stat-card__label">网络速率</div>
|
|
<div class="stat-card__value">{% raw %}{{ formatSpeed(network.download_speed_bps) }}{% endraw %}</div>
|
|
<div class="stat-card__meta">上行 {% raw %}{{ formatSpeed(network.upload_speed_bps) }}{% endraw %} · 连接 {% raw %}{{ network.established_connections || 0 }}{% endraw %}</div>
|
|
<div class="network-balance">
|
|
<span>累计上行 {% raw %}{{ formatBytes(network.bytes_sent) }}{% endraw %}</span>
|
|
<span>累计下行 {% raw %}{{ formatBytes(network.bytes_recv) }}{% endraw %}</span>
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
|
|
<div class="monitor-grid">
|
|
<el-card class="workspace-card" shadow="hover">
|
|
<div slot="header" class="workspace-header">
|
|
<div>
|
|
<h3>系统概览</h3>
|
|
<p>观察主机、Python 运行环境和负载情况，快速判断是不是机器层面的问题。</p>
|
|
</div>
|
|
</div>
|
|
<div class="detail-grid">
|
|
<div class="detail-item">
|
|
<span class="detail-item__label">主机名</span>
|
|
<span class="detail-item__value">{% raw %}{{ server.hostname || '-' }}{% endraw %}</span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span class="detail-item__label">操作系统</span>
|
|
<span class="detail-item__value">{% raw %}{{ server.os || '-' }}{% endraw %}</span>
|
|
</div>
|
|
<div class="detail-item detail-item--wide">
|
|
<span class="detail-item__label">系统版本</span>
|
|
<span class="detail-item__value">{% raw %}{{ server.os_version || '-' }}{% endraw %}</span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span class="detail-item__label">Python</span>
|
|
<span class="detail-item__value">{% raw %}{{ server.python_version || '-' }}{% endraw %}</span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span class="detail-item__label">开机时间</span>
|
|
<span class="detail-item__value">{% raw %}{{ server.boot_time || '-' }}{% endraw %}</span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span class="detail-item__label">系统运行时长</span>
|
|
<span class="detail-item__value">{% raw %}{{ formatDuration(server.uptime_seconds) }}{% endraw %}</span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span class="detail-item__label">Load 1 / 5 / 15</span>
|
|
<span class="detail-item__value">{% raw %}{{ formatNumber(cpu.load_1, 2) }} / {{ formatNumber(cpu.load_5, 2) }} / {{ formatNumber(cpu.load_15, 2) }}{% endraw %}</span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span class="detail-item__label">CPU 核心</span>
|
|
<span class="detail-item__value">{% raw %}{{ cpu.physical_count || 0 }}{% endraw %} 物理 / {% raw %}{{ cpu.logical_count || 0 }}{% endraw %} 逻辑</span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span class="detail-item__label">Swap 使用率</span>
|
|
<span class="detail-item__value">{% raw %}{{ formatPercent(memory.swap_usage_percent) }}{% endraw %}</span>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
|
|
<el-card class="workspace-card" shadow="hover">
|
|
<div slot="header" class="workspace-header">
|
|
<div>
|
|
<h3>ABOT 进程</h3>
|
|
<p>确认当前应用自身的资源占用，避免只看主机而忽略进程级热点。</p>
|
|
</div>
|
|
</div>
|
|
<div class="detail-grid">
|
|
<div class="detail-item">
|
|
<span class="detail-item__label">PID</span>
|
|
<span class="detail-item__value">{% raw %}{{ process.pid || '-' }}{% endraw %}</span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span class="detail-item__label">进程 CPU</span>
|
|
<span class="detail-item__value">{% raw %}{{ formatPercent(process.cpu_percent) }}{% endraw %}</span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span class="detail-item__label">进程内存</span>
|
|
<span class="detail-item__value">{% raw %}{{ formatBytes(process.memory_rss_bytes) }}{% endraw %}</span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span class="detail-item__label">内存占比</span>
|
|
<span class="detail-item__value">{% raw %}{{ formatPercent(process.memory_percent) }}{% endraw %}</span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span class="detail-item__label">线程数</span>
|
|
<span class="detail-item__value">{% raw %}{{ process.thread_count || 0 }}{% endraw %}</span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span class="detail-item__label">打开文件</span>
|
|
<span class="detail-item__value">{% raw %}{{ process.open_files || 0 }}{% endraw %}</span>
|
|
</div>
|
|
<div class="detail-item detail-item--wide">
|
|
<span class="detail-item__label">进程启动时间</span>
|
|
<span class="detail-item__value">{% raw %}{{ process.create_time || '-' }}{% endraw %}</span>
|
|
</div>
|
|
<div class="detail-item detail-item--wide">
|
|
<span class="detail-item__label">进程运行时长</span>
|
|
<span class="detail-item__value">{% raw %}{{ formatDuration(process.uptime_seconds) }}{% endraw %}</span>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
|
|
<el-card class="workspace-card workspace-card--wide" shadow="hover">
|
|
<div slot="header" class="workspace-header">
|
|
<div>
|
|
<h3>基础设施运行态</h3>
|
|
<p>把数据库和缓存的关键摘要放在同一屏里，日常看状态不需要再跳出去。</p>
|
|
</div>
|
|
</div>
|
|
<div class="infra-grid">
|
|
<div class="infra-panel" :class="`infra-panel--${infrastructure.mysql.status || 'warning'}`">
|
|
<div class="infra-panel__head">
|
|
<div>
|
|
<div class="infra-panel__title">MySQL</div>
|
|
<div class="infra-panel__summary">{% raw %}{{ infrastructure.mysql.summary || '暂无状态' }}{% endraw %}</div>
|
|
</div>
|
|
<el-tag size="mini" :type="tagType(infrastructure.mysql.status)">{% raw %}{{ statusText(infrastructure.mysql.status) }}{% endraw %}</el-tag>
|
|
</div>
|
|
<div class="infra-metrics">
|
|
<div class="infra-metric"><span>数据库</span><strong>{% raw %}{{ infrastructure.mysql.database || '-' }}{% endraw %}</strong></div>
|
|
<div class="infra-metric"><span>版本</span><strong>{% raw %}{{ infrastructure.mysql.version || '-' }}{% endraw %}</strong></div>
|
|
<div class="infra-metric"><span>连接数</span><strong>{% raw %}{{ infrastructure.mysql.threads_connected || 0 }}{% endraw %} / {% raw %}{{ infrastructure.mysql.max_connections || '-' }}{% endraw %}</strong></div>
|
|
<div class="infra-metric"><span>连接负载</span><strong>{% raw %}{{ formatPercent(infrastructure.mysql.connection_usage_percent) }}{% endraw %}</strong></div>
|
|
<div class="infra-metric"><span>运行线程</span><strong>{% raw %}{{ infrastructure.mysql.threads_running || 0 }}{% endraw %}</strong></div>
|
|
<div class="infra-metric"><span>QPS</span><strong>{% raw %}{{ formatNumber(infrastructure.mysql.questions_per_second, 2) }}{% endraw %}</strong></div>
|
|
<div class="infra-metric"><span>表数量</span><strong>{% raw %}{{ infrastructure.mysql.table_count || 0 }}{% endraw %}</strong></div>
|
|
<div class="infra-metric"><span>库体量</span><strong>{% raw %}{{ formatMb(infrastructure.mysql.schema_size_mb) }}{% endraw %}</strong></div>
|
|
</div>
|
|
</div>
|
|
<div class="infra-panel" :class="`infra-panel--${infrastructure.redis.status || 'warning'}`">
|
|
<div class="infra-panel__head">
|
|
<div>
|
|
<div class="infra-panel__title">Redis</div>
|
|
<div class="infra-panel__summary">{% raw %}{{ infrastructure.redis.summary || '暂无状态' }}{% endraw %}</div>
|
|
</div>
|
|
<el-tag size="mini" :type="tagType(infrastructure.redis.status)">{% raw %}{{ statusText(infrastructure.redis.status) }}{% endraw %}</el-tag>
|
|
</div>
|
|
<div class="infra-metrics">
|
|
<div class="infra-metric"><span>DB</span><strong>{% raw %}{{ infrastructure.redis.db_index || 0 }}{% endraw %}</strong></div>
|
|
<div class="infra-metric"><span>Key 数量</span><strong>{% raw %}{{ infrastructure.redis.key_count || 0 }}{% endraw %}</strong></div>
|
|
<div class="infra-metric"><span>客户端</span><strong>{% raw %}{{ infrastructure.redis.connected_clients || 0 }}{% endraw %}</strong></div>
|
|
<div class="infra-metric"><span>阻塞客户端</span><strong>{% raw %}{{ infrastructure.redis.blocked_clients || 0 }}{% endraw %}</strong></div>
|
|
<div class="infra-metric"><span>OPS/s</span><strong>{% raw %}{{ infrastructure.redis.ops_per_sec || 0 }}{% endraw %}</strong></div>
|
|
<div class="infra-metric"><span>命中率</span><strong>{% raw %}{{ formatPercent(infrastructure.redis.hit_rate_percent) }}{% endraw %}</strong></div>
|
|
<div class="infra-metric"><span>已用内存</span><strong>{% raw %}{{ infrastructure.redis.used_memory_human || '-' }}{% endraw %}</strong></div>
|
|
<div class="infra-metric"><span>峰值内存</span><strong>{% raw %}{{ infrastructure.redis.used_memory_peak_human || '-' }}{% endraw %}</strong></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
|
|
<el-card class="workspace-card workspace-card--wide" shadow="hover">
|
|
<div slot="header" class="workspace-header">
|
|
<div>
|
|
<h3>磁盘挂载点</h3>
|
|
<p>按使用率排序展示常用挂载点，方便快速发现哪个分区快满了。</p>
|
|
</div>
|
|
</div>
|
|
<el-table :data="disk.items || []" size="mini" style="width: 100%">
|
|
<el-table-column prop="mountpoint" label="挂载点" min-width="180"></el-table-column>
|
|
<el-table-column prop="device" label="设备" min-width="180"></el-table-column>
|
|
<el-table-column prop="fstype" label="文件系统" width="110"></el-table-column>
|
|
<el-table-column label="已用 / 总量" min-width="170">
|
|
<template slot-scope="scope">
|
|
{% raw %}{{ formatBytes(scope.row.used_bytes) }} / {{ formatBytes(scope.row.total_bytes) }}{% endraw %}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="使用率" min-width="180">
|
|
<template slot-scope="scope">
|
|
<div class="table-progress-cell">
|
|
<span>{% raw %}{{ formatPercent(scope.row.usage_percent) }}{% endraw %}</span>
|
|
<el-progress
|
|
:percentage="normalizePercent(scope.row.usage_percent)"
|
|
:stroke-width="8"
|
|
:status="progressStatus(scope.row.usage_percent, 75, 90)">
|
|
</el-progress>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="剩余空间" min-width="120">
|
|
<template slot-scope="scope">
|
|
{% raw %}{{ formatBytes(scope.row.free_bytes) }}{% endraw %}
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-card>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
new Vue({
|
|
el: '#app',
|
|
mixins: [baseApp],
|
|
data() {
|
|
return {
|
|
currentView: '14',
|
|
restarting: false,
|
|
loading: false,
|
|
md2imgLoading: false,
|
|
md2imgWarming: false,
|
|
autoRefreshTimer: null,
|
|
md2imgHealth: null,
|
|
statusOverview: {
|
|
timestamp: '',
|
|
server: {},
|
|
cpu: {},
|
|
memory: {},
|
|
disk: { items: [] },
|
|
network: {},
|
|
process: {},
|
|
infrastructure: {
|
|
mysql: {},
|
|
redis: {}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
server() {
|
|
return this.statusOverview.server || {};
|
|
},
|
|
cpu() {
|
|
return this.statusOverview.cpu || {};
|
|
},
|
|
memory() {
|
|
return this.statusOverview.memory || {};
|
|
},
|
|
disk() {
|
|
return this.statusOverview.disk || { items: [] };
|
|
},
|
|
network() {
|
|
return this.statusOverview.network || {};
|
|
},
|
|
process() {
|
|
return this.statusOverview.process || {};
|
|
},
|
|
infrastructure() {
|
|
return this.statusOverview.infrastructure || { mysql: {}, redis: {} };
|
|
},
|
|
runtimeTagText() {
|
|
const runtime = this.md2imgHealth && this.md2imgHealth.runtime ? this.md2imgHealth.runtime : {};
|
|
return runtime.loop_running ? '运行时在线' : '运行时未就绪';
|
|
},
|
|
runtimeTagType() {
|
|
const runtime = this.md2imgHealth && this.md2imgHealth.runtime ? this.md2imgHealth.runtime : {};
|
|
return runtime.loop_running ? 'success' : 'warning';
|
|
},
|
|
browserTagText() {
|
|
const browser = this.md2imgHealth && this.md2imgHealth.browser ? this.md2imgHealth.browser : {};
|
|
return browser.connected ? '浏览器已连接' : 'info';
|
|
},
|
|
browserTagType() {
|
|
const browser = this.md2imgHealth && this.md2imgHealth.browser ? this.md2imgHealth.browser : {};
|
|
return browser.connected ? 'success' : 'info';
|
|
},
|
|
md2imgBrief() {
|
|
if (!this.md2imgHealth) return '尚未获取状态';
|
|
const runtime = this.md2imgHealth.runtime || {};
|
|
const browser = this.md2imgHealth.browser || {};
|
|
const loopText = runtime.loop_id ? `loop=${runtime.loop_id}` : 'loop=-';
|
|
const pidText = browser.pid ? `pid=${browser.pid}` : 'pid=-';
|
|
const sourceText = browser.launch_source ? `source=${browser.launch_source}` : 'source=-';
|
|
return `${loopText} · ${pidText} · ${sourceText}`;
|
|
}
|
|
},
|
|
mounted() {
|
|
this.currentView = '14';
|
|
this.loadStatusOverview(false);
|
|
this.loadMd2ImgHealth();
|
|
// 资源页采用前端轮询即可满足日常观察，不需要为了监控再起单独守护进程。
|
|
this.autoRefreshTimer = setInterval(() => {
|
|
this.loadStatusOverview(false);
|
|
}, 10000);
|
|
},
|
|
beforeDestroy() {
|
|
if (this.autoRefreshTimer) {
|
|
clearInterval(this.autoRefreshTimer);
|
|
this.autoRefreshTimer = null;
|
|
}
|
|
},
|
|
methods: {
|
|
async loadStatusOverview(showToast) {
|
|
if (this.loading) return;
|
|
this.loading = true;
|
|
try {
|
|
const response = await axios.get('/api/system_status_overview');
|
|
if (response.data && response.data.success) {
|
|
this.statusOverview = response.data.data || this.statusOverview;
|
|
if (showToast) {
|
|
this.$message.success('资源监控已刷新');
|
|
}
|
|
} else {
|
|
this.$message.error(response.data?.message || '获取资源监控失败');
|
|
}
|
|
} catch (error) {
|
|
this.$message.error(error.response?.data?.message || '获取资源监控失败');
|
|
} finally {
|
|
this.loading = false;
|
|
}
|
|
},
|
|
normalizePercent(value) {
|
|
const number = Number(value || 0);
|
|
if (Number.isNaN(number)) return 0;
|
|
return Math.max(0, Math.min(100, Number(number.toFixed(1))));
|
|
},
|
|
progressStatus(value, warningThreshold, dangerThreshold) {
|
|
const percent = this.normalizePercent(value);
|
|
if (percent >= dangerThreshold) return 'exception';
|
|
if (percent >= warningThreshold) return 'warning';
|
|
return 'success';
|
|
},
|
|
formatNumber(value, digits = 0) {
|
|
if (value === null || value === undefined || value === '') return '-';
|
|
const number = Number(value);
|
|
if (Number.isNaN(number)) return String(value);
|
|
return number.toFixed(digits);
|
|
},
|
|
formatPercent(value) {
|
|
if (value === null || value === undefined || value === '') return '-';
|
|
return `${this.formatNumber(value, 1)}%`;
|
|
},
|
|
formatBytes(value) {
|
|
const bytes = Number(value || 0);
|
|
if (!Number.isFinite(bytes) || bytes <= 0) return '0 B';
|
|
const units = ['B', 'KB', 'MB', 'GB', 'TB'];
|
|
let size = bytes;
|
|
let index = 0;
|
|
while (size >= 1024 && index < units.length - 1) {
|
|
size /= 1024;
|
|
index += 1;
|
|
}
|
|
const digits = index === 0 ? 0 : (size >= 100 ? 0 : (size >= 10 ? 1 : 2));
|
|
return `${size.toFixed(digits)} ${units[index]}`;
|
|
},
|
|
formatSpeed(value) {
|
|
return `${this.formatBytes(value)}/s`;
|
|
},
|
|
formatDuration(seconds) {
|
|
const total = parseInt(seconds || 0, 10);
|
|
if (!total || total <= 0) return '-';
|
|
const days = Math.floor(total / 86400);
|
|
const hours = Math.floor((total % 86400) / 3600);
|
|
const minutes = Math.floor((total % 3600) / 60);
|
|
if (days > 0) return `${days}天 ${hours}小时`;
|
|
if (hours > 0) return `${hours}小时 ${minutes}分钟`;
|
|
return `${minutes}分钟`;
|
|
},
|
|
formatMb(value) {
|
|
const number = Number(value || 0);
|
|
if (!Number.isFinite(number) || number <= 0) return '0 MB';
|
|
return `${number.toFixed(number >= 100 ? 0 : 1)} MB`;
|
|
},
|
|
statusText(status) {
|
|
const mapping = {
|
|
healthy: '健康',
|
|
warning: '关注',
|
|
danger: '异常'
|
|
};
|
|
return mapping[status] || '未知';
|
|
},
|
|
tagType(status) {
|
|
const mapping = {
|
|
healthy: 'success',
|
|
warning: 'warning',
|
|
danger: 'danger'
|
|
};
|
|
return mapping[status] || 'info';
|
|
},
|
|
confirmRestart() {
|
|
this.$confirm('确认执行 ./restart.sh 重启服务吗？这会中断当前服务几秒钟。', '重启确认', {
|
|
confirmButtonText: '确认重启',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
this.triggerRestart();
|
|
}).catch(() => {});
|
|
},
|
|
async triggerRestart() {
|
|
if (this.restarting) return;
|
|
this.restarting = true;
|
|
try {
|
|
const response = await axios.post('/api/restart_service');
|
|
if (response.data.success) {
|
|
this.$message.success(response.data.message || '已触发重启');
|
|
} else {
|
|
this.$message.error(response.data.message || '重启失败');
|
|
}
|
|
} catch (error) {
|
|
this.$message.error(error.response?.data?.message || '触发重启失败');
|
|
} finally {
|
|
this.restarting = false;
|
|
}
|
|
},
|
|
async loadMd2ImgHealth() {
|
|
if (this.md2imgLoading) return;
|
|
this.md2imgLoading = true;
|
|
try {
|
|
const response = await axios.get('/api/system/md2img_health');
|
|
if (response.data && response.data.success) {
|
|
this.md2imgHealth = response.data.data || null;
|
|
} else {
|
|
this.$message.error(response.data?.message || '获取转图状态失败');
|
|
}
|
|
} catch (error) {
|
|
this.$message.error(error.response?.data?.message || '获取转图状态失败');
|
|
} finally {
|
|
this.md2imgLoading = false;
|
|
}
|
|
},
|
|
async warmupMd2Img() {
|
|
if (this.md2imgWarming) return;
|
|
this.md2imgWarming = true;
|
|
try {
|
|
const response = await axios.post('/api/system/md2img_warmup', { timeout_seconds: 60 });
|
|
if (response.data && response.data.success) {
|
|
this.$message.success(response.data.message || '转图预热成功');
|
|
this.md2imgHealth = response.data.data || this.md2imgHealth;
|
|
} else {
|
|
this.$message.error(response.data?.message || '转图预热失败');
|
|
}
|
|
} catch (error) {
|
|
this.$message.error(error.response?.data?.message || '转图预热失败');
|
|
} finally {
|
|
this.md2imgWarming = false;
|
|
this.loadMd2ImgHealth();
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.page-shell { display: flex; flex-direction: column; gap: 16px; }
|
|
.page-hero {
|
|
display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; padding: 24px 26px; border-radius: 24px;
|
|
background: linear-gradient(135deg, rgba(15,23,42,0.05), rgba(59,130,246,0.10), rgba(255,255,255,0.95));
|
|
border: 1px solid rgba(148, 163, 184, 0.16); box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
|
|
}
|
|
.page-hero-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
|
|
.page-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #2563eb; font-weight: 700; margin-bottom: 8px; }
|
|
.page-hero-copy h1 { font-size: 30px; line-height: 1.1; margin-bottom: 10px; color: #0f172a; }
|
|
.page-hero-copy p { color: #64748b; font-size: 14px; }
|
|
.hero-meta-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
|
|
.hero-meta-pill {
|
|
display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px;
|
|
background: rgba(255,255,255,0.8); border: 1px solid rgba(148,163,184,0.14); color: #475569; font-size: 12px;
|
|
}
|
|
.hero-meta-label { color: #94a3b8; }
|
|
.hero-meta-value { color: #0f172a; font-weight: 700; }
|
|
.md2img-health-inline {
|
|
margin-top: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px;
|
|
border-radius: 12px; background: rgba(255,255,255,0.72); border: 1px solid rgba(148, 163, 184, 0.18);
|
|
}
|
|
.health-title { font-size: 12px; font-weight: 700; color: #334155; }
|
|
.health-brief { font-size: 12px; color: #475569; }
|
|
.health-time { font-size: 12px; color: #94a3b8; }
|
|
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
|
|
.stat-card { border-radius: 20px; }
|
|
.stat-card__label { color: #64748b; font-size: 13px; margin-bottom: 10px; }
|
|
.stat-card__value { color: #0f172a; font-size: 30px; font-weight: 700; line-height: 1; margin-bottom: 10px; }
|
|
.stat-card__meta { color: #475569; font-size: 12px; margin-bottom: 12px; min-height: 18px; }
|
|
.network-balance { margin-top: 12px; display: flex; justify-content: space-between; gap: 10px; color: #64748b; font-size: 12px; }
|
|
.monitor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
|
|
.workspace-card { border-radius: 20px; }
|
|
.workspace-card--wide { grid-column: 1 / -1; }
|
|
.workspace-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
|
|
.workspace-header h3 { font-size: 18px; margin-bottom: 4px; }
|
|
.workspace-header p { font-size: 13px; color: #64748b; }
|
|
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
|
|
.detail-item {
|
|
display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 16px;
|
|
background: rgba(248,250,252,0.82); border: 1px solid rgba(148,163,184,0.12);
|
|
}
|
|
.detail-item--wide { grid-column: 1 / -1; }
|
|
.detail-item__label { color: #64748b; font-size: 12px; }
|
|
.detail-item__value { color: #0f172a; font-size: 15px; font-weight: 700; word-break: break-all; }
|
|
.infra-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
|
|
.infra-panel {
|
|
padding: 16px; border-radius: 18px; border: 1px solid rgba(148,163,184,0.12); background: rgba(248,250,252,0.86);
|
|
}
|
|
.infra-panel--healthy { box-shadow: inset 0 0 0 1px rgba(16,185,129,0.08); }
|
|
.infra-panel--warning { box-shadow: inset 0 0 0 1px rgba(245,158,11,0.10); }
|
|
.infra-panel--danger { box-shadow: inset 0 0 0 1px rgba(239,68,68,0.10); }
|
|
.infra-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
|
|
.infra-panel__title { color: #0f172a; font-size: 16px; font-weight: 700; }
|
|
.infra-panel__summary { color: #64748b; font-size: 12px; line-height: 1.6; margin-top: 4px; }
|
|
.infra-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
|
|
.infra-metric {
|
|
display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 14px;
|
|
background: rgba(255,255,255,0.75); border: 1px solid rgba(148,163,184,0.10);
|
|
}
|
|
.infra-metric span { color: #64748b; font-size: 12px; }
|
|
.infra-metric strong { color: #0f172a; font-size: 14px; font-weight: 700; word-break: break-word; }
|
|
.table-progress-cell { display: grid; grid-template-columns: 60px 1fr; align-items: center; gap: 10px; }
|
|
@media (max-width: 1200px) {
|
|
.stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
.monitor-grid { grid-template-columns: 1fr; }
|
|
.infra-grid { grid-template-columns: 1fr; }
|
|
}
|
|
@media (max-width: 960px) {
|
|
.page-hero { flex-direction: column; align-items: flex-start; }
|
|
.detail-grid { grid-template-columns: 1fr; }
|
|
.detail-item--wide { grid-column: auto; }
|
|
}
|
|
@media (max-width: 640px) {
|
|
.stats-grid { grid-template-columns: 1fr; }
|
|
.network-balance { flex-direction: column; }
|
|
.infra-metrics { grid-template-columns: 1fr; }
|
|
}
|
|
</style>
|
|
{% endblock %}
|