列表计算时间差

最新推荐文章于 2024-07-12 10:43:17 发布

LeeyyG

最新推荐文章于 2024-07-12 10:43:17 发布

阅读量97

点赞数 3

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_46118142/article/details/139862927

版权

需求：在操作日志列表的操作栏中，计算两次点击按钮的时间，并计算两次获取时间的时间差，呈现在表格中。且时间的格式为：2024-05-1414:37:47

<el-table :data="stepsData" style="width: 100%">
      <el-table-column prop="title" label="处理环节"></el-table-column>
      <el-table-column prop="name" label="处理人"></el-table-column>
      <el-table-column prop="startTime" label="开始时间">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="getStartTime(scope.row)">开始时间</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="endTime" label="完成时间" >
      <template slot-scope="scope">
        <el-button type="text" size="small" @click="getEndTime(scope.row)">结束时间</el-button>
      </template>
      </el-table-column>
      <el-table-column prop="date" label="办理时限"></el-table-column>
      <el-table-column prop="date" label="办理时长"></el-table-column>
      <el-table-column prop="date" label="超时时长"></el-table-column>
      <el-table-column prop="result" label="处理结果"></el-table-column>


getStartTime(row) {
      const currentTime = new Date();
      const formattedTime = [
        currentTime.getFullYear(),
        ('-' + ('0' + (currentTime.getMonth() + 1)).slice(-2)), // 月份从0开始，所以要+1
        ('-' + ('0' + currentTime.getDate()).slice(-2)),
        ' ', // 添加一个空格在日期和时间之间
        ('0' + currentTime.getHours()).slice(-2),
        (':' + ('0' + currentTime.getMinutes()).slice(-2)), // 在分钟前添加冒号
        (':' + ('0' + currentTime.getSeconds()).slice(-2)) // 在秒数前添加冒号
      ].join('');
      row.startTime = formattedTime;
      // console.log('time',row.startTime)
    },
    getEndTime(row) {
      const currentTime = new Date();
      const formattedTime = [
        currentTime.getFullYear(),
        ('-' + ('0' + (currentTime.getMonth() + 1)).slice(-2)), // 月份从0开始，所以要+1
        ('-' + ('0' + currentTime.getDate()).slice(-2)),
        ' ', // 添加一个空格在日期和时间之间
        ('0' + currentTime.getHours()).slice(-2),
        (':' + ('0' + currentTime.getMinutes()).slice(-2)), // 在分钟前添加冒号
        (':' + ('0' + currentTime.getSeconds()).slice(-2)) // 在秒数前添加冒号
      ].join('');
      row.endTime = formattedTime;
      console.log('endtime',row.endTime)
      this.getDifferTime(row)
    },
    getDifferTime(row) {
      const startTime = new Date(row.startTime);
      const endTime = new Date(row.endTime);
      let diff = Math.abs(endTime - startTime); // 毫秒差
      console.log('diff', diff)
      let days = Math.floor(diff / ( 1000 * 60 * 60 * 24)); // 计算天数
      diff %= (1000 * 60 * 60 * 24); // 减去整天的毫秒数
      let hours = Math.floor(diff / ( 1000 * 60 * 60)); // 计算小时数
      diff %= (1000 * 60 * 60); // 减去整小时的毫秒数
      let minutes = Math.floor(diff / (1000 * 60)); // 计算分钟数
      return row.date = `${days}天${hours}时${minutes}分`;
      console.log('date',row.date)
    },
    handleClick() {
      this.getStartTime();
    },