huoran
/
FE_occupationlab_client
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 14 Wiki Activity

数据看板

Browse Source
alioss
yujialong 3 years ago
parent 7fa12b10f9
commit e10884c242
5 changed files with 293 additions and 51 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      public/index.html
  2. 13
      src/api/index.js
  3. 61
      src/pages/course/list/index.vue
  4. 266
      src/pages/screen/index.vue
  5. 2
      src/setting.js

2
public/index.html
Unescape View File

@ -8,7 +8,7 @@
<meta name="baidu-site-verification" content="code-TRfXe8xIkJ" /> <meta name="baidu-site-verification" content="code-TRfXe8xIkJ" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="//at.alicdn.com/t/font_830376_qzecyukz0s.css"> <link rel="stylesheet" href="//at.alicdn.com/t/font_830376_qzecyukz0s.css">
<title>智信云</title> <title>职站——为院校打造一站式虚拟仿真实训教学数智云平台</title>
</head> </head>
<body> <body>
<noscript> <noscript>

13
src/api/index.js
Unescape View File

@ -1,7 +1,7 @@
import Setting from "@/setting"; import Setting from "@/setting";
const host = Setting.apiBaseURL const host = Setting.apiBaseURL
const host1 = 'http://192.168.31.137:9000/' const host1 = 'http://121.37.12.51/'
const uploadURL = location.origin + '/' const uploadURL = location.origin + '/'
export default { export default {
@ -20,6 +20,7 @@ export default {
//实验台 //实验台
curriculumDetail: `nakadai/nakadai/curriculum/curriculumDetail`, // 课程详情 curriculumDetail: `nakadai/nakadai/curriculum/curriculumDetail`, // 课程详情
curriculumChapter: `nakadai/nakadai/curriculum/chapter/queryChaptersAndSubsections`, // 根据课程id查询章节小节,树状结构 curriculumChapter: `nakadai/nakadai/curriculum/chapter/queryChaptersAndSubsections`, // 根据课程id查询章节小节,树状结构
queryChaptersAndSubsections: `occupationlab/occupationlab/management/edu/courseChapter/queryChaptersAndSubsections`,
curriculumGetSubsection: `nakadai/nakadai/curriculum/subsection/getSubsection`, // 根据小节id获取预览文件地址 curriculumGetSubsection: `nakadai/nakadai/curriculum/subsection/getSubsection`, // 根据小节id获取预览文件地址
getProjectBySystemId: 'occupationlab/occupationlab/projectManage/getProjectBySystemId', getProjectBySystemId: 'occupationlab/occupationlab/projectManage/getProjectBySystemId',
getTheMostRecentlyRunProject: 'python/python/getTheMostRecentlyRunProject', getTheMostRecentlyRunProject: 'python/python/getTheMostRecentlyRunProject',
@ -66,11 +67,12 @@ export default {
listClassification: `occupationlab/occupationlab/theoreticalCourseClassification/pagingQuery`, listClassification: `occupationlab/occupationlab/theoreticalCourseClassification/pagingQuery`,
findByIdCourse: `occupationlab/occupationlab/theoreticalCourse/findById`, findByIdCourse: `occupationlab/occupationlab/theoreticalCourse/findById`,
playRecordSave: `occupationlab/occupationlab/playRecord/save`, playRecordSave: `occupationlab/occupationlab/playRecord/save`,
studentLoginPreCourse: `occupationlab/occupationlab/theoreticalCourse/studentLoginPreCourse`,
// 资讯 // 资讯
queryAllColumns: `${host1}occupationlab/occupationlab/information/column/queryAllColumns`, // 栏目树 queryAllColumns: `occupationlab/occupationlab/information/column/queryAllColumns`, // 栏目树
queryArticleByCondition: `${host1}occupationlab/occupationlab/information/article/queryArticleByCondition`, // 文章列表分页条件查询 queryArticleByCondition: `occupationlab/occupationlab/information/article/queryArticleByCondition`, // 文章列表分页条件查询
getArticle: `${host1}occupationlab/occupationlab/information/article/getArticle`, // 根据id查询文章 getArticle: `occupationlab/occupationlab/information/article/getArticle`, // 根据id查询文章
// 线上赛事 // 线上赛事
notLoggedInBeforeStudentEvents: `occupationlab/occupationlab/match/contest/notLoggedInBeforeStudentEvents`, notLoggedInBeforeStudentEvents: `occupationlab/occupationlab/match/contest/notLoggedInBeforeStudentEvents`,
@ -119,4 +121,7 @@ export default {
studentGradeDistribution: `occupationlab/occupationlab/data/kanban/studentGradeDistribution`, studentGradeDistribution: `occupationlab/occupationlab/data/kanban/studentGradeDistribution`,
studentAssessSchievement: `occupationlab/occupationlab/data/kanban/studentAssessSchievement`, studentAssessSchievement: `occupationlab/occupationlab/data/kanban/studentAssessSchievement`,
overviewOfOurSchoolData: `occupationlab/occupationlab/data/kanban/overviewOfOurSchoolData`, overviewOfOurSchoolData: `occupationlab/occupationlab/data/kanban/overviewOfOurSchoolData`,
monthlyAverageOnlineTime: `occupationlab/occupationlab/data/kanban/monthlyAverageOnlineTime`,
courseRankings: `occupationlab/occupationlab/data/kanban/courseRankings`,
platformLoginStatistics: `users/users/user/platformLoginStatistics`,
}; };

61
src/pages/course/list/index.vue
Unescape View File

@ -33,6 +33,10 @@
<img :src="item.coverUrl" alt="" /> <img :src="item.coverUrl" alt="" />
<div class="title">{{ item.courseName }}</div> <div class="title">{{ item.courseName }}</div>
<div class="desc" :class="{ie: core.isIE(),ie: core.isFirefox()}" v-html="item.courseIntroduction"></div> <div class="desc" :class="{ie: core.isIE(),ie: core.isFirefox()}" v-html="item.courseIntroduction"></div>
<div class="metas">
<i class="el-icon-view"></i>
{{ item.pageviews }}
</div>
</li> </li>
</ul> </ul>
<div class="pagination"> <div class="pagination">
@ -55,21 +59,17 @@
<script> <script>
import { Loading } from "element-ui"; import { Loading } from "element-ui";
import bus from "@/libs/bus";
import Setting from "@/setting"; import Setting from "@/setting";
export default { export default {
name: "course", name: "course",
data() { data() {
return { return {
isTourist: !!Setting.whiteList.find(e => e === this.$route.path),
active: 0, active: 0,
tabs: [ tabs: [
{ {
id: 0, id: 0,
name: '共享课程' name: '共享课程'
},
{
id: 1,
name: '本校课程'
} }
], ],
form: { form: {
@ -101,8 +101,13 @@ export default {
}; };
}, },
mounted() { mounted() {
this.getClassification(0); // 登录后的课程才需要展示本校课程
this.getData(); this.isTourist || this.tabs.push({
id: 1,
name: '本校课程'
})
this.getClassification(0)
this.getData()
}, },
watch: { watch: {
keyword: function(val) { keyword: function(val) {
@ -114,23 +119,24 @@ export default {
}, },
methods: { methods: {
getData() { getData() {
this.loadIns = Loading.service() this.loadIns = Loading.service()
this.$post(this.api.pageConditionalQueryCourseByStudent, { // 登录前登录后页面调的课程接口不是同一个
...this.form, this.$post(this.api[this.isTourist ? 'studentLoginPreCourse' : 'pageConditionalQueryCourseByStudent'], {
pageNum: this.page, ...this.form,
pageSize: this.pageSize, pageNum: this.page,
courseSource: this.active, pageSize: this.pageSize,
keyWord: this.keyword courseSource: this.active,
}).then(({ page }) => { keyWord: this.keyword
this.list = page.records }).then(({ page }) => {
this.total = page.total this.list = page.records
this.list.map(n => { this.total = page.total
n.courseIntroduction = n.courseIntroduction.replace(/<img.*?(?:>|\/>)/gi, "") this.list.map(n => {
}) n.courseIntroduction = n.courseIntroduction.replace(/<img.*?(?:>|\/>)/gi, "")
this.loadIns.close() })
}).catch(res => { this.loadIns.close()
this.loadIns.close() }).catch(res => {
}); this.loadIns.close()
})
}, },
initData() { initData() {
this.page = 1; this.page = 1;
@ -171,7 +177,7 @@ export default {
this.getData(); this.getData();
}, },
toDetail(id) { toDetail(id) {
this.$router.push(`/course/details?id=${id}`); this.$router.push(`/${this.isTourist ? 'preCourse' : 'course'}/details?id=${id}`);
} }
} }
}; };
@ -314,6 +320,11 @@ export default {
white-space: nowrap; white-space: nowrap;
} }
} }
.metas {
margin-top: 10px;
color: #a9a9a9;
font-size: 12px;
}
&:hover { &:hover {
box-shadow: 0px 5px 12px 4px rgba(142, 123, 253, 0.09), 0px 3px 6px 0px rgba(142, 123, 253, 0.12), 0px 1px 2px -2px rgba(142, 123, 253, 0.16); box-shadow: 0px 5px 12px 4px rgba(142, 123, 253, 0.09), 0px 3px 6px 0px rgba(142, 123, 253, 0.12), 0px 1px 2px -2px rgba(142, 123, 253, 0.16);

266
src/pages/screen/index.vue
Unescape View File

@ -109,7 +109,7 @@
<img src="@/assets/img/screen/t_7.png" alt=""> <img src="@/assets/img/screen/t_7.png" alt="">
平台登录人数 平台登录人数
</div> </div>
<div id="chart3" class="chart t_btn9"></div> <div id="chart4" class="chart t_btn9"></div>
</div> </div>
</div> </div>
<div class="middle"> <div class="middle">
@ -234,9 +234,9 @@
<img src="@/assets/img/screen/t_5.png" alt=""> <img src="@/assets/img/screen/t_5.png" alt="">
热门理论课程排行榜 热门理论课程排行榜
</div> </div>
<!-- <ul class="list"> <ul class="list" style="margin-top: 45px;">
<li v-for="(item, i) in courses" :key="i">{{ item.curriculumName }}</li> <li v-for="(item, i) in popularCourses" :key="i">{{ item }}</li>
</ul> --> </ul>
</div> </div>
<div class="item" style="height: 630px"> <div class="item" style="height: 630px">
<div class="t_line_box"> <div class="t_line_box">
@ -272,7 +272,7 @@
</thead> </thead>
</table> </table>
</div> </div>
<div class="main_table" ref="tableWrap" style="height: 196px;margin-top: 0;overflow: auto"> <div class="main_table" ref="tableWrap" style="margin-top: 0;overflow: auto">
<table> <table>
<tbody> <tbody>
<tr v-for="(item, i) in achs" :key="i"> <tr v-for="(item, i) in achs" :key="i">
@ -292,8 +292,9 @@
</template> </template>
<script> <script>
import Setting from '@/setting' import Util from '@/libs/util'
import * as echarts from 'echarts' import * as echarts from 'echarts'
import Setting from '@/setting'
export default { export default {
data() { data() {
return { return {
@ -312,6 +313,7 @@ export default {
goodsSell: [], goodsSell: [],
cryptoList: [], cryptoList: [],
courses: [], courses: [],
popularCourses: [],
achs: [] achs: []
} }
}, },
@ -353,6 +355,11 @@ export default {
this.$post(this.api.getTheMostUsedCoursesInOurSchool).then(({ data }) => { this.$post(this.api.getTheMostUsedCoursesInOurSchool).then(({ data }) => {
this.courses = data this.courses = data
}).catch(res => {}) }).catch(res => {})
// 热门理论课程排行榜
this.$post(this.api.courseRankings).then(({ data }) => {
this.popularCourses = data
}).catch(res => {})
// 学霸排行榜 // 学霸排行榜
this.$post(this.api.academicLeadersRanking).then(({ data }) => { this.$post(this.api.academicLeadersRanking).then(({ data }) => {
@ -446,7 +453,7 @@ export default {
} }
let chart = {} let chart = {}
// 平台考试数据考试统计 // 学生成绩分布分析
const year = new Date().getFullYear() const year = new Date().getFullYear()
const times = [] const times = []
// 获取过去五年的上下半年日期 // 获取过去五年的上下半年日期
@ -492,6 +499,15 @@ export default {
bottom: '3%', bottom: '3%',
containLabel: true containLabel: true
}, },
dataZoom: [//滑动条
{
xAxisIndex: 0,//这里是从X轴的0刻度开始
show: false,//是否显示滑动条，不影响使用
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
startValue: 0, // 从头开始。
endValue: 5 // 一次性展示6个。
}
],
color:['#56f3f7', '#b76fff', '#5492ff', '#e51579'], color:['#56f3f7', '#b76fff', '#5492ff', '#e51579'],
xAxis: [ xAxis: [
{ {
@ -563,10 +579,9 @@ export default {
} }
chart[0] = echarts.init(document.querySelector(`#chart2`)) chart[0] = echarts.init(document.querySelector(`#chart2`))
chart[0].setOption(option) chart[0].setOption(option)
setInterval(function () {
// setInterval(function () { animateChart(chart[0], option, data, 5)
// animateChart(chart[0], option, series) }, 3000)
// }, 1500)
}).catch(res => {}) }).catch(res => {})
// 学生实验课程考核成绩趋势图 // 学生实验课程考核成绩趋势图
@ -662,6 +677,15 @@ export default {
fontSize:'12', fontSize:'12',
} }
}, },
dataZoom: [//滑动条
{
xAxisIndex: 0,//这里是从X轴的0刻度开始
show: false,//是否显示滑动条，不影响使用
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
startValue: 0, // 从头开始。
endValue: 6 // 一次性展示6个。
}
],
grid: { grid: {
left: '30', left: '30',
top: '27%', top: '27%',
@ -718,20 +742,222 @@ export default {
} }
chart[1] = echarts.init(document.querySelector(`#chart5`)) chart[1] = echarts.init(document.querySelector(`#chart5`))
chart[1].setOption(option) chart[1].setOption(option)
setInterval(function () {
// setInterval(function () { animateChart(chart[1], option, times)
// animateChart(chart[0], option, series) }, 5000)
// }, 1500) }).catch(res => {})
// 月人均在线学习时长情况
const date = new Date()
date.setMonth(date.getMonth() + 1)
const months = []
// 获取近12个月的日期
for (let i = 0; i < 12; i++) {
date.setMonth(date.getMonth() - 1)
const pre = date.getFullYear() + '-' + Util.formateTime(date.getMonth() + 1) + '-'
months.push({
startTime: pre + '01',
endTime: pre + new Date(new Date(date.getFullYear(), date.getMonth() + 1, 1).getTime() - 1000*60*60*24).getDate()
})
}
this.$post(this.api.monthlyAverageOnlineTime, months).then(({ data }) => {
const option = {
title: {
text: ''
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
axisLine: {
lineStyle: {
color: '#fff'
}
},
axisLabel: {
interval: 0,
textStyle: {
color: '#fff',
},
rotate: 60
},
data: data.map(e => e.time)
},
dataZoom: [//滑动条
{
xAxisIndex: 0,//这里是从X轴的0刻度开始
show: false,//是否显示滑动条，不影响使用
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
startValue: 0, // 从头开始。
endValue: 7 // 一次性展示6个。
}
],
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#fff'
}
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 12,
color: '#fff'
},
formatter: '{value}'
},
},
color: ['#4BF0FF','#44AFF0','#4E82FF','#584BFF','#BE4DFF','#F845F1'],
legend: {
data: ['月人均在线学习时长情况'],
textStyle:{
color: '#fff'
},
top: '8%'
},
grid: {
top: '20%',
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
series: [
{
data: data.map(e => e.averageDuration),
type: 'bar',
barWidth: 11,
itemStyle: {
normal: {
barBorderRadius: [10, 10, 0, 0],
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: "#4033F9"
}, {
offset: 0.8,
color: "#516fff"
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
}
},
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}
]
}
chart[2] = echarts.init(document.querySelector(`#chart3`))
chart[2].setOption(option)
setInterval(function () {
animateChart(chart[2], option, data)
}, 1500)
}).catch(res => {})
// 平台登录人数
this.$get(this.api.platformLoginStatistics, {
platform: Setting.platformId
}).then(({ data }) => {
const option = {
tooltip: {
trigger: 'axis',
},
grid: {
left: '12%',
right: '5%',
top: '15%',
bottom: '30%'
},
dataZoom: [//滑动条
{
xAxisIndex: 0,//这里是从X轴的0刻度开始
show: false,//是否显示滑动条，不影响使用
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
startValue: 0, // 从头开始。
endValue: 3 // 一次性展示6个。
}
],
xAxis: [{
type: 'category',
axisLine: {
lineStyle: {
color: '#57617B'
}
},
axisLabel: {
interval: 0,
textStyle: {
color: '#fff',
},
rotate: 60
},
data: data.map(e => e.today)
}],
yAxis: [{
type: 'value',
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#57617B'
}
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 12,
color: '#fff'
},
formatter: '{value}'
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: ['#25CEF3']
}
}
}],
series: [{
name: '平台登录人数',
type: 'bar',
barWidth: 8,
itemStyle: {
normal: {
barBorderRadius: [10, 10, 0, 0],
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: "#009AFD"
}, {
offset: 0.8,
color: "#33DAFF"
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
}
},
data: data.map(e => e.quantity)
}
]
}
chart[3] = echarts.init(document.querySelector(`#chart4`))
chart[3].setOption(option)
setInterval(function () {
animateChart(chart[3], option, data, 3)
}, 1500)
}).catch(res => {}) }).catch(res => {})
// this.scrollTable() // this.scrollTable()
// 监听resize事件，动态改变chart大小 // 监听resize事件，动态改变chart大小
// window.addEventListener('resize', () => { window.addEventListener('resize', () => {
// for (let i = 0; i < 7; i++) { for (let i = 0; i < 4; i++) {
// chart[i] && chart[i].resize() chart[i] && chart[i].resize()
// } }
// }) })
}, },
// 表格滚动效果 // 表格滚动效果
// scrollTable() { // scrollTable() {

2
src/setting.js
Unescape View File

@ -28,7 +28,7 @@ if (isPro) {
host = "http://121.37.12.51/"; // 测试服 host = "http://121.37.12.51/"; // 测试服
// host = 'https://www.occupationlab.com/' // 正式服 // host = 'https://www.occupationlab.com/' // 正式服
host = "http://192.168.31.151:9000/"; // 榕 host = "http://192.168.31.151:9000/"; // 榕
host = "http://192.168.31.137:9000/"; // 赓 // host = "http://192.168.31.137:9000/"; // 赓
} }
const Setting = { const Setting = {

Write Preview
Loading…
Cancel
Save