<template>
|
<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="`${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">
|
<div class="notice_box_header">
|
<span>最新公告</span>
|
</div>
|
<div class="notice_box_body">
|
<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 { computed, onMounted, reactive } from 'vue';
|
import { systemNotifyList } from '/@/api/ai/chat';
|
import router from '/@/router';
|
let state = reactive({
|
isShowAnnouncement: false,
|
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 {
|
width: 100%;
|
height: 42px;
|
background-color: #fff;
|
top: 0;
|
z-index: 10;
|
}
|
|
.notice {
|
position: fixed;
|
top: 18px;
|
right: 30px;
|
z-index: 12;
|
.set-notice {
|
font-size: 12px;
|
font-weight: 400;
|
letter-spacing: 0;
|
line-height: 17.38px;
|
color: #9598b3;
|
}
|
.notice_box_show {
|
width: 300px !important;
|
height: 470px !important;
|
// height: 100% !important;
|
padding: 0 20px 10px;
|
::-webkit-scrollbar {
|
height: 0;
|
width: 0;
|
color: transparent;
|
}
|
}
|
.notice_box {
|
position: absolute;
|
z-index: 12;
|
top: calc(100% + 20px);
|
right: -10px;
|
width: 0;
|
height: 0;
|
border-radius: 5px;
|
-webkit-box-shadow: 0 0 5px #ddd;
|
box-shadow: 0 0 5px #ddd;
|
background: #fff;
|
display: block;
|
-webkit-transition: all 0.3s;
|
|
-o-transition: all 0.3s;
|
transition: all 0.3s;
|
overflow: hidden;
|
&_header {
|
line-height: 40px;
|
font-size: 14px;
|
height: 40px;
|
color: #0084ff;
|
}
|
&_body {
|
height: calc(100% - 40px);
|
// overflow: auto;
|
.notice_item {
|
cursor: pointer;
|
padding: 10px;
|
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>
|
