21 lines
1.3 KiB
Vue
21 lines
1.3 KiB
Vue
<script setup lang="ts">
|
||
import type { ChangeStatus } from "../demo/model";
|
||
const props = defineProps<{ status: ChangeStatus }>();
|
||
const BIG_STAGES = ["申请审批", "实施与关闭", "变更关闭"];
|
||
const bigStageOf = (s: ChangeStatus) => (s === "审批中" ? 0 : s === "已关闭" ? 2 : 1);
|
||
const cur = bigStageOf(props.status);
|
||
const pct = ((cur + 1) / BIG_STAGES.length) * 100;
|
||
const size = 34, stroke = 4, r = (size - stroke) / 2, c = 2 * Math.PI * r;
|
||
const title = `阶段进度 ${cur + 1}/${BIG_STAGES.length}：${BIG_STAGES.slice(0, cur + 1).join(" → ")}${cur < BIG_STAGES.length - 1 ? " → …" : ""}`;
|
||
</script>
|
||
<template>
|
||
<span class="relative inline-flex shrink-0 items-center justify-center" :style="{ width: size + 'px', height: size + 'px' }" :title="title">
|
||
<svg :width="size" :height="size" class="-rotate-90">
|
||
<circle :cx="size / 2" :cy="size / 2" :r="r" stroke="#E2E8F0" :stroke-width="stroke" fill="none" />
|
||
<circle :cx="size / 2" :cy="size / 2" :r="r" stroke="#2080f0" :stroke-width="stroke" fill="none"
|
||
:stroke-dasharray="c" :stroke-dashoffset="c * (1 - pct / 100)" stroke-linecap="round" />
|
||
</svg>
|
||
<span class="absolute inset-0 flex items-center justify-center text-[9px] font-bold text-[#2080f0] dark:text-white">{{ cur + 1 }}/3</span>
|
||
</span>
|
||
</template>
|