jinchao_front/src/views/wel/index.vue

<template>
  <div class="container">
    <div class="top_box">
      <div class="left_box">
        <div class="img_box" @click="pageToInfo">
          <img style="width:3.65vw;height:3.65vw;" src="@/assets/image/person.png" alt="">
        </div>
        <div class="name_box">
          <div class="top_title">早上好，{{userInfo.real_name}}</div>
          <div class="bottom_title">今天是{{todayDate}},{{chineseWeekday}}</div>
        </div>
      </div>
      <div class="right_box" @click="logout">
        退出登录
      </div>
      
    </div>
    <div class="route_container" v-for="items in routerArr" :key="items.id">
      <div class="title_box">{{items.name}}</div>
      <div class="router_box">
        <div class="router_item"  @click="changePage(item)" v-for="(item,index) in items.children" :key="item.name" :style="{ backgroundColor: colors[index % colors.length] }">
          {{item.name}}
        </div>
      </div>
    </div>
    
  </div>
</template>

<script>
  import {mapGetters} from "vuex";
  import {getLazyList} from "@/api/system/menu";
  import {dateFormat} from "@/util/date";
  import {resetRouter} from '@/router/router'

  export default {
    name: "wel",
    data() {
      return {
        activeNames: ['1', '2', '3', '5'],
        logActiveNames: ['43'],
        todayDate:dateFormat(new Date(),"yyyy年MM月dd日"),
        routerName:'',
        routerArr:[
          // {
          //   name:'产品新增',
          //   url:"/category"
          // },
          // // {
          // //   name:'产品列表',
          // //   url:""
          // // },
          // {
          //   name:'客户管理',
          //   url:"/customer"
          // },
          // {
          //   name:'客户管理',
          //   url:"/customer"
          // },
          // {
          //   name:'客户管理',
          //   url:"/customer"
          // },
          // {
          //   name:'客户管理',
          //   url:"/customer"
          // },
          // {
          //   name:'客户管理',
          //   url:"/customer"
          // },
          // {
          //   name:'客户管理',
          //   url:"/customer"
          // },
          // {
          //   name:'客户管理',
          //   url:"/customer"
          // },
          // {
          //   name:'客户管理',
          //   url:"/customer"
          // },
          // {
          //   name:'客户管理',
          //   url:"/customer"
          // },
          // {
          //   name:'客户管理',
          //   url:"/customer"
          // },
        ],
        chineseWeekday:'',
        colors:["#E99D42","#65AB5F","#799136","#B383AB","#56AEED","#B35B5B","#6076C3","#BD6CBA","#B098D7"]
      };
    },
    computed: {
      ...mapGetters(["userInfo"]),
    },
    mounted(){
      this.getRouter()
      this.getWeek()
    },
    methods: {
      logout() {
        this.$confirm(this.$t("logoutTip"), this.$t("tip"), {
          confirmButtonText: this.$t("submitText"),
          cancelButtonText: this.$t("cancelText"),
          type: "warning"
        }).then(() => {
          this.$store.dispatch("LogOut").then(() => {
            resetRouter();
            if (this.website.oauth2.ssoMode) {
              window.location.href =
                this.website.oauth2.ssoBaseUrl +
                this.website.oauth2.ssoLogoutUrl +
                this.website.oauth2.redirectUri;
            } else {
              this.$router.push({path: "/login"});
            }
          });
        });
      },
      getWeek(){
        const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        const today = new Date();
        this.chineseWeekday = weekdays[today.getDay()];
      },
      getRouter(){
        getLazyList('',{isJinChao:1}).then(res =>{
          console.log('res------------',res.data.data)
          let tmp = res.data.data.filter(item => item.isJinChao == 1)
          console.log('tmp==============',tmp)
          if(tmp){
            this.routerArr = tmp
          }
          console.log('this.ro=============',this.routerArr)
        })
      },
      changePage(val){
        let arr = [
          {name:'工作台',url:'/wel',categoryId:val.id}
        ]
        this.$store.commit('SET_ROUTE_DATA',arr)
        this.$router.push(val.path)
      },
      pageToInfo(){
        let arr = [
          {name:'工作台',url:'/wel',}
        ]
        this.$store.commit('SET_ROUTE_DATA',arr)
        this.$router.push('/info')
      },
      handleChange(val) {
        window.console.log(val);
      }
    },
  };
</script>

<style scoped lang="scss">
  // .el-font-size {
  //   font-size: 14px;
  // }

  .container{
    width: 99%;
    min-height: 99%;
    background: rgb(255, 255, 255);
    margin: 0 auto;
    margin-top: 8px;
    // padding-top: 3.13vw !important;
    display: flex;
    /* flex-wrap: wrap; */
    flex-direction: column;
    align-items: center;
    // padding-bottom: 3.13vw !important;

    .top_box{
      width: 89%;
      height: 8.18vw;
      border: 1px solid #bbb;
      border-radius: 15px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 3.13vw;

      .left_box{
        height: 100%;
        display: flex;
        align-items: center;

        .img_box{
          cursor: pointer;
          margin-left: 10vw;
        }

        .name_box{
          margin-left: 2.4vw;

          .top_title{
            margin-bottom: 16px;
            font-size:1.67vw ;
            font-weight: bold;
            color: #4b5563d1;
          }

          .bottom_title{
            color: #4b5563d1;
            font-size: 1.35vw;
          }
        }
      }

      .right_box{
        width: 9.53vw;
        height: 2.97vw;
        margin-right: 4.22vw;
        background-color: rgba(164,173,179,1);
        font-size: 1.46vw;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 22px;
        color: #fff;
        cursor: pointer;
      }

      
    }

    .route_container{
      width: 89%;
      border: 1px solid #bbb;
      border-radius: 15px;
      margin: 0 auto;
      margin-top: 20px;

      .title_box{
        margin-top: 15px;
        margin-left:1.82vw;
        color: rgba(16,16,16,0.82);
        font-size: 1.67vw;
        font-weight: bold;
      }

      .router_box{
       width: 100%;
        display: flex;
        flex-wrap: wrap;

        .router_item{
          width: 10.42vw;
          height: 10.42vw;
          border-radius: 2.08vw;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 2.5vw;
          color: #fff;
          margin: 1.6vw 2.2vw;
          cursor: pointer;
        }
      }
    }

    

    
  }
</style>