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

<!--扫码展示-->
<template>
  <div id="codeHtml"
       v-loading="loading">
    <div class="w-e-text w-e-text-box" 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,
        videoSrc:require('@/assets/ZDimages/video_bg.png')
      };
    },
    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);
        }
      }
      let video = document.getElementsByClassName('video-js')[0];
      video.setAttribute('poster',this.videoSrc);
    },
    methods: {
      //加载接口
      hazard_book_lookUp(id){
        hazard_book_lookUp(id).then( data => {
          this.text = unescape(data.data.content);
          this.loading = false;
        });
      },
      safe_book(id){
        safe_book(id).then( data => {
          this.form.content = window.location.href.split('://')[0]+'://'  + this.judgmentNetworkReturnAddress() + '/' + unescape(data.data.content);
          this.getNumPages();
        });
      },
      hazardLookUp(id){
        hazardLookUp(id).then( data => {
          this.text = unescape(data.data.content);
          // let list = this.text.split('font-size:');
          // let newText = "";
          // for (let i=0;i<list.length;i++){
          //   if(
          //     (list[i][0] == '0' || list[i][0] == '1' || list[i][0] == '2' || list[i][0] == '3' || list[i][0] == '4' || list[i][0] == '5' || list[i][0] == '6' || list[i][0] == '7' || list[i][0] == '8' || list[i][0] == '9')&&
          //     (list[i][1] == 'p')&&
          //     (list[i][2] == 'x')
          //   ){
          //     let num = this.accMul(parseInt(list[i][0]),6);
          //     num = num>140?140:num;
          //     let textNew = list[i].slice(1)
          //     newText = newText + 'font-size:'+num+textNew;
          //   }else if(
          //     (list[i][0] == ' ')&&
          //     (list[i][1] == '0' || list[i][1] == '1' || list[i][1] == '2' || list[i][1] == '3' || list[i][1] == '4' || list[i][1] == '5' || list[i][1] == '6' || list[i][1] == '7' || list[i][1] == '8' || list[i][1] == '9')&&
          //     (list[i][2] == 'p')&&
          //     (list[i][3] == 'x')
          //   ){
          //     let num = this.accMul(parseInt(list[i][1]),6);
          //     num = num>140?140:num;
          //     let textNew = list[i].slice(2)
          //     newText = newText + 'font-size:'+num+textNew;
          //   }else if(
          //     (list[i][0] == '0' || list[i][0] == '1' || list[i][0] == '2' || list[i][0] == '3' || list[i][0] == '4' || list[i][0] == '5' || list[i][0] == '6' || list[i][0] == '7' || list[i][0] == '8' || list[i][0] == '9')&&
          //     (list[i][1] == '0' || list[i][1] == '1' || list[i][1] == '2' || list[i][1] == '3' || list[i][1] == '4' || list[i][1] == '5' || list[i][1] == '6' || list[i][1] == '7' || list[i][1] == '8' || list[i][1] == '9')&&
          //     (list[i][2] == 'p')&&
          //     (list[i][3] == 'x')
          //   ){
          //     let num = this.accMul(parseInt(list[i][0]+list[i][1]),6);
          //     num = num>140?140:num;
          //     let textNew = list[i].slice(2)
          //     newText = newText + 'font-size:'+num+textNew;
          //   }else if(
          //     (list[i][0] == ' ')&&
          //     (list[i][1] == '0' || list[i][1] == '1' || list[i][1] == '2' || list[i][1] == '3' || list[i][1] == '4' || list[i][1] == '5' || list[i][1] == '6' || list[i][1] == '7' || list[i][1] == '8' || list[i][1] == '9')&&
          //     (list[i][2] == '0' || list[i][2] == '1' || list[i][2] == '2' || list[i][2] == '3' || list[i][2] == '4' || list[i][2] == '5' || list[i][2] == '6' || list[i][2] == '7' || list[i][2] == '8' || list[i][2] == '9')&&
          //     (list[i][3] == 'p')&&
          //     (list[i][4] == 'x')
          //   ){
          //     let num = this.accMul(parseInt(list[i][1]+list[i][2]),6);
          //     num = num>140?140:num;
          //     let textNew = list[i].slice(3)
          //     newText = newText + 'font-size:'+num+textNew;
          //   }else if(
          //     (list[i][0] == '0' || list[i][0] == '1' || list[i][0] == '2' || list[i][0] == '3' || list[i][0] == '4' || list[i][0] == '5' || list[i][0] == '6' || list[i][0] == '7' || list[i][0] == '8' || list[i][0] == '9')&&
          //     (list[i][1] == '0' || list[i][1] == '1' || list[i][1] == '2' || list[i][1] == '3' || list[i][1] == '4' || list[i][1] == '5' || list[i][1] == '6' || list[i][1] == '7' || list[i][1] == '8' || list[i][1] == '9')&&
          //     (list[i][2] == '0' || list[i][2] == '1' || list[i][2] == '2' || list[i][2] == '3' || list[i][2] == '4' || list[i][2] == '5' || list[i][2] == '6' || list[i][2] == '7' || list[i][2] == '8' || list[i][2] == '9')&&
          //     (list[i][3] == 'p')&&
          //     (list[i][4] == 'x')
          //   ){
          //     let num = this.accMul(parseInt(list[i][0]+list[i][1]+list[i][2]),6);
          //     num = num>140?140:num;
          //     let textNew = list[i].slice(3)
          //     newText = newText + 'font-size:'+num+textNew;
          //   }else if(
          //     (list[i][0] == ' ')&&
          //     (list[i][1] == '0' || list[i][1] == '1' || list[i][1] == '2' || list[i][1] == '3' || list[i][1] == '4' || list[i][1] == '5' || list[i][1] == '6' || list[i][1] == '7' || list[i][1] == '8' || list[i][1] == '9')&&
          //     (list[i][2] == '0' || list[i][2] == '1' || list[i][2] == '2' || list[i][2] == '3' || list[i][2] == '4' || list[i][2] == '5' || list[i][2] == '6' || list[i][2] == '7' || list[i][2] == '8' || list[i][2] == '9')&&
          //     (list[i][3] == '0' || list[i][3] == '1' || list[i][3] == '2' || list[i][3] == '3' || list[i][3] == '4' || list[i][3] == '5' || list[i][3] == '6' || list[i][3] == '7' || list[i][3] == '8' || list[i][3] == '9')&&
          //     (list[i][4] == 'p')&&
          //     (list[i][5] == 'x')
          //   ){
          //     let num = this.accMul(parseInt(list[i][1]+list[i][2]+list[i][3]),6);
          //     num = num>140?140:num;
          //     let textNew = list[i].slice(4)
          //     newText = newText + 'font-size:'+num+textNew;
          //   }else{
          //     newText = newText + list[i]
          //   }
          // }
          // list = newText.split('line-height:');
          // newText = "";
          // for (let i=0;i<list.length;i++){
          //   if(
          //     (list[i][0] == '0' || list[i][0] == '1' || list[i][0] == '2' || list[i][0] == '3' || list[i][0] == '4' || list[i][0] == '5' || list[i][0] == '6' || list[i][0] == '7' || list[i][0] == '8' || list[i][0] == '9')&&
          //     (list[i][1] == 'p')&&
          //     (list[i][2] == 'x')
          //   ){
          //     let num = this.accMul(parseInt(list[i][0]),6);
          //     num = num>140?140:num;
          //     let textNew = list[i].slice(1)
          //     newText = newText + 'line-height:'+num+textNew;
          //   }else if(
          //     (list[i][0] == ' ')&&
          //     (list[i][1] == '0' || list[i][1] == '1' || list[i][1] == '2' || list[i][1] == '3' || list[i][1] == '4' || list[i][1] == '5' || list[i][1] == '6' || list[i][1] == '7' || list[i][1] == '8' || list[i][1] == '9')&&
          //     (list[i][2] == 'p')&&
          //     (list[i][3] == 'x')
          //   ){
          //     let num = this.accMul(parseInt(list[i][1]),6);
          //     num = num>140?140:num;
          //     let textNew = list[i].slice(2)
          //     newText = newText + 'line-height:'+num+textNew;
          //   }else if(
          //     (list[i][0] == '0' || list[i][0] == '1' || list[i][0] == '2' || list[i][0] == '3' || list[i][0] == '4' || list[i][0] == '5' || list[i][0] == '6' || list[i][0] == '7' || list[i][0] == '8' || list[i][0] == '9')&&
          //     (list[i][1] == '0' || list[i][1] == '1' || list[i][1] == '2' || list[i][1] == '3' || list[i][1] == '4' || list[i][1] == '5' || list[i][1] == '6' || list[i][1] == '7' || list[i][1] == '8' || list[i][1] == '9')&&
          //     (list[i][2] == 'p')&&
          //     (list[i][3] == 'x')
          //   ){
          //     let num = this.accMul(parseInt(list[i][0]+list[i][1]),6);
          //     num = num>140?140:num;
          //     let textNew = list[i].slice(2)
          //     newText = newText + 'line-height:'+num+textNew;
          //   }else if(
          //     (list[i][0] == ' ')&&
          //     (list[i][1] == '0' || list[i][1] == '1' || list[i][1] == '2' || list[i][1] == '3' || list[i][1] == '4' || list[i][1] == '5' || list[i][1] == '6' || list[i][1] == '7' || list[i][1] == '8' || list[i][1] == '9')&&
          //     (list[i][2] == '0' || list[i][2] == '1' || list[i][2] == '2' || list[i][2] == '3' || list[i][2] == '4' || list[i][2] == '5' || list[i][2] == '6' || list[i][2] == '7' || list[i][2] == '8' || list[i][2] == '9')&&
          //     (list[i][3] == 'p')&&
          //     (list[i][4] == 'x')
          //   ){
          //     let num = this.accMul(parseInt(list[i][1]+list[i][2]),6);
          //     num = num>140?140:num;
          //     let textNew = list[i].slice(3)
          //     newText = newText + 'line-height:'+num+textNew;
          //   }else if(
          //     (list[i][0] == '0' || list[i][0] == '1' || list[i][0] == '2' || list[i][0] == '3' || list[i][0] == '4' || list[i][0] == '5' || list[i][0] == '6' || list[i][0] == '7' || list[i][0] == '8' || list[i][0] == '9')&&
          //     (list[i][1] == '0' || list[i][1] == '1' || list[i][1] == '2' || list[i][1] == '3' || list[i][1] == '4' || list[i][1] == '5' || list[i][1] == '6' || list[i][1] == '7' || list[i][1] == '8' || list[i][1] == '9')&&
          //     (list[i][2] == '0' || list[i][2] == '1' || list[i][2] == '2' || list[i][2] == '3' || list[i][2] == '4' || list[i][2] == '5' || list[i][2] == '6' || list[i][2] == '7' || list[i][2] == '8' || list[i][2] == '9')&&
          //     (list[i][3] == 'p')&&
          //     (list[i][4] == 'x')
          //   ){
          //     let num = this.accMul(parseInt(list[i][0]+list[i][1]+list[i][2]),6);
          //     num = num>140?140:num;
          //     let textNew = list[i].slice(3)
          //     newText = newText + 'line-height:'+num+textNew;
          //   }else if(
          //     (list[i][0] == ' ')&&
          //     (list[i][1] == '0' || list[i][1] == '1' || list[i][1] == '2' || list[i][1] == '3' || list[i][1] == '4' || list[i][1] == '5' || list[i][1] == '6' || list[i][1] == '7' || list[i][1] == '8' || list[i][1] == '9')&&
          //     (list[i][2] == '0' || list[i][2] == '1' || list[i][2] == '2' || list[i][2] == '3' || list[i][2] == '4' || list[i][2] == '5' || list[i][2] == '6' || list[i][2] == '7' || list[i][2] == '8' || list[i][2] == '9')&&
          //     (list[i][3] == '0' || list[i][3] == '1' || list[i][3] == '2' || list[i][3] == '3' || list[i][3] == '4' || list[i][3] == '5' || list[i][3] == '6' || list[i][3] == '7' || list[i][3] == '8' || list[i][3] == '9')&&
          //     (list[i][4] == 'p')&&
          //     (list[i][5] == 'x')
          //   ){
          //     let num = this.accMul(parseInt(list[i][1]+list[i][2]+list[i][3]),6);
          //     num = num>140?140:num;
          //     let textNew = list[i].slice(4)
          //     newText = newText + 'line-height:'+num+textNew;
          //   }else{
          //     newText = newText + list[i]
          //   }
          // }
          // this.$set(this,'text',newText);
          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 // 加载的时候先加载第一页
      },
      accMul(arg1,arg2){
        var m=0,s1=arg1.toString(),s2=arg2.toString();
        try{m+=s1.split(".")[1].length}catch(e){}
        try{m+=s2.split(".")[1].length}catch(e){}
        return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)
      },
    }
  };
</script>
<style lang="scss">
  #codeHtml{
    video{
      width:100%!important;
      /*object-fit: fill;*/
      height:100%!important;
      /*display: block;*/
      border: 12px solid #e0e0e0;
    }
    img{
      width:100%!important;
      height:100%!important;
      /*width:1500px;*/
      /*margin:20px 200px;*/
    }
  }
</style>
<style scoped lang="scss">
  #codeHtml {
    height:100%;
    overflow:hidden;
    display: flex;
    flex-direction: column;
    font-size:16px;
    *{
      margin:0;
      padding:0;
    }
    .pdf-max-box{
      flex:1;
      overflow-y: scroll;
    }
    .top-button-box{
      width:100%;
      display: flex;
      .null-p{
        flex:1;
      }
    }
    .w-e-text{
      flex:1;
      overflow-x: hidden;
      overflow-y: scroll;
      padding:8px;
      font-size:16px;
    }
    .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>