|
@@ -0,0 +1,557 @@
|
|
|
+<template>
|
|
|
+ <div style="background: #eee; height: 100%">
|
|
|
+ <vuescroll>
|
|
|
+ <div class="homePage">
|
|
|
+ <div class="home-score">
|
|
|
+ <div class="score-total box-border">
|
|
|
+ <p>
|
|
|
+ <span class="total-font">总学时:</span>
|
|
|
+ <b :class="['point-num', totalTime == 50 ? 'ok-time' : 'study-time']">{{ totalTime }}</b>
|
|
|
+ /50(学时)
|
|
|
+ <Tooltip max-width="200">
|
|
|
+ <Icon type="ios-alert" size="15" />
|
|
|
+ <div slot="content">
|
|
|
+ <div>
|
|
|
+ 总学时:线上研修 + 校本研修 +
|
|
|
+ 应用考核 + 课堂实录
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ 注:各指标达到要求后,多余学时不再计入总学时
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </Tooltip>
|
|
|
+ </p>
|
|
|
+ <i-circle :percent="percent" :stroke-color="percent == 100 ? '#19BE6B' : ['#2D8CF0','#19BE6B']" :stroke-width="10" :size="130">
|
|
|
+ <span style="font-size: 17px">{{ percent }}%</span>
|
|
|
+ </i-circle>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="box-border score-total">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <p class="act-font">
|
|
|
+ 总学时:
|
|
|
+ <b :class="['point-num', onlineTime == 20 ? 'ok-time' : 'study-time']">{{ onlineTime }}</b>
|
|
|
+ /20
|
|
|
+ <span class="timeNum">(学时)</span>
|
|
|
+ </p>
|
|
|
+ <i-circle
|
|
|
+ :percent="onlinePer"
|
|
|
+ :stroke-color="onlinePer == 100 ? '#19BE6B' : ['#2D8CF0','#19BE6B']"
|
|
|
+ :stroke-width="10"
|
|
|
+ :size="90"
|
|
|
+ >
|
|
|
+ <span style="font-size: 17px">{{ onlinePer }}%</span>
|
|
|
+ </i-circle>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <p class="act-font">
|
|
|
+ 已学能力点:
|
|
|
+ <b class='point-num'>{{ allAbilityCount }}</b>
|
|
|
+ /30
|
|
|
+ </p>
|
|
|
+ <i-circle
|
|
|
+ :percent="allAbilityCountPer"
|
|
|
+ :stroke-color="allAbilityCountPer == 100 ? '#19BE6B' : ['#2D8CF0','#19BE6B']"
|
|
|
+ :stroke-width="10"
|
|
|
+ :size="90"
|
|
|
+ >
|
|
|
+ <span style="font-size: 17px">{{ allAbilityCountPer }}%</span>
|
|
|
+ </i-circle>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div> -->
|
|
|
+ <div class="box-border">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <p class="act-font">
|
|
|
+ 线上研修:
|
|
|
+ <b :class="['point-num', onlineTime == 20 ? 'ok-time' : 'study-time']">{{ onlineTime }}</b>
|
|
|
+ /20
|
|
|
+ <span class="timeNum">(学时)</span>
|
|
|
+ </p>
|
|
|
+ <i-circle :percent="onlinePer" :stroke-color="onlinePer == 100 ? '#19BE6B' : ['#2D8CF0','#19BE6B']" :stroke-width="10" :size="90">
|
|
|
+ <span style="font-size: 17px">{{ onlinePer }}%</span>
|
|
|
+ </i-circle>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <p class="act-font">
|
|
|
+ 线下研修:
|
|
|
+ <b :class="['point-num', classTime == 10 ? 'ok-time' : 'study-time']">{{ classTime }}</b>
|
|
|
+ /10
|
|
|
+ <span class="timeNum">(学时)</span>
|
|
|
+ </p>
|
|
|
+ <i-circle :percent="classPer" :stroke-color="classPer == 100 ? '#19BE6B' : ['#2D8CF0','#19BE6B']" :stroke-width="10" :size="90">
|
|
|
+ <span style="font-size: 17px">{{ classPer }}%</span>
|
|
|
+ </i-circle>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <p class="act-font">
|
|
|
+ 应用考核:
|
|
|
+ <b :class="['point-num', applicaTime == 15 ? 'ok-time' : 'study-time']">{{ applicaTime }}</b>
|
|
|
+ /15
|
|
|
+ <span class="timeNum">(学时)</span>
|
|
|
+ </p>
|
|
|
+ <i-circle :percent="applicaPer" :stroke-color="applicaPer == 100 ? '#19BE6B' : ['#2D8CF0','#19BE6B']" :stroke-width="10" :size="90">
|
|
|
+ <span style="font-size: 17px">{{ applicaPer }}%</span>
|
|
|
+ </i-circle>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <p class="act-font">
|
|
|
+ 课堂实录:
|
|
|
+ <b :class="['point-num', discussTime == 5 ? 'ok-time' : 'study-time']">{{ discussTime }}</b>
|
|
|
+ /5
|
|
|
+ <span class="timeNum">(学时)</span>
|
|
|
+ </p>
|
|
|
+ <i-circle :percent="discussPer" :stroke-color="discussPer == 100 ? '#19BE6B' : ['#2D8CF0','#19BE6B']" :stroke-width="10" :size="90">
|
|
|
+ <span style="font-size: 17px">{{ discussPer }}%</span>
|
|
|
+ </i-circle>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="home-activity">
|
|
|
+ <ul>
|
|
|
+ <li class="act-border ability-style">
|
|
|
+ <img src="@/assets/image/study_point.png" alt="">
|
|
|
+ <div>
|
|
|
+ <p class="act-font">已学能力点</p>
|
|
|
+ <p><b class="point-num">{{ allAbilityCount }}</b> / 30</p>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li class="act-border ability-style">
|
|
|
+ <img src="@/assets/image/ok_point.png" alt="">
|
|
|
+ <div>
|
|
|
+ <p class="act-font">检测合格能力点</p>
|
|
|
+ <p><b class="point-num">{{ allAbilityOkNum }}</b> / {{ allAbilityOkTotal }}</p>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li class="act-border ability-style">
|
|
|
+ <img src="@/assets/image/jyzx_app.png" alt="">
|
|
|
+ <div>
|
|
|
+ <p class="act-font">成果提交</p>
|
|
|
+ <p><b class="point-num">{{ appNum }}</b> / {{ appTotal }}</p>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <ul>
|
|
|
+ <li class="act-border ability-style">
|
|
|
+ <img src="@/assets/image/area_study.png" alt="">
|
|
|
+ <div>
|
|
|
+ <p class="act-font">区级研修</p>
|
|
|
+ <p><b class="point-num">{{ areaNum }}</b> / {{ areaTotal }}</p>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li class="act-border ability-style">
|
|
|
+ <img src="@/assets/image/area_survey.png" alt="">
|
|
|
+ <div>
|
|
|
+ <p class="act-font">区级问卷</p>
|
|
|
+ <p><b class="point-num">{{ areaSurveyNum }}</b> / {{ areaSurveyTotal }}</p>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li class="act-border ability-style">
|
|
|
+ <img src="@/assets/image/area_vote.png" alt="">
|
|
|
+ <div>
|
|
|
+ <p class="act-font">区级投票</p>
|
|
|
+ <p><b class="point-num">{{ areaVoteNum }}</b> / {{ areaVoteTotal }}</p>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <!-- <li class="act-border">
|
|
|
+ <img src="@/assets/image/area_exam.png" alt="">
|
|
|
+ <div>
|
|
|
+ <p class="act-font">区级评测</p>
|
|
|
+ <p><b class="point-num">{{ voteNum }}</b> / {{ voteTotal }}</p>
|
|
|
+ </div>
|
|
|
+ </li> -->
|
|
|
+ </ul>
|
|
|
+ <ul>
|
|
|
+ <li class="act-border ability-style">
|
|
|
+ <img src="@/assets/image/school_study.png" alt="">
|
|
|
+ <div>
|
|
|
+ <p class="act-font">校本研修</p>
|
|
|
+ <p><b class="point-num">{{ schoolNum }}</b> / {{ schoolTotal }}</p>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li class="act-border ability-style">
|
|
|
+ <img src="@/assets/image/school_survey.png" alt="">
|
|
|
+ <div>
|
|
|
+ <p class="act-font">校本问卷</p>
|
|
|
+ <p><b class="point-num">{{ surveyNum }}</b> / {{ surveyTotal }}</p>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li class="act-border ability-style">
|
|
|
+ <img src="@/assets/image/school_vote.png" alt="">
|
|
|
+ <div>
|
|
|
+ <p class="act-font">校本投票</p>
|
|
|
+ <p><b class="point-num">{{ voteNum }}</b> / {{ voteTotal }}</p>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <!-- <li class="act-border">
|
|
|
+ <img src="@/assets/image/school_exam.png" alt="">
|
|
|
+ <div>
|
|
|
+ <p class="act-font">校本评测</p>
|
|
|
+ <p><b class="point-num">{{ voteNum }}</b> / {{ voteTotal }}</p>
|
|
|
+ </div>
|
|
|
+ </li> -->
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </vuescroll>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: "HomaYanxiu",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ totalTime: 0, //总学时
|
|
|
+ percent: 0, //总学时的百分比
|
|
|
+ onlineTime: 0, //线上
|
|
|
+ onlinePer: 0, //线上百分比
|
|
|
+ classTime: 0, //校本
|
|
|
+ classPer: 0, //校本百分比
|
|
|
+ applicaTime: 0, //应用
|
|
|
+ applicaPer: 0, //应用百分比
|
|
|
+ discussTime: 0, //课堂
|
|
|
+ discussPer: 0, //课堂百分比
|
|
|
+ allAbilityCount: 0, //学习的能力点
|
|
|
+ allAbilityCountPer: 0, //学习的能力点百分比
|
|
|
+ allAbilityOkNum: 0, //检测能力点
|
|
|
+ allAbilityOkTotal: 0, //选择总能力点
|
|
|
+ areaNum: 0, //区级研修
|
|
|
+ areaTotal: 0, //全部区级研修
|
|
|
+ schoolNum: 0, //校本活动
|
|
|
+ schoolTotal: 0, //全部校本活动
|
|
|
+ appNum: 0, //应用成果
|
|
|
+ appTotal: 0, //全部应用成果
|
|
|
+ surveyNum: 0, //问卷
|
|
|
+ surveyTotal: 0, //全部问卷
|
|
|
+ areaSurveyNum: 0, //区级问卷
|
|
|
+ areaSurveyTotal: 0, //问卷
|
|
|
+ voteNum: 0, //投票
|
|
|
+ voteTotal: 0, //全部投票
|
|
|
+ areaVoteNum: 0, //投票
|
|
|
+ areaVoteTotal: 0, //投票
|
|
|
+ examNum: 0, //评测
|
|
|
+ examTotal: 0, //全部评测
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getStudyTime()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getStudyTime() {
|
|
|
+ let req = {
|
|
|
+ tmdid: this.$store.state.userInfo.TEAMModelId,
|
|
|
+ school: this.$store.state.userInfo.schoolCode,
|
|
|
+ }
|
|
|
+ this.$api.jyzx.getStudyTime(req).then((res) => {
|
|
|
+ if (res) {
|
|
|
+ let total = 0
|
|
|
+ this.allAbilityCount = res.allAbilityCount
|
|
|
+ this.onlineTime = res.onlineTime
|
|
|
+ this.classTime = res.offlinelTime
|
|
|
+ this.applicaTime = res.schoolScoreTime
|
|
|
+ this.discussTime = res.classVideoTime
|
|
|
+ // 线上研修
|
|
|
+ if (this.onlineTime >= 20) {
|
|
|
+ total += 20
|
|
|
+ this.onlinePer = 100
|
|
|
+ } else {
|
|
|
+ total += this.onlineTime
|
|
|
+ this.onlinePer = Math.floor((res.onlineTime / 20) * 100)
|
|
|
+ }
|
|
|
+ // 校本研修
|
|
|
+ if (this.classTime >= 10) {
|
|
|
+ total += 10
|
|
|
+ this.classPer = 100
|
|
|
+ } else {
|
|
|
+ total += this.classTime
|
|
|
+ this.classPer = Math.floor(
|
|
|
+ (res.offlinelTime / 10) * 100
|
|
|
+ )
|
|
|
+ }
|
|
|
+ // 应用考核
|
|
|
+ if (this.applicaTime >= 15) {
|
|
|
+ total += 15
|
|
|
+ this.applicaPer = 100
|
|
|
+ } else {
|
|
|
+ total += this.applicaTime
|
|
|
+ this.applicaPer = Math.floor(
|
|
|
+ (res.schoolScoreTime / 15) * 100
|
|
|
+ )
|
|
|
+ }
|
|
|
+ // 课堂实录
|
|
|
+ if (this.discussTime >= 5) {
|
|
|
+ total += 5
|
|
|
+ this.discussPer = 100
|
|
|
+ } else {
|
|
|
+ total += this.discussTime
|
|
|
+ this.discussPer = Math.floor(
|
|
|
+ (res.classVideoTime / 5) * 100
|
|
|
+ )
|
|
|
+ }
|
|
|
+ this.totalTime = total
|
|
|
+ this.percent = Math.floor((total / 50) * 100)
|
|
|
+ this.allAbilityCountPer = Math.floor(
|
|
|
+ (res.allAbilityCount / 30) * 100
|
|
|
+ )
|
|
|
+ // 检测
|
|
|
+ this.allAbilityOkNum = res.hasAbilityExercise
|
|
|
+ this.allAbilityOkTotal = res.subCount
|
|
|
+ // 区级
|
|
|
+ this.areaNum = res.offlineAreaDoneCount
|
|
|
+ this.areaTotal = res.offlineAreaJoinCount
|
|
|
+ // 校本
|
|
|
+ this.schoolNum = res.offlineSchoolDoneCount
|
|
|
+ this.schoolTotal = res.offlineSchoolJoinCount
|
|
|
+ // 成果
|
|
|
+ this.appNum = res.uploadDoneCount
|
|
|
+ this.appTotal = res.uploadTotalCount
|
|
|
+ // 问卷
|
|
|
+ this.surveyNum = res.surveyDoneCount
|
|
|
+ this.surveyTotal = res.surveyJoinCount
|
|
|
+ this.areaSurveyNum = res.surveyAreaDoneCount
|
|
|
+ this.areaSurveyTotal = res.surveyAreaJoinCount
|
|
|
+ // 投票
|
|
|
+ this.voteNum = res.voteDoneCount
|
|
|
+ this.voteTotal = res.voteJoinCount
|
|
|
+ this.areaVoteNum = res.voteAreaDoneCount
|
|
|
+ this.areaVoteTotal = res.voteAreaJoinCount
|
|
|
+ // 评测
|
|
|
+ this.examNum = res.examDoneCount
|
|
|
+ this.examTotal = res.examJoinCount
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch:{
|
|
|
+ '$store.state.userInfo.schoolCode':{
|
|
|
+ handler(n,o){
|
|
|
+ this.getStudyTime()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.home {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .totalNum {
|
|
|
+ width: 40%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .total,
|
|
|
+ .yxType {
|
|
|
+ margin: 25px;
|
|
|
+ box-shadow: 0 0 15px #888888;
|
|
|
+ padding: 20px;
|
|
|
+ border-radius: 10px;
|
|
|
+ background: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ .total {
|
|
|
+ // width: 40%;
|
|
|
+ margin-right: 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ /* & > div:first-child {
|
|
|
+ margin: 0 30px;
|
|
|
+ } */
|
|
|
+
|
|
|
+ & > p {
|
|
|
+ margin-bottom: 25px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .yxType {
|
|
|
+ width: 60%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ & > div {
|
|
|
+ margin-bottom: 20px;
|
|
|
+
|
|
|
+ & > p:first-of-type {
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .sucTime {
|
|
|
+ color: #19be6b;
|
|
|
+ font-size: 14px;
|
|
|
+ border: 1px solid;
|
|
|
+ margin: 0 10px;
|
|
|
+ padding: 2px 3px;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .yxType p:nth-child(2),
|
|
|
+ .total > div > p {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+}
|
|
|
+.fontStyle {
|
|
|
+ font-size: 30px;
|
|
|
+}
|
|
|
+.timeNum {
|
|
|
+ font-size: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.homePage {
|
|
|
+ .box-border {
|
|
|
+ margin: 25px;
|
|
|
+ box-shadow: 0 0 15px #c5c5c5;
|
|
|
+ border-radius: 5px;
|
|
|
+ background: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ .act-border {
|
|
|
+ box-shadow: 0 0 15px #c5c5c5;
|
|
|
+ border-radius: 5px;
|
|
|
+ background: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ .home-score {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .score-total {
|
|
|
+ width: 32%;
|
|
|
+ margin-right: 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ ul {
|
|
|
+ width: 100%;
|
|
|
+ li {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ // min-width: 200px;
|
|
|
+ position: relative;
|
|
|
+ justify-content: center;
|
|
|
+ height: 150px;
|
|
|
+
|
|
|
+ &:first-child {
|
|
|
+ border-bottom: 1px solid #d8e7f6;
|
|
|
+ }
|
|
|
+
|
|
|
+ div {
|
|
|
+ margin-left: 20px;
|
|
|
+ display: inline-block;
|
|
|
+
|
|
|
+ p {
|
|
|
+ line-height: 33px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ font-size: 20px;
|
|
|
+ margin-right: 20px;
|
|
|
+
|
|
|
+ .total-font {
|
|
|
+ font-size: 25px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ & > div:last-child {
|
|
|
+ width: 65%;
|
|
|
+ ul {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ &:first-child {
|
|
|
+ border-bottom: 1px solid #d8e7f6;
|
|
|
+ }
|
|
|
+
|
|
|
+ li {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 50%;
|
|
|
+ min-width: 200px;
|
|
|
+ position: relative;
|
|
|
+ justify-content: center;
|
|
|
+ height: 150px;
|
|
|
+
|
|
|
+ &:first-child {
|
|
|
+ border-right: 1px solid #d8e7f6;
|
|
|
+ }
|
|
|
+
|
|
|
+ div {
|
|
|
+ margin-left: 20px;
|
|
|
+ display: inline-block;
|
|
|
+
|
|
|
+ p {
|
|
|
+ line-height: 33px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .home-activity {
|
|
|
+ padding-left: 25px;
|
|
|
+
|
|
|
+ .ability-style {
|
|
|
+ padding: 0 70px;
|
|
|
+ }
|
|
|
+
|
|
|
+ ul {
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 25px;
|
|
|
+
|
|
|
+ li {
|
|
|
+ width: 32%;
|
|
|
+ padding: 0 30px;
|
|
|
+ height: 150px;
|
|
|
+ margin-right: 25px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ img {
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 20px;
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .act-font {
|
|
|
+ font-size: 20px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .study-time {
|
|
|
+ color: red;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ok-time {
|
|
|
+ color: #19be6b;
|
|
|
+ }
|
|
|
+
|
|
|
+ .point-num {
|
|
|
+ font-size: 25px;
|
|
|
+ }
|
|
|
+}
|
|
|
+@media all and (max-width: 1367px) {
|
|
|
+ .score-total {
|
|
|
+ flex-direction: column;
|
|
|
+ p {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|