eta_report_front/src/views/report/reportExternalDetail.vue

<!-- 原项目丢了 省事直接cv一下老项目代码 -->
<template>
  <div class="wrapper" ref="wrapper">
    <div id="reportdtl" v-if="isshow">
      <header>
        <p>{{reportInfo.OutsideReportBO.Title}}</p>
        
      </header>
      <div
        style="
          padding: 0rem 0.8rem;
          box-sizing: border-box;
          color: #666;
          font-size: 0.66rem;
          overflow: hidden;
        "
      >
        <span><!-- {{ reportInfo.OutsideReportBO.SysUserName }} --></span>
        <span style="float: right">{{ reportInfo.OutsideReportBO.CreateTime }}</span>
      </div>

      <div style="padding: 0.6rem; box-sizing: border-box; overflow: hidden">

        <div class="abstract_cont" v-if="reportInfo.OutsideReportBO.Abstract">摘要：{{reportInfo.OutsideReportBO.Abstract}}</div>
        <div id="resetcss" style="overflow:hidden;" v-html="reportInfo.OutsideReportBO.Content" v-if="reportInfo.OutsideReportBO.Content"></div>

        <div id="tipsAlert">
          <div
            style="
              width: 100%;
              max-width:1200px;
              margin:0 auto;
              padding: 0.8rem 0.66rem 2.2rem;
              box-sizing: border-box;
              font: 0.52rem/0.8rem 'PingFang-SC-Regular';
              color: #666;
              background: #fff;
              overflow: scroll;
              position: relative;
              border-radius: 0.2rem;
            "
          >

            <h1
              style="
                font: 0.64rem 'PingFang-SC-Regular';
                color: #333;
                text-align: center;
                margin-bottom: 0.34rem;
              "
            >
              免责声明
            </h1>
            <div class="disclaimer" v-html="configInfo.Disclaimer"></div>
            <p
              @click="hideTips"
              style="
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                font-size: 0.56rem;
                line-height: 1.6rem;
                color: #2680eb;
                text-align: center;
                border-top: 1px solid #eaeaea;
              "
            >
              知道了
            </p>
          </div>
        </div>
        
        
      </div>
    </div>

    <div style="width:30px; position:fixed; right:0.6rem; bottom:2.4rem; z-index:10000;">
      <img src="~@/assets/img/returntop.png" @click="goTop" style="width:30px; margin-bottom:0.2rem;" />
    </div>

    <FloatingPanel 
      :content-draggable="false" 
      v-if="attachmentsList.length"
      v-model:height="panelHeight" 
      :anchors="configAnchors"
    >
        <div class="attachments-cont">
        <h3>
          <svg t="1725848947745" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5160" width="18" height="18"><path d="M607.934444 417.856853c-6.179746-6.1777-12.766768-11.746532-19.554358-16.910135l-0.01228 0.011256c-6.986111-6.719028-16.47216-10.857279-26.930349-10.857279-21.464871 0-38.864146 17.400299-38.864146 38.864146 0 9.497305 3.411703 18.196431 9.071609 24.947182l-0.001023 0c0.001023 0.001023 0.00307 0.00307 0.005117 0.004093 2.718925 3.242857 5.953595 6.03853 9.585309 8.251941 3.664459 3.021823 7.261381 5.997598 10.624988 9.361205l3.203972 3.204995c40.279379 40.229237 28.254507 109.539812-12.024871 149.820214L371.157763 796.383956c-40.278355 40.229237-105.761766 40.229237-146.042167 0l-3.229554-3.231601c-40.281425-40.278355-40.281425-105.809861 0-145.991002l75.93546-75.909877c9.742898-7.733125 15.997346-19.668968 15.997346-33.072233 0-23.312962-18.898419-42.211381-42.211381-42.211381-8.797363 0-16.963347 2.693342-23.725354 7.297197-0.021489-0.045025-0.044002-0.088004-0.066515-0.134053l-0.809435 0.757247c-2.989077 2.148943-5.691629 4.669346-8.025791 7.510044l-78.913281 73.841775c-74.178443 74.229608-74.178443 195.632609 0 269.758863l3.203972 3.202948c74.178443 74.127278 195.529255 74.127278 269.707698 0l171.829484-171.880649c74.076112-74.17435 80.357166-191.184297 6.282077-265.311575L607.934444 417.856853z" fill="#666666" p-id="5161"></path><path d="M855.61957 165.804257l-3.203972-3.203972c-74.17742-74.178443-195.528232-74.178443-269.706675 0L410.87944 334.479911c-74.178443 74.178443-78.263481 181.296089-4.085038 255.522628l3.152806 3.104711c3.368724 3.367701 6.865361 6.54302 10.434653 9.588379 2.583848 2.885723 5.618974 5.355985 8.992815 7.309476 0.025583 0.020466 0.052189 0.041956 0.077771 0.062422l0.011256-0.010233c5.377474 3.092431 11.608386 4.870938 18.257829 4.870938 20.263509 0 36.68962-16.428158 36.68962-36.68962 0-5.719258-1.309832-11.132548-3.645017-15.95846l0 0c-4.850471-10.891048-13.930267-17.521049-20.210297-23.802102l-3.15383-3.102664c-40.278355-40.278355-24.982998-98.79612 15.295358-139.074476l171.930791-171.830507c40.179095-40.280402 105.685018-40.280402 145.965419 0l3.206018 3.152806c40.279379 40.281425 40.279379 105.838513 0 146.06775l-75.686796 75.737962c-10.296507 7.628748-16.97358 19.865443-16.97358 33.662681 0 23.12365 18.745946 41.87062 41.87062 41.87062 8.048303 0 15.563464-2.275833 21.944801-6.211469 0.048095 0.081864 0.093121 0.157589 0.141216 0.240477l1.173732-1.083681c3.616364-2.421142 6.828522-5.393847 9.529027-8.792247l79.766718-73.603345C929.798013 361.334535 929.798013 239.981676 855.61957 165.804257z" fill="#666666" p-id="5162"></path></svg>

          附件{{attachmentsList.length}}个（{{formatSize(totalSize)}}）
        </h3>

        <ul class="list-cont">
          <li class="item" v-for="(item,index) in attachmentsList" :key="index" @click="handlePreviewAttachment(item)">
            <img :src="getFileIcon(item.Title)" alt="" class="file-icon">
            <div class="right-info">
              <p class="file-title van-ellipsis">{{item.Title}}</p>
              <span style="color:#999">{{formatSize(item.FileSize)}}</span>
            </div>
          </li>
        </ul>
      </div>
    </FloatingPanel>
  </div>
