时间天气

package-lock.json

@@ -11,6 +11,7 @@
         "@element-plus/icons-vue": "^2.0.10",
         "axios": "^1.1.3",
         "cesium-navigation-es6": "^3.0.8",
+        "dayjs": "^1.11.7",
         "echarts": "^5.4.0",
         "element-plus": "^2.2.16",
         "html2canvas": "^1.4.1",
@@ -717,9 +718,9 @@
       "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
     },
     "node_modules/dayjs": {
-      "version": "1.11.5",
-      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.5.tgz",
-      "integrity": "sha512-CAdX5Q3YW3Gclyo5Vpqkgpj8fSdLQcRuzfX6mC6Phy0nfJ0eGYOeS7m4mt2plDWLAtA4TqTakvbboHvUxfe4iA=="
+      "version": "1.11.7",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.7.tgz",
+      "integrity": "sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ=="
     },
     "node_modules/debug": {
       "version": "2.6.9",

package.json

@@ -10,6 +10,7 @@
     "@element-plus/icons-vue": "^2.0.10",
     "axios": "^1.1.3",
     "cesium-navigation-es6": "^3.0.8",
+    "dayjs": "^1.11.7",
     "echarts": "^5.4.0",
     "element-plus": "^2.2.16",
     "html2canvas": "^1.4.1",
@@ -46,6 +47,7 @@
         "@element-plus/icons-vue",
         "axios",
         "cesium-navigation-es6",
+        "dayjs",
         "echarts",
         "element-plus",
         "element-plus/dist/locale/en.mjs",

src/views/Main/components/ZhHeader.vue

@@ -1,5 +1,5 @@
 <template>
-	<!--标题logo-->
+	<!-- 标题logo-->
 	<div class="header">
 		<router-link to="/home/Map3d">
 			<div :class="[yztTitle?'YztTitle':'YztXzTitle']" @click="slideTitle('YztTitle')"></div>
@@ -11,14 +11,24 @@
 		<div :class="[ggTitle?'GgTitle':'GgXzTitle']" @click="slideTitle('GgTitle')"></div>
 		<div :class="[ywTitle?'YwTitle':'YwXzTitle']" @click="slideTitle('YwTitle')"></div>
 	</div>
+	<div class="dataTime">
+		<DataTime></DataTime>
+	</div>
+	<div class="weather">
+		<weather></weather>
+	</div>
 </template>
-
+   
 <script>
+	import DataTime from "../../Map3d/components/DataTime.vue";
+	import weather from "../../Map3d/components/weather.vue"
+	
 	export default {
 		name: "ZhHeader",
+		components:{DataTime,weather},
 		data() {
 			return {
-				yztTitle: true,
+				yztTitle: false,
 				sqTitle: true,
 				ggTitle: true,
 				ywTitle: true
@@ -150,4 +160,19 @@
 		background-size: 100% 100%;
 		position: absolute;
 	}
+	.dataTime{
+		left:92%;
+		z-index: 9999;
+		width: 150rem;
+		height: 120rem;
+		position: absolute;
+	}
+	.weather{
+		left:2%;
+		top:2.5%;
+		z-index: 9999;
+		width: 150rem;
+		height: 120rem;
+		position: absolute;
+	}
 </style>

src/views/Map3d/components/DataTime.vue

@@ -0,0 +1,60 @@
+<template>
+	<div class="box">
+		<p class="boxDate">{{ dateYear }}
+			<br>
+		<div class="boxTime"> {{ dateDay }}
+		</div>
+		</p>
+	</div>
+</template>
+
+<script>
+	import dayjs from "dayjs";
+	export default {
+		data() {
+			return {
+				dateDay: null,
+				dateYear: null,
+				dateWeek: null,
+				weekday: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
+				timer: null,
+			};
+		},
+		mounted() {
+			this.timer = setInterval(() => {
+				const date = dayjs(new Date());
+				this.dateDay = date.format("HH:mm:ss");
+				this.dateYear = date.format("YYYY-MM-DD");
+				this.dateWeek = date.format(this.weekday[date.day()]);
+			}, 1000);
+		},
+		beforeDestroy() {
+			if (this.timer) {
+				clearInterval(this.timer);
+			}
+		},
+	};
+</script>
+
+<style scoped>
+	.box {
+		height: 100%;
+		width: 100%;
+		color: #fff;
+		display: flex;
+		align-items: center;
+	}
+
+	.boxDay {
+		font-size: 16rem;
+	}
+
+	.boxTime {
+		font-size: 18rem;
+		margin: 0 16rem;
+	}
+
+	.boxDate {
+		font-size: 12rem;
+	}
+</style>

src/views/Map3d/components/weather.vue

@@ -0,0 +1,74 @@
+<template>
+   <div class="box">
+	    <p class="boxCity">{{weatcherData.city}}市</p>
+		 <p class="boxWeather">{{weatcherData.wea}}<br> 
+		 <div class="boxTemperature">
+			 {{weatcherData.tem}}°
+		 </div>
+		 </p>
+	  
+     
+    <!--  <p class="boxWind">{{weatcherData.win}}{{weatcherData.win_speed}}</p> -->
+     
+   </div>
+</template>
+
+<script>
+import axios from 'axios'
+export default {
+   data(){
+      return{
+         weatcherData:{}
+      }
+   },
+   mounted() {
+      this.getWeather();
+      this.timer = setInterval(() => {
+         this.getWeather();
+      }, 1000 * 60 * 60)	//每小时调用一次	
+   },
+   methods: {
+      getWeather() { // 第三方天气api接口
+         axios.get('https://yiketianqi.com/free/day', {
+            params: {
+               unescape: "1",
+               appid: '66192398',
+               appsecret: 'cqIyJ5ZP',
+               // version: 'v91'
+            }
+         }).then(res => {
+            console.log(res.data);
+            if (res.data) {
+               this.weatcherData = res.data;
+            }
+         }).catch(err => {
+            console.log(err)
+         })
+      }
+   }
+}
+</script>
+
+<style scoped>
+.box{
+   display: flex;
+   align-items: center;
+   color: #fff;
+   margin-right: 20rem;
+}
+.boxTemperature{
+   font-size: 18rem;
+}
+.boxWeather{
+   font-size: 14rem;
+   margin: 0 0 0 15rem;
+}
+.boxWind{
+   margin: 0 15rem 0 8rem;
+   font-size: 14rem;
+   
+}
+.boxCity{
+   font-size: 16rem;
+}
+</style>