kd-lane-chart-v3 0.1.1 → 0.1.3

package/dist/esm/index.js

@@ -262,7 +262,7 @@ const _sfc_main$d = {
       })
     },
     parentElement: {
-      type: Object,
+      type: HTMLElement,
       default: null
     }
   },
@@ -371,7 +371,7 @@ function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ]);
 }
-const VueSimpleContextMenu = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$d], ["__scopeId", "data-v-b1e7434d"]]);
+const VueSimpleContextMenu = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$d], ["__scopeId", "data-v-5e769d89"]]);
 class CustomStrategy {
   constructor(strategy) {
     this.strategy = strategy;
@@ -2430,7 +2430,6 @@ const _sfc_main$9 = {
       } else {
         const treeData = [];
         this.inputTempates.forEach((template) => {
-          console.log(template, "template");
           const tData = { ...template, id: template.templateId, label: template.templateName };
           tData.children = [];
           if (!template.lanes) {
@@ -2602,7 +2601,7 @@ function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
     [_directive_loading, $data.curveConfigLoading]
   ]);
 }
-const RealTimeCurveConfig = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$9], ["__scopeId", "data-v-41fc6892"]]);
+const RealTimeCurveConfig = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$9], ["__scopeId", "data-v-3338a667"]]);
 const ACTION_TYPE = {
   UPSERT_LINE: "upsertLine",
   DELETE_LINE: "delLine"
@@ -2969,7 +2968,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ], 4);
 }
