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

189 lines
3.8 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 CpuInfo = {
field: string,
data: string
}
const lsCpu = ref<CpuInfo[]>([])
const dataStore = useDataStore()
const getSystemInfo = () => {
$fetch(`/Api/Server/GetServerCpuInfo`, {
method: 'GET',
responseType: "json",
params: {
serverId: mainLayoutStore.SelectServer.value
},
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${useCookie('token').value}`
},
baseURL: useRuntimeConfig().public.baseUrl
}).then((res) => {
const data = res as any
//转换json
lsCpu.value = data['lscpu']
console.log(data)
})
}
onMounted(() => {
getSystemInfo();
})
</script>
<template>
<div class="cpu-layout">
<div class="left-chart">
<div class="cpu-title">
<h1>CPU</h1>
<h2>{{ lsCpu.find(x => x.field === 'Model name:')?.data }}</h2>
</div>
<div class="cpu-chart-top">
<p>使用率</p>
<p>100%</p>
</div>
<div class="cpu-chart">
<AreaChart2 :value-ids="['CpuTotalUsage']" :value-names="['CPU使用率']" :colors="['#0073f4']" :bg-color="'rgba(0,115,244,0.3)'" :configs="[{areaStyle:{}}]"/>
</div>
<div class="cpu-chat-bottom">
<p>更早</p>
<p>0</p>
</div>
</div>
<div class="right-info">
<div class="info-title-box">
<div class="info-title">
<p>使用率</p>
<h2>{{ Number(dataStore.data["CpuTotalUsage"]).toFixed(2) }}%</h2>
</div>
<div class="info-title">
<p>速度</p>
<h2>{{ (Number(dataStore.data["CpuTotalSpeed"]) / 1000).toFixed(2) }}GHZ</h2>
</div>
<div class="info-title">
<p>进程</p>
<h2>{{ Number(dataStore.data["ProcessTotalCount"]) }}</h2>
</div>
<div class="info-title">
<p>线程</p>
<h2>{{ Number(dataStore.data["ThreadsTotalCount"]) }}</h2>
</div>
<div class="info-title">
<p>句柄</p>
<h2>{{ Number(dataStore.data["PhrasePatternCount"]) }}</h2>
</div>
</div>
<div class="other-info-box">
<div v-for="info in lsCpu" class="other-info">
<p>{{ info.field }}</p>
<p>{{ info.data }}</p>
</div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
@import "base";
.cpu-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;
.cpu-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;
}
}
}
.cpu-chart-top {
display: flex;
justify-content: space-between;
align-items: center;
}
.cpu-chart {
flex: 1;
border: 4px solid #0073f4;
border-radius: $radius*2;
height: min-content;
max-height: 48rem;
min-height: 32rem;
overflow: hidden;
}
.cpu-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;
}
}
}
.right-info {
display: flex;
flex-direction: column;
gap: $gap*2;
}
</style>