haozq
/
ah_jjzhgd_webservice
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

水印修改

This commit is contained in:
cwchen 2024-09-20 15:43:30 +08:00
parent 2a7929bfb3
commit 4fc76650c0
7 changed files with 227 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
ah-jjzhgd-web/src/App.vue
View File

@ -6,38 +6,38 @@
<script>
import { removeWatermark, setWaterMark } from "@/utils/waterMark";
import {decryptData} from '@/utils/test';
import { decryptData } from '@/utils/test';
export default {
name: 'App',
created() {
this.loadWaterMark();
// this.loadWaterMark();
},
updated(){
removeWatermark();
this.loadWaterMark();
updated() {
// removeWatermark();
// this.loadWaterMark();
},
mounted() {
window.onresize = () => {
/* window.onresize = () => {
removeWatermark();
this.loadWaterMark();
}
} */
},
methods: {
loadWaterMark() {
//设置水印内容，这段代码实现的是两行文本内容的水印。
const nickName = sessionStorage.getItem('nickName');
const roleName = sessionStorage.getItem('roleName');
let str1 = nickName ? decryptData(nickName) : '';
let str2 = roleName ? decryptData(roleName) : '';
let str3 = '建设部';
if(nickName || roleName){
setWaterMark(str1, str2,str3);
}
//设置水印内容，这段代码实现的是两行文本内容的水印。
const nickName = sessionStorage.getItem('nickName');
const roleName = sessionStorage.getItem('roleName');
let str1 = nickName ? decryptData(nickName) : '';
let str2 = roleName ? decryptData(roleName) : '';
let str3 = '建设部';
if (nickName || roleName) {
setWaterMark(str1, str2, str3);
}
},
},
destroyed() {
removeWatermark();
// removeWatermark();
},
}
</script>

109
ah-jjzhgd-web/src/utils/waterMark.js
View File

@ -1,51 +1,66 @@
/** 水印添加方法 */
let setWatermark = (str1, str2,str3) => {
let id = '1.23452384164.123412415'
if (document.getElementById(id) !== null) {
document.body.removeChild(document.getElementById(id))
}
let can = document.createElement('canvas')
// 设置canvas画布大小
can.width = 200
can.height = 100
let cans = can.getContext('2d')
cans.rotate(-30 * Math.PI / 180) // 水印旋转角度
cans.font = '16px Microsoft Yahei'
cans.fillStyle = '#333333'
cans.textAlign = 'center'
cans.textBaseline = 'Middle'
cans.fillText(str1, can.width / 2, can.height) // 水印在画布的位置x，y轴
cans.fillText(str2, can.width / 2, can.height + 20)
cans.fillText(str3, can.width / 2, can.height + 40)
let div = document.createElement('div')
div.id = id
div.style.pointerEvents = 'none'
div.style.top = '0px'
div.style.left = '0px'
div.style.opacity = '0.3'
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
let setWatermark = (str1, str2, str3, sourceBody) => {
let id = "1.23452384164.123412415";
if (document.getElementById(id) !== null) {
document.body.removeChild(document.getElementById(id));
}
// 添加水印方法
export const setWaterMark = (str1, str2,str3) => {
let id = setWatermark(str1, str2,str3)
if (document.getElementById(id) === null) {
id = setWatermark(str1, str2,str3)
let can = document.createElement("canvas");
// 设置canvas画布大小
can.width = 200;
can.height = 100;
let cans = can.getContext("2d");
cans.rotate((-35 * Math.PI) / 180); // 水印旋转角度
cans.font = "16px Microsoft Yahei";
cans.fillStyle = "#333333";
cans.textAlign = "center";
cans.textBaseline = "Middle";
cans.fillText(str1, can.width / 3, can.height); // 水印在画布的位置x，y轴
cans.fillText(str2, can.width / 3, can.height + 20);
cans.fillText(str3, can.width / 3, can.height + 40);
let div = document.createElement("div");
div.id = id;
div.style.pointerEvents = "none";
div.style.opacity = "0.3";
div.style.zIndex = "100000";
div.style.background =
"url(" + can.toDataURL("image/png") + ") left top repeat";
if (sourceBody) {
div.style.width = sourceBody.clientWidth + "px";
div.style.height = sourceBody.clientHeight + "px";
div.style.top = "200px";
div.style.left = "640px";
div.style.position = "fixed";
sourceBody.appendChild(div);
} else {
div.style.top = "0px";
div.style.left = "0px";
div.style.position = "fixed";
div.style.width = document.documentElement.clientWidth + "px";
div.style.height = document.documentElement.clientHeight + "px";
document.body.appendChild(div);
}
return id;
};
// 添加水印方法
export const setWaterMark = (str1, str2, str3, sourceBody) => {
let id = setWatermark(str1, str2, str3, sourceBody);
if (document.getElementById(id) === null) {
id = setWatermark(str1, str2, str3, sourceBody);
}
};
// 移除水印方法
export const removeWatermark = (sourceBody) => {
let id = "1.23452384164.123412415";
if (document.getElementById(id) !== null) {
if (sourceBody) {
sourceBody.removeChild(document.getElementById(id));
} else {
document.body.removeChild(document.getElementById(id));
}
}
// 移除水印方法
export const removeWatermark = () => {
let id = '1.23452384164.123412415'
if (document.getElementById(id) !== null) {
document.body.removeChild(document.getElementById(id))
}
}
};

31
ah-jjzhgd-web/src/views/system/dict/index.vue
View File

@ -28,6 +28,7 @@
</div>
<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="600px">
<div ref="content">
<el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="80px"
style="width: 400px; margin-left:50px;">
<el-form-item label="上级节点" prop="type">
@ -47,8 +48,9 @@
<el-input v-model="temp.remarks" :maxlength="100" type="textarea" placeholder="请输入备注" />
</el-form-item>
</el-form>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">
<el-button @click="closeDialog">
关闭
</el-button>
<el-button type="primary" @click="dialogStatus === 'create' ? addDict() : updateDict()">
@ -78,6 +80,8 @@ import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { delUser } from '@/api/user'
import { verifyPwd } from '@/api/verifyPwd'
import modulDialog from '@/components/pwdVerifiers/pwdVerifiers.vue'
import { removeWatermark, setWaterMark } from "@/utils/waterMark";
import {decryptData} from '@/utils/test';
export default {
components: { Pagination, Treeselect,modulDialog },
directives: { waves },
@ -124,7 +128,29 @@ export default {
this.getList()
this.fetchDictList()
},
mounted() {
window.onresize = () => {
removeWatermark(this.$refs.content);
this.loadWaterMark();
}
},
methods: {
closeDialog(){
removeWatermark(this.$refs.content);
this.dialogFormVisible = false
},
loadWaterMark() {
//设置水印内容，这段代码实现的是两行文本内容的水印。
const nickName = sessionStorage.getItem('nickName');
const roleName = sessionStorage.getItem('roleName');
let str1 = nickName ? decryptData(nickName) : '';
let str2 = roleName ? decryptData(roleName) : '';
let str3 = '建设部';
if (nickName || roleName) {
setWaterMark(str1, str2, str3,this.$refs.content);
}
},
openModulDialog(title, modulName, width, openFalg) {
this.componentDialog.title = title
this.componentDialog.modulName = modulName
@ -224,6 +250,9 @@ export default {
}
this.temp = response.data
})
this.$nextTick(() => {
this.loadWaterMark();
})
},
updateDict() {
this.$refs['dataForm'].validate((valid) => {

29
ah-jjzhgd-web/src/views/system/menu/index.vue
View File

@ -75,6 +75,7 @@
</el-table>
<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="600px">
<div ref="content">
<el-form
ref="dataForm"
:rules="rules"
@ -123,8 +124,9 @@
/>
</el-form-item>
</el-form>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false"> 关闭 </el-button>
<el-button @click="closeDialog"> 关闭 </el-button>
<el-button type="primary" @click="dialogStatus === 'create' ? createData() : updateData()">
提交
</el-button>
@ -148,6 +150,8 @@ import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import IconSelect from '@/components/IconSelect'
import { verifyPwd } from '@/api/verifyPwd'
import modulDialog from '@/components/pwdVerifiers/pwdVerifiers.vue'
import { removeWatermark, setWaterMark } from "@/utils/waterMark";
import {decryptData} from '@/utils/test';
const menuTypeArr = [
{
value: '0',
@ -226,7 +230,29 @@ export default {
this.getList()
this.getMenuList()
},
mounted() {
window.onresize = () => {
removeWatermark(this.$refs.content);
this.loadWaterMark();
}
},
methods: {
closeDialog(){
removeWatermark(this.$refs.content);
this.dialogFormVisible = false
},
loadWaterMark() {
//设置水印内容，这段代码实现的是两行文本内容的水印。
const nickName = sessionStorage.getItem('nickName');
const roleName = sessionStorage.getItem('roleName');
let str1 = nickName ? decryptData(nickName) : '';
let str2 = roleName ? decryptData(roleName) : '';
let str3 = '建设部';
if (nickName || roleName) {
setWaterMark(str1, str2, str3,this.$refs.content);
}
},
openModulDialog(title, modulName, width, openFalg) {
this.componentDialog.title = title
this.componentDialog.modulName = modulName
@ -336,6 +362,7 @@ export default {
this.$nextTick(() => {
this.temp.menuId = null
this.$refs['dataForm'].resetFields()
this.loadWaterMark();
})
},
updateData() {

31
ah-jjzhgd-web/src/views/system/org/index.vue
View File

@ -28,6 +28,7 @@
</div>
<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="600px">
<div ref="content">
<el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="80px" style="width: 400px; margin-left:50px;">
<el-form-item label="上级节点" prop="type">
<treeselect v-model="temp.pId" :options="orgList" :show-count="true" placeholder="请选择组织机构" />
@ -42,8 +43,9 @@
<el-input v-model="temp.bName" placeholder="组织机构别名" />
</el-form-item>
</el-form>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">
<el-button @click="closeDialog">
关闭
</el-button>
<el-button type="primary" @click="dialogStatus==='create'?addOrg():updateOrg()">
@ -67,6 +69,8 @@ import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { verifyPwd } from '@/api/verifyPwd'
import modulDialog from '@/components/pwdVerifiers/pwdVerifiers.vue'
import { removeWatermark, setWaterMark } from "@/utils/waterMark";
import {decryptData} from '@/utils/test';
export default {
components: { Pagination, Treeselect,modulDialog },
directives: { waves },
@ -111,7 +115,29 @@ export default {
this.getList()
this.fetchOrgList()
},
mounted() {
window.onresize = () => {
removeWatermark(this.$refs.content);
this.loadWaterMark();
}
},
methods: {
closeDialog(){
removeWatermark(this.$refs.content);
this.dialogFormVisible = false
},
loadWaterMark() {
//设置水印内容，这段代码实现的是两行文本内容的水印。
const nickName = sessionStorage.getItem('nickName');
const roleName = sessionStorage.getItem('roleName');
let str1 = nickName ? decryptData(nickName) : '';
let str2 = roleName ? decryptData(roleName) : '';
let str3 = '建设部';
if (nickName || roleName) {
setWaterMark(str1, str2, str3,this.$refs.content);
}
},
openModulDialog(title, modulName, width, openFalg) {
this.componentDialog.title = title
this.componentDialog.modulName = modulName
@ -210,6 +236,9 @@ export default {
}
this.temp = response.data
})
this.$nextTick(() => {
this.loadWaterMark();
})
},
updateOrg() {
this.$refs['dataForm'].validate((valid) => {

29
ah-jjzhgd-web/src/views/system/roles/index.vue
View File

@ -76,6 +76,7 @@
/>
<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="600px">
<div ref="content">
<el-form
ref="dataForm"
:rules="rules"
@ -91,8 +92,9 @@
<el-input-number v-model="temp.roleSort" :min="1" :max="1000" controls-position="right" />
</el-form-item>
</el-form>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false"> 关闭 </el-button>
<el-button @click="closeDialog"> 关闭 </el-button>
<el-button type="primary" @click="dialogStatus === 'create' ? createData() : updateData()">
提交
</el-button>
@ -135,6 +137,8 @@ import { parseTime } from '@/utils'
import Pagination from '@/components/Pagination'
import { verifyPwd } from '@/api/verifyPwd'
import modulDialog from '@/components/pwdVerifiers/pwdVerifiers.vue'
import { removeWatermark, setWaterMark } from "@/utils/waterMark";
import {decryptData} from '@/utils/test';
export default {
components: { Pagination,modulDialog },
directives: { waves },
@ -192,7 +196,29 @@ export default {
this.getList()
this.getMenuList()
},
mounted() {
window.onresize = () => {
removeWatermark(this.$refs.content);
this.loadWaterMark();
}
},
methods: {
closeDialog(){
removeWatermark(this.$refs.content);
this.dialogFormVisible = false
},
loadWaterMark() {
//设置水印内容，这段代码实现的是两行文本内容的水印。
const nickName = sessionStorage.getItem('nickName');
const roleName = sessionStorage.getItem('roleName');
let str1 = nickName ? decryptData(nickName) : '';
let str2 = roleName ? decryptData(roleName) : '';
let str3 = '建设部';
if (nickName || roleName) {
setWaterMark(str1, str2, str3,this.$refs.content);
}
},
openModulDialog(title, modulName, width, openFalg) {
this.componentDialog.title = title
this.componentDialog.modulName = modulName
@ -297,6 +323,7 @@ export default {
this.$nextTick(() => {
this.temp.roleId = null
this.$refs['dataForm'].resetFields()
this.loadWaterMark();
})
},
updateData() {

33
ah-jjzhgd-web/src/views/system/user/index.vue
View File

@ -53,7 +53,8 @@
@pagination="getList" />
<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="600px">
<el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="80px"
<div ref="content">
<el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="80px"
style="width: 400px; margin-left: 50px">
<el-form-item label="用户名" prop="userName">
<el-input v-model="temp.userName" placeholder="用户名" :maxlength="30" />
@ -98,12 +99,15 @@
</el-radio-group>
</el-form-item>
</el-form>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false"> 关闭 </el-button>
<el-button @click="closeDialog"> 关闭 </el-button>
<el-button type="primary" @click="dialogStatus === 'create' ? createData() : updateData()">
提交
</el-button>
</div>
</el-dialog>
<el-dialog title="重置密码" :visible.sync="dialogFormVisible2" width="600px">
@ -143,6 +147,7 @@ import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import modulDialog from '@/components/pwdVerifiers/pwdVerifiers.vue'
import {decryptData} from '@/utils/test';
import {desensitize} from '@/utils/hyposensitization.js';
import { removeWatermark, setWaterMark } from "@/utils/waterMark";
const loginTypeArr = [
{
value: '1',
@ -288,7 +293,29 @@ export default {
this.getRoleList()
this.getBuildList()
},
mounted() {
window.onresize = () => {
removeWatermark(this.$refs.content);
this.loadWaterMark();
}
},
methods: {
closeDialog(){
removeWatermark(this.$refs.content);
this.dialogFormVisible = false
},
loadWaterMark() {
//设置水印内容，这段代码实现的是两行文本内容的水印。
const nickName = sessionStorage.getItem('nickName');
const roleName = sessionStorage.getItem('roleName');
let str1 = nickName ? decryptData(nickName) : '';
let str2 = roleName ? decryptData(roleName) : '';
let str3 = '建设部';
if (nickName || roleName) {
setWaterMark(str1, str2, str3,this.$refs.content);
}
},
phoneFormatter(row, column, cellValue, index){
if(row.phone){
let phone = decryptData(row.phone).replace(/\/g, '');
@ -416,6 +443,7 @@ export default {
this.openModulDialog('验证密码', 'pwdVerifiers', '600px', true)
},
isOpenEditDialog(){
let row = this.checkRow;
getUserById({ userId: row.userId }).then((response) => {
this.temp = Object.assign({}, response.data)
@ -434,6 +462,7 @@ export default {
this.$nextTick(() => {
this.temp.roleId = null
this.$refs['dataForm'].resetFields()
this.loadWaterMark();
})
},
updateData() {