文字滚动

<template>
   <div class="marquee-wrap">
    <ul class="marquee-list" :class="{'animate-up': animateUp}">
      <li v-for="(item, index) in listData" :key="index">{{item}}d</li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      animateUp: false,
      listData: ['1***ve 成功邀请12人 已获奖金60元', '2***e 成功邀请5人 已获奖金40元', '3***e 成功邀请1人 已获奖金5元'],
      timer: null
    }
  },
  methods: {
    scrollAnimate () {
      this.animateUp = true
      setTimeout(() => {
        this.listData.push(this.listData[0])
        this.listData.shift()
        this.animateUp = false
      }, 500)
    },
    destroyed () {
      clearInterval(this.timer)
    }
  },
  mounted () {
    this.timer = setInterval(this.scrollAnimate, 1500)
  }
}
</script>

<style lang="less" scoped>
.marquee-wrap  {
  width: 80%;
  height: 70px;
  border: 1px solid red;
  margin: 0 auto;
  overflow: hidden;
  .marquee-list {
    li {
      width: 100%;
      height: 100%;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      padding: 0 20px;
      list-style: none;
      line-height: 40px;
      text-align: center;
      color: black;
      font-size: 18px;
      font-weight: 400;
    }
  }
  .animate-up {
    transition: all 0.5s ease-in-out;
    transform: translateY(-40px);
  }
}
</style>

 

  const [timer, setTimer] = useState<any>(null)
  const scrollAnimate = () => {
    setAnimateUp(true)
    setTimeout(() => {
      rows.push(rows[0])
      rows.shift();
      setRows(rows);
      setAnimateUp(false)
    }, 500)
  }
  useEffect(() => {
    setTimer(setInterval(scrollAnimate, 1500))
    clearInterval(timer)
  }, [animateUp])
.animate-up {
  transition: all 0.5s ease-in-out;
  transform: translateY(-45px);
}

　　

