1.修改 监控中心 - 环境监测 - 配置监测点位 表格字段显示样式
2.新增 监控中心 - 环境监测 - 历史数据 导出功能
This commit is contained in:
@@ -474,7 +474,7 @@ export const tableConfigCal = (
|
||||
return data.list.length === 0;
|
||||
},
|
||||
extra: {
|
||||
xlsxMap: tableKeyMap,
|
||||
xlsxMap: isCarbon ? tableCarbonKeyMap : tableCalKeyMap,
|
||||
xlsxName: '分组信息YYYY-MM-DD',
|
||||
},
|
||||
},
|
||||
|
@@ -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' } });
|
||||
|
@@ -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: '设备二级区域',
|
||||
|
Reference in New Issue
Block a user