adi_cae_web/src/layout/index.vue

/*layout模板*/
<template>
  <div>
    <div  class="lbg_color1" :class="['header',fixedHeader?'fixed-header':'']"  >
          <router-link to="/home/myproject">
        <div class="logo">
        <el-image :src="logo" fit="cover" /> </div>
        </router-link> 
      <div
        v-if="
          $route.path !== '/login' &&
          $route.path !== '/register' &&
          $route.path !== '/forget' &&
          $route.path !== '/protocol'
        "
        class="nav"
      >
        <el-menu
          mode="horizontal"
          :unique-opened="true"
          text-color="#333"
          active-text-color="#333"
          background-color="background-color: rgba($color: #0158a8, $alpha: 0);"
          :default-active="activeMenu"
        >
         <div class="headericon">
            <ul>
              
              <li  class="text_color"><el-tooltip class="item" effect="dark" content="任务" placement="bottom"><i class="el-icon-s-fold"></i>  </el-tooltip> </li> 
              <li class="text_color"><el-tooltip class="item" effect="dark" content="团队" placement="bottom"><i class="el-icon-s-custom"></i>  </el-tooltip></li>
              <li class="text_color" @click="dialogsystem=true"><i class="el-icon-s-tools"></i></li>

              <li class="text_color">
                <span >  <i class="el-icon-question" style="padding:1px 0"></i>
                <i style="font-size:12px;padding:5px 0" class="el-icon-arrow-down"></i>
                </span>
                </li>
            </ul>
            </div>
    
          <el-menu-item index="/home/myproject" >
            <router-link to="/home/myproject" ><span class="text_color">控制台</span></router-link>
          </el-menu-item>
          <el-menu-item      background-color="background-color: rgba($color: #0158a8, $alpha: 0.1);"
            v-if="loginStatus"
            :class="currentMenu == 'user' ? 'itemOn' : ''"
          >
            <router-link to="/userLayout">
              <div class="user">
                <el-dropdown>
                  <div>
                    <span class="login text_color" :title="name">{{ name }}</span>
                    <i class="el-icon-arrow-down" />
                  </div>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="logout"
                      >退出登录</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </router-link>
          </el-menu-item>
          <el-menu-item v-else style=" background:none;">
            <p @click="toLogin" class="login text_color">登录/注册</p>
          </el-menu-item>
        </el-menu>
      </div>
    </div>

    <section class="app-main  lbg_color2">
      <transition name="fade-transform" mode="out-in">
        <router-view :key="key" />
      </transition>
    </section>

    <div class="lbg_color2"
      :class="[
        'footer',
        fixedHeader ? 'fixed-footer' : '',
        /^\/indexLayout([\/][\D]+)?$/.test($route.path)|| /^\/matchLayout([\/][\D]+)?$/.test($route.path)||/^\/topic([\/][\D]+)?$/.test($route.path)||
        /^\/detailbzs1([\/][\D]+)?$/.test($route.path)|| /^\/detailbzs2([\/][\D]+)?$/.test($route.path)|| /^\/detailbzs3([\/][\D]+)?$/.test($route.path)|| /^\/detailbzs4([\/][\D]+)?$/.test($route.path)
          ? 'footer-index'
          : /^\/login\/index$/.test($route.path)
          ? 'footer-login'
          : '',
      ]"
    >
      <a href="https://www.xichain.com.cn/xichain/" target="_blank"
        >Copyright ©2015-2018 西安前沿动力有限公司All Rights Reserved</a
      >
      <a href="http://www.beian.miit.gov.cn/" target="_blank"
        >版权所有：西安前沿动力软件开发有限责任公司 陕ICP备13000621号</a
      >

      <!-- <img class="police" src="../assets/img/police.png" />
      <a
        href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=50010302003067"
        target="_blank"
        >渝公网安备 50010302003067号</a
      > -->

     <!-- <span v-show="xglogo">服务热线：023-63410620</span>  -->
    </div>
     <el-dialog
  :visible.sync="dialogsystem"
  title="主题更换"
  width="480px"
  >
  <div>
   <button v-for="(item,index) in itemlist" :key='index'  @click="clicksel(index)">{{item.name}}</button>
    </div>
    <!-- <span :data-theme='theme'></span> -->
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogsystem = false">关闭</el-button>
  </span>
</el-dialog>
    <Login :loginShow="loginShow" @putLogin="getLogin" />
    <Register :registerShow="registerShow" @putRegister="getRegister" />
    <Forget :forgetShow="forgetShow" @putForget="getForget" />
  </div>
