cnhis-design-vue 3.1.12-beta.4 → 3.1.12-beta.7

package/es/packages/fabric-chart/src/FabricChart.vue_vue_type_script_setup_true_lang.js

@@ -1,13 +1,276 @@
-import { defineComponent, openBlock, createElementBlock, createCommentVNode } from 'vue';
+import { defineComponent, ref, computed, reactive, onMounted, onBeforeUnmount, openBlock, createElementBlock, Fragment, createElementVNode, unref, createBlock, mergeProps, createCommentVNode } from 'vue';
+import { fabric } from './utils/index.js';
+import './components/PopupTip.js';
+import PopupMenu from './components/PopupMenu.js';
+import { defaultBorderStyle } from './hooks/useDraw.js';
+import { useTop } from './hooks/useTop.js';
+import { useCenter } from './hooks/useCenter.js';
+import { useLeft } from './hooks/useLeft.js';
+import { useRight } from './hooks/useRight.js';
+import { useBottom } from './hooks/useBottom.js';
+import { useOther } from './hooks/useOther.js';
+import { useEvent } from './hooks/useEvent.js';
+import script$1 from './components/PopupTip.vue_vue_type_script_setup_true_lang.js';
+import { useCumputedPoint } from './hooks/useCumputedPoint.js';
 
