admin
2 天以前 22260b8e7349fe03402529d4918739b276113340
提交 | 用户 | 时间
b78728 1 <template>
A 2   <div class="app-container">
3     <el-row :gutter="5">
4       <el-col :span="7">
5         <el-card shadow="never">
6           <span class="head-font">工位编号 : {{headContent.processesCode}}</span>
7         </el-card>
8       </el-col>
9       <el-col :span="7">
10         <el-card shadow="never">
11           <span class="head-font">工位名称 : {{headContent.processesName}}</span>
12         </el-card>
13       </el-col>
14       <el-col :span="10">
15         <el-card shadow="never">
22260b 16           <span class="head-font">产品序列号 :</span>
A 17           <el-input style="width: 50%;" v-model="headContent.sfcCode" placeholder="请输入内容"></el-input>
18 <!--          <el-button type="primary" id="print" v-print="'#printMe'">打印</el-button>-->
19           <el-button type="primary" id="print" v-print="'#printMe'">打印</el-button>
20 <!--          <el-button id="print" @click="print1" type="primary">打印</el-button>-->
21           <el-button type="primary" style="margin-left: -70px;opacity: 0;" @click="printBefore">打印</el-button>
22           <el-button @click="clearClick" type="danger">清除</el-button>
b78728 23         </el-card>
A 24       </el-col>
25
26     </el-row>
27     <el-row :gutter="5" style="margin-top: 5px">
22260b 28       <el-col :span="24">
b78728 29         <el-tabs type="border-card"  style="height: 600px" v-model="activeName" @tab-click="changeMenu">
A 30           <el-tab-pane name="first">
31             <span slot="label"> <a class="el-icon-date"></a>首页</span>
32             <el-col :span="24">
33               <div>
22260b 34                 <div id="printMe" class="print_hide">
A 35                   <offline-qualification-report :printParam="printParam"></offline-qualification-report>
b78728 36                 </div>
A 37               </div>
38             </el-col>
39           </el-tab-pane>
40         </el-tabs>
41       </el-col>
42     </el-row>
43   </div>
44 </template>
45 <script>
46 import {getIpv4, listStationConf} from "@/api/main/sc/stationConf";
47 import {
48   noPageListFormulaChild,
49   workpieceRelease,
50   yzUpdateResults,
51   yzUpdateTighteningFormula
52 } from "@/api/main/bs/formulaChild/formulaChild";
53 import MySerialPort from "@/utils/MySerialPort";
54 import USBDevice from "@/utils/usb.json";
55 import {addPassingStationCollection} from "@/api/main/da/passingStationCollection/passingStationCollection";
56 import {
57   addTighteningParameters, enterWeighing,
58   replaceAssemblyCode,
59   saveCampaignTimeParameters,
60   yzAddBasicParameters,
61 } from "@/api/main/da/paramCollection/paramCollection";
62 import QRCode from "qrcodejs2";
2dd455 63 import OfflineQualificationReport from "@/views/components/offlineQualificationReport.vue";
b78728 64
A 65 export default {
66   name: "stationTerminal",
2dd455 67   components: {OfflineQualificationReport},
b78728 68   data() {
A 69     return {
22260b 70       printParam: {
A 71         key: '选项1',
72         label: '黄金糕'
73       },
b78728 74       weightValue: '',
A 75       showInput: true,
76       serialPortContent: '',
77       // 查询参数
78       formulaChildParams: {
79         pageNum: 1,
80         pageSize: 10,
81         productCode: null,
82         processesCode: null,
83       },
84       // 配方配置子信息表格数据
85       formulaChildList: [],
86       ipAddress: '',
87       imgSrc: '',
88       headContent: {
89         processesCode: 'OP520',
90         processesName: '成品下线',
91         sfcCode: '',
92         yzSfcCode: '',
93       },
94       workpieceInformation: {
95         workOrderNo: null,
96         productCode: null,
97         productModel: null,
98         productName: null,
99         beat: null,
100       },
101       // 查询参数
102       queryParams: {
103         pageNum: 1,
104         pageSize: 10,
105         sfcCode: null,
106       },
107       // 查询参数
108       StationConfQueryParams: {
109         pageNum: 1,
110         pageSize: 10,
111         ipAddress: null,
112       },
113       cakeLamp: {
114         plcState: 1, //plc
115         scannerState: 1, //扫码枪
116         InPlace: 0, //工件到位
117         scanFinish: 0,
118         startWork: 0,
119         release: 0 //允许放行
120       },
121       content: '',
122       activeName: 'first',
d5a701 123       url: "ws://192.168.20.250:8080/websocket/message/",
b78728 124       message: "",
A 125       text_content: "",
126       ws: null,
127       inputValue: '9',
128
129       open1: false,
130       input: "",
131       keepReading: true,
132       form1: {
133         baudRate: "115200",
134         dataBits: "8",
135         stopBits: "1",
136         parity: "none",
137         flowControl: "none",
138         desc: "",
139         type: "1",
140         isShowHistory: false,
141       },
142       btnType: "primary",
143       btnText: "连接串口",
144       restaurants: [],
145       portsList: [],
146       isShowSendArea: false,
147       readType: 1,
148       title: "",
149
150       passingStationForm: {},
151       originalArray: [],
152       text1: '',
153     }
154   },
155   created() {
156     this.initStation();
157     // this.getStationConfList();
158     // setTimeout(() => {
159     //   this.connectWebsocket();
160     // }, 3000);
161   },
162   mounted() {
163     if ("serial" in navigator) {
164       this.myserialport = new MySerialPort();
165       this.getPorts();
166       navigator.serial.addEventListener("connect", (e) => {
167         this.$message.success("设备已连接");
168         this.getPorts();
169       });
170       navigator.serial.addEventListener("disconnect", (e) => {
171         this.$message.error("设备已断开");
172       });
173       this.restaurants = this.loadAll();
174     } else {
175       this.$message.error(
176         "当前为HTTP模式或者浏览器版本过低,不支持网页连接串口"
177       );
178     }
179   },
180   computed: {
181     isDisable() {
182       return this.btnType === "danger";
183     },
22260b 184     printContent() {
A 185       return {
186         // id: '',
187         // id: '#printMe',
188         // preview: false,
189       }
190     }
b78728 191   },
A 192   methods: {
22260b 193
A 194
b78728 195     enterWeighing(){
A 196       if(this.headContent.sfcCode ==='' || this.weightValue === '' ){
197         this.$message.error('参数不全!');
198       }else {
199         let param = {
200           sfcCode: this.headContent.sfcCode,
201           weightValue: this.weightValue,
202         }
203         enterWeighing(param).then(response => {
204           this.$message('录入完成!');
205         });
206       }
207     },
208     serialLink() {
209       this.open1 = true
210     },
211     bindYzSfc(){
212       if(this.headContent.sfcCode!==""&&this.headContent.yzSfcCode!==""){
213         let param = {
214           sfcCode: this.headContent.sfcCode,
215           locationCode: this.headContent.processesCode,
216           yzSfcCode: this.headContent.yzSfcCode
217         }
218         this.$message('可以绑定!');
219         replaceAssemblyCode(param).then(response => {
220
221         });
222       }
223     },
224
225     Release(){
226       // this.$message('portsList!'+this.portsList.length);
227       if(this.btnType === "danger"){
228         this.$message('连接了!!');
229
230       }else {
231         this.$message('mei连接了!');
232
233       }
234
235     },
236     serialPortMethod(value){
237       let formulaChildParams = {
238         scanBarcode: value,
239         sfcBarcode: this.headContent.sfcCode,
240         workOrderNo: this.workpieceInformation.workOrderNo,
241         productCode: "1P102S",
242         locationCode: this.headContent.processesCode,
243         collectionTime: new Date()
244       }
245       yzUpdateResults(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 = "1P102S"
260       this.formulaChildParams.processesCode = this.headContent.processesCode
261       console.log(this.formulaChildParams)
262       noPageListFormulaChild(this.formulaChildParams).then(response => {
263         this.formulaChildList = response.rows;
264         if (this.formulaChildList.length >0){
265           let pos = 0
266           const tempArr = this.formulaChildList.filter(x=> 'OK' === x.results)
267           if (tempArr.length>0){
268             pos = tempArr.length
269             this.$nextTick(() => {
270               let temp33 = document.getElementsByClassName('el-table__row')
271               console.log('temp33',temp33)
272               console.log('len',temp33.item(pos))
273               if (temp33.length > 0){
274                 console.log('1111111111111111')
275                 let arr = temp33[pos-1]
276                 console.log('srr',arr)
277                 arr.scrollIntoView({ block: 'center' })
278               }
279             })
280           }
281
282         }
283       });
284     },
285     endClear(){
286
287     },
288     changeMenu(tab, event) {
289       console.log(tab, event);
290     },
291     clearClick(){
292       this.$message('这是一条清除消息提示');
293       this.headContent.sfcCode = null
294     },
295     scanCompleted(){
296       this.$message('扫码完成'+this.content);
297       this.headContent.sfcCode = this.content
298       this.queryParams.sfcCode = this.content
299       this.getList()
300       this.getListFormulaChild()
301       this.cakeLamp.scanFinish = 1
302       this.cakeLamp.startWork = 1
303
304     },
305     /** 查询工单列表 */
306     async getList() {
307       // this.getListFormulaChild()
308       // this.addOverStationCollection()
309       this.print1()
310     },
22260b 311     printBefore() {
A 312       if (this.headContent.sfcCode !== '') {
313         document.getElementById('print').click();
314       } else {
315         alert('请先扫码');
b78728 316       }
A 317     },
22260b 318     // print1() {
A 319     //   if(this.headContent.sfcCode !== ''){
320     //     // 新开页面打印
321     //     const value = 'Hello, Parent!';
322     //     this.$emit('value-sent', value);
323     //     let newStr = document.getElementById('printMe').innerHTML;
324     //     let newWin = window.open('', '_blank');
325     //     newWin.document.body.innerHTML = newStr;
326     //     newWin.print();
327     //     return;
328     //   }else {
329     //     this.$message.error('请先扫码');
330     //   }
331     // },
b78728 332     /** 入站增加过站采集记录 **/
A 333     addOverStationCollection(){
334       this.passingStationForm = {
335         id: null,
336         // workOrderNo: this.workpieceInformation.workOrderNo,
337         productCode: "1P102S",
338         locationCode: this.headContent.processesCode,
339         // model: this.workpieceInformation.productModel,
340         productBarcode: this.headContent.sfcCode,
341         sfcCode: this.headContent.sfcCode,
342         inboundTime: new Date()
343       }
344       addPassingStationCollection(this.passingStationForm).then(response => {});
345       yzAddBasicParameters(this.passingStationForm).then(response => {});
346     },
347     initStation: async function () {
348       await getIpv4().then(response => {
349         this.StationConfQueryParams.ipAddress = response.msg
350         console.log('查询到本工位IP为' + this.StationConfQueryParams.ipAddress)
351       });
352       await listStationConf(this.StationConfQueryParams).then(response => {
353         let rows = response.rows[0]
354         if (response.rows.length === 0) {
355           // this.$message('该工位没有配置IP,请联系管理员配置IP');
356           return
357         }
358         this.headContent.processesName = rows.processesName
359         this.headContent.processesCode = rows.processesCode
360         console.log('设置工位编码' + this.headContent.processesCode)
361
362       });
363       this.conCom()
364       console.log('websocket连接工位为' + this.headContent.processesCode)
365       const wsuri = this.url + this.headContent.processesCode;
366       this.ws = new WebSocket(wsuri);
367       const self = this;
368       this.ws.onopen = function (event) {
369         this.$message('websocket连接成功!');
370       };
371       this.ws.onmessage = function (event) {
4280d7 372         if (event.data === "print") {
A 373           self.$message('postman调用打印方法打印!');
374           // self.print1()
375           document.getElementById('print').click();
376         }else if (event.data === "IN") {
b78728 377           self.cakeLamp.InPlace = 1;
A 378         } else if (event.data === "IN0") {
379           self.cakeLamp.InPlace = 0;
380         } else if (event.data === "OUT") {
381           console.log("out")
382
383           const param = {
384             workOrderNo: self.workpieceInformation.workOrderNo,
385             productCode: "1P102S",
386             locationCode: self.headContent.processesCode,
387             productBarcode: self.headContent.sfcCode,
388           }
389           // saveCampaignTimeParameters(param).then(response => {});
390           // self.cakeLamp.release = 1;
391           workpieceRelease(param).then(response => {});
392           self.formulaChildList = [];
393           self.headContent.sfcCode = '';
394           console.log(self.formulaChildList)
395         } else if (event.data === "END") {
396           // const param = {
397           //   workOrderNo: self.workpieceInformation.workOrderNo,
398           //   productCode: self.workpieceInformation.productCode,
399           //   locationCode: self.headContent.processesCode,
400           //   productBarcode: self.headContent.sfcCode,
401           // }
402           // saveCampaignTimeParameters(param).then(response => {});
403           // self.endClear()
404           // workpieceRelease(param).then(response => {});
405         } else if (event.data.includes("[")) {
406           let formulaChilds = "";
407           self.formulaChildList.sort((a, b) => a.stepSort - b.stepSort);
408           self.formulaChildList
409             .filter((formulaChild) => formulaChild.operationType === '1');
410           for (let i = 0; i < self.formulaChildList.length; i++) {
411             let formulaChild = self.formulaChildList[i];
412             let results = formulaChild.results;
413             if (results === '' || results === null || results === 'NG') {
414               formulaChilds = formulaChild;
415               break;
416             }
417           }
418           const param = {
419             tightenTheArray: event.data,
420             paramCode: formulaChilds.paramCode,
421             // workOrderNo: self.workpieceInformation.workOrderNo,
422             productCode: "1P102S",
423             locationCode: self.headContent.processesCode,
424             productBarcode: self.headContent.sfcCode,
425           }
426           addTighteningParameters(param).then(response => {});
427           yzUpdateTighteningFormula(param).then(response => {
428             console.log(response.msg)
429             if(response.msg === "1"){
430               self.getListFormulaChild()
431
432             }else {
433               const param = {
434                 workOrderNo: self.workpieceInformation.workOrderNo,
435                 productCode: "1P102S",
436                 locationCode: self.headContent.processesCode,
437                 productBarcode: self.headContent.sfcCode,
438               }
439               saveCampaignTimeParameters(param).then(response => {});
440               workpieceRelease(param).then(response => {});
441               self.formulaChildList = [];
442               self.headContent.sfcCode = '';
443             }
444           });
445         }
446       };
447     },
448
449
450
451     //接受数据的回调
452     callBack(value) {
453       if (this.form1.isShowHistory) this.form1.desc = this.readLi().join("");
454       else {
455         const scanValue = this.myserialport.hex2atostr(value).replace(/[\r\n]/g, '');
456         console.log("串口收到数据-------------------"+scanValue)
457         this.test1()
458         this.test2()
459         this.text1 = scanValue
460         this.headContent.sfcCode = scanValue
461         // this.print1()
462         // setTimeout(() => {
463         //   this.print()
464         // },50)
465         // this.getList()
466
467       }
468     },
469     clearHistory() {
470       this.form1.desc = "";
471       this.myserialport.state.readValue = [];
472     },
473     loadHistory() {
474       if (this.form1.isShowHistory) this.form1.desc = this.readLi().join("");
475       else {
476         let temp = this.readLi();
477         if (temp.length > 0) this.form1.desc = temp[temp.length - 1].join("");
478       }
479     },
480     readLi() {
481       let readType = this.readType;
482       return this.myserialport.state.readValue.map((items, index) => {
483         const item = items.value;
484         const type = items.type; // 1接收,2发送
485         let body = [];
486         if (item !== undefined) {
487           let strArr = [];
488           for (let hex of Array.from(item)) {
489             strArr.push(hex.toString(16).toLocaleUpperCase());
490           }
491           if (strArr.includes("D") && strArr.includes("A")) {
492             if (strArr.indexOf("A") - strArr.indexOf("D") === 1) {
493               strArr.splice(strArr.indexOf("D"), 1);
494               strArr.splice(strArr.indexOf("A"), 1, <br key={0} />);
495             }
496           }
497           strArr = strArr.map((item) => {
498             if (typeof item === "string") {
499               if (readType === 1) {
500                 return this.myserialport.hex2a(parseInt(item, 16));
501               } else if (readType === 2) {
502                 return item + " ";
503               }
504             }
505             return item;
506           });
507           if (typeof strArr[strArr.length - 1] === "string") {
508             strArr.push("\r\n");
509           }
510           body.push(strArr.join(""));
511         }
512         return body;
513       });
514     },
515     conCom(){
516       try {
517         this.myserialport.state.baudRate = this.form1.baudRate;
518         this.myserialport.state.dataBits = this.form1.dataBits;
519         this.myserialport.state.stopBits = this.form1.stopBits;
520         this.myserialport.state.parity = this.form1.parity;
521         this.myserialport.state.flowControl = this.form1.flowControl;
522         this.myserialport.openPort(0, true, this.callBack);
523         console.log(this.form1.port)
524       } catch (error) {
525         this.$message.error("串口连接失败!请检查串口是否已被占用");
526       }
527       if (this.myserialport.state.isOpen) {
528         this.$message.success("串口连接成功");
529       }
530     },
531     //连接
532     async connectBtn() {
533       if (this.btnType === "primary") {
534         try {
535           this.myserialport.state.baudRate = this.form1.baudRate;
536           this.myserialport.state.dataBits = this.form1.dataBits;
537           this.myserialport.state.stopBits = this.form1.stopBits;
538           this.myserialport.state.parity = this.form1.parity;
539           this.myserialport.state.flowControl = this.form1.flowControl;
540           await this.myserialport.openPort(this.form1.port, true, this.callBack);
541           console.log(this.form1.port)
542         } catch (error) {
543           this.$message.error("串口连接失败!请检查串口是否已被占用");
544         }
545         if (this.myserialport.state.isOpen) {
546           this.$message.success("串口连接成功");
547           this.open1 = false
548           this.btnType = "danger";
549           this.btnText = "关闭串口";
550         }
551       } else {
552         this.myserialport.openPort(this.form1.port, false, this.callBack);
553         this.$message.success("串口关闭成功");
554         this.btnType = "primary";
555         this.btnText = "连接串口";
556       }
557     },
558     //授权
559     async obtainAuthorization() {
560       if ("serial" in navigator) {
561         console.log("The Web Serial API is supported.");
562         if (!this.myserialport) this.myserialport = new MySerialPort();
563         try {
564           await this.myserialport.handleRequestPort();
565           this.$message.success("串口授权成功");
566           this.getPortInfo(this.myserialport.state.ports);
567         } catch (error) {
568           this.$message.warning("未选择新串口授权!");
569         }
570       } else {
571         this.$message.error(
572           "当前为HTTP模式或者浏览器版本过低,不支持网页连接串口"
573         );
574       }
575     },
576     //串口列表初始化
577     getPortInfo(portList) {
578       this.portsList = [];
579       portList.map((port, index) => {
580         const { usbProductId, usbVendorId } = port.getInfo();
581         if (usbProductId === undefined || usbVendorId === undefined) {
582           this.portsList.push({ label: "未知设备" + index, value: index });
583         } else {
584           const usbVendor = USBDevice.filter(
585             (item) => parseInt(item.vendor, 16) === usbVendorId
586           );
587           let usbProduct = [];
588           if (usbVendor.length === 1) {
589             usbProduct = usbVendor[0].devices.filter(
590               (item) => parseInt(item.devid, 16) === usbProductId
591             );
592           }
593           this.portsList.push({ label: usbProduct[0].devname, value: index });
594         }
595       });
596     },
597     // 发送
598     async sendCommon() {
599       if (this.myserialport.state.isOpen) {
600         if (this.form1.sendMsg.length !== 0) {
601           const writeType = this.form1.type;
602           let value = this.form1.sendMsg;
603           let arr = [];
604           if (writeType === 1) {
605             // ASCII
606             for (let i = 0; i < value.length; i++) {
607               arr.push(this.myserialport.a2hex(value[i]));
608             }
609           } else if (writeType === 2) {
610             // HEX
611             if (/^[0-9A-Fa-f]+$/.test(value) && value.length % 2 === 0) {
612               for (let i = 0; i < value.length; i = i + 2) {
613                 arr.push(parseInt(value.substring(i, i + 2), 16));
614               }
615             } else {
616               this.$message.error("格式错误");
617               return;
618             }
619           }
620           this.myserialport.writeText(arr);
621         } else {
622           this.$message.warning("请输入发送的信息");
623         }
624       } else {
625         this.$message.warning("串口处于关闭状态,请连接串口");
626       }
627     },
628     async getPorts() {
629       await this.myserialport.getPorts();
630       this.getPortInfo(this.myserialport.state.ports);
631     },
632     querySearch(queryString, cb) {
633       var restaurants = this.restaurants;
634       var results = queryString
635         ? restaurants.filter(this.createFilter(queryString))
636         : restaurants;
637       // 调用 callback 返回建议列表的数据
638       cb(results);
639     },
640     createFilter(queryString) {
641       return (restaurant) => {
642         return (
643           restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
644           0
645         );
646       };
647     },
648     loadAll() {
649       return [
650         { value: "110" },
651         { value: "300" },
652         { value: "600" },
653         { value: "1200" },
654         { value: "2400" },
655         { value: "4800" },
656         { value: "7200" },
657         { value: "9600" },
658         { value: "14400" },
659         { value: "19200" },
660         { value: "28800" },
661         { value: "38400" },
662         { value: "56000" },
663         { value: "57600" },
664         { value: "76800" },
665         { value: "115200" },
666         { value: "230400" },
667         { value: "460800" },
668       ];
669     },
670   }
671 }
672
673 </script>
22260b 674
b78728 675 <style scoped>
359f3b 676 .div1, .div2 {
A 677   flex: 1; /* 两个div平分容器宽度 */
678 }
3dca2f 679 .span{
A 680   font-family: 'Microsoft YaHei', sans-serif;
681 }
359f3b 682 .div2{
A 683   margin-left: 30px;
684 }
b78728 685 .bottom-card{
A 686   height: 600px;
687 }
688 .circle-button{
689   height: 30px;
690   width: 30px;
691 }
692 .circle-red {
693   background-color: #e01a4f;
694 }
695 .circle-green {
696   background-color: green;
697 }
698 .circle-green-animate {
699   background-color: green;
700   animation: circle-green-animate 2s infinite;
701 }
702 @keyframes circle-green-animate {
703   50% {
704     opacity: 0.6;
705   }
706   0% {
707     opacity: 0.2;
708   }
709 }
710 .head-font{
711   /*font-weight: bold;*/
712   /*font-size: 25px;*/
713 }
714 span{
715   font-size: 15px;
716 }
717 .el-table .warning-row {
718   background: oldlace;
719 }
720
721 .el-table .success-row {
722   background: #f0f9eb;
723 }
724 </style>
725