diff --git a/src/views/PhysicalTestReport/index.vue b/src/views/PhysicalTestReport/index.vue
index 5c4afdb..bd5a0aa 100644
--- a/src/views/PhysicalTestReport/index.vue
+++ b/src/views/PhysicalTestReport/index.vue
@@ -74,7 +74,21 @@
-
+
+
+
![]()
@@ -85,12 +99,29 @@
+
+
-
+
+
+
+
+
+
-
+
+
+
+
@@ -180,6 +281,11 @@ import eventBus from '@/eventBus.js';
import { ElMessage } from 'element-plus';
import commonDialog from '@/components/commonDialog/index.vue';
const route = useRoute();
+const loading = ref({
+ stats: true, // 统计卡片 + 年级平均成绩图 + 班级达标率图 + 表格
+ level: true, // 各体测项目等级占比图
+ trend: true, // 成绩趋势图
+})
const data = ref({
dialogData: {
dialogVisible: false,
@@ -406,10 +512,12 @@ async function initCategoryRankRatio(val, val1) {
for (let i in res.data) {
data.value.levelChartData.seriesData.push({ value: (res.data[i] * 100).toFixed(0), name: i })
}
+ loading.value.level = false
await nextTick()
levelChart(data.value.levelChartData)
}
} catch (error) {
+ loading.value.level = false
console.error('Error occurred while calling API:', error);
}
}
@@ -420,10 +528,12 @@ async function initResultTrends(val, val1, val2) {
if (res.code == 200) {
data.value.chartsData3.ChartCont.xData = res.data.axisX
data.value.chartsData3.ChartCont.seriesData = res.data.axisY
+ loading.value.trend = false
await nextTick()
trendEcharts(data.value.chartsData3)
}
} catch (error) {
+ loading.value.trend = false
console.error('Error occurred while calling API:', error);
}
}
@@ -459,12 +569,14 @@ async function initGradeWholeDataStats(val) {
i.passRate = (i.passRate * 100).toFixed(0) + '%'
})
data.value.tableNeed.refresh = true
+ loading.value.stats = false
await nextTick()
averageBar(data.value.averageBarData)
classBar(data.value.classBarData)
}
} catch (error) {
+ loading.value.stats = false
console.error('Error occurred while calling API:', error);
}
}
@@ -1673,5 +1785,104 @@ function toViewStudentDetail(val) {
border-bottom: 1px solid #F5F5F5;
}
}
+
+ // ──── 骨架屏公共样式 ────
+ .skeleton-card {
+ display: flex;
+ align-items: center;
+ }
+
+ .chart-skeleton {
+ width: 100%;
+ height: 260px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0 24px;
+ box-sizing: border-box;
+ }
+
+ .skeleton-chart-wrap {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ padding-bottom: 12px;
+ }
+
+ .skeleton-bars {
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-around;
+ height: 200px;
+ padding: 0 12px;
+
+ .skeleton-bar-group {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 0;
+ }
+ }
+
+ .skeleton-pie-wrap {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 32px;
+ height: 100%;
+ padding-top: 20px;
+
+ .skeleton-pie-legend {
+ display: flex;
+ flex-direction: column;
+ gap: 14px;
+
+ .skeleton-legend-item {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ }
+ }
+ }
+
+ .skeleton-line-wrap {
+ justify-content: center;
+ padding: 24px 12px 12px;
+
+ .skeleton-line-dots {
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-around;
+ padding: 0 12px;
+
+ .skeleton-line-dot {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 4px;
+ }
+ }
+ }
+
+ .skeleton-table {
+ padding: 0 20px 20px;
+
+ .skeleton-table-header {
+ display: flex;
+ align-items: center;
+ padding: 14px 0;
+ border-bottom: 1px solid #F5F5F5;
+ margin-bottom: 4px;
+ }
+
+ .skeleton-table-row {
+ display: flex;
+ align-items: center;
+ padding: 16px 0;
+ border-bottom: 1px solid #FAFAFA;
+ }
+ }
}
\ No newline at end of file