春风项目四线(合箱线、总装线)
wujian
2024-10-23 2c65c31aceb16c1d06c692266e3fb555ecafdfb5
提交 | 用户 | 时间
1c7036 1 <template>
Y 2   <div class="app-container">
3     <div style="width: 100%">
4       <el-card   class="box-card"  style="height: 60px" >
5         <template>
6           <div class="container" type="flex" justify="center" style="text-align:center">
7             <el-divider><span style="font-size:30px;color:black"><strong>活塞连杆扫码上线</strong></span></el-divider>
8           </div>
9         </template>
10       </el-card>
49ca7c 11 <!--      <el-card class="query-card" >-->
W 12 <!--        <el-form :model="from" size="large" :inline="true" label-width="78px" @submit.native.prevent>-->
13 <!--          <el-form-item label-width="200" label="连杆码" :prop="from.connectCode"  style="align-content: center">-->
14 <!--            <input v-model="from.connectCode"-->
15 <!--                   ref="inputdata1"-->
16 <!--                   style="height: 39px; width: 300px"-->
17 <!--                   placeholder="请扫描连杆码"-->
18 <!--            />-->
19 <!--          </el-form-item>-->
20 <!--        </el-form>-->
21 <!--      </el-card>-->
59e228 22       <!--      <el-card class="box-card" >-->
W 23       <!--        <el-form :model="from" size="large" :inline="true" label-width="68px" @submit.native.prevent>-->
24       <!--          <el-form-item label-width="200" label="活塞连杆托盘码" :prop="from.scanObject2"  style="align-content: center">-->
25       <!--            <input v-model="from.scanObject2"-->
26       <!--                   ref="inputdata"-->
27       <!--                   style="height: 39px; width: 300px"-->
28       <!--                   placeholder="请输入活塞连杆托盘码"-->
29       <!--            />-->
30       <!--          </el-form-item>-->
31       <!--&lt;!&ndash;          <el-button type="primary" icon="el-icon-refresh" @click="handleQuery">查询</el-button>&ndash;&gt;-->
32       <!--        </el-form>-->
33       <!--      </el-card>-->
1c7036 34       <el-col :span="24" >
Y 35         <el-card class="bottom-card">
36           <div slot="header" class="clearfix">
37             <i class="el-icon-tickets"></i>
38             <span style="font-weight: bold">当前产品信息</span>
39           </div>
40           <el-descriptions :column="1"  :label-style="{'font-size': '20px'}" border  :content-style="{'min-width': '300px'}">
41             <el-descriptions-item label="机型">
42               <span>{{queryParams.productSeries}}</span>
43             </el-descriptions-item>
59e228 44             <el-descriptions-item label="箱体对应SN码">
1c7036 45               <span>{{queryParams.scanObject1}}</span>
Y 46             </el-descriptions-item>
59e228 47             <el-descriptions-item label="曲轴对应SN码">
1c7036 48               <span>{{queryParams.scanObject2}}</span>
Y 49             </el-descriptions-item>
50             <el-descriptions-item label="结果">
5030f3 51               <span  style="color: #FFFFFF;"  :style="{ backgroundColor: queryParams.tileColor }">{{queryParams.words}}</span>
1c7036 52             </el-descriptions-item>
Y 53           </el-descriptions>
54           <el-divider></el-divider>
55         </el-card>
56       </el-col>
57     </div>
58   </div>
59 </template>
60 <script>
61 import VueQr from 'vue-qr'
62 import { listTileMatchRules, getTileMatchRules, delTileMatchRules, addTileMatchRules, updateTileMatchRules } from "@/api/main/bs/tileMatchRules/tileMatchRules";
63 import {listStationConf,getIp} from "@/api/main/sc/stationConf";
59e228 64 import {setBarcodeup, outSign, getDetailData} from "@/api/main/da/tileMatchMiddleware/tileMatchMiddleware";
W 65 import {getUrl} from "@/api/main/bs/orderScheduling/orderScheduling";
66 import WebSocketReconnect from "@/utils/WebsocketTool";
67 import result from "../../../../components/Crontab/result.vue";
a4c4c1 68 import {getSfcCodeByConnectCode} from "../../../../api/main/da/tileMatchMiddleware/tileMatchMiddleware";
1c7036 69 export default {
Y 70   name: "index",
71   dicts: ['colour_hex','productseries','axisname','neckname','tilename'],
72   components: {
73     VueQr,
74   },
75   data(){
76     return{
77       scannerFlag: false,
78       loading: true,
79       locationCode: "未配置",
80       locationName: "未配置工位",
81       tileMatchKbList: [],
82       qrCode: '',
83       // 查询参数
84       from:{
a4c4c1 85         connectCode:'',
1c7036 86         pageNum: 1,
Y 87         pageSize: 10,
88         productSeries: null,
89         scanObject1: null,
90         //scanObject1: 'P0SQ0-01FZ01-1000;T231224116;DBBBBA',
5030f3 91         scanObject2: null,
1c7036 92         axisName: null,
Y 93         neckName: null,
94         tileName: null,
95         axisParameterNoPosition: null,
96         neckParameterPosition: null,
97         axisValue: null,
98         neckValue: null,
99         tileColor: null,
100         createUser: null,
101         updateUser: null,
102         state: null,
103         weight: null,
104       },
105       queryParams: {
106         pageNum: 1,
107         pageSize: 10,
108         productSeries: null,
109         scanObject1: null,
110         // scanObject1: 'P0SQ0-01FZ01-1000;T231224116;DBBBBA',
111         scanObject2: null,
112         axisName: null,
113         neckName: null,
114         tileName: null,
115         axisParameterNoPosition: null,
116         neckParameterPosition: null,
117         axisValue: null,
118         neckValue: null,
5030f3 119         words:"",
1c7036 120         tileColor: null,
Y 121         createUser: null,
122         updateUser: null,
123         state: null,
124         weight: null,
125       },
126     }
127   },
128   mounted() {
49ca7c 129     // this.setFocus1()
W 130     // this.$refs.inputdata1.addEventListener('keydown',this.handleScannerInput1)
1c7036 131     this.getStationConf()
59e228 132     this.getWebUrl()
W 133     this.getDetailMessage()
1c7036 134   },
49ca7c 135   // beforeDestroy() {
W 136   //   this.$refs.inputdata1.removeEventListener('keydown',this.handleScannerInput1)
137   // },
1c7036 138   methods:{
49ca7c 139     // setFocus1(){
W 140     //   this.$nextTick(()=>{
141     //     this.$refs.inputdata1.focus()
142     //   })
143     // },
144     // handleScannerInput1(event) {
145     //   if (this.scannerFlag) {
146     //     this.$refs.inputdata1.value = ''
147     //     this.scannerFlag = false
148     //   }
149     //   const input = event.target
150     //   const inputValue = input.value
151     //   this.from.connectCode = inputValue
152     //   if (event.key === 'Enter') {
153     //     this.scannerFlag = true
154     //     //扫描完成
155     //     console.log('sssss', this.from.connectCode)
156     //     getSfcCodeByConnectCode({connectCode:this.from.connectCode}).then(res => {
157     //       console.log('res',res)
158     //       if (res.code === 200){
159     //         this.queryParams.scanObject2 = res.data.sfcCode
160     //
161     //         if (this.queryParams.scanObject1 !== null && this.queryParams.scanObject1 !== ''
162     //           && this.queryParams.scanObject2 !== null && this.queryParams.scanObject2 !== ''){
163     //           if (this.queryParams.scanObject1 === this.queryParams.scanObject2){
164     //             this.queryParams.words = "配对成功"
165     //             this.queryParams.tileColor = "#3dcc1d"
166     //             //请求出站
167     //             // this.passStation()
168     //           }else {
169     //             this.queryParams.words = "配对失败"
170     //             this.queryParams.tileColor = "#f50909"
171     //           }
172     //         }
173     //         this.$message({
174     //           message: '查询成功',
175     //           type: 'success'
176     //         });
177     //       } else {
178     //         this.$message({
179     //           message: '查询失败',
180     //           type: 'error'
181     //         });
182     //       }
183     //     })
184     //   }
185     // },
59e228 186     getWebUrl(){
W 187       getUrl().then(res=>{
188         this.websocketUrl = res+"OP050"
189         console.log('websocketUrl:',this.websocketUrl)
190         this.initWebSocket()
1c7036 191       })
Y 192     },
59e228 193     initWebSocket: function (){
W 194       //判断当前浏览器是否支持WebSocket
195       if ('WebSocket' in window) {
196         //连接WebSocket节点
197         this.websocket = new WebSocketReconnect(this.websocketUrl);
198         //接收到消息的回调方法
199         this.websocket.socket.onmessage = (event) => {
200           let data = event.data;
201           if (data != null && data !== ''){
202             this.result = JSON.parse(data);
203             const resultMessage = this.result.server_message.split("*");
204             console.log('resultMessage',resultMessage)
d2daac 205             if (resultMessage.length >=2){
59e228 206               if (resultMessage[1] === "sfcCode"){
W 207                 this.queryParams.scanObject1 = resultMessage[0]
208                 this.queryParams.productSeries = resultMessage[2]
209                 this.queryParams.scanObject2 = resultMessage[3]
210               } else if (resultMessage[1] === "rodCode"){
211                 this.queryParams.scanObject2 = resultMessage[0]
212                 this.queryParams.productSeries = resultMessage[2]
213               } else if (resultMessage[1] === "clean"){
1e3074 214                 this.queryParams.productSeries = ''
59e228 215                 this.queryParams.scanObject1 = ""
W 216                 this.queryParams.scanObject2 = ""
217                 this.queryParams.words = ""
218                 this.queryParams.tileColor = ""
219               }
5030f3 220             }
59e228 221             if (this.queryParams.scanObject1 !== null && this.queryParams.scanObject1 !== ''
W 222               && this.queryParams.scanObject2 !== null && this.queryParams.scanObject2 !== ''){
223               if (this.queryParams.scanObject1 === this.queryParams.scanObject2){
224                 this.queryParams.words = "配对成功"
225                 this.queryParams.tileColor = "#3dcc1d"
226                 //请求出站
227                 // this.passStation()
228               }else {
229                 this.queryParams.words = "配对失败"
230                 this.queryParams.tileColor = "#f50909"
231               }
232             }
233
234
235             // const parts3 = this.result.server_message.split("*");
236             // if (parts3.length >= 2) {
237             //   this.from.scanObject2=parts3[0];
238             //   this.queryParams.words=parts3[1];
239             //   this.queryParams.tileColor= parts3[2];
240             //   this.handleQuery();
241             // }
242           }
5030f3 243         }
59e228 244         //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
W 245         window.onbeforeunload = function () {
246           this.websocket.close()
247         }
248         //关闭连接
249         function closeWebSocket() {
250           this.websocket.close()
251         }
252         //发送消息
253         function send() {
254           this.websocket.socket.send({ kk: 123 })
255         }
256       } else {
257         alert('浏览器不支持webSocket')
1c7036 258       }
Y 259     },
59e228 260     //刷新获取信息
W 261     getDetailMessage(){
262       getDetailData().then(res => {
263         if (res.data == 200){
264           console.log('res200',res)
265           this.queryParams.scanObject1 = res.SfcCode
266           this.queryParams.productSeries = res.productSeries
267         }
268       })
269     },
1c7036 270     /** 查询工位终端配置列表 */
Y 271     getStationConf() {
272       getIp().then(response => {
273         let queryParams = {
274           ipAddress: response.msg,
275         }
276         listStationConf(queryParams).then(response => {
277           this.locationName = response.rows[0].processesName
278           this.locationCode = response.rows[0].processesCode
279         });
280       });
281     },
59e228 282     passStation(){
W 283       outSign().then(res =>{
284         console.log("res",res)
285         if (res.code === 200){
286           console.log('1212121')
287           this.$message({
288             message: '匹配成功,已过站',
289             type: 'success',
290             duration:3000
291           });
292           this.queryParams.productSeries = ''
293           this.queryParams.scanObject1 = ''
294           this.queryParams.scanObject2 = ''
295           this.queryParams.words = ''
296           this.queryParams.tileColor = ''
297
298         }
299       })
300     },
1c7036 301     /** 搜索按钮操作 */
Y 302     handleQuery() {
303       this.clear();
59e228 304       if(this.from.scanObject2 !== null)
1c7036 305       {
59e228 306         this.insetFromToQueryParams();
W 307         //this.getList();
308       } else{
1c7036 309         const h = this.$createElement;
Y 310         this.$message({
311           message: h('p',null, [
312             h('span', null, '警告 '),
313             h('i', { style: 'color: black' }, '请填写所有搜索条件'),
314             h()]),
315           type: 'error',
316           center: true,
317           offset:300
318         });
319       }
320     },
59e228 321     cleanForm(){
W 322       this.queryParams.productSeries = ""
323       this.queryParams.scanObject1 = ""
324       this.queryParams.scanObject2 = ""
325       this.queryParams.words = ""
326       this.queryParams.tileColor = ""
1c7036 327     },
Y 328     //取配瓦颜色
329     getList() {
330       let queryParams = {
331         productSeries : this.queryParams.productSeries,
332         axisName : this.queryParams.axisName,
333         neckName : this.queryParams.neckName,
334         tileName : this.queryParams.tileName,
335         axisValue: this.queryParams.axisValue,
336         neckValue: this.queryParams.neckValue,
337       }
338       console.log(queryParams)
339       listTileMatchRules(queryParams).then(response => {
340         this.queryParams.tileColor = response.rows[0].tileColor;
341       });
342     },
343     clear(){
344       this.queryParams.axisValue=null;
345       this.queryParams.neckValue=null;
346     },
347     insetFromToQueryParams(){
348       this.queryParams.productSeries=this.from.productSeries;
349       this.queryParams.tileName=this.from.tileName;
350       this.queryParams.scanObject2=this.from.scanObject2;
351     }
352
353   },
354 }
355 </script>
356
357 <style scoped>
358 ::v-deep .el-form-item__label{
359   font-size: large;
360 }
361 ::v-deep .el-card__body{
362   padding: 15px 20px 0px 20px;
363 }
364 ::v-deep .el-input .el-input--medium .el-input--suffix{
365   width: 200px;
366 }
367 .boxSize{
368   height: 60px;
369 }
370 .centerText{
371   color: black;
372   font-weight: bold;
373   font-size: 20px;
374   display: flex;
375   justify-content: center;
376   margin-top: 5px
377 }
378 </style>