</template>

<script>
import {
  getExternalReport
} from "@/api/api.js";
import _ from 'lodash';
import {wxShare} from '../utils/wxShare.js';
import { FloatingPanel } from "vant"
import { Watermark,BlindWatermark } from 'watermark-js-plus'
import { Base64 } from 'js-base64';
import PdfIcon from '@/assets/img/file/pdf_icon.png'
import ExcelIcon from '@/assets/img/file/excel_icon.png'
import ImgIcon from '@/assets/img/file/img_icon.png'
import WordIcon from '@/assets/img/file/word_icon.png'
export default {
  components: { FloatingPanel },
  computed: {
    totalSize() {
        let size = 0;
        if(this.attachmentsList.length) {
          this.attachmentsList.forEach(item => {
          size +=item.FileSize
          })
        }
        return size
    },
  },
  data() {
    return {
      id: this.$route.query.code || '',
      isshow: false,
      reportInfo: {},
      reportlist: [],

      totalContent: [],
      realContent: [],
      page_no: 0,
      pageSize: 50, //默认初始加载50个p标签
      total_page: 0,

      configInfo: {},

      attachmentsList: [],

      configAnchors: [
        140,
        Math.round(0.7 * window.innerHeight),
      ],
      panelHeight: 140
    };
  },
  created() {
    wx.ready(function(){
      wx.hideOptionMenu();
    });
  },
  mounted() {
      this.getreportdetail()
  },

  updated() {
    $("#resetcss")
      .find("img")
      .css({ display: "block", margin: "0 auto", maxWidth: "100%",height:'auto' });
    $("#resetcss")
      .find("video")
      .css({ display: "block", margin: "0 auto", maxWidth: "100%" });
    $("#resetcss")
      .find("p")
      .css({
        margin: "0 auto 0",
        wordBreak: 'break-all'
      });
    $("#resetcss")
      .find("table")
      .css({
        width:'100%',
        tableLayout: 'fixed',
        overflow:'auto'
      });
    $("#resetcss")
      .find("pre")
      .css({ display: "block", whiteSpace: "pre-wrap" });
  },
  methods: {
    showTips() {
      //免责声明显示
      $("#tipsAlert").animate({ top: 0 });
    },
    hideTips() {
      //免责声明收起
      $("#tipsAlert").animate({ top: "-9999px" });
    },
    goTop() {
      document.body.scrollTop = document.documentElement.scrollTop = 0;
    },

    async getreportdetail() {
      const { Data,Ret  } = await getExternalReport({ ReportCode: this.id });
        document.title=Data.Title || "研报"
        if (Ret !== 200) return

        this.reportInfo = Data;
        this.configInfo = {
          ...Data,
          Report:null
        };
        this.attachmentsList = Data.OutsideReportBO.AttachmentList || []
        this.isshow = true;

        wxShare(document.location.href,Data.H5ShareName,Data.OutsideReportBO.Title,Data.H5ReportShareImg,0);

        //水印
        localStorage.setItem('waterMarkStr',this.$route.query.flag||'')
        const temwaterMarkStr=this.$route.query.flag||localStorage.getItem('waterMarkStr')
        let waterMarkStr=Base64.decode(temwaterMarkStr)
        waterMarkStr=decodeURIComponent(waterMarkStr)
        this.$nextTick(()=>{
          if(Data.WatermarkReport==='true'){
            this.setWaterMark(waterMarkStr)
          }
          this.setBlindWaterMark(waterMarkStr)
        })
    },

    setWaterMark(str){
      const text=str||''
      const target=document.getElementById('resetcss')
      const canvas = document.createElement("canvas");

      const ctx = canvas.getContext("2d");
      ctx.font = "18px Arial";
      ctx.rotate((-45 * Math.PI) / 200);
      ctx.fillStyle='#f1f1f1'
      ctx.fillText(text, 30, 200);
      ctx.fillText(text, -40, 100);

      // 将canvas的内容转换为base64编码
      const data = canvas.toDataURL("image/png");
      target.style.background = "url(" + data + ") repeat";
    },

    // 设置水印
    setBlindWaterMark(str){
      
      const blindwatermark = new BlindWatermark({
        content: str||'',
        width: 200,
        height: 200,
        onSuccess: () => {
          // success callback
        }
      })
      blindwatermark.create()
    },

    handlePreviewAttachment(row) {
        // // 预览文件
        let href;
        if(row.Url.endsWith('.doc') || row.Url.endsWith('.docx')||row.Url.endsWith('.xlsx')){
            href = 'https://view.officeapps.live.com/op/view.aspx?src='+row.Url
        }else{
            href=row.Url
        }
        window.open(href, "_blank")
    },

    formatSize(size) {
        if (size >= 1024 * 1024) { // 超过1MB
            return (size / (1024 * 1024)).toFixed(2) + ' MB';
        } else if (size >= 1024) { // 超过1KB
            return (size / 1024).toFixed(2) + ' KB';
        } else {
            return size + ' B'; // 小于1KB
        }
    },

    getFileIcon(name){
        let fileUrl=name.toLocaleLowerCase()
        if(fileUrl.endsWith('.pdf')){
            return PdfIcon
        }else if(fileUrl.endsWith('.xlsx')){
            return ExcelIcon
        }else if(fileUrl.endsWith('.png') || fileUrl.endsWith('.jpg')){
            return ImgIcon
        }else if(fileUrl.endsWith('.doc') || fileUrl.endsWith('.docx')){
            return WordIcon
        }else{
            return ''
        }
    },

  },
};
</script>

