newcpms/ui/src/views/ps/home/dashboard/NoticeChart.vue

<template>
  <div>
    <div :style="{height:height,width:width}" class="text-container">
      <ul class="allNotice" @mouseleave="handleMouseLeave" @mouseover="handleMouseOver">
        <!-- 原始列表 -->
        <li v-for="(item,index) in noticeList" :key="'original-' + index" class="notice-item">
          <span>截止日期：{{ parseTime(item.deadline, '{yyyy}-{mm}-{dd}') }}
            <el-tag size="medium" effect="plain">{{ item.planName }}</el-tag>
          </span>
          <span>
            <el-tag effect="dark" size="mini" type="success" v-if="item.status == 1">已完成</el-tag>
            <el-tag effect="dark" size="mini" type="danger" v-if="item.status == 0">未完成</el-tag>
          </span>
        </li>
        <!-- 复制一份列表实现无缝滚动 -->
        <li v-for="(item,index) in noticeList" :key="'copy-' + index" class="notice-item" v-if="noticeList.length>10">
          <span>截止日期：{{ parseTime(item.deadline, '{yyyy}-{mm}-{dd}') }}
            <el-tag size="medium" effect="plain">{{ item.planName }}</el-tag>
          </span>
          <span>
            <el-tag effect="dark" size="mini" type="success" v-if="item.status == 1">已完成</el-tag>
            <el-tag effect="dark" size="mini" type="danger" v-if="item.status == 0">未完成</el-tag>
          </span>
        </li>
      </ul>
    </div>

  </div>
</template>

<script>
import {listPlan} from "@/api/ps/patrol/plan";

export default {
  name: "NoticeChart",
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '570px'
    }
  },
  data() {
    return {
      // 查询参数
      queryParams: {
        planMonth: new Date().getMonth() + 1, planYear: new Date().getFullYear()
      },
      // 公示公告列表
      noticeList: [],
      styleElement: null,
    }
  },
  created() {
    this.listNoticeNoPage();
  },
  beforeDestroy() {
    // 清理动态添加的 style 元素
    if (this.styleElement && this.styleElement.parentNode) {
      this.styleElement.parentNode.removeChild(this.styleElement);
    }
  },
  methods: {
    handleMouseOver() {
      let elem = document.querySelector('.allNotice');
      if (elem) {
        elem.style['animation-play-state'] = 'paused';
      }
    },
    handleMouseLeave() {
      let elem = document.querySelector('.allNotice');
      if (elem) {
        elem.style['animation-play-state'] = 'running';
      }
    },
    listNoticeNoPage() {
      listPlan(this.queryParams).then(response => {
        this.noticeList = response.rows || [];

        // 判断是否需要滚动
        if (this.noticeList.length > 10) {
          this.$nextTick(() => {
            // 清理之前的 style
            if (this.styleElement && this.styleElement.parentNode) {
              this.styleElement.parentNode.removeChild(this.styleElement);
            }

            let elem = document.querySelector('.allNotice');
            if (!elem) return;

            // 每个 li 的高度约为 50px（包括margin）
            const itemHeight = 50;
            const listHeight = this.noticeList.length * itemHeight;

            // 设置滚动时间（可根据列表长度调整）
            const scrollTime = this.noticeList.length * 2;

            // 创建无缝滚动的 keyframes
            // 从 0 滚动到 -listHeight，然后重新开始
            const keyframeName = 'seamlessScroll-' + Date.now();
            const myFirstkeyframes = `@keyframes ${keyframeName} {
              0% {
                transform: translateY(0);
              }
              100% {
                transform: translateY(-${listHeight}px);
              }
            }`;

            // 动态插入 keyframes
            this.styleElement = document.createElement("style");
            this.styleElement.setAttribute("type", "text/css");
            this.styleElement.textContent = myFirstkeyframes;
            document.head.appendChild(this.styleElement);

            // 应用动画
            elem.style['animation'] = `${keyframeName} ${scrollTime}s linear infinite`;
          });
        }
      });
    },
  }
}
</script>

<style scoped>
.text-container {
  line-height: 40px;
  overflow: hidden;
  background-color: #fff;
  padding: 10px;
}

.notice-item {
  border-radius: 3px;
  margin-bottom: 10px;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 10px;
  padding-left: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  height: 40px; /* 固定高度便于计算 */
}

.allNotice {
  list-style: none;
  padding: 0;
  margin: 0;
}
</style>