add 选瓦

wujian

2024-07-10 59e2283a10aee45e6a98e34b432ba345095116db

 jcdm-ui/src/views/main/cfkb/BalanceShaft/index.vue

@@ -1,41 +1,26 @@
<template>
  <div class="app-container">
    <div style="width: 100%">
      <el-card class="box-card" >
        <el-form :model="from" size="large" :inline="true" label-width="68px" @submit.native.prevent>
          <el-form-item label-width="200" label="平衡轴码" :prop="from.scanObject2"  style="align-content: center">
            <input v-model="from.scanObject2"
                   ref="inputdata"
                   style="height: 39px; width: 300px"
                   placeholder="请输入平衡轴码"
            />
          </el-form-item>
        </el-form>
        <el-form :model="from" ref="queryForm" :inline="true" >
          <el-form-item  label="机型:" prop="productSeries" >
            <el-select v-model="from.productSeries" placeholder="" clearable   style="width: 105px">
              <el-option

                v-for="dict in dict.type.productseries"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item  label="瓦名称:" prop="tileName" >
            <el-select v-model="from.tileName" placeholder="" clearable style="width: 125px" >
              <el-option
                v-for="dict in dict.type.tilename"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-button type="primary" icon="el-icon-refresh" @click="handleQuery">查询</el-button>
        </el-form>
      </el-card>
      <el-row :gutter="3">
        <el-col :span="10">
          <el-card class="box-card" >
            <el-form :model="queryParams" size="large" :inline="true" label-width="68px" @submit.native.prevent>
              <el-form-item label-width="200" label="平衡轴码" :prop="queryParams.scanObject2"  style="align-content: center">
                <input v-model="queryParams.scanObject2"
                       ref="inputdata"
                       style="height: 39px; width: 300px"
                       placeholder="请输入平衡轴码"
                />
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
        <el-col :span="14">
          <el-card shadow="always" class="boxSize">
            <span class="centerText" >{{noticeMessage}}</span>
          </el-card>
        </el-col>
      </el-row>
      <el-col :span="24" >
        <el-card class="bottom-card">
          <div slot="header" class="clearfix">
