UNIVPLMDataIntegration/Web/src/views/system/server/index.vue

<template>
	<div class="sys-server-container">
		<el-row :gutter="8">
			<el-col :md="12" :sm="24">
				<el-card shadow="hover" header="系统信息">
					<table class="sysInfo_table">
						<tbody>
							<tr>
								<td class="sysInfo_td">主机名称：</td>
								<td class="sysInfo_td">{{ state.machineBaseInfo.hostName }}</td>
							</tr>
							<tr>
								<td class="sysInfo_td">操作系统：</td>
								<td class="sysInfo_td">{{ state.machineBaseInfo.systemOs }}</td>
							</tr>
							<tr>
								<td class="sysInfo_td">系统架构：</td>
								<td class="sysInfo_td">{{ state.machineBaseInfo.osArchitecture }}</td>
							</tr>
							<tr>
								<td class="sysInfo_td">CPU核数：</td>
								<td class="sysInfo_td">{{ state.machineBaseInfo.processorCount }}</td>
							</tr>
							<tr>
								<td class="sysInfo_td">运行时长：</td>
								<td class="sysInfo_td">{{ state.machineBaseInfo.sysRunTime }}</td>
							</tr>
							<tr>
								<td class="sysInfo_td">外网地址：</td>
								<td class="sysInfo_td">{{ state.machineBaseInfo.remoteIp }}</td>
							</tr>
							<tr>
								<td class="sysInfo_td">内网地址：</td>
								<td class="sysInfo_td">{{ state.machineBaseInfo.localIp }}</td>
							</tr>
							<tr>
								<td class="sysInfo_td">运行框架：</td>
								<td class="sysInfo_td">{{ state.machineBaseInfo.frameworkDescription }}</td>
							</tr>
						</tbody>
					</table>
				</el-card>
			</el-col>
			<el-col :md="12" :sm="24">
				<el-card shadow="hover" header="使用信息">
					<el-row>
						<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" style="text-align: center">
							<el-progress
								type="dashboard"
								:percentage="parseInt(state.machineUseInfo.ramRate == undefined ? 0 : state.machineUseInfo.ramRate.substr(0, state.machineUseInfo.ramRate.length - 1))"
								:color="'var(--el-color-primary)'"
							>
								<template #default>
									<span>{{ state.machineUseInfo.ramRate }}<br /></span>
									<span style="font-size: 10px">
										已用:{{ state.machineUseInfo.usedRam }}<br />
										剩余:{{ state.machineUseInfo.freeRam }}<br />
										内存使用率
									</span>
								</template>
							</el-progress>
						</el-col>
						<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" style="text-align: center">
							<el-progress
								v-for="(item, index) in state.machineUseInfo.cpuRates"
								:key="index"
								type="dashboard"
								:percentage="parseInt(item == undefined ? 0 : item.substr(0, item.length - 1))"
								:color="'var(--el-color-primary)'"
							>
								<template #default>
									<span>{{ item }}<br /></span>
									<span style="font-size: 10px"> CPU使用率<br />核心 {{ index + 1 }}</span>
								</template>
							</el-progress>
						</el-col>
					</el-row>

					<el-row>
						<table class="sysInfo_table">
							<tbody>
								<tr>
									<td class="sysInfo_td">启动时间：</td>
									<td class="sysInfo_td">{{ state.machineUseInfo.startTime }}</td>
								</tr>
								<tr>
									<td class="sysInfo_td">运行时长：</td>
									<td class="sysInfo_td">{{ state.machineUseInfo.runTime }}</td>
								</tr>
								<tr>
									<td class="sysInfo_td">网站目录：</td>
									<td class="sysInfo_td">{{ state.machineBaseInfo.wwwroot }}</td>
								</tr>
								<tr>
									<td class="sysInfo_td">开发环境：</td>
									<td class="sysInfo_td">{{ state.machineBaseInfo.environment }}</td>
								</tr>
								<tr>
									<td class="sysInfo_td">环境变量：</td>
									<td class="sysInfo_td">{{ state.machineBaseInfo.stage }}</td>
								</tr>
							</tbody>
						</table>
					</el-row>
				</el-card>
			</el-col>
		</el-row>

		<el-row :gutter="8">
			<el-col :md="24" :sm="24">
				<el-card shadow="hover" header="程序集信息" style="margin-top: 5px; --el-card-padding: 10px">
					<div v-for="d in state.assemblyInfo" :key="d.name" style="display: inline-block; margin: 4px; text-align: left">
						<el-tag size="large" round style="border: 1 solid var(--el-border-color)">
							<div style="display: inline-flex">
								<div>{{ d.name }}</div>
								<div style="color: red; font-size: 9px; margin-left: 3px">v{{ d.version }}</div>
							</div>
						</el-tag>
					</div>
				</el-card>
			</el-col>
		</el-row>

		<el-row :gutter="8">
			<el-col :md="24" :sm="24">
				<el-card shadow="hover" header="磁盘信息" style="margin-top: 5px">
					<el-row>
						<el-col
							:span="4"
							:xs="(24 / state.machineDiskInfo.length) * 2"
							:sm="24 / state.machineDiskInfo.length"
							:md="24 / state.machineDiskInfo.length"
							:lg="24 / state.machineDiskInfo.length"
							:xl="24 / state.machineDiskInfo.length"
							v-for="d in state.machineDiskInfo"
							:key="d.diskName"
							style="text-align: center"
						>
							<el-progress type="circle" :percentage="d.availablePercent" :color="'var(--el-color-primary)'">
								<template #default>
									<span>{{ d.availablePercent }}%<br /></span>
									<span style="font-size: 10px">
										已用:{{ d.used }}GB<br />
										剩余:{{ d.availableFreeSpace }}GB<br />
										{{ d.diskName }}
									</span>
								</template>
							</el-progress>
						</el-col>
					</el-row>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script lang="ts" setup name="sysServer">
