cnhis-design-vue 3.1.16-beta.0 → 3.1.16-beta.11

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

@@ -28,6 +28,7 @@ function useColumnConfigAdaptor() {
           type,
           "select"
         ]),
+        ...["DATE"].map((type) => [type, "date"]),
         ...["INPUT"].map((type) => [type, "input"]),
         ...["DIGITAL"].map((type) => [type, "number"])
       ]);
@@ -40,13 +41,17 @@ function useColumnConfigAdaptor() {
       const validateHandler = (value, result) => {
         if (!isObject(value))
           return;
-        result.componentProps = Object.assign({}, result.comonentProps, {
-          maxlength: value.max_length,
-          minlength: value.min_length,
-          max: value.max_value,
-          min: value.min_value,
-          precision: value.decimal_length
-        });
+        const keyMap = {
+          maxlength: "max_length",
+          minlength: "min_length",
+          max: "max_value",
+          min: "min_value",
+          precision: "decimal_length"
+        };
+        result.componentProps = Object.assign({}, result.comonentProps, Object.entries(keyMap).reduce((res, [k, v]) => {
+          res[k] = value[v];
+          return res;
+        }, {}));
       };
       const dateRangeValidate = (value, result) => {
         if (!isObject(value))
@@ -71,14 +76,25 @@ function useColumnConfigAdaptor() {
         const option = { label: value.describe, ...value };
         result.options = isArray(result.options) ? [...result.options, option] : [option];
       };
+      const htmlTypeHandler = (value, result, fieldItem) => {
+        var _a;
+        if (!isString(value))
+          return;
+        if (value === "DATE") {
+          result.formType = isString(fieldItem.date_format) && fieldItem.date_format.startsWith("HH:mm") ? "time" : "date";
+          return;
+        }
+        result.formType = (_a = htmlTypeValueMap.get(value)) != null ? _a : value;
+      };
       const settingMap = new Map([
         ["multi_select_value", { property: "multiple", valueMap: multipleValueMap }],
         ["is_null", isNullHandler],
         ["validate", validateHandler],
         ["dateValidate", dateRangeValidate],
+        ["date_format", "valueFormat"],
         ...["open", "close"].map((key) => [key, switchOptionHandler]),
         ["is_edit", { property: "isEdit", valueMap: isEditValueMap }],
-        ["html_type", { property: "formType", valueMap: htmlTypeValueMap }],
+        ["html_type", htmlTypeHandler],
         ["option", { property: "options", fieldMap: /* @__PURE__ */ new Map([["text", "label"]]) }],
         [
           "alias",

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

@@ -100,7 +100,7 @@ const useEdit = (props, state, emit, xGrid) => {
     } else {
       row[column.columnName] = value;
     }
-    if ((column == null ? void 0 : column.formType) === "date" && !value) {
+    if (((column == null ? void 0 : column.formType) === "date" || (column == null ? void 0 : column.formType) === "time") && !value) {
       row[column.columnName] = void 0;
     }
     emit("formChange", { value, row, column, index, oldValue });

package/es/packages/big-table/src/hooks/useEvent.d.ts

@@ -1,4 +1,4 @@
-export declare const useEvent: (props: any, state: any, emit: any, xGrid: any) => {
+export declare const useEvent: (props: any, state: any, emit: any, xGrid: any, anchorEvent: Function) => {
     keyDown: ({ $event }: {
         $event: KeyboardEvent;
     }) => void;

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

@@ -1,7 +1,7 @@
 import vexutils from '../../../../src/utils/vexutils';
 import { hideFilterWrap } from '../utils.js';
 
-const useEvent = (props, state, emit, xGrid) => {
+const useEvent = (props, state, emit, xGrid, anchorEvent) => {
   function keyDown({ $event }) {
     var _a, _b;
     let activeRow = null;
@@ -29,7 +29,7 @@ const useEvent = (props, state, emit, xGrid) => {
       if ($event.key === "ArrowDown" && index < ((_b = props.data) == null ? void 0 : _b.length) - 1) {
         activeIndex = index + 1;
       }
-      let row = xGridRef.getData(activeIndex);
+      const row = xGridRef.getData(activeIndex);
       xGridRef.setCurrentRow(row);
       xGridRef.scrollToRow(row);
       emitKeyBoard();
@@ -60,6 +60,7 @@ const useEvent = (props, state, emit, xGrid) => {
       hideFilterWrap(state, props);
     }
     scrollEvent(params);
+    anchorEvent(params);
   };
   return {
     keyDown,

package/es/packages/big-table/style/index.css

@@ -282,7 +282,7 @@ body > .vxe-table--tooltip-wrapper {
   height: 30px;
   line-height: 30px;
 }
-.custom-big-table .vxe-table .vxe-cell--checkbox.is--disabled .vxe-checkbox--icon {
+.custom-big-table .vxe-table .vxe-cell--checkbox .vxe-checkbox--label {
   display: none;
 }
 .custom-big-table .filter-box {
@@ -307,7 +307,6 @@ body > .vxe-table--tooltip-wrapper {
 }
 .custom-big-table .disabled-checked-tips {
   position: absolute;
-  left: 6px;
   top: 50%;
   bottom: 0;
   right: 0;

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;
@@ -4016,7 +4019,7 @@ declare const ButtonPrint: SFCWithInstall<import("vue").DefineComponent<{
                 type: BooleanConstructor;
                 default: boolean;
             };
-            preset: import("vue").PropType<"dialog" | "confirm" | "card">;
+            preset: import("vue").PropType<"dialog" | "card" | "confirm">;
             to: import("vue").PropType<string | HTMLElement>;
             displayDirective: {
                 type: import("vue").PropType<"show" | "if">;
@@ -4978,7 +4981,7 @@ declare const ButtonPrint: SFCWithInstall<import("vue").DefineComponent<{
                 type: BooleanConstructor;
                 default: boolean;
             };
-            preset: import("vue").PropType<"dialog" | "confirm" | "card">;
+            preset: import("vue").PropType<"dialog" | "card" | "confirm">;
             to: import("vue").PropType<string | HTMLElement>;
             displayDirective: {
                 type: import("vue").PropType<"show" | "if">;

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;
@@ -4020,7 +4023,7 @@ declare const _default: import("vue").DefineComponent<{
                 type: BooleanConstructor;
                 default: boolean;
             };
-            preset: import("vue").PropType<"dialog" | "confirm" | "card">;
+            preset: import("vue").PropType<"dialog" | "card" | "confirm">;
             to: import("vue").PropType<string | HTMLElement>;
             displayDirective: {
                 type: import("vue").PropType<"show" | "if">;
@@ -4982,7 +4985,7 @@ declare const _default: import("vue").DefineComponent<{
                 type: BooleanConstructor;
                 default: boolean;
             };
-            preset: import("vue").PropType<"dialog" | "confirm" | "card">;
+            preset: import("vue").PropType<"dialog" | "card" | "confirm">;
             to: import("vue").PropType<string | HTMLElement>;
             displayDirective: {
                 type: import("vue").PropType<"show" | "if">;

package/es/packages/button-print/src/ButtonPrint.vue_vue_type_script_setup_true_lang.js

@@ -228,7 +228,8 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           templateId: getTemplateIdByFormatId(state.currentFormatId),
           print: {
             print: "1",
-            type: "1"
+            type: "1",
+            callback: "1"
           },
           params
         };

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;
@@ -1505,7 +1508,7 @@ declare const _default: import("vue").DefineComponent<{
             type: BooleanConstructor;
             default: boolean;
         };
-        preset: import("vue").PropType<"dialog" | "confirm" | "card">;
+        preset: import("vue").PropType<"dialog" | "card" | "confirm">;
         to: import("vue").PropType<string | HTMLElement>;
         displayDirective: {
             type: import("vue").PropType<"show" | "if">;
@@ -2467,7 +2470,7 @@ declare const _default: import("vue").DefineComponent<{
             type: BooleanConstructor;
             default: boolean;
         };
-        preset: import("vue").PropType<"dialog" | "confirm" | "card">;
+        preset: import("vue").PropType<"dialog" | "card" | "confirm">;
         to: import("vue").PropType<string | HTMLElement>;
         displayDirective: {
             type: import("vue").PropType<"show" | "if">;

package/es/packages/drag-layout/index.d.ts

@@ -1888,7 +1888,7 @@ declare const DragLayout: SFCWithInstall<import("vue").DefineComponent<{
             type: BooleanConstructor;
             default: boolean;
         };
-        preset: import("vue").PropType<"dialog" | "confirm" | "card">;
+        preset: import("vue").PropType<"dialog" | "card" | "confirm">;
         to: import("vue").PropType<string | HTMLElement>;
         displayDirective: {
             type: import("vue").PropType<"show" | "if">;
@@ -2850,7 +2850,7 @@ declare const DragLayout: SFCWithInstall<import("vue").DefineComponent<{
             type: BooleanConstructor;
             default: boolean;
         };
-        preset: import("vue").PropType<"dialog" | "confirm" | "card">;
+        preset: import("vue").PropType<"dialog" | "card" | "confirm">;
         to: import("vue").PropType<string | HTMLElement>;
         displayDirective: {
             type: import("vue").PropType<"show" | "if">;

package/es/packages/drag-layout/src/DragLayout.vue.d.ts

@@ -1888,7 +1888,7 @@ declare const _default: import("vue").DefineComponent<{
             type: BooleanConstructor;
             default: boolean;
         };
-        preset: import("vue").PropType<"dialog" | "confirm" | "card">;
+        preset: import("vue").PropType<"dialog" | "card" | "confirm">;
         to: import("vue").PropType<string | HTMLElement>;
         displayDirective: {
             type: import("vue").PropType<"show" | "if">;
@@ -2850,7 +2850,7 @@ declare const _default: import("vue").DefineComponent<{
             type: BooleanConstructor;
             default: boolean;
         };
-        preset: import("vue").PropType<"dialog" | "confirm" | "card">;
+        preset: import("vue").PropType<"dialog" | "card" | "confirm">;
         to: import("vue").PropType<string | HTMLElement>;
         displayDirective: {
             type: import("vue").PropType<"show" | "if">;

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

@@ -115,7 +115,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const times = top.xScalevalue.times;
       let left = originX.value - xCellWidth.value;
       function getDate(date) {
-        return String(date).length < 9 ? `20${date}` : 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) => {

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

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

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

@@ -234,19 +234,19 @@ function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, ge
       lineAttr = {},
       noRiseStyle = {},
       verifiedStyle = {},
-      coolingStyle = {},
+      reduceStyle = {},
       type = "circle"
     } = item;
     const pointList = [];
     const lineList = [];
     const otherList = [];
     item.list.forEach((v, index) => {
-      var _a;
+      var _a, _b;
       const points = getPointer(v, scaleValue);
       const nextV = item.list[index + 1];
       const nextPoint = getPointer(nextV, scaleValue);
-      let coolLine, coolPoint, noRiseText, arrowGroup, verifiedText;
-      if (points && scaleValue.type === "temperature") {
+      let reduceLine, reducePoint, noRiseText, arrowGroup, verifiedText;
+      if ((points == null ? void 0 : points.length) && (scaleValue.type === "temperature" || scaleValue.type === "pain")) {
         if (v.noRise) {
           if (typeof v.noRise === "string") {
             noRiseText = drawText([points[0], points[1] + 5], {
@@ -285,24 +285,21 @@ function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, ge
           });
           otherList.push(verifiedText);
         }
-        if (v.physicalCooling || v.drugCooling) {
-          const coolingLineStyle = {
+        if (v.physicsReduce || v.drugReduce) {
+          const reduceY = cumputedY(scaleValue.type, scaleValue.list, v.physicsReduce || v.drugReduce);
+          reduceLine = drawLine([...points, points[0], reduceY], {
             ...lineAttr,
-            stroke: coolingStyle.stroke,
-            strokeDashArray: [3, 3]
-          };
-          const coolY = cumputedY(scaleValue.type, scaleValue.list, v.physicalCooling || v.drugCooling);
-          coolLine = drawLine([...points, points[0], coolY], {
-            ...coolingLineStyle
+            ...reduceStyle.line,
+            ...defaultStyle
           });
-          coolPoint = drawPoint("circle", {
+          reducePoint = drawPoint(((_a = reduceStyle == null ? void 0 : reduceStyle.point) == null ? void 0 : _a.type) || "circle", {
             left: points[0],
-            top: coolY,
-            ...coolingStyle,
+            top: reduceY,
+            ...reduceStyle.point,
             ...defaultStyle
           });
-          coolLine && otherList.push(coolLine);
-          coolPoint && otherList.push(coolPoint);
+          reduceLine && otherList.push(reduceLine);
+          reducePoint && otherList.push(reducePoint);
         }
       }
       let point;
@@ -312,7 +309,7 @@ function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, ge
           ...lineAttr
         });
       } else if (points && !nextPoint && !v.breakpoint && scaleValue.type === "temperature" && dataIndex < scaleValue.dataList.length - 1 && index === item.list.length - 1) {
-        const nextV2 = (_a = scaleValue.dataList[dataIndex + 1].list) == null ? void 0 : _a[0];
+        const nextV2 = (_b = scaleValue.dataList[dataIndex + 1].list) == null ? void 0 : _b[0];
         const nextLinePoint = getPointer(nextV2, scaleValue);
         line = nextLinePoint ? drawLine([...points, ...nextLinePoint], {
           ...lineAttr
@@ -338,8 +335,8 @@ function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, ge
         verifiedText,
         leftLine: previousLine,
         rightLine: line,
-        coolLine,
-        coolPoint,
+        reduceLine,
+        reducePoint,
         lockMovementX: true,
         ...pointAttr,
         ...propItems.event
@@ -456,9 +453,9 @@ function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, ge
       point.rightLine.setCoords();
       point.rightLine.set({ x1: point.left, y1: point.top });
     }
-    if (point.coolLine) {
-      point.coolLine.setCoords();
-      point.coolLine.set({ x1: point.left, y1: point.top });
+    if (point.reduceLine) {
+      point.reduceLine.setCoords();
+      point.reduceLine.set({ x1: point.left, y1: point.top });
     }
     if (point.noRiseText) {
       point.noRiseText.setCoords();

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

@@ -44,12 +44,19 @@ function drawTextGroup(rectStyle, fontStyle, groupStyle) {
     ...defaultRectStyle,
     ...rectStyle
   });
-  const texts = new fabric.Text(String(fontStyle.value), {
+  const { value = "\u6807\u9898", textAlign = "center", verticalAlign = "center" } = fontStyle;
+  const textLeft = rectStyle.width / 2;
+  const textTop = rectStyle.height / 2;
+  const texts = new fabric.Text(String(value), {
     ...defaultTextStyle,
     ...fontStyle,
-    ...fontStyle.textAlign == "left" ? {
-      originX: "left",
-      left: -(rectStyle.width / 2)
+    ...textAlign == "left" || textAlign == "right" ? {
+      originX: textAlign,
+      left: textAlign == "left" ? -textLeft : textLeft
+    } : {},
+    ...verticalAlign == "top" || verticalAlign == "bottom" ? {
+      originY: verticalAlign,
+      top: verticalAlign == "top" ? -textTop : textTop
     } : {}
   });
   return new fabric.Group([rect, texts], {

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

@@ -47,12 +47,20 @@ function useCanvasEvent(canvas, propItems, emits) {
       if (index > 0) {
         topY += propItems[`${topList[index - 1].key}Height`];
       }
-      selections2.push(drawRect({
-        left: iconsWidth,
+      const commonOptions = {
         top: topY + 1,
-        width: endX - iconsWidth,
         height: propItems[`${item.key}Height`] - 1
+      };
+      selections2.push(drawRect({
+        left: iconsWidth,
+        width: originX - iconsWidth,
+        ...commonOptions
       }, item.key));
+      selections2.push(drawRect({
+        left: originX,
+        width: endX - originX,
+        ...commonOptions
+      }, item.key + "Title"));
     });
     selections2.push(drawRect({
       left: originX,

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

@@ -65,12 +65,14 @@ function useLeft(canvas, propItems, emits, setPopup, pointTipProps, getXValue, g
     const list = [];
     if (item.showScale || item.showNumber) {
       const { lineXMain, textLeft } = getScaleInfo(item.position, iconsWidth, originX - iconsWidth);
+      const listLen = item.list.length;
       item.list.forEach((v, i) => {
         let top = painOriginY.endY - i * yCellHeight * item.spaceGridNumber;
         if (i === 0) {
           top = endY - 5;
         }
-        if (item.showNumber) {
+        const isMaxMinNumber = i === 0 || i === listLen - 1;
+        if (item.showNumber && (isMaxMinNumber ? item.showMaxMinNumber : true)) {
           list.push(drawScaleNumber(v, item, textLeft, top));
         }
         if (item.showScale && i !== 0) {
@@ -117,20 +119,22 @@ function useLeft(canvas, propItems, emits, setPopup, pointTipProps, getXValue, g
         const spaceScale = spaceGridNumber * yCellHeight / 5;
         const position = item.position || "center";
         const { lineXMain, lineXSub, textLeft } = getScaleInfo(item.position, rectLeft, rectWidth);
+        const listLen = item.list.length;
         item.list.forEach((v, i) => {
           const top = vitalSignsOriginY.endY - i * yCellHeight * spaceGridNumber;
-          if (item.showNumber) {
+          const isMaxMinNumber = i === 0 || i === listLen - 1;
+          if (item.showNumber && (isMaxMinNumber ? item.showMaxMinNumber : true)) {
             const text = drawScaleNumber(v, item, textLeft, i === 0 ? top - 5 : top);
             list.push(text);
           }
-          if (item.showScale && i !== item.list.length - 1) {
+          if (item.showScale && i !== listLen - 1) {
             for (let j = 0; j < 5; j++) {
               if (j > 0 || !item.showNumber || position !== "center") {
                 const x1 = j == 0 ? lineXMain[0] : lineXSub[0];
                 const x2 = j == 0 ? lineXMain[1] : lineXSub[1];
                 const y = top - j * spaceScale;
                 createLine([x1, y, x2, y]);
-                if (i == item.list.length - 2 && j == 4) {
+                if (i == listLen - 2 && j == 4) {
                   createLine([lineXMain[0], y - spaceScale, lineXMain[1], y - spaceScale]);
                 }
               }

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(() => {