|
|
@@ -1,137 +1,341 @@ |
|
|
|
<!-- |
|
|
|
* @Author: Do not edit |
|
|
|
* @Date: 2024-04-22 15:49:56 |
|
|
|
* @LastEditTime: 2024-04-24 15:49:32 |
|
|
|
* @LastEditTime: 2024-04-25 09:54:39 |
|
|
|
* @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="reportTime" type="year" size="small" @change="changeTime" |
|
|
|
:picker-options="{firstDayOfWeek: 1}" :format="'yyyy 年' + '\u3000' + startTimeStamp + '-' + endTimeStamp" |
|
|
|
style="width: 350px" placeholder="选择年"> |
|
|
|
</el-date-picker> |
|
|
|
</el-form-item> |
|
|
|
<el-button v-if="this.$auth.hasPermi('base:report-auto-production:query')" type="primary" size="small" @click="search()"> |
|
|
|
查询 |
|
|
|
</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> |
|
|
|
<glassYear v-if="glassYearShow" ref="glassYear" :product="false" :params="listQuery" /> |
|
|
|
<proYear v-if="proYearShow" ref="proYear" :product="false" :params="listQuery" /> |
|
|
|
</div> |
|
|
|
<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="yyyy-MM-dd HH:mm:ss" |
|
|
|
type="year" |
|
|
|
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 |
|
|
|
:table-props="tableProps" |
|
|
|
:table-data="tableData" |
|
|
|
:span-method="objectSpanMethod1" |
|
|
|
@emitFun="handleEmitFun" |
|
|
|
:max-height="tableH" /> |
|
|
|
<base-table |
|
|
|
:table-props="tableProps1" |
|
|
|
:table-data="tableData1" |
|
|
|
:span-method="objectSpanMethod1" |
|
|
|
@emitFun="handleEmitFun" |
|
|
|
:max-height="tableH" |
|
|
|
style="margin-top: 15px" /> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import glassYear from '../glass/year.vue' |
|
|
|
import proYear from '../productionYearReport/index.vue' |
|
|
|
import { parseTime } from '../../core/mixins/code-filter' |
|
|
|
import FileSaver from 'file-saver' |
|
|
|
import * as XLSX from 'xlsx/xlsx.mjs' |
|
|
|
import { productionYearY, productionYearD } 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: { glassYear, proYear }, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
listQuery: { |
|
|
|
// pageSize: 10, |
|
|
|
// pageNo: 1, |
|
|
|
// total: 0, |
|
|
|
reportType: 5, |
|
|
|
reportTime: [] |
|
|
|
}, |
|
|
|
startTimeStamp: '', |
|
|
|
endTimeStamp: '', |
|
|
|
reportTime: '', |
|
|
|
glassYearShow: false, |
|
|
|
proYearShow: false |
|
|
|
} |
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.getCurrentYearFirst() |
|
|
|
this.glassYearShow = true |
|
|
|
this.proYearShow = true |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
handleExport() { |
|
|
|
const xlsxParam = { raw: true } |
|
|
|
let workbook = XLSX.utils.book_new() |
|
|
|
var ws = XLSX.utils.table_to_sheet( document.querySelector('#exportTable'), xlsxParam) |
|
|
|
XLSX.utils.book_append_sheet(workbook, ws, '许昌安彩年原片生产汇总') |
|
|
|
var prows = XLSX.utils.table_to_sheet( document.querySelector('#exportproductionTable'), 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; |
|
|
|
}, |
|
|
|
search() { |
|
|
|
this.$nextTick(() => { |
|
|
|
this.$refs['glassYear'].getDataList() |
|
|
|
this.$refs['proYear'].getDataList() |
|
|
|
}) |
|
|
|
}, |
|
|
|
changeTime(val) { |
|
|
|
if(val) { |
|
|
|
// let timeStamp = val.getTime(); //标准时间转为时间戳,毫秒级别 |
|
|
|
this.endTimeStamp = this.timeFun(new Date(val.getFullYear(),11, 31, 7, 0, 0).getTime()); //开始时间 |
|
|
|
this.startTimeStamp = this.timeFun(new Date(val.getFullYear(), 0, 1, 7, 0, 1).getTime()); //结束时间 |
|
|
|
this.listQuery.reportTime[0] = parseTime(new Date(val.getFullYear(), 0, 1, 7, 0, 1).getTime()) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000 |
|
|
|
this.listQuery.reportTime[1] = parseTime(new Date(val.getFullYear(), 11, 31, 7, 0, 0).getTime()) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000 |
|
|
|
} else { |
|
|
|
this.listQuery.reportTime = [] |
|
|
|
// 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() |
|
|
|
let firstDayOfMonth = new Date(startOfMonth) |
|
|
|
this.listQuery.time = parseTime(firstDayOfMonth) |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.getList(); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
async getList() { |
|
|
|
this.tableData = []; |
|
|
|
this.tableProps = [ |
|
|
|
{ |
|
|
|
prop: 'lineName', |
|
|
|
label: '', |
|
|
|
fixed: true, |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'paramsName', |
|
|
|
label: '', |
|
|
|
fixed: true, |
|
|
|
}, |
|
|
|
]; |
|
|
|
this.tableData1 = []; |
|
|
|
this.tableProps1 = [ |
|
|
|
{ |
|
|
|
prop: 'lineName', |
|
|
|
label: '', |
|
|
|
fixed: true, |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'paramsName', |
|
|
|
label: '', |
|
|
|
fixed: true, |
|
|
|
}, |
|
|
|
]; |
|
|
|
await productionYearY(this.listQuery).then((res) => { |
|
|
|
this.resData = res.data; |
|
|
|
// 设置表头 |
|
|
|
Object.keys(this.resData).forEach((item) => { |
|
|
|
this.tableProps.push({ |
|
|
|
prop: item, |
|
|
|
label: item, |
|
|
|
'show-overflow-tooltip': true, |
|
|
|
}); |
|
|
|
}); |
|
|
|
this.buildTableData(this.resData); |
|
|
|
}); |
|
|
|
await productionYearD(this.listQuery).then((res) => { |
|
|
|
this.resData1 = res.data; |
|
|
|
// 设置表头 |
|
|
|
Object.keys(this.resData1).forEach((item) => { |
|
|
|
this.tableProps1.push({ |
|
|
|
prop: item, |
|
|
|
label: item, |
|
|
|
'show-overflow-tooltip': true, |
|
|
|
}); |
|
|
|
}); |
|
|
|
this.buildTableData1(this.resData1); |
|
|
|
}); |
|
|
|
}, |
|
|
|
// 设置表格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); |
|
|
|
}, |
|
|
|
getCurrentYearFirst() { |
|
|
|
let date = new Date(); |
|
|
|
date.setDate(1); |
|
|
|
date.setMonth(0); |
|
|
|
this.reportTime = date; |
|
|
|
this.startTimeStamp = this.timeFun(new Date(new Date().getFullYear(), 0, 1,7,0,1).getTime()); //开始时间 |
|
|
|
this.endTimeStamp = this.timeFun(new Date(new Date().getFullYear(), 11, 31, 7, 0, 0).getTime()); //结束时间 |
|
|
|
this.listQuery.reportTime[0] = parseTime(new Date(new Date().getFullYear(), 0, 1, 7, 0, 1).getTime()) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000 |
|
|
|
this.listQuery.reportTime[1] = parseTime(new Date(new Date().getFullYear(), 11, 31, 7, 0, 0).getTime()) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 100 |
|
|
|
}, |
|
|
|
//时间戳转为yy-mm-dd hh:mm:ss |
|
|
|
timeFun(unixtimestamp) { |
|
|
|
var unixtimestamp = new Date(unixtimestamp); |
|
|
|
var year = 1900 + unixtimestamp.getYear(); |
|
|
|
var month = "0" + (unixtimestamp.getMonth() + 1); |
|
|
|
var date = "0" + unixtimestamp.getDate(); |
|
|
|
return year + "-" + month.substring(month.length - 2, month.length) + "-" + date.substring(date.length - 2, date.length) |
|
|
|
// 设置表格数据 |
|
|
|
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); |
|
|
|
}, |
|
|
|
} |
|
|
|
} |
|
|
|
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(tables1.querySelector('.el-table__fixed')) |
|
|
|
} |
|
|
|
if (fixRight1) { |
|
|
|
tables1.removeChild(tables1.querySelector('.el-table__fixed-right')) |
|
|
|
} |
|
|
|
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-top: 16px; |
|
|
|
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; |
|
|
|
.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> |