cnhis-design-vue 3.1.33-beta.3 → 3.1.33-beta.5

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

@@ -0,0 +1,347 @@
+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 _export_sfc from '../../../_virtual/plugin-vue_export-helper.js';
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "TemperatureChart",
+  props: {
+    data: { type: Object, required: true },
+    addRenderItem: { type: Function }
+  },
+  emits: [
+    "change",
+    "add",
+    "select"
+  ],
+  setup(__props, { expose, emit: emits }) {
+    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 { cumputedX, cumputedY, getXValue, getYValue } = useCumputedPoint(propItems);
+    useTop(canvas, propItems);
+    const { setPopup, getEqualXTypes, isAddPoint, updateData, redrawPoints, pointTipProps, pointMenuProps, clickMenu } = 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;
+    });
+    expose({
+      redrawPoints,
+      select,
+      canvas
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createElementVNode("canvas", {
+          ref_key: "canvasRef",
+          ref: canvasRef
+        }, null, 512),
+        unref(canvas) && unref(pointTipProps) ? (openBlock(), createBlock(PopupTip, mergeProps({
+          key: 0,
+          propItems
+        }, unref(pointTipProps)), null, 16, ["propItems"])) : createCommentVNode("v-if", true),
+        unref(canvas) && unref(pointTipProps) ? (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);
+    };
+  }
+});
+var TemperatureChart = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "TemperatureChart.vue"]]);
+
+export { TemperatureChart as default };

package/es/components/fabric-chart/src/constants/index.d.ts

@@ -0,0 +1,4 @@
+import { InjectionKey, Ref } from 'vue';
+import { fabric } from '../utils';
+export declare const InjectionCanvas: InjectionKey<Ref<fabric.Canvas>>;
+export declare const InjectionCanvasRef: InjectionKey<Ref<any | null>>;

package/es/components/fabric-chart/src/constants/index.js

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

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

@@ -2,3 +2,4 @@ import { Ref } from 'vue';
 import { fabric } from '../utils';
 import { IPropItems } from '../interface';
 export default function useGrid(canvas: Ref<fabric.Canvas>, propItems: IPropItems): void;
+export declare function useBirthProcessGrid(canvas: Ref<fabric.Canvas>, propItems: IPropItems): void;

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

@@ -45,5 +45,31 @@ function useGrid(canvas, propItems) {
     });
   });
 }
+function useBirthProcessGrid(canvas, propItems) {
+  var _a, _b;
+  const { gridYNumber, originY, grid, originX, endX, xCellWidth, yCellHeight, gridXNumber, endY } = propItems;
+  const yList = [];
+  const xList = [];
+  for (let i = 0; i <= gridYNumber; i++) {
+    const y = originY + parseInt(String(yCellHeight * (gridYNumber - i)));
+    const line = drawLine([originX, y, endX, y], { ...defaultBorderStyle, ...((_a = grid.mainLineStyle) == null ? void 0 : _a.x) || {} });
+    yList.push(line);
+  }
+  for (let i = 0; i <= gridXNumber; i++) {
+    const x = originX + parseInt(String(xCellWidth * i));
+    const line = drawLine([x, originY, x, endY], { ...defaultBorderStyle, ...((_b = grid.mainLineStyle) == null ? void 0 : _b.y) || {} });
+    xList.push(line);
+  }
+  const group = new fabric.Group([...xList, ...yList], {
+    evented: false,
+    selectable: false
+  });
+  onMounted(() => {
+    nextTick(() => {
+      canvas.value.add(group);
+      canvas.value.sendToBack(group);
+    });
+  });
+}
 
-export { useGrid as default };
+export { useGrid as default, useBirthProcessGrid };

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

@@ -1,6 +1,6 @@
-import { InjectionKey, Ref } from 'vue';
 import { fabric } from './utils';
 import { AnyObject } from '../../../../es/shared/types';
+export declare type IMode = 'temperature' | 'birthProcess' | undefined;
 interface IEvent {
     selectable: boolean;
     evented: boolean;
@@ -107,15 +107,15 @@ export interface IData {
     width: number;
     height: number;
     borderStyle?: fabric.ILineOptions;
-    selectionStyle?: any;
+    selectionStyle?: AnyObject;
     hospitalizationDate: string;
     grid: IGrid;
     other?: IOther;
     top: ITop;
     left: ILeft;
     right?: IRight;
-    bottom: any;
-    config?: any;
+    bottom: AnyObject;
+    config?: AnyObject;
 }
 export interface ICoordinateValue {
     x: number;
@@ -128,6 +128,23 @@ export interface ILineOptions extends fabric.ILineOptions {
 export interface ITextOptions extends fabric.ITextOptions {
     [key: string]: any;
 }
-export declare const InjectionCanvas: InjectionKey<Ref<fabric.Canvas>>;
-export declare const InjectionPropItems: InjectionKey<IPropItems>;
+interface IBirthProcessOther {
+    fetalPresentationPositionLine?: fabric.ILineOptions;
+    alertLine?: fabric.ILineOptions;
+    processLine?: fabric.ILineOptions;
+}
+interface IBirthProcessXAxis {
+    time: AnyObject;
+    processTime: AnyObject;
+}
+export interface IBirthProcessData {
+    width: number;
+    height: number;
+    borderStyle?: fabric.ILineOptions;
+    selectionStyle?: AnyObject;
+    grid: AnyObject;
+    other?: IBirthProcessOther;
+    xAxis: IBirthProcessXAxis;
+    scaleValues: AnyObject[];
+}
 export {};

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

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