kd-lane-chart-v3 0.0.9 → 0.1.1

package/dist/esm/index.js

@@ -2929,7 +2929,7 @@ const _hoisted_2$6 = { class: "legend-content" };
 const _hoisted_3$5 = { class: "scale-left" };
 const _hoisted_4$5 = ["onClick"];
 const _hoisted_5$4 = { class: "legend-line-item-top" };
-const _hoisted_6$4 = { class: "legend-text" };
+const _hoisted_6$3 = { class: "legend-text" };
 const _hoisted_7$3 = {
   key: 0,
   class: "legend-data"
@@ -2959,7 +2959,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                 class: normalizeClass(["legend-color", legend.lineType]),
                 style: normalizeStyle({ borderBottom: `2px ${legend.lineType} ${legend.color}` })
               }, null, 6),
-              createElementVNode("div", _hoisted_6$4, toDisplayString(legend.label), 1)
+              createElementVNode("div", _hoisted_6$3, toDisplayString(legend.label), 1)
             ]),
             $props.formCache.displayType == "header" ? (openBlock(), createElementBlock("div", _hoisted_7$3, toDisplayString(legend.data), 1)) : createCommentVNode("", true)
           ], 12, _hoisted_4$5);
@@ -4072,7 +4072,7 @@ const _hoisted_5$3 = {
   key: 0,
   class: "kd-lane-chart-lane-container-echart"
 };
-const _hoisted_6$3 = ["onMousedown"];
+const _hoisted_6$2 = ["onMousedown"];
 const _hoisted_7$2 = ["id", "lane-id"];
 const _hoisted_8$1 = ["onMousedown"];
 const _hoisted_9$1 = {
@@ -4204,7 +4204,7 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
               key: 1,
               class: "kd-lane-resize-handle kd-lane-resize-handle-right",
               onMousedown: ($event) => $options.startResize($event, lane, "right")
-            }, null, 40, _hoisted_6$3)) : createCommentVNode("", true)
+            }, null, 40, _hoisted_6$2)) : createCommentVNode("", true)
           ], 64))
         ], 14, _hoisted_1$6);
       }), 128)),
@@ -4407,7 +4407,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-423ed0d6"]]);
+const KdLaneContainerComponent = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$6], ["__scopeId", "data-v-58d1cc31"]]);
 const SLIDER_GROUP_ID = "depthSliderGroup";
 function pad2(n) {
   return n < 10 ? "0" + n : "" + n;
@@ -5675,7 +5675,7 @@ const _hoisted_4$3 = {
   class: "chart"
 };
 const _hoisted_5$2 = { class: "label-card" };
-const _hoisted_6$2 = { class: "label-row" };
+const _hoisted_6$1 = { class: "label-row" };
 const _hoisted_7$1 = { class: "label-row" };
 function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_el_radio = resolveComponent("el-radio");
@@ -5711,7 +5711,7 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
         style: normalizeStyle($options.labelFloatStyle)
       }, [
         createElementVNode("div", _hoisted_5$2, [
-          createElementVNode("div", _hoisted_6$2, toDisplayString($data.labelPos.line1), 1),
+          createElementVNode("div", _hoisted_6$1, toDisplayString($data.labelPos.line1), 1),
           createElementVNode("div", _hoisted_7$1, toDisplayString($data.labelPos.line2), 1)
         ])
       ], 4), [
@@ -6185,7 +6185,7 @@ const _hoisted_4$2 = {
   class: "label"
 };
 const _hoisted_5$1 = { class: "elTooltipArea" };
-const _hoisted_6$1 = {
+const _hoisted_6 = {
   key: 7,
   class: "label"
 };
@@ -6384,7 +6384,7 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
       ]),
       _: 1
     }, 8, ["disabled"])) : createCommentVNode("", true),
