|
|
@@ -36,7 +36,7 @@
|
|
|
</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div v-if="weakArea.length === 0" class="empty_tip">暂无数据</div>
|
|
|
+ <div v-if="weakArea.length === 0" class="empty_tip no_content_data"><span>暂无数据</span></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -75,7 +75,7 @@
|
|
|
</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div v-if="goodArea.length === 0" class="empty_tip">暂无数据</div>
|
|
|
+ <div v-if="goodArea.length === 0" class="empty_tip no_content_data"><span>暂无数据</span></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -114,20 +114,16 @@
|
|
|
</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div v-if="excellentArea.length === 0" class="empty_tip">暂无数据</div>
|
|
|
+ <div v-if="excellentArea.length === 0" class="empty_tip no_content_data"><span>暂无数据</span></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 冲刺进阶区(暂时隐藏) -->
|
|
|
- <div class="region_section advanced" v-if="false">
|
|
|
+ <div class="region_section advanced" >
|
|
|
<div class="region_header">
|
|
|
<div class="region_header_main">
|
|
|
<span class="region_icon">
|
|
|
- <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 32px; height: 32px; display: block;">
|
|
|
- <path
|
|
|
- d="M14.5 2.5c3 0 5.5 2.5 5.5 5.5 0 1.5-.5 3-1.5 4.5l1 1-2 2-1.5-1.5c-1.5 1-3 1.5-4.5 1.5L10 20H6v-4l4.5-2.5c0-1.5.5-3 1.5-4.5L10.5 7l2-2 1 1c1.5-1 3-1.5 4.5-1.5z"
|
|
|
- fill="currentColor" />
|
|
|
- </svg>
|
|
|
+ <img :src="require('@/assets/knowledgeGraph/jinjie.png')" alt="冲刺进阶区" style="width: 32px; height: auto; display: block;" />
|
|
|
</span>
|
|
|
<span class="region_title">冲刺进阶区</span>
|
|
|
</div>
|
|
|
@@ -157,6 +153,7 @@
|
|
|
</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div v-if="advancedArea.length === 0" class="empty_tip no_content_data"><span>暂无数据</span></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -189,6 +186,12 @@ export default {
|
|
|
selectedKnowledgeId: {
|
|
|
type: [String, Number],
|
|
|
default: ''
|
|
|
+ },
|
|
|
+ // 图例可见状态联动:薄弱(1)/良好(2)/优秀(3) 的可见性
|
|
|
+ // 当某类图例被隐藏时,对应区域返回空数组,显示"暂无数据"
|
|
|
+ legendVisibility: {
|
|
|
+ type: Object,
|
|
|
+ default: () => ({ 1: true, 2: true, 3: true })
|
|
|
}
|
|
|
},
|
|
|
data() {
|
|
|
@@ -237,16 +240,22 @@ export default {
|
|
|
},
|
|
|
computed: {
|
|
|
// 薄弱补强区:直接用接口返回的 conquerZone
|
|
|
+ // 图例联动:当薄弱图例被隐藏时(legendVisibility[1]=false),返回空数组 → 显示"暂无数据"
|
|
|
weakArea() {
|
|
|
- return Array.isArray(this.partitionData?.conquerZone) ? this.partitionData.conquerZone : [];
|
|
|
+ const base = Array.isArray(this.partitionData?.conquerZone) ? this.partitionData.conquerZone : [];
|
|
|
+ return this.legendVisibility && this.legendVisibility[1] === false ? [] : base;
|
|
|
},
|
|
|
// 能力提升区:直接用接口返回的 improveZone
|
|
|
+ // 图例联动:当良好图例被隐藏时(legendVisibility[2]=false),返回空数组 → 显示"暂无数据"
|
|
|
goodArea() {
|
|
|
- return Array.isArray(this.partitionData?.improveZone) ? this.partitionData.improveZone : [];
|
|
|
+ const base = Array.isArray(this.partitionData?.improveZone) ? this.partitionData.improveZone : [];
|
|
|
+ return this.legendVisibility && this.legendVisibility[2] === false ? [] : base;
|
|
|
},
|
|
|
// 扎实巩固区:直接用接口返回的 consolidateZone
|
|
|
+ // 图例联动:当优秀图例被隐藏时(legendVisibility[3]=false),返回空数组 → 显示"暂无数据"
|
|
|
excellentArea() {
|
|
|
- return Array.isArray(this.partitionData?.consolidateZone) ? this.partitionData.consolidateZone : [];
|
|
|
+ const base = Array.isArray(this.partitionData?.consolidateZone) ? this.partitionData.consolidateZone : [];
|
|
|
+ return this.legendVisibility && this.legendVisibility[3] === false ? [] : base;
|
|
|
},
|
|
|
// 冲刺进阶区:暂时隐藏,预留空数组
|
|
|
advancedArea() {
|
|
|
@@ -420,19 +429,21 @@ export default {
|
|
|
width: 100%;
|
|
|
box-sizing: border-box;
|
|
|
align-items: stretch;
|
|
|
+ flex-wrap: wrap;
|
|
|
}
|
|
|
|
|
|
/* 单个区域卡片(通用样式:圆角作为通用属性) */
|
|
|
.region_section {
|
|
|
- flex: 1;
|
|
|
+ flex: 1 1 0;
|
|
|
min-width: 0;
|
|
|
border-radius: 10px 10px 10px 10px;
|
|
|
padding: 16px 16px 12px;
|
|
|
background: #FFFFFF;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- max-height: 560px;
|
|
|
+ height: 560px;
|
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
|
|
|
+ overflow: hidden;
|
|
|
|
|
|
&.weak {
|
|
|
border: 1px solid #F56C6C;
|
|
|
@@ -468,6 +479,7 @@ export default {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 10px;
|
|
|
+ min-width: 0;
|
|
|
}
|
|
|
|
|
|
.region_icon {
|
|
|
@@ -495,6 +507,9 @@ export default {
|
|
|
color: #333333;
|
|
|
line-height: 1;
|
|
|
white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ min-width: 0;
|
|
|
}
|
|
|
|
|
|
.region_desc {
|
|
|
@@ -512,6 +527,7 @@ export default {
|
|
|
overflow-y: auto;
|
|
|
flex: 1;
|
|
|
min-height: 0;
|
|
|
+ position: relative;
|
|
|
|
|
|
/* Webkit 系列(Chrome/Safari/新 Edge):彻底隐藏滚动条 */
|
|
|
&::-webkit-scrollbar {
|
|
|
@@ -535,10 +551,17 @@ export default {
|
|
|
}
|
|
|
|
|
|
.empty_tip {
|
|
|
- padding: 20px 0;
|
|
|
- text-align: center;
|
|
|
- font-size: 12px;
|
|
|
- color: #BBBBBB;
|
|
|
+ height: 240px;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ width: 100%;
|
|
|
+ border-radius: 8px;
|
|
|
+
|
|
|
+ span {
|
|
|
+ margin-top: 23%;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
/* 每行知识点条目 */
|
|
|
@@ -700,4 +723,31 @@ export default {
|
|
|
background: #F5F7FA !important;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+/* 响应式:小屏适配 */
|
|
|
+@media (max-width: 1366px) {
|
|
|
+ .region_container {
|
|
|
+ gap: 10px;
|
|
|
+ padding: 10px;
|
|
|
+ }
|
|
|
+ .region_section {
|
|
|
+ height: 460px;
|
|
|
+ padding: 12px 12px 8px;
|
|
|
+ }
|
|
|
+ .region_header {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ gap: 4px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 1200px) {
|
|
|
+ .region_section {
|
|
|
+ height: auto;
|
|
|
+ min-height: 320px;
|
|
|
+ }
|
|
|
+ .knowledge_rows {
|
|
|
+ flex: 1;
|
|
|
+ min-height: 200px;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|