|
@@ -0,0 +1,488 @@
|
|
|
+<template>
|
|
|
+ <div class="home-page-container">
|
|
|
+ <vuescroll>
|
|
|
+ <div class="chart-box">
|
|
|
+ <div class="chart-box-column1">
|
|
|
+ <!-- 我的课表 -->
|
|
|
+ <div class="cus-table-box">
|
|
|
+ <MinTable @tmwCus="getTmwCus"></MinTable>
|
|
|
+ </div>
|
|
|
+ <!-- 活动统计 -->
|
|
|
+ <div class="ac-count-box">
|
|
|
+ <p class="chart-title">
|
|
|
+ {{$t('home.acCount')}}
|
|
|
+ </p>
|
|
|
+ <AcCountPie style="margin-top:-20px;" :count="acCount"></AcCountPie>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="chart-box-column2">
|
|
|
+ <!-- 课堂数据 -->
|
|
|
+ <!-- <div class="class-chart-box">
|
|
|
+ <p class="chart-title">
|
|
|
+ {{$t('home.classData')}}
|
|
|
+ <span style="color: var(--normal-icon-color);margin-left: 6px;font-size: 12px;">
|
|
|
+ ({{$t('system.preview')}})
|
|
|
+ </span>
|
|
|
+ </p>
|
|
|
+ <div style="width:45%">
|
|
|
+ <TechScore class="class-chart"></TechScore>
|
|
|
+ </div>
|
|
|
+ <div style="width:45%;padding-top:15px">
|
|
|
+ <TeachScore class="class-chart"></TeachScore>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+ <!-- 研修数据 -->
|
|
|
+ <div class="train-chart-box">
|
|
|
+ <p class="chart-title">
|
|
|
+ 研修统计
|
|
|
+ </p>
|
|
|
+ <!-- 学时统计 -->
|
|
|
+ <div class="train-hour-wrap">
|
|
|
+ <!-- 总学时 -->
|
|
|
+ <div class="train-hour-box">
|
|
|
+ <i-circle :stroke-color="strokeColor" :percent="allTimeInfo.percent" :size="200">
|
|
|
+ <span class="complete-hour">{{allTimeInfo.complete}}</span>
|
|
|
+ <span style="font-size:24px">/{{allTimeInfo.total}}</span>
|
|
|
+ <p class="total-hour-label">
|
|
|
+ {{ $t("jyzx.homePage.totalTime") }}
|
|
|
+ <Tooltip :max-width="400" transfer>
|
|
|
+ <Icon type="ios-alert" size="15" />
|
|
|
+ <div slot="content">
|
|
|
+ <div>
|
|
|
+ {{ $t("jyzx.homePage.remarks1") }}
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ {{ $t("jyzx.homePage.remarks2") }}
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ {{ $t("jyzx.homePage.remarks3") }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </Tooltip>
|
|
|
+ </p>
|
|
|
+ </i-circle>
|
|
|
+ </div>
|
|
|
+ <!-- 学时详情 -->
|
|
|
+ <div class="hour-detail-box">
|
|
|
+ <div class="hour-detail-item">
|
|
|
+ <HourDetail class="hour-detail-chart" :hourInfo="onlineInfo"></HourDetail>
|
|
|
+ <HourDetail class="hour-detail-chart" :hourInfo="offlineInfo"></HourDetail>
|
|
|
+ </div>
|
|
|
+ <div class="hour-detail-item">
|
|
|
+ <HourDetail class="hour-detail-chart" :hourInfo="verifyInfo"></HourDetail>
|
|
|
+ <HourDetail class="hour-detail-chart" :hourInfo="videoInfo"></HourDetail>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 活动数量统计 -->
|
|
|
+ <div class="train-count-wrap">
|
|
|
+ <div class="train-count-item" v-for="(item,index) in trainCountList" :key="index">
|
|
|
+ <img :src="item.img" class="train-count-img" alt="">
|
|
|
+ <div class="train-count-info">
|
|
|
+ <p class="count-label">{{item.text}}</p>
|
|
|
+ <p class="count-num">{{`${item.complete}/${item.total}`}}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="text-box">
|
|
|
+ <!-- 学校公告 -->
|
|
|
+ <div class="notice-box">
|
|
|
+ <p class="text-title">{{$t('home.scNotice')}}</p>
|
|
|
+ <div class="notice-list-wrap">
|
|
|
+ <vuescroll>
|
|
|
+ <ul class="notice-list-box">
|
|
|
+ <li v-for="(item,index) in noticeList" :key="index" @click="viewNotice(index)">
|
|
|
+ <div style="display:flex;justify-content:space-between;">
|
|
|
+ <p>
|
|
|
+ <span class="notice-title">{{item.title}}</span>
|
|
|
+ <span class="notice-dot" v-if="index < 2"></span>
|
|
|
+ </p>
|
|
|
+ <span class="notice-time">{{$jsFn.dateFormat(item.startTime)}}</span>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <EmptyData v-show="noticeList.length == 0" :textContent="$t('home.noNotice')"></EmptyData>
|
|
|
+ </ul>
|
|
|
+ </vuescroll>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 进行中的活动 -->
|
|
|
+ <div class="going-box">
|
|
|
+ <p class="text-title">{{$t('home.goingList')}}</p>
|
|
|
+ <div class="going-list-wrap">
|
|
|
+ <vuescroll>
|
|
|
+ <div v-for="(item,index) in goingList" :key="index" class="in-pro-ac-item" @click="toAc(item.pk, item.scope)">
|
|
|
+ <div class="ac-info-box">
|
|
|
+ <p>
|
|
|
+ <span class="ac-name-label">{{item.name}}</span>
|
|
|
+ </p>
|
|
|
+ <p class="ac-time-wrap">
|
|
|
+ <Icon type="md-alarm" />
|
|
|
+ {{$jsFn.dateFormat(item.startTime)}} - {{$jsFn.dateFormat(item.endTime)}}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div class="ac-pro-box">
|
|
|
+ <span :class="['type-label', item.owner == 'school' ? '' : 'special-color']">
|
|
|
+ {{item.owner == 'school' ? $t('home.schoolLabel') : $t('home.privateLabel')}}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <EmptyData v-show="!goingList.length" :textContent="$t('home.noGoing')"></EmptyData>
|
|
|
+ </vuescroll>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 最近课堂记录 -->
|
|
|
+ <div class="recent-box">
|
|
|
+ <p class="text-title">{{$t('home.recentRecord')}}</p>
|
|
|
+ <div class="recent-list-wrap">
|
|
|
+ <vuescroll>
|
|
|
+ <EmptyData :textContent="$t('home.noRecord')"></EmptyData>
|
|
|
+ </vuescroll>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </vuescroll>
|
|
|
+ <Modal v-model="viewNoticeStatus" :title="noticeList[noticeIndex] ? noticeList[noticeIndex].title : ''" width="600">
|
|
|
+ <template v-if="noticeList[noticeIndex]">
|
|
|
+ <p class="notice-content" v-html="noticeList[noticeIndex].content"></p>
|
|
|
+ </template>
|
|
|
+ </Modal>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import AcCountPie from "./AcCountPie.vue"
|
|
|
+import HourDetail from "./HourDetail.vue"
|
|
|
+import TechScore from "./TechScore.vue"
|
|
|
+import TeachScore from "./TeachScore.vue"
|
|
|
+import MinTable from "./MinTable.vue"
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ AcCountPie, TechScore, TeachScore, MinTable, HourDetail
|
|
|
+ },
|
|
|
+ inject: ['reload'],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ //总学时数据
|
|
|
+ allTimeInfo: {
|
|
|
+ complete: 0,
|
|
|
+ total: 50,
|
|
|
+ percent: 0
|
|
|
+ },
|
|
|
+ split1: 0.5,
|
|
|
+ split2: 0.5,
|
|
|
+ split3: 0.5,
|
|
|
+ itemCount: 10,
|
|
|
+ tmwCus: [],
|
|
|
+ srvAdr: 'China',
|
|
|
+ hasVerify: false, //是否完成手机号验证
|
|
|
+ acCount: [],
|
|
|
+ goingList: [],
|
|
|
+ noticeList: [],
|
|
|
+ viewNoticeStatus: false,
|
|
|
+ noticeIndex: 0,
|
|
|
+ strokeColor: ['#5cadff', '#2d8cf0'],
|
|
|
+ strokeColor1: ['#00ffa0', '#19be6b'],
|
|
|
+ onlineInfo: {
|
|
|
+ name: '线上研修',
|
|
|
+ total: 20,
|
|
|
+ value: 8
|
|
|
+ },
|
|
|
+ offlineInfo: {
|
|
|
+ name: '校本研修',
|
|
|
+ total: 20,
|
|
|
+ value: 8
|
|
|
+ },
|
|
|
+ verifyInfo: {
|
|
|
+ name: '认证材料',
|
|
|
+ total: 20,
|
|
|
+ value: 8
|
|
|
+ },
|
|
|
+ videoInfo: {
|
|
|
+ name: '课堂实录',
|
|
|
+ total: 20,
|
|
|
+ value: 8
|
|
|
+ },
|
|
|
+ trainCountList: [
|
|
|
+ {
|
|
|
+ text: '已学能力点',
|
|
|
+ img: require('@/assets/image/study_point.png'),
|
|
|
+ complete: 0,
|
|
|
+ total: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '检测合格能力点',
|
|
|
+ img: require('@/assets/image/ok_point.png'),
|
|
|
+ complete: 0,
|
|
|
+ total: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '成果提交',
|
|
|
+ img: require('@/assets/image/jyzx_app.png'),
|
|
|
+ complete: 0,
|
|
|
+ total: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '区级研修',
|
|
|
+ img: require('@/assets/image/area_study.png'),
|
|
|
+ complete: 0,
|
|
|
+ total: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '区级问卷',
|
|
|
+ img: require('@/assets/image/area_survey.png'),
|
|
|
+ complete: 0,
|
|
|
+ total: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '区级投票',
|
|
|
+ img: require('@/assets/image/area_vote.png'),
|
|
|
+ complete: 0,
|
|
|
+ total: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '校级研修',
|
|
|
+ img: require('@/assets/image/school_study.png'),
|
|
|
+ complete: 0,
|
|
|
+ total: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '校级问卷',
|
|
|
+ img: require('@/assets/image/school_survey.png'),
|
|
|
+ complete: 0,
|
|
|
+ total: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '校级投票',
|
|
|
+ img: require('@/assets/image/school_vote.png'),
|
|
|
+ complete: 0,
|
|
|
+ total: 0
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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) {
|
|
|
+ this.allTimeInfo.complete = res.alltime
|
|
|
+ this.allTimeInfo.total = res.setting.allTime
|
|
|
+ this.allTimeInfo.percent = res.setting.allTime ? res.alltime * 100 / res.setting.allTime : 0
|
|
|
+
|
|
|
+ // 线上研修
|
|
|
+ this.onlineInfo.total = res.setting.onlineTime
|
|
|
+ this.onlineInfo.value = res.onlineTime > res.setting.onlineTime ? res.setting.onlineTime : res.onlineTime
|
|
|
+
|
|
|
+ // 校本研修
|
|
|
+ this.offlineInfo.total = res.setting.offlineTime
|
|
|
+ this.offlineInfo.value = res.offlineTime > res.setting.offlineTime ? res.setting.offlineTime : res.offlineTime
|
|
|
+
|
|
|
+ // 认证材料
|
|
|
+ this.verifyInfo.total = res.setting.submitTime
|
|
|
+ this.verifyInfo.value = res.schoolScoreTime > res.setting.submitTime ? res.setting.submitTime : res.schoolScoreTime
|
|
|
+
|
|
|
+ // 课堂实录
|
|
|
+ this.videoInfo.total = res.setting.classTime
|
|
|
+ this.videoInfo.value = res.classVideoTime > res.setting.classTime ? res.setting.classTime : res.classVideoTime
|
|
|
+
|
|
|
+ //已学能力点
|
|
|
+ this.trainCountList[0].total = 30
|
|
|
+ this.trainCountList[0].complete = res.allAbilityCount
|
|
|
+
|
|
|
+ //检测合格能力点
|
|
|
+ this.trainCountList[1].total = res.subCount
|
|
|
+ this.trainCountList[1].complete = res.hasAbilityExercise
|
|
|
+
|
|
|
+ //成果提交
|
|
|
+ this.trainCountList[2].total = res.uploadTotalCount
|
|
|
+ this.trainCountList[2].complete = res.uploadDoneCount
|
|
|
+
|
|
|
+ //区级研修
|
|
|
+ this.trainCountList[3].total = res.offlineAreaJoinCount
|
|
|
+ this.trainCountList[3].complete = res.offlineAreaDoneCount
|
|
|
+
|
|
|
+ //区级问卷
|
|
|
+ this.trainCountList[4].total = res.surveyAreaJoinCount
|
|
|
+ this.trainCountList[4].complete = res.surveyAreaDoneCount
|
|
|
+
|
|
|
+ //区级投票
|
|
|
+ this.trainCountList[5].total = res.voteAreaJoinCount
|
|
|
+ this.trainCountList[5].complete = res.voteAreaDoneCount
|
|
|
+
|
|
|
+ //校级研修
|
|
|
+ this.trainCountList[6].total = res.offlineSchoolJoinCount
|
|
|
+ this.trainCountList[6].complete = res.offlineSchoolDoneCount
|
|
|
+
|
|
|
+ //校级问卷
|
|
|
+ this.trainCountList[7].total = res.surveyJoinCount
|
|
|
+ this.trainCountList[7].complete = res.surveyDoneCount
|
|
|
+
|
|
|
+ //校级投票
|
|
|
+ this.trainCountList[8].total = res.voteJoinCount
|
|
|
+ this.trainCountList[8].complete = res.voteDoneCount
|
|
|
+ }
|
|
|
+ }).finally(() => {
|
|
|
+ this.isLoading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ viewNotice(index) {
|
|
|
+ this.noticeIndex = index
|
|
|
+ this.viewNoticeStatus = true
|
|
|
+ },
|
|
|
+ //查询学校公告
|
|
|
+ findNotice() {
|
|
|
+ let params = {
|
|
|
+ code: this.$store.state.userInfo.schoolCode,
|
|
|
+ type: "school",
|
|
|
+ publish: 1
|
|
|
+ }
|
|
|
+ this.$api.notice.FindNotice(params).then(
|
|
|
+ res => {
|
|
|
+ this.noticeList = res.notices
|
|
|
+ },
|
|
|
+ err => {
|
|
|
+ this.$Message.error('API error!')
|
|
|
+ }
|
|
|
+ )
|
|
|
+ },
|
|
|
+ getAcIcon(type) {
|
|
|
+ let icon = ''
|
|
|
+ switch (type) {
|
|
|
+ case 'Exam':
|
|
|
+ icon = 'iconfont icon-test'
|
|
|
+ break
|
|
|
+ case 'Self':
|
|
|
+ icon = 'iconfont icon-activityT'
|
|
|
+ break
|
|
|
+ case 'Homework':
|
|
|
+ icon = 'iconfont icon-hw'
|
|
|
+ break
|
|
|
+ case 'Vote':
|
|
|
+ icon = 'iconfont icon-vote'
|
|
|
+ break
|
|
|
+ case 'Survey':
|
|
|
+ icon = 'iconfont icon-questionnaire'
|
|
|
+ break
|
|
|
+ default:
|
|
|
+ break
|
|
|
+ }
|
|
|
+ return icon
|
|
|
+ },
|
|
|
+ getTmwCus(data) {
|
|
|
+ this.tmwCus = []
|
|
|
+ this.tmwCus = this._.cloneDeep(data)
|
|
|
+ },
|
|
|
+ toAc(type, scope) {
|
|
|
+ },
|
|
|
+ toRecordPage() {
|
|
|
+ this.$router.push({
|
|
|
+ path: '/home/classRecord'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ toSelfLearn() {
|
|
|
+ //this.$router.push({
|
|
|
+ // path: '/home/SelfLearn'
|
|
|
+ //})
|
|
|
+ },
|
|
|
+ toJoinSchool() {
|
|
|
+ this.$router.push({
|
|
|
+ path: '/home/settings'
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ //获取活动统计数据已经进行中的活动
|
|
|
+ getAcCount() {
|
|
|
+ this.$api.learnActivity.ActivityCount({}).then(
|
|
|
+ res => {
|
|
|
+ if (res.totalCount && res.totalCount.length) {
|
|
|
+ res.totalCount.forEach(item => {
|
|
|
+ switch (item.key) {
|
|
|
+ case 'Exam':
|
|
|
+ item.name = this.$t('home.ac1')
|
|
|
+ break
|
|
|
+ case 'Self':
|
|
|
+ item.name = this.$t('home.ac2')
|
|
|
+ break
|
|
|
+ case 'Homework':
|
|
|
+ item.name = this.$t('home.ac3')
|
|
|
+ break
|
|
|
+ case 'Vote':
|
|
|
+ item.name = this.$t('home.ac4')
|
|
|
+ break
|
|
|
+ case 'Survey':
|
|
|
+ item.name = this.$t('home.ac5')
|
|
|
+ break
|
|
|
+ default:
|
|
|
+ break
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.acCount = res.totalCount
|
|
|
+ }
|
|
|
+ if (res.goingDatas) {
|
|
|
+ this.goingList = res.goingDatas
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ err => {
|
|
|
+ this.$Message.error('API error!')
|
|
|
+ }
|
|
|
+ )
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getAcCount()
|
|
|
+ this.getStudyTime()
|
|
|
+ if (this.$store.state.userInfo.hasSchool) {
|
|
|
+ this.findNotice()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.$EventBus.$off('onChangeSchool')
|
|
|
+ this.$EventBus.$on('onChangeSchool', (data) => {
|
|
|
+ this.getAcCount()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ //暂时只验证加入学校, 手机号需要对接API
|
|
|
+ isComplete() {
|
|
|
+ return this.$store.state.userInfo.hasSchool && this.hasVerify
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ '$store.state.userInfo.schoolCode': {
|
|
|
+ handler(n, o) {
|
|
|
+ this.getAcCount()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style scoped lang="less">
|
|
|
+@import "./NewHomePage.less";
|
|
|
+</style>
|
|
|
+<style lang="less">
|
|
|
+.home-page-container .ivu-card-body {
|
|
|
+ height: calc(100% - 52px);
|
|
|
+ padding: 0px;
|
|
|
+}
|
|
|
+.notice-text {
|
|
|
+ p {
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+.train-hour-box .ivu-chart-circle {
|
|
|
+ width: 80% !important;
|
|
|
+ height: fit-content !important;
|
|
|
+ max-width: 200px;
|
|
|
+}
|
|
|
+</style>
|