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" v-if="noteTotal>0"></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-tab-pane label="业务通知" name="third">
            <el-dropdown-item v-for="(item,index) in businessData" :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-tabs>
    </el-dropdown-menu>
    <el-dialog :title="noteTitle" :visible.sync="noteVisible" width="780px" append-to-body>
      <el-form ref="form" :model="form" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="标题" prop="noticeTitle">
              <el-input v-model="form.noticeTitle" :disabled="true"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="类型" prop="noticeType">
              <el-select v-model="form.noticeType" :disabled="true">
                <el-option
                  v-for="dict in dict.type.sys_notice_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="内容">
              <editor v-model="form.noticeContent" :min-height="192"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </el-dropdown>
</template>
<script>
  import { navbarNoticelist } from '@/api/system/notice';
  import { getNavbarNotice} from "@/api/system/notice";

  /*
    import ModeDialog from '@/components/ModeDialog'
  */
  import { Notification } from 'element-ui';

  export default {
    name: 'NavbarNotice',
    dicts: ['sys_notice_type'],
    data() {
      return {
        activeName: 'first',
        noteTotal: '',
        // 公告
        sysLog: [],
        // 通知
        noticeData: [],
        // 业务消息
        businessData: [],
        websock: null,
        lockReconnect: false,

        //弹窗设置
        noteTitle: '',
        noteVisible: false,
        // 表单参数
        form: {},
      }
    },
    mounted() {
      // 初始化WebSocket
      this.initWebSocket();
    },
    created(){
      this.getList();
    },
    destroyed: function() { // 离开页面生命周期函数
      this.websocketOnclose();
    },
    methods: {
      getList() {
        this.noticeData = [];
        this.sysLog = [];
        navbarNoticelist(this.queryParams).then(res => {
          var noticeData = res[1]?res[1]:[];
          this.noticeData = noticeData.slice(0,5);

          var sysLog = res[2]?res[2]:[];
          this.sysLog = sysLog.slice(0,5);

          var businessData = res[3]?res[3]:[];
          this.businessData = businessData.slice(0,5);

          this.noteTotal = this.noticeData.length+this.sysLog.length+this.businessData.length;
        })
      },
      handleClick(tab, event) {
      },
      clickNote(data) {
        getNavbarNotice(data.noticeId).then(response => {
          this.form = response.data;
          this.noteTitle = "消息详情"
          this.noteVisible = true
        });
      },
      initWebSocket() {
        var userId = this.$store.state.user.id;
        // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
        // 当前浏览器Location对象
        const nowLocation = window.location;
        // 协议 => http、https
        const protocol = nowLocation.protocol;
        // hostName => ip
        const hostName = nowLocation.hostname;
        // host => ip:port
        const host = nowLocation.host;
        // websocket api 地址
        // 这个判断就是根据当前项目环境 自动确定使用 ws 还是 wss 的路由地址
        //const websocket_pattern = (hostName == '域名') ? 'wss-websocket-api' : 'websocket-api';
        const websocket_pattern = 'websocket-api';
        // websocket 请求地址前缀
        //const webSocketApiUrl =  ((protocol.startsWith('https')) ? 'wss://' : 'ws://') + host + '/' + websocket_pattern;
        const webSocketApiUrl =  'ws://' + host + '/' + websocket_pattern;
        // 当前WebSocket的请求地址前缀,
        // /websocket/template-push/ 就是我后端配置的websocket端点地址
        let url = webSocketApiUrl + '/websocket/message/'+userId;
        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();
        Notification({
          title: '消息',
          duration: 3000,
          dangerouslyUseHTMLString: true,
          message: JSON.parse(e.data).noticeTitle
        })
      },
      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:300px
  }
  ::v-deep .el-dropdown-menu {
    top: 28px;
  }

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