baise-pc-vue/src/views/authentic/Pdf.vue

<template>
  <el-dialog
      class="my-dialog"
      fullscreen
      append-to-body
      :model-value="showDialog"
      @close="closeDialog()"
  >
    <div  class="pdf-main">
      <div class="title" >
        <div class="name" ></div>
        <div class="pdf-close cursor-pointer" @click="closeDialog"></div>
      </div>
      <div id="printTest" class="pdf-dialog-box">
        <div class="pdf-my-body"  >
        <div class="pdfBox" >
          <div class="a4" >
            <div class="a4_title">确权单</div>
            <table class="a4_table" border=1 style="border-collapse: collapse;">
              <tr>
                <td class="name">农场地址</td>
                <td class="text">{{rowData.address}}</td>
                <td class="name">农场名称</td>
                <td class="text">{{rowData.farmName}}</td>
              </tr>
              <tr>
                <td class="name">创建时间</td>
                <td class="text">{{rowData.createDate}}</td>
                <td class="name">农场面积</td>
                <td class="text">{{rowData.area}}亩</td>
              </tr>
              <tr>
                <td class="name">作物物种</td>
                <td class="text">{{rowData.speciesTypeName}}</td>
                <td class="name">客户姓名</td>
                <td class="text">{{rowData.masterName}}</td>
              </tr>
              <tr>
                <td class="name">联系电话</td>
                <td class="text">{{rowData.masterTel}}</td>
              </tr>
              <tr>
                <td class="name">经纬度</td>
                <td colspan="3" class="text2">{{rowData.points}}</td>
              </tr>
            </table>
            <div class="a4_sub_title">地块四至图</div>
            <img :key="imgUrl" v-show="imgUrl" class="img-content img" style="z-index: 999" width="595" height="500" :src="imgUrl" />
            <div :key="imgUrl" v-show="!imgUrl" class="img-content" ref="mapRef" id="mapRefId"></div>
            <div class="signature">签名:______________</div>
          </div>
        </div>
      </div>
      </div>
      <div style="text-align: left">
        <el-button size="large" color="#626aef"  v-print="printObj">打印</el-button>
        <!--          <el-button size="large" color="#626aef"  @click="closeDialog">关闭</el-button>-->
      </div>

    </div>
  </el-dialog>
</template>

<script setup>
import {reactive, ref, toRefs, computed, nextTick, onMounted} from "vue";
import {useStore} from "vuex";
import {WKT} from "ol/format";
import PdfMap from "./pdfMap";
import { dateFormat } from "@/utils/date_util";
import {getAreaByWkt} from "../../utils/map";
const emit = defineEmits(["closeDialog","success"])
const state = useStore().state;
const sendConfirmShow = ref(false)
const mapRef = ref(null)
let pdfMap = new PdfMap()
let rowData = ref({})

async function send(){
  closeDialog();
}

const props = defineProps({
  title:{
    type:String,
    required:true
  },
  showDialog: {
    type: Boolean,
    default: true,
  },
  rowId:{
    type: Number,
    required:true,
  }
});

let printObj = {
  id:"printTest",
  popTitle: 'good print',
  beforeOpenCallback (vue) {
    toImg(true)
    console.log('打开之前')
  },
  openCallback (vue) {
    let {masterName, farmName, masterTel} = rowData.value
    document.title =`${farmName}-${masterTel}-${masterName}`
    console.log('执行了打印')
  },
  closeCallback (vue) {
    document.title =`飞鸟确权平台`
    console.log('关闭了打印工具')
  }
}

let imgUrl = ref(null)
const executor = ref([])
const executorList = ref([])

const formRef = ref(null);
const {title, rowId} = toRefs(props);
const closeDialog = (key) => {
  switch (key){
    case "sendConfirm":
      sendConfirmShow.value = false;
      return
  }
  emit("closeDialog", "pdf");
};
function toImg(show) {
  let canvas = pdfMap.kmap.map.getViewport().querySelector('canvas')
  let dataURL = canvas.toDataURL('image/webp');
  // if(show){
    imgUrl.value = dataURL;
  // }
}


