✨ feat([drp-食堂菜单]): 菜单新增长沙天气展示

食堂大屏增加天气显示： 1、获取长沙天气情况数据 接口API：https://www.juhe.cn/docs/api/id/73 2、读取天气数据进行展示

20240430059

src/api/canteen/basic.js

@@ -80,4 +80,13 @@ export function MENUDETAIL(id) {
     url: `/dh/menu/${id}`,
     method: "get",
   })
+}
+
+// 天气 
+export function WEATHER(data) {
+  return request({
+    url: `/weather/records/getWeatherByCityAndDate`,
+    method: 'post',
+    data,
+  })
 }

src/main.js

@@ -70,6 +70,9 @@ import horizontalScroll from 'el-table-horizontal-scroll';
 //自定义全局指令
 import onlyNumber from '@/views/business/ehr/directive/el-input';
 
+// 引入和风天气图标
+import 'qweather-icons/font/qweather-icons.css'
+
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts;
 Vue.prototype.getConfigKey = getConfigKey;

src/views/canteen/menuScreen.vue

@@ -61,13 +61,18 @@
     <p class="people">
       园区打卡人数:{{ dakaNum }}人（{{ new Date().Format("yyyy-MM-dd") }}）
     </p>
+
+    <Weathers class="weather" :data="weatherData"></Weathers>
   </div>
 </template>
 
 <script>
 import axios from "axios";
-import { menuList, dakaPeople } from "@/api/canteen/basic.js";
+import { menuList, dakaPeople, WEATHER } from "@/api/canteen/basic.js";
 export default {
+  components: {
+    Weathers: () => import("./weather/index.vue"),
+  },
   data() {
     return {
       tableData: [],
@@ -99,12 +104,14 @@ export default {
           timeFrame: "2",
         },
       ],
+      weatherData: {},
     };
   },
   created() {
     this.getList();
     this.dataRefreh();
     this.getPeoples();
+    this.getWeather();
   },
   destroyed() {
     // 在页面销毁后，清除计时器
@@ -122,6 +129,20 @@ export default {
         }
       } catch (error) {}
     },
+    async getWeather() {
+      try {
+        let params = {
+          city: "长沙",
+          date: new Date().Format("yyyy-MM-dd"),
+        };
+        let { code, data } = await WEATHER(params);
+        if (code === 200) {
+          this.weatherData = data;
+        }
+      } catch (error) {
+      } finally {
+      }
+    },
     // 定时刷新数据函数
     dataRefreh() {
       // 计时器正在进行中，退出函数
@@ -252,6 +273,15 @@ export default {
   color: #fff;
 }
 
+.weather {
+  position: absolute;
+  top: 0;
+  left: 1%;
+  font-size: 4vh;
+  font-weight: 600;
+  color: #fff;
+}
+
 .el-table::before {
   height: 0;
 }

src/views/canteen/weather/icons.js

@@ -0,0 +1,70 @@
+const Icons = {
+  // 晴
+  "00": "qi-100",
+  // 多云
+  "01": "qi-101",
+  //  阴
+  "02": "qi-104",
+  //  阵雨
+  "03": "qi-301",
+  //  雷阵雨
+  "04": "qi-302",
+  // 雷阵雨伴有冰雹
+  "05": "qi-2135",
+  // 雨夹雪
+  "06": "qi-404",
+  //  小雨
+  "07": "qi-305",
+  // 中雨
+  "08": "qi-306",
+  //  大雨
+  "09": "qi-307",
+  // 暴雨
+  "10": "qi-310",
+  //  大暴雨
+  "11": "qi-311",
+  //  特大暴雨
+  "12": "qi-311",
+  // 阵雪
+  "13": "qi-407",
+  //  小雪
+  "14": "qi-400",
+  // 中雪
+  "15": "qi-401",
+  //  大雪
+  "16": "qi-402",
+  //  暴雪
+  "17": "qi-403",
+  //  雾
+  "18": "qi-500",
+  // 冻雨
+  "19": "qi-313",
+  // 沙尘暴
+  "20": "qi-1002",
+  // 小到中雨
+  "21": "qi-314",
+  //  中到大雨
+  "22": "qi-315",
+  // 大到暴雨
+  "23": "qi-315",
+  // 暴雨到大暴雨
+  "24": "qi-317",
+  // 大暴雨到特大暴雨
+  "25": "qi-317",
+  // 小到中雪
+  "26": "qi-408",
+  //  中到大雪
+  "27": "qi-409",
+  // 大到暴雪
+  "28": "qi-410",
+  //  浮尘
+  "29": "qi-504",
+  //  扬沙
+  "30": "qi-504",
+  // 强沙尘暴
+  "31": "qi-1002",
+  //  霾
+  "53": "qi-512",
+}
+
+export default Icons

src/views/canteen/weather/index.vue

@@ -0,0 +1,34 @@
+<template>
+  <p>
+    {{ innerValue.weather }}
+    <i :class="Icons[innerValue.day]" style="padding: 0 10px"></i>
+    {{ innerValue.temperature && innerValue.temperature.replace(/\//, "~") }}
+    <i style="font-style: normal; padding: 0 10px">{{ innerValue.direct }}</i>
+  </p>
+</template>
+
+<script>
+import Icons from "./icons";
+export default {
+  name: "Weather",
+  props: {
+    data: {
+      type: Object,
+      // default: () => {},
+    },
+  },
+  data() {
+    return {
+      Icons,
+    };
+  },
+  computed: {
+    innerValue: {
+      get() {
+        return this.$props.data;
+      },
+      set() {},
+    },
+  },
+};
+</script>