| 提交 | 用户 | 时间 | ||
| 6bf4f9 | 1 | <template> |
| H | 2 | <svg :width="size" :height="size" viewBox="0 0 100 100"> |
| 3 | <!-- 背景圆 --> | |
| 4 | <circle cx="50" cy="50" r="50" fill="#eee"/> | |
| 5 | <!-- 使用率扇形 --> | |
| 6 | <path :d="arcPath" fill="#1C134B"/> | |
| 7 | </svg> | |
| 8 | </template> | |
| 9 | ||
| 10 | <script setup> | |
| 11 | import { computed } from 'vue'; | |
| 12 | ||
| 13 | const props = defineProps({ | |
| 14 | used: { type: Number, required: true }, | |
| 15 | total: { type: Number, required: true }, | |
| 16 | size: { type: Number, default: 150 } | |
| 17 | }); | |
| 18 | ||
| 19 | const percentage = computed(() => { | |
| 20 | if (props.total === 0) return 0; | |
| 21 | return (props.used / props.total) * 100; | |
| 22 | }); | |
| 23 | ||
| 24 | const arcPath = computed(() => { | |
| 25 | if (percentage.value >= 100) return ''; | |
| 26 | ||
| 27 | const angle = (percentage.value * 360) / 100; | |
| 28 | const radians = (angle - 90) * Math.PI / 180; | |
| 29 | const x = 50 + 50 * Math.cos(radians); | |
| 30 | const y = 50 + 50 * Math.sin(radians); | |
| 31 | const largeArc = angle > 180 ? 1 : 0; | |
| 32 | ||
| 33 | return `M 50 50 L 50 0 A 50 50 0 ${largeArc} 1 ${x} ${y} L 50 50 Z`; | |
| 34 | }); | |
| 35 | </script> | |
