yiliangyiyun-pc-jj/src/components/balanceAlert.vue

<template>
  <div class="content">
    <!-- <el-radio-group v-if="deptBudgetList.warehouseName=='榆树库'" @change="radiochange" v-model="radio">
    <el-radio :label="1">大秤</el-radio>
    <el-radio :label="2">小秤</el-radio>
  </el-radio-group> -->
    <div class="title" v-if="information">{{information}}</div>
    <div class="title" v-else></div>
    <div class="contentInfo">
      <div class="uncertain">浮动重量</div>
      <div class="number" v-if="information.indexOf('毛重') > -1">
        {{ grossWeightVal }} kg
      </div>
      <div class="number" v-else>{{ tareVal }} kg</div>
    </div>
    <div class="contentInfo confirmWeight">
      <div class="uncertain titleWeight">确认重量</div>
      <div class="number weight" v-if="information.indexOf('毛重') > -1">
        {{ grossWeightVal1 }} kg
      </div>
      <div class="number weight" v-else>{{ tareVal1 }} kg</div>
    </div>
    <div class="confirmInfo">
      <div class="car-type">车牌号</div>
      <div class="car-no">{{ deptBudgetList.carNumber }}</div>
    </div>
    <div class="btn" @click="sendVal">确定</div>
  </div>
</template>

