cnhis-design-vue 3.1.24-beta.7 → 3.1.24-beta.8

package/es/components/fabric-chart/src/hooks/useBottom.js

@@ -0,0 +1,97 @@
+import { onMounted, nextTick } from 'vue';
+import { fabric } from '../utils/index.js';
+import { defaultBorderStyle, drawTextGroup, defaultTextStyle, defaultRectStyle, defaultStyle } from './useDraw.js';
+
+function useBottom(canvas, propItems) {
+  const {
+    xScaleList,
+    originX,
+    endX,
+    endY,
+    xCellWidth,
+    canvasWidth,
+    canvasHeight,
+    bottom,
+    breathingHeight,
+    iconsWidth
+  } = propItems;
+  function drawBottom() {
+    var _a, _b, _c;
+    if (!breathingHeight || !bottom) {
+      const bottomBorder = new fabric.Line([iconsWidth, endY - 1, endX, endY - 1], {
+        ...defaultBorderStyle
+      });
+      canvas.value.add(bottomBorder);
+      bottomBorder.sendToBack();
+      return false;
+    }
+    const height = breathingHeight;
+    const bottomBreathingList = ((_a = bottom.breathing) == null ? void 0 : _a.list) || [];
+    const list = [];
+    let flag = true;
+    xScaleList.forEach((item, index) => {
+      const left = originX + index * xCellWidth;
+      let text = "";
+      bottomBreathingList.forEach((v, i) => {
+        const time = new Date(v.time).getTime();
+        if (time >= item && time < +item + item.scaleCell)
+          text = v.value;
+      });
+      const style = flag ? {
+        top: -(height / 2 - 10)
+      } : {
+        top: height / 2 - 10
+      };
+      if (text)
+        flag = !flag;
+      const group2 = drawTextGroup(
+        {
+          width: xCellWidth,
+          height,
+          ...defaultRectStyle
+        },
+        Object.assign(
+          {},
+          {
+            text: String(text),
+            ...defaultTextStyle
+          },
+          text ? style : {}
+        ),
+        {
+          left,
+          top: endY
+        }
+      );
+      list.push(group2);
+    });
+    const titleGroup = drawTextGroup(
+      {
+        width: endX,
+        height,
+        ...defaultRectStyle
+      },
+      {
+        text: String(((_b = bottom.breathing) == null ? void 0 : _b.title) + ((_c = bottom.breathing) == null ? void 0 : _c.unit)),
+        ...defaultTextStyle,
+        left: -((endX - originX) / 2)
+      },
+      {
+        left: 0,
+        top: endY
+      }
+    );
+    list.push(titleGroup);
+    const group = list.length > 0 ? new fabric.Group([...list], { ...defaultStyle }) : null;
+    group && group.sendToBack();
+    group && canvas.value.add(group);
+  }
+  onMounted(() => {
+    nextTick(() => {
+      drawBottom();
+      canvas.value.renderAll();
+    });
+  });
+}
+
+export { useBottom };

package/es/components/fabric-chart/src/hooks/useCenter.d.ts

@@ -0,0 +1,30 @@
+import { Ref } from 'vue';
+import { fabric } from '../utils';
+import { IPropItems } from '../interface';
+import { IPointType } from '../interface';
+export declare function useCenter(canvas: Ref<fabric.Canvas>, propItems: IPropItems, emits: any, cumputedX: Function, cumputedY: Function, getXValue: Function, getYValue: Function, addRenderItem: Function | undefined): {
+    pointTipProps: {
+        show: boolean;
+        point: {
+            x: number;
+            y: number;
+        };
+        list: string[];
+    };
+    pointMenuProps: {
+        show: boolean;
+        point: {
+            x: number;
+            y: number;
+        };
+        list: any[];
+        target: any;
+    };
+    clickMenu: ({ item, target }: {
+        item: any;
+        target: any;
+    }) => void;
+    setPopup: (point: any) => void;
+    getEqualXTypes: (pointX: number) => IPointType[];
+    isAddPoint: (x: number) => boolean;
+};

package/es/components/fabric-chart/src/hooks/useCenter.js

