fix dashboard

This commit is contained in:
jxxghp
2023-07-11 09:07:40 +08:00
parent de30dc6ce1
commit f8f59f929f
3 changed files with 39 additions and 5 deletions

View File

@@ -5,6 +5,9 @@ import { ScheduleInfo } from "@/api/types";
// 定时服务列表
const schedulerList = ref<ScheduleInfo[]>([]);
// 定时器
let refreshTimer: NodeJS.Timer | null = null;
// 调用API加载定时服务列表
const loadSchedulerList = async () => {
try {
@@ -17,6 +20,18 @@ const loadSchedulerList = async () => {
onMounted(() => {
loadSchedulerList();
// 启动定时器
refreshTimer = setInterval(() => {
loadSchedulerList();
}, 60000);
});
// 组件卸载时停止定时器
onUnmounted(() => {
if (refreshTimer) {
clearInterval(refreshTimer);
refreshTimer = null;
}
});
</script>

View File

@@ -36,12 +36,12 @@ const loadDownloaderInfo = async () => {
downloadInfo.value = res;
infoItems.value = [
{
avatar: "mdi-upload",
avatar: "mdi-cloud-upload",
title: "总上传量",
amount: formatFileSize(res.upload_size),
},
{
avatar: "mdi-download",
avatar: "mdi-download-box",
title: "总下载量",
amount: formatFileSize(res.download_size),
},

View File

@@ -1,4 +1,5 @@
<script setup lang="ts">
import api from "@/api";
import { hexToRgb } from "@layouts/utils";
import VueApexCharts from "vue3-apexcharts";
import { useTheme } from "vuetify";
@@ -86,7 +87,25 @@ const options = controlledComputed(
}
);
const series = [{ data: [37, 57, 45, 75, 57, 40, 65] }];
// 图表数据
const series = ref([{ data: [37, 57, 45, 75, 57, 40, 65] }]);
// 总数
const totalCount = computed(() => series.value[0].data.reduce((a, b) => a + b, 0));
// 调用API接口获取数据近7天数据
const getWeeklyData = async () => {
try {
const res: number[] = await api.get("dashboard/transfer");
series.value = [{ data: res }];
} catch (e) {
console.log(e);
}
};
onMounted(() => {
getWeeklyData();
});
</script>
<template>
@@ -105,8 +124,8 @@ const series = [{ data: [37, 57, 45, 75, 57, 40, 65] }];
<VueApexCharts type="bar" :options="options" :series="series" :height="220" />
<div class="d-flex align-center mb-3">
<h5 class="text-h5 me-4">45</h5>
<p>最近一周入库了 45 部影片 😎</p>
<h5 class="text-h5 me-4">{{ totalCount }}</h5>
<p>最近一周入库了 {{ totalCount }} 部影片 😎</p>
</div>
<VBtn block to="/history"> 查看详情 </VBtn>