@titaui/pc 1.7.23 → 1.7.27

package/lib/components/weekly-report/card.js

@@ -0,0 +1,231 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _html2canvas = _interopRequireDefault(require("html2canvas"));
+
+var _board = _interopRequireDefault(require("./board"));
+
+var _helpers = require("../../utils/helpers");
+
+var _darwAvatar = require("./common-painter/darwAvatar");
+
+var _drawName = _interopRequireDefault(require("./common-painter/drawName"));
+
+var _statistics = _interopRequireDefault(require("./statistics"));
+
+var _bsGlobal = require("../../utils/bs-global");
+
+require("./index.css");
+
+var _request = require("../../utils/request");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var preCls = "weekly-report-card";
+
+var getImageBase64ByUrl = function getImageBase64ByUrl(toUserId) {
+  return (0, _request.rpost)("v1")("okr/share/getBase64Str", {
+    toUserId: toUserId
+  }).then(function (getBase64Str) {
+    return getBase64Str.Data;
+  });
+};
+
+function Card(_ref, ref) {
+  var data = _ref.data;
+
+  var _useState = (0, _react.useState)(),
+      _useState2 = _slicedToArray(_useState, 2),
+      avatarSrc = _useState2[0],
+      setAvatarSrc = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(),
+      _useState4 = _slicedToArray(_useState3, 2),
+      nameSrc = _useState4[0],
+      setNameSrc = _useState4[1];
+
+  var loginUserInfo = (0, _helpers.getLoginUserInfo)();
+  var cardRef = (0, _react.useRef)();
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      getImage: function () {
+        var _getImage = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+          return regeneratorRuntime.wrap(function _callee$(_context) {
+            while (1) {
+              switch (_context.prev = _context.next) {
+                case 0:
+                  return _context.abrupt("return", new Promise(function (res) {
+                    var width = 375,
+                        //获取dom 宽度
+                    height = 710,
+                        //获取dom 高度
+                    canvas = document.createElement("canvas"),
+                        //创建一个canvas节点
+                    scale = 2; //定义任意放大倍数 支持小数
+
+                    //定义任意放大倍数 支持小数
+                    canvas.width = width * scale; //定义canvas 宽度 * 缩放
+
+                    //定义canvas 宽度 * 缩放
+                    canvas.height = height * scale; //定义canvas高度 *缩放
+                    // @ts-ignore
+
+                    //定义canvas高度 *缩放
+                    // @ts-ignore
+                    canvas.style.width = width + "px"; // @ts-ignore
+
+                    // @ts-ignore
+                    canvas.style.height = height + "px"; // @ts-ignore
+
+                    // @ts-ignore
+                    var opts = {
+                      backgroundColor: null,
+                      // 背景透明
+                      scale: scale,
+                      // 添加的scale 参数
+                      canvas: canvas,
+                      // 自定义 canvas
+                      logging: false,
+                      // 日志开关，便于查看html2canvas的内部执行流程
+                      width: width,
+                      // dom 原始宽度
+                      height: height,
+                      useCORS: true // 【重要】开启跨域配置
+
+                    };
+                    (0, _html2canvas["default"])(cardRef.current, opts).then(function (canvas) {
+                      var imgUrl = canvas.toDataURL("image/png"); //得到图片的base64编码数据
+
+                      //得到图片的base64编码数据
+                      res(imgUrl);
+                    });
+                  }));
+
+                case 1:
+                case "end":
+                  return _context.stop();
+              }
+            }
+          }, _callee);
+        }));
+
+        function getImage() {
+          return _getImage.apply(this, arguments);
+        }
+
+        return getImage;
+      }()
+    };
+  }, []);
+  (0, _react.useEffect)(function () {
+    if ((0, _bsGlobal.isWx)()) {
+      window["WWOpenData"] && window["WWOpenData"].enableCanvasSharing && window["WWOpenData"].enableCanvasSharing();
+    }
+
+    if (loginUserInfo.UserAvatar.HasAvatar) {
+      getImageBase64ByUrl(loginUserInfo.Id).then(function (data) {
+        return (0, _darwAvatar.drawAvatar)({
+          name: loginUserInfo.Name,
+          userId: loginUserInfo.Id,
+          color: loginUserInfo.UserAvatar.Color
+        }, "data:image/jpeg;base64," + data.obj);
+      }).then(setAvatarSrc);
+    } else {
+      (0, _darwAvatar.drawAvatar)({
+        name: loginUserInfo.Name,
+        userId: loginUserInfo.Id,
+        color: loginUserInfo.UserAvatar.Color
+      }, "").then(setAvatarSrc);
+    }
+
+    (0, _drawName["default"])(loginUserInfo.Name, loginUserInfo.Id).then(setNameSrc);
+    return function () {
+      if ((0, _bsGlobal.isWx)()) {
+        window["WWOpenData"] && window["WWOpenData"].disableCanvasSharing && window["WWOpenData"].disableCanvasSharing();
+      }
+    };
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: preCls + "-content",
+    ref: cardRef
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    className: preCls + "__title",
+    src: require("./img/title.png")
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: preCls + "__date-range"
+  }, data.WeekCycle), /*#__PURE__*/_react["default"].createElement("div", {
+    className: preCls + "__shadow"
+  }), /*#__PURE__*/_react["default"].createElement("img", {
+    className: preCls + "__laba",
+    src: require("./img/laba.png")
+  }), /*#__PURE__*/_react["default"].createElement("img", {
+    className: preCls + "__bofang",
+    src: require("./img/bofang.png")
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: preCls + "__avatar"
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    src: avatarSrc
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: preCls + "__body"
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    className: preCls + "__userName",
+    src: nameSrc
+  }), /*#__PURE__*/_react["default"].createElement("img", {
+    className: preCls + "__quote",
+    src: require("./img/quote.png"),
+    alt: ""
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: preCls + "__text"
+  }, data.Quotations), /*#__PURE__*/_react["default"].createElement(_board["default"], {
+    percent: Number(data.Complete)
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: preCls + "__comparison"
+  }, data.Increase != '0' ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, "OKR \u5B8C\u6210\u5EA6", /*#__PURE__*/_react["default"].createElement("img", {
+    className: preCls + "__direction",
+    src: Number(data.Increase) > 0 ? require("./img/up.png") : require("./img/down.png"),
+    alt: ""
+  }), /*#__PURE__*/_react["default"].createElement("span", {
+    style: {
+      color: Number(data.Increase) > 0 ? "#4DC591" : '#F05E5E'
+    }
+  }, Math.abs(Number(data.Increase)), "%")) : ''), /*#__PURE__*/_react["default"].createElement("div", {
+    className: preCls + "__colleague"
+  }, data.PromptLanguage), /*#__PURE__*/_react["default"].createElement(_statistics["default"], {
+    data: data
+  })), /*#__PURE__*/_react["default"].createElement("img", {
+    className: preCls + "__bottom",
+    src: require("./img/bottom.png")
+  }));
+}
+
+var _default = /*#__PURE__*/(0, _react.forwardRef)(Card);
+
+exports["default"] = _default;

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

