sl-sfy-safety/src/views/disaster/overview/PageOverview.vue

<template>
  <div class="overview-container">
    <NotificationSlider
      class="overview-container__header"
      :notifications="notifications"
      @remove-notification="handleRemoveNotification"
    />
    <div class="overview-container__main">
      <div class="left-info-section">
        <WeatherCard class="weather-section" />
        <div class="left-info-section__bottom-box">
          <DisasterWarningRecords class="disaster-warning-records" />
          <div class="bottom-box--right-item">
            <DisasterCheckingLists class="disaster-checking-lists" />
            <NoticeAndRules class="notice-and-rules" />
          </div>
        </div>
      </div>
      <KeyMonitorArea class="right-info-section" />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import { useRouter } from 'vue-router';
  import NotificationSlider, { Notification } from '@/components/NotificationSlider.vue';
  import WeatherCard from './components/WeatherCard.vue';
  import DisasterWarningRecords from './components/DisasterWarningRecords.vue';
  import DisasterCheckingLists from './components/DisasterCheckingLists.vue';
  import NoticeAndRules from './components/NoticeAndRules.vue';
  import KeyMonitorArea from './components/KeyMonitorArea.vue';
  import { UnReadNoticeInfo, getUnReadNoticeInfoList, updateUnReadNoticeInfoStatus } from '@/api/disaster-overview';
  import { getUrlByInfoType, InfoType, UnReadNoticeInfoStatus } from './components/useUnReadNotice';

  // 消息轮播列表
  const unReadNoticeInfoList = ref<UnReadNoticeInfo[]>([]);
  const notifications = ref<Notification[]>([]);
  const router = useRouter();

  // 消息轮播点击跳转
  const handleRemoveNotification = (id: number) => {
    const targetInfoType = unReadNoticeInfoList.value.find((item) => item.id === id)?.infoType;
    const targetSourceId = unReadNoticeInfoList.value.find((item) => item.id === id)?.sourceId;
    if (!targetInfoType) return;
    if (targetInfoType === InfoType.NOTICE_AND_RULE) {
      router.push({
        path: getUrlByInfoType(targetInfoType),
        query: {
          id: targetSourceId,
        },
      });
    } else {
      router.push({
        path: getUrlByInfoType(targetInfoType),
      });
    }
    updateUnReadNoticeInfoStatus({
      id: id,
      status: UnReadNoticeInfoStatus.READ,
    });
  };

  onMounted(async () => {
    const res = await getUnReadNoticeInfoList();
    unReadNoticeInfoList.value = res;
    notifications.value = res.map((item) => ({
      id: item.id,
      title: item.infoOutline,
      time: item.createdAt,
    }));
  });
</script>

<style scoped lang="scss">
  .overview-container {
    width: 100%;
    height: 100%;

    .overview-container__header {
      width: 100%;
      height: 32px;
      background: #fffbe6;
      border-radius: 8px;
      border: 1px solid #fff1b8;
      margin-bottom: 10px;
    }

    .overview-container__main {
      width: 100%;
      height: calc(100% - 42px);
      display: flex;
    }
  }

  .left-info-section {
    width: 75%;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-right: 10px;

    .weather-section {
      margin-bottom: 10px;
    }

    .left-info-section__bottom-box {
      height: calc(100% - 277px);
      display: flex;

      .disaster-warning-records {
        width: 30%;
        margin-right: 10px;
        background: #fff;
        border-radius: 4px;
      }

      .bottom-box--right-item {
        width: calc(70% - 10px);

        .disaster-checking-lists {
          height: 65%;
          // background-color: #fff;
          border-radius: 4px;
          margin-bottom: 10px;
        }

        .notice-and-rules {
          height: calc(35% - 10px);
          background-color: #fff;
          border-radius: 4px;
        }
      }
    }
  }

  .right-info-section {
    width: 25%;
    height: 100%;
    background-color: #fff;
    border-radius: 4px;
  }
</style>