驾驶舱

src/views/dashboard/components/Header.vue

@@ -1,16 +1,16 @@
-<!-- 
+<!--
     filename: Header.vue
     author: liubin
     date: 2024-04-09 09:04:12
-    description: 
+    description:
 -->
 
 <template>
   <header class="dashboard-header">
     <div class="btn" :style="btnStyle" @click="toggleFullscreen"></div>
     <h1>发电玻璃智能管控平台地图总览</h1>
-    <span class="side left">晴转多云 14℃</span>
-    <span class="side right">23:12|星期一|2023.12.13</span>
+    <span class="side left">{{ this.weather }}</span>
+    <span class="side right"> {{ times }} </span>
   </header>
 </template>
 
@@ -26,6 +26,8 @@ export default {
   data() {
     return {
       isFullscreen: false,
+      times: null,
+      weather:'',
     };
   },
   computed: {
@@ -37,7 +39,68 @@ export default {
       };
     },
   },
+  mounted () {
+    ;this.getTimes()
+    this.getWeather()
+  },
   methods: {
+    getTimes() {
+      setInterval(this.getTimesInterval, 1000);
+    },
+    getTimesInterval: function () {
+      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
+    },
+   async getWeather() {
+      setInterval(() => {
+       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);
+         })
+       })
+      }, 1000)
+    },
     toggleFullscreen() {
       screenfull.toggle();
       this.isFullscreen = !this.isFullscreen;