udiwms-vue-frame/src/views/collect/IoSplitFifoRemove.vue

<template>

  <div>
    <el-form
      :model="formData"
      :rules="formRules"
      ref="dataForm"
      @submit.native.prevent
      label-width="110px"
    >
      <el-card>
        <el-row style="margin-bottom: 8px">
          <!--<div v-if="scanReCount > 0">-->
          <!--  <span style="font-size: 18px;font-weight: bold;color: red" >扫码总数量:</span>-->
          <!--  <span style="font-size: 18px;font-weight: bold;color: red">{{ scanReCount }}</span>-->
          <!--</div>-->
          <span style="font-size: 18px;font-weight: bold;color: red" v-if="redMeg"
          >请先扫取货槽编码</span>
          <span style="font-size: 18px;font-weight: bold">{{ curQueueName }}</span>
          <!--<span style="font-size: 18px;font-weight: bold">{{ curQueueName }}</span>-->
          <el-button-group
            style="display: flex; margin-top: 5px; float: right"
          >
            <el-button size="mini" type="primary" @click.native="paizhao()"
                       v-if="collectSet != null && collectSet.autoDecode == 0" style="margin-right: 8px;border-radius: 5%;"
            >拍照解码
            </el-button>
            <el-button size="mini" type="primary" @click.native="fallbackCode()" :disabled="redMeg"
                       style="margin-right: 8px;border-radius: 5%;"
            >回退
            </el-button>
            <el-button size="mini" type="primary" @click.native="dropCode()" :disabled="redMeg"
                       style="margin-right: 8px;border-radius: 5%;"
            >放弃
            </el-button>

          </el-button-group>
        </el-row>
        <el-divider></el-divider>
        <el-row>
          <el-col :span="18">
            <el-form-item prop="code" label="扫码录入">
              <el-input
                id="inputer"
                @focus="getInputFocus($event)"
                @keypress.enter.native="enterKey($event)"
                ref="inputRef"
                style="ime-mode: disabled"
                type="tel"
                placeholder="请点击输入框进行扫码设置或者扫码录入"
                v-model="scanCode"

              ></el-input>
              <!--                  :disabled="scanDisabled"-->
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button-group>
              <el-button
                type="primary"
                size="mini"
                @click.native.stop="enterKey($event)"
                style="margin-left: 15px"
              >添加
              </el-button>
              <!--              <el-button icon="el-icon-view" @click="hideSearch">显示/隐藏快捷设置</el-button>-->
            </el-button-group>

          </el-col>
        </el-row>

        <el-alert
          title="扫码结果:"
          :type="scanResultType"
          :closable="false"
          :description="result"
          v-if="successVisible"
        >
        </el-alert>
        <el-alert
          v-if="warnVisible"
          title="警告信息:"
          type="warning"
          :closable="true"
          :dangerouslyUseHTMLString="true"
          :description="warnResult"
        >
        </el-alert>
        <el-alert
          v-if="errVisible"
          title="错误信息:"
          type="warning"
          :closable="true"
          :dangerouslyUseHTMLString="true"
          :description="errResult"
        >
        </el-alert>

        <el-row :gutter="24" style="margin-top: 10px">
          <el-col :span="12" style="border: 1px solid #e3dfe1; padding:15px; height: 700px; margin-left: 15px;">
            <h2 style="font-weight: bold;">当前上药队列</h2>
            <el-table
              :data="queueCodes"
              :span-method="objectSpanMethod"
              border
              style="width: 100%; margin-top: 20px"
            >
              <el-table-column label="序号" width="80">
                <template #default="{ $index }">
                  {{ getDisplayIndex($index) }}
                </template>
              </el-table-column>
              <el-table-column
                prop="code"
                label="追溯码"
                width="180"

              >
                <!--show-overflow-tooltip-->
                <!--<template slot-scope="scope">-->
                <!--  <div style="font-size: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">-->
                <!--    {{ scope.row.code }}-->
                <!--  </div>-->
                <!--</template>-->
              </el-table-column>
              <el-table-column
                prop="productName"
                label="药品名称"
              >
              </el-table-column>
              <el-table-column
                prop="nameCode"
                label="药品标识"
              >
              </el-table-column>
              <el-table-column
                prop="bzgg"
                label="包装规格"
              >
              </el-table-column>
              <el-table-column
                prop="serialNo"
                label="序列号"
              >
              </el-table-column>
              <!-- 添加 id 列，设置为隐藏 -->
              <!--<el-table-column prop="id" label="ID" width="0" v-show="true"></el-table-column>-->
            </el-table>
            <pagination
              v-show="queueCodeTotal>0"
              :total="queueCodeTotal"
              :limit.sync="queueQuery.limit"
              :page.sync="queueQuery.page"
              @pagination="getCodes()"
            >
            </pagination>

          </el-col>
          <el-col :span="11" style="border: 1px solid #e3dfe1; margin-left: 27px; padding: 15px;height: 700px;">
            <h2 style="font-weight: bold;">工位库存队列</h2>
            <!--<el-divider></el-divider>-->
            <!--<div style=" border-top: 1px solid #ccc;">-->
            <el-table v-loading="loading" :data="splitCodes" style="width: 100%;margin-top: 20px" max-height="350"
                      ref="multipleTable"
            >
              <!--      <el-table-column-->
              <!--        type="selection"-->
              <!--        width="55">-->
              <!--      </el-table-column>-->
              <el-table-column label="序号" type="index" width="55">

              </el-table-column>
              <!--<el-table-column-->
              <!--  label="追溯码"-->
              <!--  prop="code"-->
              <!--  show-overflow-tooltip-->
              <!--  width="180"-->
              <!--&gt;-->
              <!--  <template slot-scope="scope">-->
              <!--    <div style="font-size: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">-->
              <!--      {{ scope.row.code }}-->
              <!--    </div>-->
              <!--  </template>-->
              <!--</el-table-column>-->

              <el-table-column
                prop="code"
                label="追溯码"
                width="180"
              >
              </el-table-column>
              <el-table-column
                prop="cpmctymc"
                label="药品名称"
              >
              </el-table-column>
              <el-table-column
                prop="nameCode"
                label="药品标识"
              >
              </el-table-column>
              <el-table-column
                prop="bzgg"
                label="包装规格"
              >
              </el-table-column>
              <el-table-column
                prop="serialNo"
                label="序列号"
              >
              </el-table-column>
            </el-table>
            <pagination
              v-show="splitCodeTotal>0"
              :total="splitCodeTotal"
              :limit.sync="splitCodeQuery.limit"
              :page.sync="splitCodeQuery.page"
              @pagination="getSplitCodes()"
            >
            </pagination>

            <!--</div>-->

          </el-col>
        </el-row>

      </el-card>
    </el-form>
  </div>
