You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
330 lines
9.4 KiB
330 lines
9.4 KiB
<template>
|
|
<a-table
|
|
row-key="id"
|
|
:columns="columns"
|
|
:data-source="data"
|
|
bordered
|
|
:pagination="false"
|
|
:row-selection="rowSelection"
|
|
style="width: 99%; margin-left: 0.5%">
|
|
<template #bodyCell="{ column, record }">
|
|
<template v-if="column.title === '操作'">
|
|
<a-button type="link" @click="setStandard(record)" v-if="record.id != selectedKey[0]"
|
|
>设为目标值</a-button
|
|
>
|
|
</template>
|
|
</template>
|
|
</a-table>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import ExcelJS from 'exceljs';
|
|
import FileSaver from 'file-saver';
|
|
import { defineComponent, ref, inject, watch, onMounted } from 'vue';
|
|
|
|
export default defineComponent({
|
|
name: 'AnalysisTable',
|
|
setup() {
|
|
const selectedKey = ref([]);
|
|
const rowSelection = {
|
|
type: 'radio',
|
|
|
|
selectedRowKeys: selectedKey,
|
|
// onChange: (selectedRowKeys: string[]) => {
|
|
// selectedKey.value = selectedRowKeys;
|
|
// debugger;
|
|
// },
|
|
};
|
|
const columns = [
|
|
{
|
|
title: '设备/节点',
|
|
dataIndex: 'name',
|
|
align: 'center',
|
|
},
|
|
{
|
|
title: '统计值',
|
|
dataIndex: 'value',
|
|
align: 'center',
|
|
},
|
|
{
|
|
title: '同比',
|
|
align: 'center',
|
|
children: [
|
|
{
|
|
title: '△差值',
|
|
dataIndex: 'yoyDiff',
|
|
align: 'center',
|
|
},
|
|
{
|
|
title: '增长率',
|
|
dataIndex: 'yoyRate',
|
|
align: 'center',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: '环比',
|
|
align: 'center',
|
|
children: [
|
|
{
|
|
title: '△差值',
|
|
dataIndex: 'momDiff',
|
|
align: 'center',
|
|
},
|
|
{
|
|
title: '增长率',
|
|
dataIndex: 'momRate',
|
|
align: 'center',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: '纵向对比',
|
|
align: 'center',
|
|
children: [
|
|
{
|
|
title: '△差值',
|
|
dataIndex: 'zongxiangDiff',
|
|
align: 'center',
|
|
},
|
|
{
|
|
title: '增长率',
|
|
dataIndex: 'zongxiangRate',
|
|
align: 'center',
|
|
},
|
|
],
|
|
},
|
|
|
|
{
|
|
title: '操作',
|
|
align: 'center',
|
|
// dataIndex: 'date',
|
|
},
|
|
];
|
|
let data = ref<any[]>([]);
|
|
|
|
interface PageData {
|
|
// 图表 表格数据
|
|
graphTableList: any[];
|
|
// 图表 表格表头
|
|
graphTableColumns: any[];
|
|
// 图表 图表数据
|
|
graphGraphList: any[];
|
|
// 分析 表格数据
|
|
analysisTableList: any[];
|
|
// 分析 图表数据
|
|
analysisGraphList: any[];
|
|
}
|
|
const pageData = inject<PageData>('pageData');
|
|
|
|
if (!pageData) {
|
|
throw new Error('pageData is not provided');
|
|
}
|
|
// 监听 pageData 的变化
|
|
watch(
|
|
() => pageData as PageData,
|
|
(_newValue, _oldValue) => {
|
|
// 深度拷贝
|
|
data.value = JSON.parse(JSON.stringify(pageData.analysisTableList));
|
|
if (data.value.length != 0) {
|
|
setStandard(data.value[0]);
|
|
}
|
|
},
|
|
{ deep: true },
|
|
);
|
|
|
|
// 导出excel文件
|
|
// 因为有多级表头，特殊处理，没有用公共方法
|
|
const export1 = () => {
|
|
if (!data.value || data.value.length == 0) {
|
|
return;
|
|
}
|
|
|
|
// 不需要合并序号
|
|
for (let i = 0; i < data.value.length; i++) {
|
|
data.value[i].index = i + 1;
|
|
}
|
|
|
|
// 创建工作簿
|
|
const workbook = new ExcelJS.Workbook();
|
|
// 添加工作表，名为sheet1
|
|
const sheet1 = workbook.addWorksheet('sheet1');
|
|
|
|
// 字段名
|
|
let filterVal = [
|
|
'name',
|
|
'value',
|
|
'yoyDiff',
|
|
'yoyRate',
|
|
'momDiff',
|
|
'momRate',
|
|
'zongxiangDiff',
|
|
'zongxiangRate',
|
|
];
|
|
// 表格columns
|
|
// 添加多行表头
|
|
sheet1.addRows([
|
|
['设备/节点', '统计值', '同比', '', '环比', '', '纵向对比', ''],
|
|
['', '', '△差值', '增长率', '△差值', '增长率', '△差值', '增长率'],
|
|
]);
|
|
|
|
// 合并单元格来实现多行表头
|
|
sheet1.mergeCells('A1:A2'); // 合并 '设备/节点' 单元格
|
|
sheet1.mergeCells('B1:B2'); // 合并 '统计值' 单元格
|
|
sheet1.mergeCells('C1:D1'); // 合并 '同比' 单元格
|
|
sheet1.mergeCells('E1:F1'); // 合并 '环比' 单元格
|
|
sheet1.mergeCells('G1:H1'); // 合并 '纵向对比' 单元格
|
|
//传入的数据
|
|
const list = data.value;
|
|
|
|
//格式化数据
|
|
const datas = formatJson(filterVal, list);
|
|
|
|
// 将数据写入工作表
|
|
datas.forEach((row: any) => {
|
|
// const values = Object.values(row);
|
|
sheet1.addRow(row);
|
|
});
|
|
|
|
let column = sheet1.columns;
|
|
for (let i = 0; i < column.length; i++) {
|
|
column[i].width = 20;
|
|
}
|
|
|
|
// 修改所有单元格样式
|
|
// 遍历每一行
|
|
sheet1.eachRow((row) => {
|
|
// 遍历每个单元格
|
|
row.eachCell((cell) => {
|
|
// 设置边框样式
|
|
cell.border = {
|
|
top: { style: 'thin' },
|
|
left: { style: 'thin' },
|
|
bottom: { style: 'thin' },
|
|
right: { style: 'thin' },
|
|
};
|
|
// 设置居中对齐
|
|
cell.alignment = {
|
|
vertical: 'middle',
|
|
horizontal: 'center',
|
|
};
|
|
});
|
|
});
|
|
// 获取标题行数据
|
|
const titleCell1 = sheet1.getRow(1);
|
|
// 设置行高为30
|
|
titleCell1.height = 30;
|
|
// 设置标题行单元格样式
|
|
titleCell1.eachCell((cell) => {
|
|
// 设置标题行背景颜色为黄色
|
|
cell.fill = {
|
|
type: 'pattern',
|
|
pattern: 'solid',
|
|
fgColor: { argb: 'FFFFFF' },
|
|
};
|
|
// 设置标题行字体
|
|
cell.font = {
|
|
// color: { argb: 'FF0000' }, //颜色为红色
|
|
bold: true, // 字体粗体
|
|
size: 18, // 设置字体大小为18
|
|
};
|
|
});
|
|
const titleCell2 = sheet1.getRow(2);
|
|
// 设置行高为30
|
|
titleCell2.height = 30;
|
|
// 设置标题行单元格样式
|
|
titleCell2.eachCell((cell) => {
|
|
// 设置标题行背景颜色为黄色
|
|
cell.fill = {
|
|
type: 'pattern',
|
|
pattern: 'solid',
|
|
fgColor: { argb: 'FFFFFF' },
|
|
};
|
|
// 设置标题行字体
|
|
cell.font = {
|
|
// color: { argb: 'FF0000' }, //颜色为红色
|
|
bold: true, // 字体粗体
|
|
size: 18, // 设置字体大小为18
|
|
};
|
|
});
|
|
// 获取第二行到最后一行的内容数据
|
|
const bodyRows = sheet1.getRows(3, sheet1.rowCount);
|
|
if (bodyRows) {
|
|
// 处理内容行的数据
|
|
bodyRows.forEach((bodyRow) => {
|
|
// 设置行高为20
|
|
bodyRow.height = 20;
|
|
bodyRow.eachCell((cell) => {
|
|
cell.font = {
|
|
size: 16, // 设置内容行字体大小为16
|
|
};
|
|
});
|
|
});
|
|
}
|
|
|
|
// 导出表格文件
|
|
workbook.xlsx
|
|
.writeBuffer()
|
|
.then((buffer) => {
|
|
let file = new Blob([buffer], { type: 'application/octet-stream' });
|
|
FileSaver.saveAs(file, '分析数据导出.xlsx');
|
|
})
|
|
.catch((error) => console.log('Error writing excel export', error));
|
|
};
|
|
/**
|
|
* 格式化表格数据
|
|
* @filterVal 格式头
|
|
* @jsonData 用来格式化的表格数据
|
|
*/
|
|
function formatJson(filterVal: any, jsonData: any) {
|
|
return jsonData.map((v: any) => filterVal.map((j: any) => v[j]));
|
|
}
|
|
onMounted(() => {
|
|
// 深度拷贝
|
|
data.value = JSON.parse(JSON.stringify(pageData.analysisTableList));
|
|
// selectedKey.value = [data.value[0]];
|
|
if (data.value.length != 0) {
|
|
setStandard(data.value[0]);
|
|
}
|
|
});
|
|
const setStandard = (record: any) => {
|
|
selectedKey.value = [record.id];
|
|
data.value.forEach((item) => {
|
|
// id: 'HLlmTZp8_0805_0001';
|
|
// momDiff: 38.28; 环比差值
|
|
// momRate: '-171.58%'; 环比率
|
|
// momValue: -22.31; 环比值
|
|
// name: '总电表';
|
|
// value: 10.56; 值
|
|
// yoyDiff: 38.28; 同比差值
|
|
// yoyRate: '-138.10%'; 同比率
|
|
// yoyValue: -27.72; 同比值
|
|
if (item.id == record.id) {
|
|
item.zongxiangDiff = '——';
|
|
item.zongxiangRate = '——';
|
|
} else {
|
|
item.zongxiangDiff = (item.value - record.value).toFixed(2);
|
|
item.zongxiangRate = ((item.zongxiangDiff / record.value) * 100).toFixed(2) + '%';
|
|
}
|
|
});
|
|
};
|
|
return {
|
|
data,
|
|
columns,
|
|
rowSelection,
|
|
selectedKey,
|
|
setStandard,
|
|
export1,
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
:deep(
|
|
.ant-table-tbody > tr.ant-table-row:hover > td,
|
|
.ant-table-tbody > tr > td.ant-table-cell-row-hover
|
|
) {
|
|
background: #f4f8ff !important;
|
|
}
|
|
</style>
|
|
|