</template>

<script>
import { parseTime } from '@/utils/index'
import { request } from '@/utils/request'
import { resetRouter } from '@/router'
import { mapGetters } from 'vuex'
import { MenuItem } from './components'
// import countTo from 'vue-count-to'
// import logo from '@/assets/index/logo.png'
// import qylogo from '@/assets/index/qylogo.png'
// import count from '@/assets/index/count.png'
import logo from '@/assets/hcfd_images/adilog.png'
import Login from '@/components/Login'
import Register from '@/components/Register'
import Forget from '@/components/Forget'
export default {
  name: 'Layout',
  components: {
    MenuItem,
   // countTo,
    Login,
    Register,
    Forget,
  },
  data() {
    return {
      zhucenum:false,
       flag: false,
      logo:logo,
      yingyong:false,
      runProject: 0,
      totalProject: 0,
      user: 0,
      activeUser: 0,
      redirect: undefined,
    dialogsystem:false,
      loginShow: false,
      registerShow: false,
      forgetShow: false,
      currentMenu: '',
          itemlist:[
     {
       id:0,name:"黑色",
     },
       {
       id:1,name:"白色",
     }
     ],
     num:0,
    }
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true,
    },
  },
  mounted(){
 setTimeout(function(){
if(localStorage.getItem("num")==0){
        document.getElementById('theme').href="/static/black.css"
      }else{
         document.getElementById('theme').href="/static/white.css"
      }
 },100)
},
  created() {
   
  },
  // 父组件中返回要传给下级的数据
  provide() {
    return {
      toLogin: this.toLogin,
    }
  },
  computed: {
    fixedHeader() {
      return this.$store.getters.fixedHeader  
    },
      lesseeId() {
      return this.$store.getters.lesseeId  
    },
    ...mapGetters(['name', 'userType', 'loginStatus']),
    key() {
      return this.$route.path
    },
    routes() {
      return this.$router.options.routes // 导航栏是使用 router.options.routes来遍历生成
    },
    activeMenu() {
      const route = this.$route
      const { meta, path } = route
      let pathArr = path.split('/')
      if (pathArr.length == 3 && pathArr[1] == 'userLayout') {
        this.currentMenu = 'user'
      } else if (
        pathArr.length == 3 &&
        pathArr[1] == 'indexLayout' &&
        pathArr[2] == 'my-workbench'
      ) {
        this.currentMenu = pathArr[2]
      } else {
        this.currentMenu = ''
      }
      // 如果设置了路径，侧边栏将突出显示您设置的路径
      if (meta.activeMenu) {
        return meta.activeMenu
      }
      return path
    },
  },
  methods: {
    routerclik(){
      const path=this.$route.path
         let id= sessionStorage.getItem("id",id);
          let pretreatment= sessionStorage.getItem("pretreatment",pretreatment);
          let solver=  sessionStorage.getItem("pretreatment",solver);
             this.$router.replace({
                path: '/indexLayout/index',
              query: {id, pretreatment, solver },
              })
      //  if(path=="/indexLayout/design"){
          
      //  }else{
      //      this.$router.replace({
      //           path: '/indexLayout',
      //         })
      //  }
    },
    toLogin() {
      this.loginShow = true
      console.log(this.loginShow);
    },
    getLogin(data) {
      this.loginShow = false
      if (data) {
        if (data.type == 'register') {
          this.registerShow = true
        } else if (data.type == 'forget') {
          this.forgetShow = true
        }
      }
    },
    getRegister(data) {
      this.registerShow = false
      if (data && data.type == 'login') {
        this.loginShow = true
      }
    },
    getForget(data) {
      this.forgetShow = false
      if (data && data.type == 'login') {
        this.loginShow = true
      }
    },

    quit() {
      this.$store.dispatch('user/changeState', {
        key: 'token',
        value: '',
      })
      this.$store.dispatch('user/changeState', {
        key: 'name',
        value: '',
      })
      this.$store.dispatch('user/changeState', {
        key: 'userId',
        value: '',
      })
        this.$store.dispatch('user/changeState', {
        key: 'userRole',
        value: '',
      })
      this.$store.dispatch('user/changeState', {
        key: 'cfdUrl',
        value: '',
      })
      this.$store.dispatch('user/changeState', {
        key: 'loginStatus',
        value: false,
      })
      resetRouter()
      this.$message.success('退出成功!')
      setTimeout(() => {
        // this.$router.replace(`/login?redirect=${this.$route.fullPath}`)
        this.$router.replace(`/indexLayout/index`)
      }, 1000)
    },
    logout() {
      this.$confirm('此操作将退出登录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        center: true,
        type: 'warning',
      })
        .then(() => {
          request({ transCode: 'A00004' })
            .then(() => {
              this.quit()
            })
            .catch((err) => {
              this.quit()
            })
        })
        .catch(() => {
          this.$message.info('已取消')
        })
    },
  
       //  主题替换
  clicksel(index){
      if(index==0){
        this.num=index;
      localStorage.setItem("num",this.num);
        document.getElementById('theme').href="/static/black.css"
      }else if(index==1){
           console.log(222)
         this.num=1;
            localStorage.setItem("num",this.num);
         document.getElementById('theme').href="/static/white.css"
      }else{

      }
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
@import '@/styles/mixin.scss';
// @import '@/styles/transition.scss';

.fixed {
  &-header {
    // @include position(fixed, 0, auto, 0, 0, 9);
    @include w_h();
  }
  &-footer {
    // @include position(fixed, auto, 0, 0, 0, 9);
    @include w_h();
  }
}
.fixed-footer{
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9;
    width: 100%;
    height: auto;
}
.show{
     background: $color_f;

}
.hidden{

}
.header {
 padding: 0 20px;
  @include flex();
  @include w_h(100%, 40px);
  min-width: 1000px;
//background: $color_f;
  box-shadow: 0px 7px 7px 0px rgba(0, 0, 0, 0.04);
  .logo {
    @include w_h(100px);
    &:hover {
      cursor: pointer;
    }
  }

  .count {
    @include flex(flex-start);
    @include w_h(auto, 35px);
    padding: 0 $pad;
    font-size: 12px;
    color: $color_3;
    .item {
      margin: 0 20px;
    }
    .icon {
      @include w_h(14px);
      margin-right: 3px;
      vertical-align: bottom;
    }
    span {
      span {
        color: $color_on;
      }
    }
  }

  .nav {
    @include flex();
    height: 100%;
    font-size: 12px;
    .el-menu {
      height: 100%;
      border: none;
      background:none;
      color: #0470cc;
      .itemOn {
        // color: $color_on !important;
        // border-bottom: 2px solid $color_on !important;
         color: rgba($color: #0158a8, $alpha: 1)!important;
          border-bottom: 2px solid  #0158a8!important;
      }
    }
    .user {
      color: inherit;
      span {
        display: inline-block;
        max-width: 100px;
        font-size: 14px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
       &:hover span {
        color: #f66420;
      }
      .el-icon-arrow-down {
        font-size: 12px;
      }
    }
  }
}
.app-main {
    width: 100%;
    height: calc(100vh - 75px);
}
.footer {
  @include w_h(100%, 35px);
  line-height: 35px;
  font-size: 12px;
  text-align: center;
  color: #747474;
  .police {
    vertical-align: sub;
  }
  a {
    padding-right: 10px;
  }
  a:hover {
    color: $color_9;
  }
  &-login {
    background: $color_f;
  }
  &-index {
    background: #2b2828;
  }
}
</style>

<style lang="scss">
@import '@/styles/variables.scss';
.el-image__inner--center {
  left: 0 !important;
  transform: translate(0) !important;
}
.nav {
  .el-dropdown {
    color: inherit;
  }
  .el-menu-item,
  .el-submenu__title,
  .el-menu--horizontal > .el-menu-item {
    height: 40px;
    line-height: 40px;
    color: $color_3;
    border: none;
    padding: 0 5px;
    margin: 0 15px;
    background-color: rgba($color: #0158a8, $alpha: 0)!important;;
    a {
      display: block;
    }
    &.is-active {
      border: none;
    }
  }
}
.dasai{
  
  .yingyong{
    font-size: 14px;
    color: #303133;
  }
     &:hover .yingyong{
        color: #f66420 !important;
      }
  
}
.headericon{
  ul{
    display: flex;
    li{
      flex: 1;
     padding: 5px 5px;
      font-size: 20px;
      cursor: pointer;
      &:hover{
        background-color: rgba($color: #fff, $alpha: 0.3) !important;
      }
      span{
        display: flex;
      }
    }
  }
}
.title{
  font-size: 24px;
}
.login{
  padding:0;
  margin: 0;
}
</style>
<style>
p{
  padding: 0;
  margin: 0;
}
</style>