兼容智能报告布局

src/views/report/ChapterDetail.vue

@@ -112,6 +112,14 @@ const getTickerValue=async ()=>{
 let info=ref(null)
 let audioData=ref(null)
 let isReportPublishCancel=ref(false)//报告取消发布了
+
+const headImgStyle = ref([])//版头style
+const endImgStyle = ref([])//版尾style
+const layoutBaseInfo = ref({
+    研报标题:'',
+    研报作者:'',
+    创建时间:''
+})
 const getChapterReportDetail=async ()=>{
     console.log(chapterId.value);
     info.value=null
@@ -120,6 +128,14 @@ const getChapterReportDetail=async ()=>{
     })
     if(res.code===200){
         info.value=res.data
+        
+        headImgStyle.value=res.data.report_chapter_item.head_style?JSON.parse(res.data.report_chapter_item.head_style):[]
+        endImgStyle.value=res.data.report_chapter_item.end_style?JSON.parse(res.data.report_chapter_item.end_style):[]
+        layoutBaseInfo.value['研报标题']=res.data.report_chapter_item.title
+        layoutBaseInfo.value['研报作者']=res.data.report_chapter_item.author
+        // 已发布已通过的报告才显示发布时间
+        layoutBaseInfo.value['创建时间']=moment(res.data.report_chapter_item.publish_time).format('YYYY.MM.DD HH:mm')
+
         info.value.report_chapter_item.content=addTokenToIframe(res.data.report_chapter_item.content,res.data.report_chapter_item.report_id,res.data.report_chapter_item.report_chapter_id)
         audioData.value={
             auth_ok:res.data.auth_ok,
@@ -443,51 +459,75 @@ const posterParams=computed(()=>{
                     </el-carousel>
                 </template>
                 <div class="report-box">
-                    <div class="title">【第{{info.report_chapter_item.stage}}期 | {{info.report_chapter_item.classify_name_first}}  | {{info.report_chapter_item.type_name}}】{{info.report_chapter_item.title}}（{{moment(info.report_chapter_item.publish_time).format('MMDD')}}）</div>
-                    <div class="time">
-                        <span>FICC团队</span>
-                        <span>{{moment(info.report_chapter_item.publish_time).format('YYYY.MM.DD HH:mm')}}</span>
-                    </div>
-                    <div class="flex tips" style="position:relative">
-                        <div>
-                            <div class="abstract" v-if="info.report_chapter_item.abstract">摘要：{{info.report_chapter_item.abstract}}</div>
+                    <div :style="{backgroundColor:info.report_chapter_item.canvas_color||''}">
+                        <!-- 无版头板尾显示标题 -->
+                        <template v-if="(!info.report_chapter_item.head_img) && (!info.report_chapter_item.end_img)">
+                            <div class="title">【第{{info.report_chapter_item.stage}}期 | {{info.report_chapter_item.classify_name_first}}  | {{info.report_chapter_item.type_name}}】{{info.report_chapter_item.title}}（{{moment(info.report_chapter_item.publish_time).format('MMDD')}}）</div>
+                            <div class="time">
+                                <span>FICC团队</span>
+                                <span>{{moment(info.report_chapter_item.publish_time).format('YYYY.MM.DD HH:mm')}}</span>
+                            </div>
+                        </template>
+
+                        <!-- 拼接版头 -->
+                        <div class="html-head-img-box" v-if="info.auth_ok&&info.report_chapter_item.head_img">
+                            <img :src="info.report_chapter_item.head_img" 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="flex tips" style="position:relative">
                             <div>
-                                <span>*注：请务必阅读</span>
-                                <span style="color:#F3A52F;margin-left:20px;cursor: pointer;" @click="showDisclaimers=true">免责声明</span>
+                                <div class="abstract" v-if="info.report_chapter_item.abstract">摘要：{{info.report_chapter_item.abstract}}</div>
+                                <div>
+                                    <span>*注：请务必阅读</span>
+                                    <span style="color:#F3A52F;margin-left:20px;cursor: pointer;" @click="showDisclaimers=true">免责声明</span>
+                                </div>
                             </div>
                         </div>
-                        <!-- <el-image
-                            style="width: 54px; height: 54px;position: fixed;right:33px;bottom:200px;z-index: 99;cursor: pointer;"
-                            :src="pptIcon"
-                            fit="cover"
-                            v-if="pptImgs.length>0"
-                            @click="showPreViewPPT=true"
-                        /> -->
-                    </div>
-                    <AudioBox :data="audioData" v-if="info.report_chapter_item.video_url&&info.report_chapter_item.video_play_seconds>0"></AudioBox>
-                    <!-- <div class="abstract" v-if="info.report_chapter_item.abstract">摘要：{{info.report_chapter_item.abstract}}</div> -->
-                    <div id="report-rich-content" class="no-select-text rich-content" ref="waterMarkEl">
-                        <!-- <div v-html="info.report_chapter_item.content" v-if="info.auth_ok"></div> -->
-                        <ReportContent :html="info.report_chapter_item.content" v-if="info.auth_ok"></ReportContent>
-                        <div v-html="info.report_chapter_item.content_sub" v-else ></div>
-                        <!-- 隐藏的水印 -->
-                        <div class="hide-watermark-box">
-                            <div v-for="item in 20" :key="item">{{$store.state.userInfo.mobile}}</div>
+
+                        <template v-if="!info.report_chapter_item.report_video_url">
+                            <AudioBox :data="audioData" v-if="info.report_chapter_item.video_url&&info.report_chapter_item.video_play_seconds>0"></AudioBox>
+                        </template>
+
+                        <div id="report-rich-content" class="no-select-text rich-content" ref="waterMarkEl">
+                            <ReportContent :html="info.report_chapter_item.content" v-if="info.auth_ok"></ReportContent>
+                            <div v-html="info.report_chapter_item.content_sub" v-else ></div>
+                            <!-- 隐藏的水印 -->
+                            <div class="hide-watermark-box">
+                                <div v-for="item in 20" :key="item">{{$store.state.userInfo.mobile}}</div>
+                            </div>
                         </div>
-                    </div>
-                    <!-- 指标数据模块 -->
-                    <div class="ticker-wrap" v-if="tickerInfo">
-                        <div class="top-title">{{tickerInfo.ticker_title.report_chapter_type_name}}数据表</div>
-                        <div class="table-box">
-                            <div class="table-row table-head">
-                                <div class="table-item" v-for="item in tickerHead" :key="item.key">{{item.label}}</div>
+                        <!-- 指标数据模块 -->
+                        <div class="ticker-wrap" v-if="tickerInfo">
+                            <div class="top-title">{{tickerInfo.ticker_title.report_chapter_type_name}}数据表</div>
+                            <div class="table-box">
+                                <div class="table-row table-head">
+                                    <div class="table-item" v-for="item in tickerHead" :key="item.key">{{item.label}}</div>
+                                </div>
+                                <div class="table-row table-body" v-for="(tr,index) in tickerInfo.list" :key="tr.base_column_name">
+                                    <div :class="['table-item',index%2==0?'grey':'',tr[td.key]<0?'minus':'']" v-for="td in tickerHead" :key="td.key">{{tr[td.key]}}</div>
+                                </div>
                             </div>
-                            <div class="table-row table-body" v-for="(tr,index) in tickerInfo.list" :key="tr.base_column_name">
-                                <div :class="['table-item',index%2==0?'grey':'',tr[td.key]<0?'minus':'']" v-for="td in tickerHead" :key="td.key">{{tr[td.key]}}</div>
+                            <div v-if="tickerInfo.ticker_title.report_chapter_type_id ===26" style="text-align:center;font-weight:bold">注：与新加坡TSR20相关数据均取展示日期前一交易日数据</div>
+                        </div>
+
+                        <!-- 拼接版尾 -->
+                        <div class="html-end-img-box" v-if="info.auth_ok&&info.report_chapter_item.end_img">
+                            <img :src="info.report_chapter_item.end_img" 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 v-if="tickerInfo.ticker_title.report_chapter_type_id ===26" style="text-align:center;font-weight:bold">注：与新加坡TSR20相关数据均取展示日期前一交易日数据</div>
                     </div>
+
                     <!-- 无权限 -->
                     <div class="no-auth-wrap" v-if="!info.auth_ok">
                         <div class="apply-box" v-if="info.permission_check.type=='apply'">
@@ -886,4 +926,15 @@ const posterParams=computed(()=>{
     max-height: 60vh;
     overflow: auto;
 }
+
+.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
+    }
+}
 </style>

src/views/report/Detail.vue

@@ -62,12 +62,28 @@ const getReportPPTImgs=async ()=>{
 let info=ref(null)
 let audioData=ref(null)
 let isReportPublishCancel=ref(false)//报告取消发布了
+
+const headImgStyle = ref([])//版头style
+const endImgStyle = ref([])//版尾style
+const layoutBaseInfo = ref({
+    研报标题:'',
+    研报作者:'',
+    创建时间:''
+})
 const getReportDetail=async ()=>{
     const res=await apiReportDetail({
         report_id:Number(reportId.value)
     })
     if(res.code===200){
         info.value=res.data 
+
+        headImgStyle.value=res.data.report_info.head_style?JSON.parse(res.data.report_info.head_style):[]
+        endImgStyle.value=res.data.report_info.end_style?JSON.parse(res.data.report_info.end_style):[]
+        layoutBaseInfo.value['研报标题']=res.data.report_info.title
+        layoutBaseInfo.value['研报作者']=res.data.report_info.author
+        // 已发布已通过的报告才显示发布时间
+        layoutBaseInfo.value['创建时间']=moment(res.data.report_info.publish_time).format('YYYY.MM.DD HH:mm')
+
         info.value.report_info.content=addTokenToIframe(res.data.report_info.content,res.data.report_info.report_id,0)
         audioData.value={
             auth_ok:res.data.auth_ok,
@@ -503,7 +519,7 @@ const closeShowAttentionPop=()=>{
         <div class="hasrightaside-box">
             <div class="content-box">
                 <!-- 晨报、周报章节 -->
-                <div class="chapter-list-wrap" v-if="['晨报','周报'].includes(info.report_info.classify_name_first)">
+                <div class="chapter-list-wrap" v-if="info.report_info.has_chapter">
                     <div 
                         :class="['top-box',info.report_info.classify_name_first=='周报'?'top-box-week':'']" 
                         :style="'background-image:url(' + info.report_info.banner_url + ')'"
@@ -517,36 +533,40 @@ const closeShowAttentionPop=()=>{
                         </div>
                         <div class="title">{{info.report_info.classify_name_first}}</div>
                         <div class="sub-title">{{info.report_info.title}}</div>
-                        <!-- 音频设置 -->
-                        <el-popover
-                            :visible="showAttention&&info.auth_ok"
-                            placement="bottom-end"
-                            :width="340"
-                        >
-                            <template #reference>
-                                <img 
-                                    src="@/assets/audio-set.png"
-                                    class="audio-set-box" 
-                                    v-if="info.report_info.classify_name_first=='周报'&&info.auth_ok" @click="showAudioPlayListSet=true" 
-                                />
-                            </template>
-                            <template #default>
-                                <div ref="audioPlayListPop" style="position: relative;">
-                                    <h2 style="color:#F3A52F;font-size:16px">配置播放列表</h2>
-                                    <p>点击<span style="color:#F3A52F">设置</span>，打开<span style="color:#F3A52F">播放列表</span>，进行<span style="color:#F3A52F">关注品种配置</span></p>
-                                    <img src="@/assets/icon-close-2.png" alt="" style="width:9px;height:9px;position: absolute;top:-12px;right:10px" @click="closeShowAttention">
-                                </div>
-                            </template>
-                        </el-popover>
-                        <!-- 播放 按钮 -->
-                        <div 
-                            class="audio-play-box" 
-                            v-if="info.report_info.classify_name_first=='周报'&&info.auth_ok"
-                            @click="handlePlayWeekAudio(null)"
-                        >
-                            <div :class="['icon',$store.state.audioData.reportId==info.report_info.report_id&&!$store.state.audioData.paused?'icon-active':'']"></div>
-                            <span>{{$store.state.audioData.reportId==info.report_info.report_id&&!$store.state.audioData.paused?'暂停':'播放'}}</span>
-                        </div>
+
+                        <!-- 列表有音频 章节就不显示 -->
+                        <template v-if="!info.report_info.video_url">
+                            <!-- 音频设置 -->
+                            <el-popover
+                                :visible="showAttention&&info.auth_ok"
+                                placement="bottom-end"
+                                :width="340"
+                            >
+                                <template #reference>
+                                    <img 
+                                        src="@/assets/audio-set.png"
+                                        class="audio-set-box" 
+                                        v-if="info.report_info.classify_name_first=='周报'&&info.auth_ok" @click="showAudioPlayListSet=true" 
+                                    />
+                                </template>
+                                <template #default>
+                                    <div ref="audioPlayListPop" style="position: relative;">
+                                        <h2 style="color:#F3A52F;font-size:16px">配置播放列表</h2>
+                                        <p>点击<span style="color:#F3A52F">设置</span>，打开<span style="color:#F3A52F">播放列表</span>，进行<span style="color:#F3A52F">关注品种配置</span></p>
+                                        <img src="@/assets/icon-close-2.png" alt="" style="width:9px;height:9px;position: absolute;top:-12px;right:10px" @click="closeShowAttention">
+                                    </div>
+                                </template>
+                            </el-popover>
+                            <!-- 播放 按钮 -->
+                            <div 
+                                class="audio-play-box" 
+                                v-if="info.report_info.classify_name_first=='周报'&&info.auth_ok"
+                                @click="handlePlayWeekAudio(null)"
+                            >
+                                <div :class="['icon',$store.state.audioData.reportId==info.report_info.report_id&&!$store.state.audioData.paused?'icon-active':'']"></div>
+                                <span>{{$store.state.audioData.reportId==info.report_info.report_id&&!$store.state.audioData.paused?'暂停':'播放'}}</span>
+                            </div>
+                        </template>
                     </div>
                     <div class="list-box">
                         <div class="flex item" v-for="item in info.report_chapter_list" :key="item.report_chapter_id" @click="goChapterDetail(item)">
@@ -562,7 +582,7 @@ const closeShowAttentionPop=()=>{
                                 <div class="update-time">更新至：{{moment(item.publish_time).format('YYYY-MM-DD')}}</div>
                                 <div 
                                     :class="['audio-icon-box',$store.state.audioData.list[$store.state.audioData.index]?.url==item.video_url&&!$store.state.audioData.paused?'audio-icon-box--active':'']" 
-                                    v-if="info.report_info.classify_name_first=='周报'&&item.is_close==0"
+                                    v-if="info.report_info.classify_name_first=='周报'&&item.is_close==0&&!info.report_info.video_url"
                                     @click.stop="handlePlayWeekAudio(item)"
                                 ></div>
                             </div>
@@ -581,6 +601,7 @@ const closeShowAttentionPop=()=>{
                         </div>
                     </div>
                 </div>
+                
                 <!-- 报告详情 -->
                 <div class="report-box" v-else>
                     <template v-if="bannerDataList.length > 0">
@@ -590,33 +611,61 @@ const closeShowAttentionPop=()=>{
                             </el-carousel-item>
                         </el-carousel>
                     </template>
-                    <div class="title">{{formatTitle(info.report_info)}}</div>
-                    <div class="time">
-                        <span>FICC团队</span>
-                        <span>{{moment(info.report_info.publish_time).format('YYYY.MM.DD HH:mm')}}</span>
-                    </div>
-                    <div class="flex tips" style="position:relative">
-                        <div>
-                            <div v-if="info.road_video_id">点击<span style="color: #F3A52F;cursor: pointer;" @click="goVideoPage(info)">查看视频</span></div>
-                            <div class="abstract" v-if="info.report_info.abstract">摘要：{{info.report_info.abstract}}</div>
+                    
+                    <div :style="{backgroundColor:info.report_info.canvas_color||''}">
+                        <!-- 无版头板尾显示标题 -->
+                        <template v-if="(!info.report_info.head_img) && (!info.report_info.end_img)">
+                            <div class="title">{{formatTitle(info.report_info)}}</div>
+                            <div class="time">
+                                <span>FICC团队</span>
+                                <span>{{moment(info.report_info.publish_time).format('YYYY.MM.DD HH:mm')}}</span>
+                            </div>
+                        </template>
+
+                        <!-- 拼接版头 -->
+                        <div class="html-head-img-box" v-if="info.auth_ok&&info.report_info.head_img">
+                            <img :src="info.report_info.head_img" 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="flex tips" style="position:relative">
                             <div>
-                                <span>*注：请务必阅读</span>
-                                <span style="color:#F3A52F;margin-left:20px;cursor: pointer;" @click="showDisclaimers=true">免责声明</span>
+                                <div v-if="info.road_video_id">点击<span style="color: #F3A52F;cursor: pointer;" @click="goVideoPage(info)">查看视频</span></div>
+                                <div class="abstract" v-if="info.report_info.abstract">摘要：{{info.report_info.abstract}}</div>
+                                <div>
+                                    <span>*注：请务必阅读</span>
+                                    <span style="color:#F3A52F;margin-left:20px;cursor: pointer;" @click="showDisclaimers=true">免责声明</span>
+                                </div>
                             </div>
                         </div>
-                    </div>
-                    <!-- 音频模块 -->
-                    <AudioBox :data="audioData" v-if="info.report_info.video_url&&info.report_info.video_play_seconds>0"></AudioBox>
-                    <!-- <div class="abstract" v-if="info.report_info.abstract">摘要：{{info.report_info.abstract}}</div> -->
+                        <!-- 音频模块 -->
+                        <AudioBox :data="audioData" v-if="info.report_info.video_url&&info.report_info.video_play_seconds>0"></AudioBox>
 
-                    <div id="report-rich-content" class="no-select-text rich-content" ref="waterMarkEl">
-                        <!-- <div v-html="info.report_info.content" v-if="info.auth_ok"></div> -->
-                        <ReportContent :html="info.report_info.content" v-if="info.auth_ok"></ReportContent>
-                        <div v-html="info.report_info.content_sub" v-else></div>
-                        <!-- 隐藏的水印 -->
-                        <div class="hide-watermark-box">
-                            <div v-for="item in 20" :key="item">{{$store.state.userInfo.mobile}}</div>
+                        <div id="report-rich-content" class="no-select-text rich-content" ref="waterMarkEl">
+                            <ReportContent :html="info.report_info.content" v-if="info.auth_ok"></ReportContent>
+                            <div v-html="info.report_info.content_sub" v-else></div>
+                            <!-- 隐藏的水印 -->
+                            <div class="hide-watermark-box">
+                                <div v-for="item in 20" :key="item">{{$store.state.userInfo.mobile}}</div>
+                            </div>
                         </div>
+
+                        <!-- 拼接版尾 -->
+                        <div class="html-end-img-box" v-if="info.auth_ok&&info.report_info.end_img">
+                            <img :src="info.report_info.end_img" 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>
 
                     <!-- 评论点赞模块 -->
@@ -673,7 +722,7 @@ const closeShowAttentionPop=()=>{
                     </div>
                 </div>
             </div>
-            <div class="right-aside-box" v-if="info.auth_ok&&!(['晨报','周报'].includes(info.report_info.classify_name_first))">
+            <div class="right-aside-box" v-if="info.auth_ok&&!info.report_info.has_chapter">
                 <div class="fix-top">
                 <div class="share-box">
                     <div class="label">分享</div>
@@ -1096,4 +1145,15 @@ const closeShowAttentionPop=()=>{
     max-height: 60vh;
     overflow: auto;
 }
+
+.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
+    }
+}
 </style>

src/views/report/Index.vue

@@ -227,7 +227,8 @@ const formatAnnounceActivityTime=(start,end)=>{
 
 //跳转报告详情
 const handleGoReportDetail=(item)=>{
-  if(['晨报','周报'].includes(item.classify_name_first)){
+  // if(['晨报','周报'].includes(item.classify_name_first)){
+  if(item.report_chapter_id){
     router.push({
       path:'/report/chapterdetail',
       query:{

src/views/report/List.vue

@@ -141,7 +141,7 @@ onMounted(()=>{
 
 //播放音频
 const handlePlayAudio=(item)=>{
-    if(item.video_list){
+    if(item.video_list||item.video_url){
         if(store.state.audioData.reportId==item.report_id){
             if(store.state.audioData.paused){
                 store.state.audioData.INS.play()
@@ -150,13 +150,20 @@ const handlePlayAudio=(item)=>{
             }
             return
         }
-        const arr=item.video_list.map(_item=>{
-            return {
-                name:_item.video_name,
-                url:_item.video_url,
-                time:_item.video_play_seconds
-            }
-        })
+
+        let arr = [];
+        if(item.video_url) {
+            arr = [item.video_url]
+        }else {
+            arr=item.video_list.map(_item=>{
+                return {
+                    name:_item.video_name,
+                    url:_item.video_url,
+                    time:_item.video_play_seconds
+                }
+            })
+        }
+
         store.commit('addAudio',{
             list:arr,
             reportId:item.report_id,
@@ -180,7 +187,6 @@ onActivated(()=>{
         getReportList()
         getMenuList()
         // getFilterList()
-        getMenuList()
     }
     handleDataToXcx()
 })