-    $props.currentToolBarConfig.timeRangeSelectShow !== false ? (openBlock(), createElementBlock("div", _hoisted_6$1, "时间范围：")) : createCommentVNode("", true),
+    $props.currentToolBarConfig.timeRangeSelectShow !== false ? (openBlock(), createElementBlock("div", _hoisted_6, "时间范围：")) : createCommentVNode("", true),
     $props.currentToolBarConfig.timeRangeSelectShow !== false ? (openBlock(), createBlock(_component_el_tooltip, {
       key: 8,
       disabled: !($data.form.axisType == "depth"),
@@ -7395,6 +7395,7 @@ const _sfc_main$2 = {
       // 当前右键菜单来源：'missingPoint' | 'markArea' | null
       currentContextMenuType: null,
       activeSubMenu: null,
+      subMenuDirection: "right",
       params: [],
       contextItem: void 0,
       realTimeData: [],
@@ -8465,7 +8466,31 @@ const _sfc_main$2 = {
           },
           formatter: (series) => {
             var _a;
-            const uniqueSeries = series.filter((item) => item.seriesName !== "helper");
+            const uniqueSeries = series.filter((item) => item.seriesName !== "helper").reduce((acc, current) => {
+              const existingIndex = acc.findIndex(
+                (item) => item.seriesName === current.seriesName
+              );
+              if (existingIndex === -1) {
+                acc.push(current);
+              } else {
+                const existingItem = acc[existingIndex];
+                const existingValue = Array.isArray(existingItem.value) ? existingItem.value[0] : existingItem.value;
+                const currentValue = Array.isArray(current.value) ? current.value[0] : current.value;
+                const existingHasValue = existingValue !== void 0 && existingValue !== null && existingValue !== "";
+                const currentHasValue = currentValue !== void 0 && currentValue !== null && currentValue !== "";
+                if (!existingHasValue && currentHasValue) ;
+                else if (existingHasValue && !currentHasValue) {
+                  acc[existingIndex] = current;
+                } else if (existingHasValue && currentHasValue) {
+                  if (Number(currentValue) > Number(existingValue)) {
+                    acc[existingIndex] = current;
+                  }
+                } else {
+                  acc[existingIndex] = current;
+                }
+              }
+              return acc;
+            }, []);
             if (this.tooltipFormatter && typeof this.tooltipFormatter === "function") {
               let mousePositionData = null;
               if (uniqueSeries.length > 0) {
@@ -9097,7 +9122,7 @@ const _sfc_main$2 = {
             }
           }
         }
-        return [value, +item[axisKey]];
+        return [value, +item[axisKey], item.timestamp];
       });
     },
     generateSeriesDataCached(data, lineInfo, axisKey, paramCodeMap) {
@@ -9115,7 +9140,7 @@ const _sfc_main$2 = {
             }
           }
         }
-        return [value, +item[axisKey]];
+        return [value, +item[axisKey], item.timestamp];
       });
     },
     generateAllSeriesDataCached(data, lineInfo, axisKey, paramCodeMap) {
@@ -9168,11 +9193,21 @@ const _sfc_main$2 = {
       let lastValidPoint = null;
       let lastValidIndex = -1;
       let inMissingRange = false;
+      let firstValidPoint = null;
+      let firstValidIndex = -1;
+      let hasMissingAtStart = false;
       for (let i = 0; i < seriesData.length; i++) {
         const point = seriesData[i];
         const value = point[0];
         const isValid = value !== null && value !== void 0 && value !== "" && Number.isFinite(+value);
         if (isValid) {
+          if (firstValidPoint === null) {
+            firstValidPoint = point;
+            firstValidIndex = i;
+            if (i > 0) {
+              hasMissingAtStart = true;
+            }
+          }
           if (inMissingRange && lastValidPoint) {
             boundaryPoints.push({
               data: lastValidPoint,
@@ -9194,6 +9229,20 @@ const _sfc_main$2 = {
           }
         }
       }
+      if (hasMissingAtStart && firstValidPoint) {
+        boundaryPoints.push({
+          data: firstValidPoint,
+          type: "bottom",
+          originalIndex: firstValidIndex
+        });
+      }
+      if (inMissingRange && lastValidPoint) {
+        boundaryPoints.push({
+          data: lastValidPoint,
+          type: "top",
+          originalIndex: lastValidIndex
+        });
+      }
       return boundaryPoints;
     },
     async handleChartClick(e, laneId) {
@@ -9384,6 +9433,9 @@ const _sfc_main$2 = {
       });
       const scatterData = filteredPoints.map((point) => ({
         value: point.value,
+        lineId: point.lineId,
+        paramId: point.paramId,
+        timestamp: point.timestamp,
         itemStyle: {
           color: point.color || "#1890ff",
           borderColor: "#fff",
@@ -9506,7 +9558,27 @@ const _sfc_main$2 = {
         }
       }
       if (clickedPoint) {
-        this.showContextMenu(clickedPoint, laneId, e);
+        if (clickedPoint.type && (clickedPoint.type === "top" || clickedPoint.type === "bottom")) {
+          this.showContextMenu(clickedPoint, laneId, e);
+        } else if (clickedPoint.paramId && clickedPoint.lineId) {
+          const markAreaIndex = this.findMarkAreaByPoint(clickedPoint, laneId);
+          if (markAreaIndex !== -1) {
+            this.currentMarkAreaIndex = markAreaIndex;
+            this.currentContextMenuType = "markArea";
+            this.currentPointInfo = null;
+            this.currentContextMenuItems = [
+              ...this.markAreaMenuConfig || [],
+              { label: "删除区块", action: "deleteMarkArea" }
+            ];
+            this.calculateContextMenuPosition(e);
+            this.contextMenuVisible = true;
+            this.activeSubMenu = null;
+          } else {
+            this.showMarkAreaContextMenu(laneId, e);
+          }
+        } else {
+          this.showMarkAreaContextMenu(laneId, e);
+        }
       } else {
         this.showMarkAreaContextMenu(laneId, e);
       }
@@ -9645,12 +9717,35 @@ const _sfc_main$2 = {
       this.currentContextMenuType = null;
       this.currentContextMenuItems = [];
       this.activeSubMenu = null;
+      this.subMenuDirection = "right";
       this.menuWidth = null;
       this.menuHeight = null;
     },
     showSubMenu(item, event) {
       event.stopPropagation();
       this.activeSubMenu = item;
+      const parentMenuItem = event.currentTarget;
+      this.$nextTick(() => {
+        const container = document.querySelector(".kd-lane-chart-lane-container-echart");
+        const subMenu = parentMenuItem == null ? void 0 : parentMenuItem.querySelector(".sub-menu");
+        if (!container || !parentMenuItem || !subMenu) return;
+        subMenu.style.visibility = "hidden";
+        const containerRect = container.getBoundingClientRect();
+        const parentRect = parentMenuItem.getBoundingClientRect();
+        const subMenuWidth = subMenu.offsetWidth;
+        const rightAvailable = containerRect.right - parentRect.right;
+        this.subMenuDirection = rightAvailable >= subMenuWidth ? "right" : "left";
+        subMenu.style.visibility = "";
+      });
+    },
+    getSubMenuStyle() {
+      return {
+        left: this.subMenuDirection === "right" ? "100%" : "auto",
+        right: this.subMenuDirection === "right" ? "auto" : "100%",
+        top: 0,
+        marginLeft: this.subMenuDirection === "right" ? "4px" : "auto",
+        marginRight: this.subMenuDirection === "right" ? "auto" : "4px"
+      };
     },
     handleContextMenuItemClick(item) {
       if (item.action === "deleteMarkArea") {
@@ -9695,6 +9790,7 @@ const _sfc_main$2 = {
         return;
       }
       const { topPoint, bottomPoint } = this.findBoundaryPointPair(currentPoint);
+      console.log("获取到的起始点和结束点", topPoint, bottomPoint);
       this.$emit("missingPointMenuItemClick", {
         pointInfo: currentPoint,
         menuItem: item,
@@ -9737,45 +9833,133 @@ const _sfc_main$2 = {
       }
     },
     findBoundaryPointPair(currentPoint) {
-      const chartRef = this.getChartRefByLaneId(currentPoint.laneId);
-      if (!chartRef || !chartRef.chart) {
-        return { topPoint: null, bottomPoint: null };
-      }
-      const option = chartRef.chart.getOption();
       let topPoint = null;
       let bottomPoint = null;
-      for (let i = 0; i < option.series.length; i++) {
-        const series = option.series[i];
-        if (series.type !== "scatter") continue;
-        const data = series.data || [];
-        for (let j = 0; j < data.length; j++) {
-          const point = data[j];
-          if (!point || !point.value) continue;
-          if (point.lineId === currentPoint.lineId && point.paramId === currentPoint.paramId) {
-            if (point.type === "top") {
-              topPoint = point;
-            } else if (point.type === "bottom") {
-              bottomPoint = point;
-            }
+      if (currentPoint.type === "top") {
+        topPoint = currentPoint;
+        bottomPoint = this.findBoundaryPointFromRealTimeData(
+          currentPoint,
+          "bottom"
+        );
+      } else if (currentPoint.type === "bottom") {
+        bottomPoint = currentPoint;
+        topPoint = this.findBoundaryPointFromRealTimeData(currentPoint, "top");
+      }
+      return { topPoint, bottomPoint };
+    },
+    findBoundaryPointFromRealTimeData(currentPoint, targetType) {
+      const axisType = this.formCache.axisType;
+      const axisKey = this.currentToolBarConfig.axisTypeList && this.currentToolBarConfig.axisTypeList[axisType] || (axisType === "time" ? "time" : "depth");
+      const currentYValue = currentPoint.value[1];
+      const paramId = currentPoint.paramId;
+      const hasTimestamp = axisType === "depth" && this.realTimeData.length > 0 && this.realTimeData[0] && Object.prototype.hasOwnProperty.call(this.realTimeData[0], "timestamp");
+      let searchStartIndex = -1;
+      const tolerance = axisType === "depth" ? 0.01 : 1e3;
+      for (let i = 0; i < this.realTimeData.length; i++) {
+        const item = this.realTimeData[i];
+        let itemYValue = item[axisKey];
+        if (axisType !== "depth") {
+          itemYValue = this.toMillisecondTimestamp(itemYValue);
+        } else {
+          itemYValue = Number(itemYValue);
+        }
+        if (hasTimestamp) {
+          const itemTimestamp = this.toMillisecondTimestamp(item.timestamp);
+          const pointTimestamp = currentPoint.timestamp ? this.toMillisecondTimestamp(currentPoint.timestamp) : null;
+          if (Math.abs(itemYValue - currentYValue) < tolerance && (!pointTimestamp || itemTimestamp === pointTimestamp)) {
+            searchStartIndex = i;
+            break;
+          }
+        } else {
+          if (Math.abs(itemYValue - currentYValue) < tolerance) {
+            searchStartIndex = i;
+            break;
           }
         }
       }
-      if (currentPoint.type === "top" && topPoint) {
-        const nextPoint = option.series.filter((s) => s.type === "scatter").flatMap((s) => s.data || []).find(
-          (p) => p && p.value && p.lineId === currentPoint.lineId && p.paramId === currentPoint.paramId && p.type === "bottom" && p.originalIndex > currentPoint.originalIndex
-        );
-        if (nextPoint) {
-          bottomPoint = nextPoint;
+      console.log("searchStartIndex", searchStartIndex);
+      if (searchStartIndex === -1) return null;
+      let boundaryPoint = null;
+      if (targetType === "bottom") {
+        for (let i = searchStartIndex + 1; i < this.realTimeData.length; i++) {
+          const item = this.realTimeData[i];
+          const value = item[paramId];
+          if (value !== null && value !== void 0 && value !== "" && Number.isFinite(+value)) {
+            let itemYValue = item[axisKey];
+            if (axisType !== "depth") {
+              itemYValue = this.toMillisecondTimestamp(itemYValue);
+            } else {
+              itemYValue = Number(itemYValue);
+            }
+            boundaryPoint = {
+              value: [value, itemYValue, item.timestamp],
+              lineId: currentPoint.lineId,
+              paramId,
+              type: "bottom",
+              originalIndex: i,
+              timestamp: hasTimestamp ? item.timestamp : void 0
+            };
+            break;
+          }
         }
-      } else if (currentPoint.type === "bottom" && bottomPoint) {
-        const prevPoint = option.series.filter((s) => s.type === "scatter").flatMap((s) => s.data || []).find(
-          (p) => p && p.value && p.lineId === currentPoint.lineId && p.paramId === currentPoint.paramId && p.type === "top" && p.originalIndex < currentPoint.originalIndex
-        );
-        if (prevPoint) {
-          topPoint = prevPoint;
+        if (!boundaryPoint) {
+          const lastItem = this.realTimeData[this.realTimeData.length - 1];
+          let lastYValue = lastItem[axisKey];
+          if (axisType !== "depth") {
+            lastYValue = this.toMillisecondTimestamp(lastYValue);
+          } else {
+            lastYValue = Number(lastYValue);
+          }
+          boundaryPoint = {
+            value: [lastItem[paramId], lastYValue, lastItem.timestamp],
+            lineId: currentPoint.lineId,
+            paramId,
+            type: "bottom",
+            originalIndex: this.realTimeData.length - 1,
+            timestamp: hasTimestamp ? lastItem.timestamp : void 0
+          };
+        }
+      } else {
+        for (let i = searchStartIndex - 1; i >= 0; i--) {
+          const item = this.realTimeData[i];
+          const value = item[paramId];
+          if (value !== null && value !== void 0 && value !== "" && Number.isFinite(+value)) {
+            let itemYValue = item[axisKey];
+            if (axisType !== "depth") {
+              itemYValue = this.toMillisecondTimestamp(itemYValue);
+            } else {
+              itemYValue = Number(itemYValue);
+            }
+            boundaryPoint = {
+              value: [value, itemYValue, item.timestamp],
+              lineId: currentPoint.lineId,
+              paramId,
+              type: "top",
+              originalIndex: i,
+              timestamp: hasTimestamp ? item.timestamp : void 0
+            };
+            break;
+          }
+        }
+        if (!boundaryPoint) {
+          const firstItem = this.realTimeData[0];
+          let firstYValue = firstItem[axisKey];
+          if (axisType !== "depth") {
+            firstYValue = this.toMillisecondTimestamp(firstYValue);
+          } else {
+            firstYValue = Number(firstYValue);
+          }
+          boundaryPoint = {
+            value: [firstItem[paramId], firstYValue, firstItem.timestamp],
+            lineId: currentPoint.lineId,
+            paramId,
+            type: "top",
+            originalIndex: 0,
+            timestamp: hasTimestamp ? firstItem.timestamp : void 0
+          };
         }
       }
-      return { topPoint, bottomPoint };
+      return boundaryPoint;
     },
     // 获取Y轴标签格式化函数
     getYAxisLabelFormatter(isTimeLane, dataGroups, groupIndex, groupMin, groupMax, axisKey) {
@@ -10402,6 +10586,7 @@ const _sfc_main$2 = {
                     const formattedBoundaryPoints = boundaryPoints.map(
                       (bp) => ({
                         value: bp.data,
+                        timestamp: bp.data[2],
                         type: bp.type,
                         originalIndex: bp.originalIndex,
                         lineId: lineInfo.lineId,
@@ -10972,13 +11157,8 @@ const _hoisted_2$2 = {
   ref: "targetDom"
 };
 const _hoisted_3$1 = ["onMouseenter", "onClick"];
-const _hoisted_4$1 = {
-  key: 0,
-  class: "context-menu sub-menu",
-  style: { left: "100%", top: 0 }
-};
+const _hoisted_4$1 = ["onClick"];
 const _hoisted_5 = ["onClick"];
-const _hoisted_6 = ["onClick"];
 function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_resizeEcharts = resolveComponent("resizeEcharts");
   const _component_chartContainer = resolveComponent("chartContainer");
@@ -11091,7 +11271,11 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
             }, [
               createElementVNode("span", null, toDisplayString(item.label), 1),
               _cache[8] || (_cache[8] = createElementVNode("span", { class: "arrow" }, "›", -1)),
-              $data.activeSubMenu === item ? (openBlock(), createElementBlock("div", _hoisted_4$1, [
+              $data.activeSubMenu === item ? (openBlock(), createElementBlock("div", {
+                key: 0,
+                class: "context-menu sub-menu",
+                style: normalizeStyle($options.getSubMenuStyle())
+              }, [
                 (openBlock(true), createElementBlock(Fragment, null, renderList(item.children, (child, childIndex) => {
                   return openBlock(), createElementBlock("div", {
                     key: childIndex,
@@ -11099,16 +11283,16 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
                     onClick: ($event) => $options.handleContextMenuItemClick(child)
                   }, [
                     createElementVNode("span", null, toDisplayString(child.label), 1)
-                  ], 8, _hoisted_5);
+                  ], 8, _hoisted_4$1);
                 }), 128))
-              ])) : createCommentVNode("", true)
+              ], 4)) : createCommentVNode("", true)
             ], 40, _hoisted_3$1)) : (openBlock(), createElementBlock("div", {
               key: 1,
               class: "context-menu-item",
               onClick: ($event) => $options.handleContextMenuItemClick(item)
             }, [
               createElementVNode("span", null, toDisplayString(item.label), 1)
-            ], 8, _hoisted_6))
+            ], 8, _hoisted_5))
           ], 64);
         }), 128))
       ], 4)
@@ -11117,7 +11301,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-1fceddd1"]]);
+const chartContainer = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2], ["__scopeId", "data-v-2b46ef31"]]);
 const _sfc_main$1 = {
   name: "ParameterPanel",
   props: {