minio 地址修改

Administrator

2022-04-11 79d9fc857559982b00b68b2d709807bdc4cd286f

 src/views/securityGuard/securityCertificate.vue

@@ -1,271 +1,327 @@
<template>
  <div class="securityCertificate" id="securityCertificate">
    <div class="security_main" ref="securityCertificate">
      <!-- 标题 -->
      <div class="security_main_backImge no-print"></div>
      <div class="security_main-title no-print">
        &nbsp;&nbsp;&nbsp;
        <span style="letter-spacing: 0px">____________</span>
        经国家<br />保安员考试审查合格。<br />特颁此证。
      </div>
      <div class="security_m_l_center no-print">
        发证公安机关&nbsp;（印章）<br />
        发证日期
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月
      </div>
      <div class="security_m_l_down no-print">证件编号</div>
      <div class="security_m_r_a no-print">姓名</div>
      <div class="security_m_r_b no-print">出生年月</div>
      <div class="security_m_r_c no-print">地址</div>
      <div class="security_m_r_d no-print">公民身份<br />号码</div>
      <!-- 内容 -->
      <div class="security_m_r_imgs no-print">
        <div v-if="!data.avatar">暂无照片</div>
        <img :src="data.avatar" alt="" v-else />
      </div>
      <div class="security_m_l_titleName">{{ data.realName }}</div>
      <div class="security_m_l_titlepaperTimenian">
        {{ data.paperTime.slice(0, 4) }}
      </div>
      <div class="security_m_l_titlepaperTimeyue">
        {{ data.paperTime.slice(5, 7) }}
      </div>
      <div class="security_m_l_titlepaperTimeri">
    <div class="securityCertificate"
         id="securityCertificate">
        <div class="security_main"
             ref="securityCertificate">
            <!-- 标题 -->
            <div class="security_main_backImge no-print"></div>
            <div class="security_main-title no-print">
                &nbsp;&nbsp;&nbsp;
                <span style="letter-spacing: 0px">____________</span>
                经国家<br />保安员考试审查合格。<br />特颁此证。
            </div>
            <div class="security_m_l_center no-print">
                发证公安机关&nbsp;（印章）<br />
                发证日期
                &nbsp;&nbsp;年&nbsp;&nbsp;月
            </div>
            <div class="security_m_l_down no-print">证件编号</div>
            <div class="security_m_r_a no-print">姓名</div>
            <div class="security_m_r_b no-print">出生年月</div>
            <div class="security_m_r_c no-print">地址</div>
            <div class="security_m_r_d no-print">公民身份<br />号码</div>
            <!-- 内容 -->
            <div class="security_m_r_imgs no-print">
                <div v-if="!data.avatar">暂无照片</div>
                <img :src="data.avatar"
                     alt=""
                     v-else />
            </div>
            <div class="security_m_l_titleName widt">{{ data.realName }}</div>
            <div class="security_m_l_titlepaperTimenian widt">
                {{ year }}
            </div>
            <div class="security_m_l_titlepaperTimeyue widt">
                {{ month }}
            </div>
            <!-- <div class="security_m_l_titlepaperTimeri">
        {{ data.paperTime.slice(8, 10) }}
      </div>
      <div class="security_m_l_downsecuritynumber">
        {{ data.securitynumber }}
      </div>
      <div class="security_m_r_o_right">{{ data.realName }}</div>
      <div class="security_m_r_o_rightbirthday">{{ data.birthday }}</div>
      <div class="security_m_r_o_rightaddress security_m_r_o_l_r">
        {{ data.address }}
      </div>
      <div class="security_m_r_o_rightcardid">{{ data.cardid }}</div>
      </div> -->
            <div class="security_m_l_downsecuritynumber widt">
                {{ data.securitynumber }}
            </div>
            <div class="security_m_r_o_right widt">{{ data.realName }}</div>
            <div class="security_m_r_o_rightbirthday widt">
                {{ data.cardid.slice(6, 10) }}.{{ data.cardid.slice(10, 12) }}.{{ data.cardid.slice(12, 14) }}
            </div>
            <div class="security_m_r_o_rightaddress security_m_r_o_l_r widt">
                {{ data.registered }}
            </div>
            <div class="security_m_r_o_rightcardid">{{ data.cardid }}</div>
        </div>
        <!-- <span slot="footer"
              class="dialog-footer no-print PrintBut"
              v-if='permission.securityGuard_securityCertificate'>
            <el-button type="primary"
                       @click="Print">打 印</el-button>
        </span> -->
    </div>
    <span slot="footer" class="dialog-footer no-print PrintBut">
      <el-button type="primary" @click="Print">打 印</el-button>
    </span>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import dictVertical from "../util/demo/dict-vertical.vue";
