admin
2024-07-01 768498719683f85e5ed19c73eb3d14cdbf420df4
提交 | 用户 | 时间
01cdff 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">
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 type="primary" style="float: right" icon="el-icon-search" size="mini" @click="serialLink">串口连接</el-button>
20           <el-button @click="clearClick" style="float: right" type="danger" size="mini">清除</el-button>
21         </el-card>
22       </el-col>
23
24     </el-row>
25     <el-row :gutter="5" style="margin-top: 5px">
8cfe20 26       <el-col :span="12">
01cdff 27         <el-tabs type="border-card"  style="height: 600px" v-model="activeName" @tab-click="changeMenu">
A 28           <el-tab-pane name="first">
29             <span slot="label"> <a class="el-icon-date"></a>首页</span>
30             <el-col :span="24">
31               <div>
32                 <div style="display: none" id="printMe">
88c849 33                   <br>
d76bba 34                   <p style="margin-left: 43px">9900166410</p>
A 35                   <p style="margin-left: 43px">HW001.001</p>
36                   <p style="margin-left: 43px">SW002.005</p>
01cdff 37                   <br>
d76bba 38                   <span style="font-size: 30px;font-weight: bold;margin-left: 40px;">GEELY</span><br>
A 39                   <span style="font-size: 10px;margin-left: 29px">COMMERCIAL VEHICLE</span><br>
40                   <span style="margin-left: 60px">H2155D</span><br>
41                   <span style="margin-left: 63px">993083</span><br>
42                   <span style="margin-left: 40px">9900166410</span><br>
43                   <span style="font-size: 10px;margin-left: 17px;">{{text1}}</span>
01cdff 44                   <br>
A 45                   <br>
46                   <br>
47                   <br>
768498 48                   <div ref="canvasWrapper" id="canvasWrapper1" style="display: flex;justify-content: center;margin-top: -27px;"></div>
d76bba 49                   <span style="font-size: 10px;word-break: break-all;display: flex;justify-content: center;width: 155px;margin-left: 9px">P9900166410#T{{text1}}#V993983#SSW002.005#HHW001.001#NBMS#</span>
01cdff 50                   <br>
88c849 51                   <br>
H 52                   <div ref="canvasWrapper" id="canvasWrapper2" style="display: flex;justify-content: center;margin-top: -27px"></div>
d76bba 53                   <span style="font-size: 10px;word-break: break-all;display: flex;justify-content: center;width: 155px;margin-left: 9px">P9900166410#T{{text1}}#V993983#SSW002.005#HHW001.001#NBMS#</span>
01cdff 54                 </div>
A 55                 <el-button @click="print1">打印</el-button>
56                 <el-button style="display: none" @click="test1">生成二维码</el-button>
88c849 57                 <el-button style="display: none" @click="test2">生成二维码</el-button>
01cdff 58
A 59               </div>
60             </el-col>
61           </el-tab-pane>
62         </el-tabs>
8cfe20 63       </el-col>
A 64       <el-col :span="12">
65         <el-input v-model="weightValue" placeholder="请输入称重数据"></el-input>
66         <el-button @click="enterWeighing">录入</el-button>
01cdff 67       </el-col>
A 68     </el-row>
69     <el-dialog v-dialogpop-up :title="title" :visible.sync="open1" width="1000" append-to-body>
70       <el-row
71         type="flex"
72         class="row-bg"
73         justify="center"
74         v-show="portsList.length === 0"
75       >
76         <el-col :span="7">
77           <div style="margin-top: 400px">
78           <span style="display: block">
79             仅支持Chrome 89+或者Edge 89+浏览器(安全上下文(HTTPS)中可用)
80           </span>
81             <el-button type="primary" @click="obtainAuthorization">授权</el-button>
82           </div>
83         </el-col>
84       </el-row>
85       <el-form
86         v-show="portsList.length > 0"
87         ref="form1"
88         :model="form1"
89         label-width="100px">
90         <el-row>
91           <el-col :span="24"
92           ><div>
93             <el-form-item label="串口">
94               <el-select
95                 v-model="form1.port"
96                 filterable
97                 placeholder="请选择串口"
98                 :disabled="isDisable"
99               >
100                 <el-option
101                   v-for="item in portsList"
102                   :key="item.value"
103                   :label="item.label"
104                   :value="item.value"
105                 >
106                 </el-option>
107               </el-select>
108             </el-form-item>
109             <el-form-item label="波特率">
110               <el-autocomplete
111                 popper-class="my-autocomplete"
112                 v-model="form1.baudRate"
113                 :fetch-suggestions="querySearch"
114                 placeholder="请输入波特率"
115                 :disabled="isDisable"
116               >
117                 <i class="el-icon-edit el-input__icon" slot="suffix"> </i>
118                 <template slot-scope="{ item }">
119                   <div class="name">{{ item.value }}</div>
120                   <span class="addr">{{ item.address }}</span>
121                 </template>
122               </el-autocomplete>
123             </el-form-item>
124             <el-form-item label="数据位">
125               <el-select
126                 v-model="form1.dataBits"
127                 placeholder="请选择数据位"
128                 :disabled="isDisable"
129               >
130                 <el-option label="7" value="7"></el-option>
131                 <el-option label="8" value="8"></el-option>
132               </el-select>
133             </el-form-item>
134             <el-form-item label="停止位">
135               <el-select
136                 v-model="form1.stopBits"
137                 placeholder="请选择停止位"
138                 :disabled="isDisable"
139               >
140                 <el-option label="1" value="1"></el-option>
141                 <el-option label="2" value="2"></el-option>
142               </el-select>
143             </el-form-item>
144
145             <el-form-item label="校验位">
146               <el-select
147                 v-model="form1.parity"
148                 placeholder="请选择校验位"
149                 :disabled="isDisable"
150               >
151                 <el-option label="None" value="none"></el-option>
152                 <el-option label="Even" value="even"></el-option>
153                 <el-option label="Odd" value="odd"></el-option>
154               </el-select>
155             </el-form-item>
156
157             <el-form-item label="流控制">
158               <el-select
159                 v-model="form1.flowControl"
160                 placeholder="请选择流控制"
161                 :disabled="isDisable"
162               >
163                 <el-option label="None" value="none"></el-option>
164                 <el-option label="HardWare" value="hardware"></el-option>
165               </el-select>
166             </el-form-item>
167             <el-form-item label="显示历史">
168               <el-switch
169                 v-model="form1.isShowHistory"
170                 @change="loadHistory"
171               ></el-switch>
172               <el-button
173                 type="danger"
174                 icon="el-icon-delete"
175                 circle
176                 title="清空历史"
177                 @click="clearHistory"
178               ></el-button>
179             </el-form-item>
180             <el-form-item label="发送区设置" v-show="isShowSendArea">
181               <el-form-item label="发送格式">
182                 <el-radio-group v-model="form1.type">
183                   <el-radio label="1">ASCII</el-radio>
184                   <el-radio label="2">HEX</el-radio>
185                 </el-radio-group>
186               </el-form-item>
187               <el-form-item label="发送信息">
188                 <el-input type="textarea" v-model="form1.sendMsg"></el-input>
189               </el-form-item>
190               <el-button type="primary" @click="sendCommon">发送</el-button>
191             </el-form-item>
192
193             <el-form-item>
194               <el-button :type="btnType" @click="connectBtn">{{
195                   btnText
196                 }}</el-button>
197               <el-button type="info" @click="obtainAuthorization"
198               >新增授权</el-button
199               >
200             </el-form-item>
201           </div>
202           </el-col>
203         </el-row>
204       </el-form>
205     </el-dialog>
206   </div>
207 </template>
208 <script>
209 import {getIpv4, listStationConf} from "@/api/main/sc/stationConf";
210 import {
211   noPageListFormulaChild,
212   workpieceRelease,
213   yzUpdateResults,
214   yzUpdateTighteningFormula
215 } from "@/api/main/bs/formulaChild/formulaChild";
216 import MySerialPort from "@/utils/MySerialPort";
217 import USBDevice from "@/utils/usb.json";
218 import {addPassingStationCollection} from "@/api/main/da/passingStationCollection/passingStationCollection";
219 import {
8cfe20 220   addTighteningParameters, enterWeighing,
01cdff 221   replaceAssemblyCode,
A 222   saveCampaignTimeParameters,
223   yzAddBasicParameters,
224 } from "@/api/main/da/paramCollection/paramCollection";
225 import QRCode from "qrcodejs2";
226
227 export default {
228   name: "stationTerminal",
229   data() {
230     return {
8cfe20 231       weightValue: '',
01cdff 232       showInput: true,
A 233       serialPortContent: '',
234       // 查询参数
235       formulaChildParams: {
236         pageNum: 1,
237         pageSize: 10,
238         productCode: null,
239         processesCode: null,
240       },
241       // 配方配置子信息表格数据
242       formulaChildList: [],
243       ipAddress: '',
244       imgSrc: '',
245       headContent: {
246         processesCode: 'OP520',
247         processesName: '成品下线',
248         sfcCode: '',
249         yzSfcCode: '',
250       },
251       workpieceInformation: {
252         workOrderNo: null,
253         productCode: null,
254         productModel: null,
255         productName: null,
256         beat: null,
257       },
258       // 查询参数
259       queryParams: {
260         pageNum: 1,
261         pageSize: 10,
262         sfcCode: null,
263       },
264       // 查询参数
265       StationConfQueryParams: {
266         pageNum: 1,
267         pageSize: 10,
268         ipAddress: null,
269       },
270       cakeLamp: {
271         plcState: 1, //plc
272         scannerState: 1, //扫码枪
273         InPlace: 0, //工件到位
274         scanFinish: 0,
275         startWork: 0,
276         release: 0 //允许放行
277       },
278       content: '',
279       activeName: 'first',
280       url: "ws://192.168.2.76:8080/websocket/message/",
281       message: "",
282       text_content: "",
283       ws: null,
284       inputValue: '9',
285
286       open1: false,
287       input: "",
288       keepReading: true,
289       form1: {
290         baudRate: "115200",
291         dataBits: "8",
292         stopBits: "1",
293         parity: "none",
294         flowControl: "none",
295         desc: "",
296         type: "1",
297         isShowHistory: false,
298       },
299       btnType: "primary",
300       btnText: "连接串口",
301       restaurants: [],
302       portsList: [],
303       isShowSendArea: false,
304       readType: 1,
305       title: "",
306
307       passingStationForm: {},
308       originalArray: [],
309       text1: '',
310     }
311   },
312   beforeDestroy() {
313     this.exit();
314   },
315   created() {
316     this.initStation();
317     // this.getStationConfList();
318     // setTimeout(() => {
319     //   this.connectWebsocket();
320     // }, 3000);
321   },
322   mounted() {
323     if ("serial" in navigator) {
324       this.myserialport = new MySerialPort();
325       this.getPorts();
326       navigator.serial.addEventListener("connect", (e) => {
327         this.$message.success("设备已连接");
328         this.getPorts();
329       });
330       navigator.serial.addEventListener("disconnect", (e) => {
331         this.$message.error("设备已断开");
332       });
333       this.restaurants = this.loadAll();
334     } else {
335       this.$message.error(
336         "当前为HTTP模式或者浏览器版本过低,不支持网页连接串口"
337       );
338     }
339   },
340   computed: {
341     isDisable() {
342       return this.btnType === "danger";
343     },
344   },
345   methods: {
8cfe20 346     enterWeighing(){
A 347       if(this.headContent.sfcCode ==='' || this.weightValue === '' ){
348         this.$message.error('参数不全!');
349       }else {
350         let param = {
351           sfcCode: this.headContent.sfcCode,
352           weightValue: this.weightValue,
353         }
354         enterWeighing(param).then(response => {
355           this.$message('录入完成!');
356         });
357       }
358     },
01cdff 359     serialLink() {
A 360       this.open1 = true
361     },
362     bindYzSfc(){
363       if(this.headContent.sfcCode!==""&&this.headContent.yzSfcCode!==""){
364         let param = {
365           sfcCode: this.headContent.sfcCode,
366           locationCode: this.headContent.processesCode,
367           yzSfcCode: this.headContent.yzSfcCode
368         }
369         this.$message('可以绑定!');
370         replaceAssemblyCode(param).then(response => {
371
372         });
373       }
374     },
375
376     Release(){
377       // this.$message('portsList!'+this.portsList.length);
378       if(this.btnType === "danger"){
379         this.$message('连接了!!');
380
381       }else {
382         this.$message('mei连接了!');
383
384       }
385
386     },
387     serialPortMethod(value){
388       let formulaChildParams = {
389         scanBarcode: value,
390         sfcBarcode: this.headContent.sfcCode,
391         workOrderNo: this.workpieceInformation.workOrderNo,
392         productCode: "1P102S",
393         locationCode: this.headContent.processesCode,
394         collectionTime: new Date()
395       }
396       yzUpdateResults(formulaChildParams).then(response => {
397         this.getListFormulaChild()
398       });
399     },
400     rowStyle({ row }) {
401       if (row.results === 'OK') {
402         return 'background-color: PaleGreen';
403       } else if (row.results === 'NG') {
404         return 'background-color: LightSalmon';
405       }
406       return '';
407     },
408     /** 查询配方配置子信息列表 */
409     getListFormulaChild() {
410       this.formulaChildParams.productCode = "1P102S"
411       this.formulaChildParams.processesCode = this.headContent.processesCode
412       console.log(this.formulaChildParams)
413       noPageListFormulaChild(this.formulaChildParams).then(response => {
414         this.formulaChildList = response.rows;
415         if (this.formulaChildList.length >0){
416           let pos = 0
417           const tempArr = this.formulaChildList.filter(x=> 'OK' === x.results)
418           if (tempArr.length>0){
419             pos = tempArr.length
420             this.$nextTick(() => {
421               let temp33 = document.getElementsByClassName('el-table__row')
422               console.log('temp33',temp33)
423               console.log('len',temp33.item(pos))
424               if (temp33.length > 0){
425                 console.log('1111111111111111')
426                 let arr = temp33[pos-1]
427                 console.log('srr',arr)
428                 arr.scrollIntoView({ block: 'center' })
429               }
430             })
431           }
432
433         }
434       });
435     },
436     endClear(){
437
438     },
439     changeMenu(tab, event) {
440       console.log(tab, event);
441     },
442     clearClick(){
443       this.$message('这是一条清除消息提示');
444       this.headContent.sfcCode = null
445     },
446     scanCompleted(){
447       this.$message('扫码完成'+this.content);
448       this.headContent.sfcCode = this.content
449       this.queryParams.sfcCode = this.content
450       this.getList()
451       this.getListFormulaChild()
452       this.cakeLamp.scanFinish = 1
453       this.cakeLamp.startWork = 1
454
455     },
456     /** 查询工单列表 */
457     async getList() {
458       // this.getListFormulaChild()
459       // this.addOverStationCollection()
460       this.print1()
461     },
462     print1() {
463       // 新开页面打印
464       let newStr = document.getElementById('printMe').innerHTML;
465       let newWin = window.open('', '_blank');
466       newWin.document.body.innerHTML = newStr;
467       newWin.print();
468       return false;
469     },
470     test1(){
88c849 471       document.getElementById('canvasWrapper1').innerHTML = '';
01cdff 472       this.$nextTick(() => {
88c849 473         let qrCode = new QRCode('canvasWrapper1',{
01cdff 474           width: 120,
A 475           height: 120,
4a53ae 476           text: 'P9900166410#T'+ this.text1 +'#V993983#SSW002.005#HHW001.001#NBMS#',
01cdff 477           colorDark: '#000',
A 478           colorLight: '#fff'
479         })
88c849 480       }
H 481       )
482     },
483     test2(){
484       document.getElementById('canvasWrapper2').innerHTML = '';
485       this.$nextTick(() => {
486           let qrCode = new QRCode('canvasWrapper2',{
487             width: 120,
488             height: 120,
489             text: 'P9900166410#T'+ this.text1 +'#V993983#SSW002.005#HHW001.001#NBMS#',
490             colorDark: '#000',
491             colorLight: '#fff'
492           })
493         }
494       )
01cdff 495     },
A 496
497     /** 入站增加过站采集记录 **/
498     addOverStationCollection(){
499       this.passingStationForm = {
500         id: null,
501         // workOrderNo: this.workpieceInformation.workOrderNo,
502         productCode: "1P102S",
503         locationCode: this.headContent.processesCode,
504         // model: this.workpieceInformation.productModel,
505         productBarcode: this.headContent.sfcCode,
506         sfcCode: this.headContent.sfcCode,
507         inboundTime: new Date()
508       }
509       addPassingStationCollection(this.passingStationForm).then(response => {});
510       yzAddBasicParameters(this.passingStationForm).then(response => {});
511     },
512     exit() {
513       if (this.ws) {
514         this.ws.close();
515         this.ws = null;
516       }
517     },
518     send() {
519       if (this.ws) {
520         this.ws.send(this.message);
521       } else {
522         alert("未连接到服务器");
523       }
524     },
525
526     initStation: async function () {
527       await getIpv4().then(response => {
528         this.StationConfQueryParams.ipAddress = response.msg
529         console.log('查询到本工位IP为' + this.StationConfQueryParams.ipAddress)
530       });
531       await listStationConf(this.StationConfQueryParams).then(response => {
532         let rows = response.rows[0]
533         if (response.rows.length === 0) {
534           // this.$message('该工位没有配置IP,请联系管理员配置IP');
535           return
536         }
537         this.headContent.processesName = rows.processesName
538         this.headContent.processesCode = rows.processesCode
539         console.log('设置工位编码' + this.headContent.processesCode)
540
541       });
542       this.conCom()
543       console.log('websocket连接工位为' + this.headContent.processesCode)
544       const wsuri = this.url + this.headContent.processesCode;
545       this.ws = new WebSocket(wsuri);
546       const self = this;
547       this.ws.onopen = function (event) {
548         this.$message('websocket连接成功!');
549       };
550       this.ws.onmessage = function (event) {
551         if (event.data === "IN") {
552           self.cakeLamp.InPlace = 1;
553         } else if (event.data === "IN0") {
554           self.cakeLamp.InPlace = 0;
555         } else if (event.data === "OUT") {
556           console.log("out")
557
558           const param = {
559             workOrderNo: self.workpieceInformation.workOrderNo,
560             productCode: "1P102S",
561             locationCode: self.headContent.processesCode,
562             productBarcode: self.headContent.sfcCode,
563           }
564           // saveCampaignTimeParameters(param).then(response => {});
565           // self.cakeLamp.release = 1;
566           workpieceRelease(param).then(response => {});
567           self.formulaChildList = [];
568           self.headContent.sfcCode = '';
569           console.log(self.formulaChildList)
570         } else if (event.data === "END") {
571           // const param = {
572           //   workOrderNo: self.workpieceInformation.workOrderNo,
573           //   productCode: self.workpieceInformation.productCode,
574           //   locationCode: self.headContent.processesCode,
575           //   productBarcode: self.headContent.sfcCode,
576           // }
577           // saveCampaignTimeParameters(param).then(response => {});
578           // self.endClear()
579           // workpieceRelease(param).then(response => {});
580         } else if (event.data.includes("[")) {
581           let formulaChilds = "";
582           self.formulaChildList.sort((a, b) => a.stepSort - b.stepSort);
583           self.formulaChildList
584             .filter((formulaChild) => formulaChild.operationType === '1');
585           for (let i = 0; i < self.formulaChildList.length; i++) {
586             let formulaChild = self.formulaChildList[i];
587             let results = formulaChild.results;
588             if (results === '' || results === null || results === 'NG') {
589               formulaChilds = formulaChild;
590               break;
591             }
592           }
593           const param = {
594             tightenTheArray: event.data,
595             paramCode: formulaChilds.paramCode,
596             // workOrderNo: self.workpieceInformation.workOrderNo,
597             productCode: "1P102S",
598             locationCode: self.headContent.processesCode,
599             productBarcode: self.headContent.sfcCode,
600           }
601           addTighteningParameters(param).then(response => {});
602           yzUpdateTighteningFormula(param).then(response => {
603             console.log(response.msg)
604             if(response.msg === "1"){
605               self.getListFormulaChild()
606
607             }else {
608               const param = {
609                 workOrderNo: self.workpieceInformation.workOrderNo,
610                 productCode: "1P102S",
611                 locationCode: self.headContent.processesCode,
612                 productBarcode: self.headContent.sfcCode,
613               }
614               saveCampaignTimeParameters(param).then(response => {});
615               workpieceRelease(param).then(response => {});
616               self.formulaChildList = [];
617               self.headContent.sfcCode = '';
618             }
619           });
620         }
621       };
622     },
623
624
625
626     //接受数据的回调
627     callBack(value) {
628       if (this.form1.isShowHistory) this.form1.desc = this.readLi().join("");
629       else {
630         const scanValue = this.myserialport.hex2atostr(value).replace(/[\r\n]/g, '');
631         console.log("串口收到数据-------------------"+scanValue)
632         this.test1()
88c849 633         this.test2()
01cdff 634         this.text1 = scanValue
A 635         this.headContent.sfcCode = scanValue
636         // this.print1()
637         // setTimeout(() => {
638         //   this.print()
639         // },50)
640         // this.getList()
641
642       }
643     },
644     clearHistory() {
645       this.form1.desc = "";
646       this.myserialport.state.readValue = [];
647     },
648     loadHistory() {
649       if (this.form1.isShowHistory) this.form1.desc = this.readLi().join("");
650       else {
651         let temp = this.readLi();
652         if (temp.length > 0) this.form1.desc = temp[temp.length - 1].join("");
653       }
654     },
655     readLi() {
656       let readType = this.readType;
657       return this.myserialport.state.readValue.map((items, index) => {
658         const item = items.value;
659         const type = items.type; // 1接收,2发送
660         let body = [];
661         if (item !== undefined) {
662           let strArr = [];
663           for (let hex of Array.from(item)) {
664             strArr.push(hex.toString(16).toLocaleUpperCase());
665           }
666           if (strArr.includes("D") && strArr.includes("A")) {
667             if (strArr.indexOf("A") - strArr.indexOf("D") === 1) {
668               strArr.splice(strArr.indexOf("D"), 1);
669               strArr.splice(strArr.indexOf("A"), 1, <br key={0} />);
670             }
671           }
672           strArr = strArr.map((item) => {
673             if (typeof item === "string") {
674               if (readType === 1) {
675                 return this.myserialport.hex2a(parseInt(item, 16));
676               } else if (readType === 2) {
677                 return item + " ";
678               }
679             }
680             return item;
681           });
682           if (typeof strArr[strArr.length - 1] === "string") {
683             strArr.push("\r\n");
684           }
685           body.push(strArr.join(""));
686         }
687         return body;
688       });
689     },
690     conCom(){
691       try {
692         this.myserialport.state.baudRate = this.form1.baudRate;
693         this.myserialport.state.dataBits = this.form1.dataBits;
694         this.myserialport.state.stopBits = this.form1.stopBits;
695         this.myserialport.state.parity = this.form1.parity;
696         this.myserialport.state.flowControl = this.form1.flowControl;
697         this.myserialport.openPort(0, true, this.callBack);
698         console.log(this.form1.port)
699       } catch (error) {
700         this.$message.error("串口连接失败!请检查串口是否已被占用");
701       }
702       if (this.myserialport.state.isOpen) {
703         this.$message.success("串口连接成功");
704       }
705     },
706     //连接
707     async connectBtn() {
708       if (this.btnType === "primary") {
709         try {
710           this.myserialport.state.baudRate = this.form1.baudRate;
711           this.myserialport.state.dataBits = this.form1.dataBits;
712           this.myserialport.state.stopBits = this.form1.stopBits;
713           this.myserialport.state.parity = this.form1.parity;
714           this.myserialport.state.flowControl = this.form1.flowControl;
715           await this.myserialport.openPort(this.form1.port, true, this.callBack);
716           console.log(this.form1.port)
717         } catch (error) {
718           this.$message.error("串口连接失败!请检查串口是否已被占用");
719         }
720         if (this.myserialport.state.isOpen) {
721           this.$message.success("串口连接成功");
722           this.open1 = false
723           this.btnType = "danger";
724           this.btnText = "关闭串口";
725         }
726       } else {
727         this.myserialport.openPort(this.form1.port, false, this.callBack);
728         this.$message.success("串口关闭成功");
729         this.btnType = "primary";
730         this.btnText = "连接串口";
731       }
732     },
733     //授权
734     async obtainAuthorization() {
735       if ("serial" in navigator) {
736         console.log("The Web Serial API is supported.");
737         if (!this.myserialport) this.myserialport = new MySerialPort();
738         try {
739           await this.myserialport.handleRequestPort();
740           this.$message.success("串口授权成功");
741           this.getPortInfo(this.myserialport.state.ports);
742         } catch (error) {
743           this.$message.warning("未选择新串口授权!");
744         }
745       } else {
746         this.$message.error(
747           "当前为HTTP模式或者浏览器版本过低,不支持网页连接串口"
748         );
749       }
750     },
751     //串口列表初始化
752     getPortInfo(portList) {
753       this.portsList = [];
754       portList.map((port, index) => {
755         const { usbProductId, usbVendorId } = port.getInfo();
756         if (usbProductId === undefined || usbVendorId === undefined) {
757           this.portsList.push({ label: "未知设备" + index, value: index });
758         } else {
759           const usbVendor = USBDevice.filter(
760             (item) => parseInt(item.vendor, 16) === usbVendorId
761           );
762           let usbProduct = [];
763           if (usbVendor.length === 1) {
764             usbProduct = usbVendor[0].devices.filter(
765               (item) => parseInt(item.devid, 16) === usbProductId
766             );
767           }
768           this.portsList.push({ label: usbProduct[0].devname, value: index });
769         }
770       });
771     },
772     // 发送
773     async sendCommon() {
774       if (this.myserialport.state.isOpen) {
775         if (this.form1.sendMsg.length !== 0) {
776           const writeType = this.form1.type;
777           let value = this.form1.sendMsg;
778           let arr = [];
779           if (writeType === 1) {
780             // ASCII
781             for (let i = 0; i < value.length; i++) {
782               arr.push(this.myserialport.a2hex(value[i]));
783             }
784           } else if (writeType === 2) {
785             // HEX
786             if (/^[0-9A-Fa-f]+$/.test(value) && value.length % 2 === 0) {
787               for (let i = 0; i < value.length; i = i + 2) {
788                 arr.push(parseInt(value.substring(i, i + 2), 16));
789               }
790             } else {
791               this.$message.error("格式错误");
792               return;
793             }
794           }
795           this.myserialport.writeText(arr);
796         } else {
797           this.$message.warning("请输入发送的信息");
798         }
799       } else {
800         this.$message.warning("串口处于关闭状态,请连接串口");
801       }
802     },
803     async getPorts() {
804       await this.myserialport.getPorts();
805       this.getPortInfo(this.myserialport.state.ports);
806     },
807     querySearch(queryString, cb) {
808       var restaurants = this.restaurants;
809       var results = queryString
810         ? restaurants.filter(this.createFilter(queryString))
811         : restaurants;
812       // 调用 callback 返回建议列表的数据
813       cb(results);
814     },
815     createFilter(queryString) {
816       return (restaurant) => {
817         return (
818           restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
819           0
820         );
821       };
822     },
823     loadAll() {
824       return [
825         { value: "110" },
826         { value: "300" },
827         { value: "600" },
828         { value: "1200" },
829         { value: "2400" },
830         { value: "4800" },
831         { value: "7200" },
832         { value: "9600" },
833         { value: "14400" },
834         { value: "19200" },
835         { value: "28800" },
836         { value: "38400" },
837         { value: "56000" },
838         { value: "57600" },
839         { value: "76800" },
840         { value: "115200" },
841         { value: "230400" },
842         { value: "460800" },
843       ];
844     },
845   }
846 }
847
848 </script>
849 <style scoped>
850 .bottom-card{
851   height: 600px;
852 }
853 .circle-button{
854   height: 30px;
855   width: 30px;
856 }
857 .circle-red {
858   background-color: #e01a4f;
859 }
860 .circle-green {
861   background-color: green;
862 }
863 .circle-green-animate {
864   background-color: green;
865   animation: circle-green-animate 2s infinite;
866 }
867 @keyframes circle-green-animate {
868   50% {
869     opacity: 0.6;
870   }
871   0% {
872     opacity: 0.2;
873   }
874 }
875 .head-font{
876   /*font-weight: bold;*/
877   /*font-size: 25px;*/
878 }
879 span{
880   font-size: 15px;
881 }
882 .el-table .warning-row {
883   background: oldlace;
884 }
885
886 .el-table .success-row {
887   background: #f0f9eb;
888 }
889 </style>
890