<template>
|
<div class="flex ju-sb header-pos">
|
<div class="left-logo flex">
|
<img alt="" class="logo-img" src="../../assets/png/logo.png">
|
</div>
|
<div class="center-tab ju-c flex">
|
<dv-decoration-3 style="width:120px;height:20px;" />
|
<div class="big-title ml10 mr10">智慧公交辅助决策系统</div>
|
<dv-decoration-3 style="width:120px;height:20px;" />
|
</div>
|
<div class="ls-tab"></div>
|
<div class="flex align-c color-white right-date ju-se">
|
<div class="div-img">
|
<div :style="{backgroundPosition: pos.x + 'px ' + pos.y + 'px'}" class="ear-img"></div>
|
</div>
|
<div class="flex">
|
<span class="nowdata">{{nowDate}}</span> <span>{{nowWeek}}</span>
|
</div>
|
<div>{{userName}}</div>
|
<img @click="outLogin" alt="" class="out-ligon-img" src="../../assets/png/out_login.png">
|
|
</div>
|
</div>
|
</template>
|
<script>
|
import maputil from "../../unit/map"
|
export default {
|
name: 'HomeHeader',
|
data() {
|
return {
|
timer: null,
|
nowWeek: '',
|
nowDate: '',
|
userName: JSON.parse(localStorage.getItem('userInfo')).username,
|
nowTime: '',
|
pos: {
|
x: 0,
|
y: 0
|
}
|
}
|
},
|
created() {},
|
computed: {},
|
watch: {},
|
methods: {
|
outLogin() {
|
this.$axios.post(this.$Interface.logout).then(res => {
|
localStorage.clear();
|
maputil.hideAllLayer();
|
this.$store.commit("SET_LineName", '411')
|
this.$router.push('login');
|
})
|
},
|
setNowTimes() {
|
let myDate = new Date();
|
let wk = myDate.getDay();
|
let yy = String(myDate.getFullYear());
|
let mm = myDate.getMonth() + 1;
|
let dd = String(myDate.getDate() < 10 ? '0' + myDate.getDate() : myDate.getDate());
|
let hou = String(myDate.getHours() < 10 ? '0' + myDate.getHours() : myDate.getHours());
|
let min = String(myDate.getMinutes() < 10 ? '0' + myDate.getMinutes() : myDate.getMinutes());
|
let sec = String(myDate.getSeconds() < 10 ? '0' + myDate.getSeconds() : myDate.getSeconds());
|
let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
|
let week = weeks[wk];
|
this.nowDate = yy + '-' + mm + '-' + dd;
|
this.nowTime = hou + ':' + min + ':' + sec;
|
this.nowWeek = week
|
},
|
pushItem(index, path) {
|
this.$router.push(path);
|
},
|
getWeather() {
|
let that = this;
|
fetch("https://restapi.amap.com/v3/weather/weatherInfo?city=440400&key=c27285122eec70b6f5792c4a2970b8c2").then(response => {
|
response.json().then(function (data) {
|
if (data.info == "OK") {
|
switch (data.lives[0].weather) {
|
case "晴":
|
that.pos.x = 0;
|
that.pos.y = 0;
|
break;
|
case "阴转晴":
|
that.pos.x = -80;
|
that.pos.y = 0;
|
break;
|
case "阴":
|
that.pos.x = -160;
|
that.pos.y = 0;
|
break;
|
case "晴间多云":
|
that.pos.x = -240;
|
that.pos.y = 0;
|
break;
|
case "雨":
|
that.pos.x = 0;
|
that.pos.y = -80;
|
break;
|
default:
|
that.pos.x = 0;
|
that.pos.y = 0;
|
break;
|
}
|
}
|
|
});
|
})
|
}
|
},
|
mounted() {
|
this.getWeather();
|
this.setNowTimes()
|
},
|
}
|
</script>
|
<style scoped>
|
.header-pos {
|
width: 100%;
|
position: relative;
|
z-index: 111;
|
height: 60px;
|
line-height: 60px;
|
min-width: 1366px;
|
background: url("../../assets/newImg/bg_total.png") no-repeat center/cover;
|
}
|
.left-logo {
|
width: 40%;
|
align-items: center;
|
padding-left: 30px;
|
}
|
.ls-tab{width:15%;}
|
|
.center-tab {
|
width: 44%;
|
font-size: 22px;
|
color: white;
|
align-items: center;
|
}
|
|
.logo-img {
|
width: 80px;
|
}
|
.big-title {
|
color: #fff;
|
font-size: 22px;
|
font-family: 'YouSheBiaoTiHeiT'
|
}
|
.right-date {
|
width: 25%;
|
}
|
.nowdata {
|
font-family: 'Digital';
|
font-size: 18px;
|
}
|
.out-ligon-img {
|
width: 18px;
|
height: 18px;
|
cursor: pointer
|
}
|
.div-img {
|
width: 42px;
|
height: 30px;
|
}
|
.ear-img {
|
width: 100%;
|
height: 100%;
|
background: url("../../assets/newImg/white30.png");
|
background-repeat: no-repeat;
|
display: block;
|
}
|
</style>
|
