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