vue elementui table给表格中满足条件的每一条记录添加计时器

news2024/11/18 23:44:09

需求:
在前端给表格中给满足条件的每一条记录增加一个计时器,用于计算工作时长。

1.数据库中存储的有每条记录的作业开始时间,将当前时间和作业开始时间计算一个差值,作为作业时长的初始值;
2.把满足条件的每条记录绑定一个计时器,且将每条记录作业时长的初始值作为计时开始值,在此基础上每分钟增加计时;
3.数据状态变化时及时清除不需要的定时器,每次加载表格数据时清除所有的计时器,重新初始化计时器数组,重新绑定计时器。

    <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>

效果图:
在这里插入图片描述
一分钟后,界面上的作业时长(分)自动刷新为:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1838657.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

为什么很多Java程序员会下意识觉得Java的就是最好的?

在开始前刚好我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「Java的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共享给大家&#xff01;&#xff01;&#xff01;做为一个真正热爱编程&#…

信捷PLC与上位机通讯-以太网通讯dll

应用场景 最近做项目&#xff0c;电气部分PLC选用了国产的信捷PLC&#xff0c;需要考虑上位机与信捷PLC通讯的问题&#xff0c;直接读写寄存器或线圈。 解决方案 信捷官网找资料&#xff0c;介绍的各种通讯方法&#xff0c;感觉都不是很好理解&#xff0c;而且也没办法直接拿…

二刷算法训练营Day27 (Day26 休息) | 回溯算法(3/6)

目录 详细布置&#xff1a; 1. 39. 组合总和 2. 40. 组合总和 II 3. 131. 分割回文串 详细布置&#xff1a; 1. 39. 组合总和 给你一个 无重复元素 的整数数组 candidates 和一个目标整数 target &#xff0c;找出 candidates 中可以使数字和为目标数 target 的 所有 不同…

【数据结构】线性表之《无头单链表》超详细实现

单链表 一.链表的概念及结构二.顺序表与链表的区别与联系三.单链表的实现1.创建单链表2.初始化单链表3.购买节点4.打印单链表5.插入操作1.头插2.尾插3.给定位置之前插入 6.删除操作1.头删2.尾删3.删除给定位置的结点 7.查找数据8.修改数据9.求单链表长度10.清空单链表11.销毁单…

python代码

# 请在______处使用一行代码或表达式替换# 注意&#xff1a;请不要修改其他已给出代码s input("请输入一个字符串:") print("{:*^30}".format(s))# 请在______处使用一行代码或表达式替换 # # 注意&#xff1a;请不要修改其他已给出代码a, b 0, 1 while …

程序员们,能告诉我你们为什么选择arch linux吗?

在开始前刚好我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「linux的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共享给大家&#xff01;&#xff01;&#xff01; Arch Linux 受到程序员青…

Qt|海康摄像头多个页面展示问题

为大家分享一个使用海康摄像头的小功能&#xff0c;希望对大家有用~ 使用场景&#xff1a; 在程序中多个不同功能页面需要展示摄像头的实时预览画面&#xff0c;该如何高效的展示呢&#xff1f; 对于海康摄像头的实时预览接口调用流程&#xff0c;如下所示&#xff1a; 按照流…

GD32F4xx 移植agile_modbus软件包与电能表通信

目录 1. agile_modbus1.1 简介1.2 下载2. agile_modbus使用2.1 源码目录2.2 移植3. 通信调试3.1 代码3.3 通信测试1. agile_modbus 1.1 简介 agile_modbus是一个轻量级的Modbus协议栈,主要特点: 支持RTU和TCP协议,采用纯C语言开发,不涉及任何硬件接口,可直接在任何形式的…

Java学习 (一) 环境安装及入门程序

一、安装java环境 1、获取软件包 https://www.oracle.com/java/technologies/downloads/ .exe 文件一路装过去就行&#xff0c;最好别装c盘 &#xff0c;我这里演示的时候是云主机只有C盘 2、配置环境变量 我的电脑--右键属性--高级系统设置--环境变量 在环境变量中添加如下配…

