ETA_1.8.1 报告转pdf和长图

public/eta_comp.js

@@ -24994,7 +24994,7 @@ function rM({ DataResp: r, EdbInfoList: g, ChartInfo: E }) {
   }), {
     chart: {
       ...fs.chart,
-      ...I.drawOption,
+      ...I == null ? void 0 : I.drawOption,
       spacing: [2, 10, 2, 10],
       polar: !0
     },
@@ -26496,9 +26496,8 @@ We.getAdapter = sd.getAdapter;
 We.HttpStatusCode = bC;
 We.default = We;
 const SC = We;
-console.log("/v1", '"/v1"');
 let wC = {
-  baseURL: "http://testetareport.hzinsights.com/v1",
+  baseURL: "/api",
   timeout: 10 * 60 * 1e3
 };
 const $h = SC.create(wC);
@@ -26519,7 +26518,7 @@ $h.interceptors.response.use(
     return console.error(r), Promise.reject(r);
   }
 );
-const ld = (r, g) => $h.get(r, { params: g }), MC = (r) => ld("/edb/excel/detail", r), CC = (r) => ld("/edb/chart/detail", r);
+const ld = (r, g) => $h.post(r, g), MC = (r) => ld("/chart/detail", r), CC = (r) => ld("/excel/detail", r);
 function cd(r) {
   if (r.indexOf("?") === -1)
     return {};

src/router/index.js

@@ -41,6 +41,16 @@ const routes=[
     name: "reportDetailPdf",
     component: () => import("@/views/report/reportDetailPdf.vue"),
   },
+  {
+    path: "/reportshare_pdf_en",
+    name: "detailPdfEn",
+    component: () => import("@/views/reportEn/detailPdf.vue"),
+  },
+  {
+    path: "/reportshare_smart_pdf",
+    name: "detailSmartPdf",
+    component: () => import("@/views/smartReport/detailPdf.vue"),
+  },
 ]
 
 const router = createRouter({

src/views/report/reportDetailPdf.vue

@@ -145,9 +145,7 @@ export default {
     async getreportdetail() {
       const { Data,Ret  } = await reportDetail({ ReportCode: this.id });
         if (Ret !== 200) return
-        console.log('data',Data,this.$route.query.viewType)
         this.reportInfo = Data.Report;
-        console.log(this.$route.query.viewType,'this.$route.query.viewType');
         this.$route.query.viewType=="!pdf!" && (this.reportInfo.Content=this.setReportContent(this.reportInfo.Content))
         this.isshow = true;
         //水印

src/views/reportEn/detailPdf.vue

@@ -0,0 +1,287 @@
+<!-- 省事直接cv一下老项目代码 -->
+<template>
+  <div class="wrapper" ref="wrapper">
+    <div id="reportdtl" v-if="isshow">
+      <header>
+        <p>
+          <span style="margin-left: -0.45rem"
+            >【No.{{ reportInfo.Stage }}|FICC】{{
+              reportInfo.Title
+            }}</span
+          >
+          <span v-if="reportInfo.CreateTime"
+            >({{ reportInfo.CreateTime.substring(5, 7)
+            }}{{ reportInfo.CreateTime.substring(8, 10) }})</span
+          >
+        </p>
+      </header>
+      <div
+        style="
+          padding: 0rem 0.8rem 0.4rem;
+          box-sizing: border-box;
+          color: #666;
+          font-size: 0.66rem;
+          overflow: hidden;
+        "
+      >
+        <span>{{ reportInfo.Author }}</span>
+        <span style="float: right">{{ reportInfo.PublishTime }}</span>
+      </div>
+
+      <div id="abstract">
+        <div class="abstract_cont">
+          <div>Abstract：{{ reportInfo.Abstract }}</div>
+          <div style="color: #666; margin-top: 1.2rem">
+            *Note: Please be sure to read the <strong
+              style="font-weight: normal; cursor: pointer; color: #3e8ce6"
+              >disclaimer</strong
+            >
+          </div>
+        </div>
+      </div>
+      <div style="padding: 0.6rem; box-sizing: border-box; overflow: hidden">
+        <div id="overview" style="margin-bottom:1.25rem;font: 0.7rem/1.5 'segoe';" v-if="reportInfo.Overview">
+          <p><strong>Overview:</strong></p>
+          <div class="overview" style="overflow:hidden;margin-top:0.83rem;line-height:1.3rem;" v-html="reportInfo.Overview"></div>
+        </div>
+        <div id="resetcss" style="overflow:hidden;">
+        <div v-html="reportInfo.Content"></div>
+      </div>
+    </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import {
+  reportEnDetail,
+} from "@/api/api.js";
+import { BlindWatermark } from 'watermark-js-plus'
+import { Base64 } from 'js-base64';
+export default {
+  data() {
+    return {
+      id: this.$route.query.code || '',
+      isshow: false,
+      reportInfo: {}
+    };
+  },
+  mounted() {
+    this.getreportdetail();
+  },
+
+  updated() {
+    $("#resetcss")
+      .find("img")
+      .css({ display: "block", margin: "0 auto", maxWidth: "100%" });
+    $("#resetcss")
+      .find("video")
+      .css({ display: "block", margin: "0 auto", maxWidth: "100%" });
+    $("#resetcss")
+      .find("p")
+      .css({
+        margin: "0 auto 0",
+        font: "0.7rem/1.5 'segoe'",
+        color: "#333",
+        letterSpacing: "0",
+        lineHeight: "1.3rem",
+      });
+    $("#resetcss")
+      .find("span")
+      .css({
+        font: "0.7rem/1.5 'segoe'",
+        letterSpacing: "0",
+        lineHeight: "1.3rem",
+      });
+    $("#resetcss")
+      .find("span.fr-emoticon")
+      .css({
+        width: "20px",
+        height: "20px",
+        backgroundRepeat: "no-repeat",
+        backgroundSize: "cover",
+        display: "inline-block",
+        verticalAlign: "middle",
+      });
+    $("#resetcss").find("ol").css({ listStyleType: "disc" });
+    $("#resetcss")
+      .find("pre")
+      .css({ display: "block", whiteSpace: "pre-wrap" });
+    $("#overview")
+      .find("p")
+      .css({
+        margin: "0 auto 0",
+        font: "0.7rem/1.5 'segoe'",
+        color: "#333",
+        letterSpacing: "0",
+        lineHeight: "1.3rem",
+      });
+  },
+  methods: {
+    async getreportdetail() {
+      const { Data,Ret  } = await reportEnDetail({ ReportCode: this.id,ShareEmail:Number(this.$route.query.ShareEmail)||0 });
+        if (Ret !== 200) return
+        this.reportInfo = Data.Report;
+        this.$route.query.viewType=="!pdf!" && (this.reportInfo.Content=this.setReportContent(this.reportInfo.Content))
+        this.isshow = true;    
+        localStorage.setItem('waterMarkStr',this.$route.query.flag||'')
+        const temwaterMarkStr=this.$route.query.flag||localStorage.getItem('waterMarkStr')
+        const waterMarkStr=Base64.decode(temwaterMarkStr)
+        this.$nextTick(()=>{
+          if(Data.WatermarkReport==='true'){
+            this.setWaterMark(waterMarkStr)
+          }
+          this.setBlindWaterMark(waterMarkStr)
+        })
+    },
+    setReportContent(str){
+      str=str.replace(/(<iframe)( src="https:\/\/(charttest|chartlib).hzinsights.com\/chartshow)/g,(match, tag,attr)=>{
+        return '<eta-chart class="no-wrap"'+attr
+      })
+      str=str.replace(/(<iframe)( src="https:\/\/(charttest|chartlib).hzinsights.com\/sheetshow)/g,(match, tag,attr)=>{
+        return '<eta-table class="no-wrap"'+attr
+      })
+      return str
+    },
+    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()
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.wrapper {
+  position: relative;
+  overflow: hidden;
+  height: 100%;
+  #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;
+  font-family: 'segoe';
+  header {
+    padding: 0.6rem;
+    box-sizing: border-box;
+    text-align: left;
+    background: #fff;
+    p {
+      font-size: 0.84rem;
+      font-weight: 600;
+      color: #000;
+    }
+  }
+  #abstract {
+    padding: 0.6rem;
+    box-sizing: border-box;
+    font-size: 0.7rem;
+    line-height: 1.4rem;
+    letter-spacing: 0;
+    font-family: 'segoe';
+    .abstract_cont {
+      border-left: 0.2rem solid #007aff;
+      padding: 0.14rem 0.4rem;
+      box-sizing: border-box;
+      color: #333;
+    }
+  }
+  #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;
+    }
+  }
+  #overview{
+    padding:0.83rem;
+    background-color: rgba(77, 130, 191, 0.1);
+    border: 1px solid #E2E2E2;
+  }
+  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;
+    }
+  }
+}
+</style>

