From 07dd9d35c22d3082693b34d674e155f0211c364c Mon Sep 17 00:00:00 2001 From: thiszhc <2029364173@qq.com> Date: Thu, 2 Nov 2023 10:36:09 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E5=B7=B2=E8=AF=BB/=E6=9C=AA?= =?UTF-8?q?=E8=AF=BB=E7=8A=B6=E6=80=81=EF=BC=8C=E5=88=A0=E9=99=A4=E4=B8=8D?= =?UTF-8?q?=E5=BF=85=E8=A6=81=E7=9A=84=E4=B8=9C=E8=A5=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.development | 5 +-- .env.production | 5 +-- src/layout/components/Navbar.vue | 2 +- src/layout/components/notice/index.vue | 36 +++++++++++----- src/store/modules/notice.ts | 9 ++++ src/utils/websocket.ts | 1 + src/views/index.vue | 2 +- src/views/tool/webSocket/index.vue | 59 -------------------------- 8 files changed, 39 insertions(+), 80 deletions(-) delete mode 100644 src/views/tool/webSocket/index.vue diff --git a/.env.development b/.env.development index e160334..dd1d065 100644 --- a/.env.development +++ b/.env.development @@ -22,7 +22,4 @@ VITE_APP_PORT = 80 VITE_APP_RSA_PUBLIC_KEY = 'MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAKoR8mX0rGKLqzcWmOzbfj64K8ZIgOdHnzkXSOVOZbFu/TJhZ7rFAN+eaGkl3C4buccQd/EjEsj9ir7ijT7h96MCAwEAAQ==' # 客户端id -VITE_APP_CLIENT_ID = 'e5cd7e4891bf95d1d19206ce24a7b32e' - -#websocket地址 -VITE_APP_WEBSOCKET_URL = '/resource/websocket' \ No newline at end of file +VITE_APP_CLIENT_ID = 'e5cd7e4891bf95d1d19206ce24a7b32e' \ No newline at end of file diff --git a/.env.production b/.env.production index 5a39bd0..0778591 100644 --- a/.env.production +++ b/.env.production @@ -25,7 +25,4 @@ VITE_APP_PORT = 80 VITE_APP_RSA_PUBLIC_KEY = 'MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAKoR8mX0rGKLqzcWmOzbfj64K8ZIgOdHnzkXSOVOZbFu/TJhZ7rFAN+eaGkl3C4buccQd/EjEsj9ir7ijT7h96MCAwEAAQ==' # 客户端id -VITE_APP_CLIENT_ID = 'e5cd7e4891bf95d1d19206ce24a7b32e' - -#websocket地址 -VITE_APP_WEBSOCKET_URL = 'ws://127.0.0.1:8098/resource/websocket' \ No newline at end of file +VITE_APP_CLIENT_ID = 'e5cd7e4891bf95d1d19206ce24a7b32e' \ No newline at end of file diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index 013eb1c..7818fd4 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -183,7 +183,7 @@ const handleCommand = (command: string) => { //用深度监听 消息 watch(() => noticeStore.state.value.notices, (newVal, oldVal) => { - newNotice.value = newVal.length; + newNotice.value = newVal.filter((item: any) => !item.read).length; }, { deep: true }); diff --git a/src/layout/components/notice/index.vue b/src/layout/components/notice/index.vue index 58214bd..ef4a6a9 100644 --- a/src/layout/components/notice/index.vue +++ b/src/layout/components/notice/index.vue @@ -2,19 +2,24 @@
通知公告
-
全部已读
+
全部已读
-
前往通知公告中心
+
前往gitee
@@ -25,7 +30,8 @@ import { nextTick, onMounted, reactive } from "vue"; import useNoticeStore from '@/store/modules/notice'; const noticeStore = storeToRefs(useNoticeStore()); -const {clearNotice} = useNoticeStore(); +const {readAll} = useNoticeStore(); + // 定义变量内容 const state = reactive({ loading: false, @@ -42,10 +48,12 @@ const getTableData = async () => { state.loading = false; }; -// 全部已读点击 -const onAllReadClick = () => { - clearNotice(); - newsList.value = []; + +//点击消息，写入已读 +const onNewsClick = (item: any) => { + newsList.value[item].read = true; + //并且写入pinia + noticeStore.state.value.notices = newsList.value; }; // 前往通知中心点击 @@ -86,6 +94,7 @@ onMounted(() => { font-size: 13px; .content-box-item { padding-top: 12px; + display: flex; &:last-of-type { padding-bottom: 12px; } @@ -97,6 +106,11 @@ onMounted(() => { .content-box-time { color: var(--el-text-color-secondary); } + .item-conten { + width: 100%; + display: flex; + flex-direction: column; + } } } .foot-box { diff --git a/src/store/modules/notice.ts b/src/store/modules/notice.ts index 2f645a6..f3f8e5a 100644 --- a/src/store/modules/notice.ts +++ b/src/store/modules/notice.ts @@ -2,6 +2,7 @@ import { defineStore } from 'pinia'; interface NoticeItem { title?: string; + read: boolean; message: any; time: string; } @@ -19,6 +20,13 @@ export const useNoticeStore = defineStore('notice', () => { state.notices.splice(state.notices.indexOf(notice), 1); }; + //实现全部已读 + const readAll = () => { + state.notices.forEach((item) => { + item.read = true; + }); + }; + const clearNotice = () => { state.notices = []; }; @@ -26,6 +34,7 @@ export const useNoticeStore = defineStore('notice', () => { state, addNotice, removeNotice, + readAll, clearNotice }; }); diff --git a/src/utils/websocket.ts b/src/utils/websocket.ts index 0560ed4..90e86bf 100644 --- a/src/utils/websocket.ts +++ b/src/utils/websocket.ts @@ -124,6 +124,7 @@ export const websocketonmessage = () => { } addNotice({ message: msg, + read: false, time: new Date().toLocaleString() }); return msg; diff --git a/src/views/index.vue b/src/views/index.vue index 4896ef1..40c88a8 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -99,7 +99,7 @@ import { initWebSocket } from '@/utils/websocket'; onMounted(() => { - initWebSocket("ws://"+window.location.host+import.meta.env.VITE_APP_BASE_API+import.meta.env.VITE_APP_WEBSOCKET_URL); + initWebSocket("ws://"+window.location.host+import.meta.env.VITE_APP_BASE_API+"/resource/websocket"); }); const goTarget = (url:string) => { diff --git a/src/views/tool/webSocket/index.vue b/src/views/tool/webSocket/index.vue deleted file mode 100644 index 60d9a98..0000000 --- a/src/views/tool/webSocket/index.vue +++ /dev/null @@ -1,59 +0,0 @@ - - - -