yudao-init/src/views/dashboard/components/Header.vue
2024-05-17 10:31:47 +08:00

173 lines
4.1 KiB
Vue

<!--
filename: Header.vue
author: liubin
date: 2024-04-09 09:04:12
description:
-->
<template>
<header class="dashboard-header">
<div class="btn" :style="btnStyle" @click="toggleFullscreen"></div>
<h1>发电玻璃智能管控平台地图总览</h1>
<span class="side left">{{ this.weather }}</span>
<span class="side right"> {{ times }} </span>
</header>
</template>
<script>
import screenfull from "screenfull";
import fullscreenIcon from "@/assets/images/homeindex/fullscreen.png";
import fullscreenExitIcon from "@/assets/images/homeindex/exit-fullscreen.png";
export default {
name: "DashboardHeader",
components: {},
props: {},
data() {
return {
weatherInterval:null,
isFullscreen: false,
times: null,
weather:'',
};
},
computed: {
btnStyle() {
return {
backgroundImage: `url(${
this.isFullscreen ? fullscreenExitIcon : fullscreenIcon
})`,
};
},
},
mounted() {
this.getTimes()
this.getWeather()
this.getTimesInterval()
this.weatherInterval = setInterval(() => {
this.getWeather()
}, 1800000)
},
destroyed() {
// console.log(1111)
clearInterval(this.weatherInterval)
},
methods: {
getTimes() {
setInterval(this.getTimesInterval, 60000);
},
getTimesInterval() {
var now = new Date();
var weekDay = now.getDay();
var weeks = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
var week = weeks[weekDay]
let _this = this;
let year = new Date().getFullYear(); //获取当前时间的年份
let month = new Date().getMonth() + 1; //获取当前时间的月份
let day = new Date().getDate(); //获取当前时间的天数
let hours = new Date().getHours(); //获取当前时间的小时
let minutes = new Date().getMinutes(); //获取当前时间的分数
// let seconds = new Date().getSeconds(); //获取当前时间的秒数
//当小于 10 的是时候,在前面加 0
if (hours < 10) {
hours = '0' + hours;
}
if (minutes < 10) {
minutes = '0' + minutes;
}
// if (seconds < 10) {
// seconds = '0' + seconds;
// }
//拼接格式化当前时间
this.times =
hours +
':' +
minutes +
' | ' +
week +
' | ' +
year +
'.' +
month +
'.' +
day
},
getWeather() {
fetch(`https://restapi.amap.com/v3/weather/weatherInfo?key=a20a2093715deb9bd68e423c34a2ac3c&city=110108`, {
method: 'get',
extensions: 'base',
// output:'JSON'
}).then((response) => {
// 注意此处
response.json().then((data) => {
console.log(data)
this.weather = data.lives[0].weather + ' ' + data.lives[0].temperature + '℃'
}).catch((err) => {
this.weather = '晴 25℃'
console.log(err);
})
})
},
toggleFullscreen() {
screenfull.toggle();
this.isFullscreen = !this.isFullscreen;
// 矫正宽度
const el = document.querySelector(".dashboard-factory-all");
el.style.width = this.isFullscreen ? "100vw" : "calc(100vw - 54px)";
el.style.left = this.isFullscreen ? "0" : "54px";
},
},
};
</script>
<style scoped lang="scss">
.dashboard-header {
height: 8vh;
background: url(../../../assets/images/homeindex/header-bg.png) no-repeat 0 0 /
100% 100%;
position: relative;
display: grid;
place-content: center;
.btn {
cursor: pointer;
position: absolute;
width: 2vw;
height: 2vw;
top: 50%;
right: 1.18vw;
background-size: 100% 100%;
background-position: 0 0;
}
}
h1 {
// font-size: 32px;
font-size: 1.65vw;
// line-height: 45px;
line-height: 1.25;
letter-spacing: 0.32vw;
user-select: none;
text-shadow: 0 4px 0 rgba(0, 0, 0, 0.5);
}
.side {
position: absolute;
font-size: 1.18vw;
// line-height: 24px;
line-height: 1.277vw;
letter-spacing: 2px;
color: #69b4ff;
}
.left {
left: 22vw;
top: 4.9vh;
}
.right {
right: 15vw;
top: 4.9vh;
}
</style>