antissoft / NetworkInformation

<template>
  <header>
    <div class="slogin">
      举旗帜聚民心、防风险保安全、强治理惠民生、 增动能促发展、谋合作图共赢
    </div>
    <div class="title">内部系统</div>
    <div class="user">
      <div class="head">
        <el-image :src="avatar" fit="cover"></el-image>
      </div>
      <el-dropdown @command="handleCommand">
        <div class="info">
          {{ userInfo.userName }}（{{ userInfo.organizeName }}）
        </div>
        <el-dropdown-menu slot="dropdown" router>
          <el-dropdown-item>修改信息</el-dropdown-item>
          <passwordForm>
            <el-dropdown-item>修改密码</el-dropdown-item>
          </passwordForm>
          <el-dropdown-item command="logout">退出系统</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </header>
</template>

<script>
import ReconnectingWebSocket from 'reconnecting-websocket'
export default {
  name: "Header",
  data() {
    return {
      userInfo: this.$store.state.user.userInfo,
      avatar: this.$store.state.user.avatar,
    };
  },
  mounted() {},
  methods: {
    initWebSocket() {
      this.socket = this.$store.getters.socket || null
      if ('WebSocket' in window) {
        if (!this.socket) {
          this.socket = new ReconnectingWebSocket(this.define.WebSocketUrl)
          this.$store.commit('SET_SOCKET', this.socket)
        }
        //添加事件监听
        let socket = this.socket
        socket.onopen = () => {
          var onConnection = {
            "method": "OnConnection", "token": this.$store.getters.token, "mobileDevice": false
          }
          socket.send(JSON.stringify(onConnection))
        }
        socket.onmessage = (event) => {
          let data = JSON.parse(event.data)
          if (data.method == 'initMessage') {
            this.messageCount = data.unreadMessageCount + data.unreadNoticeCount
            this.isTwinkle = !!data.unreadNums.length
          }
          //用户在线
          if (data.method == 'Online') {
          }
          //用户离线
          if (data.method == 'Offline') {
          }
          //消息推送（消息公告用的）
          if (data.method == 'messagePush') {
            this.messageCount += data.unreadNoticeCount
            if (this.$refs.MessageList.visible) this.$refs.MessageList.init()
          }
          //用户过期
          if (data.method == 'logout') {
            this.$message({
              message: data.msg || '登录过期,请重新登录',
              type: 'error',
              duration: 1000,
              onClose: () => {
                this.$store.dispatch('user/resetToken').then(() => {
                  location.reload()
                })
              }
            })
          }
          //接收对方发送的消息
          if (data.method == 'receiveMessage') {
            //判断是否打开窗口
            if (this.$refs.UserList && this.$refs.UserList.$refs.NCCIm && this.$refs.UserList.$refs.NCCIm.visible) {
              if (this.$refs.UserList.$refs.NCCIm.info.id === data.formUserId) {
                let messIitem = {
                  userId: data.formUserId,
                  messageType: data.messageType,
                  message: data.formMessage,
                  dateTime: this.ncc.toDate(data.dateTime)
                }
                this.$refs.UserList.$refs.NCCIm.addItem(messIitem)
                //更新已读
                let updateReadMessage = {
                  method: "UpdateReadMessage",
                  formUserId: data.formUserId,
                  token: this.$store.getters.token
                }
                socket.send(JSON.stringify(updateReadMessage))
                this.$refs.UserList.updateReply(data)
              } else {
                this.$refs.UserList.updateReply(data, 1)
                this.isTwinkle = true
              }
            } else {
              this.$refs.UserList.updateReply(data, 1)
              this.isTwinkle = true
            }
          }
          //显示自己发送的消息
          if (data.method == 'sendMessage') {
            if (this.$refs.UserList.$refs.NCCIm.info.id !== data.toUserId) return
            //添加到客户端
            let messIitem = {
              userId: data.UserId,
              messageType: data.messageType,
              message: data.toMessage,
              dateTime: this.ncc.toDate(data.dateTime)
            }
            this.$refs.UserList.updateLatestMessage(data)
            this.$refs.UserList.$refs.NCCIm.addItem(messIitem)
          }
          //消息列表
          if (data.method == 'messageList') {
            this.$refs.UserList.$refs.NCCIm.getList(data)
          }
        }
      }
    },
    async logout() {
      await this.$store.dispatch("LogOut");
      this.$router.push({ path: "/login" });
    },
    handleCommand(command) {
      switch (command) {
        case "logout":
          this.$confirm("确定退出登录?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.logout();
            })
            .catch(() => {});

          break;

        default:
          break;
      }
    },
  },
};
</script>
<style scoped lang="scss">
header {
  width: 100%;
  color: rgba(255, 255, 255, 1);
  position: relative;
  .slogin {
    position: absolute;
    left: 28px;
    top: 21px;
    width: 600px;
    text-align: right;
    font-size: 28px;
    font-family: Roboto;
    font-weight: 400;
    line-height: 39px;
  }
  .title {
    text-align: center;
    width: 100%;
    padding-top: 5px;
    font-size: 40px;
    font-weight: 700;
    line-height: 56px;
  }
  .user {
    position: absolute;
    right: 33px;
    top: 25px;
    display: flex;
    align-items: center;
    flex-direction: row;
    .head {
      width: 50px;
      height: 50px;
      margin-right: 13px;
      .el-image {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .info {
      color: #fff;
      cursor: pointer;
    }
  }
}
</style>