格式一:项目中完成一个标签的历史轨迹回放功能,即用户在页面通过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);
},