<script lang="ts" setup>
|
import { onMounted, reactive, toRefs } from 'vue';
|
|
import { getSysMonitor } from '#/api/system/monitor';
|
|
interface State {
|
monitor: any;
|
system: any;
|
cpu: any;
|
memory: any;
|
disk: any;
|
cpuPercentage: number;
|
memoryPercentage: number;
|
diskPercentage: number;
|
}
|
|
defineProps({
|
config: {
|
default: () => {},
|
type: Object as any,
|
},
|
});
|
|
const state = reactive<State>({
|
monitor: null,
|
system: {
|
os: '',
|
day: '',
|
ip: '',
|
},
|
cpu: {
|
name: '',
|
package: '',
|
core: '',
|
coreNumber: '',
|
logic: '',
|
used: '',
|
idle: '',
|
},
|
memory: {
|
total: '',
|
available: '',
|
used: '',
|
usageRate: '',
|
},
|
disk: {
|
total: '',
|
available: '',
|
used: '',
|
usageRate: '',
|
},
|
cpuPercentage: 0,
|
memoryPercentage: 0,
|
diskPercentage: 0,
|
});
|
const { system, cpu, memory, disk, cpuPercentage, memoryPercentage, diskPercentage } = toRefs(state);
|
|
function customColors(percentage) {
|
if (percentage < 70) return '#5cb87a';
|
if (percentage < 90) return '#e6a23c';
|
return '#f56c6c';
|
}
|
|
function initData() {
|
getSysMonitor().then((res) => {
|
if (!res.data) return;
|
state.system = res.data.system;
|
state.cpu = res.data.cpu;
|
state.memory = res.data.memory;
|
state.disk = res.data.disk;
|
state.cpuPercentage = state.cpu.used == '0.00' ? 0 : Number(state.cpu.used);
|
state.memoryPercentage = state.memory.usageRate == '0.00' ? 0 : Number(state.memory.usageRate);
|
state.diskPercentage = state.disk.usageRate == '0.00' ? 0 : Number(state.disk.usageRate);
|
});
|
}
|
|
onMounted(() => {
|
initData();
|
});
|
</script>
|
<template>
|
<div>
|
<div class="server-info-pane dashboard-pane">
|
<div class="dashboard-header">
|
<div class="dashboard-header-title">服务器信息</div>
|
<div class="dashboard-header-subTitle">
|
<span>系统：{{ system?.os }}</span>
|
<span>IP：{{ system?.ip }}</span>
|
<span>项目已不间断运行：{{ system?.day }}</span>
|
</div>
|
</div>
|
<a-row>
|
<a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="server-info-item">
|
<h3>CPU使用率</h3>
|
<a-tooltip placement="top">
|
<template #title>
|
<p>{{ cpu?.name }}</p>
|
<p>{{ cpu?.packageName }}</p>
|
<p>{{ cpu?.core }}</p>
|
<p>{{ cpu?.logic }}</p>
|
</template>
|
<a-progress type="circle" :percent="cpuPercentage" :stroke-color="customColors(cpuPercentage)" />
|
</a-tooltip>
|
<div class="footer">{{ cpu?.coreNumber }} 核心</div>
|
</a-col>
|
<a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="server-info-item">
|
<h3>内存使用率</h3>
|
<a-tooltip placement="top">
|
<template #title>
|
<p>总量：{{ memory?.total }}</p>
|
<p>已使用：{{ memory?.used }}</p>
|
<p>空闲：{{ memory?.available }}</p>
|
</template>
|
<a-progress type="circle" :percent="memoryPercentage" :stroke-color="customColors(memoryPercentage)" />
|
</a-tooltip>
|
<div class="footer">{{ memory?.used }} / {{ memory?.total }}</div>
|
</a-col>
|
<a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="server-info-item">
|
<h3>磁盘使用率</h3>
|
<a-tooltip placement="top">
|
<template #title>
|
<p>总量：{{ disk?.total }}</p>
|
<p>空闲：{{ disk?.available }}</p>
|
</template>
|
<a-progress type="circle" :percent="diskPercentage" :stroke-color="customColors(diskPercentage)" />
|
</a-tooltip>
|
<div class="footer">{{ disk?.used }} / {{ disk?.total }}</div>
|
</a-col>
|
</a-row>
|
</div>
|
</div>
|
</template>
|
