|
|
@@ -0,0 +1,346 @@
|
|
|
+<!-- 原项目丢了 省事直接cv一下老项目代码 -->
|
|
|
+<template>
|
|
|
+ <div class="wrapper" ref="wrapper">
|
|
|
+ <div id="reportdtl" v-if="isshow">
|
|
|
+ <header>
|
|
|
+ <p>
|
|
|
+ <span style="margin-left: -0.45rem"
|
|
|
+ >【第{{ 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="playcon" v-if="reportInfo.VideoUrl">
|
|
|
+ <div>
|
|
|
+ <img
|
|
|
+ src="~@/assets/img/pauseImg.png"
|
|
|
+ style="width: 2rem; height: 2rem; float: left; margin-right: 0.4rem"
|
|
|
+ />
|
|
|
+ <p
|
|
|
+ style="
|
|
|
+ font-size: 0.64rem;
|
|
|
+ line-height: 1rem;
|
|
|
+ color: #333;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ {{ reportInfo.VideoName }}
|
|
|
+ </p>
|
|
|
+ <p style="font-size: 0.56rem; line-height: 1rem; color: #878787">
|
|
|
+ {{ parseInt(reportInfo.VideoPlaySeconds / 60) }}分{{
|
|
|
+ parseInt(reportInfo.VideoPlaySeconds % 60)
|
|
|
+ }}秒
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div id="abstract">
|
|
|
+ <div class="abstract_cont">
|
|
|
+ <div>摘要：{{ reportInfo.Abstract }}</div>
|
|
|
+ <div style="color: #666; margin-top: 1.2rem">
|
|
|
+ *注：请务必阅读 <strong
|
|
|
+ style="font-weight: normal; cursor: pointer; color: #3e8ce6"
|
|
|
+ >免责声明</strong
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="padding: 0.6rem; box-sizing: border-box; overflow: hidden">
|
|
|
+ <!-- 晨报周报 -->
|
|
|
+ <div class="chapter-wrap" v-if="reportInfo.HasChapter===1">
|
|
|
+ <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>
|
|
|
+ </div>
|
|
|
+ <div id="resetcss" style="overflow:hidden;" v-else>
|
|
|
+ <div v-html="reportInfo.Content"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {
|
|
|
+ reportDetail,
|
|
|
+} 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: {},
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ updated() {
|
|
|
+ // $('#resetcss').css({font:"0.76rem/1.5 '微软雅黑'",color:"#333",letterSpacing:"0.05rem"});
|
|
|
+ $("#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 'PingFang-SC-Regular'",
|
|
|
+ color: "#333",
|
|
|
+ letterSpacing: "0.08rem",
|
|
|
+ lineHeight: "1.3rem",
|
|
|
+ });
|
|
|
+ /* $("#resetcss")
|
|
|
+ .find("span")
|
|
|
+ .css({
|
|
|
+ font: "0.7rem/1.5 'PingFang-SC-Regular'",
|
|
|
+ letterSpacing: "0.08rem",
|
|
|
+ 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" });
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getreportdetail();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ 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;
|
|
|
+ //水印
|
|
|
+ localStorage.setItem('waterMarkStr',this.$route.query.flag||'')
|
|
|
+ const temwaterMarkStr=this.$route.query.flag||localStorage.getItem('waterMarkStr')
|
|
|
+ let waterMarkStr=Base64.decode(temwaterMarkStr)
|
|
|
+ waterMarkStr=decodeURIComponent(waterMarkStr)
|
|
|
+ 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">
|
|
|
+.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;
|
|
|
+ header {
|
|
|
+ padding: 0.6rem;
|
|
|
+ box-sizing: border-box;
|
|
|
+ text-align: left;
|
|
|
+ background: #fff;
|
|
|
+ p {
|
|
|
+ font-size: 0.84rem;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ #playcon {
|
|
|
+ padding: 0 0.6rem;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #fff;
|
|
|
+ overflow: hidden;
|
|
|
+ > div {
|
|
|
+ width: 100%;
|
|
|
+ height: 2.96rem;
|
|
|
+ padding: 0.48rem 0.6rem;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #f1f1f1;
|
|
|
+ border-radius: 0.2rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ #abstract {
|
|
|
+ padding: 0.6rem;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-size: 0.7rem;
|
|
|
+ line-height: 1.4rem;
|
|
|
+ letter-spacing: 0.1rem;
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ .no-wrap{
|
|
|
+ page-break-inside: avoid;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .chapter-wrap{
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
hbchen