xiaoshi_system/src/views/layout/index.vue

<template>
  <div id="work-platform">
    <el-container>
      <el-header> 
         <div class="header">
          <div class="header-left">
            <div class="logo-bar" @click="handleClick">
              <img src="@/assets/logo-3.png" class="logo">
            </div>
            <!-- <div v-if="showProjectName" class="projectName">
              <p><span>专利数据库名称：</span>{{ projectName }}</p>
            </div> -->
            <div class="projectName">
              <p>{{ projectName }}</p>
            </div>
          </div>
          <div class="header-right">
            <user-bar/>
          </div>
        </div>
      </el-header>
      <el-main class="main">
        <section class="wrapper">
          <keep-alive>
            <router-view id="view" v-if="$route.meta.keepAlive"></router-view>
          </keep-alive>
          <router-view id="view" v-if="!$route.meta.keepAlive"></router-view>
          <contextMenu></contextMenu>
        </section>
      </el-main>
    </el-container>
    <help></help>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import UserBar from "./components/UserBar";
import { webSocket } from "./mixins";
import { guide } from "./components/guide";
import contextMenu from "./components/contextMenu.vue";

import help from "./components/help.vue";
export default {
  components: {
    UserBar,
    contextMenu,
    help
  },
  mixins: [webSocket,guide],
  data() {
    return {
      showProjectName:false,
      projectName:'',
      id: this.$route.query.id,
      key: this.$route.query.key,
      button: [],
      show: false,
      btnLoading: false,
    }
  },
  watch: {
    $route() {
      this.getProjectName()
      this.button = this.$route.meta.button || []
      this.guide()
    },

  },
  computed: {
    ...mapGetters(['projectId', 'userinfo','webSocket']),
  },
  created(){
   
    this.connectWebSocket(this.userinfo.id)
  },
  async mounted() {
    this.getProjectName()
    this.$store.commit('SET_PREFIX', '/')
    this.getRouter()
    if (this.id) {
      this.$store.commit('SET_PROJECT_ID', parseInt(this.id))
    }
    if (this.key) {
      this.$store.commit('SET_PATENT_KEY', this.key)
      await this.$store.dispatch('getCustomField', this.projectId)
      await this.$store.dispatch('getSystemField', this.projectId)
    }
    this.guide()
  },
  methods: {
    getProjectName(){
      var params =  this.$route.query
      if(params.projectName && params.projectType){
        var obj = {
          1:'专题库',
          2:'报告',
          3:'产品',
          // 4:'标注库'
        }
        if(obj[params.projectType]){
          this.projectName = obj[params.projectType] + '名称：' + params.projectName
        }
      }else{
        this.projectName = ''
      }
      
    },
    guide(){
      if(this.$route.meta.sign == 'home'){
        this.openGuide(this.$route.meta.sign)
      }
    },

    //获取路由信息
    getRouter(){
      this.button = this.$route.meta.button || []
      this.showProjectName = this.$route.meta.showProjectName
    },
    //点击图标
    handleClick(){
      this.$router.push({
        path: '/home'
      })
    },
 
  },

  
}
</script>
<style lang="scss">
  .tenant .el-input__inner{
    height: 32px;
    line-height: 32px;
  }
  .role .el-icon-close{
		display: none;
	}
</style>
<style lang="scss" scoped>
#work-platform {
  width: 100%;
  min-width: 1200px;
  height: 100%;

  .header {
    width: 100%;
    height: 60px;
    background: #fff;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
    color: #fff;
    display: flex;
    justify-content: space-between;
    border-bottom: 10px solid #e6e6e6;
    .logo-bar {
      font-size: 20px;
      font-weight: bold;
      display: flex;
      align-items: center;
      cursor: pointer;
      .logo {
        margin-right: 10px;
        // width: 140px;
        height: 40px;
      }
    }
  }
.projectName{
  margin-left:30px;
  color:black
}
  .header-left {
    display: flex;
    align-items: center;
    padding-left: 20px;
  }

  .header-right {
    display: flex;
    align-items: center;
  }
.main{
  padding:0 !important;
  padding-top:0px !important;
  overflow:auto !important;
  background:white !important;
}
  .wrapper {
    width: 100%;
    height: 100%;
    background: white;
    #view {
      height: 100%
    }
  }
}
</style>