@@ -0,0 +1,588 @@
+import { reactive, onMounted, nextTick } from 'vue';
+import { fabric } from '../utils/index.js';
+import { drawLine, defaultStyle, drawPoint, drawText, drawArrow } from './useDraw.js';
+import useGrid from './useGrid.js';
+import { useShadow } from './useShadow.js';
+import { TEMPERATURE_MENU, PAIN_MENU, OVERLAP } from './constant.js';
+
+function isEffectiveNode(node) {
+  return (node == null ? void 0 : node.time) && ((node == null ? void 0 : node.value) || (node == null ? void 0 : node.value) === 0);
+}
+function getPointArr(arr) {
+  let _arr = [];
+  return arr.reduce((pre, cur, index) => {
+    var _a, _b;
+    _arr.push([cur.left, cur.top]);
+    if (((_b = (_a = cur.origin) == null ? void 0 : _a.data) == null ? void 0 : _b.breakpoint) || arr.length - 1 === index) {
+      pre.push(_arr);
+      _arr = [];
+    }
+    return pre;
+  }, []);
+}
+function deleteProperty(data, list) {
+  list.map((v) => v.type).forEach((key) => {
+    if (Reflect.has(data, key))
+      Reflect.deleteProperty(data, key);
+  });
+}
+function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, getYValue, addRenderItem) {
+  useGrid(canvas, propItems);
+  const {
+    left,
+    xScaleList,
+    yCellHeight,
+    originX,
+    endX,
+    originY,
+    endY,
+    itemList,
+    event,
+    vitalSignsOriginY,
+    painOriginY,
+    hospitalizationDate
+  } = propItems;
+  const pointTipProps = reactive({
+    show: false,
+    point: { x: 0, y: 0 },
+    list: []
+  });
+  const pointMenuProps = reactive({
+    show: false,
+    point: { x: 0, y: 0 },
+    list: [],
+    target: null
+  });
+  const shadowLinesCache = /* @__PURE__ */ new Set();
+  let shadowPointCache = [];
+  const maiboPoints = /* @__PURE__ */ new Set();
+  const otherPoints = /* @__PURE__ */ new Set();
+  const prevLines = /* @__PURE__ */ new Set();
+  onMounted(() => {
+    nextTick(() => {
+      init();
+    });
+  });
+  function init() {
+    shadowPointCache = [];
+    maiboPoints.clear();
+    otherPoints.clear();
+    prevLines.clear();
+    left.yScaleValue.forEach((scaleValue) => {
+      drawPositionLine(scaleValue);
+      scaleValue.dataList.forEach((item, dataIndex) => {
+        if (scaleValue.type !== "temperature" || item.enable) {
+          drawPolyLine(item, dataIndex, scaleValue);
+        }
+      });
+    });
+    drawShaDow();
+    drawOverlapPoint();
+    setCanvasEvent();
+  }
+  function drawPositionLine(scaleValue) {
+    if (scaleValue.type !== "temperature" || !scaleValue.positionLine)
+      return;
+    const y = cumputedY(scaleValue.type, scaleValue.list, scaleValue.positionLine.value);
+    const line = drawLine([originX, y, endX, y], scaleValue.positionLine);
+    canvas.value.add(line);
+    canvas.value.renderAll();
+  }
+  function drawShaDow(target) {
+    var _a;
+    const pulseObj = left.yScaleValue.find((item) => item.type === "pulse");
+    if (!pulseObj || !((_a = pulseObj.dataList) == null ? void 0 : _a.length))
+      return;
+    if (shadowLinesCache.size)
+      canvas.value.remove(...shadowLinesCache);
+    shadowLinesCache.clear();
+    if (shadowPointCache.length > 1) {
+      if (target) {
+        const { type, dataIndex, index } = target.origin || {};
+        if (type === "pulse") {
+          shadowPointCache[dataIndex].splice(index, 1, target);
+        }
+      }
+      const [data1, data2] = shadowPointCache;
+      if (!data1.length || !data2.length)
+        return;
+      const points1 = getPointArr(data1);
+      const points2 = getPointArr(data2);
+      const data = points1.reduce(
+        (pre, cur, index) => pre.concat([[...cur, ...points2[index].reverse()]]),
+        []
+      );
+      const { createShadowLines } = useShadow();
+      data.forEach((item) => {
+        var _a2, _b, _c, _d;
+        if (((_a2 = pulseObj.shadow) == null ? void 0 : _a2.mode) == "color") {
+          const points = item.map((v) => ({ x: v[0], y: v[1] }));
+          const polygon = new fabric.Polygon(points, {
+            ...defaultStyle,
+            ...((_b = pulseObj.shadow) == null ? void 0 : _b.style) || {}
+          });
+          shadowLinesCache.add(polygon);
+          canvas.value.add(polygon);
+        } else {
+          const shadowLines = createShadowLines(item, (_c = pulseObj.shadow) == null ? void 0 : _c.style._angle, (_d = pulseObj.shadow) == null ? void 0 : _d.style.space);
+          shadowLines.forEach((l) => {
+            var _a3;
+            Object.assign(l, {
+              ...defaultStyle,
+              ...((_a3 = pulseObj.shadow) == null ? void 0 : _a3.style) || {}
+            });
+            shadowLinesCache.add(l);
+          });
+          canvas.value.add(...shadowLines);
+        }
+        canvas.value.renderAll();
+      });
+    }
+  }
+  function setCanvasEvent() {
+    if (!propItems.event.evented)
+      return;
+    canvas.value.on("mouse:up", (event2) => {
+      var _a;
+      if (event2.button === 3) {
+        const { x = 0, y = 0 } = event2.pointer || {};
+        if (x >= originX && x <= endX && y >= originY && y <= endY) {
+          pointMenuProps.point = { x, y };
+          pointMenuProps.show = true;
+          const { type } = ((_a = event2.target) == null ? void 0 : _a.origin) || {};
+          if (event2.target && (type === "temperature" || type === "pain")) {
+            if (type === "temperature") {
+              pointMenuProps.list = [...TEMPERATURE_MENU];
+            }
+            if (type === "pain") {
+              pointMenuProps.list = [...PAIN_MENU];
+            }
+            pointMenuProps.target = event2.target;
+          } else {
+            pointMenuProps.target = null;
+            pointMenuProps.list = ["\u65B0\u589E\u8282\u70B9"];
+            itemList.forEach((v) => {
+              if (!getEqualXTypes(x).includes(v.bigType)) {
+                const newY = ["pain"].includes(v.bigType) ? painOriginY : vitalSignsOriginY;
+                if (y >= newY.originY && y <= newY.endY) {
+                  pointMenuProps.list.push({
+                    renderItem: addRenderItem ? addRenderItem(v) : () => v.title,
+                    origin: {
+                      title: v.title,
+                      unit: v.unit,
+                      type: v.bigType,
+                      dataIndex: v.dataIndex,
+                      key: v.key
+                    },
+                    pointer: event2.pointer
+                  });
+                }
+              }
+            });
+            if (!isAddPoint(x) || pointMenuProps.list.length === 1) {
+              pointMenuProps.show = false;
+              console.log("\u5F53\u524D\u65F6\u95F4\u6BB5\u5185\u65E0\u53EF\u65B0\u589E\u8282\u70B9");
+            }
+          }
+        }
+      }
+    });
+  }
+  function getEqualXTypes(pointX) {
+    const types = [];
+    const left2 = cumputedX(getXValue(pointX));
+    canvas.value.forEachObject((obj) => {
+      if (obj.origin && left2 === obj.left) {
+        types.push(obj.origin.type);
+      }
+    });
+    return [...new Set(types)];
+  }
+  function drawOverlapPoint() {
+    var _a;
+    const pulseObj = left.yScaleValue.find((item) => item.type === "pulse");
+    if (!pulseObj || !((_a = pulseObj.dataList) == null ? void 0 : _a.length))
+      return;
+    if (!pulseObj.dataList.some((item) => item.title.includes("\u8109\u640F")))
+      return;
+    const overlap = Object.assign({}, OVERLAP, left.overlap || {});
+    const points = [];
+    maiboPoints.size && [...maiboPoints].forEach((item) => {
+      [...otherPoints].forEach((obj) => {
+        if (obj.origin && item.left === obj.left && item.top === obj.top) {
+          const key = obj.origin.key;
+          if (key) {
+            const pointer = {
+              left: obj.left,
+              top: obj.top,
+              ...defaultStyle,
+              hoverCursor: "default"
+            };
+            let type = "koumai";
+            if (key === "yemai") {
+              type = key;
+            }
+            if (key === "humai") {
+              type = "circle";
+            }
+            points.push(
+              drawPoint(type, {
+                ...overlap[key] || {},
+                ...pointer
+              })
+            );
+          }
+        }
+      });
+    });
+    setTimeout(() => {
+      canvas.value.add(...points);
+      points.forEach((v) => {
+        v == null ? void 0 : v.bringToFront();
+      });
+      canvas.value.renderAll();
+    });
+  }
+  function drawPolyLine(item, dataIndex, scaleValue) {
+    const {
+      type,
+      riseStyle = {},
+      noRiseStyle = {},
+      verifiedStyle = {},
+      reduceStyle = {},
+      pacemaker = {},
+      upArrowStyle = {},
+      limitValueStyle = {},
+      dataList = []
+    } = scaleValue;
+    const pointList = [];
+    const lineList = [];
+    const otherList = [];
+    item.list.forEach((v, index) => {
+      var _a;
+      const _item = type !== "temperature" ? item : dataList.find((_v) => _v.key === v.key);
+      const {
+        pointAttr = {},
+        lineAttr = {},
+        type: pointType = "circle",
+        upArrowShow = false,
+        limitValueShow = false
+      } = _item;
+      const points = getPointer(v, scaleValue);
+      const nextV = item.list[index + 1];
+      const nextPoint = getPointer(nextV, scaleValue);
+      let reduceLine, reducePoint, noRiseText, arrowGroup, riseText, verifiedText;
+      if ((points == null ? void 0 : points.length) && (type === "temperature" || type === "pain")) {
+        if (v.noRise && noRiseStyle.show) {
+          if (typeof v.noRise === "string") {
+            noRiseText = drawText([points[0], points[1] + 5], {
+              value: v.noRise.split("").join("\n"),
+              originY: "top",
+              ...noRiseStyle
+            });
+            otherList.push(noRiseText);
+          } else {
+            const top = points[1] + yCellHeight * 2;
+            arrowGroup = drawArrow([points[0], points[1], top], noRiseStyle);
+            otherList.push(arrowGroup);
+          }
+        }
+        if (v.rise && riseStyle.show) {
+          riseText = drawText([points[0], points[1] - 5], {
+            value: v.rise.split("").join("\n"),
+            originY: "bottom",
+            ...riseStyle
+          });
+          otherList.push(riseText);
+        }
+        if (v.verified) {
+          verifiedText = drawText([points[0], points[1] - 5], {
+            value: "v",
+            originX: "center",
+            originY: "bottom",
+            ...verifiedStyle
+          });
+          otherList.push(verifiedText);
+        }
+        if (v.physicsReduce || v.drugReduce) {
+          const reduceY = cumputedY(type, scaleValue.list, v.physicsReduce || v.drugReduce);
+          reduceLine = drawLine([...points, points[0], reduceY], {
+            ...lineAttr,
+            ...reduceStyle.line,
+            ...defaultStyle
+          });
+          reducePoint = drawPoint(((_a = reduceStyle == null ? void 0 : reduceStyle.point) == null ? void 0 : _a.type) || "circle", {
+            left: points[0],
+            top: reduceY,
+            ...reduceStyle.point,
+            ...defaultStyle
+          });
+          reduceLine && otherList.push(reduceLine);
+          reducePoint && otherList.push(reducePoint);
+        }
+      }
+      if ((points == null ? void 0 : points.length) && type === "pulse") {
+        let upArrow;
+        if (upArrowShow && v.value > 180) {
+          let top = points[1] - yCellHeight * 2.5;
+          let yArr = [points[1] - yCellHeight / 2, top];
+          if (top < vitalSignsOriginY.originY) {
+            top = points[1] + yCellHeight * 2.5;
+            yArr = [top, points[1] + yCellHeight / 2];
+          }
+          upArrow = drawArrow([points[0], yArr[0], yArr[1]], upArrowStyle, "up");
+          otherList.push(upArrow);
+        }
+        if (limitValueShow) {
+          const commonOptions = {
+            value: v.value,
+            originX: "center",
+            originY: "center",
+            ...limitValueStyle
+          };
+          if (v.value > Math.max(...scaleValue.list)) {
+            const top = upArrow ? points[1] + yCellHeight / 2 + upArrow.height : points[1] + yCellHeight;
+            const limitValue = drawText([points[0], top], commonOptions);
+            otherList.push(limitValue);
+          }
+          if (v.value < Math.min(...scaleValue.list)) {
+            const limitValue = drawText([points[0], points[1] - yCellHeight], commonOptions);
+            otherList.push(limitValue);
+          }
+        }
+      }
+      let point;
+      let line;
+      if (points && nextPoint && !v.breakpoint) {
+        line = drawLine([...points, ...nextPoint], {
+          ...lineAttr
+        });
+      } else if (points && !nextPoint && !v.breakpoint) {
+        const nextLinePoint = getPointer(nextV, scaleValue);
+        line = nextLinePoint ? drawLine([...points, ...nextLinePoint], {
+          ...lineAttr
+        }) : null;
+        nextLinePoint && prevLines.add({
+          dataIndex,
+          line
+        });
+      }
+      const previousLine = lineList[index - 1];
+      const pointAttrNew = {
+        origin: {
+          data: v,
+          title: _item.title,
+          key: _item.key || "",
+          unit: scaleValue.unit,
+          type,
+          dataIndex,
+          index
+        },
+        noRiseText,
+        arrowGroup,
+        verifiedText,
+        leftLine: previousLine,
+        rightLine: line,
+        reduceLine,
+        reducePoint,
+        lockMovementX: true,
+        ...v.pacemakerShow && type == "pulse" ? pacemaker.style : pointAttr,
+        ...propItems.event
+      };
+      const currentPointType = v.pacemakerShow && type == "pulse" ? pacemaker.value : pointType;
+      if (previousLine) {
+        point = drawPoint(currentPointType, {
+          left: previousLine.get("x2"),
+          top: previousLine.get("y2"),
+          ...pointAttrNew
+        });
+      } else {
+        if (points) {
+          pointAttrNew.leftLine = null;
+          point = drawPoint(currentPointType, {
+            left: points[0],
+            top: points[1],
+            ...pointAttrNew
+          });
+        }
+      }
+      lineList.push(line);
+      if (point) {
+        if (_item.title.includes("\u8109\u640F")) {
+          maiboPoints.add(point);
+        } else {
+          otherPoints.add(point);
+        }
+        setPointEvent(point);
+        pointList.push(point);
+      }
+    });
+    type === "pulse" && shadowPointCache.push(pointList);
+    Promise.all(pointList).then((res) => {
+      const lineListFilter = lineList.filter((v) => v);
+      let prevPoint = null;
+      res = res.filter((v) => {
+        if (v && prevPoint) {
+          prevPoint.nextPoint = v;
+          v.prevPoint = prevPoint;
+        }
+        prevPoint = v || prevPoint;
+        v == null ? void 0 : v.bringToFront();
+        return v;
+      });
+      Promise.all(otherList).then((r) => {
+        canvas.value.add(...lineListFilter, ...res, ...r);
+        res.forEach((v) => {
+          v == null ? void 0 : v.bringToFront();
+        });
+        canvas.value.requestRenderAll();
+      });
+    });
+  }
+  function setPointEvent(point) {
+    if (event.hovered) {
+      point.on("mouseover", () => {
+        setPopup(point);
+      });
+      point.on("mouseout", () => {
+        pointTipProps.show = false;
+      });
+    }
+    point.on("moving", () => {
+      moveLimit(point);
+      updateLine(point);
+      canvas.value.renderAll();
+      event.hovered && setPopup(point);
+    });
+    point.on("mouseup:before", (event2) => {
+      pointTipProps.show = false;
+      if (event2.e.button === 0) {
+        const { type } = point.origin;
+        const value = getYValue(type, point.top);
+        emits("change", {
+          ...point.origin,
+          data: {
+            ...point.origin.data,
+            value
+          }
+        });
+      }
+    });
+  }
+  function setPopup(point) {
+    const { title, unit, type, data } = point.origin;
+    pointTipProps.point = {
+      x: point.left,
+      y: point.top
+    };
+    pointTipProps.list = [getListValue(), `\u65F6\u95F4 ${((data == null ? void 0 : data.time) || getXValue(point.left)).slice(-5)}`];
+    pointTipProps.show = true;
+    function getListValue() {
+      const { value = getYValue(type, point.top), drugReduce, physicsReduce } = data || {};
+      if (drugReduce) {
+        return `\u836F\u7269\u964D${type == "pain" ? "\u75DB" : "\u6E29"} ${value}\u2014>${drugReduce}${unit || ""}`;
+      }
+      if (physicsReduce) {
+        return `\u7269\u7406\u964D${type == "pain" ? "\u75DB" : "\u6E29"} ${value}\u2014>${physicsReduce}${unit || ""}`;
+      }
+      return `${title} ${value}${unit || ""}`;
+    }
+  }
+  function moveLimit(point) {
+    point.setCoords();
+    const newY = point.origin.type === "pain" ? painOriginY : vitalSignsOriginY;
+    if (point.top < newY.originY) {
+      point.set("top", newY.originY);
+    }
+    if (point.top > newY.endY) {
+      point.set("top", newY.endY);
+    }
+  }
+  function updateLine(point) {
+    if (point.leftLine) {
+      point.leftLine.setCoords();
+      point.leftLine.set({ x2: point.left, y2: point.top });
+    }
+    if (point.rightLine) {
+      point.rightLine.setCoords();
+      point.rightLine.set({ x1: point.left, y1: point.top });
+    }
+    if (point.reduceLine) {
+      point.reduceLine.setCoords();
+      point.reduceLine.set({ x1: point.left, y1: point.top });
+    }
+    if (point.noRiseText) {
+      point.noRiseText.setCoords();
+      point.noRiseText.set({ left: point.left, top: point.top + 5 });
+    }
+    if (point.arrowGroup) {
+      point.arrowGroup.setCoords();
+      point.arrowGroup.set({ left: point.left, top: point.top });
+    }
+    if (point.verifiedText) {
+      point.verifiedText.setCoords();
+      point.verifiedText.set({ left: point.left, top: point.top - 5 });
+    }
+    drawShaDow(point);
+  }
+  function isLimit(time) {
+    const [minScale] = xScaleList;
+    const maxScale = xScaleList.at(-1);
+    const minMinute = minScale.start;
+    const maxMinute = maxScale.end;
+    const getTime = new Date(time).getTime();
+    return getTime >= minMinute && getTime <= maxMinute;
+  }
+  function getPointer(v, scaleValue) {
+    const objOriginY = scaleValue.type === "pain" ? painOriginY : vitalSignsOriginY;
+    if (isEffectiveNode(v) && isLimit(v.time)) {
+      const x = cumputedX(v.time);
+      const y = cumputedY(scaleValue.type, scaleValue.list, v.value);
+      return [x, y < objOriginY.originY ? objOriginY.originY : y > objOriginY.endY ? objOriginY.endY : y];
+    }
+  }
+  function isAddPoint(x) {
+    const d = new Date();
+    const month = `00${d.getMonth() + 1}`.slice(-2);
+    const day = `00${d.getDate()}`.slice(-2);
+    const todayTime = new Date(`${d.getFullYear()}-${month}-${day} 23:59:59`).getTime();
+    const pointTime = new Date(`${getXValue(x)}:00`).getTime();
+    if (hospitalizationDate && pointTime < new Date(hospitalizationDate).getTime() || pointTime > todayTime)
+      return false;
+    return true;
+  }
+  function clickMenu({ item, target }) {
+    if (!target) {
+      emits("add", {
+        data: {
+          time: getXValue(item.pointer.x),
+          value: getYValue(item.origin.type, item.pointer.y),
+          ...item.origin.type !== "temperature" ? {} : { key: item.origin.key }
+        },
+        ...item.origin
+      });
+    } else {
+      const data = { ...target.origin.data };
+      deleteProperty(data, TEMPERATURE_MENU);
+      deleteProperty(data, PAIN_MENU);
+      data[`${item.type}`] = item.value;
+      if (target.origin.type === "temperature") {
+        data["key"] = target.origin.key;
+      }
+      emits("change", {
+        ...target.origin,
+        data
+      });
+    }
+  }
+  return {
+    pointTipProps,
+    pointMenuProps,
+    clickMenu,
+    setPopup,
+    getEqualXTypes,
+    isAddPoint
+  };
+}
+
+export { useCenter };