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

<template>
  <div class="comom-cnt">
    <div class="zdryBox">
      <ul class="ryBox" :infinite-scroll-distance="30" ref="carouselList" @mouseenter="stopAutoScroll"
        @mouseleave="startAutoScroll" v-loading="loading" v-infinite-scroll="loadList">
        <li v-for="item in personList" :key="item.id" @click="chooseItem(item)">
          <div>{{ item.ypyt }}</div>
          <div class="meta-info">{{ item.ypsj }}{{ item.cjrxm }}</div>
          <div>{{ item.ypyq }}</div>
        </li>
        <MOSTY.Empty :show="!loading && personList.length <= 0" :imgSize="100"></MOSTY.Empty>
      </ul>
      <!-- 触底加载更多数据 -->
      <div v-if="loadingMore" class="loading-more">加载中...</div>
    </div>
  </div>
</template>

<script setup>
import { tacticalGet } from '@/api/huiShangyp/tacticalApi.js'
import { defineProps, ref, reactive, onMounted, onBeforeUnmount } from 'vue';
import { useRouter } from 'vue-router'
import * as MOSTY from "@/components/MyComponents/index";
const router = useRouter()
const emit = defineEmits(["reversalPush"])
const reversalPush = () => {
  emit('reversalPush')
}

const props = defineProps({
  /** bglx  报告类型（01 战术研判 02 战略研判）  */
  bglx: {
    type: String,
    default: '01'
  }
})
/**
 * @typedef {Object} YpItem
 * @property {string} ypsj - 研判时间
 * @property {string} ypyt - 研判议题
 * @property {string} ypyq - 研判要求
 * @property {string} cjrxm - 创建人

 */

/** @type {YpItem[]} 战术，战略研判*/
const personList = ref([]);
const loading = ref(false);
const loadingMore = ref(false);
const total = ref(0);
const pageNum = ref(1);

// 滚动相关
const carouselList = ref(null);
const isAutoScrolling = ref(false);
let scrollTimer = null;

// 获取数据
const getList = (type) => {
  loading.value = !type ? true : false;
  loadingMore.value = !!type;
  tacticalGet({ pageSize: 10, pageCurrent: pageNum.value, bglx: props.bglx }).then(res => {
    loading.value = false;
    loadingMore.value = false;
    /** @type {YpItem[]} 战术，战略研判*/
    let arr = Array.isArray(res?.records) ? res.records : [];
    personList.value = pageNum.value == 1 ? arr : personList.value.concat(arr);
    total.value = res?.total || 0;
    if(pageNum.value == 1 && total.value > 3 ){
      startAutoScroll();
    }
  }).catch(() => {
    loading.value = false;
    loadingMore.value = false;
  })
};

// 触底加载
const loadList = () => {
  if (personList.value.length == total.value || loadingMore.value) return;
  pageNum.value++;
  getList(true)
};

// 自动滚动函数
const autoScroll = () => {
  if (!carouselList.value || !isAutoScrolling.value) return;
  const container = carouselList.value;
  const speed = 1; // 滚动速度
  // 滚动容器
  container.scrollTop += speed;
  // 判断是否滚动到底部，如果是则回到顶部重新开始
  if (container.scrollTop >= container.scrollHeight - container.clientHeight - 5) {
    container.scrollTop = 0;
  }
};

// 开始自动滚动
const startAutoScroll = () => {
  if(total.value < 3) return;
  if (isAutoScrolling.value || !carouselList.value) return;
  isAutoScrolling.value = true;
  // 清除可能存在的定时器
  if (scrollTimer) clearInterval(scrollTimer);
  // 设置新的定时器，控制滚动速度
  scrollTimer = setInterval(autoScroll, 30);
};

// 停止自动滚动
const stopAutoScroll = () => {
  isAutoScrolling.value = false;
  if (scrollTimer) {
    clearInterval(scrollTimer);
    scrollTimer = null;
  }
};

// 点击项
const chooseItem = (item) => {
  stopAutoScroll(); // 点击时停止自动滚动
  const path = props.bglx === '01' ? '/tacticalResearch' : '/strategicResearch'
  router.push({
    path: path,
    query: { id: item.id }
  })
};

// 生命周期
onMounted(() => {
  getList();
});

// 组件卸载前清除定时器
onBeforeUnmount(() => {
  stopAutoScroll();
});
</script>

<style>
.el-loading-mask {
  background: rgba(0, 0, 0, 0.5);
}
</style>

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

.loading-more {
  text-align: center;
  padding: 8px;
  color: #83bff6;
  background: rgba(0, 0, 0, 0.3);
  font-size: 12px;
}

.zdryBox {
  height: 100%;
  position: relative;
  overflow: hidden;

  .ryBox {
    height: 100%;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;

    // 隐藏滚动条但保留滚动功能
    &::-webkit-scrollbar {
      display: none;
    }

    -ms-overflow-style: none; // IE和Edge
    scrollbar-width: none; // Firefox

    li {
      padding: 12px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      transition: background-color 0.3s;
      cursor: pointer;
      box-sizing: border-box;

      &:hover {
        background-color: rgba(20, 107, 190, 0.2);
      }

      >div:first-child {
        font-weight: bold;
        color: #fff;
        margin-bottom: 8px;
        font-size: 14px;
        /* 标题限制1行，超出用省略号 */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .meta-info {
        text-align: right;
        color: #83bff6;
        font-size: 12px;
        margin-bottom: 8px;
      }

      >div:last-child {
        color: rgba(255, 255, 255, 0.8);
        font-size: 13px;
        line-height: 1.6;
        /* 内容限制3行，超出用省略号 */
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}

.switchover {
  cursor: pointer;
  font-size: 14px;
  margin-left: 20px;
  color: rgb(255, 146, 4);
}
</style>