</template>

<script>
import { getByCode } from '@/api/basic/workPlace/SysWorkplaceQueue'
import { isBlank } from '@/utils/strUtil'
import { deleteCode, deleteCodes, fallbackCode, getCodeListByRelId } from '@/api/inout/code'
import { splitFifoDetail } from '@/api/inout/splitCode'
import { batchAddCode, batchVailCode, enterCodeWeb } from '@/api/inout/order'
import { getSet } from '@/api/collect/collectSet'
import A from '@/plugins/KeyScaner'

const SLOT_CODE_PREFIX = 'DMQ'

export default {
  name: 'IoSplitFifoRemove',
  props: {
    resetKey: {
      type: Function,
      required: true
    }
  },
  watch: {
    resetKey(newVal, oldVal) {
      this.$refs.inputRef.focus()
    }
  },
  data() {
    return {
      labelName: 1,
      labels: {
        1: '扫码录入',
        2: '扫码剔除'
      },
      formData: {},
      scanCode: '',
      originCode: '',
      redMeg: true,
      detailList: [],
      codeCount: 0,
      loading: false,
      codeArray: [],
      workplaceId: null,
      curQueue: null,
      productName: null,
      curQueueName: '',
      queueCodeTotal: 0,
      splitCodeTotal: 0,
      //是否录入槽位
      isCheckQueue: false,
      //组号 用来回退
      firstGroupNumber: null,
      //队列codes
      queueCodes: [],
      queueQuery: {
        page: 1,
        limit: 10,
        relId: '',
        action: ''
      },
      //库存队列
      splitCodes: [],
      splitCodeQuery: {
        page: 1,
        limit: 10,
        relId: ''
      },
      //提示信息
      scanResultType: 'success',
      result: '',
      successVisible: true,
      warnVisible: false,
      warnResult: '',
      errVisible: false,
      errResult: '',
      isSuccess: false,
      //自动设置
      collectSet: {},
      valiCodes: [],
      //weksolket
      sitcomScan: false,
      sictomText: ''
    }
  },
  methods: {
    getInputFocus(event) {
      event.currentTarget.select()
    },
    // 检查是否已扫槽位码
    checkSlotCodeScanned() {
      if (this.redMeg && !this.scanCode.includes(SLOT_CODE_PREFIX)) {
        this.init()
        this.isCheckQueue = false
        return this.$message.error('请先扫取货槽编码')
      }
      //查找槽位码
      this.handleSlotCodeScan()
    },
    enterKey(event) {
      //alert初始化
      this.alertInit()
      // 检查是否已扫槽位码
      if (!this.isCheckQueue) {
        this.checkSlotCodeScanned()
        return
      }
      //扫码校验

      //多码校验
      if (this.scanCode.includes(';')) {
        const codeArray = this.scanCode.split(';')
        const verify = this.verifyScanCount(codeArray)
        if (verify) {
          let params = {
            codeList: codeArray
          }
          this.batchVailCode(params)
        }
        return
      }

      //单码校验
      let tQuery = {
        originCode: this.originCode,
        code: this.scanCode.trim()
      }
      enterCodeWeb(tQuery).then((response) => {
        if (response.code === 20000) {
          this.$refs.inputRef.focus()
          this.$refs.inputRef.select()
          this.isSuccess = true
          this.deleteCode()
          this.init()
        } else {
          if (response.code == 502) {
            this.checkSuccess = false
            this.isSuccess = false
            // this.scanCode = ''
            this.printCodeResult(response.data)
            this.codeFormData.code = response.data.code
            this.originCode = this.codeFormData.code
            // this.originCode = ""
          } else if (response.code == 501) {
            this.checkSuccess = false
            this.scanCode = ''
            this.originCode = ''
            this.$message.error(response.message)
          } else if (response.code == 503) {
            this.checkSuccess = false
            this.isSuccess = false
            this.scanCode = ''
            this.printCodeResult(response.data)
            this.codeFormData.code = response.data.code
            this.$confirm(response.message, '提示', {
              type: 'warning'
            })
              .then(() => {
                this.codeFormData.code = response.data.code
                this.addCode()
              })
              .catch(() => {
                this.codeFormData.code = response.data.code
              })
          } else if (response.code == 508) {
            this.scanCode = ''
            this.originCode = ''
            this.codeFormData.code = '01' + response.data.nameCode
            this.originCode = this.codeFormData.code
          } else {
            this.$alert(response.message, '提示', {
              confirmButtonText: '确定',
              type: 'warning',
              closeOnClickModal: true,
              callback: (action) => {
                this.scanCode = ''
                this.$refs.inputRef.focus()
                this.$refs.inputRef.select()
              }
            })
          }
        }
        this.loading = false
      })
    },
    deleteCode() {
      let query = {
        code: this.scanCode.trim(),
        queueCode: this.curQueue.code,
        workPlaceCode: this.workplaceId
      }
      deleteCode(query).then(res => {
        if (res.code == 20000) {
          //删除码成功
          //刷新列表
          this.sictomText = ''
          this.printCodeResult(res.data)
          this.getCodes()
          this.getSplitCodes()
          this.init()
          //扫码结果
        } else {
          //追溯码不存在
          let printData = [
            {
              status: 2,
              code: query.code,
              errMsg: res.message
            }
          ]
          this.printMutiCodeResult(printData)
          this.init()
        }
      })
    },
    batchVailCode(params) {
      batchVailCode(params).then((response) => {
        if (response.code === 20000) {
          console.log('==滴码接收==', response.data)
          this.valiCodes = []
          let list = response.data
          list.forEach(item => {
            if (item.status === 1) {
              this.valiCodes.push(item.code)
            }
          })
          this.printMutiCodeResult(list)
          if (this.valiCodes != null && this.valiCodes.length > 0) {
            //多码删除
            let query = {
              codeList: this.valiCodes,
              queueCode: this.curQueue.code,
              workPlaceCode: this.workplaceId
            }
            deleteCodes(query).then(res => {
              if (res.code == 20000) {
                this.getCodes()
                this.getSplitCodes()
                this.printMutiCodeResult(res.data.vailCodeResultResponses)
              } else {
                return this.$message.error('删除错误')
              }
            })
          }
          this.init()
        }
        // this.scanCode = this.valiCodes.join(";");
      })
    },
    printCodeResult(data, isSuccess) {
      this.successVisible = true
      const resultParts = ['扫码解析结果：' + data.code]

      if (data.udi) {
        resultParts.push('层级标识: ' + data.udi)
      }
      if (data.batchNo) {
        resultParts.push('批次号: ' + data.batchNo)
      }
      if (data.produceDate) {
        resultParts.push('生产日期: ' + data.produceDate)
      }
      if (data.expireDate) {
        resultParts.push('失效日期: ' + data.expireDate)
      }
      if (data.serialNo) {
        resultParts.push('序列号: ' + data.serialNo)
      }
      this.result = resultParts.join(' , ')
    },
    async printMutiCodeResult(vailCodeResultResponses) {
      this.alertInit()
      for (let i = 0; i < vailCodeResultResponses.length; i++) {
        let data = vailCodeResultResponses[i]
        if (data.status == 1) {
          this.successVisible = true
          this.result = this.result + ';' + vailCodeResultResponses[i].code
        } else if (data.status == 2) {
          if (this.result == '') {
            this.successVisible = false
          }
          this.warnResult = this.warnResult + '\n' + vailCodeResultResponses[i].code + ':' + vailCodeResultResponses[i].errMsg
        } else if (data.status == 3) {
          this.result = this.result + '\n' + vailCodeResultResponses[i].code
          // this.warnResult = this.warnResult + "\n" + vailCodeResultResponses[i].code + ":" + vailCodeResultResponses[i].errMsg;
          await this.popupTip(data)
        }
        // else
        //   this.errResult = this.errResult + "\n" + vailCodeResultResponses[i].code + ":" + vailCodeResultResponses[i].errMsg;
      }
      if (!isBlank(this.warnResult)) {
        this.warnVisible = true
      }
      if (!isBlank(this.errResult)) {
        this.errVisible = true
      }
    },
    //多码校验扫码次数
    verifyScanCount(codeArray) {
      //判断扫码数量是否超出或少于设置扫码数量
      if (this.collectSet.scanMaxCount != null && this.collectSet.scanMaxCount != 0) {
        if (this.collectSet.scanMaxCount > codeArray.length) {
          this.scanCode = ''
          this.$message.error('扫码数量少于设置扫码数量')
          return false
        } else if (this.collectSet.scanMaxCount < codeArray.length) {
          this.scanCode = ''
          this.$message.error('扫码数量超出')
          return false
        }
      }
      return true
    },
    alertInit() {
      this.warnResult = ''
      this.errResult = ''
      this.result = ''
      this.warnVisible = false
      this.errVisible = false
    },
    // 处理槽位码扫描结果
    handleSlotCodeScan() {
      const query = {
        code: this.scanCode,
        workPlaceIdFk: this.workplaceId
      }
      getByCode(query)
        .then((response) => {
          this.loading = false
          if (response.code == 20000) {
            this.curQueue = response.data
            this.productName = this.curQueue.cpmctymc
            this.curQueueName = this.getQueueName()
            this.redMeg = false
            this.isCheckQueue = true
            this.init()
            this.queueQuery.relId = this.curQueue.relId
            this.splitCodeQuery.relId = this.curQueue.relId
            this.getCodes()
            this.getSplitCodes()
            this.selectSysParam()
          } else {
            this.init()
            this.$message.error(response.message)
          }
        })
        .catch((error) => {
          // 打印错误信息，方便调试
          console.error('获取槽位信息失败:', error)
          this.scanCode = ''
          this.$message.error('获取槽位码信息时发生错误')
        })
    },
    // 获取当前取货槽名称
    getQueueName() {
      if (isBlank(this.productName)) {
        return `当前取货槽: ${this.curQueue.code}`
      }
      return `当前取货槽: ${this.productName} (${this.curQueue.code})`
    },
    getCodes() {
      this.queueQuery.action = 'SC72197936495755'
      this.queueQuery.queueCode = this.curQueue.code
      getCodeListByRelId(this.queueQuery).then(res => {
        if (res.code == 20000) {
          this.queueCodes = res.data.list
          this.queueCodeTotal = res.data.total
        } else {
          this.queueCodes = []
          this.queueCodeTotal = 0
          return this.$message.error('获取错误')
        }
      })
    },
    getSplitCodes() {
      this.splitCodeQuery.workPlaceQueueCode = this.curQueue.code
      splitFifoDetail(this.splitCodeQuery).then(res => {
        if (res.code == 20000) {
          this.splitCodes = res.data.list
          this.splitCodeTotal = res.data.total
        } else {
          this.splitCodes = []
          this.splitCodeTotal = 0
          return this.$message.error('获取错误')
        }
      })
    },
    fallbackCode() {
      // fallbackCode()
      // this.firstGroupNumber
      if (this.queueCodes.length == 0) {
        return this.$message.error('当前上货队列不足')
      }
      this.$confirm('是否确定回退上药队列?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log('组号:', this.firstGroupNumber)
        let query = {
          groupNumber: this.firstGroupNumber
        }
        fallbackCode(query).then(res => {
          if (res.code == 20000) {
            this.getCodes()
            this.getSplitCodes()
            this.init()
            this.alertInit()
            return this.$message.success('回退成功')
          } else {
            this.getCodes()
            this.getSplitCodes()
            this.init()
            this.alertInit()
            return this.$message.error('回退失败')
          }
        }).catch(() => {
        })
      })
    },
    dropCode() {
      this.redMeg = true
      this.curQueueName = '',
        this.isCheckQueue = false
      this.curQueue = null
      this.queueCodes = []
      this.splitCodes = []
      this.queueQuery = {
        page: 1,
        limit: 10,
        relId: '',
        action: ''
      }
      this.splitCodeQuery = {
        page: 1,
        limit: 10,
        relId: ''
      }
      this.splitCodeTotal = 0
      this.queueCodeTotal = 0
      this.collectSet = null

    },
    paizhao() {
      if (this.ws && this.ws.readyState === WebSocket.OPEN) {
        // const data = JSON.stringify({ action: "subscribe", channel: "updates" }); // 发送的参数
        var sendData = 'ManualClick=1'
        this.ws.send(sendData) // 发送数据
        console.log('Data sent:', sendData)
      } else {
        console.error('WebSocket is not connected.')
      }
    },
    init() {
      this.scanCode = ''
      this.$refs.inputRef.focus()
      this.$refs.inputRef.select()
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        // 返回对应行的合并信息
        return this.spanInfo[rowIndex]
      }
    },
    getDisplayIndex(index) {
      let displayIndex = 1
      for (let i = 0; i < index; i++) {
        if (this.spanInfo[i].rowspan > 0) {
          displayIndex++
        }
      }
      return displayIndex
    },
    selectSysParam() {
      getSet().then((response) => {
        if (response.code == 20000) {
          this.collectSet = response.data
          console.log('高拍仪设置', this.collectSet)
        }
      })
    },
    //处理事件
    getDMHotskeyValue(str) {
      console.log(str)
      if (str.includes('DMQ')) {
        if (!isBlank(this.curQueueName)) {
          this.scanCode = ''
          return this.$message.warning('当前已录入槽位')
        }
        let query = {
          code: this.scanCode
        }
        if (str != null) {
          query.code = str
          query.workPlaceIdFk = this.workplaceId
        }
        this.handleSlotCodeScan()
        return true
      } else if (str.includes('DMOENTER')) {
        return true
      } else if (str.includes('DMOCANCEL')) {
        return true
      } else if (str.includes('DMODEL')) {
        return true
      }
      return false
    },
    handleScanComplete(fullScanData) {
      if (!this.curQueue.code) {
        if (fullScanData != null && fullScanData[0].includes('DMQ')) {
          this.getDMHotskeyValue(fullScanData[0])
          return
        }
      } else if (this.curQueue.code != null) {
        if (fullScanData != null && fullScanData[0].includes('DMQ')) {
          this.$message.warning('已绑定取货槽，请勿重复绑定！')
          return
        }
      }
      const verify = this.verifyScanCount(fullScanData)
      if (verify) {
        let params = {
          codeList: fullScanData
        }
        this.batchVailCode(params)
      }
    },
    handleRecCodesEvent(event) {
      console.log('接收 recCodes event:', event.detail.recCodes)
      const verify = this.verifyScanCount(event.detail.recCodes)
      if (verify) {
        let params = {
          codeList: event.detail.recCodes
        }
        this.batchVailCode(params)
      }

    },
    socketListener() {
      let lastScanTime = Date.now()
      let scanBuffer = []
      let scanTimeout = null
      const SCAN_TIMEOUT = 1000 // 1秒间隔，表示扫码结束的判定标准
      const self = this
      console.log('启用监听')
      this.ws.onmessage = function(event) {
        let scanData = event.data // 获取扫码数据
        let currentTime = Date.now()
        console.log(scanData + '33333')
        // 如果时间间隔超过预设的阈值，表示这是一次新的扫码
        if (currentTime - lastScanTime > SCAN_TIMEOUT) {
          // 处理上一次完整的扫码数据
          if (scanBuffer.length > 0) {
            self.handleScanComplete(scanBuffer)
          }
          // 清空缓冲区，开始新的扫码
          scanBuffer = []
        }
        // 重置上一次扫码的时间
        lastScanTime = currentTime
        // 将数据添加到缓冲区
        scanBuffer.push(scanData)

        // 如果已经有一个定时器在等待，可以清除它
        if (scanTimeout) {
          clearTimeout(scanTimeout)
        }
        // 设置新的定时器，等待指定的时间后执行扫码结束处理
        scanTimeout = setTimeout(() => {
          // 定时器到时，处理扫码结束
          self.handleScanComplete(scanBuffer)
          scanBuffer = []
        }, SCAN_TIMEOUT)
      }
    },
    handleVisibilityChange() {
      if (document.visibilityState === 'visible') {
        console.log('用户切回到了工位页面')
        if (this.ws == null || this.ws.readyState === WebSocket.CLOSED) {
          this.ws = new WebSocket('ws://127.0.0.1:9988')
          const self = this
          this.ws.onopen = function(evt) {
            console.log('工位剔除WebSocket 连接中 ...')
            self.socketListener()
          }
        }
      } else {
        if (this.ws && this.ws.readyState === WebSocket.OPEN) {
          this.ws.close()
          console.log('关闭工位剔除websocket成功')
        }
      }
    }
  },
  computed: {
    // 计算每个分组的合并信息
    spanInfo() {
      const info = []
      let count = 1
      for (let i = 0; i < this.queueCodes.length; i++) {
        if (i === 0) {
          // 记录第一组的组号
          this.firstGroupNumber = this.queueCodes[i].groupNumber
        }
        if (i === this.queueCodes.length - 1 || this.queueCodes[i].groupNumber !== this.queueCodes[i + 1].groupNumber) {
          for (let j = 0; j < count; j++) {
            if (j === 0) {
              info.push({ rowspan: count, colspan: 1 })
            } else {
              // 分组的其他单元格不显示
              info.push({ rowspan: 0, colspan: 0 })
            }
          }
          count = 1
        } else {
          // 分组未结束，继续计数
          count++
        }
      }
      return info
    }
  },
  mounted() {
    // this.$refs.inputRef.focus()
    // this.$refs.inputRef.select()
    document.body.ondrop = function(event) {
      event.preventDefault()
      event.stopPropagation()
    }
    var that = this
    var inputer = document.getElementById('inputer')
    window.sc = new A.KeyScaner(inputer) //传入要监听的DOM节点
    sc.onInput = function(text) {
      if (text.includes('delete')) {
        that.scanCode = ''
        that.sictomText = ''
        that.originCode = ''
        return
      }
      if (that.sitcomScan) {
        let tempTxt = text
        let str = tempTxt.replace(/[\r]/g, '')
        that.sictomText = that.sictomText + str
        that.scanCode = that.sictomText
      } else {
        that.scanCode = text
      }
    }
    inputer.focus()
    this.$refs.inputRef.focus()
    //环境判断
    if (window.navigator.userAgent.indexOf('GLXP_PC') != -1) {
      this.scanDisabled = true
      window.removeEventListener('gwsh', this.handleRecCodesEvent)
      window.addEventListener('gwsh', this.handleRecCodesEvent)
    }
    document.addEventListener('visibilitychange', this.handleVisibilityChange)
    this.handleVisibilityChange()

  },
  created() {
    this.workplaceId = this.$route.query.workplaceId
    // this.selectSysParam()
  },
  beforeDestroy() {
    window.removeEventListener('gwsh', this.handleRecCodesEvent)
    this.ws.close()
    this.ws.onclose = function(evt) {
      console.log('工位剔除Connection closed.')
    }
    document.removeEventListener('visibilitychange', this.handleVisibilityChange)
  }
}
</script>

