feat: add dashbaord cardnum redirect

This commit is contained in:
engigu
2025-09-28 21:22:05 +08:00
parent 3217d00bee
commit 7a8c6c4ce5
3 changed files with 77 additions and 11 deletions
+12 -2
View File
@@ -1,5 +1,5 @@
<template>
<Card class="w-full">
<Card class="w-full cursor-pointer hover:shadow-md transition-shadow duration-200" @click="handleClick">
<CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle class="text-sm font-medium text-muted-foreground">
{{ title }}
@@ -16,13 +16,23 @@
<script setup lang="ts">
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
import type { Component } from 'vue'
import { useRouter } from 'vue-router'
defineProps<{
const router = useRouter()
const props = defineProps<{
title: string
value: string | number
description?: string
icon?: Component
routePath?: string
}>()
const handleClick = () => {
if (props.routePath) {
router.push(props.routePath)
}
}
</script>
<script lang="ts">
@@ -422,11 +422,41 @@ onMounted(() => {
<template>
<div class="w-[90%] mx-auto pt-4 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
<StatCard title="推送留存数" :value="state.basicData.message_total_num" description="" :icon="DatabaseIcon" />
<StatCard title="托管消息数" :value="state.basicData.hosted_message_total_num" description="" :icon="BarChartIcon" />
<StatCard title="今日发送数" :value="state.basicData.today_total_num" description="" :icon="SendIcon" />
<StatCard title="今日成功数" :value="state.basicData.today_succ_num" description="" :icon="CheckCircleIcon" />
<StatCard title="今日失败数" :value="state.basicData.today_failed_num" description="" :icon="XCircleIcon" />
<StatCard
title="推送留存数"
:value="state.basicData.message_total_num"
description=""
:icon="DatabaseIcon"
route-path="/sendtasks"
/>
<StatCard
title="托管消息数"
:value="state.basicData.hosted_message_total_num"
description=""
:icon="BarChartIcon"
route-path="/hostedmessage"
/>
<StatCard
title="今日发送数"
:value="state.basicData.today_total_num"
description=""
:icon="SendIcon"
route-path="/sendlogs"
/>
<StatCard
title="今日成功数"
:value="state.basicData.today_succ_num"
description=""
:icon="CheckCircleIcon"
route-path="/sendlogs?query=%7B%22status%22%3A%221%22%7D"
/>
<StatCard
title="今日失败数"
:value="state.basicData.today_failed_num"
description=""
:icon="XCircleIcon"
route-path="/sendlogs?query=%7B%22status%22%3A%220%22%7D"
/>
</div>
<!-- 折线图 -->
+30 -4
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, computed, reactive, onMounted, nextTick } from 'vue'
import { ref, computed, reactive, onMounted, nextTick, watch } from 'vue'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
@@ -116,16 +116,42 @@ const queryListData = async (page: number, size: number, name = '', taskid = '',
state.total = rsp.data.data.total;
}
onMounted(async () => {
// 页面加载触发日志显示
// 解析URL参数并更新筛选状态
const parseUrlParams = async () => {
state.search = router.query.name?.toString() || '';
// 解析URL中的query参数,设置状态筛选
const queryParam = router.query.query?.toString() || '';
if (queryParam) {
try {
const queryObj = JSON.parse(decodeURIComponent(queryParam));
if (queryObj.status !== undefined) {
selectedStatus.value = queryObj.status.toString();
}
} catch (error) {
console.warn('解析query参数失败:', error);
}
} else {
// 如果没有query参数,重置为全部
selectedStatus.value = 'all';
}
await queryListData(
1,
state.pageSize,
router.query.name?.toString() || '',
router.query.taskid?.toString() || '',
router.query.query?.toString() || ''
queryParam
);
};
// 监听路由变化
watch(() => router.query, () => {
parseUrlParams();
}, { deep: true });
onMounted(async () => {
await parseUrlParams();
});
</script>