390 lines
10 KiB
Vue
390 lines
10 KiB
Vue
<!--
|
|
* @Author: Do not edit
|
|
* @Date: 2024-04-22 15:49:56
|
|
* @LastEditTime: 2024-04-26 10:32:29
|
|
* @LastEditors: DY
|
|
* @Description:
|
|
-->
|
|
<template>
|
|
<div class="weekly">
|
|
<el-form
|
|
:inline="true"
|
|
:model="listQuery"
|
|
class="blueTip">
|
|
<el-form-item
|
|
label="月份"
|
|
prop="reportTime">
|
|
<el-date-picker
|
|
v-model="listQuery.time"
|
|
value-format="timestamp"
|
|
type="month"
|
|
size="small"
|
|
placeholder="选择月"></el-date-picker>
|
|
</el-form-item>
|
|
<el-button
|
|
v-if="this.$auth.hasPermi('base:report-auto-production:query')"
|
|
type="primary"
|
|
size="small"
|
|
@click="getList">
|
|
查询
|
|
</el-button>
|
|
<el-button
|
|
v-if="
|
|
this.$auth.hasPermiAnd([
|
|
'base:report-auto-original-glass:export',
|
|
'base:report-auto-production:export',
|
|
])
|
|
"
|
|
type="primary"
|
|
size="small"
|
|
plain
|
|
@click="handleExport">
|
|
导出
|
|
</el-button>
|
|
</el-form>
|
|
<base-table
|
|
ref="productionDataMonthTable11"
|
|
id="productionDataMonthTable1"
|
|
:table-props="tableProps"
|
|
:table-data="tableData"
|
|
:span-method="objectSpanMethod1"
|
|
@emitFun="handleEmitFun"
|
|
:max-height="tableH" />
|
|
<base-table
|
|
ref="productionDataMonthTable22"
|
|
id="productionDataMonthTable2"
|
|
:table-props="tableProps1"
|
|
:table-data="tableData1"
|
|
:span-method="objectSpanMethod1"
|
|
@emitFun="handleEmitFun"
|
|
:max-height="tableH"
|
|
style="margin-top: 15px" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { productionMonthY, productionMonthD } from '@/api/report/glass';
|
|
import { parseTime } from '../../core/mixins/code-filter';
|
|
import FileSaver from 'file-saver';
|
|
import * as XLSX from 'xlsx/xlsx.mjs';
|
|
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
|
|
|
|
export default {
|
|
// components: { monthWeek, proMonth },
|
|
mixins: [tableHeightMixin],
|
|
data() {
|
|
return {
|
|
heightNum: 350,
|
|
listQuery: {
|
|
time: '',
|
|
},
|
|
// startTimeStamp: '',
|
|
// endTimeStamp: '',
|
|
// reportTime: '',
|
|
// glassWeekShow: false,
|
|
// proWeekShow: false,
|
|
tableData: [],
|
|
tableProps: [],
|
|
tableData1: [],
|
|
tableProps1: [],
|
|
resData: [],
|
|
span1: [], //表格1的合并规则
|
|
resData1: [],
|
|
span2: []
|
|
};
|
|
},
|
|
created() {
|
|
let now = new Date()
|
|
now.setHours(0, 0, 0, 0)
|
|
now.setDate(1)
|
|
let startOfMonth = now.getTime()
|
|
this.listQuery.time = startOfMonth
|
|
},
|
|
mounted() {
|
|
this.getList();
|
|
},
|
|
methods: {
|
|
getTime1() {
|
|
const firstDayOfMonth = new Date(this.listQuery.time)
|
|
const lastDayOfMonth = new Date(firstDayOfMonth.getFullYear(), firstDayOfMonth.getMonth() + 1, 0, 0, 0, 0, 0)
|
|
// console.log('时间', parseTime(firstDayOfMonth), parseTime(lastDayOfMonth))
|
|
this.$set(this.tableProps[2], 'label', '许昌安彩月原片生产汇总(' + parseTime(firstDayOfMonth) + '-' + parseTime(lastDayOfMonth) + ')')
|
|
this.$set(this.tableProps1[2], 'label', '许昌安彩月成品生产汇总(' + parseTime(firstDayOfMonth) + '-' + parseTime(lastDayOfMonth) + ')')
|
|
// this.tableProps[2].label = '许昌安彩月原片生产汇总(' + parseTime(firstDayOfMonth) + '-' + parseTime(lastDayOfMonth) + ')'
|
|
// this.tableProps1[2].label = '许昌安彩月成品生产汇总(' + parseTime(firstDayOfMonth) + '-' + parseTime(lastDayOfMonth) + ')'
|
|
console.log(this.tableProps, this.tableProps1)
|
|
},
|
|
async getList() {
|
|
const firstDayOfMonth = new Date(this.listQuery.time)
|
|
const lastDayOfMonth = new Date(firstDayOfMonth.getFullYear(), firstDayOfMonth.getMonth() + 1, 0, 0, 0, 0, 0)
|
|
this.tableData = [];
|
|
this.tableProps = [
|
|
{
|
|
prop: 'lineName',
|
|
label: '',
|
|
fixed: true,
|
|
width: 120,
|
|
'show-overflow-tooltip': true
|
|
},
|
|
{
|
|
prop: 'paramsName',
|
|
label: '',
|
|
fixed: true,
|
|
width: 120,
|
|
'show-overflow-tooltip': true
|
|
},
|
|
{
|
|
prop: 'xc',
|
|
label: '许昌安彩月原片生产汇总(' + parseTime(firstDayOfMonth) + '-' + parseTime(lastDayOfMonth) + ')',
|
|
// align: 'center',
|
|
children: []
|
|
}
|
|
];
|
|
this.tableData1 = [];
|
|
this.tableProps1 = [
|
|
{
|
|
prop: 'lineName',
|
|
label: '',
|
|
fixed: true,
|
|
width: 120,
|
|
'show-overflow-tooltip': true
|
|
},
|
|
{
|
|
prop: 'paramsName',
|
|
label: '',
|
|
fixed: true,
|
|
width: 120,
|
|
'show-overflow-tooltip': true,
|
|
},
|
|
{
|
|
prop: 'xc1',
|
|
label: '许昌安彩月成品生产汇总(' + parseTime(firstDayOfMonth) + '-' + parseTime(lastDayOfMonth) + ')',
|
|
// align: 'center',
|
|
children: []
|
|
}
|
|
];
|
|
await productionMonthY(this.listQuery).then((res) => {
|
|
this.resData = res.data;
|
|
// 设置表头
|
|
Object.keys(this.resData).forEach((item) => {
|
|
this.tableProps[2].children.push({
|
|
prop: item,
|
|
label: item,
|
|
'show-overflow-tooltip': true,
|
|
});
|
|
});
|
|
this.buildTableData(this.resData);
|
|
});
|
|
await productionMonthD(this.listQuery).then((res) => {
|
|
this.resData1 = res.data;
|
|
// 设置表头
|
|
Object.keys(this.resData1).forEach((item) => {
|
|
this.tableProps1[2].children.push({
|
|
prop: item,
|
|
label: item,
|
|
'show-overflow-tooltip': true,
|
|
});
|
|
});
|
|
this.buildTableData1(this.resData1);
|
|
});
|
|
// this.getTime1()
|
|
},
|
|
// 设置表格2数据
|
|
buildTableData1(data) {
|
|
let keys = Object.keys(data);
|
|
let tempData = [];
|
|
let subKeys = Object.keys(data[keys[0]]);
|
|
let sub2Keys = Object.keys(data[keys[0]][subKeys[0]]);
|
|
for (let i = 0; i < keys.length; i++) {
|
|
if (i === 0) {
|
|
for (let j = 0; j < subKeys.length; j++) {
|
|
for (let k = 0; k < sub2Keys.length; k++) {
|
|
let obj = {};
|
|
obj.lineName = subKeys[j];
|
|
obj.paramsName = sub2Keys[k];
|
|
obj[keys[0]] = data[keys[0]][subKeys[j]][sub2Keys[k]];
|
|
tempData.push(obj);
|
|
}
|
|
}
|
|
} else {
|
|
for (let j = 0; j < subKeys.length; j++) {
|
|
for (let k = 0; k < sub2Keys.length; k++) {
|
|
for (let v = 0; v < tempData.length; v++) {
|
|
if (
|
|
tempData[v].lineName === subKeys[j] &&
|
|
tempData[v].paramsName === sub2Keys[k]
|
|
) {
|
|
tempData[v][keys[i]] = data[keys[i]][subKeys[j]][sub2Keys[k]];
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
this.tableData1 = tempData;
|
|
this.getSpanArr1(this.tableData1);
|
|
this.$nextTick(() => {
|
|
this.reTable1();
|
|
});
|
|
},
|
|
// 设置表格数据
|
|
buildTableData(data) {
|
|
let keys = Object.keys(data);
|
|
let tempData = [];
|
|
let subKeys = Object.keys(data[keys[0]]);
|
|
let sub2Keys = Object.keys(data[keys[0]][subKeys[0]]);
|
|
for (let i = 0; i < keys.length; i++) {
|
|
if (i === 0) {
|
|
for (let j = 0; j < subKeys.length; j++) {
|
|
for (let k = 0; k < sub2Keys.length; k++) {
|
|
let obj = {};
|
|
obj.lineName = subKeys[j];
|
|
obj.paramsName = sub2Keys[k];
|
|
obj[keys[0]] = data[keys[0]][subKeys[j]][sub2Keys[k]];
|
|
tempData.push(obj);
|
|
}
|
|
}
|
|
} else {
|
|
for (let j = 0; j < subKeys.length; j++) {
|
|
for (let k = 0; k < sub2Keys.length; k++) {
|
|
for (let v = 0; v < tempData.length; v++) {
|
|
if (
|
|
tempData[v].lineName === subKeys[j] &&
|
|
tempData[v].paramsName === sub2Keys[k]
|
|
) {
|
|
tempData[v][keys[i]] = data[keys[i]][subKeys[j]][sub2Keys[k]];
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
this.tableData = tempData;
|
|
this.getSpanArr(this.tableData);
|
|
this.$nextTick(() => {
|
|
this.reTable();
|
|
});
|
|
},
|
|
reTable() {
|
|
this.$refs.productionDataMonthTable11.doLayout('productionDataMonthTable1');
|
|
},
|
|
reTable1() {
|
|
this.$refs.productionDataMonthTable22.doLayout('productionDataMonthTable2');
|
|
},
|
|
getSpanArr1(data) {
|
|
this.span2 = [];
|
|
for (var i = 0; i < data.length; i++) {
|
|
if (i === 0) {
|
|
this.span2.push(1);
|
|
this.index1 = 0;
|
|
} else {
|
|
if (data[i].lineName === data[i - 1].lineName) {
|
|
this.span2[this.index1] += 1;
|
|
this.span2.push(0);
|
|
} else {
|
|
this.span2.push(1);
|
|
this.index1 = i;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
// 获取合并行
|
|
getSpanArr(data) {
|
|
this.span1 = [];
|
|
for (var i = 0; i < data.length; i++) {
|
|
if (i === 0) {
|
|
this.span1.push(1);
|
|
this.index = 0;
|
|
} else {
|
|
if (data[i].lineName === data[i - 1].lineName) {
|
|
this.span1[this.index] += 1;
|
|
this.span1.push(0);
|
|
} else {
|
|
this.span1.push(1);
|
|
this.index = i;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
objectSpanMethod1({ rowIndex, columnIndex }) {
|
|
if (columnIndex === 0) {
|
|
const _row = this.span1[rowIndex];
|
|
return {
|
|
rowspan: _row,
|
|
colspan: 1,
|
|
};
|
|
}
|
|
},
|
|
handleExport() {
|
|
const xlsxParam = { raw: true };
|
|
let tables = document.querySelector('.el-table').cloneNode(true)
|
|
const fix = tables.querySelector('.el-table__fixed')
|
|
const fixRight = tables.querySelector('.el-table__fixed-right')
|
|
if (fix) {
|
|
tables.removeChild(tables.querySelector('.el-table__fixed'))
|
|
}
|
|
if (fixRight) {
|
|
tables.removeChild(tables.querySelector('.el-table__fixed-right'))
|
|
}
|
|
let workbook = XLSX.utils.book_new();
|
|
var ws = XLSX.utils.table_to_sheet(
|
|
tables,
|
|
xlsxParam
|
|
);
|
|
XLSX.utils.book_append_sheet(workbook, ws, '许昌安彩月原片生产汇总');
|
|
|
|
let tables1 = document.querySelectorAll('.el-table')[1].cloneNode(true)
|
|
const fix1 = tables1.querySelector('.el-table__fixed')
|
|
const fixRight1 = tables1.querySelector('.el-table__fixed-right')
|
|
if (fix1) {
|
|
tables1.removeChild(fix1)
|
|
}
|
|
if (fixRight1) {
|
|
tables1.removeChild(fixRight1)
|
|
}
|
|
var prows = XLSX.utils.table_to_sheet(
|
|
tables1,
|
|
xlsxParam
|
|
);
|
|
XLSX.utils.book_append_sheet(workbook, prows, '许昌安彩月成品生产汇总');
|
|
let fileName = '生产数据汇总表-月报.xlsx';
|
|
var wbout = XLSX.write(workbook, {
|
|
bookType: 'xlsx',
|
|
bookSST: true,
|
|
type: 'array',
|
|
});
|
|
try {
|
|
FileSaver.saveAs(
|
|
new Blob([wbout], { type: 'application/octet-stream' }),
|
|
fileName
|
|
);
|
|
this.$message.success('导出成功');
|
|
} catch (e) {
|
|
if (typeof console !== 'undefined') console.log(e, wbout);
|
|
}
|
|
return wbout;
|
|
},
|
|
handleEmitFun(payload) {
|
|
console.log('payload', payload);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.weekly {
|
|
padding: 16px;
|
|
}
|
|
.blueTip::before {
|
|
display: inline-block;
|
|
content: '';
|
|
width: 4px;
|
|
height: 18px;
|
|
background: #0b58ff;
|
|
border-radius: 1px;
|
|
margin-right: 8px;
|
|
margin-top: 8px;
|
|
margin-left: 16px;
|
|
}
|
|
</style>
|