LoongPanel-Asp/web/components/Grid/TopGrid.vue

<script lang="ts" setup>

import MiniCard from "~/components/Cards/MiniCard.vue";
import {useMainLayoutStore} from "~/strores/UseMainLayoutStore";
import {useDataStore} from "~/strores/DataStore";

const gridRef = ref<HTMLElement>();
const dataStore=useDataStore()
const mainLayoutStore=useMainLayoutStore()
const CpuUsageCount=ref<string[]>([])
const DiskUsageCount=ref<string[]>([])
const NetWorkUsageCount=ref<string[]>([])
watch(()=>mainLayoutStore.SelectServer.value,()=>{
  const data=dataStore.data
  CpuUsageCount.value=Object.keys(data).filter(key => key.startsWith('CpuSingleUsage-'))
})
onMounted(()=>{
  const data=dataStore.data
  CpuUsageCount.value=Object.keys(data).filter(key => key.startsWith('CpuSingleUsage-'))
  DiskUsageCount.value=Object.keys(data).filter(key => key.startsWith('DiskUtil-'))
  NetWorkUsageCount.value=Object.keys(data).filter(key => key.startsWith('InterfaceUtilizationPercentage-'))

})

</script>

<template>
  <n-scrollbar x-scrollable>
  <div ref="gridRef" class="top-grid-layout">

      <MiniCard title="系统使用率" watcher="RequestJob" :info="['112312']"/>
      <MiniCard title="CPU总使用率" :watcher="['CpuTotalUsage',...CpuUsageCount]" :info="['AMD EPYC 7K62 (4) @ 2.595GHz','AMD EPYC 7K62 (4) @ 2.595GHz']"/>
      <MiniCard title="内存总使用率" :watcher="['MemoryTotalUsage','SwapTotalUsage']"/>
      <MiniCard title="读写使用率" watcher="CpuIOWaitUsage"/>
      <MiniCard title="磁盘总使用率" :watcher="['DiskTotalUsage',...DiskUsageCount]"/>
      <MiniCard title="网络接口使用率" :watcher="['InterfaceTotalUtilizationPercentage',...NetWorkUsageCount]"/>
  </div>
  </n-scrollbar>
</template>

<style lang="scss" scoped>
@import "base";

.top-grid-layout {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 1fr;
  grid-gap: $gap*2;
  overflow-x: auto;
}

@media screen and (max-width: 1800px) {
  .top-grid-layout {
    grid-template-columns: repeat(3, 1fr);
  }
}

</style>