Jcdm041-Mes.git

wujian

2024-10-23 2c65c31aceb16c1d06c692266e3fb555ecafdfb5

提交 \| 用户 \| 时间
1c7036	1	<template>
Y	2	<div class="app-container">
	3	<div style="width: 100%">
59e228	4	<el-row :gutter="3">
W	5	<el-col :span="10">
	6	<el-card class="box-card" >
	7	<el-form :model="queryParams" size="large" :inline="true" label-width="68px" @submit.native.prevent>
	8	<el-form-item label-width="200" label="平衡轴码" :prop="queryParams.scanObject2" style="align-content: center">
	9	<input v-model="queryParams.scanObject2"
	10	ref="inputdata"
	11	style="height: 39px; width: 300px"
	12	placeholder="请输入平衡轴码"
	13	/>
	14	</el-form-item>
	15	</el-form>
	16	</el-card>
	17	</el-col>
	18	<el-col :span="14">
	19	<el-card shadow="always" class="boxSize">
	20	<span class="centerText" >{{noticeMessage}}</span>
	21	</el-card>
	22	</el-col>
	23	</el-row>
1c7036	24	<el-col :span="24" >
Y	25	<el-card class="bottom-card">
	26	<div slot="header" class="clearfix">
	27	<i class="el-icon-tickets"></i>
	28	<span style="font-weight: bold">当前产品信息</span>
	29	</div>
	30	<el-descriptions :column="1" :label-style="{'font-size': '20px'}" border :content-style="{'min-width': '300px'}">
	31	<el-descriptions-item label="机型">
	32	<span>{{queryParams.productSeries}}</span>
	33	</el-descriptions-item>
	34	<el-descriptions-item label="箱体码">
	35	<span>{{queryParams.scanObject1}}</span>
	36	</el-descriptions-item>
	37	<el-descriptions-item label="平衡轴码">
	38	<span>{{queryParams.scanObject2}}</span>
	39	</el-descriptions-item>
	40	<el-descriptions-item label="配瓦颜色">
5030f3	41	<span v-for="(word, index) in queryParams.words" :key="index" :style="{ backgroundColor: queryParams.colors[index],fontSize: '30px',}">{{ word }}</span>
1c7036	42	</el-descriptions-item>
Y	43	</el-descriptions>
	44	<el-divider></el-divider>
	45	</el-card>
	46	</el-col>
	47	</div>
	48	</div>
	49	</template>
	50	<script>
	51	import VueQr from 'vue-qr'
	52	import { listTileMatchRules, getTileMatchRules, delTileMatchRules, addTileMatchRules, updateTileMatchRules } from "@/api/main/bs/tileMatchRules/tileMatchRules";
5030f3	53	import {setBarcode} from "@/api/main/bs/tileMatchRules/tileMatchRules";
59e228	54	import { getUrl } from "@/api/main/bs/orderScheduling/orderScheduling";
W	55	import WebSocketReconnect from "@/utils/WebsocketTool";
	56	import { getBalanceData } from "@/api/main/da/tileMatchCollection/tileMatchCollection"
