合并提交

src/components/Dashboard.vue

@@ -872,7 +872,7 @@ const initCharts = () => {
     tooltip: { trigger: 'axis' },
     grid: {
       left: '3%',
-      right: '4%',
+      right: '4%',   
       top: '10%',
       bottom: '15%', // 为标题留出空间
       containLabel: true
@@ -892,7 +892,7 @@ const initCharts = () => {
         show: true,
         lineStyle: {
           type: 'dashed',
-          color: 'rgba(255, 255, 255, 0.2)'
+          color: 'rgba(255, 255, 255, 0.2)' 
         },
         interval: 1
       }

src/components/LabDetail.vue

@@ -113,7 +113,14 @@
               <div :id="`lab-chart-${lab.id}`" class="radar-chart"></div> <!-- 根据lab.id确保唯一性 -->
             </div>
 
-            <div class="evaluation-info">评估摘要：{{ lab.abstracts }}</div>
+            <div class="evaluation-info-wrapper" 
+                 @mouseenter="showTooltip(lab.id, lab.abstracts)" 
+                 @mouseleave="hideTooltip">
+              <div class="evaluation-info">评估摘要：{{ lab.abstracts }}</div>
+              <div v-if="currentTooltip.labId === lab.id && currentTooltip.visible" class="tooltip">
+                {{ currentTooltip.content }}
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -213,6 +220,26 @@ const scoreComparisonDialogVisible = ref(false); // 控制得分比较弹窗显
 // 存储 Echarts 实例，用于销毁
 const chartInstances = new Map();
 
+// Tooltip 相关
+const currentTooltip = ref({
+  labId: null,
+  content: '',
+  visible: false
+});
+
+const showTooltip = (labId, content) => {
+  currentTooltip.value = {
+    labId: labId,
+    content: content,
+    visible: true
+  };
+};
+
+const hideTooltip = () => {
+  currentTooltip.value.visible = false;
+};
+
+
 // 打开添加评估抽屉
 const openAddEvaluationDrawer = () => {
   isEditMode.value = false;
@@ -488,7 +515,7 @@ const scoreComparisonTableData = computed(() => {
   
   return selectedLabs.value.map(lab => {
     const row = {
-      category: lab.basicInformation.name2 // 纵向表头是中心名称
+      category: `${lab.basicInformation.name0}-${lab.basicInformation.name2}` // 纵向表头是年份-中心名称
     };
     // 将 radarData 映射到 row 的动态属性上
     lab.result.forEach((score, index) => {
@@ -907,7 +934,7 @@ watch(filteredLabs, () => {
   min-height: 350px;
   cursor: pointer;
   transition: transform 0.2s, box-shadow 0.2s;
-  position: relative;
+  position: relative; /* 添加此行，以便tooltip定位 */
 }
 
 .lab-card:hover {
@@ -1129,7 +1156,53 @@ watch(filteredLabs, () => {
 .searchbox{
   display: flex;
 }
-.evaluation-info{
+
-  padding: 20px 15px;
+/* 评估摘要的容器，用于定位tooltip */
+.evaluation-info-wrapper {
+  position: relative;
+  padding: 20px 15px; /* 保持原有的padding */
+}
+
+/* 评估摘要文本样式 */
+.evaluation-info {
+  white-space: normal; /* 允许文本正常换行 */
+  overflow: hidden; /* 隐藏超出容器的内容 */
+  text-overflow: ellipsis; /* 显示省略号 */
+  display: -webkit-box;
+  -webkit-line-clamp: 2; /* 限制文本为2行 */
+  -webkit-box-orient: vertical;
+  font-size: 12px;
+}
+
+/* 鼠标悬停时显示的气泡样式 */
+.tooltip {
+  position: absolute;
+  bottom: 100%; /* 定位在文本上方 */
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: rgba(0, 0, 0, 0.85);
+  color: #fff;
+  padding: 8px 12px;
+  border-radius: 4px;
+  white-space: pre-wrap; /* 保持文本换行 */
+  z-index: 100;
+  max-width: 90%; /* 限制最大宽度 */
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+  font-size: 14px;
+  line-height: 1.5;
+  pointer-events: none; /* 确保不影响鼠标事件 */
+  margin-bottom: 10px; /* 与文本的距离 */
+}
+
+/* 气泡的小箭头 */
+.tooltip::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: rgba(0, 0, 0, 0.85) transparent transparent transparent;
 }
 </style>