LoongPanel-Asp/web/pages/host/memory.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>