添加车票匹配功能

819527061@qq.com

2024-04-23 58a4ef500df8fac3d77f492b156bdedc3faae37d

 src/components/page/IndexXTYH39.vue

@@ -58,6 +58,65 @@

      </div>
    </div>
    <div class="moreCarNum" v-if="pipaiCarNumShow">
      <h1 class="title">以下是与您车牌号相似的入场记录</h1>
<!--      <div class="moreCarNum-main">-->
<!--        <div class="moreCarNum-heard">-->
<!--          <div class="moreCarNum-block">-->
<!--            <h1>车牌号</h1>-->
<!--          </div>-->
<!--          <div class="moreCarNum-block">-->
<!--            <h1>入场时间</h1>-->
<!--          </div>-->
<!--          <div class="moreCarNum-block">-->
<!--            <h1>操作</h1>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="moreCarNum-table">-->
<!--          <div class="moreCarNum-line" v-for="item in moreCarNumData" :key="item.id">-->
<!--            <div class="moreCarNum-block">-->
<!--              <h1>{{item.carNo}}</h1>-->
<!--            </div>-->
<!--            <div class="moreCarNum-block">-->
<!--              <h1>{{item.createTime}}</h1>-->
<!--            </div>-->
<!--            <div class="moreCarNum-block">-->
<!--              <el-button size="mini" type="success" @click="handleClickCarNum(item)">确定</el-button>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->

      <div class="moreCarNum-main">
        <el-table :data="moreCarNumData">
          <el-table-column
              prop="carNo"
              label="车牌"
              align="left"
              header-align="center"
              min-width="30%"
          >
          </el-table-column>
          <el-table-column
              prop="createTime"
              label="入场时间"
              align="left"
              header-align="center"
              min-width="50%"
          >
          </el-table-column>
          <el-table-column
              label="操作"
              header-align="center"
              min-width="20%"
          >
            <template slot-scope="scope">
              <el-button size="mini" type="success" @click="handleClickCarNum(scope.row)">确定</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="dialog-box">
      <el-dialog
          title="支付"
@@ -109,6 +168,18 @@
          </span>
      </el-dialog>
    </div>
    <div class="pipeicarNum-dialog-box">
      <el-dialog
          title="请选择识别正确的记录"
          :close-on-click-modal="false"
          :visible.sync="pipeicardialogVisible"
          width="100%">
        <div class="peipeiCarnum">
          <el-button size="mini" type="primary" @click="handleCarType(0)">入场正确</el-button>
          <el-button size="mini" type="primary" @click="handleCarType(1)">出场正确</el-button>
        </div>
      </el-dialog>
    </div>
    <tishi-dialog ref="TishiDialog" v-if="tishiDialogVisiable"></tishi-dialog>
    <tishi-dialog2 ref="TishiDialog" v-if="tishiDialogVisiable2"></tishi-dialog2>
  </div>
