meilan-web/src/views/dataBigScreen/dashboard/components/pageItems/HomePageWarning.vue

<template>
  <ChartsContainer title="紧急通知" class="home-page-warning">
    <!-- 紧急通知 -->
    <div class="urgent-notice" v-if="noticeList.length > 0">
    
  
      <div class="notice-carousel">
        <transition name="slide-up-down" mode="out-in">
          <div :key="currentNotice && currentNotice.noticeId" class="notice-content">
            {{ currentNotice && currentNotice.noticeTitle ? currentNotice.noticeTitle : '暂无通知' }}
          </div>
        </transition>
      </div>
    </div>
  </ChartsContainer>
</template>

<script setup>
import ChartsContainer from '../ChartsContainer.vue'
import { ref, onMounted, onUnmounted } from 'vue'
import { listNotice } from '@/api/system/notice'

// 紧急通知数据
const noticeList = ref([])
const currentIndex = ref(0)
const currentNotice = ref(null)
const timer = ref(null)

// 获取公告数据
const fetchNoticeData = async () => {
  try {
    const response = await listNotice({
      status: '0',
      noticeType: 1,
      pageSize: 999
    })

    // 假设response.rows包含公告列表
    noticeList.value = response.rows || []
    if (noticeList.value.length > 0) {
      currentNotice.value = noticeList.value[0]
      if (timer.value) {
        clearInterval(timer.value)
      }
      // 数据加载完成后启动轮播
      startCarousel()
    }
  } catch (error) {
    console.error('获取公告数据失败:', error)
  }
}

// 开始轮播
const startCarousel = () => {
  if (noticeList.value.length <= 1) return

  timer.value = setInterval(() => {
    currentIndex.value = (currentIndex.value + 1) % noticeList.value.length
    currentNotice.value = noticeList.value[currentIndex.value]
  }, 3000) // 3秒轮播一次
}

// 组件挂载时获取数据
onMounted(() => {
  fetchNoticeData()
})

// 组件卸载时清理定时器
onUnmounted(() => {
  if (timer.value) {
    clearInterval(timer.value)
  }
})
</script>

<style lang="scss" scoped>
.home-page-warning {
  width: 80%; /* 缩小宽度到80% */
  max-width: 400px; /* 设置最大宽度 */
  
  :deep(.chartsContainer) {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .urgent-notice {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid #044878;
    border-radius: 8px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;

    .notice-title {
      font-size: 16px;
      font-weight: bold;
      color: #35D8FF;
      white-space: nowrap;
    }

    .divider {
      width: 1px;
      height: 20px;
      background: #35D8FF;
    }

    .notice-carousel {
      flex: 1;
      overflow: hidden;
      height: 24px;
      line-height: 24px;
      position: relative;

      .notice-content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 14px;
        color: #35D8FF;
      }

      // 上下滚动动画
      .slide-up-down-enter-active,
      .slide-up-down-leave-active {
        transition: all 0.5s ease;
      }

      .slide-up-down-enter-from {
        transform: translateY(24px);
        opacity: 0;
      }

      .slide-up-down-leave-to {
        transform: translateY(-24px);
        opacity: 0;
      }
    }
  }
}
</style>