From fa3ac93010bea3805438ee3ab0a182bfbf7423da Mon Sep 17 00:00:00 2001
From: baoshiwei <baoshiwei@shlanbao.cn>
Date: 星期一, 27 五月 2024 16:19:31 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
src/layouts/default/header/components/notify/index.vue | 269 +++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 269 insertions(+), 0 deletions(-)
diff --git a/src/layouts/default/header/components/notify/index.vue b/src/layouts/default/header/components/notify/index.vue
new file mode 100644
index 0000000..466099c
--- /dev/null
+++ b/src/layouts/default/header/components/notify/index.vue
@@ -0,0 +1,269 @@
+<template>
+ <div :class="prefixCls">
+ <Badge :count="count" :overflowCount="9" :offset="[-4, 10]" :numberStyle="numberStyle" @click="clickBadge">
+ <BellOutlined />
+ </Badge>
+
+ <DynamicNotice ref="dynamicNoticeRef" v-bind="dynamicNoticeProps" />
+ <DetailModal @register="registerDetail" />
+
+ <sys-message-modal @register="registerMessageModal" @refresh="reloadCount"></sys-message-modal>
+ </div>
+</template>
+<script lang="ts">
+ import { computed, defineComponent, ref, unref, reactive, onMounted, getCurrentInstance } from 'vue';
+ import { Popover, Tabs, Badge } from 'ant-design-vue';
+ import { BellOutlined } from '@ant-design/icons-vue';
+ import { tabListData } from './data';
+ import { listCementByUser, editCementSend } from './notify.api';
+ import NoticeList from './NoticeList.vue';
+ import DetailModal from '/@/views/monitor/mynews/DetailModal.vue';
+ import DynamicNotice from '/@/views/monitor/mynews/DynamicNotice.vue';
+ import { useModal } from '/@/components/Modal';
+ import { useDesign } from '/@/hooks/web/useDesign';
+ import { useGlobSetting } from '/@/hooks/setting';
+ import { useUserStore } from '/@/store/modules/user';
+ import { connectWebSocket, onWebSocket } from '/@/hooks/web/useWebSocket';
+ import { readAllMsg } from '/@/views/monitor/mynews/mynews.api';
+ import { getToken } from '/@/utils/auth';
+ import md5 from 'crypto-js/md5';
+
+ import SysMessageModal from '/@/views/system/message/components/SysMessageModal.vue'
+
+ export default defineComponent({
+ components: {
+ Popover,
+ BellOutlined,
+ Tabs,
+ TabPane: Tabs.TabPane,
+ Badge,
+ NoticeList,
+ DetailModal,
+ DynamicNotice,
+ SysMessageModal,
+ },
+ setup() {
+ const { prefixCls } = useDesign('header-notify');
+ const instance: any = getCurrentInstance();
+ const userStore = useUserStore();
+ const glob = useGlobSetting();
+ const dynamicNoticeProps = reactive({ path: '', formData: {} });
+ const [registerDetail, detailModal] = useModal();
+ const listData = ref(tabListData);
+ const count = computed(() => {
+ let count = 0;
+ for (let i = 0; i < listData.value.length; i++) {
+ count += listData.value[i].count;
+ }
+ return count;
+ });
+
+ const [registerMessageModal, { openModal: openMessageModal }] = useModal();
+ function clickBadge(){
+ //娑堟伅鍒楄〃寮圭獥鍓嶅幓闄よ鏍�
+ for (let i = 0; i < listData.value.length; i++) {
+ listData.value[i].count = 0;
+ }
+ openMessageModal(true, {})
+ }
+
+ const popoverVisible = ref<boolean>(false);
+ onMounted(() => {
+ initWebSocket();
+ });
+
+ function mapAnnouncement(item) {
+ return {
+ ...item,
+ title: item.titile,
+ description: item.msgAbstract,
+ datetime: item.sendTime,
+ };
+ }
+
+ // 鑾峰彇绯荤粺娑堟伅
+ async function loadData() {
+ try {
+ let { anntMsgList, sysMsgList, anntMsgTotal, sysMsgTotal } = await listCementByUser({
+ pageSize: 5,
+ });
+ listData.value[0].list = anntMsgList.map(mapAnnouncement);
+ listData.value[1].list = sysMsgList.map(mapAnnouncement);
+ listData.value[0].count = anntMsgTotal;
+ listData.value[1].count = sysMsgTotal;
+ } catch (e) {
+ console.warn('绯荤粺娑堟伅閫氱煡寮傚父锛�', e);
+ }
+ }
+
+ loadData();
+
+ function onNoticeClick(record) {
+ try {
+ editCementSend(record.id);
+ loadData();
+ } catch (e) {
+ console.error(e);
+ }
+ if (record.openType === 'component') {
+ dynamicNoticeProps.path = record.openPage;
+ dynamicNoticeProps.formData = { id: record.busId };
+ instance.refs.dynamicNoticeRef?.detail(record.openPage);
+ } else {
+ detailModal.openModal(true, {
+ record,
+ isUpdate: true,
+ });
+ }
+ popoverVisible.value = false;
+ }
+
+ // 鍒濆鍖� WebSocket
+ function initWebSocket() {
+ let token = getToken();
+ //灏嗙櫥褰晅oken鐢熸垚涓�涓煭鐨勬爣璇�
+ let wsClientId = md5(token);
+ let userId = unref(userStore.getUserInfo).id + "_" + wsClientId;
+ // WebSocket涓庢櫘閫氱殑璇锋眰鎵�鐢ㄥ崗璁湁鎵�涓嶅悓锛寃s绛夊悓浜巋ttp锛寃ss绛夊悓浜巋ttps
+ let url = glob.domainUrl?.replace('https://', 'wss://').replace('http://', 'ws://') + '/websocket/' + userId;
+ connectWebSocket(url);
+ onWebSocket(onWebSocketMessage);
+ }
+
+ function onWebSocketMessage(data) {
+ if (data.cmd === 'topic' || data.cmd === 'user') {
+ //update-begin-author:taoyan date:2022-7-13 for: VUEN-1674銆愪弗閲峛ug銆戠郴缁熼�氱煡锛屼负浠�涔堝繀椤诲埛鏂板彸涓婅鎵嶆彁绀�
+ //鍚庡彴淇濆瓨鏁版嵁澶參 鍓嶇寤惰繜鍒锋柊娑堟伅
+ setTimeout(()=>{
+ loadData();
+ }, 1000)
+ //update-end-author:taoyan date:2022-7-13 for: VUEN-1674銆愪弗閲峛ug銆戠郴缁熼�氱煡锛屼负浠�涔堝繀椤诲埛鏂板彸涓婅鎵嶆彁绀�
+ }
+ }
+
+ // 娓呯┖娑堟伅
+ function onEmptyNotify() {
+ popoverVisible.value = false;
+ readAllMsg({}, loadData);
+ }
+ async function reloadCount(id){
+ try {
+ await editCementSend(id);
+ await loadData();
+ } catch (e) {
+ console.error(e);
+ }
+ }
+
+
+ return {
+ prefixCls,
+ listData,
+ count,
+ clickBadge,
+ registerMessageModal,
+ reloadCount,
+ onNoticeClick,
+ onEmptyNotify,
+ numberStyle: {},
+ popoverVisible,
+ registerDetail,
+ dynamicNoticeProps,
+ };
+ },
+ });
+</script>
+<style lang="less">
+ //noinspection LessUnresolvedVariable
+ @prefix-cls: ~'@{namespace}-header-notify';
+
+ .@{prefix-cls} {
+ padding-top: 2px;
+
+ &__overlay {
+ max-width: 340px;
+
+ .ant-popover-inner-content {
+ padding: 0;
+ }
+
+ .ant-tabs-nav {
+ margin-bottom: 12px;
+ }
+
+ .ant-list-item {
+ padding: 12px 24px;
+ transition: background-color 300ms;
+
+ }
+
+ .bottom-buttons {
+ text-align: center;
+ border-top: 1px solid #f0f0f0;
+ height: 42px;
+
+ .ant-btn {
+ border: 0;
+ height: 100%;
+
+ &:first-child {
+ border-right: 1px solid #f0f0f0;
+ }
+ }
+ }
+ }
+
+ .ant-tabs-content {
+ width: 300px;
+ }
+
+ .ant-badge {
+ font-size: 18px;
+
+ .ant-badge-count {
+ @badget-size: 16px;
+ width: @badget-size;
+ height: @badget-size;
+ min-width: @badget-size;
+ line-height: @badget-size;
+ padding: 0;
+
+ .ant-scroll-number-only > p.ant-scroll-number-only-unit {
+ font-size: 14px;
+ height: @badget-size;
+ }
+ }
+
+ .ant-badge-multiple-words {
+ padding: 0 0 0 2px;
+ font-size: 12px;
+ }
+
+ svg {
+ width: 0.9em;
+ }
+ }
+ }
+
+ // 鍏煎榛戞殫妯″紡
+ [data-theme='dark'] .@{prefix-cls} {
+ &__overlay {
+ .ant-list-item {
+ &:hover {
+ background-color: #111b26;
+ }
+ }
+
+ .bottom-buttons {
+ border-top: 1px solid #303030;
+
+ .ant-btn {
+ &:first-child {
+ border-right: 1px solid #303030;
+ }
+ }
+ }
+ }
+ }
+
+</style>
--
Gitblit v1.9.3