import {
  updatePaperTime
} from "@/api/system/user";
export default {
  components: { dictVertical },
  props: ["data"],
  methods: {
    Print() {
      var printDom = document.getElementById("securityCertificate");
      printDom.style.position = "fixed";
      printDom.style.left = "-10%";
      printDom.style.width = "120%";
      printDom.style.height = "100%";
      this.$Print(this.$refs.securityCertificate);
      printDom.style.position = "relative";
      printDom.style.left = "0";
      printDom.style.width = "100%";
      printDom.style.height = "calc(100% - 100px)";
    data () {
        return {
            year: null,
            month: null
        }
    },
  },
    components: { dictVertical },
    props: ["data"],
    created () {
        var time = this.getNewTime()
        this.year = time[0]
        this.month = time[1]
    },
    computed: {
        ...mapGetters(["userInfo", "permission"]),
    },
    methods: {
        Print () {
            if (this.data.registered == '' || this.data.registered == null) {
                this.$message({ message: '请完善住址信息', type: 'warning' })
                return
            }
            //更新发证时间
            this.updateUserInfo();
            var printDom = document.getElementById("securityCertificates");

            console.log(printDom)


            printDom.style.position = "fixed";
            printDom.style.top = "-28.5%";
            printDom.style.left = "-23%";
            printDom.style.width = "120%";
            printDom.style.height = "100%";
            printDom.style.fontFamily = "SimSun";
            this.$Print(this.$refs.securityCertificate);
            printDom.style.position = "relative";
            printDom.style.left = "0";
            printDom.style.width = "100%";
            printDom.style.height = "auto";
        },
        getNewTime () {
            var nowTime = new Date()

            var oneHoursAgo = new Date(new Date(nowTime).getTime() - 1 * 60 * 60 * 1000)
            var oneHoursAgoY = oneHoursAgo.getFullYear()
            var oneHoursAgoM = oneHoursAgo.getMonth() + 1 < 10 ? '0' + (oneHoursAgo.getMonth() + 1) : oneHoursAgo.getMonth() + 1

            /**
             * @return 返回1小时，2小时，3小时，4小时，24小时
             */
            return [oneHoursAgoY, oneHoursAgoM]
        },
        //更新用户发证时间
        updateUserInfo () {
            var nowTime = new Date()
            var oneHoursAgo = new Date(new Date(nowTime).getTime() - 1 * 60 * 60 * 1000)
            var oneHoursAgoY = oneHoursAgo.getFullYear()
            var oneHoursAgoM = oneHoursAgo.getMonth() + 1 < 10 ? '0' + (oneHoursAgo.getMonth() + 1) : oneHoursAgo.getMonth() + 1
            var day = oneHoursAgo.getDay();
            var date = oneHoursAgoY + "-" + oneHoursAgoM + "-" + day;
            const data = {
                id:this.data.id,
                rtime:this.data.rtime,
                userType:6,
                paperTime:date
            }
            updatePaperTime(data);
        }
    },
};
</script>

<style lang="scss" scoped>
//保安证  本子
.securityCertificate {
  width: 100%;
  height: 90%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
    width: 100%;
    height: 90%;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font: bold 18px 'SimSun' !important;
}
.security_main {
  width: 630px;
  height: 512px;
  //   border: 1px solid rgba($color: #a5a5a5, $alpha: 0.5);
  // display: flex;
  // align-items: center;
  // justify-content: space-around;
  // background-image: url(/img/securityCertificate/bazsss.png);
  // background-size: 100% 100%;
  // background-repeat: no-repeat;
  position: relative;
    width: 660px;
    height: 512px;
    //   border: 1px solid rgba($color: #a5a5a5, $alpha: 0.5);
    // display: flex;
    // align-items: center;
    // justify-content: space-around;
    // background-image: url(/img/securityCertificate/bazsss.png);
    // background-size: 100% 100%;
    // background-repeat: no-repeat;
    position: relative;
}
// 标题
$upTop: 55px;
$downTop: 280px;
$upTop: 45px;
$downTop: 265px; //整体高度
//经国家保安员考试审查合格。<br />特颁此证。
.security_main-title {
  position: absolute;
  top: $upTop;
  left: 39px;
  line-height: 45px;
  font-size: 22px;
  font-weight: 300;
  letter-spacing: 3px;
    position: absolute;
    top: $upTop;
    left: 34px;
    line-height: 45px;
    letter-spacing: 3px;
}
//发证公安机关&nbsp;（印章）
.security_m_l_center {
  position: absolute;
  top: $downTop;
  left: 32px;
  font-size: 16px;
  line-height: 40px;
    position: absolute;
    top: 267px;
    left: 30px;
    line-height: 40px;
}
//证件编号 &nbsp;
.security_m_l_down {
  position: absolute;
  top: 421px;
  left: 32px;
  font-size: 24px;
    position: absolute;
    top: 370px;
    left: 32px;
}

$rightLeft: 343px;
$rightLeft: 354px;
$rightFontSize: 18px;
$rightWidth: 77px;

$lineHigeht: 30px;
//姓名
.security_m_r_a {
  position: absolute;
  top: $downTop;
  left: $rightLeft;
  font-size: $rightFontSize;
  width: $rightWidth;
  text-align: justify;
  text-align-last: justify;
    position: absolute;
    top: $downTop;
    left: $rightLeft;
    width: $rightWidth;
    text-align: justify;
    text-align-last: justify;
}
//出生年月
.security_m_r_b {
  position: absolute;
  top: $downTop + $lineHigeht * 1;
  left: $rightLeft;
  font-size: $rightFontSize;
  width: $rightWidth;
  text-align: justify;
  text-align-last: justify;
    position: absolute;
    top: $downTop + $lineHigeht * 1;
    left: $rightLeft;
    width: $rightWidth;
    text-align: justify;
    text-align-last: justify;
}
//地址
.security_m_r_c {
  position: absolute;
  top: $downTop + $lineHigeht * 2;
  left: $rightLeft;
  font-size: $rightFontSize;
  width: $rightWidth;
  text-align: justify;
  text-align-last: justify;
    position: absolute;
    top: $downTop + $lineHigeht * 2;
    left: $rightLeft;
    width: $rightWidth;
    text-align: justify;
    text-align-last: justify;
}
//公民身份证
.security_m_r_d {
  position: absolute;
  top: $downTop + $lineHigeht * 4;
  left: $rightLeft;
  font-size: $rightFontSize;
  width: $rightWidth;
  text-align: justify;
  text-align-last: justify;
    position: absolute;
    top: 382px;
    left: $rightLeft;
    width: $rightWidth;
    text-align: justify;
    text-align-last: justify;
}
//照片
// width: calc(358px / 22px);
// height: calc(441px / 22px);
.security_m_r_imgs {
  width: calc(358px / 3);
  height: calc(441px / 3);
  position: absolute;
  top: $upTop;
  left: 421px;
  img {
    width: 100%;
    height: 100%;
  }
    width: calc(358px / 3);
    height: calc(441px / 3);
    position: absolute;
    top: $upTop;
    left: 421px;
    img {
        width: 100%;
        height: 100%;
    }
}

// 内容
// 抬头名字
.security_m_l_titleName {
  position: absolute;
  top: 46px;
  left: 85px;
  line-height: 45px;
  font-size: 22px;
  font-weight: 300;
  letter-spacing: 3px;
    position: absolute;
    top: 45px;
    left: 121px;
    line-height: 45px;
    letter-spacing: 3px;
}
//发证时间
$timeTop: 320px;
$timeTop: 306px; //整体高度
//年
.security_m_l_titlepaperTimenian {
  position: absolute;
  top: $timeTop;
  left: 104px;
  font-size: 18px;
  line-height: 40px;
    position: absolute;
    top: $timeTop;
    left: 107px;
    line-height: 40px;
}
//月
.security_m_l_titlepaperTimeyue {
  position: absolute;
  top: $timeTop;
  left: 164px;
  font-size: 18px;
  line-height: 40px;
    position: absolute;
    top: $timeTop;
    left: 172px;
    line-height: 40px;
}
//日
.security_m_l_titlepaperTimeri {
  position: absolute;
  top: $timeTop;
  left: 209px;
  font-size: 18px;
  line-height: 40px;
    position: absolute;
    top: $timeTop;
    left: 159px;
    line-height: 40px;
}
//证件编号
.security_m_l_downsecuritynumber {
  position: absolute;
  top: 419px;
  left: 146px;
  font-size: 24px;
    position: absolute;
    top: 370px; //整体高度
    left: 145px;
}

//内容
// 姓名
$centerLeft: 430px;
$centerLeft: 448px;
.security_m_r_o_right {
  position: absolute;
  top: $downTop;
  left: $centerLeft;
  font-size: $rightFontSize;
  // width: $rightWidth;
    position: absolute;
    top: $downTop + $lineHigeht * 0-2px;
    left: $centerLeft;
    // width: $rightWidth;
}
// 生日
.security_m_r_o_rightbirthday {
  position: absolute;
  top: $downTop + $lineHigeht * 1;
  left: $centerLeft;
  font-size: $rightFontSize;
  // width: $rightWidth;
    position: absolute;
    top: $downTop + $lineHigeht * 1-4px;
    left: $centerLeft;
    // width: $rightWidth;
}
// 地址
.security_m_r_o_rightaddress {
  position: absolute;
  top: $downTop + $lineHigeht * 2;
  left: $centerLeft;
  font-size: $rightFontSize;
  width: 160px;
    position: absolute;
    top: $downTop + $lineHigeht * 2 -6px;
    left: $centerLeft;
    width: 160px;
    font: bold 16px 'SimSun' !important;
}
// 身份证
.security_m_r_o_rightcardid {
  position: absolute;
  top: $downTop + $lineHigeht * 4 +10px;
  left: $centerLeft;
  font-size: $rightFontSize;
  // width: $rightWidth;
    position: absolute;
    top: $downTop + $lineHigeht * 4+6px;
    left: $centerLeft;
    // width: $rightWidth;
}
//背景图
.security_main_backImge {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url(/img/securityCertificate/bazsss.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(/img/securityCertificate/bazsss.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
</style>
// .widt{
// }
</style>