rt-sim-training-client/src/views/components/progressBar/index.vue

<template>
  <div v-show="show" class="progressShade" :style="{background: background}">
    <el-progress
      class="progressBar"
      :type="type"
      :show-text="showText"
      :text-inside="textInside"
      :stroke-width="strokeWidth"
      :percentage="percentage"
      :color="color"
      :status="status"
    />
  </div>
</template>

<script>
// import { requestAnimationFrame, cancelRequestAnimFrame } from '@/utils/animation';

export default {
    name: 'ProgressBar',
    props: {
        type: {
            type: String,
            default() {
                return 'line';
            }
        },
        showText: {
            type: Boolean,
            default() {
                return true;
            }
        },
        textInside: {
            type: Boolean,
            default() {
                return false;
            }
        },
        strokeWidth: {
            type: Number,
            default() {
                return 5;
            }
        },
        background: {
            type: String,
            default() {
                return 'rgba(0, 0, 0, 0.8)';
            }
        }
    },
    data() {
        return {
            color: '#8e71c7',
            status: null,
            show: false,
            percentage: 0,
            fps: 30,
            then: null,
            timer: null
        };
    },
    mounted() {
        this.percentage = this.randomNum();
        this.start();
    },
    methods: {
        randomNum() {
            return Math.ceil(Math.random() * 5) + 20;
        },
        run() {
            this.timer = setInterval(() => {
                this.percentage = this.percentage + 3;
                // 加载到百分百完成
                if (this.percentage >= 95) {
                    this.percentage = 95;
                    // 关闭定时器
                    clearInterval(this.timer);
                    return;
                }
            }, 50);
        },
        start() {
            if (!this.show) {
                this.status = null;
                this.percentage = this.randomNum();
                this.show = true;
                this.run();
            }
        },
        end(isSuccess) {
            this.timer && clearInterval(this.timer);
            if (this.show) {
                if (isSuccess) {
                    this.success();
                } else {
                    this.failed();
                }
            }
        },
        progressAt(num) {
            if (num > 0 && num < 100 && num > this.percentage) {
                this.percentage = num;
            }
        },
        success() {
            this.status = 'success';
            this.percentage = 100;
            setTimeout(() => {
                this.show = false;
            }, 1000 / this.fps);
        },
        failed() {
            this.status = 'exception';
            setTimeout(() => {
                this.show = false;
            }, 1000 / this.fps);
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";

    .progressShade {
        z-index: 9998;
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
    }

    .progressBar {
        z-index: 9999;
        position: absolute;
        top: 40%;
        width: 50%;
        left: 25%;
    }
</style>