1c7036	57	export default {
Y	58	name: "index",
	59	dicts: ['colour_hex','productseries','axisname','neckname','tilename'],
	60	components: {
	61	VueQr,
	62	},
	63	data(){
	64	return{
59e228	65	noticeMessage: "请等待托盘数据读取",
1c7036	66	scannerFlag: false,
Y	67	loading: true,
	68	tileMatchKbList: [],
	69	qrCode: '',
	70	// 查询参数
	71	from:{
	72	pageNum: 1,
	73	pageSize: 10,
59e228	74	productSeries: '',
5030f3	75	scanObject1: null,
c9745d	76	scanObject2: '',
1c7036	77	axisName: null,
Y	78	neckName: null,
59e228	79	tileName: '',
1c7036	80	axisParameterNoPosition: null,
Y	81	neckParameterPosition: null,
	82	axisValue: null,
	83	neckValue: null,
	84	tileColor: null,
	85	createUser: null,
	86	updateUser: null,
	87	state: null,
	88	weight: null,
	89	},
	90	queryParams: {
	91	pageNum: 1,
	92	pageSize: 10,
	93	productSeries: null,
	94	scanObject1: null,
c9745d	95	scanObject2: '',
1c7036	96	axisName: null,
Y	97	neckName: null,
	98	tileName: null,
5030f3	99	words: ['------', '------', ],
Y	100	colors: ['#FFFFFF', '#FFFFFF'],
1c7036	101	axisParameterNoPosition: null,
Y	102	neckParameterPosition: null,
	103	axisValue: null,
	104	neckValue: null,
	105	tileColor: null,
	106	createUser: null,
	107	updateUser: null,
	108	state: null,
	109	weight: null,
	110	},
	111	}
	112	},
	113	mounted() {
59e228	114	this.getWebUrl()
1c7036	115	this.setFocus()
Y	116	this.$refs.inputdata.addEventListener('keydown',this.handleScannerInput)
	117	},
	118	beforeDestroy() {
	119	this.$refs.inputdata.removeEventListener('keydown',this.handleScannerInput)
	120	},
	121	methods:{
59e228	122	getWebUrl() {
W	123	getUrl().then(res => {
	124	this.websocketUrl = res + "OP040"
	125	console.log('websocketUrl：', this.websocketUrl)
	126	this.initWebSocket()
	127	})
	128	},
	129	initWebSocket: function () {
	130	//判断当前浏览器是否支持WebSocket
	131	if ('WebSocket' in window) {
	132	//连接WebSocket节点
	133	this.websocket = new WebSocketReconnect(this.websocketUrl);
	134	//接收到消息的回调方法
	135	this.websocket.socket.onmessage = (event) => {
	136	let data = event.data;
	137	if (data != null && data !== '') {
	138	this.result = JSON.parse(data);
	139	console.log('this.result.server_message',this.result.server_message)
	140	const parts3 = this.result.server_message.split("*");
	141	if (parts3.length >= 2) {
	142	if (parts3[0] === 'clean'){
	143	console.log('090909')
	144	this.queryParams.productSeries = ''
	145	this.queryParams.scanObject1 = ''
	146	this.queryParams.scanObject2 = ''
	147	this.queryParams.words = ['------', '------', ]
	148	this.queryParams.colors = ['#FFFFFF', '#FFFFFF']
	149	this.noticeMessage = "请等待托盘数据读取"
	150	}else {
	151	this.queryParams.productSeries = parts3[0];
	152	this.queryParams.scanObject1 = parts3[1];
	153	if (this.queryParams.scanObject1 !== null && this.queryParams.scanObject1 !== ''){
	154	this.noticeMessage = "请扫描平衡轴码"
	155	}
	156	}
	157
	158	}
	159	}
	160	}
	161	//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
	162	window.onbeforeunload = function () {
	163	this.websocket.close()
	164	}
	165
	166	//关闭连接
	167	function closeWebSocket() {
	168	this.websocket.close()
	169	}
	170
	171	//发送消息
	172	function send() {
	173	this.websocket.socket.send({kk: 123})
	174	}
	175	} else {
	176	alert('浏览器不支持webSocket')
	177	}
	178	},
1c7036	179	refresh() {
Y	180	location.reload();
	181	},
	182	setFocus(){
	183	this.$nextTick(()=>{
	184	this.$refs.inputdata.focus()
	185	})
	186	},
	187	handleScannerInput(event){
	188	if (this.scannerFlag){
59e228	189	this.queryParams.scanObject2 = ''
1c7036	190	this.$refs.inputdata.value = ''
Y	191	this.scannerFlag = false
	192	}
	193	const input = event.target
	194	const inputValue = input.value
59e228	195	this.queryParams.scanObject2 = inputValue
1c7036	196	if (event.key === 'Enter'){
Y	197	this.scannerFlag = true
59e228	198	console.log('条码：',this.queryParams.scanObject2)
1c7036	199	//扫描完成
59e228	200	if (this.queryParams.scanObject2 !== null && this.queryParams.scanObject2 !== '') {
W	201	console.log('条码：',this.queryParams.scanObject2,'OP040')
	202	getBalanceData({boxCode: this.queryParams.scanObject1,balanceCode: this.queryParams.scanObject2,productType: this.queryParams.productSeries}).then(res =>{
5030f3	203	console.log('res',res)
59e228	204	if (res.code === 200){
W	205	this.$message({
	206	message:'配瓦成功',
	207	type:'success'
	208	})
	209	this.noticeMessage = '配瓦成功'
	210	for (var i = 0; i < res.data.length; i++) {
	211	this.queryParams.colors[i] = res.data[i].tileColor;
	212	this.queryParams.words[i] = res.data[i].tileName;
	213	}
	214	}else {
	215	this.$message({
	216	message:res.msg,
	217	type:'warning'
	218	})
	219	}
5030f3	220	})
Y	221	}
1c7036	222	}
Y	223	},
	224	},
	225	}
	226	</script>
	227
	228	<style scoped>
	229	::v-deep .el-form-item__label{
	230	font-size: large;
	231	}
	232	::v-deep .el-card__body{
	233	padding: 15px 20px 0px 20px;
	234	}
	235	::v-deep .el-input .el-input--medium .el-input--suffix{
	236	width: 200px;
	237	}
59e228	238	.centerText{
W	239	color: red;
	240	font-weight: bold;
	241	font-size: 35px;
	242	display: flex;
	243	align-content: center;
	244	justify-content: center;
	245	}
	246	.boxSize {
	247	height: 80px;
	248	}
1c7036	249
Y	250	</style>