需求：
在前端给表格中给满足条件的每一条记录增加一个计时器，用于计算工作时长。
1.数据库中存储的有每条记录的作业开始时间，将当前时间和作业开始时间计算一个差值，作为作业时长的初始值；
2.把满足条件的每条记录绑定一个计时器，且将每条记录作业时长的初始值作为计时开始值，在此基础上每分钟增加计时；
3.数据状态变化时及时清除不需要的定时器，每次加载表格数据时清除所有的计时器，重新初始化计时器数组，重新绑定计时器。
javascript
<el-table ref="tableData" v-loading="listLoading" :data="tableData" border stripe style="width: 100%" max-height="250" highlight-current-row>
<el-table-column prop="carNumber" label="车牌号" align="center" />
<el-table-column prop="carState" label="车辆状态" align="center" />
<el-table-column prop="workStartTime" label="作业开始时间" align="center" />
<el-table-column prop="workEndTime" label="作业结束时间" align="center"/>
<el-table-column prop="duration" label="作业时长(分)" align="center" />
<el-table-column align="center" label="操作" fixed="right" width="240" class-name="small-padding">
<template slot-scope="scope">
<el-button type="primary" size="small" @click="endRow(scope.$index, scope.row)">结束工作</el-button>
</template>
</el-table-column>
</el-table>
<script>
export default {
data() {
return {
tableData: [], //列表数据
timers: [] // 计时器数组
}
},
mounted() {
// 加载表格数据
this.getDataList()
},
beforeDestroy() {
if (this.timers.length > 0) {
// 清除所有的定时器
this.timers.forEach((timer) => {
clearInterval(timer)
})
}
},
methods:{
// 加载表格数据
getDataList() {
if (this.timers.length > 0) {
// 清除所有的定时器
this.timers.forEach((timer) => {
clearInterval(timer)
})
}
// 初始化计时器数组
this.timers = []
// 调用后台接口获取表格数据(此处省略.)
// 给符合条件的每条数据绑定一个计时器
this.tableData.forEach((element) => {
if (element.carState === '3') {
//调用计时器，传入每条数据
this.continueTime(element)
}
})
},
// 持续时间计算
continueTime(row) {
//用当前时间-工作开始时间,获取一个时间初始值,转换成时间戳方便计算,单位是毫秒
let calltime = new Date().getTime() - new Date(row.workStartTime).getTime()
// row.duration-是持续时间的键值,转换成分钟 (即为当前实际工作时长)
row.duration = Math.floor(calltime / 1000 / 60)
let intervalId = setInterval(() => {
// 1000-一秒, 1000*60_一分钟
// 持续时间就是 + 1min
// 并且把值绑到每一条数据中，方便取值调用接口
row.duration = row.duration + 1
console.info(row.carNumber + ' , ' + row.duration + ' , ' + intervalId)
}, 1000 * 60)
// 把计时器添加到数组中
this.timers.push(intervalId)
},
//结束工作
endRow(index, row) {
console.info('工作时长为:'+row.duration)
//调用接口处理数据
CARAPI.endInfo(row).then((res) => {
//重新加载数据
this.getDataList()
this.$message({type: 'success',message: '作业已结束!'})
})
}
}
}
</script>效果图：
一分钟后，界面上的作业时长(分)自动刷新为：
