+保安证

liuyg

2021-10-21 ba2b70996525af8659bbe231ebd8165e70da982d

+保安证

 public/img/register/bazbj1.png

 public/img/register/bazbj1模板.png

 public/img/register/bazbj2.png

 src/api/performance/performance.js

@@ -2,7 +2,7 @@

export const getER = (securityNumber) => {
    return request({
        url: '/api//qrCode/getQrCodeBase64',
        url: '/api/qrCode/getQrCodeBase64',
        method: 'get',
        params: {
            securityNumber

 src/views/securityGuard/baoanz.vue

New file
@@ -0,0 +1,129 @@
<template>
  <div class="baoanzheng-1" id="baoanzheng-1">
    <div class="baz-main-1" ref="baoanzheng1">
      <img class="baz-main-img1" :src="data.avatar" alt="" />
      <div class="baz-main-img1-2">
        <img class="baz-main-img1-2-i" :src="erweima" alt="" />
      </div>
      <div class="b-m-ups-1">
        {{ data.realName }}
      </div>
      <div class="b-m-ups-1">
        {{ data.$sex }}
      </div>
      <div class="b-m-ups-1 securitynumber-1">
        {{ data.securitynumber }}
      </div>
      <div class="b-m-ups-1 b-m-ups-2">
        <!-- {{ data.securitynumber }} -->南昌市公安局
      </div>
      <div class="b-m-ups-1 b-m-ups-2">
        {{ data.paperTime || "---" }}
      </div>
    </div>
    <span slot="footer" class="dialog-footer no-print PrintBut">
      <el-button type="primary" @click="Print">打 印</el-button>
    </span>
  </div>
</template>

<script>
// export const getER = (securityNumber) => {
//     return request({
//         url: '/api/qrCode/getQrCodeBase64',
//         method: 'get',
//         params: {
//             securityNumber
//         }
//     })
// }

import { getER } from "@/api/performance/performance";
export default {
  props: ["data"],
  data() {
    return {
      erweima: "",
    };
  },
  mounted() {
    getER(this.data.securitynumber).then((res) => {
      this.erweima = res.data;
      // console.log(res.data);
    });
  },
  methods: {
    Print() {
      var printDom = document.getElementById("baoanzheng-1");
      printDom.style.position = "fixed";
      printDom.style.left = "-10%";
      printDom.style.width = "120%";
      printDom.style.height = "100%";
      this.$Print(this.$refs.baoanzheng1);
      printDom.style.position = "relative";
      printDom.style.left = "0";
      printDom.style.width = "100%";
      printDom.style.height = "calc(100% - 100px)";
    },
  },
};
</script>

<style lang="scss" scoped>
//保安证
.baoanzheng-1 {
  width: 100%;
  height: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  .baz-main-1 {
    background-image: url("/img/register/bazbj2.png");
    background-size: 100% 100%;
    width: calc(1274px * 0.5) !important;
    height: calc(828px * 0.5) !important;
    position: relative;
    margin-bottom: 10px;
    .baz-main-img1 {
      width: 170px;
      position: absolute;
      left: 51px;
      top: 57px;
      height: 237px;
    }
    .baz-main-img1-2 {
      width: 91px;
      position: absolute;
      left: 474px;
      // top: 120px;
      top: 78px;
      height: 93px;
      overflow: hidden;
      .baz-main-img1-2-i {
        width: 115px;
        height: 115px;
        position: relative;
        top: -10px;
        left: -11px;
      }
    }
    .b-m-ups-1 {
      width: 50%;
      font-size: 22px;
      font-weight: 400;
      position: relative;
      top: 91px;
      left: 320px;
      margin-bottom: 20px;
    }
    // .securitynumber-1 {
    //   font-size: 22px;
    //   margin-bottom: 18px;
    // }
    .b-m-ups-2 {
      left: 358px;
    }
  }
}
</style>

 src/views/securityGuard/securityGuardDetail.vue

@@ -36,7 +36,7 @@
    </span>
    <span v-else-if="typeTABS.prop === 'tab4'">
      <!-- 保安员证 -->
      <div class="baoanzheng" id="baoanzheng" v-if="hold == 1">
      <!-- <div class="baoanzheng" id="baoanzheng" v-if="hold == 1">
        <div class="baz-main">
          <div class="baz-m-body" ref="baoanzheng">
            <div class="bmb-heard">保安员证</div>
@@ -47,12 +47,8 @@
            <div class="imgs">
              <div v-if="erweima == ''">暂无二维码</div>
              <img :src="erweima" alt="" v-else />
              <!-- <img src="/img/register/ewm.png" alt="" /> -->
              <!-- logoSrc="/img/register/ewm.png" -->
              <!-- <vue-qr :text="goToUrl" :size="200"></vue-qr> -->
            </div>

            <!-- <img src="/img/mock/card/card-1.jpg" alt="" /> -->
            <div class="bmb-b">
              姓名：<span class="bmb-b-s">{{ obj0.realName }}</span>
            </div>
@@ -70,20 +66,13 @@
                obj0.paperTime.slice(0, 10)
              }}</span>
            </div>
            <!-- <div class="bmb-b">
              发证机关：<span class="bmb-b-s" style="margin-right: 15px"
                >南昌市公安局</span
              >发证日期：<span class="bmb-b-s">{{
                obj0.createTime.slice(0, 10)
              }}</span>
            </div> -->
          </div>
          <span slot="footer" class="dialog-footer no-print PrintBut">
            <el-button type="primary" @click="Print">打 印</el-button>
            <!-- <el-button type="primary" @click="closePrint"> 取 消 </el-button> -->
          </span>
        </div>
      </div>
      </div> -->
      <baoanz :data="obj0" v-if="hold == 1"></baoanz>
      <div v-else style="width: 100%; text-align: center; padding-top: 20px">
        无保安证
      </div>
@@ -122,10 +111,12 @@

// import vueQr from "vue-qr";
import securityCertificate from "./securityCertificate.vue";
import baoanz from "./baoanz.vue";

export default {
  components: {
    securityCertificate: securityCertificate,
    baoanz,
  },
  data() {
    return {
@@ -525,7 +516,7 @@
.baz-m-body {
  width: 750px;
  height: 550px;
  background-image: url("/img/register/bazbj.png");
  background-image: url("/img/register/bazbj1.png");
  background-size: 100% 100%;
  .bmb-heard {
    font-size: 4rem;