From b64ed2c784bde6dea9d18149ca706ebe532c857d Mon Sep 17 00:00:00 2001 From: 懒羊羊 <15939171744@163.com> Date: 星期三, 13 三月 2024 08:37:51 +0800 Subject: [PATCH] 操作看板 --- jcdm-ui/src/views/main/kb/stationTerminal/index.vue | 581 ++++++++++++++++++++++++++++++++++++++++++++++++++------- 1 files changed, 507 insertions(+), 74 deletions(-) diff --git a/jcdm-ui/src/views/main/kb/stationTerminal/index.vue b/jcdm-ui/src/views/main/kb/stationTerminal/index.vue index 81c68e6..e138770 100644 --- a/jcdm-ui/src/views/main/kb/stationTerminal/index.vue +++ b/jcdm-ui/src/views/main/kb/stationTerminal/index.vue @@ -1,38 +1,40 @@ <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> + <span>{{workpieceInformation.workOrderNo}}</span> </el-descriptions-item> - <el-descriptions-item label="浜у搧缂栧彿"> + <el-descriptions-item label="浜у搧搴忓垪鍙�"> <span>{{workpieceInformation.productCode}}</span> </el-descriptions-item> <el-descriptions-item label="浜у搧鍨嬪彿"> @@ -41,9 +43,9 @@ <el-descriptions-item label="浜у搧鍚嶇О"> <span>{{workpieceInformation.productName}}</span> </el-descriptions-item> - <el-descriptions-item label="鑺傛媿"> - <span>{{workpieceInformation.beat}}</span> - </el-descriptions-item> +<!-- <el-descriptions-item label="鑺傛媿">--> +<!-- <span>{{workpieceInformation.beat}}</span>--> +<!-- </el-descriptions-item>--> </el-descriptions> <el-divider></el-divider> <el-row> @@ -83,27 +85,27 @@ </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-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-col>--> +<!-- <el-col :span="12">--> +<!-- <el-button @click="serialPortMethod" type="primary">涓插彛鑾峰彇鏁版嵁</el-button>--> - </el-col> - </el-row> +<!-- </el-col>--> +<!-- </el-row>--> <el-row style="margin-top: 20px"> <el-button @click="Release" type="primary">鏀捐</el-button> </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-col :span="10"> <el-table :cell-style="rowStyle" :data="formulaChildList"> <el-table-column label="鎺掑簭" width="60" align="center" prop="stepSort"> </el-table-column> @@ -111,7 +113,7 @@ </el-table-column> </el-table> </el-col> - <el-col :span="16"> + <el-col :span="14"> <el-image style="height: 520px;width: 100%" :src="imgSrc"></el-image> </el-col> </el-tab-pane> @@ -142,12 +144,154 @@ </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"> + 浠呮敮鎸丆hrome 89+鎴栬�匛dge 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 MySerialPort from "@/utils/MySerialPort"; +import USBDevice from "@/utils/usb.json"; +import {listProductionOrde} from "@/api/main/om/productionOrde/productionOrde"; +import {addPassingStationCollection} from "@/api/main/da/passingStationCollection/passingStationCollection"; +import {addBasicParameters, addParamCollection} from "@/api/main/da/paramCollection/paramCollection"; export default { name: "stationTerminal", @@ -168,10 +312,10 @@ headContent: { processesCode: 'OP1010', processesName: '璐存爣鏈�-璐寸爜', - sfcCode: '1000000000000001', + sfcCode: '10', }, workpieceInformation: { - workOrderCode: null, + workOrderNo: null, productCode: null, productModel: null, productName: null, @@ -199,11 +343,34 @@ }, content: '', activeName: 'first', - url: "ws://192.168.10.252:8080/websocket/message/", + url: "ws://192.168.11.134:8080/websocket/message/", message: "", text_content: "", ws: null, - inputValue: '9' + inputValue: '9', + + open1: false, + input: "", + keepReading: true, + form1: { + baudRate: "9600", + dataBits: "8", + stopBits: "1", + parity: "none", + flowControl: "none", + desc: "", + type: "1", + isShowHistory: false, + }, + btnType: "primary", + btnText: "杩炴帴涓插彛", + restaurants: [], + portsList: [], + isShowSendArea: false, + readType: 1, + title: "", + + passingStationForm: {}, } }, beforeDestroy() { @@ -217,30 +384,68 @@ // }, 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( + "褰撳墠涓篐TTP妯″紡鎴栬�呮祻瑙堝櫒鐗堟湰杩囦綆锛屼笉鏀寔缃戦〉杩炴帴涓插彛" + ); + } + }, + 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('姝ラ鏈畬鎴愪笉璁告斁琛岋紒'); - } - }); + serialLink() { + this.open1 = true }, - serialPortMethod(){ + Release(){ + // this.$message('portsList锛�'+this.portsList.length); + if(this.btnType === "danger"){ + this.$message('杩炴帴浜嗭紒'); + + }else { + this.$message('mei杩炴帴浜嗭紒'); + + } + + // //鍒ゆ柇鏄惁鍙互閲婃斁 + // 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() + // // this.resetting() + // }else { + // this.$message('姝ラ鏈畬鎴愪笉璁告斁琛岋紒'); + // } + // }); + }, + serialPortMethod(value){ let formulaChildParams = { - materialCode: this.serialPortContent + materialCode: value, + workOrderNo: this.workpieceInformation.workOrderNo, + productCode: this.workpieceInformation.productCode, + locationCode: this.headContent.processesCode, + collectionTime: new Date() } updateResults(formulaChildParams).then(response => { this.getListFormulaChild() @@ -279,12 +484,12 @@ this.cakeLamp.startWork = 1 }, - /** 鏌ヨ鎶ュ伐璁板綍 琛ㄥ垪琛� */ + /** 鏌ヨ宸ュ崟鍒楄〃 */ async getList() { - await listWorkReport(this.queryParams).then(response => { + 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; @@ -293,7 +498,24 @@ }, 1000); }); this.getListFormulaChild() + this.addOverStationCollection() + }, + /** 鍏ョ珯澧炲姞杩囩珯閲囬泦璁板綍 **/ + 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, + inboundTime: new Date() + } + addPassingStationCollection(this.passingStationForm).then(response => { + }); + addBasicParameters(this.passingStationForm).then(response => { + }); }, allowRelease(){ clearInterval(this.timer); @@ -373,30 +595,241 @@ 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.release = 1 - setTimeout(() => { - this.resetting() - }, 2000); // 寤舵椂2绉掕Е鍙� - }else if(event.data === 'TIGHTEN'){ - console.log('寮�濮嬫嫥绱�') - this.formulaChildList = [] - self.getListFormulaChild() + const DELAY_TIME = 2000; + switch (event.data) { + case "IN": + self.cakeLamp.InPlace = 1; + break; + case "IN0": + self.cakeLamp.InPlace = 0; + break; + case "OUT": + self.cakeLamp.release = 1; + setTimeout(() => { + self.cakeLamp.InPlace = 0; + self.cakeLamp.release = 0; + self.cakeLamp.startWork = 0; + self.cakeLamp.scanFinish = 0; + self.Release(); + }, DELAY_TIME); + break; + case "TIGHTEN": + this.formulaChildList = []; + self.getListFormulaChild(); + break; + default: + break; } }; }, - resetting() { - this.cakeLamp = { - InPlace: 0, - release: 0, - startWork: 0, - scanFinish: 0, + + + //鎺ュ彈鏁版嵁鐨勫洖璋� + callBack(value) { + if (this.form1.isShowHistory) this.form1.desc = this.readLi().join(""); + else { + const scanValue = this.myserialport.hex2atostr(value).replace(/[\r\n]/g, ''); + // if (value.length > 0) + // this.form1.desc = this.myserialport.hex2atostr(value); + this.$message('鎵爜瀹屾垚'+this.content); + if (/T/.test(scanValue)) { + console.log('瀛楃涓插寘鍚瓧姣�"T"'); + this.serialPortMethod(scanValue) + } else { + console.log('瀛楃涓蹭笉鍖呭惈瀛楁瘝"T"'); + this.headContent.sfcCode = scanValue; + this.queryParams.sfcCode = scanValue; + this.getList() + // this.getListFormulaChild() + this.cakeLamp.scanFinish = 1 + this.cakeLamp.startWork = 1 + } } - } + }, + 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; + }); + }, + //杩炴帴 + 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); + } catch (error) { + this.$message.error("涓插彛杩炴帴澶辫触锛佽妫�鏌ヤ覆鍙f槸鍚﹀凡琚崰鐢�"); + } + 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("鏈�夋嫨鏂颁覆鍙f巿鏉冿紒"); + } + } else { + this.$message.error( + "褰撳墠涓篐TTP妯″紡鎴栬�呮祻瑙堝櫒鐗堟湰杩囦綆锛屼笉鏀寔缃戦〉杩炴帴涓插彛" + ); + } + }, + //涓插彛鍒楄〃鍒濆鍖� + 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" }, + ]; + }, } } @@ -428,8 +861,8 @@ } } .head-font{ - font-weight: bold; - font-size: 25px; + /*font-weight: bold;*/ + /*font-size: 25px;*/ } span{ font-size: 15px; -- Gitblit v1.9.3