重点

• 关闭正在读的串口
  借鉴文章:webapi串口

async closeport() {this.$emit("changeSerialStatus", false);//这里要注意，一定要关闭读取this.status = false;//取消后，done会变成true，会执行reader.releaseLock();this.reader.cancel();
},

vue组件

<template><div><el-button @click="setPort" v-if="!status">连接串口</el-button><el-button @click="closeport" v-if="status">关闭串口</el-button><!-- <el-button @click="changeWgtStatus">重新称重</el-button> --><!-- <label class="pl15">注：当前页面称配置的串口是{{ serialInfo.portName }}</label> --></div>
</template><script>
export default {name: "serialSelect",props: {serialInfo: {type: Object,require: true,default: () => {},},},data() {return {wgtStatus: true, //是否传输重量lastWeight: null, //最后一次重量count: 4, //重量判稳次数times: 0, //重量获取次数port: null,reader: null,setIntervalName: "", //轮询的名称dataFirstTime: null, //判稳第一次的时间戳standardTimes: null, //设置的判稳时间status: false,//baudRate: "1200",//regexVal: "/[1-9]+/"};},created() {// this.count = this.serialInfo.stableTimes;this.standardTimes = this.serialInfo.dataTime; //this.serialInfo.stableTimes * this.serialInfo.retrievalDelay;/*  this.$modal.confirm("请选择相应串口连接").then((res) => {this.setPort();}); */},methods: {// 重新获取串口重量retrieveWgt() {this.wgtStatus = true;this.lastWeight = null;},changeWgtStatus() {this.wgtStatus = true;this.dataFirstTime = Date.now();this.$emit("changeColor", "red");this.$emit("getWgt", null);this.$emit("updateWgt", true);},async setPort() {this.port = await navigator.serial.requestPort();this.getPort();},async getPort() {let port = this.port;await port.open({ baudRate: this.serialInfo.baudRate }).then((res) => {this.status = true;}).catch((res) => {this.wgtStatus = false;this.status = false;this.$emit("changeSerialStatus", false);console.log("error:", res);}).finally((res) => {this.wgtStatus = true;this.status = true;this.$emit("changeSerialStatus", true);console.log("finally:", res);});while (port.readable && this.status) {this.reader = port.readable.getReader();try {while (true) {const { value, done } = await this.reader.read();if (done) {// 允许稍后关闭串口。this.reader.releaseLock();break;}let _this = this;// if (value && this.wgtStatus) {// 不判断状态了，一直读if (value) {_this.getwgt(value);/* this.setIntervalName = setInterval(() => {_this.getwgt(value);value = null;}, this.serialInfo.retrievalDelay); */}}} catch (error) {console.log("处理非致命的读错误", error);// TODO: 处理非致命的读错误。} finally {// 允许稍后关闭串口。this.reader.releaseLock();}}//这里一定要关闭，不要在关闭方法中closeawait port.close();},getwgt(value) {let result = this.Utf8ArrayToStr(value);// result = "+0001048"; // +0000console.log("收到的数据：", result, result.includes("-"));// 看重量是不是+开始的if (!result.includes("+") && !result.includes("-")) return;const flagSymbol = result.includes("-") ? "-" : "";// const resultArr = result.match(eval(this.serialInfo.regexVal));const resultNum = result.slice(1);// 取的数大于设置的最小值,改到父页面判断// if (!resultNum || Number(resultNum) / 10 <= this.serialInfo.minWgt) return;if (!resultNum) return;let wgt = Number(resultNum) > 0 ? Number(resultNum) / 10 : 0;wgt = flagSymbol ? flagSymbol + wgt : wgt;// this.$emit("getWgt", wgt);if (this.lastWeight == wgt) {const lastDataTime = Date.now();const dataTime = lastDataTime - this.dataFirstTime;// if (this.times >= this.count) {console.log(this.wgtStatus, dataTime);if ((this.wgtStatus || flagSymbol) && dataTime >= this.standardTimes) {this.dataFirstTime = Date.now();this.lastWeight = null;if (wgt > 0) {this.wgtStatus = false;this.$emit("changeColor", "green");} else {this.wgtStatus = true;this.$emit("changeColor", "red");}this.$emit("getWgt", wgt);}} else {this.dataFirstTime = Date.now();this.lastWeight = wgt;if (this.wgtStatus) {this.$emit("changeColor", "red");this.$emit("getWgt", wgt);}}},//utf8转字符串Utf8ArrayToStr(array) {var out, i, len, c;var char2, char3;out = "";len = array.length;i = 0;while (i < len) {c = array[i++];switch (c >> 4) {case 0:case 1:case 2:case 3:case 4:case 5:case 6:case 7:// 0xxxxxxxout += String.fromCharCode(c);break;case 12:case 13:// 110x xxxx 10xx xxxxchar2 = array[i++];out += String.fromCharCode(((c & 0x1f) << 6) | (char2 & 0x3f));break;case 14:// 1110 xxxx 10xx xxxx 10xx xxxxchar2 = array[i++];char3 = array[i++];out += String.fromCharCode(((c & 0x0f) << 12) | ((char2 & 0x3f) << 6) | ((char3 & 0x3f) << 0));break;}}return out;},async closeport() {//这是我用于父页面切换手输或者连接串口的状态this.$emit("changeSerialStatus", false);this.status = false;this.reader.cancel();},},beforeDestroy() {console.log("离开");this.closeport();},
};
</script>