-const _hoisted_1 = { class: "c-fabric-chart" };
 var script = /* @__PURE__ */ defineComponent({
   __name: "FabricChart",
-  setup(__props) {
+  props: {
+    data: { type: null, required: true },
+    addRenderItem: { type: Function, required: false }
+  },
+  emits: ["change", "add"],
+  setup(__props, { emit: emits }) {
+    const props = __props;
+    const defaultHeight = 15;
+    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;
+      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) ? top.dayHeight || 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;
+    });
+    const gridYNumber = computed(() => {
+      const { grid } = props.data;
+      return grid.mainYCell * grid.subYCell;
+    });
+    const endX = computed(() => {
+      const { width, right = null } = props.data;
+      if (!right)
+        return width;
+      const endWidth = right.width || 50;
+      return width - endWidth;
+    });
+    const originX = computed(() => {
+      const { top, left } = props.data;
+      const originX2 = top.titleWidth + iconsWidth.value;
+      const residue = (endX.value - originX2) % gridXNumber.value;
+      return originX2 + residue;
+    });
+    const endY = computed(() => {
+      const { bottom = null, height } = props.data;
+      if (!bottom)
+        return height;
+      const endHeight = bottom.height || 30;
+      const endY2 = height - endHeight;
+      const residue = (endY2 - originY.value) % gridYNumber.value;
+      return endY2 - residue;
+    });
+    const originY = computed(() => {
+      const { top } = props.data;
+      const dayHeight = top.xScalevalue.show && (top.dayHeight || defaultHeight) || 0;
+      const xScaleHeight = top.xScalevalue.show && (top.xScalevalue.height || defaultHeight) || 0;
+      const topHeight = dateHeight.value + dayHeight + xScaleHeight + hospitalDaysHeight.value + operationDaysHeight.value;
+      return topHeight;
+    });
+    const xCellWidth = computed(() => {
+      return (endX.value - originX.value) / gridXNumber.value;
+    });
+    const yCellHeight = computed(() => {
+      return (endY.value - originY.value) / gridYNumber.value;
+    });
+    const xScaleList = computed(() => {
+      const { top } = props.data;
+      const dateList = top.date.list;
+      const dayList = top.xScalevalue.list;
+      const timeList = dateList.map((item) => {
+        return dayList.map((v) => {
+          return new Date(`${item} ${v}:00`).getTime();
+        });
+      });
+      return timeList.flat();
+    });
+    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 xScaleCell = computed(() => {
+      return xScaleList.value[1] - xScaleList.value[0];
+    });
+    const breatheYCell = computed(() => {
+      var _a;
+      const { yScaleValue, spaceGridNumber = 5 } = props.data.left;
+      const list = (_a = yScaleValue.find((v) => v.type === "breathe")) == null ? void 0 : _a.list;
+      return list ? yCellHeight.value / ((parseInt(list[1]) - parseInt(list[0])) / spaceGridNumber) : 0;
+    });
+    const pulseYCell = computed(() => {
+      const { yScaleValue, spaceGridNumber = 5 } = props.data.left;
+      const list = yScaleValue.find((v) => v.type === "pulse").list;
+      return yCellHeight.value / ((parseInt(list[1]) - parseInt(list[0])) / spaceGridNumber);
+    });
+    const temperatureYCell = computed(() => {
+      const { yScaleValue, spaceGridNumber = 5 } = props.data.left;
+      const list = yScaleValue.find((v) => v.type === "temperature").list;
+      return yCellHeight.value / ((parseInt(list[1]) - parseInt(list[0])) / spaceGridNumber);
+    });
+    const painYCell = computed(() => {
+      const { yScaleValue, spaceGridNumber = 5 } = props.data.left;
+      const item = yScaleValue.find((v) => v.type === "pain");
+      const list = (item == null ? void 0 : item.list) || [];
+      if (!list.length)
+        return 0;
+      return yCellHeight.value / ((parseInt(list[1]) - parseInt(list[0])) / item.spaceGridNumber);
+    });
+    const event = computed(() => {
+      var _a;
+      return ((_a = props.data.grid) == null ? void 0 : _a.event) || { selectable: true, evented: true };
+    });
+    const itemList = computed(() => {
+      const { left } = props.data;
+      return left.yScaleValue.map((item) => {
+        return item.dataList.map((v, dataIndex) => {
+          return {
+            ...v,
+            bigType: item.type,
+            titleStyle: item.style,
+            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) {
+        obj.originY = originY.value;
+        obj.endY = originY.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) {
+        obj.originY = originY.value + painHeight.value;
+        obj.endY = endY.value;
+      } else if (painIndex.value === left.yScaleValue.length - 1) {
+        obj.originY = originY.value;
+        obj.endY = endY.value - painHeight.value;
+      }
+      return obj;
+    });
+    const propItems = reactive({
+      canvasWidth: props.data.width,
+      canvasHeight: props.data.height,
+      borderStyle: props.data.borderStyle || defaultBorderStyle,
+      dateHeight: dateHeight.value,
+      hospitalDaysHeight: hospitalDaysHeight.value,
+      operationDaysHeight: operationDaysHeight.value,
+      xScalevalueHeight: xScalevalueHeight.value,
+      breathingHeight: breathingHeight.value,
+      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,
+      endX: endX.value,
+      endY: endY.value,
+      xCellWidth: xCellWidth.value,
+      yCellHeight: yCellHeight.value,
+      xScaleList: xScaleList.value,
+      xScaleCell: xScaleCell.value,
+      breatheYCell: breatheYCell.value,
+      pulseYCell: pulseYCell.value,
+      temperatureYCell: temperatureYCell.value,
+      painYCell: painYCell.value,
+      event: event.value,
+      itemList: itemList.value
+    });
+    const { cumputedX, cumputedY, getXValue, getYValue } = useCumputedPoint(propItems);
+    useTop(canvas, propItems);
+    const { pointTipProps, pointMenuProps, clickMenu, setPopup, getEqualXTypes } = useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, getYValue, props.addRenderItem);
+    useLeft(canvas, propItems, emits, setPopup, pointTipProps, getXValue, getYValue, getEqualXTypes);
+    useRight(canvas, propItems);
+    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);
+    });
+    onBeforeUnmount(() => {
+      canvas.value.clear();
+      canvas.value = null;
+    });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        createCommentVNode(' <canvas ref="canvasRef"></canvas> ')
-      ]);
+      return openBlock(), createElementBlock(Fragment, null, [
+        createElementVNode("canvas", {
+          ref_key: "canvasRef",
+          ref: canvasRef
+        }, null, 512),
+        unref(canvas) ? (openBlock(), createBlock(script$1, 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);
     };
   }
 });

package/es/packages/fabric-chart/src/components/PopupMenu.d.ts

@@ -0,0 +1,46 @@
+import { PropType } from 'vue';
+import { IPropItems, ICoordinateValue } from '../interface';
+declare const _default: import("vue").DefineComponent<{
+    show: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    list: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    point: {
+        type: PropType<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<ICoordinateValue>;
+    };
+    propItems: {
+        type: PropType<IPropItems>;
+    };
+    target: {
+        type: PropType<any>;
+    };
+}>> & {
+    "onUpdate:show"?: ((...args: any[]) => any) | undefined;
+    onClickMenu?: ((...args: any[]) => any) | undefined;
+}, {
+    show: boolean;
+    list: unknown[];
+}>;
+export default _default;

