template
<el-table ref="dailyRef" :data="tableData1" max-height="680px" class="table" :row-class-name="tableRowClassName" v-loading="templateLoading" element-loading-text="加载中"
element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
<el-table-column prop="plantName" label="企业名称" width="200"></el-table-column>
<el-table-column label="排放量(tCO2)">
<el-table-column prop="emCurDayVal" label="本日"></el-table-column>
<el-table-column prop="emLastDayVal" label="同期"></el-table-column>
<el-table-column prop="emCurMonthVal" label="本月"></el-table-column>
<el-table-column prop="emLastMonthVal" label="同期"></el-table-column>
<el-table-column prop="emCurYearVal" label="本年"></el-table-column>
<el-table-column prop="emLastYearVal" label="同期"></el-table-column>
</el-table-column>
<el-table-column label="供电排放强度(tCO2/MWh)">
<el-table-column prop="pemiCurDayVal" label="本日"></el-table-column>
<el-table-column prop="pemiLastDayVal" label="同期"></el-table-column>
<el-table-column prop="pemiCurMonthVal" label="本月"></el-table-column>
<el-table-column prop="pemiLastMonthVal" label="同期"></el-table-column>
<el-table-column prop="pemiCurYearVal" label="本年"></el-table-column>
<el-table-column prop="pemiLastYearVal" label="同期"></el-table-column>
</el-table-column>
<el-table-column label="供热排放强度(tCO2/GJ)">
<el-table-column prop="hemiCurDayVal" label="本日"></el-table-column>
<el-table-column prop="hemiLastDayVal" label="同期"></el-table-column>
<el-table-column prop="hemiCurMonthVal" label="本月"></el-table-column>
<el-table-column prop="hemiLastMonthVal" label="同期"></el-table-column>
<el-table-column prop="hemiCurYearVal" label="本年"></el-table-column>
<el-table-column prop="hemiLastYearVal" label="同期"></el-table-column>
</el-table-column>
</el-table>
script
methods: {
async handleSearch() {
this.templateLoading = true
clearInterval(this.timeDailyRef)
const data = {
currentPage: this.currentPage,
pageSize: this.pageSize,
}
let res = await queryReportByRange({ searchParam: data })
if (res.data.success) {
if (res.data.data && res.data.data.length !== 0) {
this.ribaoScroll = false
res.data.data.map(item => {
this.tableData1.push(item)
})
} else {
this.ribaoScroll = true
}
this.dailyRefScroll()
}
this.templateLoading = false
},
// 日报滚动
dailyRefScroll() {
clearInterval(this.timeDailyRef)
const table = this.$refs.dailyRef
const divData = table.bodyWrapper
// divData.scrollTop = 0
this.addDailyRefScroll(divData)
divData.onmouseover = () => {
clearInterval(this.timeDailyRef)
}
divData.onmouseout = () => {
this.addDailyRefScroll(divData)
}
},
addDailyRefScroll(divData) {
let scrollTop = divData.scrollTop
this.timeDailyRef = setInterval(() => {
scrollTop = divData.scrollTop
divData.scrollTop += 2 // 当值不在变化的时候 说明滚动到最底部 divData.scrollTop 也不会在继续加了
if (scrollTop == divData.scrollTop) { // 注意在el-table 里 表格滚动只能限制在最顶部和最底部之间滚动
if (this.ribaoScroll) {
scrollTop = 0
divData.scrollTop = 0
} else {
if (this.flag == 1) {
this.currentPage++
this.handleSearch()
}
}
}
}, 100)
},
}