|
|
@@ -0,0 +1,502 @@
|
|
|
+<template>
|
|
|
+ <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=""
|
|
|
+ >
|
|
|
+ <div class="x-panel-header">
|
|
|
+ <span class="x-panel-header-text"
|
|
|
+ ><div class="sds-notify-setting-btn"> </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)
|
|
|
+ "
|
|
|
+ >详情</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">
|
|
|
+ 清除全部
|
|
|
+ </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("openOrHiddenNotify", this.openOrHiddenNotify);
|
|
|
+ },
|
|
|
+ components: {},
|
|
|
+ methods: {
|
|
|
+ //显示或隐藏本页面
|
|
|
+ openOrHiddenNotify(e) {
|
|
|
+ if (this.display === "none") {
|
|
|
+ this.display = "block";
|
|
|
+ e.srcElement.className = e.srcElement.className + " pressed";
|
|
|
+ this.$bus.emit("notifyMessageRead");
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ console.log(
|
|
|
+ timestampToTime(item.date),
|
|
|
+ timestampToTime(date),
|
|
|
+ item.id
|
|
|
+ );
|
|
|
+ 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);
|
|
|
+ });
|
|
|
+ window.onclick = () => {
|
|
|
+ this.display = "none";
|
|
|
+ if (e.srcElement.className.includes(" pressed")) {
|
|
|
+ e.srcElement.className = e.srcElement.className.replace(
|
|
|
+ " pressed",
|
|
|
+ ""
|
|
|
+ );
|
|
|
+ }
|
|
|
+ };
|
|
|
+ } else {
|
|
|
+ this.display = "none";
|
|
|
+ if (e.srcElement.className.includes(" pressed")) {
|
|
|
+ e.srcElement.className = e.srcElement.className.replace(
|
|
|
+ " pressed",
|
|
|
+ ""
|
|
|
+ );
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //打开详情页面
|
|
|
+ openNotifyDetail(detailMessage, detailMessageIndex) {
|
|
|
+ this.display = "none";
|
|
|
+ this.$bus.emit("openNotifyDetail", detailMessage);
|
|
|
+ this.notifyTrayPanelDetail.detailMessageList[detailMessageIndex].cls = "";
|
|
|
+ },
|
|
|
+ // 打开显示全部页面
|
|
|
+ openNotifyShowall(){
|
|
|
+ this.$bus.emit("openNotifyShowall",this.notifyTrayPanelDetail.detailMessageList)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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>
|
liupeng