package/es/packages/fabric-chart/src/components/PopupMenu.js

@@ -0,0 +1,105 @@
+import { defineComponent, ref, createVNode, Teleport, withDirectives, vShow } from 'vue';
+import { NSpace, NInputNumber } from 'naive-ui';
+import useStyle from './useStyle.js';
+import { onClickOutside } from '@vueuse/core';
+
+var PopupMenu = defineComponent({
+  name: "PopupMenu",
+  inheritAttrs: false,
+  props: {
+    show: {
+      type: Boolean,
+      default: false
+    },
+    list: {
+      type: Array,
+      default: () => []
+    },
+    point: {
+      type: Object
+    },
+    propItems: {
+      type: Object
+    },
+    target: {
+      type: Object
+    }
+  },
+  emits: ["update:show", "clickMenu"],
+  setup(props, {
+    attrs,
+    slots,
+    emit
+  }) {
+    const popupRef = ref(null);
+    onClickOutside(popupRef, (event) => {
+      emit("update:show", false);
+    });
+    const {
+      left
+    } = props.propItems;
+    const pointStyle = useStyle(props);
+    function setNoClick(item) {
+      if (typeof item === "string" && item.startsWith("\u65B0\u589E")) {
+        return true;
+      }
+    }
+    function getItemContent(item) {
+      var _a;
+      if (typeof item === "string")
+        return item;
+      if (typeof item.value === "boolean")
+        return item.label;
+      if (!props.target)
+        return item.renderItem();
+      const min = +(((_a = left.yScaleValue.find((v) => v.type === props.target.origin.type)) == null ? void 0 : _a.list[0]) || 0);
+      return createVNode(NSpace, {
+        "inline": true,
+        "align": "center"
+      }, {
+        default: () => [createVNode("span", null, [item.label]), createVNode(NInputNumber, {
+          "style": "width: 120px",
+          "size": "small",
+          "value": item.value,
+          "onUpdate:value": ($event) => item.value = $event,
+          "clearable": true,
+          "placeholder": "\u8BF7\u8F93\u5165\u6570\u503C",
+          "max": props.target.origin.data.value,
+          "min": min,
+          "onFocus": () => emit("update:show", true)
+        }, null)]
+      });
+    }
+    function clickItem(event, item) {
+      if (setNoClick(item))
+        return void 0;
+      if ((event == null ? void 0 : event.target.className) === "") {
+        emit("update:show", false);
+        emit("clickMenu", {
+          item,
+          target: props.target
+        });
+      }
+    }
+    return () => {
+      return createVNode(Teleport, {
+        "to": ".c-fabric-chart"
+      }, {
+        default: () => [withDirectives(createVNode("ul", {
+          "ref": popupRef,
+          "class": "c-fabric-chart-popup-menu",
+          "style": pointStyle.value
+        }, [props.list.map((item) => {
+          return createVNode("li", {
+            "class": {
+              "no-click": setNoClick(item)
+            },
+            "onClick": (event) => clickItem(event, item)
+          }, [getItemContent(item)]);
+        })]), [[vShow, props.show]])]
+      });
+    };
+  }
+});
+
+export { PopupMenu as default };

package/es/packages/fabric-chart/src/components/PopupTip.js

@@ -0,0 +1,4 @@
+import script from './PopupTip.vue_vue_type_script_setup_true_lang.js';
+export { default } from './PopupTip.vue_vue_type_script_setup_true_lang.js';
+
+script.__file = "packages/fabric-chart/src/components/PopupTip.vue";

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

@@ -0,0 +1,63 @@
+import { IPropItems, ICoordinateValue } from '../interface';
+declare const _default: 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: ICoordinateValue;
+        list: Array<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, Record<string, any>, 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[];
+}>;
+export default _default;

package/es/packages/fabric-chart/src/components/PopupTip.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,32 @@
+import { defineComponent, openBlock, createBlock, Teleport, withDirectives, createElementVNode, normalizeStyle, unref, createElementBlock, Fragment, renderList, toDisplayString, vShow } from 'vue';
+import useStyle from './useStyle.js';
+
+var script = /* @__PURE__ */ defineComponent({
+  __name: "PopupTip",
+  props: {
+    show: { type: Boolean, required: true, default: false },
+    point: { type: null, required: true },
+    list: { type: Array, required: false, default: () => [] },
+    propItems: { type: null, required: true }
+  },
+  setup(__props) {
+    const props = __props;
+    const pointStyle = useStyle(props);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(Teleport, { to: ".c-fabric-chart" }, [
+        withDirectives(createElementVNode("ul", {
+          class: "c-fabric-chart-popup-tip",
+          style: normalizeStyle(unref(pointStyle))
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.list, (item) => {
+            return openBlock(), createElementBlock("li", null, toDisplayString(item), 1);
+          }), 256))
+        ], 4), [
+          [vShow, __props.show]
+        ])
+      ]);
+    };
+  }
+});
+
+export { script as default };

