LoongPanel-Asp/web/pages/host/memory.vue

238 lines
5.3 KiB
Vue

<script lang="ts" setup>
import {useMainLayoutStore} from "~/strores/UseMainLayoutStore";
import {useDataStore} from "~/strores/DataStore";
import AreaChart2 from "~/components/Charts/AreaChart2.vue";
const mainLayoutStore = useMainLayoutStore()
type MemoryInfo = {
[key: string]: any
}
const lsMemory = ref<MemoryInfo[]>([])
const dataStore = useDataStore()
const colorMode = useColorMode()
const getSystemInfo = () => {
$fetch(`/Api/Server/GetServerMemoryInfo`, {
method: 'GET',
responseType: "json",
params: {
serverId: mainLayoutStore.SelectServer.id
},
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${useCookie('token').value}`
},
baseURL: useRuntimeConfig().public.baseUrl
}).then((res) => {
const data = res as any
//转换json
lsMemory.value = data
console.log(data)
})
}
onMounted(() => {
getSystemInfo();
})
</script>
<template>
<div class="memory-layout">
<div class="left-chart">
<div class="memory-title">
<h1>CPU</h1>
<h2>{{ (Number(dataStore.data["MemoryTotal"]) / 1024 / 1024).toFixed(2) }} GB</h2>
</div>
<div class="memory-chart-top">
<p>内存使用率</p>
<p>100%</p>
</div>
<div class="memory-chart">
<AreaChart2 :bg-color="'rgba(92,155,232,0.3)'" :colors="['#5c9be8']" :value-names="['内存使用率']" :value-ids="['MemoryTotalUsage']" :configs="[
{
areaStyle:{}
}
]"/>
</div>
<div class="memory-chat-bottom">
<p>1分钟</p>
<p>0</p>
</div>
<div class="memory-chart-top">
<p>内存组成</p>
</div>
<div class="memory-composition-chart">
<div :style="{
width:`${dataStore.data['MemoryTotalUsage']}%`
}" class="composition"></div>
<div :style="{
width:`${dataStore.data['SwapTotalUsage']}%`
}" class="composition"></div>
<div class="composition"></div>
</div>
</div>
<div class="right-info">
<div class="info-title-box">
<div class="info-title">
<p>使用中</p>
<h2>{{ (Number(dataStore.data["MemoryUsed"]) / 1024 / 1024).toFixed(2) }} GB</h2>
</div>
<div class="info-title">
<p>可用</p>
<h2>{{ (Number(dataStore.data["MemoryFree"]) / 1024 / 1024).toFixed(2) }} GB</h2>
</div>
<div class="info-title">
<p>已提交</p>
<h2>{{((Number(dataStore.data["MemoryTotal"]) - Number(dataStore.data["MemoryCache"])) / 1024 / 1024).toFixed(2) }} GB</h2>
</div>
<div class="info-title">
<p>已缓存</p>
<h2>{{ (Number(dataStore.data["MemoryCache"]) / 1024 / 1024).toFixed(2) }} GB</h2>
</div>
<div class="info-title">
<p>已使用交换空间</p>
<h2>{{ (Number(dataStore.data["SwapUsed"]) / 1024).toFixed(2) }} KiB</h2>
</div>
<div class="info-title">
<p>可用交换空间</p>
<h2>{{ (Number(dataStore.data["SwapFree"]) / 1024 / 1024).toFixed(2) }} GB</h2>
</div>
</div>
<div class="other-info-box">
<div v-for="info in lsMemory" class="other-info">
<p>{{ info.description !== '[empty]' ? info.description : info.id }}</p>
<p>{{ info.size ?? info.handle }}</p>
</div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
@import "base";
.memory-layout {
padding: $padding*1.5;
display: grid;
grid-template-columns: 1fr 300px;
grid-template-rows: 1fr;
gap: $gap*4;
}
.left-chart {
display: flex;
flex-direction: column;
gap: $gap;
.memory-title {
display: flex;
justify-content: space-between;
align-items: center;
.dark-mode & {
h1, h2 {
color: $dark-text-color;
}
}
h1, h2 {
color: $light-text-color;
}
h1 {
font-size: 32px;
}
}
}
.memory-chart-top {
display: flex;
justify-content: space-between;
align-items: center;
}
.memory-chart {
flex: 1;
border: 4px solid #5c9be8;
border-radius: $radius*2;
height: min-content;
max-height: 48rem;
min-height: 32rem;
overflow: hidden;
}
.memory-composition-chart {
height: 80px;
border: 4px solid #5c9be8;
border-radius: $radius*2;
display: flex;
overflow: hidden;
.composition {
border-right: 2px solid #5c9be8;
transition: width 0.3s ease-in-out;
}
.composition:first-of-type {
background: rgba(92, 155, 232, 0.75);
width: 20px;
}
.composition:nth-of-type(2) {
background: rgba(92, 155, 232, 0.3);
width: 20px;
}
.composition:last-of-type {
flex: 1;
border-right: unset;
}
}
.memory-chat-bottom {
display: flex;
justify-content: space-between;
align-items: center;
}
.info-title-box {
display: flex;
flex-wrap: wrap;
gap: $gap*2;
.info-title {
display: flex;
flex-direction: column;
gap: $gap*.5;
}
.info-title:nth-of-type(2) {
width: 60%;
}
}
.other-info-box {
display: flex;
flex-direction: column;
gap: $gap*.5;
.other-info {
display: flex;
gap: $gap;
p:first-of-type {
font-weight: 500;
}
p {
flex: 1;
//文本换行
word-wrap: break-word;
}
}
}
.right-info {
display: flex;
flex-direction: column;
gap: $gap*2;
}
</style>