import { onActivated, onDeactivated, onMounted, reactive } from 'vue';

import { getAPI } from '/@/utils/axios-utils';
import { SysServerApi } from '/@/api-services';

const state = reactive({
	machineBaseInfo: [] as any,
	machineUseInfo: [] as any,
	machineDiskInfo: [] as any,
	assemblyInfo: [] as any,
	timer: null as any,
});

onMounted(async () => {
	loadMachineBaseInfo();
	loadMachineUseInfo();
	loadMachineDiskInfo();
	loadAssemblyInfo();
});

// 服务器配置信息
const loadMachineBaseInfo = async () => {
	var res = await getAPI(SysServerApi).apiSysServerServerBaseGet();
	state.machineBaseInfo = res.data.result;
};

// 服务器内存信息
const loadMachineUseInfo = async () => {
	var res = await getAPI(SysServerApi).apiSysServerServerUsedGet();
	state.machineUseInfo = res.data.result;
};

// 服务器磁盘信息
const loadMachineDiskInfo = async () => {
	var res = await getAPI(SysServerApi).apiSysServerServerDiskGet();
	state.machineDiskInfo = res.data.result;
};

// 框架程序集信息
const loadAssemblyInfo = async () => {
	var res = await getAPI(SysServerApi).apiSysServerAssemblyListGet();
	state.assemblyInfo = res.data.result;
};

// 实时刷新内存
const refreshData = () => {
	loadMachineUseInfo();
};

onActivated(() => {
	state.timer = setInterval(() => {
		refreshData();
	}, 10000);
});

onDeactivated(() => {
	clearInterval(state.timer);
});
</script>

<style lang="scss" scoped>
.sysInfo_table {
	width: 100%;
	min-height: 40px;
	line-height: 40px;
	text-align: center;
}

.sysInfo_td {
	border-bottom: 1px solid var(--el-border-color);
	min-width: 100px;
}
</style>