You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
312 lines
11 KiB
Vue
312 lines
11 KiB
Vue
<template>
|
|
<div class="el-TeacherHome">
|
|
<el-row class="class_row">
|
|
<el-col :span="12">
|
|
<el-row class="content_block">
|
|
<el-row class="title_head">
|
|
<span class="class_img">
|
|
<el-image class="title_img" :src="zichang"></el-image>
|
|
</span>
|
|
<span>待办事项</span>
|
|
</el-row>
|
|
<el-divider></el-divider>
|
|
<el-row class="echarts_row" style="height: 280px;overflow: hidden;">
|
|
<el-col :span="8" class="tc">
|
|
<el-link :underline="false" class="font20 mt30 fontB" type="primary">待评分实训测评</el-link>
|
|
<p class="mt30 fontB c_p" style="color: red;">{{toDoList.length}} 份</p>
|
|
<p class="mt30">
|
|
<i class="el-icon-document font50 c_p" style="color: rgb(255, 255, 255);padding: 20px;background: #409EFF;border-radius: 50%;"></i>
|
|
</p>
|
|
</el-col>
|
|
<el-col :span="16">
|
|
<el-table
|
|
:data="toDoList"
|
|
max-height="250"
|
|
style="width: 100%">
|
|
<el-table-column prop="openCourseName" label="课程名称" header-align="center" align="center" width="180"></el-table-column>
|
|
<el-table-column prop="className" label="班级" header-align="center" align="center"></el-table-column>
|
|
<el-table-column prop="openCourseNum" width="180" header-align="center" align="center" label="待评阅份数"></el-table-column>
|
|
</el-table>
|
|
</el-col>
|
|
</el-row>
|
|
</el-row>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<!-- 公告信息 -->
|
|
<div style="height: 300px;">
|
|
<Notice :borderShow="false" :list="noticeList" hei="325px" :pagingShow="false"></Notice>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row class="class_row">
|
|
<el-col :span="12">
|
|
<el-row class="content_block">
|
|
<el-row class="title_head">
|
|
<span class="class_img">
|
|
<el-image class="title_img" :src="yingyong"></el-image>
|
|
</span>
|
|
<span>我的应用</span>
|
|
</el-row>
|
|
<el-divider></el-divider>
|
|
<el-row class="pt50 pb50">
|
|
<el-col :span="3" class="tc next_pre">
|
|
<el-image class="next_pre_img" :src="pre" @click="pre_app"></el-image>
|
|
</el-col>
|
|
<el-col :span="18">
|
|
<el-row>
|
|
<template v-for="(item, index) in myAppsList" >
|
|
<el-col :span="8" class="tc">
|
|
<el-link :href="item.realUrl" :underline="false" target="_blank">
|
|
<el-image class="yinyong_img" :src="$getUrl(item.thumbnailUrl)"></el-image>
|
|
<p class="font14 limit_line_one">{{item.applicationName}}</p>
|
|
</el-link>
|
|
</el-col>
|
|
</template>
|
|
<template v-if="myAppsList.length <=0">
|
|
<el-row style="height: 177px;">
|
|
<el-empty :imageSize="60" description="暂无应用"></el-empty>
|
|
</el-row>
|
|
</template>
|
|
</el-row>
|
|
</el-col>
|
|
<el-col :span="3" class="tc next_pre">
|
|
<el-image class="next_pre_img" :src="next" @click="next_app"></el-image>
|
|
</el-col>
|
|
</el-row>
|
|
</el-row>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-row class="content_block">
|
|
<el-row class="title_head">
|
|
<span class="class_img">
|
|
<el-image class="title_img" :src="wodekc"></el-image>
|
|
</span>
|
|
<span>我的课程</span>
|
|
</el-row>
|
|
<el-divider></el-divider>
|
|
<el-row class="pt20 pb20">
|
|
<el-col :span="3" class="tc next_pre" style="height: 237px;">
|
|
<el-image class="next_pre_img" :src="pre" @click="pre_course"></el-image>
|
|
</el-col>
|
|
<el-col :span="18">
|
|
<el-row>
|
|
<template v-for="(item, index) in courseList" >
|
|
<el-col :span="12" class="tc c_p">
|
|
<div class="wdkc_c" style="border: 1px solid #E1E1E1;margin: 0 auto;" @click="courseInon(item)">
|
|
<template v-if="item.teacherOpenCourse">
|
|
<el-image class="wdkc_img" :src="$isHttp(item.teacherOpenCourse.teacherOpenCourseCover)"></el-image>
|
|
<p class="font14 limit_line_one tl mt5 mb5 fontB ml10 mr10">{{item.teacherOpenCourse.teacherOpenCourseTitle}}</p>
|
|
<el-row class="font14 limit_line_two tl mt5 mb10 ml10 mr10" style="height:38px;">
|
|
<span style="float:left;">课程简介:</span>
|
|
<el-row v-html="item.teacherOpenCourse.teacherOpenCourseSummary ||''"></el-row>
|
|
</el-row>
|
|
</template>
|
|
</div>
|
|
</el-col>
|
|
</template>
|
|
<template v-if="courseList.length <=0">
|
|
<el-row style="height: 230px;">
|
|
<el-empty style="height: 230px;" :imageSize="60" description="暂无课程"></el-empty>
|
|
</el-row>
|
|
</template>
|
|
</el-row>
|
|
</el-col>
|
|
<el-col :span="3" class="tc next_pre" style="height: 230px;">
|
|
<el-image class="next_pre_img" :src="next" @click="next_course"></el-image>
|
|
</el-col>
|
|
</el-row>
|
|
</el-row>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import jQuery from 'jquery';
|
|
import Notice from "../course/components/Notice"; //通知公告
|
|
export default {
|
|
name: "TeacherHome",
|
|
components: {
|
|
Notice
|
|
},
|
|
data() {
|
|
return {
|
|
zichang:require("../../images/index/zichang@2x.png"),
|
|
yingyong:require("../../images/index/yingyong@2x.png"),
|
|
shouyi:require("../../images/home/shouyi@2x.png"),
|
|
wodekc:require("../../images/home/wodekc@2x.png"),
|
|
next:require("../../images/home/next@2x.png"),
|
|
pre:require("../../images/home/pre@2x.png"),
|
|
info:require("../../images/home/info@2x.png"),
|
|
myAppsListALL:[],
|
|
myAppsList:[],
|
|
start_app_num:0, //应用开始位置
|
|
end_app_num:3,//应用结束位置
|
|
courseListALL:[],
|
|
courseList:[],
|
|
noticeList:[],
|
|
toDoList:[],
|
|
start_course_num:0, //应用开始位置
|
|
end_course_num:3,//应用结束位置
|
|
};
|
|
},
|
|
created() {
|
|
this.$post("/api/teacher/index.do").then((ret) => {
|
|
if(ret.code == 0){
|
|
this.myAppsListALL = ret.data.myApplicationList;
|
|
this.courseListALL = ret.data.myOpenCourseList;
|
|
this.noticeList = ret.data.noticeList.slice(0,5);
|
|
this.toDoList = ret.data.toDoList;
|
|
this.myAppsList = this.myAppsListALL.slice(0,3); //截取我的应用前三
|
|
this.courseList = this.courseListALL.slice(0,2); //截取我的课程前二
|
|
}
|
|
});
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
methods: {
|
|
pre_app(){ //上一个应用
|
|
if(this.myAppsListALL.length <= 3){
|
|
return;
|
|
}
|
|
this.start_app_num --;
|
|
if(this.start_app_num < 0){
|
|
this.start_app_num = this.myAppsListALL.length - 1;
|
|
}
|
|
this.myAppsList = this.myAppsListALL.slice(this.start_app_num,this.start_app_num + 3);
|
|
if(this.myAppsList.length < 3){
|
|
let num = this.myAppsListALL.length - this.start_app_num;
|
|
this.myAppsList = this.myAppsList.concat(this.myAppsListALL.slice(0,3-num));
|
|
}
|
|
},
|
|
next_app(){ //下一个应用
|
|
if(this.myAppsListALL.length <= 3){
|
|
return;
|
|
}
|
|
this.start_app_num ++;
|
|
if(this.start_app_num == this.myAppsListALL.length){
|
|
this.start_app_num = 0;
|
|
}
|
|
if(this.start_app_num + 3 > this.myAppsListALL.length){ //当开始位置为0并且总数量大于3时
|
|
this.myAppsList = this.myAppsListALL.slice(this.start_app_num,this.myAppsListALL.length);
|
|
if(this.myAppsList.length < 3){
|
|
let num = this.myAppsListALL.length - this.start_app_num;
|
|
this.myAppsList = this.myAppsList.concat(this.myAppsListALL.slice(0,3-num));
|
|
}
|
|
}else{
|
|
this.myAppsList = this.myAppsListALL.slice(this.start_app_num,this.start_app_num + 3);
|
|
}
|
|
},
|
|
pre_course(){ //上一个课程
|
|
if(this.courseListALL.length <= 2){
|
|
return;
|
|
}
|
|
this.start_course_num --;
|
|
if(this.start_course_num < 0){
|
|
this.start_course_num = this.courseListALL.length - 1;
|
|
}
|
|
this.courseList = this.courseListALL.slice(this.start_course_num,this.start_course_num + 2);
|
|
if(this.courseList.length < 2){
|
|
let num = this.courseListALL.length - this.start_course_num;
|
|
this.courseList = this.courseList.concat(this.courseListALL.slice(0,2-num));
|
|
}
|
|
},
|
|
next_course(){ //下一个课程
|
|
if(this.courseListALL.length <= 2){
|
|
return;
|
|
}
|
|
this.start_course_num ++;
|
|
if(this.start_course_num == this.courseListALL.length){
|
|
this.start_course_num = 0;
|
|
}
|
|
if(this.start_course_num + 2 > this.courseListALL.length){ //当开始位置为0并且总数量大于2时
|
|
this.courseList = this.courseListALL.slice(this.start_course_num,this.courseListALL.length);
|
|
if(this.courseList.length < 2){
|
|
let num = this.courseListALL.length - this.start_course_num;
|
|
this.courseList = this.courseList.concat(this.courseListALL.slice(0,2-num));
|
|
}
|
|
}else{
|
|
this.courseList = this.courseListALL.slice(this.start_course_num,this.start_course_num + 2);
|
|
}
|
|
console.log(this.courseList)
|
|
},
|
|
courseInon(item){
|
|
this.$ls.remove(this.$getKeyInfo('on_show'));
|
|
this.$router.push({name:'TCourseHome',query:{teacherOpenCourseId:item.teacherOpenCourseId}});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="less">
|
|
.el-TeacherHome{
|
|
padding: 20px 0 0 20px;
|
|
.content_block{
|
|
background-color: #ffffff;
|
|
margin-right: 20px;
|
|
.title_head{
|
|
padding: 10px 20px;
|
|
}
|
|
.title_img{
|
|
width: 20px;
|
|
}
|
|
.wdkc_img{
|
|
width: 300px;
|
|
height: 150px;
|
|
}
|
|
.wdkc_c{
|
|
width: 300px;
|
|
p{
|
|
margin: 0;
|
|
}
|
|
}
|
|
.el-divider--horizontal{
|
|
margin: 0;
|
|
}
|
|
.class_img{
|
|
float: left;margin-right: 10px;
|
|
}
|
|
.echarts_row{
|
|
padding: 20px;
|
|
}
|
|
}
|
|
.class_row{
|
|
margin-bottom: 20px;
|
|
}
|
|
.next_pre{
|
|
display: flex;
|
|
justify-content:center;
|
|
align-items:center;
|
|
height: 177px;
|
|
}
|
|
.next_pre_img{
|
|
width: 40px;
|
|
cursor: pointer;
|
|
}
|
|
.yinyong_img{
|
|
width: 120px;
|
|
height: 122px;
|
|
cursor: pointer;
|
|
border-radius: 10px;
|
|
}
|
|
.wdon{
|
|
width: 10px;height: 10px;background-color: red;border-radius: 50%;
|
|
float: left;margin-top: 5px;margin-right: 10px;
|
|
}
|
|
//宽度大于等于
|
|
@media screen and (max-width:1710px){
|
|
.content_block{
|
|
.wdkc_img{
|
|
width: 250px;
|
|
height: 150px;
|
|
}
|
|
.wdkc_c{
|
|
width: 250px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|