yvan-window/src/component/Container/Desktop/NotifyTrayPanel/index.vue

<template>
  <!-- notifyTrayPanel -->
  <div
    class="x-panel sds-notify-tray-panel sds-tray-panel"
    style="
      position: absolute;
      z-index: 11000;
      visibility: visible;
      right: 10px;
      top: 41px;
    "
    :style="{ display: display }"
    @click.stop="clickNotifyTrayPanel"
  >
    <div class="x-panel-header">
      <span class="x-panel-header-text"
        ><div class="sds-notify-setting-btn" @click.stop="openNotifySetting">
          &nbsp;
        </div>
        <span class="x-panel-header-text">消息</span></span
      >
    </div>
    <div class="x-panel-bwrap">
      <div class="x-panel-body">
        <div
          id="sds-notify-tray-panel-dataview"
          class="
            sds-notify-tray-panel-dataview
            syno-dataview
            flexcrollactive
            scroll-at-top scroll-at-bottom scroll-at-left scroll-at-right
          "
          style="
            overflow: hidden;
            width: 340px;
            height: 100%;
            border-width: 0px;
            position: relative;
            text-align: left;
            padding: 0px;
          "
        >
          <div
            id="sds-notify-tray-panel-dataview_mcontentwrapper"
            class="mcontentwrapper"
            style="
              width: 340px;
              height: 100%;
              top: 0px;
              left: 0px;
              border-bottom: 0px solid black;
              text-align: start;
              padding: 0px;
              position: relative;
              z-index: 2;
            "
          >
            <div
              id="sds-notify-tray-panel-dataview_contentwrapper"
              class="contentwrapper"
              style="
                position: relative;
                top: 0px;
                width: 100%;
                display: block;
                padding: 0px;
                left: 0px;
              "
            >
              <div style="width: 100%">
                <div
                  class="sds-notify-tray-panel-dataview-wrapper"
                  v-if="notifyTrayPanelDetail.detailMessageList.length"
                >
                  <div
                    class="item"
                    :class="detailMessage.cls"
                    v-for="(
                      detailMessage, detailMessageIndex
                    ) in notifyTrayPanelDetail.detailMessageList"
                    :key="detailMessage.id"
                  >
                    <div class="title blue-status">
                      <div class="notification-level info"></div>
                      <div class="content cursor-no-pointer">
                        {{ detailMessage.title }}
                      </div>
                    </div>
                    <div class="time">{{ detailMessage.time }}</div>
                    <div class="msg allowDefCtxMenu selectabletext">
                      <div class="detail" v-html="detailMessage.text"></div>
                      <a
                        class="link-font"
                        @click.stop="
                          openNotifyDetail(
                            detailMessage,
                            detailMessageIndex,
                            $event
                          )
                        "
                        >详情</a
                      >
                    </div>
                    <div class="remain-items"></div>
                  </div>
                </div>
                <div style="width: 100%" id="ext-gen600" v-else>
                  <div
                    class="sds-notify-empty-text"
                    id="ext-gen644"
                    aria-label="没有通知"
                    style="line-height: 418px"
                  >
                    没有通知
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            id="sds-notify-tray-panel-dataview_scrollwrapper"
            class="scrollwrapper"
            style="
              width: 340px;
              height: 100%;
              position: absolute;
              top: 0px;
              left: 0px;
            "
          >
            <div
              id="sds-notify-tray-panel-dataview_zoomdetectdiv"
              class="zoomdetectdiv"
              style="
                font-size: 12px;
                height: 1em;
                width: 1em;
                position: absolute;
                z-index: -999;
                visibility: hidden;
              "
            ></div>
            <div
              id="sds-notify-tray-panel-dataview_vscrollerbase"
              class="vscrollerbase scrollgeneric flexinactive"
              style="height: 345px; left: 340px; visibility: hidden"
            >
              <div
                id="sds-notify-tray-panel-dataview_vscrollerbar"
                class="vscrollerbar scrollgeneric"
                style="
                  padding: 0px;
                  height: 341px;
                  top: 0px;
                  z-index: 2;
                  visibility: hidden;
                "
              >
                <div
                  id="sds-notify-tray-panel-dataview_vscrollerbarbeg"
                  class="vscrollerbarbeg scrollgeneric"
                  style="height: 341px"
                ></div>
                <div
                  id="sds-notify-tray-panel-dataview_vscrollerbarend"
                  class="vscrollerbarend scrollgeneric"
                  style="top: 341px"
                ></div>
              </div>
              <div
                id="sds-notify-tray-panel-dataview_vscrollerbasebeg"
                class="vscrollerbasebeg scrollgeneric"
                style="height: 345px"
              ></div>
              <div
                id="sds-notify-tray-panel-dataview_vscrollerbaseend"
                class="vscrollerbaseend scrollgeneric"
                style="top: 345px"
              ></div>
            </div>
            <div
              id="sds-notify-tray-panel-dataview_hscrollerbase"
              class="hscrollerbase scrollgeneric flexinactive"
              style="width: 340px; top: 345px; visibility: hidden"
            >
              <div
                id="sds-notify-tray-panel-dataview_hscrollerbar"
                class="hscrollerbar scrollgeneric"
                style="
                  padding: 0px;
                  width: 336px;
                  left: 0px;
                  z-index: 2;
                  visibility: hidden;
                "
              >
                <div
                  id="sds-notify-tray-panel-dataview_hscrollerbarbeg"
                  class="hscrollerbarbeg scrollgeneric"
                  style="width: 336px"
                ></div>
                <div
                  id="sds-notify-tray-panel-dataview_hscrollerbarend"
                  class="hscrollerbarend scrollgeneric"
                  style="left: 336px"
                ></div>
              </div>
              <div
                id="sds-notify-tray-panel-dataview_hscrollerbasebeg"
                class="hscrollerbasebeg scrollgeneric"
                style="width: 340px"
              ></div>
              <div
                id="sds-notify-tray-panel-dataview_hscrollerbaseend"
                class="hscrollerbaseend scrollgeneric"
                style="left: 340px"
              ></div>
            </div>
            <div
              id="sds-notify-tray-panel-dataview_scrollerjogbox"
              class="scrollerjogbox scrollgeneric"
              style="visibility: hidden"
            ></div>
            <div
              id="sds-notify-tray-panel-dataview_domfixdiv"
              class="domfixdiv"
              style="display: none"
            ></div>
            <div
              id="sds-notify-tray-panel-dataview_copyholder"
              class="copyholder"
              style="
                border: 0px solid blue;
                visibility: hidden;
                padding: 0px;
                display: none;
              "
            ></div>
          </div>
        </div>
      </div>
      <div class="x-panel-bbar" style="width: 340px">
        <div
          class="x-toolbar x-small-editor x-toolbar-layout-ct"
          style="width: 328px"
        >
          <table cellspacing="0" class="x-toolbar-ct">
            <tbody>
              <tr>
                <td class="x-toolbar-left" align="left">
                  <table cellspacing="0">
                    <tbody>
                      <tr class="x-toolbar-left-row">
                        <td class="x-toolbar-cell">
                          <span
                            cellspacing="0"
                            class="
                              x-btn
                              syno-ux-button syno-ux-button-grey
                              x-btn-noicon
                            "
                            :class="
                              notifyTrayPanelDetail.detailMessageList.length
                                ? ''
                                : 'x-item-disabled'
                            "
                            style="width: auto; margin-left: 0px"
                            ><em class="x-unselectable" unselectable="on"
                              ><button
                                type="button"
                                class="x-btn-text"
                                @click="clearAll"
                              >
                                清除全部
                              </button></em
                            ></span
                          >
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
                <td class="x-toolbar-right" align="right">
                  <table cellspacing="0" class="x-toolbar-right-ct">
                    <tbody>
                      <tr>
                        <td>
                          <table cellspacing="0">
                            <tbody>
                              <tr class="x-toolbar-right-row">
                                <td class="x-toolbar-cell">
                                  <span
                                    cellspacing="0"
                                    class="
                                      x-btn
                                      syno-ux-button syno-ux-button-blue
                                      x-btn-noicon
                                    "
                                    style="width: auto; margin-left: 0px"
                                    ><em class="x-unselectable"
                                      ><button
                                        type="button"
                                        class="x-btn-text"
                                        @click="openNotifyShowall"
                                      >
                                        显示全部
                                      </button></em
                                    ></span
                                  >
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                        <td>
                          <table cellspacing="0">
                            <tbody>
                              <tr class="x-toolbar-extras-row"></tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="sds-notify-panel-arrow" style="left: 179px; top: -17px"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      display: "none",
      notifyTrayPanelDetail: {
        detailMessageList: [
          {
            id: 0,
            title: "系统",
            date: "1651720579",
            time: "",
            time1: "",
            cls: "unread",
            text: '我们的<a href="https://sy.to/zvgxb" target="_blank">服务数据收集披露</a>已更新。',
            message:
              '我们已更新<a href="https://sy.to/zvgxb" target="_blank">服务数据收集披露</a>，使它更容易理解并反映我们最近的政策更改。建议您通过单击上面的链接来阅读我们的服务数据收集披露，并定期检查是否有任何更改。',
            showMessage: " 我们的服务数据收集披露已更新。 ",
          },
          {
            id: 1,
            title: "系统",
            time: "",
            time1: "",
            cls: "unread",
            date: "1612493322",
            text: '我们的<a href="https://sy.to/zvgxb" target="_blank">服务数据收集披露</a>已更新。',
            message:
              '我们已更新<a href="https://sy.to/zvgxb" target="_blank">服务数据收集披露</a>，使它更容易理解并反映我们最近的政策更改。建议您通过单击上面的链接来阅读我们的服务数据收集披露，并定期检查是否有任何更改。',
            showMessage: " 我们的服务数据收集披露已更新。 ",
          },
          {
            id: 2,
            title: "系统",
            time: "",
            time1: "",
            cls: "unread",
            date: "1651695379",
            text: '我们的<a href="https://sy.to/zvgxb" target="_blank">服务数据收集披露</a>已更新。',
            message:
              '我们已更新<a href="https://sy.to/zvgxb" target="_blank">服务数据收集披露</a>，使它更容易理解并反映我们最近的政策更改。建议您通过单击上面的链接来阅读我们的服务数据收集披露，并定期检查是否有任何更改。',
            showMessage: " 我们的服务数据收集披露已更新。 ",
          },
          {
            id: 3,
            title: "系统",
            time: "",
            time1: "",
            cls: "unread",
            date: "1625453322",
            text: '我们的<a href="https://sy.to/zvgxb" target="_blank">服务数据收集披露</a>已更新。',
            message:
              '我们已更新<a href="https://sy.to/zvgxb" target="_blank">服务数据收集披露</a>，使它更容易理解并反映我们最近的政策更改。建议您通过单击上面的链接来阅读我们的服务数据收集披露，并定期检查是否有任何更改。',
            showMessage: " 我们的服务数据收集披露已更新。 ",
          },
          {
            id: 4,
            title: "系统",
            time: "",
            time1: "",
            cls: "unread",
            date: "1651522579",
            text: '我们的<a href="https://sy.to/zvgxb" target="_blank">服务数据收集披露</a>已更新。',
            message:
              '我们已更新<a href="https://sy.to/zvgxb" target="_blank">服务数据收集披露</a>，使它更容易理解并反映我们最近的政策更改。建议您通过单击上面的链接来阅读我们的服务数据收集披露，并定期检查是否有任何更改。',
            showMessage: " 我们的服务数据收集披露已更新。 ",
          },
        ],
      },
    };
  },
  created() {},
  mounted() {
    this.$bus.on("openNotifyTrayPanel", this.openNotifyTrayPanel);
    this.$bus.on("clearAllNotifyMessage", this.clearAllNotifyMessage);
  },
  components: {},
  methods: {
    //显示本页面
    openNotifyTrayPanel(e) {
      if (this.display === "none") {
        let date = new Date().getTime();
        this.notifyTrayPanelDetail.detailMessageList.forEach((item) => {
          function timestampToTime(timestamp) {
            if (timestamp.length == 10) {
              var timestamp = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
            } else {
              var timestamp = new Date(timestamp);
            }
            let Y = timestamp.getFullYear() + "-";
            let M =
              (timestamp.getMonth() + 1 < 10
                ? "0" + (timestamp.getMonth() + 1)
                : timestamp.getMonth() + 1) + "-";
            let D =
              (timestamp.getDate() < 10
                ? "0" + timestamp.getDate()
                : timestamp.getDate()) + " ";
            let h =
              (timestamp.getHours() < 10
                ? "0" + timestamp.getHours()
                : timestamp.getHours()) + ":";
            let m =
              (timestamp.getMinutes() < 10
                ? "0" + timestamp.getMinutes()
                : timestamp.getMinutes()) + ":";
            let s =
              timestamp.getSeconds() < 10
                ? "0" + timestamp.getSeconds()
                : timestamp.getSeconds();
            return Y + M + D + h + m + s;
          }
          if (item.date.length == 10) {
            var itemDate = item.date * 1000;
          } else {
            var itemDate = item.date;
          }
          if (date - itemDate <= 3600000) {
            item.time = parseInt((date - itemDate) / (1000 * 60)) + "分钟前";
          } else if (date - itemDate <= 86400000) {
            item.time =
              parseInt((date - itemDate) / (1000 * 60 * 60)) + "小时前";
          } else if (date - itemDate <= 2592000000) {
            item.time =
              parseInt((date - itemDate) / (1000 * 60 * 60 * 24)) + "天前";
          } else if (date - itemDate <= 31536000000) {
            item.time =
              parseInt((date - itemDate) / (1000 * 60 * 60 * 24 * 30)) +
              "个月前";
          } else {
            item.time =
              parseInt((date - itemDate) / (1000 * 60 * 60 * 24 * 365)) +
              "年前";
          }
          item.time1 = timestampToTime(item.date);
        });
        this.display = "block";
        if (!e.srcElement.className.includes(" pressed")) {
          e.srcElement.className = e.srcElement.className + " pressed";
        }
        this.$bus.emit("notifyMessageRead");
        window.addEventListener("click", this.hiddenNotifyAndchangeIconColor);
      } else {
        this.display = "none";
        if (e.srcElement.className.includes(" pressed")) {
          e.srcElement.className = e.srcElement.className.replace(
            " pressed",
            ""
          );
        }
      }
    },
    // 点击本页面
    clickNotifyTrayPanel() {
    },
    // 隐藏本页面并更新页面对应的图标颜色
    hiddenNotifyAndchangeIconColor(e) {
      let el = document.querySelector(".tray-item.notify-button");
      if (e.srcElement === el) {
        window.addEventListener("click", this.hiddenNotifyAndchangeIconColor);
      } else {
        this.display = "none";
        if (el.className && el.className.includes(" pressed")) {
          el.className = el.className.replace(" pressed", "");
        }
        window.removeEventListener(
          "click",
          this.hiddenNotifyAndchangeIconColor
        );
      }
    },
    //打开详情页面
    openNotifyDetail(detailMessage, detailMessageIndex, e) {
      this.hiddenNotifyAndchangeIconColor(e);
      // openNotifyDetail(detailMessage, detailMessageIndex,e)
      this.$bus.emit("openNotifyDetail", detailMessage);
      this.notifyTrayPanelDetail.detailMessageList[detailMessageIndex].cls = "";
    },
    // 打开显示全部页面
    openNotifyShowall(e) {
      this.hiddenNotifyAndchangeIconColor(e);
      this.$bus.emit(
        "openNotifyShowall",
        this.notifyTrayPanelDetail.detailMessageList
      );
    },
    // 打开清除全部页面
    clearAll(e) {
      this.hiddenNotifyAndchangeIconColor(e);
      if (!this.notifyTrayPanelDetail.detailMessageList.length) {
        return;
      }
      let obj = {
        cls: "confirm-delete-icon",
        icon: "confirm-delete-icon",
        title: "",
        text: "所有桌面通知都会被清除。是否确定要继续？",
        buttonList: [
          {
            id: 0,
            text: "取消",
            cls: "v-btn-cancel",
            event: this.cancelDeleteAll,
          },
          {
            id: 1,
            text: "清除全部",
            cls: "v-btn-danger",
            event: this.confirmDeleteAll,
          },
        ],
      };
      this.$bus.emit("openMessage", obj);
      this.$bus.emit("openMask");
    },
    // 取消清除所有信息
    cancelDeleteAll() {
      this.$bus.emit("closeMessage");
      this.$bus.emit("closeMask");
    },
    // 确定清除所有信息
    confirmDeleteAll() {
      this.$bus.emit("clearAllNotifyMessage");
      this.cancelDeleteAll();
    },
    // 清除所有信息
    clearAllNotifyMessage() {
      this.notifyTrayPanelDetail.detailMessageList = [];
    },
    // 打开设置页面
    openNotifySetting(e) {
      this.hiddenNotifyAndchangeIconColor(e);
      this.$bus.emit("openNotifySetting");
    },
  },
  name: "NotifyTrayPanel",
};
</script>

<style lang="css" scoped>
#sds-notify-tray-panel-dataview_mcontentwrapper {
  overflow: scroll;
}

#sds-notify-tray-panel-dataview_mcontentwrapper::-webkit-scrollbar {
  width: 0 !important;
}
</style>