dd_pc/src789/views/ranking/deptRankSwiper.vue

<template>
  <div>
    <div class="swiperBg" v-loading="loading || deptNameLoad">
      <el-row type="flex" justify="center">
        <el-col :xs="22" :sm="22" :md="24" :lg="12" :xl="10">
          <div class="title" v-if="type == 1">最新的积分事件<p>最后更新时间：{{lastTime}}</p></div>
          <div class="title" v-if="type == 2">{{deptName}}{{month}}积分排名<p>最后更新时间：{{lastTime}}</p></div>
          <marquee style="height: calc(100vh - 106px);" scrollamount="2" scrolldelay="1" align="middle" behavior="scroll" direction="up">
            <div v-show="type == 2">
              <el-row  v-for="(item,index) in list" :key="index" class="row">
                <el-col class="list_name" :span="4">{{item.rank}}</el-col>
                <el-col :span="10">{{item.employee_name}}</el-col>
                <el-col class="point" :span="10">{{item.point}}分</el-col>
              </el-row>
            </div>
            <div v-show="type == 1">
              <el-row  v-for="(item,index) in list" :key="index" class="row">
                <el-col :span="4">
                  <center>
                    <userImage :id="item.employee_id" :user_name="item.employee_name" :img_url="item.employee_img_url" fontSize="1.8" width="80px" height="80px"></userImage>
                  </center>
                </el-col>
                <el-col :span="20">
                  <p class="integralPersonnel">
                    <el-row>
                      <el-col :span="8">{{item.employee_name}}</el-col>
                      <el-col :span="16">
                        <span style="margin-left: 30px;" :class="item.point>0?'color_red':'color_green'">{{item.point>0?'+'+item.point:item.point}}分</span>
                      </el-col>
                    </el-row>
                  </p>
                  <p class="integralDetails">{{item.remark}}</p>
                </el-col>
              </el-row>
            </div>
          </marquee>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import moment from 'moment'
  // type  1为积分事件 2为部门排行
  export default {
    name: "deptRankSwiper",
    data() {
      return {
        loading: false,
        deptNameLoad: false,
        list: [],
        formData:{},
        type: 0,
        month: null,
        deptName: null,
        lastTime: null
      }
    },
    methods: {
      getData(){
        let self = this
        self.loading = true
        let data = this.formData
        delete data.type
		var url=self.type == 1? '/api/integral/statistics/integral' : '/api/integral/statistics/ranking';
        var str=self.type == 1? 'plain':'v2'
		self.$axios('get',url,data,str).then((res) => {
          if (res.data.code == 1) {
            self.lastTime = this.$moment().format('YYYY-MM-DD HH:mm:ss')
            self.list = res.data.data.list
          }else{
            self.$message.error(res.data.data.msg)
          }
        }).finally(()=>{
          self.loading = false
        })
      },
      getDeptName(id){
        let self = this
        if (id !== '0') {
          self.deptNameLoad = true
          self.$axios("get",'/api/department/info',{id: id}).then((res) => {
            if (res.data.code == 1) {
              self.deptName = res.data.data.name
            }else{
              self.$message.error(res.data.data.msg)
            }
          }).finally(()=>{
            self.deptNameLoad = false
          })
        }else{
          self.deptName = '全公司'
        }
      }
    },
    mounted() {
      this.formData = this.$route.query
      this.type = this.$route.query.type
      this.$route.query.month?this.month = moment(this.$route.query.month).format('YYYY年MM月'):''
	  this.$route.query.dept_name? this.deptName=this.$route.query.dept_name:''
      this.getData()
      setInterval(() => {
        this.getData()
      }, parseInt(Math.random()*(1800000-1200000+1)+1200000,10));
    },
    created() {},
  }
</script>

<style scoped lang="scss">
  .swiperBg{
    background-color: black;
    color: #fff;
    position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	top:0;
    font-size: 3rem;
    .title{
      font-size: 40px;
      text-align: center;
      margin: 20px 0;
      p{
        font-size: 16px;
      }
    }
    .row{
      margin-bottom: .6em;
      .el-col-10{
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .list_name{
        text-align: center;
      }
      .point{
        text-align: center;
      }
      .integralDetails{
        font-size: .6em; 
        margin: 0; 
        display: -webkit-box;
        text-overflow: ellipsis;
        overflow : hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .integralPersonnel{
        font-size: .8em; 
        margin: 0; 
        margin-bottom: 15px;
      }
    }
  }
  .color_red{
    color: red;
  }
  .color_green{
    color:green
  }
</style>