湖州智芯动力MES
查看 | 历史 | 提交 | 提交对比
懒羊羊
2024-01-31 e57a8990ae56f657a59c435a0613c5f7a8728003
提交 | 用户 | 时间
e57a89 1 <template>
懒 2   <div class="app-container">
3    <el-row :gutter="5">
4      <el-col :span="6">
5        <el-card shadow="never">
6          <span class="head-font">工位编号 : {{headContent.processesCode}}</span>
7        </el-card>
8      </el-col>
9      <el-col :span="6">
10        <el-card shadow="never">
11          <span class="head-font">工位名称 : {{headContent.processesName}}</span>
12        </el-card>
13      </el-col>
14      <el-col :span="12">
15        <el-card shadow="never">
16          <span class="head-font">总成编码 : {{headContent.sfcCode}}</span>
17          <el-input v-model="content" style="float: right;width: 150px;" placeholder="请输入内容"></el-input>
18          <el-button @click="scanCompleted" style="float: right" type="primary">扫码完成</el-button>
19          <el-button @click="clearClick" style="float: right" type="danger">清除</el-button>
20        </el-card>
21      </el-col>
22
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">
28            <i class="el-icon-tickets"></i>
29            <span style="font-weight: bold">当前工件信息</span>
30          </div>
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>
34            </el-descriptions-item>
35            <el-descriptions-item label="产品编号">
36              <span>{{workpieceInformation.productCode}}</span>
37            </el-descriptions-item>
38            <el-descriptions-item label="产品型号">
39              <span>{{workpieceInformation.productModel}}</span>
40            </el-descriptions-item>
41            <el-descriptions-item label="产品名称">
42              <span>{{workpieceInformation.productName}}</span>
43            </el-descriptions-item>
44            <el-descriptions-item label="节拍">
45              <span>{{workpieceInformation.beat}}</span>
46            </el-descriptions-item>
47          </el-descriptions>
48          <el-divider></el-divider>
49          <el-row>
50            <el-col :span="12">
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>
53              <span>&nbsp;PLC状态</span>
54            </el-col>
55            <el-col :span="12">
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>
58              <span>&nbsp;扫码枪状态</span>
59            </el-col>
60          </el-row>
61          <el-row style="margin-top: 20px">
62            <el-col :span="12">
63              <el-button class="circle-button" :class="cakeLamp.InPlace ? 'circle-green':'circle-red'" circle></el-button>
64              <span style="display: none">{{cakeLamp.InPlace}}</span>
65              <span>&nbsp;工件到位</span>
66            </el-col>
67            <el-col :span="12">
68              <el-button class="circle-button" :class="cakeLamp.scanFinish ? 'circle-green':'circle-red'" circle></el-button>
69              <span style="display: none">{{cakeLamp.scanFinish}}</span>
70              <span>&nbsp;扫码完成</span>
71            </el-col>
72          </el-row>
73          <el-row style="margin-top: 20px">
74            <el-col :span="12">
75              <el-button class="circle-button" :class="cakeLamp.startWork ? 'circle-green':'circle-red'" circle></el-button>
76              <span style="display: none">{{cakeLamp.startWork}}</span>
77              <span>&nbsp;开始作业</span>
78            </el-col>
79            <el-col :span="12">
80              <el-button class="circle-button" :class="cakeLamp.release ? 'circle-green':'circle-red'" circle></el-button>
81              <span style="display: none">{{cakeLamp.release}}</span>
82              <span>&nbsp;允许放行</span>
83            </el-col>
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>
95          </el-row>
96          <el-row style="margin-top: 20px">
97              <el-button @click="Release" type="primary">放行</el-button>
98          </el-row>
99        </el-card>
100
101      </el-col>
102      <el-col :span="18">
103        <el-tabs type="border-card"  style="height: 600px" v-model="activeName" @tab-click="changeMenu">
104          <el-tab-pane name="first">
105            <span slot="label"> <a class="el-icon-date"></a>首页</span>
106            <el-col :span="8">
107              <el-table :cell-style="rowStyle" :data="formulaChildList">
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>
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>
118          <el-tab-pane name="second">
119            <span slot="label"> <b class="el-icon-date"></b>物料BOM</span>
120            <el-empty>
121              <span slot="description">暂无数据</span>
122            </el-empty>
123          </el-tab-pane>
124          <el-tab-pane name="third">
125            <span slot="label"> <b class="el-icon-date"></b>采集清单</span>
126            <el-empty>
127              <span slot="description">暂无数据</span>
128            </el-empty>
129          </el-tab-pane>
130          <el-tab-pane name="fourth">
131            <span slot="label"> <b class="el-icon-date"></b>安灯状态</span>
132            <el-empty>
133              <span slot="description">暂无数据</span>
134            </el-empty>
135          </el-tab-pane>
136          <el-tab-pane name="fifth">
137            <span slot="label"> <b class="el-icon-date"></b>工艺配方</span>
138            <el-empty>
139              <span slot="description">暂无数据</span>
140            </el-empty>
141          </el-tab-pane>
142        </el-tabs>
143      </el-col>
144    </el-row>
145   </div>
146 </template>
147 <script>
148 import {listWorkReport} from "@/api/main/om/workReport/workReport";
149 import {listStationConf,getIpv4} from "@/api/main/sc/stationConf";
150 import {listFormulaChild, releaseCheck, updateResults, workpieceRelease} from "@/api/main/bs/formulaChild/formulaChild";
151
152 export default {
153   name: "stationTerminal",
154   data() {
155     return {
156       serialPortContent: '',
157       // 查询参数
158       formulaChildParams: {
159         pageNum: 1,
160         pageSize: 10,
161         productCode: null,
162         processesCode: null,
163       },
164       // 配方配置子信息表格数据
165       formulaChildList: [],
166       ipAddress: '',
167       imgSrc: '',
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       },
186       // 查询参数
187       StationConfQueryParams: {
188         pageNum: 1,
189         pageSize: 10,
190         ipAddress: null,
191       },
192       cakeLamp: {
193         plcState: 1, //plc
194         scannerState: 1, //扫码枪
195         InPlace: 0, //工件到位
196         scanFinish: 0,
197         startWork: 0,
198         release: 0 //允许放行
199       },
200       content: '',
201       activeName: 'first',
202       url: "ws://192.168.10.252:8080/websocket/message/",
203       message: "",
204       text_content: "",
205       ws: null,
206       inputValue: '9'
207     }
208   },
209   beforeDestroy() {
210     this.exit();
211   },
212   created() {
213     this.initStation();
214     // this.getStationConfList();
215     // setTimeout(() => {
216     //   this.connectWebsocket();
217     // }, 3000);
218   },
219   mounted() {
220
221   },
222   methods: {
223     Release(){
224       let formulaChildParams = {
225         productCode: this.workpieceInformation.productCode,
226         processesCode: this.headContent.processesCode
227       }
228       releaseCheck(formulaChildParams).then(response => {
229         if(response.data === 0){
230           //改变状态
231           workpieceRelease(formulaChildParams).then(response => {
232           });
233           this.$message('放行成功！');
234           this.formulaChildList = []
235           this.getListFormulaChild()
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 '';
256     },
257     /** 查询配方配置子信息列表 */
258     getListFormulaChild() {
259       this.formulaChildParams.productCode = this.workpieceInformation.productCode
260       this.formulaChildParams.processesCode = this.headContent.processesCode
261       listFormulaChild(this.formulaChildParams).then(response => {
262         this.formulaChildList = response.rows;
263       });
264     },
265     changeMenu(tab, event) {
266       console.log(tab, event);
267     },
268     clearClick(){
269       this.$message('这是一条清除消息提示');
270       this.headContent.sfcCode = null
271     },
272     scanCompleted(){
273       this.$message('扫码完成'+this.content);
274       this.headContent.sfcCode = this.content
275       this.queryParams.sfcCode = this.content
276       this.getList()
277       this.getListFormulaChild()
278       this.cakeLamp.scanFinish = 1
279       this.cakeLamp.startWork = 1
280
281     },
282     /** 查询报工记录 表列表 */
283     async getList() {
284       await listWorkReport(this.queryParams).then(response => {
285         let rowsData = response.rows[0];
286         console.log(rowsData)
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       });
295       this.getListFormulaChild()
296
297     },
298     allowRelease(){
299       clearInterval(this.timer);
300       this.$message('保存节拍为'+this.workpieceInformation.beat+'秒');
301     },
302     /** 查询工位终端配置列表 */
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     // },
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)
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秒触发
385         }else if(event.data === 'TIGHTEN'){
386           console.log('开始拧紧')
387           this.formulaChildList = []
388           self.getListFormulaChild()
389         }
390       };
391     },
392     resetting() {
393       this.cakeLamp = {
394         InPlace: 0,
395         release: 0,
396         startWork: 0,
397         scanFinish: 0,
398       }
399     }
400   }
401 }
402
403 </script>
404 <style scoped>
405 .bottom-card{
406   height: 600px;
407 }
408 .circle-button{
409   height: 30px;
410   width: 30px;
411 }
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 }
434 span{
435   font-size: 15px;
436 }
437 .el-table .warning-row {
438   background: oldlace;
439 }
440
441 .el-table .success-row {
442   background: #f0f9eb;
443 }
444 </style>
445