背景
在任务图标左上方显示总任务任务进度
需求分析
图标+标记+获取进度接口+实时更新数据
解决方案
使用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.csdn.net/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>