完善

guonan

2025-04-17 e15245c624a20a3b46e428d646f5f2dd863cd1bc

 src/views/Screen.vue

@@ -1,141 +1,151 @@
<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">
    <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-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>
         <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>
    <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>
      <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 } from "vue"
   import { useRouter } from "vue-router"
   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]
            // console.log(weather.value)
         })
   }
   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)
   }
import { ref, onMounted, computed, defineEmits } from "vue";
import { useRouter } from "vue-router";
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];
      // console.log(weather.value)
    });
};
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")
   }
   function flyToHomeView() {
      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()
   })
function openWeather() {
  emits("showWeatherDetail");
}

import { useSimStore } from "@/store/simulation";
import { storeToRefs } from "pinia";
const simStore = useSimStore();
const { showDangerAssess, rightRiverShow } = storeToRefs(simStore);
function flyToHomeView() {
  rightRiverShow.value = false;
  showDangerAssess.value = false;
  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");
@import url("../assets/css/screen.css");
</style>