<template>
|
<div id="logo">
|
<div class="weather_box">
|
<div class="left">
|
{{ data.textWeather }}
|
</div>
|
<div class="border_box"></div>
|
<div class="right">
|
<div class="top">{{ data.temperature }}℃</div>
|
<div class="bottom">
|
{{ data.windDirection }};风速:{{ data.windSpeed }}
|
</div>
|
</div>
|
<div class="border_box"></div>
|
<div class="right1" @click="fullScreen"></div>
|
</div>
|
<div class="time">
|
<div class="Week">
|
{{ data.nowWeek }}
|
</div>
|
<div class="border_box"></div>
|
<div class="time_box">
|
<div class="top">
|
{{ data.date_show }}
|
</div>
|
<div class="bottom">
|
{{ data.time_show }}
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { ref, reactive, onBeforeUnmount, onMounted } from "vue";
|
import { queryWeatherList } from "@/api/api.js";
|
export default {
|
setup(props, { emit }) {
|
let data = reactive({
|
showlogo: true,
|
timer: "",
|
date_show: "",
|
time_show: "",
|
nowWeek: "",
|
|
timer1: null,
|
textWeather: "",
|
temperature: "",
|
windSpeed: "",
|
windDirection: "",
|
});
|
function currentTime() {
|
data.timer = setInterval(() => {
|
getTime(); // 要调用的函数
|
}, 1000);
|
}
|
// 时间格式
|
function getTime() {
|
const year = new Date().getFullYear();
|
const month =
|
new Date().getMonth() + 1 < 10
|
? "0" + (new Date().getMonth() + 1)
|
: new Date().getMonth() + 1;
|
const date =
|
new Date().getDate() < 10
|
? "0" + new Date().getDate()
|
: new Date().getDate();
|
const hh =
|
new Date().getHours() < 10
|
? "0" + new Date().getHours()
|
: new Date().getHours();
|
const h = new Date().getHours();
|
const mm =
|
new Date().getMinutes() < 10
|
? "0" + new Date().getMinutes()
|
: new Date().getMinutes();
|
const ss =
|
new Date().getSeconds() < 10
|
? "0" + new Date().getSeconds()
|
: new Date().getSeconds();
|
const week = new Date().getDay();
|
if (week === 1) {
|
data.nowWeek = "星期一";
|
} else if (week === 2) {
|
data.nowWeek = "星期二";
|
} else if (week === 3) {
|
data.nowWeek = "星期三";
|
} else if (week === 4) {
|
data.nowWeek = "星期四";
|
} else if (week === 5) {
|
data.nowWeek = "星期五";
|
} else if (week === 6) {
|
data.nowWeek = "星期六";
|
} else if (week === 0) {
|
data.nowWeek = "星期日";
|
} else if (week === 27) {
|
data.nowWeek = "星期日";
|
}
|
|
data.date_show = `${year}-${month}-${date}`;
|
data.time_show = `${hh}:${mm}:${ss}`;
|
data.h = hh;
|
|
// sgworld.Analysis.setTime(hh);
|
}
|
//天气获取接口
|
async function queryWeather(year, month, date, h) {
|
// const dataObj = await queryWeatherList({
|
// begin: `${year-1}-${month}-${date} ${h}:00:00`,
|
// end: `${year}-${month}-${date} ${h}:00:00`,
|
// });
|
let begin = `${year - 1}-${month}-${date}-${h}:00:00`;
|
let end = `${year}-${month}-${date}-${h}:00:00`;
|
const dataObj = await queryWeatherList(begin, end);
|
// console.log(dataObj);
|
if (dataObj.result.length != 0) {
|
formatWeather(dataObj.result[0]);
|
}
|
}
|
//格式化天气
|
const formatWeather = (row) => {
|
data.temperature = parseInt(row.temperature);
|
data.windSpeed = Number(row.windSpeed).toFixed(2);
|
|
switch (row.windDirection) {
|
case "Southwest":
|
data.windDirection = "西南风";
|
break;
|
case "Southeast":
|
data.windDirection = "东南风";
|
break;
|
case "Northeast":
|
data.windDirection = "东北风";
|
break;
|
case "Northwest":
|
data.windDirection = "西北风";
|
break;
|
case "North":
|
data.windDirection = "北风";
|
break;
|
case "East":
|
data.windDirection = "东风";
|
break;
|
case "West":
|
data.windDirection = "西风";
|
break;
|
case "South":
|
data.windDirection = "南风";
|
break;
|
}
|
|
switch (row.weatherCondition) {
|
case "Sunny":
|
data.weatherData = "sun";
|
data.textWeather = "晴天";
|
break;
|
|
case "Moderate Rain":
|
data.weatherData = "rain";
|
data.textWeather = "中雨";
|
break;
|
case "Heavy Rain":
|
data.weatherData = "rain";
|
data.textWeather = "大雨";
|
break;
|
case "Light Rain":
|
data.weatherData = "rain";
|
data.textWeather = "小雨";
|
break;
|
case "Light Snow":
|
data.weatherData = "snow";
|
data.textWeather = "小雪";
|
break;
|
case "Moderate Snow":
|
data.weatherData = "snow";
|
data.textWeather = "中雪";
|
break;
|
case "Heavy Snow":
|
data.weatherData = "snow";
|
data.textWeather = "大雪";
|
break;
|
case "T-Storm":
|
data.weatherData = "rain";
|
data.textWeather = "暴风雨";
|
break;
|
case "T-Storm Snow":
|
data.weatherData = "snow";
|
data.textWeather = "暴风雪";
|
break;
|
}
|
|
// window.sgworld.Analysis.createWeather(weatherData, true);
|
};
|
// //获取天气
|
const year = new Date().getFullYear();
|
const month =
|
new Date().getMonth() + 1 < 10
|
? "0" + (new Date().getMonth() + 1)
|
: new Date().getMonth() + 1;
|
|
const date =
|
new Date().getDate() < 10
|
? "0" + new Date().getDate()
|
: new Date().getDate();
|
|
const h = new Date().getHours();
|
const fullScreen = () => {
|
data.showlogo = !data.showlogo;
|
emit("fullScreen", data.showlogo);
|
};
|
queryWeather(year, month, date, h);
|
currentTime();
|
//销毁 // 销毁定时器
|
onBeforeUnmount(() => {
|
clearInterval(data.timer);
|
});
|
return {
|
data,
|
fullScreen,
|
};
|
},
|
};
|
</script>
|
|
<style lang="less">
|
#logo {
|
width: 100%;
|
height: 295px;
|
background: url("../assets/img/title.png") no-repeat center;
|
background-size: 100% 100%;
|
position: absolute;
|
top: 0;
|
left: 0;
|
z-index: 10;
|
display: flex;
|
flex-direction: row-reverse;
|
// justify-content: space-between;
|
// align-items: center;
|
// padding: 0 45px;
|
// box-sizing: border-box;
|
.time {
|
margin-right: 50px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
// position: absolute;
|
// top: 132px;
|
// left: 45px;
|
.time_box {
|
.bottom {
|
color: #fff;
|
font-size: 22px;
|
font-family: PangMenZhengDao;
|
font-weight: 500;
|
}
|
.top {
|
color: #b9b9b9;
|
font-size: 19px;
|
font-family: PangMenZhengDao;
|
}
|
}
|
.Week {
|
font-size: 32px;
|
|
font-family: PangMenZhengDao;
|
font-weight: 500;
|
color: #ffffff;
|
}
|
}
|
.border_box {
|
width: 1px;
|
height: 41px;
|
background: #ffffff;
|
margin-left: 20px;
|
margin-right: 20px;
|
}
|
.weather_box {
|
margin-right: 30px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
// position: absolute;
|
// top: 132px;
|
// right: 45px;
|
.left {
|
font-size: 32px;
|
font-family: PangMenZhengDao;
|
font-weight: 500;
|
color: #ffffff;
|
}
|
.right {
|
font-size: 19px;
|
font-family: PangMenZhengDao;
|
font-weight: 400;
|
color: #ffffff;
|
.top {
|
font-size: 19px;
|
font-family: PangMenZhengDao;
|
font-weight: 400;
|
color: #ffffff;
|
}
|
.bottom {
|
font-size: 19px;
|
font-family: PangMenZhengDao;
|
font-weight: 400;
|
color: #ffffff;
|
}
|
}
|
.right1 {
|
width: 26px;
|
height: 26px;
|
background: url("../assets/img/qp.png") no-repeat center;
|
background-size: 100% 100%;
|
cursor: pointer;
|
}
|
}
|
}
|
</style>
|
