mt-fe-group/yudao-dev
12
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

dy #25

Merged
gtz217 merged 3 commits from dy into test 2023-09-16 18:00:34 +08:00
Conversation 0 Commits 3 Files Changed 12 +809 -232
12 changed files with 809 additions and 232 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.env.dev
View File

@ -1,8 +1,8 @@
### ###
# @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 # @LastEditTime: 2023-09-16 09:41:07
# @LastEditors: zhp # @LastEditors: DY
# @Description: # @Description:
### ###
# 开发环境配置 # 开发环境配置
@ -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

2
package.json
View File

@ -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",

25
src/api/core/monitoring/auto.js Normal file
View File

@ -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'
})
}

25
src/api/core/monitoring/data.js Normal file
View File

@ -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'
})
}

17
src/api/core/monitoring/data24.js Normal file
View File

@ -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
})
}

33
src/api/core/monitoring/sectionStatistics.js Normal file
View File

@ -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'
})
}

109
src/views/core/analysis/balanceAnalysis/index.vue
View File

@ -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.lineId = '1672847052717821953'
this.listQuery.startTime = '1693497600000'; // this.listQuery.startTime = '1693497600000';
this.listQuery.endTime = '1693843200000'; // 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); let tempData = []
eqArr.push(ele.equName) 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
}
}) })
console.log(eqArr) })
// console.log(res.data.nameData.slice(1)) tempData['equName'] = ele.equName
tempData['sectionName'] = ele.sectionName
this.tableData.push(tempData)
const { sectionName } = tempData
sectionArr.push(sectionName)
})
this.setRowSpan(sectionArr)
console.log('工段名称列表', sectionArr)
res.data.nameData.forEach(item => { res.data.nameData.forEach(item => {
if (eqArr[0] === item.parentId) { this.timeList.push(item.name)
const props = {
'prop': item.name,
'label': item.name,
'align': 'center'
}
}
arr[2].children.push(props)
}) })
let obj = { const timeArray = Array.from(new Set(this.timeList))
lineName: res.data.data[0].lineName, for (const times of timeArray) {
sum: res.data.data[0].sum, 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 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':

9
src/views/core/mixins/code-filter.js
View File

@ -1,8 +1,8 @@
/* /*
* @Date: 2020-12-29 16:49:28 * @Date: 2020-12-29 16:49:28
* @LastEditors: zwq * @LastEditors: DY
* @LastEditTime: 2023-08-01 11:10:04 * @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: '月'
}
} }
// 日期格式化 // 日期格式化

225
src/views/core/monitoring/auto/index.vue
View File

@ -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" /> @pagination="getDataList"
<!-- <div> />
<el-button @click="down()">1111</el-button> <!-- <div v-show="false" ref="pdf">
<el-table :data="tableData1" stripe style="width: 100%"> <base-table
<el-table-column prop="date" label="日期" width="180" /> v-loading="dataListLoading"
<el-table-column prop="name" label="姓名" /> :table-props="tableProps"
<el-table-column prop="address" label="地址" /> :page="listQuery.pageNo"
</el-table> :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 { import { getPdlAutoReport, getPdList } from '@/api/core/monitoring/auto'
getFactoryPage, // import jsPDF from 'jspdf'
exportFactoryExcel, // import html2canvas from 'html2canvas'
} from '@/api/core/base/factory'; // 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, getDataListURL: getPdlAutoReport
exportURL: exportFactoryExcel,
}, },
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: [], selectOptions: [
param: 'name', {
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: '地址'}, {reportType: '报表类型', reportStartTime: '统计开始时间', reportEndTime: '统计结束时间', proLineName: '产线名称', inputNum: '投入数量/片', outputNum: '产出数量/片', outputArea: '产出面积/㎡', lossNum: '损耗数量/片', lossArea: '损耗面积/㎡', lossRatio: '损耗比例%' },
...selectedData ...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.lineId = val.line ? val.line : undefined;
this.listQuery.code = val.code; 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() {
// 处理查询参数 if (this.selectedList.length === 0) {
let params = { ...this.queryParams }; this.selectedList = this.tableData
params.pageNo = undefined; }
params.pageSize = undefined; this.dialogVisible = true
this.$modal.confirm('是否确认导出所有数据项?').then(() => { // this.$modal.confirm('是否确认导出所选数据项?').then(() => {
this.exportLoading = true; // this.exportLoading = true;
return this.urlOptions.exportURL(params); // // this.down()
}).then(response => { // this.pdf()
this.$download.excel(response, '工厂.xls'); // }).catch(() => { });
this.exportLoading = false;
}).catch(() => { });
} }
}, },
}; };

161
src/views/core/monitoring/data/index.vue
View File

@ -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 { import { getPdlDataSearch, getPdList } from '@/api/core/monitoring/data'
getFactoryPage, import * as XLSX from 'xlsx'
exportFactoryExcel, import FileSaver from 'file-saver'
} from '@/api/core/base/factory';
const tableProps = [ const tableProps = [
{ {
prop: 'name', prop: 'proLineName',
label: '产线名称', label: '产线名称'
align: 'center',
}, },
{ {
prop: 'address', prop: 'inputNum',
label: '投入数量/片', label: '投入数量/片'
align: 'center',
}, },
{ {
prop: 'remark44', prop: 'outputNum',
label: '产出数量/片', label: '产出数量/片'
align: 'center',
}, },
{ {
prop: 'remark23', prop: 'outputArea',
label: '产出面积/㎡', label: '产出面积/㎡'
align: 'center',
}, },
{ {
prop: 'remark145', prop: 'lossNum',
label: '损耗数量/片', label: '损耗数量/片'
align: 'center',
}, },
{ {
prop: 'remark22', prop: 'lossArea',
label: '损耗面积/㎡', label: '损耗面积/㎡'
align: 'center',
}, },
{ {
prop: 'remark1', prop: 'lossRate',
label: '损耗比例%', label: '损耗比例%'
align: 'center',
} }
]; ];
@ -84,28 +99,24 @@ export default {
data() { data() {
return { return {
urlOptions: { urlOptions: {
getDataListURL: getFactoryPage, getDataListURL: getPdlDataSearch
exportURL: exportFactoryExcel,
},
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.proLineId = val.line ? val.line : undefined;
this.listQuery.code = val.code; 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 }; // let params = { ...this.queryParams };
params.pageNo = undefined; // params.pageNo = undefined;
params.pageSize = undefined; // params.pageSize = undefined;
this.$modal.confirm('是否确认导出所有数据项?').then(() => { // this.$modal.confirm('是否确认导出所有数据项?').then(() => {
this.exportLoading = true; // this.exportLoading = true;
return this.urlOptions.exportURL(params); // return this.urlOptions.exportURL(params);
}).then(response => { // }).then(response => {
this.$download.excel(response, '工厂.xls'); // this.$download.excel(response, '工厂.xls');
this.exportLoading = false; // this.exportLoading = false;
}).catch(() => { }); // }).catch(() => { });
} }
}, },
}; };

207
src/views/core/monitoring/data24/index.vue Normal file
View File

@ -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>

210
src/views/core/monitoring/sectionStatistics/index.vue
View File

@ -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 { import { getWorkshopSectionList, getPdList, getSectionAutoReport } from '@/api/core/monitoring/sectionStatistics'
getFactoryPage, import * as XLSX from 'xlsx'
exportFactoryExcel, import FileSaver from 'file-saver'
} from '@/api/core/base/factory';
const tableProps = [ const tableProps = [
{ {
prop: 'code', prop: 'reportType',
label: '产线类型', label: '产线类型'
align: 'center',
}, },
{ {
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', prop: 'lineName',
label: '产线名称', label: '产线名称'
align: 'center',
}, },
{ {
prop: 'name1', prop: 'sectionName',
label: '工段名称', label: '工段名称'
align: 'center',
}, },
{ {
prop: 'address', prop: 'inputNum',
label: '投入数量/片', label: '投入数量/片'
align: 'center',
}, },
{ {
prop: 'remark44', prop: 'outputNum',
label: '产出数量/片', label: '产出数量/片'
align: 'center',
}, },
{ {
prop: 'remark23', prop: 'outputArea',
label: '产出面积/㎡', label: '产出面积/㎡'
align: 'center',
}, },
{ {
prop: 'remark145', prop: 'lossNum',
label: '损耗数量/片', label: '损耗数量/片'
align: 'center',
}, },
{ {
prop: 'remark22', prop: 'lossArea',
label: '损耗面积/㎡', label: '损耗面积/㎡'
align: 'center',
}, },
{ {
prop: 'remark1', prop: 'lossRatio',
label: '损耗比例%', label: '损耗比例%'
align: 'center',
} }
]; ];
@ -107,14 +123,7 @@ export default {
data() { data() {
return { return {
urlOptions: { urlOptions: {
getDataListURL: getFactoryPage, getDataListURL: getSectionAutoReport
exportURL: exportFactoryExcel,
},
urlOptions: {
getDataListURL: '',
deleteURL: '',
statusUrl: '',
exportURL: ''
}, },
tableData: [], tableData: [],
listQuery: { listQuery: {
@ -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: [], selectOptions: [
param: 'name', {
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: [], defaultSelect: []
width: 350
}, },
{ {
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.lineId = val.line ? val.line : undefined;
this.listQuery.code = val.code; 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 }; // let params = { ...this.queryParams };
params.pageNo = undefined; // params.pageNo = undefined;
params.pageSize = undefined; // params.pageSize = undefined;
this.$modal.confirm('是否确认导出所有数据项?').then(() => { // this.$modal.confirm('是否确认导出所有数据项?').then(() => {
this.exportLoading = true; // this.exportLoading = true;
return this.urlOptions.exportURL(params); // return this.urlOptions.exportURL(params);
}).then(response => { // }).then(response => {
this.$download.excel(response, '工厂.xls'); // this.$download.excel(response, '工厂.xls');
this.exportLoading = false; // this.exportLoading = false;
}).catch(() => { }); // }).catch(() => { });
} }
}, },
}; };