331 lines
9.4 KiB
Vue
331 lines
9.4 KiB
Vue
<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>
|