eta_front/src/views/dataEntry_manage/databaseComponents/edbDetailData.vue

<template>
	<div class="edb-detail-data-wrap">
		<el-table
			:data="tableData"
			class="firstColumTable" border>
			<el-table-column
				v-for="item in tableColumsOne"
				:key="item.label"
				:width="item.widthsty"
				:min-width="item.minwidthsty"
				align="center">
				<template slot="header" slot-scope="scope">
					<div class="chartEn-mark" style="top: -10px;" v-show="scope.$index ==0 && tableData[0] && tableData[0].IsEnEdb" >En</div>
					<span>{{item.label}}</span>
				</template>	
				<template slot-scope="scope">
					<span v-show="currentLang=='ch'">{{ scope.row[item.key] }}</span> 
					<span v-show="currentLang=='en'">{{scope.row[item.enKey||item.key] || scope.row[item.key]}}</span>
				</template>
			</el-table-column>
		</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': tableData[0].DataInsertConfig.Date===item.DataTime}]" style="min-width:200px;text-align:center;">
					<span :class="['value-style',{'predict-act': tableData[0].DataInsertConfig.Date===item.DataTime}]">{{item.Value}}</span>
				</span>
			</li>
			<li class="nodata value-item" v-if="!dataList.length">{{$t('Table.prompt_slogan')}}</li>
		</ul>
	</div>
</template>

<script>
export default {
	props:{
		currentLang:{
			type:String,
			default:'ch'
		},
		tableData:{
			type:Array,
			default:()=>{return []}
		},
		tableColumsOne:{
			type:Array,
			default:()=>{return []}
		},
		tableColumsTwo:{
			type:Array,
			default:()=>{return []}
		},
		defaultWarn:{
			type:String,
			default:'暂无数据'
		},
		dataList:{
			type:Array,
			default:()=>{return []}
		},
		haveMore:{
			type:Boolean,
			default:false
		}
	},
	data() {
		return {

		};
	},
	methods: {
		/* 数值滚动加载 */
		scrollHandle: _.throttle(function() {
			let scrollTop = this.$refs.valueUl.scrollTop;
			let clientHeight = this.$refs.valueUl.clientHeight;
			let scrollHeight = this.$refs.valueUl.scrollHeight;
			if(scrollTop===0) return
			if(scrollTop + clientHeight >= scrollHeight-10 && this.haveMore){
				this.$emit('getNextData')
			}
		},200),
	},
};
</script>

<style lang="scss">
.edb-detail-data-wrap{
    .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">
.edb-detail-data-wrap{
	display: flex;
	flex-direction: column;
	height: 100%;
	.firstColumTable{
		box-shadow: 0px 3px 6px rgba(155, 170, 219, 0.2);
	}
	.el-table{
		flex: none;
	}
	.value-ul{
		/* flex: 1;
		overflow-y: auto; */
        overflow-y: auto;
	}
}
</style>