Skip to content

高东东-金蝶建发 / jf-yzj-resume

Go to a project
Commit 09b93b61 by zhongqm
Options

update：添加水印

parent 99216db5
Expand all
Inline Side-by-side
Showing with 274 additions and 120 deletions
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>简历</title>
<script src="miniapp://common/js/qing/qing.js"></script>
<!-- <script src="https://staging.jffctest.com/public/js/qing/latest/qing.js"></script>-->
</head>
<body>
<div class="header">
</div>
<a class="header__button" id="back"></a>
<div class="container">
<div class="banner">
<a class="banner__img loading" id="mainPhoto">
<img>
</a>
<div id="name">正在加载</div>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='initial-scale=1.0, maximum-scale=1.0, user-scalable=0'>
<title>简历</title>
<script src='miniapp://common/js/qing/qing.js'></script>
<!-- <script src="https://staging.jffctest.com/public/js/qing/latest/qing.js"></script>-->
</head>
<body>
<div class='header'>
</div>
<a class='header__button' id='back'></a>
<div class='container'>
<div class='banner'>
<a class='banner__img loading' id='mainPhoto'>
<img>
</a>
<div id='name'>正在加载</div>
</div>
<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class='pswp' tabindex='-1' role='dialog' aria-hidden='true'>
<!-- Background of PhotoSwipe.
It's a separate element as animating opacity is faster than rgba(). -->
<div class='pswp__bg'></div>
<!-- Slides wrapper with overflow:hidden. -->
<div class='pswp__scroll-wrap'>
<!-- Container that holds slides.
PhotoSwipe keeps only 3 of them in the DOM to save memory.
Don't modify these 3 pswp__item elements, data is added later on. -->
<div class='pswp__container'>
<div class='pswp__item'></div>
<div class='pswp__item'></div>
<div class='pswp__item'></div>
</div>
<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<!-- Background of PhotoSwipe.
It's a separate element as animating opacity is faster than rgba(). -->
<div class="pswp__bg"></div>
<!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
<div class='pswp__ui pswp__ui--hidden'>
<!-- Slides wrapper with overflow:hidden. -->
<div class="pswp__scroll-wrap">
<!-- Container that holds slides.
PhotoSwipe keeps only 3 of them in the DOM to save memory.
Don't modify these 3 pswp__item elements, data is added later on. -->
<div class="pswp__container">
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>
<div class='pswp__top-bar'>
<!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
<div class="pswp__ui pswp__ui--hidden">
<!-- Controls are self-explanatory. Order can be changed. -->
<div class="pswp__top-bar">
<div class='pswp__counter'></div>
<!-- Controls are self-explanatory. Order can be changed. -->
<div class="pswp__counter"></div>
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
<button class="pswp__button pswp__button--save">保存</button>
<!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
<!-- element will get class pswp__preloader--active when preloader is running -->
<div class="pswp__preloader">
<div class="pswp__preloader__icn">
<div class="pswp__preloader__cut">
<div class="pswp__preloader__donut"></div>
</div>
<button class='pswp__button pswp__button--close' title='Close (Esc)'></button>
<button class='pswp__button pswp__button--save'>保存</button>
<!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
<!-- element will get class pswp__preloader--active when preloader is running -->
<div class='pswp__preloader'>
<div class='pswp__preloader__icn'>
<div class='pswp__preloader__cut'>
<div class='pswp__preloader__donut'></div>
</div>
</div>
</div>
</div>
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
<div class="pswp__share-tooltip"></div>
</div>
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
</button>
<div class='pswp__share-modal pswp__share-modal--hidden pswp__single-tap'>
<div class='pswp__share-tooltip'></div>
</div>
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
</button>
<button class='pswp__button pswp__button--arrow--left' title='Previous (arrow left)'>
</button>
<div class="pswp__caption">
<div class="pswp__caption__center"></div>
</div>
<button class='pswp__button pswp__button--arrow--right' title='Next (arrow right)'>
</button>
<div class='pswp__caption'>
<div class='pswp__caption__center'></div>
</div>
</div>
</div>
</div>
</div>
<div class='toast' id='toast'>
<div class='toast-content'></div>
</div>
<!-- 自定义弹窗 -->
<div class='my__modal'>
<div class='modal__content'>
<!-- 头部 -->
<div class='modal__header'>
</div>
<div class="toast" id="toast">
<div class="toast-content"></div>
<!-- 内容 -->
<div class='modal__body'>
</div>
<!-- 自定义弹窗 -->
<div class="my__modal">
<div class="modal__content">
<!-- 头部 -->
<div class="modal__header">
</div>
<!-- 内容 -->
<div class="modal__body">
</div>
<!-- 尾部 -->
<div class="model__footer">
<div class="model__line"></div>
<span class="modal__close">&times;</span>
</div>
</div>
<!-- 尾部 -->
<div class='model__footer'>
<div class='model__line'></div>
<span class='modal__close'>&times;</span>
</div>
<div class="tips__modal">
<div class="tips__content">
<!-- 头部 -->
<div class="tips__header">
提示
</div>
<!-- 内容 -->
<div class="tips__body">
<div><span style="font-weight: 500;">年度绩效结果分为：</span>优秀、良好、合格、待改进</div>
<div><span style="font-weight: 500;">月度绩效结果分为：</span>A、B+、B、B-、C</div>
<div class="tips__title">1、出现如下情形之一，评价等级为A：</div>
<div>（1）工作成效显著，且时间较大幅度提前。</div>
<div>（2）员工独立思考，有创新方法，工作成效超出预期。</div>
<div class="tips__title">2.评价等级为B（±）：</div>
<div> 评价B+：和过往比有较大进步或在工作难度/强度较大的情况下仍保质保量完成工作。</div>
<div> 评价B：按时保质完成工作。</div>
<div> 评价B-：工作出现偏差，无法按时保质完成。</div>
<div class="tips__title">3.出现如下情形之一，评价等级为C：</div>
<div>（1）工作出现重大失误，被公司通报批评。</div>
<div>（2）工作完成时间较计划存在较大幅度延后。</div>
<div>（3）工作成效差或远低于预期。</div>
</div>
<!-- 尾部 -->
<div class="tips__footer">
<div class="tips__line"></div>
<span class="tips__close">&times;</span>
</div>
</div>
</div>
</div>
</div>
<div class='tips__modal'>
<div class='tips__content'>
<!-- 头部 -->
<div class='tips__header'>
提示
</div>
<!-- 内容 -->
<div class='tips__body'>
<div><span style='font-weight: 500;'>年度绩效结果分为：</span>优秀、良好、合格、待改进</div>
<div><span style='font-weight: 500;'>月度绩效结果分为：</span>A、B+、B、B-、C</div>
<div class='tips__title'>1、出现如下情形之一，评价等级为A：</div>
<div>（1）工作成效显著，且时间较大幅度提前。</div>
<div>（2）员工独立思考，有创新方法，工作成效超出预期。</div>
<div class='tips__title'>2.评价等级为B（±）：</div>
<div> 评价B+：和过往比有较大进步或在工作难度/强度较大的情况下仍保质保量完成工作。</div>
<div> 评价B：按时保质完成工作。</div>
<div> 评价B-：工作出现偏差，无法按时保质完成。</div>
<div class='tips__title'>3.出现如下情形之一，评价等级为C：</div>
<div>（1）工作出现重大失误，被公司通报批评。</div>
<div>（2）工作完成时间较计划存在较大幅度延后。</div>
<div>（3）工作成效差或远低于预期。</div>
</div>
<!-- 尾部 -->
<div class='tips__footer'>
<div class='tips__line'></div>
<span class='tips__close'>&times;</span>
</div>
</div>
</div>
</div>
<!-- <script defer src="cordova.js"></script> -->
</body>
</body>
</html>
src/config/test.js
......@@ -16,7 +16,7 @@ import common from './common';
// userid: '46000011',
// appKey: 'd504275e',
// uid: 'hqhuang@cndrealty.com',
// token: 'T4769446611354624',
// token: 'T5578909826679808',
// baseUrl: 'https://mxytest.cndrealty.com:4433/',
// };
......@@ -39,10 +39,19 @@ import common from './common';
// token: 'T4777933018317824',
// baseUrl: 'https://mxytest.cndrealty.com:4433/',
// };
// const config = {
// product: false,
// ssoToken: 'token',
// appkey: 'd504275e',
// baseUrl: 'https://mxytest.cndrealty.com:4433/',
// };
const config = {
product: false,
ssoToken: 'token',
appkey: 'd504275e',
userid: '46000011',
appKey: 'd504275e',
uid: 'zcm',
token: 'T5579119180350464',
baseUrl: 'https://mxytest.cndrealty.com:4433/',
};
......
src/js/lib/app.js
......@@ -8,6 +8,7 @@ function doReady (fn) {
})
}
ready = true
console.log('config>>',config);
sessionStorage.setItem(config.appName, ready)
fn.apply(window)
}
......
src/js/lib/wmCanvas.js 0 → 100644
/** 水印添加方法 */
var getPixelRatio = function(context) {
var backingStore = context.backingStorePixelRatio || context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || context.backingStorePixelRatio || 1;
return (window.devicePixelRatio || 1) / backingStore;
};
const setWatermarkFn = (str1, str2, isHide) => {
const id = 'waterMark';
let fs = 14; //字体大小
let len = str1.length;
let xb = len * fs;
let rt = -20 * Math.PI / 180; //旋转角度
if (document.getElementById(id) !== null) {
document.body.removeChild(document.getElementById(id));
}
const dpr = window.devicePixelRatio || 1;
console.log('dpr>>', dpr, 'drp-->>');
const can = document.createElement('canvas');
const cans = can.getContext('2d');
let ratio = getPixelRatio(cans);
can.style.border = '1px solid #f00';
// 设置canvas画布大小
can.width = Math.abs(Math.cos(rt) * xb);// 180;
console.log('对边>>', Math.abs(Math.sin(rt) * xb));
can.height = Math.abs(Math.sin(rt) * xb);//动态设置高度
// can.width = dpr * 180;
// can.height = dpr * 140;
console.log('宽高-前>>', { w: can.width, h: can.height });
console.log('can.getBoundingClientRect();>>', can.getBoundingClientRect());
can.style.width = can.width + 'px';
can.style.height = can.height + 'px';
can.width = can.width * ratio;
can.height = can.height * ratio;
console.log('宽高-后>>', { w: can.width, h: can.height });
console.log('ratio>>', ratio);
cans.scale(ratio, ratio);
cans.translate(0, -can.height / 2);
cans.rotate(rt); // 水印旋转角度
cans.font = fs + 'px Vedana';
// cans.font = '16px Microsoft Yahei';
cans.fillStyle = 'rgba(153 ,153, 153,1)';
// cans.textAlign = 'center';
// cans.textBaseline = 'middle';
cans.fillText(str1, 0, 150); // 水印在画布的位置x，y轴
// cans.fillText(str1, 0, can.height); // 水印在画布的位置x，y轴
cans.fillText(str2, can.width / 2, can.height + 10);
const div = document.createElement('div');
div.id = id;
div.style.pointerEvents = 'none';
div.style.top = '0px';
div.style.left = '0px';
//控制水印显隐
if (isHide) {
div.style.opacity = '0';
} else {
div.style.opacity = '1';
}
div.style.position = 'fixed';
div.style.zIndex = '1000';
let winW = document.documentElement.clientWidth || document.body.clientWidth;
let winH = document.documentElement.clientHeight || document.body.clientHeight;
div.style.width = winW + 'px';
div.style.height = winH + 'px';
div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat';
document.body.appendChild(div);
return id;
};
// 添加水印方法
export const setWaterMark = (str1, str2) => {
let id = setWatermarkFn(str1, str2);
if (document.getElementById(id) === null) {
id = setWatermarkFn(str1, str2);
}
};
// 移除水印方法
export const removeWatermark = () => {
const id = 'waterMark';
if (document.getElementById(id) !== null) {
document.body.removeChild(document.getElementById(id));
}
};
src/js/lib/wmSVG.js 0 → 100644
const createWatermark = ({
content = "水印内容",
container = document.body,
width = "240px",
height = "150px",
fontSize = "14px",
opacity = "0.4",
rotate = -14,
color = "#999",
zIndex = 9999,
}) => {
// 创建水印svg
const svgStr = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">
<text x="50%" y="50%" dy="12px"
text-anchor="middle"
stroke="${color}"
stroke-width="1"
stroke-opacity="${opacity}"
fill="none"
transform="rotate(${rotate}, ${parseFloat(width) / 2}, ${
parseFloat(height) / 2
})"
style="font-size: ${fontSize};">
${content}
</text>
</svg>`;
// 利用window.btoa创建base64编码的字符串
const base64Url = `data:image/svg+xml;base64,${window.btoa(
unescape(encodeURIComponent(svgStr))
)}`;
const watermark = document.createElement("div");
watermark.setAttribute(
"style",
`position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:${zIndex};
pointer-events:none;
background-image:url('${base64Url}')`
);
container.style.position = "relative";
container.insertBefore(watermark, container.firstChild);
};
export default createWatermark;
src/js/polyfill/cordova.js
......@@ -177,8 +177,10 @@
'Cloudoffice-Version': 'v0.0.1'
},
data: {},
success: callback
success: callback,
error:callback
}
console.log('getCurrentUserInfo>>',opt);
qing.call('request', opt)
}
var handlers = {
......@@ -335,6 +337,7 @@
// shr员工编号字段
var employeenumberField = process.env.PACK_ENV === 'product' ? '5893b734-4537-4036-9f1c-16ff831b64b2' : '72f1d584-bc3d-4616-85d0-4a67c1829d1c'
getCurrentUserInfo(function (result) {
console.log('getCurrentUserInfo-success>>',result);
var success = (result || {}).success
var error = (result || {}).error
var data = (result || {}).data || {}
......
src/js/polyfill/request.js
import axios from 'axios'
var originAdapter = axios.defaults.adapter
axios.defaults.adapter = function (config) {
if (!/^https?/.test(config.url)) {
return originAdapter(config)
}
return request(config)
}
// axios.defaults.adapter = function (config) {
// if (!/^https?/.test(config.url)) {
// return originAdapter(config)
// }
// return request(config)
// }
function isObject(value) {
return value !== null && typeof value === 'object'
......
yarn.lock 0 → 100644
This diff could not be displayed because it is too large.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment