vant 3环形进度条

<template>
  <div class="circle-page1">
    <van-circle
      :id="id"
      class="circle-box"
      v-model:current-rate="currentRate"
      layer-color="rgb(75, 87, 105)"
      :stroke-width="86"
      :clockwise="false"
      :color="gradientColor"
      :rate="rate"
      :speed="speed"
      text=""
    />
    <!-- <div :class="props.total_score-0 > 9999 ? 'point-box1' : 'point-box'">
            <span class="point-number" :class="props.total_score-0 > 9999 ?'numberMore':''">{{props.total_score}}</span>
            <span class="fen">分</span>
        </div> -->
  </div>
</template>
<script setup>
  import { ref, onMounted, defineProps, nextTick, watch } from 'vue'
  import { useRoute } from 'vue-router'
  let props = defineProps({
    total_score: {},
    id: {},
    total_full_score: {}
  })
  const route = useRoute()

  console.log(props, 'props')
  let rate = ref(0)
  let speed = ref(0)
  onMounted(() => {})
  const currentRate = ref(0)
  const gradientColor = {
    '0%': '#89D2FA',
    '50%': '#6CAFF6',
    '100%': '#4F8CF2'
  }

  watch(
    () => props.total_score,
    (val) => {
      nextTick(() => {
        let dom = document.getElementById(props.id)?.getElementsByTagName('linearGradient')[0]
        dom && dom.setAttribute('x1', '0%')
        dom && dom.setAttribute('y2', '100%')
      })
      console.log(props.total_score, 'props.total_score')
      rate.value = Math.ceil((+props.total_score / +props.total_full_score) * 100)
      if (!route.query.back) {
        speed.value = rate.value / 5.2
      }
    }
  )
  watch(currentRate, (newValue, oldValue) => {
    // console.log('新值是' + newValue, '旧址是' + oldValue)
  })
</script>
<style scoped lang="scss">
  .circle-page1 {
    position: relative;
    width: 300px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;

    .circle-box {
      width: 298px;
      height: 298px;
    }
  }
</style>