cnhis-design-vue 3.4.0-beta.55 → 3.4.0-beta.58

package/es/components/fabric-chart/src/hooks/newBirthProcess/useNewBirthProcessChart.js

@@ -1,4 +1,4 @@
-import { ref, computed, reactive, watch } from 'vue';
+import { ref, reactive, watch } from 'vue';
 import { defaultBorderStyle } from '../useDraw.js';
 import '../../../../../shared/utils/fabricjs/index.js';
 import { format } from 'date-fns';
@@ -18,125 +18,77 @@ import { useNewBirthProcess } from './useNewBirthProcess.js';
 
 function useNewBirthProcessChart(canvas, props, emits, canvasRef, pointTipProps, pointMenuProps) {
   const redrawPoints = ref();
-  const leftScales = computed(
-    () => props.data.scaleValues.filter((item) => item.layout === "left" && item.show)
-  );
-  const rightScales = computed(
-    () => props.data.scaleValues.filter((item) => item.layout === "right" && item.show)
-  );
-  const originX = computed(
-    () => {
-      var _a;
-      return (_a = leftScales.value) == null ? void 0 : _a.reduce((width, item) => {
-        width += item.width;
-        return width;
-      }, 0);
-    }
-  );
-  const endX = computed(() => {
-    var _a;
-    const { width } = props.data;
-    const rightScalesWidth = (_a = rightScales.value) == null ? void 0 : _a.reduce((width2, item) => {
-      width2 += item.width;
-      return width2;
-    }, 0);
-    return width - (rightScalesWidth || 15);
-  });
-  const gridXNumber = computed(() => props.data.grid.mainXCell || 20);
-  const gridYNumber = computed(() => props.data.grid.mainYCell || 8);
-  const xCellWidth = computed(() => {
-    return (endX.value - originX.value) / gridXNumber.value;
-  });
-  const yCellHeight = computed(() => {
-    var _a;
+  function buildDerived() {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const leftScales = props.data.scaleValues.filter((item) => item.layout === "left" && item.show);
+    const rightScales = props.data.scaleValues.filter((item) => item.layout === "right" && item.show);
+    const originX = leftScales == null ? void 0 : leftScales.reduce((width, item) => width + item.width, 0);
+    const rightScalesWidth = rightScales == null ? void 0 : rightScales.reduce((width, item) => width + item.width, 0);
+    const endX = props.data.width - (rightScalesWidth || 15);
+    const gridXNumber = props.data.grid.mainXCell || 20;
+    const gridYNumber = props.data.grid.mainYCell || 8;
+    const timeXAxisHeight = ((_b = (_a = leftScales.concat(rightScales)) == null ? void 0 : _a.length) != null ? _b : 0) > 0 ? 20 : 0;
     const { xAxis, height, other } = props.data;
-    const xAxisNumber = Object.values(xAxis).reduce((num, item) => {
-      if (item.show)
-        num++;
-      return num;
-    }, 0);
-    const hasAlertLine = ((_a = other == null ? void 0 : other.alertLineList.length) != null ? _a : 0) > 0;
-    return (height - timeXAxisHeight.value) / (gridYNumber.value + xAxisNumber + (hasAlertLine ? 1 : 0));
-  });
-  const originY = computed(() => {
-    var _a;
-    const { xAxis, other } = props.data;
-    const xAxisNumber = Object.values(xAxis).reduce((num, item) => {
-      if (item.show && item.position === "top")
-        num++;
-      return num;
-    }, 0);
-    const hasAlertLine = ((_a = other == null ? void 0 : other.alertLineList.length) != null ? _a : 0) > 0;
-    return yCellHeight.value * (xAxisNumber || hasAlertLine ? 1 : 0);
-  });
-  const endY = computed(() => {
-    const { xAxis, height } = props.data;
-    const xAxisNumber = Object.values(xAxis).reduce((num, item) => {
-      if (item.show && item.position === "bottom")
-        num++;
-      return num;
-    }, 0);
-    return height - yCellHeight.value * xAxisNumber - timeXAxisHeight.value;
-  });
-  const timeXAxisHeight = computed(() => {
-    const scalesList = leftScales.value.concat(rightScales.value);
-    return (scalesList == null ? void 0 : scalesList.length) > 0 ? 20 : 0;
-  });
-  const startTime = computed(() => getTime(props.data.xAxis.time.startTime));
-  const timeXCell = computed(() => {
+    const xAxisNumberAll = Object.values(xAxis).reduce((num, item) => item.show ? num + 1 : num, 0);
+    const hasAlertLine = ((_c = other == null ? void 0 : other.alertLineList.length) != null ? _c : 0) > 0;
+    const yCellHeight = (height - timeXAxisHeight) / (gridYNumber + xAxisNumberAll + (hasAlertLine ? 1 : 0));
+    const xAxisNumberTop = Object.values(xAxis).reduce(
+      (num, item) => item.show && item.position === "top" ? num + 1 : num,
+      0
+    );
+    const originY = yCellHeight * (xAxisNumberTop || hasAlertLine ? 1 : 0);
+    const xAxisNumberBottom = Object.values(xAxis).reduce(
+      (num, item) => item.show && item.position === "bottom" ? num + 1 : num,
+      0
+    );
+    const endY = height - yCellHeight * xAxisNumberBottom - timeXAxisHeight;
+    const xCellWidth = (endX - originX) / gridXNumber;
+    const startTime = getTime(props.data.xAxis.time.startTime);
     const { spaceValue, spaceGridNumber } = props.data.xAxis.time || {};
-    return spaceValue * 60 * 60 * 1e3 / (xCellWidth.value * spaceGridNumber);
-  });
-  const extraTimeXAxisList = computed(() => {
-    var _a, _b, _c;
-    const scalesTimeList = (_c = (_b = (_a = leftScales.value.concat(rightScales.value)) == null ? void 0 : _a[0]) == null ? void 0 : _b.data) == null ? void 0 : _c.map((item) => getTime(item.time));
+    const timeXCell = spaceValue * 60 * 60 * 1e3 / (xCellWidth * spaceGridNumber);
+    const scalesTimeList = ((_f = (_e = (_d = leftScales.concat(rightScales)) == null ? void 0 : _d[0]) == null ? void 0 : _e.data) == null ? void 0 : _f.map((item) => getTime(item.time))) || [];
     const min = Math.min(...scalesTimeList);
     let max = Math.min(Math.max(...scalesTimeList));
-    const timesXCell = timeXCell.value * xCellWidth.value;
-    const xCellTimeList = range(1, gridXNumber.value + 1).reduce(
-      (timeList, cur, next) => timeList.concat(startTime.value + cur * timesXCell),
-      [startTime.value]
+    const timesXCell = timeXCell * xCellWidth;
+    const xCellTimeList = range(1, gridXNumber + 1).reduce(
+      (timeList, cur) => timeList.concat(startTime + cur * timesXCell),
+      [startTime]
     );
-    max = Math.min(max, last(xCellTimeList));
+    max = Math.min(max, (_g = last(xCellTimeList)) != null ? _g : max);
     const startIndx = xCellTimeList.findIndex((time) => Math.abs(time - min) < timesXCell);
     const endIndx = xCellTimeList.findIndex((time) => Math.abs(time - max) < timesXCell) + 1;
-    return xCellTimeList.filter((time, idx) => idx >= startIndx && idx <= endIndx).map((time) => format(new Date(time), "yyyy-MM-dd HH:mm:ss"));
-  });
-  const cervixYCell = computed(() => {
-    const { scaleValues } = props.data;
-    const cervixItem = scaleValues.find((item) => item.key === "cervix");
-    return yCellHeight.value / ((cervixItem == null ? void 0 : cervixItem.spaceValue) || 1);
-  });
-  const event = computed(() => {
-    var _a;
-    return ((_a = props.data.grid) == null ? void 0 : _a.event) || { selectable: true, evented: true, hovered: true };
-  });
-  const propItems = reactive({
-    canvasWidth: props.data.width,
-    canvasHeight: props.data.height,
-    borderStyle: { ...defaultBorderStyle, ...props.data.borderStyle || {} },
-    selectionStyle: props.data.selectionStyle || {},
-    grid: props.data.grid,
-    other: props.data.other,
-    originX: originX.value,
-    endX: endX.value,
-    originY: originY.value,
-    endY: endY.value,
-    xCellWidth: xCellWidth.value,
-    yCellHeight: yCellHeight.value,
-    gridXNumber: gridXNumber.value,
-    gridYNumber: gridYNumber.value,
-    xAxis: props.data.xAxis,
-    leftScales: leftScales.value,
-    rightScales: rightScales.value,
-    startTime: startTime.value,
-    timeXCell: timeXCell.value,
-    cervixYCell: cervixYCell.value,
-    scaleValues: props.data.scaleValues,
-    timeXAxisHeight: timeXAxisHeight.value,
-    extraTimeXAxisList: extraTimeXAxisList.value,
-    event: event.value
-  });
+    const extraTimeXAxisList = xCellTimeList.filter((time, idx) => idx >= startIndx && idx <= endIndx).map((time) => format(new Date(time), "yyyy-MM-dd HH:mm:ss"));
+    const cervixItem = props.data.scaleValues.find((item) => item.key === "cervix");
+    const cervixYCell = yCellHeight / ((cervixItem == null ? void 0 : cervixItem.spaceValue) || 1);
+    const event = ((_h = props.data.grid) == null ? void 0 : _h.event) || { selectable: true, evented: true, hovered: true };
+    return {
+      canvasWidth: props.data.width,
+      canvasHeight: props.data.height,
+      borderStyle: { ...defaultBorderStyle, ...props.data.borderStyle },
+      selectionStyle: props.data.selectionStyle || {},
+      grid: props.data.grid,
+      other: props.data.other,
+      originX,
+      endX,
+      originY,
+      endY,
+      xCellWidth,
+      yCellHeight,
+      gridXNumber,
+      gridYNumber,
+      xAxis: props.data.xAxis,
+      leftScales,
+      rightScales,
+      startTime,
+      timeXCell,
+      cervixYCell,
+      scaleValues: props.data.scaleValues,
+      timeXAxisHeight,
+      extraTimeXAxisList,
+      event
+    };
+  }
+  const propItems = reactive(buildDerived());
   watch(
     () => canvas.value,
     (value) => {

package/es/components/fabric-chart/src/hooks/surgicalAnesthesia/useSurgicalAnesthesiaChart.js

@@ -1,10 +1,10 @@
-import { reactive, ref, computed, unref, onMounted, nextTick, onBeforeUnmount, watch, toRefs } from 'vue';
+import { reactive, ref, onMounted, nextTick, onBeforeUnmount, watch, toRefs } from 'vue';
 import { useDialog } from 'naive-ui';
 import { defaultBorderStyle } from '../useDraw.js';
 import '../../../../../shared/utils/fabricjs/index.js';
 import { format } from 'date-fns';
 import { getChildrenSize } from '../../utils/index.js';
-import { cloneDeep, range, flatten, isFunction } from 'lodash-es';
+import { isFunction, cloneDeep, range, flatten } from 'lodash-es';
 import '../useEvent.js';
 import '../useShadow.js';
 import '../useCommon.js';
@@ -29,229 +29,173 @@ function useSurgicalAnesthesiaChart(canvas, props, emits, canvasRef, pointTipPro
   const pauseFlickerPoint = ref();
   let timeout = null;
   const oldChildrenSize = getChildrenSize(((_a = props.data.top) == null ? void 0 : _a.treeData) || []);
-  const layout = computed(
-    () => props.data.layout || {
+  function buildDerived() {
+    var _a2, _b, _c, _d, _e, _f;
+    const layout = props.data.layout || {
       top: "drug",
       center: "xAxis",
       bottom: "intraoperatively"
-    }
-  );
-  const originX = computed(() => {
-    var _a2;
-    return (_a2 = props.data.left.width) != null ? _a2 : 0;
-  });
-  const gridXNumber = computed(() => {
-    const { grid } = props.data;
-    return grid.mainXCell * grid.subXCell;
-  });
-  const gridYNumber = computed(() => {
+    };
+    const originX = (_a2 = props.data.left.width) != null ? _a2 : 0;
     const { grid } = props.data;
-    return grid.mainYCell * grid.subYCell;
-  });
-  const topGridYNumber = computed(() => {
+    const gridXNumber = grid.mainXCell * grid.subXCell;
+    const gridYNumber = grid.mainYCell * grid.subYCell;
     const { show = true, tree = {} } = props.data.top;
-    if (!show)
-      return 0;
     const { rowNumber = oldChildrenSize } = tree;
-    if (oldChildrenSize < rowNumber) {
-      return rowNumber;
-    }
-    return oldChildrenSize;
-  });
-  const topGridYCellHeight = computed(() => props.data.top.tree.cellHeight);
-  const topGridHeight = computed(() => topGridYCellHeight.value * topGridYNumber.value);
-  const topGridOriginY = computed(() => {
-    const currentLayout = getLayout("drug") || "top";
-    return getOriginTop(currentLayout);
-  });
-  const topGridEndY = computed(() => topGridOriginY.value + topGridHeight.value);
-  const startTime = computed(
-    () => {
-      var _a2;
-      return Date.parse(((_a2 = props.data.xAxis) == null ? void 0 : _a2.startTime) || format(new Date(), "yyyy-MM-dd HH:mm:ss"));
-    }
-  );
-  const xAxis = computed(() => {
+    const topGridYNumber = !show ? 0 : oldChildrenSize < rowNumber ? rowNumber : oldChildrenSize;
+    const topGridYCellHeight = props.data.top.tree.cellHeight;
+    const topGridHeight = topGridYCellHeight * topGridYNumber;
+    const startTime = Date.parse(((_b = props.data.xAxis) == null ? void 0 : _b.startTime) || format(new Date(), "yyyy-MM-dd HH:mm:ss"));
     const cloneXAxis = cloneDeep(props.data.xAxis);
     const { spaceValue, spaceTimeStamp } = cloneXAxis;
-    const list = range(gridXNumber.value / spaceValue + 1).map(
-      (n) => n === 0 ? cloneXAxis.startTime : format(new Date(startTime.value + n * spaceValue * spaceTimeStamp), "yyyy-MM-dd HH:mm:ss")
+    const list = range(gridXNumber / spaceValue + 1).map(
+      (n) => n === 0 ? cloneXAxis.startTime : format(new Date(startTime + n * spaceValue * spaceTimeStamp), "yyyy-MM-dd HH:mm:ss")
     );
-    return {
+    const xAxis = {
       ...cloneXAxis,
       list,
-      left: originX.value
+      left: originX
     };
-  });
-  const treeData = getTreeData();
-  const originYXAxis = computed(() => {
-    const currentLayout = getLayout("xAxis") || "center";
-    return getOriginTop(currentLayout);
-  });
-  const endX = computed(() => {
-    var _a2;
-    const { width, right } = props.data;
-    if (!right)
-      return width;
-    const endWidth = (_a2 = right.width) != null ? _a2 : 0;
-    return width - endWidth;
-  });
-  const originY = computed(() => {
-    const currentLayout = getLayout("intraoperatively") || "bottom";
-    return getOriginTop(currentLayout);
-  });
-  const extracorporealCirculationHeight = computed(() => {
-    var _a2;
-    const { show, height } = ((_a2 = props.data.other) == null ? void 0 : _a2.extracorporealCirculation) || {};
-    if (!show || !height)
-      return 0;
-    return height;
-  });
-  const markHeight = computed(() => {
-    var _a2;
-    const { show, height } = ((_a2 = props.data.other) == null ? void 0 : _a2.mark) || {};
-    if (!show || !height)
-      return 0;
-    return height;
-  });
-  const endY = computed(
-    () => originY.value + (props.data.height - topGridHeight.value - xAxis.value.height - markHeight.value - extracorporealCirculationHeight.value)
-  );
-  const xCellWidth = computed(() => (endX.value - originX.value) / gridXNumber.value);
-  const yCellHeight = computed(() => (endY.value - originY.value) / gridYNumber.value);
-  const timeXCell = computed(() => xAxis.value.spaceTimeStamp / xCellWidth.value);
-  const itemList = computed(() => {
-    const { scaleValues } = props.data;
-    return flatten(
-      scaleValues.map((item) => {
-        return item.dataList.filter((v) => v.show).map((v, dataIndex) => {
-          return {
-            ...v,
-            bigType: item.type,
-            unit: item.unit,
-            dataIndex
-          };
-        });
-      })
-    );
-  });
-  const pulseYCell = computed(() => computedYCell("pulse"));
-  const temperatureYCell = computed(() => computedYCell("temperature"));
-  const event = computed(() => {
-    var _a2;
-    return ((_a2 = props.data.grid) == null ? void 0 : _a2.event) || { selectable: true, evented: true, hovered: true };
-  });
-  const propItems = reactive({
-    canvasWidth: props.data.width,
-    canvasHeight: props.data.height,
-    borderStyle: { ...defaultBorderStyle, ...props.data.borderStyle },
-    pointSelectionStyle: props.data.pointSelectionStyle || {},
-    grid: props.data.grid,
-    top: props.data.top,
-    left: props.data.left,
-    other: props.data.other,
-    topGridYNumber: unref(topGridYNumber),
-    topGridYCellHeight: unref(topGridYCellHeight),
-    topGridOriginY: unref(topGridOriginY),
-    topGridEndY: unref(topGridEndY),
-    treeData,
-    getTreeData,
-    xAxis: unref(xAxis),
-    originYXAxis: unref(originYXAxis),
-    startTime: unref(startTime),
-    timeXCell: unref(timeXCell),
-    gridXNumber: unref(gridXNumber),
-    gridYNumber: unref(gridYNumber),
-    xCellWidth: unref(xCellWidth),
-    yCellHeight: unref(yCellHeight),
-    originX: unref(originX),
-    endX: unref(endX),
-    originY: unref(originY),
-    endY: unref(endY),
-    markHeight: unref(markHeight),
-    extracorporealCirculationHeight: unref(extracorporealCirculationHeight),
-    itemList: unref(itemList),
-    scaleValues: props.data.scaleValues,
-    pulseYCell: unref(pulseYCell),
-    temperatureYCell: unref(temperatureYCell),
-    event: unref(event),
-    dialog,
-    extraMenuConfig: props.data.extraMenuConfig || {}
-  });
-  function getLayout(moduleName) {
-    let layoutName = "";
-    Object.entries(layout.value).some(([key, value]) => {
-      if (value === moduleName) {
-        layoutName = key;
-        return true;
-      }
-      return;
-    });
-    return layoutName;
-  }
-  function getLayoutHeight(layoutName) {
-    const moduleName = layout.value[layoutName];
-    const xAxisHeight = xAxis.value.height;
-    switch (moduleName) {
-      case "drug":
-        return topGridHeight.value;
-      case "xAxis":
-        return xAxisHeight;
-      default:
-        return props.data.height - topGridHeight.value - xAxisHeight;
+    function getLayout(moduleName) {
+      let layoutName = "";
+      Object.entries(layout).some(([key, value]) => {
+        if (value === moduleName) {
+          layoutName = key;
+          return true;
+        }
+        return false;
+      });
+      return layoutName;
     }
-  }
-  function getOriginTop(layoutName) {
-    switch (layoutName) {
-      case "top":
-        return 0;
-      case "center":
-        return getLayoutHeight("top");
-      default:
-        return getLayoutHeight("top") + getLayoutHeight("center");
+    function getLayoutHeight(layoutName) {
+      const moduleName = layout[layoutName];
+      const xAxisHeight = xAxis.height;
+      switch (moduleName) {
+        case "drug":
+          return topGridHeight;
+        case "xAxis":
+          return xAxisHeight;
+        default:
+          return props.data.height - topGridHeight - xAxisHeight;
+      }
     }
-  }
-  function getTreeData() {
-    const { show = true, tree = {} } = props.data.top;
-    if (!show)
-      return [];
-    const cloneData = cloneDeep(props.data.top.treeData);
-    let levelRow = 0;
-    const { cellWidth, cellHeight } = props.data.top.tree;
-    const { rowNumber = oldChildrenSize } = tree;
-    if (oldChildrenSize < rowNumber) {
-      cloneData.push(...range(rowNumber - oldChildrenSize).map(() => ({})));
+    function getOriginTop(layoutName) {
+      switch (layoutName) {
+        case "top":
+          return 0;
+        case "center":
+          return getLayoutHeight("top");
+        default:
+          return getLayoutHeight("top") + getLayoutHeight("center");
+      }
     }
-    transferTree(cloneData);
-    function transferTree(treeData2, deep = 0) {
-      treeData2.forEach((item) => {
-        var _a2;
-        const other = {
-          top: levelRow * cellHeight + topGridOriginY.value,
-          left: deep * cellWidth,
-          width: cellWidth,
-          height: cellHeight,
-          uuid: uuidGenerator()
-        };
-        levelRow++;
-        if ((_a2 = item.children) == null ? void 0 : _a2.length) {
-          levelRow--;
-          const childrenSize = getChildrenSize(item.children);
-          other.height = childrenSize * cellHeight;
-          transferTree(item.children, deep + 1);
-        } else {
-          other.width = originX.value - other.left;
-        }
-        Object.assign(item, other);
-      });
+    const topGridOriginY = getOriginTop(getLayout("drug") || "top");
+    const topGridEndY = topGridOriginY + topGridHeight;
+    const originYXAxis = getOriginTop(getLayout("xAxis") || "center");
+    const { width, right } = props.data;
+    const endX = !right ? width : width - ((_c = right.width) != null ? _c : 0);
+    const originY = getOriginTop(getLayout("intraoperatively") || "bottom");
+    const { show: ecShow, height: ecHeight } = ((_d = props.data.other) == null ? void 0 : _d.extracorporealCirculation) || {};
+    const extracorporealCirculationHeight = !ecShow || !ecHeight ? 0 : ecHeight;
+    const { show: markShow, height: markH } = ((_e = props.data.other) == null ? void 0 : _e.mark) || {};
+    const markHeight = !markShow || !markH ? 0 : markH;
+    const endY = originY + (props.data.height - topGridHeight - xAxis.height - markHeight - extracorporealCirculationHeight);
+    const xCellWidth = (endX - originX) / gridXNumber;
+    const yCellHeight = (endY - originY) / gridYNumber;
+    const timeXCell = xAxis.spaceTimeStamp / xCellWidth;
+    const itemList = flatten(
+      props.data.scaleValues.map((item) => {
+        return item.dataList.filter((v) => v.show).map((v, dataIndex) => ({
+          ...v,
+          bigType: item.type,
+          unit: item.unit,
+          dataIndex
+        }));
+      })
+    );
+    function computedYCell(type) {
+      const { scaleValues } = props.data;
+      const item = scaleValues.find((v) => v.type === type);
+      return yCellHeight * (item.spaceGridNumber || 1) / (item.spaceValue || 1);
     }
-    return cloneData;
-  }
-  function computedYCell(type) {
-    const { scaleValues } = props.data;
-    const item = scaleValues.find((v) => v.type === type);
-    return yCellHeight.value * (item.spaceGridNumber || 1) / (item.spaceValue || 1);
+    const pulseYCell = computedYCell("pulse");
+    const temperatureYCell = computedYCell("temperature");
+    const event = ((_f = props.data.grid) == null ? void 0 : _f.event) || { selectable: true, evented: true, hovered: true };
+    const getTreeData = () => {
+      const { show: show2 = true, tree: tree2 = {} } = props.data.top;
+      if (!show2)
+        return [];
+      const cloneData = cloneDeep(props.data.top.treeData);
+      let levelRow = 0;
+      const { cellWidth, cellHeight } = props.data.top.tree;
+      const { rowNumber: rowNumber2 = oldChildrenSize } = tree2;
+      if (oldChildrenSize < rowNumber2) {
+        cloneData.push(...range(rowNumber2 - oldChildrenSize).map(() => ({})));
+      }
+      transferTree(cloneData);
+      function transferTree(treeData, deep = 0) {
+        treeData.forEach((item) => {
+          var _a3;
+          const other = {
+            top: levelRow * cellHeight + topGridOriginY,
+            left: deep * cellWidth,
+            width: cellWidth,
+            height: cellHeight,
+            uuid: uuidGenerator()
+          };
+          levelRow++;
+          if ((_a3 = item.children) == null ? void 0 : _a3.length) {
+            levelRow--;
+            const childrenSize = getChildrenSize(item.children);
+            other.height = childrenSize * cellHeight;
+            transferTree(item.children, deep + 1);
+          } else {
+            other.width = originX - other.left;
+          }
+          Object.assign(item, other);
+        });
+      }
+      return cloneData;
+    };
+    return {
+      canvasWidth: props.data.width,
+      canvasHeight: props.data.height,
+      borderStyle: { ...defaultBorderStyle, ...props.data.borderStyle },
+      pointSelectionStyle: props.data.pointSelectionStyle || {},
+      grid: props.data.grid,
+      top: props.data.top,
+      left: props.data.left,
+      other: props.data.other,
+      topGridYNumber,
+      topGridYCellHeight,
+      topGridOriginY,
+      topGridEndY,
+      treeData: getTreeData(),
+      getTreeData,
+      xAxis,
+      originYXAxis,
+      startTime,
+      timeXCell,
+      gridXNumber,
+      gridYNumber,
+      xCellWidth,
+      yCellHeight,
+      originX,
+      endX,
+      originY,
+      endY,
+      markHeight,
+      extracorporealCirculationHeight,
+      itemList,
+      scaleValues: props.data.scaleValues,
+      pulseYCell,
+      temperatureYCell,
+      event,
+      dialog,
+      extraMenuConfig: props.data.extraMenuConfig || {}
+    };
   }
+  const propItems = reactive(buildDerived());
   onMounted(async () => {
     await nextTick();
     const { redrawLinePoints: _redrawLinePoints, clickMenu: _clickTopMenu } = useTop(

package/es/components/fabric-chart/src/hooks/temperature/useCenter.js

@@ -158,7 +158,7 @@ function useCenter(canvas, propItems, emits, computedX, computedY, getXValue, ge
       });
       lines.push(line);
     }
-    borderGroup.add(...lines).addWithUpdate();
+    borderGroup.add(...lines).addWithUpdate().set(defaultStyle);
     return borderGroup;
   }
   function drawShaDow(target) {
@@ -583,7 +583,7 @@ function useCenter(canvas, propItems, emits, computedX, computedY, getXValue, ge
       };
     }
     function drawOther(points, v, _item, otherObj) {
-      var _a2, _b, _c;
+      var _a2, _b, _c, _d;
       if (!["temperature", "pain", "breathe"].includes(type))
         return;
       if (!(points == null ? void 0 : points.length) && type === "temperature" && !isLimit(v.time))
@@ -689,7 +689,7 @@ function useCenter(canvas, propItems, emits, computedX, computedY, getXValue, ge
         },
         verifiedText: {
           obj: verifiedText,
-          left: xCellWidth / 2,
+          left: ((_d = verifiedStyle == null ? void 0 : verifiedStyle.position) == null ? void 0 : _d[key]) === "top-right" ? xCellWidth / 2 : 0,
           top: (value ? -yCellHeight : 0) - 5
         },
         reducePoint: {