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