This commit is contained in:
helloDy 2023-09-16 17:51:09 +08:00
parent e9538744c3
commit bc5d3d44d5
6 changed files with 344 additions and 133 deletions

View File

@ -1,7 +1,7 @@
###
# @Author: Do not edit
# @Date: 2023-08-29 09:40:39
# @LastEditTime: 2023-09-15 14:38:26
# @LastEditTime: 2023-09-16 09:41:07
# @LastEditors: DY
# @Description:
###

View File

@ -1,7 +1,7 @@
<template>
<div class="app-container">
<search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
<base-table v-loading="dataListLoading" :table-props="tableProps" :table-data="tableData" />
<base-table v-loading="dataListLoading" :span-method="mergeColumnHandler" :table-props="tableProps" :table-data="tableData" />
<line-chart ref="lineChart" />
<!-- <pagination
:limit.sync="listQuery.pageSize"
@ -17,6 +17,7 @@ import { parseTime } from '../../mixins/code-filter';
import { getCT } from '@/api/core/analysis/index';
import { getProductionLinePage } from '@/api/core/base/productionLine';
import lineChart from '../LineChart'
import { time } from 'echarts';
// import { getWorkshopSectionPage } from '@/api/core/base/workshopSection';
// const tableProps = [
@ -59,6 +60,8 @@ export default {
lineId:undefined,
startTime:undefined
},
timeList: [],
spanArr: [],
xData: [],
yData: [],
optionArrUrl: [getProductionLinePage],
@ -69,18 +72,19 @@ export default {
selectOptions: [],
param: 'lineIds',
defaultSelect: '',
multiple: true,
multiple: false,
filterable: true,
},
{
type: 'datePicker',
label: '时间',
dateType: 'datetime',
dateType: 'datetimerange',
format: 'yyyy-MM-dd',
valueFormat: 'yyyy-MM-dd HH:mm:ss',
rangeSeparator: '-',
startPlaceholder: '开始时间',
endPlaceholder: '结束时间',
width: 350,
param: 'time',
},
{
@ -107,10 +111,40 @@ export default {
});
});
},
setRowSpan(arr) {
let count = 0
arr.forEach((item, index) => {
if(index === 0) {
this.spanArr.push(1)
} else {
if (item === arr[index - 1]) {
this.spanArr[count] += 1
this.spanArr.push(0)
} else {
count = index
this.spanArr.push(1)
}
}
})
console.log('打印数组长度', this.spanArr)
},
/** 合并table列的规则 */
mergeColumnHandler({ row, column, rowIndex, columnIndex }) {
if (columnIndex == 0) {
if (this.spanArr[rowIndex]) {
return [
this.spanArr[rowIndex], // row span
1, // col span
];
} else {
return [0, 0];
}
}
},
getData() {
this.listQuery.lineId = '1672847052717821953'
this.listQuery.startTime = '1693497600000';
this.listQuery.endTime = '1693843200000';
// this.listQuery.lineId = '1672847052717821953'
// this.listQuery.startTime = '1693497600000';
// this.listQuery.endTime = '1693843200000';
this.urlOptions.getDataListURL(this.listQuery).then(res => {
console.log(res)
let arr = [
@ -123,40 +157,48 @@ export default {
prop: 'equName',
label: '设备',
align: 'center',
},
]
let eqArr= []
res.data.data.forEach((ele, index) => {
console.log(ele);
eqArr.push(ele.equName)
})
console.log(eqArr)
// console.log(res.data.nameData.slice(1))
res.data.nameData.forEach(item => {
if (eqArr[0] === item.parentId) {
const props = {
'prop': item.name,
'label': item.name,
'align': 'center'
}
}
arr[2].children.push(props)
]
let sectionArr= []
res.data.data.forEach((ele, index) => {
let tempData = []
ele.data.forEach(item => {
item.children.forEach(params => {
if (params.dynamicName === '设备CT') {
tempData[item.dynamicName + '_eq'] = params.dynamicValue
} else {
tempData[item.dynamicName + '_pl'] = params.dynamicValue
}
})
})
tempData['equName'] = ele.equName
tempData['sectionName'] = ele.sectionName
this.tableData.push(tempData)
const { sectionName } = tempData
sectionArr.push(sectionName)
})
let obj = {
lineName: res.data.data[0].lineName,
sum: res.data.data[0].sum,
this.setRowSpan(sectionArr)
console.log('工段名称列表', sectionArr)
res.data.nameData.forEach(item => {
this.timeList.push(item.name)
})
const timeArray = Array.from(new Set(this.timeList))
for (const times of timeArray) {
if (times !== '设备CT' && times !== '产线CT') {
const subprop = {
label: times,
align: 'center',
children: [
{ prop: times + '_eq', label: '设备CT', align: 'center' },
{ prop: times + '_pl', label: '产线CT', align: 'center' }
]
}
arr.push(subprop)
}
}
res.data.data[0].data[0].children.forEach((item, index) => {
console.log(item)
// let data = 'data' + Number(index+1)
obj['' + item.dynamicName + ''] = item.dynamicValue
})
this.tableData = [obj]
console.log(this.tableData)
console.log(arr)
this.tableProps = arr
let xData = []
let xData = []
res.data.nameData.forEach(item => {
xData.push(item.name)
// arr[2].children.push(props)
@ -180,6 +222,9 @@ export default {
case 'search':
// this.listQuery.pageNo = 1;
// this.listQuery.pageSize = 10;
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()
break;
case 'reset':

View File

@ -1,7 +1,7 @@
<!--
* @Author: Do not edit
* @Date: 2023-08-29 14:59:29
* @LastEditTime: 2023-09-15 11:19:34
* @LastEditTime: 2023-09-16 17:34:17
* @LastEditors: DY
* @Description:
-->
@ -44,7 +44,7 @@
/>
</div> -->
<div ref="pdf" v-show="false">
<el-table :data="selectedList" stripe border="true" style="width: 100%">
<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="统计结束时间" />
@ -74,8 +74,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'
@ -240,19 +240,19 @@ export default {
this.down()
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) {
// 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()

View File

@ -1,7 +1,7 @@
<!--
* @Author: Do not edit
* @Date: 2023-08-29 14:59:29
* @LastEditTime: 2023-09-14 10:51:20
* @LastEditTime: 2023-09-16 17:42:37
* @LastEditors: DY
* @Description:
-->
@ -33,11 +33,36 @@
: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"
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 { getPdlDataSearch, getPdList } from '@/api/core/monitoring/data'
import * as XLSX from 'xlsx'
import FileSaver from 'file-saver'
const tableProps = [
{
@ -85,11 +110,13 @@ export default {
},
exportLoading: false,
dataListLoading: false,
dialogVisible: false,
addOrEditTitle: '',
addOrUpdateVisible: false,
tableProps,
tableBtn: [],
tableData: [],
selectedList: [],
formConfig: [
{
type: 'select',
@ -134,6 +161,47 @@ export default {
this.getPdLineList()
},
methods: {
exportPdf() {
this.pdf()
this.dialogVisible = false
},
exportXlsx() {
this.down()
this.dialogVisible = false
},
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(_ => {
done();
})
.catch(_ => {});
},
getPdLineList() {
getPdList().then((res) => {
this.formConfig[0].selectOptions = res.data || []
@ -181,6 +249,10 @@ export default {
this.getDataList();
},
handleExport() {
if (this.selectedList.length === 0) {
this.selectedList = this.tableData
}
this.dialogVisible = true
//
// let params = { ...this.queryParams };
// params.pageNo = undefined;

View File

@ -14,7 +14,7 @@
v-else
:span-method="mergeColumnHandler"
:table-props="tableProps"
:table-data="list"
:table-data="tableData"
@emitFun="handleEmitFun"></base-table>
<!-- :page="queryParams.pageNo"
:limit="queryParams.pageSize" -->
@ -39,6 +39,10 @@ export default {
pageSize: 10,
},
list: [],
arr: [],
spanArr: [],
timeList: [],
tableData: [],
tableProps: [],
spanInfo: {},
};
@ -49,70 +53,75 @@ export default {
},
methods: {
/** 构建tableProps - 依据第一个元素所提供的信息 */
buildProps(item) {
const {
data: [{ hourData }],
} = item;
const props = [
{ prop: 'productLine', label: '产线', align: 'center' },
{ prop: 'specification', label: '规格', align: 'center' },
{ prop: 'equipmentName', label: '设备', align: 'center' },
{ prop: 'totalQuantity', label: '生产总数', align: 'center' },
];
for (const key of Object.keys(hourData).sort()) {
const subprop = {
label: key,
align: 'center',
children: [
{ prop: key + '__in', label: '进数据', align: 'center' },
{ prop: key + '__out', label: '出数据', align: 'center' },
{ prop: key + '__nok', label: '报废数据', align: 'center' },
{
prop: key + '__ratio',
label: '报废率',
align: 'center',
filter: (val) => (val != null ? val + ' %' : '-'),
},
],
};
props.push(subprop);
buildProps(plData) {
plData.forEach(item => {
this.timeList.push(item.name)
})
const timeArray = Array.from(new Set(this.timeList))
console.log('nihc', timeArray)
for (const times of timeArray) {
if (times !== '投入数量' && times !== '产出数量' && times !== '报废数量' && times !== '产出面积') {
const subprop = {
label: times,
align: 'center',
children: [
{ prop: times + '_in', label: '投入数量', align: 'center' },
{ prop: times + '_out', label: '产出数量', align: 'center' },
{ prop: times + '_junk', label: '报废数量', align: 'center' },
{ prop: times + '_area', label: '产出面积', align: 'center' }
]
}
this.arr.push(subprop)
}
}
this.tableProps = props;
console.log('打印tableProps', this.tableProps)
this.tableProps = this.arr
},
setRowSpan(arr) {
let count = 0
arr.forEach((item, index) => {
if(index === 0) {
this.spanArr.push(1)
} else {
if (item === arr[index - 1]) {
this.spanArr[count] += 1
this.spanArr.push(0)
} else {
count = index
this.spanArr.push(1)
}
}
})
console.log('打印数组长度', this.spanArr)
},
/** 把 list 里的数据转换成 tableProps 对应的格式 */
convertList(list) {
this.list.splice(0);
let rowIndex = 0;
for (const line of list) {
const { productLine, specification, data } = line;
// span
this.spanInfo[rowIndex] = data.length;
for (const equipment of data) {
const { equipmentName, totalQuantity } = equipment;
let row = {
productLine,
specification: specification.join('、'),
equipmentName,
totalQuantity,
};
rowIndex += 1;
for (const [key, hourData] of Object.entries(equipment.hourData)) {
const { inQuantity, outQuantity, nokQuantity, scrapRatio } =
hourData;
row[key + '__in'] = inQuantity;
row[key + '__out'] = outQuantity;
row[key + '__nok'] = nokQuantity;
row[key + '__ratio'] = scrapRatio;
}
this.list.push(row);
}
}
let sectionArr= []
console.log('打印看下数据list', list)
list.forEach((ele, index) => {
let tempData = []
ele.data.forEach(item => {
item.children.forEach(params => {
if (params.dynamicName === '投入数量') {
tempData[item.dynamicName + '_in'] = params.dynamicValue
} else if (params.dynamicName === '产出数量') {
tempData[item.dynamicName + '_out'] = params.dynamicValue
} else if (params.dynamicName === '报废数量') {
tempData[item.dynamicName + '_junk'] = params.dynamicValue
} else {
tempData[item.dynamicName + '_area'] = params.dynamicValue
}
})
})
tempData['proLineName'] = ele.proLineName
tempData['spec'] = ele.spec
this.tableData.push(tempData)
console.log('看看数据', this.tableData, tempData)
const { sectionName } = tempData
sectionArr.push(sectionName)
})
this.setRowSpan(sectionArr)
console.log('工段名称列表', sectionArr)
},
buildData(data) {
@ -121,10 +130,10 @@ export default {
/** 合并table列的规则 */
mergeColumnHandler({ row, column, rowIndex, columnIndex }) {
if (columnIndex == 0 || columnIndex == 1) {
if (this.spanInfo[rowIndex]) {
if (columnIndex == 0) {
if (this.spanArr[rowIndex]) {
return [
this.spanInfo[rowIndex], // row span
this.spanArr[rowIndex], // row span
1, // col span
];
} else {
@ -136,18 +145,27 @@ export default {
async getList() {
this.urlOptions.getDataListURL().then(res => {
console.log('看看数据', res)
this.arr = [
{
prop: 'proLineName',
label: '生产线',
align: 'center',
},
{
prop: 'spec',
label: '产品规格',
align: 'center',
}
]
this.buildProps(res.data.nameData);
this.buildData(res.data.data);
})
// const { data } = await this.$axios({
// url: '/monitoring/equipment-monitor/recent-24-hours',
// method: 'get',
// });
// // const data = this.res.data;
// // console.log('recent-24', data);
// this.initing = true;
// this.buildProps(data[0]);
// this.buildData(data);
// this.queryParams.pageSize = this.list.length;
// setTimeout(() => {

View File

@ -1,7 +1,7 @@
<!--
* @Author: Do not edit
* @Date: 2023-08-29 14:59:29
* @LastEditTime: 2023-09-15 13:51:55
* @LastEditTime: 2023-09-16 17:41:53
* @LastEditors: DY
* @Description:
-->
@ -34,12 +34,41 @@
: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"
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 { parseTime } from '../../mixins/code-filter';
import { getWorkshopSectionList, getPdList, getSectionAutoReport } from '@/api/core/monitoring/sectionStatistics'
import * as XLSX from 'xlsx'
import FileSaver from 'file-saver'
const tableProps = [
{
@ -104,6 +133,8 @@ export default {
},
exportLoading: false,
dataListLoading: false,
selectedList: [],
dialogVisible: false,
addOrEditTitle: '',
addOrUpdateVisible: false,
tableProps,
@ -177,6 +208,47 @@ export default {
this.getPdLineList()
},
methods: {
exportPdf() {
this.pdf()
this.dialogVisible = false
},
exportXlsx() {
this.down()
this.dialogVisible = false
},
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(_ => {
done();
})
.catch(_ => {});
},
getPdLineList() {
getPdList().then((res) => {
this.formConfig[0].selectOptions = res.data || []
@ -233,17 +305,21 @@ export default {
this.getDataList();
},
handleExport() {
if (this.selectedList.length === 0) {
this.selectedList = this.tableData
}
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(() => { });
// 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(() => { });
}
},
};