12345添加水印

package.json

@@ -1,4 +1,4 @@
-{
+ {
   "name": "epmet-oper-gov",
   "version": "1.0.0",
   "private": true,

src/views/modules/shequzhili/Delivery/index.vue

@@ -74,6 +74,7 @@
             </div>
 
             <div class="m-table">
+              
                 <div class="div_btn">
 
                     <el-button @click="handleExport" class="diy-button--white" size="small">导出</el-button>
@@ -102,9 +103,11 @@
                         </el-dropdown-menu> -->
                     <!-- </el-dropdown> -->
                 </div>
+                <canvas id="watermarkCanvas" class="canvas">  </canvas>
                 <el-table :data="tableData" border class="m-table-item" style="width: 100%"
                     @selection-change="handleSelectionChange" :height="maxTableHeight">
-                    <el-table-column label="" fixed="left" type="selection" align="center" width="50" />
+                  
+                        <el-table-column label="" fixed="left" type="selection" align="center" width="50" />
                     <!-- <el-table-column label="序号" fixed="left" type="index" align="center" width="50" /> -->
 
                     <el-table-column prop="workOrderNum" align="center" label="工单编号" :show-overflow-tooltip="true">
@@ -177,6 +180,8 @@
                                 <el-button  @click="handleDel(scope.row)" type="text" size="small" >删除</el-button>
                         </template>
                     </el-table-column>
+               
+               
                 </el-table>
 
 
@@ -203,10 +208,7 @@ import eventInfo from "../event/cpts/event-info.vue";
 import axios from "axios";
 
 export default {
-
-
     data() {
-
         let orgOptionProps = {
             multiple: false,
             value: 'agencyId',
@@ -328,7 +330,9 @@ export default {
             selVoiceUrl: "",
             multipleSelection: [],
             importLoading: false,
-            importType: "1"
+            importType: "1",
+            phone:"",
+            realName:""
         };
     },
     components:{eventInfo},
@@ -355,15 +359,42 @@ export default {
         },
     },
     mounted() {
+        console.log(this.$store.state.user,"dslk;djklsg;ljk");
+        this.realName = this.$store.state.user.realName;
+        this.phone = this.$store.state.user.phone;
         this.user = this.$store.state.user;
         this.agencyId = this.user.agencyId;
-
+        this.getCanvas()
         this.getOrgTreeList()
         this.getGridList()
         this.getTableData();
         this.getCateOptions();
     },
     methods: {
+        getCanvas() {
+            var canvas = document.getElementById('watermarkCanvas');
+            var ctx = canvas.getContext('2d');
+            canvas.width = window.innerWidth ;  // 设置更高的分辨率
+            canvas.height = window.innerHeight ;
+            var watermarkText =  this.realName+ this.phone; //内容
+            ctx.font = '12px Arial'; //大小
+            ctx.fillStyle = 'rgba(0, 0, 255, 0.2)'; //颜色+透明度
+            // ctx.textBaseline = 'middle';
+            ctx.scale(2, 2);  // 缩放上下文以适应更高分辨率
+            var angle = -30 * Math.PI / 180;  // 旋转-30度
+            var x = canvas.width / 2;
+            var y = canvas.height / 2;
+            var space = 150;  // 水印间距
+            for (var i = 0; i < canvas.width; i += space) {
+                for (var j = 0; j < canvas.height; j += space) {
+                    ctx.save();
+                    ctx.translate(i, j);
+                    ctx.rotate(angle);
+                    ctx.fillText(watermarkText, 0, 0);
+                    ctx.restore();
+                }
+            }
+        },
         async handleDel(rowData) {
             let message = "确认删除?";
             this.$confirm(message, "提示", {
@@ -858,4 +889,15 @@ export default {
     font-size: 40px;
     color: #fff;
 }
+  .canvas {
+
+      width: 100%;
+      height: 100%;
+      z-index: 10;
+      position: absolute;
+      top: 0;
+      left: 0;
+      pointer-events: none;
+      /* 确保canvas不干扰其他元素 */
+  }
 </style>

src/views/modules/shequzhili/event/cpts/event-detail.vue

@@ -11,7 +11,9 @@
                     <el-button size="small" icon="el-icon-download">下载</el-button>
                 </div>
                 <div class="m-info">
+                  
                     <div class="flex">
+                        <canvas id="watermarkCanvas2" class="canvas">  </canvas>
                         <div class="item">
                             <div class="label">工单编号</div>
                             <div class="value">{{ info.workOrderNum }}</div>
@@ -157,6 +159,9 @@ export default {
     },
     mounted() {
         this.user = this.$store.state.user;
+        this.phone = this.$store.state.user.phone;
+        this.realName = this.$store.state.user.realName;
+        this.getCanvas()
         if (this.eventId) {
             this.info = JSON.parse(JSON.stringify(this.eventDetailData));
         }
@@ -170,6 +175,30 @@ export default {
     },
 
     methods: {
+        getCanvas() {
+            var canvas = document.getElementById('watermarkCanvas2');
+            var ctx = canvas.getContext('2d');
+            canvas.width = window.innerWidth ;  // 设置更高的分辨率
+            canvas.height = window.innerHeight ;
+            var watermarkText =  this.realName+ this.phone; //内容
+            ctx.font = '12px Arial'; //大小
+            ctx.fillStyle = 'rgba(0, 0, 255, 0.2)'; //颜色+透明度
+            // ctx.textBaseline = 'middle';
+            ctx.scale(2, 2);  // 缩放上下文以适应更高分辨率
+            var angle = -30 * Math.PI / 180;  // 旋转-30度
+            var x = canvas.width / 2;
+            var y = canvas.height / 2;
+            var space = 150;  // 水印间距
+            for (var i = 0; i < canvas.width; i += space) {
+                for (var j = 0; j < canvas.height; j += space) {
+                    ctx.save();
+                    ctx.translate(i, j);
+                    ctx.rotate(angle);
+                    ctx.fillText(watermarkText, 0, 0);
+                    ctx.restore();
+                }
+            }
+        },
         watchImg(src) {
             window.open(src);
         },
@@ -264,4 +293,14 @@ export default {
         margin-right: 10px;
     }
 }
+.canvas {
+width: 100%;
+height: 100%;
+z-index: 10;
+position: absolute;
+top: 0;
+left: 0;
+pointer-events: none;
+/* 确保canvas不干扰其他元素 */
+}
 </style>

src/views/modules/shequzhili/eventHandling/index.vue

@@ -91,9 +91,10 @@
                         </el-dropdown-menu>
                     </el-dropdown> -->
                 </div>
-
+                <canvas id="watermarkCanvas1" class="canvas">  </canvas>
                 <el-table :data="tableData" border class="m-table-item" style="width: 100%"
                     @selection-change="handleSelectionChange" :height="maxTableHeight">
+
                     <el-table-column label="" fixed="left" type="selection" align="center" width="50" />
                     <!-- <el-table-column label="序号" fixed="left" type="index" align="center" width="50" /> -->
 
@@ -208,7 +209,6 @@ export default {
             dialogVisible:"false",
             pageType: "list", // 列表list 新增add  处理dispose 详情info
             user: {},
-
             agencyId: "",
             orgOptions: [],
             orgOptionProps,
@@ -284,6 +284,8 @@ export default {
                 },
 
             ],
+            phone: "",
+            realName: "",
             formData: {
                 agencyId: "",
                 sourceType: "",
@@ -345,16 +347,41 @@ export default {
         },
     },
     mounted() {
+        this.realName = this.$store.state.user.realName;
+        this.phone = this.$store.state.user.phone;
         this.user = this.$store.state.user;
         this.agencyId = this.user.agencyId;
-
+        this.getCanvas()
         this.getOrgTreeList()
         this.getGridList()
         this.getTableData();
         this.getCateOptions();
     },
     methods: {
-       
+        getCanvas() {
+            var canvas = document.getElementById('watermarkCanvas1');
+            var ctx = canvas.getContext('2d');
+            canvas.width = window.innerWidth ;  // 设置更高的分辨率
+            canvas.height = window.innerHeight ;
+            var watermarkText =  this.realName+ this.phone; //内容
+            ctx.font = '12px Arial'; //大小
+            ctx.fillStyle = 'rgba(0, 0, 255, 0.2)'; //颜色+透明度
+            // ctx.textBaseline = 'middle';
+            ctx.scale(2, 2);  // 缩放上下文以适应更高分辨率
+            var angle = -30 * Math.PI / 180;  // 旋转-30度
+            var x = canvas.width / 2;
+            var y = canvas.height / 2;
+            var space = 150;  // 水印间距
+            for (var i = 0; i < canvas.width; i += space) {
+                for (var j = 0; j < canvas.height; j += space) {
+                    ctx.save();
+                    ctx.translate(i, j);
+                    ctx.rotate(angle);
+                    ctx.fillText(watermarkText, 0, 0);
+                    ctx.restore();
+                }
+            }
+        },
         handleSelectionChange(val) {
             this.multipleSelection = [];
             val.forEach((element) => {
@@ -795,4 +822,14 @@ export default {
     font-size: 40px;
     color: #fff;
 }
+.canvas {
+width: 100%;
+height: 100%;
+z-index: 10;
+position: absolute;
+top: 0;
+left: 0;
+pointer-events: none;
+/* 确保canvas不干扰其他元素 */
+}
 </style>

src/views/modules/shequzhili/peopleOpinons/opinionsDaily.vue

@@ -216,6 +216,8 @@ export default {
         }
 
         return {
+            phone: "",
+            realName: "",
             formData: {
                 openFlag:"",
                 publicationPeople:"",

src/views/modules/shequzhili/timeOut/index.vue

@@ -91,7 +91,7 @@
                         </el-dropdown-menu>
                     </el-dropdown> -->
                 </div>
-
+                <canvas id="watermarkCanvas3" class="canvas">  </canvas>
                 <el-table :data="tableData" border class="m-table-item" style="width: 100%"
                     @selection-change="handleSelectionChange" :height="maxTableHeight">
                     <el-table-column label="" fixed="left" type="selection" align="center" width="50" />
@@ -310,7 +310,9 @@ export default {
             selVoiceUrl: "",
             multipleSelection: [],
             importLoading: false,
-            importType: "1"
+            importType: "1",
+            phone: "",
+            realName: "",
         };
     },
     components: { Urging, eventInfo },
@@ -337,15 +339,41 @@ export default {
         },
     },
     mounted() {
+        this.phone = this.$store.state.user.phone;
+        this.realName = this.$store.state.user.realName;
         this.user = this.$store.state.user;
         this.agencyId = this.user.agencyId;
-
+        this.getCanvas()
         this.getOrgTreeList()
         this.getGridList()
         this.getTableData();
         this.getCateOptions();
     },
     methods: {
+        getCanvas() {
+            var canvas = document.getElementById('watermarkCanvas3');
+            var ctx = canvas.getContext('2d');
+            canvas.width = window.innerWidth ;  // 设置更高的分辨率
+            canvas.height = window.innerHeight ;
+            var watermarkText =  this.realName+ this.phone; //内容
+            ctx.font = '12px Arial'; //大小
+            ctx.fillStyle = 'rgba(0, 0, 255, 0.2)'; //颜色+透明度
+            // ctx.textBaseline = 'middle';
+            ctx.scale(2, 2);  // 缩放上下文以适应更高分辨率
+            var angle = -30 * Math.PI / 180;  // 旋转-30度
+            var x = canvas.width / 2;
+            var y = canvas.height / 2;
+            var space = 150;  // 水印间距
+            for (var i = 0; i < canvas.width; i += space) {
+                for (var j = 0; j < canvas.height; j += space) {
+                    ctx.save();
+                    ctx.translate(i, j);
+                    ctx.rotate(angle);
+                    ctx.fillText(watermarkText, 0, 0);
+                    ctx.restore();
+                }
+            }
+        },
         handleEventType(val) {
             const nodes = this.$refs.cascaderEvent.getCheckedNodes();
             this.formData.firstIdList = [];
@@ -837,4 +865,14 @@ export default {
     font-size: 40px;
     color: #fff;
 }
+.canvas {
+width: 100%;
+height: 100%;
+z-index: 10;
+position: absolute;
+top: 0;
+left: 0;
+pointer-events: none;
+/* 确保canvas不干扰其他元素 */
+}
 </style>