skytek/sports-empower-hub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: radar

Browse Source
This commit is contained in:
skytek_xinliang
2026-09-21 15:46:33 +08:00
parent 261c5516ef
commit 2a82c70bc3
2 changed files with 60 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/citizen-frontend/src/components/HealthRadarChart.vue
+35 -68
View File
@@ -47,59 +47,24 @@
stroke-width="0.5"
/>
<text
fill="#1D7063"
font-size="4"
font-weight="bold"
text-anchor="middle"
x="60"
y="8"
>
心肺耐力 ({{ radarData.cardio }})
<text fill="#1D7063" font-size="4" font-weight="bold" text-anchor="middle" x="60" y="8">
心肺 ({{ radarData.cardio }})
</text>
<text
fill="#1D7063"
font-size="4"
font-weight="bold"
text-anchor="start"
x="110"
y="44"
>
上肢肌力 ({{ radarData.upperBodyStrength }})
<text fill="#1D7063" font-size="4" font-weight="bold" text-anchor="start" x="110" y="44">
上肢 ({{ radarData.upperBodyStrength }})
</text>
<text
fill="#1D7063"
font-size="4"
font-weight="bold"
text-anchor="start"
x="94"
y="104"
>
下肢肌耐力 ({{ radarData.lowerBodyStrengthAndEndurance }})
<text fill="#1D7063" font-size="4" font-weight="bold" text-anchor="start" x="94" y="104">
下肢 ({{ radarData.lowerBodyStrengthAndEndurance }})
</text>
<text
fill="#1D7063"
font-size="4"
font-weight="bold"
text-anchor="end"
x="26"
y="104"
>
柔軟度 ({{ radarData.flexibility }})
<text fill="#1D7063" font-size="4" font-weight="bold" text-anchor="end" x="26" y="104">
柔軟 ({{ radarData.flexibility }})
</text>
<text
fill="#1D7063"
font-size="4"
font-weight="bold"
text-anchor="end"
x="10"
y="44"
>
平衡、敏捷與行動 ({{ radarData.balanceAgilityAndMobility }})
<text fill="#1D7063" font-size="4" font-weight="bold" text-anchor="end" x="10" y="44">
敏捷 ({{ radarData.balanceAgilityAndMobility }})
</text>
</svg>
@@ -118,36 +83,36 @@
</template>
<script setup lang="ts">
import { computed } from "vue";
import type { PhysicalFitnessRadarData } from "@/utils/physical-fitness-radar";
import { computed } from 'vue'
import type { PhysicalFitnessRadarData } from '@/utils/physical-fitness-radar'
const { radarData } = defineProps<{
radarData: PhysicalFitnessRadarData;
}>();
radarData: PhysicalFitnessRadarData
}>()
const centerX = 60;
const centerY = 60;
const radius = 45;
const centerX = 60
const centerY = 60
const radius = 45
function getAxisEndPoint(index: number, pointRadius = radius) {
const angle = -Math.PI / 2 + (index * 2 * Math.PI) / 5;
const angle = -Math.PI / 2 + (index * 2 * Math.PI) / 5
return {
x: centerX + pointRadius * Math.cos(angle),
y: centerY + pointRadius * Math.sin(angle),
};
}
}
function getPolygonPoints(percent: number) {
const pointRadius = (percent / 100) * radius;
const points = [];
const pointRadius = (percent / 100) * radius
const points = []
for (let index = 0; index < 5; index++) {
const point = getAxisEndPoint(index, pointRadius);
points.push(`${point.x},${point.y}`);
const point = getAxisEndPoint(index, pointRadius)
points.push(`${point.x},${point.y}`)
}
return points.join(" ");
return points.join(' ')
}
const userDataCoordArray = computed(() => {
@@ -157,19 +122,17 @@ const userDataCoordArray = computed(() => {
radarData.lowerBodyStrengthAndEndurance,
radarData.flexibility,
radarData.balanceAgilityAndMobility,
];
]
return values.map((value, index) => {
const pointRadius = (Math.max(5, Math.min(100, value)) / 100) * radius;
return getAxisEndPoint(index, pointRadius);
});
});
const pointRadius = (Math.max(5, Math.min(100, value)) / 100) * radius
return getAxisEndPoint(index, pointRadius)
})
})
const userDataPoints = computed(() => {
return userDataCoordArray.value
.map((point) => `${point.x},${point.y}`)
.join(" ");
});
return userDataCoordArray.value.map((point) => `${point.x},${point.y}`).join(' ')
})
</script>
<style scoped>
@@ -198,4 +161,8 @@ const userDataPoints = computed(() => {
.radar-svg text {
font-family: inherit;
}
.radar-svg {
overflow: visible;
}
</style>
app/citizen-frontend/src/pages/index.vue
+25 -10
View File
@@ -55,12 +55,15 @@
<v-col
v-for="summary in radarSummaries"
:key="summary.label"
class="text-center border pa-2"
cols="12"
sm="6"
md="4"
class="radar-summary text-center border pa-2"
>
<div>{{ summary.label }}</div>
<v-tooltip :text="summary.tip" location="top">
<template #activator="{ props }">
<span v-bind="props" class="radar-summary-label" tabindex="0">
{{ summary.label }}
</span>
</template>
</v-tooltip>
<div class="font-weight-black">
{{ summary.score }}
@@ -389,19 +392,22 @@ const radarSummaries = computed(() => {
return [
{
label: '上肢肌力',
label: '上肢',
tip: '上肢肌力',
score: physicalFitnessRadarData.value.upperBodyStrength,
},
{
label: '下肢肌耐力',
label: '下肢',
tip: '下肢肌耐力',
score: physicalFitnessRadarData.value.lowerBodyStrengthAndEndurance,
},
{ label: '心肺耐力', score: physicalFitnessRadarData.value.cardio },
{ label: '心肺', tip: '心肺耐力', score: physicalFitnessRadarData.value.cardio },
{
label: '平衡、敏捷與行動',
label: '敏捷',
tip: '平衡、敏捷與行動',
score: physicalFitnessRadarData.value.balanceAgilityAndMobility,
},
{ label: '柔軟度', score: physicalFitnessRadarData.value.flexibility },
{ label: '柔軟', tip: '柔軟度', score: physicalFitnessRadarData.value.flexibility },
]
})
@@ -567,6 +573,15 @@ function updateTodayTimeString() {
</script>
<style scoped>
.radar-summary {
flex: 0 0 20%;
max-width: 20%;
}
.radar-summary-label {
cursor: help;
}
.passport-card {
background: linear-gradient(135deg, #1d7063 0%, #145248 100%);
border: 1px solid rgba(71, 194, 166, 0.3);