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

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

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>

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

手写docker:你先玩转namespace再来吧

哈喽&#xff0c;我是子牙老师。今天咱们聊聊Linux namespace 瓦特&#xff1f;你没听过namespace&#xff1f;那有必要科普一下了&#xff1a;namespace是Linux内核提供的一种软件性质的资源隔离机制。容器化技术&#xff0c;比如docker&#xff0c;就是基于这样的机制实现的…

北方银行 - HDFS 现代化快速案例研究

故事很重要&#xff0c;客户故事是最好的。他们提供令人瞠目结舌的统计数据或克服巨大障碍的那些是获得最佳头条新闻的那些。它们也是最难发表的。我们知道&#xff0c;因为我们将与您分享一些我们正在孜孜不倦地努力出版的内容 - 但现在它们将保持匿名。话虽如此&#xff0c;如…

软件工程学系统设计

一、概述 软件设计阶段用比较抽象概括的方式确定目标系统如何完成预定的任务&#xff0c;即确定系统的物理模型。 回答系统 “做什么”。 软件设计是将需求转化为最终产品的唯一途径&#xff0c;是后续开发和维护工作的基础。 1、软件设计过程 从工程管理角度&#xff0c;…

【Research】Model Stealing

What is Model Stealing? Extract an approximation that of the target model that “closely matches” the original Accuracy? Fidelity? Funtional equivalence? Threat Models API Access Model extraction using: Prediction Vectors Labels Only Model Access …

基于SpringBoot+Vue大学生网络教学平台设计和实现(源码+LW+调试文档+讲解等)

&#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN作者、博客专家、全栈领域优质创作者&#xff0c;博客之星、平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌&#x1f497; &#x1f31f;文末获取源码数据库&#x1f31f; 感兴趣的可以先收藏起来&#xff0c;…

Bootloader -- U-Boot 介绍

Bootloader -- U-Boot 介绍 1 介绍1.1 概述1.2 知名 BootloaderLILO (Linux Loader)GRUB (GNU GRand Unified Bootloader)LoadlinROLO (Rockbox Loader)EtherbootLinuxBIOS (现在叫 coreboot)BLOBU-BootRedBoot 1.3 BootLoader 和 Monitor 区别1.4 U-Boot 的源码结构1.5 U-Boot…

SSRF(2)

Gopher协议的利用 gopher协议是ssrf利用中最强大的协议 gopher协议支持发出GET、POST请求&#xff1a; 可以先截获get请求包和post请求包&#xff0c;再构成符合gopher协议的请求。 默认端口为70,一般需发送到80端口 如果发起post请求&#xff0c;回车换行需要使用%0D%0A&…

Docker:centos79-docker-compose安装记录

1.安装环境&#xff1a;centos7.9 x86 2.安装最新版&#xff1a; [rootlocalhost ~]# curl -fsSL get.docker.com -o get-docker.sh [rootlocalhost ~]# sh get-docker.sh # Executing docker install script, commit: e5543d473431b782227f8908005543bb4389b8desh -c yum in…

PHPMailer发送的中文内容乱码如何解决

一&#xff1a; PHPMailer sdk 文件中有个设置默认编码的位置&#xff1a; vendor/phpmailer/phpmailer/src/PHPMailer.php 二&#xff1a; 实际业务代码中&#xff1a; require /sdk/PHPMailer/vendor/autoload.php;$mail new PHPMailer(true);try {//Server settings$mai…

基于Spring Boot+VUE职称评审管理系统

1管理员功能模块 管理员登录&#xff0c;通过填写注册时输入的用户名、密码、角色进行登录&#xff0c;如图1所示。 图1管理员登录界面图 管理员登录进入职称评审管理系统可以查看首页、个人中心、用户管理、评审员管理、省份管理、评审条件管理、职称申请管理、结果公布管理、…

containerd手动配置容器网络

containerd手动配置容器网络 机器详情nerdctl启动一个不带网络的容器获取容器ID、PID与network namespace路径准备bridge插件的执行配置文件通过下面的命令调用bridge插件准备tuning插件文件执行下面的命令调用tuning插件准备portmap插件文件执行下面的命令调用portmap插件删除…

Android记录9--实现转盘效果

自定义View /2013.10.16_TurnPlate_Demo/src/com/wwj/turnplate/TurnPlateView.java package com.wwj.turnplate; import android.content.Context; import android.content.res.Resources; import android.graphics.Bitmap; import android.graphics.BitmapFactory; im…

日本新入管法通过:2027年起实施[育成就劳]制度,新制度更适合外国劳工在日本工作和生活!

最近&#xff0c;日本新入管法&#xff1a;新的育成就业制度预计将在2027年开始实施&#xff0c;而1993年开始的旧的技能实习制度将被废除。 新制度的主要内容 新制度的目的是解决日本国内的劳动力不足问题&#xff0c;确保有足够的劳动者。表示&#xff1a;“为了让日本成为…

上手微服务框架go-zero

文章目录 微服务框架与web框架的区别点在哪儿&#xff1f;为什么还要有微服务框架微服务框架与web框架的对比小结 为什么选go-zero&#xff1f;框架对比 下载并认识go-zero认识go-zero环境要求组成下载 实践go-zero基础功能案例apirpc服务功能说明准备构建rpc服务构建api服务服…

头歌资源库(14)残缺棋盘

一、 问题描述 二、算法思想 首先&#xff0c;将2^k 2^k的棋盘划分为四个相等大小的子棋盘&#xff0c;定义为左上、左下、右上和右下四个子棋盘。 然后&#xff0c;根据残缺格的坐标&#xff0c;确定其中一个子棋盘是不完整的&#xff0c;即残缺子棋盘。假设残缺子棋盘是左…

导入别人的net文件报红问题

1. 使用cmd命令 dotnet --info 查看自己使用的SDK版本 2.直接找到项目中的 global.json 文件&#xff0c;右键打开&#xff0c;直接修改版本为本机的SDK版本&#xff0c;就可以用了

区块链媒体发布推广秘籍大揭秘-华媒舍

区块链技术迅猛发展&#xff0c;成为全球瞩目的热门领域。随之而来的是区块链媒体的兴起&#xff0c;成为传播和推广区块链知识、项目和应用的重要平台。本文将揭示区块链媒体发布推广的秘籍&#xff0c;为读者深入了解该领域提供详尽科普介绍。 一、什么是区块链媒体&#xff…

Python爬虫学习 | Scrapy框架详解

一.Scrapy框架简介 何为框架&#xff0c;就相当于一个封装了很多功能的结构体&#xff0c;它帮我们把主要的结构给搭建好了&#xff0c;我们只需往骨架里添加内容就行。scrapy框架是一个为了爬取网站数据&#xff0c;提取数据的框架&#xff0c;我们熟知爬虫总共有四大部分&am…

C语言| 数组的折半查找

数组的折半查找 折半查找&#xff1a;在已经排好序的一组数据中快速查找数据。 先排序&#xff0c;再使用折半查找。 【折半查找的运行过程】 1 存储数组下标 low最小的下标&#xff0c;mid中间的下标&#xff0c; high最大的下标 2 key存放查找的值&#xff0c;每一次对比后…

【AI工作流-AI-Agent】FastGPT新建应用并用openai接口调用

FastGPT 简介 FastGPT是一个AI工作流搭建平台&#xff0c;它是一个开源框架&#xff0c;支持聊天&#xff0c;RAG&#xff08;知识库&#xff09;&#xff0c;工作流编排。 缺点是不支持AI搜索&#xff0c;模型支持需要依赖于第三方部署框架例如oneapi&#xff0c;ollama等。…