src/views/smartReport/detail.vue

@@ -10,7 +10,35 @@
           </div>
       </div> -->
       <div>
+        <div class="html-head-img-box" v-if="reportInfo && !!reportInfo.NeedSplice && reportInfo.HeadImg">
+          <img :src="reportInfo.HeadImg" alt="" style="display:block;width:100%">
+          <div class="head-layout-item" v-for="item in headImgStyle" :key="item.label"
+          :style="{fontFamily:item.family,fontSize:(item.size*2)+'px',fontWeight:item.weight,textAlign:item.align,color:item.color,
+              width:item.width,height:item.height,left:item.left,top:item.top
+          }">
+              {{ layoutBaseInfo[item.label] }}
+          </div>
+        </div>
+        <div class="no-layout-img-box" v-if="reportInfo && !!reportInfo.NeedSplice && (!reportInfo.HeadImg) && (!reportInfo.EndImg)">
+          <header>{{reportInfo.Title}}</header>
+          <div style=" box-sizing:border-box; color:#666; font-size:24px; overflow:hidden;">
+            <span>{{ reportInfo.Author}}</span>
+            <span style="float:right;">{{reportInfo.CreateTime}}</span>
+          </div>
+        </div>
+        <div class="abstract" v-if="reportInfo && !!reportInfo.NeedSplice">
+          <div>摘要： <span v-html="reportInfo.Abstract"></span></div> 
+        </div>
         <div id="resetcss" style="overflow:hidden;" v-html="reportInfo.Content"></div>
