LoongPanel-Asp/web/pages/host/cpu.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.id
    },
    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>