feat: 用 privateConfig.js SHOW_WATERMARK字段控制是否显示水印

public/index.html

@@ -194,6 +194,7 @@
   <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script> -->
   <script type="text/javascript" src="<%=htmlWebpackPlugin.options.publicPath%>static/privateConfig.js"></script>
   <script type="text/javascript" src="../src/assets/js/crypto-js.js"></script>
+  <script type="text/javascript" src="../src/assets/js/privateConfig.js"></script>
   <script type="text/javascript" src="<%=htmlWebpackPlugin.options.publicPath%>static/crypto-js.js"></script>
 
   <script type="text/javascript" src="<%=htmlWebpackPlugin.options.publicPath%>static/jquery-1.11.0.min.js"></script>

src/assets/js/privateConfig.js

@@ -3,5 +3,6 @@ window.privateConfig = {
   publicPath: '',
   mock: false,
   CDN_BASE: '',
+  SHOW_WATERMARK:false,//是否显示水印
   IS_SSO_LOGIN: false //是否是采用单点登录方式
 }

src/pages/gvc/view.jsx

@@ -2,7 +2,7 @@
  * @Author: dayan_hjm  产供销价值链
  * @Date: 2023-11-10 10:19:34 
  * @Last Modified by: dayan_hjm
- * @Last Modified time: 2023-12-27 14:18:06
+ * @Last Modified time: 2024-01-22 14:26:38
  */
 
 import React, { useState, useEffect, Component } from "react";
@@ -24,10 +24,10 @@ import {
 } from "./api";
 import MapViewTwo from "./component/mapView2.jsx";
 import mpVideoGvc from "@assets/imgs/dataVimg/videoGvc2.mp4";
-import { getThousandNum,deleteCacheAndChangeUrl } from "@utils/util";
-
+import { getThousandNum,deleteCacheAndChangeUrl,timestampToTime,setWaterMark } from "@utils/util";
 import 'animate.css';
 import { get } from "lodash";
+import $store from "@store/";
 
 @withRouter
 
@@ -62,11 +62,15 @@ class Gvc extends Component {
     } else {
       await checkToken(sessionStorage.getItem("tqcVToken")).then(({ data, resultCode }) => {
         if (data?.userId) {
-          // this.props.history.push('/')
+          sessionStorage.setItem("tqcUserName", data?.userId);
+          $store.app.setMarkSrc(
+            setWaterMark({
+              toDataURL: true,
+              waterMarkText: [data?.userId || sessionStorage.getItem("tqcUserName"),timestampToTime()],
+            })
+          );
         } else {
           window.location = window.location.origin + '/transfer.html#/login';
-
-          // this.props.history.replace("/home/index");
         }
       });
     }
@@ -390,6 +394,10 @@ class Gvc extends Component {
     let { LeftHtml, updateTime, changGif } = this.state;
     return (
       <div className={[styles.gvc_home + ' home_box ']}>
+        {/* 水印 */}
+        {
+          window.privateConfig && window.privateConfig.SHOW_WATERMARK && <div className={"shuiYin"} style={{ backgroundImage: `url(${$store.app.markSrc})`, backgroundRepeat: 'repeat' }}></div>
+        }
         {/* 右键切换大屏 */}
         <Tooltip placement="bottom" title={"数据运营中心"}>
           <img src={require("@assets/imgs/iconJpg/rightJ.png").default} alt="" className={"rightJ_png"} onClick={() => {

src/pages/tqcDataVHome/view.jsx

@@ -2,7 +2,7 @@
  * @Author: dayan_hjm 
  * @Date: 2023-10-25 10:32:44 
  * @Last Modified by: dayan_hjm
- * @Last Modified time: 2024-01-02 10:42:01
+ * @Last Modified time: 2024-01-22 14:26:36
  */
 /*
  * @Author: dayan_hjm 
@@ -24,13 +24,14 @@ import LeftMenoyView from "./component/leftMenoyView.jsx";
 import RightBottomView from "./component/rightBottomView.jsx";
 import OneQualified from "./component/oneQualified.jsx";
 import MapView from "./component/mapView.jsx";
+import $store from "@store/";
 import {
   timeService,
   numberService,
   checkToken,
   updateTimeService
 } from "./api";
-import { getThousandNum, deleteCacheAndChangeUrl } from "@utils/util";
+import { getThousandNum, deleteCacheAndChangeUrl,timestampToTime,setWaterMark  } from "@utils/util";
 import {
   fullscreen,
 } from "@ant-design/icons";
@@ -67,7 +68,13 @@ class Home extends Component {
     } else {
       await checkToken(sessionStorage.getItem("tqcVToken")).then(({ data, resultCode }) => {
         if (data?.userId) {
-          // this.props.history.push('/')
+          sessionStorage.setItem("tqcUserName", data?.userId);
+          $store.app.setMarkSrc(
+            setWaterMark({
+              toDataURL: true,
+              waterMarkText: [data?.userId || sessionStorage.getItem("tqcUserName"),timestampToTime()],
+            })
+          );
         } else {
           window.location = window.location.origin + '/transfer.html#/login';
           // this.props.history.replace("/home/index");
@@ -248,6 +255,10 @@ class Home extends Component {
     let { changGif, updateTime, changNun } = this.state;
     return (
       <div className={"home_box"}>
+        {/* 水印 */}
+        {
+          window.privateConfig && window.privateConfig.SHOW_WATERMARK && <div className={"shuiYin"} style={{ backgroundImage: `url(${$store.app.markSrc})`, backgroundRepeat: 'repeat' }}></div>
+        }
         {/* 右键切换大屏 */}
         <Tooltip placement="bottom" title={"产供销价值链"}>
           <img src={require("@assets/imgs/iconJpg/rightJ.png").default} alt="" className={"rightJ_png"} onClick={() => {

src/utils/util.js

@@ -220,7 +220,7 @@ export function setWaterMark(option = {}) {
     eleId = "",
     toImg = false,
     toDataURL = false,
-    rotate = 45,
+    rotate = 30,
     color = "rgba(180, 180, 180, 0.2)",
     // color='red',
     fontSize = 12,
@@ -248,8 +248,8 @@ export function setWaterMark(option = {}) {
   //   Math.sqrt((horizontalWidth * horizontalWidth) / 2) + fontSize;
   // horizontalWidth = horizontalWidth;
 
-  canvas.width = horizontalWidth * 1 + 20;
-  canvas.height = horizontalWidth * 1 + 20;
+  canvas.width = horizontalWidth * 1 + 50;
+  canvas.height = horizontalWidth * 1 + 50;
   ctx.textAlign = "center";
   ctx.textBaseline = "middle";
   ctx.fillStyle = color;
@@ -266,7 +266,7 @@ export function setWaterMark(option = {}) {
 
   arr.map((item, index) => {
     ctx.beginPath();
-    draw(item, horizontalWidth / 2 - 20, index * 20 + horizontalWidth / 2 - 20);
+    draw(item, horizontalWidth / 2 - 30, index * 30 + horizontalWidth / 2 - 30);
 
     // ctx.fillText(item, index * 100, index * 100);
     ctx.closePath();