Merge branch 'master' of http://192.168.1.218:3000/lianghanqiang/saber-grid-sys

src/components/TimeBar.vue

@@ -0,0 +1,115 @@
+<template>
+ <div style="width: 100%;height: 100%;">
+    <dv-border-box-9  :color="['#1a3776', '#3f6a9a']" backgroundColor="rgba(15, 33, 70, 0.6)">
+      <dv-border-box-8>
+        <div  style="font-size: 18px;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;padding-left: 20px;">
+          <div class=" center" style="width: 25%;color: #00f9cf;">{{dateTime.date}}</div>
+          <div class=" center" style="width: 25%;background: rgba(9, 215, 183,.6);font-size: 26px;font-style: italic;border-radius: 5px;border: solid 1px #dddddd;color: #fff;">{{dateTime.time}}</div>
+          <div class=" center" style="width: 18%;color: #00f9cf;" >{{weekStr[dateTime.week]}}</div>
+
+          <div class=" center" style="width: 10%;font-size: 26px;font-style: italic;color: #00f9cf;">{{temperature}}℃</div>
+          <div class=" center" style="width: 10%;">
+            <div style="text-indent: 8px;">{{weather}} </div>
+          </div>
+        </div>
+      </dv-border-box-8>
+    </dv-border-box-9>
+  </div>
+</template>
+
+<script>
+import {dateFormat} from "../util/date.js";
+
+export default {
+  name: "TimeBar",
+  async mounted() {
+    this.currentTime();
+    await this.getWeather();
+    },
+  data(){
+    return{
+      dateTime: {},
+      weekStr: ['星期天','星期一','星期二','星期三','星期四','星期五','星期六',],
+      temperature: '',
+      weather: '',
+      weatherClass: 'duoyun',
+    }
+  },
+  watch: {
+    weather(){
+      this.weatherClass = this.getWeatherClass(this.weather);
+    },
+  },
+  methods: {
+    currentTime() {
+      setInterval(this.getTime, 500);
+    },
+    getTime() {
+      let date = new Date();
+      let str = dateFormat(date);
+      let week = date.getDay();
+      str = str.split(" ");
+      this.dateTime = {
+        week: week,
+        date: str[0],
+        time: str[1]
+      }
+    },
+    getWeatherClass(weather){
+      let duoyun = ['少云','晴间多云','多云','阴'];
+      let wu = ['雾','浓雾','强浓雾','轻雾','大雾','特强浓雾'];
+      let mai = ['霾','中度霾','重度霾','严重霾'];
+      let feng = ['有风','平静','微风','和风','清风','强风/劲风', ,'疾风','大风','烈风','风暴','狂爆风','飓风','热带风暴'];
+      let yu = ['阵雨','雷阵雨','雷阵雨并伴有冰雹','小雨','中雨','大雨','暴雨','大暴雨','特大暴雨','强阵雨','强雷阵雨','极端降雨','毛毛雨/细雨','雨','小雨-中雨','中雨-大雨','大雨-暴雨','暴雨-大暴雨','大暴雨-特大暴雨','雨雪天气','雨夹雪','阵雨夹雪','冻雨'];
+      let sun = ['晴'];
+      let xue = ['雪','阵雪','小雪','中雪','大雪','暴雪','小雪-中雪','中雪-大雪','大雪-暴雪'];
+      if(duoyun.indexOf(weather)>=0) return'duoyun';
+      if(wu.indexOf(weather)>=0) return'wu';
+      if(yu.indexOf(weather)>=0) return'yu';
+      if(sun.indexOf(weather)>=0) return'sun';
+      if(xue.indexOf(weather)>=0) return'xue';
+      if(mai.indexOf(weather)>=0) return'mai';
+      if(feng.indexOf(weather)>=0) return'feng';
+      return 'duoyun';
+    },
+    async getWeather(){
+      console.log(this.$map)
+      let  weather = new this.$AMap.Weather();
+      //执行实时天气信息查询
+      weather.getForecast('郑州市', (err, data) => {
+        this.temperature = data.forecasts[0].dayTemp;
+        this.weather  = data.forecasts[0].dayWeather;
+      });
+    },
+  }
+}
+</script>
+
+<style scoped>
+  .center{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .duoyun{
+    background: url("/data/duoyun.png") no-repeat center/contain;
+  }
+  .wu{
+    background: url("/data/wu.png") no-repeat center/contain;
+  }
+  .xue{
+    background: url("/data/xue.png") no-repeat center/contain;
+  }
+  .yu{
+    background: url("/data/yu.png") no-repeat center/contain;
+  }
+  .sun{
+    background: url("/data/sun.png") no-repeat center/contain;
+  }
+  .mai{
+    background: url("/data/mai.png") no-repeat center/contain;
+  }
+  .feng{
+    background: url("/data/feng.png") no-repeat center/contain;
+  }
+</style>