修改图表跨月时间显示异常问题、MTR丢包率趋势图移入图表展示列表功能

1、修改图表跨月时间显示异常问题
2、MTR丢包率趋势图移入图表展示列表功能
3、告警日志详情跳转修改

src/components/echartsList/line.vue

@@ -137,34 +137,70 @@
             legend: legendData,
             tooltip: {
               trigger: 'axis',
+              confine: true, // 将tooltip限制在图表的区域内，防止超出屏幕[1,7](@ref)
+              enterable: true, // 关键配置：允许鼠标移入tooltip内部[1,2,7](@ref)
+              hideDelay: 300, // 建议设置隐藏延迟，方便鼠标有足够时间移动到tooltip上[1](@ref)
               axisPointer: {
                 type: 'cross',
                 label: {
                   backgroundColor: '#6a7985'
                 }
               },
+              // 自定义位置 - 跟随鼠标
+              position: !dataXY.tooltipFormatter ? null : function (point, params, dom, rect, size) {
+                // 确保提示框在视图范围内
+                let x = point[0];
+                let y = point[1];
+
+                // 如果太靠右，向左偏移
+                if (x > size.viewSize[0] - size.contentSize[0]) {
+                  x = x - size.contentSize[0] - 20;
+                }
+
+                // 如果太靠下，向上偏移
+                if (y > size.viewSize[1] - size.contentSize[1]) {
+                  y = y - size.contentSize[1] - 20;
+                }
+
+                return [x + 5, y + 10];
+              },
               formatter: !dataXY.tooltipFormatter ? null : function(params) {
                 // 获取当前悬停的日期
                 const date = params[0].name;
                 // 构建提示框HTML内容
                 let html = `<div>${date}</div>`;
+                html+=`<table style="border-collapse: collapse;text-align:center;overflow: auto;height: 180px;display: block;">
+                          <tr style="height: 20px">
+                            <th class="tab_border">路径</th>
+                            <th class="tab_border">平均延迟(ms)</th>
+                            <th class="tab_border">丢包率%</th>
+                            <th class="tab_border">地址</th>
+                            <th class="tab_border">国家</th>
+                            <th class="tab_border">运营商</th>
+                            <th class="tab_border">省</th>
+                            <th class="tab_border">市</th>
+                          </tr>`;
                 // 遍历所有系列
-                params.forEach(param => {
-                  let valueparams = param.value;
-                  if (dataXY.tooltipFormatter && dataXY.tooltipFormatter.valueToop) {
-                    let value = dataXY.tooltipFormatter.valueToop;
-                    valueparams = param.value && param.value === value.num ? value.msg : param.value || param.value === 0 ? param.value : '-';
+                params.forEach(paramItem => {
+                  if (dataXY.tooltipFormatter && dataXY.tooltipFormatter.customList) {
+                    if (paramItem.data.content) {
+                      let content = JSON.parse(paramItem.data.content);
+                      content.forEach((contItem, index) => {
+                        html+= `<tr>
+                                    <td class="tab_border">${contItem.hopNumber || ''}</td>
+                                    <td class="tab_border">${contItem.avgLatency || ''}</td>
+                                    <td class="tab_border">${contItem.lossPercent || ''}</td>
+                                    <td class="tab_border">${contItem.ipAddress || ''}</td>
+                                    <td class="tab_border">${contItem.country || ''}</td>
+                                    <td class="tab_border ellipsis" title="${contItem.isp}">${contItem.isp || ''}</td>
+                                    <td class="tab_border">${contItem.province || ''}</td>
+                                    <td class="tab_border">${contItem.city || ''}</td>
+                                </tr>`;
+                      });
+                    }
                   }
-                  // 为每个系列创建一行
-                  html += `
-                        <div style="display: flex; justify-content: space-between; align-items: center; margin: 4px 0;">
-                            <div style="display: flex; align-items: center;">
-                                <span style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: ${param.color}; margin-right: 8px;"></span>
-                                <span style="color: #57606f;">${param.seriesName} </span>
-                            </div>
-                            <span style="font-weight: bold; color: #2f3542;margin-left:20px;"> ${valueparams}</span>
-                        </div>`;
                 });
+                html+=`</table>`;
                 return html;
               }
             },
@@ -379,4 +415,14 @@
     padding: 2px 5px;
     font-size: 12px;
   }
+  ::v-deep .tab_border {
+    padding: 2px 10px;
+    border-bottom: 1px solid #ddd;
+  }
+  ::v-deep .ellipsis {
+    max-width: 300px;
+    white-space: nowrap; /* 防止文本换行 */
+    overflow: hidden; /* 隐藏溢出的内容 */
+    text-overflow: ellipsis; /* 显示省略号来代表被裁剪的文本 */
+  }
 </style>