commit

src/layout/Index.vue

@@ -12,7 +12,7 @@ const route= useRoute()
 getUserInfo()
 
 const isShowAslide = computed(() => {
-	return !['/etaChart/favorite','/etaChart/favorite'].includes(route.path)
+	return !['/etaChart/favorite','/etaReport/favorite'].includes(route.path)
 })
 
 const dynamicStyle = computed(() => {

src/views/report/Detail.vue

@@ -4,6 +4,7 @@ import moment from 'moment'
 import { useRoute, useRouter } from 'vue-router'
 import { apiEtaReport,apiEtaReportCollect } from '@/api/etaReport'
 import { useUserInfo } from '@/hooks/useUserInfo'
+import {apiSystemCommon} from '@/api/system'
 import { ChevronLeftIcon } from 'tdesign-icons-vue-next'
 import { MessagePlugin } from 'tdesign-vue-next'
 import AudioBox from './components/AudioBox.vue'
@@ -11,13 +12,12 @@ import ReportContent from './components/ReportContent.vue'
 import ChapterWrap from './components/ChapterWrap.vue'
 import Disclaimer from './components/Disclaimer.vue'
 import CollectReport from '../user/favorite/components/CollectReport.vue' 
+import { async } from '@antv/x6/lib/registry/marker/async'
 
 
 const router = useRouter()
 const route = useRoute()
 
-const { userInfo }=useUserInfo()
-
 let audioData=ref({})
 const info = ref({})
 const chapterList = ref([])
@@ -58,6 +58,8 @@ async function getReportDetail (){
     if(chapterList.value.length) {
       handleChangeChapter(chapterList.value[0])
     }
+
+    setWaterMark()
         
 }
 
@@ -78,12 +80,54 @@ async function getChapterDetail(id=null) {
     reportId:chapterInfo.value.Id
   }
 
+  setWaterMark()
+
 }
 function initGet() {
   route.query.chapterId ? getChapterDetail() : getReportDetail()
 }
 initGet()
 
+async function setWaterMark() {
+  const res=await apiSystemCommon.userInfo()
+
+  const options = {
+      text: res.Data?.Mobile||'',
+      fontSize: '14px',
+      color: '#999',
+      rotate: -40,
+      opacity: 0.2,
+      gapX: 180,
+      gapY: 120
+  };
+
+    // 创建 canvas 绘制水印图案
+    const canvas = document.createElement('canvas');
+    canvas.width = options.gapX;
+    canvas.height = options.gapY;
+    const ctx = canvas.getContext('2d');
+
+    ctx.save();
+    ctx.globalAlpha = options.opacity;
+    ctx.font = `${options.fontSize} Arial`;
+    ctx.fillStyle = options.color;
+    ctx.translate(canvas.width / 2, canvas.height / 2);
+    ctx.rotate((options.rotate * Math.PI) / 180);
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillText(options.text, 0, 0);
+    ctx.restore();
+
+    // 转换为 base64 图片
+    const base64Url = canvas.toDataURL('image/png');
+
+    // 设置背景样式
+    const el = document.getElementsByClassName('report-wrapper')[0];
+    el.style.backgroundImage = `url(${base64Url})`;
+    el.style.backgroundRepeat = 'repeat';
+    el.style.backgroundSize = `${options.gapX}px ${options.gapY}px`;
+}
+
 
 const selectChapterId = ref(0)
 function handleChangeChapter(item) {
@@ -228,10 +272,6 @@ onUnmounted(() => {
               v-if="chapterInfo.Content"
               :html="chapterInfo.Content"
             ></ReportContent>
-              <!-- 水印 -->
-              <div class="hide-watermark-box">
-                  <div v-for="item in 20" :key="item">{{userInfo?.Mobile}}</div>
-              </div>
           </div>
         </div>
 
@@ -288,10 +328,6 @@ onUnmounted(() => {
               v-if="info.Content"
               :html="info.Content"
             ></ReportContent>
-              <!-- 水印 -->
-              <div class="hide-watermark-box">
-                  <div v-for="item in 20" :key="item">{{userInfo?.Mobile}}</div>
-              </div>
           </div>
 
           <!-- 拼接版尾 -->
@@ -377,6 +413,7 @@ onUnmounted(() => {
     margin: 0 auto;
     padding-bottom: 20px;
     overflow: hidden;
+    position: relative;
     &.chapter-detail {
       padding-left: 230px;
       max-width: none;

src/views/user/favorite/etaReport.vue

@@ -32,6 +32,12 @@ async function getReportClassify() {
 getReportClassify()
 
 
+const colors = [ '#49517E','#DB4E2A','#53B3FF','#FBA730','#00C1CF','#8A4294' ]
+function getColor(index) {
+  return colors[index] || '#49517E'
+}
+
+
 const classifyId=ref(0)
 // const SysUserIds=ref([])
 const list=ref([])
@@ -166,7 +172,12 @@ async function handleCancelCollect(item,index){
                 <div class="right-info">
                   <div class="c-stage flex">
                     <div>
-                      <t-tag theme="primary" v-if="item.PermissionNames">{{item.PermissionNames[0]}}</t-tag>
+                      <t-tag 
+                        theme="primary" 
+                        v-for="(tag,index) in item.PermissionNames" 
+                        :key="tag"
+                        :style="`background: ${getColor(index)}`"
+                      >{{tag}}</t-tag>
                       {{ `第${item.Stage}期` }}
                       | {{ item.ClassifyName }}
 
@@ -219,6 +230,7 @@ async function handleCancelCollect(item,index){
   }
   .report-list-wrap {
     flex: 1;
+    height: calc(100vh - 180px);
     overflow-y: auto;
     .content-item {
       padding: 20px;