test #47
@ -20,6 +20,7 @@
|
|||||||
<el-select
|
<el-select
|
||||||
v-model="dataForm.productionLineId"
|
v-model="dataForm.productionLineId"
|
||||||
placeholder="请选择产线"
|
placeholder="请选择产线"
|
||||||
|
filterable
|
||||||
@change="handleProductlineChange">
|
@change="handleProductlineChange">
|
||||||
<el-option
|
<el-option
|
||||||
v-for="opt in productionLineList"
|
v-for="opt in productionLineList"
|
||||||
@ -37,6 +38,7 @@
|
|||||||
:rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
|
:rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
|
||||||
<el-select
|
<el-select
|
||||||
v-model="dataForm.workshopSectionId"
|
v-model="dataForm.workshopSectionId"
|
||||||
|
filterable
|
||||||
placeholder="请选择工段"
|
placeholder="请选择工段"
|
||||||
@change="$emit('update', dataForm)">
|
@change="$emit('update', dataForm)">
|
||||||
<el-option
|
<el-option
|
||||||
@ -56,6 +58,7 @@
|
|||||||
:rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
|
:rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
|
||||||
<el-select
|
<el-select
|
||||||
v-model="dataForm.equipmentId"
|
v-model="dataForm.equipmentId"
|
||||||
|
filterable
|
||||||
placeholder="请选择设备"
|
placeholder="请选择设备"
|
||||||
@change="$emit('update', dataForm)">
|
@change="$emit('update', dataForm)">
|
||||||
<el-option
|
<el-option
|
||||||
@ -71,6 +74,7 @@
|
|||||||
<el-form-item label="工段排序" prop="sort">
|
<el-form-item label="工段排序" prop="sort">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="dataForm.sort"
|
v-model="dataForm.sort"
|
||||||
|
filterable
|
||||||
@change="$emit('update', dataForm)"
|
@change="$emit('update', dataForm)"
|
||||||
placeholder="请输入工段排序" />
|
placeholder="请输入工段排序" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
@ -1,8 +1,8 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2023-09-13 09:02:25
|
* @Date: 2023-09-13 09:02:25
|
||||||
* @LastEditTime: 2023-09-13 10:33:20
|
* @LastEditTime: 2023-10-08 15:39:38
|
||||||
* @LastEditors: zhp
|
* @LastEditors: DY
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
@ -61,11 +61,12 @@ export default {
|
|||||||
// },
|
// },
|
||||||
methods: {
|
methods: {
|
||||||
initChart(xData, yData,lineName) {
|
initChart(xData, yData,lineName) {
|
||||||
console.log(xData,yData);
|
console.log( '打印结果', xData,yData, lineName);
|
||||||
this.chart = echarts.init(this.$el, 'macarons')
|
this.chart = echarts.init(this.$el, 'macarons')
|
||||||
this.setOptions(xData, yData, lineName)
|
this.setOptions(xData, yData, lineName)
|
||||||
},
|
},
|
||||||
setOptions(xData, yData, lineName) {
|
setOptions(xData, yData, lineName) {
|
||||||
|
console.log('da', lineName)
|
||||||
let seriesData = []
|
let seriesData = []
|
||||||
lineName.forEach((item,index) => {
|
lineName.forEach((item,index) => {
|
||||||
seriesData.push({
|
seriesData.push({
|
||||||
@ -86,7 +87,7 @@ export default {
|
|||||||
type: 'value'
|
type: 'value'
|
||||||
},
|
},
|
||||||
series: seriesData
|
series: seriesData
|
||||||
})
|
}, true)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -228,7 +228,14 @@ export default {
|
|||||||
this.listQuery.lineId = val.lineIds
|
this.listQuery.lineId = val.lineIds
|
||||||
this.listQuery.startTime = val.time ? String(new Date(val.time[0]).getTime()) : undefined;
|
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.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;
|
break;
|
||||||
case 'reset':
|
case 'reset':
|
||||||
this.$refs.searchBarForm.resetForm();
|
this.$refs.searchBarForm.resetForm();
|
||||||
|
@ -1,14 +1,14 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2023-09-13 09:02:25
|
* @Date: 2023-09-13 09:02:25
|
||||||
* @LastEditTime: 2023-09-20 09:29:40
|
* @LastEditTime: 2023-10-08 16:36:37
|
||||||
* @LastEditors: DY
|
* @LastEditors: DY
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div style="margin: 20px">
|
<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>
|
||||||
<div ref="chartDiv" :class="className" :style="{height:height,width:width}" />
|
<div ref="chartDiv" :class="className" :style="{height:height,width:width}" />
|
||||||
</div>
|
</div>
|
||||||
@ -43,7 +43,8 @@ export default {
|
|||||||
return {
|
return {
|
||||||
chart: null,
|
chart: null,
|
||||||
dataArray: [],
|
dataArray: [],
|
||||||
xDatas: []
|
xDatas: [],
|
||||||
|
buttonList: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
@ -51,12 +52,34 @@ export default {
|
|||||||
methods: {
|
methods: {
|
||||||
changeChart(index) {
|
changeChart(index) {
|
||||||
this.setOptions(this.xDatas, this.dataArray[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) {
|
initChart(xData, yData, lineName) {
|
||||||
this.dataArray = yData
|
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
|
this.xDatas = xData
|
||||||
console.log(xData,yData);
|
|
||||||
console.log('zale', yData[0].eqData)
|
|
||||||
this.chart = echarts.init(this.$refs.chartDiv, 'macarons')
|
this.chart = echarts.init(this.$refs.chartDiv, 'macarons')
|
||||||
this.setOptions(xData, yData[0], lineName)
|
this.setOptions(xData, yData[0], lineName)
|
||||||
},
|
},
|
||||||
@ -100,3 +123,12 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.activeButton {
|
||||||
|
background-color: rgb(93,159,255);
|
||||||
|
}
|
||||||
|
.normalButton {
|
||||||
|
background-color: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
@ -57,8 +57,7 @@ export default {
|
|||||||
lineIds: [],
|
lineIds: [],
|
||||||
time: ''
|
time: ''
|
||||||
},
|
},
|
||||||
xData: [],
|
dateLabelList: [],
|
||||||
yData:[],
|
|
||||||
optionArrUrl: [getProductionLinePage ],
|
optionArrUrl: [getProductionLinePage ],
|
||||||
formConfig: [
|
formConfig: [
|
||||||
{
|
{
|
||||||
@ -113,75 +112,101 @@ export default {
|
|||||||
let arr = [
|
let arr = [
|
||||||
{
|
{
|
||||||
prop: 'lineName',
|
prop: 'lineName',
|
||||||
label: '产线',
|
label: '产线'
|
||||||
align: 'center',
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'sum',
|
prop: 'sum',
|
||||||
label: '合计',
|
label: '合计'
|
||||||
align: 'center',
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: res.data.nameData[0].name,
|
prop: res.data ? res.data.nameData[0].name : undefined,
|
||||||
label: res.data.nameData[0].name,
|
label: res.data ? res.data.nameData[0].name : undefined,
|
||||||
align: 'center',
|
align: 'center',
|
||||||
children:[
|
children:[
|
||||||
|
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
console.log(res.data.nameData.slice(1))
|
// 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
|
|
||||||
let xData = []
|
let xData = []
|
||||||
|
|
||||||
res.data.nameData.slice(1).forEach(item => {
|
|
||||||
xData.push(item.name)
|
|
||||||
// arr[2].children.push(props)
|
|
||||||
})
|
|
||||||
let yAllData = []
|
let yAllData = []
|
||||||
let lineName = []
|
let lineName = []
|
||||||
res.data.data.forEach(item => {
|
if (res.data) {
|
||||||
let yData = []
|
let tempDateList = []
|
||||||
lineName.push(item.lineName)
|
res.data.nameData.forEach(date => {
|
||||||
// let obj = {}
|
tempDateList.push(date.name)
|
||||||
// obj.lineName = item.lineName,
|
})
|
||||||
// obj.sum = item.sum,
|
this.dateLabelList = Array.from(new Set(tempDateList))
|
||||||
item.data.forEach((ele, index) => {
|
|
||||||
|
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)
|
// console.log(ele)
|
||||||
ele.children.forEach((e) => {
|
ele.children.forEach((e) => {
|
||||||
// let yData = []
|
console.log(e.dynamicName)
|
||||||
yData.push(e.dynamicValue)
|
obj['' + e.dynamicName + ''] = e.dynamicValue
|
||||||
|
console.log(obj['' + e.dynamicName + '']);
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
yAllData.push(yData)
|
tableDataArr.push(obj)
|
||||||
});
|
});
|
||||||
console.log(lineName)
|
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) => {
|
// res.data.data[0].data[0].children.forEach((item, index) => {
|
||||||
// // console.log(item)
|
// // console.log(item)
|
||||||
// yData.push(item.dynamicValue)
|
// yData.push(item.dynamicValue)
|
||||||
@ -203,7 +228,14 @@ export default {
|
|||||||
this.listQuery.time = val.time ? new Date(val.time).getTime() : undefined
|
this.listQuery.time = val.time ? new Date(val.time).getTime() : undefined
|
||||||
// this.listQuery.pageNo = 1;
|
// this.listQuery.pageNo = 1;
|
||||||
// this.listQuery.pageSize = 10;
|
// this.listQuery.pageSize = 10;
|
||||||
this.getData()
|
if (val.time) {
|
||||||
|
this.getData()
|
||||||
|
} else {
|
||||||
|
this.$message({
|
||||||
|
message: '请选择时间',
|
||||||
|
type: 'warning'
|
||||||
|
});
|
||||||
|
}
|
||||||
break;
|
break;
|
||||||
case 'reset':
|
case 'reset':
|
||||||
this.$refs.searchBarForm.resetForm();
|
this.$refs.searchBarForm.resetForm();
|
||||||
|
@ -50,29 +50,24 @@ import {
|
|||||||
const tableProps = [
|
const tableProps = [
|
||||||
{
|
{
|
||||||
prop: 'code',
|
prop: 'code',
|
||||||
label: '工厂编码',
|
label: '工厂编码'
|
||||||
align: 'center',
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'name',
|
prop: 'name',
|
||||||
label: '工厂名称',
|
label: '工厂名称'
|
||||||
align: 'center',
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'address',
|
prop: 'address',
|
||||||
label: '地址',
|
label: '地址'
|
||||||
align: 'center',
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'remark',
|
prop: 'remark',
|
||||||
label: '备注',
|
label: '备注'
|
||||||
align: 'center',
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'createTime',
|
prop: 'createTime',
|
||||||
label: '创建时间',
|
label: '创建时间',
|
||||||
align: 'center',
|
filter: parseTime
|
||||||
filter: parseTime,
|
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
@ -120,14 +115,14 @@ export default {
|
|||||||
name: 'search',
|
name: 'search',
|
||||||
color: 'primary',
|
color: 'primary',
|
||||||
},
|
},
|
||||||
{
|
// {
|
||||||
type: 'separate',
|
// type: 'separate',
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
type: 'button',
|
// type: 'button',
|
||||||
btnName: '重置',
|
// btnName: '重置',
|
||||||
name: 'reset',
|
// name: 'reset',
|
||||||
},
|
// },
|
||||||
{
|
{
|
||||||
type: 'separate',
|
type: 'separate',
|
||||||
},
|
},
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: Do not edit
|
* @Author: Do not edit
|
||||||
* @Date: 2023-08-29 14:59:29
|
* @Date: 2023-08-29 14:59:29
|
||||||
* @LastEditTime: 2023-09-16 17:34:17
|
* @LastEditTime: 2023-09-27 16:19:56
|
||||||
* @LastEditors: DY
|
* @LastEditors: DY
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -12,21 +12,15 @@
|
|||||||
ref="searchBarForm"
|
ref="searchBarForm"
|
||||||
@headBtnClick="buttonClick" />
|
@headBtnClick="buttonClick" />
|
||||||
<base-table
|
<base-table
|
||||||
|
class="right-aside"
|
||||||
v-loading="dataListLoading"
|
v-loading="dataListLoading"
|
||||||
:table-props="tableProps"
|
:table-props="tableProps"
|
||||||
:page="listQuery.pageNo"
|
:page="listQuery.pageNo"
|
||||||
:limit="listQuery.pageSize"
|
:limit="listQuery.pageSize"
|
||||||
:selectWidth="55"
|
:selectWidth="55"
|
||||||
:table-data="tableData"
|
:table-data="showData"
|
||||||
@selection-change="selectChange"
|
@selection-change="selectChange"
|
||||||
>
|
>
|
||||||
<method-btn
|
|
||||||
v-if="tableBtn.length"
|
|
||||||
slot="handleBtn"
|
|
||||||
:width="120"
|
|
||||||
label="操作"
|
|
||||||
:method-list="tableBtn"
|
|
||||||
@clickBtn="handleClick" />
|
|
||||||
</base-table>
|
</base-table>
|
||||||
<pagination
|
<pagination
|
||||||
:limit.sync="listQuery.pageSize"
|
:limit.sync="listQuery.pageSize"
|
||||||
@ -43,19 +37,6 @@
|
|||||||
:table-data="selectedList"
|
:table-data="selectedList"
|
||||||
/>
|
/>
|
||||||
</div> -->
|
</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
|
<el-dialog
|
||||||
title="提示"
|
title="提示"
|
||||||
:visible.sync="dialogVisible"
|
:visible.sync="dialogVisible"
|
||||||
@ -74,8 +55,8 @@
|
|||||||
<script>
|
<script>
|
||||||
import { parseTime } from '../../mixins/code-filter';
|
import { parseTime } from '../../mixins/code-filter';
|
||||||
import { getPdlAutoReport, getPdList } from '@/api/core/monitoring/auto'
|
import { getPdlAutoReport, getPdList } from '@/api/core/monitoring/auto'
|
||||||
// import jsPDF from 'jspdf'
|
import jsPDF from 'jspdf'
|
||||||
// import html2canvas from 'html2canvas'
|
import html2canvas from 'html2canvas'
|
||||||
// import codeFilter from '../../mixins/code-filter'
|
// import codeFilter from '../../mixins/code-filter'
|
||||||
import * as XLSX from 'xlsx'
|
import * as XLSX from 'xlsx'
|
||||||
import FileSaver from 'file-saver'
|
import FileSaver from 'file-saver'
|
||||||
@ -83,55 +64,45 @@ import FileSaver from 'file-saver'
|
|||||||
const tableProps = [
|
const tableProps = [
|
||||||
{
|
{
|
||||||
prop: 'reportType',
|
prop: 'reportType',
|
||||||
label: '报表类型',
|
label: '报表类型'
|
||||||
align: 'center'
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'reportStartTime',
|
prop: 'reportStartTime',
|
||||||
label: '统计开始时间',
|
label: '统计开始时间',
|
||||||
align: 'center',
|
|
||||||
filter: parseTime,
|
filter: parseTime,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'reportEndTime',
|
prop: 'reportEndTime',
|
||||||
label: '统计结束时间',
|
label: '统计结束时间',
|
||||||
align: 'center',
|
|
||||||
filter: parseTime,
|
filter: parseTime,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'proLineName',
|
prop: 'proLineName',
|
||||||
label: '产线名称',
|
label: '产线名称'
|
||||||
align: 'center',
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'inputNum',
|
prop: 'inputNum',
|
||||||
label: '投入数量/片',
|
label: '投入数量/片'
|
||||||
align: 'center',
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'outputNum',
|
prop: 'outputNum',
|
||||||
label: '产出数量/片',
|
label: '产出数量/片'
|
||||||
align: 'center',
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'outputArea',
|
prop: 'outputArea',
|
||||||
label: '产出面积/㎡',
|
label: '产出面积/㎡'
|
||||||
align: 'center',
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'lossNum',
|
prop: 'lossNum',
|
||||||
label: '损耗数量/片',
|
label: '损耗数量/片'
|
||||||
align: 'center',
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'lossArea',
|
prop: 'lossArea',
|
||||||
label: '损耗面积/㎡',
|
label: '损耗面积/㎡'
|
||||||
align: 'center',
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'lossRatio',
|
prop: 'lossRatio',
|
||||||
label: '损耗比例%',
|
label: '损耗比例%'
|
||||||
align: 'center',
|
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
@ -153,6 +124,7 @@ export default {
|
|||||||
addOrUpdateVisible: false,
|
addOrUpdateVisible: false,
|
||||||
tableProps,
|
tableProps,
|
||||||
tableBtn: [],
|
tableBtn: [],
|
||||||
|
showData: [],
|
||||||
selectedList: [],
|
selectedList: [],
|
||||||
// tableBtn: [
|
// tableBtn: [
|
||||||
// this.$auth.hasPermi(`base:factory:update`)
|
// this.$auth.hasPermi(`base:factory:update`)
|
||||||
@ -232,44 +204,60 @@ export default {
|
|||||||
this.getPdLineList()
|
this.getPdLineList()
|
||||||
},
|
},
|
||||||
methods: {
|
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() {
|
exportPdf() {
|
||||||
this.pdf()
|
this.test()
|
||||||
this.dialogVisible = false
|
setTimeout(() =>{
|
||||||
|
this.dialogVisible = false
|
||||||
|
this.showData = this.tableData
|
||||||
|
}, 600)
|
||||||
|
|
||||||
},
|
},
|
||||||
exportXlsx() {
|
exportXlsx() {
|
||||||
this.down()
|
this.exportECL()
|
||||||
this.dialogVisible = false
|
this.dialogVisible = false
|
||||||
},
|
this.showData = this.tableData
|
||||||
// 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()
|
|
||||||
},
|
},
|
||||||
handleClose(done) {
|
handleClose(done) {
|
||||||
this.$confirm('确认关闭?')
|
this.$confirm('确认关闭?')
|
||||||
@ -278,23 +266,30 @@ export default {
|
|||||||
})
|
})
|
||||||
.catch(_ => {});
|
.catch(_ => {});
|
||||||
},
|
},
|
||||||
down() {
|
exportECL() {
|
||||||
//选中导出时可更改此处数组 选中的数组
|
let tables = document.querySelector('.el-table').cloneNode(true)
|
||||||
//构建导出的表格数据
|
const fix = tables.querySelector('.el-table__fixed')
|
||||||
const exportData = [
|
const fixRight = tables.querySelector('.el-table__fixed-right')
|
||||||
{reportType: '报表类型', reportStartTime: '统计开始时间', reportEndTime: '统计结束时间', proLineName: '产线名称', inputNum: '投入数量/片', outputNum: '产出数量/片', outputArea: '产出面积/㎡', lossNum: '损耗数量/片', lossArea: '损耗面积/㎡', lossRatio: '损耗比例%' },
|
if (fix) {
|
||||||
...this.selectedList
|
tables.removeChild(tables.querySelector('.el-table__fixed'))
|
||||||
]
|
|
||||||
//注意表格上绑定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)
|
|
||||||
}
|
}
|
||||||
|
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) {
|
selectChange(val) {
|
||||||
console.log(val)
|
console.log(val)
|
||||||
@ -328,12 +323,13 @@ export default {
|
|||||||
getDataList() {
|
getDataList() {
|
||||||
this.dataListLoading = true;
|
this.dataListLoading = true;
|
||||||
this.urlOptions.getDataListURL(this.listQuery).then(response => {
|
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 ? '周' : '月'
|
item.reportType = item.reportType === 1 ? '日' : item.reportType === 2 ? '周' : '月'
|
||||||
return item
|
return item
|
||||||
});
|
});
|
||||||
this.total = response.data.total;
|
this.total = response.data.total;
|
||||||
this.dataListLoading = false;
|
this.dataListLoading = false;
|
||||||
|
this.showData = this.tableData
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
// 每页数
|
// 每页数
|
||||||
@ -348,15 +344,10 @@ export default {
|
|||||||
this.getDataList();
|
this.getDataList();
|
||||||
},
|
},
|
||||||
handleExport() {
|
handleExport() {
|
||||||
if (this.selectedList.length === 0) {
|
if (this.selectedList.length > 0) {
|
||||||
this.selectedList = this.tableData
|
this.showData = this.selectedList
|
||||||
}
|
}
|
||||||
this.dialogVisible = true
|
this.dialogVisible = true
|
||||||
// this.$modal.confirm('是否确认导出所选数据项?').then(() => {
|
|
||||||
// this.exportLoading = true;
|
|
||||||
// // this.down()
|
|
||||||
// this.pdf()
|
|
||||||
// }).catch(() => { });
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: Do not edit
|
* @Author: Do not edit
|
||||||
* @Date: 2023-08-29 14:59:29
|
* @Date: 2023-08-29 14:59:29
|
||||||
* @LastEditTime: 2023-09-20 10:55:23
|
* @LastEditTime: 2023-09-27 16:23:44
|
||||||
* @LastEditors: DY
|
* @LastEditors: DY
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -12,12 +12,13 @@
|
|||||||
ref="searchBarForm"
|
ref="searchBarForm"
|
||||||
@headBtnClick="buttonClick" />
|
@headBtnClick="buttonClick" />
|
||||||
<base-table
|
<base-table
|
||||||
|
class="right-aside"
|
||||||
v-loading="dataListLoading"
|
v-loading="dataListLoading"
|
||||||
:table-props="tableProps"
|
:table-props="tableProps"
|
||||||
:page="listQuery.pageNo"
|
:page="listQuery.pageNo"
|
||||||
:limit="listQuery.pageSize"
|
:limit="listQuery.pageSize"
|
||||||
:selectWidth="55"
|
:selectWidth="55"
|
||||||
:table-data="tableData"
|
:table-data="showData"
|
||||||
@selection-change="selectChange"
|
@selection-change="selectChange"
|
||||||
>
|
>
|
||||||
<method-btn
|
<method-btn
|
||||||
@ -33,17 +34,6 @@
|
|||||||
:page.sync="listQuery.pageNo"
|
:page.sync="listQuery.pageNo"
|
||||||
:total="listQuery.total"
|
:total="listQuery.total"
|
||||||
@pagination="getDataList" />
|
@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
|
<el-dialog
|
||||||
title="提示"
|
title="提示"
|
||||||
:visible.sync="dialogVisible"
|
:visible.sync="dialogVisible"
|
||||||
@ -63,6 +53,8 @@
|
|||||||
import { getPdlDataSearch, getPdList } from '@/api/core/monitoring/data'
|
import { getPdlDataSearch, getPdList } from '@/api/core/monitoring/data'
|
||||||
import * as XLSX from 'xlsx'
|
import * as XLSX from 'xlsx'
|
||||||
import FileSaver from 'file-saver'
|
import FileSaver from 'file-saver'
|
||||||
|
import jsPDF from 'jspdf'
|
||||||
|
import html2canvas from 'html2canvas'
|
||||||
|
|
||||||
const tableProps = [
|
const tableProps = [
|
||||||
{
|
{
|
||||||
@ -115,6 +107,7 @@ export default {
|
|||||||
addOrUpdateVisible: false,
|
addOrUpdateVisible: false,
|
||||||
tableProps,
|
tableProps,
|
||||||
tableBtn: [],
|
tableBtn: [],
|
||||||
|
showData: [],
|
||||||
tableData: [],
|
tableData: [],
|
||||||
selectedList: [],
|
selectedList: [],
|
||||||
formConfig: [
|
formConfig: [
|
||||||
@ -166,40 +159,86 @@ export default {
|
|||||||
this.getPdLineList()
|
this.getPdLineList()
|
||||||
},
|
},
|
||||||
methods: {
|
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() {
|
exportPdf() {
|
||||||
this.pdf()
|
this.test()
|
||||||
this.dialogVisible = false
|
setTimeout(() =>{
|
||||||
|
this.dialogVisible = false
|
||||||
|
this.showData = this.tableData
|
||||||
|
}, 600)
|
||||||
|
|
||||||
},
|
},
|
||||||
exportXlsx() {
|
exportXlsx() {
|
||||||
this.down()
|
this.exportECL()
|
||||||
this.dialogVisible = false
|
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) {
|
handleClose(done) {
|
||||||
this.$confirm('确认关闭?')
|
this.$confirm('确认关闭?')
|
||||||
.then(_ => {
|
.then(_ => {
|
||||||
@ -240,6 +279,7 @@ export default {
|
|||||||
this.tableData = response.data;
|
this.tableData = response.data;
|
||||||
this.total = response.data.total;
|
this.total = response.data.total;
|
||||||
this.dataListLoading = false;
|
this.dataListLoading = false;
|
||||||
|
this.showData = this.tableData
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
// 每页数
|
// 每页数
|
||||||
@ -254,21 +294,10 @@ export default {
|
|||||||
this.getDataList();
|
this.getDataList();
|
||||||
},
|
},
|
||||||
handleExport() {
|
handleExport() {
|
||||||
if (this.selectedList.length === 0) {
|
if (this.selectedList.length > 0) {
|
||||||
this.selectedList = this.tableData
|
this.showData = this.selectedList
|
||||||
}
|
}
|
||||||
this.dialogVisible = true
|
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
|
* @Author: Do not edit
|
||||||
* @Date: 2023-08-29 14:59:29
|
* @Date: 2023-08-29 14:59:29
|
||||||
* @LastEditTime: 2023-09-22 15:13:48
|
* @LastEditTime: 2023-10-08 10:51:49
|
||||||
* @LastEditors: DY
|
* @LastEditors: DY
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -13,12 +13,13 @@
|
|||||||
ref="searchBarForm"
|
ref="searchBarForm"
|
||||||
@headBtnClick="buttonClick" />
|
@headBtnClick="buttonClick" />
|
||||||
<base-table
|
<base-table
|
||||||
|
class="right-aside"
|
||||||
v-loading="dataListLoading"
|
v-loading="dataListLoading"
|
||||||
:table-props="tableProps"
|
:table-props="tableProps"
|
||||||
:page="listQuery.pageNo"
|
:page="listQuery.pageNo"
|
||||||
:limit="listQuery.pageSize"
|
:limit="listQuery.pageSize"
|
||||||
:selectWidth="55"
|
:selectWidth="55"
|
||||||
:table-data="tableData"
|
:table-data="showData"
|
||||||
@selection-change="selectChange"
|
@selection-change="selectChange"
|
||||||
>
|
>
|
||||||
<method-btn
|
<method-btn
|
||||||
@ -34,21 +35,6 @@
|
|||||||
:page.sync="listQuery.pageNo"
|
:page.sync="listQuery.pageNo"
|
||||||
:total="listQuery.total"
|
:total="listQuery.total"
|
||||||
@pagination="getDataList" />
|
@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
|
<el-dialog
|
||||||
title="提示"
|
title="提示"
|
||||||
:visible.sync="dialogVisible"
|
:visible.sync="dialogVisible"
|
||||||
@ -69,6 +55,8 @@ import { parseTime } from '../../mixins/code-filter';
|
|||||||
import { getWorkshopSectionList, getPdList, getSectionAutoReport } from '@/api/core/monitoring/sectionStatistics'
|
import { getWorkshopSectionList, getPdList, getSectionAutoReport } from '@/api/core/monitoring/sectionStatistics'
|
||||||
import * as XLSX from 'xlsx'
|
import * as XLSX from 'xlsx'
|
||||||
import FileSaver from 'file-saver'
|
import FileSaver from 'file-saver'
|
||||||
|
import jsPDF from 'jspdf'
|
||||||
|
import html2canvas from 'html2canvas'
|
||||||
|
|
||||||
const tableProps = [
|
const tableProps = [
|
||||||
{
|
{
|
||||||
@ -140,6 +128,7 @@ export default {
|
|||||||
tableProps,
|
tableProps,
|
||||||
tableBtn: [],
|
tableBtn: [],
|
||||||
tableData: [],
|
tableData: [],
|
||||||
|
showData: [],
|
||||||
formConfig: [
|
formConfig: [
|
||||||
{
|
{
|
||||||
type: 'select',
|
type: 'select',
|
||||||
@ -208,40 +197,86 @@ export default {
|
|||||||
this.getPdLineList()
|
this.getPdLineList()
|
||||||
},
|
},
|
||||||
methods: {
|
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() {
|
exportPdf() {
|
||||||
this.pdf()
|
this.test()
|
||||||
this.dialogVisible = false
|
setTimeout(() =>{
|
||||||
|
this.dialogVisible = false
|
||||||
|
this.showData = this.tableData
|
||||||
|
}, 600)
|
||||||
|
|
||||||
},
|
},
|
||||||
exportXlsx() {
|
exportXlsx() {
|
||||||
this.down()
|
this.exportECL()
|
||||||
this.dialogVisible = false
|
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) {
|
handleClose(done) {
|
||||||
this.$confirm('确认关闭?')
|
this.$confirm('确认关闭?')
|
||||||
.then(_ => {
|
.then(_ => {
|
||||||
@ -289,6 +324,7 @@ export default {
|
|||||||
item.reportType = item.reportType === 1 ? '日' : item.reportType === 2 ? '周' : '月'
|
item.reportType = item.reportType === 1 ? '日' : item.reportType === 2 ? '周' : '月'
|
||||||
return item
|
return item
|
||||||
});
|
});
|
||||||
|
this.showData = this.tableData
|
||||||
this.total = response.data.total;
|
this.total = response.data.total;
|
||||||
this.dataListLoading = false;
|
this.dataListLoading = false;
|
||||||
});
|
});
|
||||||
@ -305,21 +341,10 @@ export default {
|
|||||||
this.getDataList();
|
this.getDataList();
|
||||||
},
|
},
|
||||||
handleExport() {
|
handleExport() {
|
||||||
if (this.selectedList.length === 0) {
|
if (this.selectedList.length > 0) {
|
||||||
this.selectedList = this.tableData
|
this.showData = this.selectedList
|
||||||
}
|
}
|
||||||
this.dialogVisible = true
|
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"
|
ref="searchBarForm"
|
||||||
@headBtnClick="buttonClick" />
|
@headBtnClick="buttonClick" />
|
||||||
<base-table
|
<base-table
|
||||||
|
class="right-aside"
|
||||||
v-loading="dataListLoading"
|
v-loading="dataListLoading"
|
||||||
:table-props="tableProps"
|
:table-props="tableProps"
|
||||||
:table-data="tableData" />
|
:table-data="showData"
|
||||||
<!-- <pagination
|
:selectWidth="55"
|
||||||
|
@selection-change="selectChange"
|
||||||
|
/>
|
||||||
|
<pagination
|
||||||
:limit.sync="listQuery.pageSize"
|
:limit.sync="listQuery.pageSize"
|
||||||
:page.sync="listQuery.pageNo"
|
:page.sync="listQuery.pageNo"
|
||||||
:total="listQuery.total"
|
: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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// import basicPage from '../../mixins/basic-page';
|
// import basicPage from '../../mixins/basic-page';
|
||||||
import { parseTime } from '../../mixins/code-filter';
|
|
||||||
import { getSectionDataSearch } from '@/api/core/monitoring';
|
import { getSectionDataSearch } from '@/api/core/monitoring';
|
||||||
import { getProductionLinePage } from '@/api/core/base/productionLine';
|
import { getProductionLinePage } from '@/api/core/base/productionLine';
|
||||||
import { getWorkshopSectionPage } from '@/api/core/base/workshopSection';
|
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 = [
|
const tableProps = [
|
||||||
{
|
{
|
||||||
@ -70,6 +89,8 @@ export default {
|
|||||||
},
|
},
|
||||||
tableProps,
|
tableProps,
|
||||||
tableData: [],
|
tableData: [],
|
||||||
|
showData: [],
|
||||||
|
selectedList: [],
|
||||||
listQuery: {
|
listQuery: {
|
||||||
proLineId:undefined,
|
proLineId:undefined,
|
||||||
sectionId: undefined,
|
sectionId: undefined,
|
||||||
@ -77,6 +98,7 @@ export default {
|
|||||||
endTime: undefined,
|
endTime: undefined,
|
||||||
},
|
},
|
||||||
dataListLoading: false,
|
dataListLoading: false,
|
||||||
|
dialogVisible: false,
|
||||||
optionArrUrl: [getProductionLinePage, getWorkshopSectionPage],
|
optionArrUrl: [getProductionLinePage, getWorkshopSectionPage],
|
||||||
formConfig: [
|
formConfig: [
|
||||||
{
|
{
|
||||||
@ -127,6 +149,93 @@ export default {
|
|||||||
this.getDataList()
|
this.getDataList()
|
||||||
},
|
},
|
||||||
methods: {
|
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() {
|
getArr() {
|
||||||
const params = {
|
const params = {
|
||||||
page: 1,
|
page: 1,
|
||||||
@ -144,9 +253,31 @@ export default {
|
|||||||
// this.listQuery.endTime = '1693564257000'
|
// this.listQuery.endTime = '1693564257000'
|
||||||
this.urlOptions.getDataListURL(this.listQuery).then(res => {
|
this.urlOptions.getDataListURL(this.listQuery).then(res => {
|
||||||
this.tableData = res.data
|
this.tableData = res.data
|
||||||
// this.total = response.data.total;
|
this.listQuery.total = this.tableData.length;
|
||||||
this.dataListLoading = false;
|
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) {
|
buttonClick(val) {
|
||||||
console.log(val)
|
console.log(val)
|
||||||
@ -171,6 +302,9 @@ export default {
|
|||||||
};
|
};
|
||||||
this.getDataList();
|
this.getDataList();
|
||||||
break;
|
break;
|
||||||
|
case 'export':
|
||||||
|
this.handleExport();
|
||||||
|
break;
|
||||||
default:
|
default:
|
||||||
console.log(val);
|
console.log(val);
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user