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" style="margin-left:30px;color:black">
              <p><span>专题库名称：</span>{{ projectName }}</p>
            </div>
          </div>
          <div class="header-right">
            <user-bar/>
          </div>
        </div>
      </el-header>
      <el-main style="padding:0;padding-top:0px;overflow:auto;background:white" >
        <!-- <el-header style="height:30px;color:brown;">
            <marquee behavior="scroll" direction="left" scrollamount="5" scrolldelay="100" hspace="10" vspace="10" align="middle" face="" color="white" size="">{{ text }}</marquee>
          </el-header> -->
        <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>
  </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";
export default {
  components: {
    UserBar,
    contextMenu
  },
  mixins: [webSocket,guide],
  data() {
    return {
      showProjectName:false,
      projectName:'',
      id: this.$route.query.id,
      key: this.$route.query.key,
      button: [],
      show: false,
      btnLoading: false,
      text:''
    }
  },
  watch: {
    $route() {
      this.button = this.$route.meta.button || []
      this.showProjectName = this.$route.meta.showProjectName
      this.openGuide(this.$route.meta.title)
    },
    showProjectName(val){
      this.projectName = this.$s.getSession('projectName')
    }
  },
  computed: {
    ...mapGetters(['projectId', 'userinfo','webSocket']),
  },
  created(){
    this.getPermissionList()
  },
  async mounted() {
    this.$store.commit('SET_PREFIX', '/')
    this.getUserInfo()
    this.getRouter()
    this.DictMessage()
    await this.getPermissions() 
    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.openGuide(this.$route.meta.title)
  },
  methods: {
    
    //获取专题库权限
    async getPermissions() {
      const response = await this.$api.getPermissions()
      this.$store.commit('SET_PERMISSIONS', response.data)
    },
    //获取字典项
    DictMessage() {
      this.$api.DictMessage().then(response => {
        // console.log("response", response);
        this.$store.commit("SET_DictMessage",response.data)
      })
    },
    //获取路由信息
    getRouter(){
      this.button = this.$route.meta.button || []
      this.showProjectName = this.$route.meta.showProjectName
    },
    //点击图标
    handleClick(){
      this.$router.push({
        path: '/home'
      })
    },
    //修改权限
  changePermission(){
    this.webSocket.onmessage = (e) => {
      if(JSON.parse(e.data).code=='903' ){
        this.getPermissionList()
      }
    }
  },
  //获取权限
  getPermissionList(){
    var code = "6a8d3f4d1d5f11eda41c00163e2f0200;5051395c24e311eda41c00163e2f0200;a97c468b924111ed905500163e2f0200"
   this.$api.getPermissionList({code:code}).then(response=>{
        this.$store.commit('SET_ADMIN_PERMISSION', response.data)
      }).catch(error=>{
        this.$store.commit('SET_ADMIN_PERMISSION', [])
      })
    },
    
//获取个人信息
    getUserInfo() {
      this.$api.getUserInfo().then(response => {
        localStorage.tenant = response.data.tenantId
        this.text = `欢迎${response.data.name}登录本系统`
        this.$store.commit('SET_USERINFO', response.data)
        this.connectWebSocket(response.data.id)
      })
    },
  }
}
</script>
<style lang="scss">
  .tenant .el-input__inner{
    height: 32px;
    line-height: 32px;
  }
  .role .el-icon-close{
		display: none;
	}
</style>
<style lang="scss">
#work-platform {
  width: 100%;
  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;
      }
    }
  }

  .header-left {
    display: flex;
    align-items: center;
    padding-left: 20px;
  }

  .header-right {
    display: flex;
    align-items: center;
  }

  .wrapper {
    width: 100%;
    height: calc(100%);
    background: white;
    #view {
      height: calc(100% - 0px)
    }
  }
}
</style>
<style lang="scss">
.introjs-helperLayer{
    box-shadow: rgba(33, 33, 33, 0.8) 0px 0px 1px 0px, rgba(33, 33, 33, 0.5) 0px 0px 0px 5000px!important;
    border: 3px dashed #409eff;
}
.new-tips{
    color: #409eff;
    line-height: 80px;
    cursor: pointer;
}
.introjs-tooltip-title{
    font-size: 16px;
    width: 80%;
    padding-top: 10px;
}
.warper {
  width: 200px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px solid saddlebrown;
}
/* 重置引导组件样式(类似element-ui个人使用) */
.intro-tooltip {
  color: #ffff;
  background: #2c3e50;
}
/* 引导提示框的位置 */
.introjs-bottom-left-aligned {
  left: 45% !important;
}
.introjs-right,
.introjs-left {
  top: 30%;
}
.intro-highlight {
  background: rgba(255,255,255,0.5);
}
.introjs-arrow.left {
  border-right-color: #2c3e50;
}
.introjs-arrow.top {
  border-bottom-color: #2c3e50;
}
.introjs-arrow.right {
  border-left-color: #2c3e50;
}
.introjs-arrow.bottom {
  border-top-color: #2c3e50;
}
/* 提示框头部区域 */
.introjs-tooltip-header {
  padding-right: 0 !important;
  padding-top: 0 !important;
}
.introjs-skipbutton {
  color: #409eff !important;
  font-size: 14px !important;
  font-weight: normal !important;
//   padding: 8px 10px !important ;
}
.introjs-tooltipbuttons {
  border: none !important;
}
.introjs-tooltiptext {
  font-size: 14px !important;
  padding: 15px !important;
}
/* 提示框按钮 */
.introjs-tooltipbuttons {
  display: flex;
  align-items: center;
  justify-content: center;
}
.introjs-button {
  width: 50px !important;
  text-align: center;
  padding: 4px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: 3px !important;
  border: none !important;
}
.introjs-button:last-child {
  margin-left: 10px;
}
.introjs-prevbutton {
  color: #606266 !important;
  background: #fff !important;
  border: 1px solid #dcdfe6 !important;
}
.introjs-nextbutton {
  color: #fff !important;
  background-color: #409eff !important;
  border-color: #409eff !important;
}
.introjs-disabled {
  color: #9e9e9e !important;
  border-color: #bdbdbd !important;
  background-color: #f4f4f4 !important;
}
</style>