el-badge上角标数据+定时器刷新数据

最新推荐文章于 2024-04-29 17:57:53 发布

原创最新推荐文章于 2024-04-29 17:57:53 发布 · 5.3k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#前端框架 #vue #elementui

实习记录同时被 3 个专栏收录

8 篇文章

订阅专栏

前端开发

7 篇文章

订阅专栏

Vue

2 篇文章

订阅专栏

本文介绍了如何使用Element-UI组件在左上角显示任务进度，通过结合el-badge和定时器实现数据实时刷新。首先展示了静态UI的创建，然后升级到连接接口获取真实数据，并探讨了定时器的性能问题，最后提出使用监听器优化定时器，以减少资源消耗。

背景

在任务图标左上方显示总任务任务进度

需求分析

图标+标记+获取进度接口+实时更新数据

解决方案

使用element-ui的组件

图标el-icon
参考文档： https://element.eleme.cn/#/zh-CN/component/icon
左上角提示el-badge
参考文档： https://cloud.tencent.com/developer/section/1489890
获取任务进度并且实时刷新进度==》定时器
（定时器很消耗性能，暂未学习到其他方法，后续补充）

案例

尝试1：绘制UI，用假数据

效果
效果图

<template>
  <div style=" text-align: center;">
    <h2>进度</h2>
    <!-- el-badge简单用法
     :value="progressData + '%'"显示的数据 
     :hidden="!hasTask" 判断是否要隐藏标记 
     :max="99" 最大值 -->
    <el-badge
      :value="progressData + '%'"
      :max="99"
      :hidden="!hasTask"
      type="warning"
    >
      <i class="el-icon-s-order"></i>
    </el-badge>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //任务列表
      //模拟数据
      taskTable: [
        {
          id: 1,
          taskName: "p1",
          state: "Running",
          progress: 20
        },
        {
          id: 2,
          taskName: "p2",
          state: "End",
          progress: 100
        },
        {
          id: 3,
          taskName: "p3",
          state: "Fail",
          progress: 20
        },
        {
          id: 4,
          taskName: "p4",
          state: "Running",
          progress: 50
        }
      ],
      //正在运行的任务
      countRunningTask: 0,
      //计算出的进度
      progressData: 0
    };
  },
  created() {
    this.getRunningTask();
  },
  methods: {
    //计算进度
    getRunningTask() {
      var tempCountRunningTask = 0;
      var sum = 0;
      for (var i = 0; i < this.taskTable.length; i++) {
        if (this.taskTable[i].state === "Running") {
          sum += this.taskTable[i].progress;
          tempCountRunningTask++;
        }
      }
      this.countRunningTask = tempCountRunningTask;
      this.progressData = Math.ceil(sum / tempCountRunningTask);
    }
  },
  computed: {
    //是否有任务
    hasTask() {
      if (this.countRunningTask == 0) {
        return false;
      }
      return true;
    }
  }
};
</script>

<style></style>

案例二，连上接口，定时刷新数据，获取最新任务进度

尝试2，定时器刷新

控制台添加定时器

  mounted () {
    // 定时刷新任务进度
     this.timer = setInterval(this.getRunningTask, 1000);
  },
  beforeDestroy(){
    // 清楚定时器
     clearTimeout(this.timer);
  },

完整代码：

<template>
  <div style=" text-align: center;">
    <h2>进度</h2>
    <!-- el-badge简单用法
     :value="progressData + '%'"显示的数据 
     :hidden="!hasTask" 判断是否要隐藏标记 
     :max="99" 最大值 -->
    <el-badge
      :value="progressData + '%'"
      :max="99"
      :hidden="!hasTask"
      type="warning"
    >
      <i class="el-icon-s-order"></i>
    </el-badge>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //任务列表
      //模拟数据
      taskTable: [
        // {
        //   id: 1,
        //   taskName: "p1",
        //   state: "Running",
        //   progress: 20
        // },
        // {
        //   id: 2,
        //   taskName: "p2",
        //   state: "End",
        //   progress: 100
        // },
        // {
        //   id: 3,
        //   taskName: "p3",
        //   state: "Fail",
        //   progress: 20
        // },
        // {
        //   id: 4,
        //   taskName: "p4",
        //   state: "Running",
        //   progress: 50
        // }
      ],
      //正在运行的任务
      countRunningTask: 0,
      //计算出的进度
      progressData: 0
    };
  },
  created() {
    this.getRunningTask();
  },
  mounted () {
    // 定时刷新任务进度
     this.timer = setInterval(this.getRunningTask, 1000);
  },
  beforeDestroy(){
    // 清楚定时器
     clearTimeout(this.timer);
  },
  methods: {
    //计算进度
     async  getRunningTask() {
      // 请求接口,利用接口模拟工具
      var api = "http://rap2api.taobao.org/app/mock/300471/getTaskList";
      const { data: res } = await this.$http.get(api);
      this.taskTable=res.data;
      // 开始计算
      var tempCountRunningTask = 0;
      var sum = 0;
      for (var i = 0; i < this.taskTable.length; i++) {
        if (this.taskTable[i].state === "Running") {
          sum += this.taskTable[i].progress;
          tempCountRunningTask++;
        }
      }
      this.countRunningTask = tempCountRunningTask;
      this.progressData = Math.ceil(sum / tempCountRunningTask);
      console.log("当前总进度==》"+this.progressData)
    }
  },
  computed: {
    //是否有任务
    hasTask() {
      if (this.countRunningTask == 0) {
        return false;
      }
      return true;
    }
  }
};
</script>

