cvt前端界面优化

hdy

2024-07-13 d9502f15ba2829816b466385df558ce266a8e197

 jcdm-ui/src/views/main/kb/cvt/index.vue

@@ -21,67 +21,70 @@
        </el-card>
      </el-col>
    </el-row>
   <el-row :gutter="0"  >
     <el-col :span="14">
       <el-card   class="box-card" style="margin-top: 5px" >
             <el-form ref="form" :model="form"  label-width="25%"   >
               <el-form-item prop="engineNo" style="margin-top: 16px">
              <span slot="label" style="font-size:22px;color:black;"><strong>发动机号</strong></span>
                 <el-input style="font-size:20px" v-model="form.engineNo" placeholder="请输入发动机号" clearable  @input="EngineNohandleChange">
                   <el-button slot="append" plain type="info" @click="EngineNohandleChange" icon="el-icon-search"></el-button>
                 </el-input>
               </el-form-item>
             </el-form>
             <el-form ref="form" :model="form"  label-width="25%"  >
               <el-form-item   prop="productType"style="margin-top: 30px" >
                 <span slot="label" style="font-size:22px;color:black"><strong>机型</strong></span>
                 <el-input disabled style="font-size:20px"  value="form.productType" v-model="form.productType" placeholder="" />
               </el-form-item>
             </el-form>
             <el-form ref="form" :model="form"  label-width="25%"  >
               <el-form-item   prop="orderNo" style="margin-top: 30px">
              <span  slot="label" style="font-size:22px;color:black"><strong>工单编号</strong></span>
                 <el-input disabled style="font-size:20px" v-model="form.orderNo" placeholder="" />
               </el-form-item>
             </el-form>
             <el-form ref="form" :model="form"  label-width="25%"  >
               <el-form-item   prop="currentWorkstation" style="margin-top: 30px">
              <span slot="label" style="font-size:22px;color:black"><strong>质量状态</strong></span>
                 <el-input disabled style="font-size:20px" v-model:value="form.add" placeholder="" />
               </el-form-item>
             </el-form>
         <el-divider></el-divider>
    <el-row :gutter="0"  >
      <el-col :span="14">
        <el-card   class="box-card" style="margin-top: 5px" >
          <el-form ef="form" label-width="25%" :model="form"  :inline="true" style="margin-top: 80px;margin-block: 80px" @submit.native.prevent>
            <el-form-item   :prop="form.engineNo"  style="align-content: center">
              <span  slot="label" style="font-size:22px;color:black"><strong>工单编号</strong></span>
              <input v-model="form.engineNo"
                     ref="inputdata"
                     style="height: 40px; width: 300px;font-size:18px"
                     placeholder="请输入发动机码"
              />
            </el-form-item>
          </el-form>
<!--                       <el-form ref="form" :model="form"  label-width="25%"  >-->
<!--                         <el-form-item   prop="productType"style="margin-top: 30px" >-->
<!--                           <span slot="label" style="font-size:22px;color:black"><strong>机型</strong></span>-->
<!--                           <el-input disabled style="font-size:20px"  value="form.productType" v-model="form.productType" placeholder="" />-->
<!--                         </el-form-item>-->
<!--                       </el-form>-->
          <!--             <el-form ref="form" :model="form"  label-width="25%"  >-->
          <!--               <el-form-item   prop="orderNo" style="margin-top: 30px">-->
          <!--              <span  slot="label" style="font-size:22px;color:black"><strong>工单编号</strong></span>-->
          <!--                 <el-input disabled style="font-size:20px" v-model="form.orderNo" placeholder="" />-->
          <!--               </el-form-item>-->
          <!--             </el-form>-->
          <!--             <el-form ref="form" :model="form"  label-width="25%"  >-->
          <!--               <el-form-item   prop="currentWorkstation" style="margin-top: 30px">-->
          <!--              <span slot="label" style="font-size:22px;color:black"><strong>质量状态</strong></span>-->
          <!--                 <el-input disabled style="font-size:20px" v-model:value="form.add" placeholder="" />-->
          <!--               </el-form-item>-->
          <!--             </el-form>-->
          <el-divider></el-divider>

         <el-row :gutter="10" class="mb8" type="flex" justify="center"  style="text-align: center">
           <el-col :span="1.5">
             <el-button plain  :disabled="buttondisabled" type="primary" style="width:400px;height:160px" v-hasPermi="['bs:formula:add']" @click="forceOnline">
               <span   class="el-icon-thumb"   style="font-size:40px;color:black"></span>
               <span style="font-size:45px;color:black"><strong>强制上线</strong></span>
             </el-button>
           </el-col>
         </el-row>
       </el-card>
     </el-col>
          <el-row :gutter="10" class="mb8" type="flex" justify="center"  style="text-align: center">
            <el-col :span="1.5">
              <el-button plain  @click="ScannerInput" type="primary" style="width:400px;height:160px" v-hasPermi="['bs:formula:add']">
                <span   class="el-icon-thumb"   style="font-size:40px;color:black"></span>
                <span style="font-size:45px;color:black"><strong>手动扫码上线</strong></span>
              </el-button>
            </el-col>
          </el-row>
        </el-card>
      </el-col>

     <el-col :span="10"  inline style="margin-top: 5px">
         <el-card class="custom-content" style="height: 530px" >
         <el-col :span="14"style="  ">
           <span style="font-size:25px"><strong>质量数据</strong></span>
           <el-divider></el-divider>
           {{this.form.engineCheckList}}
         </el-col>
         </el-card>
     </el-col>
   </el-row>
      <el-col :span="10"  inline style="margin-top: 5px">
        <el-card class="custom-content" style="height: 453px" >
          <el-col :span="14"style="  ">
            <span style="font-size:25px"><strong>结果数据</strong></span>
            <el-divider></el-divider>
            {{this.form.engineCheckList}}
          </el-col>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>