+        <div class="html-end-img-box" v-if="reportInfo && !!reportInfo.NeedSplice && reportInfo.EndImg">
+          <img :src="reportInfo.EndImg" alt="" style="display:block;width:100%">
+          <div class="head-layout-item" v-for="item in endImgStyle" :key="item.label"
+          :style="{fontFamily:item.family,fontSize:(item.size*2)+'px',fontWeight:item.weight,textAlign:item.align,color:item.color,
+              width:item.width,height:item.height,left:item.left,top:item.top
+          }">
+              {{ layoutBaseInfo[item.label] }}
+          </div>
+        </div> 
         <!-- <div id="resetcss">
           <ul>
             <li v-for="(html, index) in realContent" :key="index" v-html="html"></li>
@@ -68,6 +96,9 @@ export default {
     return {
       id: this.$route.query.code || "",
       isshow: false,
+      /**
+       * NeedSplice 0-不需要 1-需要
+       */
       reportInfo: {},
       reportlist: [],
 
@@ -77,6 +108,13 @@ export default {
       pageSize: 20, //默认初始加载50个p标签
       total_page: 0,
       Disclaimer: "",
+      headImgStyle:null,//版头style
+      endImgStyle:null,//版尾style
+      layoutBaseInfo:{
+          研报标题:'',
+          研报作者:'',
+          创建时间:''
+      }
     };
   },
   mounted() {
@@ -161,7 +199,12 @@ export default {
       let wxShareTitle = !!Data.Hz
         ? "【第" + Data.Report.Stage + "期|FICC" + "】" + Data.Report.Title + "(" + Data.Report.CreateTime.substring(5, 7) + Data.Report.CreateTime.substring(8, 10) + ")"
         : Data.Report.Title + "(" + Data.Report.CreateTime.substring(5, 7) + Data.Report.CreateTime.substring(8, 10) + ")";
-      this.reportInfo = Data.Report;
+      this.reportInfo = Data.Report || {};
+      this.headImgStyle=this.reportInfo.HeadStyle?JSON.parse(this.reportInfo.HeadStyle):[]
+      this.endImgStyle=this.reportInfo.EndStyle?JSON.parse(this.reportInfo.EndStyle):[]
+      this.layoutBaseInfo['研报标题']=this.reportInfo.Title
+      this.layoutBaseInfo['研报作者']=this.reportInfo.Author
+      this.layoutBaseInfo['创建时间']=this.reportInfo.CreateTime
       this.Disclaimer = Data.Disclaimer || "";
       this.isshow = true;
       this.$nextTick(()=>{
@@ -273,7 +316,29 @@ body{
       justify-content: space-between;
     }
   }
-
+  .html-head-img-box,.html-end-img-box{
+    position: relative;
+    .head-layout-item{
+        position: absolute;
+        overflow: hidden;
+        box-sizing: border-box
+    }
+  }
+  .no-layout-img-box{
+    header{
+        padding:10px 0; box-sizing:border-box; font-size:28px; font-weight:500; color:#333; background:#fff; 
+    }
+  }
+  .abstract{
+    padding:10px 0; box-sizing:border-box; font-size:22px; line-height:36px;
+    div{
+        padding: 10px 20px;
+        box-sizing: border-box;
+        background: rgba(20, 121, 253, 0.1);
+        color: #4099ef;
+        border-radius: 10px;
+    }
+  }
   // table {
   //   border-top: 1px solid #ccc;
   //   border-left: 1px solid #ccc;

src/views/smartReport/detailPdf.vue

@@ -0,0 +1,202 @@
+<!-- 原项目丢了 省事直接cv一下老项目代码 -->
+<template>
+  <div class="wrapper" ref="wrapper">
+    <div id="reportdtl" v-if="isshow" :style="{backgroundColor:reportInfo.CanvasColor}">
+      <div>
+        <div class="html-head-img-box" v-if="reportInfo && !!reportInfo.NeedSplice && reportInfo.HeadImg">
+          <img :src="reportInfo.HeadImg" alt="" style="display:block;width:100%">
+          <div class="head-layout-item" v-for="item in headImgStyle" :key="item.label"
+          :style="{fontFamily:item.family,fontSize:(item.size*2)+'px',fontWeight:item.weight,textAlign:item.align,color:item.color,
+              width:item.width,height:item.height,left:item.left,top:item.top
+          }">
+              {{ layoutBaseInfo[item.label] }}
+          </div>
+        </div>
+        <div class="no-layout-img-box" v-if="reportInfo && !!reportInfo.NeedSplice && (!reportInfo.HeadImg) && (!reportInfo.EndImg)">
+          <header>{{reportInfo.Title}}</header>
+          <div style=" box-sizing:border-box; color:#666; font-size:24px; overflow:hidden;">
+            <span>{{ reportInfo.Author}}</span>
+            <span style="float:right;">{{reportInfo.CreateTime}}</span>
+          </div>
+        </div>
+        <div class="abstract" v-if="reportInfo && !!reportInfo.NeedSplice">
+          <div>摘要： <span v-html="reportInfo.Abstract"></span></div> 
+        </div>
+        <div id="resetcss" style="overflow:hidden;" v-html="reportInfo.Content"></div>
+        <div class="html-end-img-box" v-if="reportInfo && !!reportInfo.NeedSplice && reportInfo.EndImg">
+          <img :src="reportInfo.EndImg" alt="" style="display:block;width:100%">
+          <div class="head-layout-item" v-for="item in endImgStyle" :key="item.label"
+          :style="{fontFamily:item.family,fontSize:(item.size*2)+'px',fontWeight:item.weight,textAlign:item.align,color:item.color,
+              width:item.width,height:item.height,left:item.left,top:item.top
+          }">
+              {{ layoutBaseInfo[item.label] }}
+          </div>
+        </div> 
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { smartReportDetail } from "@/api/api.js";
+
+export default {
+  data() {
+    return {
+      id: this.$route.query.code || "",
+      isshow: false,
+      /**
+       * NeedSplice 0-不需要 1-需要
+      */
+      reportInfo: {},
+      headImgStyle:null,//版头style
+      endImgStyle:null,//版尾style
+      layoutBaseInfo:{
+          研报标题:'',
+          研报作者:'',
+          创建时间:''
+      }
+    };
+  },
+  mounted() {
+    this.getreportdetail();
+    window.addEventListener('resize',this.pageResize)
+  },
+
+  destroyed() {
+    window.removeEventListener('resize',this.pageResize)
+  },
+  methods: {
+    pageResize(){
+      const el=document.getElementById('reportdtl')
+      const windowWid=document.body.clientWidth
+      if(windowWid<800){
+        el.style.transform=`scale(${windowWid/800})`
+        // el.style.
+      }
+    },
+    async getreportdetail() {
+      const { Data, Ret } = await smartReportDetail({ ReportCode: this.id });
+      if (Ret !== 200) return;
+      
+      this.reportInfo = Data.Report;
+      this.headImgStyle=this.reportInfo.HeadStyle?JSON.parse(this.reportInfo.HeadStyle):[]
+      this.endImgStyle=this.reportInfo.EndStyle?JSON.parse(this.reportInfo.EndStyle):[]
+      this.layoutBaseInfo['研报标题']=this.reportInfo.Title
+      this.layoutBaseInfo['研报作者']=this.reportInfo.Author
+      this.layoutBaseInfo['创建时间']=this.reportInfo.CreateTime
+      this.$route.query.viewType=="!pdf!" && (this.reportInfo.Content=this.setReportContent(this.reportInfo.Content))
+      this.isshow = true;
+      this.$nextTick(()=>{
+        this.pageResize()
+      })
+    },
+    setReportContent(str){
+      str=str.replace(/(<iframe)( src="https:\/\/(charttest|chartlib).hzinsights.com\/chartshow)/g,(match, tag,attr)=>{
+        return '<eta-chart class="no-wrap"'+attr
+      })
+      str=str.replace(/(<iframe)( src="https:\/\/(charttest|chartlib).hzinsights.com\/sheetshow)/g,(match, tag,attr)=>{
+        return '<eta-table class="no-wrap"'+attr
+      })
+      return str
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+body{
+  line-height: normal;
+}
+.wrapper {
+  position: relative;
+  height: 100%;
+  #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 {
+  font-size: 14px;
+  background: #fff;
+  overflow: auto;
+  width: 800px;
+  padding: 20px 20px 20px 44px;
+  margin: 0 auto;
+
+  .top-header {
+    background-image: url("@/assets/img/smart_report_bg01.png");
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    padding: 16px;
+    color: #fff;
+    .title {
+      font-size: 16px;
+      margin-bottom: 10px;
+    }
+    .flex {
+      font-size: 12px;
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+  .html-head-img-box,.html-end-img-box{
+    position: relative;
+    .head-layout-item{
+        position: absolute;
+        overflow: hidden;
+        box-sizing: border-box
+    }
+  }
+  .no-layout-img-box{
+    header{
+        padding:10px 0; box-sizing:border-box; font-size:28px; font-weight:500; color:#333; background:#fff; 
+    }
+  }
+  .abstract{
+    padding:10px 0; box-sizing:border-box; font-size:22px; line-height:36px;
+    div{
+        padding: 10px 20px;
+        box-sizing: border-box;
+        background: rgba(20, 121, 253, 0.1);
+        color: #4099ef;
+        border-radius: 10px;
+    }
+  }
+  #resetcss {
+    pre {
+      white-space: pre-wrap;
+    }
+    .report-drag-item-wrap{
+                padding: 6px;
+                margin-bottom: 3px;
+            }
+  }
+}
+@media screen and (max-width:800px){
+  #reportdtl{
+    position: absolute;
+    transform-origin: 0 0;
+  }
+}
+</style>