<script lang="ts" setup>

import MiniCard from "~/components/Cards/MiniCard.vue";

const gridRef = ref<HTMLElement>();

</script>

<template>
  <div ref="gridRef" class="top-grid-layout">
    <MiniCard title="系统使用率" watcher="RequestJob"/>
    <MiniCard title="CPU总使用率" watcher="CpuTotalUsage"/>
    <MiniCard title="内存总使用率" watcher="MemoryTotalUsage"/>
    <MiniCard title="读写使用率" watcher="CpuIOWaitUsage"/>
    <MiniCard title="磁盘总使用率" watcher="DiskTotalUsage"/>
    <MiniCard title="网络接口使用率" watcher="InterfaceTotalUtilizationPercentage"/>
  </div>
</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);
  }
}

@media screen and (max-width: 1200px) {
  .top-grid-layout {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>