首页桌面

src/component/Desktop/NotifyShowall/index.vue

@@ -0,0 +1,423 @@
+<template>
+  <div
+    class="
+      v-layout
+      sds-notify-showall-dialog
+      layout-window-app
+      v-window
+      active-win
+    "
+    style="
+      position: absolute;
+      left: 10px;
+      z-index: 9050;
+    "
+    :style="{ display: display, width: width, height: height, top: top}"
+  >
+    <div class="v-window-header-wrapper draggable">
+      <div class="app-icon"></div>
+      <div class="v-window-header-text">
+        <div class="v-window-header-title">消息</div>
+      </div>
+
+      <div class="window-header-tool-wrapper light">
+        <div class="tool maximize" @click="maxWindow"></div>
+        <div class="tool close" @click="closeNotifyShowall"></div>
+      </div>
+    </div>
+    <div class="v-window-body">
+      <div class="v-trap-focus-indicator"></div>
+      <div class="v-trap-focus-body">
+        <div class="v-trap-focus-indicator"></div>
+        <div
+          class="v-layout show-all-panel layout-panel-content v-panel"
+          style="--svc-layout-height: 100%"
+        >
+          <div class="v-spin-wrapper circle v-panel-wrapper">
+            <div class="v-spin-wrapper-masking" style="display: none"></div>
+            <div
+              class="v-layout layout-body-wrapper layout-panel-body"
+              style="
+                --panel-in-tabs-padding-top: 8px;
+                --svc-layout-padding: 16px 20px 6px 20px;
+                --svc-layout-margin: 0 0 0 0;
+              "
+            >
+              <div class="v-toolbar tbar-wrapper default-tbar">
+                <button type="button" class="v-btn v-btn-grey" @click="reload">
+                  <span> 刷新 </span>
+                </button>
+                <button type="button" class="v-btn v-btn-grey">
+                  <span> 清除全部 </span>
+                </button>
+                <button type="button" class="v-btn v-btn-grey v-btn-disabled">
+                  <span> 查看 </span>
+                </button>
+                <button
+                  type="button"
+                  class="i-filter v-btn v-btn-grey v-btn-dropdown"
+                >
+                  <div class="v-btn-dropdown-btn"></div>
+                </button>
+                <div class="right-wrapper"></div>
+              </div>
+              <div class="body-wrapper">
+                <div class="all-notification-table-wrapper">
+                  <div
+                    class="
+                      all-notification-table
+                      v-spin-wrapper
+                      circle
+                      v-table-wrapper
+                    "
+                  >
+                    <div
+                      class="v-spin-wrapper-masking"
+                      :style="{ display: maskDisplay }"
+                    ></div>
+
+                    <div style="width: 800px" class="v-table">
+                      <div class="v-table-header">
+                        <table>
+                          <colgroup>
+                            <col
+                              name="51d8198d-fd9d-4986-9532-b8a0a3962c1f"
+                              width="100"
+                            />
+                            <col
+                              name="5b742784-0a51-436e-89d0-1a0b2f31fed0"
+                              width="160"
+                            />
+                            <col
+                              name="e034d4a6-59d9-4fda-b9d6-e7cbd2293991"
+                              width="380"
+                            />
+                            <col
+                              name="3b0b169b-2410-4f64-b3f9-790f94f9c6db"
+                              width="160"
+                            />
+                          </colgroup>
+                          <thead class="v-table-thead">
+                            <tr class="row">
+                              <th
+                                colspan="1"
+                                rowspan="1"
+                                class="cell-first"
+                                @click.stop="sort"
+                              >
+                                <div class="inner-cell">
+                                  <div class="head-cell cell">
+                                    <span class="cell-title">层级</span>
+                                    <span
+                                      class="v-table-column-sorter down"
+                                    ></span>
+                                  </div>
+                                </div>
+                              </th>
+                              <th colspan="1" rowspan="1" class=""
+                                @click.stop="sort">
+                                <div class="inner-cell">
+                                  <div class="head-cell cell">
+                                    <span class="cell-title">类别</span>
+                                    <span
+                                      class="v-table-column-sorter down"
+                                    ></span>
+                                  </div>
+                                </div>
+                              </th>
+                              <th colspan="1" rowspan="1" class=""
+                                @click.stop="sort">
+                                <div class="inner-cell">
+                                  <div class="head-cell cell">
+                                    <span class="cell-title">主题</span>
+                                    <span
+                                      class="v-table-column-sorter down"
+                                    ></span>
+                                  </div>
+                                </div>
+                              </th>
+                              <th colspan="1" rowspan="1" class="last-th-cell"
+                                @click.stop="sort">
+                                <div class="inner-cell">
+                                  <div class="head-cell cell">
+                                    <span class="cell-title">时间</span>
+                                    <span
+                                      class="v-table-column-sorter down"
+                                    ></span>
+                                  </div>
+                                </div>
+                              </th>
+                            </tr>
+                          </thead>
+                        </table>
+                        <div class="hd-menu-btn-wrapper"></div>
+                      </div>
+                      <div class="v-ps ps">
+                        <div class="v-table-content">
+                          <div class="v-table-body">
+                            <table role="none">
+                              <colgroup>
+                                <col
+                                  width="100"
+                                />
+                                <col
+                                  width="160"
+                                />
+                                <col
+                                  width="380"
+                                />
+                                <col
+                                  width="160"
+                                />
+                              </colgroup>
+                              <tbody role="none" class="v-table-tbody">
+                                <tr
+                                  class="row"
+                                  @click.stop="clickTr(detailMessageIndex)"
+                                  @mouseenter="mouseenterTr(detailMessageIndex)"
+                                  @mouseleave="mouseleaveTr(detailMessageIndex)"
+                                  v-for="(
+                                    detailMessage, detailMessageIndex
+                                  ) in notifyShowallDetail.detailMessageList"
+                                  :key="detailMessage.id"
+                                  :class="detailMessage.cls1"
+                                >
+                                  <td class="cell-first">
+                                    <div class="inner-cell">
+                                      <div class="cell content-cell">
+                                        <div class="level-info">信息</div>
+                                      </div>
+                                    </div>
+                                  </td>
+                                  <td class="">
+                                    <div class="inner-cell">
+                                      <div class="cell content-cell">
+                                        <div>{{ detailMessage.title }}</div>
+                                      </div>
+                                    </div>
+                                  </td>
+                                  <td class="">
+                                    <div class="inner-cell">
+                                      <div class="cell content-cell">
+                                        <div>
+                                          {{ detailMessage.showMessage }}
+                                        </div>
+                                      </div>
+                                    </div>
+                                  </td>
+                                  <td class="last-td-cell">
+                                    <div class="inner-cell">
+                                      <div class="cell content-cell">
+                                        <div>{{ detailMessage.time1 }}</div>
+                                      </div>
+                                    </div>
+                                  </td>
+                                </tr>
+                              </tbody>
+                            </table>
+                          </div>
+                        </div>
+                        <div class="ps__rail-x" style="left: 0px; bottom: 0px">
+                          <div
+                            class="ps__thumb-x"
+                            style="left: 0px; width: 0px"
+                          ></div>
+                        </div>
+                        <div class="ps__rail-y" style="top: 0px; right: 0px">
+                          <div
+                            class="ps__thumb-y"
+                            style="top: 0px; height: 0px"
+                          ></div>
+                        </div>
+                      </div>
+                      <div
+                        class="
+                          col-resizable-indicator
+                          col-resizable-indicator--hidden
+                        "
+                      ></div>
+                      <div
+                        class="
+                          col-resizable-indicator
+                          col-resizable-indicator--hidden
+                        "
+                      ></div>
+                      <div
+                        class="
+                          col-resizable-indicator
+                          col-resizable-indicator--hidden
+                        "
+                      ></div>
+                    </div>
+                    <div class="v-pagination">
+                      <div class="v-pagination-left">
+                        <ul class="left-paging">
+                          <li class="v-pagination-first disabled"></li>
+                          <li class="v-pagination-prev disabled"></li>
+                          <li
+                            class="
+                              v-pagination-item
+                              v-pagination-item-1
+                              v-pagination-item-active
+                            "
+                            v-if="notifyShowallDetail.detailMessageList.length"
+                          >
+                            1
+                          </li>
+                          <li class="v-pagination-next disabled"></li>
+                          <li class="v-pagination-last disabled"></li>
+                        </ul>
+                      </div>
+                      <div class="v-pagination-right">
+                        <div class="v-pagination-total">
+                          {{ notifyShowallDetail.detailMessageList.length }}
+                          个项目
+                        </div>
+                        <div class="v-pagination-refresh" @click="reload"></div>
+                      </div>
+                    </div>
+                    <div
+                      class="v-spin"
+                      :style="{ display: loading ? 'block' : 'none' }"
+                    >
+                      <div class="v-spin-text has-icon">加载中...</div>
+                      <div class="v-spin-icon">
+                        <i>
+                          <i></i>
+                        </i>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="
+                v-layout
+                layout-panel-fbar
+                fbar-wrapper fbar-wrapper--fluid
+              "
+            >
+              <div class="pull-right">
+                <button
+                  type="button"
+                  class="v-btn v-btn-footbar v-btn-grey"
+                  @click="closeNotifyShowall"
+                >
+                  <span> 关闭 </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div tabindex="0" class="v-trap-focus-indicator"></div>
+    </div>
+    <div class="v-window-resizable">
+      <div class="handler v-window-resizable-nw"></div>
+      <div class="handler v-window-resizable-ne"></div>
+      <div class="handler v-window-resizable-sw"></div>
+      <div class="handler v-window-resizable-se"></div>
+      <div class="handler v-window-resizable-n"></div>
+      <div class="handler v-window-resizable-s"></div>
+      <div class="handler v-window-resizable-w"></div>
+      <div class="handler v-window-resizable-e"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      display: "none",
+      loading: false,
+      maskDisplay: "none",
+      width: '840px',
+      height: '480px',
+      top: '10px',
+      notifyShowallDetail: {
+        detailMessageList: [],
+      },
+    };
+  },
+  mounted() {
+    this.$bus.on("openNotifyShowall", this.openNotifyShowall);
+  },
+  methods: {
+    // 打开本页面
+    openNotifyShowall(detailMessageList) {
+      this.display = "block";
+      let detailMessageList1 = JSON.parse(JSON.stringify(detailMessageList));
+      detailMessageList1.forEach((item) => {
+        item.cls1 = "";
+      });
+      this.notifyShowallDetail.detailMessageList = detailMessageList1;
+      console.log(this.notifyShowallDetail.detailMessageList);
+    },
+    // 关闭本页面
+    closeNotifyShowall() {
+      this.display = "none";
+    },
+    // 重新加载数据
+    reload() {
+      this.loading = true;
+      setTimeout(() => {
+        this.loading = false;
+      }, 1000);
+    },
+    // 点击每一行
+    clickTr(detailMessageIndex) {
+      this.notifyShowallDetail.detailMessageList.forEach((item) => {
+        item.cls1 = "";
+      });
+      this.notifyShowallDetail.detailMessageList[detailMessageIndex].cls1 =
+        "row-selected";
+    },
+    // 鼠标移入表格每一行
+    mouseenterTr(detailMessageIndex) {
+      if (
+        !this.notifyShowallDetail.detailMessageList[detailMessageIndex].cls1
+      ) {
+        this.notifyShowallDetail.detailMessageList[detailMessageIndex].cls1 =
+          "row-hover";
+      }
+    },
+    // 鼠标移出表格每一行
+    mouseleaveTr(detailMessageIndex) {
+      if (
+        this.notifyShowallDetail.detailMessageList[
+          detailMessageIndex
+        ].cls1.includes("row-hover")
+      ) {
+        this.notifyShowallDetail.detailMessageList[detailMessageIndex].cls1 =
+          "";
+      }
+    },
+    // 排序
+    sort(e) {
+      console.log(e.srcElement);
+      this.maskDisplay = 'block'
+      this.loading = true
+      setTimeout(() => {
+        this.maskDisplay = 'none'
+        this.loading = false;
+      }, 1000);
+    },
+    // 页面最大化
+    maxWindow(){
+        this.top = '40px'
+        this.width = '100%'
+        this.height = 'calc(100%vh - 40px)'
+    }
+  },
+  components: {},
+  name: "NotifyShowall",
+};
+</script>
+
+<style lang="css" scoped>
+.v-window .v-window-body {
+  height: calc(100% - 40px);
+}
+</style>

