报表
This commit is contained in:
		
							
								
								
									
										1
									
								
								.env.dev
									
									
									
									
									
								
							
							
						
						
									
										1
									
								
								.env.dev
									
									
									
									
									
								
							@@ -13,6 +13,7 @@ VUE_APP_TITLE = MES系统
 | 
			
		||||
 | 
			
		||||
# 芋道管理系统/开发环境
 | 
			
		||||
VUE_APP_BASE_API = 'http://192.168.0.33:48082'
 | 
			
		||||
# VUE_APP_BASE_API = 'http://192.168.1.20:48080'
 | 
			
		||||
 | 
			
		||||
# 积木报表指向地址
 | 
			
		||||
VUE_APP_JIMU_API = 'http://192.168.0.33:48082'
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										45
									
								
								src/api/report/customizedReports.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										45
									
								
								src/api/report/customizedReports.js
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,45 @@
 | 
			
		||||
import request from '@/utils/request'
 | 
			
		||||
// 原片工段数据
 | 
			
		||||
export function originalSection(data) {
 | 
			
		||||
  return request({
 | 
			
		||||
    url: '/extend/customized-reports/originalSection',
 | 
			
		||||
    method: 'post',
 | 
			
		||||
    data: data
 | 
			
		||||
  })
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
// 原片产线数据
 | 
			
		||||
export function getOriginalLine(query) {
 | 
			
		||||
  return request({
 | 
			
		||||
    url: '/extend/customized-reports/getOriginalLine',
 | 
			
		||||
    method: 'get',
 | 
			
		||||
    params: query
 | 
			
		||||
  })
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
// 深加工产线数据
 | 
			
		||||
export function getProcessingLine(query) {
 | 
			
		||||
  return request({
 | 
			
		||||
    url: '/extend/customized-reports/getProcessingLine',
 | 
			
		||||
    method: 'get',
 | 
			
		||||
    params: query
 | 
			
		||||
  })
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
// 深加工工段数据
 | 
			
		||||
export function processing(data) {
 | 
			
		||||
  return request({
 | 
			
		||||
    url: '/extend/customized-reports/processing',
 | 
			
		||||
    method: 'post',
 | 
			
		||||
    data: data
 | 
			
		||||
  })
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
// isra数据记录
 | 
			
		||||
export function israData(data) {
 | 
			
		||||
  return request({
 | 
			
		||||
    url: '/extend/customized-reports/isra',
 | 
			
		||||
    method: 'post',
 | 
			
		||||
    data: data
 | 
			
		||||
  })
 | 
			
		||||
}
 | 
			
		||||
@@ -376,7 +376,7 @@ export default {
 | 
			
		||||
	},
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
<style lang='scss'>
 | 
			
		||||
<style lang="scss">
 | 
			
		||||
.orderMonitoring {
 | 
			
		||||
	.el-tabs__nav::after {
 | 
			
		||||
		content: '';
 | 
			
		||||
@@ -431,4 +431,4 @@ export default {
 | 
			
		||||
		vertical-align: bottom;
 | 
			
		||||
	}
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
</style>
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										437
									
								
								src/views/report/Environmental/sectionProduction/index.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										437
									
								
								src/views/report/Environmental/sectionProduction/index.vue
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,437 @@
 | 
			
		||||
<template>
 | 
			
		||||
	<div class="app-container sectionProductionReport">
 | 
			
		||||
		<!-- 搜索工作栏 -->
 | 
			
		||||
		<search-bar
 | 
			
		||||
			:formConfigs="formConfig"
 | 
			
		||||
			ref="searchBarForm"
 | 
			
		||||
			@headBtnClick="buttonClick" />
 | 
			
		||||
		<base-table
 | 
			
		||||
			class="sectionProductionTable1"
 | 
			
		||||
			:table-props="tableProp"
 | 
			
		||||
			:table-data="tableData"
 | 
			
		||||
			:span-method="objectSpanMethod"
 | 
			
		||||
			:max-height="tableH" />
 | 
			
		||||
		<!-- 搜索工作栏 -->
 | 
			
		||||
		<search-bar
 | 
			
		||||
			style="margin-top: 10px"
 | 
			
		||||
			:formConfigs="formConfig2"
 | 
			
		||||
			ref="searchBarForm"
 | 
			
		||||
			@headBtnClick="buttonClick2" />
 | 
			
		||||
		<base-table
 | 
			
		||||
			class="sectionProductionTable2"
 | 
			
		||||
			:table-props="tableProp2"
 | 
			
		||||
			:table-data="tableData2"
 | 
			
		||||
			:span-method="objectSpanMethod2"
 | 
			
		||||
			:max-height="tableH" />
 | 
			
		||||
	</div>
 | 
			
		||||
</template>
 | 
			
		||||
<script>
 | 
			
		||||
const tableProp1 = [
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'lineName',
 | 
			
		||||
		label: '生产线',
 | 
			
		||||
		width: 110,
 | 
			
		||||
		fixed: true,
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		label: '时间',
 | 
			
		||||
		fixed: true,
 | 
			
		||||
		width: 110,
 | 
			
		||||
		children: [
 | 
			
		||||
			{
 | 
			
		||||
				prop: 'procedure',
 | 
			
		||||
				label: '工序',
 | 
			
		||||
				width: 140,
 | 
			
		||||
			},
 | 
			
		||||
		],
 | 
			
		||||
	},
 | 
			
		||||
];
 | 
			
		||||
import {
 | 
			
		||||
	originalSection,
 | 
			
		||||
	getOriginalLine,
 | 
			
		||||
	getProcessingLine,
 | 
			
		||||
	processing,
 | 
			
		||||
} from '@/api/report/customizedReports';
 | 
			
		||||
import FileSaver from 'file-saver';
 | 
			
		||||
import moment from 'moment';
 | 
			
		||||
export default {
 | 
			
		||||
	name: 'SectionProduction',
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			tableH: this.tableHeight(280) / 2,
 | 
			
		||||
			formConfig: [
 | 
			
		||||
				{
 | 
			
		||||
					type: 'select',
 | 
			
		||||
					label: '生产线',
 | 
			
		||||
					selectOptions: [],
 | 
			
		||||
					param: 'lineId',
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
					type: 'select',
 | 
			
		||||
					label: '时间',
 | 
			
		||||
					selectOptions: [
 | 
			
		||||
						{ id: '1', name: '当前班次' },
 | 
			
		||||
						{ id: '2', name: '近24小时' },
 | 
			
		||||
						{ id: '3', name: '日报' },
 | 
			
		||||
					],
 | 
			
		||||
					defaultSelect: '1',
 | 
			
		||||
					param: 'timeType',
 | 
			
		||||
					clearable: false,
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
					type: 'button',
 | 
			
		||||
					btnName: '查询',
 | 
			
		||||
					name: 'search',
 | 
			
		||||
					color: 'primary',
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
					type: 'separate',
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
					type: 'button',
 | 
			
		||||
					btnName: '导出',
 | 
			
		||||
					name: 'export',
 | 
			
		||||
					plain: true,
 | 
			
		||||
					color: 'primary',
 | 
			
		||||
				},
 | 
			
		||||
			],
 | 
			
		||||
			formConfig2: [
 | 
			
		||||
				{
 | 
			
		||||
					type: 'select',
 | 
			
		||||
					label: '生产线',
 | 
			
		||||
					selectOptions: [],
 | 
			
		||||
					param: 'lineId',
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
					type: 'select',
 | 
			
		||||
					label: '时间',
 | 
			
		||||
					defaultSelect: '1',
 | 
			
		||||
					selectOptions: [
 | 
			
		||||
						{ id: '1', name: '当前班次' },
 | 
			
		||||
						{ id: '2', name: '近24小时' },
 | 
			
		||||
						{ id: '3', name: '日报' },
 | 
			
		||||
					],
 | 
			
		||||
					param: 'timeType',
 | 
			
		||||
					clearable: false,
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
					type: 'button',
 | 
			
		||||
					btnName: '查询',
 | 
			
		||||
					name: 'search',
 | 
			
		||||
					color: 'primary',
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
					type: 'separate',
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
					type: 'button',
 | 
			
		||||
					btnName: '导出',
 | 
			
		||||
					name: 'export',
 | 
			
		||||
					plain: true,
 | 
			
		||||
					color: 'primary',
 | 
			
		||||
				},
 | 
			
		||||
			],
 | 
			
		||||
			queryParams: {
 | 
			
		||||
				startTime: '1706114700000',
 | 
			
		||||
				endTime: '1706190300000',
 | 
			
		||||
				lineId: '',
 | 
			
		||||
			},
 | 
			
		||||
			queryParams2: {
 | 
			
		||||
				startTime: '1706114700000',
 | 
			
		||||
				endTime: '1706190300000',
 | 
			
		||||
				lineId: '',
 | 
			
		||||
			},
 | 
			
		||||
			tableProp1,
 | 
			
		||||
			tableProp: [],
 | 
			
		||||
			tableData: [],
 | 
			
		||||
			tableProp2: [],
 | 
			
		||||
			tableData2: [],
 | 
			
		||||
			procedureName: [
 | 
			
		||||
				{ name: '压延(拉引量t)', ename: 'calenderingCapacity' },
 | 
			
		||||
				{ name: '优化切割(片)', ename: 'cuttingNum' },
 | 
			
		||||
				{ name: '堆垛(片)', ename: 'unloadPieces' },
 | 
			
		||||
				{ name: '堆垛(托)', ename: 'unloadCount' },
 | 
			
		||||
				{ name: '良品率(%)', ename: 'rate' },
 | 
			
		||||
			],
 | 
			
		||||
			span: [], //表2第一列合并
 | 
			
		||||
		};
 | 
			
		||||
	},
 | 
			
		||||
	created() {
 | 
			
		||||
		window.addEventListener('resize', this._setTableHeight);
 | 
			
		||||
	},
 | 
			
		||||
	destroyed() {
 | 
			
		||||
		window.removeEventListener('resize', this._setTableHeight);
 | 
			
		||||
	},
 | 
			
		||||
	mounted() {
 | 
			
		||||
		this.getLine();
 | 
			
		||||
		this.tableProp = this.tableProp1;
 | 
			
		||||
		this.tableProp2 = this.tableProp1;
 | 
			
		||||
		this.getList();
 | 
			
		||||
		this.getList2();
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
		_setTableHeight() {
 | 
			
		||||
			this.tableH = this.tableHeight(280) / 2;
 | 
			
		||||
		},
 | 
			
		||||
		getLine() {
 | 
			
		||||
			getOriginalLine().then((res) => {
 | 
			
		||||
				this.formConfig[0].selectOptions = res.data || [];
 | 
			
		||||
			});
 | 
			
		||||
			getProcessingLine().then((res) => {
 | 
			
		||||
				this.formConfig2[0].selectOptions = res.data || [];
 | 
			
		||||
			});
 | 
			
		||||
		},
 | 
			
		||||
		getList() {
 | 
			
		||||
			// 获取数据
 | 
			
		||||
			originalSection({ ...this.queryParams }).then((res) => {
 | 
			
		||||
				let data = res.data;
 | 
			
		||||
				let timeArr = this.uniqueTime(data, 'timeStr');
 | 
			
		||||
				this.tableProp = [];
 | 
			
		||||
				let arr = [];
 | 
			
		||||
				timeArr.map((item) => {
 | 
			
		||||
					let obj = {};
 | 
			
		||||
					obj.prop = item.timeStr;
 | 
			
		||||
					obj.label = item.timeStr;
 | 
			
		||||
					obj.minWidth = 140;
 | 
			
		||||
					arr.push(obj);
 | 
			
		||||
				});
 | 
			
		||||
				this.tableProp = this.tableProp1.concat(arr); //表头
 | 
			
		||||
				this.transferData(data);
 | 
			
		||||
			});
 | 
			
		||||
		},
 | 
			
		||||
		getTime(val) {
 | 
			
		||||
			switch (val) {
 | 
			
		||||
				case '1':
 | 
			
		||||
					let nowTime = moment().valueOf();
 | 
			
		||||
					let dTime = moment(
 | 
			
		||||
						moment().format('YYYY-MM-DD') + ' 07:00:00'
 | 
			
		||||
					).valueOf();
 | 
			
		||||
					let nTime = moment(
 | 
			
		||||
						moment().format('YYYY-MM-DD') + ' 19:00:00'
 | 
			
		||||
					).valueOf();
 | 
			
		||||
					let fTime =
 | 
			
		||||
						moment(moment().valueOf() - 86400).format('YYYY-MM-DD') +
 | 
			
		||||
						' 19:00:00';
 | 
			
		||||
					console.log(fTime);
 | 
			
		||||
					// if (nowTime >= dTime) {
 | 
			
		||||
					// 	return [dTime, nowTime]
 | 
			
		||||
					// }else if (){
 | 
			
		||||
 | 
			
		||||
					// }
 | 
			
		||||
					break;
 | 
			
		||||
				case '2':
 | 
			
		||||
					break;
 | 
			
		||||
				default:
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
		buttonClick(val) {
 | 
			
		||||
			if (val.btnName === 'search') {
 | 
			
		||||
				this.queryParams.lineId = val.lineId;
 | 
			
		||||
				this.getTime(val.timeType);
 | 
			
		||||
				this.getList();
 | 
			
		||||
			} else {
 | 
			
		||||
				//导出
 | 
			
		||||
				this.exportTable('.sectionProductionTable1', '原片工段数据.xlsx', 0);
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
		//导出表格
 | 
			
		||||
		exportTable(className, fileName, num) {
 | 
			
		||||
			// 处理查询参数
 | 
			
		||||
			var fix = document.querySelectorAll('.el-table__fixed')[num];
 | 
			
		||||
			var table = document.querySelector(className).childNodes[0];
 | 
			
		||||
			var wb;
 | 
			
		||||
			import('xlsx').then((excel) => {
 | 
			
		||||
				if (fix) {
 | 
			
		||||
					wb = excel.utils.table_to_book(table.removeChild(fix));
 | 
			
		||||
					table.appendChild(fix);
 | 
			
		||||
				} else {
 | 
			
		||||
					wb = excel.utils.table_to_book(table);
 | 
			
		||||
				}
 | 
			
		||||
				/* 获取二进制字符串作为输出 */
 | 
			
		||||
				var wbout = excel.write(wb, {
 | 
			
		||||
					bookType: 'xlsx',
 | 
			
		||||
					bookSST: true,
 | 
			
		||||
					type: 'array',
 | 
			
		||||
				});
 | 
			
		||||
				try {
 | 
			
		||||
					FileSaver.saveAs(
 | 
			
		||||
						new Blob([wbout], { type: 'application/octet-stream' }),
 | 
			
		||||
						//设置导出文件名称
 | 
			
		||||
						fileName
 | 
			
		||||
					);
 | 
			
		||||
				} catch (e) {
 | 
			
		||||
					if (typeof console !== 'undefined') console.log(e, wbout);
 | 
			
		||||
				}
 | 
			
		||||
				return wbout;
 | 
			
		||||
			});
 | 
			
		||||
		},
 | 
			
		||||
		transferData(data) {
 | 
			
		||||
			let tempData = [];
 | 
			
		||||
			let lineNum = 0; //第一条产线
 | 
			
		||||
			for (let i = 0; i < data.length; i++) {
 | 
			
		||||
				if (i === 0) {
 | 
			
		||||
					this.procedureName.map((item) => {
 | 
			
		||||
						let obj = {};
 | 
			
		||||
						obj.lineName = data[i].lineName;
 | 
			
		||||
						obj.procedure = item.name;
 | 
			
		||||
						obj[data[i].timeStr] = data[i][item.ename];
 | 
			
		||||
						tempData.push(obj);
 | 
			
		||||
					});
 | 
			
		||||
					lineNum++;
 | 
			
		||||
				} else {
 | 
			
		||||
					if (data[i].lineName === data[i - 1].lineName) {
 | 
			
		||||
						//相同产线,添加列
 | 
			
		||||
						let startNum = 5 * (lineNum - 1);
 | 
			
		||||
						let endNum = 5 * lineNum - 1;
 | 
			
		||||
						for (let k = startNum; k <= endNum; k++) {
 | 
			
		||||
							let str = this.procedureName[k % 5];
 | 
			
		||||
							tempData[k][data[i].timeStr] = data[i][str.ename];
 | 
			
		||||
						}
 | 
			
		||||
					} else {
 | 
			
		||||
						//不同产线,同时添加5行
 | 
			
		||||
						this.procedureName.map((item) => {
 | 
			
		||||
							let obj = {};
 | 
			
		||||
							obj.lineName = data[i].lineName;
 | 
			
		||||
							obj.procedure = item.name;
 | 
			
		||||
							obj[data[i].timeStr] = data[i][item.ename];
 | 
			
		||||
							tempData.push(obj);
 | 
			
		||||
						});
 | 
			
		||||
						lineNum++;
 | 
			
		||||
					}
 | 
			
		||||
				}
 | 
			
		||||
			}
 | 
			
		||||
			this.tableData = tempData;
 | 
			
		||||
		},
 | 
			
		||||
		// 时间去重
 | 
			
		||||
		uniqueTime(arr, prop) {
 | 
			
		||||
			return arr.filter((value, index, self) => {
 | 
			
		||||
				return (
 | 
			
		||||
					self.findIndex((t) => {
 | 
			
		||||
						return t[prop] === value[prop];
 | 
			
		||||
					}) === index
 | 
			
		||||
				);
 | 
			
		||||
			});
 | 
			
		||||
		},
 | 
			
		||||
		// 合并第一列
 | 
			
		||||
		objectSpanMethod({ row, column, rowIndex, columnIndex }) {
 | 
			
		||||
			if (columnIndex === 0) {
 | 
			
		||||
				if (rowIndex % 5 === 0) {
 | 
			
		||||
					return {
 | 
			
		||||
						rowspan: 5,
 | 
			
		||||
						colspan: 1,
 | 
			
		||||
					};
 | 
			
		||||
				} else {
 | 
			
		||||
					return {
 | 
			
		||||
						rowspan: 0,
 | 
			
		||||
						colspan: 0,
 | 
			
		||||
					};
 | 
			
		||||
				}
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
		getList2() {
 | 
			
		||||
			// 获取数据
 | 
			
		||||
			processing({ ...this.queryParams2 }).then((res) => {
 | 
			
		||||
				this.tableData2 = [];
 | 
			
		||||
				let data = res.data;
 | 
			
		||||
				for (let i = 0; i < data.length; i++) {
 | 
			
		||||
					for (let j = 0; j < data[i].productDet.length; j++) {
 | 
			
		||||
						let obj = {};
 | 
			
		||||
						obj.lineName = data[i].lineName;
 | 
			
		||||
						obj.procedure = data[i].productDet[j].name;
 | 
			
		||||
						data[i].productDet[j].data.map((item) => {
 | 
			
		||||
							obj[item.timeStr] = item.input || null;
 | 
			
		||||
						});
 | 
			
		||||
						obj.sum = data[i].productDet[j].allInput;
 | 
			
		||||
						this.tableData2.push(obj);
 | 
			
		||||
					}
 | 
			
		||||
				}
 | 
			
		||||
				let arr = [];
 | 
			
		||||
				let propsArr = data[0].timeStr || [];
 | 
			
		||||
				propsArr.map((t) => {
 | 
			
		||||
					let obj = {};
 | 
			
		||||
					obj.prop = t;
 | 
			
		||||
					obj.label = t;
 | 
			
		||||
					obj.minWidth = 140;
 | 
			
		||||
					arr.push(obj);
 | 
			
		||||
				});
 | 
			
		||||
				arr.push({ prop: 'sum', label: '合计' });
 | 
			
		||||
				this.tableProp2 = this.tableProp1.concat(arr); //表头
 | 
			
		||||
				this.getSpanArr(this.tableData2);
 | 
			
		||||
			});
 | 
			
		||||
		},
 | 
			
		||||
		// 表格2
 | 
			
		||||
		buttonClick2(val) {
 | 
			
		||||
			if (val.btnName === 'search') {
 | 
			
		||||
				this.queryParams2.lineId = val.lineId;
 | 
			
		||||
				this.getList2();
 | 
			
		||||
			} else {
 | 
			
		||||
				this.exportTable('.sectionProductionTable2', '深加工工段数据.xlsx', 1);
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
		// 获取合并行
 | 
			
		||||
		getSpanArr(data) {
 | 
			
		||||
			this.span = [];
 | 
			
		||||
			for (var i = 0; i < data.length; i++) {
 | 
			
		||||
				if (i === 0) {
 | 
			
		||||
					this.span.push(1);
 | 
			
		||||
					this.index = 0;
 | 
			
		||||
				} else {
 | 
			
		||||
					if (data[i].lineName === data[i - 1].lineName) {
 | 
			
		||||
						this.span[this.index] += 1;
 | 
			
		||||
						this.span.push(0);
 | 
			
		||||
					} else {
 | 
			
		||||
						this.span.push(1);
 | 
			
		||||
						this.index = i;
 | 
			
		||||
					}
 | 
			
		||||
				}
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
		objectSpanMethod2({ rowIndex, columnIndex }) {
 | 
			
		||||
			if (columnIndex === 0) {
 | 
			
		||||
				const _row = this.span[rowIndex];
 | 
			
		||||
				return {
 | 
			
		||||
					rowspan: _row,
 | 
			
		||||
					colspan: 1,
 | 
			
		||||
				};
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
<style lang="scss">
 | 
			
		||||
.sectionProductionReport {
 | 
			
		||||
	.el-table thead.is-group tr:first-of-type th:nth-child(2) {
 | 
			
		||||
		border-bottom: none;
 | 
			
		||||
	}
 | 
			
		||||
	.el-table thead.is-group tr:first-of-type th:nth-child(2) div.cell {
 | 
			
		||||
		padding-left: 82px;
 | 
			
		||||
	}
 | 
			
		||||
	.el-table th.el-table__cell {
 | 
			
		||||
		height: 28px;
 | 
			
		||||
	}
 | 
			
		||||
	.el-table thead.is-group tr:first-of-type th:nth-child(2):before {
 | 
			
		||||
		content: '';
 | 
			
		||||
		position: absolute;
 | 
			
		||||
		height: 80px;
 | 
			
		||||
		top: 0;
 | 
			
		||||
		left: 0;
 | 
			
		||||
		background-color: #ebeef5;
 | 
			
		||||
		transform: rotate(-70deg);
 | 
			
		||||
		-webkit-transform-origin: top;
 | 
			
		||||
		transform-origin: top;
 | 
			
		||||
		width: 1px;
 | 
			
		||||
	}
 | 
			
		||||
	.el-table thead.is-group tr:last-of-type th:nth-child(1):before {
 | 
			
		||||
		content: '';
 | 
			
		||||
		position: absolute;
 | 
			
		||||
		height: 67px;
 | 
			
		||||
		top: 0;
 | 
			
		||||
		left: 75px;
 | 
			
		||||
		background-color: #ebeef5;
 | 
			
		||||
		transform: rotate(-70deg);
 | 
			
		||||
		-webkit-transform-origin: top;
 | 
			
		||||
		transform-origin: top;
 | 
			
		||||
		width: 1px;
 | 
			
		||||
	}
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
							
								
								
									
										338
									
								
								src/views/report/qcReport/israLineReport/index.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										338
									
								
								src/views/report/qcReport/israLineReport/index.vue
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,338 @@
 | 
			
		||||
<template>
 | 
			
		||||
	<div class="app-container isra-line-report">
 | 
			
		||||
		<!-- 搜索工作栏 -->
 | 
			
		||||
		<search-bar
 | 
			
		||||
			:formConfigs="formConfig"
 | 
			
		||||
			ref="searchBarForm"
 | 
			
		||||
			@headBtnClick="buttonClick" />
 | 
			
		||||
		<base-table
 | 
			
		||||
			class="israLineReportTable1"
 | 
			
		||||
			:table-props="tableProp"
 | 
			
		||||
			:table-data="tableData"
 | 
			
		||||
			:span-method="objectSpanMethod"
 | 
			
		||||
			:max-height="tableH" />
 | 
			
		||||
	</div>
 | 
			
		||||
</template>
 | 
			
		||||
<script>
 | 
			
		||||
const tableProp1 = [
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'dataStr',
 | 
			
		||||
		label: '日期',
 | 
			
		||||
		width: 110,
 | 
			
		||||
		fixed: true,
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		prop: 'lineName',
 | 
			
		||||
		label: '生产线',
 | 
			
		||||
		width: 110,
 | 
			
		||||
		fixed: true,
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		label: '类型',
 | 
			
		||||
		fixed: true,
 | 
			
		||||
		width: 110,
 | 
			
		||||
		children: [
 | 
			
		||||
			{
 | 
			
		||||
				prop: 'className',
 | 
			
		||||
				label: '班次',
 | 
			
		||||
				width: 140,
 | 
			
		||||
			},
 | 
			
		||||
		],
 | 
			
		||||
	},
 | 
			
		||||
];
 | 
			
		||||
import { israData } from '@/api/report/customizedReports';
 | 
			
		||||
import moment from 'moment';
 | 
			
		||||
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
 | 
			
		||||
import { getOriginalLine } from '@/api/report/customizedReports';
 | 
			
		||||
import FileSaver from 'file-saver';
 | 
			
		||||
export default {
 | 
			
		||||
	name: 'IsraLineReport',
 | 
			
		||||
	mixins: [tableHeightMixin],
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			heightNum: 215,
 | 
			
		||||
			formConfig: [
 | 
			
		||||
				{
 | 
			
		||||
					type: 'datePicker',
 | 
			
		||||
					label: '时间段',
 | 
			
		||||
					dateType: 'daterange',
 | 
			
		||||
					format: 'yyyy-MM-dd',
 | 
			
		||||
					valueFormat: 'yyyy-MM-dd',
 | 
			
		||||
					rangeSeparator: '-',
 | 
			
		||||
					startPlaceholder: '开始时间',
 | 
			
		||||
					endPlaceholder: '结束时间',
 | 
			
		||||
					param: 'timeVal',
 | 
			
		||||
					defaultSelect: [],
 | 
			
		||||
					width: 250,
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
					type: 'select',
 | 
			
		||||
					label: '产线',
 | 
			
		||||
					selectOptions: [],
 | 
			
		||||
					param: 'lineId',
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
					type: 'button',
 | 
			
		||||
					btnName: '查询',
 | 
			
		||||
					name: 'search',
 | 
			
		||||
					color: 'primary',
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
					type: 'separate',
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
					type: 'button',
 | 
			
		||||
					btnName: '导出',
 | 
			
		||||
					name: 'export',
 | 
			
		||||
					plain: true,
 | 
			
		||||
					color: 'primary',
 | 
			
		||||
				},
 | 
			
		||||
			],
 | 
			
		||||
			queryParams: {
 | 
			
		||||
				startTime: '',
 | 
			
		||||
				endTime: '',
 | 
			
		||||
				lineId: '',
 | 
			
		||||
			},
 | 
			
		||||
			tableProp1,
 | 
			
		||||
			tableProp: [],
 | 
			
		||||
			tableData: [],
 | 
			
		||||
			span: [], //表第一列合并
 | 
			
		||||
		};
 | 
			
		||||
	},
 | 
			
		||||
	created() {
 | 
			
		||||
		this.getLine();
 | 
			
		||||
	},
 | 
			
		||||
	mounted() {
 | 
			
		||||
		this.tableProp = this.tableProp1;
 | 
			
		||||
		let start = moment().format('yyyy-MM-DD');
 | 
			
		||||
		let end = moment().format('yyyy-MM-DD');
 | 
			
		||||
		this.formConfig[0].defaultSelect = [start, end];
 | 
			
		||||
		this.queryParams.startTime = moment(start + ' 00:00:00').valueOf();
 | 
			
		||||
		this.queryParams.endTime = moment(end + ' 23:59:59').valueOf();
 | 
			
		||||
		this.getList();
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
		getLine() {
 | 
			
		||||
			getOriginalLine().then((res) => {
 | 
			
		||||
				this.formConfig[1].selectOptions = res.data || [];
 | 
			
		||||
			});
 | 
			
		||||
		},
 | 
			
		||||
		getList() {
 | 
			
		||||
			israData({ ...this.queryParams }).then((res) => {
 | 
			
		||||
				this.tableProp = [];
 | 
			
		||||
				let data = res.data;
 | 
			
		||||
				if (data.length > 0) {
 | 
			
		||||
					let typeArr = data[0].allType;
 | 
			
		||||
					let arr = [];
 | 
			
		||||
					typeArr &&
 | 
			
		||||
						typeArr.map((item) => {
 | 
			
		||||
							let obj = {};
 | 
			
		||||
							obj.prop = item.name;
 | 
			
		||||
							obj.label = item.name;
 | 
			
		||||
							obj.minWidth = 120;
 | 
			
		||||
							arr.push(obj);
 | 
			
		||||
						});
 | 
			
		||||
					this.tableProp = this.tableProp1.concat(arr); //表头
 | 
			
		||||
					this.transformData(data);
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		},
 | 
			
		||||
		transformData(data) {
 | 
			
		||||
			let part1Data = [];
 | 
			
		||||
			let part2Data = [];
 | 
			
		||||
			for (let i = 0; i < data.length; i++) {
 | 
			
		||||
				let obj = {};
 | 
			
		||||
				let arr = [];
 | 
			
		||||
				arr = this.uniqueLine(data[i].allClass, 'lineName');
 | 
			
		||||
				obj.dataStr = data[i].dataStr;
 | 
			
		||||
				obj.dayClass = [];
 | 
			
		||||
				obj.allClass = [];
 | 
			
		||||
				obj.nightClass = [];
 | 
			
		||||
				obj.num = arr.length;
 | 
			
		||||
				arr.length > 0 &&
 | 
			
		||||
					arr.map((item) => {
 | 
			
		||||
						// 白班
 | 
			
		||||
						let dobj = {};
 | 
			
		||||
						dobj.className = '白班';
 | 
			
		||||
						dobj.dataStr = data[i].dataStr;
 | 
			
		||||
						for (let a = 0; a < data[i].dayClass.length; a++) {
 | 
			
		||||
							dobj.lineName = item.lineName;
 | 
			
		||||
							if (item.lineName === data[i].dayClass[a].lineName) {
 | 
			
		||||
								dobj[data[i].dayClass[a].checkType] =
 | 
			
		||||
									data[i].dayClass[a].checkNum;
 | 
			
		||||
							}
 | 
			
		||||
						}
 | 
			
		||||
						obj.dayClass.push(dobj);
 | 
			
		||||
						// 夜班
 | 
			
		||||
						let nobj = {};
 | 
			
		||||
						nobj.className = '夜班';
 | 
			
		||||
						nobj.dataStr = data[i].dataStr;
 | 
			
		||||
						for (let a = 0; a < data[i].nightClass.length; a++) {
 | 
			
		||||
							nobj.lineName = item.lineName;
 | 
			
		||||
							if (item.lineName === data[i].nightClass[a].lineName) {
 | 
			
		||||
								nobj[data[i].nightClass[a].checkType] =
 | 
			
		||||
									data[i].nightClass[a].checkNum;
 | 
			
		||||
							}
 | 
			
		||||
						}
 | 
			
		||||
						obj.nightClass.push(nobj);
 | 
			
		||||
						// 合计
 | 
			
		||||
						let sobj = {};
 | 
			
		||||
						sobj.className = '合计';
 | 
			
		||||
						sobj.dataStr = data[i].dataStr;
 | 
			
		||||
						for (let a = 0; a < data[i].allClass.length; a++) {
 | 
			
		||||
							sobj.lineName = item.lineName;
 | 
			
		||||
							if (item.lineName === data[i].allClass[a].lineName) {
 | 
			
		||||
								sobj[data[i].allClass[a].checkType] =
 | 
			
		||||
									data[i].allClass[a].checkNum;
 | 
			
		||||
							}
 | 
			
		||||
						}
 | 
			
		||||
						obj.allClass.push(sobj);
 | 
			
		||||
					});
 | 
			
		||||
				part1Data.push(obj);
 | 
			
		||||
			}
 | 
			
		||||
			for (let j = 0; j < part1Data.length; j++) {
 | 
			
		||||
				for (let k = 0; k < part1Data[j].num; k++) {
 | 
			
		||||
					part2Data.push(part1Data[j].dayClass[k]);
 | 
			
		||||
					part2Data.push(part1Data[j].nightClass[k]);
 | 
			
		||||
					part2Data.push(part1Data[j].allClass[k]);
 | 
			
		||||
				}
 | 
			
		||||
			}
 | 
			
		||||
			this.tableData = part2Data;
 | 
			
		||||
			this.getSpanArr(this.tableData);
 | 
			
		||||
		},
 | 
			
		||||
		// 产线去重
 | 
			
		||||
		uniqueLine(arr, prop) {
 | 
			
		||||
			return arr.filter((value, index, self) => {
 | 
			
		||||
				return (
 | 
			
		||||
					self.findIndex((t) => {
 | 
			
		||||
						return t[prop] === value[prop];
 | 
			
		||||
					}) === index
 | 
			
		||||
				);
 | 
			
		||||
			});
 | 
			
		||||
		},
 | 
			
		||||
		// 获取合并行
 | 
			
		||||
		getSpanArr(data) {
 | 
			
		||||
			this.span = [];
 | 
			
		||||
			for (var i = 0; i < data.length; i++) {
 | 
			
		||||
				if (i === 0) {
 | 
			
		||||
					this.span.push(1);
 | 
			
		||||
					this.index = 0;
 | 
			
		||||
				} else {
 | 
			
		||||
					if (data[i].dataStr === data[i - 1].dataStr) {
 | 
			
		||||
						this.span[this.index] += 1;
 | 
			
		||||
						this.span.push(0);
 | 
			
		||||
					} else {
 | 
			
		||||
						this.span.push(1);
 | 
			
		||||
						this.index = i;
 | 
			
		||||
					}
 | 
			
		||||
				}
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
		buttonClick(val) {
 | 
			
		||||
			if (val.btnName === 'search') {
 | 
			
		||||
				if (val.timeVal && val.timeVal.length > 0) {
 | 
			
		||||
					this.queryParams.startTime = moment(
 | 
			
		||||
						val.timeVal[0] + ' 00:00:00'
 | 
			
		||||
					).valueOf();
 | 
			
		||||
					this.queryParams.endTime = moment(
 | 
			
		||||
						val.timeVal[1] + ' 23:59:59'
 | 
			
		||||
					).valueOf();
 | 
			
		||||
				}
 | 
			
		||||
				this.queryParams.lineId = val.lineId;
 | 
			
		||||
				this.getList();
 | 
			
		||||
			} else {
 | 
			
		||||
				// 导出
 | 
			
		||||
				this.exportTable();
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
		exportTable() {
 | 
			
		||||
			// 处理查询参数
 | 
			
		||||
			var fix = document.querySelectorAll('.el-table__fixed')[0];
 | 
			
		||||
			var table = document.querySelector('.israLineReportTable1').childNodes[0];
 | 
			
		||||
			var wb;
 | 
			
		||||
			import('xlsx').then((excel) => {
 | 
			
		||||
				if (fix) {
 | 
			
		||||
					wb = excel.utils.table_to_book(table.removeChild(fix));
 | 
			
		||||
					table.appendChild(fix);
 | 
			
		||||
				} else {
 | 
			
		||||
					wb = excel.utils.table_to_book(table);
 | 
			
		||||
				}
 | 
			
		||||
				/* 获取二进制字符串作为输出 */
 | 
			
		||||
				var wbout = excel.write(wb, {
 | 
			
		||||
					bookType: 'xlsx',
 | 
			
		||||
					bookSST: true,
 | 
			
		||||
					type: 'array',
 | 
			
		||||
				});
 | 
			
		||||
				try {
 | 
			
		||||
					FileSaver.saveAs(
 | 
			
		||||
						new Blob([wbout], { type: 'application/octet-stream' }),
 | 
			
		||||
						//设置导出文件名称
 | 
			
		||||
						'原片各线isra数据.xlsx'
 | 
			
		||||
					);
 | 
			
		||||
				} catch (e) {
 | 
			
		||||
					if (typeof console !== 'undefined') console.log(e, wbout);
 | 
			
		||||
				}
 | 
			
		||||
				return wbout;
 | 
			
		||||
			});
 | 
			
		||||
		},
 | 
			
		||||
		objectSpanMethod({ row, column, rowIndex, columnIndex }) {
 | 
			
		||||
			if (columnIndex === 0) {
 | 
			
		||||
				const _row = this.span[rowIndex];
 | 
			
		||||
				return {
 | 
			
		||||
					rowspan: _row,
 | 
			
		||||
					colspan: 1,
 | 
			
		||||
				};
 | 
			
		||||
			} else if (columnIndex === 1) {
 | 
			
		||||
				if (rowIndex % 3 === 0) {
 | 
			
		||||
					return {
 | 
			
		||||
						rowspan: 3,
 | 
			
		||||
						colspan: 1,
 | 
			
		||||
					};
 | 
			
		||||
				} else {
 | 
			
		||||
					return {
 | 
			
		||||
						rowspan: 0,
 | 
			
		||||
						colspan: 0,
 | 
			
		||||
					};
 | 
			
		||||
				}
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
<style lang="scss">
 | 
			
		||||
.isra-line-report {
 | 
			
		||||
	.el-table thead.is-group tr:first-of-type th:nth-child(3) {
 | 
			
		||||
		border-bottom: none;
 | 
			
		||||
	}
 | 
			
		||||
	.el-table thead.is-group tr:first-of-type th:nth-child(3) div.cell {
 | 
			
		||||
		padding-left: 82px;
 | 
			
		||||
	}
 | 
			
		||||
	.el-table th.el-table__cell {
 | 
			
		||||
		height: 28px;
 | 
			
		||||
	}
 | 
			
		||||
	.el-table thead.is-group tr:first-of-type th:nth-child(3):before {
 | 
			
		||||
		content: '';
 | 
			
		||||
		position: absolute;
 | 
			
		||||
		height: 80px;
 | 
			
		||||
		top: 0;
 | 
			
		||||
		left: 0;
 | 
			
		||||
		background-color: #ebeef5;
 | 
			
		||||
		transform: rotate(-70deg);
 | 
			
		||||
		-webkit-transform-origin: top;
 | 
			
		||||
		transform-origin: top;
 | 
			
		||||
		width: 1px;
 | 
			
		||||
	}
 | 
			
		||||
	.el-table thead.is-group tr:last-of-type th:nth-child(1):before {
 | 
			
		||||
		content: '';
 | 
			
		||||
		position: absolute;
 | 
			
		||||
		height: 67px;
 | 
			
		||||
		top: 0;
 | 
			
		||||
		left: 75px;
 | 
			
		||||
		background-color: #ebeef5;
 | 
			
		||||
		transform: rotate(-70deg);
 | 
			
		||||
		-webkit-transform-origin: top;
 | 
			
		||||
		transform-origin: top;
 | 
			
		||||
		width: 1px;
 | 
			
		||||
	}
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
		Reference in New Issue
	
	Block a user