cnhis-design-vue 3.1.33-beta.4 → 3.1.33-beta.6

package/es/components/fabric-chart/src/FabricChart.vue.js

@@ -1,344 +1,37 @@
-import { defineComponent, ref, computed, reactive, onMounted, onBeforeUnmount, openBlock, createElementBlock, Fragment, createElementVNode, unref, createBlock, mergeProps, createCommentVNode } from 'vue';
-import { fabric } from './utils/index.js';
-import { defaultBorderStyle } from './hooks/useDraw.js';
-import { useCumputedPoint } from './hooks/useCumputedPoint.js';
-import { useTop } from './hooks/useTop.js';
-import { useLeft } from './hooks/useLeft.js';
-import { useRight } from './hooks/useRight.js';
-import { useCenter } from './hooks/useCenter.js';
-import { useBottom } from './hooks/useBottom.js';
-import { useOther } from './hooks/useOther.js';
-import { useEvent, useCanvasEvent } from './hooks/useEvent.js';
-import PopupTip from './components/PopupTip.vue.js';
-import PopupMenu from './components/PopupMenu.js';
+import { defineComponent, computed, ref, unref, openBlock, createBlock, mergeProps, createCommentVNode } from 'vue';
+import TemperatureChart from './TemperatureChart.vue.js';
 import _export_sfc from '../../../_virtual/plugin-vue_export-helper.js';
 
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "FabricChart",
   props: {
-    data: null,
-    addRenderItem: null
+    mode: { type: String, default: "temperature" }
   },
