@titaui/pc 1.7.22 → 1.7.26

package/lib/components/weekly-report/common-painter/openDataPainter.js

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = _default;
+
+var _openData = require("&/components/common/openData");
+
+var _helper = require("&/components/helper");
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+function _default(_x, _x2, _x3) {
+  return _ref.apply(this, arguments);
+}
+
+function _ref() {
+  _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(ctx, openDataParams, lineHeight) {
+    var maxWidth,
+        name,
+        _ctx$measureText,
+        width,
+        actualWidth,
+        _args = arguments;
+
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            maxWidth = _args.length > 3 && _args[3] !== undefined ? _args[3] : Infinity;
+            name = openDataParams.name;
+
+            if (!(0, _helper.isWx)()) {
+              _context.next = 6;
+              break;
+            }
+
+            _context.next = 5;
+            return getOpenData(openDataParams);
+
+          case 5:
+            name = _context.sent;
+
+          case 6:
+            _ctx$measureText = ctx.measureText(name), width = _ctx$measureText.width;
+            actualWidth = Math.min(width, maxWidth);
+            return _context.abrupt("return", {
+              width: actualWidth,
+              height: lineHeight,
+              draw: function draw(ctx, x, y) {
+                ctx.save();
+                ctx.textBaseline = 'middle';
+                ctx.beginPath();
+                ctx.rect(x, y, actualWidth, lineHeight);
+                ctx.clip();
+                ctx.fillText(name, x, y + lineHeight / 2);
+                ctx.closePath();
+                ctx.restore();
+              }
+            });
+
+          case 9:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+  return _ref.apply(this, arguments);
+}
+
+var getOpenData = function getOpenData(_ref2) {
+  var id = _ref2.id,
+      name = _ref2.name,
+      type = _ref2.type;
+  var openId = (0, _openData.getOpenId)(id, type);
+  if (!window['WWOpenData'] || !openId) return Promise.resolve(name);
+  return new Promise(function (resolve, reject) {
+    window['WWOpenData'].prefetch({
+      items: [{
+        id: openId,
+        type: type
+      }]
+    }, function (err, data) {
+      if (err) {
+        return reject(err);
+      }
+
+      resolve(data.items[0].data);
+    });
+  });
+};

package/lib/components/weekly-report/common-painter/setSize.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = _default;
+
+function _default(canvas, ctx, width, height) {
+  var devicePixelRatio = window.devicePixelRatio || 1;
+  var data = ctx.getImageData(0, 0, canvas.width, canvas.height); //要将 canvas 的宽高设置成容器宽高的 2 倍
+
+  canvas.width = width * devicePixelRatio;
+  canvas.height = height * devicePixelRatio;
+  canvas.style.width = width + 'px';
+  canvas.style.height = height + 'px'; //然后将画布缩放，将图像放大两倍画到画布上
+
+  ctx.scale(devicePixelRatio, devicePixelRatio);
+  ctx.putImageData(data, 0, 0);
+}

package/lib/components/weekly-report/common-painter/utils.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.breakLinesForCanvas = breakLinesForCanvas;
+exports.drawImage = drawImage;
+exports.drawTextMiddle = drawTextMiddle;
+
+function drawImage(ctx, url, x, y, width, height) {
+  return new Promise(function (res) {
+    var img = new Image();
+    img.src = url;
+
+    img.onload = function () {
+      ctx.drawImage(img, x, y, width, height);
+      res();
+    };
+  });
+}
+
+function drawTextMiddle(ctx, text, x, y, lineHeight, maxWidth, textAlign) {
+  ctx.textBaseline = 'middle';
+
+  if (!maxWidth) {
+    ctx.fillText(text, x, y + lineHeight / 2);
+    return y + lineHeight;
+  }
+
+  var lines = breakLinesForCanvas(ctx, text, maxWidth);
+  lines.forEach(function (l) {
+    var _ctx$measureText = ctx.measureText(l),
+        width = _ctx$measureText.width;
+
+    var left = x;
+
+    if (textAlign == 'center' && maxWidth) {
+      console.log(maxWidth, width);
+      left = (maxWidth - width) / 2 + x;
+    }
+
+    ctx.fillText(l, left, y + lineHeight / 2);
+    y = y + lineHeight;
+  });
+  return y;
+}
+
+function findBreakPoint(text, width, context) {
+  var min = 0;
+  var max = text.length - 1;
+
+  while (min <= max) {
+    var middle = Math.floor((min + max) / 2);
+    var middleWidth = context.measureText(text.substr(0, middle)).width;
+    var oneCharWiderThanMiddleWidth = context.measureText(text.substr(0, middle + 1)).width;
+
+    if (middleWidth <= width && oneCharWiderThanMiddleWidth > width) {
+      return middle;
+    }
+
+    if (middleWidth < width) {
+      min = middle + 1;
+    } else {
+      max = middle - 1;
+    }
+  }
+
+  return -1;
+}
+
+function breakLinesForCanvas(ctx, text, width) {
+  var result = [];
+  var breakPoint = 0;
+
+  while ((breakPoint = findBreakPoint(text, width, ctx)) !== -1) {
+    result.push(text.substr(0, breakPoint));
+    text = text.substr(breakPoint);
+  }
+
+  if (text) {
+    result.push(text);
+  }
+
+  return result;
+}

package/lib/components/weekly-report/img/close.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 31</title>
+    <defs>
+        <filter id="filter-1">
+            <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 1.000000 0 0 0 0 1.000000 0 0 0 0 1.000000 0 0 0 1.000000 0"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="每周推送" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="暂定-员工视角" transform="translate(-871.000000, -106.000000)">
+            <g id="编组-31" transform="translate(871.000000, 106.000000)">
+                <circle id="椭圆形" fill-opacity="0.2" fill="#141C28" cx="16" cy="16" r="16"></circle>
+                <g id="canceled" transform="translate(7.000000, 7.000000)" filter="url(#filter-1)">
+                    <g>
+                        <rect id="矩形" x="0" y="0" width="18" height="18"></rect>
+                        <path d="M4.20533009,3.14466991 L8.978,7.917 L13.7512716,3.14466991 C14.0175382,2.87840335 14.4342019,2.8541973 14.7278134,3.07205176 L14.8119318,3.14466991 C15.104825,3.43756313 15.104825,3.91243687 14.8119318,4.20533009 L14.8119318,4.20533009 L10.038,8.978 L14.8119318,13.7512716 C15.104825,14.0441649 15.104825,14.5190386 14.8119318,14.8119318 C14.5190386,15.104825 14.0441649,15.104825 13.7512716,14.8119318 L8.978,10.038 L4.20533009,14.8119318 C3.93906352,15.0781984 3.52239984,15.1024044 3.22878835,14.88455 L3.14466991,14.8119318 C2.8517767,14.5190386 2.8517767,14.0441649 3.14466991,13.7512716 L3.14466991,13.7512716 L7.917,8.978 L3.14466991,4.20533009 C2.8517767,3.91243687 2.8517767,3.43756313 3.14466991,3.14466991 C3.43756313,2.8517767 3.91243687,2.8517767 4.20533009,3.14466991 Z" id="形状结合" fill="#444444"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/lib/components/weekly-report/index.css

@@ -0,0 +1,343 @@
+.weekly-report-card__dialog .rc-dialog-content {
+  background-color: transparent;
+}
+
+.weekly-report-card-wrapper {
+  overflow: hidden;
+  width: 336px;
+  height: 548px;
+  border-radius: 24px;
+}
+
+.weekly-report-card-wrapper .weekly-report-card-content {
+  position: relative;
+  top: -66px;
+  left: -20px;
+  transform: scale(0.9);
+}
+
+.weekly-report-card__close {
+  position: absolute;
+  right: -42px;
+  top: 0;
+  width: 32px;
+  height: 32px;
+  background-image: url("./img/close.svg");
+  cursor: pointer;
+}
+
+.weekly-report-card-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 375px;
+  height: 710px;
+  background: linear-gradient(180deg, #B7D5FF 0%, #186FFF 100%);
+}
+
+.weekly-report-card__title {
+  width: 220px;
+  height: 40px;
+  margin-top: 48px;
+}
+
+.weekly-report-card__date-range {
+  font-size: 14px;
+  font-weight: 400;
+  color: #FFFFFF;
+  line-height: 20px;
+  margin-top: 11px;
+}
+
+.weekly-report-card__body {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 335px;
+  height: 452px;
+  background: transparent;
+  padding-top: 55px;
+  border-radius: 12px;
+  background-image: url("./img/body.png");
+  background-size: 100% 100%;
+  background-position-y: -1px;
+}
+
+.weekly-report-card__avatar {
+  position: absolute;
+  left: 129px;
+  top: 17px;
+  border: 3px solid #fff;
+  border-radius: 50%;
+}
+
+.weekly-report-card__avatar > img {
+  width: 72px;
+  height: 72px;
+}
+
+.weekly-report-card__shadow {
+  position: absolute;
+  box-shadow: 0px 0px 18px 0px rgba(40, 121, 255, 0.4);
+  width: 78px;
+  height: 78px;
+  border-radius: 50%;
+  top: 135px;
+  left: 150px;
+}
+
+.weekly-report-card__userName {
+  width: 295px;
+  height: 24px;
+  margin-top: 46px;
+}
+
+.weekly-report-card__text {
+  position: relative;
+  z-index: 1;
+  font-size: 18px;
+  font-weight: 500;
+  color: #2879FF;
+  line-height: 26px;
+  margin: 28px 0;
+  max-width: 279px;
+  text-align: center;
+}
+
+.weekly-report-card__quote {
+  position: absolute;
+  top: 142px;
+  left: 20px;
+  width: 22px;
+  height: 22px;
+}
+
+.weekly-report-card-board {
+  width: 154px;
+  height: 77px;
+  overflow: hidden;
+  position: relative;
+}
+
+.weekly-report-card-board__done {
+  position: absolute;
+  width: 154px;
+  height: 154px;
+  border-radius: 50%;
+  background: linear-gradient(360deg, #2879FF 0%, #5B8FF9 50%);
+  overflow: hidden;
+}
+
+.weekly-report-card-board__undone {
+  position: absolute;
+  width: 154px;
+  height: 77px;
+  background-color: #eaf1fe;
+  transform-origin: center bottom;
+  transform: rotate(90deg);
+}
+
+.weekly-report-card-board__space {
+  position: absolute;
+  width: 2px;
+  height: 77px;
+  bottom: 50%;
+  right: 50%;
+  transform-origin: center bottom;
+  background-color: #FFF;
+}
+
+.weekly-report-card-board__center {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  position: absolute;
+  bottom: -47px;
+  left: 30px;
+  width: 94px;
+  height: 94px;
+  background: #FFF;
+  border-radius: 50%;
+  font-size: 24px;
+  font-weight: 600;
+  color: #141C28;
+  line-height: 24px;
+}
+
+.weekly-report-card-board__center > div {
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  width: 100%;
+  height: 47px;
+}
+
+.weekly-report-card-board__num {
+  position: absolute;
+  bottom: 0;
+}
+
+.weekly-report-card__comparison {
+  display: flex;
+  align-items: center;
+  margin-top: 6px;
+  font-size: 12px;
+  font-weight: 400;
+  color: #6F7886;
+  line-height: 18px;
+}
+
+.weekly-report-card__direction {
+  width: 13px;
+  height: 13px;
+  margin: 0 2px;
+}
+
+.weekly-report-card__colleague {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 275px;
+  height: 39px;
+  padding-top: 7px;
+  background-image: url("./img/triangle-pop.png");
+  background-size: 100% 100%;
+  font-size: 14px;
+  font-weight: 400;
+  color: #3F4755;
+  line-height: 24px;
+  margin-top: 6px;
+}
+
+.weekly-report-card__colleague > span {
+  color: #2879FF;
+  margin: 0 5px;
+}
+
+.weekly-report-card__statistics {
+  width: 100%;
+  padding: 0 20px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 29px;
+}
+
+.weekly-report-card__statistics__item {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 7px 12px 0;
+  background-position: 0 20px;
+  background-size: 36px 36px;
+  background-repeat: no-repeat;
+}
+
+.weekly-report-card__statistics__finish {
+  background-image: url("./img/finish.png");
+}
+
+.weekly-report-card__statistics__praise {
+  background-image: url("./img/praise.png");
+}
+
+.weekly-report-card__statistics__communication {
+  background-image: url("./img/communication.png");
+}
+
+.weekly-report-card__statistics__num {
+  font-size: 22px;
+  font-weight: 600;
+  color: #141C28;
+  line-height: 30px;
+}
+
+.weekly-report-card__statistics__text {
+  font-size: 13px;
+  font-weight: 400;
+  color: #6F7886;
+  line-height: 22px;
+}
+
+.weekly-report-card__statistics__tips {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 0 4px;
+  height: 17px;
+  background: linear-gradient(180deg, #F99797 0%, #F05E5E 100%);
+  border-radius: 9px 9px 9px 1px;
+  font-size: 11px;
+  color: #FFFFFF;
+  line-height: 17px;
+  text-align: center;
+}
+
+.weekly-report-card__laba {
+  position: absolute;
+  left: 0;
+  top: 118px;
+  width: 94px;
+  height: 65px;
+}
+
+.weekly-report-card__bofang {
+  position: absolute;
+  right: 0;
+  top: 130px;
+  width: 62px;
+  height: 66px;
+  z-index: 1;
+}
+
+.weekly-report-card__bottom {
+  width: 320px;
+  height: 60px;
+  margin-top: 15px;
+}
+
+.weekly-report-card__button-container {
+  display: flex;
+  margin-top: 20px;
+  justify-content: center;
+}
+
+.weekly-report-card__download {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 120px;
+  height: 36px;
+  margin-right: 12px;
+  border-radius: 18px;
+  border: 1px solid #FFFFFF;
+  background-color: transparent;
+  font-size: 14px;
+  color: #FFF;
+}
+
+.weekly-report-card__download:hover {
+  background-color: transparent;
+}
+
+.weekly-report-card__share {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 120px;
+  height: 36px;
+  border-radius: 18px;
+  border: 1px solid #FFFFFF;
+  background: linear-gradient(360deg, #2879FF 0%, #5B8FF9 100%);
+  font-size: 14px;
+  color: #FFF;
+  border: none;
+}
+
+.weekly-report-card__share:hover {
+  background: linear-gradient(360deg, #2879FF 0%, #5B8FF9 100%);
+}