/*
 * @Author: zhangjunxia zhangjunxiacai@163.com
 * @Date: 2024-07-31 15:14:46
 * @LastEditors: zhangjunxia zhangjunxiacai@163.com
 * @LastEditTime: 2024-08-02 10:42:03
 * @FilePath: \Mess\mes\src\pages\data-board\task-execution\table.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { Progress, Tooltip } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import './index.less';
import moment from 'moment';

export default function table() {
  //生产状态 
  const statussc: any = {
    '0': {
      title: '待加工',
      color: 'red'
    },
    '1': {
      title: '待组装',
      color: 'blue'
    },
    '2': {
      title: '待检测',
      color: '#E218FF'
    },
    '3': {
      title: '待发货',
      color: '#EBFF18'
    },
    '4': {
      title: '已完成',
      color: '#18FF2E'
    }
  };

  const headers = [
    {
      title: '订单编号',
      dataindex: 'names'
    },
    {
      title: '报工任务',
      dataindex: 'name'
    },
    {
      title: ' 报工人员',
      dataindex: 'name'
    },
    {
      title: '报工进度',
      dataindex: 'jd'
    },
    {
      title: '报工时间',
      dataindex: 'jsdata'
    }
  ];
  const rowss: any = [
    {
      key: '1',
      number: 'abcdef1234',
      name: '夹具啥',
      names: '1张三',
      data: '2023-4-6',
      jsdata: '2024-4-5',
      sjdata: '2024-4-5',
      sjwg: '2024-4-5',
      jd: '90',
      state: '1'
    },
    {
      key: '2',
      number: 'abcdef1234',
      name: '啥啥啥',
      names: '2李四',
      data: '2023-4-6',
      jsdata: '2024-4-5',
      sjdata: '2024-4-5',
      sjwg: '2024-4-5',
      jd: '70',
      state: '0'
    },
    {
      key: '1',
      number: 'abcdef1234',
      name: '夹具啥',
      names: '3张三',
      data: '2023-4-6',
      jsdata: '2024-4-5',
      sjdata: '2024-4-5',
      sjwg: '2024-4-5',
      jd: '90',
      state: '1'
    },
    {
      key: '2',
      number: 'abcdef1234',
      name: '啥啥啥',
      names: '4李四',
      data: '2023-4-6',
      jsdata: '2024-4-5',
      sjdata: '2024-4-5',
      sjwg: '2024-4-5',
      jd: '70',
      state: '0'
    },
    {
      key: '1',
      number: 'abcdef1234',
      name: '夹具啥',
      names: '5张三',
      data: '2023-4-6',
      jsdata: '2024-4-5',
      sjdata: '2024-4-5',
      sjwg: '2024-4-5',
      jd: '90',
      state: '1'
    },
    {
      key: '2',
      number: 'abcdef1234',
      name: '啥啥啥',
      names: '6李四',
      data: '2023-4-6',
      jsdata: '2024-4-5',
      sjdata: '2024-4-5',
      sjwg: '2024-4-5',
      jd: '70',
      state: '0'
    },
    {
      key: '1',
      number: 'abcdef1234',
      name: '夹具啥',
      names: '7张三',
      data: '2023-4-6',
      jsdata: '2024-4-5',
      sjdata: '2024-4-5',
      sjwg: '2024-4-5',
      jd: '90',
      state: '1'
    },
    {
      key: '2',
      number: 'abcdef1234',
      name: '啥啥啥',
      names: '8李四',
      data: '2023-4-6',
      jsdata: '2024-4-5',
      sjdata: '2024-4-5',
      sjwg: '2024-4-5',
      jd: '70',
      state: '0'
    },
    {
      key: '1',
      number: 'abcdef1234',
      name: '夹具啥',
      names: '9张三',
      data: '2023-4-6',
      jsdata: '2024-4-5',
      sjdata: '2024-4-5',
      sjwg: '2024-4-5',
      jd: '90',
      state: '1'
    },
    {
      key: '2',
      number: 'abcdef1234',
      name: '啥啥啥',
      names: '11李四',
      data: '2023-4-6',
      jsdata: '2024-4-5',
      sjdata: '2024-4-5',
      sjwg: '2024-4-5',
      jd: '70',
      state: '0'
    }
  ];
  const [rows, setRows] = useState<any>(rowss)

  const scrollContainerRef = useRef<any>(null);
  // const [scrollTop, setScrollTop] = useState<any>(0);
  // useEffect(() => {
  //   setRows(rowss)
  //   const scrollContainer = scrollContainerRef.current;
  //   // console.log("1");

  //   if (!scrollContainer) return;
  //   let rafId: any = null;
  //   // console.log("2");
  //   const scrollFrame = () => {
  //     // console.log("3");
  //     const { scrollHeight, clientHeight } = scrollContainer;
  //     console.log("scrollTop",scrollTop );
  //     if (scrollTop >= scrollHeight - clientHeight) {
  //       console.log("4");
  //     console.log("scrollTop >= scrollHeight - clientHeight",scrollTop , (scrollHeight - clientHeight));


  //       setScrollTop(0);
  //     } else {
  //       // console.log("5");
  //       setScrollTop(scrollTop + 0.5);
  //     }
  //     // 更新 DOM 的 scrollTop
  //     scrollContainer.scrollTop = scrollTop;
  //     // console.log("6");
  //     // 递归调用
  //     rafId = requestAnimationFrame(scrollFrame);
  //   };
  //   rafId = requestAnimationFrame(scrollFrame);
  //   // 组件卸载时取消动画
  //   // console.log("7");
  //   return () => {
  //     if (rafId !== null) {
  //       cancelAnimationFrame(rafId);
  //       // console.log("8");
  //     }
  //   };
  // }, [scrollTop]);
  const [animateUp, setAnimateUp] = useState<any>(false)
  const animatesUp = () => {
    if (animateUp) {
      return "animate-up"
    } else {
      return null
    }
  }
  const listData: any = []
  const [timer, setTimer] = useState<any>(null)
  const scrollAnimate = () => {
    
    setAnimateUp(true)
    setTimeout(() => {
      listData.push(rows[0])
      rows.shift();
      setRows([...rows,...listData]);
      setAnimateUp(false)
    }, 500)
  }
  useEffect(() => {
    setTimer(setInterval(scrollAnimate, 1500))
    clearInterval(timer)
  }, [animateUp])

  return (
    <div className="table-simulation">
      <div className="header">
        {headers?.map((header, index) => (
          <div key={index} className="header-cell">
            {header.title}
          </div>
        ))}
      </div>
      <div className="body" ref={scrollContainerRef}>
        {rows?.map((row: any, rowIndex: any) => (
          <div key={row.id} className={`row ${animatesUp()}`}   >
            {headers?.map((header, headerIndex) => {
              const value = row[header.dataindex]; // 使用 headers 中的 dataindex 来获取数据
              if (header.dataindex === 'jd') {
                return (
                  <Progress key={`${rowIndex}-${headerIndex}`} className="jdt" percent={value} />
                );
              } else if (header.dataindex === 'data') {
                return (
                  <span className="cell" key={`${rowIndex}-${headerIndex}`}>
                    {value && moment(value).format('YYYY-MM-DD')}
                  </span>
                );
              } else if (header.dataindex === 'jsdata') {
                return (
                  <span className="cell" key={`${rowIndex}-${headerIndex}`}>
                    {value && moment(value).format('YYYY-MM-DD')}
                  </span>
                );
              } else if (header.dataindex === 'kg') {
                return (
                  <span className="cell" key={`${rowIndex}-${headerIndex}`}>
                    {value && moment(value).format('YYYY-MM-DD')}
                  </span>
                );
              } else if (header.dataindex === 'wg') {
                return (
                  <span className="cell" key={`${rowIndex}-${headerIndex}`}>
                    {value && moment(value).format('YYYY-MM-DD')}
                  </span>
                );
              } else if (header.dataindex === 'zt') {
                return (
                  <span className="cell" style={{ color: statussc[`${value}`]?.color }}>
                    {statussc[`${value}`]?.title || '无状态'}
                  </span>
                );
              }
              return (
                <span key={`${rowIndex}-${headerIndex}`} className="cell">
                  {value || '--'}
                </span>
              );
            })}
          </div>
        ))}
      </div>
    </div>
  );
}


.max-dp {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #10244b;
  background-image: url(../../../../public/databoard/bag.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  .title-max {
    height: calc(10vh);
    // background: red;
    color: #ffffff;
    font-weight: 600;
    // margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    // font-size: 20px;
    font-size: 2.3vw;

    > img {
      margin-top: 20px;
      width: 100%;
      // height: 100%;
    }

    .divc {
      // border: 1px solid red;
      position: absolute;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;

      .timedata {
        font-size: 17px;
        color: #fff;
        position: absolute;
        right: 1.5%;
        top: 4vh;
      }
    }
  }
}
.table-simulation {
  // overflow: hidden;
  width: 100%;
  height: 100%;
  padding: 8px 20px;
}
.scroll-container {
  // border: 1px solid red;
  flex: 1;
  margin: 0 10px 10px;
  .header {
    // margin: 10px;
    display: flex;
    align-items: center;
    // height: 53px;
    font-size: 15px;
    padding: 10px 0;
    color: #fff;
    background: #005ea9;
    font-weight: 600;
  }

  .header-cell {
    flex: 1;
    /* 使每个头部单元格占据等宽空间 */
    text-align: center;
    // padding: 0 16px;
  }

  .body {
    height: calc(100% - 40px);
    overflow-y: auto;
    overflow: hidden;
    color: #fff;
  }

  .row {
    height: 45px;
    // background: red;
    display: flex;
    align-items: center;
    // justify-content: space-between;
  }
  ///奇数
  // .row:nth-child(odd) {
  //   background: #10244b;
  // }

  // .row:nth-child(even) {
  //   background: #04335f;
  // }

  .cell {
    flex: 1;
    /* 使每个头部单元格占据等宽空间 */
    text-align: center;
  }

  .jdt {
    flex: 1;
    /* 使每个头部单元格占据等宽空间 */
    text-align: center;
    // background: red;
    color: #fff !important;
  }

  // 进度条样式
  .jdt .ant-progress-outer {
    height: 13px;
    /* 设置进度条容器的高度 */
    line-height: 18px;
    /* 设置进度条文本的行高（如果需要的话） */
  }

  .jdt .ant-progress-inner {
    height: 100% !important;
    background: #fff;
    /* 确保进度条本身填充整个容器 */
  }

  .ant-progress-success-bg,
  .ant-progress-bg {
    height: 100% !important;
    // position: relative;
  }

  .ant-progress .ant-progress-text {
    color: #fff !important;
  }
}

