<template>
|
<BaseCard size="medium" direction="right">
|
<template #content>
|
<el-table
|
ref="tableRef"
|
:data="showData"
|
v-loading="loading"
|
table-layout="fixed"
|
height="calc(94vh - var(--bevel-length-2))"
|
size="small"
|
:show-overflow-tooltip="true"
|
border
|
row-class-name="t-row"
|
cell-class-name="t-cell"
|
header-row-class-name="t-header-row"
|
header-cell-class-name="t-header-cell"
|
:show-summary="false"
|
:highlight-current-row="true"
|
@row-click="handleRowClick"
|
>
|
<el-table-column
|
:fixed="true"
|
prop="TIME"
|
label="时间"
|
:formatter="timeFormatter"
|
align="center"
|
width="66"
|
>
|
</el-table-column>
|
<template v-for="item in tableColumn" :key="item.name">
|
<el-table-column
|
v-if="selectFactorType.includes(item.value)"
|
:prop="item.name"
|
:label="item.label"
|
align="center"
|
width="64"
|
/>
|
</template>
|
</el-table>
|
<el-pagination
|
ref="paginationRef"
|
class="el-pagination"
|
small
|
v-model:current-page="currentPage"
|
v-model:page-size="pageSize"
|
:page-sizes="[200, 500]"
|
:hide-on-single-page="false"
|
layout="prev, pager, next"
|
:total="tableData.length"
|
/>
|
</template>
|
|
<template #footer>
|
<el-row justify="end">
|
<el-text size="small" type="warning"
|
>共 {{ tableData.length }} 条，{{ pageSize }}条/页</el-text
|
>
|
</el-row>
|
</template>
|
</BaseCard>
|
</template>
|
|
<script>
|
import moment from 'moment';
|
import { FactorDatas } from '@/model/FactorDatas';
|
import { checkboxOptions } from '@/constant/checkbox-options';
|
import { TYPE0 } from '@/constant/device-type';
|
|
export default {
|
props: {
|
loading: Boolean,
|
factorDatas: FactorDatas,
|
deviceType: {
|
type: String,
|
// type0: 车载或无人机; type1:无人船
|
default: TYPE0
|
},
|
selectFactorType: {
|
type: Array,
|
default: () => []
|
},
|
// 当前选中高亮的数据点索引
|
locateIndex: Number
|
},
|
data() {
|
return {
|
tableHeight: '500',
|
total: 0,
|
currentPage: 1,
|
pageSize: 200,
|
rowHeight: undefined
|
};
|
},
|
emits: ['tableClick'],
|
watch: {
|
locateIndex(nV, oV) {
|
if (nV == oV) return;
|
this.$refs.tableRef.setCurrentRow(this.tableData[nV]);
|
// 计算分页
|
this.currentPage = parseInt(nV / this.pageSize) + 1;
|
// 计算对应分页中的索引
|
const index = nV % this.pageSize;
|
|
const h = this.getRowHeight();
|
this.$refs.tableRef.setScrollTop(h * index - 350);
|
}
|
},
|
computed: {
|
tableData() {
|
const list = [];
|
for (const key in this.factorDatas.factor) {
|
if (Object.hasOwnProperty.call(this.factorDatas.factor, key)) {
|
const f = this.factorDatas.factor[key];
|
f.datas.forEach((v, i) => {
|
if (list.length <= i) {
|
list.push({
|
index: i,
|
[f.factorName]: v.factorData
|
});
|
} else {
|
list[i][f.factorName] = v.factorData;
|
}
|
});
|
}
|
}
|
return list;
|
},
|
showData() {
|
const sIndex = (this.currentPage - 1) * this.pageSize;
|
const eIndex = sIndex + this.pageSize;
|
return this.tableData.slice(sIndex, eIndex);
|
},
|
tableColumn() {
|
return checkboxOptions(this.deviceType);
|
}
|
},
|
methods: {
|
// 获取表格第一行高度
|
getRowHeight() {
|
if (!this.rowHeight) {
|
const rowList = document.getElementsByClassName('t-row');
|
if (rowList.length != 0) {
|
const row = rowList[0];
|
this.rowHeight = row.getBoundingClientRect().height;
|
} else {
|
this.rowHeight = 0;
|
}
|
}
|
return this.rowHeight;
|
},
|
timeFormatter(row, col, cellValue, index) {
|
return moment(cellValue).format('HH:mm:ss');
|
},
|
handleRowClick(row, col, event) {
|
this.$emit('tableClick', row.index);
|
// console.log(row);
|
// console.log(col);
|
// console.log(event.target.getBoundingClientRect().height);
|
}
|
}
|
};
|
</script>
|
<style>
|
.el-table {
|
--el-table-bg-color: transparent;
|
--el-table-row-hover-bg-color: #23dad0a2;
|
--el-table-current-row-bg-color: #7dff5d96;
|
--el-table-text-color: var(--font-color);
|
}
|
|
.t-row {
|
cursor: pointer;
|
background-color: transparent !important;
|
}
|
|
.t-cell {
|
/* background: red !important; */
|
/* height: 40px;
|
border: 1px solid black; */
|
}
|
|
.t-header-row {
|
}
|
|
.t-header-cell {
|
background-color: var(--bg-color-2) !important;
|
text-align: center !important;
|
color: white !important;
|
}
|
.el-pagination {
|
--el-pagination-bg-color: transparent;
|
--el-pagination-button-bg-color: transparent;
|
--el-pagination-button-color: transparent;
|
--el-pagination-button-disabled-color: white;
|
--el-pagination-button-disabled-bg-color: transparent;
|
--el-pagination-text-color: white;
|
--el-pagination-button-color: white;
|
}
|
</style>
|
