水印相关功能
This commit is contained in:
a0049873
parent
2c69d3829b
commit
65894066b5
|
|
@ -1,8 +1,8 @@
|
|||
<!--
|
||||
* @Author: hisense.wuhongjian
|
||||
* @Date: 2022-05-06 11:12:00
|
||||
* @LastEditors: hisense.wuhongjian
|
||||
* @LastEditTime: 2022-08-03 10:13:59
|
||||
* @LastEditors: Light
|
||||
* @LastEditTime: 2022-11-16 10:21:49
|
||||
* @Description: 告诉大家这是什么
|
||||
-->
|
||||
<template>
|
||||
|
|
@ -13,56 +13,138 @@
|
|||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import zhCN from 'ant-design-vue/es/locale/zh_CN'
|
||||
import Cookies from 'js-cookie'
|
||||
import { onBeforeUnmount } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
const router = useRouter()
|
||||
import onWholeWaterMark from '@/utils/waterMark'
|
||||
import * as moment from 'moment'
|
||||
import { getUser } from '@/api/home'
|
||||
import { getCategoryTreePage } from '@/api/personalCenter'
|
||||
import zhCN from 'ant-design-vue/es/locale/zh_CN'
|
||||
import Cookies from 'js-cookie'
|
||||
import { onBeforeUnmount, onMounted, watch, nextTick } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
const router = useRouter()
|
||||
|
||||
const locale = zhCN
|
||||
const token = Cookies.get('ucsToken')
|
||||
console.log('token=================>', token)
|
||||
let ws = new WebSocket(
|
||||
`ws://${window.SITE_CONFIG['websocketURL']}/websocket?token=${token}`
|
||||
)
|
||||
// ws.send()给服务器发送信息
|
||||
// 服务器每次返回信息都会执行一次onmessage方法
|
||||
ws.onmessage = function (e) {
|
||||
console.log('WebSocket服务器返回的信息: ' + e.data)
|
||||
mybus.emit('getMynotice')
|
||||
// 判断当前路由是否是消息中心
|
||||
if (router.currentRoute.value.name === 'mynoticeView') {
|
||||
mybus.emit('noticeListInit')
|
||||
}
|
||||
}
|
||||
ws.onerror = function (e) {
|
||||
console.log('WebSocket连接异常============================>', e)
|
||||
ws = new WebSocket(
|
||||
const locale = zhCN
|
||||
const token = Cookies.get('ucsToken')
|
||||
console.log('token=================>', token)
|
||||
let ws = new WebSocket(
|
||||
`ws://${window.SITE_CONFIG['websocketURL']}/websocket?token=${token}`
|
||||
)
|
||||
}
|
||||
ws.onclose = function (e) {
|
||||
console.log('WebSocket连接断开============================>', e)
|
||||
}
|
||||
onBeforeUnmount(() => {
|
||||
// 4.卸载前, 关闭链接
|
||||
ws.close()
|
||||
})
|
||||
// ws.send()给服务器发送信息
|
||||
// 服务器每次返回信息都会执行一次onmessage方法
|
||||
ws.onmessage = function (e) {
|
||||
console.log('WebSocket服务器返回的信息: ' + e.data)
|
||||
mybus.emit('getMynotice')
|
||||
// 判断当前路由是否是消息中心
|
||||
if (router.currentRoute.value.name === 'mynoticeView') {
|
||||
mybus.emit('noticeListInit')
|
||||
}
|
||||
}
|
||||
ws.onerror = function (e) {
|
||||
console.log('WebSocket连接异常============================>', e)
|
||||
ws = new WebSocket(
|
||||
`ws://${window.SITE_CONFIG['websocketURL']}/websocket?token=${token}`
|
||||
)
|
||||
}
|
||||
ws.onclose = function (e) {
|
||||
console.log('WebSocket连接断开============================>', e)
|
||||
}
|
||||
let realName = '默认水印'
|
||||
const arr = []
|
||||
const changeWaterMark = (newValue) => {
|
||||
console.log('监听', newValue, arr)
|
||||
if (document.getElementById(realName.charCodeAt())) {
|
||||
if (arr.indexOf(newValue) > -1) {
|
||||
document.getElementById(realName.charCodeAt()).style.opacity = 1
|
||||
document.getElementById(
|
||||
moment().format('YYYY-MM-DD').charCodeAt()
|
||||
).style.opacity = 1
|
||||
} else {
|
||||
document.getElementById(realName.charCodeAt()).style.opacity = 0
|
||||
document.getElementById(
|
||||
moment().format('YYYY-MM-DD').charCodeAt()
|
||||
).style.opacity = 0
|
||||
}
|
||||
} else if (document.getElementById('默认水印'.charCodeAt())) {
|
||||
if (arr.indexOf(newValue) > -1) {
|
||||
document.getElementById('默认水印'.charCodeAt()).style.opacity = 1
|
||||
document.getElementById(
|
||||
moment().format('YYYY-MM-DD').charCodeAt()
|
||||
).style.opacity = 1
|
||||
} else {
|
||||
document.getElementById('默认水印'.charCodeAt()).style.opacity = 0
|
||||
document.getElementById(
|
||||
moment().format('YYYY-MM-DD').charCodeAt()
|
||||
).style.opacity = 0
|
||||
}
|
||||
}
|
||||
}
|
||||
const waterMarkInit = (newValue) => {
|
||||
getUser().then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
realName = res.data.data.realName
|
||||
}
|
||||
onWholeWaterMark(
|
||||
[realName, moment().format('YYYY-MM-DD')],
|
||||
600,
|
||||
300,
|
||||
30,
|
||||
50
|
||||
)
|
||||
getCategoryTreePage({
|
||||
page: 1,
|
||||
limit: 999,
|
||||
dictTypeId: '1592357067014803457',
|
||||
}).then((res) => {
|
||||
arr.length = 0
|
||||
res.data.data.list.map((val) => {
|
||||
arr.push(val.dictValue)
|
||||
})
|
||||
if (newValue) {
|
||||
changeWaterMark(newValue)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
watch(
|
||||
() => router.currentRoute.value.path,
|
||||
(newValue, oldValue) => {
|
||||
console.log(
|
||||
'路由变化',
|
||||
newValue,
|
||||
oldValue,
|
||||
realName,
|
||||
realName.charCodeAt()
|
||||
)
|
||||
// 如果刚登陆 初始化水印
|
||||
if (oldValue == '/login' || oldValue == '/') {
|
||||
waterMarkInit(newValue)
|
||||
}
|
||||
changeWaterMark(newValue)
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
onMounted(() => {
|
||||
waterMarkInit()
|
||||
})
|
||||
onBeforeUnmount(() => {
|
||||
// 4.卸载前, 关闭链接
|
||||
ws.close()
|
||||
})
|
||||
</script>
|
||||
<style lang="less">
|
||||
@import '~@/vab/styles/vab.less';
|
||||
@import '~@/vab/styles/vab.less';
|
||||
|
||||
#vue-admin-beautiful {
|
||||
max-width: 1920px;
|
||||
// max-height: 1080px;
|
||||
margin: auto;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
}
|
||||
#vue-admin-beautiful {
|
||||
max-width: 1920px;
|
||||
// max-height: 1080px;
|
||||
margin: auto;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 0.14rem;
|
||||
}
|
||||
body {
|
||||
font-size: 0.14rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,69 @@
|
|||
/*
|
||||
* @Author: Light
|
||||
* @Date: 2022-11-14 15:01:54
|
||||
* @LastEditors: Light
|
||||
* @LastEditTime: 2022-11-16 09:57:28
|
||||
* @Description: 水印
|
||||
*/
|
||||
const watermark = {
|
||||
timer: null,
|
||||
set: () => {},
|
||||
}
|
||||
const setWatermark = (str, width, height, size, top, index) => {
|
||||
console.log('生成水印')
|
||||
const id = str.charCodeAt()
|
||||
if (document.getElementById(id) !== null) {
|
||||
document.body.removeChild(document.getElementById(id))
|
||||
}
|
||||
const can = document.createElement('canvas')
|
||||
can.width = width
|
||||
can.height = height
|
||||
|
||||
const cans = can.getContext('2d')
|
||||
cans.rotate((-20 * Math.PI) / 180)
|
||||
cans.font = size + 'px Microsoft YaHei'
|
||||
cans.fillStyle = 'rgba(200, 200, 200, 0.4)'
|
||||
cans.textAlign = 'left'
|
||||
cans.textBaseline = 'middle'
|
||||
cans.fillText(str, can.width / 3, can.height / 2)
|
||||
|
||||
const WATER_MARK = document.createElement('div')
|
||||
const ALL_WIDTH = document.documentElement.clientWidth + 'px'
|
||||
const ALL_HEIGHT = document.documentElement.clientHeight + 'px'
|
||||
|
||||
WATER_MARK.id = id
|
||||
WATER_MARK.style.cssText = `
|
||||
position: fixed;
|
||||
top: ${index * top}px;
|
||||
left: 0;
|
||||
zIndex: 99999999;
|
||||
pointer-events: none;
|
||||
width: ${ALL_WIDTH};
|
||||
height: ${ALL_HEIGHT};
|
||||
background: url(${can.toDataURL('image/png')}) left top repeat;
|
||||
opacity: 0;
|
||||
`
|
||||
document.body.appendChild(WATER_MARK)
|
||||
return id
|
||||
}
|
||||
|
||||
// 该方法只允许调用一次
|
||||
watermark.set = (str, width, height, size, top, index) => {
|
||||
let id = setWatermark(str, width, height, size, top, index)
|
||||
watermark.timer && clearTimeout(watermark.timer)
|
||||
watermark.timer = setTimeout(() => {
|
||||
if (document.getElementById(id) === null) {
|
||||
id = setWatermark(str, width, height, size, top, index)
|
||||
}
|
||||
}, 300)
|
||||
window.onresize = () => {
|
||||
setWatermark(str, width, height, size, top, index)
|
||||
}
|
||||
}
|
||||
|
||||
const onWholeWaterMark = (arr, width, height, size, top) => {
|
||||
arr.map((str, index) => {
|
||||
watermark.set(str, width, height, size, top, index)
|
||||
})
|
||||
}
|
||||
export default onWholeWaterMark
|
||||
Loading…
Reference in New Issue