-  emits: [
-    "change",
-    "add",
-    "select"
-  ],
-  setup(__props, { expose, emit: emits }) {
+  setup(__props, { expose }) {
+    var _a;
     const props = __props;
-    const defaultHeight = 15;
-    let select = ref();
-    const canvasRef = ref(null);
-    let canvas = ref();
-    const dateHeight = computed(() => {
-      const { top } = props.data;
-      return top.date.show && (top.date.height || defaultHeight) || 0;
-    });
-    const hospitalDaysHeight = computed(() => {
-      var _a;
-      const { top } = props.data;
-      return ((_a = top.hospitalDays) == null ? void 0 : _a.show) && (top.hospitalDays.height || defaultHeight) || 0;
-    });
-    const operationDaysHeight = computed(() => {
-      var _a;
-      const { top } = props.data;
-      return ((_a = top.operationDays) == null ? void 0 : _a.show) && (top.operationDays.height || defaultHeight) || 0;
-    });
-    const xScalevalueHeight = computed(() => {
-      var _a, _b, _c;
-      const { top } = props.data;
-      const height = ((_a = top.xScalevalue) == null ? void 0 : _a.show) && (top.xScalevalue.height || defaultHeight) || 0;
-      const dayHeight = ((_b = top.xScalevalue) == null ? void 0 : _b.show) ? (_c = top.dayHeight) != null ? _c : 0 : 0;
-      return height + dayHeight;
-    });
-    const breathingHeight = computed(() => {
-      var _a;
-      const { bottom } = props.data;
-      return ((_a = bottom == null ? void 0 : bottom.breathing) == null ? void 0 : _a.show) && (bottom.breathing.height || defaultHeight * 2) || 0;
-    });
-    const gridXNumber = computed(() => {
-      const { grid } = props.data;
-      return grid.mainXCell * grid.subXCell + grid.surplusXCell;
-    });
-    const gridYNumber = computed(() => {
-      const { grid } = props.data;
-      return grid.mainYCell * grid.subYCell + grid.surplusYCell;
-    });
-    const endX = computed(() => {
-      var _a;
-      const { width, right = null, top } = props.data;
-      if (!right)
-        return width;
-      const endWidth = (_a = right.width) != null ? _a : 0;
-      return width - endWidth;
-    });
-    const endXLimit = computed(() => {
-      const { grid } = props.data;
-      return endX.value - grid.surplusXCell * xCellWidth.value;
-    });
-    const originX = computed(() => {
-      const { top, left } = props.data;
-      const originX2 = top.titleWidth + iconsWidth.value;
-      return originX2;
-    });
-    const endY = computed(() => {
-      const { bottom = null, height } = props.data;
-      if (!bottom)
-        return height;
-      const endHeight = bottom.height || 30;
-      return height - endHeight;
-    });
-    const originY = computed(() => {
-      var _a;
-      const { top } = props.data;
-      const dayHeight = top.xScalevalue.show && ((_a = top.dayHeight) != null ? _a : 0) || 0;
-      const xScaleHeight = top.xScalevalue.show && (top.xScalevalue.height || defaultHeight) || 0;
-      const topHeight = dateHeight.value + dayHeight + xScaleHeight + hospitalDaysHeight.value + operationDaysHeight.value;
-      return topHeight;
-    });
-    const originYLimit = computed(() => {
-      const { grid } = props.data;
-      return originY.value + grid.surplusYCell * yCellHeight.value;
-    });
-    const xCellWidth = computed(() => {
-      return (endX.value - originX.value) / gridXNumber.value;
-    });
-    const yCellHeight = computed(() => {
-      return (endY.value - originY.value) / gridYNumber.value;
-    });
-    const iconsWidth = computed(() => {
-      var _a, _b;
-      const { left } = props.data;
-      return ((_a = left.icons) == null ? void 0 : _a.show) && (((_b = left.icons) == null ? void 0 : _b.width) || 100) || 0;
-    });
-    const xScaleList = computed(() => {
-      const { top } = props.data;
-      const dateList = top.date.list;
-      const times = top.xScalevalue.times;
-      let left = originX.value - xCellWidth.value;
-      function getDate(date) {
-        const [year = "2022", month = "01", day = "01"] = String(date).match(/\d+/g) || [];
-        return `20${year}`.slice(-4) + "-" + `00${month}`.slice(-2) + "-" + `00${day}`.slice(-2);
-      }
-      const timeList = dateList.map((item) => {
-        return times.map((v) => {
-          left += xCellWidth.value;
-          const start = new Date(`${getDate(item)} ${v.start}`).getTime();
-          const end = new Date(`${getDate(item)} ${v.end}`).getTime();
-          return {
-            start,
-            end,
-            left,
-            center: left + xCellWidth.value / 2,
-            scaleCell: (end - start) / xCellWidth.value
-          };
-        });
-      });
-      return timeList.flat();
-    });
-    const breatheYCell = computed(() => {
-      return computedYCell("breathe");
-    });
-    const pulseYCell = computed(() => {
-      return computedYCell("pulse");
-    });
-    const temperatureYCell = computed(() => {
-      return computedYCell("temperature");
-    });
-    const painYCell = computed(() => {
-      return computedYCell("pain");
-    });
-    const event = computed(() => {
-      var _a;
-      return ((_a = props.data.grid) == null ? void 0 : _a.event) || { selectable: true, evented: true, hovered: true };
-    });
-    const itemList = computed(() => {
-      const { left } = props.data;
-      return left.yScaleValue.map((item) => {
-        return item.dataList.map((v, dataIndex) => {
-          return {
-            ...v,
-            bigType: item.type,
-            unit: item.unit,
-            dataIndex
-          };
-        });
-      }).flat();
-    });
-    const painIndex = computed(() => {
-      const { left } = props.data;
-      return left.yScaleValue.findIndex((v) => v.type === "pain");
-    });
-    const painHeight = computed(() => {
-      const { grid } = props.data;
-      return painIndex.value === -1 ? 0 : yCellHeight.value * grid.subYCell;
-    });
-    const painOriginY = computed(() => {
-      const { left } = props.data;
-      let obj = {
-        originY: endY.value,
-        endY: endY.value
-      };
-      if (painIndex.value === 0 && left.yScaleValue.length > 1) {
-        obj.originY = originYLimit.value;
-        obj.endY = originYLimit.value + painHeight.value;
-      } else if (painIndex.value === left.yScaleValue.length - 1) {
-        obj.originY = endY.value - painHeight.value;
-        obj.endY = endY.value;
-      }
-      return obj;
-    });
-    const vitalSignsOriginY = computed(() => {
-      const { left } = props.data;
-      let obj = {
-        originY: originY.value,
-        endY: endY.value
-      };
-      if (painIndex.value === 0 && left.yScaleValue.length > 1) {
-        obj.originY = originYLimit.value + painHeight.value;
-        obj.endY = endY.value;
-      } else if (painIndex.value === left.yScaleValue.length - 1) {
-        obj.originY = originYLimit.value;
-        obj.endY = endY.value - painHeight.value;
-      }
-      return obj;
-    });
-    const topList = computed(() => {
-      const { top } = props.data;
-      let topList2 = [];
-      for (let i in top) {
-        if (top[i].show) {
-          topList2.push({
-            ...top[i],
-            key: i
-          });
-        }
-      }
-      return topList2.sort((a, b) => a.seq - b.seq);
-    });
-    const getRightInfo = computed(() => {
-      var _a;
-      const { left, right } = props.data;
-      const temperatureObj = left.yScaleValue.find((v) => v.type === "temperature");
-      const yScaleValue = (right == null ? void 0 : right.yScaleValue) || {};
-      if ((_a = temperatureObj == null ? void 0 : temperatureObj.list) == null ? void 0 : _a.length) {
-        Object.assign(yScaleValue, {
-          list: temperatureObj.list.map((v) => Math.floor((1.8 * v + 32) * 100) / 100),
-          spaceGridNumber: temperatureObj.spaceGridNumber
-        });
-      }
-      return yScaleValue;
-    });
-    const propItems = reactive({
-      canvasWidth: props.data.width,
-      canvasHeight: props.data.height,
-      borderStyle: props.data.borderStyle || defaultBorderStyle,
-      selectionStyle: props.data.selectionStyle || {},
-      dateHeight: dateHeight.value,
-      hospitalDaysHeight: hospitalDaysHeight.value,
-      operationDaysHeight: operationDaysHeight.value,
-      xScalevalueHeight: xScalevalueHeight.value,
-      topList: topList.value,
-      breathingHeight: breathingHeight.value,
-      hospitalizationDate: props.data.hospitalizationDate,
-      grid: props.data.grid,
-      top: props.data.top,
-      left: props.data.left,
-      right: props.data.right,
-      bottom: props.data.bottom,
-      other: props.data.other,
-      painIndex: painIndex.value,
-      painHeight: painHeight.value,
-      painOriginY: painOriginY.value,
-      vitalSignsOriginY: vitalSignsOriginY.value,
-      gridXNumber: gridXNumber.value,
-      gridYNumber: gridYNumber.value,
-      iconsWidth: iconsWidth.value,
-      originX: originX.value,
-      originY: originY.value,
-      originYLimit: originYLimit.value,
-      endX: endX.value,
-      endXLimit: endXLimit.value,
-      endY: endY.value,
-      xCellWidth: xCellWidth.value,
-      yCellHeight: yCellHeight.value,
-      xScaleList: xScaleList.value,
-      breatheYCell: breatheYCell.value,
-      pulseYCell: pulseYCell.value,
-      temperatureYCell: temperatureYCell.value,
-      painYCell: painYCell.value,
-      event: event.value,
-      itemList: itemList.value,
-      getRightInfo: getRightInfo.value,
-      config: props.data.config || {}
-    });
-    function computedYCell(type) {
-      const { yScaleValue } = props.data.left;
-      const item = yScaleValue.find((v) => v.type === type);
-      const list = (item == null ? void 0 : item.list) || [];
-      if (!list.length)
-        return 0;
-      return yCellHeight.value / ((list[1] - list[0]) / item.spaceGridNumber);
+    const isTemperature = computed(() => props.mode === "temperature");
+    const fabricChartRef = ref();
+    function redrawPoints() {
+      var _a2;
+      (_a2 = fabricChartRef.value) == null ? void 0 : _a2.redrawPoints();
     }
-    const { cumputedX, cumputedY, getXValue, getYValue } = useCumputedPoint(propItems);
-    useTop(canvas, propItems);
-    const { pointTipProps, pointMenuProps, clickMenu, setPopup, getEqualXTypes, isAddPoint, updateData, redrawPoints } = useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, getYValue, props.addRenderItem);
-    const { drawScaleValue } = useLeft(
-      canvas,
-      propItems,
-      emits,
-      setPopup,
-      pointTipProps,
-      getXValue,
-      getYValue,
-      getEqualXTypes,
-      isAddPoint,
-      updateData
-    );
-    useRight(canvas, propItems, drawScaleValue);
-    useBottom(canvas, propItems);
-    useOther(canvas, propItems, cumputedX);
-    onMounted(() => {
-      canvas.value = new fabric.Canvas(canvasRef.value, {
-        width: propItems.canvasWidth,
-        height: propItems.canvasHeight,
-        backgroundColor: "#fff",
-        selection: false,
-        containerClass: "c-fabric-chart",
-        fireRightClick: true
-      });
-      useEvent(canvasRef.value);
-      const { select: selectFunc } = useCanvasEvent(canvas, propItems, emits);
-      select.value = selectFunc;
-    });
-    onBeforeUnmount(() => {
-      canvas.value.clear();
-      canvas.value = null;
-    });
+    function select(key) {
+      var _a2;
+      (_a2 = fabricChartRef.value) == null ? void 0 : _a2.select(key);
+    }
+    const canvas = (_a = fabricChartRef.value) == null ? void 0 : _a.canvas;
     expose({
       redrawPoints,
       select,
       canvas
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(Fragment, null, [
-        createElementVNode("canvas", {
-          ref_key: "canvasRef",
-          ref: canvasRef
-        }, null, 512),
-        unref(canvas) ? (openBlock(), createBlock(PopupTip, mergeProps({
-          key: 0,
-          propItems
-        }, unref(pointTipProps)), null, 16, ["propItems"])) : createCommentVNode("v-if", true),
-        unref(canvas) ? (openBlock(), createBlock(unref(PopupMenu), mergeProps({
-          key: 1,
-          propItems
-        }, unref(pointMenuProps), {
-          show: unref(pointMenuProps).show,
-          "onUpdate:show": _cache[0] || (_cache[0] = ($event) => unref(pointMenuProps).show = $event),
-          onClickMenu: unref(clickMenu)
-        }), null, 16, ["propItems", "show", "onClickMenu"])) : createCommentVNode("v-if", true)
-      ], 64);
+      return unref(isTemperature) ? (openBlock(), createBlock(TemperatureChart, mergeProps({
+        key: 0,
+        ref_key: "fabricChartRef",
+        ref: fabricChartRef
+      }, _ctx.$attrs), null, 16)) : createCommentVNode("v-if", true);
     };
   }
 });