.top-wrap {
  display: flex;
  flex-wrap: wrap;
  .top-card {
    color: white;
    height: calc(100vh / 3);
    width: calc(30%);
    position: relative;
    padding: 5px;
    // border: 1px solid red;
  }
  .card-img {
    background-image: url(../../../../public/databoard/card.png);
    background-repeat: no-repeat;
    background-size: 97% 97%;
    background-position: center; /* 将背景图片在元素中居中显示 */
  }
  .top-card:nth-child(1) {
  }
  .top-card:nth-child(2) {
    width: 40%;
  }
  .top-card:nth-child(3) {
  }
  .top-card:nth-child(4) {
  }
  .top-card:nth-child(5) {
    width: 40%;
  }
  .top-card:nth-child(6) {
  }
}
.card-two {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
  img {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    z-index: 0;
    transform: translate(-50%, -50%);
  }
  .order-t {
    p {
      margin: 2px;
    }
    text-align: center;
    .p1 {
      font-size: 0.8vw;
      color: #8998ad;
    }
    .p1-1 {
      font-size: 1.5vw;
      color: #46c26f;
    }
    .p1-2 {
      font-size: 1.5vw;
      color: #00c2ff;
    }
    .p1-3 {
      font-size: 1.5vw;
      color: #eb5050;
    }
  }
  .order-t1 {
    margin-bottom: auto;
  }
  .order-t2 {
    margin-top: auto;
  }
  .ord-card {
    height: 100%;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
  }
  .ord-card2 {
    padding: 8px 0;
    justify-content: space-between;
  }
}

.animate-up {
  transition: all 0.5s ease-in-out;
  transform: translateY(-45px);
}

　　

 const [animateUp, setAnimateUp] = useState<any>(false)
  const [timer, setTimer] = useState<any>(null)
  const scrollAnimate = () => {
    setAnimateUp(true)
    setTimeout(() => {
      rows.push(rows[0])
      rows.shift();
      setRows(rows);
      setAnimateUp(false)
    }, 500)
  }
  useEffect(() => {
    setTimer(setInterval(scrollAnimate, 1500))
    clearInterval(timer)
  }, [animateUp])
className={`row ${animateUp?"animate-up":""}`
.animate-up {
  transition: all 0.5s ease-in-out;
  transform: translateY(-45px);
}