From 25ce036110f26558553620be30217ab5f58b0478 Mon Sep 17 00:00:00 2001 From: danshihao Date: Fri, 11 Nov 2022 16:20:00 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A2=84=E8=A7=88=E5=8A=A0=E6=B0=B4=E5=8D=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main.js | 2 ++ src/utils/date.js | 34 +++++++++++++++++++ src/utils/warterMark.js | 53 ++++++++++++++++++++++++++++++ src/views/Report/ReportList.vue | 12 +++++-- src/views/Report/ReportManager.vue | 16 ++++++--- 5 files changed, 111 insertions(+), 6 deletions(-) create mode 100644 src/utils/date.js create mode 100644 src/utils/warterMark.js diff --git a/src/main.js b/src/main.js index 8cec783..137c0ca 100644 --- a/src/main.js +++ b/src/main.js @@ -21,6 +21,8 @@ import Api from './api' import Directive from './directives' // 自定义过滤器 import Filter from './filters' +// 自定义水印指令 +import '@/utils/warterMark' // 加密函数 import JSEncrypt from '../src/assets/js/jsencrypt.min.js'; diff --git a/src/utils/date.js b/src/utils/date.js new file mode 100644 index 0000000..1cb65a0 --- /dev/null +++ b/src/utils/date.js @@ -0,0 +1,34 @@ +/** + * 时间格式化 + * @param value + * @param fmt + * @returns {*} + */ +export function formatDate(value, fmt) { + let regPos = /^\d+(\.\d+)?$/ + if (regPos.test(value)) { + //如果是数字 + let getDate = new Date(value) + let o = { + 'M+': getDate.getMonth() + 1, + 'd+': getDate.getDate(), + 'h+': getDate.getHours(), + 'm+': getDate.getMinutes(), + 's+': getDate.getSeconds(), + 'q+': Math.floor((getDate.getMonth() + 3) / 3), + 'S': getDate.getMilliseconds() + } + if (/(y+)/.test(fmt)) { + fmt = fmt.replace(RegExp.$1, (getDate.getFullYear() + '').substr(4 - RegExp.$1.length)) + } + for (let k in o) { + if (new RegExp('(' + k + ')').test(fmt)) { + fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length))) + } + } + return fmt + } else { + value = value.trim() + return value.substr(0, fmt.length) + } +} diff --git a/src/utils/warterMark.js b/src/utils/warterMark.js new file mode 100644 index 0000000..5256005 --- /dev/null +++ b/src/utils/warterMark.js @@ -0,0 +1,53 @@ +import Vue from 'vue' + +/** + * 使用方式 + * 1.引入import '@/utils/warterMark' + * 2.需要加水印的添加如下命令 + * v-watermark="{text: '水印名称', textColor: 'rgba(100, 100, 100, 0.6)'}" + */ +Vue.directive('watermark', { + bind: function(el, binding){ + // 水印文字，父元素，画布宽度，画布高度，字体，文字颜色，画布横坐标，是否铺满全页 + function addWaterMarker(str, parentNode, width, height, font, textColor, fillTextX = '10', isFull = false){ + // 检查父元素是否包含子元素 + const elementContains = (parent, child) => parent !== child && parent.contains(child) + const flag = elementContains(parentNode, document.querySelector('canvas')) + // 防止重复创建 + if (!flag) { + let can = document.createElement('canvas') + parentNode.appendChild(can) + can.width = width || 200 + can.height = height || 140 + can.style.display = 'none' + let cans = can.getContext('2d') + cans.rotate(-20 * Math.PI / 180) + cans.font = font || '13px Microsoft Yahei' + cans.fillStyle = textColor || '#DDDDDD' + cans.textAlign = 'left' + cans.textBaseline = 'Middle' + cans.fillText(str, fillTextX, can.height) + // 设置背景图（整个项目中都添加水印建议使用此方法） + if(isFull) { + parentNode.style.backgroundImage = "url(" + can.toDataURL("image/png") + ")"; + } else { + // 创建div 定位覆盖（某个元素，如图片添加水印建议使用此方法） + let div = document.createElement('div') + div.id = str + div.style.pointerEvents = 'none' + div.style.top = '0' + div.style.left = '0' + div.style.position = 'absolute' + div.style.zIndex = '100000' + div.style.width = '100%' + div.style.height = '100%' + div.style.background = 'url(' + can.toDataURL('image/png') + ')' + parentNode.appendChild(div) + } + } + } + if (binding.value.text) { + addWaterMarker(binding.value.text, el, binding.value.width, binding.value.height, binding.value.font, binding.value.textColor, binding.value.fillTextX, binding.value.isFull ) + } + } +}) diff --git a/src/views/Report/ReportList.vue b/src/views/Report/ReportList.vue index deef2e5..29f9cd6 100644 --- a/src/views/Report/ReportList.vue +++ b/src/views/Report/ReportList.vue @@ -152,7 +152,11 @@ -
+ +
@@ -161,12 +165,14 @@