import { listOrderScheduling, getOrderScheduling, delOrderScheduling, addOrderScheduling, updateOrderScheduling } from "@/api/main/bs/orderScheduling/orderScheduling";
import { listPassingStationCollection, getPassingStationCollection, delPassingStationCollection, addPassingStationCollection, updatePassingStationCollection } from "@/api/main/da/passingStationCollection/passingStationCollection";
import {listPassingStationCollection, getPassingStationCollection, delPassingStationCollection, addPassingStationCollection, updatePassingStationCollection,initializedData } from "@/api/main/da/passingStationCollection/passingStationCollection";
import {listLineInfo} from "@/api/main/bs/lineInfo/lineInfo";
import { setSNCode } from "@/api/main/da/opcuaconfig/opcuaconfig";
import {getIp, listStationConf} from "@/api/main/sc/stationConf";
import {time} from "echarts";

export default {
  components: { },
@@ -94,16 +97,11 @@
      engineCheckList:[],
      showFlag:false,
      buttondisabled:true,
      locationCode: "未配置",
      locationCode: "未配置IP",
      locationName: "未配置工位",

      codeValue: "",
      code: "",
      lastTime: "",
      nextTime: "",
      lastCode: "",
      nextCode: "",
      dtmainId: "",
      scannerFlag: false,
      barcode: "",

      // 查询参数
      queryParams: {
@@ -132,40 +130,102 @@
  },
  computed: {},
  watch: {},
  created() {
    window.document.onkeypress = (e) => {
      if (window.event) {
        this.nextCode = e.keyCode;
      } else if (e.which) {
        this.nextCode = e.which;
      }
      if (e.which === 13) {
        // 键盘回车事件
        if (this.code.length < 3) return; // 扫码枪的速度很快，手动输入的时间不会让code的长度大于2，所以这里不会对扫码枪有效
        this.parseQRCode(this.code); // 获取到扫码枪输入的内容，做别的操作
        this.lastCode = "";
        this.lastTime = "";
        return;
      }
      this.nextTime = new Date().getTime();
      if (!this.lastTime && !this.lastCode) {
        this.code = ""; // 清空上次的条形码
        this.code += e.key;
      }
      if (this.lastCode && this.lastTime && this.nextTime - this.lastTime > 500) {
        // 当扫码前有keypress事件时,防止首字缺失
        this.code = e.key;
      } else if (this.lastCode && this.lastTime) {
        this.code += e.key;
      }
      this.lastCode = this.nextCode;
      this.lastTime = this.nextTime;
    };

  beforeDestroy() {
    this.$refs.inputdata.removeEventListener('keydown',this.handleScannerInput)
  },
  mounted() {
    this.setFocus()
    this.$refs.inputdata.addEventListener('keydown',this.handleScannerInput)
    this.getStationConf();
  },
  methods: {

    refresh() {
      location.reload();
    },
    setFocus(){
      this.$nextTick(()=>{
        this.$refs.inputdata.focus()
      })
    },
    handleScannerInput(event){
      if (this.scannerFlag){
        this.form.engineNo = ''
        this.$refs.inputdata.value = ''
        this.scannerFlag = false
      }
      const input = event.target
      const inputValue = input.value
      this.form.engineNo = inputValue
      if (event.key === 'Enter'){
        this.scannerFlag = true
        console.log("条码：",this.form.engineNo)
        console.log("条码2：",this.locationCode)
        if(this.form.engineNo !== null && this.form.engineNo !== '') {

          console.log("条码3：",this.form.engineCheckList)
            initializedData({sfcCode:this.form.engineNo,locationCode:this.locationCode}).then(res =>{
              if(res.code===500){
                  this.$createElement;
              }else {

                addPassingStationCollection({sfcCode:this.form.engineNo,locationCode:this.locationCode}).then(res =>{
                  console.log("rrrrr",res)}
                )
                this.$message({
                  message: '扫码成功',
                  type: 'success'
                });
                this.scanResult();
              }
            })
        }else{
          this.$message({
            message: '未完成扫码',
            type: 'error'
          });
          this.reset();
          this.buttondisabled = true
        }
      }

    },



    ScannerInput(){
        console.log("条码：",this.form.engineNo)
        console.log("条码2：",this.locationCode)
        if(this.form.engineNo !== null && this.form.engineNo !==  '') {
          initializedData({sfcCode:this.form.engineNo,locationCode:this.locationCode}).then(res =>{
            if(res.code===500){
              this.$createElement;
            }else {
              addPassingStationCollection({sfcCode:this.form.engineNo,locationCode:this.locationCode}).then(res =>{
                console.log("rrrrr",res)})
              this.$message({
                message: '扫码成功',
                type: 'success'
              });
              this.scanResult();
            }
          })
        }
        else {
          this.$message({
            message: '未完成扫码',
            type: 'error'
          });
        }
    },

    scanResult(){
      this.currentDate = new Date().toLocaleDateString();
      this.currentTime = new Date().toLocaleTimeString();
      this.form.engineCheckList = "条码:"+this.form.engineNo +"\n扫码时间:" + this.currentDate+"/"+this.currentTime ;
    },

    getStationConf() {
      getIp().then(response => {
        let queryParams = {
@@ -187,67 +247,19 @@
        qualityStatus:null,
        currentWorkstation: null,
        add: null,
        engineCheckList:'暂无数据',
        engineCheckList:'',
      };
      this.resetForm("form");
    },
    EngineNohandleChange(){
      console.log('条码：',this.form.engineNo)
      if(this.form.engineNo !== null && this.form.engineNo !== undefined){
        //let OrderSchedulingParam = {engineNo: null}
        setSNCode(this.form.engineNo,this.locationCode)
        //OrderSchedulingParam.engineNo = this.form.engineNo;
     /*   listOrderScheduling(OrderSchedulingParam).then(response => {
          if(response.total === 1 ){
            this.form.productType = response.rows[0].model
            this.form.orderNo = response.rows[0].orderNo
            this.form.qualityStatus = response.rows[0].qualityStatus
            this.form.currentWorkstation = response.rows[0].currentWorkstation
            this.form.add= response.rows[0].currentWorkstation+ response.rows[0].qualityStatus
            if(this.form.qualityStatus ==='不合格'){
              this.buttondisabled = false;
            }
            else{
              this.buttondisabled = true;
            }
          }
          else{
            this.reset();
            this.buttondisabled = true
            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
            });
          }
        });*/
        /*let PassingStationCollectionParam = {sfcCode: null}
        PassingStationCollectionParam.sfcCode = this.form.engineNo;
        listPassingStationCollection(PassingStationCollectionParam).then(ponse =>{
          this.engineCheckList = ponse.rows.locationCode ;
          if(ponse.rows.length >= 1 && this.form.engineNo !== undefined){
            this.form.engineCheckList = ''
            for (let i = 0; i < ponse.rows.length; i++) {
              this.form.engineCheckList += '   工位:'+ ponse.rows[i].locationCode+'['+ponse.rows[i].outRsSign+']'
            }
          }
          else{
            this.form.engineCheckList = '暂无数据'
          }
        });*/
      }
    },

    parseQRCode(code) {
      this.form.engineNo = code;
    },
  },
  }


</script>
<style scoped>
@@ -272,10 +284,5 @@
  justify-content: center;
  margin-top: 5px
}
/*.my-custom-modal .el-dialog__wrapper {*/
/*  width: 400px; !* 设置宽度 *!*/
/*  height: 200px; !* 设置高度 *!*/
/*  top: 50px; !* 设置距离页面顶部的位置 *!*/
/*  left: 50px; !* 设置距离页面左侧的位置 *!*/
/*}*/

</style>