@titaui/pc 1.7.25 → 1.7.26

package/lib/components/common-share/index.js

@@ -40,7 +40,8 @@ var ShareContent = function ShareContent(_ref) {
       getModalRef = _ref.getModalRef,
       uid = _ref.uid,
       shareComponent = _ref.shareComponent,
-      shareImage = _ref.shareImage;
+      shareImage = _ref.shareImage,
+      defaultContent = _ref.defaultContent;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -61,7 +62,8 @@ var ShareContent = function ShareContent(_ref) {
     getModalRef: getModalRef,
     closeModal: closeModal,
     key: "publish",
-    uid: uid
+    uid: uid,
+    defaultContent: defaultContent
   }));
 };
 
@@ -69,7 +71,8 @@ var OkrShare = function OkrShare(_ref2) {
   var uid = _ref2.uid,
       visible = _ref2.visible,
       onClose = _ref2.onClose,
-      shareComponent = _ref2.shareComponent;
+      shareComponent = _ref2.shareComponent,
+      defaultContent = _ref2.defaultContent;
 
   var _useState3 = (0, _react.useState)(),
       _useState4 = _slicedToArray(_useState3, 2),
@@ -96,6 +99,7 @@ var OkrShare = function OkrShare(_ref2) {
     },
     uid: uid,
     shareImage: shareImage,
+    defaultContent: defaultContent,
     shareComponent: shareComponent(setShareImage)
   }) : null));
 };

package/lib/components/common-share/publishMblog.js

