feat: add dashbaord cardnum redirect
This commit is contained in:
@@ -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>
|
||||
|
||||
<!-- 折线图 -->
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user