+
评估摘要:{{ lab.abstracts }}
+
+ {{ currentTooltip.content }}
+
+
@@ -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;
}
\ No newline at end of file