kd-aiot-frontend-portal/src/layout/components/header-notice.vue

<!-- 顶栏消息通知 -->
<template>
  <el-popover
    :width="430"
    trigger="click"
    v-model="visible"
    class="ele-notice-group"
    transition="el-zoom-in-top"
    popper-class="ele-notice-pop"
    @show="query"
  >
    <template v-slot:reference>
      <div class="ele-notice-group">
        <el-badge :value="unreadNum" :hidden="!unreadNum">
          <i class="el-icon-bell"></i>
        </el-badge>
      </div>
    </template>
    <div class="ele-notice-list ele-scrollbar-mini">
      <div v-for="(item, index) in notice" :key="index" class="ele-notice-item">
        <div class="ele-cell ele-notice-item-wrapper">
          <i :class="['el-icon-chat-dot-square', 'ele-notice-item-icon']"></i>
          <div class="ele-cell-content">
            <div class="ele-elip">{{ item.templateContent }}</div>
            <div
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
              "
            >
              <div class="ele-text-secondary ele-elip"
                >{{ item.createTime }}
              </div>
              <div
                class="el-icon-view"
                @click="clearNotice(item, index)"
                title="已读"
              ></div>
            </div>
          </div>
        </div>
        <el-divider />
      </div>
    </div>
    <div v-if="notice.length" class="ele-cell ele-notice-actions">
      <div class="ele-cell-content" @click="clearNotice">清空通知</div>
      <el-divider direction="vertical" class="line-color-light" />
      <router-link to="/page-wt/message" class="ele-cell-content">
        查看更多
      </router-link>
    </div>
    <ele-empty v-if="!notice.length" text="已查看所有通知" />
    <!--    <el-tabs v-model="active" type="card">-->
    <!--      <el-tab-pane name="notice" :label="noticeTitle">-->
    <!--      -->
    <!--      </el-tab-pane>-->
    <!--      <el-tab-pane name="letter" :label="letterTitle">-->
    <!--        <div class="ele-notice-list ele-scrollbar-mini">-->
    <!--          <div-->
    <!--            v-for="(item, index) in letter"-->
    <!--            :key="index"-->
    <!--            class="ele-notice-item"-->
    <!--          >-->
    <!--            <div class="ele-cell ele-notice-item-wrapper ele-cell-align-top">-->
    <!--              <el-avatar :src="item.avatar" size="medium" />-->
    <!--              <div class="ele-cell-content">-->
    <!--                <div class="ele-elip">{{ item.title }}</div>-->
    <!--                <div class="ele-text-secondary ele-elip">-->
    <!--                  {{ item.content }}-->
    <!--                </div>-->
    <!--                <div class="ele-cell-desc ele-elip">{{ item.time }}</div>-->
    <!--              </div>-->
    <!--            </div>-->
    <!--            <el-divider />-->
    <!--          </div>-->
    <!--        </div>-->
    <!--        <div v-if="letter.length" class="ele-cell ele-notice-actions">-->
    <!--          <div class="ele-cell-content" @click="clearLetter">清空私信</div>-->
    <!--          <el-divider direction="vertical" class="line-color-light" />-->
    <!--          <router-link to="/user/message?type=letter" class="ele-cell-content">-->
    <!--            查看更多-->
    <!--          </router-link>-->
    <!--        </div>-->
    <!--        <ele-empty v-if="!letter.length" text="已读完所有私信" />-->
    <!--      </el-tab-pane>-->
    <!--      <el-tab-pane :label="todoTitle" name="todo">-->
    <!--        <div class="ele-notice-list ele-scrollbar-mini">-->
    <!--          <div-->
    <!--            v-for="(item, index) in todo"-->
    <!--            :key="index"-->
    <!--            class="ele-notice-item"-->
    <!--          >-->
    <!--            <div class="ele-notice-item-wrapper">-->
    <!--              <div class="ele-cell ele-cell-align-top">-->
    <!--                <div class="ele-cell-content ele-elip">{{ item.title }}</div>-->
    <!--                <el-tag size="mini" :type="['info', 'danger', ''][item.status]">-->
    <!--                  {{ ['未开始', '即将到期', '进行中'][item.status] }}-->
    <!--                </el-tag>-->
    <!--              </div>-->
    <!--              <div class="ele-text-secondary ele-elip">-->
    <!--                {{ item.description }}-->
    <!--              </div>-->
    <!--            </div>-->
    <!--            <el-divider />-->
    <!--          </div>-->
    <!--        </div>-->
    <!--        <div v-if="todo.length" class="ele-cell ele-notice-actions">-->
    <!--          <div class="ele-cell-content" @click="clearTodo">清空待办</div>-->
    <!--          <el-divider direction="vertical" class="line-color-light" />-->
    <!--          <router-link to="/user/message?type=todo" class="ele-cell-content">-->
    <!--            查看更多-->
    <!--          </router-link>-->
    <!--        </div>-->
    <!--        <ele-empty v-if="!todo.length" text="已完成所有任务" />-->
    <!--      </el-tab-pane>-->
    <!--    </el-tabs>-->
  </el-popover>
