天气，实时时间

src/store/modules/uav.js

@@ -1,3 +1,4 @@
+import moment from "moment";
 const useUavStore = defineStore("uav", {
   state: () => ({
     params: {
@@ -10,12 +11,15 @@ const useUavStore = defineStore("uav", {
         correction: 1,
         speed: 500,
     },
+    realTime:moment().format('YYYY-MM-DD HH:mm')
   }),
   actions: {
     setParams(data) {
-        
       this.params = data;
     },
+    setTime(time) {
+      this.realTime = time;
+    },
   },
 });
 export default useUavStore

src/views/components/map/container.vue

@@ -4,6 +4,14 @@
       <div class="map-title">
         <span> 云航低空研训基地飞行控制中心</span>
       </div>
+      <div class="weather">
+        <div class="sun-icon"></div>
+        <div class="weather-lable">多云</div>
+        <div class="weather-value"><span>17</span> ℃</div>
+      </div>
+      <div class="time">
+        {{ uavStore.realTime }}
+      </div>
     </div>
     <div class="bottom-box"></div>
     <div class="left-bg">
@@ -21,6 +29,8 @@
 <script setup>
 import { onMounted } from "vue";
 import autofit from "autofit.js";
+import useUavStore from "@/store/modules/uav";
+const uavStore = useUavStore();
 onMounted(() => {
   //启用适配
   autofit.init({
@@ -50,6 +60,37 @@ onMounted(() => {
     height: 120px;
     background: url("@/assets/images/top-box.png");
     background-size: 100% 100%;
+    .weather {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      position: absolute;
+      left: 55px;
+      top: 45px;
+      color: #cdd6e3;
+      font-size: 16px;
+      .sun-icon {
+        height: 21px;
+        width: 21px;
+        background: url("@/assets/images/sun.png");
+        background-size: 100% 100%;
+      }
+      .weather-value {
+        span {
+          font-size: 26px;
+          font-family: "DINCondensed-Bold";
+        }
+      }
+    }
+    .time {
+      position: absolute;
+      right: 55px;
+      top: 45px;
+
+      font-size: 20px;
+      color: #cdd6e3;
+      font-weight: 400;
+    }
   }
   .map-title {
     width: 100%;

src/views/components/map/marsMap.vue

@@ -90,6 +90,7 @@ let uav = null;
 const mapLayer = {};
 // 每隔 5 秒更新一次时间戳
 const intervalId = setInterval(() => {
+  uavStore.setTime(moment().format('YYYY-MM-DD HH:mm'))
   const currentTimestamp = moment().unix();
   // 把时间戳转换为 moment 对象
   const moment1 = moment.unix(currentTimestamp);