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

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

@@ -0,0 +1,160 @@
+import { onMounted, nextTick } from 'vue';
+import { fabric } from '../utils/index.js';
+import { defaultBorderStyle, defaultStyle, drawTextGroup, defaultTextStyle, defaultRectStyle } from './useDraw.js';
+
+function useTop(canvas, propItems) {
+  const {
+    grid,
+    originX,
+    xCellWidth,
+    gridXNumber,
+    top,
+    xScalevalueHeight,
+    iconsWidth,
+    topList,
+    endXLimit,
+    canvasWidth
+  } = propItems;
+  function drawTop() {
+    const list = [];
+    endXLimit && list.push(new fabric.Line([endXLimit, 0, canvasWidth, 0], defaultBorderStyle));
+    let topY = 0;
+    topList.forEach((item, index) => {
+      if (index > 0) {
+        topY += propItems[`${topList[index - 1].key}Height`];
+      }
+      if (item.key == "xScalevalue") {
+        drawDay(item, list, topY);
+        drawTime(item, list, topY);
+      } else {
+        propItems[`${item.key}Height`] && drawDate(item, list, topY);
+      }
+    });
+    const group = list.length > 0 ? new fabric.Group([...list], { ...defaultStyle }) : null;
+    group && group.sendToBack();
+    group && canvas.value.add(group);
+  }
+  function drawTime(item, list, topY) {
+    var _a;
+    const dayHeight = top.xScalevalue.show ? (_a = top.dayHeight) != null ? _a : 0 : 0;
+    const height = xScalevalueHeight - dayHeight;
+    const title = drawTextGroup(
+      {
+        width: originX - iconsWidth,
+        height: xScalevalueHeight,
+        ...defaultRectStyle
+      },
+      {
+        value: top.xScalevalue.title,
+        ...defaultTextStyle,
+        ...item.style || {},
+        ...item.titleStyle || {}
+      },
+      {
+        left: iconsWidth,
+        top: topY
+      }
+    );
+    list.push(title);
+    const timeList = [];
+    for (let j = 0; j < grid.mainXCell; j++) {
+      timeList.push(top.xScalevalue.list);
+    }
+    timeList.flat().forEach((v, i) => {
+      const left = originX + i * xCellWidth;
+      const textGroup = drawTextGroup(
+        {
+          width: xCellWidth,
+          height
+        },
+        {
+          value: v.value,
+          ...defaultTextStyle,
+          ...item.style || {},
+          ...v.style || {}
+        },
+        {
+          left,
+          top: topY + dayHeight
+        }
+      );
+      list.push(textGroup);
+    });
+  }
+  function drawDay(item, list, topY) {
+    if (!top.dayHeight)
+      return false;
+    const height = top.dayHeight;
+    const width = xCellWidth * grid.subSecondXCell;
+    const dayList = (gridXNumber - grid.surplusXCell) / grid.subSecondXCell;
+    for (let i = 0; i < dayList; i++) {
+      const left = originX + i * width;
+      const value = i % 2 === 0 ? "\u4E0A\u5348" : "\u4E0B\u5348";
+      const textGroup = drawTextGroup(
+        {
+          width,
+          height
+        },
+        {
+          value,
+          ...defaultTextStyle,
+          ...item.style || {}
+        },
+        {
+          left,
+          top: topY
+        }
+      );
+      list.push(textGroup);
+    }
+  }
+  function drawDate(item, list, topY) {
+    const height = propItems[`${item.key}Height`];
+    const title = drawTextGroup(
+      {
+        width: originX - iconsWidth,
+        height,
+        ...defaultRectStyle
+      },
+      {
+        value: item.title,
+        ...defaultTextStyle,
+        ...(item == null ? void 0 : item.style) || {},
+        ...item.titleStyle || {}
+      },
+      {
+        left: iconsWidth,
+        top: topY
+      }
+    );
+    list.push(title);
+    const width = xCellWidth * grid.subXCell;
+    item.list.forEach((v, i) => {
+      const left = originX + i * width;
+      const textGroup = drawTextGroup(
+        {
+          width,
+          height
+        },
+        {
+          value: v,
+          ...defaultTextStyle,
+          ...(item == null ? void 0 : item.style) || {}
+        },
+        {
+          left,
+          top: topY
+        }
+      );
+      list.push(textGroup);
+    });
+  }
+  onMounted(() => {
+    nextTick(() => {
+      drawTop();
+      canvas.value.renderAll();
+    });
+  });
+}
+
+export { useTop };

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

