MTRd丢包趋势图

1、MTRAgent丢包趋势图自定义移入提示框的内容
2、MTR丢包趋势图添加点击提示框按钮，弹窗显示列表详情
3、服务器管理添加MTR探测趋势图，根据点的变化展示不同的table列表信息

src/components/echartsList/line.vue

@@ -84,6 +84,12 @@
             this.getList(this.title, this.lineData);
           });
         }
+        // 确保使用 window 对象挂载
+        window.detailsVal = this.detailsVal;
+      },
+      beforeUnmount() {
+        // 组件销毁时清理全局函数
+        delete window.detailsVal;
       },
       methods: {
         getList(title, dataXY) {
@@ -162,45 +168,52 @@
                   y = y - size.contentSize[1] - 20;
                 }
 
-                return [x + 5, y + 10];
+                return [x - 10, y + 10];
               },
-              formatter: !dataXY.tooltipFormatter ? null : function(params) {
+              formatter: !dataXY.tooltipFormatter ? null : function(params) {   // 主要应对与MTRAgent丢包趋势图模块的功能
                 // 获取当前悬停的日期
                 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(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>最新一跳平均延迟: ${content[content.length - 1].avgLatency}(ms)</div>
+                                <div>最新一跳丢包率: ${content[content.length - 1].lossPercent}(%)</div>`;
+                      // 如果不是弹窗这显示按钮，可点击查看弹窗信息
+                      if (dataXY.tooltipFormatter && !dataXY.tooltipFormatter.defaultType) {
+                        html+= `<button style="float: right;background: #409eff; border-color: #409eff;color:#fff;box-shadow:none;" onclick="window.detailsVal('${date}' ,'${paramItem.dataIndex}')">详情</button>`;
+                      }
+                    } else {
+                      let valueparams = paramItem.value;
+                      if (dataXY.tooltipFormatter && dataXY.tooltipFormatter.valueToop) {
+                        let value = dataXY.tooltipFormatter.valueToop;
+                        valueparams = paramItem.value && paramItem.value === value.num ? value.msg : paramItem.value || paramItem.value === 0 ? paramItem.value : '-';
+                        // 为每个系列创建一行
+                        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: ${paramItem.color}; margin-right: 8px;"></span>
+                                <span style="color: #57606f;">${paramItem.seriesName} </span>
+                            </div>
+                            <span style="font-weight: bold; color: #2f3542;margin-left:20px;"> ${valueparams}</span>
+                        </div>`;
+                      }
                     }
+                  } else {
+                    // 为每个系列创建一行
+                    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: ${paramItem.color}; margin-right: 8px;"></span>
+                                <span style="color: #57606f;">${paramItem.seriesName} </span>
+                            </div>
+                            <span style="font-weight: bold; color: #2f3542;margin-left:20px;"> ${paramItem.value}</span>
+                        </div>`;
                   }
                 });
-                html+=`</table>`;
                 return html;
               }
             },
@@ -301,13 +314,18 @@
               },1000);
             }
           });
-          // 2. 关键：拦截默认的鼠标移出事件，不做任何操作（即不取消高亮）
+          // ​当鼠标在图形元素内部移动时持续触发
+          lineDataListIntance.on('mousemove', (params) => {
+            this.$emit('showChartTabList', {value: params.name, tableVal: params.data});
+          });
+          // 2. 关键：拦截默认的鼠标移入事件，不做任何操作（即不取消高亮）
           lineDataListIntance.on('mouseover', (params) => {
             // 这个函数体为空，或者只包含一些不涉及downplay的逻辑
             // 这样就阻止了鼠标移出时高亮自动消失
           });
         // 2. 关键：拦截默认的鼠标移出事件，不做任何操作（即不取消高亮）
           lineDataListIntance.on('mouseout', (params) => {
+            this.$emit('showChartTabList', {});
             // 这个函数体为空，或者只包含一些不涉及downplay的逻辑
             // 这样就阻止了鼠标移出时高亮自动消失
           });
@@ -388,6 +406,10 @@
           }
           // let lineDataList = days && days.length > 0 ? days: this.lineData.lineXData;
           // this.getList(this.title, {data: this.lineData.data, lineXData: lineDataList});
+        },
+        // tooltip中的按钮点击事件
+        detailsVal(xTime, content) {
+          this.$emit('dialogChartTabList', {value: xTime, tableVal: this.lineData.dataList[0].data[content]});
         }
       }
     }