有路网整体布局

有路网地址 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title><style>.…

昇思25天学习打卡营第1天 | 快速入门

内容介绍&#xff1a;通过MindSpore的API来快速实现一个简单的深度学习模型。 具体内容&#xff1a; 1. 导包 import mindspore from mindspore import nn from mindspore.dataset import vision, transforms from mindspore.dataset import MnistDataset 2. 处理数据 fro…

Gobject tutorial 六

Instantiatable classed types Initialization and destruction 类型的实例化是通过函数g_tpye_create_instance()实现的。这个函数首先会查找与类型相关的GTypeInfo结构体&#xff0c;之后&#xff0c;查询结构体中的instance_size和 instance policy即 n_preallocs(在 2.10版…

Nuxt3页面开发实战探索

title: Nuxt3页面开发实战探索 date: 2024/6/19 updated: 2024/6/19 author: cmdragon excerpt: 摘要&#xff1a;这篇文章是关于Nuxt3页面开发实战探索的。它介绍了Nuxt3的基础入门&#xff0c;安装与配置&#xff0c;项目结构&#xff0c;内置组件与功能&#xff0c;以及页…

持续集成jenkins+gitee

首先要完成gitee部署&#xff0c;详见自动化测试git的使用-CSDN博客 接下来讲如何从git上自动拉取代码&#xff0c;实现jenkins无人值守&#xff0c;定时执行测试&#xff0c;生成测试报告。 需要这三个安装包 由于目前的jenkins需要至少java11到java17的版本&#xff0c;所以…

深度解析消费者最关心的车联网核心问题

随着科技的迅猛发展&#xff0c;车联网&#xff08;V2X&#xff09;或智能网联汽车成为了提供车辆非视距信息的独特解决方案。它们是传感器技术的关键补充&#xff0c;通过车联网&#xff08;V2X&#xff09;&#xff0c;交通工具可以与其他车辆或基础设施进行信息交流。车联网…

upload-labs第十三关教程

upload-labs第十三关教程 第十三关一、源代码分析代码审计 二、绕过分析1&#xff09;0x00绕过a.上传eval.pngb.使用burpsuite进行拦截修改之前&#xff1a;修改之后&#xff1a;进入hex模块&#xff1a; c.放包上传成功&#xff1a; d.使用中国蚁剑进行连接 2&#xff09;%00绕…

Java 打包编译、运行报错

无法访问com.sun.beans.introspect.PropertyInfo-CSDN博客 [ERROR] COMPILATION ERROR : [INFO] ------------------------------------------------------------- [ERROR] sa-base/src/main/java/net/lab1024/sa/base/module/support/datatracer/service/DataTracerChangeCon…

若依框架自定义开发使用学习笔记(1)

因为我是跳着学的&#xff0c;原理那些都没咋看。 代码自动生成&#xff0c;依赖sql表 在ruoyi数据库中&#xff0c;创建你想要的表&#xff0c;这里我创建了个购物车表&#xff0c;由于空间有限&#xff0c;只能拍到这么多。 然后就可以在前端自动生成代码 点击导入按钮 …

华为---- RIP路由协议基本配置

08、RIP 8.1 RIP路由协议基本配置 8.1.1 原理概述 RIP(Routing Information Protocol,路由协议)作为最早的距离矢量IP路由协议&#xff0c;也是最先得到广泛使用的一种路由协议&#xff0c;采用了Bellman-Ford算法&#xff0c;其最大的特点就是配置简单。 RIP协议要求网络中…

如何学习 Java 中的 Socket 编程,进行网络通信

Socket编程是网络编程的核心技术之一&#xff0c;它使得不同主机之间可以进行数据通信。Java提供了丰富的网络编程API&#xff0c;使得编写网络应用程序变得相对简单和直观。本文将详细讲解如何学习Java中的Socket编程&#xff0c;并通过示例代码展示如何实现网络通信。 一、S…