feat: uI部分
This commit is contained in:
cgd_mac
parent
56874cf27a
commit
93ba4f1e80
|
|
@ -19,6 +19,7 @@
|
|||
"core-js": "^3.1.2",
|
||||
"dplayer": "^1.26.0",
|
||||
"draftjs-to-html": "^0.9.1",
|
||||
"echarts": "^5.2.2",
|
||||
"enquire.js": "^2.1.6",
|
||||
"file-saver": "^2.0.5",
|
||||
"html-to-draftjs": "^1.5.0",
|
||||
|
|
@ -54,6 +55,7 @@
|
|||
"@vue/cli-plugin-unit-jest": "^4.0.4",
|
||||
"@vue/cli-plugin-vuex": "^4.0.4",
|
||||
"@vue/cli-service": "^4.0.4",
|
||||
"@vue/composition-api": "^1.4.4",
|
||||
"@vue/eslint-config-standard": "^4.0.0",
|
||||
"@vue/test-utils": "^1.0.0-beta.29",
|
||||
"babel-eslint": "^10.0.1",
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
const countApi = {
|
||||
myexamCount: 'studyStatistics/getMyCourseList' // 学习统计
|
||||
myexamCount: 'study/data/home' // 学习统计
|
||||
}
|
||||
|
||||
export function getMyexamCount (params) {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
const myresourceApi = {
|
||||
list: 'study/data/home' // 学习统计
|
||||
}
|
||||
|
||||
export function gerMyresource (params) {
|
||||
return request({
|
||||
url: myresourceApi.list,
|
||||
method: 'get',
|
||||
params: params
|
||||
})
|
||||
}
|
||||
|
|
@ -1,49 +1,87 @@
|
|||
<template>
|
||||
<a-row :gutter="24">
|
||||
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
|
||||
<chart-card :loading="loading" title="" total="300">
|
||||
<chart-card :loading="loading" title="" :total="data.totalClassHour">
|
||||
<template slot="footer">当前累计学时</template>
|
||||
</chart-card>
|
||||
</a-col>
|
||||
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
|
||||
<chart-card :loading="loading" title="" total="300">
|
||||
<chart-card :loading="loading" title="" :total="data.totalCourse">
|
||||
<template slot="footer">累计学习课程</template>
|
||||
</chart-card>
|
||||
</a-col>
|
||||
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
|
||||
<chart-card :loading="loading" title="" total="300">
|
||||
<chart-card :loading="loading" title="" :total="data.completeCourse">
|
||||
<template slot="footer">结业课程</template>
|
||||
</chart-card>
|
||||
</a-col>
|
||||
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
|
||||
<chart-card :loading="loading" title="" total="300">
|
||||
<template slot="footer">结业课程</template>
|
||||
<chart-card :loading="loading" title="" :total="data.examSize">
|
||||
<template slot="footer">考试次数</template>
|
||||
</chart-card>
|
||||
</a-col>
|
||||
<a-col
|
||||
:xl="12"
|
||||
:lg="24"
|
||||
:md="24"
|
||||
:sm="24"
|
||||
:xs="24"
|
||||
:span="24"
|
||||
:style="{ marginBottom: '24px' }">
|
||||
<a-card :bordered="false" title="年度学时完成情况" :style="{ height: '100%' }">
|
||||
<a-card :bordered="false" :style="{ height: '100%' }">
|
||||
<div class="flex-center" style="justify-content: flex-start;" slot="title">
|
||||
<h4 style="margin: 0;">年度学时完成情况</h4>
|
||||
<div style="flex: 0 0 220px;margin: 0 10px;"><a-progress :percent="data.yearClassHourSituation * 100" :show-info="false" /></div>
|
||||
<h4 style="margin: 0;">{{ data.yearTotalClassHour }}学时/{{ data.yearClassHourRequi }}学时</h4>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col
|
||||
:xl="12"
|
||||
:lg="24"
|
||||
:md="24"
|
||||
:sm="24"
|
||||
:xs="24"
|
||||
:span="24"
|
||||
:style="{ marginBottom: '24px' }">
|
||||
<a-card :bordered="false" title="学时统计图" :style="{ height: '100%' }">
|
||||
<v-chart class="chart" :option="chartOptions" autoresize />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col
|
||||
:span="24"
|
||||
:style="{ marginBottom: '24px' }">
|
||||
<a-card :bordered="false" title="所选课程的成绩情况" :style="{ height: '100%' }">
|
||||
<a-table
|
||||
ref="table"
|
||||
:pageSize="5"
|
||||
:columns="columns"
|
||||
:showPagination="false"
|
||||
:data-source="data.courseList"
|
||||
:rowKey="record => record.courseId">
|
||||
<template slot="trainSdate" slot-scope="text, record">
|
||||
{{ record.trainSdate }}至{{ record.trainEdate }}
|
||||
</template>
|
||||
<span slot="courseType" slot-scope="text, record">
|
||||
<a-tag v-if="record.courseType === 1" color="blue">选修</a-tag>
|
||||
<a-tag v-if="record.courseType === 0" color="red">必修</a-tag>
|
||||
<template v-else>-</template>
|
||||
</span>
|
||||
<span slot="status" slot-scope="text, record">
|
||||
<a-tag v-if="record.status === 0" color="blue">在修</a-tag>
|
||||
<a-tag v-if="record.status === 1" color="green">修完课程通过</a-tag>
|
||||
<template v-else>-</template>
|
||||
</span>
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a @click="handlerDetail(record)">查看详情</a>
|
||||
</span>
|
||||
</a-table>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { use } from 'echarts/core'
|
||||
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 {
|
||||
ChartCard,
|
||||
MiniArea,
|
||||
|
|
@ -56,6 +94,16 @@ import {
|
|||
MiniSmoothArea
|
||||
} from '@/components'
|
||||
import { getMyexamCount } from '@/api/myexamCount/index.js'
|
||||
|
||||
use([
|
||||
CanvasRenderer,
|
||||
BarChart,
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
GridComponent
|
||||
])
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ChartCard,
|
||||
|
|
@ -66,11 +114,51 @@ export default {
|
|||
Bar,
|
||||
Trend,
|
||||
NumberInfo,
|
||||
MiniSmoothArea
|
||||
MiniSmoothArea,
|
||||
VChart
|
||||
},
|
||||
provide: {
|
||||
[THEME_KEY]: 'light'
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
loading: false
|
||||
data: {},
|
||||
loading: true,
|
||||
chartOptions: {},
|
||||
columns: [
|
||||
{
|
||||
title: '课程名称',
|
||||
dataIndex: 'courseName'
|
||||
},
|
||||
{
|
||||
title: '课程类别',
|
||||
dataIndex: 'courseType',
|
||||
scopedSlots: { customRender: 'courseType' }
|
||||
},
|
||||
{
|
||||
title: '开始时间',
|
||||
dataIndex: 'startTime'
|
||||
},
|
||||
{
|
||||
title: '课程状态',
|
||||
dataIndex: 'status',
|
||||
scopedSlots: { customRender: 'status' }
|
||||
},
|
||||
{
|
||||
title: '学时',
|
||||
dataIndex: 'studyTime'
|
||||
},
|
||||
{
|
||||
title: '考试成绩',
|
||||
dataIndex: 'testResult'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: '150px',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: { customRender: 'action' }
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
|
|
@ -79,15 +167,55 @@ export default {
|
|||
methods: {
|
||||
initData () {
|
||||
console.log('this.$sotre', this.$store)
|
||||
const { id: userId } = this.$store.state.person
|
||||
getMyexamCount({ personId: userId }).then(res => {
|
||||
getMyexamCount().then(res => {
|
||||
console.log('data', res)
|
||||
this.data = res.data
|
||||
this.loading = false
|
||||
this.initChart(res.data)
|
||||
})
|
||||
},
|
||||
initChart (data) {
|
||||
this.chartOptions = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
colors: ['#1890ff'],
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['必修课程', '选修课程', '必须公告']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
grid: {
|
||||
left: 60,
|
||||
top: 30,
|
||||
right: 30,
|
||||
bottom: 30
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '课时',
|
||||
type: 'bar',
|
||||
barMaxWidth: 30,
|
||||
data: [data.yearClassHour1, data.yearClassHour2, data.yearClassHour3],
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: 'rgba(180, 180, 180, 0.2)'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
handlerDetail (row) {
|
||||
this.$router.push({ path: '/myresult', query: { id: row.id } })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
.chart{
|
||||
height: 300px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,101 @@
|
|||
<template>
|
||||
<a-card :bordered="false">
|
||||
我的公告
|
||||
<div class="table-page-search-wrapper">
|
||||
<SearchCom
|
||||
:form="queryParam"
|
||||
:list="queryOptions"
|
||||
@search="handleRefresh"
|
||||
@reset="
|
||||
() => {
|
||||
queryParam = {}
|
||||
handleRefresh()
|
||||
}
|
||||
"></SearchCom>
|
||||
</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><a href="javascript:void(0);">建筑施工安全培训第一期课程学习（6.8-7.8）</a></h3>
|
||||
<div><span style="margin-right: 20px;">下载次数{{ item.rightQuestions }}次</span><span>预览次数：{{ item.submitTime }}次</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
<div class="flex-center">
|
||||
<a-pagination @change="changePagination" :default-current="params.pageNum" :total="total" />
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-empty style="margin: 30px 0;" />
|
||||
</template>
|
||||
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
import { Pagination, Empty } from 'ant-design-vue'
|
||||
import { SearchCom } from '@/components'
|
||||
import { dictToTree } from '@/utils/util'
|
||||
import { dictionaryDropDown } from '@/api/sys/dictionaryItem'
|
||||
import { gerMyresource } from '@/api/myresource/index'
|
||||
|
||||
export default {
|
||||
components: { SearchCom, 'a-pagination': Pagination, 'a-empty': Empty },
|
||||
data () {
|
||||
return {
|
||||
dataList: [],
|
||||
total: 0,
|
||||
params: {
|
||||
pageSize: 10,
|
||||
pageNum: 1
|
||||
},
|
||||
queryParam: {
|
||||
name: '', // 课程分类
|
||||
trainWay: ''
|
||||
},
|
||||
queryOptions: [
|
||||
{ type: 'select-dic-tree', placeholder: '课程类别', key: 'trainWay', options: [] }
|
||||
]
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.dictionaryDropDown()
|
||||
},
|
||||
mounted () {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
getList () {
|
||||
this.dataList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
|
||||
// gerMyresource(this.params).then(res => {
|
||||
// // console.log('>>>>>>', res)
|
||||
// })
|
||||
},
|
||||
changePagination (page, size) {
|
||||
this.params.pageSize = size
|
||||
this.params.pageNum = page
|
||||
this.$nextTick(() => {
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
handlerDown () {
|
||||
|
||||
},
|
||||
handlerPreview () {},
|
||||
handleRefresh () {
|
||||
this.getList()
|
||||
},
|
||||
// 获取数据词典
|
||||
dictionaryDropDown () {
|
||||
dictionaryDropDown({ dictionaryCode: '0006' }).then((res) => {
|
||||
this.queryOptions[1].options = dictToTree(res.data, [], 0)
|
||||
this.loading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
<style lang="less">
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
}
|
||||
"></SearchCom>
|
||||
</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;">
|
||||
|
|
@ -19,30 +20,38 @@
|
|||
<div><span style="margin-right: 20px;">下载次数{{ item.rightQuestions }}次</span><span>预览次数：{{ item.submitTime }}次</span></div>
|
||||
</div>
|
||||
<div style="flex: 0 0 200px; text-align: right;">
|
||||
<div @click="handlerDown()" :span="24" style="margin-bottom: 10px;"><a-button type="primary" size="small" >下载</a-button></div>
|
||||
<div @click="handlerPreview()" :span="24"><a-button type="danger" size="small">预览</a-button></div>
|
||||
<div @click="handlerDown(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>
|
||||
<div class="flex-center">
|
||||
<a-pagination :default-current="params.pageNum" :total="params.total" />
|
||||
<a-pagination @change="changePagination" :default-current="params.pageNum" :total="total" />
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-empty style="margin: 30px 0;" />
|
||||
</template>
|
||||
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Pagination, Empty } from 'ant-design-vue'
|
||||
import { SearchCom } from '@/components'
|
||||
import { dictToTree } from '@/utils/util'
|
||||
import { dictionaryDropDown } from '@/api/sys/dictionaryItem'
|
||||
import { gerMyresource } from '@/api/myresource/index'
|
||||
|
||||
export default {
|
||||
components: { SearchCom },
|
||||
components: { SearchCom, 'a-pagination': Pagination, 'a-empty': Empty },
|
||||
data () {
|
||||
return {
|
||||
dataList: [],
|
||||
total: 0,
|
||||
params: {
|
||||
pageNum: 1,
|
||||
total: 100
|
||||
pageSize: 10,
|
||||
pageNum: 1
|
||||
},
|
||||
queryParam: {
|
||||
name: '', // 课程分类
|
||||
|
|
@ -61,7 +70,17 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
getList () {
|
||||
|
||||
gerMyresource(this.params).then(res => {
|
||||
console.log('>>>>>>', res)
|
||||
this.dataList = res.data.courseList
|
||||
})
|
||||
},
|
||||
changePagination (page, size) {
|
||||
this.params.pageSize = size
|
||||
this.params.pageNum = page
|
||||
this.$nextTick(() => {
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
handlerDown () {
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue