FE-V2-PC/src/views/codeHtml.vue

<!--扫码展示-->
<template>
  <div id="codeHtml"
       v-loading="loading">
    <div class="w-e-text" v-html="text" v-if="type==1"></div>
    <div v-if="type==2" class="pdf-max-box">
      <!--<pdf-->
        <!--ref="pdf"-->
        <!--:src="src"-->
        <!--v-for="i in numPages"-->
        <!--:key="i"-->
        <!--:page="i"-->
      <!--&gt;-->
      <!--</pdf>-->
      <pdf
        ref="pdf"
        :src="form.content"
        v-for="i in numPages"
        :key="i"
        :page="i"
      >
      </pdf>
    </div>
    <div class="w-e-text" v-html="text" v-if="type==3"></div>
  </div>
</template>

<script>
  import { hazard_book_lookUp,safe_book,hazardLookUp } from "@/api/codeHtml/index";
  import pdf from 'vue-pdf'
  export default {
    components:{
      pdf
    },
    name: "codeHtml",
    data() {
      return {
        //状态数据相关
        code:"",
        type:"",
        //富文本相关
        text:"",
        //pdf相关
        numPages: null, // pdf 总页数
        form:{},
        src: '', // pdf文件地址
        // 加载样式
        loading:false,
      };
    },
    created() {

    },
    mounted(){
      this.code = this.$route.query.code;
      this.type = this.$route.query.type;
      if(this.$route.query.code&&this.$route.query.type){
        this.loading = true;
        if(this.$route.query.type==1){
          //查询危险化学品详情
          this.hazard_book_lookUp(this.$route.query.code);
        }else if(this.$route.query.type==2){
          //查询安全管理制度
          this.safe_book(this.$route.query.code);
        }else if(this.$route.query.type==3){
          //查询危险源
          this.hazardLookUp(this.$route.query.code);
        }
      }
    },
    methods: {
      //加载接口
      hazard_book_lookUp(id){
        hazard_book_lookUp(id).then( data => {
          console.log('1',unescape(data.data.content))
          this.text = unescape(data.data.content);
          console.log('2',this.form.content)
          this.loading = false;
        });
      },
      safe_book(id){
        safe_book(id).then( data => {
          console.log('1',unescape(data.data.content))
          this.form.content = window.location.href.split('://')[0]+'://'  + process.env.VUE_APP_BASE_API + '/' + unescape(data.data.content);
          console.log('2',this.form.content)
          this.getNumPages();
        });
      },
      hazardLookUp(id){
        hazardLookUp(id).then( data => {
          console.log('1',unescape(data.data.content))
          this.text = unescape(data.data.content);
          console.log('2',this.form.content)
          this.loading = false;
        });
      },
      getNumPages() {
        let loadingTask = pdf.createLoadingTask(this.form.content)
        loadingTask.promise.then(pdf => {
          this.numPages = pdf.numPages;
          this.loading = false;
        }).catch(err => {
          console.error('pdf 加载失败', err);
        })
      },
      //pdf方法
      changePdfPage (val) {
        // console.log(val)
        if (val === 0 && this.currentPage > 1) {
          this.currentPage--
          // console.log(this.currentPage)
        }
        if (val === 1 && this.currentPage < this.pageCount) {
          this.currentPage++
          // console.log(this.currentPage)
        }
      },
      // pdf加载时
      loadPdfHandler (e) {
        this.currentPage = 1 // 加载的时候先加载第一页
      }
    }
  };
</script>

<style scoped lang="scss">
  #codeHtml {
    height:100%;
    overflow:hidden;
    display: flex;
    flex-direction: column;
    .pdf-max-box{
      flex:1;
      overflow-y: scroll;
    }
    .top-button-box{
      width:100%;
      display: flex;
      .null-p{
        flex:1;
      }
    }
    .w-e-text{
      flex:1;
    }
    .w-e-text.table::-webkit-scrollbar{
      width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
      height: 4px;
    }
    .w-e-text.table::-webkit-scrollbar-thumb{
      border-radius: 5px;
      -webkit-box-shadow: inset 0 0 5px #999;
      background: #fff;
    }
    .w-e-text.table::-webkit-scrollbar-track{
      -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0);
      border-radius: 0;
      background: rgba(255,255,255,0);
    }
  }
</style>