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