JNBusiness/ruoyi-ui/src/layout/components/NavbarNotice.vue

<template>
  <!--（1通知 2公告）-->
  <el-dropdown>
      <span class="el-dropdown-link">
        <svg-icon icon-class="message" slot="reference" />
        <el-badge :value="noteTotal"></el-badge>
      </span>

    <el-dropdown-menu slot="dropdown">
        <el-tabs v-model="activeName" @tab-click="handleClick" style="width:100%">
          <el-tab-pane label="系统通知" name="first">
            <el-dropdown-item v-for="(item,index) in noticeData" :key="index" >
              <el-link :underline="false" @click="clickNote(item)" :style="index==0?'': 'margin-top :15px'">{{item.noticeTitle}}</el-link>
            </el-dropdown-item>
            <el-link :underline="false" style="margin-top :15px" v-if="noticeData.length>5" type="primary">更多消息</el-link>
          </el-tab-pane>
          <el-tab-pane label="系统公告" name="second">
            <el-dropdown-item v-for="(item,index) in sysLog" :key="index">
              <el-link :underline="false" @click="clickNote(item)" :style="index==0?'': 'margin-top :15px'">{{item.noticeTitle}}</el-link>
            </el-dropdown-item>
            <el-link v-if="sysLog.length>5" type="primary">更多消息</el-link>
          </el-tab-pane>
        </el-tabs>
    </el-dropdown-menu>
    <!--<mode-dialog :visible="noteVisible" :noteType="noteType" :noticeId="noticeId" @close="closeMode"></mode-dialog>-->
  </el-dropdown>
</template>
<script>
  import { navbarNoticelist } from '@/api/system/notice'
/*
  import ModeDialog from '@/components/ModeDialog'
*/

  export default {
    name: 'NavbarNotice',
/*
    components: { ModeDialog },
*/
    data() {
      return {
        activeName: 'first',
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 5,
          readFlag: '0'
        },
        noteTotal: '',
        // 公告
        sysLog: [],
        // 通知
        noticeData: [],
        websock: null,
        lockReconnect: false,
        heartCheck: null,
        noteVisible: false,
        noteType: 0,
        noticeId: 0
      }
    },
    mounted() {
      // 初始化WebSocket
      this.initWebSocket()
    },
    destroyed: function() { // 离开页面生命周期函数
      this.websocketOnclose()
    },
    methods: {
      getList() {
        this.noticeData = []
        this.sysLog = []
        navbarNoticelist(this.queryParams).then(res => {
          console.log(res[1])
          this.noticeData = res[1]?res[1]:[];
          this.sysLog = res[2]?res[2]:[];

          this.noteTotal = this.noticeData.length+this.sysLog.length;
        })
      },
      handleClick(tab, event) {
      },
      clickNote(data) {
        this.noteVisible = true
        this.noticeId = data.noticeId
        this.noteType = data.noticeType == '1' ? 0 : 1
      },
      closeMode() {
        this.getList()
        this.noteVisible = false
      },
      initWebSocket() {
        var userId = this.$store.getters.userId
        // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
        // VUE_APP_BASE_API_WS = 'ws://localhost:9696' 地址
        var url = 'ws://localhost:3334/websocket/message';
        this.websock = new WebSocket(url)
        this.websock.onopen = this.websocketOnopen
        this.websock.onerror = this.websocketOnerror
        this.websock.onmessage = this.websocketOnmessage
        this.websock.onclose = this.websocketOnclose
      },
      websocketOnopen: function() {
        console.log('WebSocket连接成功')
      },
      websocketOnerror: function(e) {
        console.log('WebSocket连接发生错误，第%s次', this.wsConnectErrorTime)
        this.wsConnectErrorTime = this.wsConnectErrorTime + 1
        if (this.wsConnectErrorTime > 5) {
          console.log('WebSocket连接错误超过5次，就不再重新连了！')
          this.lockReconnect = true
          return
        }
        this.reconnect()
      },
      websocketOnmessage: function(e) {
        console.log('-----接收消息-------', e.data)
        this.getList()
      },
      websocketOnclose: function(e) {
        console.log('connection closed (' + e + ')')
        if (e) {
          console.log('connection closed (' + e.code + ')')
        }
        this.reconnect()
      },
      reconnect() {
        var that = this
        if (that.lockReconnect) return
        that.lockReconnect = true
        //没连接上会一直重连，设置延迟避免请求过多
        setTimeout(function() {
          console.info('尝试重连...')
          that.initWebSocket()
          that.lockReconnect = false
        }, 2000)
      }
    }

  }
</script>

<style lang="scss" scoped>
  .text-overflow {
    width: 160px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 2px 0;
  }

  ::v-deep .el-badge {
    top: -7px;
  }

  ::v-deep .el-badge__content.is-dot {
    position: relative;
    width: 11px;
    height: 11px;
  }

  .el-tab-pane{
    width:300px
  }
  .el-dropdown-menu{
    width:250px
  }
  ::v-deep .el-dropdown-menu {
    top: 28px;
  }

  ::v-deep .el-tabs {
    padding: 12px;
    width: 188px;
  }
</style>