From 154569304c5299a2c61086edd7287f232b13510e Mon Sep 17 00:00:00 2001
From: zhongzm <zhongzm@agt.com>
Date: Thu, 28 Nov 2024 18:57:35 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=B7=BB=E5=8A=A0=E5=A4=9A=E9=80=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/perfManage/kpiOverView/index.vue | 65 +++++++++++++---------
 1 file changed, 39 insertions(+), 26 deletions(-)

diff --git a/src/views/perfManage/kpiOverView/index.vue b/src/views/perfManage/kpiOverView/index.vue
index 5998c22e..c1243128 100644
--- a/src/views/perfManage/kpiOverView/index.vue
+++ b/src/views/perfManage/kpiOverView/index.vue
@@ -352,13 +352,13 @@ const themeObserver = new MutationObserver(() => {
           selected: Object.fromEntries(
             selectedKPIs.value.map(kpiId => [
               kpiColumns.value.find(col => col.kpiId === kpiId)?.title || kpiId,
-              selectedRow.value ? kpiId === selectedRow.value : true
+              selectedRows.value.length === 0 ? true : selectedRows.value.includes(kpiId)
             ])
           )
         },
         tooltip: {
           trigger: 'axis',
-          position: function (point: number[], params: any, dom: HTMLElement, rect: any, size: { viewSize: number[], contentSize: number[] }) {
+          position: function (point: number[], size: { viewSize: number[], contentSize: number[] }) {
             const [x, y] = point;
             const [viewWidth] = size.viewSize;
             const [tooltipWidth, tooltipHeight] = size.contentSize;
@@ -442,7 +442,7 @@ const updateChart = () => {
     },
     tooltip: {
       trigger: 'axis',
-      position: function (point: number[], params: any, dom: HTMLElement, rect: any, size: { viewSize: number[], contentSize: number[] }) {
+      position: function (point: number[], size: { viewSize: number[], contentSize: number[] }) {
         const [x, y] = point;
         const [viewWidth] = size.viewSize;
         const [tooltipWidth, tooltipHeight] = size.contentSize;
@@ -489,7 +489,7 @@ const updateChart = () => {
       selected: Object.fromEntries(
         selectedKPIs.value.map(kpiId => [
           kpiColumns.value.find(col => col.kpiId === kpiId)?.title || kpiId,
-          selectedRow.value ? kpiId === selectedRow.value : true
+          selectedRows.value.length === 0 ? true : selectedRows.value.includes(kpiId)
         ])
       ),
       show: false,
@@ -786,7 +786,7 @@ const updateKpiStats = () => {
 };
 
 
-// 添加表格列定义
+// 添加表列定义
 const statsColumns: TableColumnType<KPIStats>[] = [
   {
     title: '',
@@ -845,32 +845,31 @@ const statsColumns: TableColumnType<KPIStats>[] = [
   }
 ];
 
-// 添加一个变量来跟踪当前选中的行
-const selectedRow = ref<string | null>(null);
+// 将 selectedRow 改为 selectedRows 数组
+const selectedRows = ref<string[]>([]);
 
-// 添加处理行点击的方法
+// 修改处理行点击的方法
 const handleRowClick = (record: KPIStats) => {
-  if (selectedRow.value === record.kpiId) {
-    // 如果点击的是当前选中的行，则取消选中
-    selectedRow.value = null;
-    // 更新图表，显示所有指标
-    updateChartLegendSelect();
+  const index = selectedRows.value.indexOf(record.kpiId);
+  if (index > -1) {
+    // 如果已经选中，则取消选中
+    selectedRows.value.splice(index, 1);
   } else {
-    // 选中新行
-    selectedRow.value = record.kpiId;
-    // 更新图表，只显示选中的指标
-    updateChartLegendSelect(record.kpiId);
+    // 添加新的选中项
+    selectedRows.value.push(record.kpiId);
   }
+  // 更新图表显示
+  updateChartLegendSelect();
 };
 
-// 添加更新表图例选中态的方法
-const updateChartLegendSelect = (selectedKpiId?: string) => {
+// 修改更新图表图例选中态的方法
+const updateChartLegendSelect = () => {
   if (!chart) return;
 
   const legendSelected = Object.fromEntries(
     selectedKPIs.value.map(kpiId => [
       kpiColumns.value.find(col => col.kpiId === kpiId)?.title || kpiId,
-      selectedKpiId ? kpiId === selectedKpiId : true
+      selectedRows.value.length === 0 ? true : selectedRows.value.includes(kpiId)
     ])
   );
 
@@ -880,6 +879,14 @@ const updateChartLegendSelect = (selectedKpiId?: string) => {
     }
   });
 };
+
+// 修改表格行的自定义配置
+const tableRowConfig = computed(() => {
+  return (record: KPIStats) => ({
+    onClick: () => handleRowClick(record),
+    class: selectedRows.value.includes(record.kpiId) ? 'selected-row' : ''
+  });
+});
 </script>
 <template>
   <div class="kpi-overview">
@@ -914,10 +921,7 @@ const updateChartLegendSelect = (selectedKpiId?: string) => {
           :scroll="{ y: 250 }"
           size="small"
           :loading="tableLoading"
-          :custom-row="(record) => ({
-            onClick: () => handleRowClick(record),
-            class: record.kpiId === selectedRow ? 'selected-row' : ''
-          })"
+          :custom-row="tableRowConfig"
         />
       </div>
     </div>
@@ -1025,11 +1029,20 @@ const updateChartLegendSelect = (selectedKpiId?: string) => {
 
 /* 选中行样式 */
 :deep(.selected-row) {
-  background-color: rgba(24, 144, 255, 0.1);
+  background-color: rgba(24, 144, 255, 0.1) !important;
 }
 
 [data-theme='dark'] :deep(.selected-row) {
-  background-color: rgba(24, 144, 255, 0.2);
+  background-color: rgba(24, 144, 255, 0.2) !important;
+}
+
+/* 选中行悬停效果 */
+:deep(.selected-row:hover) {
+  background-color: rgba(24, 144, 255, 0.2) !important;
+}
+
+[data-theme='dark'] :deep(.selected-row:hover) {
+  background-color: rgba(24, 144, 255, 0.3) !important;
 }
 
 /* 鼠标悬停样式 */