488 lines
13 KiB
Vue
488 lines
13 KiB
Vue
<template>
|
||
<view class="study-analytics max_page">
|
||
<view class="cont-body">
|
||
<view class="top-box">
|
||
<view class="top-title">
|
||
<view class="back-icon" @click="common.navigateBack()"></view>
|
||
</view>
|
||
</view>
|
||
<view class="analytics-box">
|
||
<view class="tabs-box">
|
||
<uv-tabs :list="tabList" @click="changeTab" :scrollable="true" active-style="font-weight:bold; color:#000;" :current="currentTab"
|
||
class="font_pf my_tabs" :inactive-style="{ color: '#333333', fontSize: '28rpx', fontWeight: '500' }"
|
||
:activeStyle="{ color: '#333333', fontSize: '28rpx', fontWeight: '600' }"></uv-tabs>
|
||
</view>
|
||
<!-- <view class="calendar-box" @click="openCalendar">统计周期</view>
|
||
<uv-calendar ref="calendarRef" mode="range" @confirm="calendarConfirm" minDate="2025-01-01" :maxDate="maxDate" monthNum="100" :allowSameDay="true"></uv-calendar> -->
|
||
<view class="date-input">
|
||
<uni-datetime-picker
|
||
type="daterange"
|
||
v-model="daterange"
|
||
start="2025-01-01"
|
||
:end="maxDate"
|
||
rangeSeparator="至"
|
||
></uni-datetime-picker>
|
||
</view>
|
||
<view class="analytics-items">
|
||
<view class="analytics-item">
|
||
<view class="analytics-item-title">
|
||
课程学习时长
|
||
</view>
|
||
<view class="analytics-item-value">
|
||
<text class="analytics-item-value-v">{{6.5}}</text>
|
||
<text class="analytics-item-value-unit">h</text>
|
||
</view>
|
||
</view>
|
||
<view class="analytics-item">
|
||
<view class="analytics-item-title">
|
||
课程学习次数
|
||
</view>
|
||
<view class="analytics-item-value">
|
||
<text class="analytics-item-value-v">{{14}}</text>
|
||
<text class="analytics-item-value-unit">次</text>
|
||
</view>
|
||
</view>
|
||
<view class="analytics-item">
|
||
<view class="analytics-item-title">
|
||
课程练习时长
|
||
</view>
|
||
<view class="analytics-item-value">
|
||
<text class="analytics-item-value-v">{{24.4}}</text>
|
||
<text class="analytics-item-value-unit">h</text>
|
||
</view>
|
||
</view>
|
||
<view class="analytics-item">
|
||
<view class="analytics-item-title">
|
||
完成任务数
|
||
</view>
|
||
<view class="analytics-item-value">
|
||
<text class="analytics-item-value-v">{{14}}</text>
|
||
<text class="analytics-item-value-unit">次</text>
|
||
</view>
|
||
</view>
|
||
<view class="analytics-item">
|
||
<view class="analytics-item-title">
|
||
完成考试数
|
||
</view>
|
||
<view class="analytics-item-value">
|
||
<text class="analytics-item-value-v">{{14}}</text>
|
||
<text class="analytics-item-value-unit">次</text>
|
||
</view>
|
||
</view>
|
||
<view class="analytics-item">
|
||
<view class="analytics-item-title">
|
||
考试合格率
|
||
</view>
|
||
<view class="analytics-item-value">
|
||
<text class="analytics-item-value-v">{{82.8}}</text>
|
||
<text class="analytics-item-value-unit">%</text>
|
||
</view>
|
||
</view>
|
||
<view class="analytics-item">
|
||
<view class="analytics-item-title">
|
||
陪练次数
|
||
</view>
|
||
<view class="analytics-item-value">
|
||
<text class="analytics-item-value-v">{{14}}</text>
|
||
<text class="analytics-item-value-unit">次</text>
|
||
</view>
|
||
</view>
|
||
<view class="analytics-item">
|
||
<view class="analytics-item-title">
|
||
课程学习次数
|
||
</view>
|
||
<view class="analytics-item-value">
|
||
<text class="analytics-item-value-v">{{14}}</text>
|
||
<text class="analytics-item-value-unit">次</text>
|
||
</view>
|
||
</view>
|
||
<view class="analytics-item">
|
||
<view class="analytics-item-title">
|
||
软件用时
|
||
</view>
|
||
<view class="analytics-item-value">
|
||
<text class="analytics-item-value-v">{{44.4}}</text>
|
||
<text class="analytics-item-value-unit">h</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="evaluation-box dens">
|
||
<view class="dens-item" v-for="item in 5">
|
||
<view class="item-title">话术完整性</view>
|
||
<view class="item-cont">逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性</view>
|
||
</view>
|
||
</view>
|
||
<view class="evaluation-box study">
|
||
<view class="study-item">
|
||
<view class="item-title bg-tm">时间管理： {{'规律性学习者'}}</view>
|
||
<view class="item-cont study1-bg">逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性</view>
|
||
</view>
|
||
<view class="study-item">
|
||
<view class="item-title bg-know">知识吸收： {{'听觉型学习者'}}</view>
|
||
<view class="item-cont study2-bg">逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性</view>
|
||
</view>
|
||
</view>
|
||
<view class="evaluation-box study1">
|
||
<view class="study1-item">
|
||
<view class="item-cont study3-bg">逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性逻辑贯穿性</view>
|
||
</view>
|
||
</view>
|
||
<view class="evaluation-box course">
|
||
<CourseItem v-for="item in courseList" :itemInfo="item" @clickItem="toCourseDetail(item)" />
|
||
<view class="empty-box" v-if="courseList.length === 0">暂无数据</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import common from '@/common/common'
|
||
import {
|
||
getTraTagListApi,
|
||
queryTraPartnerCatelogList,
|
||
queryCrsInfoByCatalogApi
|
||
} from '@/api/sparring.js'
|
||
import {
|
||
onMounted,
|
||
ref,
|
||
computed,
|
||
} from 'vue'
|
||
import CourseItem from '@/components/course-item/course-item.vue'
|
||
const tabList = ref([{
|
||
name: '本月',
|
||
value: '01'
|
||
},
|
||
{
|
||
name: '本年',
|
||
value: '02'
|
||
},
|
||
{
|
||
name: '累计',
|
||
value: '03'
|
||
},
|
||
{
|
||
name: '自定义',
|
||
value: '04'
|
||
}
|
||
])
|
||
const courseList = ref([])
|
||
const currentTab = ref(0)
|
||
const daterange = ref(['',''])
|
||
const maxDate = computed(()=> {
|
||
let _date = new Date()
|
||
let _year = _date.getFullYear()
|
||
let _month = _date.getMonth() + 1
|
||
let _day = new Date(_year, _month, 0).getDate()
|
||
return `${_year}-${_month < 10 ? '0' + _month: _month}-${_day < 10 ? '0' + _day: _day}`
|
||
})
|
||
const calendarRef = ref()
|
||
|
||
|
||
const openCalendar = () => {
|
||
calendarRef.value.open()
|
||
}
|
||
const calendarConfirm = (data) => {
|
||
console.log('data:',data)
|
||
currentTab.value = -1
|
||
}
|
||
// 跳转 课程详情
|
||
const toCourseDetail = item => {
|
||
common.navigateTo('/pages/courseDetail/index?crsNum=' + item.crsNum + '&crsId=' + item.crsId)
|
||
}
|
||
const changeTab = (info) => {
|
||
console.log(info)
|
||
}
|
||
onMounted(() => {})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.my_tabs {
|
||
|
||
// 解决这个圆角的图片，开穿透
|
||
:deep(.uv-tabs__wrapper__nav__line) {
|
||
background: linear-gradient(90deg, #06f 0%, rgb(0, 159, 255) 50%, rgb(255, 255, 255) 100%) !important;
|
||
}
|
||
|
||
:deep(.uv-tabs__wrapper__nav__item) {
|
||
padding: 0 20rpx !important;
|
||
}
|
||
}
|
||
|
||
.study-analytics {
|
||
position: relative;
|
||
background-color: #ddeafa;
|
||
|
||
.cont-body {
|
||
position: absolute;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
padding: var(--status-bar-height) 20rpx 24rpx;
|
||
// padding: 280rpx 20rpx 24rpx;
|
||
overflow-x: hidden;
|
||
overflow-y: auto;
|
||
box-sizing: border-box;
|
||
background-image: url(@/static/images/analytics/bg1.png);
|
||
background-repeat: no-repeat;
|
||
background-size: 100% auto;
|
||
background-position: top center;
|
||
background-attachment: local;
|
||
|
||
|
||
.top-box {
|
||
height: 280rpx;
|
||
width: 100%;
|
||
// position: fixed;
|
||
// float: left;
|
||
// margin-top: var(--status-bar-height);
|
||
|
||
.top-title {
|
||
height: 90rpx;
|
||
// background-color: red;
|
||
text-align: center;
|
||
font-size: 33rpx;
|
||
padding: 10rpx 100rpx 0;
|
||
line-height: 46rpx;
|
||
box-sizing: border-box;
|
||
font-weight: 500;
|
||
color: #000;
|
||
position: relative;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
|
||
// margin-bottom: 23rpx;
|
||
.arrow-icon {
|
||
position: absolute;
|
||
left: 36rpx;
|
||
top: 20rpx;
|
||
color: #fff !important;
|
||
}
|
||
|
||
.feedback-icon {
|
||
position: absolute;
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
cursor: pointer;
|
||
right: 50rpx;
|
||
top: 33rpx;
|
||
transform: translateY(-50%);
|
||
background: url(@/static/images/sparring/feedback.png) no-repeat;
|
||
background-size: 28rpx 28rpx;
|
||
background-position: center;
|
||
}
|
||
|
||
.back-icon {
|
||
position: absolute;
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
cursor: pointer;
|
||
left: 50rpx;
|
||
top: 33rpx;
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
.back-icon::before,
|
||
.back-icon::after {
|
||
content: '';
|
||
position: absolute;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.back-icon::after {
|
||
top: 25%;
|
||
left: 25%;
|
||
width: 40%;
|
||
height: 40%;
|
||
border-top: 4rpx solid #000;
|
||
border-left: 4rpx solid #000;
|
||
transform: rotate(-45deg);
|
||
}
|
||
}
|
||
}
|
||
|
||
.analytics-box {
|
||
height: 490rpx;
|
||
background: url(@/static/images/analytics/bg2.png) no-repeat;
|
||
background-size: cover;
|
||
background-position: center;
|
||
position: relative;
|
||
margin-bottom: 24rpx;
|
||
backdrop-filter: blur(10rpx);
|
||
|
||
.calendar-box {
|
||
position: absolute;
|
||
right: 25rpx;
|
||
top: 25rpx;
|
||
color: #06f;
|
||
padding-left: 40rpx;
|
||
background: url(@/static/images/analytics/date-icon.png) no-repeat;
|
||
background-size: 30rpx 30rpx;
|
||
background-position: left center;
|
||
font-size: 29rpx;
|
||
}
|
||
|
||
.tabs-box {
|
||
width: 600rpx;
|
||
}
|
||
|
||
.analytics-items {
|
||
padding-top: 20rpx;
|
||
width: 100%;
|
||
overflow: hidden;
|
||
|
||
.analytics-item {
|
||
padding-bottom: 12rpx;
|
||
box-sizing: border-box;
|
||
width: 33.3%;
|
||
float: left;
|
||
text-align: center;
|
||
height: 128rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-around;
|
||
|
||
&-title {
|
||
font-size: 25rpx;
|
||
color: #666;
|
||
}
|
||
|
||
&-value {
|
||
font-size: 54rpx;
|
||
font-weight: 600;
|
||
|
||
&-unit {
|
||
font-size: 28rpx;
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.evaluation-box {
|
||
background-color: rgba(255, 255, 255, .8);
|
||
background-repeat: no-repeat;
|
||
background-size: auto 78rpx;
|
||
background-position: 26rpx 26rpx;
|
||
padding: 100rpx 26rpx 24rpx;
|
||
border-radius: 15rpx;
|
||
margin-bottom: 24rpx;
|
||
&.dens {
|
||
background-image: url(@/static/images/analytics/weidu.png);
|
||
}
|
||
&.study {
|
||
background-image: url(@/static/images/analytics/study1.png)
|
||
}
|
||
&.study1 {
|
||
background-image: url(@/static/images/analytics/study.png);
|
||
}
|
||
&.course {
|
||
background-image: url(@/static/images/analytics/course.png);
|
||
}
|
||
|
||
// .dens-item {
|
||
// padding: 23rpx 0;
|
||
// .item-title{
|
||
// line-height: 40rpx;
|
||
// position: relative;
|
||
// padding: 8rpx 46rpx 8rpx 26rpx;
|
||
// line-height: 42rpx;
|
||
// font-size: 29rpx;
|
||
// margin-bottom: 16rpx;
|
||
// &::before{
|
||
// content: '';
|
||
// display: block;
|
||
// background-color: #000;
|
||
// width: 12rpx;
|
||
// height: 12rpx;
|
||
// border-radius: 50%;
|
||
// position: absolute;
|
||
// left: 0rpx;
|
||
// top: 22rpx;
|
||
// }
|
||
// }
|
||
|
||
// .item-cont {
|
||
// font-size: 28rpx;
|
||
// line-height: 50rpx;
|
||
// }
|
||
// }
|
||
|
||
.study-item,.study1-item, .dens-item{
|
||
padding: 12rpx 0;
|
||
.item-title{
|
||
line-height: 40rpx;
|
||
position: relative;
|
||
padding: 8rpx 46rpx 8rpx 26rpx;
|
||
line-height: 42rpx;
|
||
font-size: 29rpx;
|
||
margin-bottom: 16rpx;
|
||
&::before{
|
||
content: '';
|
||
display: block;
|
||
background-color: #000;
|
||
width: 12rpx;
|
||
height: 12rpx;
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
left: 0rpx;
|
||
top: 22rpx;
|
||
}
|
||
&.bg-tm{
|
||
padding-left: 54rpx;
|
||
background-image: url(@/static/images/analytics/time-icon.png);
|
||
background-repeat: no-repeat;
|
||
background-size: 38rpx 40rpx;
|
||
background-position: left center;
|
||
&::before{
|
||
display: none;
|
||
}
|
||
}
|
||
&.bg-know{
|
||
padding-left: 54rpx;
|
||
background-image: url(@/static/images/analytics/knowledge.png);
|
||
background-repeat: no-repeat;
|
||
background-size: 38rpx 40rpx;
|
||
background-position: left center;
|
||
&::before{
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
.item-cont {
|
||
font-size: 28rpx;
|
||
line-height: 50rpx;
|
||
&.study1-bg{
|
||
background-color: #e4efff;
|
||
border-radius: 15rpx;
|
||
padding: 12rpx 24rpx;
|
||
width: calc(100% - 54rpx);
|
||
margin-left: 54rpx;
|
||
}
|
||
&.study2-bg{
|
||
background-color: #f6f0df;
|
||
border-radius: 15rpx;
|
||
padding: 12rpx 24rpx;
|
||
width: calc(100% - 54rpx);
|
||
margin-left: 54rpx;
|
||
}
|
||
&.study3-bg{
|
||
background-color: #e4efff;
|
||
border-radius: 15rpx;
|
||
padding: 12rpx 24rpx;
|
||
// width: calc(100% - 54rpx);
|
||
// margin-left: 54rpx;
|
||
}
|
||
}
|
||
}
|
||
.empty-box{
|
||
text-align: center;
|
||
font-size: 25rpx;
|
||
color: #ccc;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |