508 lines
14 KiB
Vue
508 lines
14 KiB
Vue
<script setup lang="ts">
|
|
import StatCard from '@/components/pages/dashboard/CardNum.vue'
|
|
import { InboxIcon, FileTextIcon, SendIcon, CheckCircleIcon, XCircleIcon } from 'lucide-vue-next'
|
|
// import { LineChart } from "@/components/ui/chart-line"
|
|
import { onMounted, reactive } from 'vue';
|
|
import { request } from '@/api/api';
|
|
import { toast } from 'vue-sonner';
|
|
// import VueApexCharts from 'vue3-apexcharts'
|
|
import ApexCharts from 'apexcharts'
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
|
|
|
interface SendData {
|
|
day: string
|
|
day_failed_num: number
|
|
day_succ_num: number
|
|
num: number
|
|
succ_num: number
|
|
}
|
|
interface CateData {
|
|
count_num: number
|
|
way_name: string
|
|
}
|
|
|
|
let state = reactive({
|
|
trendDays: 30,
|
|
basicData: {
|
|
message_total_num: 0,
|
|
hosted_message_total_num: 0,
|
|
today_total_num: 0,
|
|
today_succ_num: 0,
|
|
today_failed_num: 0,
|
|
},
|
|
trendData: {
|
|
latest_send_data: [] as SendData[] | null,
|
|
},
|
|
channelData: {
|
|
way_cate_data: [] as CateData[] | null,
|
|
},
|
|
loading: {
|
|
basic: false,
|
|
trend: false,
|
|
channels: false,
|
|
}
|
|
});
|
|
|
|
// 获取基础统计数据
|
|
const getBasicStatisticData = async () => {
|
|
state.loading.basic = true;
|
|
try {
|
|
const rsp = await request.get('/statistic?type=basic');
|
|
if (rsp && rsp.data && rsp.data.code == 200) {
|
|
state.basicData = rsp.data.data;
|
|
} else {
|
|
toast.error(rsp?.data?.msg || '获取基础统计数据失败');
|
|
}
|
|
} catch (error) {
|
|
toast.error('获取基础统计数据时发生错误');
|
|
} finally {
|
|
state.loading.basic = false;
|
|
}
|
|
}
|
|
|
|
// 获取趋势统计数据
|
|
const getTrendStatisticData = async () => {
|
|
state.loading.trend = true;
|
|
try {
|
|
// 根据屏幕大小决定请求的天数
|
|
const isSmallScreen = window.innerWidth < 768;
|
|
const days = isSmallScreen ? 15 : 30;
|
|
state.trendDays = days;
|
|
|
|
const rsp = await request.get(`/statistic?type=trend&days=${days}`);
|
|
if (rsp && rsp.data && rsp.data.code == 200) {
|
|
state.trendData = rsp.data.data;
|
|
// 数据加载完成后重新渲染折线图
|
|
setTimeout(() => {
|
|
renderLineChart();
|
|
}, 100);
|
|
} else {
|
|
toast.error(rsp?.data?.msg || '获取趋势统计数据失败');
|
|
}
|
|
} catch (error) {
|
|
toast.error('获取趋势统计数据时发生错误');
|
|
} finally {
|
|
state.loading.trend = false;
|
|
}
|
|
}
|
|
|
|
// 获取渠道统计数据
|
|
const getChannelStatisticData = async () => {
|
|
state.loading.channels = true;
|
|
try {
|
|
const rsp = await request.get('/statistic?type=channels');
|
|
if (rsp && rsp.data && rsp.data.code == 200) {
|
|
state.channelData = rsp.data.data;
|
|
// 数据加载完成后重新渲染饼图
|
|
setTimeout(() => {
|
|
renderPieChart();
|
|
}, 100);
|
|
} else {
|
|
toast.error(rsp?.data?.msg || '获取渠道统计数据失败');
|
|
}
|
|
} catch (error) {
|
|
toast.error('获取渠道统计数据时发生错误');
|
|
} finally {
|
|
state.loading.channels = false;
|
|
}
|
|
}
|
|
|
|
// 并行加载所有统计数据
|
|
const loadAllStatisticData = async () => {
|
|
await Promise.all([
|
|
getBasicStatisticData(),
|
|
getTrendStatisticData(),
|
|
getChannelStatisticData()
|
|
]);
|
|
}
|
|
|
|
const renderLineChart = () => {
|
|
const latestSendData = state.trendData.latest_send_data || [];
|
|
|
|
const options = {
|
|
series: [
|
|
{
|
|
name: '发送总数',
|
|
data: latestSendData.length > 0
|
|
? latestSendData.map(item => item.num || 0)
|
|
: []
|
|
},
|
|
{
|
|
name: '发送成功数',
|
|
data: latestSendData.length > 0
|
|
? latestSendData.map(item => item.day_succ_num || 0)
|
|
: []
|
|
},
|
|
{
|
|
name: '发送失败数',
|
|
data: latestSendData.length > 0
|
|
? latestSendData.map(item => item.day_failed_num || 0)
|
|
: []
|
|
},
|
|
],
|
|
chart: {
|
|
type: 'line',
|
|
height: 350,
|
|
toolbar: { show: false },
|
|
background: 'transparent',
|
|
animations: {
|
|
enabled: true,
|
|
easing: 'easeinout',
|
|
speed: 800,
|
|
animateGradually: {
|
|
enabled: true,
|
|
delay: 150
|
|
},
|
|
dynamicAnimation: {
|
|
enabled: true,
|
|
speed: 350
|
|
}
|
|
},
|
|
dropShadow: {
|
|
enabled: true,
|
|
color: '#000',
|
|
top: 18,
|
|
left: 7,
|
|
blur: 10,
|
|
opacity: 0.2
|
|
}
|
|
},
|
|
stroke: {
|
|
curve: 'smooth',
|
|
width: 3,
|
|
lineCap: 'round'
|
|
},
|
|
markers: {
|
|
size: 6,
|
|
colors: ['#3b82f6', '#10b981', '#ef4444'],
|
|
strokeColors: '#fff',
|
|
strokeWidth: 2,
|
|
hover: {
|
|
size: 8,
|
|
sizeOffset: 3
|
|
}
|
|
},
|
|
xaxis: {
|
|
categories: latestSendData.length > 0
|
|
? latestSendData.map(item => item.day)
|
|
: [],
|
|
axisBorder: {
|
|
show: false
|
|
},
|
|
axisTicks: {
|
|
show: false
|
|
},
|
|
labels: {
|
|
style: {
|
|
colors: '#64748b',
|
|
fontSize: '12px',
|
|
fontFamily: 'Inter, sans-serif'
|
|
}
|
|
}
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
style: {
|
|
colors: '#64748b',
|
|
fontSize: '12px',
|
|
fontFamily: 'Inter, sans-serif'
|
|
},
|
|
formatter: function (val: number) {
|
|
return val + ' 条'
|
|
}
|
|
}
|
|
},
|
|
colors: ['#3b82f6', '#10b981', '#ef4444'], // 蓝色表示总数，绿色表示成功，红色表示失败
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
shade: 'light',
|
|
type: 'vertical',
|
|
shadeIntensity: 0.5,
|
|
gradientToColors: ['#60a5fa', '#34d399', '#f87171'],
|
|
inverseColors: false,
|
|
opacityFrom: 0.8,
|
|
opacityTo: 0.1,
|
|
stops: [0, 100]
|
|
}
|
|
},
|
|
grid: {
|
|
borderColor: '#e2e8f0',
|
|
strokeDashArray: 3,
|
|
xaxis: {
|
|
lines: {
|
|
show: false
|
|
}
|
|
},
|
|
yaxis: {
|
|
lines: {
|
|
show: true
|
|
}
|
|
},
|
|
padding: {
|
|
top: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
left: 0
|
|
}
|
|
},
|
|
legend: {
|
|
position: 'top',
|
|
horizontalAlign: 'right',
|
|
floating: true,
|
|
offsetY: -25,
|
|
offsetX: -5,
|
|
fontSize: '12px',
|
|
fontFamily: 'Inter, sans-serif',
|
|
markers: {
|
|
width: 8,
|
|
height: 8,
|
|
radius: 4
|
|
}
|
|
},
|
|
tooltip: {
|
|
enabled: true,
|
|
shared: true,
|
|
intersect: false,
|
|
theme: document.documentElement.classList.contains('dark') ? 'dark' : 'light',
|
|
style: {
|
|
fontSize: '12px',
|
|
fontFamily: 'Inter, sans-serif'
|
|
},
|
|
x: {
|
|
show: true,
|
|
format: 'MM/dd'
|
|
},
|
|
y: {
|
|
formatter: function (val: number, { seriesIndex: _seriesIndex }: { seriesIndex: number }) {
|
|
return val + ' 条'
|
|
}
|
|
},
|
|
marker: {
|
|
show: true
|
|
},
|
|
custom: function ({ series, seriesIndex: _seriesIndex, dataPointIndex, w }: { series: number[][], seriesIndex: number, dataPointIndex: number, w: any }) {
|
|
const successCount = series[1][dataPointIndex];
|
|
const failedCount = series[2][dataPointIndex];
|
|
const total = successCount + failedCount;
|
|
const successRate = total > 0 ? ((successCount / total) * 100).toFixed(1) : '0.0';
|
|
|
|
const containerCls = 'bg-card text-foreground p-3 rounded-lg shadow-lg border border-border';
|
|
const labelMutedCls = 'text-sm text-muted-foreground';
|
|
const valueStrongCls = 'text-sm font-medium text-foreground';
|
|
const successRateCls = 'text-sm font-medium';
|
|
|
|
return `
|
|
<div class="${containerCls}">
|
|
<div class="font-medium mb-2">${w.globals.categoryLabels[dataPointIndex]}</div>
|
|
<div class="space-y-1">
|
|
<div class="flex items-center justify-between">
|
|
<span class="flex items-center">
|
|
<span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
|
|
<span class="${labelMutedCls}">成功:</span>
|
|
</span>
|
|
<span class="${valueStrongCls}">${successCount} 条</span>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<span class="flex items-center">
|
|
<span class="w-2 h-2 bg-red-500 rounded-full mr-2"></span>
|
|
<span class="${labelMutedCls}">失败:</span>
|
|
</span>
|
|
<span class="${valueStrongCls}">${failedCount} 条</span>
|
|
</div>
|
|
<div class="border-t border-border pt-1 mt-2">
|
|
<div class="flex items-center justify-between">
|
|
<span class="${labelMutedCls}">成功率:</span>
|
|
<span class="${successRateCls}">${successRate}%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
},
|
|
responsive: [{
|
|
breakpoint: 768,
|
|
options: {
|
|
chart: {
|
|
height: 300
|
|
},
|
|
legend: {
|
|
position: 'top',
|
|
horizontalAlign: 'right',
|
|
floating: true,
|
|
offsetY: -20,
|
|
offsetX: -5,
|
|
fontSize: '10px',
|
|
markers: {
|
|
width: 6,
|
|
height: 6,
|
|
radius: 3
|
|
},
|
|
itemMargin: {
|
|
horizontal: 5,
|
|
vertical: 0
|
|
}
|
|
}
|
|
}
|
|
}]
|
|
}
|
|
const chart = new ApexCharts(document.querySelector("#sales-chart"), options)
|
|
chart.render();
|
|
|
|
}
|
|
|
|
const renderPieChart = () => {
|
|
const wayCateData = state.channelData.way_cate_data || [];
|
|
const options = {
|
|
series: wayCateData.length > 0
|
|
? wayCateData.map(item => item.count_num)
|
|
: [],
|
|
chart: {
|
|
type: 'pie',
|
|
height: 350,
|
|
toolbar: { show: false },
|
|
background: 'transparent',
|
|
animations: {
|
|
enabled: true,
|
|
easing: 'easeinout',
|
|
speed: 800,
|
|
animateGradually: {
|
|
enabled: true,
|
|
delay: 150
|
|
},
|
|
dynamicAnimation: {
|
|
enabled: true,
|
|
speed: 350
|
|
}
|
|
}
|
|
},
|
|
labels: wayCateData.length > 0
|
|
? wayCateData.map(item => item.way_name)
|
|
: [],
|
|
colors: ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6'],
|
|
legend: {
|
|
position: 'bottom',
|
|
fontSize: '10px',
|
|
fontFamily: 'Inter, sans-serif',
|
|
markers: {
|
|
width: 8,
|
|
height: 8,
|
|
radius: 4
|
|
}
|
|
},
|
|
plotOptions: {
|
|
pie: {
|
|
donut: {
|
|
size: '0%'
|
|
},
|
|
expandOnClick: true
|
|
}
|
|
},
|
|
dataLabels: {
|
|
enabled: true,
|
|
formatter: function (val: number) {
|
|
return val.toFixed(1) + '%'
|
|
},
|
|
style: {
|
|
fontSize: '10px',
|
|
fontFamily: 'Inter, sans-serif',
|
|
fontWeight: 'bold'
|
|
}
|
|
},
|
|
tooltip: {
|
|
enabled: true,
|
|
theme: 'light',
|
|
style: {
|
|
fontSize: '12px',
|
|
fontFamily: 'Inter, sans-serif'
|
|
},
|
|
y: {
|
|
formatter: function (val: number) {
|
|
return val + ' 条'
|
|
}
|
|
}
|
|
},
|
|
responsive: [{
|
|
breakpoint: 768,
|
|
options: {
|
|
chart: {
|
|
height: 300
|
|
},
|
|
legend: {
|
|
position: 'bottom'
|
|
}
|
|
}
|
|
}]
|
|
}
|
|
const pieChart = new ApexCharts(document.querySelector("#pie-chart"), options)
|
|
pieChart.render();
|
|
}
|
|
|
|
// 获取今日日期
|
|
const getTodayDate = () => {
|
|
const today = new Date();
|
|
return today.toISOString().split('T')[0]; // 返回 YYYY-MM-DD 格式
|
|
}
|
|
|
|
onMounted(() => {
|
|
loadAllStatisticData();
|
|
})
|
|
|
|
|
|
|
|
</script>
|
|
|
|
<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.hosted_message_total_num" description="" :icon="InboxIcon"
|
|
route-path="/hostedmessage" />
|
|
<StatCard title="发送日志数" :value="state.basicData.message_total_num" description="" :icon="FileTextIcon"
|
|
route-path="/sendlogs" />
|
|
<StatCard title="今日发送数" :value="state.basicData.today_total_num" description="" :icon="SendIcon"
|
|
:route-path="`/sendlogs?query=${encodeURIComponent(JSON.stringify({ day_created_on: getTodayDate() }))}`" />
|
|
<StatCard title="今日成功数" :value="state.basicData.today_succ_num" description="" :icon="CheckCircleIcon"
|
|
:route-path="`/sendlogs?query=${encodeURIComponent(JSON.stringify({ status: '1', day_created_on: getTodayDate() }))}`" />
|
|
<StatCard title="今日失败数" :value="state.basicData.today_failed_num" description="" :icon="XCircleIcon"
|
|
:route-path="`/sendlogs?query=${encodeURIComponent(JSON.stringify({ status: '0', day_created_on: getTodayDate() }))}`" />
|
|
</div>
|
|
|
|
<!-- 折线图 -->
|
|
<!-- <LineChart
|
|
:data="data"
|
|
index="year"
|
|
:categories="['Export Growth Rate', 'Import Growth Rate']"
|
|
:y-formatter="(tick, i) => {
|
|
return typeof tick === 'number'
|
|
? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`
|
|
: ''
|
|
}"
|
|
/> -->
|
|
|
|
<!-- 图表区域 -->
|
|
<div class="w-[90%] mx-auto mt-8 grid grid-cols-1 lg:grid-cols-10 gap-6">
|
|
<!-- 折线图 -->
|
|
<Card class="w-full lg:col-span-7">
|
|
<CardHeader>
|
|
<CardTitle>消息发送趋势</CardTitle>
|
|
<CardDescription>最近{{ state.trendDays }}天的发送情况统计</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div id="sales-chart" class="w-full h-[350px]"></div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<!-- 饼图 -->
|
|
<Card class="w-full lg:col-span-3">
|
|
<CardHeader>
|
|
<CardTitle>发送渠道分布</CardTitle>
|
|
<CardDescription>各发送渠道的使用情况统计</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div id="pie-chart" class="w-full h-[350px]"></div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</template>
|