@@ -0,0 +1,157 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.drawAvatar = drawAvatar;
+
+var _openDataPainter = _interopRequireDefault(require("./openDataPainter"));
+
+var _setSize = _interopRequireDefault(require("./setSize"));
+
+var _utils = require("./utils");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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 drawAvatar(_x, _x2) {
+  return _drawAvatar.apply(this, arguments);
+}
+
+function _drawAvatar() {
+  _drawAvatar = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(shareData, avatar) {
+    var canvas, ctx, dataUrl;
+    return regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            if (window['WWOpenData'] && window['WWOpenData'].initCanvas) {
+              window['WWOpenData'].initCanvas();
+            }
+
+            canvas = document.createElement('canvas');
+            ctx = canvas.getContext('2d');
+            (0, _setSize["default"])(canvas, ctx, 72, 72);
+            ctx.beginPath();
+            _context2.next = 7;
+            return draw(ctx, {
+              width: 72,
+              height: 72,
+              x: 0,
+              y: 0,
+              url: avatar,
+              name: shareData.name,
+              id: shareData.userId,
+              color: shareData.color
+            });
+
+          case 7:
+            dataUrl = canvas.toDataURL();
+            return _context2.abrupt("return", dataUrl);
+
+          case 9:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  }));
+  return _drawAvatar.apply(this, arguments);
+}
+
+function draw(_x3, _x4) {
+  return _draw.apply(this, arguments);
+}
+
+function _draw() {
+  _draw = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(ctx, params) {
+    return regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            ctx.save();
+            ctx.beginPath();
+            ctx.arc(params.width / 2 + params.x, params.height / 2 + params.y, params.width / 2, 0, Math.PI * 2, false);
+            ctx.clip();
+            ctx.closePath();
+
+            if (!params.url) {
+              _context3.next = 10;
+              break;
+            }
+
+            _context3.next = 8;
+            return drawImageAvatar(ctx, params);
+
+          case 8:
+            _context3.next = 12;
+            break;
+
+          case 10:
+            _context3.next = 12;
+            return drawTextAvatar(ctx, params);
+
+          case 12:
+            ctx.restore();
+            return _context3.abrupt("return", params.y + params.height);
+
+          case 14:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  }));
+  return _draw.apply(this, arguments);
+}
+
+function drawImageAvatar(ctx, avatar) {
+  return (0, _utils.drawImage)(ctx, avatar.url, avatar.x, avatar.y, avatar.width, avatar.height);
+}
+
+function drawTextAvatar(ctx, avatar) {
+  console.log('text');
+  var maxNameWidth = avatar.maxNameWidth || 28;
+  return new Promise( /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(resolve) {
+      var namePainter, width, height;
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              ctx.fillStyle = avatar.color;
+              ctx.fill();
+              ctx.closePath();
+              ctx.fillStyle = 'white';
+              ctx.font = '14px arial';
+              ctx.textBaseline = 'bottom';
+              _context.next = 8;
+              return (0, _openDataPainter["default"])(ctx, {
+                id: avatar.id,
+                name: avatar.name,
+                type: 'userName'
+              }, 22, maxNameWidth);
+
+            case 8:
+              namePainter = _context.sent;
+              width = namePainter.width, height = namePainter.height;
+              namePainter.draw(ctx, avatar.x + avatar.width / 2 - width / 2, avatar.y + avatar.height / 2 - height / 2);
+              ctx.closePath();
+              resolve();
+
+            case 13:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function (_x5) {
+      return _ref.apply(this, arguments);
+    };
+  }());
+}

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

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = _default;
+
+var _openDataPainter = _interopRequireDefault(require("./openDataPainter"));
+
+var _setSize = _interopRequireDefault(require("./setSize"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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) {
+  return _ref.apply(this, arguments);
+}
+
+function _ref() {
+  _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(name, id) {
+    var canvas, ctx, lineHeight, painter, x, dataUrl;
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            canvas = document.createElement('canvas');
+            ctx = canvas.getContext('2d');
+            (0, _setSize["default"])(canvas, ctx, 295, 24);
+            ctx.beginPath();
+            lineHeight = 24;
+            ctx.font = "bold 16px/".concat(lineHeight, "px arial,sans-serif");
+            ctx.fillStyle = '#141C28';
+            ctx.textBaseline = 'middle';
+            _context.next = 10;
+            return (0, _openDataPainter["default"])(ctx, {
+              name: name,
+              id: id,
+              type: 'userName'
+            }, 24, 295);
+
+          case 10:
+            painter = _context.sent;
+            x = (295 - painter.width) / 2;
+            painter.draw(ctx, x, 0);
+            dataUrl = canvas.toDataURL();
+            return _context.abrupt("return", dataUrl);
+
+          case 15:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+  return _ref.apply(this, arguments);
+}

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>