|
|
@@ -0,0 +1,230 @@
|
|
|
+<template>
|
|
|
+ <div id="reportdtl" v-if="isshow">
|
|
|
+ <header>{{reportInfo.Title}}</header>
|
|
|
+ <div style="padding:0 35px 0; box-sizing:border-box; color:#666; font-size:24px; overflow:hidden;">
|
|
|
+ <span>{{reportInfo.Author}}</span>
|
|
|
+ <span style="float:right;">{{reportInfo.PublishTime}}</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div id="abstract">
|
|
|
+ <div>摘要：{{reportInfo.Abstract}}</div>
|
|
|
+ </div>
|
|
|
+ <div id="resetsty" style="padding:30px; box-sizing:border-box; overflow:hidden;">
|
|
|
+ <block v-if="reportInfo.ChapterType=='day'||reportInfo.ChapterType=='week'">
|
|
|
+ <div class="chapter-item" v-for="item in reportInfo.ChapterList" :key="item.ReportChapterId">
|
|
|
+ <div style="margin-bottom:10px">
|
|
|
+ <span class="type">{{item.TypeName}}</span>
|
|
|
+ <span class="title">{{item.Title}}</span>
|
|
|
+ </div>
|
|
|
+ <div id="resetcss" style="overflow:hidden;" v-html="item.Content"></div>
|
|
|
+ </div>
|
|
|
+ </block>
|
|
|
+ <block v-else>
|
|
|
+ <div id="resetcss" style="overflow:hidden;" v-html="reportInfo.Content"></div>
|
|
|
+ </block>
|
|
|
+ </div>
|
|
|
+ <div v-if="linkUrl" style="width:100px;height30px;position:absolute;right:-100px;top:100px;cursor:pointer;">
|
|
|
+ <div v-permission="$route.query.fromPage==='en'
|
|
|
+ ?permissionBtn.enReportManageBtn.enReport_reportView_copyWechat
|
|
|
+ :permissionBtn.reportManageBtn.reportManage_reportView_copyWechat"
|
|
|
+ style="display:flex;alignItems:center;color:#333;" :data-clipboard-text='linkUrl' @click="copyHandle" class="copy">
|
|
|
+ <img src="../../assets/img/icons/cop.png" alt="" style="width:30px;height:30px;marginRight:10px;">复制链接
|
|
|
+ </div>
|
|
|
+ <div v-permission="$route.query.fromPage==='en'
|
|
|
+ ?permissionBtn.enReportManageBtn.enReport_reportView_wechatShare
|
|
|
+ :permissionBtn.reportManageBtn.reportManage_reportView_wechartShare"
|
|
|
+ style="display:flex;alignItems:center;color:#333;marginTop:20px;" @mouseenter="isShowCode=true" @mouseleave="isShowCode=false">
|
|
|
+ <img src="../../assets/img/icons/wechat.png" alt="" style="width:30px;height:30px;marginRight:10px;">微信分享
|
|
|
+ </div>
|
|
|
+ <vue-qr :text="linkUrl" :margin="0" colorDark="#333" colorLight="#fff" :dotScale="1" :size="100" style="position:absolute;right:0;top:100px;" v-if="isShowCode"></vue-qr>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import { reportdetail,departInterence } from 'api/api.js';
|
|
|
+ import http from '@/api/http.js';
|
|
|
+ import * as reportEnInterface from '@/api/modules/reportEnApi';
|
|
|
+ import {strategyReportInterence} from '@/api/api.js'
|
|
|
+ import vueQr from 'vue-qr'
|
|
|
+ export default {
|
|
|
+ computed: {
|
|
|
+ linkUrl(){
|
|
|
+ let str=''
|
|
|
+ const baseUrl= localStorage.getItem('dynamicOutLinks') ? JSON.parse(localStorage.getItem('dynamicOutLinks')).ReportViewUrl : '';
|
|
|
+ if(this.$route.query.code){
|
|
|
+ // 设置水印文案
|
|
|
+ let waterMarkStr=''
|
|
|
+ if(this.systemUserInfo){
|
|
|
+ waterMarkStr=`${this.systemUserInfo.RealName}${this.systemUserInfo.Mobile?this.systemUserInfo.Mobile:this.systemUserInfo.Email}`
|
|
|
+ const base64=new http.Base64()
|
|
|
+ waterMarkStr=encodeURIComponent(waterMarkStr)
|
|
|
+ waterMarkStr=base64.encode(waterMarkStr)
|
|
|
+ }
|
|
|
+
|
|
|
+ if(this.$route.query.fromPage == 'en'){
|
|
|
+ str=`${baseUrl}/reportshare_crm_report_en?code=${this.$route.query.code}&flag=${waterMarkStr}`
|
|
|
+ }else{
|
|
|
+ str=`${baseUrl}/reportshare_crm_report?code=${this.$route.query.code}&flag=${waterMarkStr}`
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return str
|
|
|
+ }
|
|
|
+ },
|
|
|
+ props:{
|
|
|
+ reportId:{ //审批详情-预览报告
|
|
|
+ type:Number,
|
|
|
+ default:0
|
|
|
+ },
|
|
|
+ isEn:{
|
|
|
+ type:Boolean,
|
|
|
+ default:false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ id:parseInt(this.$route.query.id),
|
|
|
+ isshow:false,
|
|
|
+ reportInfo:{},
|
|
|
+ isShowCode:false,
|
|
|
+
|
|
|
+ systemUserInfo:null,
|
|
|
+ // linkUrl:this.$route.query.code?'https://share.hzinsights.com/reportdtl?code='+this.$route.query.code:''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ vueQr
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ if(this.$route.query.id||this.reportId) {
|
|
|
+ this.getreportdetail();
|
|
|
+ }else {
|
|
|
+ let reportdtl=sessionStorage.getItem('reportdtl') || false;
|
|
|
+ this.reportInfo=JSON.parse(reportdtl);
|
|
|
+ console.info("reportInfo");
|
|
|
+ console.log(this.reportInfo);
|
|
|
+ this.isshow=true;
|
|
|
+ }
|
|
|
+ this.getSystemUserInfo()
|
|
|
+ },
|
|
|
+ updated(){
|
|
|
+ $('#resetcss').find('img').css({display:'block',margin:'0 auto'});
|
|
|
+ $('#resetcss').find('video').css({display:'block',margin:'0 auto'});
|
|
|
+ $("#resetcss").find("pre").css({display: "block",whiteSpace: "pre-wrap"});
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getSystemUserInfo(){
|
|
|
+ departInterence.systemUserInfo().then(res=>{
|
|
|
+ if(res.Ret===200){
|
|
|
+ this.systemUserInfo=res.Data
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ async getreportdetail(){
|
|
|
+ let res
|
|
|
+ let reportId = this.id||this.reportId
|
|
|
+ this.$emit("reportStartLoading")
|
|
|
+ if((this.$route.query.fromPage == 'en'||this.isEn)){
|
|
|
+ res=await reportEnInterface.reportDetail({ReportId:parseInt(reportId)})
|
|
|
+ }else if(this.$route.query.fromPage == 'strategyReport'){
|
|
|
+ res=await strategyReportInterence.getReportDetail({Id:parseInt(reportId)})
|
|
|
+ }else{
|
|
|
+ res=await reportdetail({ReportId:parseInt(reportId)})
|
|
|
+ }
|
|
|
+ this.$emit("reportEndLoading")
|
|
|
+ if( res.Ret!==200 ){
|
|
|
+ this.$emit("reportError")
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ this.reportInfo=res.Data;
|
|
|
+ this.isshow=true;
|
|
|
+ },
|
|
|
+ /* 复制链接 */
|
|
|
+ copyHandle() {
|
|
|
+ var clipboard = new this.Clipboard('.copy')
|
|
|
+ clipboard.on('success', e => {
|
|
|
+ this.$message.success(/* '复制链接成功' */this.$t('Chart.OptMsg.copy_link_success'))
|
|
|
+ e.clearSelection() // 释放内存
|
|
|
+ clipboard.destroy()
|
|
|
+ })
|
|
|
+ // // 浏览器不支持
|
|
|
+ clipboard.on('error', e => {
|
|
|
+ this.$message.warning(/* '浏览器暂不支持' */this.$t('MsgPrompt.browser_not_support'))
|
|
|
+ // 释放内存
|
|
|
+ clipboard.destroy()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ #reportdtl{ background:#fff; max-width:1200px; margin:10px auto;position:relative;
|
|
|
+ img{ display:'block'; width:'100%'; margin:'0 auto'; }
|
|
|
+ header{ padding:10px 30px; box-sizing:border-box; font-size:28px; font-weight:500; color:#333; background:#fff; }
|
|
|
+ #abstract{ padding:10px 30px 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; }
|
|
|
+ }
|
|
|
+ #resetsty{
|
|
|
+ img{ display:block; max-width:100%; height:auto; margin:0 auto; }
|
|
|
+ }
|
|
|
+ table{ border-top:1px solid #eaeaea; border-left:1px solid #eaeaea; border-collapse:collapse;
|
|
|
+ th,td{ border-right:1px solid #eaeaea; border-bottom:1px solid #eaeaea; padding:5px 10px; box-sizing:border-box; }
|
|
|
+ }
|
|
|
+
|
|
|
+ .chapter-item{
|
|
|
+ margin-bottom: 20px;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ border-bottom: 1px dashed #ccc;
|
|
|
+ .type{
|
|
|
+ font-size: 15px;
|
|
|
+ color: #fff;
|
|
|
+ padding: 5px 10px;
|
|
|
+ background-color: #E6A23C;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+ .title{
|
|
|
+ font-size: 15px;
|
|
|
+ margin-left: 10px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ #abstract-en{
|
|
|
+ margin:35px 35px;
|
|
|
+ padding:20px;
|
|
|
+ background-color: rgba(77, 130, 191, 0.1);
|
|
|
+ border: 1px solid #E2E2E2;
|
|
|
+ .abstract{
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 600;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ border-bottom: 1px solid #C1C1C1;
|
|
|
+ }
|
|
|
+ #overview{
|
|
|
+ margin-top:20px;
|
|
|
+ font-size: 24px;
|
|
|
+ .overview{
|
|
|
+ margin-top:20px;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ #resetcss{
|
|
|
+ p{
|
|
|
+ font-size: 18px !important;
|
|
|
+ }
|
|
|
+ span{
|
|
|
+ font-size: 18px !important;
|
|
|
+ }
|
|
|
+ ul,ol {
|
|
|
+ list-style-position: inside !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ @media (max-width:1400px) {
|
|
|
+ margin-right: 100px;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
