cnhis-design-vue 3.1.16-beta.9 → 3.1.17-beta.1

package/es/packages/big-table/src/BigTable.vue.d.ts

@@ -1126,7 +1126,12 @@ declare const _default: import("vue").DefineComponent<{
                 textColorGhostHoverWarning: string;
                 textColorGhostPressedWarning: string;
                 textColorGhostFocusWarning: string;
-                textColorGhostDisabledWarning: string;
+                textColorGhostDisabledWarning: string; /**
+                 * 判断是否渲染EditForm
+                 * @param {*} row
+                 * @param {*} column
+                 * @returns
+                 */
                 borderWarning: string;
                 borderHoverWarning: string;
                 borderPressedWarning: string;

package/es/packages/big-table/src/BigTable.vue_vue_type_script_setup_true_lang.js

@@ -354,10 +354,10 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         showSeq = true
       } = map;
       if (isEdit) {
-        state.editConfig = Object.assign(state.editConfig, editConfig);
+        Object.assign(state.editConfig, editConfig);
         state.rowConfig.height = 48;
       }
-      state.rowConfig = Object.assign(state.rowConfig, rowConfig);
+      Object.assign(state.rowConfig, rowConfig);
       state.rowConfig.keyField = handleRowId.value;
       if (selectType) {
         isBatchSelect = 1;

package/es/packages/big-table/src/components/edit-form/edit-date.js

@@ -1,4 +1,5 @@
-import { defineComponent, createVNode, mergeProps } from 'vue';
+import { defineComponent, computed, createVNode, mergeProps } from 'vue';
+import { generateTimeFormat } from '../../../../../src/utils';
 import { isFunction } from 'lodash-es';
 import { NDatePicker } from 'naive-ui';
 
@@ -25,7 +26,6 @@ var EditDate = defineComponent({
   emits: ["formChange"],
   setup(props, {
     attrs,
-    slots,
     emit
   }) {
     const onConfirm = (value) => {
@@ -102,11 +102,21 @@ var EditDate = defineComponent({
         return customDateDisabled(ts, props.row);
       };
     }
+    const formatConfig = computed(() => {
+      const valueFormat = props.col.valueFormat || "yyyy-MM-dd HH:mm:ss";
+      return {
+        valueFormat,
+        format: valueFormat,
+        timePickerProps: {
+          format: generateTimeFormat(valueFormat)
+        }
+      };
+    });
     const config = {
       type: props.col.type || props.col.dateType || "datetime",
       clearable: props.col.clearable || true,
       disabled: props.col.disabled || false,
-      valueFormat: props.col.valueFormat || "yyyy-MM-dd HH:mm:ss",
+      ...formatConfig.value,
       isDateDisabled: customDateDisabledDecorator(props.col.isDateDisabled) || isDateDisabled,
       placeholder: props.col.placeholder || "\u8BF7\u9009\u62E9",
       ...props.col.componentProps || {}

package/es/packages/big-table/src/components/edit-form/edit-time.js

@@ -41,6 +41,7 @@ var editTime = defineComponent({
     const config = {
       placeholder: props.col.placeholder || "\u8BF7\u9009\u62E9",
       valueFormat: props.col.valueFormat || "HH:mm",
+      format: props.col.valueFormat || "yyyy-MM-dd HH:mm:ss",
       ...props.col.componentProps || {}
     };
     return () => createVNode(NTimePicker, mergeProps(attrs, config, {

package/es/packages/big-table/src/components/separate.js

@@ -3,7 +3,7 @@ import { useSeparateMap } from '../../../../packages/big-table/src/hooks/useSepa
 import _export_sfc from '../../../../_virtual/plugin-vue_export-helper.js';
 
 const _hoisted_1 = { class: "big-table__separate" };
-const _hoisted_2 = /* @__PURE__ */ createElementVNode("span", { class: "big-table__separatePlaceholder" }, "p", -1);
+const _hoisted_2 = /* @__PURE__ */ createElementVNode("span", { class: "big-table__separatePlaceholder" }, /* @__PURE__ */ toDisplayString(` `), -1);
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "separate",
   props: {

package/es/packages/big-table/src/hooks/useSeparateRow.js

@@ -84,22 +84,25 @@ function useSeparateRow(getColumnConfig, getFieldItem, $VXETable) {
         });
       }
       (await res).push(...Array.from({ length: getColumnInfoMaxLength(parsedRowData) }).map((_, index) => {
+        const separateData = getSeparateRowData(parsedRowData, index);
         if (index === 0) {
           separateDataMap.value.set(row, {
             row,
             rawRow: rawData[dataIndex],
-            index,
-            separateData: getSeparateRowData(parsedRowData, index)
+            index: dataIndex,
+            separateData
           });
+          row.$__SEPARATE_DATA = [separateData];
           return row;
         }
         const data2 = { $__SEPARATE: true };
         separateDataMap.value.set(data2, {
           row: data2,
           rawRow: rawData[dataIndex],
-          index,
-          separateData: getSeparateRowData(parsedRowData, index)
+          index: dataIndex,
+          separateData
         });
+        row.$__SEPARATE_DATA.push(separateData);
         return data2;
       }));
       return res;

package/es/packages/button-print/index.d.ts

@@ -2537,7 +2537,10 @@ declare const ButtonPrint: SFCWithInstall<import("vue").DefineComponent<{
             modelValue: boolean;
         };
         emit: (event: "success" | "update:modelValue", ...args: any[]) => void;
-        form: any;
+        form: {
+            account: string;
+            password: string;
+        };
         rules: import("naive-ui").FormRules;
         style: {
             width: string;

package/es/packages/button-print/src/ButtonPrint.vue.d.ts

@@ -2541,7 +2541,10 @@ declare const _default: import("vue").DefineComponent<{
             modelValue: boolean;
         };
         emit: (event: "success" | "update:modelValue", ...args: any[]) => void;
-        form: any;
+        form: {
+            account: string;
+            password: string;
+        };
         rules: import("naive-ui").FormRules;
         style: {
             width: string;

package/es/packages/button-print/src/components/IdentityVerification.js

@@ -1,4 +1,4 @@
-import { defineComponent, reactive, ref, onMounted, watch, openBlock, createBlock, unref, normalizeStyle, withCtx, createElementVNode, createVNode, createTextVNode } from 'vue';
+import { defineComponent, reactive, ref, watch, openBlock, createBlock, unref, normalizeStyle, withCtx, createElementVNode, createVNode, createTextVNode } from 'vue';
 import { useMessage, NModal, NForm, NFormItem, NInput, NButton } from 'naive-ui';
 import _export_sfc from '../../../../_virtual/plugin-vue_export-helper.js';
 
@@ -19,7 +19,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       account: "",
       password: ""
     };
-    let form = reactive(JSON.parse(JSON.stringify(DEFAULT_FORM)));
+    let form = reactive({ ...DEFAULT_FORM });
     const rules = {
       account: { required: true, message: "\u8BF7\u8F93\u5165\u8D26\u53F7" },
       password: { required: true, message: "\u8BF7\u8F93\u5165\u5BC6\u7801" }
@@ -33,9 +33,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
     const submit = async () => {
       var _a;
-      const { data = {} } = await props.verifyUser(form);
+      const { data = {} } = await props.verifyUser(form) || {};
       if (data.result !== "SUCCESS") {
-        $message.error(data.resultMsg);
+        $message.error(data.resultMsg || "\u8BF7\u6DFB\u52A0\u8EAB\u4EFD\u6821\u9A8C\u63A5\u53E3\u914D\u7F6E");
         return false;
       }
       emit("success", (_a = data.map) == null ? void 0 : _a.token);
@@ -51,12 +51,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }
       });
     };
-    onMounted(() => {
-    });
     watch(() => props.modelValue, (val) => {
       if (val)
         return;
-      form = JSON.parse(JSON.stringify(DEFAULT_FORM));
+      Object.assign(form, DEFAULT_FORM);
     });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(NModal), {

package/es/packages/button-print/src/components/IdentityVerification.vue.d.ts

@@ -26,7 +26,10 @@ declare const _default: import("vue").DefineComponent<{
         modelValue: boolean;
     };
     emit: (event: "success" | "update:modelValue", ...args: any[]) => void;
-    form: any;
+    form: {
+        account: string;
+        password: string;
+    };
     rules: FormRules;
     style: {
         width: string;

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

@@ -52,6 +52,7 @@ declare const FabricChart: SFCWithInstall<import("vue").DefineComponent<{
         endY: number;
     }>;
     topList: import("vue").ComputedRef<import("./src/interface").IDate[]>;
+    getRightInfo: import("vue").ComputedRef<any>;
     propItems: any;
     computedYCell: (type: import("./src/interface").IPointType) => number;
     cumputedX: (value: string | number) => any;
@@ -81,6 +82,7 @@ declare const FabricChart: SFCWithInstall<import("vue").DefineComponent<{
     }) => void;
     setPopup: (point: any) => void;
     getEqualXTypes: (pointX: number) => import("./src/interface").IPointType[];
+    drawScaleValue: (yScaleValueList: any[]) => void;
     PopupTip: import("vue").DefineComponent<{
         show: {
             type: BooleanConstructor;

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

@@ -65,10 +65,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       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 = right.width || 50;
+      const endWidth = (_a = right.width) != null ? _a : 0;
       return width - endWidth;
     });
     const endXLimit = computed(() => {
@@ -148,7 +149,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     const event = computed(() => {
       var _a;
-      return ((_a = props.data.grid) == null ? void 0 : _a.event) || { selectable: true, evented: true };
+      return ((_a = props.data.grid) == null ? void 0 : _a.event) || { selectable: true, evented: true, hovered: true };
     });
     const itemList = computed(() => {
       const { left } = props.data;
@@ -214,6 +215,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       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,
@@ -252,7 +266,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       temperatureYCell: temperatureYCell.value,
       painYCell: painYCell.value,
       event: event.value,
-      itemList: itemList.value
+      itemList: itemList.value,
+      getRightInfo: getRightInfo.value
     });
     function computedYCell(type) {
       const { yScaleValue } = props.data.left;
@@ -260,13 +275,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const list = (item == null ? void 0 : item.list) || [];
       if (!list.length)
         return 0;
-      return yCellHeight.value / ((parseInt(list[1]) - parseInt(list[0])) / item.spaceGridNumber);
+      return yCellHeight.value / ((list[1] - list[0]) / item.spaceGridNumber);
     }
     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);
+    const { drawScaleValue } = useLeft(canvas, propItems, emits, setPopup, pointTipProps, getXValue, getYValue, getEqualXTypes);
+    useRight(canvas, propItems, drawScaleValue);
     useBottom(canvas, propItems);
     useOther(canvas, propItems, cumputedX);
     onMounted(() => {

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

@@ -53,6 +53,7 @@ declare const _default: import("vue").DefineComponent<{
         endY: number;
     }>;
     topList: import("vue").ComputedRef<IDate[]>;
+    getRightInfo: import("vue").ComputedRef<any>;
     propItems: any;
     computedYCell: (type: IPointType) => number;
     cumputedX: (value: string | number) => any;
@@ -82,6 +83,7 @@ declare const _default: import("vue").DefineComponent<{
     }) => void;
     setPopup: (point: any) => void;
     getEqualXTypes: (pointX: number) => IPointType[];
+    drawScaleValue: (yScaleValueList: any[]) => void;
     PopupTip: import("vue").DefineComponent<{
         show: {
             type: BooleanConstructor;

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

@@ -20,8 +20,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           style: normalizeStyle(unref(pointStyle))
         }, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(__props.list, (item) => {
-            return openBlock(), createElementBlock("li", null, toDisplayString(item), 1);
-          }), 256))
+            return openBlock(), createElementBlock("li", { key: item }, toDisplayString(item), 1);
+          }), 128))
         ], 4), [
           [vShow, __props.show]
         ])

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

@@ -1,7 +1,7 @@
 const TEMPERATURE_MENU = [
   {
     label: "\u5347\u6E29",
-    value: false,
+    value: true,
     type: "rise"
   },
   {

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

@@ -31,8 +31,7 @@ function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, ge
     originY,
     endY,
     itemList,
-    painIndex,
-    painHeight,
+    event,
     vitalSignsOriginY,
     painOriginY
   } = propItems;
@@ -131,23 +130,23 @@ function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, ge
   function setCanvasEvent() {
     if (!propItems.event.evented)
       return;
-    canvas.value.on("mouse:up", (event) => {
+    canvas.value.on("mouse:up", (event2) => {
       var _a;
-      if (event.button === 3) {
-        const { x = 0, y = 0 } = event.pointer || {};
+      if (event2.button === 3) {
+        const { x = 0, y = 0 } = event2.pointer || {};
         if (x >= originX && x <= endX && y >= originY && y <= endY) {
           pointTipProps.show = false;
           pointMenuProps.point = { x, y };
           pointMenuProps.show = true;
-          const { type } = ((_a = event.target) == null ? void 0 : _a.origin) || {};
-          if (event.target && (type === "temperature" || type === "pain")) {
+          const { type } = ((_a = event2.target) == null ? void 0 : _a.origin) || {};
+          if (event2.target && (type === "temperature" || type === "pain")) {
             if (type === "temperature") {
               pointMenuProps.list = [...TEMPERATURE_MENU];
             }
             if (type === "pain") {
               pointMenuProps.list = [...PAIN_MENU];
             }
-            pointMenuProps.target = event.target;
+            pointMenuProps.target = event2.target;
           } else {
             pointMenuProps.target = null;
             pointMenuProps.list = ["\u65B0\u589E\u8282\u70B9"];
@@ -162,7 +161,7 @@ function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, ge
                     dataIndex: v.dataIndex,
                     key: v.key
                   },
-                  pointer: event.pointer
+                  pointer: event2.pointer
                 });
               }
             });
@@ -397,21 +396,23 @@ function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, ge
     });
   }
   function setPointEvent(point) {
-    point.on("mouseover", () => {
-      setPopup(point);
-    });
-    point.on("mouseout", () => {
-      pointTipProps.show = false;
-    });
+    if (event.hovered) {
+      point.on("mouseover", () => {
+        setPopup(point);
+      });
+      point.on("mouseout", () => {
+        pointTipProps.show = false;
+      });
+    }
     point.on("moving", () => {
       moveLimit(point);
       updateLine(point);
       canvas.value.renderAll();
-      setPopup(point);
+      event.hovered && setPopup(point);
     });
-    point.on("mouseup:before", (event) => {
+    point.on("mouseup:before", (event2) => {
       pointTipProps.show = false;
-      if (event.e.button === 0) {
+      if (event2.e.button === 0) {
         const { type } = point.origin;
         const value = getYValue(type, point.top);
         emits("change", {
@@ -430,9 +431,18 @@ function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, ge
       x: point.left,
       y: point.top
     };
-    const yValue = getYValue(type, point.top);
-    pointTipProps.list = [`${title} ${yValue}${unit || ""}`, `\u65F6\u95F4 ${((data == null ? void 0 : data.time) || getXValue(point.left)).slice(-5)}`];
+    pointTipProps.list = [getListValue(), `\u65F6\u95F4 ${((data == null ? void 0 : data.time) || getXValue(point.left)).slice(-5)}`];
     pointTipProps.show = true;
+    function getListValue() {
+      const { value, drugReduce, physicsReduce } = data;
+      if (drugReduce) {
+        return `\u836F\u7269\u964D${type == "pain" ? "\u75DB" : "\u6E29"} ${value}\u2014>${drugReduce}${unit || ""}`;
+      }
+      if (physicsReduce) {
+        return `\u7269\u7406\u964D${type == "pain" ? "\u75DB" : "\u6E29"} ${value}\u2014>${physicsReduce}${unit || ""}`;
+      }
+      return `${title} ${value}${unit || ""}`;
+    }
   }
   function moveLimit(point) {
     point.setCoords();

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

@@ -1,4 +1,6 @@
 import { Ref } from 'vue';
 import { fabric } from '../utils';
 import { IPropItems } from '../interface';
-export declare function useLeft(canvas: Ref<fabric.Canvas>, propItems: IPropItems, emits: any, setPopup: Function, pointTipProps: any, getXValue: Function, getYValue: Function, getEqualXTypes: Function): void;
+export declare function useLeft(canvas: Ref<fabric.Canvas>, propItems: IPropItems, emits: any, setPopup: Function, pointTipProps: any, getXValue: Function, getYValue: Function, getEqualXTypes: Function): {
+    drawScaleValue: (yScaleValueList: any[]) => void;
+};

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

@@ -16,8 +16,8 @@ function useLeft(canvas, propItems, emits, setPopup, pointTipProps, getXValue, g
     iconsWidth,
     itemList,
     painIndex,
-    canvasWidth,
-    canvasHeight
+    right,
+    getRightInfo
   } = propItems;
   const mainScaleWidth = 9;
   const subScaleWidth = 5;
@@ -88,13 +88,23 @@ function useLeft(canvas, propItems, emits, setPopup, pointTipProps, getXValue, g
     canvas.value.add(title, ...list);
     title.sendToBack();
   }
-  function drawScaleValue() {
+  function drawScaleValue(yScaleValueList) {
+    var _a;
+    if (!(yScaleValueList == null ? void 0 : yScaleValueList.length))
+      return;
+    const { layout } = yScaleValueList[0];
+    let start = iconsWidth;
+    let end = originX;
+    if (layout === "right") {
+      start = endX;
+      end = endX + ((_a = right == null ? void 0 : right.width) != null ? _a : 0);
+    }
     const groupList = [];
-    const column = !painHeight ? left.yScaleValue.length : left.yScaleValue.length - 1;
-    const colWidth = (originX - iconsWidth) / column;
-    const residue = (originX - iconsWidth) % column;
+    const column = !painHeight || layout === "right" ? yScaleValueList.length : yScaleValueList.length - 1;
+    const colWidth = (end - start) / column;
+    const residue = (end - start) % column;
     const firstColWidth = colWidth + residue;
-    left.yScaleValue.forEach((item, index) => {
+    yScaleValueList.forEach((item, index) => {
       if (item.type === "pain") {
         drwaPainScaleValue(item);
         return;
@@ -108,7 +118,7 @@ function useLeft(canvas, propItems, emits, setPopup, pointTipProps, getXValue, g
         list.push(line2);
       }
       const rectWidth = index === 0 ? firstColWidth : colWidth;
-      const rectLeft = index === 0 ? iconsWidth : firstColWidth + iconsWidth + (index - 1) * colWidth;
+      const rectLeft = index === 0 ? start : firstColWidth + start + (index - 1) * colWidth;
       const line = index > 0 ? new fabric.Line([rectLeft, painIndex == 0 ? vitalSignsOriginY.originY : originY, rectLeft, vitalSignsOriginY.endY], {
         ...defaultBorderStyle
       }) : null;
@@ -157,9 +167,9 @@ function useLeft(canvas, propItems, emits, setPopup, pointTipProps, getXValue, g
     });
     groupList.push(new fabric.Rect({
       ...defaultRectStyle,
-      width: originX - iconsWidth,
-      height: endY - originY,
-      left: iconsWidth,
+      width: layout === "right" ? end - start - 1 : end - start,
+      height: layout === "right" ? endY - originY - 1 : endY - originY,
+      left: start,
       top: originY,
       originX: "left",
       originY: "top"
@@ -249,11 +259,19 @@ function useLeft(canvas, propItems, emits, setPopup, pointTipProps, getXValue, g
   }
   onMounted(() => {
     nextTick(() => {
+      var _a;
       iconsWidth && drawIcons();
-      drawScaleValue();
+      const yScaleValueList = left.yScaleValue.filter((v) => v.layout === "left" || v.type === "pain");
+      if ((right == null ? void 0 : right.width) && ((_a = right == null ? void 0 : right.yScaleValue) == null ? void 0 : _a.layout) === "left") {
+        yScaleValueList.push(getRightInfo);
+      }
+      drawScaleValue(yScaleValueList);
       canvas.value.renderAll();
     });
   });
+  return {
+    drawScaleValue
+  };
 }
 
 export { useLeft };

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

@@ -3,25 +3,75 @@ import { fabric } from '../utils/index.js';
 import { defaultStyle } from './useDraw.js';
 
 function useOther(canvas, propItems, cumputedX) {
-  const { originY, other, vitalSignsOriginY } = propItems;
+  const { other, vitalSignsOriginY } = propItems;
   function drawOther() {
-    if (!other || !other.list)
+    if (!(other == null ? void 0 : other.list))
       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: (((_a = v.style) == null ? void 0 : _a.baseTop) || 0) + vitalSignsOriginY.originY,
-        left: cumputedX(v.time),
-        textAlign: "center",
-        ...defaultStyle,
-        ...v.style || {}
+    const otherList = [];
+    other.list.forEach((item) => {
+      const align = item.align || "vertical";
+      const left = cumputedX(item.time);
+      const obj = otherList.find((v) => v.left == left);
+      if (obj) {
+        obj[align].push(item);
+      } else {
+        const initObj = {
+          left,
+          vertical: [],
+          horizontal: []
+        };
+        initObj[align].push(item);
+        otherList.push(initObj);
+      }
+    });
+    let textWidth = 0;
+    otherList.forEach((item) => {
+      let topY = vitalSignsOriginY.originY;
+      let leftX = item.left;
+      let textHeight = 0;
+      item.vertical.forEach((v) => {
+        const { commonOptions, value } = getTextData(v);
+        topY += (v.baseTop || 0) + textHeight;
+        const text = new fabric.Text(value, {
+          top: topY,
+          left: item.left,
+          ...commonOptions
+        });
+        textHeight = text.height || 0;
+        setTextWidth(text);
+      });
+      item.horizontal.forEach((v, i) => {
+        if (i > 0 || item.vertical.length) {
+          leftX += textWidth;
+        }
+        const { commonOptions, value } = getTextData(v);
+        const text = new fabric.Text(value, {
+          top: vitalSignsOriginY.originY,
+          left: leftX,
+          ...commonOptions
+        });
+        setTextWidth(text);
       });
-      list.push(text);
     });
+    function setTextWidth(text) {
+      if (!textWidth) {
+        textWidth = text.width || 0;
+      }
+      list.push(text);
+    }
+    function getTextData(v) {
+      return {
+        commonOptions: {
+          originX: "center",
+          textAlign: "center",
+          ...defaultStyle,
+          ...v.style || {}
+        },
+        value: String(v.value.toString().split("").join("\n"))
+      };
+    }
     const group = list.length > 0 ? new fabric.Group([...list], { ...defaultStyle }) : null;
-    group && group.sendToBack();
     group && canvas.value.add(group);
   }
   onMounted(() => {

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

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