sgxt_web/src/views/home/model/WarningDistrict.vue

<template>
  <div class="comom-title">
    <span class="title">预警地域统计</span>
  </div>
  <div class="comom-cnt zdryBox">
    <!-- 滚动容器 -->
    <div class="scroll-container" @mouseenter="mEnter" @mouseleave="mLeave">
      <div class="scroll-wrapper" :style="{ transform: `translateY(-${scrollTop}px)` }">
        <ul ref="scrollItemBox" class="scroll-content">
          <!-- 数据项 -->
          <li v-for="(item, index) in dataList" :key="`first-${index}`" class="warning-item">
            <div class="rank-number"> {{ `${index >= 10 ? index : '0' + (index + 1)}` }}</div>
            <div class="bar">
              <div class="qymc">{{ item.name }}</div>
              <div class="jutz">
                <div class="jutf">
                  <div class="jutf-bar" :style="{ width: item.bfb }"></div>
                </div>
                <div class="numbers">
                  {{ item.value }}
                </div>
              </div>
            </div>
          </li>
          <!-- 复制的数据项用于无缝滚动 -->
          <li v-for="(item, index) in dataList" :key="`first-${index}`" class="warning-item">
            <div class="rank-number">
              {{ `${index >= 10 ? index : '0' + (index + 1)}` }}</div>
            <div class="bar">
              <div class="qymc">{{ item.name }}</div>
              <div class="jutz">
                <div class="jutf">
                  <div class="jutf-bar" :style="{ width: item.bfb }"></div>
                </div>
                <div class="numbers">
                  {{ item.value }}
                </div>
              </div>
            </div>

          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { tbYjxxGetBmtj } from '@/api/yj'
// 滚动相关变量
const scrollTop = ref(0); // 列表滚动高度
const speed = ref(60); // 滚动速度
const copyHtml = ref(''); // 复制的HTML内容
const scrollItemBox = ref(null); // 滚动项容器引用
let timer = null;

// 生命周期钩子
onMounted(() => {
  // 初始化滚动
  initScroll();
});

// 组件卸载时清除定时器
onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
  }
});

// 初始化滚动
function initScroll() {
  setTimeout(() => {
    if (scrollItemBox.value) {
      copyHtml.value = scrollItemBox.value.innerHTML;
      startScroll();
    }
  }, 100);
}
const dataList = ref([])
// 鼠标移入停止滚动
function mEnter() {
  if (timer) {
    clearInterval(timer);
    timer = null;
  }
}

// 鼠标移出继续滚动
function mLeave() {
  startScroll();
}
const gettbYjxxGetBmtj = () => {
  tbYjxxGetBmtj({}).then(res => {
    const total = res.reduce((acc, cur) => acc + Number(cur.sl), 0);
    dataList.value = res.map(item => {
      let bfb = total > 0 ? item.sl / total * 100 : 0
      if (bfb > 100) {
        bfb = 100
      }
      return {
        value: item.sl,
        name: item.ssbmmc,
        bfb: bfb + '%'
      }
    })
  })
}
gettbYjxxGetBmtj()
// 开始滚动
function startScroll() {
  if (timer) return;
  timer = setInterval(() => {
    scrollTop.value++;
    // 获取需要滚动的盒子的高度
    if (scrollItemBox.value) {
      const scrollHeight = scrollItemBox.value.offsetHeight / 2; // 因为有两份相同数据
      // 当滚动高度大于等于盒子高度时，从头开始滚动
      if (scrollTop.value >= scrollHeight) {
        scrollTop.value = 0;
      }
    }
  }, speed.value);
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/homeScreen.scss";

.zdryBox {
  background: #052249;
  height: 100%;
  padding: 10px;

  // 滚动容器样式
  .scroll-container {
    height: 100%;
    overflow: hidden;
    position: relative;
    border-radius: 8px;
    background: rgba(8, 42, 85, 0.5);
    // padding: 10px;
  }

  // 滚动包装器
  .scroll-wrapper {
    width: 100%;
    transition: transform 0s linear;
  }

  // 滚动内容样式
  .scroll-content {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  // 警告列表项样式
  .warning-item {
    display: flex;
    // align-items: center;
    margin-top: 12px;
    margin-bottom: 12px;
    padding: 5px 10px;
    justify-content: space-between;
    list-style: none;
    background: linear-gradient(90deg, rgba(10, 45, 90, 0.8), rgba(15, 50, 100, 0.5));
    border-left: 3px solid transparent;
    border-radius: 6px;
    // transition: all 0.3s ease;
    backdrop-filter: blur(4px);

    // // 排名1-3的特殊样式
    // &:nth-child(1),
    // &:nth-child(11) {
    //   border-left-color: #FFD700; // 金色
    //   background: linear-gradient(90deg, rgba(255, 215, 0, 0.15), rgba(15, 50, 100, 0.5));
    // }

    // &:nth-child(2),
    // &:nth-child(12) {
    //   border-left-color: #C0C0C0; // 银色
    //   background: linear-gradient(90deg, rgba(192, 192, 192, 0.15), rgba(15, 50, 100, 0.5));
    // }

    // &:nth-child(3),
    // &:nth-child(13) {
    //   border-left-color: #CD7F32; // 铜色
    //   background: linear-gradient(90deg, rgba(205, 127, 50, 0.15), rgba(15, 50, 100, 0.5));
    // }
  }

  // 排名数字样式
  .rank-number {
    width: 40px;
    border-radius: 4px;
    margin-right: 10px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    position: relative;
    font-family: "YSBTH";
    overflow: hidden;
    background: url('~@/assets/images/tmd.png') no-repeat center center;
    // background-image: url('~@/assets/images/tmd.png') center center no-repeat;
    background-size: 100% 100%;

  }

}

.bar {
  flex: 1;

  .qymc {
    font-size: 16px;
  }

  .jutz {
    display: flex;
    align-items: center;

    .jutf {
      height: 10px;
      flex: 1;
      background-color: rgba(0, 108, 151, 0.165);

      .jutf-bar {
        background: linear-gradient(0deg, #fddb92 0%, #d1fdff 100%);
        width: 100%;
        height: 100%;
      }
    }

    .numbers {
      font-family: "YSBTH";
      width: 55px;
      text-align: center;
      font-size: 18px;

    }

  }

}
</style>