Jcdm042-Mes.git

hdy

2024-06-11 88c8493c8ccd1d487966069f65ca2c9610683bdf

提交 \| 用户 \| 时间
a846f2	1	<template>
A	2	<div class="app-container">
	3	<el-row>
	4	<el-col :span="8">
	5	<div>
	6	<div id="printMe">
	7	<p style="margin-left: 30px">9900166410</p>
	8	<p style="margin-left: 30px">HW.001.001</p>
	9	<p style="margin-left: 30px">SW.001.001</p>
	10	<br>
	11	<br>
	12	<br>
	13	<br>
	14	<br>
	15	<span style="font-size: 20px;font-weight: bold;margin-left: 40px">GEELY</span><br>
	16	<span style="font-size: 10px;margin-left: 15px">COMMERCIAL VEHICLE</span><br>
	17	<span style="margin-left: 43px">H2155D</span><br>
	18	<span style="margin-left: 43px">993083</span><br>
	19	<span style="margin-left: 20px">9900166410</span><br>
	20	<span style="font-size: 10px;margin-right: 7px">0RSPBFAA1A2E3ADC40000027</span>
	21	<br>
	22	<br>
	23	<br>
	24	<br>
	25	<br>
	26	<div ref="canvasWrapper" id="canvasWrapper" style="display: flex;justify-content: center;margin-top: -30px"></div>
	27	<span style="font-size: 7px;word-break: break-all;display: flex;justify-content: center;">{{text1}}</span>
	28	</div>
	29	<el-button @click="print1">打印</el-button>
	30	<el-button @click="test1">生成二维码</el-button>
	31
	32	</div>
	33	</el-col>
	34	<el-col :span="8">
	35	<div>
	36	<div style="text-align: center" id="printMe1">
	37	<p>9900166410</p>
	38	<p>HW.001.001</p>
	39	<p>SW.001.001</p>
	40	</div>
	41	<el-button @click="print2">打印</el-button>
	42	</div>
	43	</el-col>
	44	<el-col :span="8">
	45	<div>
	46	<div id="printMe2">
	47	<span style="font-size: 20px;font-weight: bold;margin-left: 40px">GEELY</span><br>
	48	<span style="font-size: 10px;margin-left: 15px">COMMERCIAL VEHICLE</span><br>
	49	<span style="margin-left: 43px">H2155D</span><br>
	50	<span style="margin-left: 43px">993083</span><br>
	51	<span style="margin-left: 20px">9900166410</span><br>
	52	<span style="font-size: 10px;margin-right: 7px">0RSPBFAA1A2E3ADC40000027</span>
	53	</div>
	54	<el-button @click="print3">打印</el-button>
	55	</div>
	56	</el-col>
	57	</el-row>
	58
	59	</div>
	60	</template>
	61
	62	<script>
	63
	64	import QRCode from "qrcodejs2";
	65
	66	export default {
	67	name: "Instructions",
	68	data() {
	69	return {
	70	text1: 'P9900166410#T0RSPBFAA1A2E3ADC40000027#V993983#SSW001.001#HHW001.001#NBMS#',
	71	text2: '1234',
	72	text3: '1234',
	73
	74
	75	};
	76	},
	77	created() {
	78	},
	79	mounted() {
	80	this.test1()
	81	},
	82	methods: {
	83	print1() {
	84	// 新开页面打印
	85	let newStr = document.getElementById('printMe').innerHTML;
	86	let newWin = window.open('', '_blank');
	87	newWin.document.body.innerHTML = newStr;
	88	newWin.print();
	89	return false;
	90	},
	91	test1(){
	92	document.getElementById('canvasWrapper').innerHTML = '';
	93	this.$nextTick(() => {
	94	let qrCode = new QRCode('canvasWrapper',{
	95	width: 120,
	96	height: 120,
	97	text: this.text1,
	98	colorDark: '#000',
	99	colorLight: '#fff'
	100	})
	101	})
	102	},
	103	print2() {
	104	// 新开页面打印
	105	let newStr = document.getElementById('printMe1').innerHTML;
	106	let newWin = window.open('', '_blank');
	107	newWin.document.body.innerHTML = newStr;
	108	newWin.print();
	109	return false;
	110	},
	111	print3() {
	112	// 新开页面打印
	113	let newStr = document.getElementById('printMe2').innerHTML;
	114	let newWin = window.open('', '_blank');
	115	newWin.document.body.innerHTML = newStr;
	116	newWin.print();
	117	return false;
	118	},
	119	},
	120	}
	121	</script>
	122
	123	<style scoped>
	124	.outerDiv {
	125	width: fit-content;
	126	min-width: 100%;
	127	/width: 300px;/
	128	height: 50px;
	129	margin-bottom: 10px;
	130	}
	131
	132	.innerDiv1 {
	133	/width: 79%;/
	134	height: 100%;
	135	display: flex;
	136	align-items: center;
	137	border: 1px solid black;
	138	}
	139
	140	.innerDiv2 {
	141	/width: 20%;/
	142	width: 50px;
	143	height: 100%;
	144	display: flex;
	145	justify-content: center;
	146	align-items: center;
	147	border: 1px solid black;
	148	}
	149
	150	.content_left {
	151	font-weight: bold;
	152	}
	153	.content_right {
	154	white-space: nowrap;
	155	padding-left: 5px;
	156	padding-right: 5px;
	157	}
	158	.container {
	159	display: flex;
	160	justify-content: center;
	161	align-items: center;
	162	height: 100px; /* 设置div的高度，可根据实际情况调整 */
	163	}
	164
	165	.centered {
	166	text-align: center;
	167	}
	168
	169	</style>