mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-09-05 07:28:37 +08:00
fix dashboard
This commit is contained in:
@@ -5,6 +5,9 @@ import { ScheduleInfo } from "@/api/types";
|
|||||||
// 定时服务列表
|
// 定时服务列表
|
||||||
const schedulerList = ref<ScheduleInfo[]>([]);
|
const schedulerList = ref<ScheduleInfo[]>([]);
|
||||||
|
|
||||||
|
// 定时器
|
||||||
|
let refreshTimer: NodeJS.Timer | null = null;
|
||||||
|
|
||||||
// 调用API加载定时服务列表
|
// 调用API加载定时服务列表
|
||||||
const loadSchedulerList = async () => {
|
const loadSchedulerList = async () => {
|
||||||
try {
|
try {
|
||||||
@@ -17,6 +20,18 @@ const loadSchedulerList = async () => {
|
|||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
loadSchedulerList();
|
loadSchedulerList();
|
||||||
|
// 启动定时器
|
||||||
|
refreshTimer = setInterval(() => {
|
||||||
|
loadSchedulerList();
|
||||||
|
}, 60000);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 组件卸载时停止定时器
|
||||||
|
onUnmounted(() => {
|
||||||
|
if (refreshTimer) {
|
||||||
|
clearInterval(refreshTimer);
|
||||||
|
refreshTimer = null;
|
||||||
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -36,12 +36,12 @@ const loadDownloaderInfo = async () => {
|
|||||||
downloadInfo.value = res;
|
downloadInfo.value = res;
|
||||||
infoItems.value = [
|
infoItems.value = [
|
||||||
{
|
{
|
||||||
avatar: "mdi-upload",
|
avatar: "mdi-cloud-upload",
|
||||||
title: "总上传量",
|
title: "总上传量",
|
||||||
amount: formatFileSize(res.upload_size),
|
amount: formatFileSize(res.upload_size),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
avatar: "mdi-download",
|
avatar: "mdi-download-box",
|
||||||
title: "总下载量",
|
title: "总下载量",
|
||||||
amount: formatFileSize(res.download_size),
|
amount: formatFileSize(res.download_size),
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import api from "@/api";
|
||||||
import { hexToRgb } from "@layouts/utils";
|
import { hexToRgb } from "@layouts/utils";
|
||||||
import VueApexCharts from "vue3-apexcharts";
|
import VueApexCharts from "vue3-apexcharts";
|
||||||
import { useTheme } from "vuetify";
|
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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@@ -105,8 +124,8 @@ const series = [{ data: [37, 57, 45, 75, 57, 40, 65] }];
|
|||||||
<VueApexCharts type="bar" :options="options" :series="series" :height="220" />
|
<VueApexCharts type="bar" :options="options" :series="series" :height="220" />
|
||||||
|
|
||||||
<div class="d-flex align-center mb-3">
|
<div class="d-flex align-center mb-3">
|
||||||
<h5 class="text-h5 me-4">45</h5>
|
<h5 class="text-h5 me-4">{{ totalCount }}</h5>
|
||||||
<p>最近一周入库了 45 部影片 😎</p>
|
<p>最近一周入库了 {{ totalCount }} 部影片 😎</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<VBtn block to="/history"> 查看详情 </VBtn>
|
<VBtn block to="/history"> 查看详情 </VBtn>
|
||||||
|
|||||||
Reference in New Issue
Block a user