</template>

<script>
  import {
    getUnreadNotice,
    updateAllNotifyMessageReadAPI,
    updateNotifyMessageReadByIdAPI
  } from '@/api/layout';
  import { getToken } from '@/utils/token-util';


  export default {
    data() {
      return {
        // 是否显示
        visible: false,
        // 选项卡选中
        active: 'notice',
        // 通知数据
        notice: [],
        noticeCount: 0,
        timer: null,
        // 私信数据
        letter: [],
        // 待办数据
        todo: []
      };
    },
    computed: {
      // 通知标题
      noticeTitle() {
        return '通知' + (this.noticeCount > 0 ? `(${this.noticeCount})` : '');
      },
      // // 私信标题
      // letterTitle() {
      //   return '私信' + (this.letter.length ? `(${this.letter.length})` : '');
      // },
      // // 待办标题
      // todoTitle() {
      //   return '待办' + (this.todo.length ? `(${this.todo.length})` : '');
      // },
      // 未读数量
      unreadNum() {
        return this.noticeCount;
      }
    },
    created() {
      if (getToken()) {
        let url = 'ws://'+window.location.host+'/websocket/UnreadNotifyMessageCount?token='+getToken()
        let socket = new WebSocket(url);
        socket.onmessage = (event) => {
          console.log(event.data)
          this.noticeCount = event.data * 1 || 0;
        };
      }
    },
    methods: {
      /* 查询数据 */
      async query() {
        this.notice = await getUnreadNotice();
        this.notice = this.notice.slice(0, 15);
      },
    

      /* 清空通知 */
      async clearNotice(item = {}, index) {
        if (item.id) {
          await updateNotifyMessageReadByIdAPI([item.id]);
          this.notice.splice(index, 1);
          this.noticeCount = this.noticeCount - 1;
        } else {
          await updateAllNotifyMessageReadAPI();
          this.notice = [];
          this.noticeCount = 0;
        }
      },
      /* 清空通知 */
      clearLetter() {
        this.letter = [];
      },
      /* 清空通知 */
      clearTodo() {
        this.todo = [];
      }
    }
  };
</script>

<style lang="scss">
  .ele-notice-group {
    display: block;

    .el-badge {
      line-height: 1;
      display: block;
    }
  }

  /* 消息通知pop */
  .ele-notice-pop {
    padding: 0 !important;

    /* tab */
    .el-tabs__nav-scroll {
      text-align: center;
    }

    .el-tabs__nav {
      float: none;
      display: inline-block;
    }

    .el-tabs__item {
      height: 44px;
      line-height: 44px;
      padding: 0 20px !important;
    }

    /* 空视图 */
    .ele-empty {
      padding: 100px 0;
    }
  }

  /* 列表 */
  .ele-notice-list {
    padding-top: 8px;
    max-height: 360px;
    overflow: auto;
  }

  .ele-notice-item {
    .ele-notice-item-wrapper {
      padding: 12px 15px;
      transition: background-color 0.2s;
      cursor: pointer;

      &:hover {
        background-color: hsla(0, 0%, 60%, 0.05);
      }
    }

    .ele-text-secondary {
      margin-top: 5px;
      font-size: 13px;
    }

    .ele-cell-desc {
      margin-top: 3px !important;
      font-size: 12px !important;
    }
  }

  .ele-notice-item-icon {
    width: 32px;
    height: 32px;
    line-height: 32px !important;
    color: #fff;
    font-size: 16px;
    background-color: #60b2fc;
    border-radius: 50%;
    text-align: center;

    &.el-icon-s-check {
      background-color: #f5686f;
    }

    &.el-icon-video-camera {
      background-color: #7cd734;
    }

    &.el-icon-s-claim {
      background-color: #faad14;
    }

    &.el-icon-message-solid {
      background-color: #2bcacd;
    }
  }

  /* 操作按钮 */
  .ele-notice-actions > .ele-cell-content {
    line-height: 42px;
    text-align: center;
    cursor: pointer;
    color: inherit;

    &:hover {
      background-color: hsla(0, 0%, 60%, 0.05);
    }
  }

  .ele-elip {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal !important;
  }
</style>