<template>
|
<Skeleton v-if="spinning" active />
|
<div v-else>
|
<a-row>
|
<template v-if="diskInfo && diskInfo.length > 0">
|
<a-col :span="6" v-for="(item, index) in diskInfo" :key="'diskInfo' + index">
|
<gauge :data="item"></gauge>
|
</a-col>
|
</template>
|
</a-row>
|
</div>
|
</template>
|
<script lang="ts" setup>
|
import { onMounted, ref } from 'vue';
|
import { Skeleton } from 'ant-design-vue';
|
import { queryDiskInfo } from './disk.api';
|
import gauge from './gauge.vue';
|
|
const diskInfo = ref([]);
|
const spinning = ref(true);
|
|
function loadRedisInfo() {
|
queryDiskInfo()
|
.then((res) => {
|
for (let i = 0; i < res.length; i++) {
|
// 当前算法算的是磁盘的已使用空间
|
res[i].restPPT = 100 - parseInt(String((res[i].rest / res[i].max) * 100));
|
}
|
diskInfo.value = res;
|
})
|
.finally(() => (spinning.value = false));
|
}
|
|
onMounted(() => {
|
loadRedisInfo();
|
});
|
</script>
|
