添加测试环境水印

@@ -10,3 +10,4 @@ VUE_APP_RSA_PUBLIC_KEY = 'MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAxi7pNPRSc+
 VUE_APP_AES_IV = 'c5014a8dc3a341ac'
 VUE_APP_AES_IV = 'c5014a8dc3a341ac'
 VUE_APP_TOKEN_KEY = 'kd_template_token'
 VUE_APP_TOKEN_KEY = 'kd_template_token'
 VUE_APP_IS_POST_ENC = true
 VUE_APP_IS_POST_ENC = true
+VUE_APP_WATER_MARK = true
\ No newline at end of file

@@ -11,3 +11,4 @@ VUE_APP_RSA_PUBLIC_KEY = 'MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAxi7pNPRSc+
 VUE_APP_AES_IV = 'c5014a8dc3a341ac'
 VUE_APP_AES_IV = 'c5014a8dc3a341ac'
 VUE_APP_TOKEN_KEY = 'kd_template_token'
 VUE_APP_TOKEN_KEY = 'kd_template_token'
 VUE_APP_IS_POST_ENC = true
 VUE_APP_IS_POST_ENC = true
+VUE_APP_WATER_MARK = true
\ No newline at end of file

@@ -11,3 +11,4 @@ VUE_APP_RSA_PUBLIC_KEY = 'MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAxi7pNPRSc+
 VUE_APP_AES_IV = 'c5014a8dc3a341ac'
 VUE_APP_AES_IV = 'c5014a8dc3a341ac'
 VUE_APP_TOKEN_KEY = 'kd_template_token'
 VUE_APP_TOKEN_KEY = 'kd_template_token'
 VUE_APP_IS_POST_ENC = true
 VUE_APP_IS_POST_ENC = true
+VUE_APP_WATER_MARK = true
\ No newline at end of file

@@ -8,6 +8,39 @@
   </div>
   </div>
 </template>
 </template>
 
 
+<script>
+import { setWaterMark } from "@/utils/watermark";
+
+export default {
+  name: "App",
+  data() {
+    return {};
+  },
+  methods: {
+    /**
+     * 192.168.3.2:8080
+     * 显示测试服水印
+     * 1、根据kd的环境
+     * host中含dev或者sandbox的为测试环境
+     * 2、VUE_APP_WATER_MARK设置为true
+     */
+    initWaterMark() {
+      let host = location.host;
+      if (
+        process.env.VUE_APP_WATER_MARK &&
+        (host.indexOf("dev") != -1 || host.indexOf("sandbox") != -1)
+      ) {
+        setWaterMark("测试服", "");
+      }
+    },
+  },
+  mounted() {
+    console.log("111");
+    this.initWaterMark();
+  },
+};
+</script>
+
 <style lang="scss">
 <style lang="scss">
 #app {
 #app {
   /* font-family: 'Avenir', Helvetica, Arial, sans-serif;
   /* font-family: 'Avenir', Helvetica, Arial, sans-serif;
@@ -32,10 +65,6 @@ div {
   width: 750px;
   width: 750px;
 }
 }
 
 
-.app__width {
-  width: 750px;
-}
-
 .app__inner {
 .app__inner {
   margin: 20px;
   margin: 20px;
 }
 }

@@ -14,12 +14,9 @@ import {
 
 
 import 'amfe-flexible/index.js'
 import 'amfe-flexible/index.js'
 
 
-import '@/styles/index.scss' // global css
-
-import '@/styles/index.scss' // global css
+// import '@/styles/index.scss' // global css
 import '@/styles/fonticon.scss' //  图标字体
 import '@/styles/fonticon.scss' //  图标字体
 import '@/assets/fonts/font.scss' //  字体引入
 import '@/assets/fonts/font.scss' //  字体引入
-
 // import '@styles/utils.scss' /*引入公共样式*/
 // import '@styles/utils.scss' /*引入公共样式*/
 
 
 Vue.config.productionTip = false
 Vue.config.productionTip = false

@@ -23,7 +23,7 @@ export default {
         }
         }
     },
     },
     mounted() {
     mounted() {
-        this.queryArea();
+        // this.queryArea();
     },
     },
     created() {}
     created() {}
 }
 }
\ No newline at end of file

+/**  水印添加方法  */
+
+let setWatermark = (str1, str2) => {
+    let id = '1.23452384164.123412415'
+
+    if (document.getElementById(id) !== null) {
+        document.body.removeChild(document.getElementById(id))
+    }
+
+    let can = document.createElement('canvas')
+    // 设置canvas画布大小
+    can.width = 150
+    can.height = 80
+
+    let cans = can.getContext('2d')
+    cans.rotate(-20 * Math.PI / 180) // 水印旋转角度
+    cans.font = '15px Vedana'
+    cans.fillStyle = '#666666'
+    cans.textAlign = 'center'
+    cans.textBaseline = 'Middle'
+    cans.fillText(str1, can.width / 2, can.height) // 水印在画布的位置x，y轴
+    cans.fillText(str2, can.width / 2, can.height + 22)
+
+    let div = document.createElement('div')
+    div.id = id
+    div.style.pointerEvents = 'none'
+    div.style.top = '40px'
+    div.style.left = '0px'
+    div.style.opacity = '0.15'
+    div.style.position = 'fixed'
+    div.style.zIndex = '100000'
+    div.style.width = document.documentElement.clientWidth + 'px'
+    div.style.height = document.documentElement.clientHeight + 'px'
+    div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'
+    document.body.appendChild(div)
+    return id
+}
+
+// 添加水印方法
+export const setWaterMark = (str1, str2) => {
+    let id = setWatermark(str1, str2)
+    if (document.getElementById(id) === null) {
+        id = setWatermark(str1, str2)
+    }
+}
+
+// 移除水印方法
+export const removeWatermark = () => {
+    let id = '1.23452384164.123412415'
+    if (document.getElementById(id) !== null) {
+        document.body.removeChild(document.getElementById(id))
+    }
+}
\ No newline at end of file