cbwqpf/ruoyi-ui/src/views/components/table/scroll.vue

<template>
  <div id="box">
    <div id="con1" ref="con1" :class="{anim:animate==true}" style="color:white" @mouseenter="mEnter" @mouseleave="mLeave">
      <div v-for='item in items' style="font-size:3rem">
        <span>{{ item.name }}</span>
        <span style="margin-left:3rem;color:#A8A8A8">统计时间:{{ item.time }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import {queryIllegalInfoList} from "@/api/data/staticalData";

export default {
  data() {
    return {
      animate: false,
      items: [ //消息列表对应的数组
        // {name: "1.xx船在xx监测点检测燃油含硫量为xx", time: '2021年7月1日'},
      ],
    }
  },
  props: ['illegalStatus'],
  mounted() {
    this.queryIllegalInfoList();
    this.timer1 = setInterval(this.scroll, 3000)

  },

  methods: {
    queryIllegalInfoList() {
      queryIllegalInfoList({'illegalStatus': this.illegalStatus}).then(data => {
        this.items = data.data
        for (var index in this.items) {
          if (this.items[index].illegalType === 'heiyan') {
            var obj = this.items[index]
            obj.name = (parseInt(index) + 1) + '.' + obj.shipName + "在" + obj.monitorPointName + "监测点检测黑度为" + obj.rcgSoot
            obj.time = this.timeFormate(obj.snapTimeFmt)
          }
          if (this.items[index].illegalType !== 'heiyan') {
            var obj = this.items[index]
            obj.name = (parseInt(index) + 1) + '.' + obj.shipName + "在" + obj.monitorPointName + "监测点检测硫含量为" + obj.so2Percent
            obj.time = this.timeFormate(obj.createTime)
          }
        }
      })
    },
    timeFormate(date) {
      // var date = "2018-10-08 15:22:45";
      var newDate = new Date(date).toLocaleDateString()
      return newDate.split('/')[0] + "年" + newDate.split('/')[1] + '月' + newDate.split('/')[2] + '日';
    },
    scroll() {
      let con1 = this.$refs.con1;
      //     console.log(con1);
      // con1.style.marginTop='-29rem';
      this.animate = !this.animate;
      var that = this; // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
      setTimeout(function () {
        that.items.push(that.items[0]);
        that.items.shift();
        // con1.style.marginTop='0px';
        that.animate = !that.animate; // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
      }, 500)
    },
    mEnter() {
      clearInterval(this.timer1)
    },
    mLeave() {
      this.timer1 = setInterval(this.scroll, 3000)
    },

  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
* {
  margin: 0;
  padding: 0;
}

#box {
  width: 100rem;
  height: 50rem;
  line-height: 14rem;
  overflow: hidden;
  padding-left: 15rem;
  font-size: 5rem;
  transition: all 0.5s;
}

.anim {
  transition: all 0.5s;
}

#con1 li {
  list-style: none;
  line-height: 10rem;
  height: 10rem;
}
</style>