水印处理

shuishen

2023-12-19 160272de5778bddbd8386f647258c95ecf9e02a5

水印处理

 src/App.vue

@@ -5,36 +5,7 @@
</template>

<script>
import Watermark from "./warterMarkVUE"
import { getStore } from "@/util/store"

export default {
    name: "app",
    data () {
        return {
            globalUserInfo: getStore({ name: "userInfo" }),
        }
    },
    watch: {},
    created () {
        Watermark.set("饶城格格通" + ' ' + this.globalUserInfo.user_name + ' ' + this.getTime())
    },
    mounted () {
    },
    methods: {
        getTime () {
            var date = new Date()
            var Y = date.getFullYear() + '-'
            var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
            var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
            var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
            var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
            var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
            return Y + M + D + h + m + s
        },
    },
    computed: {}
}
</script>

<style lang="scss">

 src/page/index/index.vue

@@ -1,143 +1,158 @@
<template>
  <div class="avue-contail" :class="{'avue--collapse':isCollapse}">
    <div class="avue-header">
      <!-- 顶部导航栏 -->
      <top ref="top"/>
    </div>
    <div class="avue-layout">
      <div class="avue-left">
        <!-- 左侧导航栏 -->
        <sidebar/>
      </div>
      <div class="avue-main">
        <!-- 顶部标签卡 -->
        <tags/>
        <transition name="fade-scale">
          <search class="avue-view" v-show="isSearch"></search>
        </transition>
        <!-- 主体视图层 -->
        <div style="height:100%;overflow-y:auto;overflow-x:hidden;" id="avue-view" v-show="!isSearch">
          <keep-alive>
            <router-view class="avue-view" v-if="$route.meta.keepAlive"/>
          </keep-alive>
          <router-view class="avue-view" v-if="!$route.meta.keepAlive"/>
    <div class="avue-contail" :class="{ 'avue--collapse': isCollapse }">
        <div class="avue-header">
            <!-- 顶部导航栏 -->
            <top ref="top" />
        </div>
      </div>
        <div class="avue-layout">
            <div class="avue-left">
                <!-- 左侧导航栏 -->
                <sidebar />
            </div>
            <div class="avue-main">
                <!-- 顶部标签卡 -->
                <tags />
                <transition name="fade-scale">
                    <search class="avue-view" v-show="isSearch"></search>
                </transition>
                <!-- 主体视图层 -->
                <div style="height:100%;overflow-y:auto;overflow-x:hidden;" id="avue-view" v-show="!isSearch">
                    <keep-alive>
                        <router-view class="avue-view" v-if="$route.meta.keepAlive" />
                    </keep-alive>
                    <router-view class="avue-view" v-if="!$route.meta.keepAlive" />
                </div>
            </div>
        </div>
        <div class="avue-shade" @click="showCollapse"></div>
    </div>
    <div class="avue-shade" @click="showCollapse"></div>
  </div>
</template>

<script>
  import {mapGetters} from "vuex";
  import tags from "./tags";
  import search from "./search";
  import top from "./top/";
  import sidebar from "./sidebar/";
  import admin from "@/util/admin";
  import {validatenull} from "@/util/validate";
  import {calcDate} from "@/util/date.js";
  import {getStore} from "@/util/store.js";
