使用JS对时间格式的更改

格式一：项目中完成一个标签的历史轨迹回放功能，即用户在页面通过elementUI时间选择器选定一个时间段，将用户选取的起始时间和终止时间作为axios两个参数，通过axios.get获取后台数据。项目中使用的是influxDB存储数据，influxdb里面解析的时候，会将你发给他的时间当成UTC时间，通过axios收到的数据格式为GMT，首先将GMT时间转换为本地时间，再将本地时间转为UTC时间。

const startTime = this.tagTime[0].toString(); //读取历史轨迹开始时间
const start = GMTToStr(startTime);      //GMT转为本地时间 2019-07-24 19:23:34
var dateBegin = new Date(start.replace(/-/g, "/"));  //数据转成Date对象  2019/07/24 19:23:34
var Start = new Date(start).toISOString(); //将本地时间转为UTC

const endTime = this.tagTime[1].toString();   //读取历史轨迹末尾时间
const end = GMTToStr(endTime);
var dateEnd = new Date(end.replace(/-/g, "/"));
const End = new Date(end).toISOString();

将Start作为起始参数，将End作为终止参数传给后台。

计算两个日期之间的分钟差

var dateDiff = dateEnd.getTime() - dateBegin.getTime();//时间差的毫秒数
var minDiff = Math.floor(dateDiff / (60 * 1000));//计算出相差的分钟数

相应的改变(60*1000)可以计算两个日期之间的小时差、秒数差等

 

格式二：将axios收到的参数time，其为UTC时间2020-03-20T15:09:56.503+8:00转为本地时间且放在elementUI的表格中，且精确到毫秒。

效果：

具体使用到的是moment.js时间库，通过npm install moment --save安装该组件，在需要的组件中import moment from 'moment/moment'引入

表格部分：

<el-table-column
  property="time"
  :formatter="datetransfer"
  label="定位时间"
  width="110%"
  align="center">
</el-table-column>

JS部分：

    // 2020-03-20T15:09:56.503+08:00
      datetransfer(row, column) {
        const moment = require('moment');
        let toUTC = new Date(row.time).toISOString();
        let res = moment(toUTC).format('YYYY-MM-DD HH:mm:ss.SSS');
        return (res)
      },

 

格式三：将收到的时间戳转为日期格式在表格中显示

效果：

收到的数据：

实现：

表格部分

      <el-table-column
        prop="onlineTime"
        label="上线时间"
        width="200%"
        align="center">
      </el-table-column>
      <el-table-column
        prop="offlineTime"
        label="下线时间"
        width="200%"
        align="center"
        show-overflow-tooltip>
      </el-table-column>

接收数据部分：

this.axios.post("api/vAnchorRecord/selectPageUseDyc.action",anchorRecorddata ).then(  (reponse) => {
     self.anchorRecordTable = [];
       // 将数据赋值给tableData
     for (var i = 0; i < reponse.data.rows.length; i++) {
       self.anchorRecordTable.push(reponse.data.rows[i]);
              
       self.anchorRecordTable[i].onlineTime=this.format(reponse.data.rows[i].onlineTime);
             
       self.anchorRecordTable[i].offlineTime=this.format(reponse.data.rows[i].offlineTime);
       console.log(this.format(reponse.data.rows[i].onlineTime));
            }
      // 将数据的长度赋值给totalCount
      elf.anchorRecordtotalCount = reponse.data.total;
     }
 );

时间转换方法：

add0(m){return m<10?'0'+m:m },

format(shijianchuo) {
    var time = new Date(shijianchuo);
    var y = time.getFullYear();
    var m = time.getMonth()+1;
    var d = time.getDate();
    var h = time.getHours();
    var mm = time.getMinutes();
    var s = time.getSeconds();
    return y+'-'+this.add0(m)+'-'+this.add0(d)+' '+this.add0(h)+':'+this.add0(mm)+':'+
             this.add0(s);
  },