wangyifang
/
sz-kjsxy-web
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

水印和当前

Browse Source
dev
DESKTOP-L29QSFC\THINK 1 year ago
parent 6cd2da3c98
commit eb7ac75d81
4 changed files with 296 additions and 186 deletions
Show Stats Download Patch File Download Diff File

67
src/App.vue
Unescape View File

@ -1,16 +1,71 @@
<template>
<div id="app">
<div id="app" ref="containerS">
<router-view />
</div>
</template>
<script>
import {
getInfo
} from '@/api/user'
import {
getToken
} from '@/utils/auth'
import Watermark from "@/utils/waterMarker/index.js";
export default {
name: 'App'
}
name: "App",
data() {
return {
username: "", // 这里设置用户名作为水印内容
};
},
watch: {
$route(to, from) {
this.$nextTick(function () {
this.loadUser()
});
},
username(to, from) {
Watermark.set(this.username, this.$refs.containerS);
}
},
mounted() {
},
methods: {
loadUser() {
var token = getToken();
console.log(token)
if (token) {
getInfo(token).then(response => {
const {
roles,
name,
avatar
} = response;
this.username = response.name+" "+this.$moment().format("HH:mm:ss");
Watermark.set(this.username, this.$refs.containerS);
}).catch(error => {
})
}
else {
this.username = "";
Watermark.set(this.username, this.$refs.containerS);
}
}
}
, created() {
this.$nextTick(function () {
this.loadUser()
});
}
};
</script>
<style lang="scss">
#app .sidebar-container.has-logo .el-scrollbar{
height: calc(100% - 60px)!important;
}
#app .sidebar-container.has-logo .el-scrollbar {
height: calc(100% - 60px) !important;
}
</style>

23
src/main.js
Unescape View File

