提交 | 用户 | 时间
|
b0742c
|
1 |
<template> |
C |
2 |
<div class="app-container"> |
589dc7
|
3 |
<el-row :gutter="5"> |
懒 |
4 |
<el-col :span="6"> |
49ac5c
|
5 |
<el-card shadow="never"> |
懒 |
6 |
<span class="head-font">工位编号 : {{headContent.processesCode}}</span> |
589dc7
|
7 |
</el-card> |
懒 |
8 |
</el-col> |
|
9 |
<el-col :span="6"> |
49ac5c
|
10 |
<el-card shadow="never"> |
懒 |
11 |
<span class="head-font">工位名称 : {{headContent.processesName}}</span> |
589dc7
|
12 |
</el-card> |
懒 |
13 |
</el-col> |
8586e1
|
14 |
<el-col :span="12"> |
49ac5c
|
15 |
<el-card shadow="never"> |
懒 |
16 |
<span class="head-font">总成编码 : {{headContent.sfcCode}}</span> |
5a6d6b
|
17 |
<el-input v-model="content" style="float: right;width: 150px;" placeholder="请输入内容"></el-input> |
49ac5c
|
18 |
<el-button @click="scanCompleted" style="float: right" type="primary">扫码完成</el-button> |
懒 |
19 |
<el-button @click="clearClick" style="float: right" type="danger">清除</el-button> |
589dc7
|
20 |
</el-card> |
懒 |
21 |
</el-col> |
8586e1
|
22 |
|
589dc7
|
23 |
</el-row> |
懒 |
24 |
<el-row :gutter="5" style="margin-top: 5px"> |
|
25 |
<el-col :span="6" > |
|
26 |
<el-card class="bottom-card"> |
|
27 |
<div slot="header" class="clearfix"> |
49ac5c
|
28 |
<i class="el-icon-tickets"></i> |
懒 |
29 |
<span style="font-weight: bold">当前工件信息</span> |
589dc7
|
30 |
</div> |
49ac5c
|
31 |
<el-descriptions :column="1" :label-style="{'font-size': '15px'}" border :content-style="{'min-width': '150px'}"> |
懒 |
32 |
<el-descriptions-item label="工单编号"> |
|
33 |
<span>{{workpieceInformation.workOrderCode}}</span> |
589dc7
|
34 |
</el-descriptions-item> |
49ac5c
|
35 |
<el-descriptions-item label="产品编号"> |
懒 |
36 |
<span>{{workpieceInformation.productCode}}</span> |
589dc7
|
37 |
</el-descriptions-item> |
49ac5c
|
38 |
<el-descriptions-item label="产品型号"> |
懒 |
39 |
<span>{{workpieceInformation.productModel}}</span> |
589dc7
|
40 |
</el-descriptions-item> |
49ac5c
|
41 |
<el-descriptions-item label="产品名称"> |
懒 |
42 |
<span>{{workpieceInformation.productName}}</span> |
589dc7
|
43 |
</el-descriptions-item> |
49ac5c
|
44 |
<el-descriptions-item label="节拍"> |
懒 |
45 |
<span>{{workpieceInformation.beat}}</span> |
589dc7
|
46 |
</el-descriptions-item> |
懒 |
47 |
</el-descriptions> |
|
48 |
<el-divider></el-divider> |
|
49 |
<el-row> |
|
50 |
<el-col :span="12"> |
49ac5c
|
51 |
<el-button class="circle-button" :class="cakeLamp.plcState ? 'circle-green-animate':'circle-red'" circle></el-button> |
懒 |
52 |
<span style="display: none">{{cakeLamp.plcState}}</span> |
8586e1
|
53 |
<span> PLC状态</span> |
589dc7
|
54 |
</el-col> |
懒 |
55 |
<el-col :span="12"> |
49ac5c
|
56 |
<el-button class="circle-button" :class="cakeLamp.scannerState ? 'circle-green-animate':'circle-red'" circle></el-button> |
懒 |
57 |
<span style="display: none">{{cakeLamp.scannerState}}</span> |
8586e1
|
58 |
<span> 扫码枪状态</span> |
589dc7
|
59 |
</el-col> |
懒 |
60 |
</el-row> |
|
61 |
<el-row style="margin-top: 20px"> |
|
62 |
<el-col :span="12"> |
49ac5c
|
63 |
<el-button class="circle-button" :class="cakeLamp.InPlace ? 'circle-green':'circle-red'" circle></el-button> |
懒 |
64 |
<span style="display: none">{{cakeLamp.InPlace}}</span> |
8586e1
|
65 |
<span> 工件到位</span> |
589dc7
|
66 |
</el-col> |
懒 |
67 |
<el-col :span="12"> |
49ac5c
|
68 |
<el-button class="circle-button" :class="cakeLamp.scanFinish ? 'circle-green':'circle-red'" circle></el-button> |
懒 |
69 |
<span style="display: none">{{cakeLamp.scanFinish}}</span> |
8586e1
|
70 |
<span> 扫码完成</span> |
589dc7
|
71 |
</el-col> |
懒 |
72 |
</el-row> |
|
73 |
<el-row style="margin-top: 20px"> |
|
74 |
<el-col :span="12"> |
49ac5c
|
75 |
<el-button class="circle-button" :class="cakeLamp.startWork ? 'circle-green':'circle-red'" circle></el-button> |
懒 |
76 |
<span style="display: none">{{cakeLamp.startWork}}</span> |
8586e1
|
77 |
<span> 开始作业</span> |
589dc7
|
78 |
</el-col> |
懒 |
79 |
<el-col :span="12"> |
49ac5c
|
80 |
<el-button class="circle-button" :class="cakeLamp.release ? 'circle-green':'circle-red'" circle></el-button> |
懒 |
81 |
<span style="display: none">{{cakeLamp.release}}</span> |
8586e1
|
82 |
<span> 允许放行</span> |
589dc7
|
83 |
</el-col> |
49138a
|
84 |
|
懒 |
85 |
</el-row> |
|
86 |
<el-row style="margin-top: 20px"> |
|
87 |
<el-col :span="12"> |
|
88 |
<el-input v-model="serialPortContent" style="width: 150px;" placeholder="请输入内容"></el-input> |
|
89 |
|
|
90 |
</el-col> |
|
91 |
<el-col :span="12"> |
|
92 |
<el-button @click="serialPortMethod" type="primary">串口获取数据</el-button> |
|
93 |
|
|
94 |
</el-col> |
589dc7
|
95 |
</el-row> |
a36b83
|
96 |
<el-row style="margin-top: 20px"> |
懒 |
97 |
<el-button @click="Release" type="primary">放行</el-button> |
|
98 |
</el-row> |
589dc7
|
99 |
</el-card> |
b0742c
|
100 |
|
589dc7
|
101 |
</el-col> |
懒 |
102 |
<el-col :span="18"> |
5a6d6b
|
103 |
<el-tabs type="border-card" style="height: 600px" v-model="activeName" @tab-click="changeMenu"> |
懒 |
104 |
<el-tab-pane name="first"> |
589dc7
|
105 |
<span slot="label"> <a class="el-icon-date"></a>首页</span> |
懒 |
106 |
<el-col :span="8"> |
a36b83
|
107 |
<el-table :cell-style="rowStyle" :data="formulaChildList"> |
d3409e
|
108 |
<el-table-column label="排序" width="60" align="center" prop="stepSort"> |
懒 |
109 |
</el-table-column> |
|
110 |
<el-table-column label="操作内容" :show-overflow-tooltip='true' align="center" prop="operationSteps"> |
|
111 |
</el-table-column> |
589dc7
|
112 |
</el-table> |
懒 |
113 |
</el-col> |
|
114 |
<el-col :span="16"> |
|
115 |
<el-image style="height: 520px;width: 100%" :src="imgSrc"></el-image> |
|
116 |
</el-col> |
|
117 |
</el-tab-pane> |
5a6d6b
|
118 |
<el-tab-pane name="second"> |
589dc7
|
119 |
<span slot="label"> <b class="el-icon-date"></b>物料BOM</span> |
5a6d6b
|
120 |
<el-empty> |
589dc7
|
121 |
<span slot="description">暂无数据</span> |
懒 |
122 |
</el-empty> |
|
123 |
</el-tab-pane> |
5a6d6b
|
124 |
<el-tab-pane name="third"> |
懒 |
125 |
<span slot="label"> <b class="el-icon-date"></b>采集清单</span> |
|
126 |
<el-empty> |
589dc7
|
127 |
<span slot="description">暂无数据</span> |
懒 |
128 |
</el-empty> |
|
129 |
</el-tab-pane> |
5a6d6b
|
130 |
<el-tab-pane name="fourth"> |
懒 |
131 |
<span slot="label"> <b class="el-icon-date"></b>安灯状态</span> |
|
132 |
<el-empty> |
589dc7
|
133 |
<span slot="description">暂无数据</span> |
懒 |
134 |
</el-empty> |
|
135 |
</el-tab-pane> |
5a6d6b
|
136 |
<el-tab-pane name="fifth"> |
懒 |
137 |
<span slot="label"> <b class="el-icon-date"></b>工艺配方</span> |
|
138 |
<el-empty> |
589dc7
|
139 |
<span slot="description">暂无数据</span> |
懒 |
140 |
</el-empty> |
|
141 |
</el-tab-pane> |
|
142 |
</el-tabs> |
|
143 |
</el-col> |
|
144 |
</el-row> |
b0742c
|
145 |
</div> |
C |
146 |
</template> |
|
147 |
<script> |
49ac5c
|
148 |
import {listWorkReport} from "@/api/main/om/workReport/workReport"; |
懒 |
149 |
import {listStationConf,getIpv4} from "@/api/main/sc/stationConf"; |
c346ab
|
150 |
import {listFormulaChild, releaseCheck, updateResults, workpieceRelease} from "@/api/main/bs/formulaChild/formulaChild"; |
49ac5c
|
151 |
|
b0742c
|
152 |
export default { |
49ac5c
|
153 |
name: "stationTerminal", |
b0742c
|
154 |
data() { |
C |
155 |
return { |
49138a
|
156 |
serialPortContent: '', |
d3409e
|
157 |
// 查询参数 |
懒 |
158 |
formulaChildParams: { |
|
159 |
pageNum: 1, |
|
160 |
pageSize: 10, |
|
161 |
productCode: null, |
c346ab
|
162 |
processesCode: null, |
d3409e
|
163 |
}, |
懒 |
164 |
// 配方配置子信息表格数据 |
|
165 |
formulaChildList: [], |
49ac5c
|
166 |
ipAddress: '', |
589dc7
|
167 |
imgSrc: '', |
49ac5c
|
168 |
headContent: { |
懒 |
169 |
processesCode: 'OP1010', |
|
170 |
processesName: '贴标机-贴码', |
|
171 |
sfcCode: '1000000000000001', |
|
172 |
}, |
|
173 |
workpieceInformation: { |
|
174 |
workOrderCode: null, |
|
175 |
productCode: null, |
|
176 |
productModel: null, |
|
177 |
productName: null, |
|
178 |
beat: null, |
|
179 |
}, |
|
180 |
// 查询参数 |
|
181 |
queryParams: { |
|
182 |
pageNum: 1, |
|
183 |
pageSize: 10, |
|
184 |
sfcCode: null, |
|
185 |
}, |
5f3a2e
|
186 |
// 查询参数 |
懒 |
187 |
StationConfQueryParams: { |
|
188 |
pageNum: 1, |
|
189 |
pageSize: 10, |
|
190 |
ipAddress: null, |
|
191 |
}, |
49ac5c
|
192 |
cakeLamp: { |
懒 |
193 |
plcState: 1, //plc |
|
194 |
scannerState: 1, //扫码枪 |
|
195 |
InPlace: 0, //工件到位 |
|
196 |
scanFinish: 0, |
|
197 |
startWork: 0, |
|
198 |
release: 0 //允许放行 |
5a6d6b
|
199 |
}, |
懒 |
200 |
content: '', |
5f3a2e
|
201 |
activeName: 'first', |
c346ab
|
202 |
url: "ws://192.168.10.252:8080/websocket/message/", |
5f3a2e
|
203 |
message: "", |
懒 |
204 |
text_content: "", |
|
205 |
ws: null, |
d3409e
|
206 |
inputValue: '9' |
b0742c
|
207 |
} |
5f3a2e
|
208 |
}, |
懒 |
209 |
beforeDestroy() { |
|
210 |
this.exit(); |
b0742c
|
211 |
}, |
49ac5c
|
212 |
created() { |
5f3a2e
|
213 |
this.initStation(); |
懒 |
214 |
// this.getStationConfList(); |
|
215 |
// setTimeout(() => { |
|
216 |
// this.connectWebsocket(); |
|
217 |
// }, 3000); |
|
218 |
}, |
|
219 |
mounted() { |
|
220 |
|
49ac5c
|
221 |
}, |
懒 |
222 |
methods: { |
a36b83
|
223 |
Release(){ |
c346ab
|
224 |
let formulaChildParams = { |
懒 |
225 |
productCode: this.workpieceInformation.productCode, |
|
226 |
processesCode: this.headContent.processesCode |
|
227 |
} |
|
228 |
releaseCheck(formulaChildParams).then(response => { |
a36b83
|
229 |
if(response.data === 0){ |
懒 |
230 |
//改变状态 |
c346ab
|
231 |
workpieceRelease(formulaChildParams).then(response => { |
懒 |
232 |
}); |
a36b83
|
233 |
this.$message('放行成功!'); |
c346ab
|
234 |
this.formulaChildList = [] |
懒 |
235 |
this.getListFormulaChild() |
a36b83
|
236 |
}else { |
懒 |
237 |
this.$message('步骤未完成不许放行!'); |
|
238 |
} |
|
239 |
}); |
|
240 |
}, |
|
241 |
serialPortMethod(){ |
|
242 |
let formulaChildParams = { |
|
243 |
materialCode: this.serialPortContent |
|
244 |
} |
|
245 |
updateResults(formulaChildParams).then(response => { |
|
246 |
this.getListFormulaChild() |
|
247 |
}); |
|
248 |
}, |
|
249 |
rowStyle({ row }) { |
|
250 |
if (row.results === 'OK') { |
|
251 |
return 'background-color: PaleGreen'; |
|
252 |
} else if (row.results === 'NG') { |
|
253 |
return 'background-color: LightSalmon'; |
|
254 |
} |
|
255 |
return ''; |
49138a
|
256 |
}, |
d3409e
|
257 |
/** 查询配方配置子信息列表 */ |
懒 |
258 |
getListFormulaChild() { |
|
259 |
this.formulaChildParams.productCode = this.workpieceInformation.productCode |
c346ab
|
260 |
this.formulaChildParams.processesCode = this.headContent.processesCode |
d3409e
|
261 |
listFormulaChild(this.formulaChildParams).then(response => { |
懒 |
262 |
this.formulaChildList = response.rows; |
|
263 |
}); |
|
264 |
}, |
5a6d6b
|
265 |
changeMenu(tab, event) { |
懒 |
266 |
console.log(tab, event); |
|
267 |
}, |
49ac5c
|
268 |
clearClick(){ |
懒 |
269 |
this.$message('这是一条清除消息提示'); |
|
270 |
this.headContent.sfcCode = null |
|
271 |
}, |
|
272 |
scanCompleted(){ |
5a6d6b
|
273 |
this.$message('扫码完成'+this.content); |
懒 |
274 |
this.headContent.sfcCode = this.content |
|
275 |
this.queryParams.sfcCode = this.content |
49ac5c
|
276 |
this.getList() |
a36b83
|
277 |
this.getListFormulaChild() |
49ac5c
|
278 |
this.cakeLamp.scanFinish = 1 |
49138a
|
279 |
this.cakeLamp.startWork = 1 |
懒 |
280 |
|
49ac5c
|
281 |
}, |
懒 |
282 |
/** 查询报工记录 表列表 */ |
49138a
|
283 |
async getList() { |
懒 |
284 |
await listWorkReport(this.queryParams).then(response => { |
49ac5c
|
285 |
let rowsData = response.rows[0]; |
a36b83
|
286 |
console.log(rowsData) |
49ac5c
|
287 |
this.workpieceInformation.workOrderCode = rowsData.workOrderCode; |
懒 |
288 |
this.workpieceInformation.productCode = rowsData.productCode; |
|
289 |
this.workpieceInformation.productModel = rowsData.productModel; |
|
290 |
this.workpieceInformation.productName = rowsData.productName; |
|
291 |
this.timer = setInterval(() => { |
|
292 |
this.workpieceInformation.beat++; |
|
293 |
}, 1000); |
|
294 |
}); |
49138a
|
295 |
this.getListFormulaChild() |
懒 |
296 |
|
49ac5c
|
297 |
}, |
懒 |
298 |
allowRelease(){ |
|
299 |
clearInterval(this.timer); |
|
300 |
this.$message('保存节拍为'+this.workpieceInformation.beat+'秒'); |
|
301 |
}, |
|
302 |
/** 查询工位终端配置列表 */ |
49138a
|
303 |
// async getStationConfList() { |
懒 |
304 |
// await getIpv4().then(response => { |
|
305 |
// this.StationConfQueryParams.ipAddress = response.msg |
|
306 |
// console.log('查询到本工位IP为'+this.StationConfQueryParams.ipAddress) |
|
307 |
// }); |
|
308 |
// listStationConf(this.StationConfQueryParams).then(response => { |
|
309 |
// let rows = response.rows[0] |
|
310 |
// if(response.rows.length===0){ |
|
311 |
// this.$message('该工位没有配置IP,请联系管理员配置IP'); |
|
312 |
// return |
|
313 |
// } |
|
314 |
// this.headContent.processesName = rows.processesName |
|
315 |
// this.headContent.processesCode = rows.processesCode |
|
316 |
// console.log('设置工位编码'+this.headContent.processesCode) |
|
317 |
// |
|
318 |
// }); |
|
319 |
// }, |
|
320 |
// connectWebsocket() { |
|
321 |
// console.log('websocket连接工位为'+this.headContent.processesCode) |
|
322 |
// const wsuri = this.url + this.headContent.processesCode; |
|
323 |
// this.ws = new WebSocket(wsuri); |
|
324 |
// const self = this; |
|
325 |
// this.ws.onopen = function (event) { |
|
326 |
// // self.text_content = self.text_content + "已经打开连接!" + "\n"; |
|
327 |
// this.$message('websocket连接成功!'); |
|
328 |
// }; |
|
329 |
// this.ws.onmessage = function (event) { |
|
330 |
// self.text_content = event.data + "\n"; |
|
331 |
// console.log(event.data) |
|
332 |
// if(event.data === "IN"){ |
|
333 |
// self.cakeLamp.InPlace = "1" |
|
334 |
// }else if(event.data === "OUT"){ |
|
335 |
// self.cakeLamp.outRsSign = "1" |
|
336 |
// } |
|
337 |
// }; |
|
338 |
// }, |
5f3a2e
|
339 |
exit() { |
懒 |
340 |
if (this.ws) { |
|
341 |
this.ws.close(); |
|
342 |
this.ws = null; |
|
343 |
} |
|
344 |
}, |
|
345 |
send() { |
|
346 |
if (this.ws) { |
|
347 |
this.ws.send(this.message); |
|
348 |
} else { |
|
349 |
alert("未连接到服务器"); |
|
350 |
} |
|
351 |
}, |
|
352 |
async initStation(){ |
|
353 |
await getIpv4().then(response => { |
|
354 |
this.StationConfQueryParams.ipAddress = response.msg |
|
355 |
console.log('查询到本工位IP为'+this.StationConfQueryParams.ipAddress) |
|
356 |
}); |
|
357 |
await listStationConf(this.StationConfQueryParams).then(response => { |
|
358 |
let rows = response.rows[0] |
|
359 |
if(response.rows.length===0){ |
|
360 |
this.$message('该工位没有配置IP,请联系管理员配置IP'); |
|
361 |
return |
|
362 |
} |
|
363 |
this.headContent.processesName = rows.processesName |
|
364 |
this.headContent.processesCode = rows.processesCode |
|
365 |
console.log('设置工位编码'+this.headContent.processesCode) |
|
366 |
|
|
367 |
}); |
|
368 |
console.log('websocket连接工位为'+this.headContent.processesCode) |
|
369 |
const wsuri = this.url + this.headContent.processesCode; |
|
370 |
this.ws = new WebSocket(wsuri); |
|
371 |
const self = this; |
|
372 |
this.ws.onopen = function (event) { |
|
373 |
this.$message('websocket连接成功!'); |
|
374 |
}; |
|
375 |
this.ws.onmessage = function (event) { |
|
376 |
self.text_content = event.data + "\n"; |
|
377 |
console.log(event.data) |
49138a
|
378 |
if(event.data === "IN"){ |
懒 |
379 |
self.cakeLamp.InPlace = 1 |
|
380 |
}else if(event.data === "OUT"){ |
|
381 |
self.cakeLamp.release = 1 |
|
382 |
setTimeout(() => { |
|
383 |
this.resetting() |
|
384 |
}, 2000); // 延时2秒触发 |
a36b83
|
385 |
}else if(event.data === 'TIGHTEN'){ |
懒 |
386 |
console.log('开始拧紧') |
c346ab
|
387 |
this.formulaChildList = [] |
a36b83
|
388 |
self.getListFormulaChild() |
5f3a2e
|
389 |
} |
懒 |
390 |
}; |
49138a
|
391 |
}, |
懒 |
392 |
resetting() { |
|
393 |
this.cakeLamp = { |
|
394 |
InPlace: 0, |
|
395 |
release: 0, |
|
396 |
startWork: 0, |
|
397 |
scanFinish: 0, |
|
398 |
} |
5f3a2e
|
399 |
} |
49ac5c
|
400 |
} |
b0742c
|
401 |
} |
C |
402 |
|
|
403 |
</script> |
589dc7
|
404 |
<style scoped> |
懒 |
405 |
.bottom-card{ |
|
406 |
height: 600px; |
b0742c
|
407 |
} |
589dc7
|
408 |
.circle-button{ |
8586e1
|
409 |
height: 30px; |
A |
410 |
width: 30px; |
|
411 |
} |
49ac5c
|
412 |
.circle-red { |
懒 |
413 |
background-color: #e01a4f; |
|
414 |
} |
|
415 |
.circle-green { |
|
416 |
background-color: green; |
|
417 |
} |
|
418 |
.circle-green-animate { |
|
419 |
background-color: green; |
|
420 |
animation: circle-green-animate 2s infinite; |
|
421 |
} |
|
422 |
@keyframes circle-green-animate { |
|
423 |
50% { |
|
424 |
opacity: 0.6; |
|
425 |
} |
|
426 |
0% { |
|
427 |
opacity: 0.2; |
|
428 |
} |
|
429 |
} |
|
430 |
.head-font{ |
|
431 |
font-weight: bold; |
|
432 |
font-size: 25px; |
|
433 |
} |
8586e1
|
434 |
span{ |
A |
435 |
font-size: 15px; |
b0742c
|
436 |
} |
a36b83
|
437 |
.el-table .warning-row { |
懒 |
438 |
background: oldlace; |
|
439 |
} |
|
440 |
|
|
441 |
.el-table .success-row { |
|
442 |
background: #f0f9eb; |
|
443 |
} |
b0742c
|
444 |
</style> |
5a6d6b
|
445 |
|