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