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