|
@@ -21,15 +21,15 @@
|
|
|
<div class="legend">
|
|
<div class="legend">
|
|
|
<div class="legend_item" :class="{ 'selected': selectedLegend.weak }">
|
|
<div class="legend_item" :class="{ 'selected': selectedLegend.weak }">
|
|
|
<span class="legend_dot weak"></span>
|
|
<span class="legend_dot weak"></span>
|
|
|
- <span class="legend_text">${{ '薄弱(0%≤得分率<60%)' }}</span>
|
|
|
|
|
|
|
+ <span class="legend_text">{{ '薄弱(0%≤得分率<60%)' }}</span>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="legend_item" :class="{ 'selected': selectedLegend.good }">
|
|
<div class="legend_item" :class="{ 'selected': selectedLegend.good }">
|
|
|
<span class="legend_dot good"></span>
|
|
<span class="legend_dot good"></span>
|
|
|
- <span class="legend_text">${{ '良好(60%≤得分率<85%)' }}</span>
|
|
|
|
|
|
|
+ <span class="legend_text">{{ '良好(60%≤得分率<85%)' }}</span>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="legend_item" :class="{ 'selected': selectedLegend.excellent }">
|
|
<div class="legend_item" :class="{ 'selected': selectedLegend.excellent }">
|
|
|
<span class="legend_dot excellent"></span>
|
|
<span class="legend_dot excellent"></span>
|
|
|
- <span class="legend_text">${{ '优秀(85%≤得分率)' }}</span>
|
|
|
|
|
|
|
+ <span class="legend_text">{{ '优秀(85%≤得分率)' }}</span>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
<!-- 视图切换按钮 - 移到knowledge_graph容器下 -->
|
|
<!-- 视图切换按钮 - 移到knowledge_graph容器下 -->
|
|
@@ -61,15 +61,15 @@
|
|
|
<!-- @click="toggleLegend('weak')" @click="toggleLegend('good')" @click="toggleLegend('excellent')" -->
|
|
<!-- @click="toggleLegend('weak')" @click="toggleLegend('good')" @click="toggleLegend('excellent')" -->
|
|
|
<div class="legend_item" :class="{ 'selected': selectedLegend.weak }">
|
|
<div class="legend_item" :class="{ 'selected': selectedLegend.weak }">
|
|
|
<span class="legend_dot weak"></span>
|
|
<span class="legend_dot weak"></span>
|
|
|
- <span class="legend_text">${{ '薄弱(0%≤得分率<60%)' }}</span>
|
|
|
|
|
|
|
+ <span class="legend_text">{{ '薄弱(0%≤得分率<60%)' }}</span>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="legend_item" :class="{ 'selected': selectedLegend.good }">
|
|
<div class="legend_item" :class="{ 'selected': selectedLegend.good }">
|
|
|
<span class="legend_dot good"></span>
|
|
<span class="legend_dot good"></span>
|
|
|
- <span class="legend_text">${{ '良好(60%≤得分率<85%)' }}</span>
|
|
|
|
|
|
|
+ <span class="legend_text">{{ '良好(60%≤得分率<85%)' }}</span>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="legend_item" :class="{ 'selected': selectedLegend.excellent }">
|
|
<div class="legend_item" :class="{ 'selected': selectedLegend.excellent }">
|
|
|
<span class="legend_dot excellent"></span>
|
|
<span class="legend_dot excellent"></span>
|
|
|
- <span class="legend_text">${{ '优秀(85%≤得分率)' }}</span>
|
|
|
|
|
|
|
+ <span class="legend_text">{{ '优秀(85%≤得分率)' }}</span>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
<!-- 视图切换按钮 -->
|
|
<!-- 视图切换按钮 -->
|
|
@@ -114,23 +114,35 @@
|
|
|
<!-- 正常列表数据 -->
|
|
<!-- 正常列表数据 -->
|
|
|
<div class="list_item" v-for="(item, index) in knowledgeItems" :key="index"
|
|
<div class="list_item" v-for="(item, index) in knowledgeItems" :key="index"
|
|
|
@click="handleItemClick(item, index)" :class="{ active: selectedIndex === index }" v-else>
|
|
@click="handleItemClick(item, index)" :class="{ active: selectedIndex === index }" v-else>
|
|
|
|
|
+
|
|
|
<div class="item_header">
|
|
<div class="item_header">
|
|
|
- <span class="item_dot"></span>
|
|
|
|
|
|
|
+ <span class="item_dot" :style="{ backgroundColor: getDotColor(item) }"></span>
|
|
|
<el-tooltip :content="item.knowledgeName" placement="top" effect="light"
|
|
<el-tooltip :content="item.knowledgeName" placement="top" effect="light"
|
|
|
:disabled="!item.knowledgeName || item.knowledgeName.length < 15">
|
|
:disabled="!item.knowledgeName || item.knowledgeName.length < 15">
|
|
|
<span class="item_title">{{ item.knowledgeName }}</span>
|
|
<span class="item_title">{{ item.knowledgeName }}</span>
|
|
|
</el-tooltip>
|
|
</el-tooltip>
|
|
|
<span class="item_tag" v-if="item.scoreRateDiff">{{ item.scoreRateDiff }} %</span>
|
|
<span class="item_tag" v-if="item.scoreRateDiff">{{ item.scoreRateDiff }} %</span>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+
|
|
|
<div class="item_info">
|
|
<div class="item_info">
|
|
|
<!-- 班级/学生得分率 -->
|
|
<!-- 班级/学生得分率 -->
|
|
|
- <span class="item_score">
|
|
|
|
|
|
|
+ <!-- <span class="item_score">
|
|
|
<span class="score_label">得分率:</span>
|
|
<span class="score_label">得分率:</span>
|
|
|
<span class="score_first" v-if="item.classScoreRate">{{ item.classScoreRate }}%</span>
|
|
<span class="score_first" v-if="item.classScoreRate">{{ item.classScoreRate }}%</span>
|
|
|
<span class="score_separator" v-if="item.classScoreRate">|</span>
|
|
<span class="score_separator" v-if="item.classScoreRate">|</span>
|
|
|
<span v-if="item.gradeScoreRate"
|
|
<span v-if="item.gradeScoreRate"
|
|
|
:class="item.classScoreRate !== null ? 'score_second' : 'score_first'">{{ item.gradeScoreRate }}%</span>
|
|
:class="item.classScoreRate !== null ? 'score_second' : 'score_first'">{{ item.gradeScoreRate }}%</span>
|
|
|
|
|
+ </span> -->
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 班级/学生得分率 -->
|
|
|
|
|
+ <span class="item_score">
|
|
|
|
|
+ <span class="score_label">得分率:</span>
|
|
|
|
|
+ <span :style="{color: getDotColor(item)}" v-if="item.personalScoreRate">{{ item.personalScoreRate }}%</span>
|
|
|
|
|
+ <span class="score_separator" v-if="item.personalScoreRate">|</span>
|
|
|
|
|
+ <span v-if="item.personalScoreRate" class="score_second">{{ item.classScoreRate }}%</span>
|
|
|
|
|
+ <span v-if="!item.personalScoreRate" :style="{color: getDotColor(item)}">{{ item.classScoreRate }}%</span>
|
|
|
</span>
|
|
</span>
|
|
|
|
|
+
|
|
|
<span class="item_exam_count">考试数: <span class="exam_count">{{ item.examNum || 0 }}</span></span>
|
|
<span class="item_exam_count">考试数: <span class="exam_count">{{ item.examNum || 0 }}</span></span>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
@@ -349,7 +361,7 @@ export default {
|
|
|
// 这是为了避免在视图切换时重复调用接口
|
|
// 这是为了避免在视图切换时重复调用接口
|
|
|
if (this._isMounted && newTab !== oldTab) {
|
|
if (this._isMounted && newTab !== oldTab) {
|
|
|
// 向父组件发送tab切换事件
|
|
// 向父组件发送tab切换事件
|
|
|
- this.$emit('active-tab-change', newTab);
|
|
|
|
|
|
|
+ this.$emit('activeTabChange', newTab);
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
// 监听数据变化,重新设置默认选中项
|
|
// 监听数据变化,重新设置默认选中项
|
|
@@ -699,6 +711,20 @@ export default {
|
|
|
handleCellClick({ row }) {
|
|
handleCellClick({ row }) {
|
|
|
// 调用行点击事件处理逻辑
|
|
// 调用行点击事件处理逻辑
|
|
|
this.handleRowClick(row);
|
|
this.handleRowClick(row);
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ // 根据知识点得分率获取对应的点颜色
|
|
|
|
|
+ getDotColor(item) {
|
|
|
|
|
+ // 优先使用classScoreRate,若不存在或为空则使用gradeScoreRate
|
|
|
|
|
+ const scoreRate = item.classScoreRate || item.gradeScoreRate;
|
|
|
|
|
+ const rate = parseFloat(scoreRate);
|
|
|
|
|
+ if (rate >= 85) {
|
|
|
|
|
+ return '#3BA272'; // 优秀 - 绿色
|
|
|
|
|
+ } else if (rate > 60) {
|
|
|
|
|
+ return '#FAC858'; // 良好 - 黄色
|
|
|
|
|
+ } else {
|
|
|
|
|
+ return '#EE6666'; // 薄弱 - 红色
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
};
|
|
};
|
|
@@ -1099,7 +1125,7 @@ export default {
|
|
|
top: 50%;
|
|
top: 50%;
|
|
|
left: 50%;
|
|
left: 50%;
|
|
|
transform: translate(-50%, -50%);
|
|
transform: translate(-50%, -50%);
|
|
|
- font-size: 16px;
|
|
|
|
|
|
|
+ font-size: 14px;
|
|
|
color: #909399;
|
|
color: #909399;
|
|
|
text-align: center;
|
|
text-align: center;
|
|
|
width: 100%;
|
|
width: 100%;
|
|
@@ -1318,10 +1344,13 @@ export default {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.rate_info {
|
|
.rate_info {
|
|
|
- display: flex;
|
|
|
|
|
|
|
+ // display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
gap: 8px;
|
|
gap: 8px;
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
|
|
|
+ width: 80px;
|
|
|
|
|
+ margin: 0 auto;
|
|
|
|
|
+ position: relative;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.rate_dot {
|
|
.rate_dot {
|
|
@@ -1329,7 +1358,9 @@ export default {
|
|
|
width: 6px;
|
|
width: 6px;
|
|
|
height: 6px;
|
|
height: 6px;
|
|
|
border-radius: 50%;
|
|
border-radius: 50%;
|
|
|
-
|
|
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 8px;
|
|
|
|
|
+ left: 2px;
|
|
|
&.rate_excellent {
|
|
&.rate_excellent {
|
|
|
background-color: #3BA272;
|
|
background-color: #3BA272;
|
|
|
}
|
|
}
|
|
@@ -1344,12 +1375,12 @@ export default {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.rate_value {
|
|
.rate_value {
|
|
|
- font-size: 16px;
|
|
|
|
|
|
|
+ font-size: 14px;
|
|
|
color: #606266;
|
|
color: #606266;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.diff_value {
|
|
.diff_value {
|
|
|
- font-size: 16px;
|
|
|
|
|
|
|
+ font-size: 14px;
|
|
|
color: #606266;
|
|
color: #606266;
|
|
|
|
|
|
|
|
&.diff_negative {
|
|
&.diff_negative {
|