分享模式

wujingjing

2024-11-07 0ad399d1b125cdcad2e98c8c874d475b054485dc

 src/layout/component/header/Header.vue

@@ -9,8 +9,8 @@
         </span>
      </div>

      <div class="notice">
         <el-badge :value="3">
      <div class="notice" v-if="chatDisplayMode==='default'">
         <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">
@@ -18,42 +18,64 @@
               <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 { computed, reactive } from 'vue';
import { computed, onMounted, reactive } from 'vue';
import { systemNotifyList } from '/@/api/ai/chat';
import router from '/@/router';
import { chatDisplayMode } from '/@/stores/chatRoom';
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;
@@ -62,6 +84,22 @@
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 {
@@ -69,8 +107,9 @@
   height: 42px;
   background-color: #fff;
   top: 0;
   z-index: 10;
   z-index: 0;
}

.notice {
   position: fixed;
   top: 18px;
@@ -85,8 +124,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;
@@ -101,6 +146,7 @@
      background: #fff;
      display: block;
      -webkit-transition: all 0.3s;

      -o-transition: all 0.3s;
      transition: all 0.3s;
      overflow: hidden;
@@ -116,14 +162,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>