|
@@ -15,35 +15,80 @@
|
|
|
<div @click="selectActivity(index)" v-for="(item,index) in classList" :class="index == curClassIndex ? 'activity-target-item block-bg block-bg-active':'block-bg activity-target-item'">
|
|
|
<p class="target-name">
|
|
|
{{item.classroomName}}
|
|
|
- <span class="class-type-label" :title="item.code === $store.state.userInfo.schoolCode ? '校本班级':'私人班级'">{{item.code === $store.state.userInfo.schoolCode ? '校':'私'}}</span>
|
|
|
- <span class="activity-status" :style="{background: item[id] ? '#19be6b':'#ed4014'}">{{item[id] ? '进行中':'未分享'}}</span>
|
|
|
+ <span class="class-type-label" :title="item.code === $store.state.userInfo.schoolCode ? '校本班级':'个人班级'">{{item.code === $store.state.userInfo.schoolCode ? '校':'私'}}</span>
|
|
|
+ <span class="activity-status" :style="{background: item[learnContent.id] ? '#19be6b':'#ed4014'}">{{item[learnContent.id] ? '进行中':'未分享'}}</span>
|
|
|
</p>
|
|
|
<p style="margin-top:6px;">
|
|
|
<span class="info-label">活动类型:</span>
|
|
|
- <span class="info-value">{{ !item[id] ? '-- --' : item[id].type == 1 ? '自主学习':'课前预习'}}</span>
|
|
|
+ <span class="info-value">{{ !item[learnContent.id] ? '-- --' : item[learnContent.id].type == 1 ? '自主学习':'课前预习'}}</span>
|
|
|
</p>
|
|
|
- <p style="margin-top:6px;" v-if="item[id]">
|
|
|
- <span class="info-label">{{ item[id].type == 1 ? '开始时间:' : '结束时间:' }}</span>
|
|
|
- <span class="info-value">{{item[id].type == 1 ? $tools.formatTime(item[id].createTime,'yyyy-MM-dd') : $tools.formatTime(item[id].endTime)}}</span>
|
|
|
+ <p style="margin-top:6px;" v-if="item[learnContent.id]">
|
|
|
+ <span class="info-label">{{ item[learnContent.id].type == 1 ? '开始时间:' : '结束时间:' }}</span>
|
|
|
+ <span class="info-value">{{item[learnContent.id].type == 1 ? $tools.formatTime(item[learnContent.id].createTime,'yyyy-MM-dd') : $tools.formatTime(item[learnContent.id].endTime)}}</span>
|
|
|
</p>
|
|
|
<p style="margin-top:6px;" v-else>
|
|
|
<span class="info-label">结束时间:</span>
|
|
|
<span class="info-value">{{item.endTime ? item.endTime:'-- --'}}</span>
|
|
|
</p>
|
|
|
</div>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
</div>
|
|
|
<div slot="right" class="activity-detail-info">
|
|
|
<vuescroll>
|
|
|
- <div v-if="classList[curClassIndex][id]">
|
|
|
+ <div v-if="classList[curClassIndex][learnContent.id]">
|
|
|
<transition name="fade" mode="out-in">
|
|
|
- <LearnProgress v-if="!showAnswer" @goToAnswer="goToAnswer"></LearnProgress>
|
|
|
-
|
|
|
+ <!--<LearnProgress v-if="!showAnswer" @goToAnswer="goToAnswer"></LearnProgress>-->
|
|
|
+ <div class="learn-progress-container" v-if="!showAnswer">
|
|
|
+ <div class="learn-progress-main dark-iview-table">
|
|
|
+ <vuescroll>
|
|
|
+ <p style="color:#EEEEEE;padding-left:15px;font-size:16px;margin-top:15px;">活动进度概览</p>
|
|
|
+ <div class="whole-progress-wrap">
|
|
|
+ <div class="progress-histogram-wrap" style="margin:auto;">
|
|
|
+ <ProgressHistogram :countData="countData" @clickStep="clickStep"></ProgressHistogram>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <p style="color:#EEEEEE;padding-left:15px;font-size:16px;margin-top:50px;margin-bottom:30px;">
|
|
|
+ 学生进度概览
|
|
|
+ </p>
|
|
|
+ <div class="learn-progress-filter dark-iview-select">
|
|
|
+ <span class="filter-label">搜学生:</span>
|
|
|
+ <Select v-model="curStudent" filterable style="display: inline-block;width: 200px;" size="small">
|
|
|
+ <Option v-for="item in studentData" :value="item.value" :key="item.value">{{ item.label }}</Option>
|
|
|
+ </Select>
|
|
|
+ </div>
|
|
|
+ <Table :columns="studentColumns" :data="studentPageData" :show-header="true" style="margin:0px 25px;" no-data-text="此班暂无学生">
|
|
|
+ <template slot-scope="{ row, index }" slot="isComplete">
|
|
|
+ <Icon size="20" type="md-checkmark" color="aqua" v-if="row.isComplete == 1" />
|
|
|
+ <span v-else>--</span>
|
|
|
+ </template>
|
|
|
+ <template slot-scope="{ row, index }" slot="progress">
|
|
|
+ <Progress :percent="50" status="normal" />
|
|
|
+ </template>
|
|
|
+ <template slot-scope="{ row, index }" slot="question">
|
|
|
+ <div>
|
|
|
+ <span title="提问/留言 次数">
|
|
|
+ <Icon type="ios-create" size="16" />5
|
|
|
+ </span>
|
|
|
+ <span style="color:rgb(45, 241, 142);margin-left:10px;">
|
|
|
+ <Icon type="md-thumbs-up" />32
|
|
|
+ </span>
|
|
|
+ <span style="color:#f90;margin-left:10px;">
|
|
|
+ <Icon type="md-thumbs-down" />10
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template slot-scope="{ row, index }" slot="action">
|
|
|
+ <span @click="goToAnswer" class="to-detail-info">查看详情</span>
|
|
|
+ </template>
|
|
|
+ </Table>
|
|
|
+ <div style="width:100%;text-align:center;margin-top:20px;" class="dark-iview-page">
|
|
|
+ <Page :total="studentData.length" size="small" :current.sync="currentPage" :page-size="pageSize" show-sizer show-total @on-change="getPageData" @on-page-size-change="getPageData($event,'size')" />
|
|
|
+ </div>
|
|
|
+ </vuescroll>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</transition>
|
|
|
<transition name="fade" mode="out-in">
|
|
|
- <AnswerRecord v-if="showAnswer" @closeAnswerDetail="closeAnswerDetail"></AnswerRecord>
|
|
|
+ <AnswerRecord v-if="showAnswer" @closeAnswerDetail="showAnswer = false"></AnswerRecord>
|
|
|
</transition>
|
|
|
</div>
|
|
|
<NoData v-else textContent="此班未分享,暂无学习数据" style="padding-top:200px;"></NoData>
|
|
@@ -84,20 +129,25 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
+ import ProgressHistogram from '@/components/learnactivity/ProgressHistogram.vue'
|
|
|
import NoData from '@/common/NoData.vue'
|
|
|
import Loading from '@/common/Loading.vue'
|
|
|
- import LearnProgress from '@/view/selflearning/LearnProgress.vue'
|
|
|
+ //import LearnProgress from './LearnProgress.vue'
|
|
|
import AnswerDetail from './AnswerDetail.vue'
|
|
|
import AnswerRecord from './AnswerRecord.vue'
|
|
|
|
|
|
export default {
|
|
|
components: {
|
|
|
- LearnProgress,AnswerDetail,AnswerRecord,NoData,Loading
|
|
|
+ AnswerDetail,AnswerRecord,NoData,Loading,ProgressHistogram
|
|
|
},
|
|
|
props: {
|
|
|
- id: {
|
|
|
- default: '',
|
|
|
- type: String
|
|
|
+ learnContent: {
|
|
|
+ default: () => {
|
|
|
+ return {
|
|
|
+ id:''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ type: Object
|
|
|
},
|
|
|
classList: {
|
|
|
default: () => {
|
|
@@ -108,14 +158,28 @@
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- publishTypeList: [
|
|
|
- {
|
|
|
- value: '0',
|
|
|
- label:'立即发布'
|
|
|
- },
|
|
|
+ recordList: [
|
|
|
{
|
|
|
- value: '1',
|
|
|
- label:'定时发布'
|
|
|
+ id: '',
|
|
|
+ code: 'habook0001',
|
|
|
+ pk: 'Record',
|
|
|
+ steps: [
|
|
|
+ {
|
|
|
+ resource: [
|
|
|
+ {
|
|
|
+ order: 0,
|
|
|
+ costTime: ''
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ answer: [
|
|
|
+ {
|
|
|
+ order: 0,
|
|
|
+ ans: '',
|
|
|
+ costTime:''
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
}
|
|
|
],
|
|
|
activityTypeList: [
|
|
@@ -147,15 +211,65 @@
|
|
|
publishStatus: false,
|
|
|
showAnswer: false,
|
|
|
curClassIndex:0,
|
|
|
- split1: 0.25
|
|
|
+ split1: 0.25,
|
|
|
+
|
|
|
+ pageSize: 10,
|
|
|
+ currentPage:1,
|
|
|
+ dataIndex: 1,
|
|
|
+ curStudent: '',
|
|
|
+ studentData: [],
|
|
|
+ studentPageData:[],
|
|
|
+ studentColumns: [
|
|
|
+ {
|
|
|
+ title: '姓名',
|
|
|
+ key: 'name',
|
|
|
+ width:180
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '学习进度',
|
|
|
+ slot: 'progress',
|
|
|
+ width: 200,
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '提问/留言',
|
|
|
+ slot: 'question',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ slot: 'action',
|
|
|
+ width: 100
|
|
|
+ }
|
|
|
+ ],
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ clickStep(data) {
|
|
|
+ this.dataIndex = data.dataIndex
|
|
|
+ },
|
|
|
+ //学生表格分页
|
|
|
+ getPageData(number, type) {
|
|
|
+ if (type == 'size') {
|
|
|
+ this.pageSize = number
|
|
|
+ }
|
|
|
+ console.log(this.pageSize)
|
|
|
+ console.log(this.currentPage)
|
|
|
+ let starIndex = this.pageSize * (this.currentPage - 1)
|
|
|
+ let endIndex = this.pageSize * this.currentPage > this.studentData.length ? this.studentData.length : this.pageSize * this.currentPage
|
|
|
+ this.studentPageData = this.studentData.slice(starIndex, endIndex)
|
|
|
+ },
|
|
|
+ goToAnswer() {
|
|
|
+ this.$emit('goToAnswer')
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 确认分享学习内容
|
|
|
+ * */
|
|
|
confirmPublish() {
|
|
|
this.$refs.activityInfo.validate((valid) => {
|
|
|
if (valid) {
|
|
|
let requestData = {
|
|
|
- id: this.id,
|
|
|
+ id: this.learnContent.id,
|
|
|
code: this.classList[this.curClassIndex].classroomCode,
|
|
|
endTime: this.activityInfo.endTime ? this.activityInfo.endTime: 0,
|
|
|
status: 200,
|
|
@@ -181,16 +295,34 @@
|
|
|
},
|
|
|
goToAnswer() {
|
|
|
this.showAnswer = true
|
|
|
- },
|
|
|
- closeAnswerDetail() {
|
|
|
- this.showAnswer = false
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ countData() {
|
|
|
+ if (this.learnContent.pk == 'LearnProcess') {
|
|
|
+ let labels = this.learnContent.steps.map((item) => {
|
|
|
+ return item.name
|
|
|
+ })
|
|
|
+ return {
|
|
|
+ xAxisData: labels,
|
|
|
+ seriesData: [42, 29, 19, 5],
|
|
|
+ studentCount: 50
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ let labels = [this.learnContent.name]
|
|
|
+ return {
|
|
|
+ xAxisData: labels,
|
|
|
+ seriesData: [42],
|
|
|
+ studentCount: 50
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
},
|
|
|
created() {
|
|
|
-
|
|
|
+ this.getPageData()
|
|
|
}
|
|
|
}
|
|
|
</script>
|