no message

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "axios": "^1.6.7",
         "countup.js": "^2.8.0",
+        "crypto-js": "^4.2.0",
         "echarts": "^5.4.3",
         "element-plus": "^2.4.4",
         "sass": "^1.69.6",
@@ -1106,6 +1107,11 @@
         "node": ">= 8"
       }
     },
+    "node_modules/crypto-js": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmmirror.com/crypto-js/-/crypto-js-4.2.0.tgz",
+      "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q=="
+    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.3.tgz",
@@ -2746,6 +2752,11 @@
         "which": "^2.0.1"
       }
     },
+    "crypto-js": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmmirror.com/crypto-js/-/crypto-js-4.2.0.tgz",
+      "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q=="
+    },
     "csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.3.tgz",

package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "axios": "^1.6.7",
     "countup.js": "^2.8.0",
+    "crypto-js": "^4.2.0",
     "echarts": "^5.4.3",
     "element-plus": "^2.4.4",
     "sass": "^1.69.6",

src/api/weather/index.ts

@@ -0,0 +1,21 @@
+import axios from "axios";
+
+const key = "0864bb5b46011f3add9235ac7c5fcd71";
+
+// 获取天气请求
+export const getWeatherInfo = async () => {
+  // 获取当前位置城市编码
+  const res = await axios.get(`https://restapi.amap.com/v3/ip?key=${key}`);
+
+  // 城市编码
+  let { adcode } = res.data;
+
+  // 获取天气信息
+  const info = await axios.get(
+    `https://restapi.amap.com/v3/weather/weatherInfo?key=${key}&city=${adcode}&extensions=all`
+  );
+  // 今日天气信息
+  const dayInfo = info.data.forecasts[0].casts[0];
+
+  return dayInfo;
+};

src/components/header.vue

@@ -1,13 +1,20 @@
 <template>
   <div class="header">
     <div class="header_box">
+      <!-- 左边时间区域 -->
       <div class="box_time">
         <span class="date">日期：{{ currentDate }}</span>
         <span>时间：{{ currentTime }}</span>
       </div>
+      <!-- 中间标题区域 -->
       <div class="box_title">万载三中领导驾驶舱</div>
+      <!-- 右边天气信息区域 -->
       <div class="box_weather">
-        <span>天气：晴 4℃~20℃</span>
+        <span
+          >天气：{{ weatherInfo.dayweather }} &nbsp;{{
+            weatherInfo.nighttemp
+          }}℃~{{ weatherInfo.daytemp }}℃</span
+        >
         <span class="air">空气质量：优</span>
       </div>
     </div>
@@ -17,6 +24,8 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from "vue";
 import { getCurrentTime } from "@/utils/getTime";
+// @ts-ignore
+import { getWeatherInfo } from "@/api/weather/index";
 
 // 当前日期
 const currentDate = ref();
@@ -24,8 +33,20 @@ const currentDate = ref();
 const currentTime = ref();
 // 定时器标识
 const timer = ref();
+// 天气信息
+const weatherInfo = ref({
+  // 天气情况
+  dayweather: "",
+  // 白天温度
+  daytemp: "",
+  // 夜间温度
+  nighttemp: "",
+});
 
 onMounted(() => {
+  // 获取天气信息
+  getWeather();
+  // 获取当前时间
   getTime();
   timer.value = setInterval(() => {
     getTime();
@@ -33,9 +54,15 @@ onMounted(() => {
 });
 
 onUnmounted(() => {
+  // 页面卸载时清除定时器
   clearInterval(timer.value);
 });
 
+// 获取天气信息
+const getWeather = async () => {
+  weatherInfo.value = await getWeatherInfo();
+};
+
 // 获取当前日期时间
 const getTime = () => {
   currentDate.value = getCurrentTime().currentDate;
@@ -87,7 +114,7 @@ const getTime = () => {
       margin-top: 17px;
 
       .air {
-        margin: 0 75px 0 85px;
+        margin: 0 75px;
       }
     }
   }

src/utils/des.js

@@ -0,0 +1,15 @@
+import cryptoJs from 'crypto-js'
+
+// des解密 message为需要解密的信息  key为密钥
+export const decryptDes = (message, key = 'com.template.common.utils') => {
+	let keyHex = cryptoJs.enc.Utf8.parse(key)
+	let decrypted = cryptoJs.DES.decrypt({
+			ciphertext: cryptoJs.enc.Base64.parse(message)
+		},
+		keyHex, {
+			mode: cryptoJs.mode.ECB,
+			padding: cryptoJs.pad.Pkcs7
+		}
+	)
+	return decrypted.toString(cryptoJs.enc.Utf8)
+}