feat: 课程接口对接

This commit is contained in:
cgd_mac 2022-01-18 17:08:15 +08:00
parent e6d1d77cbb
commit 72ad8374db
11 changed files with 175 additions and 40 deletions

View File

@ -57,4 +57,8 @@ export default {
height: 100%; height: 100%;
} }
.ant-layout-footer{
display: none;
}
</style> </style>

View File

@ -10,13 +10,31 @@ const mycourseApi = {
getCourseDetail: 'myCourse/getCourseDetail', // 我的课程详情 getCourseDetail: 'myCourse/getCourseDetail', // 我的课程详情
getCourseCatalogue: 'myCourse/getCourseCatalogue', // 获取课程目录 getCourseCatalogue: 'myCourse/getCourseCatalogue', // 获取课程目录
simulateTestList: 'simulateTest/list', // 模拟测试列表 simulateTestList: 'simulateTest/list', // 模拟测试列表
simulateTestDetail: 'simulateTest/getQuestions' // 获取模拟测试详情 simulateTestDetail: 'simulateTest/getQuestions', // 获取模拟测试详情
operationList: 'classwork/getDetail', // 作业列表
getMyCourseList: 'studyStatistics/getMyCourseList' // 课程学习统计
}
export function reqMycourseCount (params) {
return request({
url: mycourseApi.getMyCourseList,
method: 'get',
params: params
})
}
export function reqOperationList (params) {
return request({
url: mycourseApi.operationList,
method: 'post',
params: params
})
} }
export function reqSimulateTestDetail (params) { export function reqSimulateTestDetail (params) {
return request({ return request({
url: mycourseApi.simulateTestDetail, url: mycourseApi.simulateTestDetail,
method: 'get', method: 'post',
params: params params: params
}) })
} }

View File

@ -21,6 +21,18 @@ import moment from 'moment'
import { FormModel } from 'ant-design-vue' import { FormModel } from 'ant-design-vue'
import { hasBtnPermission } from './utils/permissions' import { hasBtnPermission } from './utils/permissions'
window.Vue = Vue
// echart
// import { use } from 'echarts/core'
// import { CanvasRenderer } from 'echarts/renderers'
// import { BarChart } from 'echarts/charts'
// import {
// TitleComponent,
// TooltipComponent,
// LegendComponent,
// GridComponent
// } from 'echarts/components'
Vue.use(FormModel) Vue.use(FormModel)
Vue.prototype.hasPerm = hasBtnPermission Vue.prototype.hasPerm = hasBtnPermission
@ -33,6 +45,15 @@ Vue.component('page-header-wrapper', PageHeaderWrapper)
window.umi_plugin_ant_themeVar = themePluginConfig.theme window.umi_plugin_ant_themeVar = themePluginConfig.theme
// use([
// CanvasRenderer,
// BarChart,
// TitleComponent,
// TooltipComponent,
// LegendComponent,
// GridComponent
// ])
new Vue({ new Vue({
router, router,
store, store,

View File

@ -0,0 +1,52 @@
<template>
<div>
<template v-if="dataList && dataList.length>0">
<a-card v-for="(item, index) in dataList" :key="index" style="margin-bottom: 15px;">
<div class="flex-center" >
<div style="flex: 1;">
<h3>{{ item.name }}</h3>
<div><span style="margin-right: 20px;">提交时间{{ item.submitTime }}</span><span>出题范围{{ item.questionScope }}</span></div>
</div>
<div style="flex: 0 0 200px; text-align: right;">
<div @click="handlerDetail(item)" :span="24" style="margin-bottom: 10px;"><a-button type="primary" size="small" >查看详情</a-button></div>
<!-- <div @click="handlerPreview(item)" :span="24"><a-button type="danger" size="small">预览</a-button></div> -->
</div>
</div>
</a-card>
</template>
<template v-else>
<a-empty style="margin: 30px 0;" description="暂无相关作业" />
</template>
</div>
</template>
<script>
import { reqOperationList } from '@/api/mycourse/index'
export default {
props: {},
data () {
return {
dataList: []
}
},
mounted () {
this.getList()
},
methods: {
getList () {
const { person } = this.$store.state.user
reqOperationList({ personId: person.id, projectId: this.$route.query.courseId }).then(res => {
this.dataList = res.data
})
},
handlerDetail () {
}
}
}
</script>
<style lang="scss" scoped>
</style>

View File

@ -1,8 +1,8 @@
<template> <template>
<div> <div>
<a-table :columns="columns" :data-source="dataList"> <a-table :columns="columns" :data-source="dataList">
<template slot="date" slot-scope="text, record, index"> <template slot="timeSlot" slot-scope="text, record">
全天<a-button style="margin-left: 6px;" type="primary" size="small">进入考试</a-button> {{ record.timeSlot }}<a-button @click="handlerGoExam(record)" style="margin-left: 6px;" type="primary" size="small">进入考试</a-button>
</template> </template>
</a-table> </a-table>
</div> </div>
@ -14,12 +14,12 @@ export default {
data () { data () {
return { return {
columns: [ columns: [
{ dataIndex: 'courseName', title: '课程' }, { dataIndex: 'testName', title: '课程' },
{ dataIndex: 'type', title: '考核方式' }, { dataIndex: 'assessMode', title: '考核方式' },
{ dataIndex: 'examType', title: '考试方式' }, { dataIndex: 'testManner', title: '考试方式' },
{ dataIndex: 'subType', title: '提交形式' }, { dataIndex: 'submitWay', title: '提交形式' },
{ dataIndex: 'date', title: '考试时间段', scopedSlots: { customRender: 'date' } }, { dataIndex: 'timeSlot', title: '考试时间段', scopedSlots: { customRender: 'timeSlot' } },
{ dataIndex: 'time', title: '考试时长' } { dataIndex: 'examTime', title: '考试时长' }
], ],
dataList: [ dataList: [
] ]
@ -35,6 +35,12 @@ export default {
// console.log('', res) // console.log('', res)
this.dataList = res.data this.dataList = res.data
}) })
},
handlerGoExam (row) {
this.$router.push({
path: '/myexamDetail',
query: { type: 'test', projectId: this.$route.query.courseId }
})
} }
} }
} }