<style scoped>
.scroll-alert {
  width: 100%; /* 或者你需要的宽度 */
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
  /*border: 1px solid #f56c6c; !* 类似于 Element UI 警告框的边框 *!*/
  background-color: rgba(255, 235, 59, 0.1); /* 类似于 Element UI 警告框的背景色 */
  padding: 10px;
  position: relative;
}

.scroll-text {
  display: inline-block;
  padding-left: 100%; /* 初始位置在容器右侧 */
  animation: scroll 10s linear infinite; /* 滚动动画 */
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.query-form-item {
  margin-right: 5px;
  margin-bottom: 6px;
}

#inputer {
  width: 100%;
  min-height: 30px;
  background-color: white;
  border: #d0d0d0;
  border-style: solid;
  border-width: 0.1px;
  color: #4a4a4a;
}

#inputer:focus {
  width: 100%;
  min-height: 30px;
  background-color: white;
  border: #0080ff;
  border-style: solid;
  border-width: 0.1px;
  color: #4a4a4a;
}

.ime-disabled {
  ime-mode: disabled;
}

.result-display {
  border: 2px solid #ccc; /* 默认外框颜色 */
  border-radius: 10px;
  margin-top: 5px;
  margin-left: 15px;
  margin-right: 25px;
  padding-left: 25px;
  /* 不设置背景颜色 */
}

.result-success {
  border-color: #4CAF50; /* 成功时外框颜色 */
}

.result-failure {
  border-color: #0080ff; /* 失败时外框颜色 */
}

.result-text {
  height: 18px;
  /* 你可以在这里设置默认的文本颜色或其他样式 */
}

.result-text-success {
  color: #4CAF50; /* 成功时文本颜色 */
  font-size: 14px;
}

.result-text-failure {
  color: #0080ff; /* 失败时文本颜色 */
  font-size: 14px;
}


</style>