|
|
@@ -2,15 +2,142 @@
|
|
|
|
|
|
<!-- <PhotoChange></PhotoChange>-->
|
|
|
<div id="portal-body">
|
|
|
- <!-- <img src="@/assets/seec-banner.png" id="portal-banner" alt="contain"/>-->
|
|
|
- <span id="hot-course-title">
|
|
|
- 热门课程
|
|
|
- </span>
|
|
|
- <div class="hot-course-container">
|
|
|
- <div v-for="course in hotCourseList" :key="course.title">
|
|
|
- <HotCourseCard :courseVO="course"/>
|
|
|
+ <div id="row-container">
|
|
|
+ <div id="task-course-body">
|
|
|
+ <el-card style="width: 95%;height: 45%" shadow="always">
|
|
|
+ <template #header>我的课程</template>
|
|
|
+ <div class="center" style="height: 150px" v-if="!isLogin">
|
|
|
+ <el-icon class="lock-icon"><Lock class="lock-icon"/></el-icon>
|
|
|
+ <span class="font-button" @click="toAuth">
|
|
|
+ 登录
|
|
|
+ </span>
|
|
|
+ <span style="font-size: 20px">
|
|
|
+ 以查看
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div style="width: 100%;height: 150px;
|
|
|
+ display: flex;flex-direction: row;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center" v-else-if="isLogin && courses_my.length === 0 ">
|
|
|
+ <el-empty style="height: 100px;width: 100px" image-size="100" description="暂无课程"/>
|
|
|
+ </div>
|
|
|
+ <div class="my-course-container" v-else>
|
|
|
+ <div v-for="courseVO in courses_my"
|
|
|
+ :title="courseVO.name"
|
|
|
+ :key="courseVO"
|
|
|
+ @click="toCourseDetail(courseVO.id)"
|
|
|
+ class="my-course-card"
|
|
|
+ style="">
|
|
|
+ <img :src="imageUrl(courseVO)" style="height: 70%;" alt="contain">
|
|
|
+ <span style="text-overflow: ellipsis;
|
|
|
+ overflow: hidden;max-width: 100px">
|
|
|
+ {{courseVO.name}}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </el-card>
|
|
|
+ <el-card style="width: 95%;height: 45%" shadow="always">
|
|
|
+ <template #header>
|
|
|
+ <div style="width: 100%;display: flex;
|
|
|
+ height: 100%;align-items: center;
|
|
|
+ flex-direction: row;justify-content: space-between">
|
|
|
+ <span>
|
|
|
+ {{isTeacher?"作业管理":"我的作业"}}
|
|
|
+ </span>
|
|
|
+ <el-select placeholder="请选择课程"
|
|
|
+ style="width: 200px;"
|
|
|
+ v-if="isLogin"
|
|
|
+ @change="courseSelectedChanged"
|
|
|
+ v-model="courseSelected">
|
|
|
+ <el-option
|
|
|
+ v-for="item in courses_my"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.name"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="center" style="height: 150px" v-if="!isLogin">
|
|
|
+ <el-icon class="lock-icon"><Lock class="lock-icon"/></el-icon>
|
|
|
+ <span class="font-button" @click="toAuth">
|
|
|
+ 登录
|
|
|
+ </span>
|
|
|
+ <span style="font-size: 20px">
|
|
|
+ 以查看
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div style="width: 100%;height: 150px;
|
|
|
+ display: flex;flex-direction: row;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center" v-else-if="isLogin && homeworkList.length === 0 ">
|
|
|
+ <el-empty style="height: 100px;width: 100px" image-size="100" description="暂无作业"/>
|
|
|
+ </div>
|
|
|
+ <div class="my-task-container" v-else>
|
|
|
+ <el-timeline
|
|
|
+ style="width: auto;margin-top: 20px">
|
|
|
+ <el-timeline-item
|
|
|
+ style="cursor: pointer"
|
|
|
+ v-for="(homework,index) in homeworkList"
|
|
|
+ :timestamp="(homework.startTime.substring(0, 16) + ' — ' + homework.endTime.substring(0, 16)).replaceAll('T',' ')"
|
|
|
+ :color="statusInfo(homework.status).color"
|
|
|
+ @click="toHomeworkDetail(homework.assignmentId,homework.type)"
|
|
|
+ :key="index">
|
|
|
+ <el-row>
|
|
|
+ <el-tag v-if="homework['type'] ==='writing'||homework['type'] ==='写作'" size="small" color="#409EFFFF" effect="dark"
|
|
|
+ id="homework-tag">W
|
|
|
+ </el-tag>
|
|
|
+ <el-tag v-else-if="homework['type'] ==='speaking'||homework['type'] ==='AI口语'" size="small" color="#50A879" effect="dark"
|
|
|
+ id="homework-tag" round>S
|
|
|
+ </el-tag>
|
|
|
+ <el-tag v-else class="timeline-content" size="small" color="#8dc9e2" effect="dark"
|
|
|
+ style="border: none">?
|
|
|
+ </el-tag>
|
|
|
+ <el-row class="timeline-content">
|
|
|
+ <el-tag :type="statusInfo(homework.status).type" size="small">{{statusInfo(homework.status).text}}</el-tag>
|
|
|
+ </el-row>
|
|
|
+ <el-row class="task-title timeline-content">
|
|
|
+ {{ homework.assignmentName }}
|
|
|
+ </el-row>
|
|
|
+ </el-row>
|
|
|
+ </el-timeline-item>
|
|
|
+ </el-timeline>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ <div id="course-square">
|
|
|
+ <el-card style="width: 95%;height: 95%" shadow="always">
|
|
|
+ <template #header>课程广场</template>
|
|
|
+ <div
|
|
|
+ style="width: 100%;
|
|
|
+ height: 500px;
|
|
|
+ display: flex;flex-direction: row;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center"
|
|
|
+ v-if="courses_all.length === 0 ">
|
|
|
+ <el-empty image-size="150" description="暂无课程"/>
|
|
|
+ </div>
|
|
|
+ <div v-else style="width: 100%;height: 500px;overflow-y: auto;">
|
|
|
+ <div class="my-course-square-container">
|
|
|
+ <div v-for="i in courses_all" :key="i"
|
|
|
+ class="course-square-card">
|
|
|
+ <CourseCard :course-v-o="i" style="width: 100%;height: 100%"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <!-- <img src="@/assets/seec-banner.png" id="portal-banner" alt="contain"/>-->
|
|
|
+<!-- <span id="hot-course-title">-->
|
|
|
+<!-- 热门课程-->
|
|
|
+<!-- </span>-->
|
|
|
+<!-- <div class="hot-course-container">-->
|
|
|
+<!-- <div v-for="course in hotCourseList" :key="course.title">-->
|
|
|
+<!-- <HotCourseCard :courseVO="course"/>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- </div>-->
|
|
|
<!-- 去除轮播组件 -->
|
|
|
<!-- <CarouselCard style="grid-column-start: 1; grid-column-end: 3;"/>-->
|
|
|
|
|
|
@@ -184,12 +311,14 @@ import { FolderOpened, Lock, SetUp, ShoppingCart } from "@element-plus/icons-vue
|
|
|
import TestCard from "@/components/TestCard";
|
|
|
import PhotoChange from "@/views/PortalPage/components/PhotoChange";
|
|
|
import HotCourseCard from "@/views/PortalPage/components/HotCourseCard.vue";
|
|
|
+import {ElMessage} from "element-plus";
|
|
|
|
|
|
export default {
|
|
|
//数据
|
|
|
name: "PortalPage",
|
|
|
components: {
|
|
|
- HotCourseCard
|
|
|
+ CourseCard,
|
|
|
+ Lock
|
|
|
// HotCourseCard
|
|
|
// FolderOpened,
|
|
|
// TestCard,
|
|
|
@@ -206,10 +335,16 @@ export default {
|
|
|
return {
|
|
|
isExpanding: false,
|
|
|
activeTestPaneName: "eval",
|
|
|
+ courses_all: [],
|
|
|
+ courses_my: [],
|
|
|
+ noImgUrl: this.$variables.noImgUrl,
|
|
|
exampleEvalTestList: [],
|
|
|
exampleCourseList: [],
|
|
|
showCourseList_current: 1,
|
|
|
exampleCoderTestList: [],
|
|
|
+ courseSelected:"",
|
|
|
+ courseSelectedInfo: {},
|
|
|
+ homeworkList: [],
|
|
|
myCourseList: [],
|
|
|
myEvalExamList: [],
|
|
|
myCoderExamList: [],
|
|
|
@@ -247,6 +382,7 @@ export default {
|
|
|
isAdmin(){
|
|
|
return this.$store.state.user.role==="ADMIN";
|
|
|
},
|
|
|
+
|
|
|
myTestList() {
|
|
|
return []
|
|
|
.concat(this.myEvalExamList)
|
|
|
@@ -286,13 +422,32 @@ export default {
|
|
|
this.exampleCourseList = (await this.$apis.getExampleCourses()).data.data;
|
|
|
this.exampleEvalTestList = (await this.$apis.getRecommendEvalExams()).data.data;
|
|
|
this.exampleCoderTestList = (await this.$apis.getRecommendCoderExams({})).data.data;
|
|
|
+ this.courses_all = (await (this.$apis.getAllCourses())).data.data;
|
|
|
+ console.log(this.courses_all);
|
|
|
if (this.isLogin && this.isStudent) {
|
|
|
const res = await this.$apis.getStudentCourses();
|
|
|
console.log(res);
|
|
|
+ this.courses_my = res.data.data;
|
|
|
+ if (this.courses_my.length!==0){
|
|
|
+ this.courseSelected = this.courses_my[0].name;
|
|
|
+ this.courseSelectedInfo = this.courses_my[0];
|
|
|
+ this.homeworkList = (await this.$apis.getHomeworks(this.courses_my[0].eaiId)).data.data;
|
|
|
+ }
|
|
|
this.myCourseList = (await this.$apis.getStudentCourses()).data.data;
|
|
|
this.myEvalExamList = (await this.$apis.getStudentEvalExams()).data.data.filter(i => this.state(i) === "RUNNING");
|
|
|
this.myCoderExamList = (await this.$apis.getStudentCoderExams({})).data.data.res.filter(i => this.state(i) === "RUNNING");
|
|
|
}
|
|
|
+ else if (this.isLogin && this.isTeacher){
|
|
|
+ this.$apis.getTeacherCourses().then(res => {
|
|
|
+ this.courses_my = res.data.data;
|
|
|
+ });
|
|
|
+ this.courses_my = (await this.$apis.getTeacherCourses()).data.data;
|
|
|
+ if (this.courses_my.length!==0){
|
|
|
+ this.courseSelected = this.courses_my[0].name;
|
|
|
+ this.courseSelectedInfo = this.courses_my[0];
|
|
|
+ this.homeworkList = (await this.$apis.getHomeworks(this.courses_my[0].eaiId)).data.data;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
await this.$nextTick(() => that.handleResize());
|
|
|
},
|
|
|
@@ -302,9 +457,56 @@ export default {
|
|
|
toAuth() {
|
|
|
this.$router.push("/auth");
|
|
|
},
|
|
|
+ imageUrl(courseVO) {
|
|
|
+ // console.log(this.courseVO.imageUrl);
|
|
|
+ return courseVO.imageUrl === null ? this.noImgUrl : courseVO.imageUrl + "?t=" + Date.now().valueOf();
|
|
|
+ },
|
|
|
+ courseSelectedChanged(value){
|
|
|
+ console.log(value);
|
|
|
+ console.log(this.courses_my);
|
|
|
+ for (let i = 0; i < this.courses_my.length; i++) {
|
|
|
+ if (this.courses_my[i].name === value){
|
|
|
+ this.$apis.getHomeworks(this.courses_my[i].eaiId)
|
|
|
+ .then(res => {
|
|
|
+ console.log(res);
|
|
|
+ this.homeworkList = res.data.data;
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ ElMessage.error("获取作业失败");
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ statusInfo(status){
|
|
|
+ if (status === "NOT_STARTED"){
|
|
|
+ return {text:"未开始",type:"info",color:"#909399"};
|
|
|
+ }
|
|
|
+ else if (status === "PROCEEDING"){
|
|
|
+ return {text:"进行中",type:"success",color: "#67C23A"};
|
|
|
+ }
|
|
|
+ else if (status === "FINISHED"){
|
|
|
+ return {text:"已结束",type:"info",color: "#909399"};
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ return {text:"未知",type:"info",color: "#909399"};
|
|
|
+ }
|
|
|
+ },
|
|
|
+ toHomeworkDetail(id,type){
|
|
|
+ this.$router.push("/homework/"+id+"/"
|
|
|
+ +this.courseSelectedInfo.teacherId+"/"
|
|
|
+ +type+"/"
|
|
|
+ +this.courseSelectedInfo.eaiId+"/"
|
|
|
+ +this.courseSelectedInfo.id);
|
|
|
+ },
|
|
|
+ toLogin(){
|
|
|
+ this.$router.push("/login");
|
|
|
+ },
|
|
|
toCourse() {
|
|
|
this.$router.push("/course");
|
|
|
},
|
|
|
+ toCourseDetail(id){
|
|
|
+ this.$router.push("/course/"+id);
|
|
|
+ },
|
|
|
toManage() {
|
|
|
this.$router.push("/manage");
|
|
|
},
|
廖彦舟