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