From 660021a28de9b84b4362c171fdbbf89587f0c5af Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期四, 13 二月 2025 17:30:50 +0800
Subject: [PATCH] 1. 修改部分bug 2. 新增2D路线轨迹绘制
---
src/components/monitor/DataTable.vue | 137 +++++++++++++++++++++++++++++++++++++++------
1 files changed, 118 insertions(+), 19 deletions(-)
diff --git a/src/components/monitor/DataTable.vue b/src/components/monitor/DataTable.vue
index 29619e0..c918ade 100644
--- a/src/components/monitor/DataTable.vue
+++ b/src/components/monitor/DataTable.vue
@@ -1,3 +1,4 @@
+<!-- eslint-disable no-unused-vars -->
<template>
<BaseCard size="medium" direction="right">
<template #content>
@@ -17,6 +18,7 @@
:show-summary="false"
:highlight-current-row="true"
@row-click="handleRowClick"
+ @sort-change="handleSort"
>
<el-table-column
:fixed="true"
@@ -25,6 +27,7 @@
:formatter="timeFormatter"
align="center"
width="66"
+ sortable="custom"
>
</el-table-column>
<template v-for="item in tableColumn" :key="item.name">
@@ -32,8 +35,10 @@
v-if="selectFactorType.includes(item.value)"
:prop="item.name"
:label="item.label"
+ :formatter="factorFormatter"
align="center"
- width="64"
+ width="79"
+ sortable="custom"
/>
</template>
</el-table>
@@ -51,7 +56,18 @@
</template>
<template #footer>
- <el-row justify="end">
+ <el-row justify="space-between" class="p-b-2 one-row">
+ <el-button
+ :loading="downloadLoading"
+ type="primary"
+ class="el-button-custom"
+ size="small"
+ @click="handleDownload"
+ :disabled="downloadLoading"
+ :icon="downloadLoading ? '' : 'download'"
+ >
+ 瀵煎嚭鏁版嵁
+ </el-button>
<el-text size="small" type="warning"
>鍏� {{ tableData.length }} 鏉★紝{{ pageSize }}鏉�/椤�</el-text
>
@@ -66,6 +82,7 @@
import { checkboxOptions } from '@/constant/checkbox-options';
import { TYPE0 } from '@/constant/device-type';
import { windDir } from '@/constant/wind-dir';
+import fileUtil from '@/utils/file';
export default {
props: {
@@ -76,6 +93,7 @@
// type0: 杞﹁浇鎴栨棤浜烘満; type1:鏃犱汉鑸�
default: TYPE0
},
+ deviceCode: String,
selectFactorType: {
type: Array,
default: () => []
@@ -89,21 +107,39 @@
total: 0,
currentPage: 1,
pageSize: 200,
- rowHeight: undefined
+ rowHeight: undefined,
+ // tableData:[],
+ showData: [],
+ downloadLoading: false
};
},
emits: ['tableClick'],
watch: {
locateIndex(nV, oV) {
if (nV == oV) return;
- this.$refs.tableRef.setCurrentRow(this.tableData[nV]);
+ const _index = this.tableData.findIndex((v) => v.index == nV);
+ this.$refs.tableRef.setCurrentRow(this.tableData[_index]);
// 璁＄畻鍒嗛〉
- this.currentPage = parseInt(nV / this.pageSize) + 1;
+ this.currentPage = parseInt(_index / this.pageSize) + 1;
// 璁＄畻瀵瑰簲鍒嗛〉涓殑绱㈠紩
- const index = nV % this.pageSize;
+ const index = _index % this.pageSize;
const h = this.getRowHeight();
- this.$refs.tableRef.setScrollTop(h * index - 350);
+ setTimeout(() => {
+ this.$refs.tableRef.setScrollTop(h * index - 350);
+ }, 200);
+ },
+ currentPage(nV, oV) {
+ if (nV == oV) return;
+ this.getShowData();
+ },
+ pageSize(nV, oV) {
+ if (nV == oV) return;
+ this.getShowData();
+ },
+ tableData(nV, oV) {
+ if (nV == oV) return;
+ this.getShowData();
}
},
computed: {
@@ -115,9 +151,6 @@
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({
index: i,
@@ -131,16 +164,28 @@
}
return list;
},
- showData() {
- const sIndex = (this.currentPage - 1) * this.pageSize;
- const eIndex = sIndex + this.pageSize;
- return this.tableData.slice(sIndex, eIndex);
- },
+ // showData: {
+ // get() {
+ // // const sIndex = (this.currentPage - 1) * this.pageSize;
+ // // const eIndex = sIndex + this.pageSize;
+ // // return this.tableData.slice(sIndex, eIndex);
+ // this.pageData = this.getShowData();
+ // return this.pageData
+ // },
+ // set(newValue) {
+ // this.pageData = newValue
+ // }
+ // },
tableColumn() {
- return checkboxOptions(this.deviceType);
+ return checkboxOptions(this.deviceType, true);
}
},
methods: {
+ getShowData() {
+ const sIndex = (this.currentPage - 1) * this.pageSize;
+ const eIndex = sIndex + this.pageSize;
+ this.showData = this.tableData.slice(sIndex, eIndex);
+ },
// 鑾峰彇琛ㄦ牸绗竴琛岄珮搴�
getRowHeight() {
if (!this.rowHeight) {
@@ -157,20 +202,74 @@
timeFormatter(row, col, cellValue, index) {
return moment(cellValue).format('HH:mm:ss');
},
+ factorFormatter(row, col, cellValue, index) {
+ if (col.property == 'WIND_DIRECTION') {
+ return windDir(cellValue);
+ } else {
+ return cellValue;
+ }
+ },
handleRowClick(row, col, event) {
this.$emit('tableClick', row.index);
// console.log(row);
// console.log(col);
// console.log(event.target.getBoundingClientRect().height);
+ },
+ handleSort({ column, prop, order }) {
+ // console.log(column);
+ // console.log(prop);
+ // console.log(order);
+ this.tableData.sort((a, b) => {
+ if (order == 'ascending') {
+ if (a[prop] != b[prop]) {
+ return a[prop] - b[prop];
+ } else {
+ return a.TIME - b.TIME;
+ }
+ } else if (order == 'descending') {
+ if (a[prop] != b[prop]) {
+ return b[prop] - a[prop];
+ } else {
+ return a.TIME - b.TIME;
+ }
+ } else {
+ return a.TIME - b.TIME;
+ }
+ });
+ this.getShowData();
+ },
+ handleDownload() {
+ this.downloadLoading = true;
+ setTimeout(() => {
+ this.downloadLoading = false;
+ }, 2000);
+ const excelData = this.tableData.map((v) => {
+ const res = {
+ 缂栧彿: ++v.index,
+ 鏃堕棿: moment(v.TIME).format('YYYY-MM-DD HH:mm:ss')
+ };
+ this.tableColumn.forEach((c) => {
+ res[c.label] = v[c.name];
+ });
+ return res;
+ });
+ fileUtil.exportToExcel(excelData, this.deviceCode, '璧拌埅鐩戞祴鏁版嵁.xlsx');
+ this.downloadLoading = false;
}
}
};
</script>
+<style scoped>
+.one-row {
+ /* background-color: red; */
+ flex-wrap: nowrap;
+}
+</style>
<style>
.el-table {
--el-table-bg-color: transparent;
- --el-table-row-hover-bg-color: #23dad0a2;
- --el-table-current-row-bg-color: #23dad0a2;
+ --el-table-row-hover-bg-color: var(--select_color);
+ --el-table-current-row-bg-color: var(--select_color);
/* --el-table-current-row-bg-color: #7dff5d96; */
--el-table-text-color: var(--font-color);
}
@@ -191,7 +290,7 @@
.t-header-cell {
background-color: var(--bg-color-2) !important;
- text-align: center !important;
+ /* text-align: center !important; */
color: white !important;
}
.el-pagination {
--
Gitblit v1.9.3