<script>
export default {
  name: 'balanceAlert',
  props: ['deptBudgetList', 'information'],
  data() {
    return {
      param: 9600,
      grossWeightVal: '',
      tareVal: '',
      grossWeightVal1: '',
      tareVal1: '',
      radio:1,
      carNumber:''
    }
  },
  activated() {},
  mounted() {

    console.log(this.deptBudgetList)
    this.openPort()
  },
  computed: {},
  created() {},
  methods: {
    sendVal() {
      if (this.information.indexOf('毛重') > -1) {
      this.grossWeightVal1=this.grossWeightVal
      }else{
        this.tareVal1=this.tareVal
      }
      console.log(this.grossWeightVal)
      console.log(this.tareVal)
      console.log(this.deptBudgetList)
      if (this.information.indexOf('毛重') > -1) {
        this.$emit('balanceListen', this.grossWeightVal)
      } else {
        this.$emit('balanceListen', this.tareVal)
      }
    },
    radiochange(e){
      console.log(e)
      localStorage.setItem('balanceStatus',e)
      this.openPort()
    },
    async closePort() {
      console.log('closePort')
      this.reader.cancel()
    },
    async openPort() {
      console.log(localStorage.getItem('balanceStatus'),this.deptBudgetList.warehouseName)
      console.log('openPort', navigator)
      if ('serial' in navigator) {
        if (!this.$store.state.app.reader) {
          if(localStorage.getItem('balanceStatus')){
            this.radio=localStorage.getItem('balanceStatus')
          }
          // The Web Serial API is supported.
          console.log('the Web Serial API is supported.')
          const port = await navigator.serial.requestPort()
          if (
            this.deptBudgetList.warehouseName == '白城内陆港' ||
            this.deptBudgetList.warehouseName == '肇东金信库'||
            this.deptBudgetList.warehouseName == '白城鹏羽库'||
            this.deptBudgetList.warehouseName == '洮南胡力吐粮食储备库'||
            this.deptBudgetList.warehouseName == '洮南向阳乡金昊'
          ) {
            this.param = 1200
          } else if (this.deptBudgetList.warehouseName == '鲅鱼圈祥腾库') {
            this.param = 2400
          } else if(this.deptBudgetList.warehouseName == '大庆朝阳沟库' ){
            this.param = 4800
          }else if(this.deptBudgetList.warehouseName == '榆树库' &&this.radio==2){
            this.param = 1200
          } else {
            this.param = 9600
          }
          console.log(this.param)
          await port.open({
            baudRate: this.param
          }) // set baud rate
          this.reader = port.readable.getReader()
          console.log('port  ', port)
          this.$store.dispatch('app/setReader', this.reader)
          console.log('reader  ', this.reader)
        } else {
          console.log('afterport', this.$store.state.app.reader)
          this.reader = this.$store.state.app.reader
        }
        // 监听来自串行设备的数据
        while (true) {
          const { value, done } = await this.reader.read()
          // console.log('value',value);
          if (done) {
            // 允许稍后关闭串口。
            this.reader.releaseLock()
            break
          }
          var result = ''
          //2。获取16进制字符串
          // var receData = HexConvert.ByteToString(value);
          // console.log("receData",receData);
          var flag = false
          if (
              this.deptBudgetList.warehouseName == '克东润津库'&&
              value.length < 9
            ) {
              continue
            }
          if (value.length > 2) {
            if (value.length <= 6) {
              // continue
            }
            if (
              (this.deptBudgetList.warehouseName == '肇东金信库' || this.deptBudgetList.warehouseName == '甘南宏旗库') &&
              value.length < 10
            ) {
              var start = new Date().getTime()
              while (new Date().getTime() - start < 100) {}
              continue
            }
            if (
              this.deptBudgetList.warehouseName == '克东瑞信达'&&
              value.length < 10
            ) {
              var start = new Date().getTime()
              while (new Date().getTime() - start < 30) {}
              continue
            }
            var zzz = ''
            for (var i = 0; i < value.length; i++) {
              zzz += String.fromCharCode(value[i])
            }
            console.log('value23:', value)
            console.log('valuezzz:', zzz)
          } else if (
            this.deptBudgetList.warehouseName == '白城内陆港' ||
            this.deptBudgetList.warehouseName == '洮南胡力吐粮食储备库' ||
            this.deptBudgetList.warehouseName == '鲅鱼圈祥腾库'||
            this.deptBudgetList.warehouseName == '洮南向阳乡金昊'
          ) {
            console.log('value:', value)
            var start = new Date().getTime()
            while (new Date().getTime() - start < 400) {}
            continue
          }
          else if (
              this.deptBudgetList.warehouseName == '克东瑞信达'&&
              value.length < 10
            ) {
              var start = new Date().getTime()
              while (new Date().getTime() - start < 30) {}
              continue
            }
            var zzz = ''
            for (var i = 0; i < value.length; i++) {
              zzz += String.fromCharCode(value[i])
            }
            console.log('value23:', value)
            console.log('valuezzz:', zzz)
          if (
            this.deptBudgetList.warehouseName &&
            (this.deptBudgetList.warehouseName == '山东诸城迈饶库' ||
              this.deptBudgetList.warehouseName == '山东园丰库' ||
              this.deptBudgetList.warehouseName == '克东千红库' ||
              this.deptBudgetList.warehouseName == '鲅鱼圈祥腾库' ||
              this.deptBudgetList.warehouseName == '哈尔滨依兰库' ||
              this.deptBudgetList.warehouseName == '龙江金信库' ||
              this.deptBudgetList.warehouseName == '白城内陆港' ||
              this.deptBudgetList.warehouseName == '白城鹏羽库' ||
              this.deptBudgetList.warehouseName == '洮南胡力吐粮食储备库' ||
              this.deptBudgetList.warehouseName == '杜尔伯特家禾库' ||
              this.deptBudgetList.warehouseName == '洮南向阳乡金昊' ||
              this.deptBudgetList.warehouseName == '洮南光明储备库' ||
              this.deptBudgetList.warehouseName == '甘南林峰库' ||
              this.deptBudgetList.warehouseName == '肇东金信库' ||
              this.deptBudgetList.warehouseName == '呼兰大金仓'||
              this.deptBudgetList.warehouseName == '克东润津库'||
              this.deptBudgetList.warehouseName == '洮南新友谊兴旺库'||
              this.deptBudgetList.warehouseName == '通榆瑞祥源库'||
              this.deptBudgetList.warehouseName == '榆树民胜库'||
              this.deptBudgetList.warehouseName == '榆树库'||
              this.deptBudgetList.warehouseName == '洮南蛟流河烘干塔'||
              this.deptBudgetList.warehouseName == '克东瑞信达')
          ) {
            for (var i = 0; i < value.length; i++) {
              var tmp = String.fromCharCode(value[i])
              if (tmp == '+') {
                flag = true
              }
              if (flag && result.length < 6 && tmp != '+') {
                result += tmp
              }
            }
            if (this.information.indexOf('毛重') > -1) {
              if (parseInt(result) || parseInt(result) == 0) {
                this.grossWeightVal = parseInt(result)
              }
            } else {
              if (parseInt(result) || parseInt(result) == 0) {
                this.tareVal = parseInt(result)
              }
            }
          } else 
          if (
            this.deptBudgetList.warehouseName &&
            (this.deptBudgetList.warehouseName == '顺诚粮库' ||
              this.deptBudgetList.warehouseName == '鲅鱼圈金信库'|
              this.deptBudgetList.warehouseName == '大庆朝阳沟库')
          ) {
            for (var i = value.length - 1; i >= 0; i--) {
              var tmp = String.fromCharCode(value[i])
              console.log(tmp)
              if (String.fromCharCode(value[0]) == '.') {
                flag = true
              }
              if (flag && result.length < 9 && tmp != '=' && tmp != '.') {
                result += tmp
              }
            }
            if (this.information.indexOf('毛重') > -1) {
              if (parseInt(result) || parseInt(result) == 0) {
                this.grossWeightVal = parseInt(result)
              }
            } else {
              if (parseInt(result) || parseInt(result) == 0) {
                this.tareVal = parseInt(result)
              }
            }
          } else{

            if (value.length > 10) {
              for (var i = 0; i < value.length; i++) {
                var tmp = String.fromCharCode(value[i])

                // if (value[0] != 49 && value[0] != 2) {
                //   // if (
                //   //   value[value.length - 1] == 48 &&
                //   //   value[value.length - 2] == 48
                //   // ) {
                //   //   flag1 = true
                //   // } else {
                //   //   break
                //   // }
                //   // flag1 = true
                //   if (i == 0) {
                //     this.result1 = tmp + '0'
                //   }
                // }
                // else{
                //   if (tmp == String.fromCharCode(32)) {
                //     flag = true
                //   }
                // }
                if (tmp == String.fromCharCode(32)) {
                  flag = true
                }
                if (
                  flag &&
                  result.length < 7 &&
                  tmp != String.fromCharCode(32)
                  // &&
                  // !(
                  //   value[value.length - 1] == 48 && value[value.length - 2] == 48
                  // )
                ) {
                  if (i > 0 && value[i] == 48 && value[i - 1] == 32 && result) {
                    break
                  } else {
                    result += tmp
                  }
                }
                // if (flag1 && tmp != String.fromCharCode(32)) {
                //   // if (
                //   //   value[value.length - 1] == 48 &&
                //   //   value[value.length - 2] == 48
                //   // ) {
                //   //   if (i == 0) {
                //   //     this.result1 = tmp + '0'
                //   //   }
                //   // }
                //   if (i == 0) {
                //     this.result1 = tmp + '0'
                //   }
                // }
              }
            }

            if (this.information.indexOf('毛重') > -1) {
              if (parseInt(result) || parseInt(result) == 0) {
                this.grossWeightVal = parseInt(result + this.result1)
              }
            } else {
              if (parseInt(result) || parseInt(result) == 0) {
                this.tareVal = parseInt(result + this.result1)
              }
            }
          }
          // else {
          //   for (var i = 0; i < value.length; i++) {
          //     var tmp = String.fromCharCode(value[i])
          //     if (tmp == '+') {
          //       flag = true
          //     }
          //     if (flag && result.length < 6 && tmp != '+') {
          //       result += tmp
          //     }
          //   }
          //   if (this.information.indexOf('毛重') > -1) {
          //     if (parseInt(result) || parseInt(result) == 0) {
          //       this.grossWeightVal = parseInt(result)
          //     }
          //   } else {
          //     if (parseInt(result) || parseInt(result) == 0) {
          //       this.tareVal = parseInt(result)
          //     }
          //   }
          // }
          // setTimeout(1000)
          // value 是一个 Uint8Array
        }
        await port.close()
      } else {
        console.log('the Web Serial API is not supported.', navigator)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/.el-radio-group{
  position:absolute;
  top:29px;
}
/deep/.el-radio{
  color:#fff;
}
/deep/.el-radio__input.is-checked+.el-radio__label{
  color:#2aff7c;
}
/deep/.el-radio__input.is-checked .el-radio__inner {
  background: #2aff7c !important;
  border-color: #2aff7c !important;
}
.content {
  height: 350px;
  position: relative;
  background: black;
  color: #2aff7c;
  font-size: 32px;
  text-align: right;
  padding: 20px;
  border-radius: 10px;
  margin: 0 20px 20px 20px;
  .btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    border: 1px solid #2aff7c;
    width: 200px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .contentInfo {
    display: flex;
    .uncertain {
      width: 35%;
      text-align: left;
    }
    .number {
      width: 65%;
      text-align: right;
    }
  }
}
.title {
  text-align: right;
  margin-bottom: 20px;
}
.confirmWeight {
        display: flex;
        align-items: center;
        .titleWeight {
          width: 35%;
          text-align: left;
          line-height: 90px;
          color: red;
        }

        .weight {
          width: 65%;
          text-align: right;
          color: red;
        }
      }
      .confirmInfo {
        display: flex;
        color: #2aff7c;
        .car-type {
          text-align: left;
          width: 50%;
        }

        .car-no {
          width: 50%;
          text-align: right;
        }
      }
</style>