import Watermark from "@/warterMarkVUE"
import { mapGetters } from "vuex"
import tags from "./tags"
import search from "./search"
import top from "./top/"
import sidebar from "./sidebar/"
import admin from "@/util/admin"
import { validatenull } from "@/util/validate"
import { calcDate } from "@/util/date.js"
import { getStore } from "@/util/store.js"

  export default {
export default {
    components: {
      top,
      tags,
      search,
      sidebar
        top,
        tags,
        search,
        sidebar
    },
    name: "index",
    provide() {
      return {
        index: this
      };
    provide () {
        return {
            index: this
        }
    },
    data() {
      return {
        //搜索控制
        isSearch: false,
        //刷新token锁
        refreshLock: false,
        //刷新token的时间
        refreshTime: ""
      };
    data () {
        return {
            //搜索控制
            isSearch: false,
            //刷新token锁
            refreshLock: false,
            //刷新token的时间
            refreshTime: "",
            globalUserInfo: getStore({ name: "userInfo" }),
        }
    },
    created() {
      //实时检测刷新token
      this.refreshToken();
    created () {
        Watermark.set("饶城格格通" + ' ' + this.globalUserInfo.user_name + ' ' + this.getTime())

        //实时检测刷新token
        this.refreshToken()
    },
    mounted() {
      this.init();
    mounted () {
        this.init()
    },
    computed: mapGetters(["isMenu", "isLock", "isCollapse", "website", "menu"]),
    props: [],
    methods: {
      showCollapse() {
        this.$store.commit("SET_COLLAPSE");
      },
      // 初始化
      init() {
        this.$store.commit("SET_SCREEN", admin.getScreen());
        window.onresize = () => {
          setTimeout(() => {
            this.$store.commit("SET_SCREEN", admin.getScreen());
          }, 0);
        };
        this.$store.dispatch("FlowRoutes").then(() => {
        });
      },
      //打开菜单
      openMenu(item = {}) {
        this.$store.dispatch("GetMenu", item.id).then(data => {
          if (data.length !== 0) {
            this.$router.$avueRouter.formatRoutes(data, true);
          }
          //当点击顶部菜单后默认打开第一个菜单
          /*if (!this.validatenull(item)) {
            let itemActive = {},
              childItemActive = 0;
            if (item.path) {
              itemActive = item;
            } else {
              if (this.menu[childItemActive].length === 0) {
                itemActive = this.menu[childItemActive];
              } else {
                itemActive = this.menu[childItemActive].children[childItemActive];
              }
            }
            this.$store.commit('SET_MENU_ID', item);
            this.$router.push({
              path: this.$router.$avueRouter.getPath({
                name: (itemActive.label || itemActive.name),
                src: itemActive.path
              }, itemActive.meta)
            });
          }*/

        });
      },
      // 定时检测token
      refreshToken() {
        this.refreshTime = setInterval(() => {
          const token = getStore({
            name: "token",
            debug: true
          }) || {};
          const date = calcDate(token.datetime, new Date().getTime());
          if (validatenull(date)) return;
          if (date.seconds >= this.website.tokenTime && !this.refreshLock) {
            this.refreshLock = true;
            this.$store
              .dispatch("refreshToken")
              .then(() => {
                this.refreshLock = false;
              })
              .catch(() => {
                this.refreshLock = false;
              });
          }
        }, 10000);
      }
    methods: {
        getTime () {
            var date = new Date()
            var Y = date.getFullYear() + '-'
            var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
            var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
            var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
            var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
            var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
            return Y + M + D + h + m + s
        },
        showCollapse () {
            this.$store.commit("SET_COLLAPSE")
        },
        // 初始化
        init () {
            this.$store.commit("SET_SCREEN", admin.getScreen())
            window.onresize = () => {
                setTimeout(() => {
                    this.$store.commit("SET_SCREEN", admin.getScreen())
                }, 0)
            }
            this.$store.dispatch("FlowRoutes").then(() => {
            })
        },
        //打开菜单
        openMenu (item = {}) {
            this.$store.dispatch("GetMenu", item.id).then(data => {
                if (data.length !== 0) {
                    this.$router.$avueRouter.formatRoutes(data, true)
                }
                //当点击顶部菜单后默认打开第一个菜单
                /*if (!this.validatenull(item)) {
                  let itemActive = {},
                    childItemActive = 0;
                  if (item.path) {
                    itemActive = item;
                  } else {
                    if (this.menu[childItemActive].length === 0) {
                      itemActive = this.menu[childItemActive];
                    } else {
                      itemActive = this.menu[childItemActive].children[childItemActive];
                    }
                  }
                  this.$store.commit('SET_MENU_ID', item);
                  this.$router.push({
                    path: this.$router.$avueRouter.getPath({
                      name: (itemActive.label || itemActive.name),
                      src: itemActive.path
                    }, itemActive.meta)
                  });
                }*/

            })
        },
        // 定时检测token
        refreshToken () {
            this.refreshTime = setInterval(() => {
                const token = getStore({
                    name: "token",
                    debug: true
                }) || {}
                const date = calcDate(token.datetime, new Date().getTime())
                if (validatenull(date)) return
                if (date.seconds >= this.website.tokenTime && !this.refreshLock) {
                    this.refreshLock = true
                    this.$store
                        .dispatch("refreshToken")
                        .then(() => {
                            this.refreshLock = false
                        })
                        .catch(() => {
                            this.refreshLock = false
                        })
                }
            }, 10000)
        }
    }
  };
</script>
}
</script>

 src/page/index/layout.vue

@@ -1,8 +1,18 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-12-14 17:10:00
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-12-19 11:23:09
 * @FilePath: \jczz_web\src\page\index\layout.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by shuishen, All Rights Reserved. 
-->
<template>
  <div>
    <keep-alive>
      <router-view class="avue-view" v-if="$route.meta.keepAlive" />
    </keep-alive>
    <router-view class="avue-view" v-if="!$route.meta.keepAlive" />
  </div>
    <div>
        <keep-alive>
            <router-view class="avue-view" v-if="$route.meta.keepAlive" />
        </keep-alive>
        <router-view class="avue-view" v-if="!$route.meta.keepAlive" />
    </div>
</template>

 src/page/login/index.vue

@@ -33,6 +33,7 @@
    </div>
</template>
<script>
import Watermark from "@/warterMarkVUE"
import userLogin from "./userlogin"
import codeLogin from "./codelogin"
import thirdLogin from "./thirdlogin"
@@ -70,6 +71,8 @@
        }
    },
    created () {
        Watermark.remove()

        this.handleLogin()
        this.getTime()
    },

 src/warterMarkVUE.js

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-12-18 11:02:55
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-12-18 17:55:12
 * @LastEditTime: 2023-12-19 11:37:53
 * @FilePath: \jczz_web\src\warterMarkVUE.js
 * @Description:
 *
@@ -10,10 +10,16 @@
 */
/*水印配置*/
//声明
let id = "1.23452384164.123412415";
let watermark = {};
let time,
  textStr = "";

function handleResize() {
  setWatermark(textStr);
}
//水印配置
let setWatermark = (str) => {
  let id = "1.23452384164.123412415";
  // 移除水印 判断
  if (document.getElementById(id) !== null) {
    document.body.removeChild(document.getElementById(id));
@@ -22,18 +28,18 @@
  //创建画布
  let createCanvas = document.createElement("canvas");
  // 设置canvas画布大小
  createCanvas.width = 320; //宽度
  createCanvas.height = 200; //高度
  createCanvas.width = 340; //宽度
  createCanvas.height = 160; //高度

  //创建Context2D对象作为2D渲染的上下文。
  let Context2D = createCanvas.getContext("2d");
  /*水印样式调整配置*/
  Context2D.rotate((-20 * Math.PI) / 100); // 水印旋转角度
  Context2D.rotate((-10 * Math.PI) / 100); // 水印旋转角度
  Context2D.font = "16px Vedana"; //水印文字大小
  Context2D.fillStyle = "#fff"; //水印颜色 HEX格式,可使用red 或者rgb格式
  Context2D.fillStyle = "#999"; //水印颜色 HEX格式,可使用red 或者rgb格式
  Context2D.textAlign = "center"; //水印水平位置
  Context2D.textBaseline = "Middle"; //水印垂直位置
  Context2D.fillText(str, createCanvas.width / 3.2, createCanvas.height / 1);
  Context2D.fillText(str, createCanvas.width / 2.4, createCanvas.height / 1);

  //创建元素
  let createDiv = document.createElement("div");
@@ -50,24 +56,35 @@
  createDiv.style.background =
    "url(" +
    createCanvas.toDataURL("image/png") +
    ") left top repeat, rgba(0, 0, 0, 0.3)"; //水印显示(关键代码)
    ") left top repeat, rgba(0, 0, 0, 0.01)"; //水印显示(关键代码)
  document.body.appendChild(createDiv); //在指定元素节点的最后一个子节点之后添加节点
  return id;
};

// 此方法只允许调用一次
watermark.set = (str) => {
  textStr = str;
  let id = setWatermark(str);
  //设置间隔
  setInterval(() => {
  time = setInterval(() => {
    if (document.getElementById(id) === null) {
      id = setWatermark(str);
    }
  }, 500);
  //改变大小时执行
  window.onresize = () => {
    setWatermark(str);
  };
  // 添加 resize 事件处理函数
  window.addEventListener("resize", handleResize);
};

watermark.remove = () => {
  var element = document.getElementById(id);
  // 删除元素
  if (element !== null) {
    clearInterval(time);

    window.removeEventListener("resize", handleResize);

    element.parentNode.removeChild(element);
  }
};

export default watermark;