yudao-dev/src/views/report/qcReport/israLineReport/index.vue

<template>
	<div class="app-container isra-line-report">
		<!-- 搜索工作栏 -->
		<search-bar
			:formConfigs="formConfig"
			@headBtnClick="buttonClick" />
		<base-table
			class="israLineReportTable1"
			ref="israLineReportTable11"
			id="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: 90,
		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',
					multiple: true,
				},
				{
					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() + 25200000;
		this.queryParams.endTime = moment(end + ' 23:59:59').valueOf() + 25200000;
		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);
			this.$nextTick(() => {
				this.reTable();
			});
		},
		reTable() {
			this.$refs.israLineReportTable11.doLayout('israLineReportTable1');
		},
		// 产线去重
		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() + 25200000;
					this.queryParams.endTime =
						moment(val.timeVal[1] + ' 23:59:59').valueOf() + 25200000;
				}
				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>