@@ -55,7 +55,9 @@ function PublishMblog(_ref) {
   var base64 = _ref.base64,
       getModalRef = _ref.getModalRef,
       closeModal = _ref.closeModal,
-      uid = _ref.uid;
+      uid = _ref.uid,
+      _ref$defaultContent = _ref.defaultContent,
+      defaultContent = _ref$defaultContent === void 0 ? "秀一秀我的 OKR" : _ref$defaultContent;
 
   var _useState = (0, _react.useState)({
     url: "",
@@ -95,7 +97,7 @@ function PublishMblog(_ref) {
     }
   }, /*#__PURE__*/_react["default"].createElement(_mblog["default"], {
     autoResizing: false,
-    defaultContent: "\u79C0\u4E00\u79C0\u6211\u7684 OKR",
+    defaultContent: defaultContent,
     submitStatus: status,
     commentsTypeKey: "share-okr" + loginUserId + uid,
     autoFocus: true,

package/lib/components/nav-top/components/user-message/index.js

@@ -153,6 +153,9 @@ var UserMessage = function UserMessage() {
         var blessIndicator = indicators.filter(function (item) {
           return item.type === 'mZhufu';
         });
+        var weeklyReportIndicator = indicators.filter(function (item) {
+          return item.type === 'mWeekStatisticIndicator';
+        });
 
         if (blessIndicator.length === 1) {
           var userInfo = (0, _bsGlobal.getUserInfo)();
@@ -164,6 +167,12 @@ var UserMessage = function UserMessage() {
 
           window.util.openGift(options);
         }
+
+        if (weeklyReportIndicator.length) {
+          var _window;
+
+          (_window = window) === null || _window === void 0 ? void 0 : _window.Talent.app.vent.trigger('open-weekly-report-modal');
+        }
       }
     });
   };

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

@@ -51,10 +51,10 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure undefined"); }
 
-var preCls = 'weekly-report-card';
+var preCls = "weekly-report-card";
 
 var getImageBase64ByUrl = function getImageBase64ByUrl(toUserId) {
-  return (0, _request.rpost)('v1')("okr/share/getBase64Str", {
+  return (0, _request.rpost)("v1")("okr/share/getBase64Str", {
     toUserId: toUserId
   }).then(function (getBase64Str) {
     return getBase64Str.Data;
@@ -85,12 +85,8 @@ function Card(_ref, ref) {
               switch (_context.prev = _context.next) {
                 case 0:
                   return _context.abrupt("return", new Promise(function (res) {
-                    var shareContent = cardRef.current,
-                        //需要截图的包裹的（原生的）DOM 对象
-                    // @ts-ignore
-                    width = 375,
+                    var width = 375,
                         //获取dom 宽度
-                    // @ts-ignore
                     height = 710,
                         //获取dom 高度
                     canvas = document.createElement("canvas"),
@@ -128,7 +124,7 @@ function Card(_ref, ref) {
 
                     };
                     (0, _html2canvas["default"])(cardRef.current, opts).then(function (canvas) {
-                      var imgUrl = canvas.toDataURL('image/png'); //得到图片的base64编码数据
+                      var imgUrl = canvas.toDataURL("image/png"); //得到图片的base64编码数据
 
                       //得到图片的base64编码数据
                       res(imgUrl);
@@ -153,7 +149,7 @@ function Card(_ref, ref) {
   }, []);
   (0, _react.useEffect)(function () {
     if ((0, _bsGlobal.isWx)()) {
-      window['WWOpenData'] && window['WWOpenData'].enableCanvasSharing && window['WWOpenData'].enableCanvasSharing();
+      window["WWOpenData"] && window["WWOpenData"].enableCanvasSharing && window["WWOpenData"].enableCanvasSharing();
     }
 
     if (loginUserInfo.UserAvatar.HasAvatar) {
@@ -162,70 +158,70 @@ function Card(_ref, ref) {
           name: loginUserInfo.Name,
           userId: loginUserInfo.Id,
           color: loginUserInfo.UserAvatar.Color
-        }, 'data:image/jpeg;base64,' + data.obj);
+        }, "data:image/jpeg;base64," + data.obj);
       }).then(setAvatarSrc);
     } else {
       (0, _darwAvatar.drawAvatar)({
         name: loginUserInfo.Name,
         userId: loginUserInfo.Id,
         color: loginUserInfo.UserAvatar.Color
-      }, '').then(setAvatarSrc);
+      }, "").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();
+        window["WWOpenData"] && window["WWOpenData"].disableCanvasSharing && window["WWOpenData"].disableCanvasSharing();
       }
     };
   }, []);
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: preCls + '-content',
+    className: preCls + "-content",
     ref: cardRef
   }, /*#__PURE__*/_react["default"].createElement("img", {
-    className: preCls + '__title',
+    className: preCls + "__title",
     src: require("./img/title.png")
   }), /*#__PURE__*/_react["default"].createElement("div", {
-    className: preCls + '__date-range'
+    className: preCls + "__date-range"
   }, "6\u67087\u65E5-6\u670811\u65E5"), /*#__PURE__*/_react["default"].createElement("div", {
-    className: preCls + '__shadow'
+    className: preCls + "__shadow"
   }), /*#__PURE__*/_react["default"].createElement("img", {
-    className: preCls + '__laba',
+    className: preCls + "__laba",
     src: require("./img/laba.png")
   }), /*#__PURE__*/_react["default"].createElement("img", {
-    className: preCls + '__bofang',
+    className: preCls + "__bofang",
     src: require("./img/bofang.png")
   }), /*#__PURE__*/_react["default"].createElement("div", {
-    className: preCls + '__body'
+    className: preCls + "__body"
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: preCls + '__avatar'
+    className: preCls + "__avatar"
   }, /*#__PURE__*/_react["default"].createElement("img", {
     src: avatarSrc
   })), /*#__PURE__*/_react["default"].createElement("img", {
-    className: preCls + '__userName',
+    className: preCls + "__userName",
     src: nameSrc
   }), /*#__PURE__*/_react["default"].createElement("img", {
-    className: preCls + '__quote',
+    className: preCls + "__quote",
     src: require("./img/quote.png"),
     alt: ""
   }), /*#__PURE__*/_react["default"].createElement("div", {
-    className: preCls + '__text'
+    className: preCls + "__text"
   }, "\u575A\u6301\u6BCF\u5468\u53CD\u9988\u624D\u662F\u771F\u6B63\u7684\u4F18\u79C0\u771F\u6B63\u7684\u4F18\u79C0"), /*#__PURE__*/_react["default"].createElement(_board["default"], {
     percent: 80
   }), /*#__PURE__*/_react["default"].createElement("div", {
-    className: preCls + '__comparison'
+    className: preCls + "__comparison"
   }, "OKR \u5B8C\u6210\u5EA6", /*#__PURE__*/_react["default"].createElement("img", {
-    className: preCls + '__direction',
+    className: preCls + "__direction",
     src: require("./img/up.png"),
     alt: ""
   }), /*#__PURE__*/_react["default"].createElement("span", {
     style: {
-      color: '#4DC591'
+      color: "#4DC591"
     }
   }, "20%")), /*#__PURE__*/_react["default"].createElement("div", {
-    className: preCls + '__colleague'
+    className: preCls + "__colleague"
   }, "\u606D\u559C\u8D85\u8D8A\u4E86 ", /*#__PURE__*/_react["default"].createElement("span", null, "80%"), " \u7684\u540C\u4E8B"), /*#__PURE__*/_react["default"].createElement(_statistics["default"], null)), /*#__PURE__*/_react["default"].createElement("img", {
-    className: preCls + '__bottom',
+    className: preCls + "__bottom",
     src: require("./img/bottom.png")
   }));
 }

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

@@ -16,6 +16,16 @@
   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;
@@ -51,6 +61,7 @@
   border-radius: 12px;
   background-image: url("./img/body.png");
   background-size: 100% 100%;
+  background-position-y: -1px;
 }
 
 .weekly-report-card__avatar {

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

@@ -9,12 +9,18 @@ exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _rectBtn = _interopRequireDefault(require("../button/rect-btn"));
 
 var _commonShare = _interopRequireDefault(require("../common-share"));
 
 var _card = _interopRequireDefault(require("./card"));
 
+var _request = require("../../utils/request");
+
+var _tools = require("../../utils/tools");
+
 require("./index.css");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -43,13 +49,30 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
 
 var preCls = "weekly-report-card";
 
+var getImageBase64ByUrl = function getImageBase64ByUrl(base64) {
+  return (0, _request.rpost)('v1')("/okr/share/imageDownLoadDfs", {
+    'SharePicLink': base64
+  }).then(function (res) {
+    return res.Data;
+  });
+};
+
 function WeeklyReportPreview(_ref) {
-  var onShare = _ref.onShare;
+  var onShare = _ref.onShare,
+      onClose = _ref.onClose,
+      data = _ref.data;
   var cardRef = (0, _react.useRef)();
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      position: "relative"
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])("tu-icon-circle", preCls + "__close"),
+    onClick: onClose
+  }), /*#__PURE__*/_react["default"].createElement("div", {
     style: {
       position: "absolute",
-      left: "-999px"
+      left: "-99999999px"
     }
   }, /*#__PURE__*/_react["default"].createElement(_card["default"], {
     ref: cardRef
@@ -60,23 +83,29 @@ function WeeklyReportPreview(_ref) {
   }, /*#__PURE__*/_react["default"].createElement(_rectBtn["default"], {
     className: preCls + "__download",
     onClick: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-      var img, ele;
+      var _cardRef$current;
+
+      var img, url, a;
       return regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
               _context.next = 2;
-              return cardRef.current.getImage();
+              return cardRef === null || cardRef === void 0 ? void 0 : (_cardRef$current = cardRef.current) === null || _cardRef$current === void 0 ? void 0 : _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);
+              _context.next = 5;
+              return getImageBase64ByUrl(img.split(',')[1]);
 
-            case 8:
+            case 5:
+              url = _context.sent;
+              a = document.createElement('a');
+              a.href = url.obj;
+              a.download = 'okr.png';
+              a.click();
+
+            case 10:
             case "end":
               return _context.stop();
           }
@@ -111,20 +140,75 @@ function WeeklyReportPreview(_ref) {
 function WeeklyReportModal(_ref4) {
   _objectDestructuringEmpty(_ref4);
 
-  var _useState = (0, _react.useState)(),
+  var _useState = (0, _react.useState)(!!(0, _tools.getQueryString)().redisKey),
       _useState2 = _slicedToArray(_useState, 2),
       visible = _useState2[0],
       setVisible = _useState2[1];
 
+  var _useState3 = (0, _react.useState)(),
+      _useState4 = _slicedToArray(_useState3, 2),
+      redisKey = _useState4[0],
+      setRedisKey = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(),
+      _useState6 = _slicedToArray(_useState5, 2),
+      data = _useState6[0],
+      setData = _useState6[1];
+
+  (0, _react.useEffect)(function () {
+    var _window, _window$Talent, _window2, _window2$Talent;
+
+    (_window = window) === null || _window === void 0 ? void 0 : (_window$Talent = _window.Talent) === null || _window$Talent === void 0 ? void 0 : _window$Talent.app.vent.off('open-weekly-report-modal');
+    (_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$Talent = _window2.Talent) === null || _window2$Talent === void 0 ? void 0 : _window2$Talent.app.vent.on('open-weekly-report-modal', function (redisKey) {
+      setRedisKey(redisKey);
+      setVisible(true);
+    });
+    return function () {
+      var _window3, _window3$Talent;
+
+      return (_window3 = window) === null || _window3 === void 0 ? void 0 : (_window3$Talent = _window3.Talent) === null || _window3$Talent === void 0 ? void 0 : _window3$Talent.app.vent.off('open-weekly-report-modal');
+    };
+  }, []);
+  (0, _react.useEffect)(function () {
+    var param = '';
+
+    if (data) {
+      setData(null);
+    }
+
+    if (redisKey) {
+      param = 'redisKey=' + redisKey;
+    } else {
+      var current = new Date();
+      param = 'dateTimeTicks=' + (current.getFullYear() + '/' + (current.getMonth() + 1) + '/' + current.getDate());
+    }
+
+    (0, _request.rget)('v1')('okr/wwsummary/get?' + param).then(function (res) {});
+  }, [redisKey]);
+  (0, _react.useEffect)(function () {
+    if (!!(0, _tools.getQueryString)().redisKey) {
+      location.replace(decodeURIComponent(location.href).replace(/&?redisKey=\S*(&|$)/g, ''));
+    }
+
+    if (visible) {
+      (0, _request.rpost)('vi')('Indicator/Clear?message_type=0&indicator_type=15');
+    }
+  }, [visible]);
+  if (!data) return null;
   return /*#__PURE__*/_react["default"].createElement(_commonShare["default"], {
-    uid: 1,
-    visible: true,
+    uid: new Date().getTime(),
+    visible: visible,
     onClose: function onClose() {
       return setVisible(false);
     },
+    defaultContent: "Show \u4E00\u4E0B\u6211\u8FD9\u5468\u7684\u52AA\u529B\uFF5E",
     shareComponent: function shareComponent(onShare) {
       return /*#__PURE__*/_react["default"].createElement(WeeklyReportPreview, {
-        onShare: onShare
+        onShare: onShare,
+        onClose: function onClose() {
+          return setVisible(false);
+        },
+        data: data
       });
     }
   });

package/lib/pages/new-okr-list/header/filter.js

@@ -71,6 +71,7 @@ var Filter = function Filter(props) {
       setFilterNum = _useState4[1];
 
   var _useState5 = (0, _react.useState)(function () {
+    debugger;
     var routerData = (0, _tools.getQueryString)();
     var annualNum = routerData.annualNum,
         cycleType = routerData.cycleType,

package/lib/pages/new-okr-list/index.js

@@ -91,7 +91,7 @@ var NewOkrList = function NewOkrList(props) {
     targetSort: ""
   };
 
-  var filterCycle = function filterCycle() {
+  var filterCycle = function () {
     var routerData = (0, _tools.getQueryString)();
     var annualNum = routerData.annualNum,
         cycleType = routerData.cycleType,
@@ -110,7 +110,7 @@ var NewOkrList = function NewOkrList(props) {
       cycleType: "2",
       yqmNum: "".concat((0, _moment["default"])().quarter())
     };
-  };
+  }();
 
   var showWorkExecution = (0, _bsGlobal.getBSGlobal)("OkrAdvancedSetting").KRSetting.ShowWorkExecution;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@titaui/pc",
-  "version": "1.7.25",
+  "version": "1.7.26",
   "nameCN": "",
   "description": "",
   "main": "src/index.js",

package/src/components/common-share/index.tsx

@@ -10,9 +10,10 @@ interface Props {
   uid: string;
   shareComponent: any;
   shareImage?:string 
+  defaultContent?:string
 }
 
-const ShareContent = function({ closeModal, getModalRef, uid,shareComponent,shareImage }: Props) {
+const ShareContent = function({ closeModal, getModalRef, uid,shareComponent,shareImage,defaultContent }: Props) {
   const [showPublish, setShowPublish] = useState(false);
   useEffect(() => {
     if(shareImage){
@@ -33,6 +34,7 @@ const ShareContent = function({ closeModal, getModalRef, uid,shareComponent,shar
           closeModal={closeModal}
           key='publish'
           uid={uid}
+          defaultContent={defaultContent}
         />
       )}
     </Queue>
@@ -58,8 +60,9 @@ interface ShareProps {
   visible:boolean;
   onClose: () => void
   shareComponent: (share:(img:string) => void) => any
+  defaultContent?:string
 }
-const OkrShare: React.FC<ShareProps> = ({ uid,visible,onClose,shareComponent }) => {
+const OkrShare: React.FC<ShareProps> = ({ uid,visible,onClose,shareComponent,defaultContent }) => {
   const [shareImage,setShareImage] = useState<string>()
   const modalRef = useRef<any>();
 
@@ -80,6 +83,7 @@ const OkrShare: React.FC<ShareProps> = ({ uid,visible,onClose,shareComponent })
             getModalRef={() => modalRef.current.getRef()}
             uid={uid}
             shareImage={shareImage}
+            defaultContent={defaultContent}
             shareComponent={shareComponent(setShareImage)}
           />
         ) : null}

package/src/components/common-share/publishMblog.tsx

@@ -13,6 +13,7 @@ interface Props {
   getModalRef: Function;
   closeModal: Function;
   uid: any;
+  defaultContent?:string
 }
 
 function PublishMblog({
@@ -20,6 +21,7 @@ function PublishMblog({
   getModalRef,
   closeModal,
   uid,
+  defaultContent="秀一秀我的 OKR"
 }: Props): ReactElement {
   const [file, setFile] = useState({ url: "", pending: true });
   const [status, setStatus] = useState(0);
@@ -43,7 +45,7 @@ function PublishMblog({
         >
           <MBlog
             autoResizing={false}
-            defaultContent="秀一秀我的 OKR"
+            defaultContent={defaultContent}
             submitStatus={status}
             commentsTypeKey={"share-okr" + loginUserId + uid}
             autoFocus

package/src/components/nav-top/components/user-message/index.tsx

@@ -81,7 +81,9 @@ const UserMessage = () => {
 				const blessIndicator = indicators.filter((item) => {
 					return item.type === 'mZhufu';
 				});
-
+				const weeklyReportIndicator = indicators.filter((item) => {
+					return item.type === 'mWeekStatisticIndicator';
+				});
 				if (blessIndicator.length === 1) {
 					const userInfo = getUserInfo();
 					const options = {
@@ -92,6 +94,9 @@ const UserMessage = () => {
 					// @ts-ignore
 					window.util.openGift(options);
 				}
+				if(weeklyReportIndicator.length){
+					window?.Talent.app.vent.trigger('open-weekly-report-modal')
+				}
 			}
 		});
 	};

package/src/components/weekly-report/card.tsx

@@ -1,124 +1,149 @@
-import React, { forwardRef, ReactElement, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import html2Canvas from 'html2canvas'
-import Board from './board';
-import { getLoginUserInfo } from '../../utils/helpers';
-import { drawAvatar } from './common-painter/darwAvatar';
-import drawName from './common-painter/drawName';
-import Statistics from './statistics';
-import {isWx} from '../../utils/bs-global'
-import './index.scss';
-import { rpost } from '../../utils/request';
+import React, {
+  forwardRef,
+  ReactElement,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
+import html2Canvas from "html2canvas";
+import Board from "./board";
+import { getLoginUserInfo } from "../../utils/helpers";
+import { drawAvatar } from "./common-painter/darwAvatar";
+import drawName from "./common-painter/drawName";
+import Statistics from "./statistics";
+import { isWx } from "../../utils/bs-global";
+import "./index.scss";
+import { rpost,rget } from "../../utils/request";
 
-const preCls = 'weekly-report-card';
+const preCls = "weekly-report-card";
 
-interface Props {}
-const getImageBase64ByUrl = toUserId => {
-  return rpost('v1')(`okr/share/getBase64Str`, { toUserId })
-    .then(getBase64Str => {
-      return getBase64Str.Data;
-    })
+interface Props {
 }
-function Card({}: Props,ref): ReactElement {
+const getImageBase64ByUrl = (toUserId) => {
+  return rpost("v1")(`okr/share/getBase64Str`, { toUserId }).then(
+    (getBase64Str) => {
+      return getBase64Str.Data;
+    }
+  );
+};
+function Card({}: Props, ref): ReactElement {
   const [avatarSrc, setAvatarSrc] = useState<string>();
-  const [nameSrc,setNameSrc] = useState<string>()
+  const [nameSrc, setNameSrc] = useState<string>();
   const loginUserInfo = getLoginUserInfo();
-  const cardRef = useRef()
-  useImperativeHandle(ref,()=>({
-    getImage: async function(){
-      return new Promise(res => {
-        let shareContent = cardRef.current, //需要截图的包裹的（原生的）DOM 对象
-        // @ts-ignore
-        width = 375,          //获取dom 宽度
-        // @ts-ignore
-        height = 710,        //获取dom 高度
-        canvas = document.createElement("canvas"), //创建一个canvas节点
-        scale = 2;                                 //定义任意放大倍数 支持小数
-        canvas.width = width * scale;              //定义canvas 宽度 * 缩放
-        canvas.height = height * scale;            //定义canvas高度 *缩放
-        // @ts-ignore
-        canvas.style.width = width + "px";
-        // @ts-ignore
-        canvas.style.height = height + "px";
-        // @ts-ignore
-        let opts = {
-          backgroundColor: null, // 背景透明
-          scale: scale,          // 添加的scale 参数
-          canvas: canvas,        // 自定义 canvas
-          logging: false,        // 日志开关，便于查看html2canvas的内部执行流程
-          width: width,          // dom 原始宽度
-          height: height,
-          useCORS: true          // 【重要】开启跨域配置
-        }
-        html2Canvas(cardRef.current as any, opts).then(canvas => {
-          let imgUrl = canvas.toDataURL('image/png'); //得到图片的base64编码数据
-          res(imgUrl)
-        })
-      })
-      
-    }
-  }),[])
+  const cardRef = useRef<any>();
+  useImperativeHandle(
+    ref,
+    () => ({
+      getImage: async function () {
+        return new Promise((res) => {
+          let width = 375, //获取dom 宽度
+            height = 710, //获取dom 高度
+            canvas = document.createElement("canvas"), //创建一个canvas节点
+            scale = 2; //定义任意放大倍数 支持小数
+          canvas.width = width * scale; //定义canvas 宽度 * 缩放
+          canvas.height = height * scale; //定义canvas高度 *缩放
+          // @ts-ignore
+          canvas.style.width = width + "px";
+          // @ts-ignore
+          canvas.style.height = height + "px";
+          // @ts-ignore
+          let opts = {
+            backgroundColor: null, // 背景透明
+            scale: scale, // 添加的scale 参数
+            canvas: canvas, // 自定义 canvas
+            logging: false, // 日志开关，便于查看html2canvas的内部执行流程
+            width: width, // dom 原始宽度
+            height: height,
+            useCORS: true, // 【重要】开启跨域配置
+          };
+          html2Canvas(cardRef.current as any, opts).then((canvas) => {
+            let imgUrl = canvas.toDataURL("image/png"); //得到图片的base64编码数据
+            res(imgUrl);
+          });
+        });
+      },
+    }),
+    []
+  );
   useEffect(() => {
     if (isWx()) {
-      window['WWOpenData'] && window['WWOpenData'].enableCanvasSharing && window['WWOpenData'].enableCanvasSharing()
+      window["WWOpenData"] &&
+        window["WWOpenData"].enableCanvasSharing &&
+        window["WWOpenData"].enableCanvasSharing();
     }
     if (loginUserInfo.UserAvatar.HasAvatar) {
-      getImageBase64ByUrl(loginUserInfo.Id).then((data) =>
-        drawAvatar(
-          {
-            name: loginUserInfo.Name,
-            userId: loginUserInfo.Id,
-            color: loginUserInfo.UserAvatar.Color,
-          },
-          'data:image/jpeg;base64,' + data.obj,
-        ),
-      ).then(setAvatarSrc);
-    }else {
+      getImageBase64ByUrl(loginUserInfo.Id)
+        .then((data) =>
+          drawAvatar(
+            {
+              name: loginUserInfo.Name,
+              userId: loginUserInfo.Id,
+              color: loginUserInfo.UserAvatar.Color,
+            },
+            "data:image/jpeg;base64," + data.obj
+          )
+        )
+        .then(setAvatarSrc);
+    } else {
       drawAvatar(
         {
           name: loginUserInfo.Name,
           userId: loginUserInfo.Id,
           color: loginUserInfo.UserAvatar.Color,
         },
-        '',
+        ""
       ).then(setAvatarSrc);
     }
-    drawName(loginUserInfo.Name,loginUserInfo.Id).then(setNameSrc)
+    drawName(loginUserInfo.Name, loginUserInfo.Id).then(setNameSrc);
     return () => {
       if (isWx()) {
-        window['WWOpenData'] && window['WWOpenData'].disableCanvasSharing && window['WWOpenData'].disableCanvasSharing()
+        window["WWOpenData"] &&
+          window["WWOpenData"].disableCanvasSharing &&
+          window["WWOpenData"].disableCanvasSharing();
       }
-    }
+    };
   }, []);
 
+
+
   return (
-      <div className={preCls + '-content'} ref={cardRef}>
-        <img className={preCls + '__title'} src={require('./img/title.png')} />
-        <div className={preCls + '__date-range'}>6月7日-6月11日</div>
-        <div className={preCls + '__shadow'} />
-        <img className={preCls + '__laba'} src={require('./img/laba.png')}/>
-        <img className={preCls + '__bofang'} src={require('./img/bofang.png')}/>
-        <div className={preCls + '__body'}>
-          <div className={preCls + '__avatar'}>
-            <img src={avatarSrc} />
-          </div>
-          <img className={preCls + '__userName'} src={nameSrc}/>
-          <img className={preCls + '__quote'} src={require('./img/quote.png')} alt="" />
-          <div className={preCls + '__text'}>
-            坚持每周反馈才是真正的优秀真正的优秀
-          </div>
-          <Board percent={80} />
-          <div className={preCls + '__comparison'}>
-            OKR 完成度
-            <img className={preCls + '__direction'} src={require('./img/up.png')} alt="" />
-            <span style={{color:'#4DC591'}}>20%</span>
-          </div>
-          <div className={preCls + '__colleague'}>
-            恭喜超越了 <span>80%</span> 的同事
-          </div>
-          <Statistics/>
+    <div className={preCls + "-content"} ref={cardRef}>
+      <img className={preCls + "__title"} src={require("./img/title.png")} />
+      <div className={preCls + "__date-range"}>6月7日-6月11日</div>
+      <div className={preCls + "__shadow"} />
+      <img className={preCls + "__laba"} src={require("./img/laba.png")} />
+      <img className={preCls + "__bofang"} src={require("./img/bofang.png")} />
+      <div className={preCls + "__body"}>
+        <div className={preCls + "__avatar"}>
+          <img src={avatarSrc} />
+        </div>
+        <img className={preCls + "__userName"} src={nameSrc} />
+        <img
+          className={preCls + "__quote"}
+          src={require("./img/quote.png")}
+          alt=""
+        />
+        <div className={preCls + "__text"}>
+          坚持每周反馈才是真正的优秀真正的优秀
+        </div>
+        <Board percent={80} />
+        <div className={preCls + "__comparison"}>
+          OKR 完成度
+          <img
+            className={preCls + "__direction"}
+            src={require("./img/up.png")}
+            alt=""
+          />
+          <span style={{ color: "#4DC591" }}>20%</span>
+        </div>
+        <div className={preCls + "__colleague"}>
+          恭喜超越了 <span>80%</span> 的同事
         </div>
-        <img className={preCls + '__bottom'} src={require('./img/bottom.png')}/>
+        <Statistics />
       </div>
+      <img className={preCls + "__bottom"} src={require("./img/bottom.png")} />
+    </div>
   );
 }
 

package/src/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/src/components/weekly-report/index.scss

@@ -16,6 +16,15 @@
       transform: scale(0.9);
     }
   }
+  &__close {
+    position: absolute;
+    right: -42px;
+    top: 0;
+    width: 32px;
+    height: 32px;
+    background-image: url('./img/close.svg');
+    cursor: pointer;
+  }
   &-content {
     display: flex;
     flex-direction: column;
@@ -48,6 +57,7 @@
     border-radius: 12px;
     background-image: url('./img/body.png');
     background-size: 100% 100%;
+    background-position-y: -1px;
   }
   &__avatar {
     position: absolute;

package/src/components/weekly-report/index.tsx

@@ -1,18 +1,33 @@
-import React, { ReactElement, useRef,useState } from "react";
+import React, { ReactElement, useRef, useState, useEffect } from "react";
+import classnames from 'classnames'
 import RectBtn from "../button/rect-btn";
-import CommonShare from '../common-share'
+import CommonShare from "../common-share";
 import Card from "./card";
+import {rpost,rget} from '../../utils/request'
+import {getQueryString,changeQueryString} from '../../utils/tools'
 import "./index.scss";
 
-interface Props {}
+interface Props {
+  data:any
+}
 
 const preCls = "weekly-report-card";
 
-function WeeklyReportPreview({onShare}){
-  const cardRef = useRef();
+const getImageBase64ByUrl = base64 => {
+  return rpost('v1')(`/okr/share/imageDownLoadDfs`, { 'SharePicLink': base64 })
+    .then(res => {
+      return res.Data;
+    })
+}
+
+function WeeklyReportPreview({ onShare,onClose,data }) {
+  const cardRef = useRef<any>();
+  
+
   return (
-    <>
-    <div style={{ position: "absolute", left: "-999px" }}>
+    <div style={{ position: "relative"}}>
+      <div className={classnames("tu-icon-circle",preCls + "__close")} onClick={onClose}/>
+      <div style={{ position: "absolute", left: "-99999999px" }}>
         <Card ref={cardRef} />
       </div>
       <div className={preCls + "-wrapper"}>
@@ -22,29 +37,78 @@ function WeeklyReportPreview({onShare}){
         <RectBtn
           className={preCls + "__download"}
           onClick={async () => {
-            const img = await cardRef.current.getImage();
-            const ele = document.createElement("img");
-            ele.src = img;
-            ele.width = 375;
-            ele.style = "position:fixed;z-index:100000;top:0";
-            document.body.appendChild(ele);
+            const img = await cardRef?.current?.getImage();
+            const url = await getImageBase64ByUrl(img.split(',')[1])
+            let a = document.createElement('a');
+            a.href = url.obj;
+            a.download = 'okr.png';
+            a.click()
           }}
         >
           下载图片
         </RectBtn>
-        <RectBtn className={preCls + "__share"} onClick={async () => {
-          const img = await cardRef.current.getImage();
-          onShare(img)
-        }}>分享到动态</RectBtn>
+        <RectBtn
+          className={preCls + "__share"}
+          onClick={async () => {
+            const img = await cardRef.current.getImage();
+            onShare(img);
+          }}
+        >
+          分享到动态
+        </RectBtn>
       </div>
-    </>
-  )
+    </div>
+  );
 }
 
-function WeeklyReportModal({}: Props): ReactElement {
-  const [visible,setVisible] = useState<boolean>()
+function WeeklyReportModal({}: Props) {
+  const [visible, setVisible] = useState<boolean>(!!getQueryString().redisKey);
+  const [redisKey, setRedisKey] = useState<string>()
+  const [data,setData] = useState<any>()
+
+  useEffect(() => {
+    window?.Talent?.app.vent.off('open-weekly-report-modal')
+    window?.Talent?.app.vent.on('open-weekly-report-modal',(redisKey)=>{
+      setRedisKey(redisKey)
+      setVisible(true)
+    })
+    return () => window?.Talent?.app.vent.off('open-weekly-report-modal')
+  }, [])
+
+  useEffect(()=>{
+    let param = ''
+    if(data) {
+      setData(null)
+    }
+    if(redisKey){
+      param = 'redisKey='+redisKey
+    }else {
+      const current = new Date()
+      param = 'dateTimeTicks='+(current.getFullYear()+'/'+(current.getMonth()+1)+'/'+current.getDate())
+    }
+   
+    rget('v1')('okr/wwsummary/get?'+param).then(res => {
+      
+    })
+  },[redisKey])
+
+  useEffect(() => {
+    if(!!getQueryString().redisKey){
+      location.replace(decodeURIComponent(location.href).replace(/&?redisKey=\S*(&|$)/g,''))
+    }
+    if(visible){
+      rpost('vi')('Indicator/Clear?message_type=0&indicator_type=15')
+    }
+  },[visible])
+  if(!data) return null;
   return (
-    <CommonShare uid={1} visible onClose={()=>setVisible(false)} shareComponent={onShare => <WeeklyReportPreview onShare={onShare}/>}/>
+    <CommonShare
+      uid={new Date().getTime()}
+      visible={visible}
+      onClose={() => setVisible(false)}
+      defaultContent="Show 一下我这周的努力～"
+      shareComponent={(onShare) => <WeeklyReportPreview onShare={onShare} onClose={() => setVisible(false)} data={data}/>}
+    />
   );
 }
 

package/src/pages/new-okr-list/header/filter.tsx

@@ -26,6 +26,7 @@ const Filter = (props) => {
     return num;
   });
   const [cycle, setCycle] = useState<any>(()=>{
+    debugger
     const routerData = getQueryString()
     const {annualNum,cycleType,yqmNum} = routerData
     if(!!annualNum&&!!cycleType&&!!yqmNum){

package/src/pages/new-okr-list/index.tsx

@@ -33,7 +33,7 @@ const NewOkrList = (props) => {
     targetCategory: "",
     targetSort: "",
   };
-  const filterCycle: any = () =>{
+  const filterCycle: any = (() =>{
     const routerData = getQueryString()
     const {annualNum,cycleType,yqmNum} = routerData
     if(!!annualNum&&!!cycleType&&!!yqmNum){
@@ -44,7 +44,7 @@ const NewOkrList = (props) => {
       cycleType: "2",
       yqmNum: `${moment().quarter()}`,
     };
-  } 
+  })()
 
   const showWorkExecution =
     getBSGlobal("OkrAdvancedSetting").KRSetting.ShowWorkExecution;