@@ -0,0 +1,131 @@
+import { InjectionKey, Ref } from 'vue';
+import { fabric } from './utils';
+import { AnyObject } from '../../../../es/shared/types';
+interface IEvent {
+    selectable: boolean;
+    evented: boolean;
+    hovered: boolean;
+}
+interface ImainLineStyle {
+    x: fabric.ILineOptions;
+    y: fabric.ILineOptions;
+}
+interface IGrid {
+    mainXCell: number;
+    subXCell: number;
+    subSecondXCell: number;
+    mainYCell: number;
+    subYCell: number;
+    surplusXCell: number;
+    surplusYCell: number;
+    mainLineStyle?: ImainLineStyle;
+    subLineStyle?: fabric.ILineOptions;
+    subSecondLineStyle?: fabric.ILineOptions;
+    event?: Partial<IEvent>;
+}
+export interface IPropItems {
+    canvasWidth: number;
+    canvasHeight: number;
+    borderStyle: fabric.ILineOptions;
+    selectionStyle: any;
+    dateHeight: number;
+    hospitalDaysHeight: number;
+    operationDaysHeight: number;
+    xScalevalueHeight: number;
+    topList: IDate[];
+    breathingHeight: number;
+    hospitalizationDate?: string;
+    grid: IGrid;
+    top: ITop;
+    left: ILeft;
+    right: IRight | undefined;
+    bottom: any;
+    other: IOther;
+    painIndex: number;
+    painHeight: number;
+    painOriginY: any;
+    vitalSignsOriginY: any;
+    gridXNumber: number;
+    gridYNumber: number;
+    iconsWidth: number;
+    originX: number;
+    originY: number;
+    originYLimit: number;
+    endX: number;
+    endXLimit: number;
+    endY: number;
+    xCellWidth: number;
+    yCellHeight: number;
+    xScaleList: Array<any>;
+    breatheYCell: number;
+    pulseYCell: number;
+    temperatureYCell: number;
+    painYCell: number;
+    event: Partial<IEvent>;
+    itemList: Array<any>;
+    getRightInfo: AnyObject;
+}
+export interface IPoint {
+    time: string;
+    value: string | number;
+    [key: string]: any;
+}
+interface IOther {
+    style?: fabric.ITextOptions;
+    list: Array<IPoint>;
+}
+export interface IDate {
+    seq: number;
+    show?: boolean;
+    title: string;
+    height?: number;
+    list: Array<string | number>;
+    style?: fabric.ITextOptions;
+    [key: string]: any;
+}
+export interface ITop {
+    dateStyle?: fabric.ITextOptions;
+    titleWidth: number;
+    date: IDate;
+    xScalevalue: IDate;
+    dayHeight?: number;
+    hospitalDays?: IDate;
+    operationDays?: IDate;
+}
+interface ILeft {
+    overlap?: any;
+    spaceGridNumber?: number;
+    yScaleValue: Array<any>;
+    icons?: any;
+}
+interface IRight {
+    width?: number;
+    yScaleValue: any;
+}
+export interface IData {
+    width: number;
+    height: number;
+    borderStyle?: fabric.ILineOptions;
+    selectionStyle?: any;
+    hospitalizationDate: string;
+    grid: IGrid;
+    other?: IOther;
+    top: ITop;
+    left: ILeft;
+    right?: IRight;
+    bottom: any;
+}
+export interface ICoordinateValue {
+    x: number;
+    y: number;
+}
+export declare type IPointType = 'breathe' | 'pulse' | 'temperature' | 'pain';
+export interface ILineOptions extends fabric.ILineOptions {
+    [key: string]: any;
+}
+export interface ITextOptions extends fabric.ITextOptions {
+    [key: string]: any;
+}
+export declare const InjectionCanvas: InjectionKey<Ref<fabric.Canvas>>;
+export declare const InjectionPropItems: InjectionKey<IPropItems>;
+export {};

package/es/components/fabric-chart/src/interface.js

@@ -0,0 +1,4 @@
+const InjectionCanvas = Symbol("canvas");
+const InjectionPropItems = Symbol("propItems");
+
+export { InjectionCanvas, InjectionPropItems };