From eb7ac75d81c3ac0f2c66ff1a3c3973c839844605 Mon Sep 17 00:00:00 2001 From: "DESKTOP-L29QSFC\\THINK" Date: Fri, 30 Aug 2024 14:23:02 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B0=B4=E5=8D=B0=E5=92=8C=E5=BD=93=E5=89=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.vue | 67 ++++++- src/main.js | 23 ++- src/router/index.js | 337 +++++++++++++++++---------------- src/utils/waterMarker/index.js | 55 ++++++ 4 files changed, 296 insertions(+), 186 deletions(-) create mode 100644 src/utils/waterMarker/index.js diff --git a/src/App.vue b/src/App.vue index 2d4de11..91db6aa 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,16 +1,71 @@ diff --git a/src/main.js b/src/main.js index 5a7065f..3a44007 100644 --- a/src/main.js +++ b/src/main.js @@ -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] } } diff --git a/src/router/index.js b/src/router/index.js index e045f38..157f03e 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -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 (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 (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 diff --git a/src/utils/waterMarker/index.js b/src/utils/waterMarker/index.js new file mode 100644 index 0000000..7d61041 --- /dev/null +++ b/src/utils/waterMarker/index.js @@ -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