<template>
|
<div class="app-container">
|
<el-row :gutter="10" class="mb8">
|
<el-col :span="1.5">
|
<el-button
|
type="warning"
|
plain
|
icon="Download"
|
@click="handleExport"
|
v-hasPermi="['apsPartRouteStat:export']"
|
>导出</el-button>
|
</el-col>
|
<el-col :span="1.5">
|
<el-button
|
type="info"
|
plain
|
icon="Refresh"
|
@click="handleRefresh"
|
v-hasPermi="['apsPartRouteStat:edit']"
|
>更新</el-button>
|
</el-col>
|
<right-toolbar @queryTable="getList" :search="false"></right-toolbar>
|
</el-row>
|
<vxe-grid ref="gridRef" v-bind="gridOptions" :loading="loading"></vxe-grid>
|
</div>
|
</template>
|
|
<script setup name="apsPartRouteStat">
|
import { query,updateStat } from "@/api/mainPlan/partRouteStat.js";
|
import { ref } from "vue";
|
import * as XLSX from 'xlsx';
|
|
const { proxy } = getCurrentInstance();
|
|
const loading = ref(true);
|
const gridRef = ref();
|
const height = ref(document.documentElement.clientHeight - 130 + "px;")
|
const headers = ref([]);
|
const exportData = ref([]);
|
|
const gridOptions = reactive({
|
border: true,
|
stripe: true,
|
loading: false,
|
showOverflow: true,
|
showHeaderOverflow: true,
|
showFooterOverflow: true,
|
height: height,
|
columnConfig: {
|
resizable: true
|
},
|
scrollX: {
|
enabled: true,
|
gt: 0,
|
threshold: 50
|
},
|
scrollY: {
|
enabled: true,
|
gt: 0,
|
threshold: 50
|
}
|
});
|
|
let tableColumn = []
|
let tableData = []
|
let merges = [];
|
|
/** 查询零件统计表列表 */
|
function getList() {
|
let rowKey = 0
|
let colKey = 0
|
headers.value = []
|
exportData.value = []
|
tableColumn = []
|
tableData = []
|
loading.value = true;
|
query().then(response => {
|
const colList = []
|
let headersOne = []
|
let headersTwo = []
|
if(response.code == '200'){
|
if (!response.planTitle) {
|
loading.value = false;
|
return;
|
}
|
headersOne.push('日期');
|
headersTwo.push('资源组');
|
colList.push({
|
field: 'dateCol',
|
title: '日期',
|
fixed: 'left',
|
children: [
|
{ field: `resourceName`, title: '资源组', width: 250, type: 'html'},
|
],
|
width: 160
|
})
|
response.planTitle.forEach(item => {
|
headersOne.push(item);
|
headersOne.push('');
|
headersOne.push('');
|
headersTwo.push('设计工时');
|
headersTwo.push('需求工时');
|
headersTwo.push('产能负荷');
|
colKey++
|
colList.push({
|
field: `dateColTime${colKey}`,
|
title: item,
|
children: [
|
{ field: `designTimes${colKey}`, title: '设计工时', width: 80},
|
{ field: `requireTimes${colKey}`, title: '需求工时', width: 80},
|
{ field: `capacityLoad${colKey}`, title: '产能负荷', width: 80, type: 'html'},
|
],
|
width: 160
|
})
|
});
|
|
headers.value.push(headersOne);
|
headers.value.push(headersTwo);
|
|
const columnList = [...tableColumn, ...colList]
|
const dataList = []
|
let startCol = 1;
|
|
//获取map
|
response.planTable.forEach(mapItem => {
|
rowKey++
|
let lastCol = startCol + 2;
|
merges.push({ s: { r: 0, c: startCol }, e: { r: 0, c: lastCol} });
|
startCol = lastCol + 1;
|
let data = [];
|
const item = {
|
id: `${rowKey}`
|
}
|
for (const [key, listValue] of Object.entries(mapItem)) {
|
data.push(key);
|
|
let tableKey = 0;
|
let flag = false;
|
listValue.forEach(listItem => {
|
|
tableKey++
|
item[`designTimes${tableKey}`] = listItem.designTimes;
|
item[`requireTimes${tableKey}`] = listItem.requireTimes;
|
item[`capacityLoad${tableKey}`] = listItem.capacityLoad > 100 ? `<font color="red">${listItem.capacityLoad}%</font>` :listItem.capacityLoad+'%';
|
data.push(listItem.designTimes);
|
data.push(listItem.requireTimes);
|
data.push(listItem.capacityLoad+'%');
|
if (listItem.capacityLoad > 100) {
|
flag = true;
|
}
|
});
|
|
item[`resourceName`] = flag ? `<div class='el-badge'><sup class="el-badge__content is-fixed is-dot"></sup>${key}</div>` : key;
|
}
|
exportData.value.push(data);
|
dataList.push(item);
|
});
|
|
const $grid = gridRef.value
|
if ($grid) {
|
tableColumn = columnList
|
tableData = [...tableData, ...dataList]
|
$grid.loadColumn(tableColumn)
|
$grid.loadData(tableData)
|
gridOptions.loading = false
|
}
|
|
loading.value = false;
|
}
|
});
|
}
|
|
/** 导出按钮操作 */
|
function handleExport() {
|
|
// 合并表头和数据
|
const finalData = [...headers.value, ...exportData.value];
|
|
// 将数据转换为 worksheet
|
const ws = XLSX.utils.aoa_to_sheet(finalData);
|
|
// 合并单元格（如果需要）
|
/* ws['!merges'] = [
|
{ s: { r: 0, c: 1 }, e: { r: 0, c: 3 } },
|
{ s: { r: 0, c: 0 }, e: { r: 0, c: 0 } }
|
]; */
|
|
ws['!merges'] = merges;
|
|
// 创建 workbook
|
const wb = XLSX.utils.book_new();
|
// 将 worksheet 添加到 workbook 中
|
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
|
// 导出文件
|
XLSX.writeFile(wb, `apsPartRouteStat_${new Date().getTime()}.xlsx`);
|
|
}
|
|
/** 刷新按钮操作 */
|
function handleRefresh(){
|
updateStat().then(response => {
|
if(response.code == '200'){
|
getList();
|
}
|
});
|
}
|
|
getList();
|
</script>
|
