代码提交

src/App.vue

@@ -9,8 +9,7 @@
         <div class="middleText"><img src="./assets/images/homeText.png"/></div>
         <div class="rightBtn" @click="energyPdf" :class="{'handleAction1':handleAction1=='能源发展综述'}"><div class="rightBtnText">能源发展综述</div></div>
       </div>
-      <div class="right"><img :src="weather" style="width:10%;height:50%"/>晴转多云 &nbsp;&nbsp;| &nbsp;&nbsp;<span style="color:rgb(23,231,232)">-2-5℃</span>&nbsp;&nbsp;|&nbsp;&nbsp; 东风<span style="color:rgb(23,231,232);    align-items: center;
-    display: flex;height:50%">3</span>级</div>
+      <div class="right"><img :src="weather" style="width:10%;height:50%"/>{{weatherText}} &nbsp;&nbsp;| &nbsp;&nbsp;<span style="color:rgb(23,231,232)">{{lowTemperature}}-{{highTemperature}}℃</span>&nbsp;&nbsp;|&nbsp;&nbsp; {{wind}}</div>
     </div>
      <div class="content">
       <router-view />
@@ -61,6 +60,7 @@
 <script>
 import pdf from 'vue-pdf'
 import axios from "axios"
+import {getData} from './api/index.js'
   export default {
     data(){
       return{
@@ -72,7 +72,11 @@ import axios from "axios"
       filePdf:'', //pdf文件
       weather:require('./assets/weather/Cloudy .png'),
       weekList:['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
-      week:''
+      week:'',
+      highTemperature:'',
+      lowTemperature:'',
+      wind:'',
+      weatherText:''
       }
     },
     mounted() {
@@ -89,7 +93,68 @@ import axios from "axios"
       window.setInterval(()=>{
         this.time = this.$moment().format("YYYY-MM-DD   hh:mm:ss")
       },1000)
-      
+      getData({
+        action:'one',
+        key:'天气情况'
+      }).then((res)=>{
+        let toDay = this.$moment().format("DD")
+        for (let i = 0; i < res.data.data.length; i++) {
+          if (toDay == res.data.data[i].第N天) {
+            this.highTemperature = res.data.data[i].最高温度;
+            this.lowTemperature = res.data.data[i].最低温度;
+            this.wind = res.data.data[i].风向;
+            this.weatherText = res.data.data[i].天气;
+            switch (this.weatherText) {
+                case "多云":
+                  return this.weather = require('./assets/weather/Cloudy .png');
+                case "阴":
+                  return this.weather = require('./assets/weather/Cloudy .png')
+                case "暴雨":
+                  return this.weather = require('./assets/weather/rainstorm.png')
+                case "冰雹":
+                  return this.weather = require('./assets/weather/hail.png')
+                case "大风":
+                  return this.weather = require('./assets/weather/gale.png')
+                case "大雪":
+                  return this.weather = require('./assets/weather/bigsnow.png')
+                case "大雨":
+                  return this.weather = require('./assets/weather/bigrain.png')
+                case "雷电":
+                  return this.weather = require('./assets/weather/thunder.png')
+                case "雷阵雨":
+                  return this.weather = require('./assets/weather/shower.png')
+                case "沙尘暴":
+                  return this.weather = require('./assets/weather/sand.png')
+                case "晴":
+                  return this.weather = require('./assets/weather/sun.png')
+                case "雾霾":
+                  return this.weather = require('./assets/weather/smog.png')
+                case "小雪":
+                  return this.weather = require('./assets/weather/snow.png')
+                case "小雨":
+                  return this.weather = require('./assets/weather/rain.png')
+                case "雪":
+                  return this.weather = require('./assets/weather/rainlitter.png')
+                case "多云":
+                  return this.weather = require('./assets/weather/night.png')
+                case "雨夹雪":
+                  return this.weather = require('./assets/weather/rainsnow.png')
+                case "月亮":
+                  return this.weather = require('./assets/weather/moon.png')
+                case "中雪":
+                  return this.weather = require('./assets/weather/mieddlesnow.png')
+                case "中雨":
+                  return this.weather = require('./assets/weather/middlerain.png')
+              }
+          }else{
+            this.highTemperature = '0';
+            this.lowTemperature = '0';
+            this.wind = '东风0级';
+            this.weatherText = '阴';
+            this.weather = require('./assets/weather/Cloudy .png');
+          }
+        }
+      })
     },
     methods:{
       //关闭PDF文件
@@ -181,6 +246,9 @@ import axios from "axios"
        width: 62%;
       background: url("./assets/images/btnLeftPdf.png") no-repeat;
       background-size: 100% 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
     }
     .handleAction{
@@ -222,6 +290,9 @@ import axios from "axios"
        width: 62%;
       background: url("./assets/images/btnRightPdf.png") no-repeat;
       background-size: 100% 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
     }
     .handleAction1{

src/views/index.vue

@@ -1018,7 +1018,6 @@ export default {
         for (const key in capacityData[index]) {
            capacityList.push({name:key , value:capacityData[index][key]})
         }
-       
       })
            var myChart = this.$echarts.init(document.getElementById("echartsTwo"));
            var option = {
@@ -4677,6 +4676,7 @@ export default {
         display: flex;
         flex-wrap: wrap;
         align-items: center;
+        z-index: 100;
          .cityBtn{
            width: 100%;
            height: 9%;