feat: uI部分
This commit is contained in:
parent
56874cf27a
commit
93ba4f1e80
|
@ -19,6 +19,7 @@
|
||||||
"core-js": "^3.1.2",
|
"core-js": "^3.1.2",
|
||||||
"dplayer": "^1.26.0",
|
"dplayer": "^1.26.0",
|
||||||
"draftjs-to-html": "^0.9.1",
|
"draftjs-to-html": "^0.9.1",
|
||||||
|
"echarts": "^5.2.2",
|
||||||
"enquire.js": "^2.1.6",
|
"enquire.js": "^2.1.6",
|
||||||
"file-saver": "^2.0.5",
|
"file-saver": "^2.0.5",
|
||||||
"html-to-draftjs": "^1.5.0",
|
"html-to-draftjs": "^1.5.0",
|
||||||
|
@ -54,6 +55,7 @@
|
||||||
"@vue/cli-plugin-unit-jest": "^4.0.4",
|
"@vue/cli-plugin-unit-jest": "^4.0.4",
|
||||||
"@vue/cli-plugin-vuex": "^4.0.4",
|
"@vue/cli-plugin-vuex": "^4.0.4",
|
||||||
"@vue/cli-service": "^4.0.4",
|
"@vue/cli-service": "^4.0.4",
|
||||||
|
"@vue/composition-api": "^1.4.4",
|
||||||
"@vue/eslint-config-standard": "^4.0.0",
|
"@vue/eslint-config-standard": "^4.0.0",
|
||||||
"@vue/test-utils": "^1.0.0-beta.29",
|
"@vue/test-utils": "^1.0.0-beta.29",
|
||||||
"babel-eslint": "^10.0.1",
|
"babel-eslint": "^10.0.1",
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import request from '@/utils/request'
|
import request from '@/utils/request'
|
||||||
|
|
||||||
const countApi = {
|
const countApi = {
|
||||||
myexamCount: 'studyStatistics/getMyCourseList' // 学习统计
|
myexamCount: 'study/data/home' // 学习统计
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getMyexamCount (params) {
|
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>
|
<template>
|
||||||
<a-row :gutter="24">
|
<a-row :gutter="24">
|
||||||
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
|
<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>
|
<template slot="footer">当前累计学时</template>
|
||||||
</chart-card>
|
</chart-card>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
|
<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>
|
<template slot="footer">累计学习课程</template>
|
||||||
</chart-card>
|
</chart-card>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
|
<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>
|
<template slot="footer">结业课程</template>
|
||||||
</chart-card>
|
</chart-card>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
|
<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.examSize">
|
||||||
<template slot="footer">结业课程</template>
|
<template slot="footer">考试次数</template>
|
||||||
</chart-card>
|
</chart-card>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col
|
<a-col
|
||||||
:xl="12"
|
:span="24"
|
||||||
:lg="24"
|
|
||||||
:md="24"
|
|
||||||
:sm="24"
|
|
||||||
:xs="24"
|
|
||||||
:style="{ marginBottom: '24px' }">
|
: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-card>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col
|
<a-col
|
||||||
:xl="12"
|
:span="24"
|
||||||
:lg="24"
|
:style="{ marginBottom: '24px' }">
|
||||||
:md="24"
|
<a-card :bordered="false" title="学时统计图" :style="{ height: '100%' }">
|
||||||
:sm="24"
|
<v-chart class="chart" :option="chartOptions" autoresize />
|
||||||
:xs="24"
|
</a-card>
|
||||||
|
</a-col>
|
||||||
|
<a-col
|
||||||
|
:span="24"
|
||||||
:style="{ marginBottom: '24px' }">
|
:style="{ marginBottom: '24px' }">
|
||||||
<a-card :bordered="false" title="所选课程的成绩情况" :style="{ height: '100%' }">
|
<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-card>
|
||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<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 {
|
import {
|
||||||
ChartCard,
|
ChartCard,
|
||||||
MiniArea,
|
MiniArea,
|
||||||
|
@ -56,6 +94,16 @@ import {
|
||||||
MiniSmoothArea
|
MiniSmoothArea
|
||||||
} 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,
|
||||||
|
@ -66,11 +114,51 @@ export default {
|
||||||
Bar,
|
Bar,
|
||||||
Trend,
|
Trend,
|
||||||
NumberInfo,
|
NumberInfo,
|
||||||
MiniSmoothArea
|
MiniSmoothArea,
|
||||||
|
VChart
|
||||||
|
},
|
||||||
|
provide: {
|
||||||
|
[THEME_KEY]: 'light'
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
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 () {
|
mounted () {
|
||||||
|
@ -79,15 +167,55 @@ export default {
|
||||||
methods: {
|
methods: {
|
||||||
initData () {
|
initData () {
|
||||||
console.log('this.$sotre', this.$store)
|
console.log('this.$sotre', this.$store)
|
||||||
const { id: userId } = this.$store.state.person
|
getMyexamCount().then(res => {
|
||||||
getMyexamCount({ personId: userId }).then(res => {
|
|
||||||
console.log('data', 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>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
.chart{
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -1,15 +1,101 @@
|
||||||
<template>
|
<template>
|
||||||
<a-card :bordered="false">
|
<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>
|
</a-card>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<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>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less">
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -12,6 +12,7 @@
|
||||||
}
|
}
|
||||||
"></SearchCom>
|
"></SearchCom>
|
||||||
</div>
|
</div>
|
||||||
|
<template v-if="dataList && dataList.length>0">
|
||||||
<a-card v-for="(item, index) in dataList" :key="index" style="margin-bottom: 15px;">
|
<a-card v-for="(item, index) in dataList" :key="index" style="margin-bottom: 15px;">
|
||||||
<div class="flex-center" >
|
<div class="flex-center" >
|
||||||
<div style="flex: 1;">
|
<div style="flex: 1;">
|
||||||
|
@ -19,30 +20,38 @@
|
||||||
<div><span style="margin-right: 20px;">下载次数{{ item.rightQuestions }}次</span><span>预览次数:{{ item.submitTime }}次</span></div>
|
<div><span style="margin-right: 20px;">下载次数{{ item.rightQuestions }}次</span><span>预览次数:{{ item.submitTime }}次</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div style="flex: 0 0 200px; text-align: right;">
|
<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="handlerDown(item)" :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="handlerPreview(item)" :span="24"><a-button type="danger" size="small">预览</a-button></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a-card>
|
</a-card>
|
||||||
<div class="flex-center">
|
<div class="flex-center">
|
||||||
<a-pagination :default-current="params.pageNum" :total="params.total" />
|
<a-pagination @change="changePagination" :default-current="params.pageNum" :total="total" />
|
||||||
</div>
|
</div>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<a-empty style="margin: 30px 0;" />
|
||||||
|
</template>
|
||||||
|
|
||||||
</a-card>
|
</a-card>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { Pagination, Empty } from 'ant-design-vue'
|
||||||
import { SearchCom } from '@/components'
|
import { SearchCom } from '@/components'
|
||||||
import { dictToTree } from '@/utils/util'
|
import { dictToTree } from '@/utils/util'
|
||||||
import { dictionaryDropDown } from '@/api/sys/dictionaryItem'
|
import { dictionaryDropDown } from '@/api/sys/dictionaryItem'
|
||||||
|
import { gerMyresource } from '@/api/myresource/index'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: { SearchCom },
|
components: { SearchCom, 'a-pagination': Pagination, 'a-empty': Empty },
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
dataList: [],
|
dataList: [],
|
||||||
|
total: 0,
|
||||||
params: {
|
params: {
|
||||||
pageNum: 1,
|
pageSize: 10,
|
||||||
total: 100
|
pageNum: 1
|
||||||
},
|
},
|
||||||
queryParam: {
|
queryParam: {
|
||||||
name: '', // 课程分类
|
name: '', // 课程分类
|
||||||
|
@ -61,7 +70,17 @@ export default {
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getList () {
|
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 () {
|
handlerDown () {
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue