feat: add dashbaord cardnum redirect
This commit is contained in:
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<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">
|
<CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||||
<CardTitle class="text-sm font-medium text-muted-foreground">
|
<CardTitle class="text-sm font-medium text-muted-foreground">
|
||||||
{{ title }}
|
{{ title }}
|
||||||
@@ -16,13 +16,23 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
|
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
|
||||||
import type { Component } from 'vue'
|
import type { Component } from 'vue'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
|
||||||
defineProps<{
|
const router = useRouter()
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
title: string
|
title: string
|
||||||
value: string | number
|
value: string | number
|
||||||
description?: string
|
description?: string
|
||||||
icon?: Component
|
icon?: Component
|
||||||
|
routePath?: string
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
|
const handleClick = () => {
|
||||||
|
if (props.routePath) {
|
||||||
|
router.push(props.routePath)
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
|||||||
@@ -422,11 +422,41 @@ onMounted(() => {
|
|||||||
|
|
||||||
<template>
|
<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">
|
<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
|
||||||
<StatCard title="托管消息数" :value="state.basicData.hosted_message_total_num" description="" :icon="BarChartIcon" />
|
title="推送留存数"
|
||||||
<StatCard title="今日发送数" :value="state.basicData.today_total_num" description="" :icon="SendIcon" />
|
:value="state.basicData.message_total_num"
|
||||||
<StatCard title="今日成功数" :value="state.basicData.today_succ_num" description="" :icon="CheckCircleIcon" />
|
description=""
|
||||||
<StatCard title="今日失败数" :value="state.basicData.today_failed_num" description="" :icon="XCircleIcon" />
|
: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>
|
</div>
|
||||||
|
|
||||||
<!-- 折线图 -->
|
<!-- 折线图 -->
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<script setup lang="ts">
|
<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 { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
|
||||||
import { Button } from '@/components/ui/button'
|
import { Button } from '@/components/ui/button'
|
||||||
import { Badge } from '@/components/ui/badge'
|
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;
|
state.total = rsp.data.data.total;
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(async () => {
|
// 解析URL参数并更新筛选状态
|
||||||
// 页面加载触发日志显示
|
const parseUrlParams = async () => {
|
||||||
state.search = router.query.name?.toString() || '';
|
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(
|
await queryListData(
|
||||||
1,
|
1,
|
||||||
state.pageSize,
|
state.pageSize,
|
||||||
router.query.name?.toString() || '',
|
router.query.name?.toString() || '',
|
||||||
router.query.taskid?.toString() || '',
|
router.query.taskid?.toString() || '',
|
||||||
router.query.query?.toString() || ''
|
queryParam
|
||||||
);
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 监听路由变化
|
||||||
|
watch(() => router.query, () => {
|
||||||
|
parseUrlParams();
|
||||||
|
}, { deep: true });
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
await parseUrlParams();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user