From 160272de5778bddbd8386f647258c95ecf9e02a5 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Tue, 19 Dec 2023 11:39:07 +0800
Subject: [PATCH] 水印处理
---
src/page/login/index.vue | 3
src/warterMarkVUE.js | 43 ++++-
src/page/index/layout.vue | 22 ++
src/page/index/index.vue | 265 ++++++++++++++++++++-----------------
src/App.vue | 29 ----
5 files changed, 189 insertions(+), 173 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index a5b920b..4a72c1d 100644
--- a/src/App.vue
+++ b/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">
diff --git a/src/page/index/index.vue b/src/page/index/index.vue
index 7e1ad9e..8c48b34 100644
--- a/src/page/index/index.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/page/index/layout.vue b/src/page/index/layout.vue
index 96976dd..f45c01f 100644
--- a/src/page/index/layout.vue
+++ b/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>
diff --git a/src/page/login/index.vue b/src/page/login/index.vue
index 625c5d7..87b8f01 100644
--- a/src/page/login/index.vue
+++ b/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()
},
diff --git a/src/warterMarkVUE.js b/src/warterMarkVUE.js
index d1e5537..bf147c6 100644
--- a/src/warterMarkVUE.js
+++ b/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;
--
Gitblit v1.9.3