<template>
|
<div class="screen">
|
<div class="screen-top" :class="bgVisible ? '' : 'nonebg'">
|
<div class="screen-top-logo" @click="initScene()"></div>
|
</div>
|
<div class="screen-left" :class="bgVisible ? '' : 'nonebg'"></div>
|
<div class="screen-right" :class="bgVisible ? '' : 'nonebg'"></div>
|
<div class="screen-bottom" :class="bgVisible ? '' : 'nonebg'"></div>
|
|
<div class="screen-leftbg"></div>
|
<div class="screen-rightbg"></div>
|
|
<div class="screen-widget">
|
<div class="screen-widget-weather" @click="openWeather">
|
<div class="screen-widget-icon">
|
<img style="width: 26px; height: 26px" :src="weatherIcon" alt="" />
|
</div>
|
<div class="screen-widget-text">
|
{{ weather.now.text }} {{ weather.now.temperature + "℃" }}
|
</div>
|
<!-- <div
|
class="screen-widget-time screen-widget-text"
|
style="margin-left: 20px"
|
>
|
{{ $dayjs().format("YYYY/MM/DD HH:mm") }}
|
</div> -->
|
<div
|
class="screen-widget-time screen-widget-text"
|
style="margin-left: 20px"
|
>
|
{{ currentTime }}
|
</div>
|
</div>
|
<div class="screen-widget-home">
|
<div class="screen-widget-icon"></div>
|
<div class="screen-widget-text" @click="flyToHomeView">返回主页</div>
|
</div>
|
<div class="screen-widget-location">
|
<div class="screen-widget-icon"></div>
|
<div class="screen-widget-text">{{ defaultCity }}</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, onMounted, computed, defineEmits,onBeforeUnmount } from "vue";
|
import { useRouter } from "vue-router";
|
import dayjs from 'dayjs'
|
|
const currentTime = ref(dayjs().format("YYYY/MM/DD HH:mm:ss"));
|
|
const updateTime = () => {
|
currentTime.value = dayjs().format("YYYY/MM/DD HH:mm:ss");
|
};
|
|
let timer;
|
|
onMounted(() => {
|
timer = setInterval(updateTime, 1000);
|
});
|
|
onBeforeUnmount(() => {
|
clearInterval(timer); // 避免内存泄漏
|
});
|
|
const router = useRouter();
|
const bgVisible = ref(true);
|
const defaultCity = ref(cityData.name);
|
const emits = defineEmits("showWeatherDetail");
|
function init(visible) {
|
bgVisible.value = visible;
|
}
|
const weatherIcon = computed(() => {
|
return `https://cdn.sencdn.com/widget2/assets/img/chameleon/weather/${weather.value.now.code}.svg `;
|
});
|
const weather = ref({
|
location: {
|
id: "WKNM0GVFCUJJ",
|
name: "北京",
|
country: "CN",
|
path: "北京,北京,中国",
|
timezone: "Asia/Shanghai",
|
timezone_offset: "+08:00",
|
},
|
now: {
|
text: "晴",
|
code: "9",
|
temperature: "20",
|
feels_like: "31",
|
pressure: "990",
|
humidity: "84",
|
visibility: "24.13",
|
wind_direction: "东",
|
wind_direction_degree: "79",
|
wind_speed: "10.0",
|
wind_scale: "2",
|
clouds: "62",
|
dew_point: "",
|
},
|
last_update: "2023-04-21T11:02:40+08:00",
|
});
|
const air = ref({
|
city: {
|
quality: "优",
|
},
|
});
|
const getWeatherData = () => {
|
fetch(
|
"https://api.seniverse.com/v3/weather/now.json?key=Sn4df5dIxeplgBv3X&location=beijing&language=zh-Hans&unit=c",
|
{
|
mode: "cors", // no-cors, *cors, same-origin
|
cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
|
headers: {
|
// "Content-Type": "application/json",
|
"Content-Type": "application/x-www-form-urlencoded",
|
},
|
}
|
)
|
.then((response) => response.json())
|
.then((data) => {
|
weather.value = data.results[0];
|
});
|
};
|
function initScene() {
|
flyToHomeView();
|
let desc = {
|
func_name: "FlyTo",
|
vectorType: "WGS84",
|
x: "102.410951",
|
y: "36.838083",
|
z: "20611.588439",
|
yaw: "-87.464172",
|
pitch: "-89.0",
|
distance: "4918164.228809",
|
PlayRate: "5",
|
Name: "甘肃顶视图",
|
};
|
ps.emitMessage(desc);
|
}
|
|
function openWeather() {
|
emits("showWeatherDetail");
|
}
|
|
import { useSimStore } from "@/store/simulation";
|
import { storeToRefs } from "pinia";
|
const simStore = useSimStore();
|
|
function flyToHomeView() {
|
simStore.setBackToHome(true);
|
|
router.push("/");
|
const view = {
|
destination: {
|
x: -2355432.569004413,
|
y: 4687573.191838412,
|
z: 4098726.315265574,
|
},
|
orientation: {
|
pitch: -0.9541030830183503,
|
roll: 0.00031421159527500464,
|
heading: 6.140424766644804,
|
},
|
};
|
viewer.scene.camera.flyTo(view);
|
}
|
onMounted(() => {
|
getWeatherData()
|
});
|
</script>
|
<style lang="less" scoped>
|
@import url("../assets/css/screen.css");
|
</style>
|
