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

42 lines
1.0 KiB
Vue
Raw Normal View History

2024-06-22 10:54:02 +08:00
<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>