@ -22,7 +22,6 @@ Vue.prototype.$moment = moment;
Vue.prototype.base = base;
import '@/icons' // icon
import '@/permission' // permission control
/**
* If you don't want to use mock-server
* you want to use MockJs for mock api
@ -69,25 +68,25 @@ Vue.directive('loadMore', {
})
import LxHeader from "@/components/LxHeader"
Vue.component('lx-header',LxHeader)
Vue.component('lx-header', LxHeader)
import XyTable from '@/components/XyTable'
Vue.component('xy-table',XyTable)
Vue.component('xy-table', XyTable)
import XyDialog from '@/components/XyDialog'
Vue.component('xy-dialog',XyDialog)
Vue.component('xy-dialog', XyDialog)
import XySelectors from '@/components/XySelectors'
Vue.component('xy-selectors',XySelectors)
Vue.component('xy-selectors', XySelectors)
import draggable from 'vuedraggable';
Vue.component('draggable',draggable)
Vue.component('draggable', draggable)
import tinymce from '@/components/XyTinymce'
Vue.component('my-tinymce',tinymce)
Vue.component('my-tinymce', tinymce)
import myMap from "@/components/XyMap"
Vue.component('my-map',myMap)
Vue.component('my-map', myMap)
import afTableColumn from 'af-table-column'
Vue.component('af-table-column',afTableColumn)
Vue.component('af-table-column', afTableColumn)
Vue.prototype.$integrateData = (target,value) => {
for(let i in target){
if(target.hasOwnProperty(i) && value.hasOwnProperty(i)){
Vue.prototype.$integrateData = (target, value) => {
for (let i in target) {
if (target.hasOwnProperty(i) && value.hasOwnProperty(i)) {
target[i] = value[i]
}
}

337
src/router/index.js
Unescape View File

@ -1,172 +1,173 @@
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
/* Layout */
import Layout from '@/layout'
/**
* Note: sub-menu only appear when route children.length >= 1
* Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
*
* hidden: true if set true, item will not show in the sidebar(default is false)
* alwaysShow: true if set true, will always show the root menu
* if not set alwaysShow, when item has more than one children route,
* it will becomes nested mode, otherwise not show the root menu
* redirect: noRedirect if set noRedirect will no redirect in the breadcrumb
* name:'router-name' the name is used by <keep-alive> (must set!!!)
* meta : {
roles: ['admin','editor'] control the page roles (you can set multiple roles)
title: 'title' the name show in sidebar and breadcrumb (recommend set)
icon: 'svg-name'/'el-icon-x' the icon show in the sidebar
breadcrumb: false if set false, the item will hidden in breadcrumb(default is true)
activeMenu: '/example/list' if set path, the sidebar will highlight the path you set
}
*/
/**
* constantRoutes
* a base page that does not have permission requirements
* all roles can be accessed
*/
export const constantRoutes = [{
path: '/login',
component: () => import('@/views/login/index'),
hidden: true
},
{
path: '/404',
component: () => import('@/views/404'),
hidden: true
},
{
path: '/test',
component: () => import('@/views/component/test.vue'),
hidden: true
},
{
path: '/info',
component: Layout,
children: [{
path: 'password',
component: () => import('@/views/system/password'),
name: '密码修改',
meta: {
title: '密码修改'
}
}],
hidden: true
},
// {
// path: '/',
// component: Layout,
// redirect: '/dashboard',
// children: [{
// path: 'dashboard',
// name: '系统首页',
// component: () => import('@/views/dashboard/index'),
// meta: {
// title: '系统首页',
// icon: 'dashboard'
// }
// }]
// },
{
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
/* Layout */
import Layout from '@/layout'
/**
* Note: sub-menu only appear when route children.length >= 1
* Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
*
* hidden: true if set true, item will not show in the sidebar(default is false)
* alwaysShow: true if set true, will always show the root menu
* if not set alwaysShow, when item has more than one children route,
* it will becomes nested mode, otherwise not show the root menu
* redirect: noRedirect if set noRedirect will no redirect in the breadcrumb
* name:'router-name' the name is used by <keep-alive> (must set!!!)
* meta : {
roles: ['admin','editor'] control the page roles (you can set multiple roles)
title: 'title' the name show in sidebar and breadcrumb (recommend set)
icon: 'svg-name'/'el-icon-x' the icon show in the sidebar
breadcrumb: false if set false, the item will hidden in breadcrumb(default is true)
activeMenu: '/example/list' if set path, the sidebar will highlight the path you set
}
*/
/**
* constantRoutes
* a base page that does not have permission requirements
* all roles can be accessed
*/
export const constantRoutes = [{
path: '/login',
component: () => import('@/views/login/index'),
hidden: true
},
{
path: '/404',
component: () => import('@/views/404'),
hidden: true
},
{
path: '/test',
component: () => import('@/views/component/test.vue'),
hidden: true
},
{
path: '/info',
component: Layout,
children: [{
path: 'password',
component: () => import('@/views/system/password'),
name: '密码修改',
meta: {
title: '密码修改'
}
}],
hidden: true
},
// {
// path: '/',
// component: Layout,
// redirect: '/dashboard',
// children: [{
// path: 'dashboard',
// name: '系统首页',
// component: () => import('@/views/dashboard/index'),
// meta: {
// title: '系统首页',
// icon: 'dashboard'
// }
// }]
// },
{
path: '/course/txl',
component: Layout,
redirect: '/dashboard',
children: [{
path: '/course/txl',
component: Layout,
redirect: '/dashboard',
children: [{
path: '/course/txl',
name: '通讯录',
component: () => import('@/views/course/txl'),
meta: {
title: '通讯录',
icon: ''
}
}],
hidden: true
},
{
path: '/course/apply_list',
component: Layout,
redirect: '/dashboard',
children: [{
path: '/course/apply_list',
name: '报名管理',
component: () => import('@/views/course/apply_list'),
meta: {
title: '报名管理',
icon: ''
}
}],
hidden: true
},
{
path: '/course/pay',
component: Layout,
redirect: '/dashboard',
children: [{
path: '/course/pay',
name: '缴费列表',
component: () => import('@/views/course/pay'),
meta: {
title: '缴费列表',
icon: ''
}
}],
hidden: true
},
{
name: '通讯录',
component: () => import('@/views/course/txl'),
meta: {
title: '通讯录',
icon: ''
}
}],
hidden: true
},
{
path: '/course/apply_list',
component: Layout,
redirect: '/dashboard',
children: [{
path: '/course/apply_list',
name: '报名管理',
component: () => import('@/views/course/apply_list'),
meta: {
title: '报名管理',
icon: ''
}
}],
hidden: true
},
{
path: '/course/pay',
component: Layout,
redirect: '/dashboard',
children: [{
path: '/course/pay',
name: '缴费列表',
component: () => import('@/views/course/pay'),
meta: {
title: '缴费列表',
icon: ''
}
}],
hidden: true
},
{
path: '/course/attendance',
component: Layout,
redirect: '/dashboard',
children: [{
path: '/course/attendance',
component: Layout,
redirect: '/dashboard',
children: [{
path: '/course/attendance',
name: '考勤管理',
component: () => import('@/views/course/attendance'),
meta: {
title: '考勤管理',
icon: ''
}
}],
name: '考勤管理',
component: () => import('@/views/course/attendance'),
meta: {
title: '考勤管理',
icon: '',
activeMenu:"/course/class"
}
}],
hidden: true
}
]
/**
* asyncRoutes
* the routes that need to be dynamically loaded based on user roles
*/
export const asyncRoutes = [
// 404 page must be placed at the end !!!
{
path: '*',
redirect: '/404',
hidden: true
}
]
/**
* asyncRoutes
* the routes that need to be dynamically loaded based on user roles
*/
export const asyncRoutes = [
// 404 page must be placed at the end !!!
{
path: '*',
redirect: '/404',
hidden: true
}
]
const createRouter = () => new Router({
// mode: 'history', // require service support
scrollBehavior: () => ({
y: 0
}),
routes: constantRoutes
})
const router = createRouter()
// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
const newRouter = createRouter()
router.matcher = newRouter.matcher // reset router
}
}
]
const createRouter = () => new Router({
// mode: 'history', // require service support
scrollBehavior: () => ({
y: 0
}),
routes: constantRoutes
})
const router = createRouter()
// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
const newRouter = createRouter()
router.matcher = newRouter.matcher // reset router
}
export default router

