FE_middlePlatform_server/src/components/Header.vue

<template>
  <div class="header flex-between">
    <div class="logo">
      <img class="cursor"
           @click="goHome"
           src="../assets/img/logo.png">
    </div>
    <el-radio-group v-if="Setting.isDev"
                    v-model="ip"
                    @change="ipChange">
      <el-radio :label="0">刘榕ip</el-radio>
      <el-radio :label="1">陈赓ip</el-radio>
    </el-radio-group>
    <div class="header-right">
      <div class="header-user-con">
        <div class="user"
             @click="toPerson">
          <el-avatar :size="40"
                     :src="$store.state.avatar"></el-avatar>
          <span class="user-avator">{{userName}}</span>
        </div>
        <el-divider class="ml20"
                    direction="vertical"></el-divider>
        <el-button type="text"
                   class="ml20"
                   @click="loginout">退出</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import Bus from '@/libs/bus'
import Setting from '@/setting'
export default {
  data () {
    return {
      Setting,
      userName: '',
      ip: localStorage.getItem('nakadaiIp') ? +localStorage.getItem('nakadaiIp') : 0,
    };
  },
  mounted () {
    this.getUserInfo()
  },
  methods: {
    toPerson () {
      if (this.$route.path.split('/').pop() !== 'person') {
        this.$router.push('/person')
      }
    },
    loginout () {
      localStorage.removeItem('ms_username');
      localStorage.removeItem('token');
      sessionStorage.clear()
      location.reload()
    },
    goHome () {
      this.$router.push('/customer')
    },


    // socket连接成功
    open () {
      console.log("socket连接成功");
    },
    // socket连接失败
    error () {
      console.log("连接错误");
    },
    // 接收消息
    getMessage (msg) {
      console.log("==websocket接收数据==");
      console.log(JSON.parse(msg.data));

      const { content } = JSON.parse(msg.data)
      // 1赛事、2创业、3考核、4模型。-号拼接携带id
      content == 1 && Bus.$emit('matchSocket')
      content == 4 && Bus.$emit('modelSocket')
    },
    // 关闭socket
    close () {
      console.log("socket已经关闭");
    },
    initSocket ({ id, account }) {
      // 实例化socket
      this.socket = new WebSocket(`wss://${Setting.isDev ? '192.168.31.51' : location.host}/nakadai/websocket/${id}/${account}`)
      // this.socket = new WebSocket(`ws://121.37.12.51:9100/nakadai/websocket/${id}/${account}`)
      // 监听socket连接
      this.socket.onopen = this.open;
      // 监听socket错误信息
      this.socket.onerror = this.error;
      // 监听socket消息
      this.socket.onmessage = this.getMessage;
    },
    // 心跳检测
    heartbeatDetection () {
      setInterval(async () => {
        await this.$get(this.api.heartbeatDetection)
      }, 58 * 1000)
    },


    getUserInfo () {
      this.$get(this.api.queryUserInfoDetails).then(({ result }) => {
        let userInfo = result.hrUserInfo
        if (userInfo.userAvatars) this.$store.commit('userAvatar', { avatar: userInfo.userAvatars })
        this.userName = userInfo.userName
        const { id } = result.userAccount
        id && this.$store.commit('SET_ACCOUNTID', id)
        this.$store.commit('SET_USERNAME', this.userName)
        this.initSocket(result.userAccount)
        Setting.isPro && this.heartbeatDetection()
      }).catch(err => { })
    },

    ipChange (val) {
      localStorage.setItem('nakadaiIp', val)
      location.reload()
    },
  },
};
</script>
<style lang="scss" scoped>
.header {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 60px;
    font-size: 16px;
    color: #333;
}
.header .logo {
    float: left;
    width: 170px;
    height: 40px;
    margin-left: 20px;
}
.header .logo img {
    width: 100%;
    height: 100%;
}
.header-right {
    float: right;
    padding-right: 50px;
}
.header-user-con {
    display: flex;
    height: 70px;
    align-items: center;
}
.header-user-con .user {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}
.user-avator {
    cursor: pointer;
    margin-left: 10px;
    font-size: 12px;
}
.ml20 {
    margin-left: 20px;
}
.user-avator img {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
/deep/.header-right .el-button--text {
    color: #333;
    span {
        font-size: 12px;
    }
}
.header-right .el-divider--vertical {
    width: 2px;
    height: 15px;
}
.header-right .el-divider {
    background-color: #333;
}
</style>