tianyan/tra-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 学习分析添加loading状态

Browse Source
This commit is contained in:
杨航
2025-12-03 20:08:02 +08:00
parent 8720a742a4
commit 7e3bf495bf
2 changed files with 52 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env.development.yh
+1
View File
@@ -11,4 +11,5 @@ VITE_APP_BASE_H5_API_Url = 'http://25.18.122.91:9786'
# VITE_APP_BASE_H5_API_Url_TRAPRACTICE = 'http://25.64.32.156:9603' # VITE_APP_BASE_H5_API_Url_TRAPRACTICE = 'http://25.64.32.156:9603'
# VITE_APP_BASE_H5_API_Url_TRAAPP = 'http://25.64.32.154:9601' # VITE_APP_BASE_H5_API_Url_TRAAPP = 'http://25.64.32.154:9601'
# VITE_APP_BASE_H5_API_Url_TRAAPP = 'http://25.64.32.158:9601' # VITE_APP_BASE_H5_API_Url_TRAAPP = 'http://25.64.32.158:9601'
# VITE_APP_BASE_H5_API_Url_TRASTUDY = 'http://25.64.32.154:9602'
src/pages/analytics/study.vue
+51 -31
View File
@@ -6,7 +6,10 @@
<view class="back-icon" @click="common.navigateBack()"></view> <view class="back-icon" @click="common.navigateBack()"></view>
</view> </view>
</view> </view>
<view class="analytics-box"> <view class="analytics-box" v-if="loading">
<CommonLoading color="#06f" class="loading-box" />
</view>
<view class="analytics-box" v-if="!loading">
<view class="tabs-box"> <view class="tabs-box">
<uv-tabs :list="tabList" @click="changeTab" :scrollable="true" active-style="font-weight:bold; color:#000;" <uv-tabs :list="tabList" @click="changeTab" :scrollable="true" active-style="font-weight:bold; color:#000;"
:current="currentTab" class="font_pf my_tabs" :current="currentTab" class="font_pf my_tabs"
@@ -52,7 +55,7 @@
完成任务数 完成任务数
</view> </view>
<view class="analytics-item-value"> <view class="analytics-item-value">
<text class="analytics-item-value-v">{{statisticsObj.completeTaskCnt }}</text> <text class="analytics-item-value-v">{{statisticsObj.completeTaskCnt }}</text>
<text class="analytics-item-value-unit"></text> <text class="analytics-item-value-unit"></text>
</view> </view>
</view> </view>
@@ -61,7 +64,7 @@
完成考试数 完成考试数
</view> </view>
<view class="analytics-item-value"> <view class="analytics-item-value">
<text class="analytics-item-value-v">{{statisticsObj.completedExamCnt }}</text> <text class="analytics-item-value-v">{{statisticsObj.completedExamCnt }}</text>
<text class="analytics-item-value-unit"></text> <text class="analytics-item-value-unit"></text>
</view> </view>
</view> </view>
@@ -70,7 +73,7 @@
考试及格率 考试及格率
</view> </view>
<view class="analytics-item-value"> <view class="analytics-item-value">
<text class="analytics-item-value-v">{{statisticsObj.passExamRate }}</text> <text class="analytics-item-value-v">{{statisticsObj.passExamRate }}</text>
<text class="analytics-item-value-unit">%</text> <text class="analytics-item-value-unit">%</text>
</view> </view>
</view> </view>
@@ -104,7 +107,7 @@
</view> </view>
</view> </view>
<view class="evaluation-box dens" v-if="loading"> <view class="evaluation-box dens" v-if="loading">
<CommonLoading color="#06f" class="loading-box"/> <CommonLoading color="#06f" class="loading-box" />
</view> </view>
<view class="evaluation-box dens" v-if="!loading"> <view class="evaluation-box dens" v-if="!loading">
<view class="dens-item" v-for="(item, index) in dimesionList"> <view class="dens-item" v-for="(item, index) in dimesionList">
@@ -113,7 +116,7 @@
</view> </view>
</view> </view>
<view class="evaluation-box study" v-if="loading"> <view class="evaluation-box study" v-if="loading">
<CommonLoading color="#06f" class="loading-box"/> <CommonLoading color="#06f" class="loading-box" />
</view> </view>
<view class="evaluation-box study" v-if="!loading"> <view class="evaluation-box study" v-if="!loading">
<view class="study-item" v-for="(item, index) in studyList"> <view class="study-item" v-for="(item, index) in studyList">
@@ -122,7 +125,7 @@
</view> </view>
</view> </view>
<view class="evaluation-box study1" v-if="loading"> <view class="evaluation-box study1" v-if="loading">
<CommonLoading color="#06f" class="loading-box"/> <CommonLoading color="#06f" class="loading-box" />
</view> </view>
<view class="evaluation-box study1" v-if="!loading"> <view class="evaluation-box study1" v-if="!loading">
<view class="study1-item"> <view class="study1-item">
@@ -130,7 +133,7 @@
</view> </view>
</view> </view>
<view class="evaluation-box course" v-if="loading"> <view class="evaluation-box course" v-if="loading">
<CommonLoading color="#06f" class="loading-box"/> <CommonLoading color="#06f" class="loading-box" />
</view> </view>
<view class="evaluation-box course" v-if="!loading"> <view class="evaluation-box course" v-if="!loading">
<CourseItem v-for="item in courseList" :itemInfo="item" @clickItem="toCourseDetail(item)" /> <CourseItem v-for="item in courseList" :itemInfo="item" @clickItem="toCourseDetail(item)" />
@@ -186,15 +189,15 @@
}) })
const calendarRef = ref() const calendarRef = ref()
const statisticsObj = ref({ const statisticsObj = ref({
crsStdyTmLen: 0, crsStdyTmLen: 0,
completeTaskCnt: 0, completeTaskCnt: 0,
completedExamCnt: 0, completedExamCnt: 0,
passExamRate: 0, passExamRate: 0,
partnerCnt: 0, partnerCnt: 0,
askCnt: 0, askCnt: 0,
completeCrsCnt: 0, completeCrsCnt: 0,
crsCompleteRate: 0, crsCompleteRate: 0,
partnerRate: 0 partnerRate: 0
}) })
const dimesionList = ref([]) const dimesionList = ref([])
const studyList = ref([]) const studyList = ref([])
@@ -225,17 +228,20 @@
loading.value = true loading.value = true
try { try {
let _res1 = await queryStudyStatistics(params) let _res1 = await queryStudyStatistics(params)
statisticsObj.value = {..._res1.body} statisticsObj.value = {
..._res1.body
}
let _res2 = await queryDimesionInfo(params) let _res2 = await queryDimesionInfo(params)
dimesionList.value = [..._res2.body] dimesionList.value = [..._res2.body]
let _res3 = await queryHabitInfo(params) let _res3 = await queryHabitInfo(params)
studyList.value = [..._res3.body] studyList.value = [..._res3.body]
let _res4 = await querySuggestInfo(params) let _res4 = await querySuggestInfo(params)
if(_res4.body && _res4.body.length > 0){ if (_res4.body && _res4.body.length > 0) {
suggestObj.value = {..._res4.body[0]} suggestObj.value = {
..._res4.body[0]
}
} }
} catch { } catch {} finally {
} finally{
loading.value = false loading.value = false
} }
} }
@@ -246,9 +252,9 @@
const changeTab = (info) => { const changeTab = (info) => {
activeTabVal.value = info.value activeTabVal.value = info.value
if (info.value === '04') { if (info.value === '04') {
dateinputRef.value&&dateinputRef.value?.clear() dateinputRef.value && dateinputRef.value?.clear()
daterange.value = ['', ''] daterange.value = ['', '']
}else{ } else {
getInfoNow({ getInfoNow({
dateType: activeTabVal.value dateType: activeTabVal.value
}) })
@@ -364,6 +370,13 @@
margin-bottom: 24rpx; margin-bottom: 24rpx;
backdrop-filter: blur(10rpx); backdrop-filter: blur(10rpx);
.loading-box {
position: absolute;
top: 120rpx;
left: 50%;
transform: translateX(-50%);
}
.calendar-box { .calendar-box {
position: absolute; position: absolute;
right: 25rpx; right: 25rpx;
@@ -385,6 +398,7 @@
padding-bottom: 20rpx; padding-bottom: 20rpx;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
position: relative;
.analytics-item { .analytics-item {
padding-bottom: 12rpx; padding-bottom: 12rpx;
@@ -405,6 +419,7 @@
&-value { &-value {
font-size: 54rpx; font-size: 54rpx;
font-weight: 600; font-weight: 600;
&-v { &-v {
font-family: DINAlternate, DINAlternate; font-family: DINAlternate, DINAlternate;
} }
@@ -428,13 +443,15 @@
margin-bottom: 24rpx; margin-bottom: 24rpx;
position: relative; position: relative;
min-height: 200rpx; min-height: 200rpx;
.loading-box{
.loading-box {
position: absolute; position: absolute;
top: 120rpx; top: 120rpx;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
} }
&::before{
&::before {
content: ''; content: '';
display: block; display: block;
position: absolute; position: absolute;
@@ -445,26 +462,27 @@
top: -12rpx; top: -12rpx;
background-size: cover; background-size: cover;
} }
&.dens { &.dens {
&::before{ &::before {
background-image: url(@/static/images/analytics/weidu-1.png); background-image: url(@/static/images/analytics/weidu-1.png);
} }
} }
&.study { &.study {
&::before{ &::before {
background-image: url(@/static/images/analytics/study1-1.png) background-image: url(@/static/images/analytics/study1-1.png)
} }
} }
&.study1 { &.study1 {
&::before{ &::before {
background-image: url(@/static/images/analytics/study-1.png); background-image: url(@/static/images/analytics/study-1.png);
} }
} }
&.course { &.course {
&::before{ &::before {
background-image: url(@/static/images/analytics/course-1.png); background-image: url(@/static/images/analytics/course-1.png);
} }
} }
@@ -524,11 +542,13 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
&.study2-tip{
&.study2-tip {
&::before { &::before {
background-image: url(@/static/images/analytics/den-tips2.png); background-image: url(@/static/images/analytics/den-tips2.png);
} }
} }
&.bg-tm { &.bg-tm {
padding-left: 54rpx; padding-left: 54rpx;
background-image: url(@/static/images/analytics/time-icon.png); background-image: url(@/static/images/analytics/time-icon.png);