areas.vue

<template>
  <div class="list-of-area">
    <div class="list-of-area-title common-title">
      <div class="icon-and-title">
        <img class="icon-title" src="@/assets/overview/s-play.png" alt="" />
        <span class="title">{{ title }}</span>
      </div>
      <img class="bg" src="@/assets/overview/bg_title.png" alt="" />
    </div>
    <div class="list-of-body">
      <ul class="body-title">
        <li class="f5">地区名称</li>
        <li class="f3">播放量(次)</li>
        <li class="f2">展板数量</li>
      </ul>
      <div class="body-content" id="areaContent">
        <div id="area1">
          <ul class="body-item" v-for="(item, index) in list" :key="index">
            <li class="f5">{{ item.areaName }}</li>
            <li class="f3">{{ item.playNumber }}</li>
            <li class="f2">{{ item.boardCnt }}</li>
          </ul>
        </div>
        <div id="area2"></div>
        <div id="area3">></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "areas",
  data() {
    return {
      title: "地区展板播放统计",
      timer: null,
      speed: 50,
      box: null,
      area1: null,
      list: [],
    };
  },
  mounted() {
    this.getList();
    this.$nextTick((v) => {
      this.initScroll();
    });
  },
  methods: {
    initScroll() {
      let _this = this;
      this.box = document.getElementById("areaContent");
      this.con1 = document.getElementById("area1");
      let con2 = document.getElementById("area2");
      let con3 = document.getElementById("area3");
      con2.innerHTML = this.con1.innerHTML;
      con3.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++;
      }
    },
    getList() {
      let requestparams = {};
      requestparams._index = 1;
      requestparams._size = 10;
      this.$https(
        {
          method: "post",
          url: "tBoardStatistic/getBoardDistrictPageList",
          authType: this.backToken,
        },
        requestparams
      )
        .then((res) => {
          if (res.status == 200) {
            if (res.data.resultCode == 200) {
              this.list = res.data.data.records;
            } else {
              this.list = [];
            }
          } else {
            this.list = [];
          }
        })
        .catch((err) => {
          this.$message.error(err.message);
        });
    },
  },
};
</script>

<style lang="less">
</style>