feat(components): 新增仪表盘监控统计卡片和图表组件
This commit is contained in:
Leo
parent
269c0b60a8
commit
c299ff2e6a
283
src/views/dashboard/monitor/components/DashboardStatCard.vue
Normal file
283
src/views/dashboard/monitor/components/DashboardStatCard.vue
Normal file
@ -0,0 +1,283 @@
|
|||||||
|
<template>
|
||||||
|
<n-card class="stat-card" :style="cardStyle" hoverable>
|
||||||
|
<!-- 主要内容区域 -->
|
||||||
|
<n-space justify="space-between" align="center" class="mb-2">
|
||||||
|
<!-- 左侧数据区域 -->
|
||||||
|
<div class="stat-content">
|
||||||
|
<div class="stat-title">
|
||||||
|
{{ title }}
|
||||||
|
</div>
|
||||||
|
<div class="stat-value">
|
||||||
|
<n-number-animation
|
||||||
|
ref="numberAnimationRef"
|
||||||
|
:from="0"
|
||||||
|
:to="Number(value)"
|
||||||
|
:duration="1800"
|
||||||
|
show-separator
|
||||||
|
:active="true"
|
||||||
|
:precision="0"
|
||||||
|
:easing="cubicBezierEasing"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="stat-subtitle">
|
||||||
|
{{ subtitle }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 右侧图标区域 -->
|
||||||
|
<div class="stat-icon" :style="iconStyle">
|
||||||
|
<n-icon :size="28">
|
||||||
|
<IconParkOutline:user v-if="icon === 'user'" />
|
||||||
|
<IconParkOutline:data v-else-if="icon === 'data'" />
|
||||||
|
<IconParkOutline:folderOpen v-else-if="icon === 'storage'" />
|
||||||
|
<IconParkOutline:chartLine v-else-if="icon === 'activity'" />
|
||||||
|
<IconParkOutline:user v-else />
|
||||||
|
</n-icon>
|
||||||
|
</div>
|
||||||
|
</n-space>
|
||||||
|
|
||||||
|
<!-- 底部信息区域 -->
|
||||||
|
<div class="stat-footer">
|
||||||
|
<n-space justify="space-between" align="center">
|
||||||
|
<div class="stat-extra">
|
||||||
|
{{ extraInfo }}
|
||||||
|
</div>
|
||||||
|
<div v-if="trend" class="stat-trend" :class="trendClass">
|
||||||
|
<n-icon :size="12" class="trend-icon">
|
||||||
|
<IconParkOutline:arrowUp v-if="trendUp" />
|
||||||
|
<IconParkOutline:arrowDown v-else />
|
||||||
|
</n-icon>
|
||||||
|
<span class="trend-text">{{ trend }}</span>
|
||||||
|
</div>
|
||||||
|
</n-space>
|
||||||
|
</div>
|
||||||
|
</n-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { computed, onMounted, ref } from 'vue'
|
||||||
|
import type { StatCardProps } from '../types'
|
||||||
|
|
||||||
|
// 定义Props
|
||||||
|
const props = withDefaults(defineProps<StatCardProps>(), {
|
||||||
|
trendUp: true,
|
||||||
|
})
|
||||||
|
|
||||||
|
// 数字动画引用
|
||||||
|
const numberAnimationRef = ref()
|
||||||
|
|
||||||
|
// 自定义缓动函数，让数字动画更加流畅
|
||||||
|
function cubicBezierEasing(t: number): number {
|
||||||
|
return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1
|
||||||
|
}
|
||||||
|
|
||||||
|
// 卡片样式 - 更紧凑精致的设计
|
||||||
|
const cardStyle = computed(() => ({
|
||||||
|
background:
|
||||||
|
'linear-gradient(135deg, var(--card-color) 0%, rgba(255, 255, 255, 0.6) 100%)',
|
||||||
|
border: '1px solid var(--border-color)',
|
||||||
|
borderRadius: '12px',
|
||||||
|
boxShadow: '0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.05)',
|
||||||
|
transition: 'all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)',
|
||||||
|
padding: '18px',
|
||||||
|
position: 'relative',
|
||||||
|
overflow: 'hidden',
|
||||||
|
minHeight: '140px',
|
||||||
|
}))
|
||||||
|
|
||||||
|
// 图标样式 - 更紧凑的设计
|
||||||
|
const iconStyle = computed(() => ({
|
||||||
|
color: props.color,
|
||||||
|
background: `${props.color}12`,
|
||||||
|
borderRadius: '10px',
|
||||||
|
padding: '10px',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
}))
|
||||||
|
|
||||||
|
// 趋势样式类
|
||||||
|
const trendClass = computed(() => ({
|
||||||
|
'trend-up': props.trendUp,
|
||||||
|
'trend-down': !props.trendUp,
|
||||||
|
}))
|
||||||
|
|
||||||
|
// 组件挂载后触发动画
|
||||||
|
onMounted(() => {
|
||||||
|
// 延迟一点开始动画，增强视觉效果
|
||||||
|
setTimeout(
|
||||||
|
() => {
|
||||||
|
numberAnimationRef.value?.play()
|
||||||
|
},
|
||||||
|
Math.random() * 300 + 200,
|
||||||
|
) // 随机延迟，错开动画时间
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.stat-card {
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
border-radius: 16px;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 3px;
|
||||||
|
background: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
var(--primary-color),
|
||||||
|
var(--success-color),
|
||||||
|
var(--warning-color),
|
||||||
|
var(--info-color)
|
||||||
|
);
|
||||||
|
border-radius: 12px 12px 0 0;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
|
||||||
|
border-color: var(--primary-color-suppl);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card:hover::before {
|
||||||
|
height: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-content {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-title {
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--text-color-2);
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: 0.3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-value {
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-color-1);
|
||||||
|
line-height: 1.2;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
font-family:
|
||||||
|
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
|
||||||
|
Arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-subtitle {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--text-color-3);
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-icon {
|
||||||
|
width: 56px;
|
||||||
|
height: 56px;
|
||||||
|
border-radius: 12px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card:hover .stat-icon {
|
||||||
|
transform: scale(1.08);
|
||||||
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-footer {
|
||||||
|
border-top: 1px solid var(--divider-color);
|
||||||
|
padding-top: 10px;
|
||||||
|
margin-top: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-extra {
|
||||||
|
font-size: 11px;
|
||||||
|
color: var(--text-color-3);
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-trend {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 3px;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 500;
|
||||||
|
padding: 3px 6px;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.trend-up {
|
||||||
|
color: var(--success-color);
|
||||||
|
background: linear-gradient(
|
||||||
|
135deg,
|
||||||
|
var(--success-color-suppl),
|
||||||
|
var(--success-color-hover)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
.trend-down {
|
||||||
|
color: var(--error-color);
|
||||||
|
background: linear-gradient(
|
||||||
|
135deg,
|
||||||
|
var(--error-color-suppl),
|
||||||
|
var(--error-color-hover)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
.trend-icon {
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trend-text {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 响应式设计 */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.stat-value {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-icon {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-icon :deep(.n-icon) {
|
||||||
|
font-size: 22px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-title {
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-subtitle {
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-extra {
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 暗色主题适配 */
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.stat-card:hover {
|
||||||
|
box-shadow: 0 8px 24px rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
906
src/views/dashboard/monitor/components/LoginTrendChart.vue
Normal file
906
src/views/dashboard/monitor/components/LoginTrendChart.vue
Normal file
@ -0,0 +1,906 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login-trend-chart">
|
||||||
|
<!-- 图表标题和数据概览 -->
|
||||||
|
<div class="chart-header">
|
||||||
|
<div class="chart-stats">
|
||||||
|
<div class="stat-card highlight">
|
||||||
|
<div class="stat-icon">
|
||||||
|
<div class="icon-wrapper primary">
|
||||||
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
|
||||||
|
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
|
<circle cx="9" cy="7" r="4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
|
<path d="m22 21-3-3m0 0a5.5 5.5 0 1 0-7.78-7.78 5.5 5.5 0 0 0 7.78 7.78Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-content">
|
||||||
|
<div class="stat-label">
|
||||||
|
今日登录
|
||||||
|
</div>
|
||||||
|
<div class="stat-value primary">
|
||||||
|
{{ todayCount.toLocaleString() }}
|
||||||
|
</div>
|
||||||
|
<div class="stat-subtitle">
|
||||||
|
实时数据
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-trend up">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
||||||
|
<path d="m3 17 6-6 4 4 8-8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
|
<path d="m14 5 7 0 0 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="stat-icon">
|
||||||
|
<div class="icon-wrapper secondary">
|
||||||
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
|
||||||
|
<rect x="3" y="4" width="18" height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2" />
|
||||||
|
<line x1="16" y1="2" x2="16" y2="6" stroke="currentColor" stroke-width="2" />
|
||||||
|
<line x1="8" y1="2" x2="8" y2="6" stroke="currentColor" stroke-width="2" />
|
||||||
|
<line x1="3" y1="10" x2="21" y2="10" stroke="currentColor" stroke-width="2" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-content">
|
||||||
|
<div class="stat-label">
|
||||||
|
昨日登录
|
||||||
|
</div>
|
||||||
|
<div class="stat-value">
|
||||||
|
{{ yesterdayCount.toLocaleString() }}
|
||||||
|
</div>
|
||||||
|
<div class="stat-subtitle">
|
||||||
|
对比数据
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="stat-icon">
|
||||||
|
<div class="icon-wrapper" :class="growthClass.positive ? 'success' : 'warning'">
|
||||||
|
<svg v-if="growthClass.positive" width="20" height="20" viewBox="0 0 24 24" fill="none">
|
||||||
|
<line x1="12" y1="19" x2="12" y2="5" stroke="currentColor" stroke-width="2" />
|
||||||
|
<polyline points="5,12 12,5 19,12" stroke="currentColor" stroke-width="2" />
|
||||||
|
</svg>
|
||||||
|
<svg v-else width="20" height="20" viewBox="0 0 24 24" fill="none">
|
||||||
|
<line x1="12" y1="5" x2="12" y2="19" stroke="currentColor" stroke-width="2" />
|
||||||
|
<polyline points="19,12 12,19 5,12" stroke="currentColor" stroke-width="2" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-content">
|
||||||
|
<div class="stat-label">
|
||||||
|
环比增长
|
||||||
|
</div>
|
||||||
|
<div class="stat-value" :class="growthClass">
|
||||||
|
{{ growthRate }}
|
||||||
|
</div>
|
||||||
|
<div class="stat-subtitle">
|
||||||
|
{{ growthClass.positive ? '持续上升' : '有所下降' }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 图表主体 -->
|
||||||
|
<div ref="chartContainer" class="chart-container">
|
||||||
|
<svg
|
||||||
|
class="chart-svg"
|
||||||
|
:width="chartWidth"
|
||||||
|
:height="chartHeight"
|
||||||
|
:viewBox="`0 0 ${chartWidth} ${chartHeight}`"
|
||||||
|
>
|
||||||
|
<!-- 网格线 -->
|
||||||
|
<g class="grid-lines">
|
||||||
|
<line
|
||||||
|
v-for="(line, index) in horizontalLines"
|
||||||
|
:key="`h-${index}`"
|
||||||
|
:x1="padding.left"
|
||||||
|
:x2="chartWidth - padding.right"
|
||||||
|
:y1="line.y"
|
||||||
|
:y2="line.y"
|
||||||
|
class="grid-line"
|
||||||
|
/>
|
||||||
|
<line
|
||||||
|
v-for="(line, index) in verticalLines"
|
||||||
|
:key="`v-${index}`"
|
||||||
|
:x1="line.x"
|
||||||
|
:x2="line.x"
|
||||||
|
:y1="padding.top"
|
||||||
|
:y2="chartHeight - padding.bottom"
|
||||||
|
class="grid-line"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- 渐变定义 -->
|
||||||
|
<defs>
|
||||||
|
<!-- 主要区域渐变 - 简洁的蓝色渐变 -->
|
||||||
|
<linearGradient id="areaGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||||
|
<stop offset="0%" stop-color="#3b82f6" stop-opacity="0.3" />
|
||||||
|
<stop offset="100%" stop-color="#3b82f6" stop-opacity="0.05" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- 面积填充 -->
|
||||||
|
<path
|
||||||
|
:d="areaPath"
|
||||||
|
fill="url(#areaGradient)"
|
||||||
|
class="area-fill"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- 趋势线 -->
|
||||||
|
<path
|
||||||
|
:d="smoothLinePath"
|
||||||
|
fill="none"
|
||||||
|
stroke="#3b82f6"
|
||||||
|
stroke-width="2.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
class="trend-line"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- 数据点 -->
|
||||||
|
<g class="data-points">
|
||||||
|
<circle
|
||||||
|
v-for="(point, index) in chartPoints"
|
||||||
|
:key="index"
|
||||||
|
:cx="point.x"
|
||||||
|
:cy="point.y"
|
||||||
|
r="4"
|
||||||
|
fill="#3b82f6"
|
||||||
|
class="data-point"
|
||||||
|
@mouseenter="showTooltip(point, $event)"
|
||||||
|
@mouseleave="hideTooltip"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Y轴标签 -->
|
||||||
|
<g class="y-axis-labels">
|
||||||
|
<text
|
||||||
|
v-for="(label, index) in yAxisLabels"
|
||||||
|
:key="index"
|
||||||
|
:x="padding.left - 10"
|
||||||
|
:y="label.y + 5"
|
||||||
|
text-anchor="end"
|
||||||
|
class="axis-label"
|
||||||
|
>
|
||||||
|
{{ label.value }}
|
||||||
|
</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- X轴标签 -->
|
||||||
|
<g class="x-axis-labels">
|
||||||
|
<text
|
||||||
|
v-for="(label, index) in xAxisLabels"
|
||||||
|
:key="index"
|
||||||
|
:x="label.x"
|
||||||
|
:y="chartHeight - padding.bottom + 20"
|
||||||
|
text-anchor="middle"
|
||||||
|
class="axis-label"
|
||||||
|
>
|
||||||
|
{{ label.value }}
|
||||||
|
</text>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<!-- 工具提示 -->
|
||||||
|
<transition name="tooltip-fade">
|
||||||
|
<div
|
||||||
|
v-if="tooltip.visible"
|
||||||
|
class="chart-tooltip"
|
||||||
|
:class="tooltip.position"
|
||||||
|
:style="tooltipStyle"
|
||||||
|
>
|
||||||
|
<div class="tooltip-content">
|
||||||
|
<div class="tooltip-date">
|
||||||
|
{{ tooltip.data?.label }}
|
||||||
|
</div>
|
||||||
|
<div class="tooltip-value">
|
||||||
|
<span class="tooltip-dot" :style="{ backgroundColor: primaryColor }" />
|
||||||
|
<span class="tooltip-text">登录次数: <strong>{{ tooltip.data?.count }}</strong></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tooltip-arrow" :class="tooltip.arrowPosition" />
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { computed, onMounted, reactive, ref } from 'vue'
|
||||||
|
|
||||||
|
// Props定义
|
||||||
|
interface LoginTrendData {
|
||||||
|
date: string
|
||||||
|
count: number
|
||||||
|
label: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
data: LoginTrendData[]
|
||||||
|
}>()
|
||||||
|
|
||||||
|
// 响应式数据
|
||||||
|
const chartContainer = ref<HTMLElement>()
|
||||||
|
const primaryColor = 'var(--primary-color)'
|
||||||
|
|
||||||
|
// 图表配置
|
||||||
|
const chartWidth = 800
|
||||||
|
const chartHeight = 280
|
||||||
|
const padding = {
|
||||||
|
top: 20,
|
||||||
|
right: 30,
|
||||||
|
bottom: 50,
|
||||||
|
left: 60,
|
||||||
|
}
|
||||||
|
|
||||||
|
// 工具提示状态
|
||||||
|
const tooltip = reactive({
|
||||||
|
visible: false,
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
data: null as LoginTrendData | null,
|
||||||
|
position: 'right' as 'left' | 'right',
|
||||||
|
arrowPosition: 'left' as 'left' | 'right' | 'top' | 'bottom',
|
||||||
|
})
|
||||||
|
|
||||||
|
// 计算属性
|
||||||
|
const chartData = computed(() => props.data || [])
|
||||||
|
|
||||||
|
// 今日和昨日数据
|
||||||
|
const todayCount = computed(() => {
|
||||||
|
const today = chartData.value[chartData.value.length - 1]
|
||||||
|
return today?.count || 0
|
||||||
|
})
|
||||||
|
|
||||||
|
const yesterdayCount = computed(() => {
|
||||||
|
const yesterday = chartData.value[chartData.value.length - 2]
|
||||||
|
return yesterday?.count || 0
|
||||||
|
})
|
||||||
|
|
||||||
|
// 增长率计算
|
||||||
|
const growthRate = computed(() => {
|
||||||
|
if (yesterdayCount.value === 0)
|
||||||
|
return '+0%'
|
||||||
|
const rate = ((todayCount.value - yesterdayCount.value) / yesterdayCount.value * 100)
|
||||||
|
return rate >= 0 ? `+${rate.toFixed(1)}%` : `${rate.toFixed(1)}%`
|
||||||
|
})
|
||||||
|
|
||||||
|
const growthClass = computed(() => ({
|
||||||
|
positive: todayCount.value >= yesterdayCount.value,
|
||||||
|
negative: todayCount.value < yesterdayCount.value,
|
||||||
|
}))
|
||||||
|
|
||||||
|
// 数据范围
|
||||||
|
const dataRange = computed(() => {
|
||||||
|
const values = chartData.value.map(d => d.count)
|
||||||
|
const min = Math.min(...values)
|
||||||
|
const max = Math.max(...values)
|
||||||
|
const padding = (max - min) * 0.1
|
||||||
|
return {
|
||||||
|
min: Math.max(0, min - padding),
|
||||||
|
max: max + padding,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 坐标转换函数
|
||||||
|
function getX(index: number): number {
|
||||||
|
const chartAreaWidth = chartWidth - padding.left - padding.right
|
||||||
|
return padding.left + (chartAreaWidth / (chartData.value.length - 1)) * index
|
||||||
|
}
|
||||||
|
|
||||||
|
function getY(value: number): number {
|
||||||
|
const chartAreaHeight = chartHeight - padding.top - padding.bottom
|
||||||
|
const range = dataRange.value.max - dataRange.value.min
|
||||||
|
return padding.top + chartAreaHeight - ((value - dataRange.value.min) / range) * chartAreaHeight
|
||||||
|
}
|
||||||
|
|
||||||
|
// 图表路径
|
||||||
|
const chartPoints = computed(() => {
|
||||||
|
return chartData.value.map((item, index) => ({
|
||||||
|
x: getX(index),
|
||||||
|
y: getY(item.count),
|
||||||
|
data: item,
|
||||||
|
}))
|
||||||
|
})
|
||||||
|
|
||||||
|
// 生成平滑曲线路径
|
||||||
|
const smoothLinePath = computed(() => {
|
||||||
|
if (chartPoints.value.length === 0)
|
||||||
|
return ''
|
||||||
|
|
||||||
|
const points = chartPoints.value
|
||||||
|
if (points.length === 1) {
|
||||||
|
return `M ${points[0].x} ${points[0].y}`
|
||||||
|
}
|
||||||
|
|
||||||
|
let path = `M ${points[0].x} ${points[0].y}`
|
||||||
|
|
||||||
|
for (let i = 1; i < points.length; i++) {
|
||||||
|
const current = points[i]
|
||||||
|
const previous = points[i - 1]
|
||||||
|
|
||||||
|
if (i === 1) {
|
||||||
|
// 第一段使用二次贝塞尔曲线
|
||||||
|
const controlX = previous.x + (current.x - previous.x) * 0.5
|
||||||
|
const controlY = previous.y
|
||||||
|
path += ` Q ${controlX} ${controlY} ${current.x} ${current.y}`
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
// 使用平滑的三次贝塞尔曲线
|
||||||
|
const controlPoint1X = previous.x + (current.x - previous.x) * 0.3
|
||||||
|
const controlPoint1Y = previous.y
|
||||||
|
const controlPoint2X = current.x - (current.x - previous.x) * 0.3
|
||||||
|
const controlPoint2Y = current.y
|
||||||
|
path += ` C ${controlPoint1X} ${controlPoint1Y} ${controlPoint2X} ${controlPoint2Y} ${current.x} ${current.y}`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return path
|
||||||
|
})
|
||||||
|
|
||||||
|
const areaPath = computed(() => {
|
||||||
|
if (chartPoints.value.length === 0)
|
||||||
|
return ''
|
||||||
|
|
||||||
|
const points = chartPoints.value
|
||||||
|
const bottom = chartHeight - padding.bottom
|
||||||
|
|
||||||
|
// 从底部开始，移动到第一个点的底部
|
||||||
|
let path = `M ${points[0].x} ${bottom}`
|
||||||
|
path += ` L ${points[0].x} ${points[0].y}`
|
||||||
|
|
||||||
|
// 使用与趋势线相同的平滑曲线
|
||||||
|
for (let i = 1; i < points.length; i++) {
|
||||||
|
const current = points[i]
|
||||||
|
const previous = points[i - 1]
|
||||||
|
|
||||||
|
if (i === 1) {
|
||||||
|
// 第一段使用二次贝塞尔曲线
|
||||||
|
const controlX = previous.x + (current.x - previous.x) * 0.5
|
||||||
|
const controlY = previous.y
|
||||||
|
path += ` Q ${controlX} ${controlY} ${current.x} ${current.y}`
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
// 使用平滑的三次贝塞尔曲线
|
||||||
|
const controlPoint1X = previous.x + (current.x - previous.x) * 0.3
|
||||||
|
const controlPoint1Y = previous.y
|
||||||
|
const controlPoint2X = current.x - (current.x - previous.x) * 0.3
|
||||||
|
const controlPoint2Y = current.y
|
||||||
|
path += ` C ${controlPoint1X} ${controlPoint1Y} ${controlPoint2X} ${controlPoint2Y} ${current.x} ${current.y}`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 闭合路径，返回底部
|
||||||
|
path += ` L ${points[points.length - 1].x} ${bottom} Z`
|
||||||
|
|
||||||
|
return path
|
||||||
|
})
|
||||||
|
|
||||||
|
// 网格线
|
||||||
|
const horizontalLines = computed(() => {
|
||||||
|
const lines = []
|
||||||
|
const steps = 4
|
||||||
|
for (let i = 0; i <= steps; i++) {
|
||||||
|
const value = dataRange.value.min + (dataRange.value.max - dataRange.value.min) * (i / steps)
|
||||||
|
lines.push({ y: getY(value) })
|
||||||
|
}
|
||||||
|
return lines
|
||||||
|
})
|
||||||
|
|
||||||
|
const verticalLines = computed(() => {
|
||||||
|
return chartData.value.map((_, index) => ({
|
||||||
|
x: getX(index),
|
||||||
|
}))
|
||||||
|
})
|
||||||
|
|
||||||
|
// 轴标签
|
||||||
|
const yAxisLabels = computed(() => {
|
||||||
|
const labels = []
|
||||||
|
const steps = 4
|
||||||
|
for (let i = 0; i <= steps; i++) {
|
||||||
|
const value = dataRange.value.min + (dataRange.value.max - dataRange.value.min) * (i / steps)
|
||||||
|
labels.push({
|
||||||
|
y: getY(value),
|
||||||
|
value: Math.round(value).toLocaleString(),
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return labels.reverse()
|
||||||
|
})
|
||||||
|
|
||||||
|
const xAxisLabels = computed(() => {
|
||||||
|
return chartData.value.map((item, index) => ({
|
||||||
|
x: getX(index),
|
||||||
|
value: item.label,
|
||||||
|
}))
|
||||||
|
})
|
||||||
|
|
||||||
|
// 工具提示样式
|
||||||
|
const tooltipStyle = computed(() => ({
|
||||||
|
left: `${tooltip.x}px`,
|
||||||
|
top: `${tooltip.y}px`,
|
||||||
|
}))
|
||||||
|
|
||||||
|
// 工具提示方法
|
||||||
|
function showTooltip(point: any, event: MouseEvent) {
|
||||||
|
const rect = chartContainer.value?.getBoundingClientRect()
|
||||||
|
if (!rect)
|
||||||
|
return
|
||||||
|
|
||||||
|
tooltip.visible = true
|
||||||
|
tooltip.data = point.data
|
||||||
|
|
||||||
|
// 计算tooltip的基本尺寸（估算）
|
||||||
|
const tooltipWidth = 140
|
||||||
|
const tooltipHeight = 70
|
||||||
|
const offset = 16
|
||||||
|
|
||||||
|
// 计算鼠标相对于容器的位置
|
||||||
|
const mouseX = event.clientX - rect.left
|
||||||
|
const mouseY = event.clientY - rect.top
|
||||||
|
|
||||||
|
// 判断显示位置和箭头方向
|
||||||
|
const isRightSide = mouseX > rect.width / 2
|
||||||
|
|
||||||
|
// 智能调整水平位置
|
||||||
|
let x = mouseX + offset
|
||||||
|
tooltip.position = 'right'
|
||||||
|
tooltip.arrowPosition = 'left'
|
||||||
|
|
||||||
|
if (isRightSide) {
|
||||||
|
// 如果在右半部分，显示在左侧
|
||||||
|
x = mouseX - tooltipWidth - offset
|
||||||
|
tooltip.position = 'left'
|
||||||
|
tooltip.arrowPosition = 'right'
|
||||||
|
}
|
||||||
|
|
||||||
|
// 确保不超出左右边界
|
||||||
|
x = Math.max(offset, Math.min(x, rect.width - tooltipWidth - offset))
|
||||||
|
|
||||||
|
// 智能调整垂直位置
|
||||||
|
let y = mouseY - tooltipHeight / 2
|
||||||
|
|
||||||
|
// 如果会超出顶部或底部边界，则调整位置
|
||||||
|
if (y < offset) {
|
||||||
|
y = mouseY + offset
|
||||||
|
tooltip.arrowPosition = 'top'
|
||||||
|
}
|
||||||
|
else if (y + tooltipHeight > rect.height - offset) {
|
||||||
|
y = mouseY - tooltipHeight - offset
|
||||||
|
tooltip.arrowPosition = 'bottom'
|
||||||
|
}
|
||||||
|
|
||||||
|
// 最终边界检查
|
||||||
|
y = Math.max(offset, Math.min(y, rect.height - tooltipHeight - offset))
|
||||||
|
|
||||||
|
tooltip.x = x
|
||||||
|
tooltip.y = y
|
||||||
|
}
|
||||||
|
|
||||||
|
function hideTooltip() {
|
||||||
|
tooltip.visible = false
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
// 组件挂载完成
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.login-trend-chart {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-header {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
padding: 0 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-stats {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
padding: 20px;
|
||||||
|
background: linear-gradient(135deg,
|
||||||
|
rgba(255, 255, 255, 0.9) 0%,
|
||||||
|
rgba(255, 255, 255, 0.6) 100%);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
|
border-radius: 16px;
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
box-shadow:
|
||||||
|
0 8px 32px rgba(0, 0, 0, 0.1),
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
||||||
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 2px;
|
||||||
|
background: linear-gradient(90deg,
|
||||||
|
transparent 0%,
|
||||||
|
var(--primary-color) 50%,
|
||||||
|
transparent 100%);
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card:hover::before {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card.highlight {
|
||||||
|
background: linear-gradient(135deg,
|
||||||
|
rgba(99, 102, 241, 0.1) 0%,
|
||||||
|
rgba(139, 92, 246, 0.05) 100%);
|
||||||
|
border-color: rgba(99, 102, 241, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card.highlight::before {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow:
|
||||||
|
0 12px 40px rgba(0, 0, 0, 0.15),
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-icon {
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-wrapper {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
border-radius: 12px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: white;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-wrapper::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: inherit;
|
||||||
|
filter: blur(8px);
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-wrapper svg {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-wrapper.primary {
|
||||||
|
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-wrapper.secondary {
|
||||||
|
background: linear-gradient(135deg, #64748b 0%, #475569 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-wrapper.success {
|
||||||
|
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-wrapper.warning {
|
||||||
|
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-content {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-label {
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--text-color-3);
|
||||||
|
margin-bottom: 4px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-value {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--text-color-1);
|
||||||
|
margin-bottom: 2px;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-value.primary {
|
||||||
|
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-value.positive {
|
||||||
|
color: #10b981;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-value.negative {
|
||||||
|
color: #ef4444;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-subtitle {
|
||||||
|
font-size: 11px;
|
||||||
|
color: var(--text-color-3);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-trend {
|
||||||
|
position: absolute;
|
||||||
|
top: 12px;
|
||||||
|
right: 12px;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
border-radius: 6px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: rgba(16, 185, 129, 0.1);
|
||||||
|
color: #10b981;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-container {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
overflow: visible;
|
||||||
|
background: var(--card-color);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 24px;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-svg {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
max-width: 100%;
|
||||||
|
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.05));
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-line {
|
||||||
|
stroke: rgba(148, 163, 184, 0.2);
|
||||||
|
stroke-width: 0.5;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trend-line {
|
||||||
|
filter: drop-shadow(0 2px 4px rgba(59, 130, 246, 0.2));
|
||||||
|
}
|
||||||
|
|
||||||
|
.area-fill {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-point {
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-point:hover {
|
||||||
|
transform: scale(1.2);
|
||||||
|
filter: drop-shadow(0 3px 8px rgba(59, 130, 246, 0.3));
|
||||||
|
}
|
||||||
|
|
||||||
|
.axis-label {
|
||||||
|
font-size: 11px;
|
||||||
|
fill: var(--text-color-2);
|
||||||
|
font-family: system-ui, -apple-system, sans-serif;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 工具提示动画 */
|
||||||
|
.tooltip-fade-enter-active,
|
||||||
|
.tooltip-fade-leave-active {
|
||||||
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip-fade-enter-from,
|
||||||
|
.tooltip-fade-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-tooltip {
|
||||||
|
position: absolute;
|
||||||
|
background: var(--popover-color);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 12px 16px;
|
||||||
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
|
||||||
|
z-index: 1000;
|
||||||
|
pointer-events: none;
|
||||||
|
font-size: 13px;
|
||||||
|
min-width: 120px;
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip-date {
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-color-1);
|
||||||
|
font-size: 14px;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip-value {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
color: var(--text-color-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip-text {
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip-text strong {
|
||||||
|
color: var(--primary-color);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip-dot {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 2px solid var(--card-color);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 工具提示箭头 */
|
||||||
|
.tooltip-arrow {
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border: 6px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip-arrow.left {
|
||||||
|
right: 100%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
border-right-color: var(--popover-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip-arrow.right {
|
||||||
|
left: 100%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
border-left-color: var(--popover-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip-arrow.top {
|
||||||
|
bottom: 100%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
border-bottom-color: var(--popover-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip-arrow.bottom {
|
||||||
|
top: 100%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
border-top-color: var(--popover-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 响应式设计 */
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
.chart-stats {
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card {
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-wrapper {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-value {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.chart-header {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-stats {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card {
|
||||||
|
padding: 16px;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-wrapper {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-value {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-label {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-subtitle {
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-container {
|
||||||
|
padding: 16px;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-trend {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
top: 8px;
|
||||||
|
right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-trend svg {
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.chart-header {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card {
|
||||||
|
padding: 12px;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-value {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-container {
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
423
src/views/dashboard/monitor/components/OperationPieChart.vue
Normal file
423
src/views/dashboard/monitor/components/OperationPieChart.vue
Normal file
@ -0,0 +1,423 @@
|
|||||||
|
<template>
|
||||||
|
<div class="operation-pie-chart">
|
||||||
|
<!-- 图表容器 -->
|
||||||
|
<div class="chart-container">
|
||||||
|
<svg
|
||||||
|
class="pie-svg"
|
||||||
|
:width="chartSize"
|
||||||
|
:height="chartSize"
|
||||||
|
:viewBox="`0 0 ${chartSize} ${chartSize}`"
|
||||||
|
>
|
||||||
|
<!-- 饼图片段 -->
|
||||||
|
<g class="pie-segments" :transform="`translate(${center}, ${center})`">
|
||||||
|
<path
|
||||||
|
v-for="(segment, index) in pieSegments"
|
||||||
|
:key="index"
|
||||||
|
:d="segment.path"
|
||||||
|
:fill="segment.color"
|
||||||
|
class="pie-segment" :class="[{ active: hoveredIndex === index }]"
|
||||||
|
@mouseenter="hoverSegment(index, $event)"
|
||||||
|
@mouseleave="unhoverSegment"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- 中心文字 -->
|
||||||
|
<g class="center-text" :transform="`translate(${center}, ${center})`">
|
||||||
|
<text
|
||||||
|
x="0"
|
||||||
|
y="-10"
|
||||||
|
text-anchor="middle"
|
||||||
|
class="center-title"
|
||||||
|
>
|
||||||
|
总操作数
|
||||||
|
</text>
|
||||||
|
<text
|
||||||
|
x="0"
|
||||||
|
y="15"
|
||||||
|
text-anchor="middle"
|
||||||
|
class="center-value"
|
||||||
|
>
|
||||||
|
{{ totalOperations.toLocaleString() }}
|
||||||
|
</text>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<!-- 工具提示 -->
|
||||||
|
<div
|
||||||
|
v-if="tooltip.visible"
|
||||||
|
class="chart-tooltip"
|
||||||
|
:style="tooltipStyle"
|
||||||
|
>
|
||||||
|
<div class="tooltip-content">
|
||||||
|
<div class="tooltip-header">
|
||||||
|
<span class="tooltip-dot" :style="{ backgroundColor: tooltip.color }" />
|
||||||
|
<span class="tooltip-type">{{ tooltip.type }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="tooltip-stats">
|
||||||
|
<div>数量: {{ tooltip.count?.toLocaleString() }}</div>
|
||||||
|
<div>占比: {{ tooltip.percentage }}%</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 图例 -->
|
||||||
|
<div class="chart-legend">
|
||||||
|
<div
|
||||||
|
v-for="(item, index) in chartData"
|
||||||
|
:key="index"
|
||||||
|
class="legend-item"
|
||||||
|
:class="{ active: hoveredIndex === index }"
|
||||||
|
@mouseenter="hoverSegment(index)"
|
||||||
|
@mouseleave="unhoverSegment"
|
||||||
|
>
|
||||||
|
<div class="legend-color" :style="{ backgroundColor: item.color }" />
|
||||||
|
<div class="legend-content">
|
||||||
|
<div class="legend-type">
|
||||||
|
{{ item.type }}
|
||||||
|
</div>
|
||||||
|
<div class="legend-stats">
|
||||||
|
<span class="legend-count">{{ item.count.toLocaleString() }}</span>
|
||||||
|
<span class="legend-percentage">{{ item.percentage }}%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { computed, reactive, ref } from 'vue'
|
||||||
|
|
||||||
|
// Props定义
|
||||||
|
interface OperationData {
|
||||||
|
type: string
|
||||||
|
count: number
|
||||||
|
percentage: number
|
||||||
|
color: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
data: OperationData[]
|
||||||
|
}>()
|
||||||
|
|
||||||
|
// 响应式数据
|
||||||
|
const hoveredIndex = ref<number | null>(null)
|
||||||
|
const chartSize = 240
|
||||||
|
const center = chartSize / 2
|
||||||
|
const radius = 80
|
||||||
|
const innerRadius = 30
|
||||||
|
|
||||||
|
// 工具提示状态
|
||||||
|
const tooltip = reactive({
|
||||||
|
visible: false,
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
type: '',
|
||||||
|
count: 0,
|
||||||
|
percentage: 0,
|
||||||
|
color: '',
|
||||||
|
})
|
||||||
|
|
||||||
|
// 计算属性
|
||||||
|
const chartData = computed(() => props.data || [])
|
||||||
|
|
||||||
|
const totalOperations = computed(() => {
|
||||||
|
return chartData.value.reduce((sum, item) => sum + item.count, 0)
|
||||||
|
})
|
||||||
|
|
||||||
|
// 饼图片段计算
|
||||||
|
const pieSegments = computed(() => {
|
||||||
|
let currentAngle = -Math.PI / 2 // 从顶部开始
|
||||||
|
|
||||||
|
return chartData.value.map((item, index) => {
|
||||||
|
const angleSize = (item.percentage / 100) * 2 * Math.PI
|
||||||
|
const startAngle = currentAngle
|
||||||
|
const endAngle = currentAngle + angleSize
|
||||||
|
|
||||||
|
// 计算路径
|
||||||
|
const path = createArcPath(0, 0, innerRadius, radius, startAngle, endAngle)
|
||||||
|
|
||||||
|
currentAngle = endAngle
|
||||||
|
|
||||||
|
return {
|
||||||
|
path,
|
||||||
|
color: item.color,
|
||||||
|
data: item,
|
||||||
|
index,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
// 创建圆弧路径
|
||||||
|
function createArcPath(
|
||||||
|
centerX: number,
|
||||||
|
centerY: number,
|
||||||
|
innerRadius: number,
|
||||||
|
outerRadius: number,
|
||||||
|
startAngle: number,
|
||||||
|
endAngle: number,
|
||||||
|
): string {
|
||||||
|
const startOuterX = centerX + outerRadius * Math.cos(startAngle)
|
||||||
|
const startOuterY = centerY + outerRadius * Math.sin(startAngle)
|
||||||
|
const endOuterX = centerX + outerRadius * Math.cos(endAngle)
|
||||||
|
const endOuterY = centerY + outerRadius * Math.sin(endAngle)
|
||||||
|
|
||||||
|
const startInnerX = centerX + innerRadius * Math.cos(endAngle)
|
||||||
|
const startInnerY = centerY + innerRadius * Math.sin(endAngle)
|
||||||
|
const endInnerX = centerX + innerRadius * Math.cos(startAngle)
|
||||||
|
const endInnerY = centerY + innerRadius * Math.sin(startAngle)
|
||||||
|
|
||||||
|
const largeArcFlag = endAngle - startAngle > Math.PI ? 1 : 0
|
||||||
|
|
||||||
|
return [
|
||||||
|
'M',
|
||||||
|
startOuterX,
|
||||||
|
startOuterY,
|
||||||
|
'A',
|
||||||
|
outerRadius,
|
||||||
|
outerRadius,
|
||||||
|
0,
|
||||||
|
largeArcFlag,
|
||||||
|
1,
|
||||||
|
endOuterX,
|
||||||
|
endOuterY,
|
||||||
|
'L',
|
||||||
|
startInnerX,
|
||||||
|
startInnerY,
|
||||||
|
'A',
|
||||||
|
innerRadius,
|
||||||
|
innerRadius,
|
||||||
|
0,
|
||||||
|
largeArcFlag,
|
||||||
|
0,
|
||||||
|
endInnerX,
|
||||||
|
endInnerY,
|
||||||
|
'Z',
|
||||||
|
].join(' ')
|
||||||
|
}
|
||||||
|
|
||||||
|
// 工具提示样式
|
||||||
|
const tooltipStyle = computed(() => ({
|
||||||
|
left: `${tooltip.x}px`,
|
||||||
|
top: `${tooltip.y}px`,
|
||||||
|
}))
|
||||||
|
|
||||||
|
// 悬停处理
|
||||||
|
function hoverSegment(index: number, event?: MouseEvent) {
|
||||||
|
hoveredIndex.value = index
|
||||||
|
const item = chartData.value[index]
|
||||||
|
|
||||||
|
if (event) {
|
||||||
|
const rect = (event.target as Element).closest('.chart-container')?.getBoundingClientRect()
|
||||||
|
if (rect) {
|
||||||
|
tooltip.visible = true
|
||||||
|
tooltip.x = event.clientX - rect.left + 10
|
||||||
|
tooltip.y = event.clientY - rect.top - 40
|
||||||
|
tooltip.type = item.type
|
||||||
|
tooltip.count = item.count
|
||||||
|
tooltip.percentage = item.percentage
|
||||||
|
tooltip.color = item.color
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function unhoverSegment() {
|
||||||
|
hoveredIndex.value = null
|
||||||
|
tooltip.visible = false
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.operation-pie-chart {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-container {
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pie-svg {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pie-segment {
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
|
||||||
|
}
|
||||||
|
|
||||||
|
.pie-segment:hover,
|
||||||
|
.pie-segment.active {
|
||||||
|
transform: scale(1.05);
|
||||||
|
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
|
||||||
|
}
|
||||||
|
|
||||||
|
.center-text .center-title {
|
||||||
|
font-size: 12px;
|
||||||
|
fill: var(--text-color-2);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center-text .center-value {
|
||||||
|
font-size: 16px;
|
||||||
|
fill: var(--text-color-1);
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-tooltip {
|
||||||
|
position: absolute;
|
||||||
|
background: var(--popover-color);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 8px 12px;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||||
|
z-index: 1000;
|
||||||
|
pointer-events: none;
|
||||||
|
font-size: 12px;
|
||||||
|
min-width: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--text-color-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip-dot {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip-stats {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 2px;
|
||||||
|
color: var(--text-color-2);
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-legend {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 6px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-item:hover,
|
||||||
|
.legend-item.active {
|
||||||
|
background: var(--hover-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-color {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border-radius: 2px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-content {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-type {
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--text-color-1);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-stats {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-end;
|
||||||
|
gap: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-count {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--text-color-1);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-percentage {
|
||||||
|
font-size: 11px;
|
||||||
|
color: var(--text-color-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 响应式设计 */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.operation-pie-chart {
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-container {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-item {
|
||||||
|
padding: 4px 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-type {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-count {
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 动画效果 */
|
||||||
|
.pie-segment {
|
||||||
|
transform-origin: center;
|
||||||
|
animation: fadeInScale 0.6s ease-out forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeInScale {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0.8);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 为每个片段添加延迟动画 */
|
||||||
|
.pie-segment:nth-child(1) { animation-delay: 0.1s; }
|
||||||
|
.pie-segment:nth-child(2) { animation-delay: 0.2s; }
|
||||||
|
.pie-segment:nth-child(3) { animation-delay: 0.3s; }
|
||||||
|
.pie-segment:nth-child(4) { animation-delay: 0.4s; }
|
||||||
|
.pie-segment:nth-child(5) { animation-delay: 0.5s; }
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user