irc_web/.svn/pristine/e9/e9a963324e47e76d8119fef5dc8dc8f81673857d.svn-base

<template>
  <div ref="workload_list" class="workload_list">
    <div class="list-title" :style="{fontSize:size}">Latest 10 Reads</div>
    <div class="list-header">
      <ul :style="{fontSize:size}">
        <li style="width:5%">No</li>
        <li style="width:20%">Reviewer Code</li>
        <li style="width:20%">Name</li>
        <li style="width:20%">Trial ID</li>
        <li style="width:5%">TP</li>
        <li style="width:5%">AD</li>
        <li style="width:5%">GL</li>
        <li style="width:10%">Total</li>
      </ul>
    </div>
    <vue-seamless-scroll
      v-if="h"
      :data="dataList"
      :class-option="optionSetting"
      class="seamless-warp"
      :style="{height:h}"
    >
      <ul>
        <li v-for="(item, index) in dataList" :key="index" :style="{fontSize:liSize}">
          <span style="width:5%" v-text="item.No" />
          <span style="width:20%" v-text="item.ReviewerCode" />
          <span style="width:20%" v-text="item.Name" />
          <span style="width:20%" v-text="item.TrialCode" />
          <span style="width:5%" v-text="item.Timepoint" />
          <span style="width:5%" v-text="item.Adjudication" />
          <span style="width:5%" v-text="item.Global" />
          <span style="width:10%" v-text="item.TotalReadingCount" />
        </li>
      </ul>
    </vue-seamless-scroll>
  </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
import { getLatestWorkLoadList } from '@/api/dashboard'
import { fontSize } from 'utils/fontsize'
const Count = 10
export default {
  components: {
    vueSeamlessScroll
  },
  props: {
    height: { type: String, default: '' }
  },
  data() {
    return {
      dataList: [],
      h: '',
      length: 0,
      size: '',
      liSize: ''
    }
  },
  computed: {
    optionSetting() {
      return {
        step: 0.3, // 数值越大速度滚动越快

        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length

        hoverStop: true, // 是否开启鼠标悬停stop

        direction: 1 // 0向下 1向上 2向左 3向右

        // openWatch: true, // 开启数据实时监控刷新dom

        // singleHeight: 30 // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1

        // singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3

        // waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },
  watch: {
    height() {
      this.setHeight()
    }
  },
  created() {
    this.$nextTick(() => {
      this.getData()
    })
  },

  mounted() {
    this.size = fontSize(0.17) + 'px'
    this.liSize = fontSize(0.16) + 'px'
    this.$nextTick(() => {
      setTimeout(() => {
        this.getData() // 保证在dom加载前获取数据再渲染
      }, 500)
    })
  },
  methods: {
    setHeight() {
      const wrapperH = this.height
      this.h = wrapperH.substring(0, wrapperH.indexOf('px')) - (document.body.clientWidth / 20) * 0.65 - 30 + 'px'
    },
    getData() {
      getLatestWorkLoadList(Count).then(res => {
        if (res.IsSuccess) {
          const data = res.Result
          this.length = res.Result.length
          data.forEach((element, index) => {
            element.No = index + 1
            element.Name = `${element.FirstName} ${element.LastName}`
            this.dataList.push(element)
            this.setHeight()
          })
        } else {
          this.$message({ message: res.ErrorMessage, type: 'error' })
        }
      })
      // .catch(error => {
      //   this.$message({ message: error, type: 'error' })
      // })
    }
  }
}
</script>
<style scoped>
.workload_list {
  overflow: hidden;
  box-sizing: border-box;
}
.workload_list .list-title {
  color: #fff;
  height: 2rem;
  line-height: 2rem;
  /* font-size: 1rem; */
  font-weight: bold;
  padding-left: 4%;
  text-align: center;
}
.workload_list .list-header {
  padding: 0px 4%;
}
.workload_list .list-header ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0px;
  padding: 0px;
  border-bottom: 1px solid #155fe3;
}
.workload_list .list-header li {
  display: inline-block;
  line-height: 0.9rem;
  /* float: left; */
  /* font-size: 0.9rem; */
  color: #fce630;
  font-weight: bold;
  text-align: center;
  word-wrap: break-word !important;
  word-break: keep-all;
}

.list-main {
  width: 100%;
}
.seamless-warp {
  height: 50%;
  overflow: hidden;
  padding: 0 4%;
}

.seamless-warp ul {
  list-style: none;

  padding: 0;

  margin: 0 auto;
}

.seamless-warp li {
  height: 1.5rem;
  line-height: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: left;
  /* font-size: 0.8rem; */
  color: #fff;
}
.seamless-warp li span {
  display: inline-block;
  /* width: 8%; */
  text-align: center;
  word-wrap: break-word !important;
  word-break: keep-all;
}
</style>