package/es/components/fabric-chart/src/TemperatureChart.vue.d.ts

@@ -0,0 +1,215 @@
+import { PropType } from 'vue';
+import { IData, IDate, IPointType, IPropItems } from './interface';
+declare const _default: import("vue").DefineComponent<{
+    data: {
+        type: PropType<IData>;
+        required: true;
+    };
+    addRenderItem: {
+        type: FunctionConstructor;
+    };
+}, {
+    defaultHeight: number;
+    props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
+        data: {
+            type: PropType<IData>;
+            required: true;
+        };
+        addRenderItem: {
+            type: FunctionConstructor;
+        };
+    }>> & {
+        onChange?: ((...args: any[]) => any) | undefined;
+        onSelect?: ((...args: any[]) => any) | undefined;
+        onAdd?: ((...args: any[]) => any) | undefined;
+    }>>;
+    emits: (event: "change" | "add" | "select", ...args: any[]) => void;
+    select: import("vue").Ref<any>;
+    canvasRef: any;
+    canvas: import("vue").Ref<any>;
+    dateHeight: import("vue").ComputedRef<number>;
+    hospitalDaysHeight: import("vue").ComputedRef<number>;
+    operationDaysHeight: import("vue").ComputedRef<number>;
+    xScalevalueHeight: import("vue").ComputedRef<number>;
+    breathingHeight: import("vue").ComputedRef<any>;
+    gridXNumber: import("vue").ComputedRef<number>;
+    gridYNumber: import("vue").ComputedRef<number>;
+    endX: import("vue").ComputedRef<number>;
+    endXLimit: import("vue").ComputedRef<number>;
+    originX: import("vue").ComputedRef<any>;
+    endY: import("vue").ComputedRef<number>;
+    originY: import("vue").ComputedRef<number>;
+    originYLimit: import("vue").ComputedRef<number>;
+    xCellWidth: import("vue").ComputedRef<number>;
+    yCellHeight: import("vue").ComputedRef<number>;
+    iconsWidth: import("vue").ComputedRef<any>;
+    xScaleList: import("vue").ComputedRef<any[]>;
+    breatheYCell: import("vue").ComputedRef<number>;
+    pulseYCell: import("vue").ComputedRef<number>;
+    temperatureYCell: import("vue").ComputedRef<number>;
+    painYCell: import("vue").ComputedRef<number>;
+    event: import("vue").ComputedRef<any>;
+    itemList: import("vue").ComputedRef<any[]>;
+    painIndex: import("vue").ComputedRef<number>;
+    painHeight: import("vue").ComputedRef<number>;
+    painOriginY: import("vue").ComputedRef<{
+        originY: number;
+        endY: number;
+    }>;
+    vitalSignsOriginY: import("vue").ComputedRef<{
+        originY: number;
+        endY: number;
+    }>;
+    topList: import("vue").ComputedRef<IDate[]>;
+    getRightInfo: import("vue").ComputedRef<any>;
+    propItems: any;
+    computedYCell: (type: IPointType) => number;
+    cumputedX: (value: string | number, setAllCenter?: boolean) => any;
+    cumputedY: (type: IPointType, scaleValueList: number[], value: string | number) => number;
+    getXValue: (pointX: number) => string | undefined;
+    getYValue: (type: IPointType, pointY: number) => number;
+    setPopup: (point: any) => void;
+    getEqualXTypes: (pointX: number) => IPointType[];
+    isAddPoint: (x: number) => boolean;
+    updateData: (params: any, mode?: string) => void;
+    redrawPoints: () => void;
+    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;
+    drawScaleValue: (yScaleValueList: any[]) => void;
+    PopupTip: import("vue").DefineComponent<{
+        show: {
+            type: BooleanConstructor;
+            required: true;
+            default: boolean;
+        };
+        point: {
+            type: null;
+            required: true;
+        };
+        list: {
+            type: ArrayConstructor;
+            required: false;
+            default: () => never[];
+        };
+        propItems: {
+            type: null;
+            required: true;
+        };
+    }, {
+        props: {
+            show: boolean;
+            point: import("./interface").ICoordinateValue;
+            list: string[];
+            propItems: IPropItems;
+        };
+        pointStyle: import("vue").ComputedRef<{
+            top: string;
+            bottom: string;
+            left: string;
+            right: string;
+            'transform-origin': string;
+        }>;
+        Teleport: {
+            new (): {
+                $props: import("vue").VNodeProps & import("vue").TeleportProps;
+            };
+            __isTeleport: true;
+        };
+    }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+        show: {
+            type: BooleanConstructor;
+            required: true;
+            default: boolean;
+        };
+        point: {
+            type: null;
+            required: true;
+        };
+        list: {
+            type: ArrayConstructor;
+            required: false;
+            default: () => never[];
+        };
+        propItems: {
+            type: null;
+            required: true;
+        };
+    }>>, {
+        list: unknown[];
+    }>;
+    PopupMenu: import("vue").DefineComponent<{
+        show: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        list: {
+            type: ArrayConstructor;
+            default: () => never[];
+        };
+        point: {
+            type: PropType<import("./interface").ICoordinateValue>;
+        };
+        propItems: {
+            type: PropType<IPropItems>;
+        };
+        target: {
+            type: PropType<any>;
+        };
+    }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:show" | "clickMenu")[], "clickMenu" | "update:show", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+        show: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        list: {
+            type: ArrayConstructor;
+            default: () => never[];
+        };
+        point: {
+            type: PropType<import("./interface").ICoordinateValue>;
+        };
+        propItems: {
+            type: PropType<IPropItems>;
+        };
+        target: {
+            type: PropType<any>;
+        };
+    }>> & {
+        "onUpdate:show"?: ((...args: any[]) => any) | undefined;
+        onClickMenu?: ((...args: any[]) => any) | undefined;
+    }, {
+        show: boolean;
+        list: unknown[];
+    }>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "add" | "select")[], "change" | "add" | "select", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    data: {
+        type: PropType<IData>;
+        required: true;
+    };
+    addRenderItem: {
+        type: FunctionConstructor;
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    onSelect?: ((...args: any[]) => any) | undefined;
+    onAdd?: ((...args: any[]) => any) | undefined;
+}, {}>;
+export default _default;