eta_front/src/views/dataEntry_manage/thirdBase/components/lookEdbDataDia.vue

<template>
  <el-dialog
    :visible.sync="isShow"
		:close-on-click-modal="false"
		:modal-append-to-body='false'
    :title="$t('Edb.detail_lookdata_btn')"
		@close="cancelHandle"
		custom-class="look-edb-data-dialog"
		center
		width="1200px"
		v-dialogDrag
  >

    <div class="main">
      <el-table
        :data="tableData"
        style="box-shadow: 0px 3px 6px rgba(155, 170, 219, 0.2);"
        border
      >
        <el-table-column
          v-for="item in tableColums"
          :key="item.label"
          :label="item.label"
          :width="item.widthsty"
          :min-width="item.minwidthsty"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row[item.key] }}</span>
          </template>
        </el-table-column>
        <div slot="empty">
            <tableNoData :text="$t('Table.prompt_slogan')" size="mini"/>
        </div>
      </el-table>

      <ul 
        class="value-ul" 
        ref="valueUl" 
        @scroll="scrollHandle" 
        v-show="dataList.length"
      >
        <li
          class="value-item"
          v-for="(item,index) in dataList"
          :key="item.ID"
        >
          <span class="value-label">
            <span style="position: relative;">
              <i class="new-tag" v-if="index===0"></i>
              {{item.DataTime}}
            </span>
          </span>
          <span class="value-label" style="min-width:200px;text-align:center;">
            <span class="value-style">{{item.Value}}</span>
          </span>
        </li>
        <li class="nodata value-item" v-if="!dataList.length">{{$t('Table.prompt_slogan')}}</li>
      </ul>
    </div>

  </el-dialog>
</template>
<script>
import { selfDataInterface } from '@/api/modules/dataSource';
export default {
  props: {
    isShow: {
      type: Boolean
    },
    edbInfo: {
      type: Object
    }
  },
  computed: {
    tableColums() {
      return [
         {
            label: this.$t('Edb.Detail.e_id'),
            key: 'IndexCode',
          },
         {
            label: this.$t('Edb.Detail.e_name'),
            key: 'IndexName',
          },
          {
            label: /* '指标开始时间' */this.$t('SelftDataPage.col_start_time'),
            key: 'StartDate',
          },
          {
            label: /* '指标最新时间' */this.$t('SelftDataPage.col_newest_time'),
            key: 'DataUpdateTime',
          },
      ]
    }
  },
  watch: {
    isShow(nval) {
      if(!nval) return

      console.log(this.edbInfo)
      this.tableData = [this.edbInfo]
      this.getData();
    }
  },
  data() {
    return {
      tableData: [],
      
      dataList: [],
      page_no: 1
    }
  },
  mounted(){

  },
  methods:{
    cancelHandle() {
      this.page_no = 1;
      this.$refs.valueUl.scrollTop=0
      this.$emit('update:isShow',false)
    },
    
    async getData() {
      const res = await selfDataInterface.getDataList({
        CurrentIndex: this.page_no,
        PageSize: 10,
        IndexCode: this.edbInfo.IndexCode
      })

      if(res.Ret!==200) return

      this.haveMore = this.page_no  < res.Data.Paging.Pages ? true : false;
      let data = res.Data.List||[];
      this.dataList = this.page_no===1 ? data : this.dataList.concat(data)
    },

    scrollHandle(e) {
      const dom = e.target
			let scrollTop = dom.scrollTop; //滑入屏幕上方的高度
			let windowHeitht = dom.clientHeight; //页面的高度
			let scrollHeight = dom.scrollHeight; //整个div的高度
			let total = scrollTop + windowHeitht
			if(total >= scrollHeight && this.haveMore){
				this.page_no ++;
				this.getData();
			}
    }
  },
}
</script>
<style scoped lang='scss'>
.look-edb-data-dialog{
	display: flex;
	flex-direction: column;
	height: 100%;
	.main {
    padding: 20px 0;
  }

  .value-ul {
    height: 300px;
    margin-top: 10px;
    border-bottom: 1px solid #EBEFF6;
    overflow-y: auto;
    .value-item {
      padding: 10px 0;
      border: 1px solid #dcdfe6;
      border-bottom: none;
      display: flex;
      justify-content: space-around;
      >span{
        padding:0 16px;
        box-sizing: border-box;
      }
      .value-label {
        position: relative;
        color: #666;
      }
     
      .new-tag {
        width: 6px;
        height: 6px;
        display: inline-block;
        position: absolute;
        left: -12px;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 50%;
        background: #f00;
      }
    }
    .nodata {
      text-align: center;
      padding: 40px 0;
      color: #999;
    }
  }
}
</style>