1.修改 监控中心 - 环境监测 - 配置监测点位 表格字段显示样式

2.新增 监控中心 - 环境监测 - 历史数据 导出功能
This commit is contained in:
fks-yangshouda
2024-08-28 08:45:34 +08:00
parent 440b43ba42
commit e07cfd4664
4 changed files with 301 additions and 3 deletions

View File

@@ -474,7 +474,7 @@ export const tableConfigCal = (
return data.list.length === 0;
},
extra: {
xlsxMap: tableKeyMap,
xlsxMap: isCarbon ? tableCarbonKeyMap : tableCalKeyMap,
xlsxName: '分组信息YYYY-MM-DD',
},
},

View File

@@ -59,7 +59,10 @@
查询
</a-button>
</div>
<a-button type="primary" style="position: absolute; right: 40px; top: -45px">
<a-button
type="primary"
style="position: absolute; right: 40px; top: -45px"
@click="exportExcel()">
导出
</a-button>
</div>
@@ -84,6 +87,9 @@
</div>
</template>
<script lang="ts" setup>
import XLSX from 'xlsx';
// import Export2Excel from '/@/util/Export2Excel.js';
import { ref, onMounted, defineOptions } from 'vue';
// import { http } from '/nerv-lib/util/http';
import { Pagination, SelectProps, TreeSelectProps, TableColumnType } from 'ant-design-vue';
@@ -346,6 +352,61 @@
}
});
};
// 导出excel
/**导出按钮点击事件函数
* @前期准备 npm install -S xlsx file-saver 及 Export2Excel.js
*/
const exportExcel = () => {
import('/@/util/Export2Excel.js').then((excel) => {
// 导出的表头名
let tHeader = [];
let filterVal = [];
for (let i = 0; i < tableColumns.value.length; i++) {
if (tableColumns.value[i].dataIndex) {
tHeader.push(tableColumns.value[i].title);
filterVal.push(tableColumns.value[i].dataIndex);
}
}
// const tHeader = [
// 'ID',
// '名称',
// '视频ID',
// '视频标题',
// '发布',
// '视频类型',
// '播放量',
// '上传时间',
// ];
// // 导出的表头字段名
// const filterVal = [
// 'id',
// 'name',
// 'videoId',
// 'videoTitle',
// 'release',
// 'videoType',
// 'playVolume',
// 'updateTime',
// ];
//传入的数据
const list = data.value;
const datas = formatJson(filterVal, list);
excel.export_json_to_excel({
header: tHeader, // 表格头部
data: datas, // 表格数据
filename: '表格导出测试', // excel文件名
});
});
};
/**
* 格式化表格数据
* @filterVal 格式头
* @jsonData 用来格式化的表格数据
*/
const formatJson = (filterVal: any, jsonData: any) => {
return jsonData.map((v: any) => filterVal.map((j: any) => v[j]));
};
onMounted(async () => {
// 获取频率
let frequency = await getEnum({ params: { enumType: 'TimeFlagEnum' } });

View File

@@ -65,6 +65,13 @@
:unCheckedValue="0"
@change="(checked) => updateShowed(record)" />
</template>
<template
v-if="column.dataIndex === 'device1Area' || column.dataIndex === 'device2Area'">
<a-tooltip v-if="text.length > 15" :title="text">
{{ text.slice(0, 15) }}...
</a-tooltip>
<span v-else>{{ text }}</span>
</template>
</template>
<template #title>
<div
@@ -171,7 +178,7 @@
const typeList = ref();
const quyuvalue = ref<string[]>([]);
const useFlag = ref<Number>();
const useFlag = ref<Number | null>();
const useFlagList = ref();
useFlagList.value = [
{
@@ -218,6 +225,7 @@
// 重置
const resetting = () => {
quyuvalue.value = [];
useFlag.value = null;
areaName.value = '';
};
// 修改是否显示状态
@@ -296,6 +304,8 @@
// quyuvalue.value = [treeData2.value[0].childList[0].id];
// }
});
queryDeviceInfoListPage();
};
onMounted(async () => {
// 获取环境参数
@@ -360,6 +370,13 @@
{
title: '设备一级区域',
dataIndex: 'device1Area',
// width: 300,
// ellipsis: true,
// textNumber: 15,
// textEllipsis: true,
// ellipsis: {
// showTitle: false, // 设置为 false 在悬浮时显示 tooltip
// },
},
{
title: '设备二级区域',