top10.vue

<template>
  <div class="list-of-top10">
    <triangle>
      <slot>
        <div class="list-of-top10-title common-title">
          <img
            class="icon-title"
            src="@/assets/images/screen/boardsDemand.png"
            alt=""
          />
          <span class="title">{{ title }}</span>
          <img class="bg" src="@/assets/images/screen/title01_bg.png" alt="" />
        </div>
        <div class="list-of-body">
          <ul class="body-title">
            <li class="f1">排名</li>
            <li class="f7">展板名称</li>
            <li class="f2">播放量</li>
          </ul>
          <div class="body-content" id="bodyContent">
            <div id="con1">
              <ul class="body-item" v-for="(item, index) in list" :key="index">
                <li class="f1">{{ (index % 10) + 1 }}</li>
                <li class="f7">
                  <div class="title" :title="item.boardName">{{ item.boardName }}</div>
                </li>
                <li class="f2">{{ item.playNumber }}</li>
              </ul>
            </div>
            <div id="con2"></div>
          </div>
        </div>
      </slot>
    </triangle>
  </div>
</template>

<script>
import triangle from "../components/slot/triangle";
import { getCurDate } from './util.time.js'
export default {
  name: "top10",
  data() {
    return {
      title: "全国2021年3月展板点播TOP10",
      timer: null,
      speed: 50,
      box: null,
      con1: null,
      list: [],
    };
  },
  components: { triangle },
  mounted() {
    this.title = this.getTitle();
    this.getList()
  },
  methods: {
    getTitle() {
      let curTime = getCurDate();
      return `全国${curTime.year}年${curTime.month}月展板点播TOP10`;
    },
    initScroll() {
      let _this = this;
      this.box = document.getElementById("bodyContent");
      this.con1 = document.getElementById("con1");
      let con2 = document.getElementById("con2");
      con2.innerHTML = this.con1.innerHTML;
      this.timer = setInterval(_this.scrollUp, _this.speed);
    },
    scrollUp() {
      if (this.box.scrollTop >= this.con1.scrollHeight) {
        this.box.scrollTop = 0;
      } else {
        this.box.scrollTop++;
      }
    },
    Ups() {
      let _this = this;
      this.timer = setInterval(_this.scrollUp, _this.speed);
    },
    Stops() {
      clearInterval(this.timer);
    },
     getList() {
       let _this = this
      let requestparams = {};
      requestparams._index = 1;
      requestparams._size = 10;
      this.$https(
        {
          method: "post",
          url: "tBoardStatistic/getBoardRankPageList"
        },
        requestparams
      )
        .then((res) => {
          if (res.status == 200) {
            if (res.data.resultCode == 200) {
              this.list = res.data.data.records;
              this.$nextTick(()=>{
                _this.initScroll();
              })
            } else {
              this.list = [];
            }
          } else {
            this.list = [];
          }
        })
        .catch((err) => {
          this.$message.error(err.message);
        });
    }
  },
};
</script>

<style lang=scss>
</style>