oadmin/xinghuoapi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ops): 恢复仪表盘脉搏动画效果

Browse Source 
- 将静态QPS历史折线图替换为动画脉搏线
- 使用SVG animate元素实现心跳效果（2秒循环动画）
- 增强流量可视化：通过脉冲跳动直观展示流量"活跃"状态
- 恢复重构前的视觉效果与用户体验
This commit is contained in:
IanShaw027
2026-01-11 15:30:59 +08:00
parent 7ebca553ef
commit abdc4f39cb
1 changed files with 26 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
frontend/src/views/admin/ops/components/OpsDashboardHeader.vue
View File

@@ -228,12 +228,14 @@ const durationP95Ms = computed(() => overview.value?.duration?.p95_ms ?? null)
const durationP90Ms = computed(() => overview.value?.duration?.p90_ms ?? null)
const durationP50Ms = computed(() => overview.value?.duration?.p50_ms ?? null)
const durationAvgMs = computed(() => overview.value?.duration?.avg_ms ?? null)
const durationMaxMs = computed(() => overview.value?.duration?.max_ms ?? null)
const ttftP99Ms = computed(() => overview.value?.ttft?.p99_ms ?? null)
const ttftP95Ms = computed(() => overview.value?.ttft?.p95_ms ?? null)
const ttftP90Ms = computed(() => overview.value?.ttft?.p90_ms ?? null)
const ttftP50Ms = computed(() => overview.value?.ttft?.p50_ms ?? null)
const ttftAvgMs = computed(() => overview.value?.ttft?.avg_ms ?? null)
const ttftMaxMs = computed(() => overview.value?.ttft?.max_ms ?? null)
// --- WebSocket status ---
@@ -883,24 +885,37 @@ function openJobsDetails() {
</div>
</div>
<!-- Average QPS/TPS -->
<!-- Average QPS/TPS with Animated Pulse Line -->
<div class="col-span-2">
<!-- Sparkline -->
<svg v-if="qpsHistory.length > 1" class="mb-2 h-8 w-full" viewBox="0 0 200 32" preserveAspectRatio="none">
<polyline
:points="qpsHistory.map((v, i) => `${(i / (qpsHistory.length - 1)) * 200},${32 - (v / Math.max(...qpsHistory, 1)) * 28}`).join(' ')"
fill="none"
stroke="currentColor"
stroke-width="2"
class="text-blue-500"
/>
</svg>
<div class="text-[10px] font-bold uppercase text-gray-400">{{ t('admin.ops.average') }}</div>
<div class="mt-1 flex items-center gap-4 text-sm font-medium text-gray-600 dark:text-gray-400">
<span>QPS: <span class="font-bold">{{ qpsAvgLabel }}</span></span>
<span class="h-1 w-1 rounded-full bg-gray-300 dark:bg-gray-600"></span>
<span>TPS: <span class="font-bold">{{ tpsAvgLabel }}</span></span>
</div>
<!-- Animated Pulse Line (Heart Beat Animation) -->
<div class="mt-2 h-8 w-full overflow-hidden opacity-50">
<svg class="h-full w-full" viewBox="0 0 280 32" preserveAspectRatio="none">
<path
d="M0 16 Q 20 16, 40 16 T 80 16 T 120 10 T 160 22 T 200 16 T 240 16 T 280 16"
fill="none"
stroke="#3b82f6"
stroke-width="2"
vector-effect="non-scaling-stroke"
>
<animate
attributeName="d"
dur="2s"
repeatCount="indefinite"
values="M0 16 Q 20 16, 40 16 T 80 16 T 120 10 T 160 22 T 200 16 T 240 16 T 280 16;
M0 16 Q 20 16, 40 16 T 80 16 T 120 16 T 160 16 T 200 10 T 240 22 T 280 16;
M0 16 Q 20 16, 40 16 T 80 16 T 120 16 T 160 16 T 200 16 T 240 16 T 280 16"
keyTimes="0;0.5;1"
/>
</path>
</svg>
</div>
</div>
</div>
</div>