From 31bca2b98fb68c1bc343e442c3e90f10aaea4999 Mon Sep 17 00:00:00 2001
From: zhongzm <zhongzm@agt.com>
Date: Fri, 15 Nov 2024 14:32:53 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E4=BF=AE=E5=A4=8D=E5=9B=BE=E8=A1=A8tooltip?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E8=A2=AB=E9=81=AE=E7=9B=96=E7=9A=84=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/perfManage/kpiKeyTarget/index.vue | 25 ++++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/views/perfManage/kpiKeyTarget/index.vue b/src/views/perfManage/kpiKeyTarget/index.vue
index 890b786b..825f22f7 100644
--- a/src/views/perfManage/kpiKeyTarget/index.vue
+++ b/src/views/perfManage/kpiKeyTarget/index.vue
@@ -32,7 +32,7 @@ const handleRealTimeSwitch = (checked: any) => {
 };
 
 // 定义所有网元类型
-const ALL_NE_TYPES = ['ims', 'amf', 'udm', 'smf', 'pcf', 'upf', 'mme', 'mocngw', 'smsc', 'cbc', 'ausf'] as const;
+const ALL_NE_TYPES = ['ims', 'amf', 'udm', 'upf','smf', 'pcf', 'mme', 'mocngw', 'smsc', 'cbc', 'ausf'] as const;
 type AllChartType = (typeof ALL_NE_TYPES)[number] & string;
 
 // 在 ALL_NE_TYPES 定义之后添加 小写转大写
@@ -248,8 +248,26 @@ const initChart = (type: AllChartType) => {
         tooltip: {
           trigger: 'axis',
           position: function(pt: any) {
-            return [pt[0], '10%'];
+            const [x, y] = pt;
+            const chartDom = state.chartDom.value;
+            if (!chartDom) return [x, y];
+            const rect = chartDom.getBoundingClientRect();
+            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+            const viewportHeight = window.innerHeight;
+            const relativeY = rect.top + y - scrollTop;
+            if (relativeY + 100 > viewportHeight) {
+              return [x, '10%'];
+            }
+            return [x, y + 10];
           },
+          axisPointer: {
+            type: 'line',
+            z: 0
+          },
+          className: `chart-tooltip-${type}`,
+          z: 1000,
+          extraCssText: 'z-index: 1000; pointer-events: none;',
+          confine: true,
         },
         xAxis: {
           type: 'category',
@@ -822,13 +840,14 @@ const handleTabChange = async (activeKey: string, type: AllChartType) => {
 .chart-card {
   width: 100%;
   height: 500px;
+  position:relative;
 
   :deep(.ant-card-body) {
     height: calc(100% - 57px); // 减去卡片头部高度
     padding: 16px !important;
     display: flex;
     flex-direction: column;
-    overflow: hidden;
+    overflow: visible;
   }
 }