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