fiction-admin/src/views/books-management/ShuYuan-page/components/gather-state-dialog.vue

<template>
  <Dialog
    :is-dialog-exist="isDialog"
    :title="dialogTitle"
    :dialog-style="dialogStyle"
    @close-dialog="handleClose"
  >
    <el-container>
      <el-main>
        <el-progress
          type="circle"
          :percentage="num"
        />
        <!--        <svg height="150" width="110">-->
        <!--          <circle cx="55" cy="55" r="50" fill="none" stroke="grey" stroke-width="5" stroke-linecap="round" />-->
        <!--          <circle class="demo2" cx="55" cy="55" r="50" fill="red" stroke="skyblue" stroke-width="5" :stroke-dasharray="`${circleNum * 3.14}, 999`" />-->
        <!--        </svg>-->
        <p style="color: #666666">
          正在采集书源 5个预计需要时间 01:18
        </p>
        <p>合计采集书源 69个</p>
      </el-main>
    </el-container>
  </Dialog>
</template>

<script>
import Dialog from '@/components/Dialog/index'

export default {
  components: { Dialog },
  props: {
    isDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // dialog样式
      dialogStyle: {
        '--dialog-width': '1000px',
        '--dialog-height': '450px',
        '--title-height': '51px'
      },
      // 弹窗标题
      dialogTitle: '采集状态',
      formData: {
        name: '132456'
      },
      num: 0,
      circleNum: 10
    }
  },
  watch: {
    'isDialog'(val) {
      if (val) {
        this.timerWay()
      }
    }
  },
  methods: {
    timerWay() {
      const timer = setInterval(() => {
        this.num++
        // this.circleNum++
        console.log(this.num)
        if (this.num >= 100) {
          clearInterval(timer)
        }
      }, 100)
    },
    handleClose() {
      this.$emit('handle-close')
    }
  }
}
</script>

<style lang="scss" scoped>
  .el-container{
    width: 100%;
    height: 100%;
    .el-main{
      width: 100%;
      margin: auto 0;
      text-align: center;
      font-size: 14px;
      /*
       .demo2{
        transform-origin: right left 0;
        transform: rotate(-90deg);
      }
      */
    }
  }
</style>