src/component/Desktop/NotifyTrayPanel/index.vue

@@ -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">&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)
+                        "
+                        >详情</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>

src/component/Desktop/NotifyTrayPanelDetail/index.vue

@@ -0,0 +1,171 @@
+<template>
+  <div
+    class="
+      v-layout
+      sds-notify-detail-dialog
+      layout-window-app
+      v-window
+      active-win
+    "
+    style="
+      position: absolute;
+      width: 680px;
+      height: 420px;
+      top: 10px;
+      left: 10px;
+      z-index: 9050;
+    "
+    :style="{display:display}"
+  >
+    <div class="v-window-header-wrapper draggable">
+      <div class="app-icon"></div>
+      <div class="v-window-header-text">
+        <div class="v-window-header-title">事件详情</div>
+      </div>
+
+      <div class="window-header-tool-wrapper light">
+        <div class="tool close" @click="closeNotifyDetail"></div>
+      </div>
+    </div>
+    <div class="v-window-body" v-if="notifyTrayPanelDetail.detailMessage.length">
+      <div class="v-trap-focus-indicator"></div>
+      <div class="v-trap-focus-body">
+        <div
+          role="application"
+          class="v-trap-focus-indicator"
+        ></div>
+        <div
+          class="v-layout detail-panel layout-panel-content v-panel"
+          style="--svc-layout-height: 100%"
+        >
+          <div class="v-spin-wrapper circle v-panel-wrapper">
+            <div class="v-spin-wrapper-masking" style="display: none"></div>
+            <div
+              class="v-layout layout-body-wrapper layout-panel-body"
+              style="
+                --panel-in-tabs-padding-top: 0;
+                --svc-layout-padding: 16px 20px 6px 20px;
+                --svc-layout-margin: 0 0 0 0;
+              "
+            >
+              <div class="body-wrapper">
+                <div class="v-ps ps">
+                  <form
+                    class="v-layout layout-form v-form v-form-horizontal"
+                    style=""
+                  >
+                    <div class="v-form-item">
+                      <div class="v-form-item-label">
+                        <label for="">类别：</label>
+                      </div>
+                      <div class="v-form-item-input">
+                        <div class="v-form-item-control v-form-displayfield">
+                          <div>{{notifyTrayPanelDetail.detailMessage[0].title}}</div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="v-form-item">
+                      <div class="v-form-item-label">
+                        <label for="">主题：</label>
+                      </div>
+                      <div class="v-form-item-input">
+                        <div class="v-form-item-control v-form-displayfield">
+                          <div>
+                            <div v-html="notifyTrayPanelDetail.detailMessage[0].text"></div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="v-form-item">
+                      <div class="v-form-item-label">
+                        <label for="">时间：</label>
+                      </div>
+                      <div class="v-form-item-input">
+                        <div class="v-form-item-control v-form-displayfield">
+                          <div>{{notifyTrayPanelDetail.detailMessage[0].time1}}</div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="v-form-item">
+                      <div class="v-form-item-input">
+                        <div class="v-form-item-control v-form-displayfield">
+                          <div>
+                            <div class="detail-mail-content" v-html="notifyTrayPanelDetail.detailMessage[0].message"></div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </form>
+                  <div class="ps__rail-x" style="left: 0px; bottom: 0px">
+                    <div
+                      class="ps__thumb-x"
+                      style="left: 0px; width: 0px"
+                    ></div>
+                  </div>
+                  <div class="ps__rail-y" style="top: 0px; right: 0px">
+                    <div
+                      class="ps__thumb-y"
+                      style="top: 0px; height: 0px"
+                    ></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="
+                v-layout
+                layout-panel-fbar
+                fbar-wrapper fbar-wrapper--fluid
+              "
+            >
+              <div class="pull-right">
+                <button
+                  type="button"
+                  class="v-btn v-btn-footbar v-btn-grey"
+                  @click="closeNotifyDetail"
+                >
+                  <span> 关闭 </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="v-trap-focus-indicator"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  mounted(){
+    this.$bus.on("openNotifyDetail",this.openNotifyDetail);
+  },
+  data() {
+    return {
+      display: 'none',
+      notifyTrayPanelDetail:{
+        detailMessage: []
+      }
+    };
+  },
+  components: {},
+  methods:{
+    // 打开本页面
+    openNotifyDetail(detailMessage){
+      this.display = 'block'
+      console.log(detailMessage)
+      this.notifyTrayPanelDetail.detailMessage[0] = detailMessage
+    },
+    // 关闭本页面
+    closeNotifyDetail(){
+      this.display = 'none'
+    },
+  }
+};
+</script>
+<style lang="css" scoped>
+  .v-window .v-window-body{
+    height: 380px;
+  }
+</style>