wszhyWx/src/views/HomeView.vue

<template>
  <div class="home">
    <div class="header">
      <div class="header-left">

        <div>
          <div class="return-btn" @click="returnRouter()">返回设定值参数</div>
          <div class="return-btn" @click="refreshData()">数据刷新</div>
          <!-- <div class="router-list" @click="toRouter(item)" :class="routerAct == item.router ? 'active' : ''"
            v-for="item, index in routerList" :key="index">
            {{ item.name }}
            <img v-if="routerAct == item.router" src="../assets/image/header-active.png" alt="">
          </div> -->
        </div>
      </div>
      <div class="header-center" v-if="deviceDetail">{{ deviceDetail.deviceTypeName }}</div>
      <div class="header-right">
   
        <div class="time" v-if="time">
          {{ time.year.year }}-{{ time.year.month }}-{{ time.year.date }}<span>{{ time.time }}</span>
          <div>{{ time.week }}</div>
        </div>
      </div>
    </div>
    <div class="page-content">
      <router-view v-if="!loading"></router-view>
    </div>
  </div>
</template>
<script>
import { getnowtime } from '../assets/js/nowTime'
export default {
  data() {
    return {
      time: null,//右上角时间
      routerAct: 'status',//当前页面name
      loading:true,
      deviceDetail:null,
    }
  },
  watch: {
    "$route.name"(newName, oldName) {
      console.log(newName,oldName);
      this.gerRouter();
    },
  },
  mounted() {
    // this.getTime()
    this.gerRouter();

    if (localStorage.getItem('token')) {
      this.getEqbyid()
    } else {
      this.$router.push({ name: 'login' })

    }
    this.$bus.$on('refreshTime',(res)=>{
        console.log(res,'time');
        this.time=res
       })
  },
  methods: {
    refreshData(){
      this.getEqbyid()
      this.$bus.$emit('refreshData')
    },
    getEqbyid() {
            var store=this.$store.state
            var userInfo = JSON.parse(localStorage.getItem('userInfo'))
            this.api.getEqbyid(userInfo.userid).then((res) => {
                if (res.data.code == 200) {
                    store.equipmentList = res.data.data.map((item,index) => {
                        return {
                            ...item,
                            router: 'formula',
                            index: index+1,
                        };
                    });
            this.deviceDetail=store.equipmentList[store.equipmentIndex-1]
            this.loading=false
                }
            })
        },
    returnRouter(){
      // this.$router.go(-1)
      this.$router.push({ path: `/irrigateSet?id=1` })
    },
    toRouter(item) {
      if (item.router) {
        if (item.http) {
          window.location.href = item.router;
        } else if (item.router != this.routerAct && !item.http) {
          this.$router.push({ name: item.router })
        }
      }
    },
    gerRouter() {
      this.routerAct = this.$route.name;
    },
    getTime() {
      this.time = getnowtime()
      const that = this
      setInterval(() => {
        that.time = getnowtime()
      }, 1000);
    },
  },

}
</script>
<style lang="scss">
.home {
  width: 100%;
  height: 100%;
  min-height: 900px;
  min-width: 1553px;
  overflow: auto;
  background: url(../assets/image/background.jpg) no-repeat;
  background-size:cover;
  background-position: center top;
  .return-btn {
          // width: 120px;
          margin: 0 8px;
          min-width: 120px;
          padding: 0 20px;
          border-radius: 3px;
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #FFFFFF;
          cursor: pointer;
          background: #00BB88;
        }
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
    padding: 0 30px;

    >.header-left {
      display: flex;
      align-items: center;
      position: relative;

      >div {
        position: absolute;
        left: 30px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        // justify-content: space-between;
        width: 500px;

      
      }

      .router-list {
        position: relative;
        font-size: 20px;
        font-family: Alibaba PuHuiTi;
        font-weight: 500;
        font-style: italic;
        color: #C7DDFC;
        cursor: pointer;
        // padding: 0 35px;
        height: 100%;
        display: flex;
        align-items: center;

        >img {
          position: absolute;
          bottom: -10px;
          left: 50%;
          transform: translateX(-50%);
          width: 178px;
          height: 33px;
        }

        &.active {
          color: #F4A541;
          background: linear-gradient(180deg, #FFFFFF 0%, #00FFF0 99.6337890625%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
    }

    >.header-center {
      font-size: 44px;
      font-family: Alimama ShuHeiTi;
      font-weight: bold;
      color: #F9CB9D;

      background: linear-gradient(180deg, #F3F9FF 0%, #A4C9F3 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    >.header-right {
      position: relative;
      height: 80px;

      .time {
        width: 500px;
        position: absolute;
        right: 0;
        top: 0;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        font-size: 28px;
        font-family: Oswald;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 80px;

        >span {
          margin: 0 15px;
          font-size: 28px;
          font-family: Oswald;
          font-weight: 500;
          color: #FFFFFF;
        }

        >div {
          font-size: 28px;
          font-family: Alibaba PuHuiTi;
          font-weight: 500;
          color: #FFFFFF;
        }
      }
    }
  }

  .page-content {
    width: 100%;
    height: calc(100% - 80px);

    >div {
      width: 100%;
      height: 100%;
    }
  }
}
</style>