@titaui/pc 1.7.22 → 1.7.26

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

@@ -0,0 +1,150 @@
+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";
+
+interface Props {
+}
+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 loginUserInfo = getLoginUserInfo();
+  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();
+    }
+    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 {
+      drawAvatar(
+        {
+          name: loginUserInfo.Name,
+          userId: loginUserInfo.Id,
+          color: loginUserInfo.UserAvatar.Color,
+        },
+        ""
+      ).then(setAvatarSrc);
+    }
+    drawName(loginUserInfo.Name, loginUserInfo.Id).then(setNameSrc);
+    return () => {
+      if (isWx()) {
+        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>
+      <img className={preCls + "__bottom"} src={require("./img/bottom.png")} />
+    </div>
+  );
+}
+
+export default forwardRef(Card);

package/src/components/weekly-report/common-painter/darwAvatar.ts

@@ -0,0 +1,81 @@
+import openDataPainter from "./openDataPainter";
+import setSize from "./setSize";
+import { drawImage } from "./utils";
+
+interface avatarParms {
+  url?: string;
+  color?: string;
+  name: string;
+  id: number;
+  width: number;
+  height: number;
+  x: number;
+  y: number;
+  maxNameWidth?: number;
+}
+export async function drawAvatar(shareData, avatar: string) {
+  if (window['WWOpenData'] && window['WWOpenData'].initCanvas) {
+    window['WWOpenData'].initCanvas()
+  }
+  const canvas = document.createElement('canvas');
+  let ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
+  setSize(canvas, ctx, 72, 72);
+  ctx.beginPath();
+  await draw(ctx, {
+    width: 72,
+    height: 72,
+    x: 0,
+    y: 0,
+    url: avatar,
+    name: shareData.name,
+    id: shareData.userId,
+    color: shareData.color
+  });
+  const dataUrl = canvas.toDataURL();
+
+  return dataUrl;
+}
+ async function draw (ctx: CanvasRenderingContext2D, params: avatarParms):Promise<number> {
+  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();
+  params.url ? await drawImageAvatar(ctx, params) : await drawTextAvatar(ctx, params);
+  ctx.restore();
+  return params.y + params.height;
+  
+}
+function drawImageAvatar(ctx: CanvasRenderingContext2D, avatar: avatarParms) {
+  return  drawImage(ctx,avatar.url as string,avatar.x,avatar.y,avatar.width,avatar.height)
+}
+function drawTextAvatar(ctx: CanvasRenderingContext2D, avatar: avatarParms) {
+  console.log('text')
+  const maxNameWidth = avatar.maxNameWidth || 28;
+  return new Promise<void>(async resolve => {
+    ctx.fillStyle = avatar.color as string;
+    ctx.fill();
+
+    ctx.closePath();
+    ctx.fillStyle = 'white';
+    ctx.font = '14px arial';
+    ctx.textBaseline = 'bottom';
+    let namePainter = await openDataPainter(ctx,{id:avatar.id,name:avatar.name,type:'userName'},22,maxNameWidth);
+    const { width, height } = namePainter;
+  
+    namePainter.draw(
+      ctx,
+      avatar.x + avatar.width / 2 - width / 2,
+      avatar.y + avatar.height / 2 - height / 2,
+    );
+    ctx.closePath();
+    resolve();
+  });
+}

package/src/components/weekly-report/common-painter/drawName.ts

@@ -0,0 +1,19 @@
+import openDataPainter from "./openDataPainter";
+import setSize from "./setSize";
+
+export default async function(name,id){
+  const canvas = document.createElement('canvas');
+  let ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
+  setSize(canvas, ctx, 295, 24);
+  ctx.beginPath();
+  const lineHeight = 24;
+  ctx.font = `bold 16px/${lineHeight}px arial,sans-serif`;
+  ctx.fillStyle = '#141C28';
+  ctx.textBaseline='middle';
+  const painter = await openDataPainter(ctx, {name,id,type:'userName'},24,295);
+  let x = (295 - (painter.width)) / 2
+  painter.draw(ctx,x,0)
+  const dataUrl = canvas.toDataURL();
+
+  return dataUrl;
+}

package/src/components/weekly-report/common-painter/openDataPainter.ts

@@ -0,0 +1,47 @@
+import { getOpenId } from "&/components/common/openData";
+import { isWx } from "&/components/helper";
+
+
+interface openDataParam {
+  id: number; name: string; type: 'userName' | 'departmentName'
+}
+
+export default async function (
+  ctx: CanvasRenderingContext2D,
+  openDataParams: openDataParam,
+  lineHeight: number,
+  maxWidth: number = Infinity
+) {
+  let name = openDataParams.name
+  if (isWx()) {
+    name = await getOpenData(openDataParams)
+  }
+  const { width } = ctx.measureText(name);
+  let actualWidth = Math.min(width, maxWidth)
+  return {
+    width: actualWidth,
+    height: lineHeight,
+    draw: function (ctx: CanvasRenderingContext2D, x: number, y: number) {
+      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()
+    }
+  }
+}
+const getOpenData = ({ id, name, type }: openDataParam) => {
+  const openId = getOpenId(id, type)
+  if (!window['WWOpenData'] || !openId) return Promise.resolve(name)
+  return new Promise<string>((resolve, reject) => {
+    window['WWOpenData'].prefetch({ items: [{ id: openId, type }] }, (err, data) => {
+      if (err) {
+        return reject(err)
+      }
+      resolve(data.items[0].data)
+    })
+  })
+}

package/src/components/weekly-report/common-painter/setSize.ts

@@ -0,0 +1,12 @@
+export default function (canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D, width, height) {
+  const devicePixelRatio = window.devicePixelRatio || 1;
+  const 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/src/components/weekly-report/common-painter/utils.ts

@@ -0,0 +1,83 @@
+export function drawImage(
+  ctx: CanvasRenderingContext2D,
+  url: string,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+) {
+  return new Promise<void>(res => {
+    const img = new Image();
+    img.src = url;
+    img.onload = function () {
+      ctx.drawImage(img, x, y, width, height);
+      res();
+    };
+  });
+}
+export function drawTextMiddle(
+  ctx: CanvasRenderingContext2D,
+  text: string,
+  x: number,
+  y: number,
+  lineHeight: number,
+  maxWidth?: number,
+  textAlign?: 'left' | 'center'
+) {
+  ctx.textBaseline = 'middle';
+  if (!maxWidth) {
+
+    ctx.fillText(text, x, y + lineHeight / 2);
+    return y + lineHeight;
+  }
+  const lines = breakLinesForCanvas(ctx, text, maxWidth);
+  lines.forEach((l) => {
+    const { width } = ctx.measureText(l)
+    let 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;
+}
+
+export function breakLinesForCanvas(ctx: CanvasRenderingContext2D, text: string, width: number) {
+  var result: string[] = [];
+  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/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>