-const LegendItem = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$7], ["__scopeId", "data-v-efba8aa1"]]);
+const LegendItem = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$7], ["__scopeId", "data-v-6190e06c"]]);
 const _sfc_main$6 = {
   name: "KdLaneContainer",
   provide() {
@@ -3239,7 +3238,9 @@ const _sfc_main$6 = {
         const headerEl = document.getElementById(`lane-header-${lane.laneId}`);
         if (headerEl) {
           const id = String(lane.laneId);
-          const newWidth = headerEl.clientWidth;
+          const flexWidth = headerEl.clientWidth;
+          const minWidth = lane.minWidth || 40;
+          const newWidth = Math.max(minWidth, flexWidth);
           const oldWidth = this.laneWidthOverrides[id];
           if (oldWidth !== newWidth) {
             this.setLaneWidthOverride(lane.laneId, newWidth);
@@ -3270,7 +3271,7 @@ const _sfc_main$6 = {
         (l) => l.laneId === this.currentLane.laneId
       );
       if (laneIndex === -1) return;
-      const minWidth = 40;
+      const minWidth = lanes[laneIndex].minWidth || 40;
       const getWidth = (lane) => this.getEffectiveLaneWidthPx(lane);
       const currentLane = lanes[laneIndex];
       let currentWidth = getWidth(currentLane);
@@ -3344,6 +3345,9 @@ const _sfc_main$6 = {
     },
     onLaneDragStart() {
       this.isLaneDragging = true;
+      this._laneOrderBeforeDrag = (this.currentTemplate.lanes || []).map(
+        (l) => l.laneId
+      );
     },
     onLineDragEnd() {
       this.syncLinesLaneIdsFromCurrent();
@@ -3357,15 +3361,22 @@ const _sfc_main$6 = {
     },
     onLaneDragEnd() {
       const lanes = this.currentTemplate.lanes || [];
+      const currentOrder = lanes.map((l) => l.laneId);
+      const hasChanged = !this._laneOrderBeforeDrag || this._laneOrderBeforeDrag.length !== currentOrder.length || this._laneOrderBeforeDrag.some((id, i) => id !== currentOrder[i]);
       lanes.forEach((lane, index2) => {
         lane.sort = index2;
       });
       sortLanes(lanes);
-      this.notifyTemplateChangeImmediately();
-      Promise.all(lanes.map((lane) => this.dragUpdateLane(lane))).then(() => {
-        this.setDefaultAndNotify();
+      if (hasChanged) {
+        this.notifyTemplateChangeImmediately();
+        Promise.all(lanes.map((lane) => this.dragUpdateLane(lane))).then(() => {
+          this.setDefaultAndNotify();
+          this.isLaneDragging = false;
+        });
+      } else {
         this.isLaneDragging = false;
-      });
+      }
+      this._laneOrderBeforeDrag = null;
     },
     // 拖拽更新曲线
     dragUpdateLine(data) {
@@ -4046,6 +4057,12 @@ const _sfc_main$6 = {
         }
       }
     },
+    laneDragFilter() {
+      if (this.isGeomechanical) {
+        return ".no-drag, .kd-lane-chart-lane-container-echart, .kd-lane-chart-container-draw-area";
+      }
+      return ".no-drag";
+    },
     darwAreaStyle() {
       const headerStyle = this.headerStyle;
       const heightNum = pxToNumber(headerStyle.height);
@@ -4076,7 +4093,7 @@ const _hoisted_6$2 = ["onMousedown"];
 const _hoisted_7$2 = ["id", "lane-id"];
 const _hoisted_8$1 = ["onMousedown"];
 const _hoisted_9$1 = {
-  key: 1,
+  key: 0,
   class: "kd-lane-chart-lane-container-echart"
 };
 const _hoisted_10$1 = ["onContextmenu"];
@@ -4140,11 +4157,10 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
             $props.isKdCurveV2 ? (openBlock(), createElementBlock("div", _hoisted_2$5, [
               renderSlot(_ctx.$slots, `slotheader-content-${lane.laneId}`, { lane }, void 0, true)
             ])) : createCommentVNode("", true),
-            index2 < $options.fixedLanes.length - 1 || $options.scrollableLanes.length > 0 ? (openBlock(), createElementBlock("div", {
-              key: 1,
+            createElementVNode("div", {
               class: "kd-lane-resize-handle kd-lane-resize-handle-right",
               onMousedown: ($event) => $options.startResize($event, lane, "right")
-            }, null, 40, _hoisted_3$4)) : createCommentVNode("", true)
+            }, null, 40, _hoisted_3$4)
           ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
             createElementVNode("div", {
               class: normalizeClass(["kd-lane-chart-lane-header", {
@@ -4200,11 +4216,10 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
             $props.isKdCurveV2 ? (openBlock(), createElementBlock("div", _hoisted_5$3, [
               renderSlot(_ctx.$slots, `content-${lane.laneId}`, { lane }, void 0, true)
             ])) : createCommentVNode("", true),
-            index2 < $options.fixedLanes.length - 1 || $options.scrollableLanes.length > 0 ? (openBlock(), createElementBlock("div", {
-              key: 1,
+            createElementVNode("div", {
               class: "kd-lane-resize-handle kd-lane-resize-handle-right",
               onMousedown: ($event) => $options.startResize($event, lane, "right")
-            }, null, 40, _hoisted_6$2)) : createCommentVNode("", true)
+            }, null, 40, _hoisted_6$2)
           ], 64))
         ], 14, _hoisted_1$6);
       }), 128)),
@@ -4219,7 +4234,8 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
         swapThreshold: 0.65,
         group: { name: "laneGroup", pull: false, put: false },
         "item-key": "laneId",
-        filter: ".no-drag"
+        filter: $options.laneDragFilter,
+        axis: "x"
       }, {
         default: withCtx(() => [
           (openBlock(true), createElementBlock(Fragment, null, renderList($options.scrollableLanes || [], (lane, index2) => {
@@ -4252,11 +4268,10 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
                 }, [
                   renderSlot(_ctx.$slots, `lane${lane.laneId}`, { lane }, void 0, true)
                 ], 4),
-                index2 < $options.scrollableLanes.length - 1 ? (openBlock(), createElementBlock("div", {
-                  key: 0,
+                createElementVNode("div", {
                   class: "kd-lane-resize-handle kd-lane-resize-handle-right",
                   onMousedown: ($event) => $options.startResize($event, lane, "right")
-                }, null, 40, _hoisted_8$1)) : createCommentVNode("", true),
+                }, null, 40, _hoisted_8$1),
                 $props.isKdCurveV2 ? (openBlock(), createElementBlock("div", _hoisted_9$1, [
                   renderSlot(_ctx.$slots, `slotheader-content-${lane.laneId}`, { lane }, void 0, true)
                 ])) : createCommentVNode("", true)
@@ -4315,17 +4330,16 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
                 $props.isKdCurveV2 ? (openBlock(), createElementBlock("div", _hoisted_11$1, [
                   renderSlot(_ctx.$slots, `content-${lane.laneId}`, { lane }, void 0, true)
                 ])) : createCommentVNode("", true),
-                index2 < $options.scrollableLanes.length - 1 ? (openBlock(), createElementBlock("div", {
-                  key: 1,
+                createElementVNode("div", {
                   class: "kd-lane-resize-handle kd-lane-resize-handle-right",
                   onMousedown: ($event) => $options.startResize($event, lane, "right")
-                }, null, 40, _hoisted_12$1)) : createCommentVNode("", true)
+                }, null, 40, _hoisted_12$1)
               ], 64))
             ], 14, _hoisted_7$2);
           }), 128))
         ]),
         _: 3
