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