55
src/utils/waterMarker/index.js
Unescape View File

@ -0,0 +1,55 @@
'use strict'
const watermark = {}
const setWatermark = (str, container) => {
const id = '1.23452384164.123412415'
if (container === undefined) {
return
}
// 查看页面上有没有，如果有则删除
if (document.getElementById(id) !== null) {
const childelement = document.getElementById(id)
childelement.parentNode.removeChild(childelement)
}
var containerWidth = container.offsetWidth // 获取父容器宽
var containerHeight = container.offsetHeight // 获取父容器高
container.style.position = 'relative' // 设置布局为相对布局
// 创建canvas元素(先制作一块背景图)
const can = document.createElement('canvas')
can.width = 300 // 设置每一块的宽度
can.height = 300 // 高度
const cans = can.getContext('2d') // 获取canvas画布
cans.rotate(-20 * Math.PI / 180) // 逆时针旋转π/9
cans.font = '20px Vedana' // 设置字体
cans.fillStyle = 'rgba(0, 0, 0, 0.1)' // 设置字体的颜色
cans.textAlign = 'left' // 文本对齐方式
cans.textBaseline = 'Middle' // 文本基线
cans.fillText(str, 0, 4 * can.height / 5) // 绘制文字
// 创建一个div元素
const div = document.createElement('div')
div.id = id // 设置id
div.style.pointerEvents = 'none' // 取消所有事件
div.style.top = '0px'
div.style.left = '0px'
div.style.position = 'absolute'
div.style.zIndex = '100000'
div.style.width = containerWidth + 'px'
div.style.height = containerHeight + 'px'
div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'
container.appendChild(div) // 追加到页面
return id
}
// 该方法只允许调用一次
watermark.set = (str, container) => {
let id = setWatermark(str, container)
setInterval(() => {
if (document.getElementById(id) === null) {
id = setWatermark(str, container)
}
}, 500)
// 监听页面大小的变化
window.onresize = () => {
setWatermark(str, container)
}
}
export default watermark
Write Preview
Loading…
Cancel
Save