| | |
| | | <template> |
| | | <div class="app-container"> |
| | | <el-row :gutter="5"> |
| | | <el-col :span="6"> |
| | | <el-col :span="7"> |
| | | <el-card shadow="never"> |
| | | <span class="head-font">工位编号 : {{headContent.processesCode}}</span> |
| | | </el-card> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <el-col :span="7"> |
| | | <el-card shadow="never"> |
| | | <span class="head-font">工位名称 : {{headContent.processesName}}</span> |
| | | </el-card> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-col :span="10"> |
| | | <el-card shadow="never"> |
| | | <span class="head-font">总成编码 : {{headContent.sfcCode}}</span> |
| | | <el-input v-model="content" style="float: right;width: 150px;" placeholder="请输入内容"></el-input> |
| | | <el-button @click="scanCompleted" style="float: right" type="primary">扫码完成</el-button> |
| | | <el-button @click="clearClick" style="float: right" type="danger">清除</el-button> |
| | | <span class="head-font">产品序列号 : {{headContent.sfcCode}}</span> |
| | | <!-- <el-input v-model="content" style="float: right;width: 150px;" placeholder="请输入内容"></el-input>--> |
| | | <!-- <el-button @click="scanCompleted" style="float: right" type="primary">扫码完成</el-button>--> |
| | | <el-button type="primary" style="float: right" icon="el-icon-search" size="mini" @click="serialLink">串口连接</el-button> |
| | | <el-button @click="clearClick" style="float: right" type="danger" size="mini">清除</el-button> |
| | | </el-card> |
| | | </el-col> |
| | | |
| | | </el-row> |
| | | <el-row :gutter="5" style="margin-top: 5px"> |
| | | <el-col :span="6" > |
| | | <el-col :span="7" > |
| | | <el-card class="bottom-card"> |
| | | <div slot="header" class="clearfix"> |
| | | <i class="el-icon-tickets"></i> |
| | | <span style="font-weight: bold">当前工件信息</span> |
| | | </div> |
| | | <el-descriptions :column="1" :label-style="{'font-size': '15px'}" border :content-style="{'min-width': '150px'}"> |
| | | <el-descriptions :column="1" border :content-style="{'min-width': '140px'}"> |
| | | <!-- <el-descriptions :column="1" :label-style="{'font-size': '15px'}" border :content-style="{'min-width': '150px'}">--> |
| | | <el-descriptions-item label="工单编号"> |
| | | <span>{{workpieceInformation.workOrderCode}}</span> |
| | | </el-descriptions-item> |
| | | <el-descriptions-item label="产品编号"> |
| | | <span>{{workpieceInformation.productCode}}</span> |
| | | <span>{{workpieceInformation.workOrderNo}}</span> |
| | | </el-descriptions-item> |
| | | <el-descriptions-item label="产品型号"> |
| | | <span>{{workpieceInformation.productModel}}</span> |
| | | <span>{{workpieceInformation.productCode}}</span> |
| | | </el-descriptions-item> |
| | | <el-descriptions-item label="产品名称"> |
| | | <span>{{workpieceInformation.productName}}</span> |
| | | <el-descriptions-item label="小车码"> |
| | | <span>{{headContent.cardCode}}</span> |
| | | </el-descriptions-item> |
| | | <el-descriptions-item label="节拍"> |
| | | <span>{{workpieceInformation.beat}}</span> |
| | | <el-descriptions-item label="开始时间"> |
| | | <span>{{workpieceInformation.inboundTime}}</span> |
| | | </el-descriptions-item> |
| | | </el-descriptions> |
| | | <el-divider></el-divider> |
| | |
| | | </el-col> |
| | | |
| | | </el-row> |
| | | <el-row style="margin-top: 20px"> |
| | | <el-col :span="12"> |
| | | <el-input v-model="serialPortContent" style="width: 150px;" placeholder="请输入内容"></el-input> |
| | | |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-button @click="serialPortMethod" type="primary">串口获取数据</el-button> |
| | | <el-row v-show="goOnlineFlag" style="margin-top: 20px"> |
| | | <el-button @click="getWorkOrders" type="primary">接收工单</el-button> |
| | | |
| | | </el-col> |
| | | <div style="display: none"> |
| | | <div id="getWorkOrdersPrintPrintMe" style="width: 500px;"> |
| | | <div ref="canvasWrapper" id="canvasWrapper3" style="display: flex;justify-content: center;"></div> |
| | | <p style="font-size: 10px;word-break: break-all;display: flex;justify-content: center;">{{packCode}}</p> |
| | | </div> |
| | | <!-- <el-button @click="print">打印</el-button>--> |
| | | <el-button @click="test1">生成二维码</el-button> |
| | | </div> |
| | | </el-row> |
| | | <el-row style="margin-top: 20px"> |
| | | <el-button @click="Release" type="primary">放行</el-button> |
| | | |
| | | <el-row v-show="offlineFlag" style="margin-top: 20px"> |
| | | <el-button id="print" v-print="'#printMe'" type="primary">打印三联码</el-button> |
| | | <el-button style="display: none" @click="test1">生成二维码</el-button> |
| | | <el-button style="display: none" @click="test2">生成 |
| | | <span style="font-size: 10px;margin-left: 52px">MADE IN CHINA</span><br> |
| | | <br> |
| | | <br>二维码</el-button> |
| | | <div style="display: none"> |
| | | <div id="printMe"> |
| | | <br> |
| | | <p style="margin-left: 53px">{{printInfoData.partNumber}}</p> |
| | | <p style="margin-left: 53px">{{printInfoData.hardwareVersion}}</p> |
| | | <p style="margin-left: 53px">{{printInfoData.softwareVersion}}</p> |
| | | <br> |
| | | <br> |
| | | <br> |
| | | <br> |
| | | <img style="width: 140px;height: 20px;margin-left: 30px" :src="require('@/assets/images/a8963a24920640508e96150a053fc41.png')"/> |
| | | <span style="margin-left: 72px">{{printInfoData.printModel}}</span><br> |
| | | <span style="margin-left: 73px">{{printInfoData.supplierCode}}</span><br> |
| | | <span style="margin-left: 55px">{{printInfoData.partNumber}}</span><br> |
| | | <span style="font-size: 10px;margin-left: 28px;">{{headContent.sfcCode}}</span><br> |
| | | <span style="font-size: 10px;margin-left: 60px">MADE IN CHINA</span><br> |
| | | |
| | | <br> |
| | | <br> |
| | | <br> |
| | | <div ref="canvasWrapper" id="canvasWrapper1" style="display: flex;justify-content: center;margin-top: -27px;"></div> |
| | | <span style="font-size: 10px;word-break: break-all;display: flex;justify-content: center;width: 155px;margin-left: 20px;margin-top: 3px">P{{printInfoData.partNumber}}#T{{headContent.sfcCode}}#V{{printInfoData.supplierCode}}#S{{printInfoData.softwareVersion}}#H{{printInfoData.hardwareVersion}}#NBMS#</span> |
| | | <br> |
| | | <br> |
| | | <div ref="canvasWrapper" id="canvasWrapper2" style="display: flex;justify-content: center;margin-top: -27px"></div> |
| | | <span style="font-size: 10px;word-break: break-all;display: flex;justify-content: center;width: 155px;margin-left: 20px;margin-top: 3px">P{{printInfoData.partNumber}}#T{{headContent.sfcCode}}#V{{printInfoData.supplierCode}}#S{{printInfoData.softwareVersion}}#H{{printInfoData.hardwareVersion}}#NBMS#</span> |
| | | </div> |
| | | </div> |
| | | </el-row> |
| | | </el-card> |
| | | |
| | | </el-col> |
| | | <el-col :span="18"> |
| | | <el-col :span="17"> |
| | | <el-tabs type="border-card" style="height: 600px" v-model="activeName" @tab-click="changeMenu"> |
| | | <el-tab-pane name="first"> |
| | | <span slot="label"> <a class="el-icon-date"></a>首页</span> |
| | | <el-col :span="8"> |
| | | <el-table :cell-style="rowStyle" :data="formulaChildList"> |
| | | <el-table-column label="排序" width="60" align="center" prop="stepSort"> |
| | | <el-col :span="24"> |
| | | <el-table height="500" :cell-style="rowStyle" :data="formulaChildList"> |
| | | <el-table-column label="拧紧步号" width="80" align="center" prop="stepSort"> |
| | | </el-table-column> |
| | | <el-table-column label="操作内容" :show-overflow-tooltip='true' align="center" prop="operationSteps"> |
| | | <el-table-column label="操作内容" align="center" prop="operationSteps"> |
| | | </el-table-column> |
| | | <el-table-column label="产品编号" width="80" align="center" prop="productCode"> |
| | | </el-table-column> |
| | | <el-table-column label="物料编码" width="140" align="center" prop="materialCode"> |
| | | </el-table-column> |
| | | <el-table-column label="采集值" align="center" prop="collectData"> |
| | | </el-table-column> |
| | | <el-table-column label="结果" width="60" align="center" prop="results"> |
| | | </el-table-column> |
| | | |
| | | </el-table> |
| | | </el-col> |
| | | <el-col :span="16"> |
| | | <el-image style="height: 520px;width: 100%" :src="imgSrc"></el-image> |
| | | </el-col> |
| | | </el-tab-pane> |
| | | <el-tab-pane name="second"> |
| | | <span slot="label"> <b class="el-icon-date"></b>物料BOM</span> |
| | | <el-empty> |
| | | <span slot="description">暂无数据</span> |
| | | </el-empty> |
| | | </el-tab-pane> |
| | | <el-tab-pane name="third"> |
| | | <span slot="label"> <b class="el-icon-date"></b>采集清单</span> |
| | | <el-empty> |
| | | <span slot="description">暂无数据</span> |
| | | </el-empty> |
| | | </el-tab-pane> |
| | | <el-tab-pane name="fourth"> |
| | | <span slot="label"> <b class="el-icon-date"></b>安灯状态</span> |
| | | <el-empty> |
| | | <span slot="description">暂无数据</span> |
| | | </el-empty> |
| | | </el-tab-pane> |
| | | <el-tab-pane name="fifth"> |
| | | <span slot="label"> <b class="el-icon-date"></b>工艺配方</span> |
| | | <el-empty> |
| | | <span slot="description">暂无数据</span> |
| | | </el-empty> |
| | | </el-tab-pane> |
| | | </el-tabs> |
| | | </el-col> |
| | | </el-row> |
| | | <el-dialog v-dialogpop-up :title="title" :visible.sync="open1" width="1000" append-to-body> |
| | | <el-row |
| | | type="flex" |
| | | class="row-bg" |
| | | justify="center" |
| | | v-show="portsList.length === 0" |
| | | > |
| | | <el-col :span="7"> |
| | | <div style="margin-top: 400px"> |
| | | <span style="display: block"> |
| | | 仅支持Chrome 89+或者Edge 89+浏览器(安全上下文(HTTPS)中可用) |
| | | </span> |
| | | <el-button type="primary" @click="obtainAuthorization">授权</el-button> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | <el-form |
| | | v-show="portsList.length > 0" |
| | | ref="form1" |
| | | :model="form1" |
| | | label-width="100px"> |
| | | <el-row> |
| | | <el-col :span="24" |
| | | ><div> |
| | | <el-form-item label="串口"> |
| | | <el-select |
| | | v-model="form1.port" |
| | | filterable |
| | | placeholder="请选择串口" |
| | | :disabled="isDisable" |
| | | > |
| | | <el-option |
| | | v-for="item in portsList" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="波特率"> |
| | | <el-autocomplete |
| | | popper-class="my-autocomplete" |
| | | v-model="form1.baudRate" |
| | | :fetch-suggestions="querySearch" |
| | | placeholder="请输入波特率" |
| | | :disabled="isDisable" |
| | | > |
| | | <i class="el-icon-edit el-input__icon" slot="suffix"> </i> |
| | | <template slot-scope="{ item }"> |
| | | <div class="name">{{ item.value }}</div> |
| | | <span class="addr">{{ item.address }}</span> |
| | | </template> |
| | | </el-autocomplete> |
| | | </el-form-item> |
| | | <el-form-item label="数据位"> |
| | | <el-select |
| | | v-model="form1.dataBits" |
| | | placeholder="请选择数据位" |
| | | :disabled="isDisable" |
| | | > |
| | | <el-option label="7" value="7"></el-option> |
| | | <el-option label="8" value="8"></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="停止位"> |
| | | <el-select |
| | | v-model="form1.stopBits" |
| | | placeholder="请选择停止位" |
| | | :disabled="isDisable" |
| | | > |
| | | <el-option label="1" value="1"></el-option> |
| | | <el-option label="2" value="2"></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | |
| | | <el-form-item label="校验位"> |
| | | <el-select |
| | | v-model="form1.parity" |
| | | placeholder="请选择校验位" |
| | | :disabled="isDisable" |
| | | > |
| | | <el-option label="None" value="none"></el-option> |
| | | <el-option label="Even" value="even"></el-option> |
| | | <el-option label="Odd" value="odd"></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | |
| | | <el-form-item label="流控制"> |
| | | <el-select |
| | | v-model="form1.flowControl" |
| | | placeholder="请选择流控制" |
| | | :disabled="isDisable" |
| | | > |
| | | <el-option label="None" value="none"></el-option> |
| | | <el-option label="HardWare" value="hardware"></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="显示历史"> |
| | | <el-switch |
| | | v-model="form1.isShowHistory" |
| | | @change="loadHistory" |
| | | ></el-switch> |
| | | <el-button |
| | | type="danger" |
| | | icon="el-icon-delete" |
| | | circle |
| | | title="清空历史" |
| | | @click="clearHistory" |
| | | ></el-button> |
| | | </el-form-item> |
| | | <el-form-item label="发送区设置" v-show="isShowSendArea"> |
| | | <el-form-item label="发送格式"> |
| | | <el-radio-group v-model="form1.type"> |
| | | <el-radio label="1">ASCII</el-radio> |
| | | <el-radio label="2">HEX</el-radio> |
| | | </el-radio-group> |
| | | </el-form-item> |
| | | <el-form-item label="发送信息"> |
| | | <el-input type="textarea" v-model="form1.sendMsg"></el-input> |
| | | </el-form-item> |
| | | <el-button type="primary" @click="sendCommon">发送</el-button> |
| | | </el-form-item> |
| | | |
| | | <el-form-item> |
| | | <el-button :type="btnType" @click="connectBtn">{{ |
| | | btnText |
| | | }}</el-button> |
| | | <el-button type="info" @click="obtainAuthorization" |
| | | >新增授权</el-button |
| | | > |
| | | </el-form-item> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | </el-form> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | <script> |
| | | import {listWorkReport} from "@/api/main/om/workReport/workReport"; |
| | | import {listStationConf,getIpv4} from "@/api/main/sc/stationConf"; |
| | | import {listFormulaChild, releaseCheck, updateResults, workpieceRelease} from "@/api/main/bs/formulaChild/formulaChild"; |
| | | import { |
| | | clearWorkpieceRelease, |
| | | fistSetpNumber, inPlaceInspection, |
| | | listFormulaChild, manualNgOffline, |
| | | noPageListFormulaChild, |
| | | releaseCheck, unfinishedProcess, |
| | | updateResults, |
| | | updateTighteningFormula, |
| | | workpieceRelease |
| | | } from "@/api/main/bs/formulaChild/formulaChild"; |
| | | import MySerialPort from "@/utils/MySerialPort"; |
| | | import USBDevice from "@/utils/usb.json"; |
| | | import { |
| | | bindYzSfcFlag, |
| | | checkCarCode, checkYzSfcCode, |
| | | findBytrolleyYardGetOne, |
| | | listProductionOrde, |
| | | receivingWorkOrders, |
| | | trolleyYardBinDing |
| | | } from "@/api/main/om/productionOrde/productionOrde"; |
| | | import {addPassingStationCollection} from "@/api/main/da/passingStationCollection/passingStationCollection"; |
| | | import { |
| | | addBasicParameters, |
| | | addParamCollection, |
| | | addTighteningParameters, |
| | | saveCampaignTimeParameters, |
| | | replaceAssemblyCode, checkRecordDataDone, enterWeighing, |
| | | } from "@/api/main/da/paramCollection/paramCollection"; |
| | | import QRCode from "qrcodejs2"; |
| | | import {listEquipmentArchives} from "@/api/main/em/equipmentArchives/equipmentArchives"; |
| | | |
| | | export default { |
| | | name: "stationTerminal", |
| | | data() { |
| | | return { |
| | | printInfoData: { |
| | | softwareVersion: 'SW001.001', //软件版本号 |
| | | hardwareVersion: 'HW001.001', //硬件版本号 |
| | | printModel: 'H2155D', //型号 |
| | | partNumber: '9900200136', //零部件号 |
| | | supplierCode: '993983', //供应商编码 |
| | | }, |
| | | carCode: '', |
| | | goOnlineFlag: false, |
| | | offlineFlag: false, |
| | | |
| | | |
| | | serialPortContent: '', |
| | | // 查询参数 |
| | | formulaChildParams: { |
| | |
| | | pageSize: 10, |
| | | productCode: null, |
| | | processesCode: null, |
| | | artificialNgFlag: null, |
| | | sfcBarcode: null, |
| | | }, |
| | | // 配方配置子信息表格数据 |
| | | formulaChildList: [], |
| | |
| | | headContent: { |
| | | processesCode: 'OP1010', |
| | | processesName: '贴标机-贴码', |
| | | sfcCode: '1000000000000001', |
| | | sfcCode: '', |
| | | yzSfcCode: '', |
| | | cardCode: '', |
| | | }, |
| | | workpieceInformation: { |
| | | workOrderCode: null, |
| | | workOrderNo: null, |
| | | productCode: null, |
| | | productModel: null, |
| | | productName: null, |
| | | beat: null, |
| | | inboundTime: null, |
| | | }, |
| | | // 查询参数 |
| | | queryParams: { |
| | |
| | | }, |
| | | content: '', |
| | | activeName: 'first', |
| | | url: "ws://192.168.10.252:8080/websocket/message/", |
| | | // url: "ws://192.168.2.248:8080/websocket/message/", |
| | | // url: "ws://10.103.210.248:8080/websocket/message/", |
| | | url: "ws://192.168.2.76:8080/websocket/message/", |
| | | message: "", |
| | | text_content: "", |
| | | ws: null, |
| | | inputValue: '9' |
| | | inputValue: '9', |
| | | |
| | | open1: false, |
| | | input: "", |
| | | keepReading: true, |
| | | form1: { |
| | | baudRate: "115200", |
| | | dataBits: "8", |
| | | stopBits: "1", |
| | | parity: "none", |
| | | flowControl: "none", |
| | | desc: "", |
| | | type: "1", |
| | | isShowHistory: false, |
| | | }, |
| | | btnType: "primary", |
| | | btnText: "连接串口", |
| | | restaurants: [], |
| | | portsList: [], |
| | | isShowSendArea: false, |
| | | readType: 1, |
| | | title: "", |
| | | |
| | | passingStationForm: {}, |
| | | originalArray: [], |
| | | yzSfcFlag: 1, |
| | | endYz: false, |
| | | packCode: 'test111' |
| | | } |
| | | }, |
| | | beforeDestroy() { |
| | |
| | | // }, 3000); |
| | | }, |
| | | mounted() { |
| | | |
| | | if ("serial" in navigator) { |
| | | this.myserialport = new MySerialPort(); |
| | | this.getPorts(); |
| | | navigator.serial.addEventListener("connect", (e) => { |
| | | this.$message.success("设备已连接"); |
| | | this.getPorts(); |
| | | }); |
| | | navigator.serial.addEventListener("disconnect", (e) => { |
| | | this.$message.error("设备已断开"); |
| | | }); |
| | | this.restaurants = this.loadAll(); |
| | | } else { |
| | | this.$message.error( |
| | | "当前为HTTP模式或者浏览器版本过低,不支持网页连接串口" |
| | | ); |
| | | } |
| | | }, |
| | | computed: { |
| | | isDisable() { |
| | | return this.btnType === "danger"; |
| | | } |
| | | }, |
| | | methods: { |
| | | Release(){ |
| | | let formulaChildParams = { |
| | | productCode: this.workpieceInformation.productCode, |
| | | processesCode: this.headContent.processesCode |
| | | } |
| | | releaseCheck(formulaChildParams).then(response => { |
| | | if(response.data === 0){ |
| | | //改变状态 |
| | | workpieceRelease(formulaChildParams).then(response => { |
| | | }); |
| | | this.$message('放行成功!'); |
| | | this.formulaChildList = [] |
| | | this.getListFormulaChild() |
| | | }else { |
| | | this.$message('步骤未完成不许放行!'); |
| | | } |
| | | |
| | | //接收工单-------开始 |
| | | getWorkOrdersPrint() { |
| | | let newStr = document.getElementById('getWorkOrdersPrintPrintMe').innerHTML; |
| | | const printFrame = document.createElement('iframe'); |
| | | printFrame.style.display = 'none'; |
| | | document.body.appendChild(printFrame); |
| | | const content = document.getElementById('getWorkOrdersPrintPrintMe').innerHTML; |
| | | printFrame.contentDocument.write(content); |
| | | printFrame.contentWindow.print(); |
| | | document.body.removeChild(printFrame); |
| | | return false; |
| | | }, |
| | | async getWorkOrders(){ |
| | | await receivingWorkOrders().then(response => { |
| | | this.packCode = response.msg; |
| | | this.getWorkOrdersTest1() |
| | | }); |
| | | setTimeout(() => { |
| | | this.getWorkOrdersPrint() |
| | | },50) |
| | | }, |
| | | getWorkOrdersTest1(){ |
| | | document.getElementById('canvasWrapper3').innerHTML = '' |
| | | this.$nextTick(() => { |
| | | let qrCode = new QRCode('canvasWrapper3',{ |
| | | width: 80, |
| | | height: 80, |
| | | padding: 0, |
| | | margin: 0, |
| | | text: this.packCode, |
| | | colorDark: '#000', |
| | | colorLight: '#fff' |
| | | }) |
| | | }) |
| | | }, |
| | | //接收工单-------结束 |
| | | |
| | | //下线打印-------开始 |
| | | initializePrintInfoData(){ |
| | | listEquipmentArchives().then(response => { |
| | | this.printInfoData.softwareVersion = response.rows[0].equipmentCode |
| | | this.printInfoData.hardwareVersion = response.rows[0].equipmentName |
| | | this.printInfoData.supplierCode = response.rows[0].equipmentSpec |
| | | this.printInfoData.printModel = response.rows[0].equipmentBrand |
| | | this.printInfoData.partNumber = response.rows[0].equipmentTypeName |
| | | console.log(response.rows[0]) |
| | | }); |
| | | }, |
| | | serialPortMethod(){ |
| | | test1(){ |
| | | document.getElementById('canvasWrapper1').innerHTML = ''; |
| | | this.$nextTick(() => { |
| | | let qrCode = new QRCode('canvasWrapper1',{ |
| | | width: 120, |
| | | height: 120, |
| | | text: 'P'+this.printInfoData.partNumber+'#T'+ this.headContent.sfcCode +'#V'+this.printInfoData.supplierCode+'#S'+this.printInfoData.softwareVersion+'#H'+this.printInfoData.hardwareVersion+'#NBMS#', |
| | | colorDark: '#000', |
| | | colorLight: '#fff' |
| | | }) |
| | | } |
| | | ) |
| | | }, |
| | | test2(){ |
| | | document.getElementById('canvasWrapper2').innerHTML = ''; |
| | | this.$nextTick(() => { |
| | | let qrCode = new QRCode('canvasWrapper2',{ |
| | | width: 120, |
| | | height: 120, |
| | | text: 'P'+this.printInfoData.partNumber+'#T'+ this.headContent.sfcCode +'#V'+this.printInfoData.supplierCode+'#S'+this.printInfoData.softwareVersion+'#H'+this.printInfoData.hardwareVersion+'#NBMS#', |
| | | colorDark: '#000', |
| | | colorLight: '#fff' |
| | | }) |
| | | } |
| | | ) |
| | | }, |
| | | print1() { |
| | | // 使用插件打印方式 |
| | | // this.$print(this.$refs.printMe) |
| | | // this.initializePrintInfoData() |
| | | // if(this.headContent.sfcCode){ |
| | | // //新页面打印 |
| | | // // let newStr = document.getElementById('printMe').innerHTML; |
| | | // // let newWin = window.open('', '_blank',st); |
| | | // // newWin.document.body.innerHTML = newStr; |
| | | // // newWin.print(); |
| | | // // 本页面打印 |
| | | // let newStr = document.getElementById('printMe').innerHTML; |
| | | // const printFrame = document.createElement('iframe'); |
| | | // printFrame.style.display = 'none'; |
| | | // document.body.appendChild(printFrame); |
| | | // const content = document.getElementById('printMe').innerHTML; |
| | | // printFrame.contentDocument.write(content); |
| | | // printFrame.contentWindow.print(); |
| | | // console.log(printFrame) |
| | | // // document.body.removeChild(printFrame); |
| | | // console.log(printFrame) |
| | | // return false; |
| | | // }else { |
| | | // this.$message.error('未扫描总成码禁止打印!'); |
| | | // } |
| | | }, |
| | | //下线打印-------截止 |
| | | bindcardCode(scanValue){ |
| | | // this.$message('绑定成功!'); |
| | | let param = { |
| | | productNum: this.headContent.sfcCode, |
| | | trolleyYard: scanValue, |
| | | } |
| | | trolleyYardBinDing(param).then(response => { |
| | | }); |
| | | |
| | | }, |
| | | serialLink() { |
| | | this.open1 = true |
| | | }, |
| | | bindYzSfc(){ |
| | | if(this.headContent.sfcCode!==""&&this.headContent.yzSfcCode!==""){ |
| | | let param = { |
| | | sfcCode: this.headContent.sfcCode, |
| | | locationCode: this.headContent.processesCode, |
| | | yzSfcCode: this.headContent.yzSfcCode |
| | | } |
| | | const orderParam = { |
| | | productNum: this.headContent.sfcCode, |
| | | } |
| | | replaceAssemblyCode(param).then(response => { |
| | | this.$message('绑定成功!'); |
| | | bindYzSfcFlag(orderParam).then(response => { |
| | | this.yzSfcFlag = 1 |
| | | }); |
| | | }); |
| | | } |
| | | }, |
| | | Release(){ |
| | | // this.$message('portsList!'+this.portsList.length); |
| | | if(this.btnType === "danger"){ |
| | | this.$message('连接了!'); |
| | | |
| | | }else { |
| | | this.$message('mei连接了!'); |
| | | |
| | | } |
| | | }, |
| | | serialPortMethod(value){ |
| | | let formulaChildParams = { |
| | | materialCode: this.serialPortContent |
| | | scanBarcode: value, |
| | | sfcBarcode: this.headContent.sfcCode, |
| | | workOrderNo: this.workpieceInformation.workOrderNo, |
| | | productCode: this.workpieceInformation.productCode, |
| | | locationCode: this.headContent.processesCode, |
| | | collectionTime: new Date() |
| | | } |
| | | updateResults(formulaChildParams).then(response => { |
| | | console.log(response) |
| | | if(response.msg === "3"){ |
| | | this.cakeLamp.release= 1 //允许放行 |
| | | }else if(response.msg === "2"){ |
| | | this.$message.error('扫码重复请重新扫码!'); |
| | | } |
| | | this.getListFormulaChild() |
| | | }); |
| | | }, |
| | |
| | | }, |
| | | /** 查询配方配置子信息列表 */ |
| | | getListFormulaChild() { |
| | | // this.formulaChildList = [] |
| | | this.formulaChildParams.productCode = this.workpieceInformation.productCode |
| | | this.formulaChildParams.processesCode = this.headContent.processesCode |
| | | listFormulaChild(this.formulaChildParams).then(response => { |
| | | if(this.formulaChildParams.artificialNgFlag !== null){ |
| | | this.formulaChildParams.sfcBarcode = this.headContent.sfcCode |
| | | } |
| | | console.log("getListFormulaChild"+this.formulaChildParams.artificialNgFlag) |
| | | noPageListFormulaChild(this.formulaChildParams).then(response => { |
| | | this.formulaChildList = response.rows; |
| | | if (this.formulaChildList.length >0){ |
| | | let pos = 0 |
| | | const tempArr = this.formulaChildList.filter(x=> 'OK' === x.results) |
| | | if (tempArr.length>0){ |
| | | pos = tempArr.length |
| | | this.$nextTick(() => { |
| | | let temp33 = document.getElementsByClassName('el-table__row') |
| | | console.log('temp33',temp33) |
| | | console.log('len',temp33.item(pos)) |
| | | if (temp33.length > 0){ |
| | | console.log('1111111111111111') |
| | | let arr = temp33[pos-1] |
| | | console.log('srr',arr) |
| | | arr.scrollIntoView({ block: 'center' }) |
| | | } |
| | | }) |
| | | } |
| | | |
| | | } |
| | | |
| | | }); |
| | | }, |
| | | endClear(){ |
| | | this.cakeLamp.InPlace= 0 //工件到位 |
| | | this.cakeLamp.scanFinish= 0 |
| | | this.cakeLamp.startWork= 0 |
| | | this.cakeLamp.release= 0 //允许放行 |
| | | |
| | | this.formulaChildList = [] |
| | | this.workpieceInformation.productCode = null; |
| | | this.workpieceInformation.workOrderNo = null; |
| | | this.workpieceInformation.productModel = null; |
| | | this.workpieceInformation.productName = null; |
| | | this.workpieceInformation.inboundTime = null; |
| | | this.headContent.sfcCode = ''; |
| | | this.headContent.yzSfcCode = ''; |
| | | this.headContent.cardCode = ''; |
| | | this.formulaChildParams.artificialNgFlag = null |
| | | this.formulaChildParams.sfcBarcode = null |
| | | }, |
| | | changeMenu(tab, event) { |
| | | console.log(tab, event); |
| | | }, |
| | | clearClick(){ |
| | | this.$message('这是一条清除消息提示'); |
| | | this.headContent.sfcCode = null |
| | | const param = { |
| | | workOrderNo: this.workpieceInformation.workOrderNo, |
| | | productCode: this.workpieceInformation.productCode, |
| | | locationCode: this.headContent.processesCode, |
| | | productBarcode: this.headContent.sfcCode, |
| | | } |
| | | this.endClear() |
| | | clearWorkpieceRelease(param).then(response => {}); |
| | | this.headContent.sfcCode = '' |
| | | this.$message('清除成功!'); |
| | | }, |
| | | scanCompleted(){ |
| | | this.$message('扫码完成'+this.content); |
| | |
| | | this.cakeLamp.startWork = 1 |
| | | |
| | | }, |
| | | /** 查询报工记录 表列表 */ |
| | | /** 查询工单列表 */ |
| | | async getList() { |
| | | await listWorkReport(this.queryParams).then(response => { |
| | | this.initializePrintInfoData() |
| | | await listProductionOrde(this.queryParams).then(response => { |
| | | let rowsData = response.rows[0]; |
| | | console.log(rowsData) |
| | | this.workpieceInformation.workOrderCode = rowsData.workOrderCode; |
| | | this.workpieceInformation.workOrderNo = rowsData.workOrderNo; |
| | | this.workpieceInformation.productCode = rowsData.productCode; |
| | | this.workpieceInformation.productModel = rowsData.productModel; |
| | | this.workpieceInformation.productName = rowsData.productName; |
| | | this.timer = setInterval(() => { |
| | | this.workpieceInformation.beat++; |
| | | }, 1000); |
| | | this.headContent.cardCode = rowsData.trolleyYard; |
| | | this.formulaChildParams.artificialNgFlag = rowsData.artificialNgFlag; |
| | | }); |
| | | if(this.headContent.processesCode === 'POP430'){ |
| | | this.test1() |
| | | this.test2() |
| | | } |
| | | this.getListFormulaChild() |
| | | // this.addOverStationCollection() |
| | | this.workpieceInformation.inboundTime = this.getCurrentTime() |
| | | const param = { |
| | | processesCode: this.headContent.processesCode, |
| | | productCode: this.workpieceInformation.productCode |
| | | } |
| | | fistSetpNumber(param).then(response => { |
| | | console.log("fistSetpNumber------"+response.msg) |
| | | }); |
| | | }, |
| | | |
| | | getCurrentTime() { |
| | | const now = new Date(); |
| | | const year = now.getFullYear(); |
| | | const month = this.padTimeUnit(now.getMonth() + 1); // 月份是从0开始的 |
| | | const day = this.padTimeUnit(now.getDate()); |
| | | const hours = this.padTimeUnit(now.getHours()); |
| | | const minutes = this.padTimeUnit(now.getMinutes()); |
| | | const seconds = this.padTimeUnit(now.getSeconds()); |
| | | return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; |
| | | }, |
| | | allowRelease(){ |
| | | clearInterval(this.timer); |
| | | this.$message('保存节拍为'+this.workpieceInformation.beat+'秒'); |
| | | padTimeUnit(value) { |
| | | return value.toString().padStart(2, '0'); |
| | | }, |
| | | /** 查询工位终端配置列表 */ |
| | | // async getStationConfList() { |
| | | // await getIpv4().then(response => { |
| | | // this.StationConfQueryParams.ipAddress = response.msg |
| | | // console.log('查询到本工位IP为'+this.StationConfQueryParams.ipAddress) |
| | | // }); |
| | | // listStationConf(this.StationConfQueryParams).then(response => { |
| | | // let rows = response.rows[0] |
| | | // if(response.rows.length===0){ |
| | | // this.$message('该工位没有配置IP,请联系管理员配置IP'); |
| | | // return |
| | | // } |
| | | // this.headContent.processesName = rows.processesName |
| | | // this.headContent.processesCode = rows.processesCode |
| | | // console.log('设置工位编码'+this.headContent.processesCode) |
| | | // |
| | | // }); |
| | | // }, |
| | | // connectWebsocket() { |
| | | // console.log('websocket连接工位为'+this.headContent.processesCode) |
| | | // const wsuri = this.url + this.headContent.processesCode; |
| | | // this.ws = new WebSocket(wsuri); |
| | | // const self = this; |
| | | // this.ws.onopen = function (event) { |
| | | // // self.text_content = self.text_content + "已经打开连接!" + "\n"; |
| | | // this.$message('websocket连接成功!'); |
| | | // }; |
| | | // this.ws.onmessage = function (event) { |
| | | // self.text_content = event.data + "\n"; |
| | | // console.log(event.data) |
| | | // if(event.data === "IN"){ |
| | | // self.cakeLamp.InPlace = "1" |
| | | // }else if(event.data === "OUT"){ |
| | | // self.cakeLamp.outRsSign = "1" |
| | | // } |
| | | // }; |
| | | // }, |
| | | addBaseData(){ |
| | | addBasicParameters(this.passingStationForm).then(response => {}); |
| | | }, |
| | | |
| | | /** 入站增加过站采集记录 **/ |
| | | addOverStationCollection(){ |
| | | this.passingStationForm = { |
| | | id: null, |
| | | workOrderNo: this.workpieceInformation.workOrderNo, |
| | | productCode: this.workpieceInformation.productCode, |
| | | locationCode: this.headContent.processesCode, |
| | | model: this.workpieceInformation.productModel, |
| | | productBarcode: this.headContent.sfcCode, |
| | | sfcCode: this.headContent.sfcCode, |
| | | inboundTime: new Date() |
| | | } |
| | | addPassingStationCollection(this.passingStationForm).then(response => {}); |
| | | // addBasicParameters(this.passingStationForm).then(response => {}); |
| | | }, |
| | | exit() { |
| | | if (this.ws) { |
| | | this.ws.close(); |
| | |
| | | alert("未连接到服务器"); |
| | | } |
| | | }, |
| | | async initStation(){ |
| | | |
| | | initStation: async function () { |
| | | await getIpv4().then(response => { |
| | | this.StationConfQueryParams.ipAddress = response.msg |
| | | console.log('查询到本工位IP为'+this.StationConfQueryParams.ipAddress) |
| | | console.log('查询到本工位IP为' + this.StationConfQueryParams.ipAddress) |
| | | }); |
| | | await listStationConf(this.StationConfQueryParams).then(response => { |
| | | let rows = response.rows[0] |
| | | if(response.rows.length===0){ |
| | | if (response.rows.length === 0) { |
| | | this.$message('该工位没有配置IP,请联系管理员配置IP'); |
| | | return |
| | | } |
| | | this.headContent.processesName = rows.processesName |
| | | this.headContent.processesCode = rows.processesCode |
| | | console.log('设置工位编码'+this.headContent.processesCode) |
| | | console.log('设置工位编码' + this.headContent.processesCode) |
| | | inPlaceInspection({processesCode: this.headContent.processesCode}).then(response => { |
| | | console.log(response) |
| | | this.cakeLamp.InPlace = response.data |
| | | }); |
| | | |
| | | if(this.headContent.processesCode === 'POP230'){ |
| | | this.goOnlineFlag = true |
| | | } |
| | | if(this.headContent.processesCode === 'POP430'){ |
| | | this.offlineFlag = true |
| | | } |
| | | |
| | | }); |
| | | console.log('websocket连接工位为'+this.headContent.processesCode) |
| | | this.conCom() |
| | | console.log('websocket连接工位为' + this.headContent.processesCode) |
| | | const wsuri = this.url + this.headContent.processesCode; |
| | | this.ws = new WebSocket(wsuri); |
| | | const self = this; |
| | | this.ws.onopen = function (event) { |
| | | this.$message('websocket连接成功!'); |
| | | self.$message('websocket连接成功!'); |
| | | |
| | | }; |
| | | this.ws.onmessage = function (event) { |
| | | self.text_content = event.data + "\n"; |
| | | console.log(event.data) |
| | | if(event.data === "IN"){ |
| | | self.cakeLamp.InPlace = 1 |
| | | }else if(event.data === "OUT"){ |
| | | self.cakeLamp.release = 1 |
| | | setTimeout(() => { |
| | | this.resetting() |
| | | }, 2000); // 延时2秒触发 |
| | | }else if(event.data === 'TIGHTEN'){ |
| | | console.log('开始拧紧') |
| | | this.formulaChildList = [] |
| | | self.getListFormulaChild() |
| | | if (event.data === "print") { |
| | | self.$message('postman调用打印方法打印!'); |
| | | // self.print1() |
| | | document.getElementById('print').click(); |
| | | }else if (event.data === "IN") { |
| | | self.cakeLamp.InPlace = 1; |
| | | } else if (event.data === "NG") { |
| | | //给plc发下线信号 |
| | | //清除数据 |
| | | self.$confirm('拧紧三次NG,请确认下线!!!', '消息', { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | showCancelButton: false, |
| | | type: 'warning' |
| | | }).then(() => { |
| | | self.ngFunction(); |
| | | this.$message({ |
| | | type: 'success', |
| | | message: '确认成功!' |
| | | }); |
| | | }); |
| | | |
| | | } else if (event.data === "OUT") { |
| | | self.cakeLamp.release = 1; |
| | | } else if (event.data === "END") { |
| | | |
| | | const formulaChildIndex = self.formulaChildList.length-1 |
| | | |
| | | if(self.headContent.sfcCode=== ''||self.headContent.sfcCode=== null){ |
| | | unfinishedProcess({processesCode: self.headContent.processesCode,recordDataDone: 26}).then(response => {}); |
| | | self.$message('总成码为空,请扫码!') |
| | | return; |
| | | } |
| | | |
| | | if(self.formulaChildList[formulaChildIndex].results !== 'OK'){ |
| | | self.$message('未做完工序禁止放行'); |
| | | unfinishedProcess({processesCode: self.headContent.processesCode,recordDataDone: 25}).then(response => {}); |
| | | return; |
| | | } |
| | | |
| | | const param = { |
| | | workOrderNo: self.workpieceInformation.workOrderNo, |
| | | productCode: self.workpieceInformation.productCode, |
| | | locationCode: self.headContent.processesCode, |
| | | productBarcode: self.headContent.sfcCode, |
| | | inboundTime: self.workpieceInformation.inboundTime, |
| | | formulaChildEntity: self.formulaChildList[formulaChildIndex] |
| | | } |
| | | |
| | | console.log("进入最终方法") |
| | | self.endSaveData(param) |
| | | } else if (event.data.includes("[")) { |
| | | let formulaChilds = ""; |
| | | self.formulaChildList.sort((a, b) => a.stepSort - b.stepSort); |
| | | self.formulaChildList |
| | | .filter((formulaChild) => formulaChild.operationType === '1'); |
| | | for (let i = 0; i < self.formulaChildList.length; i++) { |
| | | let formulaChild = self.formulaChildList[i]; |
| | | let results = formulaChild.results; |
| | | |
| | | if (results === '' || results === null || results === 'NG') { |
| | | formulaChilds = formulaChild; |
| | | break; |
| | | } |
| | | } |
| | | if(formulaChilds === ""){ |
| | | self.$message.error('本工位已工作完成!'); |
| | | return; |
| | | } |
| | | const param = { |
| | | id: formulaChilds.id, |
| | | tightenTheArray: event.data, |
| | | paramCode: formulaChilds.paramCode, |
| | | workOrderNo: self.workpieceInformation.workOrderNo, |
| | | productCode: self.workpieceInformation.productCode, |
| | | locationCode: self.headContent.processesCode, |
| | | productBarcode: self.headContent.sfcCode, |
| | | spareField1: formulaChilds.spareField1, |
| | | spareField2: formulaChilds.spareField2, |
| | | spareField3: formulaChilds.spareField3, |
| | | spareField4: formulaChilds.spareField4, |
| | | stepSort: formulaChilds.stepSort, |
| | | ngTimes: formulaChilds.ngTimes, |
| | | } |
| | | if(formulaChilds.paramCode === null||formulaChilds.paramCode ===''){ |
| | | self.$message('未找到参数码,请检查参数码是否正确'); |
| | | return; |
| | | } |
| | | self.formulaChildParams.artificialNgFlag = null |
| | | console.log("self.formulaChildParams.artificialNgFlag"+self.formulaChildParams.artificialNgFlag) |
| | | if(self.headContent.sfcCode!==null||self.headContent.sfcCode!==''){ |
| | | updateTighteningFormula(param).then(response => { |
| | | //addTighteningParameters(param).then(response => {}); |
| | | self.getListFormulaChild() |
| | | }).catch(error =>{ |
| | | self.getListFormulaChild() |
| | | }); |
| | | } |
| | | } |
| | | }; |
| | | }, |
| | | resetting() { |
| | | this.cakeLamp = { |
| | | InPlace: 0, |
| | | release: 0, |
| | | startWork: 0, |
| | | scanFinish: 0, |
| | | |
| | | endSaveData(param){ |
| | | saveCampaignTimeParameters(param).then(response => { |
| | | this.cakeLamp.release = 1; |
| | | this.endClear() |
| | | workpieceRelease(param).then(response => {}); |
| | | }); |
| | | }, |
| | | |
| | | ngFunction(){ |
| | | const param = { |
| | | locationCode: this.headContent.processesCode, |
| | | sfcBarcode: this.headContent.sfcCode, |
| | | productCode: this.workpieceInformation.productCode, |
| | | } |
| | | } |
| | | manualNgOffline(param).then(response => {}); |
| | | clearWorkpieceRelease(param).then(releaseCheck =>{}); |
| | | this.endClear() |
| | | }, |
| | | |
| | | //接受数据的回调 |
| | | callBack(value) { |
| | | if (this.form1.isShowHistory) this.form1.desc = this.readLi().join(""); |
| | | else { |
| | | const scanValue = this.myserialport.hex2atostr(value).replace(/[\r\n]/g, ''); |
| | | console.log("串口收到数据-------------------"+scanValue) |
| | | console.log("sfc=--"+this.headContent.sfcCode+"--") |
| | | if(this.headContent.sfcCode !== '' && this.headContent.sfcCode !== null |
| | | && this.headContent.sfcCode !== undefined){ |
| | | if(scanValue.includes("0RSP1TE") && this.headContent.processesCode === 'POP230'){ |
| | | this.headContent.cardCode = scanValue |
| | | this.bindcardCode(scanValue); |
| | | this.serialPortMethod(scanValue) |
| | | }else { |
| | | this.$message('工位终端扫描物料编码'+scanValue); |
| | | console.log(scanValue) |
| | | this.serialPortMethod(scanValue) |
| | | } |
| | | } else { |
| | | if(this.headContent.processesCode === 'POP230'){ |
| | | this.headContent.sfcCode = scanValue; |
| | | this.queryParams.productNum = scanValue; |
| | | this.getList() |
| | | this.cakeLamp.scanFinish = 1 |
| | | this.cakeLamp.startWork = 1 |
| | | }else { |
| | | let param = { |
| | | trolleyYard: scanValue |
| | | } |
| | | findBytrolleyYardGetOne(param).then(response => { |
| | | if(response.msg !== '2'){ |
| | | this.headContent.sfcCode = response.msg; |
| | | this.queryParams.productNum = response.msg; |
| | | this.$message('扫码识别产品序列号'+scanValue); |
| | | // this.headContent.sfcCode = scanValue; |
| | | // this.queryParams.productNum = scanValue; |
| | | this.getList() |
| | | this.cakeLamp.scanFinish = 1 |
| | | this.cakeLamp.startWork = 1 |
| | | }else { |
| | | this.$message('没有序列号'+scanValue); |
| | | return |
| | | } |
| | | }); |
| | | } |
| | | |
| | | } |
| | | |
| | | } |
| | | }, |
| | | clearHistory() { |
| | | this.form1.desc = ""; |
| | | this.myserialport.state.readValue = []; |
| | | }, |
| | | loadHistory() { |
| | | if (this.form1.isShowHistory) this.form1.desc = this.readLi().join(""); |
| | | else { |
| | | let temp = this.readLi(); |
| | | if (temp.length > 0) this.form1.desc = temp[temp.length - 1].join(""); |
| | | } |
| | | }, |
| | | readLi() { |
| | | let readType = this.readType; |
| | | return this.myserialport.state.readValue.map((items, index) => { |
| | | const item = items.value; |
| | | const type = items.type; // 1接收,2发送 |
| | | let body = []; |
| | | if (item !== undefined) { |
| | | let strArr = []; |
| | | for (let hex of Array.from(item)) { |
| | | strArr.push(hex.toString(16).toLocaleUpperCase()); |
| | | } |
| | | if (strArr.includes("D") && strArr.includes("A")) { |
| | | if (strArr.indexOf("A") - strArr.indexOf("D") === 1) { |
| | | strArr.splice(strArr.indexOf("D"), 1); |
| | | strArr.splice(strArr.indexOf("A"), 1, <br key={0} />); |
| | | } |
| | | } |
| | | strArr = strArr.map((item) => { |
| | | if (typeof item === "string") { |
| | | if (readType === 1) { |
| | | return this.myserialport.hex2a(parseInt(item, 16)); |
| | | } else if (readType === 2) { |
| | | return item + " "; |
| | | } |
| | | } |
| | | return item; |
| | | }); |
| | | if (typeof strArr[strArr.length - 1] === "string") { |
| | | strArr.push("\r\n"); |
| | | } |
| | | body.push(strArr.join("")); |
| | | } |
| | | return body; |
| | | }); |
| | | }, |
| | | conCom(){ |
| | | try { |
| | | this.myserialport.state.baudRate = this.form1.baudRate; |
| | | this.myserialport.state.dataBits = this.form1.dataBits; |
| | | this.myserialport.state.stopBits = this.form1.stopBits; |
| | | this.myserialport.state.parity = this.form1.parity; |
| | | this.myserialport.state.flowControl = this.form1.flowControl; |
| | | this.myserialport.openPort(0, true, this.callBack); |
| | | console.log(this.form1.port) |
| | | } catch (error) { |
| | | this.$message.error("串口连接失败!请检查串口是否已被占用"); |
| | | } |
| | | if (this.myserialport.state.isOpen) { |
| | | this.$message.success("串口连接成功"); |
| | | } |
| | | }, |
| | | //连接 |
| | | async connectBtn() { |
| | | if (this.btnType === "primary") { |
| | | try { |
| | | this.myserialport.state.baudRate = this.form1.baudRate; |
| | | this.myserialport.state.dataBits = this.form1.dataBits; |
| | | this.myserialport.state.stopBits = this.form1.stopBits; |
| | | this.myserialport.state.parity = this.form1.parity; |
| | | this.myserialport.state.flowControl = this.form1.flowControl; |
| | | await this.myserialport.openPort(this.form1.port, true, this.callBack); |
| | | console.log(this.form1.port) |
| | | } catch (error) { |
| | | this.$message.error("串口连接失败!请检查串口是否已被占用"); |
| | | } |
| | | if (this.myserialport.state.isOpen) { |
| | | this.$message.success("串口连接成功"); |
| | | this.open1 = false |
| | | this.btnType = "danger"; |
| | | this.btnText = "关闭串口"; |
| | | } |
| | | } else { |
| | | this.myserialport.openPort(this.form1.port, false, this.callBack); |
| | | this.$message.success("串口关闭成功"); |
| | | this.btnType = "primary"; |
| | | this.btnText = "连接串口"; |
| | | } |
| | | }, |
| | | //授权 |
| | | async obtainAuthorization() { |
| | | if ("serial" in navigator) { |
| | | console.log("The Web Serial API is supported."); |
| | | if (!this.myserialport) this.myserialport = new MySerialPort(); |
| | | try { |
| | | await this.myserialport.handleRequestPort(); |
| | | this.$message.success("串口授权成功"); |
| | | this.getPortInfo(this.myserialport.state.ports); |
| | | } catch (error) { |
| | | this.$message.warning("未选择新串口授权!"); |
| | | } |
| | | } else { |
| | | this.$message.error( |
| | | "当前为HTTP模式或者浏览器版本过低,不支持网页连接串口" |
| | | ); |
| | | } |
| | | }, |
| | | //串口列表初始化 |
| | | getPortInfo(portList) { |
| | | this.portsList = []; |
| | | portList.map((port, index) => { |
| | | const { usbProductId, usbVendorId } = port.getInfo(); |
| | | if (usbProductId === undefined || usbVendorId === undefined) { |
| | | this.portsList.push({ label: "未知设备" + index, value: index }); |
| | | } else { |
| | | const usbVendor = USBDevice.filter( |
| | | (item) => parseInt(item.vendor, 16) === usbVendorId |
| | | ); |
| | | let usbProduct = []; |
| | | if (usbVendor.length === 1) { |
| | | usbProduct = usbVendor[0].devices.filter( |
| | | (item) => parseInt(item.devid, 16) === usbProductId |
| | | ); |
| | | } |
| | | this.portsList.push({ label: usbProduct[0].devname, value: index }); |
| | | } |
| | | }); |
| | | }, |
| | | // 发送 |
| | | async sendCommon() { |
| | | if (this.myserialport.state.isOpen) { |
| | | if (this.form1.sendMsg.length !== 0) { |
| | | const writeType = this.form1.type; |
| | | let value = this.form1.sendMsg; |
| | | let arr = []; |
| | | if (writeType === 1) { |
| | | // ASCII |
| | | for (let i = 0; i < value.length; i++) { |
| | | arr.push(this.myserialport.a2hex(value[i])); |
| | | } |
| | | } else if (writeType === 2) { |
| | | // HEX |
| | | if (/^[0-9A-Fa-f]+$/.test(value) && value.length % 2 === 0) { |
| | | for (let i = 0; i < value.length; i = i + 2) { |
| | | arr.push(parseInt(value.substring(i, i + 2), 16)); |
| | | } |
| | | } else { |
| | | this.$message.error("格式错误"); |
| | | return; |
| | | } |
| | | } |
| | | this.myserialport.writeText(arr); |
| | | } else { |
| | | this.$message.warning("请输入发送的信息"); |
| | | } |
| | | } else { |
| | | this.$message.warning("串口处于关闭状态,请连接串口"); |
| | | } |
| | | }, |
| | | async getPorts() { |
| | | await this.myserialport.getPorts(); |
| | | this.getPortInfo(this.myserialport.state.ports); |
| | | }, |
| | | querySearch(queryString, cb) { |
| | | var restaurants = this.restaurants; |
| | | var results = queryString |
| | | ? restaurants.filter(this.createFilter(queryString)) |
| | | : restaurants; |
| | | // 调用 callback 返回建议列表的数据 |
| | | cb(results); |
| | | }, |
| | | createFilter(queryString) { |
| | | return (restaurant) => { |
| | | return ( |
| | | restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === |
| | | 0 |
| | | ); |
| | | }; |
| | | }, |
| | | loadAll() { |
| | | return [ |
| | | { value: "110" }, |
| | | { value: "300" }, |
| | | { value: "600" }, |
| | | { value: "1200" }, |
| | | { value: "2400" }, |
| | | { value: "4800" }, |
| | | { value: "7200" }, |
| | | { value: "9600" }, |
| | | { value: "14400" }, |
| | | { value: "19200" }, |
| | | { value: "28800" }, |
| | | { value: "38400" }, |
| | | { value: "56000" }, |
| | | { value: "57600" }, |
| | | { value: "76800" }, |
| | | { value: "115200" }, |
| | | { value: "230400" }, |
| | | { value: "460800" }, |
| | | ]; |
| | | }, |
| | | } |
| | | } |
| | | |
| | |
| | | } |
| | | } |
| | | .head-font{ |
| | | font-weight: bold; |
| | | font-size: 25px; |
| | | /*font-weight: bold;*/ |
| | | /*font-size: 25px;*/ |
| | | } |
| | | span{ |
| | | font-size: 15px; |