<style lang="scss">
.wrapper {
  position: relative;
  overflow: hidden;
  height: 100%;
  font-size: 18px;
  #noaccess {
    width: 100%;
    height: 12rem;
    padding: 5rem 0.6rem 1rem;
    box-sizing: border-box;
    text-align: center;
    position: absolute;
    bottom: 0;
    background: url(~@/assets/img/accessbg.png) no-repeat;
    background-size: 100% auto;
    overflow: hidden;
    > a,
    button {
      width: 12rem;
      height: 2rem;
      background: url(~@/assets/img/newbtn600.png) no-repeat;
      background-size: 100% 100%;
      font-size: 0.48rem;
      color: #fff;
      border: none;
      margin-top: 1.5rem;
    }
  }
}
#reportdtl {
  background: #fff;
  overflow: auto;
  max-width: 1200px;
  margin: 0 auto 150px;
  position: relative;
  z-index: -1;
  header {
    padding: 0.6rem;
    box-sizing: border-box;
    text-align: left;
    background: #fff;
    display: flex;
    justify-content: space-between;
    p {
      font-size: 0.84rem;
      font-weight: 600;
      color: #000;
    }
    .logo {
      flex-shrink: 0;
      height: fit-content;
    }
  }

 
  .abstract_cont {
    padding:5px 20px;
    margin: 10px 0;
    position: relative;
    &::after {
      position: absolute;
      width: 5px;
      height: 100%;
      content: '';
      background:#007aff;
      top: 0;
      left: 0;
    }
  }
  #noaccess {
    width: 100%;
    height: 12rem;
    padding: 5rem 0.6rem 1rem;
    box-sizing: border-box;
    text-align: center;
    position: relative;
    top: -4rem;
    background: url(~@/assets/img/accessbg.png) no-repeat;
    background-size: 100% auto;
    margin-bottom: -4rem;
    overflow: hidden;
    > a,
    button {
      width: 12rem;
      height: 2rem;
      background: url(~@/assets/img/newbtn600.png) no-repeat;
      background-size: 100% 100%;
      font-size: 0.48rem;
      color: #fff;
      border: none;
      margin-top: 1.5rem;
    }
  }
  /* table {
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-collapse: collapse;
    th,
    td {
      border-right: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
      padding: 0.1rem 0.2rem;
      box-sizing: border-box;
    }
  } */
  #resetcss {
    pre {
      white-space: pre-wrap;
    }
  }
  #tipsAlert {
    width: 100%;
    height: 100%;
    padding: 15% 1rem;
    box-sizing: border-box;
    position: fixed;
    top: -9999px;
    left: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 200;
    .disclaimer{
        font-size: 0.58rem;
    }
  }

}

.van-floating-panel {
    box-shadow: 0 -4px 8px rgba($color: #000000, $alpha: 0.2);
}
.attachments-cont {
  padding: 10px 15px;
  .list-cont {
    margin-top: 15px;
    font-size: 14px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap:10px;
    .item{
      width: 100%;
      max-width: 500px;
      display: flex;
      border: 1px solid #dcdcdc;
      padding: 4px 12px;
      border-radius: 4px;
      overflow: hidden;
      .right-info {
        margin-left: 10px;
        flex: 1;
      }
      .file-icon {
        width: 45px;
        height: 45px;
      }
      .file-title {
        max-width: 80%;
      }
    }
  }
}
@media screen and (max-width:650px) {
  #resetcss table {
    p,span {
      font-size: 10px !important;
    }
  }
  .attachments-cont {
    .list-cont .item{ 
      /* max-width: 100%; */
    }
  }
}
</style>