package/es/packages/fabric-chart/src/components/useStyle.d.ts

@@ -0,0 +1,7 @@
+export default function useStyle(props: any): import("vue").ComputedRef<{
+    top: string;
+    bottom: string;
+    left: string;
+    right: string;
+    'transform-origin': string;
+}>;

package/es/packages/fabric-chart/src/components/useStyle.js

@@ -0,0 +1,36 @@
+import { computed } from 'vue';
+
+function useStyle(props) {
+  const { canvasWidth, canvasHeight } = props.propItems;
+  const pointStyle = computed(() => {
+    const { x, y } = props.point;
+    const marginLeft = 15;
+    const marginTop = -15;
+    const style = {
+      top: "",
+      bottom: "",
+      left: "",
+      right: "",
+      "transform-origin": ""
+    };
+    const height = 200;
+    if (canvasWidth - (x + marginLeft) < height) {
+      style.right = canvasWidth - x + marginLeft + "px";
+      style["transform-origin"] = "right";
+    } else {
+      style.left = x + marginLeft + "px";
+      style["transform-origin"] = "left";
+    }
+    if (canvasHeight - (y + marginTop) < height) {
+      style.bottom = canvasHeight - y + marginTop + "px";
+      style["transform-origin"] += " bottom";
+    } else {
+      style.top = y + marginTop + "px";
+      style["transform-origin"] += " top";
+    }
+    return style;
+  });
+  return pointStyle;
+}
+
+export { useStyle as default };

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

@@ -0,0 +1,14 @@
+export declare const TEMPERATURE_MENU: ({
+    label: string;
+    value: boolean;
+    type: string;
+} | {
+    label: string;
+    value: undefined;
+    type: string;
+})[];
+export declare const PAIN_MENU: {
+    label: string;
+    value: undefined;
+    type: string;
+}[];

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

@@ -0,0 +1,36 @@
+const TEMPERATURE_MENU = [
+  {
+    label: "\u5347\u6E29",
+    value: false,
+    type: "rise"
+  },
+  {
+    label: "\u836F\u7269\u964D\u6E29",
+    value: void 0,
+    type: "drugCooling"
+  },
+  {
+    label: "\u7269\u7406\u964D\u6E29",
+    value: void 0,
+    type: "physicalCooling"
+  },
+  {
+    label: "\u4E0D\u5347",
+    value: false,
+    type: "noRise"
+  }
+];
+const PAIN_MENU = [
+  {
+    label: "\u836F\u7269\u964D\u75DB",
+    value: void 0,
+    type: "drugReducePain"
+  },
+  {
+    label: "\u7269\u7406\u964D\u75DB",
+    value: void 0,
+    type: "physicalReducePain"
+  }
+];
+
+export { PAIN_MENU, TEMPERATURE_MENU };

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

@@ -0,0 +1,9 @@
+export { defaultBorderStyle } from './useDraw';
+export * from './useCumputedPoint';
+export * from './useTop';
+export * from './useLeft';
+export * from './useRight';
+export * from './useCenter';
+export * from './useBottom';
+export * from './useOther';
+export * from './useEvent';

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

@@ -0,0 +1,9 @@
+export { defaultBorderStyle } from './useDraw.js';
+export { useCumputedPoint } from './useCumputedPoint.js';
+export { useTop } from './useTop.js';
+export { useLeft } from './useLeft.js';
+export { useRight } from './useRight.js';
+export { useCenter } from './useCenter.js';
+export { useBottom } from './useBottom.js';
+export { useOther } from './useOther.js';
+export { useEvent } from './useEvent.js';

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

@@ -0,0 +1,4 @@
+import { Ref } from 'vue';
+import { fabric } from '../utils';
+import { IPropItems } from '../interface';
+export declare function useBottom(canvas: Ref<fabric.Canvas>, propItems: IPropItems): void;