-      }, 8, ["onStart", "onEnd", "modelValue"])
+      }, 8, ["onStart", "onEnd", "modelValue", "filter"])
     ], 64)) : (openBlock(), createElementBlock("div", _hoisted_13$1, [
       createElementVNode("div", {
         class: normalizeClass(["kd-lane-chart-lane-header", { "kd-lane-chart-lane-header-isKdCurveV2": $props.isKdCurveV2 }]),
@@ -4407,7 +4421,7 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
     }, 8, ["modelValue", "onClose"])
   ], 544);
 }
-const KdLaneContainerComponent = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$6], ["__scopeId", "data-v-58d1cc31"]]);
+const KdLaneContainerComponent = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$6], ["__scopeId", "data-v-dcac42f7"]]);
 const SLIDER_GROUP_ID = "depthSliderGroup";
 function pad2(n) {
   return n < 10 ? "0" + n : "" + n;
@@ -6968,6 +6982,41 @@ const _sfc_main$3 = {
     }
   },
   methods: {
+    // 保存 dataZoom 状态，用于 setOption 后恢复
+    _saveDataZoomState() {
+      if (!this.chart || this.chart.isDisposed()) return null;
+      try {
+        const option = this.chart.getOption();
+        if (option && option.dataZoom && option.dataZoom.length > 0) {
+          return option.dataZoom.map((dz) => ({
+            start: dz.start,
+            end: dz.end,
+            startValue: dz.startValue,
+            endValue: dz.endValue
+          }));
+        }
+      } catch (e) {
+      }
+      return null;
+    },
+    _restoreDataZoomState(savedState) {
+      if (!savedState || !this.chart || this.chart.isDisposed()) return;
+      try {
+        const currentOption = this.chart.getOption();
+        if (!currentOption.dataZoom || currentOption.dataZoom.length === 0) return;
+        savedState.forEach((state, i) => {
+          if (i < currentOption.dataZoom.length) {
+            const dz = currentOption.dataZoom[i];
+            if (state.start !== void 0) dz.start = state.start;
+            if (state.end !== void 0) dz.end = state.end;
+            if (state.startValue !== void 0) dz.startValue = state.startValue;
+            if (state.endValue !== void 0) dz.endValue = state.endValue;
+          }
+        });
+        this.chart.setOption({ dataZoom: currentOption.dataZoom });
+      } catch (e) {
+      }
+    },
     // provide an explicit merge option method
     mergeOptions(options, notMerge, lazyUpdate, skipClone) {
       if (this.manualUpdate) {
@@ -6977,7 +7026,11 @@ const _sfc_main$3 = {
         this.init(options);
       } else {
         this._skipWatcher = true;
+        const savedDataZoom = this._saveDataZoomState();
         this.delegateMethod("setOption", this.getOptionsWithTheme(options, skipClone), notMerge, lazyUpdate);
+        if (savedDataZoom) {
+          this._restoreDataZoomState(savedDataZoom);
+        }
         this.$nextTick(() => {
           this._skipWatcher = false;
         });
@@ -7129,7 +7182,11 @@ const _sfc_main$3 = {
             if (!this.chart) {
               this.init(val);
             } else {
+              const savedDataZoom = this._saveDataZoomState();
               this.chart.setOption(this.getOptionsWithTheme(val), val !== oldVal);
+              if (savedDataZoom) {
+                this._restoreDataZoomState(savedDataZoom);
+              }
               if (this.group) {
                 this.chart.group = this.group;
               }
@@ -7213,7 +7270,7 @@ const _hoisted_1$3 = { class: "echarts" };
 function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", _hoisted_1$3);
 }
-const resizeEcharts = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3], ["__scopeId", "data-v-d8f35894"]]);
+const resizeEcharts = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3], ["__scopeId", "data-v-137d625e"]]);
 const _sfc_main$2 = {
   name: "LineChartContainer",
   components: {
@@ -7489,12 +7546,6 @@ const _sfc_main$2 = {
     this.scheduleConnectAllCharts = debounce(() => {
       this.connectAllCharts();
     }, 50);
-    this.getCssVar = (key) => {
-      if (!this.cssVarCache[key]) {
-        this.cssVarCache[key] = getCssVariable(key);
-      }
-      return this.cssVarCache[key];
-    };
   },
   mounted() {
     this.showDateTime = Object.prototype.hasOwnProperty.call(
@@ -7749,11 +7800,13 @@ const _sfc_main$2 = {
         if (scaleValues.length === 0) return;
         const minScale = Math.min(...scaleValues);
         const maxScale = Math.max(...scaleValues);
+        const safeCm = this.pxToCm();
+        const safeDepthInterval = this.depthInterval || 1;
         this.minWindowSize = Math.round(
-          this.pxToCm() * (+minScale / this.depthInterval)
+          safeCm * (+minScale / safeDepthInterval)
         );
         this.maxWindowSize = Math.round(
-          this.pxToCm() * (+maxScale / this.depthInterval)
+          safeCm * (+maxScale / safeDepthInterval)
         );
         this.updateSettings({
           key: "scale",
@@ -7806,11 +7859,12 @@ const _sfc_main$2 = {
     // 将当前页面px转换为cm
     pxToCm() {
       const container = this.$refs.targetDom;
+      if (!container) return 4;
       const rect = container.getBoundingClientRect();
       const headerHeight = this.$refs.chartContainer && this.$refs.chartContainer.getLaneHeightPx() || 0;
       const px = rect.height - headerHeight;
       const cm = px / 25;
-      return cm;
+      return cm > 0 ? cm : 4;
     },
     // 获取当前可见数据的x轴范围
     getXAxisRangeByHeader(lineInfo, validData = []) {
@@ -7987,6 +8041,7 @@ const _sfc_main$2 = {
     },
     // 处理鼠标滚轮事件
     handleWheel(e) {
+      if (this.isGeomechanical) return;
       e.preventDefault();
       const dataLength = this.realTimeData && this.realTimeData.length || 0;
       this.wheelDelta = Math.sign(e.deltaY);
@@ -8138,14 +8193,20 @@ const _sfc_main$2 = {
     // 处理工具栏设置变更
     async updateSettings(settings) {
       if (settings.key === "displayType") {
+        cancelAnimationFrame(this.animationId);
         this.toggleTooltip(settings.value == "float");
       }
       if (settings.key === "scale") {
+        cancelAnimationFrame(this.animationId);
+        this.targetStartIndex = this.startIndex;
         this.scaleToDataSize(settings.value);
+        this.targetWindowSize = this.windowSize;
+        this.targetStartIndex = this.startIndex;
         await this.$nextTick();
         this.updateLanesChartOption();
       }
       if (settings.key === "depthRange" || settings.key === "timeRange") {
+        cancelAnimationFrame(this.animationId);
         if (this.realTimeData.length > 0) {
           const axisType = this.formCache.axisType;
           const axisKey = this.currentToolBarConfig.axisTypeList && this.currentToolBarConfig.axisTypeList[axisType];
@@ -8349,7 +8410,7 @@ const _sfc_main$2 = {
     // 获取默认的泳道图表选项
     getDefaultLaneChartOption() {
       const option = {
-        backgroundColor: this.getCssVar("--kd-lane-container-item-bg"),
+        backgroundColor: getCssVariable("--kd-lane-container-item-bg"),
         grid: {
           top: 0,
           left: 2,
@@ -8375,7 +8436,7 @@ const _sfc_main$2 = {
               showMinLine: false,
               showMaxLine: false,
               lineStyle: {
-                color: this.getCssVar("--kd-lane-container-item-line-color"),
+                color: getCssVariable("--kd-lane-container-item-line-color"),
                 type: "dashed"
               }
             },
@@ -8402,7 +8463,7 @@ const _sfc_main$2 = {
               showMinLine: false,
               showMaxLine: false,
               lineStyle: {
-                color: this.getCssVar("--kd-lane-container-item-line-color"),
+                color: getCssVariable("--kd-lane-container-item-line-color"),
                 type: "dashed"
               }
             },
@@ -8413,7 +8474,7 @@ const _sfc_main$2 = {
             axisLabel: {
               show: false,
               fontSize: 12,
-              color: this.getCssVar("--default-text-color")
+              color: getCssVariable("--default-text-color")
             },
             axisTick: {
               show: false
@@ -8428,7 +8489,7 @@ const _sfc_main$2 = {
             type: "inside",
             orient: "vertical",
             filterMode: "none",
-            disabled: true
+            disabled: !this.isGeomechanical
           }
         ],
         tooltip: {
@@ -8438,10 +8499,11 @@ const _sfc_main$2 = {
           axisPointer: {
             type: "line",
             axis: "y",
+            z: 999,
             snap: true,
             label: {
-              backgroundColor: `${this.getCssVar("--kd-lane-container-border-color")}99`,
-              color: `${this.getCssVar("--default-text-color")}`,
+              backgroundColor: `${getCssVariable("--kd-lane-container-border-color")}99`,
+              color: `${getCssVariable("--default-text-color")}`,
               show: true,
               formatter: (params) => {
                 var _a;
@@ -8459,10 +8521,10 @@ const _sfc_main$2 = {
           },
           confine: true,
           // appendTo: document.querySelector('.kd-curve-2d-container'),
-          backgroundColor: this.getCssVar("--tooltip-bg-color"),
+          backgroundColor: getCssVariable("--tooltip-bg-color"),
           borderWidth: 0,
           textStyle: {
-            color: this.getCssVar("--default-text-color")
+            color: getCssVariable("--default-text-color")
           },
           formatter: (series) => {
             var _a;
@@ -8727,7 +8789,7 @@ const _sfc_main$2 = {
                   showMinLine: false,
                   showMaxLine: false,
                   lineStyle: {
-                    color: this.getCssVar(
+                    color: getCssVariable(
                       "--kd-lane-container-item-line-color"
                     ),
                     type: "dashed"
@@ -8738,7 +8800,7 @@ const _sfc_main$2 = {
                 axisLabel: {
                   show: false,
                   fontSize: 12,
-                  color: this.getCssVar("--default-text-color")
+                  color: getCssVariable("--default-text-color")
                 },
                 axisPointer: { show: hasValidLineData },
                 interval: unifiedInterval
@@ -8773,7 +8835,7 @@ const _sfc_main$2 = {
                     hideOverlap: true,
                     height: 14,
                     verticalAlign: "middle",
-                    color: this.getCssVar("--default-text-color"),
+                    color: getCssVariable("--default-text-color"),
                     overflow: "truncate",
                     rich: {
                       center: {
@@ -8846,13 +8908,13 @@ const _sfc_main$2 = {
                       )
                     };
                   }
-                  const groupSeriesData = this.generateSeriesDataCached(
+                  let groupSeriesData = this.generateSeriesDataCached(
                     group,
                     lineInfo,
                     axisKey,
                     paramCodeMap
                   );
-                  const groupAllSeriesData = this.generateAllSeriesDataCached(
+                  let groupAllSeriesData = this.generateAllSeriesDataCached(
                     group,
                     lineInfo,
                     axisKey,
@@ -8877,7 +8939,7 @@ const _sfc_main$2 = {
                       showMaxLine: false,
                       showMinLine: false,
                       lineStyle: {
-                        color: this.getCssVar(
+                        color: getCssVariable(
                           "--kd-lane-container-item-line-color"
                         ),
                         type: "dashed"
@@ -8929,7 +8991,7 @@ const _sfc_main$2 = {
                   this.addAreaStyleToSeries(
                     baseSeries,
                     lineInfo,
-                    groupSeriesData,
+                    groupAllSeriesData,
                     min
                   );
                   const rangeAreaSeries = this.addRangeAreaToSeries(
@@ -9102,6 +9164,49 @@ const _sfc_main$2 = {
         }
       }
     },
+    /**
+    * LTTB 降采样算法
+    * @param {Array<[number, number]>} data 原始数据 [[x,y], [x,y]]
+    * @param {number} threshold 采样后最大点数（建议 600 ~ 1200）
+    * @returns {Array<[number, number]>} 抽稀后数据
+    */
+    lttb(data, threshold) {
+      if (threshold >= data.length || threshold === 0) {
+        return [...data];
+      }
+      if (threshold === 1) {
+        return [data[0]];
+      }
+      const output = [];
+      const dataLength = data.length;
+      const bucketSize = (dataLength - 2) / (threshold - 2);
+      output.push(data[0]);
+      let prevIndex = 0;
+      for (let i = 0; i < threshold - 2; i++) {
+        const bucketStart = 1 + Math.floor((i + 0) * bucketSize);
+        const bucketEnd = 1 + Math.floor((i + 1) * bucketSize);
+        const nextBucketMidIdx = Math.floor((i + 1.5) * bucketSize);
+        let maxArea = -1;
+        let maxAreaIndex = bucketStart;
+        const pointA = data[prevIndex];
+        const pointC = data[Math.min(nextBucketMidIdx, dataLength - 1)];
+        for (let j = bucketStart; j < bucketEnd; j++) {
+          const pointB = data[j];
+          const area = Math.abs(
+            (pointA[0] - pointC[0]) * (pointB[1] - pointA[1]) - (pointA[0] - pointB[0]) * (pointC[1] - pointA[1])
+          );
+          if (area > maxArea) {
+            maxArea = area;
+            maxAreaIndex = j;
+          }
+        }
+        output.push(data[maxAreaIndex]);
+        prevIndex = maxAreaIndex;
+      }
+      output.push(data[dataLength - 1]);
+      console.log(output, "output");
+      return output;
+    },
     // 生成泳道图表数据
     generateSeriesData(data, lineInfo, axisKey) {
       return data.map((item) => {
@@ -10142,15 +10247,12 @@ const _sfc_main$2 = {
         if (!areaItem.data || areaItem.data.length < 2) continue;
         if (lineInfo.laneId !== this.activeLaneId && areaItem.type === "markArea")
           continue;
-        if (areaItem.data[0].timestamp) {
-          areaItem.data.sort(
-            (a, b) => this.toMillisecondTimestamp(a.timestamp) - this.toMillisecondTimestamp(b.timestamp)
-          );
-        } else {
-          areaItem.data.sort((a, b) => Number(a[axisKey]) - Number(b[axisKey]));
-        }
-        const startData = areaItem.data[0];
-        const endData = areaItem.data[1];
+        const hasTimestamp = areaItem.data[0].timestamp;
+        const sortedData = hasTimestamp ? [...areaItem.data].sort(
+          (a, b) => this.toMillisecondTimestamp(a.timestamp) - this.toMillisecondTimestamp(b.timestamp)
+        ) : [...areaItem.data].sort((a, b) => Number(a[axisKey]) - Number(b[axisKey]));
+        const startData = sortedData[0];
+        const endData = sortedData[1];
         console.log("startData", startData, "endData", endData);
         let startY, endY;
         if (this.formCache.axisType === "depth") {
@@ -10200,6 +10302,8 @@ const _sfc_main$2 = {
               const diff = Number(d[axisKey]) - Number(endDepth);
               if (diff <= 0) {
                 closestEndItem = d;
+              } else {
+                break;
               }
             }
             if (closestEndItem) {
@@ -10245,6 +10349,8 @@ const _sfc_main$2 = {
               const diff = this.toMillisecondTimestamp(d[axisKey]) - endTimeMs;
               if (diff < 0) {
                 closestEndItem = d;
+              } else {
+                break;
               }
             }
             endY = closestEndItem ? endTimeMs : null;
@@ -10359,13 +10465,15 @@ const _sfc_main$2 = {
       }
       if (seriesData.length > 0) {
         const firstValidPoint = seriesData.find(
-          (point) => Number.isFinite(+point[0])
+          (point) => {
+            return Number.isFinite(+point.value[0]);
+          }
         );
         if (firstValidPoint) {
-          seriesData.unshift([min, firstValidPoint[1]]);
+          seriesData.unshift([min, firstValidPoint.value[1]]);
           const lastValidPoint = seriesData[seriesData.length - 1];
-          if (lastValidPoint && Number.isFinite(+lastValidPoint[0])) {
-            seriesData.push([min, lastValidPoint[1]]);
+          if (lastValidPoint && Number.isFinite(+lastValidPoint.value[0])) {
+            seriesData.push([min, lastValidPoint.value[1]]);
           }
         }
       }
@@ -10808,16 +10916,18 @@ const _sfc_main$2 = {
       if (typeof scale == "string") {
         scale = +scale.replace("1:", "") / 100;
       }
-      let size = Math.round(this.pxToCm() * (+scale / this.depthInterval));
+      const safeCm = this.pxToCm();
+      const safeDepthInterval = this.depthInterval || 1;
+      let size = Math.round(safeCm * (+scale / safeDepthInterval));
       let maxSize = Math.max(
-        Math.round(this.pxToCm() * (1 / this.depthInterval)),
+        Math.round(safeCm * (1 / safeDepthInterval)),
         this.realTimeData.length
       );
       if (size < maxSize) {
         this.windowSize = size;
       } else {
         this.windowSize = maxSize;
-        let newsize = Math.round(maxSize / this.pxToCm() * this.depthInterval);
+        let newsize = Math.round(maxSize / safeCm * safeDepthInterval);
         let data = ((_b = (_a = this.currentToolBarConfig) == null ? void 0 : _a.scaleList) == null ? void 0 : _b.map((item) => item.value)) || [];
         this.$emit(
           "updateScale",
@@ -10932,7 +11042,8 @@ const _sfc_main$2 = {
         this.$nextTick(() => {
           this.updateLanesChartOption();
         });
-      }
+      },
+      immediate: true
     },
     windowSize: {
       handler(newVal) {
@@ -10943,7 +11054,9 @@ const _sfc_main$2 = {
         }
         if (newVal && this.formCache.axisType == "depth") {
           let data = ((_b = (_a = this.currentToolBarConfig) == null ? void 0 : _a.scaleList) == null ? void 0 : _b.map((item) => item.value)) || [];
-          let size = Math.round(newVal * this.depthInterval / this.pxToCm()) < Math.max(...data) ? Math.round(newVal * this.depthInterval / this.pxToCm()) : Math.max(...data);
+          const safeCm = this.pxToCm();
+          const safeDepthInterval = this.depthInterval || 1;
+          let size = Math.round(newVal * safeDepthInterval / safeCm) < Math.max(...data) ? Math.round(newVal * safeDepthInterval / safeCm) : Math.max(...data);
           this.$emit(
             "updateScale",
             data.includes(size) ? size : `1:${size * 100}`
@@ -11301,7 +11414,7 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ], 512);
 }
-const chartContainer = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2], ["__scopeId", "data-v-2b46ef31"]]);
+const chartContainer = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2], ["__scopeId", "data-v-fa130d62"]]);
 const _sfc_main$1 = {
   name: "ParameterPanel",
   props: {