重点

• 关闭正在读的串口
  借鉴文章: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();
        }
      }
      //这里一定要关闭，不要在关闭方法中close
      await port.close();
    },
    getwgt(value) {
      let result = this.Utf8ArrayToStr(value);
      // result = "+0001048"; // +0000
      console.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:
            // 0xxxxxxx
            out += String.fromCharCode(c);
            break;
          case 12:
          case 13:
            // 110x xxxx 10xx xxxx
            char2 = array[i++];
            out += String.fromCharCode(((c & 0x1f) << 6) | (char2 & 0x3f));
            break;
          case 14:
            // 1110 xxxx 10xx xxxx 10xx xxxx
            char2 = 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>