From 1788c96aea9247cc36ef8b82734997f1a6a92fb4 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期五, 23 八月 2024 11:07:42 +0800
Subject: [PATCH] 新增新版本。静安区特供版
---
src/components/monitor/DataTable.vue | 166 ++++++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 145 insertions(+), 21 deletions(-)
diff --git a/src/components/monitor/DataTable.vue b/src/components/monitor/DataTable.vue
index eff8fda..29619e0 100644
--- a/src/components/monitor/DataTable.vue
+++ b/src/components/monitor/DataTable.vue
@@ -1,61 +1,110 @@
<template>
- <BaseCard>
+ <BaseCard size="medium" direction="right">
<template #content>
<el-table
- :data="tableData"
+ ref="tableRef"
+ :data="showData"
v-loading="loading"
table-layout="fixed"
- :row-class-name="tableRowClassName"
- :height="tableHeight"
+ 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 prop="TIME" label="鏃堕棿" />
<el-table-column
- v-for="(item, index) in tableColumn"
- :key="index"
- :prop="item.name"
- :label="item.label"
- />
+ :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
- v-if="pagination"
ref="paginationRef"
class="el-pagination"
+ small
v-model:current-page="currentPage"
v-model:page-size="pageSize"
- :page-sizes="[10, 20, 50, 100]"
- :background="true"
- layout="total, sizes, prev, pager, next, jumper"
- :total="total"
+ :page-sizes="[200, 500]"
+ :hide-on-single-page="false"
+ layout="prev, pager, next"
+ :total="tableData.length"
/>
</template>
- <template #footer> </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';
+import { windDir } from '@/constant/wind-dir';
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: 20,
- loading: false
+ 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() {
@@ -64,19 +113,94 @@
if (Object.hasOwnProperty.call(this.factorDatas.factor, key)) {
const f = this.factorDatas.factor[key];
f.datas.forEach((v, i) => {
+ const name = f.factorName;
+ let value = v.factorData;
+ if (name == 'WIND_DIRECTION') {
+ value = windDir(value);
+ }
if (list.length <= i) {
- list.push({ [f.factorName]: v });
+ list.push({
+ index: i,
+ [name]: value
+ });
} else {
- list[i][f.factorName] = v;
+ list[i][name] = value;
}
});
}
}
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: #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>
--
Gitblit v1.9.3