zy-largeScreen/src/components/GroupPraise.vue

<template>
  <div class="group-praise">
    <!-- 广播 -->
    <div class="group-praise__broadcast">
      <i class="group-praise__broadcast--icon icon_transport transport-laba1"></i>
      <div class="group-praise__broadcastListWrap">
        <ul class="group-praise__broadcastList" :class="{marquee_top:animate}" :style="{transform:'translateY('+(0.375*n)+'rem)'}">
          <li
            v-for="(item,i) in evaluateUserList"
            :key="i"
          >【{{item[0]}}】配送人员「{{item[1]}}」 {{item[2]}}</li>
        </ul>
      </div>
    </div>
    <div class="group-praise__content">
      <div class="group-praise__circle">
        <header class="group-praise__title">NO.2</header>
        <div class="group-praise__circleContent" v-if="evaluateGroutList[1]">
          <p class="group-praise__circleName ellipsis">{{evaluateGroutList[1][1]}}</p>
          <p class="group-praise__circlePercent">{{evaluateGroutList[1][4]}}%</p>
        </div>
      </div>
      <div class="group-praise__circle--win">
        <header class="group-praise__title">NO.1</header>
        <div class="group-praise__circleContent" v-if="evaluateGroutList[0]">
          <p class="group-praise__circleName ellipsis">{{evaluateGroutList[0][1]}}</p>
          <p class="group-praise__circlePercent">{{evaluateGroutList[0][4]}}%</p>
        </div>
      </div>
      <div class="group-praise__circle">
        <header class="group-praise__title">NO.3</header>
        <div class="group-praise__circleContent" v-if="evaluateGroutList[2]">
          <p class="group-praise__circleName ellipsis">{{evaluateGroutList[2][1]}}</p>
          <p class="group-praise__circlePercent">{{evaluateGroutList[2][4]}}%</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { post, timer2 } from './../http/http'
export default {
  name: 'GroupPraise',
  inject: ['hospitalId'],
  data () {
    return {
      allData: {},
      fontSize: parseFloat(document.querySelector('html').style.fontSize),
      timer: null,
      animate: false,
      timer1: null,
      n: 0,
      evaluateGroutList: [], // 小组排名(无序)
      evaluateUserList: [], // 滚动数据
      disY: 0.375, // 滚动数据偏移量
      disHeight: 0, // 滚动数据高度
      isShow: true // 滚动数据显示隐藏
    }
  },
  methods: {
    // 无限滚动
    scrollInfinite () {
      clearTimeout(this.timer1)
      this.timer1 = setTimeout(() => {
        this.showMarquee()
        this.scrollInfinite()
      }, 2000)
    },
    // 处理数组方法
    showMarquee () {
      this.animate = true
      this.n--
      if (this.n === -(this.evaluateUserList.length)) {
        this.animate = false
        this.n = 0
      }
    },
    // 近30天小组好评排行
    async getGroupPraise () {
      const srartTime = this.$moment()
        .subtract(29, 'days')
        .format('YYYY-MM-DD') // 近三十天
      const endTime = this.$moment().format('YYYY-MM-DD') // 今天
      const result = await post(
        `/largeScreen/getData/groupEvaluateRanking/${this.hospitalId}`,
        { srartTime, endTime }
      )
      this.evaluateGroutList = result.evaluateGroutList
      this.evaluateGroutList.sort((a, b) => b[4] - a[4]) // 排行从高往低排序
      this.evaluateUserList = result.evaluateUserList
      this.polling()
      if (this.evaluateUserList.length > 0) {
        this.evaluateUserList = [...this.evaluateUserList, this.evaluateUserList[0]]
        this.scrollInfinite()
      }
    },
    // 轮询请求
    polling () {
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.getGroupPraise()
      }, timer2)
    }
  },
  mounted () {
    this.getGroupPraise()
  },
  beforeDestroy () {
    clearTimeout(this.timer)
    clearTimeout(this.timer1)
  }
}
</script>

<style lang="less">
.group-praise {
  height: 2.7125rem;
  padding-top: 0.2rem;
  padding-bottom: 0.375rem;
  .group-praise__broadcast {
    height: 0.4rem;
    background-color: rgba(255, 255, 255, 0.2);
    border: solid 1px rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    .group-praise__broadcast--icon {
      font-size: 0.275rem;
      color: #2496d2;
      margin-left: 0.1rem;
    }
    .group-praise__broadcastListWrap {
      flex: 1;
      height: 0.375rem;
      line-height: 0.375rem;
      padding-left: 0.2rem;
      padding-right: 0.1rem;
      overflow: hidden;
      .group-praise__broadcastList {
        &.marquee_top {
          transition: all 1s;
        }
        li {
          word-break: break-all;
        }
      }
    }
  }
  .group-praise__content {
    display: flex;
    justify-content: center;
    .group-praise__title {
      color: #c2ab70;
      font-size: 0.2rem;
      font-weight: 700;
      text-align: center;
    }
    .group-praise__circleContent {
      color: #fff;
      font-size: 0.175rem;
      height: 0.875rem;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      line-height: 1.3em;
      text-align: center;
      .group-praise__circleName {
        width: 0.725rem;
      }
    }
    .group-praise__circle {
      width: 1.2rem;
      height: 1.2rem;
      margin-top: 0.4rem;
      position: relative;
      &::after {
        content: "";
        opacity: 0.5;
        width: 100%;
        height: 100%;
        background: url("./../assets/img/image_no2.png") no-repeat;
        background-size: 100%;
        position: absolute;
        left: 0;
        top: 0;
      }
    }
    .group-praise__circle--win {
      width: 1.7625rem;
      height: 1.6875rem;
      margin: 0.05rem 0.1375rem 0;
      position: relative;
      &::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0.5;
        width: 100%;
        height: 100%;
        background: url("./../assets/img/image_no1.png") no-repeat;
        background-size: 100%;
      }
      .group-praise__circleContent {
        margin-top: 0.1rem;
      }
    }
  }
}
</style>