<template>
<div style="display: inline-block; margin: 0 10px;">
<span class="btn" @click="onOpen">
<img class="img" src="@/assets/worldTime.png" />
<span class="title">世界时</span>
</span>
<el-dialog title="世界时" :visible.sync="isShow" append-to-body width="630px" top="5vh" :close-on-click-modal="false">
<div class="tips1">CST指北京时间，以下各地区均以CST时区为准计算与北京时间的时差</div>
<div class="tips">
<span>+：代表早北京时间N小时</span>
<span class="margin-left: 20px;">-：代表晚北京时间N小时</span>
</div>
<div style="margin-top: 30px;" >
<div :class="item !== 7 ? 'time-container': 'beijingTime'" :style="{ borderColor: timeObj[item].color }" v-for="(item, index) in clockType" :key="index">
<div :class="item !== 7 ? 'name': 'beijingName'">
<span>{{timeObj[item] ? timeObj[item].name : ''}}</span>
</div>
<div class="time">
<span style="margin-right: 20px;">{{timeObj[item] ? timeObj[item].date : ''}}</span>
<span>{{timeObj[item] ? timeObj[item].time : ''}}</span>
</div>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
import axios from 'axios'
import { ProxyUri } from 'config'
import { getToken } from '@/utils/Auth'
export default {
data() {
return {
isShow: false,
timerID: null,
CT: null,
// 时间类型： 中国 北京7， 印度 新德里22， 英国 伦敦68， 美国华盛顿73， 美国洛杉矶88， 加拿大温哥华89， 新西兰 奥克兰105， 澳洲 悉尼110
clockType: [7, 22, 68, 73, 88, 89, 105, 110],
nameObj: {
7: '北京时间',
22: '新德里时间',
68: '伦敦时间',
73: '华盛顿时间',
88: '洛杉矶时间',
89: '温哥华时间',
105: '奥克兰时间',
110: '悉尼时间'
},
timeObj: {
7: { date: '', time: '', name: '', color: '' },
22: { date: '', time: '', name: '', color: '#6484FF' },
68: { date: '', time: '', name: '', color: '#F6CC41' },
73: { date: '', time: '', name: '', color: '#AD64FF' },
88: { date: '', time: '', name: '', color: '#F68641' },
89: { date: '', time: '', name: '', color: '#0a8e14' },
105: { date: '', time: '', name: '', color: '#e83680' },
110: { date: '', time: '', name: '', color: '#ef0c0c' }
}
}
},
methods: {
onOpen() {
this.isShow = true
this.CT = this.newCT()
this.UpdateClocks()
},
UpdateClocks() {
var dateObj = "";
axios.get(`${ProxyUri}/uc/country/v1/now`, {
headers: {
token: getToken()
}
})
.then(res => {
if (res.status === 200) {
dateObj = new Date(res.data)
const CT = this.CT
const gmdt = new Date(dateObj);
for (let n = 0; n < CT.length; n++) {
CT[n].ct = new Date((gmdt.getTime() / 1000 + CT[n].os * 3600) * 1000);
}
this.clockType.forEach(e => {
this.timeObj[e].date = `${this.ClockdString(CT[e].ct)}`
this.timeObj[e].name = `${this.nameObj[e]}${this.OsString(CT[e].os)}`
this.timeObj[e].time = `${this.ClockString(CT[e].ct)}${this.ClocksString(CT[e].ct)}`
})
if (this.isShow) {
this.timerID = setTimeout(this.UpdateClocks, 1000);
} else {
clearTimeout(this.timerID)
}
}
}).catch(function (error) {
console.log(error);
})
},
ClockString(dt) {
var stemp;
var dt_hour = dt.getUTCHours();
var dt_minute = dt.getUTCMinutes();
var dt_second = dt.getUTCSeconds();
if (dt_minute < 10)
dt_minute = '0' + dt_minute;
if (dt_second < 10)
dt_second = '0' + dt_second;
stemp = dt_hour + "时" + dt_minute + "分";
return stemp;
},
ClockdString(dt) {
var stemp;
var dt_month = dt.getUTCMonth() + 1;
var dt_day = dt.getUTCDate();
stemp = dt_month + '月' + dt_day + '日';
return stemp;
},
ClocksString(dt) {
var stemp;
var dt_second = dt.getUTCSeconds();
if (dt_second < 10)
dt_second = '0' + dt_second;
stemp = dt_second + '秒';
return stemp;
},
OsString(eos){
var str = " CST "
var t = eos - this.CT[7].os;
var e = "";
if(t < 0){
e = "" + t
}
if(t == 0){
e = "+0 "
}
if(t > 0){
e = "+" + t
}
return `（${str}${e}）`
},
tzone(os, ds, cl) {
return {
ct: new Date(0), // datetime
os: os, // GMT offset
ds: ds, // has daylight savings
cl: cl // font color
}
},
newCT() {
const tzone = this.tzone
return new Array(
new tzone(9, 0, 'silver'), new tzone(9, 0, 'silver'), new tzone(9, 0, 'silver'), new tzone(8.5, 0, 'silver'), new tzone(8, 0, 'silver'), new tzone(8, 0, 'silver'), new tzone(8, 0, 'silver'), new tzone(8, 0, 'silver'), new tzone(8, 0, 'silver'), new tzone(8, 0, 'silver'), new tzone(8, 0, 'silver'), new tzone(8, 0, 'silver'), new tzone(7, 0, 'silver'), new tzone(7, 0, 'silver'), new tzone(7, 0, 'silver'), new tzone(7, 0, 'silver'), new tzone(7, 0, 'silver'), new tzone(6, 0, 'silver'), new tzone(6, 0, 'silver'), new tzone(6, 0, 'silver'), new tzone(6, 0, 'silver'), new tzone(5.75, 0, 'silver'), new tzone(5.5, 0, 'silver'), new tzone(5.5, 0, 'silver'), new tzone(5, 0, 'silver'), new tzone(5, 0, 'silver'), new tzone(5, 0, 'silver'), new tzone(4.5, 0, 'silver'), new tzone(4.5, 0, 'silver'), new tzone(4, 0, 'silver'), new tzone(4, 0, 'silver'), new tzone(4, 0, 'silver'), new tzone(3, 0, 'silver'), new tzone(3, 0, 'silver'), new tzone(3, 0, 'silver'), new tzone(3, 0, 'silver'), new tzone(3, 0, 'silver'), new tzone(3, 0, 'silver'), new tzone(3, 0, 'silver'), new tzone(3, 0, 'silver'), new tzone(3, 0, 'silver'), new tzone(3, 0, 'silver'), new tzone(3, 0, 'silver'), new tzone(3, 0, 'silver'), new tzone(3, 0, 'silver'), new tzone(3, 0, 'silver'), new tzone(3, 0, 'silver'), new tzone(3, 0, 'silver'), new tzone(3, 0, 'silver'), new tzone(2, 0, 'silver'), new tzone(2, 0, 'silver'), new tzone(2, 0, 'silver'), new tzone(2, 0, 'silver'), new tzone(2, 0, 'silver'), new tzone(2, 0, 'silver'), new tzone(2, 0, 'silver'), new tzone(2, 0, 'silver'), new tzone(2, 0, 'silver'), new tzone(2, 0, 'silver'), new tzone(2, 0, 'silver'), new tzone(2, 0, 'silver'), new tzone(2, 0, 'silver'), new tzone(2, 0, 'silver'), new tzone(2, 0, 'silver'), new tzone(2, 0, 'silver'), new tzone(2, 0, 'silver'), new tzone(2, 0, 'silver'), new tzone(2, 0, 'silver'), new tzone(1, 0, 'silver'), new tzone(1, 0, 'silver'), new tzone(1, 0, 'silver'), new tzone(0, 0, 'silver'), new tzone(-4, 0, 'silver'), new tzone(-4, 0, 'silver'), new tzone(-4, 0, 'silver'), new tzone(-4, 0, 'silver'), new tzone(-4, 0, 'silver'), new tzone(-4, 0, 'silver'), new tzone(-4, 0, 'silver'), new tzone(-4, 0, 'silver'), new tzone(-5, 0, 'silver'), new tzone(-5, 0, 'silver'), new tzone(-5, 0, 'silver'), new tzone(-6, 0, 'silver'), new tzone(-6, 0, 'silver'), new tzone(-6, 0, 'silver'), new tzone(-6, 0, 'silver'), new tzone(-7, 0, 'silver'), new tzone(-7, 0, 'silver'), new tzone(-7, 0, 'silver'), new tzone(-3, 0, 'silver'), new tzone(-3, 0, 'silver'), new tzone(-3, 0, 'silver'), new tzone(-4, 0, 'silver'), new tzone(-4, 0, 'silver'), new tzone(-4, 0, 'silver'), new tzone(-4, 0, 'silver'), new tzone(-4, 0, 'silver'), new tzone(-4, 0, 'silver'), new tzone(-5, 0, 'silver'), new tzone(-5, 0, 'silver'), new tzone(13, 0, 'silver'), new tzone(13, 0, 'silver'), new tzone(12, 0, 'silver'), new tzone(12, 0, 'silver'), new tzone(12, 0, 'silver'), new tzone(11, 0, 'silver'), new tzone(11, 0, 'silver'), new tzone(10, 0, 'silver'), new tzone(10, 0, 'silver'), new tzone(10, 0, 'silver'), new tzone(10, 0, 'silver'), new tzone(4, 0, 'silver'), new tzone(4, 0, 'silver'), new tzone(3, 0, 'silver'), new tzone(3, 0, 'silver'), new tzone(3, 0, 'silver'), new tzone(3, 0, 'silver'), new tzone(3, 0, 'silver'), new tzone(2, 0, 'silver'), new tzone(2, 0, 'silver'), new tzone(2, 0, 'silver'), new tzone(2, 0, 'silver'), new tzone(1, 0, 'silver'), new tzone(1, 0, 'silver'), new tzone(1, 0, 'silver'), new tzone(1, 0, 'silver'), new tzone(1, 0, 'silver'), new tzone(1, 0, 'silver'), new tzone(1, 0, 'silver'), new tzone(0, 0, 'silver'), new tzone(0, 0, 'silver'), new tzone(0, 0, 'silver'), new tzone(0, 0, 'silver')
)
}
}
}
</script>
<style scoped>
@font-face{
font-family: 'PingFang', 'PingFangSC-Regular', 'PingFang SC', 'PingFangSC-Medium';
src: url('./PingFang.ttf');
font-weight: normal;
font-style: normal;
};
/deep/.el-dialog__header{
height: 40px;
line-height: 40px;
padding: 0 20px;
padding-bottom: 0;
border-bottom: 1px solid #D9D9D9;
}
/deep/.el-dialog__body{
padding: 16px 4px 16px 20px;
}
/deep/.el-dialog__headerbtn{
top: 0;
}
/deep/.el-dialog__title{
height: 16px;
font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #2C2D2F;
line-height: 16px;
}
</style>
<style lang="scss" scoped>
.img{
width: 16px;
vertical-align: text-bottom;
}
.title{
font-size: 14px;
}
.btn{
cursor: pointer;
}
.tips{
height: 14px;
font-size: 14px;
font-family: 'PingFangSC-Regular', 'PingFang SC';
font-weight: 400;
color: #E45434;
line-height: 14px;
text-align: center;
}
.tips1{
height: 16px;
font-size: 14px;
font-family: 'PingFangSC-Regular', 'PingFang SC';
font-weight: 400;
color: #2C2D2F;
line-height: 16px;
text-align: center;
margin-bottom: 16px;
}
.time-container{
display: inline-block;
width: 290px;
height: 86px;
background: #FFFFFF;
box-shadow: 0px 1px 9px 0px rgba(0, 0, 0, 0.14);
border-radius: 5px;
border-left: 6px solid;
margin-right: 10px;
margin-bottom: 10px;
vertical-align: top;
padding-left: 16px;
color: #2C2D2F;
.name{
padding-top: 16px;
}
.time{
width: 264px;
height: 20px;
font-size: 20px;
font-family: 'PingFangSC-Medium', 'PingFang SC';
font-weight: 500;
color: #2C2D2F;
line-height: 20px;
letter-spacing: 1px;
margin-top: 20px;
}
}
.beijingTime{
width: 590px;
height: 102px;
background: #FFFFFF;
box-shadow: 0px 1px 9px 0px rgba(0, 0, 0, 0.14);
border-radius: 2px;
margin-bottom: 10px;
text-align: center;
color: #2C2D2F;
.beijingName{
text-align: center;
span{
display: inline-block;
width: 144px;
height: 30px;
line-height: 30px;
text-align: center;
background: #F2F5FF;
border-radius: 0px 0px 8px 8px;
}
}
.time{
height: 30px;
font-size: 30px;
font-family: 'PingFangSC-Medium', 'PingFang SC';
font-weight: 500;
color: #2C2D2F;
line-height: 30px;
letter-spacing: 1px;
margin-top: 28px;
}
}
</style>
网友评论