<template>
|
<div class="app-container">
|
<div style="width: 100%">
|
<el-row :gutter="3">
|
<el-col :span="10">
|
<el-card class="box-card" >
|
<el-form :model="queryParams" size="large" :inline="true" label-width="68px" @submit.native.prevent>
|
<el-form-item label-width="200" label="平衡轴码" :prop="queryParams.scanObject2" style="align-content: center">
|
<input v-model="queryParams.scanObject2"
|
ref="inputdata"
|
style="height: 39px; width: 300px"
|
placeholder="请输入平衡轴码"
|
/>
|
</el-form-item>
|
</el-form>
|
</el-card>
|
</el-col>
|
<el-col :span="14">
|
<el-card shadow="always" class="boxSize">
|
<span class="centerText" >{{noticeMessage}}</span>
|
</el-card>
|
</el-col>
|
</el-row>
|
<el-col :span="24" >
|
<el-card class="bottom-card">
|
<div slot="header" class="clearfix">
|
<i class="el-icon-tickets"></i>
|
<span style="font-weight: bold">当前产品信息</span>
|
</div>
|
<el-descriptions :column="1" :label-style="{'font-size': '20px'}" border :content-style="{'min-width': '300px'}">
|
<el-descriptions-item label="机型">
|
<span>{{queryParams.productSeries}}</span>
|
</el-descriptions-item>
|
<el-descriptions-item label="箱体码">
|
<span>{{queryParams.scanObject1}}</span>
|
</el-descriptions-item>
|
<el-descriptions-item label="平衡轴码">
|
<span>{{queryParams.scanObject2}}</span>
|
</el-descriptions-item>
|
<el-descriptions-item label="配瓦颜色">
|
<span v-for="(word, index) in queryParams.words" :key="index" :style="{ backgroundColor: queryParams.colors[index],fontSize: '30px',}">{{ word }}</span>
|
</el-descriptions-item>
|
</el-descriptions>
|
<el-divider></el-divider>
|
</el-card>
|
</el-col>
|
</div>
|
</div>
|
</template>
|
<script>
|
import VueQr from 'vue-qr'
|
import { listTileMatchRules, getTileMatchRules, delTileMatchRules, addTileMatchRules, updateTileMatchRules } from "@/api/main/bs/tileMatchRules/tileMatchRules";
|
import {setBarcode} from "@/api/main/bs/tileMatchRules/tileMatchRules";
|
import { getUrl } from "@/api/main/bs/orderScheduling/orderScheduling";
|
import WebSocketReconnect from "@/utils/WebsocketTool";
|
import { getBalanceData } from "@/api/main/da/tileMatchCollection/tileMatchCollection"
|
export default {
|
name: "index",
|
dicts: ['colour_hex','productseries','axisname','neckname','tilename'],
|
components: {
|
VueQr,
|
},
|
data(){
|
return{
|
noticeMessage: "请等待托盘数据读取",
|
scannerFlag: false,
|
loading: true,
|
tileMatchKbList: [],
|
qrCode: '',
|
// 查询参数
|
from:{
|
pageNum: 1,
|
pageSize: 10,
|
productSeries: '',
|
scanObject1: null,
|
scanObject2: '',
|
axisName: null,
|
neckName: null,
|
tileName: '',
|
axisParameterNoPosition: null,
|
neckParameterPosition: null,
|
axisValue: null,
|
neckValue: null,
|
tileColor: null,
|
createUser: null,
|
updateUser: null,
|
state: null,
|
weight: null,
|
},
|
queryParams: {
|
pageNum: 1,
|
pageSize: 10,
|
productSeries: null,
|
scanObject1: null,
|
scanObject2: '',
|
axisName: null,
|
neckName: null,
|
tileName: null,
|
words: ['------', '------', ],
|
colors: ['#FFFFFF', '#FFFFFF'],
|
axisParameterNoPosition: null,
|
neckParameterPosition: null,
|
axisValue: null,
|
neckValue: null,
|
tileColor: null,
|
createUser: null,
|
updateUser: null,
|
state: null,
|
weight: null,
|
},
|
}
|
},
|
mounted() {
|
this.getWebUrl()
|
this.setFocus()
|
this.$refs.inputdata.addEventListener('keydown',this.handleScannerInput)
|
},
|
beforeDestroy() {
|
this.$refs.inputdata.removeEventListener('keydown',this.handleScannerInput)
|
},
|
methods:{
|
getWebUrl() {
|
getUrl().then(res => {
|
this.websocketUrl = res + "OP040"
|
console.log('websocketUrl：', this.websocketUrl)
|
this.initWebSocket()
|
})
|
},
|
initWebSocket: function () {
|
//判断当前浏览器是否支持WebSocket
|
if ('WebSocket' in window) {
|
//连接WebSocket节点
|
this.websocket = new WebSocketReconnect(this.websocketUrl);
|
//接收到消息的回调方法
|
this.websocket.socket.onmessage = (event) => {
|
let data = event.data;
|
if (data != null && data !== '') {
|
this.result = JSON.parse(data);
|
console.log('this.result.server_message',this.result.server_message)
|
const parts3 = this.result.server_message.split("*");
|
if (parts3.length >= 2) {
|
if (parts3[0] === 'clean'){
|
console.log('090909')
|
this.queryParams.productSeries = ''
|
this.queryParams.scanObject1 = ''
|
this.queryParams.scanObject2 = ''
|
this.queryParams.words = ['------', '------', ]
|
this.queryParams.colors = ['#FFFFFF', '#FFFFFF']
|
this.noticeMessage = "请等待托盘数据读取"
|
}else {
|
this.queryParams.productSeries = parts3[0];
|
this.queryParams.scanObject1 = parts3[1];
|
if (this.queryParams.scanObject1 !== null && this.queryParams.scanObject1 !== ''){
|
this.noticeMessage = "请扫描平衡轴码"
|
}
|
}
|
|
}
|
}
|
}
|
//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
|
window.onbeforeunload = function () {
|
this.websocket.close()
|
}
|
|
//关闭连接
|
function closeWebSocket() {
|
this.websocket.close()
|
}
|
|
//发送消息
|
function send() {
|
this.websocket.socket.send({kk: 123})
|
}
|
} else {
|
alert('浏览器不支持webSocket')
|
}
|
},
|
refresh() {
|
location.reload();
|
},
|
setFocus(){
|
this.$nextTick(()=>{
|
this.$refs.inputdata.focus()
|
})
|
},
|
handleScannerInput(event){
|
if (this.scannerFlag){
|
this.queryParams.scanObject2 = ''
|
this.$refs.inputdata.value = ''
|
this.scannerFlag = false
|
}
|
const input = event.target
|
const inputValue = input.value
|
this.queryParams.scanObject2 = inputValue
|
if (event.key === 'Enter'){
|
this.scannerFlag = true
|
console.log('条码：',this.queryParams.scanObject2)
|
//扫描完成
|
if (this.queryParams.scanObject2 !== null && this.queryParams.scanObject2 !== '') {
|
console.log('条码：',this.queryParams.scanObject2,'OP040')
|
getBalanceData({boxCode: this.queryParams.scanObject1,balanceCode: this.queryParams.scanObject2,productType: this.queryParams.productSeries}).then(res =>{
|
console.log('res',res)
|
if (res.code === 200){
|
this.$message({
|
message:'配瓦成功',
|
type:'success'
|
})
|
this.noticeMessage = '配瓦成功'
|
for (var i = 0; i < res.data.length; i++) {
|
this.queryParams.colors[i] = res.data[i].tileColor;
|
this.queryParams.words[i] = res.data[i].tileName;
|
}
|
}else {
|
this.$message({
|
message:res.msg,
|
type:'warning'
|
})
|
}
|
})
|
}
|
}
|
},
|
},
|
}
|
</script>
|
|
<style scoped>
|
::v-deep .el-form-item__label{
|
font-size: large;
|
}
|
::v-deep .el-card__body{
|
padding: 15px 20px 0px 20px;
|
}
|
::v-deep .el-input .el-input--medium .el-input--suffix{
|
width: 200px;
|
}
|
.centerText{
|
color: red;
|
font-weight: bold;
|
font-size: 35px;
|
display: flex;
|
align-content: center;
|
justify-content: center;
|
}
|
.boxSize {
|
height: 80px;
|
}
|
|
</style>
|
