From 3832a82fb79d4cec4cca5e2854e54953f2095ef8 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期五, 06 九月 2024 16:55:08 +0800
Subject: [PATCH] 1. 添加溯源清单功能 2. 修复切换至走航监测界面后，之前正在加载的历史数据依旧展示至地图的问题 3. 添加折线图下载图片功能； 4. 添加数据导出功能； 5. 添加设备管理功能； 6. 添加数据弹框和溯源清单开关功能； 7. 优化3D里面的颜色展示逻辑，底部颜色由原来的因子最小值颜色改为当前量级的上一个量级对应的颜色
---
src/components/monitor/DataTable.vue | 140 +++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 123 insertions(+), 17 deletions(-)
diff --git a/src/components/monitor/DataTable.vue b/src/components/monitor/DataTable.vue
index 2681130..6579e51 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
>
@@ -65,6 +81,8 @@
import { FactorDatas } from '@/model/FactorDatas';
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: {
@@ -75,6 +93,7 @@
// type0: 杞﹁浇鎴栨棤浜烘満; type1:鏃犱汉鑸�
default: TYPE0
},
+ deviceCode: String,
selectFactorType: {
type: Array,
default: () => []
@@ -88,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: {
@@ -112,29 +149,43 @@
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 (list.length <= i) {
list.push({
index: i,
- [f.factorName]: v.factorData
+ [name]: value
});
} else {
- list[i][f.factorName] = v.factorData;
+ 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);
- },
+ // 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);
}
},
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) {
@@ -151,20 +202,75 @@
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: #7dff5d96;
+ --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);
}
@@ -184,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