@titaui/pc 1.7.24 → 1.7.25

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/index.css

@@ -0,0 +1,332 @@
+.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-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%;
+}
+
+.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%);
+}

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

@@ -0,0 +1,134 @@
+"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 _rectBtn = _interopRequireDefault(require("../button/rect-btn"));
+
+var _commonShare = _interopRequireDefault(require("../common-share"));
+
+var _card = _interopRequireDefault(require("./card"));
+
+require("./index.css");
+
+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 _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; }
+
+function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure undefined"); }
+
+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); }); }; }
+
+var preCls = "weekly-report-card";
+
+function WeeklyReportPreview(_ref) {
+  var onShare = _ref.onShare;
+  var cardRef = (0, _react.useRef)();
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      position: "absolute",
+      left: "-999px"
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_card["default"], {
+    ref: cardRef
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: preCls + "-wrapper"
+  }, /*#__PURE__*/_react["default"].createElement(_card["default"], null)), /*#__PURE__*/_react["default"].createElement("div", {
+    className: preCls + "__button-container"
+  }, /*#__PURE__*/_react["default"].createElement(_rectBtn["default"], {
+    className: preCls + "__download",
+    onClick: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      var img, ele;
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return cardRef.current.getImage();
+
+            case 2:
+              img = _context.sent;
+              ele = document.createElement("img");
+              ele.src = img;
+              ele.width = 375;
+              ele.style = "position:fixed;z-index:100000;top:0";
+              document.body.appendChild(ele);
+
+            case 8:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }))
+  }, "\u4E0B\u8F7D\u56FE\u7247"), /*#__PURE__*/_react["default"].createElement(_rectBtn["default"], {
+    className: preCls + "__share",
+    onClick: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+      var img;
+      return regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.next = 2;
+              return cardRef.current.getImage();
+
+            case 2:
+              img = _context2.sent;
+              onShare(img);
+
+            case 4:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }))
+  }, "\u5206\u4EAB\u5230\u52A8\u6001")));
+}
+
+function WeeklyReportModal(_ref4) {
+  _objectDestructuringEmpty(_ref4);
+
+  var _useState = (0, _react.useState)(),
+      _useState2 = _slicedToArray(_useState, 2),
+      visible = _useState2[0],
+      setVisible = _useState2[1];
+
+  return /*#__PURE__*/_react["default"].createElement(_commonShare["default"], {
+    uid: 1,
+    visible: true,
+    onClose: function onClose() {
+      return setVisible(false);
+    },
+    shareComponent: function shareComponent(onShare) {
+      return /*#__PURE__*/_react["default"].createElement(WeeklyReportPreview, {
+        onShare: onShare
+      });
+    }
+  });
+}
+
+var _default = WeeklyReportModal;
+exports["default"] = _default;