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