test #47
@@ -20,6 +20,7 @@
|
||||
<el-select
|
||||
v-model="dataForm.productionLineId"
|
||||
placeholder="请选择产线"
|
||||
filterable
|
||||
@change="handleProductlineChange">
|
||||
<el-option
|
||||
v-for="opt in productionLineList"
|
||||
@@ -37,6 +38,7 @@
|
||||
:rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
|
||||
<el-select
|
||||
v-model="dataForm.workshopSectionId"
|
||||
filterable
|
||||
placeholder="请选择工段"
|
||||
@change="$emit('update', dataForm)">
|
||||
<el-option
|
||||
@@ -56,6 +58,7 @@
|
||||
:rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
|
||||
<el-select
|
||||
v-model="dataForm.equipmentId"
|
||||
filterable
|
||||
placeholder="请选择设备"
|
||||
@change="$emit('update', dataForm)">
|
||||
<el-option
|
||||
@@ -71,6 +74,7 @@
|
||||
<el-form-item label="工段排序" prop="sort">
|
||||
<el-input
|
||||
v-model="dataForm.sort"
|
||||
filterable
|
||||
@change="$emit('update', dataForm)"
|
||||
placeholder="请输入工段排序" />
|
||||
</el-form-item>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2023-09-13 09:02:25
|
||||
* @LastEditTime: 2023-09-13 10:33:20
|
||||
* @LastEditors: zhp
|
||||
* @LastEditTime: 2023-10-08 15:39:38
|
||||
* @LastEditors: DY
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
@@ -61,11 +61,12 @@ export default {
|
||||
// },
|
||||
methods: {
|
||||
initChart(xData, yData,lineName) {
|
||||
console.log(xData,yData);
|
||||
console.log( '打印结果', xData,yData, lineName);
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
this.setOptions(xData, yData, lineName)
|
||||
},
|
||||
setOptions(xData, yData, lineName) {
|
||||
console.log('da', lineName)
|
||||
let seriesData = []
|
||||
lineName.forEach((item,index) => {
|
||||
seriesData.push({
|
||||
@@ -86,7 +87,7 @@ export default {
|
||||
type: 'value'
|
||||
},
|
||||
series: seriesData
|
||||
})
|
||||
}, true)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -228,7 +228,14 @@ export default {
|
||||
this.listQuery.lineId = val.lineIds
|
||||
this.listQuery.startTime = val.time ? String(new Date(val.time[0]).getTime()) : undefined;
|
||||
this.listQuery.endTime = val.time ? String(new Date(val.time[1]).getTime()) : undefined;
|
||||
this.getData()
|
||||
if (val.time) {
|
||||
this.getData()
|
||||
} else {
|
||||
this.$message({
|
||||
message: '请选择时间',
|
||||
type: 'warning'
|
||||
});
|
||||
}
|
||||
break;
|
||||
case 'reset':
|
||||
this.$refs.searchBarForm.resetForm();
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2023-09-13 09:02:25
|
||||
* @LastEditTime: 2023-09-20 09:29:40
|
||||
* @LastEditTime: 2023-10-08 16:36:37
|
||||
* @LastEditors: DY
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<div style="margin: 20px">
|
||||
<el-button v-for="(item, index) in dataArray" :key="index" @click="changeChart(index)">{{ item.name }}</el-button>
|
||||
<el-button v-for="(item, index) in buttonList" :key="index" :class="[item.actived ? 'activeButton': 'normalButton']" @click="changeChart(index)">{{ item.name }}</el-button>
|
||||
</div>
|
||||
<div ref="chartDiv" :class="className" :style="{height:height,width:width}" />
|
||||
</div>
|
||||
@@ -43,7 +43,8 @@ export default {
|
||||
return {
|
||||
chart: null,
|
||||
dataArray: [],
|
||||
xDatas: []
|
||||
xDatas: [],
|
||||
buttonList: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@@ -51,12 +52,34 @@ export default {
|
||||
methods: {
|
||||
changeChart(index) {
|
||||
this.setOptions(this.xDatas, this.dataArray[index])
|
||||
this.buttonList.forEach((item, s) => {
|
||||
if (index === s) {
|
||||
// item.actived = true
|
||||
this.$nextTick(() =>{
|
||||
// item.actived = true
|
||||
this.$set(item, 'actived', true)
|
||||
})
|
||||
} else {
|
||||
// item.actived = false
|
||||
this.$nextTick(() =>{
|
||||
// item.actived = false
|
||||
this.$set(item, 'actived', false)
|
||||
})
|
||||
// this.$set(item, 'actived', false)
|
||||
}
|
||||
})
|
||||
console.log('看一下数22222据', this.dataArray)
|
||||
},
|
||||
initChart(xData, yData, lineName) {
|
||||
this.dataArray = yData
|
||||
this.buttonList = this.dataArray.map((item, index) => {
|
||||
return {
|
||||
'name': item.name,
|
||||
'actived': index === 0 ? true : false
|
||||
}
|
||||
})
|
||||
console.log('看一下数据', this.dataArray)
|
||||
this.xDatas = xData
|
||||
console.log(xData,yData);
|
||||
console.log('zale', yData[0].eqData)
|
||||
this.chart = echarts.init(this.$refs.chartDiv, 'macarons')
|
||||
this.setOptions(xData, yData[0], lineName)
|
||||
},
|
||||
@@ -100,3 +123,12 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.activeButton {
|
||||
background-color: rgb(93,159,255);
|
||||
}
|
||||
.normalButton {
|
||||
background-color: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -57,8 +57,7 @@ export default {
|
||||
lineIds: [],
|
||||
time: ''
|
||||
},
|
||||
xData: [],
|
||||
yData:[],
|
||||
dateLabelList: [],
|
||||
optionArrUrl: [getProductionLinePage ],
|
||||
formConfig: [
|
||||
{
|
||||
@@ -113,75 +112,101 @@ export default {
|
||||
let arr = [
|
||||
{
|
||||
prop: 'lineName',
|
||||
label: '产线',
|
||||
align: 'center',
|
||||
label: '产线'
|
||||
},
|
||||
{
|
||||
prop: 'sum',
|
||||
label: '合计',
|
||||
align: 'center',
|
||||
label: '合计'
|
||||
},
|
||||
{
|
||||
prop: res.data.nameData[0].name,
|
||||
label: res.data.nameData[0].name,
|
||||
prop: res.data ? res.data.nameData[0].name : undefined,
|
||||
label: res.data ? res.data.nameData[0].name : undefined,
|
||||
align: 'center',
|
||||
children:[
|
||||
|
||||
]
|
||||
}
|
||||
]
|
||||
console.log(res.data.nameData.slice(1))
|
||||
res.data.nameData.slice(1).forEach(item => {
|
||||
const props = {
|
||||
'prop': item.name,
|
||||
'label': item.name,
|
||||
'align': 'center'
|
||||
}
|
||||
arr[2].children.push(props)
|
||||
})
|
||||
let tableDataArr =[]
|
||||
res.data.data.forEach(item => {
|
||||
let obj = {}
|
||||
obj.lineName= item.lineName,
|
||||
obj.sum= item.sum,
|
||||
item.data.forEach((ele, index) => {
|
||||
// console.log(ele)
|
||||
ele.children.forEach((e) => {
|
||||
console.log(e.dynamicName)
|
||||
obj['' + e.dynamicName + ''] = e.dynamicValue
|
||||
console.log(obj['' + e.dynamicName + '']);
|
||||
})
|
||||
})
|
||||
tableDataArr.push(obj)
|
||||
});
|
||||
this.tableData = tableDataArr
|
||||
console.log(this.tableData)
|
||||
console.log(arr)
|
||||
this.tableProps = arr
|
||||
// console.log(res.data.nameData.slice(1))
|
||||
let xData = []
|
||||
|
||||
res.data.nameData.slice(1).forEach(item => {
|
||||
xData.push(item.name)
|
||||
// arr[2].children.push(props)
|
||||
})
|
||||
let yAllData = []
|
||||
let lineName = []
|
||||
res.data.data.forEach(item => {
|
||||
let yData = []
|
||||
lineName.push(item.lineName)
|
||||
// let obj = {}
|
||||
// obj.lineName = item.lineName,
|
||||
// obj.sum = item.sum,
|
||||
item.data.forEach((ele, index) => {
|
||||
if (res.data) {
|
||||
let tempDateList = []
|
||||
res.data.nameData.forEach(date => {
|
||||
tempDateList.push(date.name)
|
||||
})
|
||||
this.dateLabelList = Array.from(new Set(tempDateList))
|
||||
|
||||
this.dateLabelList.forEach(item => {
|
||||
if (item.indexOf('年') === -1) {
|
||||
// 构造表头
|
||||
const props = {
|
||||
'prop': item,
|
||||
'label': item
|
||||
}
|
||||
arr[2].children.push(props)
|
||||
|
||||
// 构造echarts横坐标
|
||||
xData.push(item)
|
||||
}
|
||||
})
|
||||
// res.data.nameData.slice(1).forEach(item => {
|
||||
// const props = {
|
||||
// 'prop': item.name,
|
||||
// 'label': item.name,
|
||||
// 'align': 'center'
|
||||
// }
|
||||
// arr[2].children.push(props)
|
||||
// })
|
||||
let tableDataArr =[]
|
||||
res.data.data.forEach(item => {
|
||||
let obj = {}
|
||||
obj.lineName= item.lineName,
|
||||
obj.sum= item.sum,
|
||||
item.data.forEach((ele, index) => {
|
||||
// console.log(ele)
|
||||
ele.children.forEach((e) => {
|
||||
// let yData = []
|
||||
yData.push(e.dynamicValue)
|
||||
ele.children.forEach((e) => {
|
||||
console.log(e.dynamicName)
|
||||
obj['' + e.dynamicName + ''] = e.dynamicValue
|
||||
console.log(obj['' + e.dynamicName + '']);
|
||||
})
|
||||
})
|
||||
yAllData.push(yData)
|
||||
});
|
||||
console.log(lineName)
|
||||
tableDataArr.push(obj)
|
||||
});
|
||||
this.tableData = tableDataArr
|
||||
this.tableProps = arr
|
||||
|
||||
// let tempList = []
|
||||
// res.data.nameData.slice(1).forEach(item => {
|
||||
// tempList.push(item.name)
|
||||
// // arr[2].children.push(props)
|
||||
// })
|
||||
// xData = Array.from(new Set(tempList))
|
||||
|
||||
res.data.data.forEach(item => {
|
||||
let yData = []
|
||||
lineName.push(item.lineName)
|
||||
// let obj = {}
|
||||
// obj.lineName = item.lineName,
|
||||
// obj.sum = item.sum,
|
||||
item.data.forEach((ele, index) => {
|
||||
// console.log(ele)
|
||||
ele.children.forEach((e) => {
|
||||
// let yData = []
|
||||
yData.push(e.dynamicValue)
|
||||
})
|
||||
})
|
||||
yAllData.push(yData)
|
||||
});
|
||||
console.log(lineName)
|
||||
} else {
|
||||
this.tableProps = arr
|
||||
this.tableData = []
|
||||
xData = []
|
||||
yAllData = []
|
||||
lineName = []
|
||||
}
|
||||
// res.data.data[0].data[0].children.forEach((item, index) => {
|
||||
// // console.log(item)
|
||||
// yData.push(item.dynamicValue)
|
||||
@@ -203,7 +228,14 @@ export default {
|
||||
this.listQuery.time = val.time ? new Date(val.time).getTime() : undefined
|
||||
// this.listQuery.pageNo = 1;
|
||||
// this.listQuery.pageSize = 10;
|
||||
this.getData()
|
||||
if (val.time) {
|
||||
this.getData()
|
||||
} else {
|
||||
this.$message({
|
||||
message: '请选择时间',
|
||||
type: 'warning'
|
||||
});
|
||||
}
|
||||
break;
|
||||
case 'reset':
|
||||
this.$refs.searchBarForm.resetForm();
|
||||
|
||||
@@ -50,29 +50,24 @@ import {
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'code',
|
||||
label: '工厂编码',
|
||||
align: 'center',
|
||||
label: '工厂编码'
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: '工厂名称',
|
||||
align: 'center',
|
||||
label: '工厂名称'
|
||||
},
|
||||
{
|
||||
prop: 'address',
|
||||
label: '地址',
|
||||
align: 'center',
|
||||
label: '地址'
|
||||
},
|
||||
{
|
||||
prop: 'remark',
|
||||
label: '备注',
|
||||
align: 'center',
|
||||
label: '备注'
|
||||
},
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: '创建时间',
|
||||
align: 'center',
|
||||
filter: parseTime,
|
||||
filter: parseTime
|
||||
},
|
||||
];
|
||||
|
||||
@@ -120,14 +115,14 @@ export default {
|
||||
name: 'search',
|
||||
color: 'primary',
|
||||
},
|
||||
{
|
||||
type: 'separate',
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '重置',
|
||||
name: 'reset',
|
||||
},
|
||||
// {
|
||||
// type: 'separate',
|
||||
// },
|
||||
// {
|
||||
// type: 'button',
|
||||
// btnName: '重置',
|
||||
// name: 'reset',
|
||||
// },
|
||||
{
|
||||
type: 'separate',
|
||||
},
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: Do not edit
|
||||
* @Date: 2023-08-29 14:59:29
|
||||
* @LastEditTime: 2023-09-16 17:34:17
|
||||
* @LastEditTime: 2023-09-27 16:19:56
|
||||
* @LastEditors: DY
|
||||
* @Description:
|
||||
-->
|
||||
@@ -12,21 +12,15 @@
|
||||
ref="searchBarForm"
|
||||
@headBtnClick="buttonClick" />
|
||||
<base-table
|
||||
class="right-aside"
|
||||
v-loading="dataListLoading"
|
||||
:table-props="tableProps"
|
||||
:page="listQuery.pageNo"
|
||||
:limit="listQuery.pageSize"
|
||||
:selectWidth="55"
|
||||
:table-data="tableData"
|
||||
:table-data="showData"
|
||||
@selection-change="selectChange"
|
||||
>
|
||||
<method-btn
|
||||
v-if="tableBtn.length"
|
||||
slot="handleBtn"
|
||||
:width="120"
|
||||
label="操作"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick" />
|
||||
</base-table>
|
||||
<pagination
|
||||
:limit.sync="listQuery.pageSize"
|
||||
@@ -43,19 +37,6 @@
|
||||
:table-data="selectedList"
|
||||
/>
|
||||
</div> -->
|
||||
<div ref="pdf" v-show="false">
|
||||
<el-table :data="selectedList" stripe border style="width: 100%">
|
||||
<el-table-column prop="reportType" label="报表类型" />
|
||||
<el-table-column prop="reportStartTime" label="统计开始时间" />
|
||||
<el-table-column prop="reportEndTime" label="统计结束时间" />
|
||||
<el-table-column prop="proLineName" label="产线名称" />
|
||||
<el-table-column prop="inputNum" label="投入数量/片" />
|
||||
<el-table-column prop="outputNum" label="产出数量/片" />
|
||||
<el-table-column prop="outputArea" label="产出面积/㎡" />
|
||||
<el-table-column prop="lossArea" label="损耗面积/㎡" />
|
||||
<el-table-column prop="lossRatio" label="损耗比例%" />
|
||||
</el-table>
|
||||
</div>
|
||||
<el-dialog
|
||||
title="提示"
|
||||
:visible.sync="dialogVisible"
|
||||
@@ -74,8 +55,8 @@
|
||||
<script>
|
||||
import { parseTime } from '../../mixins/code-filter';
|
||||
import { getPdlAutoReport, getPdList } from '@/api/core/monitoring/auto'
|
||||
// import jsPDF from 'jspdf'
|
||||
// import html2canvas from 'html2canvas'
|
||||
import jsPDF from 'jspdf'
|
||||
import html2canvas from 'html2canvas'
|
||||
// import codeFilter from '../../mixins/code-filter'
|
||||
import * as XLSX from 'xlsx'
|
||||
import FileSaver from 'file-saver'
|
||||
@@ -83,55 +64,45 @@ import FileSaver from 'file-saver'
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'reportType',
|
||||
label: '报表类型',
|
||||
align: 'center'
|
||||
label: '报表类型'
|
||||
},
|
||||
{
|
||||
prop: 'reportStartTime',
|
||||
label: '统计开始时间',
|
||||
align: 'center',
|
||||
filter: parseTime,
|
||||
},
|
||||
{
|
||||
prop: 'reportEndTime',
|
||||
label: '统计结束时间',
|
||||
align: 'center',
|
||||
filter: parseTime,
|
||||
},
|
||||
{
|
||||
prop: 'proLineName',
|
||||
label: '产线名称',
|
||||
align: 'center',
|
||||
label: '产线名称'
|
||||
},
|
||||
{
|
||||
prop: 'inputNum',
|
||||
label: '投入数量/片',
|
||||
align: 'center',
|
||||
label: '投入数量/片'
|
||||
},
|
||||
{
|
||||
prop: 'outputNum',
|
||||
label: '产出数量/片',
|
||||
align: 'center',
|
||||
label: '产出数量/片'
|
||||
},
|
||||
{
|
||||
prop: 'outputArea',
|
||||
label: '产出面积/㎡',
|
||||
align: 'center',
|
||||
label: '产出面积/㎡'
|
||||
},
|
||||
{
|
||||
prop: 'lossNum',
|
||||
label: '损耗数量/片',
|
||||
align: 'center',
|
||||
label: '损耗数量/片'
|
||||
},
|
||||
{
|
||||
prop: 'lossArea',
|
||||
label: '损耗面积/㎡',
|
||||
align: 'center',
|
||||
label: '损耗面积/㎡'
|
||||
},
|
||||
{
|
||||
prop: 'lossRatio',
|
||||
label: '损耗比例%',
|
||||
align: 'center',
|
||||
label: '损耗比例%'
|
||||
}
|
||||
];
|
||||
|
||||
@@ -153,6 +124,7 @@ export default {
|
||||
addOrUpdateVisible: false,
|
||||
tableProps,
|
||||
tableBtn: [],
|
||||
showData: [],
|
||||
selectedList: [],
|
||||
// tableBtn: [
|
||||
// this.$auth.hasPermi(`base:factory:update`)
|
||||
@@ -232,44 +204,60 @@ export default {
|
||||
this.getPdLineList()
|
||||
},
|
||||
methods: {
|
||||
test() {
|
||||
var target = document.getElementsByClassName("right-aside")[0]
|
||||
target.style.background = '#FFFFFF'
|
||||
setTimeout(() => {
|
||||
html2canvas(target).then(function(canvas) {
|
||||
var contentWidth = canvas.width
|
||||
var contentHeight = canvas.height
|
||||
|
||||
// 一页pdf显示html页面生成的canvas高度
|
||||
var pageHeight = contentHeight / 592.28 * 841.89
|
||||
// 未生成pdf的html页面高度
|
||||
var leftHeight = contentHeight
|
||||
// 页面偏移
|
||||
var position = 0
|
||||
// a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的高度
|
||||
var imgWidth = 595.28
|
||||
var imgHeight = 592.28 / contentWidth * contentHeight
|
||||
|
||||
var pageData = canvas.toDataURL('image/jpeg', 1.0)
|
||||
|
||||
console.log('nihc URL', leftHeight, pageHeight)
|
||||
|
||||
var pdf = new jsPDF('', 'pt', 'a4')
|
||||
|
||||
if (leftHeight < pageHeight) {
|
||||
pdf.addImage(pageData, 'JPEG', 0, 20, imgWidth, imgHeight)
|
||||
} else {
|
||||
while(leftHeight > 0) {
|
||||
pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
|
||||
leftHeight -= pageHeight
|
||||
position -= 841.89
|
||||
// 避免空白页
|
||||
if (leftHeight > 0) {
|
||||
pdf.addPage()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
pdf.save('产线统计自动报表.pdf')
|
||||
})
|
||||
}, 300)
|
||||
},
|
||||
exportPdf() {
|
||||
this.pdf()
|
||||
this.dialogVisible = false
|
||||
this.test()
|
||||
setTimeout(() =>{
|
||||
this.dialogVisible = false
|
||||
this.showData = this.tableData
|
||||
}, 600)
|
||||
|
||||
},
|
||||
exportXlsx() {
|
||||
this.down()
|
||||
this.exportECL()
|
||||
this.dialogVisible = false
|
||||
},
|
||||
// imgDownload() {
|
||||
// let that = this
|
||||
// let img = this.$refs['pdf']
|
||||
// // 图片高度
|
||||
// var w = parseInt(window.getComputedStyle(img).width)
|
||||
// // 图片宽度
|
||||
// var h = parseInt(window.getComputedStyle(img).height)
|
||||
// // 滚轮置顶，避免留白
|
||||
// window.pageYOffset = 0
|
||||
// html2canvas(img).then(function(canvas) {
|
||||
|
||||
// })
|
||||
// },
|
||||
pdf() {
|
||||
// console.log('打印看看[df]')
|
||||
// const pdf = new jsPDF()
|
||||
// const content = this.$refs.pdf.innerHTML
|
||||
// console.log('打印看看', content)
|
||||
// pdf.text(content, 15, 15)
|
||||
// // pdf.text('Hello world!', 10, 10)
|
||||
// pdf.save('test.pdf')
|
||||
// console.log('打印看看', pdf)
|
||||
const printWindow = window.open('', '_blank')
|
||||
const temp = this.$refs.pdf.innerHTML
|
||||
console.log(temp)
|
||||
printWindow.document.body.innerHTML = temp
|
||||
printWindow.focus()
|
||||
// printWindow.document.writeln(this.$refs.pdf.innerHTML)
|
||||
printWindow.document.close()
|
||||
printWindow.print()
|
||||
this.showData = this.tableData
|
||||
},
|
||||
handleClose(done) {
|
||||
this.$confirm('确认关闭？')
|
||||
@@ -278,23 +266,30 @@ export default {
|
||||
})
|
||||
.catch(_ => {});
|
||||
},
|
||||
down() {
|
||||
//选中导出时可更改此处数组 选中的数组
|
||||
//构建导出的表格数据
|
||||
const exportData = [
|
||||
{reportType: '报表类型', reportStartTime: '统计开始时间', reportEndTime: '统计结束时间', proLineName: '产线名称', inputNum: '投入数量/片', outputNum: '产出数量/片', outputArea: '产出面积/㎡', lossNum: '损耗数量/片', lossArea: '损耗面积/㎡', lossRatio: '损耗比例%' },
|
||||
...this.selectedList
|
||||
]
|
||||
//注意表格上绑定id， 获取dom元素
|
||||
const worksheet = XLSX.utils.json_to_sheet(exportData, { skipHeader: true })
|
||||
const workbook = XLSX.utils.book_new()
|
||||
XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1")
|
||||
const workbookOutput = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' })
|
||||
try {
|
||||
FileSaver.saveAs(new Blob([workbookOutput], { type: 'application/octet-stream' }), '产线统计自动报表.xlsx')
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
exportECL() {
|
||||
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 exportTable = XLSX.utils.table_to_book(tables)
|
||||
|
||||
var exportTableOut = XLSX.write(exportTable, {
|
||||
bookType: 'xlsx', bookSST: true, type: 'array'
|
||||
})
|
||||
// sheetjs.xlsx为导出表格的标题名称
|
||||
try {
|
||||
FileSaver.saveAs(new Blob([exportTableOut], {
|
||||
type: 'application/octet-stream'
|
||||
}), '产线统计自动报表.xlsx')
|
||||
} catch (e) {
|
||||
if (typeof console !== 'undefined') console.log(e, exportTableOut)
|
||||
}
|
||||
return exportTableOut
|
||||
},
|
||||
selectChange(val) {
|
||||
console.log(val)
|
||||
@@ -328,12 +323,13 @@ export default {
|
||||
getDataList() {
|
||||
this.dataListLoading = true;
|
||||
this.urlOptions.getDataListURL(this.listQuery).then(response => {
|
||||
this.tableData = response.data.list.map(item => {
|
||||
this.tableData = response.data.list.map((item, index) => {
|
||||
item.reportType = item.reportType === 1 ? '日' : item.reportType === 2 ? '周' : '月'
|
||||
return item
|
||||
});
|
||||
this.total = response.data.total;
|
||||
this.dataListLoading = false;
|
||||
this.showData = this.tableData
|
||||
});
|
||||
},
|
||||
// 每页数
|
||||
@@ -348,15 +344,10 @@ export default {
|
||||
this.getDataList();
|
||||
},
|
||||
handleExport() {
|
||||
if (this.selectedList.length === 0) {
|
||||
this.selectedList = this.tableData
|
||||
if (this.selectedList.length > 0) {
|
||||
this.showData = this.selectedList
|
||||
}
|
||||
this.dialogVisible = true
|
||||
// this.$modal.confirm('是否确认导出所选数据项?').then(() => {
|
||||
// this.exportLoading = true;
|
||||
// // this.down()
|
||||
// this.pdf()
|
||||
// }).catch(() => { });
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: Do not edit
|
||||
* @Date: 2023-08-29 14:59:29
|
||||
* @LastEditTime: 2023-09-20 10:55:23
|
||||
* @LastEditTime: 2023-09-27 16:23:44
|
||||
* @LastEditors: DY
|
||||
* @Description:
|
||||
-->
|
||||
@@ -12,12 +12,13 @@
|
||||
ref="searchBarForm"
|
||||
@headBtnClick="buttonClick" />
|
||||
<base-table
|
||||
class="right-aside"
|
||||
v-loading="dataListLoading"
|
||||
:table-props="tableProps"
|
||||
:page="listQuery.pageNo"
|
||||
:limit="listQuery.pageSize"
|
||||
:selectWidth="55"
|
||||
:table-data="tableData"
|
||||
:table-data="showData"
|
||||
@selection-change="selectChange"
|
||||
>
|
||||
<method-btn
|
||||
@@ -33,17 +34,6 @@
|
||||
:page.sync="listQuery.pageNo"
|
||||
:total="listQuery.total"
|
||||
@pagination="getDataList" />
|
||||
<div ref="pdf" v-show="false">
|
||||
<el-table :data="selectedList" stripe border style="width: 100%">
|
||||
<el-table-column prop="proLineName" label="产线名称" />
|
||||
<el-table-column prop="inputNum" label="投入数量/片" />
|
||||
<el-table-column prop="outputNum" label="产出数量/片" />
|
||||
<el-table-column prop="outputArea" label="产出面积/㎡" />
|
||||
<el-table-column prop="lossNum" label="损耗数量/片" />
|
||||
<el-table-column prop="lossArea" label="损耗面积/㎡" />
|
||||
<el-table-column prop="lossRatio" label="损耗比例%" />
|
||||
</el-table>
|
||||
</div>
|
||||
<el-dialog
|
||||
title="提示"
|
||||
:visible.sync="dialogVisible"
|
||||
@@ -63,6 +53,8 @@
|
||||
import { getPdlDataSearch, getPdList } from '@/api/core/monitoring/data'
|
||||
import * as XLSX from 'xlsx'
|
||||
import FileSaver from 'file-saver'
|
||||
import jsPDF from 'jspdf'
|
||||
import html2canvas from 'html2canvas'
|
||||
|
||||
const tableProps = [
|
||||
{
|
||||
@@ -115,6 +107,7 @@ export default {
|
||||
addOrUpdateVisible: false,
|
||||
tableProps,
|
||||
tableBtn: [],
|
||||
showData: [],
|
||||
tableData: [],
|
||||
selectedList: [],
|
||||
formConfig: [
|
||||
@@ -166,40 +159,86 @@ export default {
|
||||
this.getPdLineList()
|
||||
},
|
||||
methods: {
|
||||
test() {
|
||||
var target = document.getElementsByClassName("right-aside")[0]
|
||||
target.style.background = '#FFFFFF'
|
||||
setTimeout(() => {
|
||||
html2canvas(target).then(function(canvas) {
|
||||
var contentWidth = canvas.width
|
||||
var contentHeight = canvas.height
|
||||
|
||||
// 一页pdf显示html页面生成的canvas高度
|
||||
var pageHeight = contentHeight / 592.28 * 841.89
|
||||
// 未生成pdf的html页面高度
|
||||
var leftHeight = contentHeight
|
||||
// 页面偏移
|
||||
var position = 0
|
||||
// a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的高度
|
||||
var imgWidth = 595.28
|
||||
var imgHeight = 592.28 / contentWidth * contentHeight
|
||||
|
||||
var pageData = canvas.toDataURL('image/jpeg', 1.0)
|
||||
|
||||
console.log('nihc URL', leftHeight, pageHeight)
|
||||
|
||||
var pdf = new jsPDF('', 'pt', 'a4')
|
||||
|
||||
if (leftHeight < pageHeight) {
|
||||
pdf.addImage(pageData, 'JPEG', 0, 20, imgWidth, imgHeight)
|
||||
} else {
|
||||
while(leftHeight > 0) {
|
||||
pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
|
||||
leftHeight -= pageHeight
|
||||
position -= 841.89
|
||||
// 避免空白页
|
||||
if (leftHeight > 0) {
|
||||
pdf.addPage()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
pdf.save('产线统计数据查询报表.pdf')
|
||||
})
|
||||
}, 300)
|
||||
},
|
||||
exportECL() {
|
||||
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 exportTable = XLSX.utils.table_to_book(tables)
|
||||
|
||||
var exportTableOut = XLSX.write(exportTable, {
|
||||
bookType: 'xlsx', bookSST: true, type: 'array'
|
||||
})
|
||||
// sheetjs.xlsx为导出表格的标题名称
|
||||
try {
|
||||
FileSaver.saveAs(new Blob([exportTableOut], {
|
||||
type: 'application/octet-stream'
|
||||
}), '产线统计数据查询报表.xlsx')
|
||||
} catch (e) {
|
||||
if (typeof console !== 'undefined') console.log(e, exportTableOut)
|
||||
}
|
||||
return exportTableOut
|
||||
},
|
||||
exportPdf() {
|
||||
this.pdf()
|
||||
this.dialogVisible = false
|
||||
this.test()
|
||||
setTimeout(() =>{
|
||||
this.dialogVisible = false
|
||||
this.showData = this.tableData
|
||||
}, 600)
|
||||
|
||||
},
|
||||
exportXlsx() {
|
||||
this.down()
|
||||
this.exportECL()
|
||||
this.dialogVisible = false
|
||||
this.showData = this.tableData
|
||||
},
|
||||
pdf() {
|
||||
const printWindow = window.open('', '_blank')
|
||||
const temp = this.$refs.pdf.innerHTML
|
||||
console.log(temp)
|
||||
printWindow.document.body.innerHTML = temp
|
||||
printWindow.document.close()
|
||||
printWindow.print()
|
||||
},
|
||||
down() {
|
||||
//选中导出时可更改此处数组 选中的数组
|
||||
//构建导出的表格数据
|
||||
const exportData = [
|
||||
{proLineName: '产线名称', inputNum: '投入数量/片', outputNum: '产出数量/片', outputArea: '产出面积/㎡', lossNum: '损耗数量/片', lossArea: '损耗面积/㎡', lossRatio: '损耗比例%' },
|
||||
...this.selectedList
|
||||
]
|
||||
//注意表格上绑定id， 获取dom元素
|
||||
const worksheet = XLSX.utils.json_to_sheet(exportData, { skipHeader: true })
|
||||
const workbook = XLSX.utils.book_new()
|
||||
XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1")
|
||||
const workbookOutput = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' })
|
||||
try {
|
||||
FileSaver.saveAs(new Blob([workbookOutput], { type: 'application/octet-stream' }), '产线统计数据查询.xlsx')
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
}
|
||||
},
|
||||
handleClose(done) {
|
||||
this.$confirm('确认关闭？')
|
||||
.then(_ => {
|
||||
@@ -240,6 +279,7 @@ export default {
|
||||
this.tableData = response.data;
|
||||
this.total = response.data.total;
|
||||
this.dataListLoading = false;
|
||||
this.showData = this.tableData
|
||||
});
|
||||
},
|
||||
// 每页数
|
||||
@@ -254,21 +294,10 @@ export default {
|
||||
this.getDataList();
|
||||
},
|
||||
handleExport() {
|
||||
if (this.selectedList.length === 0) {
|
||||
this.selectedList = this.tableData
|
||||
if (this.selectedList.length > 0) {
|
||||
this.showData = this.selectedList
|
||||
}
|
||||
this.dialogVisible = true
|
||||
// 处理查询参数
|
||||
// let params = { ...this.queryParams };
|
||||
// params.pageNo = undefined;
|
||||
// params.pageSize = undefined;
|
||||
// this.$modal.confirm('是否确认导出所有数据项?').then(() => {
|
||||
// this.exportLoading = true;
|
||||
// return this.urlOptions.exportURL(params);
|
||||
// }).then(response => {
|
||||
// this.$download.excel(response, '工厂.xls');
|
||||
// this.exportLoading = false;
|
||||
// }).catch(() => { });
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: Do not edit
|
||||
* @Date: 2023-08-29 14:59:29
|
||||
* @LastEditTime: 2023-09-22 15:13:48
|
||||
* @LastEditTime: 2023-10-08 10:51:49
|
||||
* @LastEditors: DY
|
||||
* @Description:
|
||||
-->
|
||||
@@ -13,12 +13,13 @@
|
||||
ref="searchBarForm"
|
||||
@headBtnClick="buttonClick" />
|
||||
<base-table
|
||||
class="right-aside"
|
||||
v-loading="dataListLoading"
|
||||
:table-props="tableProps"
|
||||
:page="listQuery.pageNo"
|
||||
:limit="listQuery.pageSize"
|
||||
:selectWidth="55"
|
||||
:table-data="tableData"
|
||||
:table-data="showData"
|
||||
@selection-change="selectChange"
|
||||
>
|
||||
<method-btn
|
||||
@@ -34,21 +35,6 @@
|
||||
:page.sync="listQuery.pageNo"
|
||||
:total="listQuery.total"
|
||||
@pagination="getDataList" />
|
||||
<div ref="pdf" v-show="false">
|
||||
<el-table :data="selectedList" stripe border style="width: 100%">
|
||||
<el-table-column prop="reportType" label="报表类型" />
|
||||
<el-table-column prop="reportStartTime" label="统计开始时间" />
|
||||
<el-table-column prop="reportEndTime" label="统计结束时间" />
|
||||
<el-table-column prop="proLineName" label="产线名称" />
|
||||
<el-table-column prop="sectionName" label="工段名称" />
|
||||
<el-table-column prop="inputNum" label="投入数量/片" />
|
||||
<el-table-column prop="outputNum" label="产出数量/片" />
|
||||
<el-table-column prop="outputArea" label="产出面积/㎡" />
|
||||
<el-table-column prop="lossNum" label="损耗数量/片" />
|
||||
<el-table-column prop="lossArea" label="损耗面积/㎡" />
|
||||
<el-table-column prop="lossRatio" label="损耗比例%" />
|
||||
</el-table>
|
||||
</div>
|
||||
<el-dialog
|
||||
title="提示"
|
||||
:visible.sync="dialogVisible"
|
||||
@@ -69,6 +55,8 @@ import { parseTime } from '../../mixins/code-filter';
|
||||
import { getWorkshopSectionList, getPdList, getSectionAutoReport } from '@/api/core/monitoring/sectionStatistics'
|
||||
import * as XLSX from 'xlsx'
|
||||
import FileSaver from 'file-saver'
|
||||
import jsPDF from 'jspdf'
|
||||
import html2canvas from 'html2canvas'
|
||||
|
||||
const tableProps = [
|
||||
{
|
||||
@@ -140,6 +128,7 @@ export default {
|
||||
tableProps,
|
||||
tableBtn: [],
|
||||
tableData: [],
|
||||
showData: [],
|
||||
formConfig: [
|
||||
{
|
||||
type: 'select',
|
||||
@@ -208,40 +197,86 @@ export default {
|
||||
this.getPdLineList()
|
||||
},
|
||||
methods: {
|
||||
test() {
|
||||
var target = document.getElementsByClassName("right-aside")[0]
|
||||
target.style.background = '#FFFFFF'
|
||||
setTimeout(() => {
|
||||
html2canvas(target).then(function(canvas) {
|
||||
var contentWidth = canvas.width
|
||||
var contentHeight = canvas.height
|
||||
|
||||
// 一页pdf显示html页面生成的canvas高度
|
||||
var pageHeight = contentHeight / 592.28 * 841.89
|
||||
// 未生成pdf的html页面高度
|
||||
var leftHeight = contentHeight
|
||||
// 页面偏移
|
||||
var position = 0
|
||||
// a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的高度
|
||||
var imgWidth = 595.28
|
||||
var imgHeight = 592.28 / contentWidth * contentHeight
|
||||
|
||||
var pageData = canvas.toDataURL('image/jpeg', 1.0)
|
||||
|
||||
console.log('nihc URL', leftHeight, pageHeight)
|
||||
|
||||
var pdf = new jsPDF('', 'pt', 'a4')
|
||||
|
||||
if (leftHeight < pageHeight) {
|
||||
pdf.addImage(pageData, 'JPEG', 0, 20, imgWidth, imgHeight)
|
||||
} else {
|
||||
while(leftHeight > 0) {
|
||||
pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
|
||||
leftHeight -= pageHeight
|
||||
position -= 841.89
|
||||
// 避免空白页
|
||||
if (leftHeight > 0) {
|
||||
pdf.addPage()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
pdf.save('工段统计自动报表.pdf')
|
||||
})
|
||||
}, 300)
|
||||
},
|
||||
exportECL() {
|
||||
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 exportTable = XLSX.utils.table_to_book(tables)
|
||||
|
||||
var exportTableOut = XLSX.write(exportTable, {
|
||||
bookType: 'xlsx', bookSST: true, type: 'array'
|
||||
})
|
||||
// sheetjs.xlsx为导出表格的标题名称
|
||||
try {
|
||||
FileSaver.saveAs(new Blob([exportTableOut], {
|
||||
type: 'application/octet-stream'
|
||||
}), '工段统计自动报表.xlsx')
|
||||
} catch (e) {
|
||||
if (typeof console !== 'undefined') console.log(e, exportTableOut)
|
||||
}
|
||||
return exportTableOut
|
||||
},
|
||||
exportPdf() {
|
||||
this.pdf()
|
||||
this.dialogVisible = false
|
||||
this.test()
|
||||
setTimeout(() =>{
|
||||
this.dialogVisible = false
|
||||
this.showData = this.tableData
|
||||
}, 600)
|
||||
|
||||
},
|
||||
exportXlsx() {
|
||||
this.down()
|
||||
this.exportECL()
|
||||
this.dialogVisible = false
|
||||
this.showData = this.tableData
|
||||
},
|
||||
pdf() {
|
||||
const printWindow = window.open('', '_blank')
|
||||
const temp = this.$refs.pdf.innerHTML
|
||||
console.log(temp)
|
||||
printWindow.document.body.innerHTML = temp
|
||||
printWindow.document.close()
|
||||
printWindow.print()
|
||||
},
|
||||
down() {
|
||||
//选中导出时可更改此处数组 选中的数组
|
||||
//构建导出的表格数据
|
||||
const exportData = [
|
||||
{reportType: '产线类型', reportStartTime: '统计开始时间', reportEndTime: '统计结束时间', lineName: '产线名称', sectionName: '工段名称', inputNum: '投入数量/片', outputNum: '产出数量/片', outputArea: '产出面积/㎡', lossNum: '损耗数量/片', lossArea: '损耗面积/㎡', lossRatio: '损耗比例%' },
|
||||
...this.selectedList
|
||||
]
|
||||
//注意表格上绑定id， 获取dom元素
|
||||
const worksheet = XLSX.utils.json_to_sheet(exportData, { skipHeader: true })
|
||||
const workbook = XLSX.utils.book_new()
|
||||
XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1")
|
||||
const workbookOutput = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' })
|
||||
try {
|
||||
FileSaver.saveAs(new Blob([workbookOutput], { type: 'application/octet-stream' }), '工段统计自动报表.xlsx')
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
}
|
||||
},
|
||||
handleClose(done) {
|
||||
this.$confirm('确认关闭？')
|
||||
.then(_ => {
|
||||
@@ -289,6 +324,7 @@ export default {
|
||||
item.reportType = item.reportType === 1 ? '日' : item.reportType === 2 ? '周' : '月'
|
||||
return item
|
||||
});
|
||||
this.showData = this.tableData
|
||||
this.total = response.data.total;
|
||||
this.dataListLoading = false;
|
||||
});
|
||||
@@ -305,21 +341,10 @@ export default {
|
||||
this.getDataList();
|
||||
},
|
||||
handleExport() {
|
||||
if (this.selectedList.length === 0) {
|
||||
this.selectedList = this.tableData
|
||||
if (this.selectedList.length > 0) {
|
||||
this.showData = this.selectedList
|
||||
}
|
||||
this.dialogVisible = true
|
||||
// 处理查询参数
|
||||
// let params = { ...this.queryParams };
|
||||
// params.pageNo = undefined;
|
||||
// params.pageSize = undefined;
|
||||
// this.$modal.confirm('是否确认导出所有数据项?').then(() => {
|
||||
// this.exportLoading = true;
|
||||
// return this.urlOptions.exportURL(params);
|
||||
// }).then(response => {
|
||||
// this.$download.excel(response, '工厂.xls');
|
||||
// this.exportLoading = false;
|
||||
// }).catch(() => { });
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
@@ -5,23 +5,42 @@
|
||||
ref="searchBarForm"
|
||||
@headBtnClick="buttonClick" />
|
||||
<base-table
|
||||
class="right-aside"
|
||||
v-loading="dataListLoading"
|
||||
:table-props="tableProps"
|
||||
:table-data="tableData" />
|
||||
<!-- <pagination
|
||||
:table-data="showData"
|
||||
:selectWidth="55"
|
||||
@selection-change="selectChange"
|
||||
/>
|
||||
<pagination
|
||||
:limit.sync="listQuery.pageSize"
|
||||
:page.sync="listQuery.pageNo"
|
||||
:total="listQuery.total"
|
||||
@pagination="getDataList" /> -->
|
||||
@pagination="getDataList" />
|
||||
<el-dialog
|
||||
title="提示"
|
||||
:visible.sync="dialogVisible"
|
||||
width="30%"
|
||||
:before-close="handleClose">
|
||||
<el-button type="primary" @click="exportXlsx">xlsx</el-button>
|
||||
<el-button type="success" @click="exportPdf">pdf</el-button>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import basicPage from '../../mixins/basic-page';
|
||||
import { parseTime } from '../../mixins/code-filter';
|
||||
import { getSectionDataSearch } from '@/api/core/monitoring';
|
||||
import { getProductionLinePage } from '@/api/core/base/productionLine';
|
||||
import { getWorkshopSectionPage } from '@/api/core/base/workshopSection';
|
||||
import * as XLSX from 'xlsx'
|
||||
import FileSaver from 'file-saver'
|
||||
import jsPDF from 'jspdf'
|
||||
import html2canvas from 'html2canvas'
|
||||
|
||||
const tableProps = [
|
||||
{
|
||||
@@ -70,6 +89,8 @@ export default {
|
||||
},
|
||||
tableProps,
|
||||
tableData: [],
|
||||
showData: [],
|
||||
selectedList: [],
|
||||
listQuery: {
|
||||
proLineId:undefined,
|
||||
sectionId: undefined,
|
||||
@@ -77,6 +98,7 @@ export default {
|
||||
endTime: undefined,
|
||||
},
|
||||
dataListLoading: false,
|
||||
dialogVisible: false,
|
||||
optionArrUrl: [getProductionLinePage, getWorkshopSectionPage],
|
||||
formConfig: [
|
||||
{
|
||||
@@ -127,6 +149,93 @@ export default {
|
||||
this.getDataList()
|
||||
},
|
||||
methods: {
|
||||
test() {
|
||||
var target = document.getElementsByClassName("right-aside")[0]
|
||||
target.style.background = '#FFFFFF'
|
||||
setTimeout(() => {
|
||||
html2canvas(target).then(function(canvas) {
|
||||
var contentWidth = canvas.width
|
||||
var contentHeight = canvas.height
|
||||
|
||||
// 一页pdf显示html页面生成的canvas高度
|
||||
var pageHeight = contentHeight / 592.28 * 841.89
|
||||
// 未生成pdf的html页面高度
|
||||
var leftHeight = contentHeight
|
||||
// 页面偏移
|
||||
var position = 0
|
||||
// a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的高度
|
||||
var imgWidth = 595.28
|
||||
var imgHeight = 592.28 / contentWidth * contentHeight
|
||||
|
||||
var pageData = canvas.toDataURL('image/jpeg', 1.0)
|
||||
|
||||
console.log('nihc URL', leftHeight, pageHeight)
|
||||
|
||||
var pdf = new jsPDF('', 'pt', 'a4')
|
||||
|
||||
if (leftHeight < pageHeight) {
|
||||
pdf.addImage(pageData, 'JPEG', 0, 20, imgWidth, imgHeight)
|
||||
} else {
|
||||
while(leftHeight > 0) {
|
||||
pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
|
||||
leftHeight -= pageHeight
|
||||
position -= 841.89
|
||||
// 避免空白页
|
||||
if (leftHeight > 0) {
|
||||
pdf.addPage()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
pdf.save('工段统计数据查询报表.pdf')
|
||||
})
|
||||
}, 300)
|
||||
},
|
||||
exportECL() {
|
||||
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 exportTable = XLSX.utils.table_to_book(tables)
|
||||
|
||||
var exportTableOut = XLSX.write(exportTable, {
|
||||
bookType: 'xlsx', bookSST: true, type: 'array'
|
||||
})
|
||||
// sheetjs.xlsx为导出表格的标题名称
|
||||
try {
|
||||
FileSaver.saveAs(new Blob([exportTableOut], {
|
||||
type: 'application/octet-stream'
|
||||
}), '工段统计数据查询报表.xlsx')
|
||||
} catch (e) {
|
||||
if (typeof console !== 'undefined') console.log(e, exportTableOut)
|
||||
}
|
||||
return exportTableOut
|
||||
},
|
||||
exportPdf() {
|
||||
this.test()
|
||||
setTimeout(() =>{
|
||||
this.dialogVisible = false
|
||||
this.showData = this.tableData
|
||||
}, 600)
|
||||
|
||||
},
|
||||
exportXlsx() {
|
||||
this.exportECL()
|
||||
this.dialogVisible = false
|
||||
this.showData = this.tableData
|
||||
},
|
||||
handleClose(done) {
|
||||
this.$confirm('确认关闭？')
|
||||
.then(_ => {
|
||||
done();
|
||||
})
|
||||
.catch(_ => {});
|
||||
},
|
||||
getArr() {
|
||||
const params = {
|
||||
page: 1,
|
||||
@@ -144,9 +253,31 @@ export default {
|
||||
// this.listQuery.endTime = '1693564257000'
|
||||
this.urlOptions.getDataListURL(this.listQuery).then(res => {
|
||||
this.tableData = res.data
|
||||
// this.total = response.data.total;
|
||||
this.listQuery.total = this.tableData.length;
|
||||
this.dataListLoading = false;
|
||||
this.showData = this.tableData;
|
||||
});
|
||||
},
|
||||
// 每页数
|
||||
sizeChangeHandle(val) {
|
||||
this.listQuery.pageSize = val;
|
||||
this.listQuery.pageNo = 1;
|
||||
this.getDataList();
|
||||
},
|
||||
// 当前页
|
||||
currentChangeHandle(val) {
|
||||
this.listQuery.pageNo = val;
|
||||
this.getDataList();
|
||||
},
|
||||
handleExport() {
|
||||
if (this.selectedList.length > 0) {
|
||||
this.showData = this.selectedList
|
||||
}
|
||||
this.dialogVisible = true
|
||||
},
|
||||
selectChange(val) {
|
||||
console.log(val)
|
||||
this.selectedList = val
|
||||
},
|
||||
buttonClick(val) {
|
||||
console.log(val)
|
||||
@@ -171,6 +302,9 @@ export default {
|
||||
};
|
||||
this.getDataList();
|
||||
break;
|
||||
case 'export':
|
||||
this.handleExport();
|
||||
break;
|
||||
default:
|
||||
console.log(val);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user