cnhis-design-vue 3.1.13-beta.0 → 3.1.13-beta.11

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

@@ -1,6 +1,6 @@
 import { reactive, onMounted, nextTick } from 'vue';
 import { fabric } from '../utils/index.js';
-import { defaultStyle, drawLine, drawPoint, defaultTextStyle } from './useDraw.js';
+import { defaultStyle, drawPoint, drawLine, defaultTextStyle } from './useDraw.js';
 import useGrid from './useGrid.js';
 import { useShadow } from './useShadow.js';
 import { TEMPERATURE_MENU, PAIN_MENU } from './constant.js';
@@ -36,6 +36,8 @@ function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, ge
     target: null
   });
   const shadowLinesCache = /* @__PURE__ */ new Set();
+  const maiboPoints = /* @__PURE__ */ new Set();
+  const otherPoints = /* @__PURE__ */ new Set();
   onMounted(() => {
     nextTick(() => {
       init();
@@ -43,11 +45,14 @@ function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, ge
   });
   function init() {
     drawShaDow();
+    maiboPoints.clear();
+    otherPoints.clear();
     left.yScaleValue.forEach((scaleValue) => {
       scaleValue.dataList.forEach((item, dataIndex) => {
         drawPolyLine(item, dataIndex, scaleValue);
       });
     });
+    drawOverlapPoint();
     setCanvasEvent();
   }
   function drawShaDow(target) {
@@ -95,13 +100,15 @@ function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, ge
           if (itemPrev && points1.length === 1) {
             const point = getPoint(itemPrev);
             points1.unshift(point);
-            points2.unshift(point);
           }
-          const pointNext = getPoint(itemNext);
-          const pointNext2 = itemNext2 ? getPoint(itemNext2) : null;
-          if (itemNext && pointNext2 && pointNext.x === pointNext2.x && pointNext.y === pointNext2.y) {
-            points1.push(pointNext);
-            points2.push(pointNext);
+          if (itemNext && itemNext2) {
+            const pointNext = getPoint(itemNext);
+            const pointNext2 = getPoint(itemNext2);
+            if (pointNext.x === pointNext2.x && pointNext.y === pointNext2.y) {
+              points1.push(pointNext);
+            }
+          } else {
+            data.push({ points1, points2 });
           }
         } else {
           if (points1.length && points2.length) {
@@ -116,20 +123,31 @@ function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, ge
       const newData = data.reduce((pre, cur) => {
         const arr1 = cur.points1.map((v) => [v.x, v.y]);
         const arr2 = cur.points2.map((v) => [v.x, v.y]);
-        const [, ...newArr2] = arr2;
-        return pre.concat([[...arr1, ...newArr2.reverse()]]);
+        return pre.concat([[...arr1, ...arr2.reverse()]]);
       }, []);
       const { createShadowLines } = useShadow();
       newData.forEach((item) => {
-        const shadowLines = createShadowLines(item, pulseObj.shadowStyle._angle, pulseObj.shadowStyle.space);
-        shadowLines.forEach((l) => {
-          Object.assign(l, {
+        var _a2, _b2, _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,
-            ...pulseObj.shadowStyle || {}
+            ...((_b2 = pulseObj.shadow) == null ? void 0 : _b2.style) || {}
           });
-          shadowLinesCache.add(l);
-        });
-        canvas.value.add(...shadowLines);
+          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();
       });
     }
@@ -180,13 +198,57 @@ function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, ge
   }
   function getEqualXTypes(pointX) {
     const types = [];
+    const left2 = cumputedX(getXValue(pointX));
     canvas.value.forEachObject((obj) => {
-      if (obj.origin && cumputedX(getXValue(pointX)) === obj.left) {
+      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 = 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 {
       pointAttr = {},
@@ -289,6 +351,7 @@ function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, ge
         origin: {
           data: v,
           title: item.title,
+          key: item.key || "",
           unit: scaleValue.unit,
           type: scaleValue.type,
           dataIndex,
@@ -322,6 +385,11 @@ function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, ge
       }
       lineList.push(line);
       if (point) {
+        if (item.title.includes("\u8109\u640F")) {
+          maiboPoints.add(point);
+        } else {
+          otherPoints.add(point);
+        }
         setPointEvent(point);
         pointList.push(point);
       }
@@ -432,8 +500,10 @@ function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, ge
     return text;
   }
   function isLimit(time) {
-    const minMinute = Math.min(...xScaleList.map((v) => +v));
-    const maxMinute = Math.max(...xScaleList.map((v) => +v));
+    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;
   }

package/es/packages/fabric-chart/src/hooks/useCumputedPoint.d.ts

@@ -1,7 +1,7 @@
 import { IPropItems, IPointType } from '../interface';
 export declare function useCumputedPoint(propItems: IPropItems): {
-    cumputedX: (value: number | string) => number;
+    cumputedX: (value: number | string) => any;
     cumputedY: (type: IPointType, scaleValueList: number[], value: number | string) => number;
-    getXValue: (pointX: number) => string;
+    getXValue: (pointX: number) => string | undefined;
     getYValue: (type: IPointType, pointY: number) => number;
 };

package/es/packages/fabric-chart/src/hooks/useCumputedPoint.js

@@ -1,13 +1,22 @@
 function useCumputedPoint(propItems) {
-  const { xScaleList, xScaleCell, originX, endY, xCellWidth, left, vitalSignsOriginY, painOriginY } = propItems;
+  const { xScaleList, originX, endY, xCellWidth, left, vitalSignsOriginY, painOriginY, canvasWidth } = propItems;
   function cumputedX(value) {
     const time = new Date(value).getTime();
-    const minScale = Math.min(...xScaleList.map((v) => +v));
-    const i = Math.floor((time - minScale) / xScaleCell);
-    if (xScaleList.includes(time)) {
-      return originX + xCellWidth * i;
+    const [minScale] = xScaleList;
+    const maxScale = xScaleList.at(-1);
+    if (time < minScale.start)
+      return 0;
+    if (time > maxScale.end)
+      return canvasWidth;
+    const index = xScaleList.findIndex((v) => v.end >= time);
+    if (index > -1) {
+      const item = xScaleList[index];
+      if (time === item.start) {
+        return item.left;
+      } else {
+        return item.center;
+      }
     }
-    return originX + xCellWidth * i + xCellWidth / 2;
   }
   function cumputedY(type, scaleValueList, value) {
     const yScaleCell = propItems[`${type}YCell`];
@@ -16,13 +25,18 @@ function useCumputedPoint(propItems) {
     return newEndY - yScaleCell * yCellUnit;
   }
   function getXValue(pointX) {
-    const minScale = Math.min(...xScaleList.map((v) => +v));
-    const time = minScale + (pointX - originX) / xCellWidth * xScaleCell;
-    let d = new Date(time);
-    const month = `00${d.getMonth() + 1}`.slice(-2);
-    const day = `00${d.getDate()}`.slice(-2);
-    const date = `${d.getFullYear()}-${month}-${day} ${d.getHours()}:00`;
-    return date;
+    const index = xScaleList.findIndex((v) => v.left + xCellWidth >= pointX);
+    if (index > -1) {
+      const item = xScaleList[index];
+      const residueX = pointX - item.left;
+      const residueTime = item.scaleCell * residueX;
+      const time = item.start + residueTime;
+      let d = new Date(time);
+      const month = `00${d.getMonth() + 1}`.slice(-2);
+      const day = `00${d.getDate()}`.slice(-2);
+      const date = `${d.getFullYear()}-${month}-${day} ${d.getHours()}:${d.getMinutes()}`;
+      return date;
+    }
   }
   function getYValue(type, pointY) {
     var _a;

package/es/packages/fabric-chart/src/hooks/useDraw.d.ts

@@ -39,4 +39,4 @@ export declare const defaultTextStyle: {
 };
 export declare function drawLine(points: number[], style: Partial<ILineOptions>): fabric.Line;
 export declare function drawTextGroup(rectStyle: Partial<fabric.IRectOptions>, fontStyle: Partial<ITextOptions>, groupStyle: Partial<fabric.IGroupOptions>): fabric.Group;
-export declare function drawPoint(type: string | undefined, style: any): fabric.Circle | fabric.Triangle;
+export declare function drawPoint(type: string | undefined, style: any): fabric.Object;

package/es/packages/fabric-chart/src/hooks/useDraw.js

@@ -46,14 +46,17 @@ function drawTextGroup(rectStyle, fontStyle, groupStyle) {
   });
   const texts = new fabric.Text(String(fontStyle.value), {
     ...defaultTextStyle,
-    ...fontStyle
+    ...fontStyle,
+    ...fontStyle.textAlign == "left" ? {
+      originX: "left",
+      left: -(rectStyle.width / 2)
+    } : {}
   });
   return new fabric.Group([rect, texts], {
     ...groupStyle
   });
 }
 function drawPoint(type = "circle", style) {
-  let point = null;
   const newStyle = {
     originX: "center",
     originY: "center",
@@ -61,27 +64,81 @@ function drawPoint(type = "circle", style) {
     hasBorders: false,
     ...style
   };
+  const createCircleBorder = () => {
+    return new fabric.Circle({
+      objectCaching: false,
+      strokeWidth: style.strokeWidth || 1,
+      stroke: style.stroke || "red",
+      radius: style.radius || 5,
+      fill: "#fff"
+    });
+  };
   switch (type) {
     case "triangle":
-      point = new fabric.Triangle({
+      return new fabric.Triangle({
         width: 20,
         height: 20,
         strokeWidth: 1,
         scale: 1,
         ...newStyle
       });
-      break;
     case "circle":
-      point = new fabric.Circle({
+      return new fabric.Circle({
         objectCaching: false,
         strokeWidth: 1,
         radius: 5,
         scale: 1,
         ...newStyle
       });
-      break;
+    case "image":
+      if (style == null ? void 0 : style.url) ; else {
+        return new fabric.Image(style.element, {
+          ...newStyle,
+          scale: 1
+        });
+      }
+    case "yemai":
+      const createAdd = () => {
+        const width = ((style.radius || 5) + (style.strokeWidth || 1)) * 2;
+        const subLineStyle = {
+          stroke: style.strokeX || "blue",
+          strokeWidth: style.strokeWidthX || 1,
+          originX: "center",
+          originY: "center"
+        };
+        const line1 = new fabric.Line([0, width / 2, width, width / 2], subLineStyle);
+        const line2 = new fabric.Line([width / 2, 0, width / 2, width], subLineStyle);
+        return new fabric.Group([line1, line2]);
+      };
+      return new fabric.Group([createCircleBorder(), createAdd()], {
+        scale: 1,
+        ...newStyle
+      });
+    case "koumai":
+      const left = (style.radius || 5) + (style.strokeWidth || 1);
+      const circle = new fabric.Circle({
+        objectCaching: false,
+        radius: style.radiusCircle || 2,
+        fill: style.fillCircle || "#000",
+        originX: "center",
+        originY: "center",
+        left,
+        top: left
+      });
+      return new fabric.Group([createCircleBorder(), circle], {
+        scale: 1,
+        ...newStyle
+      });
+    default:
+      style && Reflect.deleteProperty(style, "stroke");
+      return new fabric.Text(String(type), {
+        fontFamily: "\u5FAE\u8F6F\u96C5\u9ED1",
+        scale: 1,
+        fontSize: 14,
+        fill: "#000",
+        ...newStyle
+      });
   }
-  return point;
 }
 
 export { defaultBorderStyle, defaultLineStyle, defaultRectStyle, defaultStyle, defaultTextStyle, drawLine, drawPoint, drawTextGroup };

package/es/packages/fabric-chart/src/hooks/useLeft.js

@@ -17,6 +17,36 @@ function useLeft(canvas, propItems, emits, setPopup, pointTipProps, getXValue, g
     iconsWidth,
     itemList
   } = propItems;
+  const mainScaleWidth = 9;
+  const subScaleWidth = 5;
+  function drawScaleNumber(text, item, left2, top) {
+    return new fabric.Text(String(text), {
+      ...defaultTextStyle,
+      originX: item.position || "center",
+      left: left2,
+      top,
+      ...item.style
+    });
+  }
+  function getScaleInfo(position = "center", x, width) {
+    let scaleLeft = x + width / 2;
+    let lineXMain = [scaleLeft - mainScaleWidth / 2, scaleLeft + mainScaleWidth / 2];
+    let lineXSub = [scaleLeft - subScaleWidth / 2, scaleLeft + subScaleWidth / 2];
+    let textLeft = scaleLeft;
+    if (position === "left") {
+      scaleLeft = x;
+      lineXMain = [scaleLeft, scaleLeft + mainScaleWidth];
+      lineXSub = [scaleLeft, scaleLeft + subScaleWidth];
+      textLeft = lineXMain[1];
+    }
+    if (position === "right") {
+      scaleLeft = x + width;
+      lineXMain = [scaleLeft - mainScaleWidth, scaleLeft];
+      lineXSub = [scaleLeft - subScaleWidth, scaleLeft];
+      textLeft = lineXMain[0];
+    }
+    return { lineXMain, lineXSub, textLeft };
+  }
   function drwaPainScaleValue(item) {
     const title = drawTextGroup({
       width: originX - iconsWidth,
@@ -32,17 +62,26 @@ ${item.title.slice(-2)}`,
       top: painOriginY.originY
     });
     const list = [];
-    item.list.forEach((v, i) => {
-      const top = painOriginY.endY - i * yCellHeight * item.spaceGridNumber;
-      const text = new fabric.Text(String(v), {
-        ...defaultTextStyle,
-        originX: "right",
-        left: originX - (item.marginRight || 3),
-        top: i === 0 ? endY - 5 : top,
-        ...item.style
+    if (item.showScale || item.showNumber) {
+      const { lineXMain, textLeft } = getScaleInfo(item.position, iconsWidth, originX - iconsWidth);
+      item.list.forEach((v, i) => {
+        let top = painOriginY.endY - i * yCellHeight * item.spaceGridNumber;
+        if (i === 0) {
+          top = endY - 5;
+        }
+        if (item.showNumber) {
+          list.push(drawScaleNumber(v, item, textLeft, top));
+        }
+        if (item.showScale && i !== 0) {
+          const [x1, x2] = lineXMain;
+          const line = new fabric.Line([x1, top, x2, top], {
+            ...defaultBorderStyle,
+            ...item.style
+          });
+          list.push(line);
+        }
       });
-      list.push(text);
-    });
+    }
     canvas.value.add(title, ...list);
   }
   function drawScaleValue() {
@@ -63,24 +102,46 @@ ${item.title.slice(-2)}`,
         ...defaultBorderStyle
       }) : null;
       line && list.push(line);
-      const leftVal = rectLeft + rectWidth / 2;
-      const spaceGridNumber = left.spaceGridNumber || 5;
-      item.list.forEach((v, i) => {
-        const top = vitalSignsOriginY.endY - i * yCellHeight * spaceGridNumber;
-        const text = new fabric.Text(String(v), {
-          ...defaultTextStyle,
-          left: leftVal,
-          top: i === 0 ? top - 5 : top,
-          ...item.style
+      const centerX = rectLeft + rectWidth / 2;
+      const spaceGridNumber = item.spaceGridNumber || 5;
+      if (item.showScale || item.showNumber) {
+        const spaceScale = spaceGridNumber * yCellHeight / 5;
+        const position = item.position || "center";
+        const { lineXMain, lineXSub, textLeft } = getScaleInfo(item.position, rectLeft, rectWidth);
+        item.list.forEach((v, i) => {
+          const top = vitalSignsOriginY.endY - i * yCellHeight * spaceGridNumber;
+          if (item.showNumber) {
+            const text = drawScaleNumber(v, item, textLeft, i === 0 ? top - 5 : top);
+            list.push(text);
+          }
+          if (item.showScale && i !== item.list.length - 1) {
+            for (let j = 0; j < 5; j++) {
+              if (j > 0 || !item.showNumber || position !== "center") {
+                let createLine = function(points) {
+                  const line2 = new fabric.Line(points, {
+                    ...defaultBorderStyle,
+                    ...item.style
+                  });
+                  list.push(line2);
+                };
+                const x1 = j == 0 ? lineXMain[0] : lineXSub[0];
+                const x2 = j == 0 ? lineXMain[1] : lineXSub[1];
+                const y = top - j * spaceScale;
+                createLine([x1, y, x2, y]);
+                if (i == item.list.length - 2 && j == 4) {
+                  createLine([lineXMain[0], y - spaceScale, lineXMain[1], y - spaceScale]);
+                }
+              }
+            }
+          }
         });
-        list.push(text);
-      });
+      }
       let title = item.title || "";
       if (item.unit)
         title += "\n" + item.unit;
       title && list.push(new fabric.Text(String(title), {
         ...defaultTextStyle,
-        left: leftVal,
+        left: centerX,
         top: vitalSignsOriginY.originY + yCellHeight * spaceGridNumber / 2,
         textAlign: "center",
         ...item.style

package/es/packages/fabric-chart/src/hooks/useOther.js

@@ -9,13 +9,14 @@ function useOther(canvas, propItems, cumputedX) {
       return false;
     const list = [];
     other.list.forEach((v, i) => {
+      var _a;
       const text = new fabric.Text(String(v.value.toString().split("").join("\n")), {
         originX: "center",
-        top: vitalSignsOriginY.originY,
+        top: (((_a = v.style) == null ? void 0 : _a.baseTop) || 0) + vitalSignsOriginY.originY,
         left: cumputedX(v.time),
         textAlign: "center",
         ...defaultStyle,
-        ...other.style || {}
+        ...v.style || {}
       });
       list.push(text);
     });

package/es/packages/fabric-chart/src/hooks/useShadow.js

@@ -101,7 +101,7 @@ function useShadow() {
     let counter = 0;
     let xinters;
     let p1, p2;
-    let pointCount = polygonPoints.length;
+    const pointCount = polygonPoints.length;
     p1 = polygonPoints[0];
     for (let i = 1; i <= pointCount; i++) {
       p2 = polygonPoints[i % pointCount];

package/es/packages/fabric-chart/src/hooks/useTop.js

@@ -35,7 +35,7 @@ function useTop(canvas, propItems) {
       }
       if (item.key == "xScalevalue") {
         drawDay(list, topY);
-        drawTime(list, topY);
+        drawTime(item, list, topY);
       } else {
         propItems[`${item.key}Height`] && drawDate(item, list, topY);
       }
@@ -44,7 +44,7 @@ function useTop(canvas, propItems) {
     group && group.sendToBack();
     group && canvas.value.add(group);
   }
-  function drawTime(list, topY) {
+  function drawTime(item, list, topY) {
     var _a;
     const dayHeight = top.xScalevalue.show ? top.dayHeight || 0 : 0;
     const height = xScalevalueHeight - dayHeight;
@@ -55,7 +55,8 @@ function useTop(canvas, propItems) {
     }, {
       value: top.xScalevalue.title,
       ...defaultTextStyle,
-      ...((_a = top.date) == null ? void 0 : _a.style) || {}
+      ...((_a = top.date) == null ? void 0 : _a.style) || {},
+      ...item.titleStyle || {}
     }, {
       left: iconsWidth,
       top: topY
@@ -115,7 +116,8 @@ function useTop(canvas, propItems) {
     }, {
       value: item.title,
       ...defaultTextStyle,
-      ...(item == null ? void 0 : item.style) || {}
+      ...(item == null ? void 0 : item.style) || {},
+      ...item.titleStyle || {}
     }, {
       left: iconsWidth,
       top: topY

package/es/packages/fabric-chart/src/interface.d.ts

@@ -43,8 +43,7 @@ export interface IPropItems {
     endY: number;
     xCellWidth: number;
     yCellHeight: number;
-    xScaleList: Array<string | number>;
-    xScaleCell: number;
+    xScaleList: Array<any>;
     breatheYCell: number;
     pulseYCell: number;
     temperatureYCell: number;
@@ -80,6 +79,7 @@ export interface ITop {
     operationDays?: IDate;
 }
 interface ILeft {
+    overlap?: any;
     spaceGridNumber?: number;
     yScaleValue: Array<any>;
     icons?: any;