salt-lake-hospital/src/components/FastEd/FastEd.vue

<template>
  <div class="fast-box">
    <div class="bg-box" style="flex: 1">
      <div :key="a" v-for="a in 4"></div>
    </div>
    <div class="con-box" id="bobaodiv">
      <div :key="item.a" class="flex-1 flex-row" style="height: 25%" v-for="item in dataList">
        <div class="flex-1">{{ item.a }}</div>
        <div class="flex-1">{{ item.b }}</div>
        <div class="flex-1">{{ item.c }}</div>
      </div>
      <div :key="index" class="flex-1 flex-row" style="height: 25%" v-for="(item, index) in dataList">
        <div class="flex-1">{{ item.a }}</div>
        <div class="flex-1">{{ item.b }}</div>
        <div class="flex-1">{{ item.c }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FastEd',
  data() {
    return {
      str: 'FAST ED结果',
      height: '',
      width: '',
      liHeight: '',
      dataList: [
        {
          a: '1.面部对侧',
          b: '正常',
          c: '0分',
        },
        {
          a: '2.上肢',
          b: '中度无力',
          c: '1分',
        },
        {
          a: '3.语言运动',
          b: '正常',
          c: '0分',
        },
        {
          a: '4.语言感觉',
          b: '异常',
          c: '1分',
        },
        {
          a: '5.眼球凝视',
          b: '一测活动困难',
          c: '1分',
        },
      ],
      oMarquee: null, //播报的容器
      BBLineH: null,
      BBScrollAmount: 1,
      BBLineCount: 5,
      rollRestTime: 500,
      rollTime: 10,
    };
  },
  mounted() {
    this.BBLineH = document.getElementsByClassName('fast-box')[0].offsetHeight * 0.25;
    this.scrollBox();
  },
  methods: {
    scrollBox() {
      /*
       * 启动播报滚动事件
       */
      const that = this;
      window.onload = function() {
        // BBAllTime = 0;
        that.oMarquee = document.getElementById('bobaodiv'); //滚动对象
        window.setTimeout(function() {
          that.run();
        }, that.rollRestTime);
      };
    },
    /*
     * 播报滚动事件主逻辑
     */
    run() {
      const that = this;
      if (that.BBScrollAmount == 0) {
        //若单次滚动的距离为0，则开始下一次监听，不计数
        window.setTimeout(function() {
          that.run();
        }, that.rollTime);
        return;
      }
      if (that.oMarquee.scrollTop >= that.BBLineCount * that.BBLineH) {
        //滚动完一次数据后，复位
        that.oMarquee.scrollTop = 0;
      }
      that.oMarquee.scrollTop += that.BBScrollAmount;
      if (that.oMarquee.scrollTop % that.BBLineH < 1 && that.oMarquee.scrollTop > 0) {
        window.setTimeout(function() {
          that.run();
        }, that.rollRestTime);
      } else {
        window.setTimeout(function() {
          that.run();
        }, that.rollTime);
      }
    },
  },
};
</script>

<style lang="stylus" scoped>
.bg-box {
  height: 100%;

  div {
    height: 25%;
  }

  div:nth-of-type(even) {
    background: #023567;
  }
}

.fast-box {
  position: relative;
}

.con-box {
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-weight: 600;
  font-size: 14px;
  color: #eee;

  div {
    justify-content: center;
    align-items: center;
  }
}
</style>