devicesmgt/sgzb-ui/src/views/qrCode/qrCode.vue

<template>
    
     <div style="width: 100%">
        <div style="width: 100%;padding: 10px;font-weight: 500;">
          <div class="item-box">
            <div>设备类型:</div>
            <div style="margin-left: 10px;color: blue;">{{queryParams.deviceType}}</div>
          </div>
          <div class="item-box">
            <div>规格型号:</div>
            <div style="margin-left: 10px;"> {{queryParams.specificationType}}</div>
          </div>
          <div class="item-box">
            <div>二维码编码:</div>
            <div style="margin-left: 10px;">{{queryParams.qrCode}}</div>
          </div>
          <div class="item-box">
            <div >设备编码:</div>
            <div style="margin-left: 10px;">{{queryParams.maCode}}</div>
          </div>
          <div class="item-box">
            <div >设备状态:</div>
            <div style="margin-left: 10px;">{{queryParams.maStatusName}}</div>
          </div>
          <div class="item-box">
            <div >本次检修人员:</div>
            <div style="margin-left: 10px;">{{queryParams.checkMan}}</div>
          </div>  
          <div class="item-box">
            <div >本次检修时间:</div>
            <div style="margin-left: 10px;color: blue;">{{queryParams.thisCheckTime}}</div>
          </div>
          <div class="item-box">
            <div >下次检修时间:</div>
            <div style="margin-left: 10px;color: blue;">{{queryParams.nextCheckTime}}</div>
          </div>
          <div class="item-box">
            <div >检验人员:</div>
            <div style="margin-left: 10px;">{{queryParams.inspectMan}}</div>
          </div>
          <div class="item-box">
            <div >检验结论:</div>
            <div style="margin-left: 10px;color: blue;">{{queryParams.inspectStatus}}</div>
          </div>
          <div class="item-box">
            <div >联系电话:</div>
            <div style="margin-left: 10px;">{{queryParams.phone}}</div>
          </div>
          <div class="item-box">
            <div >生产厂家:</div>
            <div style="margin-left: 10px;">{{queryParams.maVender}}</div>
          </div>
          <div class="item-box">
            <div >出厂日期:</div>
            <div style="margin-left: 10px;">{{queryParams.outFacTime}}</div>
          </div>
          <div class="item-box">
            <div >出入库次数:</div>
            <div style="margin-left: 10px;">{{queryParams.inOutNum}}</div>
          </div>
          <div class="item-box">
            <div >领料单位:</div>
            <div style="margin-left: 10px;">{{queryParams.leaseUnit}} </div>
          </div>
          <div class="item-box">
            <div >领料工程:</div>
            <div style="margin-left: 10px;">{{queryParams.leasePro}} </div>
          </div>
          <div class="item-box">
            <div >领料时间:</div>
            <div style="margin-left: 10px;">{{queryParams.leaseTime}} </div>
          </div>
          <div class="item-box">
            <div >退料单位:</div>
            <div style="margin-left: 10px;">{{queryParams.backUnit}} </div>
          </div>
          <div class="item-box">
            <div >退料工程:</div>
            <div style="margin-left: 10px;">{{queryParams.backPro}} </div>
          </div>
          <div class="item-box">
            <div >退料时间:</div>
            <div style="margin-left: 10px;">{{queryParams.backTime}} </div>
          </div>
        </div>
        <div class="bottom-box">
          <div style="width: 100%;text-align: center;margin-bottom: 20px;color:green;"> 检 验 合 格 证 </div>
          <div style="width: 50%;display: flex;margin-bottom: 10px;">
            <div  style="color:green;" >名 称：</div> <div style="border-bottom: 1px solid green;">{{queryParams.deviceType}}</div>
          </div>
          <div style="width: 50%;display: flex;margin-bottom: 10px;">
            <div  style="color:green;" >检验结论：</div> <div style="color:red;font-size: 18px;font-weight: 600;">{{queryParams.inspectStatus}}</div>
          </div>
          <div style="width:100%;display: flex;margin-bottom: 10px;">
            <div  style="color:green;" >型 号：</div> <div style="border-bottom: 1px solid green;">{{queryParams.specificationType}}</div>
          </div>
          <div style="width:100%;display: flex;margin-bottom: 10px;">
            <div  style="color:green;" >编 号：</div> <div style="border-bottom: 1px solid green;">{{queryParams.maCode}}</div>
          </div>
          <div style="width:100%;display: flex;margin-bottom: 10px;">
            <div  style="color:green;" >本次检验日期：</div> <div style="border-bottom: 1px solid green;">{{queryParams.thisCheckTime}}</div>
          </div>
          <div style="width:100%;display: flex;margin-bottom: 10px;">
            <div  style="color:green;" >下次检验日期：：</div> <div style="border-bottom: 1px solid green;">{{queryParams.nextCheckTime}}</div>
          </div>
          <div style="position:absolute; top: 0%;left: 25%;">
              <canvas id="canvas" width="220" height="220"></canvas>
          </div>


        </div>





    </div>
  </template>
  
  <script>
  import chapter from '../../utils/chapter';
  import { getMachineByQrCode } from '@/api/base/base'
  export default {
    data() {
      return {
       qrCode:'',
       queryParams:{
        deviceType:'',//设备类型
        specificationType:'',//规格型号
        qrCode:'',//二维码
        maCode:'',//设备编码
        maStatusName:'',//设备状态
        checkMan:'',//本次检验人
        thisCheckTime:'',//本次检验日期
        nextCheckTime:'',//下次检验日期
        maStatusName:'',//设备状态
        inspectMan:'',//检验人员
        inspectStatus:'',//检验结论
        phone:'',//联系电话
        maVender:'',//厂家名称
        outFacTime:'',//出厂日期
        inOutNum:'',//出入库次数
        leaseUnit:'',// 领料单位
        leasePro:'',// 领料工程
        leaseTime:'',// 领料时间
        backUnit:'',//  退料单位
        backPro:'',// 退料工程
        backTime:'',// 退料时间
       }
      };
    },
    created() { 
      this.qrCode = this.$route.query.qrCode
      console.log(this.qrCode)
      this.getMachineByQrCode()
  
    },
    mounted(){
        chapter('机具检验专用章','宁夏送变电工程有限公司')
    },
    methods: {
      getMachineByQrCode(){
        let param = {
          qrCode:this.qrCode
        }
        getMachineByQrCode(param).then(response => {
          console.log(response)
          this.queryParams = response.data
        });


      }
    }
  };
  </script>
  <style lang="scss" scoped>
  .item-box{
    display: flex;width: 100%;border-bottom: 1px solid green;margin-bottom: 10px;
  }
  .bottom-box{
    display: flex;width: 99%;border: 4px solid rgb(2, 196, 2);flex-wrap: wrap;margin: auto;position: relative;
  }
  </style>