admin
2024-06-15 8cfe20288690f2ba46c804f41f39e8aa48c2dea0
提交 | 用户 | 时间
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 {
8cfe20 248   jrmUpdateResults, jrmWorkpieceRelease,
06713a 249   listFormulaChild,
A 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(){
8cfe20 521       const param = {
A 522         workOrderNo: this.workpieceInformation.workOrderNo,
523         productCode: "1P102S",
524         locationCode: this.headContent.processesCode,
525         productBarcode: this.headContent.moduleA+','+this.headContent.moduleB,
526       }
527       jrmSaveCampaignTimeParameters(param).then(response => {});
528       this.cakeLamp.release = 1;
529       this.endClear()
530       // workpieceRelease(param).then(response => {});
531       jrmWorkpieceRelease(param).then(response => {});
532       // this.$message('这是一条清除消息提示');
533       // this.headContent.sfcCode = null
06713a 534     },
A 535     scanCompleted(){
536       this.$message('扫码完成'+this.content);
537       this.headContent.sfcCode = this.content
538       this.queryParams.sfcCode = this.content
539       this.getList()
540       this.getListFormulaChild()
541       this.cakeLamp.scanFinish = 1
542       this.cakeLamp.startWork = 1
543
544     },
545     /** 查询工单列表 */
546     async getList() {
547       this.getListFormulaChild()
548       this.addOverStationCollection()
549     },
550
551     /** 入站增加过站采集记录 **/
552     addOverStationCollection(){
1c84ae 553       console.log('addOverStationCollection')
06713a 554       this.passingStationForm = {
A 555         id: null,
556         // workOrderNo: this.workpieceInformation.workOrderNo,
557         productCode: '1P102S',
558         locationCode: this.headContent.processesCode,
559         // model: this.workpieceInformation.productModel,
560         // productBarcode: this.headContent.sfcCode,
561         sfcCode: this.headContent.moduleA+','+this.headContent.moduleB,
562         inboundTime: new Date()
563       }
564       jrmAddPassingStationCollection(this.passingStationForm).then(response => {});
565       // addBasicParameters(this.passingStationForm).then(response => {});
566     },
567     exit() {
568       if (this.ws) {
569         this.ws.close();
570         this.ws = null;
571       }
572     },
573     send() {
574       if (this.ws) {
575         this.ws.send(this.message);
576       } else {
577         alert("未连接到服务器");
578       }
579     },
580
581     initStation: async function () {
582       await getIpv4().then(response => {
583         this.StationConfQueryParams.ipAddress = response.msg
584         console.log('查询到本工位IP为' + this.StationConfQueryParams.ipAddress)
585       });
586       await listStationConf(this.StationConfQueryParams).then(response => {
587         let rows = response.rows[0]
588         if (response.rows.length === 0) {
589           this.$message('该工位没有配置IP,请联系管理员配置IP');
590           return
591         }
592         this.headContent.processesName = rows.processesName
593         this.headContent.processesCode = rows.processesCode
594         if(this.headContent.processesCode === 'OP240'){
595           this.onLineBinDing = true
596         }
597         if(this.headContent.processesCode === 'OP260'){
598           this.showInput = true
599         }
600
601         console.log('设置工位编码' + this.headContent.processesCode)
602       });
603       this.conCom()
604       console.log('websocket连接工位为' + this.headContent.processesCode)
605       const wsuri = this.url + this.headContent.processesCode;
606       this.ws = new WebSocket(wsuri);
607       const self = this;
608       this.ws.onopen = function (event) {
609         this.$message('websocket连接成功!');
610       };
611       this.ws.onmessage = function (event) {
612         if (event.data === "IN") {
613           self.cakeLamp.InPlace = 1;
614         } else if (event.data === "IN0") {
615           self.cakeLamp.InPlace = 0;
616         } else if (event.data === "OUT") {
617           self.cakeLamp.release = 1;
618         } else if (event.data === "END") {
619           const param = {
620             workOrderNo: self.workpieceInformation.workOrderNo,
68f0c8 621             productCode: "1P102S",
06713a 622             locationCode: self.headContent.processesCode,
8cfe20 623             productBarcode: self.headContent.moduleA+','+self.headContent.moduleB,
06713a 624           }
1c84ae 625           jrmSaveCampaignTimeParameters(param).then(response => {});
06713a 626           self.cakeLamp.release = 1;
A 627           self.endClear()
8cfe20 628           // workpieceRelease(param).then(response => {});
A 629           jrmWorkpieceRelease(param).then(response => {});
06713a 630         } else if (event.data.includes("[")) {
A 631           let formulaChilds = "";
632           self.formulaChildList.sort((a, b) => a.stepSort - b.stepSort);
633           self.formulaChildList
634             .filter((formulaChild) => formulaChild.operationType === '1');
635           for (let i = 0; i < self.formulaChildList.length; i++) {
636             let formulaChild = self.formulaChildList[i];
637             let results = formulaChild.results;
638             if (results === '' || results === null || results === 'NG') {
639               formulaChilds = formulaChild;
640               break;
641             }
642           }
643           const param = {
644             tightenTheArray: event.data,
645             paramCode: formulaChilds.paramCode,
1c84ae 646             // workOrderNo: self.workpieceInformation.workOrderNo,
A 647             productCode: '1P102S',
06713a 648             locationCode: self.headContent.processesCode,
A 649             productBarcode: self.headContent.sfcCode,
650           }
651           addTighteningParameters(param).then(response => {});
652           updateTighteningFormula(param).then(response => {
653             self.getListFormulaChild()
654           }).catch(error =>{
655             self.getListFormulaChild()
656           });
657         }
658       };
659     },
660
661
662
663     //接受数据的回调
664     callBack(value) {
665       if (this.form1.isShowHistory) this.form1.desc = this.readLi().join("");
666       else {
667         const scanValue = this.myserialport.hex2atostr(value).replace(/[\r\n]/g, '');
668         console.log("串口收到数据-------------------"+scanValue)
669
670         if(this.headContent.moduleA !== '' && this.headContent.moduleB !== '' ){
671           this.serialPortMethod(scanValue)
672         } else {
673           if(scanValue.includes("9900168135")){
674             this.headContent.moduleA = scanValue;
675           }
676           if(scanValue.includes("9900168136")){
677             this.headContent.moduleB = scanValue;
678             this.$message('扫码识别产品序列号'+scanValue);
679             this.getList()
68f0c8 680             // this.cakeLamp.InPlace = 1
06713a 681             this.cakeLamp.scanFinish = 1
A 682             this.cakeLamp.startWork = 1
683           }
684         }
685       }
686     },
687     clearHistory() {
688       this.form1.desc = "";
689       this.myserialport.state.readValue = [];
690     },
691     loadHistory() {
692       if (this.form1.isShowHistory) this.form1.desc = this.readLi().join("");
693       else {
694         let temp = this.readLi();
695         if (temp.length > 0) this.form1.desc = temp[temp.length - 1].join("");
696       }
697     },
698     readLi() {
699       let readType = this.readType;
700       return this.myserialport.state.readValue.map((items, index) => {
701         const item = items.value;
702         const type = items.type; // 1接收,2发送
703         let body = [];
704         if (item !== undefined) {
705           let strArr = [];
706           for (let hex of Array.from(item)) {
707             strArr.push(hex.toString(16).toLocaleUpperCase());
708           }
709           if (strArr.includes("D") && strArr.includes("A")) {
710             if (strArr.indexOf("A") - strArr.indexOf("D") === 1) {
711               strArr.splice(strArr.indexOf("D"), 1);
712               strArr.splice(strArr.indexOf("A"), 1, <br key={0} />);
713             }
714           }
715           strArr = strArr.map((item) => {
716             if (typeof item === "string") {
717               if (readType === 1) {
718                 return this.myserialport.hex2a(parseInt(item, 16));
719               } else if (readType === 2) {
720                 return item + " ";
721               }
722             }
723             return item;
724           });
725           if (typeof strArr[strArr.length - 1] === "string") {
726             strArr.push("\r\n");
727           }
728           body.push(strArr.join(""));
729         }
730         return body;
731       });
732     },
733     conCom(){
734       try {
735         this.myserialport.state.baudRate = this.form1.baudRate;
736         this.myserialport.state.dataBits = this.form1.dataBits;
737         this.myserialport.state.stopBits = this.form1.stopBits;
738         this.myserialport.state.parity = this.form1.parity;
739         this.myserialport.state.flowControl = this.form1.flowControl;
740         this.myserialport.openPort(0, true, this.callBack);
741         console.log(this.form1.port)
742       } catch (error) {
743         this.$message.error("串口连接失败!请检查串口是否已被占用");
744       }
745       if (this.myserialport.state.isOpen) {
746         this.$message.success("串口连接成功");
747       }
748     },
749     //连接
750     async connectBtn() {
751       if (this.btnType === "primary") {
752         try {
753           this.myserialport.state.baudRate = this.form1.baudRate;
754           this.myserialport.state.dataBits = this.form1.dataBits;
755           this.myserialport.state.stopBits = this.form1.stopBits;
756           this.myserialport.state.parity = this.form1.parity;
757           this.myserialport.state.flowControl = this.form1.flowControl;
758           await this.myserialport.openPort(this.form1.port, true, this.callBack);
759           console.log(this.form1.port)
760         } catch (error) {
761           this.$message.error("串口连接失败!请检查串口是否已被占用");
762         }
763         if (this.myserialport.state.isOpen) {
764           this.$message.success("串口连接成功");
765           this.open1 = false
766           this.btnType = "danger";
767           this.btnText = "关闭串口";
768         }
769       } else {
770         this.myserialport.openPort(this.form1.port, false, this.callBack);
771         this.$message.success("串口关闭成功");
772         this.btnType = "primary";
773         this.btnText = "连接串口";
774       }
775     },
776     //授权
777     async obtainAuthorization() {
778       if ("serial" in navigator) {
779         console.log("The Web Serial API is supported.");
780         if (!this.myserialport) this.myserialport = new MySerialPort();
781         try {
782           await this.myserialport.handleRequestPort();
783           this.$message.success("串口授权成功");
784           this.getPortInfo(this.myserialport.state.ports);
785         } catch (error) {
786           this.$message.warning("未选择新串口授权!");
787         }
788       } else {
789         this.$message.error(
790           "当前为HTTP模式或者浏览器版本过低,不支持网页连接串口"
791         );
792       }
793     },
794     //串口列表初始化
795     getPortInfo(portList) {
796       this.portsList = [];
797       portList.map((port, index) => {
798         const { usbProductId, usbVendorId } = port.getInfo();
799         if (usbProductId === undefined || usbVendorId === undefined) {
800           this.portsList.push({ label: "未知设备" + index, value: index });
801         } else {
802           const usbVendor = USBDevice.filter(
803             (item) => parseInt(item.vendor, 16) === usbVendorId
804           );
805           let usbProduct = [];
806           if (usbVendor.length === 1) {
807             usbProduct = usbVendor[0].devices.filter(
808               (item) => parseInt(item.devid, 16) === usbProductId
809             );
810           }
811           this.portsList.push({ label: usbProduct[0].devname, value: index });
812         }
813       });
814     },
815     // 发送
816     async sendCommon() {
817       if (this.myserialport.state.isOpen) {
818         if (this.form1.sendMsg.length !== 0) {
819           const writeType = this.form1.type;
820           let value = this.form1.sendMsg;
821           let arr = [];
822           if (writeType === 1) {
823             // ASCII
824             for (let i = 0; i < value.length; i++) {
825               arr.push(this.myserialport.a2hex(value[i]));
826             }
827           } else if (writeType === 2) {
828             // HEX
829             if (/^[0-9A-Fa-f]+$/.test(value) && value.length % 2 === 0) {
830               for (let i = 0; i < value.length; i = i + 2) {
831                 arr.push(parseInt(value.substring(i, i + 2), 16));
832               }
833             } else {
834               this.$message.error("格式错误");
835               return;
836             }
837           }
838           this.myserialport.writeText(arr);
839         } else {
840           this.$message.warning("请输入发送的信息");
841         }
842       } else {
843         this.$message.warning("串口处于关闭状态,请连接串口");
844       }
845     },
846     async getPorts() {
847       await this.myserialport.getPorts();
848       this.getPortInfo(this.myserialport.state.ports);
849     },
850     querySearch(queryString, cb) {
851       var restaurants = this.restaurants;
852       var results = queryString
853         ? restaurants.filter(this.createFilter(queryString))
854         : restaurants;
855       // 调用 callback 返回建议列表的数据
856       cb(results);
857     },
858     createFilter(queryString) {
859       return (restaurant) => {
860         return (
861           restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
862           0
863         );
864       };
865     },
866     loadAll() {
867       return [
868         { value: "110" },
869         { value: "300" },
870         { value: "600" },
871         { value: "1200" },
872         { value: "2400" },
873         { value: "4800" },
874         { value: "7200" },
875         { value: "9600" },
876         { value: "14400" },
877         { value: "19200" },
878         { value: "28800" },
879         { value: "38400" },
880         { value: "56000" },
881         { value: "57600" },
882         { value: "76800" },
883         { value: "115200" },
884         { value: "230400" },
885         { value: "460800" },
886       ];
887     },
888   }
889 }
890
891 </script>
892 <style scoped>
893 .bottom-card{
894   height: 600px;
895 }
896 .circle-button{
897   height: 30px;
898   width: 30px;
899 }
900 .circle-red {
901   background-color: #e01a4f;
902 }
903 .circle-green {
904   background-color: green;
905 }
906 .circle-green-animate {
907   background-color: green;
908   animation: circle-green-animate 2s infinite;
909 }
910   @keyframes circle-green-animate {
911     50% {
912       opacity: 0.6;
913     }
914     0% {
915       opacity: 0.2;
916     }
917   }
918 .head-font{
919   /*font-weight: bold;*/
920   /*font-size: 25px;*/
921 }
922 span{
923   font-size: 15px;
924 }
925 .el-table .warning-row {
926   background: oldlace;
927 }
928
929 .el-table .success-row {
930   background: #f0f9eb;
931 }
932 </style>
933