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