From 9a76b87c9c4e3b1035324eefcaf1bb07d653d8d5 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期一, 28 十月 2024 10:11:53 +0800
Subject: [PATCH] Web 用户端
---
src/layout/component/header/Header.vue | 144 +++++++++++++++++++++++++++++++++++++++--------
1 files changed, 118 insertions(+), 26 deletions(-)
diff --git a/src/layout/component/header/Header.vue b/src/layout/component/header/Header.vue
index fc620a1..23f5564 100644
--- a/src/layout/component/header/Header.vue
+++ b/src/layout/component/header/Header.vue
@@ -1,7 +1,16 @@
<template>
- <div class="top_text">
+ <div class="top_text flex justify-between px-6 items-center">
+ <div v-if="routerMeta.showTitle" class="font-bold flex items-center cursor-pointer" @click="goBack">
+ <span class="flex-center">
+ <SvgIcon name="ele-ArrowLeft" />
+ </span>
+ <span class="text-sm">
+ {{ routerMeta.title }}
+ </span>
+ </div>
+
<div class="notice">
- <el-badge :value="3">
+ <el-badge :value="`${state.announcementList.length}`">
<el-button link size="small" icon="ele-Message" class="set-notice" @click="handleAnnouncementClick">绯荤粺鍏憡</el-button>
</el-badge>
<div class="notice_box notice_box_show" v-show="state.isShowAnnouncement">
@@ -9,43 +18,87 @@
<span>鏈�鏂板叕鍛�</span>
</div>
<div class="notice_box_body">
- <div class="notice_item" v-for="item in state.announcementList" :key="item.ID">
- <p>{{ item.Content }}</p>
- <p class="text-right">
- <span>{{ item.Time }}</span>
+ <div
+ class="notice_item"
+ v-for="item in state.announcementList"
+ :key="item.notify_id"
+ @click="announcementContentClick(item)"
+ >
+ <div class="flex items-center">
+ <p class="set-circle"></p>
+ <p>{{ item.notify_message }}</p>
+ </div>
+
+ <p class="text-right mr-[19px]">
+ <span>{{ item.notify_time }}</span>
</p>
</div>
</div>
</div>
</div>
+ <el-dialog
+ v-model="state.isAnnouncementDialog"
+ width="500"
+ :before-close="handleCloseAnnouncement"
+ :modal="false"
+ title="鍏憡鍐呭"
+ :align-center="true"
+ >
+ <div class="set-content">
+ <span class="notice-content">{{ state.announcementContent }}</span>
+ </div>
+ <template #footer>
+ <p class="text-right text-[#555]">
+ <span>{{ state.announcementTime }}</span>
+ </p>
+ </template>
+ </el-dialog>
</div>
</template>
<script setup lang="ts">
-import { reactive } from 'vue';
+import { computed, onMounted, reactive } from 'vue';
+import { systemNotifyList } from '/@/api/ai/chat';
+import router from '/@/router';
let state = reactive({
isShowAnnouncement: false,
- announcementList: [
- {
- ID: 1,
- Content: '灏婃暚鐨勭敤鎴凤紝濡傛灉閬囧埌涓婁紶鏂囦欢澶辫触鐨勯敊璇�(pdf銆佸浘鐗囥�佽亰澶╄褰曠瓑)锛岃鍒锋柊涓�涓嬬綉椤靛啀鎿嶄綔銆�',
- Time: '2021-08-10',
- },
- {
- ID: 2,
- Content: '姘村埄宸ョ▼鏂藉伐鐜板満瀹夊叏宸ヤ綔瑕佺偣',
- Time: '2021-08-10',
- },
- {
- ID: 3,
- Content: '姘村埄宸ョ▼鏂藉伐鐜板満瀹夊叏宸ヤ綔瑕佺偣',
- Time: '2021-08-10',
- },
- ],
+ isAnnouncementDialog: false,
+ announcementList: [],
+ announcementContent: '',
+ announcementTime: '',
});
+
+const getSystemNotify = async () => {
+ const res = await systemNotifyList();
+ res.messages?.forEach((element) => {
+ element.notify_time = element.notify_time.slice(0, 10);
+ });
+ state.announcementList = res.messages?.sort(sortData).slice(0, 5) ??[];
+};
+const routerMeta = computed(() => router.currentRoute.value.meta);
const handleAnnouncementClick = () => {
state.isShowAnnouncement = !state.isShowAnnouncement;
};
+
+const goBack = () => {
+ router.back();
+};
+//鏍规嵁鎸囧畾瀛楁 瑙勫垯鎺掑簭 杩欓噷鏄幏鍙栨椂闂寸殑鏃堕棿鎴崇劧鍚庢瘮杈�
+function sortData(a, b) {
+ return new Date(b.notify_time).getTime() - new Date(a.notify_time).getTime();
+}
+//鍏憡鍐呭鐐瑰嚮浜嬩欢
+const announcementContentClick = (item) => {
+ state.announcementContent = item.notify_message;
+ state.announcementTime = item.notify_time.slice(0, 10);
+ state.isAnnouncementDialog = true;
+};
+const handleCloseAnnouncement = () => {
+ state.isAnnouncementDialog = false;
+};
+onMounted(() => {
+ getSystemNotify();
+});
</script>
<style scoped lang="scss">
.top_text {
@@ -55,6 +108,7 @@
top: 0;
z-index: 10;
}
+
.notice {
position: fixed;
top: 18px;
@@ -69,8 +123,14 @@
}
.notice_box_show {
width: 300px !important;
- height: 400px !important;
+ height: 470px !important;
+ // height: 100% !important;
padding: 0 20px 10px;
+ ::-webkit-scrollbar {
+ height: 0;
+ width: 0;
+ color: transparent;
+ }
}
.notice_box {
position: absolute;
@@ -85,6 +145,7 @@
background: #fff;
display: block;
-webkit-transition: all 0.3s;
+
-o-transition: all 0.3s;
transition: all 0.3s;
overflow: hidden;
@@ -100,14 +161,45 @@
.notice_item {
cursor: pointer;
padding: 10px;
- width: 280px;
+ width: 272px;
border-top: 1px solid #efefef;
color: #767a97;
position: relative;
+ box-sizing: border-box;
line-height: 19px;
font-size: 12px;
+ .set-circle {
+ width: 3px;
+ height: 3px;
+ position: absolute;
+ top: 17px;
+ left: 0;
+ transform: scale(0.8) translate(50%, -50%);
+ display: block;
+ padding: 2px;
+ min-width: 3px;
+ min-height: 3px;
+ text-align: center;
+ border-radius: 50%;
+ background: #ff423d;
+ color: #fff;
+ font-size: 12px;
+ }
}
}
}
}
+
+.set-content {
+ padding: 0px 20px;
+ .notice-content {
+ white-space: pre-wrap;
+ font-size: 14px;
+ }
+}
+:deep(.el-dialog__footer) {
+ border-top: unset;
+ padding: 10px 20px 20px;
+ box-sizing: border-box;
+}
</style>
--
Gitblit v1.9.3