View File

@ -0,0 +1,29 @@
<template>
<div>学习统计</div>
</template>
<script>
import { reqMycourseCount } from '@/api/mycourse/index'
export default {
data () {
return {
data: {}
}
},
mounted () {
this.initData()
},
methods: {
initData () {
const { person } = this.$store.state.user
reqMycourseCount({ personId: person.id, projectId: this.$route.query.courseId }).then(res => {
this.data = res.data
})
}
}
}
</script>
<style>
</style>

View File

@ -24,8 +24,12 @@
<SimulationTest></SimulationTest> <SimulationTest></SimulationTest>
</div> </div>
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="3" tab="作业"> Content of Tab Pane 3 </a-tab-pane> <a-tab-pane key="3" tab="作业">
<a-tab-pane key="4" tab="学习统计"> Content of Tab Pane 3 </a-tab-pane> <OperationModule></OperationModule>
</a-tab-pane>
<a-tab-pane key="4" tab="学习统计">
<StatisticalLearning></StatisticalLearning>
</a-tab-pane>
</a-tabs> </a-tabs>
</div> </div>
<!-- 课中考试 --> <!-- 课中考试 -->
@ -40,10 +44,11 @@ import { videoPlayer } from 'vue-video-player'
import CourseCatalogue from './CourseCatalogue.vue' import CourseCatalogue from './CourseCatalogue.vue'
import SimulationTest from './SimulationTest.vue' import SimulationTest from './SimulationTest.vue'
import ExamDialog from './ExamDialog.vue' import ExamDialog from './ExamDialog.vue'
import OperationModule from './OperationModule.vue'
import { reqCourseDetail, reqCourseCatalogue } from '@/api/mycourse/index' import { reqCourseDetail, reqCourseCatalogue } from '@/api/mycourse/index'
export default { export default {
components: { CourseCatalogue, SimulationTest, ExamDialog, videoPlayer }, components: { CourseCatalogue, OperationModule, SimulationTest, ExamDialog, videoPlayer },
data () { data () {
return { return {
activeTab: '1', activeTab: '1',

View File

@ -22,14 +22,17 @@
<span slot="index" slot-scope="text, record, index"> <span slot="index" slot-scope="text, record, index">
{{ index + 1 }} {{ index + 1 }}
</span> </span>
<template slot="courseName" slot-scope="text, record, index"> <template slot="courseName" slot-scope="text, record">
<a-button @click="handlerDetail(record)" type="link" >{{ record.courseName }}</a-button> <a-button @click="handlerDetail(record)" type="link" >{{ record.courseName }}</a-button>
</template> </template>
<span slot="trainType" slot-scope="text, record">
<a-tag v-if="record.trainType === 1" color="red">必修课</a-tag>
<a-tag v-if="record.trainType === 2" color="blue">选修课</a-tag>
</span>
<span slot="status" slot-scope="text, record"> <span slot="status" slot-scope="text, record">
<a-tag v-if="record.status === 1" color="red">未开始</a-tag> <a-tag v-if="record.status === 1" color="red">未开始</a-tag>
<a-tag v-if="record.status === 2" color="blue">进行中</a-tag> <a-tag v-if="record.status === 2" color="blue">进行中</a-tag>
<a-tag v-if="record.status === 3" color="green">已完成</a-tag> <a-tag v-if="record.status === 3" color="green">已完成</a-tag>
<template v-else>-</template>
</span> </span>
<template slot="schedule" slot-scope="text, record"> <template slot="schedule" slot-scope="text, record">
<a-progress :percent="record.schedule" /> <a-progress :percent="record.schedule" />
@ -47,7 +50,7 @@
> >
<a>添加课程</a> <a>添加课程</a>
</a-popconfirm> </a-popconfirm>
<a v-if="record.status === 1" @click="handlerContinue(record)">继续学习</a> <a v-if="record.status === 2" @click="handlerContinue(record)">继续学习</a>
<a v-if="record.status === 3">已完成学习</a> <a v-if="record.status === 3">已完成学习</a>
</span> </span>
</s-table> </s-table>
@ -95,7 +98,8 @@ export default {
}, },
{ {
title: '课程类别', title: '课程类别',
dataIndex: 'trainType' dataIndex: 'trainType',
scopedSlots: { customRender: 'trainType' }
}, },
{ {
title: '开始时间', title: '开始时间',
@ -164,6 +168,7 @@ export default {
}, },
// //
handlerAddCourse (row) { handlerAddCourse (row) {
console.log('row', row)
const _this = this const _this = this
this.$emit('add', { this.$emit('add', {
row: row, row: row,

View File

@ -43,9 +43,9 @@ export default {
methods: { methods: {
// //
handlerAddCourse (row, callback) { handlerAddCourse ({ row, callback }) {
const { id: userId } = this.$store.state.person const { person } = this.$store.state.user
reqAddMyCourse({ personId: userId, projectId: row.id }).then(res => { reqAddMyCourse({ personId: person.id, projectId: row.id }).then(res => {
if (res.code === 200) { if (res.code === 200) {
this.$message.success('添加课程成功!') this.$message.success('添加课程成功!')
callback && callback() callback && callback()
@ -53,7 +53,7 @@ export default {
}) })
}, },
// //
handlerContinue (row) { handlerContinue ({ row }) {
this.$router.push({ this.$router.push({
path: '/mycourse/courseLearn', path: '/mycourse/courseLearn',
query: { courseId: row.id } query: { courseId: row.id }

View File

@ -72,15 +72,7 @@
</template> </template>
<script> <script>
import { use } from 'echarts/core' import "echarts";
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart } from 'echarts/charts'
import {
TitleComponent,
TooltipComponent,
LegendComponent,
GridComponent
} from 'echarts/components'
import VChart, { THEME_KEY } from 'vue-echarts' import VChart, { THEME_KEY } from 'vue-echarts'
import { import {
ChartCard, ChartCard,
@ -95,15 +87,6 @@ import {
} from '@/components' } from '@/components'
import { getMyexamCount } from '@/api/myexamCount/index.js' import { getMyexamCount } from '@/api/myexamCount/index.js'
use([
CanvasRenderer,
BarChart,
TitleComponent,
TooltipComponent,
LegendComponent,
GridComponent
])
export default { export default {
components: { components: {
ChartCard, ChartCard,
@ -179,7 +162,7 @@ export default {
tooltip: { tooltip: {
trigger: 'item' trigger: 'item'
}, },
colors: ['#1890ff'], color: ['#1890ff'],
xAxis: { xAxis: {
type: 'category', type: 'category',
data: ['必修课程', '选修课程', '必须公告'] data: ['必修课程', '选修课程', '必须公告']

View File

@ -8,6 +8,7 @@
import DbExam from '@/components/DbExam/index' import DbExam from '@/components/DbExam/index'
import { practiceStartAnswer, practiceExecuteSubmit } from '@/api/practice/practice' import { practiceStartAnswer, practiceExecuteSubmit } from '@/api/practice/practice'
import { reqExamExam, reqExamSubmit } from '@/api/myexam/exam.js' import { reqExamExam, reqExamSubmit } from '@/api/myexam/exam.js'
import { reqSimulateTestDetail } from '@/api/mycourse/index'
import _ from 'lodash' import _ from 'lodash'
export default { export default {
components: { DbExam }, components: { DbExam },
@ -32,6 +33,17 @@ export default {
if (type === 'exam') { if (type === 'exam') {
this.getExamDetail() this.getExamDetail()
} }
if (type === 'test') {
this.getTestDetail()
}
},
//
getTestDetail () {
const query = this.query
const { person } = this.$store.state.user
reqSimulateTestDetail({ projectId: Number(query.projectId), personId: person.id }).then(res => {
this.examData = res.data
})
}, },
// //
getPracticeDetail () { getPracticeDetail () {