eta_front/src/views/predictEdb_manage/components/childData.vue

<template>
  <div class="data-wrapper" v-if="showData">
    <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 #header>
          <span>{{ item.label }}</span>
        </template>
        <template slot-scope="{row}">
          <span v-if="item.key === 'Unit'">{{ lang === 'en'?row.UnitEn||getUnitTrans(row.Unit):getUnitTrans(row.Unit) }}</span>
          <span v-else-if="item.key === 'Frequency'">{{ lang === 'en' ? row.FrequencyEn||getFrequencyTrans(row.Frequency):getFrequencyTrans(row.Frequency) }}</span>
          <span v-else>{{ row[item.key] }}</span>
        </template>
      </el-table-column>
      <div slot="empty" style="padding: 50px 0 320px">
        <tableNoData text="暂无数据" size="mini"/>
      </div>
    </el-table>
    <el-table
			:data="tableData"
			style="box-shadow: 0px 3px 6px rgba(155, 170, 219, 0.2);"
			border>
			<el-table-column
				v-for="item in tableColumsTwo"
				:key="item.label"
				:label="item.label"
				:width="item.widthsty"
				:min-width="item.minwidthsty"
				align="center"
			>
				<template #header>
					<span>{{ item.label }}</span>
				</template>
				<template slot-scope="scope">
					<span>{{ scope.row[item.key] }}</span>
				</template>
			</el-table-column>
			<div slot="empty" style="padding: 50px 0 320px;">
					<tableNoData :text="defaultWarn"/>
			</div>
		</el-table>
    <ul
      class="value-ul"
      ref="valueUl"
      @scroll="scrollHandle"
      v-show="dataList.length"
    >
      <li
        class="value-item"
        v-for="item in dataList"
        :key="item.EdbDataId"
      >
        <span class="value-label">
            <span style="position: relative;">
                <i class="new-tag" v-if="tableData[0].LatestDate===item.DataTime"></i>
                {{item.DataTime}}
            </span>
        </span>
        <span
          :class="['value-label',{'predict-act': item.isPredic}]"
          style="min-width: 200px; text-align: center"
          ><span :class="['value-style',{'predict-act': item.isPredic}]">{{item.Value}}</span></span
        >
      </li>
      <li class="nodata value-item" v-if="!dataList.length"><!-- 暂无数据 -->{{$t('Table.prompt_slogan')}}</li>
    </ul>
  </div>
</template>

<script>
import * as preDictEdbInterface from '@/api/modules/predictEdbApi.js';
export default {
  props: {
    id: Number,
    lang: String
  },
  watch: {
    id(newval) {
      this.getData()
    },
    lang(newval) {
      this.$emit('updateTit',{
        edb_name: this.tableData[0].EdbName,
        edb_nameEn: this.tableData[0].EdbNameEn,
        userid: this.tableData[0].SysUserId})
    }
  },
  computed: {
    /*表格列 */
		tableColums(){
			return [
				{
					label: this.$t('Edb.Detail.e_id'),
					key: 'EdbCode',
					 widthsty: '280px'
				},
				{
					label: this.$t('Edb.Detail.e_name'),
					key: 'EdbName',
					minwidthsty: '200px'
				},
				{
					label: this.$t('Edb.Detail.e_fre'),
					key: 'Frequency',
					 widthsty: '100px'
				},
				{
					label: this.$t('Edb.Detail.e_unit'),
					key: 'Unit',
					widthsty: '140px'
				},
			]
		},
		tableColumsTwo() {
			return [
        {
            label: this.$t('Edb.Detail.e_menu'),
            key: 'Menu',
            widthsty: '280px',
        },
        {
            label: this.$t('Edb.Detail.e_start_time'),
            key: 'StartDate',
            minwidthsty: '100px',
        },
        {
            label: this.$t('Edb.Detail.predict_end_date'),
            key: 'EndDate',
            minwidthsty: '100px'
        },
        {
            label: this.$t('Edb.Detail.e_update_time'),
            key: 'ModifyTime',
            minminwidthsty: '120px',
        },
        {
            label: this.$t('Edb.creater'),
            key: 'SysUserRealName',
            widthsty: '140px',
        }
      ]
		},
  },
  data() {
    return {
      showData: false,
      tableData: [],
      page_no: 1,
      dataList: [],
    };
  },
  methods: {
    /* 获取数据 */
    getData() {
      preDictEdbInterface.edbDataInfo({
        EdbInfoId: this.id,
        CurrentIndex: this.page_no
      }).then(res => {
        this.showData = true;
        if(res.Ret !== 200) return
        const { Item } = res.Data;
        this.tableData = [Item] || [];
        Item.PredictDataList && Item.PredictDataList.forEach(_ => {
          _.isPredic = true;
        })
        const classify_arr = res.Data.ClassifyList || [];
        let str = '';
        classify_arr.length && classify_arr.reverse().map((item) => str += item.ClassifyName + '/');
        this.$set(Item,'Menu',str);
        this.haveMore =  this.page_no < res.Data.Paging.Pages;
        this.dataList = this.page_no === 1 ? [...Item.PredictDataList,...Item.DataList] : [...this.dataList,...Item.DataList];

        this.$emit('updateTit',{
          edb_name: Item.EdbName,
          edb_nameEn: Item.EdbNameEn,
          userid: Item.SysUserId,
        })
        this.$emit('setCurrentClassify',Item.ClassifyId)

      })
    },

    changeLangOptions() {
      this.$emit('openLangInfoDia',this.tableData[0])
    },

    /* 滚动加载 */
    scrollHandle: _.throttle(function() {
			let scrollTop = this.$refs.valueUl.scrollTop;
      let clientHeight = this.$refs.valueUl.clientHeight;
      let scrollHeight = this.$refs.valueUl.scrollHeight;
			if(scrollTop + clientHeight >= scrollHeight-10 && this.haveMore){
				this.page_no ++;
				this.getData();
			}
		},200),

  },
  mounted() {
    this.getData()
  },
};
</script>
<style lang="scss">
.data-wrapper {
    .el-table--enable-row-transition .el-table__body td{
        background: #fff !important;
    }
    .el-table td, .el-table th.is-leaf {
        background: #F2F6FA !important;
    }
}
</style>
<style scoped lang="scss">
.data-wrapper {
  .value-ul {
    margin-top: 10px;
    border-bottom: 1px solid #dcdfe6;
    border-top: 1px solid #dcdfe6;
    /* max-height: 520px; */
    max-height: calc(100vh - 445px);
    overflow-y: auto;
    .value-item {
      /* width: 100%; */
      padding: 14px 0;
      border: 1px solid #dcdfe6;
      border-bottom: none;
      display: flex;
      justify-content: space-around;
      &:first-child { border-top: none; }
      span{
        flex: 1;
        text-align: center;
      }
      .value-label {
        position: relative;
        color: #666;
        .value-style{
            /* background-color: #ECF2FE;
            color: #0052D9; */
            padding:5px;
            border-radius: 4px;
            &.predict-act{
                color: orange;
            }
        }
      }
      .predict-act {
        color: orange;
      }
      .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>