saber-center-command/src/components/3DScene/top-bar/top-bar.vue

<template>
  <div class="container toBottom center">
    <!--  名称  -->
    <div class="center" style="width: 18%;height: 100%">
      <div class="name center" style="flex-direction: column">
        {{title}}
        <span style="font-size: 17px;letter-spacing: 2px;font-weight: normal;font-style: italic;color: #dddddd">Xinyang Rongji soft Garden</span>
      </div>
    </div>

    <!--  时间日期  -->
    <div style="width: 10%;height: 100%" class="center">
      <div class="time-date">
        <div class="full center" style="height: 30%;font-style: italic">{{dateTime.date}} {{weekStr[dateTime.week]}}</div>
        <div class="full center" style="height: 70%;font-size: 35px">{{dateTime.time}}</div>
      </div>
    </div>

    <div class="center" style="width:60%;height: 100%;justify-content: right">
      <el-page-header v-if="showBack" @back="$router.go(-1)" content="楼栋详情">
      </el-page-header>
    </div>

    <!-- 天气  -->
    <div class="center" style="width:7%;height: 100%;">
      <div class="weather">
        <div class="full center" style="height: 75%;font-size: 35px;font-weight: 100">{{weather.dayWeather}}</div>
        <div class="full center" style="height: 25%;font-style: italic;color: #dddddd">{{weather.nightTemp+'℃ ~' + weather.dayTemp+'℃'}}</div>
      </div>
    </div>

    <!-- 开关   -->
    <div @click="logout" style="width:5%;height: 100%" class="switch-bg">
      <div class="switch full"></div>
    </div>
  </div>
</template>

<script>
import {dateFormat} from "../../../util/date";
import {fullscreenToggel} from "../../../util/util";
import {resetRouter} from "../../../router/router";

export default {
  name: "top-bar",
  async mounted() {
    this.currentTime();
    await this.getWeather();
  },
  props: {
    title: {type: 'String'},
    showBack: {type: 'Boolean',default: false}
  },
  data(){
    return{
      dateTime: {},
      weekStr: ['星期天','星期一','星期二','星期三','星期四','星期五','星期六',],
      temperature: '',
      weather: '',
      weatherClass: 'duoyun',
    }
  },
  watch: {
    weather(){
      this.weatherClass = this.getWeatherClass(this.weather);
    },
  },
  methods: {
    back(){
      this.$router.go(-1);
    },
    logout() {
      this.$confirm('退出系统, 是否继续?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        this.$store.dispatch("LogOut").then(() => {
          resetRouter();
          this.$router.push({path: "/login"});
        });
      });
    },
    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.weather = data.forecasts[0];
      });
    },
  }
}
</script>

<style scoped>
  .container{
    width: 100%;
    height: 7%;
    position: absolute;
    top: 0;
    overflow: hidden;
    background: rgba(0,0,0,0.7);
  }
  .name{
    width: 100%;
    height: 70%;
    letter-spacing: 10px;
    font-size: 30px;
    font-weight: 900;
    border-right: 1px solid;
    border-right-color: rgba(255,255,255,0.8);
    color: white;
    user-select: none;
    text-shadow: 0 0 18px rgba(0, 0, 0, 0.35);
  }
  .time-date{
    width: 100%;
    height: 70%;
    color: white;
    font-size: 20px;
    user-select: none;
    text-shadow: 0 0 18px rgba(0, 0, 0, 0.35);
  }
  .weather{
    width: 100%;
    height: 70%;
    color: white;
    font-size: 20px;
    user-select: none;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
  }
  .switch{
    background: url("/data/switch.png") no-repeat center/30%;
  }
  .switch-bg:active,.switch-bg:hover{
    cursor: pointer;
    background: rgba(0,0,0,0.5);
    box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
  }
  .switch-bg:active{
    transform: translate(-1px,1px);
  }
  @keyframes shake-horizontal {
    0%,
    100% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
    10%,
    30%,
    50%,
    70% {
      -webkit-transform: translateX(-10px);
      transform: translateX(-10px);
    }
    20%,
    40%,
    60% {
      -webkit-transform: translateX(10px);
      transform: translateX(10px);
    }
    80% {
      -webkit-transform: translateX(8px);
      transform: translateX(8px);
    }
    90% {
      -webkit-transform: translateX(-8px);
      transform: translateX(-8px);
    }
  }
 /deep/ .el-page-header__title {
    color: white;
    font-size: 24px;
    font-weight: 500;
  }
 /deep/ .el-page-header__content {
   font-size: 18px;
   color: #acacac;
 }
  /deep/ .el-page-header__left .el-icon-back {
    font-size: 18px;
    color: white;
    margin-right: 6px;
    -ms-flex-item-align: center;
    align-self: center;
  }
</style>