@@ -52,9 +37,6 @@
            <el-descriptions-item label="平衡轴码">
              <span>{{queryParams.scanObject2}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="瓦名称">
              <span>{{queryParams.tileName}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="配瓦颜色">
              <span v-for="(word, index) in queryParams.words" :key="index" :style="{ backgroundColor: queryParams.colors[index],fontSize: '30px',}">{{ word }}</span>
            </el-descriptions-item>
@@ -69,6 +51,9 @@
import VueQr from 'vue-qr'
import { listTileMatchRules, getTileMatchRules, delTileMatchRules, addTileMatchRules, updateTileMatchRules } from "@/api/main/bs/tileMatchRules/tileMatchRules";
import {setBarcode} from "@/api/main/bs/tileMatchRules/tileMatchRules";
import { getUrl } from "@/api/main/bs/orderScheduling/orderScheduling";
import WebSocketReconnect from "@/utils/WebsocketTool";
import { getBalanceData } from "@/api/main/da/tileMatchCollection/tileMatchCollection"
export default {
  name: "index",
  dicts: ['colour_hex','productseries','axisname','neckname','tilename'],
@@ -77,6 +62,7 @@
  },
  data(){
    return{
      noticeMessage: "请等待托盘数据读取",
      scannerFlag: false,
      loading: true,
      tileMatchKbList: [],
@@ -85,12 +71,12 @@
      from:{
        pageNum: 1,
        pageSize: 10,
        productSeries: '380Y',
        productSeries: '',
        scanObject1: null,
        scanObject2: 'P0NYK0410001000;T231107031;D2222232;S500003',
        scanObject2: '',
        axisName: null,
        neckName: null,
        tileName: '平衡轴瓦',
        tileName: '',
        axisParameterNoPosition: null,
        neckParameterPosition: null,
        axisValue: null,
@@ -106,7 +92,7 @@
        pageSize: 10,
        productSeries: null,
        scanObject1: null,
        scanObject2: 'P0NYK0410001000;T231107031;D2222232;S500003',
        scanObject2: '',
        axisName: null,
        neckName: null,
        tileName: null,
@@ -125,6 +111,7 @@
    }
  },
  mounted() {
    this.getWebUrl()
    this.setFocus()
    this.$refs.inputdata.addEventListener('keydown',this.handleScannerInput)
  },
@@ -132,6 +119,63 @@
    this.$refs.inputdata.removeEventListener('keydown',this.handleScannerInput)
  },
  methods:{
    getWebUrl() {
      getUrl().then(res => {
        this.websocketUrl = res + "OP040"
        console.log('websocketUrl：', this.websocketUrl)
        this.initWebSocket()
      })
    },
    initWebSocket: function () {
      //判断当前浏览器是否支持WebSocket
      if ('WebSocket' in window) {
        //连接WebSocket节点
        this.websocket = new WebSocketReconnect(this.websocketUrl);
        //接收到消息的回调方法
        this.websocket.socket.onmessage = (event) => {
          let data = event.data;
          if (data != null && data !== '') {
            this.result = JSON.parse(data);
            console.log('this.result.server_message',this.result.server_message)
            const parts3 = this.result.server_message.split("*");
            if (parts3.length >= 2) {
              if (parts3[0] === 'clean'){
                console.log('090909')
                this.queryParams.productSeries = ''
                this.queryParams.scanObject1 = ''
                this.queryParams.scanObject2 = ''
                this.queryParams.words = ['------', '------', ]
                this.queryParams.colors = ['#FFFFFF', '#FFFFFF']
                this.noticeMessage = "请等待托盘数据读取"
              }else {
                this.queryParams.productSeries = parts3[0];
                this.queryParams.scanObject1 = parts3[1];
                if (this.queryParams.scanObject1 !== null && this.queryParams.scanObject1 !== ''){
                  this.noticeMessage = "请扫描平衡轴码"
                }
              }

            }
          }
        }
        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function () {
          this.websocket.close()
        }

        //关闭连接
        function closeWebSocket() {
          this.websocket.close()
        }

        //发送消息
        function send() {
          this.websocket.socket.send({kk: 123})
        }
      } else {
        alert('浏览器不支持webSocket')
      }
    },
    refresh() {
      location.reload();
    },
@@ -142,126 +186,41 @@
    },
    handleScannerInput(event){
      if (this.scannerFlag){
        this.from.scanObject2 = ''
        this.queryParams.scanObject2 = ''
        this.$refs.inputdata.value = ''
        this.scannerFlag = false
      }
      const input = event.target
      const inputValue = input.value
      this.from.scanObject2 = inputValue
      this.queryParams.scanObject2 = inputValue
      if (event.key === 'Enter'){
        this.scannerFlag = true
        console.log('条码：',this.from.scanObject2)
        console.log('条码：',this.queryParams.scanObject2)
        //扫描完成
        if (typeof this.from.scanObject2 !== 'undefined') {
          console.log('条码：',this.from.scanObject2,'HOP040')
          setBarcode({barcode:this.from.scanObject2,locationCode:'HOP040'}).then(res =>{
        if (this.queryParams.scanObject2 !== null && this.queryParams.scanObject2 !== '') {
          console.log('条码：',this.queryParams.scanObject2,'OP040')
          getBalanceData({boxCode: this.queryParams.scanObject1,balanceCode: this.queryParams.scanObject2,productType: this.queryParams.productSeries}).then(res =>{
            console.log('res',res)
            this.from.scanObject1=res
            this.handleQuery()
            if (res.code === 200){
              this.$message({
                message:'配瓦成功',
                type:'success'
              })
              this.noticeMessage = '配瓦成功'
              for (var i = 0; i < res.data.length; i++) {
                this.queryParams.colors[i] = res.data[i].tileColor;
                this.queryParams.words[i] = res.data[i].tileName;
              }
            }else {
              this.$message({
                message:res.msg,
                type:'warning'
              })
            }
          })
        }
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.clear();

      if(this.from.scanObject1 !== null && this.from.scanObject2 !== null
        // && this.from.axisName !== null && this.from.axisName !== ""
        // && this.from.neckName !== null && this.from.neckName !== ""
        // && this.from.tileName !== null && this.from.tileName !== ""
        && this.from.productSeries !== null && this.from.productSeries !== "")
      {
        this.axisValueextracted();
        this.neckValueextracted();
        if(this.queryParams.axisValue !== null && this.queryParams.neckValue !== null){
          this.insetFromToQueryParams();
          this.getList();
        }
        else{
          const h = this.$createElement;
          this.$message({
            message: h('p',null, [
              h('span', null, '警告 '),
              h('i', { style: 'color: black' }, '箱体码或曲轴码输入有误'),
              h()]),
            type: 'error',
            center: true,
            offset:300
          });
        }
      }
      else{
        console.log("搜索条件",this.from.scanObject1 ,this.from.scanObject2)
        const h = this.$createElement;
        this.$message({
          message: h('p',null, [
            h('span', null, '警告 '),
            h('i', { style: 'color: black' }, '请填写所有搜索条件'),
            h()]),
          type: 'error',
          center: true,
          offset:300
        });
      }
    },

    // 取箱体码第三段为配瓦值
    axisValueextracted() {
      const parts1 = this.from.scanObject1.split(";");
      if (parts1.length >= 3) {
        //const axisValueextracted = parts1[2].substring(3,4);
        const axisValueextracted = parts1[2];
        return this.queryParams.axisValue= axisValueextracted;

      }
    },

    //取曲轴码第三段为配瓦值
    neckValueextracted() {
      const parts2 = this.from.scanObject2.split(";");
      if (parts2.length >= 3) {
        //const neckValueextracted = parts2[2].substring(3,4);
        const neckValueextracted = parts2[2];
        return this.queryParams.neckValue= neckValueextracted;
      }
    },
    //取配瓦颜色
    getList() {
      let queryParams = {
        productSeries : this.queryParams.productSeries,
        axisName : this.queryParams.axisName,
        neckName : this.queryParams.neckName,
        tileName : this.queryParams.tileName,
        axisValue: this.queryParams.axisValue,
        neckValue: this.queryParams.neckValue,
      }
      console.log(queryParams)
      listTileMatchRules(queryParams).then(response => {
        // this.queryParams.tileColor = response.rows[0].tileColor;
        this.queryParams.words= ['------', '------']
        this.queryParams.colors= ['#FFFFFF', '#FFFFFF']
        for (var i=0;i<response.rows.length;i++){
          this.queryParams.colors[i]=response.rows[i].tileColor;
          this.queryParams.words[i]=response.rows[i].tileName;
        }
        console.log('颜色：',response)
      });
    },
    clear(){
      this.queryParams.axisValue=null;
      this.queryParams.neckValue=null;
    },
    insetFromToQueryParams(){
      this.queryParams.productSeries=this.from.productSeries;
      this.queryParams.axisName=this.from.axisName;
      this.queryParams.neckName=this.from.neckName;
      this.queryParams.tileName=this.from.tileName;
      this.queryParams.scanObject1=this.from.scanObject1;
      this.queryParams.scanObject2=this.from.scanObject2;
    }

  },
}
</script>
@@ -276,5 +235,16 @@
::v-deep .el-input .el-input--medium .el-input--suffix{
  width: 200px;
}
.centerText{
  color: red;
  font-weight: bold;
  font-size: 35px;
  display: flex;
  align-content: center;
  justify-content: center;
}
.boxSize {
  height: 80px;
}

</style>