cfd-adi-web/src/layout/index.vue

/*layout模板*/
<template>
  <div>
    <div :class="['header', fixedHeader ? 'fixed-header' : '']">
      <div class="logo">
        <router-link to="/indexLayout/workbench"
          ><el-image v-show="xglogo" :src="qylogo" fit="cover"
        />
        </router-link>
         <el-image  v-show="qylogos"   :src="qylogo" fit="cover"
       @click="routerclik()" />
      </div>

      <div class="count">
        <div class="item">
          <el-image class="icon" :src="count" fit="cover" alt="icon" />
          <span
            >注册用户数<span
              ><countTo :start-val="0" :end-val="user" :duration="3000" /></span
            >个，当前活跃用户<span
              ><countTo
                :start-val="0"
                :end-val="activeUser"
                :duration="3000" /></span
            >个</span
          >
        </div>
        <div class="item">
          <el-image class="icon" :src="count" fit="cover" alt="icon" />
          <span
            >总项目数<span
              ><countTo
                :start-val="0"
                :end-val="totalProject"
                :duration="3000" /></span
            >个，运行项目数<span
              ><countTo
                :start-val="0"
                :end-val="runProject"
                :duration="3000" /></span
            >个</span
          >
        </div>
      </div>

      <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="#fff"
          :default-active="activeMenu"
        >
          <!-- <menu-item
            v-for="route in routes"
            :key="route.path"
            :item="route"
            :base-path="route.path"
          />-->
          <!-- <el-menu-item
            v-if="$route.path.indexOf('/indexLayout') == -1"
            index="/indexLayout"
          >
            <router-link to="/indexLayout">首页</router-link>
          </el-menu-item> -->
               <!-- <router-link  to="/matchLayout" v-show="yingyong"  class="yingyong">应用大赛</router-link> -->
          <el-menu-item
            v-if="loginStatus && userType != 1"
            :class="currentMenu == 'my-workbench' ? 'itemOn' : ''"
          >
            <!-- <router-link to="/indexLayout/my-workbench" v-show="yingyong" >我的工作台</router-link> -->
          </el-menu-item>
          <el-menu-item
            v-if="loginStatus"
            :class="currentMenu == 'user' ? 'itemOn' : ''"
          >
            <router-link to="/userLayout">
              <div class="user">
                <el-dropdown>
                  <div>
                    <span :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>
            <p @click="toLogin">登录/注册</p>
          </el-menu-item>
        </el-menu>
      </div>
    </div>

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

    <div
      :class="[
        'footer',
        fixedHeader ? 'fixed-footer' : '',
        /^\/indexLayout([\/][\D]+)?$/.test($route.path)|| /^\/matchLayout([\/][\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>

    <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 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 {
      logo:logo,
      qylogo:qylogo,
      yingyong:false,
      xglogo: false,
      qylogos:false,
      count: count,
      runProject: 0,
      totalProject: 0,
      user: 0,
      activeUser: 0,
      redirect: undefined,

      loginShow: false,
      registerShow: false,
      forgetShow: false,
      currentMenu: '',
    }
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect
        this.getCount() // 获取统计信息
         //判断是否是前沿的logo;
        if(route.path=="/indexLayout/workbench"){
       
             this.qylogos=true;
          this.xglogo=false;
          this.yingyong=false;
        }else{
           this.xglogo=true;
           this.qylogos=false;
             this.yingyong=true;
        }
      },
      immediate: true,
    },
  },
  mounted(){
 
  },
  created() {
    
   
      // if(path.indexOf('workbench')>0 || path.indexOf('design')>0 ){
      //   console.log(1111)
      //  this.xglogo=false;
      // this.qylogos=true;
      // } else{
      //    console.log(222)
      //   this.xglogo=true;
      //   this.qylogos=false;
      // }

  
    // this.getCount() // 获取统计信息
    // console.log('1586966400 ->' + parseTime('1586966400'))
    // console.log('1586966400000 ->' + parseTime('1586966400000'))
    // console.log('2020-12-14 ->' + parseTime('2020-12-14'))
    // console.log('2020-12-14 +0800 ->' + parseTime('2020-12-14 +0800'))
    // console.log('2020-12-14 -0800 ->' + parseTime('2020-12-14 -0800'))
    // console.log('2020-12-14 13:14:23 ->' + parseTime('2020-12-14 13:14:23'))
    // console.log(
    //   '2020-12-14 13:14:23 +0800 ->' + parseTime('2020-12-14 13:14:23 +0800')
    // )
    // console.log(
    //   '2020-12-14 13:14:23 -0800 ->' + parseTime('2020-12-14 13:14:23 -0800')
    // )
    // console.log('2020/12/14 ->' + parseTime('2020/12/14'))
    // console.log('2020/12/14 +0800 ->' + parseTime('2020/12/14 +0800'))
    // console.log('2020/12/14 -0800 ->' + parseTime('2020/12/14 -0800'))
    // console.log('2020/12/14 13:14:23 ->' + parseTime('2020/12/14 13:14:23'))
    // console.log(
    //   '2020/12/14 13:14:23 +0800 ->' + parseTime('2020/12/14 13:14:23 +0800')
    // )
    // console.log(
    //   '2020/12/14 13:14:23 -0800 ->' + parseTime('2020/12/14 13:14:23 -0800')
    // )
  },
  // 父组件中返回要传给下级的数据
  provide() {
    return {
      toLogin: this.toLogin,
      getCount: this.getCount,
    }
  },
  computed: {
    fixedHeader() {
      return this.$store.getters.fixedHeader
    },
    ...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/workbench',
              query: {id, pretreatment, solver },
              })
      //  if(path=="/indexLayout/design"){
          
      //  }else{
      //      this.$router.replace({
      //           path: '/indexLayout',
      //         })
      //  }
    },
    toLogin() {
      this.loginShow = true
    },
    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/workbench`)
      }, 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('已取消')
        })
    },
    getCount() {
      this.runProject = 0
      this.totalProject = 0
      this.user = 0
      this.activeUser = 0
      request({ transCode: 'C00005' })
        .then((res) => {
          this.runProject = parseInt(res.runProject)
          this.totalProject = parseInt(res.totalProject)
          this.user = parseInt(res.user)
          this.activeUser = parseInt(res.activeUser)
        })
        .catch((err) => {})
    },
  },
}
</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();
  }
}
.yingyong{
  font-size: 14px;
  color: #303133;
   &:hover {
      cursor: pointer;
    }
}
.header {
  padding: 0 $pad;
  @include flex();
  @include w_h(100%, 50px);
  min-width: 1000px;
  background: $color_f;
  box-shadow: 0px 1px 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: $color_f;
      color: #0470cc;
      .itemOn {
        color: $color_on !important;
        border-bottom: 2px solid $color_on !important;
      }
    }
    .user {
      color: inherit;
      span {
        display: inline-block;
        max-width: 100px;
        font-size: 14px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .el-icon-arrow-down {
        font-size: 12px;
      }
    }
  }
}

.app-main {
  padding: 0;
  width: 100%;
  // height: calc(100vh - 85px);
  // min-height: 580px;
}
// .fixed-header + .app-main {
//   // padding: 40px 0 0;
// }

.footer {
  @include w_h(100%, 35px);
  line-height: 35px;
  font-size: 12px;
  text-align: center;
  color: #747474;
  background: $color_f2;
  .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;
    a {
      display: block;
    }
    &.is-active {
      border: none;
    }
  }
}
</style>