@@ -1,10 +1,10 @@ | |||||
### | ### | ||||
# @Author: Do not edit | # @Author: Do not edit | ||||
# @Date: 2023-08-29 09:40:39 | # @Date: 2023-08-29 09:40:39 | ||||
# @LastEditTime: 2023-09-12 14:01:15 | |||||
# @LastEditors: zhp | |||||
# @Description: | |||||
### | |||||
# @LastEditTime: 2023-09-16 09:41:07 | |||||
# @LastEditors: DY | |||||
# @Description: | |||||
### | |||||
# 开发环境配置 | # 开发环境配置 | ||||
ENV = 'development' | ENV = 'development' | ||||
@@ -12,10 +12,10 @@ ENV = 'development' | |||||
VUE_APP_TITLE = 芋道管理系统 | VUE_APP_TITLE = 芋道管理系统 | ||||
# 芋道管理系统/开发环境 | # 芋道管理系统/开发环境 | ||||
VUE_APP_BASE_API = 'http://192.168.1.188:48080' | |||||
# VUE_APP_BASE_API = 'http://192.168.1.49:48080' | |||||
# VUE_APP_BASE_API = 'http://192.168.1.8:48080' | # VUE_APP_BASE_API = 'http://192.168.1.8:48080' | ||||
# VUE_APP_BASE_API = 'http://192.168.0.33:48080' | # VUE_APP_BASE_API = 'http://192.168.0.33:48080' | ||||
# VUE_APP_BASE_API = 'http://192.168.1.188:48080' | |||||
VUE_APP_BASE_API = 'http://192.168.1.188:48080' | |||||
# 路由懒加载 | # 路由懒加载 | ||||
VUE_CLI_BABEL_TRANSPILE_MODULES = true | VUE_CLI_BABEL_TRANSPILE_MODULES = true | ||||
@@ -55,8 +55,10 @@ | |||||
"file-saver": "^2.0.5", | "file-saver": "^2.0.5", | ||||
"fuse.js": "6.6.2", | "fuse.js": "6.6.2", | ||||
"highlight.js": "9.18.5", | "highlight.js": "9.18.5", | ||||
"html2canvas": "^1.4.1", | |||||
"js-beautify": "1.13.0", | "js-beautify": "1.13.0", | ||||
"jsencrypt": "3.3.1", | "jsencrypt": "3.3.1", | ||||
"jspdf": "^2.5.1", | |||||
"min-dash": "3.5.2", | "min-dash": "3.5.2", | ||||
"mockjs": "^1.1.0", | "mockjs": "^1.1.0", | ||||
"moment": "^2.29.4", | "moment": "^2.29.4", | ||||
@@ -0,0 +1,25 @@ | |||||
/* | |||||
* @Author: Do not edit | |||||
* @Date: 2023-09-12 09:44:53 | |||||
* @LastEditTime: 2023-09-13 16:11:41 | |||||
* @LastEditors: DY | |||||
* @Description: | |||||
*/ | |||||
import request from '@/utils/request' | |||||
// 获得工厂分页 | |||||
export function getPdlAutoReport(data) { | |||||
return request({ | |||||
url: '/monitoring/production-monitor/getPdlAutoReport', | |||||
method: 'post', | |||||
data: data | |||||
}) | |||||
} | |||||
// 获得所有工厂产线列表 | |||||
export function getPdList() { | |||||
return request({ | |||||
url: '/base/production-line/listAll', | |||||
method: 'get' | |||||
}) | |||||
} |
@@ -0,0 +1,25 @@ | |||||
/* | |||||
* @Author: Do not edit | |||||
* @Date: 2023-09-12 09:44:53 | |||||
* @LastEditTime: 2023-09-14 10:25:46 | |||||
* @LastEditors: DY | |||||
* @Description: | |||||
*/ | |||||
import request from '@/utils/request' | |||||
// 获得产线统计数据查询 | |||||
export function getPdlDataSearch(data) { | |||||
return request({ | |||||
url: '/monitoring/production-monitor/getPdlDataSearch', | |||||
method: 'post', | |||||
data: data | |||||
}) | |||||
} | |||||
// 获得所有工厂产线列表 | |||||
export function getPdList() { | |||||
return request({ | |||||
url: '/base/production-line/listAll', | |||||
method: 'get' | |||||
}) | |||||
} |
@@ -0,0 +1,17 @@ | |||||
/* | |||||
* @Author: Do not edit | |||||
* @Date: 2023-09-12 09:44:53 | |||||
* @LastEditTime: 2023-09-15 14:12:26 | |||||
* @LastEditors: DY | |||||
* @Description: | |||||
*/ | |||||
import request from '@/utils/request' | |||||
// 获得近24小时产线生产数据 | |||||
export function getPdlDataOneDay(data) { | |||||
return request({ | |||||
url: '/monitoring/production-monitor/getPdlDataOneDay', | |||||
method: 'post', | |||||
data: data | |||||
}) | |||||
} |
@@ -0,0 +1,33 @@ | |||||
/* | |||||
* @Author: Do not edit | |||||
* @Date: 2023-09-12 09:44:53 | |||||
* @LastEditTime: 2023-09-14 14:01:12 | |||||
* @LastEditors: DY | |||||
* @Description: | |||||
*/ | |||||
import request from '@/utils/request' | |||||
// 获得工段自动统计数据查询 | |||||
export function getSectionAutoReport(data) { | |||||
return request({ | |||||
url: '/monitoring/production-monitor/getSectionAutoReport', | |||||
method: 'post', | |||||
data: data | |||||
}) | |||||
} | |||||
// 获得所有工厂产线列表 | |||||
export function getPdList() { | |||||
return request({ | |||||
url: '/base/production-line/listAll', | |||||
method: 'get' | |||||
}) | |||||
} | |||||
// 获得所有产线工段列表 | |||||
export function getWorkshopSectionList() { | |||||
return request({ | |||||
url: '/base/workshop-section/listAll', | |||||
method: 'get' | |||||
}) | |||||
} |
@@ -1,7 +1,7 @@ | |||||
<template> | <template> | ||||
<div class="app-container"> | <div class="app-container"> | ||||
<search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" /> | <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" /> | <line-chart ref="lineChart" /> | ||||
<!-- <pagination | <!-- <pagination | ||||
:limit.sync="listQuery.pageSize" | :limit.sync="listQuery.pageSize" | ||||
@@ -17,6 +17,7 @@ import { parseTime } from '../../mixins/code-filter'; | |||||
import { getCT } from '@/api/core/analysis/index'; | import { getCT } from '@/api/core/analysis/index'; | ||||
import { getProductionLinePage } from '@/api/core/base/productionLine'; | import { getProductionLinePage } from '@/api/core/base/productionLine'; | ||||
import lineChart from '../LineChart' | import lineChart from '../LineChart' | ||||
import { time } from 'echarts'; | |||||
// import { getWorkshopSectionPage } from '@/api/core/base/workshopSection'; | // import { getWorkshopSectionPage } from '@/api/core/base/workshopSection'; | ||||
// const tableProps = [ | // const tableProps = [ | ||||
@@ -59,6 +60,8 @@ export default { | |||||
lineId:undefined, | lineId:undefined, | ||||
startTime:undefined | startTime:undefined | ||||
}, | }, | ||||
timeList: [], | |||||
spanArr: [], | |||||
xData: [], | xData: [], | ||||
yData: [], | yData: [], | ||||
optionArrUrl: [getProductionLinePage], | optionArrUrl: [getProductionLinePage], | ||||
@@ -69,18 +72,19 @@ export default { | |||||
selectOptions: [], | selectOptions: [], | ||||
param: 'lineIds', | param: 'lineIds', | ||||
defaultSelect: '', | defaultSelect: '', | ||||
multiple: true, | |||||
multiple: false, | |||||
filterable: true, | filterable: true, | ||||
}, | }, | ||||
{ | { | ||||
type: 'datePicker', | type: 'datePicker', | ||||
label: '时间', | label: '时间', | ||||
dateType: 'datetime', | |||||
dateType: 'datetimerange', | |||||
format: 'yyyy-MM-dd', | format: 'yyyy-MM-dd', | ||||
valueFormat: 'yyyy-MM-dd HH:mm:ss', | valueFormat: 'yyyy-MM-dd HH:mm:ss', | ||||
rangeSeparator: '-', | rangeSeparator: '-', | ||||
startPlaceholder: '开始时间', | startPlaceholder: '开始时间', | ||||
endPlaceholder: '结束时间', | endPlaceholder: '结束时间', | ||||
width: 350, | |||||
param: 'time', | 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() { | 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 => { | this.urlOptions.getDataListURL(this.listQuery).then(res => { | ||||
console.log(res) | console.log(res) | ||||
let arr = [ | let arr = [ | ||||
@@ -123,40 +157,48 @@ export default { | |||||
prop: 'equName', | prop: 'equName', | ||||
label: '设备', | label: '设备', | ||||
align: 'center', | align: 'center', | ||||
}, | |||||
} | |||||
] | ] | ||||
let eqArr= [] | |||||
let sectionArr= [] | |||||
res.data.data.forEach((ele, index) => { | res.data.data.forEach((ele, index) => { | ||||
console.log(ele); | |||||
eqArr.push(ele.equName) | |||||
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) | |||||
}) | }) | ||||
console.log(eqArr) | |||||
// console.log(res.data.nameData.slice(1)) | |||||
this.setRowSpan(sectionArr) | |||||
console.log('工段名称列表', sectionArr) | |||||
res.data.nameData.forEach(item => { | res.data.nameData.forEach(item => { | ||||
if (eqArr[0] === item.parentId) { | |||||
const props = { | |||||
'prop': item.name, | |||||
'label': item.name, | |||||
'align': 'center' | |||||
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) | |||||
} | } | ||||
arr[2].children.push(props) | |||||
}) | |||||
let obj = { | |||||
lineName: res.data.data[0].lineName, | |||||
sum: res.data.data[0].sum, | |||||
} | } | ||||
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 | this.tableProps = arr | ||||
let xData = [] | |||||
let xData = [] | |||||
res.data.nameData.forEach(item => { | res.data.nameData.forEach(item => { | ||||
xData.push(item.name) | xData.push(item.name) | ||||
// arr[2].children.push(props) | // arr[2].children.push(props) | ||||
@@ -180,6 +222,9 @@ export default { | |||||
case 'search': | case 'search': | ||||
// this.listQuery.pageNo = 1; | // this.listQuery.pageNo = 1; | ||||
// this.listQuery.pageSize = 10; | // 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() | this.getData() | ||||
break; | break; | ||||
case 'reset': | case 'reset': | ||||
@@ -1,8 +1,8 @@ | |||||
/* | /* | ||||
* @Date: 2020-12-29 16:49:28 | * @Date: 2020-12-29 16:49:28 | ||||
* @LastEditors: zwq | |||||
* @LastEditTime: 2023-08-01 11:10:04 | |||||
* @LastEditors: DY | |||||
* @LastEditTime: 2023-09-12 11:13:34 | |||||
* @FilePath: \basic-admin\src\filters\basicData\index.js | * @FilePath: \basic-admin\src\filters\basicData\index.js | ||||
* @Description: | * @Description: | ||||
*/ | */ | ||||
@@ -13,6 +13,11 @@ const table = { | |||||
2: '停止', | 2: '停止', | ||||
3: '未知', | 3: '未知', | ||||
}, | }, | ||||
reportType: { | |||||
1: '日', | |||||
2: '周', | |||||
3: '月' | |||||
} | |||||
} | } | ||||
// 日期格式化 | // 日期格式化 | ||||
@@ -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-11 15:52:20 | |||||
* @LastEditTime: 2023-09-16 17:34:17 | |||||
* @LastEditors: DY | * @LastEditors: DY | ||||
* @Description: | * @Description: | ||||
--> | --> | ||||
@@ -32,100 +32,104 @@ | |||||
:limit.sync="listQuery.pageSize" | :limit.sync="listQuery.pageSize" | ||||
:page.sync="listQuery.pageNo" | :page.sync="listQuery.pageNo" | ||||
:total="listQuery.total" | :total="listQuery.total" | ||||
@pagination="getDataList" /> | |||||
<!-- <div> | |||||
<el-button @click="down()">1111</el-button> | |||||
<el-table :data="tableData1" stripe style="width: 100%"> | |||||
<el-table-column prop="date" label="日期" width="180" /> | |||||
<el-table-column prop="name" label="姓名" /> | |||||
<el-table-column prop="address" label="地址" /> | |||||
</el-table> | |||||
@pagination="getDataList" | |||||
/> | |||||
<!-- <div v-show="false" ref="pdf"> | |||||
<base-table | |||||
v-loading="dataListLoading" | |||||
:table-props="tableProps" | |||||
:page="listQuery.pageNo" | |||||
:limit="listQuery.pageSize" | |||||
: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 | |||||
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 { parseTime } from '../../mixins/code-filter'; | import { parseTime } from '../../mixins/code-filter'; | ||||
import { | |||||
getFactoryPage, | |||||
exportFactoryExcel, | |||||
} from '@/api/core/base/factory'; | |||||
import { getPdlAutoReport, getPdList } from '@/api/core/monitoring/auto' | |||||
// import jsPDF from 'jspdf' | |||||
// import html2canvas from 'html2canvas' | |||||
// 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' | ||||
const tableData1 = [ | |||||
{ | |||||
date: '2016-05-03', | |||||
name: 'fom', | |||||
address: 'No' | |||||
}, | |||||
{ | |||||
date: '2016-05-02', | |||||
name: 'fom', | |||||
address: '189' | |||||
}, | |||||
{ | |||||
date: '2016-0225-03', | |||||
name: 'fom', | |||||
address: 'Ndddo' | |||||
}, | |||||
{ | |||||
date: '2016-04445-02', | |||||
name: 'fom', | |||||
address: '18edd9' | |||||
} | |||||
] | |||||
const tableProps = [ | const tableProps = [ | ||||
{ | { | ||||
prop: 'code', | |||||
prop: 'reportType', | |||||
label: '报表类型', | label: '报表类型', | ||||
align: 'center', | |||||
align: 'center' | |||||
}, | }, | ||||
{ | { | ||||
prop: 'createTime', | |||||
prop: 'reportStartTime', | |||||
label: '统计开始时间', | label: '统计开始时间', | ||||
align: 'center', | align: 'center', | ||||
filter: parseTime, | filter: parseTime, | ||||
}, | }, | ||||
{ | { | ||||
prop: 'createTime3', | |||||
prop: 'reportEndTime', | |||||
label: '统计结束时间', | label: '统计结束时间', | ||||
align: 'center', | align: 'center', | ||||
filter: parseTime, | filter: parseTime, | ||||
}, | }, | ||||
{ | { | ||||
prop: 'name', | |||||
prop: 'proLineName', | |||||
label: '产线名称', | label: '产线名称', | ||||
align: 'center', | align: 'center', | ||||
}, | }, | ||||
{ | { | ||||
prop: 'address', | |||||
prop: 'inputNum', | |||||
label: '投入数量/片', | label: '投入数量/片', | ||||
align: 'center', | align: 'center', | ||||
}, | }, | ||||
{ | { | ||||
prop: 'remark44', | |||||
prop: 'outputNum', | |||||
label: '产出数量/片', | label: '产出数量/片', | ||||
align: 'center', | align: 'center', | ||||
}, | }, | ||||
{ | { | ||||
prop: 'remark23', | |||||
prop: 'outputArea', | |||||
label: '产出面积/㎡', | label: '产出面积/㎡', | ||||
align: 'center', | align: 'center', | ||||
}, | }, | ||||
{ | { | ||||
prop: 'remark145', | |||||
prop: 'lossNum', | |||||
label: '损耗数量/片', | label: '损耗数量/片', | ||||
align: 'center', | align: 'center', | ||||
}, | }, | ||||
{ | { | ||||
prop: 'remark22', | |||||
prop: 'lossArea', | |||||
label: '损耗面积/㎡', | label: '损耗面积/㎡', | ||||
align: 'center', | align: 'center', | ||||
}, | }, | ||||
{ | { | ||||
prop: 'remark1', | |||||
prop: 'lossRatio', | |||||
label: '损耗比例%', | label: '损耗比例%', | ||||
align: 'center', | align: 'center', | ||||
} | } | ||||
@@ -135,16 +139,8 @@ export default { | |||||
data() { | data() { | ||||
return { | return { | ||||
urlOptions: { | urlOptions: { | ||||
getDataListURL: getFactoryPage, | |||||
exportURL: exportFactoryExcel, | |||||
getDataListURL: getPdlAutoReport | |||||
}, | }, | ||||
urlOptions: { | |||||
getDataListURL: '', | |||||
deleteURL: '', | |||||
statusUrl: '', | |||||
exportURL: '' | |||||
}, | |||||
tableData1, | |||||
listQuery: { | listQuery: { | ||||
pageSize: 10, | pageSize: 10, | ||||
pageNo: 1, | pageNo: 1, | ||||
@@ -152,10 +148,12 @@ export default { | |||||
}, | }, | ||||
exportLoading: false, | exportLoading: false, | ||||
dataListLoading: false, | dataListLoading: false, | ||||
dialogVisible: false, | |||||
addOrEditTitle: '', | addOrEditTitle: '', | ||||
addOrUpdateVisible: false, | addOrUpdateVisible: false, | ||||
tableProps, | tableProps, | ||||
tableBtn: [], | tableBtn: [], | ||||
selectedList: [], | |||||
// tableBtn: [ | // tableBtn: [ | ||||
// this.$auth.hasPermi(`base:factory:update`) | // this.$auth.hasPermi(`base:factory:update`) | ||||
// ? { | // ? { | ||||
@@ -181,8 +179,21 @@ export default { | |||||
{ | { | ||||
type: 'select', | type: 'select', | ||||
label: '报表类型', | label: '报表类型', | ||||
selectOptions: [], | |||||
param: 'name', | |||||
selectOptions: [ | |||||
{ | |||||
id: 1, | |||||
name: '日' | |||||
}, | |||||
{ | |||||
id: 2, | |||||
name: '周' | |||||
}, | |||||
{ | |||||
id: 3, | |||||
name: '月' | |||||
} | |||||
], | |||||
param: 'reportType', | |||||
}, | }, | ||||
{ | { | ||||
type: 'datePicker', | type: 'datePicker', | ||||
@@ -216,16 +227,63 @@ export default { | |||||
], | ], | ||||
}; | }; | ||||
}, | }, | ||||
created() {}, | |||||
created() { | |||||
this.getDataList() | |||||
this.getPdLineList() | |||||
}, | |||||
methods: { | methods: { | ||||
exportPdf() { | |||||
this.pdf() | |||||
this.dialogVisible = false | |||||
}, | |||||
exportXlsx() { | |||||
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) { | |||||
// }) | |||||
// }, | |||||
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) { | |||||
this.$confirm('确认关闭?') | |||||
.then(_ => { | |||||
done(); | |||||
}) | |||||
.catch(_ => {}); | |||||
}, | |||||
down() { | down() { | ||||
//选中导出时可更改此处数组 | |||||
const selectedData = this.tableData1.slice(0, 2) | |||||
console.log('你好', selectedData, this.tableData1) | |||||
//选中导出时可更改此处数组 选中的数组 | |||||
//构建导出的表格数据 | //构建导出的表格数据 | ||||
const exportData = [ | const exportData = [ | ||||
{date: '日期', name: '姓名', address: '地址'}, | |||||
...selectedData | |||||
{reportType: '报表类型', reportStartTime: '统计开始时间', reportEndTime: '统计结束时间', proLineName: '产线名称', inputNum: '投入数量/片', outputNum: '产出数量/片', outputArea: '产出面积/㎡', lossNum: '损耗数量/片', lossArea: '损耗面积/㎡', lossRatio: '损耗比例%' }, | |||||
...this.selectedList | |||||
] | ] | ||||
//注意表格上绑定id, 获取dom元素 | //注意表格上绑定id, 获取dom元素 | ||||
const worksheet = XLSX.utils.json_to_sheet(exportData, { skipHeader: true }) | const worksheet = XLSX.utils.json_to_sheet(exportData, { skipHeader: true }) | ||||
@@ -233,7 +291,7 @@ export default { | |||||
XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1") | XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1") | ||||
const workbookOutput = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' }) | const workbookOutput = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' }) | ||||
try { | try { | ||||
FileSaver.saveAs(new Blob([workbookOutput], { type: 'application/octet-stream' }), 'hihi.xlsx') | |||||
FileSaver.saveAs(new Blob([workbookOutput], { type: 'application/octet-stream' }), '产线统计自动报表.xlsx') | |||||
} catch (e) { | } catch (e) { | ||||
console.log(e) | console.log(e) | ||||
} | } | ||||
@@ -241,14 +299,22 @@ export default { | |||||
selectChange(val) { | selectChange(val) { | ||||
console.log(val) | console.log(val) | ||||
this.selectedList = val | this.selectedList = val | ||||
console.log('勾选数据', this.selectedList) | |||||
}, | }, | ||||
getPdLineList() { | |||||
getPdList().then((res) => { | |||||
this.formConfig[0].selectOptions = res.data || [] | |||||
}) | |||||
}, | |||||
buttonClick(val) { | buttonClick(val) { | ||||
switch (val.btnName) { | switch (val.btnName) { | ||||
case 'search': | case 'search': | ||||
this.listQuery.pageNo = 1; | this.listQuery.pageNo = 1; | ||||
this.listQuery.pageSize = 10; | this.listQuery.pageSize = 10; | ||||
this.listQuery.name = val.name; | |||||
this.listQuery.code = val.code; | |||||
this.listQuery.lineId = val.line ? val.line : undefined; | |||||
this.listQuery.reportType = val.reportType ? val.reportType : undefined; | |||||
this.listQuery.reportStartTime = [new Date(val.timeVal[0]).getTime()]; | |||||
this.listQuery.reportEndTime = [new Date(val.timeVal[1]).getTime()]; | |||||
this.getDataList(); | this.getDataList(); | ||||
break; | break; | ||||
case 'export': | case 'export': | ||||
@@ -262,7 +328,10 @@ 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; | |||||
this.tableData = response.data.list.map(item => { | |||||
item.reportType = item.reportType === 1 ? '日' : item.reportType === 2 ? '周' : '月' | |||||
return item | |||||
}); | |||||
this.total = response.data.total; | this.total = response.data.total; | ||||
this.dataListLoading = false; | this.dataListLoading = false; | ||||
}); | }); | ||||
@@ -279,17 +348,15 @@ export default { | |||||
this.getDataList(); | this.getDataList(); | ||||
}, | }, | ||||
handleExport() { | handleExport() { | ||||
// 处理查询参数 | |||||
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(() => { }); | |||||
if (this.selectedList.length === 0) { | |||||
this.selectedList = this.tableData | |||||
} | |||||
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-08-31 15:15:31 | |||||
* @LastEditTime: 2023-09-16 17:42:37 | |||||
* @LastEditors: DY | * @LastEditors: DY | ||||
* @Description: | * @Description: | ||||
--> | --> | ||||
@@ -33,50 +33,65 @@ | |||||
: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 | |||||
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 { | |||||
getFactoryPage, | |||||
exportFactoryExcel, | |||||
} from '@/api/core/base/factory'; | |||||
import { getPdlDataSearch, getPdList } from '@/api/core/monitoring/data' | |||||
import * as XLSX from 'xlsx' | |||||
import FileSaver from 'file-saver' | |||||
const tableProps = [ | const tableProps = [ | ||||
{ | { | ||||
prop: 'name', | |||||
label: '产线名称', | |||||
align: 'center', | |||||
prop: 'proLineName', | |||||
label: '产线名称' | |||||
}, | }, | ||||
{ | { | ||||
prop: 'address', | |||||
label: '投入数量/片', | |||||
align: 'center', | |||||
prop: 'inputNum', | |||||
label: '投入数量/片' | |||||
}, | }, | ||||
{ | { | ||||
prop: 'remark44', | |||||
label: '产出数量/片', | |||||
align: 'center', | |||||
prop: 'outputNum', | |||||
label: '产出数量/片' | |||||
}, | }, | ||||
{ | { | ||||
prop: 'remark23', | |||||
label: '产出面积/㎡', | |||||
align: 'center', | |||||
prop: 'outputArea', | |||||
label: '产出面积/㎡' | |||||
}, | }, | ||||
{ | { | ||||
prop: 'remark145', | |||||
label: '损耗数量/片', | |||||
align: 'center', | |||||
prop: 'lossNum', | |||||
label: '损耗数量/片' | |||||
}, | }, | ||||
{ | { | ||||
prop: 'remark22', | |||||
label: '损耗面积/㎡', | |||||
align: 'center', | |||||
prop: 'lossArea', | |||||
label: '损耗面积/㎡' | |||||
}, | }, | ||||
{ | { | ||||
prop: 'remark1', | |||||
label: '损耗比例%', | |||||
align: 'center', | |||||
prop: 'lossRate', | |||||
label: '损耗比例%' | |||||
} | } | ||||
]; | ]; | ||||
@@ -84,28 +99,24 @@ export default { | |||||
data() { | data() { | ||||
return { | return { | ||||
urlOptions: { | urlOptions: { | ||||
getDataListURL: getFactoryPage, | |||||
exportURL: exportFactoryExcel, | |||||
getDataListURL: getPdlDataSearch | |||||
}, | }, | ||||
urlOptions: { | |||||
getDataListURL: '', | |||||
deleteURL: '', | |||||
statusUrl: '', | |||||
exportURL: '' | |||||
}, | |||||
tableData: [], | tableData: [], | ||||
listQuery: { | listQuery: { | ||||
pageSize: 10, | pageSize: 10, | ||||
pageNo: 1, | pageNo: 1, | ||||
total: 1, | total: 1, | ||||
proLineId: undefined | |||||
}, | }, | ||||
exportLoading: false, | exportLoading: false, | ||||
dataListLoading: false, | dataListLoading: false, | ||||
dialogVisible: false, | |||||
addOrEditTitle: '', | addOrEditTitle: '', | ||||
addOrUpdateVisible: false, | addOrUpdateVisible: false, | ||||
tableProps, | tableProps, | ||||
tableBtn: [], | tableBtn: [], | ||||
tableData: [], | tableData: [], | ||||
selectedList: [], | |||||
formConfig: [ | formConfig: [ | ||||
{ | { | ||||
type: 'select', | type: 'select', | ||||
@@ -145,8 +156,57 @@ export default { | |||||
], | ], | ||||
}; | }; | ||||
}, | }, | ||||
created() {}, | |||||
created() { | |||||
this.getDataList() | |||||
this.getPdLineList() | |||||
}, | |||||
methods: { | 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 || [] | |||||
}) | |||||
}, | |||||
selectChange(val) { | selectChange(val) { | ||||
console.log(val) | console.log(val) | ||||
this.selectedList = val | this.selectedList = val | ||||
@@ -156,8 +216,9 @@ export default { | |||||
case 'search': | case 'search': | ||||
this.listQuery.pageNo = 1; | this.listQuery.pageNo = 1; | ||||
this.listQuery.pageSize = 10; | this.listQuery.pageSize = 10; | ||||
this.listQuery.name = val.name; | |||||
this.listQuery.code = val.code; | |||||
this.listQuery.proLineId = val.line ? val.line : undefined; | |||||
this.listQuery.startTime = val.timeVal ? new Date(val.timeVal[0]).getTime() : undefined; | |||||
this.listQuery.endTime = val.timeVal ? new Date(val.timeVal[1]).getTime() : undefined; | |||||
this.getDataList(); | this.getDataList(); | ||||
break; | break; | ||||
case 'export': | case 'export': | ||||
@@ -171,7 +232,7 @@ 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; | |||||
this.tableData = response.data; | |||||
this.total = response.data.total; | this.total = response.data.total; | ||||
this.dataListLoading = false; | this.dataListLoading = false; | ||||
}); | }); | ||||
@@ -188,17 +249,21 @@ export default { | |||||
this.getDataList(); | this.getDataList(); | ||||
}, | }, | ||||
handleExport() { | 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(() => { }); | |||||
} | } | ||||
}, | }, | ||||
}; | }; | ||||
@@ -0,0 +1,207 @@ | |||||
<!-- | |||||
filename: index.vue | |||||
author: liubin | |||||
date: 2023-08-04 14:44:58 | |||||
description: 设备24小时生产记录 | |||||
--> | |||||
<template> | |||||
<div class="app-container"> | |||||
<SearchBar | |||||
:formConfigs="[{ label: '设备近24小时产线生产数据', type: 'title' }]" | |||||
ref="search-bar" /> | |||||
<el-skeleton v-if="initing" :rows="6" animated /> | |||||
<base-table | |||||
v-else | |||||
:span-method="mergeColumnHandler" | |||||
:table-props="tableProps" | |||||
:table-data="tableData" | |||||
@emitFun="handleEmitFun"></base-table> | |||||
<!-- :page="queryParams.pageNo" | |||||
:limit="queryParams.pageSize" --> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import { getPdlDataOneDay } from '@/api/core/monitoring/data24' | |||||
export default { | |||||
name: 'productionLineData24', | |||||
components: {}, | |||||
props: {}, | |||||
data() { | |||||
return { | |||||
urlOptions: { | |||||
getDataListURL: getPdlDataOneDay | |||||
}, | |||||
initing: false, | |||||
queryParams: { | |||||
pageNo: 1, | |||||
pageSize: 10, | |||||
}, | |||||
list: [], | |||||
arr: [], | |||||
spanArr: [], | |||||
timeList: [], | |||||
tableData: [], | |||||
tableProps: [], | |||||
spanInfo: {}, | |||||
}; | |||||
}, | |||||
computed: {}, | |||||
mounted() { | |||||
this.getList(); | |||||
}, | |||||
methods: { | |||||
/** 构建tableProps - 依据第一个元素所提供的信息 */ | |||||
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 = 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) { | |||||
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) { | |||||
this.convertList(data); | |||||
}, | |||||
/** 合并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]; | |||||
} | |||||
} | |||||
}, | |||||
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 = this.res.data; | |||||
// // console.log('recent-24', data); | |||||
// this.initing = true; | |||||
// this.queryParams.pageSize = this.list.length; | |||||
// setTimeout(() => { | |||||
// this.initing = false; | |||||
// }, 1000); | |||||
}, | |||||
handleEmitFun(payload) { | |||||
console.log('payload', payload); | |||||
}, | |||||
}, | |||||
}; | |||||
</script> | |||||
<style scoped lang="scss"> | |||||
::-webkit-scrollbar { | |||||
display: none; | |||||
} | |||||
pre { | |||||
margin: 10px; | |||||
background: #f6f8faf6; | |||||
border: 1px solid #e1e4e8; | |||||
padding: 12px; | |||||
border-radius: 12px; | |||||
position: fixed; | |||||
// top: 15vh; | |||||
top: 10vh; | |||||
left: 0; | |||||
max-height: 80vh; | |||||
overflow-y: auto; | |||||
z-index: 100000; | |||||
box-shadow: 0 0 32px 12px #0001; | |||||
} | |||||
code { | |||||
font-family: 'IntelOne Mono', 'Ubuntu', 'Courier New', Courier, monospace; | |||||
} | |||||
</style> |
@@ -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-08-31 15:31:40 | |||||
* @LastEditTime: 2023-09-16 17:41:53 | |||||
* @LastEditors: DY | * @LastEditors: DY | ||||
* @Description: | * @Description: | ||||
--> | --> | ||||
@@ -9,6 +9,7 @@ | |||||
<div class="app-container"> | <div class="app-container"> | ||||
<search-bar | <search-bar | ||||
:formConfigs="formConfig" | :formConfigs="formConfig" | ||||
:isFold="true" | |||||
ref="searchBarForm" | ref="searchBarForm" | ||||
@headBtnClick="buttonClick" /> | @headBtnClick="buttonClick" /> | ||||
<base-table | <base-table | ||||
@@ -33,73 +34,88 @@ | |||||
: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 | |||||
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 { parseTime } from '../../mixins/code-filter'; | import { parseTime } from '../../mixins/code-filter'; | ||||
import { | |||||
getFactoryPage, | |||||
exportFactoryExcel, | |||||
} from '@/api/core/base/factory'; | |||||
import { getWorkshopSectionList, getPdList, getSectionAutoReport } from '@/api/core/monitoring/sectionStatistics' | |||||
import * as XLSX from 'xlsx' | |||||
import FileSaver from 'file-saver' | |||||
const tableProps = [ | const tableProps = [ | ||||
{ | { | ||||
prop: 'code', | |||||
label: '产线类型', | |||||
align: 'center', | |||||
prop: 'reportType', | |||||
label: '产线类型' | |||||
}, | }, | ||||
{ | { | ||||
prop: 'createTime', | |||||
prop: 'reportStartTime', | |||||
label: '统计开始时间', | label: '统计开始时间', | ||||
align: 'center', | |||||
filter: parseTime, | filter: parseTime, | ||||
}, | }, | ||||
{ | { | ||||
prop: 'createTime3', | |||||
prop: 'reportEndTime', | |||||
label: '统计结束时间', | label: '统计结束时间', | ||||
align: 'center', | |||||
filter: parseTime, | filter: parseTime, | ||||
}, | }, | ||||
{ | { | ||||
prop: 'name', | |||||
label: '产线名称', | |||||
align: 'center', | |||||
prop: 'lineName', | |||||
label: '产线名称' | |||||
}, | }, | ||||
{ | { | ||||
prop: 'name1', | |||||
label: '工段名称', | |||||
align: 'center', | |||||
prop: 'sectionName', | |||||
label: '工段名称' | |||||
}, | }, | ||||
{ | { | ||||
prop: 'address', | |||||
label: '投入数量/片', | |||||
align: 'center', | |||||
prop: 'inputNum', | |||||
label: '投入数量/片' | |||||
}, | }, | ||||
{ | { | ||||
prop: 'remark44', | |||||
label: '产出数量/片', | |||||
align: 'center', | |||||
prop: 'outputNum', | |||||
label: '产出数量/片' | |||||
}, | }, | ||||
{ | { | ||||
prop: 'remark23', | |||||
label: '产出面积/㎡', | |||||
align: 'center', | |||||
prop: 'outputArea', | |||||
label: '产出面积/㎡' | |||||
}, | }, | ||||
{ | { | ||||
prop: 'remark145', | |||||
label: '损耗数量/片', | |||||
align: 'center', | |||||
prop: 'lossNum', | |||||
label: '损耗数量/片' | |||||
}, | }, | ||||
{ | { | ||||
prop: 'remark22', | |||||
label: '损耗面积/㎡', | |||||
align: 'center', | |||||
prop: 'lossArea', | |||||
label: '损耗面积/㎡' | |||||
}, | }, | ||||
{ | { | ||||
prop: 'remark1', | |||||
label: '损耗比例%', | |||||
align: 'center', | |||||
prop: 'lossRatio', | |||||
label: '损耗比例%' | |||||
} | } | ||||
]; | ]; | ||||
@@ -107,15 +123,8 @@ export default { | |||||
data() { | data() { | ||||
return { | return { | ||||
urlOptions: { | urlOptions: { | ||||
getDataListURL: getFactoryPage, | |||||
exportURL: exportFactoryExcel, | |||||
getDataListURL: getSectionAutoReport | |||||
}, | }, | ||||
urlOptions: { | |||||
getDataListURL: '', | |||||
deleteURL: '', | |||||
statusUrl: '', | |||||
exportURL: '' | |||||
}, | |||||
tableData: [], | tableData: [], | ||||
listQuery: { | listQuery: { | ||||
pageSize: 10, | pageSize: 10, | ||||
@@ -124,6 +133,8 @@ export default { | |||||
}, | }, | ||||
exportLoading: false, | exportLoading: false, | ||||
dataListLoading: false, | dataListLoading: false, | ||||
selectedList: [], | |||||
dialogVisible: false, | |||||
addOrEditTitle: '', | addOrEditTitle: '', | ||||
addOrUpdateVisible: false, | addOrUpdateVisible: false, | ||||
tableProps, | tableProps, | ||||
@@ -145,8 +156,21 @@ export default { | |||||
{ | { | ||||
type: 'select', | type: 'select', | ||||
label: '报表类型', | label: '报表类型', | ||||
selectOptions: [], | |||||
param: 'name', | |||||
selectOptions: [ | |||||
{ | |||||
id: 1, | |||||
name: '日' | |||||
}, | |||||
{ | |||||
id: 2, | |||||
name: '周' | |||||
}, | |||||
{ | |||||
id: 3, | |||||
name: '月' | |||||
} | |||||
], | |||||
param: 'reportType', | |||||
}, | }, | ||||
{ | { | ||||
type: 'datePicker', | type: 'datePicker', | ||||
@@ -158,8 +182,7 @@ export default { | |||||
startPlaceholder: '开始时间', | startPlaceholder: '开始时间', | ||||
endPlaceholder: '结束时间', | endPlaceholder: '结束时间', | ||||
param: 'timeVal', | param: 'timeVal', | ||||
defaultSelect: [], | |||||
width: 350 | |||||
defaultSelect: [] | |||||
}, | }, | ||||
{ | { | ||||
type: 'button', | type: 'button', | ||||
@@ -180,8 +203,61 @@ export default { | |||||
], | ], | ||||
}; | }; | ||||
}, | }, | ||||
created() {}, | |||||
created() { | |||||
this.getDataList() | |||||
this.getPdLineList() | |||||
}, | |||||
methods: { | 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 || [] | |||||
}) | |||||
// 获取工段list | |||||
getWorkshopSectionList().then((res) => { | |||||
this.formConfig[1].selectOptions = res.data || [] | |||||
}) | |||||
}, | |||||
selectChange(val) { | selectChange(val) { | ||||
console.log(val) | console.log(val) | ||||
this.selectedList = val | this.selectedList = val | ||||
@@ -191,8 +267,11 @@ export default { | |||||
case 'search': | case 'search': | ||||
this.listQuery.pageNo = 1; | this.listQuery.pageNo = 1; | ||||
this.listQuery.pageSize = 10; | this.listQuery.pageSize = 10; | ||||
this.listQuery.name = val.name; | |||||
this.listQuery.code = val.code; | |||||
this.listQuery.lineId = val.line ? val.line : undefined; | |||||
this.listQuery.sectionId = val.section ? val.section : undefined; | |||||
this.listQuery.reportType = val.reportType ? val.reportType : undefined; | |||||
this.listQuery.reportStartTime = [new Date(val.timeVal[0]).getTime()]; | |||||
this.listQuery.reportEndTime = [new Date(val.timeVal[1]).getTime()]; | |||||
this.getDataList(); | this.getDataList(); | ||||
break; | break; | ||||
case 'export': | case 'export': | ||||
@@ -206,7 +285,10 @@ 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; | |||||
this.tableData = response.data.list.map(item => { | |||||
item.reportType = item.reportType === 1 ? '日' : item.reportType === 2 ? '周' : '月' | |||||
return item | |||||
}); | |||||
this.total = response.data.total; | this.total = response.data.total; | ||||
this.dataListLoading = false; | this.dataListLoading = false; | ||||
}); | }); | ||||
@@ -223,17 +305,21 @@ export default { | |||||
this.getDataList(); | this.getDataList(); | ||||
}, | }, | ||||
handleExport() { | 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(() => { }); | |||||
} | } | ||||
}, | }, | ||||
}; | }; | ||||