<style></style>

尝试3，加入监听，优化定时器使用

参考文档：https://blog.youkuaiyun.com/qq_37210523/article/details/103121237

js有两种定时器

setInterval(function(){}, milliseconds)——会不停的调用函数

setTimeout(function(){}, milliseconds)——只执行函数一次

setInterval会符合实时刷新的需求，但是单纯的使用setInterval会导致页面卡死！其原因与JS引擎线程有关, 用通俗话说就是setInterval不会清除定时器队列，每重复执行1次都会导致定时器叠加，最终卡死网页。

优化方案
监听器

 watch: {
    //定时器优化方案
    // progressData是要监听的数据
    progressData: function() {
      const timer = setInterval(() => {
        // 某些定时器操作
        this.getRunningTask();
      }, 500);
      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
      this.$once("hook:beforeDestroy", () => {
        clearInterval(timer);
      });
    }
  }

完整

<template>
  <div style=" text-align: center;">
    <h2>进度</h2>
    <!-- el-badge简单用法
     :value="progressData + '%'"显示的数据 
     :hidden="!hasTask" 判断是否要隐藏标记 
     :max="99" 最大值 -->
    <el-badge
      :value="progressData + '%'"
      :max="99"
      :hidden="!hasTask"
      type="warning"
    >
      <i class="el-icon-s-order"></i>
    </el-badge>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //任务列表
      //模拟数据
      taskTable: [
        // {
        //   id: 1,
        //   taskName: "p1",
        //   state: "Running",
        //   progress: 20
        // },
        // {
        //   id: 2,
        //   taskName: "p2",
        //   state: "End",
        //   progress: 100
        // },
        // {
        //   id: 3,
        //   taskName: "p3",
        //   state: "Fail",
        //   progress: 20
        // },
        // {
        //   id: 4,
        //   taskName: "p4",
        //   state: "Running",
        //   progress: 50
        // }
      ],
      //正在运行的任务
      countRunningTask: 0,
      //计算出的进度
      progressData: 0
    };
  },
  created() {
    this.getRunningTask();
  },
  mounted() {
    // 定时刷新任务进度
    // this.timer = setInterval(this.getRunningTask, 1000);
  },
  beforeDestroy() {
    // 清楚定时器
    // clearTimeout(this.timer);
  },
  methods: {
    //计算进度
    async getRunningTask() {
      // 请求接口,利用接口模拟工具
      var api = "http://rap2api.taobao.org/app/mock/300471/getTaskList";
      const { data: res } = await this.$http.get(api);
      this.taskTable = res.data;
      // 开始计算
      var tempCountRunningTask = 0;
      var sum = 0;
      for (var i = 0; i < this.taskTable.length; i++) {
        if (this.taskTable[i].state === "Running") {
          sum += this.taskTable[i].progress;
          tempCountRunningTask++;
        }
      }
      this.countRunningTask = tempCountRunningTask;
      this.progressData = Math.ceil(sum / tempCountRunningTask);
      console.log("当前总进度==》" + this.progressData);
    }
  },
  computed: {
    //是否有任务
    hasTask() {
      if (this.countRunningTask == 0) {
        return false;
      }
      return true;
    }
  },
  watch: {
    //清除定时器优化方案
    progressData: function() {
      const timer = setInterval(() => {
        // 某些定时器操作
        this.getRunningTask();
      }, 500);
      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
      this.$once("hook:beforeDestroy", () => {
        clearInterval(timer);
      });
    }
  }
};
</script>

<style></style>