onMounted(()=>{
  VE_API.authentic.getDetails({id:rowId.value}).then(({data})=>{
    data.createDate = dateFormat(new Date(), "YYYY-mm-dd HH:MM:SS");
    data.area = getAreaByWkt(data.geom)
    rowData.value = data
    pdfMap.initMap(data,mapRef.value)
    setTimeout(function(){
      toImg(false)
    },1500)
  })
})
</script>

<style lang="scss" scoped>
$title-height:0px;
$body-height:calc(100% - $title-height);

.pdf-main{
  left: 25%;
  right: 25%;
  top:10%;
  bottom:10%;
  background: rgba(1,17,22,0.8);
  box-shadow: 0px 0px 20px 0px #00FFF0;
  border-radius: 4px;
  border: 2px solid rgba(81,233,240,0.6);
  position: absolute;
  .title{
    width: 100%;
    height: $title-height;
    box-sizing: border-box;
    background: rgba(0,77,101,0.8);
    border-radius: 4px 4px 0px 0px;
    border-bottom: 2px solid rgba(81,233,240,0.3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    .name{
      margin-left: 20px;
      font-size: 16px;
      font-weight: 600;
      color: #00FFF0;
      height: 22px;
    }
    .pdf-close{
      width: 16px;
      height: 16px;
      background-image: url("@/assets/img/close.png");
      background-size: 100% 100%;
    }
  }
}
.pdf-dialog-box{
  font-family: PingFangSC-Regular, PingFang SC;
  width: 100%;
  height: 100%;
  .pdf-my-body{
    width: 100%;
    height: $body-height;
    box-sizing: border-box;
    padding: 20px;
    ::-webkit-scrollbar-thumb {
      /* 滚动条里面小方块 */
      background: rgb(70, 71, 71);;
      border-radius: 6px;
    }
    ::-webkit-scrollbar-track {
      /* 滚动条里面轨道 */
      background: #ededed;
    }
  }

  .pdfBox{
    height: calc(100%);
    width: 100%;
    overflow-y: scroll;
    background-color: rgba(141, 142, 142);
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
  }

  .a4{
    font-family: PingFangSC-Medium, PingFang SC;
    background-color: #FFFFFF;
    width:595px;
    height:1000px;
    margin: 5px 0px 5px 0px;
    padding: 19px 63px 19px 63px;
    font-weight: 600;
    color: #000000;
    .a4_title{
      width:595px;
      height: 33px;
      font-size: 24px;
      text-align: center;
      margin: 10px 0px 10px 0px;
    }
    .a4_sub_title{
      font-size: 16px;
      margin: 10px 0px 10px 0px;
    }
    .a4_table{
      height: calc(842px - 33px - 26px - 600px);
      max-height: calc(842px - 33px - 26px - 600px);
      width:595px;
      font-size: 12px;
      .name{
        width: 50px;
        height: 20px;
        line-height: 20px;
        padding-right: 9px;
        box-sizing: border-box;
        text-align: right;
      }
      .text{
        width: 122px;
        height: 20px;
        line-height: 20px;
        text-align: left;
        padding-left: 9px;
        box-sizing: border-box;
      }
      .text2{
        text-align: left;
        font-size: 10px;
        font-weight: normal;
      }
    }
    .img-content{
      width:595px;
      height: 500px;
      z-index: 1000;
      .ol-viewport{
        width:595px !important;
        height: 500px !important;
        .ol-layers{
          width:595px !important;
          height: 500px !important;
          .ol-layer{
            width:595px !important;
            height: 500px !important;
          }
        }
      }
    }
    .img{
      z-index: 999;
    }
    .signature{
      width:595px;
      height: 20px;
      z-index: 1000;
      margin-top: 40px;
      text-align: right;
    }
  }


}
canvas{
  width:595px;
  height: 500px;
}

</style>