@@ -127,6 +198,11 @@
  },
  data() {
    return {
      moreCarNumData:[],  //匹配车牌Data
      pipaiCar:false,  //匹配车牌
      pipeicardialogVisible: false,  //匹配弹框
      enterParkId:null,  //入场id
      pipaiCarNumShow:false,  //匹配内容
      tishiDialogVisiable: false,
      tishiDialogVisiable2: false,
      isShowjiaofei: true,
@@ -225,7 +301,24 @@
          this.payFlag = false
          if(!this.statisticData.enterTime) {  //没有入场
            this.isShowjiaofei = false
            this.tishiDialogVisiable = true
            this.pipaiCarNumShow = true  //匹配区域显示
            this.$byutil.getData(this,this.$systemconfig.basePath + '/ffzf/outpark/getLikeCar',{outParkId:this.outParkId},res => {
              console.log(res,'res============')
              if(res.code == 0) {
                if(res.data.length > 0) {
                  this.moreCarNumData = res.data.map(item => {
                    return {
                      ...item,
                      createTime: this.$moment(item.createTime).format('YYYY-MM-DD HH:mm:ss')
                    }
                  })
                }else {
                  this.tishiDialogVisiable = true  //入场信息 异常提示
                }
              }
            })


            // this.$message({
            //   showClose: false,
            //   duration:0,
@@ -257,6 +350,27 @@
      }finally {
        // this.dataLoading  = false
      }
    },
    handleClickCarNum(item) {  //点击匹配区域的确定按钮
      console.log(item,'确定按钮')
      this.pipeicardialogVisible = true
      this.enterParkId = item.id

    },
    handleCarType(type) {  //识别正确的记录
      this.$byutil.getData(this,this.$systemconfig.basePath + '/ffzf/outpark/editOutPark',{type:type,outParkId:this.outParkId,enterParkId:this.enterParkId},res => {
        console.log(res,'res==========')
        if(res.code == 0) {
          this.pipeicardialogVisible = false
           this.statisticData = res.data
          this.isShowjiaofei = true  //缴费按钮显示
          this.pipaiCarNumShow = false  //关掉车牌匹配区域
          this.$message.success(res.msg)
        }else {
          this.pipeicardialogVisible = false
          this.$message.error('更新失败,请联系管理员')
        }
      })
    },
    pay(){
      this.payFlag = true;  //去缴费loading
@@ -485,98 +599,178 @@


<style lang="scss">
.el-message{
  padding: 6.944vh  /* 75/10.8 */ 0.78125vw  /* 15/19.2 */ 6.944vh  /* 75/10.8 */ 1.042vw  /* 20/19.2 */;
}
.el-icon-success:before{
  content: none;
}
.el-message__content{
  font-size: 5vw;
}
.el-icon-error:before{
  font-size: 5vw
}
.weizhang-main-bootom{
  .el-input__inner{
    border:none;
//.el-message{
//  padding: 6.944vh  /* 75/10.8 */ 0.78125vw  /* 15/19.2 */ 6.944vh  /* 75/10.8 */ 1.042vw  /* 20/19.2 */;
//}
.weizhang-box{
  .el-form-item{
    margin-bottom: 3.8vw!important;
  }
  .el-form-item__label{
    color: #000;
    font-weight: 600;
    font-size: 3.73vw  /* 28/7.5 */;
    width: 21.33vw  /* 160/7.5 */
    !important;
    line-height: 2.5;
  }
}
.weizhang-footer-box{
  .el-form-item__content{
    width: 100%;
    display: flex;
    justify-content: center;
    font-size: 3.73vw  /* 28/7.5 */;
    line-height: 2.5;
  }
  .el-button--small{
    padding: 11px 15px;
    font-size: 0.347rem  /* 26/75 */;
  .el-icon-success:before{
    content: none;
  }
}
.dialog-box{
  .el-dialog{
    bottom: 0;
    position: fixed;
    left: 0;
    margin: 0;
  .el-message__content{
    font-size: 5vw;
  }
  .el-dialog__header{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.87vw  /* 14/7.5 */;
    background: rgba(103,201,122,0.1);
  .el-icon-error:before{
    font-size: 5vw
  }
}
.dialog-box,.again-dialog-box{
  .el-dialog__body{
    padding: 2.67vw  /* 20/7.5 */ 5.33vw  /* 40/7.5 */;
  .weizhang-main-bootom{
    .el-input__inner{
      border:none;
    }
    .el-form-item__label{
      color: #000;
      font-weight: 600;
    }
  }
  .el-dialog__title{
    font-size: 4vw  /* 30/7.5 */;
  }
  .el-dialog__headerbtn{
    top: 2.67vw  /* 20/7.5 */;
  }
  .dialog-footer{
    display: flex;
    width: 100% !important;
    .el-button{
  .weizhang-footer-box{
    .el-form-item__content{
      width: 100%;
      background: rgba(74,76,89,1);
      //padding: 1.056vh  /* 12/11.36 */ 1.761vh  /* 20/11.36 */;
      display: flex;
      justify-content: center;
    }
    .el-button--small{
      padding: 11px 15px;
      font-size: 0.347rem  /* 26/75 */;
    }
  }
  .dialog-box{
    .el-dialog{
      bottom: 0;
      position: fixed;
      left: 0;
      margin: 0;
    }
    .el-dialog__header{
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 1.87vw  /* 14/7.5 */;
      background: rgba(103,201,122,0.1);
    }
  }
  .dialog-box,.again-dialog-box{
    .el-dialog__body{
      padding: 2.67vw  /* 20/7.5 */ 5.33vw  /* 40/7.5 */;
    }
    .el-dialog__title{
      font-size: 4vw  /* 30/7.5 */;
    }
    .el-dialog__headerbtn{
      top: 2.67vw  /* 20/7.5 */;
    }
    .dialog-footer{
      display: flex;
      width: 100% !important;
      .el-button{
        width: 100%;
        background: rgba(74,76,89,1);
        //padding: 1.056vh  /* 12/11.36 */ 1.761vh  /* 20/11.36 */;
      }
    }
  }
  .again-dialog-box{
    .el-button--success{
      background: linear-gradient(to right, #33b1fe, #0679dc)!important;
    }
    .el-dialog__body{
      padding: 8.67vw 5.33vw;
    }
    .el-dialog{
      width: 80%!important;
      margin-top: 47vh!important;
      border-radius: 2.67vw  /* 20/7.5 */;
    }
    .el-dialog__header{
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 1.87vw  /* 14/7.5 */;
      background: rgba(103,201,122,0.1);
    }
  }
  .moreCarNum{
    tr{
      td{
        &:nth-child(3) {
          .cell{
            padding-left: 0;
          }
        }
      }
    }
    .el-button--mini, .el-button--mini.is-round{
      padding: 0.816vh  /* 7/11.36 */ 4vw  /* 15/7.5 */;
    }
    .el-button--mini, .el-button--small{
      font-size: 3.2vw  /* 24/7.5 */;
    }
    .el-table td, .el-table th{
      padding: 2.5vw  /* 12/7.5 */ 0;
    }
    //.el-table td, .el-table th.is-leaf{
    //  border-bottom: 1px solid transparent;
    //}
    .el-table::before{
      height: 0;
    }
    .el-table{
      font-size: 3.47vw  /* 26/7.5 */;
    }
    tbody{
      tr:last-child {
        td{
          border-bottom:1px solid transparent;
        }
      }
    }
  }
  .pipeicarNum-dialog-box{
    .el-dialog{
      width: 85%!important;
      margin-top: 44vh!important;
      border-radius: 2.67vw  /* 20/7.5 */;
    }
    .el-dialog__title{
      font-size: 4vw  /* 30/7.5 */;
    }
    .el-button--mini{
      padding: 3vw  /* 18/7.5 */ 8vw  /* 44/7.5 */;
      font-size:3.73vw  /* 28/7.5 */;
    }
    .el-dialog__header{
      padding: 7vw  /* 48/7.5 */ 6.4vw 4vw  /* 30/7.5 */;
    }
    .el-dialog__body{
      padding: 10vw  /* 60/7.5 */ 5.33vw  /* 40/7.5 */ 14vw 5.33vw;
    }
  }
}
.again-dialog-box{
  .el-button--success{
    background: linear-gradient(to right, #33b1fe, #0679dc)!important;
  }
  .el-dialog__body{
    padding: 8.67vw 5.33vw;
  }
  .el-dialog{
    width: 80%!important;
    margin-top: 47vh!important;
    border-radius: 2.67vw  /* 20/7.5 */;
  }
  .el-dialog__header{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.87vw  /* 14/7.5 */;
    background: rgba(103,201,122,0.1);
  }
}



</style>
<style lang="scss" scoped>
.weizhang-box{
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding-bottom: 2.67vw  /* 20/7.5 */;
}
h1,h2,h3,h4,h5{
  font-family: '苹方 中等';
  font-weight: normal;
@@ -608,10 +802,10 @@
  width: 100%;
  display: flex;
  flex-direction: column;
  padding:5.33vw  /* 40/7.5 */;
  padding:0  /* 20/7.5 */ 5.33vw  /* 40/7.5 */ 2.67vw  /* 20/7.5 */ 5.33vw;
}
.weizhang-main-top{
  height: 21.489vh  /* 300/13.34 */;
  height: 15vh  /* 300/13.34 */;
  display: flex;
  flex-direction: column;
  justify-content: center;
@@ -715,4 +909,69 @@
    }
  }
}
.moreCarNum{
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;

  .title{
    font-size: 3.47vw  /* 26/7.5 */;
    margin-bottom: 2.67vw  /* 20/7.5 */;
    padding-left: 2.67vw  /* 20/7.5 */;
    font-weight: 550;
    letter-spacing: 1px;
  }
  .moreCarNum-heard{
    width: 100%;
    display: flex;
    .moreCarNum-block{
      text-align: center;
      h1{
        font-size: 3.47vw  /* 26/7.5 */;
      }
      &:nth-child(1){
        width: 30%;
      }
      &:nth-child(2){
        width: 50%;
      }
      &:nth-child(3){
        width: 20%;
      }
    }
  }
  .moreCarNum-main{
    border: 1px solid #dbdbdb;
    border-radius: 2.67vw  /* 20/7.5 */;
    padding: 1.07vw  /* 8/7.5 */ 2.67vw  /* 20/7.5 */;
    box-sizing: border-box;
    width: 100%;
    min-height: 17.366vh  /* 220/11.36 */;
    max-height: 26vh  /* 250/11.36 */;
    overflow-y: auto;
  }
  .moreCarNum-line{
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 3.2vw  /* 24/7.5 */;
    .moreCarNum-block{
      display: flex;
      h1{
        font-size: 3.73vw  /* 28/7.5 */;
        font-weight: 550;
        margin-right: 5.33vw  /* 40/7.5 */;
      }
      h2{
        font-size: 3.73vw  /* 28/7.5 */;
      }
    }
  }
}
.peipeiCarnum{
  width: 100%;
  display: flex;
  justify-content: space-between;
}
</style>