智能研报、章节报告兼容

src/views/report/Detail.vue

@@ -37,6 +37,13 @@ const reportContent = ref('')
 const reportStatus = ref(0)//1已过期，2没有该品种权限，3没有权限，4有权限，5未绑定
 const reportCollected = ref(false)//报告是否收藏
 const isBind=ref(false)
+const headImgStyle=ref([])
+const endImgStyle=ref([])
+const layoutBaseInfo=ref({
+  '研报标题':'',
+  '研报作者':'',
+  '创建时间':''
+})
 async function getReportInfo() {
   if (!reportId) return
   const res = await apiReport.getReportDetail({
@@ -47,6 +54,13 @@ async function getReportInfo() {
     reportStatus.value = res.Data.Status
     reportCollected.value = res.Data.IsCollect || false
     isBind.value=res.Data.IsSignIn
+    headImgStyle.value=res.Data.Report.HeadResource.Style?JSON.parse(res.Data.Report.HeadResource.Style):[]
+    endImgStyle.value=res.Data.Report.EndResource.Style?JSON.parse(res.Data.Report.EndResource.Style):[]
+    layoutBaseInfo.value['研报标题']=res.Data.Report.Title
+    layoutBaseInfo.value['研报作者']=res.Data.Report.Author
+    layoutBaseInfo.value['创建时间']=res.Data.Report.PublishTime
+
+
     nextTick(() => {
       handlePreviewImgs()
     })
@@ -199,12 +213,42 @@ function handleGoLogin(){
 
 <template>
   <div class="report-detail-page" v-if="reportInfo">
+    <!-- 智能研报有版头版尾 -->
+    <div class="html-head-img-box" v-if="reportInfo.HeadResource.ImgUrl">
+      <img :src="reportInfo.HeadResource.ImgUrl" alt="" style="display:block;width:100%">
+      <div 
+        class="head-layout-item" 
+        v-for="item in headImgStyle" 
+        :key="item.value"
+        :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.value] }}
+      </div>
+    </div>
+    <div class="time-box" style="text-align:right;" v-if="reportInfo.HeadResource.ImgUrl">
+      <span>如有内容疑问 请查看 &nbsp;</span>
+      <span class="btn" @click="isShowMZSM = true">免责声明</span>
+    </div>
+
+    <template v-if="!reportInfo.HeadResource.ImgUrl&&!reportInfo.EndResource.ImgUrl">
     <div class="title-box">{{ reportInfo.Title }}</div>
     <div class="author-box">{{ reportInfo.Author }}</div>
     <div class="time-box">
       <span>{{ reportInfo.PublishTime }}</span>
       <span class="btn" @click="isShowMZSM = true">免责声明</span>
     </div>
+    </template>
+
     <div class="des-box" v-if="reportInfo.Abstract">
       <svg-icon name="icon01"></svg-icon>
       <div>{{ reportInfo.Abstract }}</div>
@@ -215,13 +259,55 @@ function handleGoLogin(){
       v-html="reportContent"
       v-if="reportStatus !== 4"
     />
+    <template v-else>
     <div
-      v-else
       id="rich-content"
       class="report-content-box rich-content"
+      v-if="reportInfo.HasChapter!==1"
     >
       <div v-for="item in renderContentList" :key="item" v-html="item"></div>
     </div>
+    <!-- 章节报告 -->
+    <div
+      id="rich-content"
+      class="report-content-box rich-content"
+      v-if="reportInfo.HasChapter===1"
+    >
+      <div 
+        class="chapter-item-wrap" 
+        v-for="chapter,index in reportInfo.ChapterContent"
+        :key="index"
+      >
+        <div class="chapter-title">
+          <h3 class="chapter-title-text">{{chapter.Title}}</h3>
+        </div>
+        <div v-html="chapter.Content"></div>
+      </div>
+    </div>
+    </template>
+    
+
+    <!-- 拼接版尾 -->
+    <div class="html-end-img-box" v-if="reportInfo.EndResource.ImgUrl">
+      <img :src="reportInfo.EndResource.ImgUrl" alt="" style="display:block;width:100%">
+      <div 
+        class="head-layout-item" 
+        v-for="item in endImgStyle" 
+        :key="item.value"
+        :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.value] }}
+      </div>
+    </div>
     <!-- 右侧悬浮操作栏 -->
     <div class="right-fix-box">
       <!-- 收藏 -->
@@ -359,6 +445,33 @@ function handleGoLogin(){
       display: inline-block !important;
       vertical-align: middle !important;
     }
+    :deep(.report-drag-item-wrap_child-wrap){
+      flex-wrap: wrap;
+      .report-drag-item-wrap_child_content{
+        flex: none !important;
+        width: 100%;
+      }
+    }
+    .chapter-item-wrap {
+      padding: 20px 0;
+      .chapter-title {
+          display: flex;
+          align-items: center;
+          font-size: 30px;
+          .type {
+              height: fit-content;
+              display: inline-block;
+              color: #fff;
+              padding: 10px 20px;
+              background-color: #E6A23C;
+              border-radius: 8px; 
+              margin-right: 20px;
+          }
+          .chapter-title-text {
+              font-size: 30px;
+          }
+      }
+    }
   }
   .right-fix-box {
     position: fixed;
@@ -379,6 +492,16 @@ function handleGoLogin(){
       display: block;
     }
   }
+  .html-head-img-box,.html-end-img-box{
+    margin-bottom: 10px;
+    position: relative;
+    overflow: hidden;
+    .head-layout-item{
+        position: absolute;
+        overflow: hidden;
+        box-sizing: border-box
+    }
+  }
 }
 .no-auth-wrap {
   position: fixed;