智能研报生成图片页面单独做一个

src/router/index.js

@@ -31,6 +31,11 @@ const routes=[
     name: "smartReport",
     component: () => import("@/views/smartReport/detail.vue"),
   },
+  {
+    path: "/smart_report_getImg",
+    name: "smartReportGetImg",
+    component: () => import("@/views/smartReport/getReportImg.vue"),
+  },
 ]
 
 const router = createRouter({

src/views/smartReport/getReportImg.vue

@@ -0,0 +1,169 @@
+<!-- 原项目丢了 省事直接cv一下老项目代码 -->
+<template>
+  <div class="wrapper" ref="wrapper">
+    <div id="reportdtl" v-if="isshow">
+      <div style="">
+        <div id="resetcss" style="overflow:hidden;" v-html="reportInfo.Content"></div>
+        <!-- <div id="resetcss">
+          <ul>
+            <li v-for="(html, index) in realContent" :key="index" v-html="html"></li>
+          </ul>
+        </div> -->
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import { smartReportDetail } from "@/api/api.js";
+import _ from "lodash";
+
+export default {
+  data() {
+    return {
+      id: this.$route.query.code || "",
+      isshow: false,
+      reportInfo: {},
+      reportlist: [],
+
+      totalContent: [],
+      realContent: [],
+      page_no: 0,
+      pageSize: 20, //默认初始加载50个p标签
+      total_page: 0,
+      Disclaimer: "",
+    };
+  },
+  mounted() {
+    this.getreportdetail();
+    window.addEventListener("scroll", this.loadMoreHandle);
+    window.addEventListener('resize',this.pageResize)
+  },
+
+  destroyed() {
+    window.removeEventListener("scroll", this.loadMoreHandle);
+    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})`
+      }
+    },
+
+    addFlagToIframe(str){
+        return str.replace(/\/chartshow\?code=/g,`/chartshow?source=smartReportGetImg&code=`)
+    },
+
+    async getreportdetail() {
+      const { Data, Ret } = await smartReportDetail({ ReportCode: this.id });
+      document.title = (Data && Data.H5ShareName) || "研报";
+      if (Ret !== 200) return;
+      // console.log('data',Data)
+      this.reportInfo = Data.Report;
+      this.reportInfo.Content=this.addFlagToIframe(this.reportInfo.Content)
+      this.isshow = true;
+      this.$nextTick(()=>{
+        this.pageResize()
+      })
+
+      this.splitContentHandle(this.reportInfo.Content);
+
+    },
+
+    /*内容分割*/
+    splitContentHandle(content) {
+      const regex = new RegExp(`<div[^>]*class="?report-drag-item-wrap"?>`);
+      const arr = content.split(regex);
+      this.totalContent = arr.map((item) => item + "<div class='report-drag-item-wrap'>");
+      this.realContent = this.totalContent.slice(0, this.pageSize);
+      this.total_page = parseInt(this.totalContent.length / this.pageSize) + 1;
+      // console.log(this.realContent, this.totalContent);
+    },
+
+    /* 加载下一页内容 */
+    loadContent() {
+      this.realContent = this.realContent.concat(this.totalContent.slice(this.page_no * this.pageSize, (this.page_no + 1) * this.pageSize));
+    },
+    loadMoreHandle: _.throttle(function () {
+      if (this.page_no >= this.total_page) return;
+
+      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 滚动的高度
+      const clientHeight = document.documentElement.clientHeight || document.body.clientHeight; // 可视高度
+      const scrollHeight = document.body.scrollHeight; // 总高度
+
+      if (scrollHeight - scrollTop - clientHeight < 500) {
+        console.log("触底");
+        this.page_no = this.page_no + 1;
+        this.loadContent();
+      }
+    }, 300),
+  },
+};
+</script>
+
+<style lang="scss">
+.wrapper {
+  position: relative;
+  // overflow: hidden;
+  height: 100%;
+}
+#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;
+    }
+  }
+
+  // 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;
+    }
+  }
+  // #element .element .element-content .main-container .content tbody td {
+  //   padding: 0.01rem 0;
+  //   word-break: break-all;
+  // }
+}
+@media screen and (max-width:800px){
+  #reportdtl{
+    position: absolute;
+    transform-origin: 0 0;
+  }
+}
+</style>