hz/fe-student
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-student.git synced 2025-12-11 03:46:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/develop' into develop

Browse Source
This commit is contained in:
yuping
2022-12-15 00:30:28 +08:00
parent 0ff2368ac5 1e21f20508
commit 5047b234f1
1 changed files with 217 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

404
src/views/roadmap/PathDetails.vue
View File

@@ -14,36 +14,44 @@
<div v-for="(i, k) in data.chapterProcessList" :key="k"> <div v-for="(i, k) in data.chapterProcessList" :key="k">
<div class="title"> <div class="title">
<div class="titleL">{{ i.chapterName }}</div> <div class="titleL">{{ i.chapterName }}</div>
<div <div class="titleR" :style="{ display: 'flex' }">
class="titleR" <img src="../../assets/image/pathdetails/circle.png" />
:style="{ display: 'flex' }"
>
<img src="../../assets/image/pathdetails/circle.png"/>
<div class="titleRT">进行中</div> <div class="titleRT">进行中</div>
</div> </div>
<div <div
class="titleR" class="titleR"
:style="{ display: i.status === 2 ? 'flex' : 'none' }" :style="{ display: i.status === 2 ? 'flex' : 'none' }"
> >
<img src="../../assets/image/pathdetails/circle2.png"/> <img src="../../assets/image/pathdetails/circle2.png" />
<div class="titleRT" style="color: rgba(102, 102, 102, 1)"> <div class="titleRT" style="color: rgba(102, 102, 102, 1)">
未开始 未开始
</div> </div>
</div> </div>
</div> </div>
<div <div
class="course" class="course"
v-for="(value, index) in i.taskProcessList" v-for="(value, index) in i.taskProcessList"
:key="index" :key="index"
> >
<div> <div>
<div class="coursename">{{ value.name }}</div> <div class="coursename">{{ value.name }}</div>
<div class="coursetag"> <div class="coursetag">
<div class="tag1" style="margin-right: 11px; margin-top: 16px" v-if="value.flag">必修</div> <div
<div class="tag2" style="margin-right: 11px; margin-top: 16px" v-if="!value.flag">选修</div> class="tag1"
<div class="tag3" style="margin-right: 11px; margin-top: 16px">{{ style="margin-right: 11px; margin-top: 16px"
types.typeName[value.type] || '' v-if="value.flag"
}} >
必修
</div>
<div
class="tag2"
style="margin-right: 11px; margin-top: 16px"
v-if="!value.flag"
>
选修
</div>
<div class="tag3" style="margin-right: 11px; margin-top: 16px">
{{ types.typeName[value.type] || "" }}
</div> </div>
<!-- <div--> <!-- <div-->
@@ -56,45 +64,44 @@
<!-- </div>--> <!-- </div>-->
</div> </div>
<div <div
class="progressBox" class="progressBox"
:style="{ display: value.status === 1 ? 'block' : 'none' }" :style="{ display: value.status === 1 ? 'block' : 'none' }"
> >
<div>当前进度</div> <div>当前进度</div>
<div class="progress"> <div class="progress">
<div style="width: 291px"> <div style="width: 291px">
<el-progress <el-progress
:percentage="value.currentRatio" :percentage="value.currentRatio"
:show-text="false" :show-text="false"
:stroke-width="8" :stroke-width="8"
:color=" :color="
{ {
0:'rgba(238, 112, 108, 1)', 0: 'rgba(238, 112, 108, 1)',
1:'rgba(255, 151, 38, 1)', 1: 'rgba(255, 151, 38, 1)',
2:'rgba(39, 122, 255, 1)', 2: 'rgba(39, 122, 255, 1)',
3:'rgba(59, 94, 251, 1)', 3: 'rgba(59, 94, 251, 1)',
4:'rgba(57, 219, 183, 1)', 4: 'rgba(57, 219, 183, 1)',
5:'rgba(57, 219, 183, 1)' 5: 'rgba(57, 219, 183, 1)',
}[parseInt(value.currentRatio/20)] }[parseInt(value.currentRatio / 20)]
" "
/> />
</div> </div>
<div <div
style=" style="
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: #277aff; color: #277aff;
margin-left: 10px; margin-left: 10px;
" "
:style="{ :style="{
color: color: {
{ 0: 'rgba(238, 112, 108, 1)',
0:'rgba(238, 112, 108, 1)', 1: 'rgba(255, 151, 38, 1)',
1:'rgba(255, 151, 38, 1)', 2: 'rgba(39, 122, 255, 1)',
2:'rgba(39, 122, 255, 1)', 3: 'rgba(59, 94, 251, 1)',
3:'rgba(59, 94, 251, 1)', 4: 'rgba(57, 219, 183, 1)',
4:'rgba(57, 219, 183, 1)', 5: 'rgba(57, 219, 183, 1)',
5:'rgba(57, 219, 183, 1)' }[parseInt(value.currentRatio / 20)],
}[parseInt(value.currentRatio/20)]
}" }"
> >
{{ value.currentRatio }}% {{ value.currentRatio }}%
@@ -102,11 +109,14 @@
</div> </div>
</div> </div>
</div> </div>
<div class="goclass" :style="{background:`${types.path[value.type]?'#2478ff':'#999'}`}" <div
@click="toFinish(value)"> class="goclass"
{{ :style="{
types.path[value.type] ? types.toName[value.type] : '未开放' background: `${types.path[value.type] ? '#2478ff' : '#999'}`,
}} }"
@click="toFinish(value)"
>
{{ types.path[value.type] ? types.toName[value.type] : "未开放" }}
</div> </div>
<!-- <div :style="{ display: value.status === 1 ? 'block' : 'none' }">--> <!-- <div :style="{ display: value.status === 1 ? 'block' : 'none' }">-->
<!-- <div--> <!-- <div-->
@@ -135,29 +145,29 @@
<div class="notice"> <div class="notice">
请各位选课的同学提前阅读本课程的 请各位选课的同学提前阅读本课程的
“教学大纲与计划”“课程考核要求”与“学习要求” “教学大纲与计划”“课程考核要求”与“学习要求”
，并按给定的中学化学教学主题分好小组 <br/> ，并按给定的中学化学教学主题分好小组 <br />
每位同学在网上学习的活动轨迹都会自动被系统记录将作为大家个人线上参与的评价依据；<br/> 每位同学在网上学习的活动轨迹都会自动被系统记录将作为大家个人线上参与的评价依据；<br />
请大家务必在规定的时间内提交作业，否则会被系统自动记录为“迟交”或“未交”则会影响线上参与的平时成 请大家务必在规定的时间内提交作业，否则会被系统自动记录为“迟交”或“未交”则会影响线上参与的平时成
绩；<br/> 绩；<br />
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="共享文档" name="second"> <el-tab-pane label="共享文档" name="second">
<div style="padding: 19px 30px 17px 28px"> <div style="padding: 19px 30px 17px 28px">
<div <div
v-for="(value, index) in sharedoc" v-for="(value, index) in sharedoc"
:key="index" :key="index"
style=" style="
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 15px; margin-bottom: 15px;
" "
> >
<img :src="value.img" style="width: 22px; height: 26px"/> <img :src="value.img" style="width: 22px; height: 26px" />
<div class="sharedocname">{{ value.name }}</div> <div class="sharedocname">{{ value.name }}</div>
<div class="download"> <div class="download">
<img <img
src="../../assets/image/download.png" src="../../assets/image/download.png"
style="width: 16px; height: 15px" style="width: 16px; height: 15px"
/> />
<div style="margin-left: 7px">下载</div> <div style="margin-left: 7px">下载</div>
</div> </div>
@@ -172,23 +182,25 @@
<div class="info"> <div class="info">
<div class="title"> <div class="title">
<img <img
style="width: 21px; height: 20px" style="width: 21px; height: 20px"
src="../../assets/image/pathdetails/info.png" src="../../assets/image/pathdetails/info.png"
/> />
<div class="text" style="margin-left: 7px">个人信息</div> <div class="text" style="margin-left: 7px">个人信息</div>
<div class="box"></div> <div class="box"></div>
</div> </div>
<!-- todo #路径详情 个人信息缺少img和介绍--> <!-- todo #路径详情 个人信息缺少img和介绍-->
<div <div
class="teacheritem" class="teacheritem"
:style="{'border-bottom': '1px solid rgba(56, 125, 247, 0.2)'}" :style="{ 'border-bottom': '1px solid rgba(56, 125, 247, 0.2)' }"
> >
<img class="peopleimg" :src="userAvatar"/> <img class="peopleimg" :src="userAvatar" />
<div style="margin-left: 17px"> <div style="margin-left: 17px">
<div class="teacherName"> <div class="teacherName">
<div style="margin-right: 5px">{{ data.userInfoBo?.userName }}</div> <div style="margin-right: 5px">
{{ data.userInfoBo?.userName }}
</div>
<div v-for="(item, key) in data.userInfoBo?.medal" :key="key"> <div v-for="(item, key) in data.userInfoBo?.medal" :key="key">
<img class="teacherMedal" :src="item"/> <img class="teacherMedal" :src="item" />
</div> </div>
</div> </div>
<div class="introduce">{{ data.userInfoBo?.introduce }}</div> <div class="introduce">{{ data.userInfoBo?.introduce }}</div>
@@ -198,8 +210,8 @@
<div class="info" style="padding-top: 20px"> <div class="info" style="padding-top: 20px">
<div class="title"> <div class="title">
<img <img
style="width: 18px; height: 17px" style="width: 18px; height: 17px"
src="../../assets/image/pathdetails/study.png" src="../../assets/image/pathdetails/study.png"
/> />
<div class="text" style="margin-left: 9px">学习进度</div> <div class="text" style="margin-left: 9px">学习进度</div>
<div class="box"></div> <div class="box"></div>
@@ -214,39 +226,49 @@
<div class="progress"> <div class="progress">
<div style="width: 291px"> <div style="width: 291px">
<el-progress <el-progress
:percentage="parseInt(data.currentChapterCnt/data.totalChapterCnt * 100)" :percentage="
:show-text="false" parseInt(
:stroke-width="8" (data.currentChapterCnt / data.totalChapterCnt) * 100
:color=" )
{ "
0:'rgba(238, 112, 108, 1)', :show-text="false"
1:'rgba(255, 151, 38, 1)', :stroke-width="8"
2:'rgba(39, 122, 255, 1)', :color="
3:'rgba(59, 94, 251, 1)', {
4:'rgba(57, 219, 183, 1)', 0: 'rgba(238, 112, 108, 1)',
5:'rgba(57, 219, 183, 1)' 1: 'rgba(255, 151, 38, 1)',
}[parseInt(data.currentChapterCnt/data.totalChapterCnt)] 2: 'rgba(39, 122, 255, 1)',
3: 'rgba(59, 94, 251, 1)',
4: 'rgba(57, 219, 183, 1)',
5: 'rgba(57, 219, 183, 1)',
}[
parseInt(
data.currentChapterCnt / data.totalChapterCnt
)
]
" "
/> />
</div> </div>
<div <div
style=" style="font-size: 14px; font-weight: 500; margin-left: 10px"
font-size: 14px; :style="{
font-weight: 500;
margin-left: 10px;
"
:style="{
color: { color: {
0:'rgba(238, 112, 108, 1)', 0: 'rgba(238, 112, 108, 1)',
1:'rgba(255, 151, 38, 1)', 1: 'rgba(255, 151, 38, 1)',
2:'rgba(39, 122, 255, 1)', 2: 'rgba(39, 122, 255, 1)',
3:'rgba(59, 94, 251, 1)', 3: 'rgba(59, 94, 251, 1)',
4:'rgba(57, 219, 183, 1)', 4: 'rgba(57, 219, 183, 1)',
5:'rgba(57, 219, 183, 1)' 5: 'rgba(57, 219, 183, 1)',
}[parseInt(data.currentChapterCnt/data.totalChapterCnt)] }[
parseInt(data.currentChapterCnt / data.totalChapterCnt)
],
}" }"
> >
{{ parseInt(data.currentChapterCnt / data.totalChapterCnt * 100) }}% {{
parseInt(
(data.currentChapterCnt / data.totalChapterCnt) * 100
)
}}%
</div> </div>
</div> </div>
</div> </div>
@@ -257,41 +279,44 @@
<div class="progress"> <div class="progress">
<div style="width: 291px"> <div style="width: 291px">
<el-progress <el-progress
:percentage="parseInt(data.currentReqCnt/data.totalReqCnt * 100)" :percentage="
:show-text="false" parseInt((data.currentReqCnt / data.totalReqCnt) * 100)
:stroke-width="8" "
:color=" :show-text="false"
:stroke-width="8"
:color="
{ {
0:'rgba(238, 112, 108, 1)', 0: 'rgba(238, 112, 108, 1)',
1:'rgba(255, 151, 38, 1)', 1: 'rgba(255, 151, 38, 1)',
2:'rgba(39, 122, 255, 1)', 2: 'rgba(39, 122, 255, 1)',
3:'rgba(59, 94, 251, 1)', 3: 'rgba(59, 94, 251, 1)',
4:'rgba(57, 219, 183, 1)', 4: 'rgba(57, 219, 183, 1)',
5:'rgba(57, 219, 183, 1)' 5: 'rgba(57, 219, 183, 1)',
}[parseInt(data.currentReqCnt/data.totalReqCnt)] }[parseInt(data.currentReqCnt / data.totalReqCnt)]
" "
/> />
</div> </div>
<div <div
style=" style="
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: #277aff; color: #277aff;
margin-left: 10px; margin-left: 10px;
" "
:style="{ :style="{
color: color: {
{ 0: 'rgba(238, 112, 108, 1)',
0:'rgba(238, 112, 108, 1)', 1: 'rgba(255, 151, 38, 1)',
1:'rgba(255, 151, 38, 1)', 2: 'rgba(39, 122, 255, 1)',
2:'rgba(39, 122, 255, 1)', 3: 'rgba(59, 94, 251, 1)',
3:'rgba(59, 94, 251, 1)', 4: 'rgba(57, 219, 183, 1)',
4:'rgba(57, 219, 183, 1)', 5: 'rgba(57, 219, 183, 1)',
5:'rgba(57, 219, 183, 1)' }[parseInt(data.currentReqCnt / data.totalReqCnt)],
}[parseInt(data.currentReqCnt/data.totalReqCnt)]
}" }"
> >
{{ parseInt(data.currentReqCnt / data.totalReqCnt * 100) }}% {{
parseInt((data.currentReqCnt / data.totalReqCnt) * 100)
}}%
</div> </div>
</div> </div>
</div> </div>
@@ -306,26 +331,30 @@
</template> </template>
<script setup> <script setup>
import {computed, reactive, ref, watch} from "vue"; import { computed, reactive, ref, watch } from "vue";
import word from '@/assets/image/file/word.png' import word from "@/assets/image/file/word.png";
import ppt from '@/assets/image/file/ppt.png' import ppt from "@/assets/image/file/ppt.png";
import pdf from '@/assets/image/file/pdf.png' import pdf from "@/assets/image/file/pdf.png";
import zip from '@/assets/image/file/zip.png' import zip from "@/assets/image/file/zip.png";
import md from '@/assets/image/file/md.png' import md from "@/assets/image/file/md.png";
import medal1 from '@/assets/image/medal/medal1.png' import medal1 from "@/assets/image/medal/medal1.png";
import medal2 from '@/assets/image/medal/medal2.png' import medal2 from "@/assets/image/medal/medal2.png";
import medal3 from '@/assets/image/medal/medal3.png' import medal3 from "@/assets/image/medal/medal3.png";
import img from '@/assets/image/uploadimg.png' import img from "@/assets/image/uploadimg.png";
import {boeRequest, useRequest} from "@/api/request"; import { boeRequest, useRequest } from "@/api/request";
import {ROUTER_PROCESS} from "@/api/api"; import { ROUTER_PROCESS } from "@/api/api";
import {useRoute, useRouter} from "vue-router"; import { useRoute, useRouter } from "vue-router";
import {ElMessage} from 'element-plus' import { ElMessage } from "element-plus";
import {useUserInfo} from "@/api/utils"; import { useUserInfo } from "@/api/utils";
const {query: {routerId}} = useRoute() const {
const router = useRouter() query: { routerId },
const {data} = useRequest(ROUTER_PROCESS, {routerId}) } = useRoute();
const {avatar: userAvatar} = useUserInfo(computed(() => data.value?.userInfoBo?.userId)) const router = useRouter();
const { data } = useRequest(ROUTER_PROCESS, { routerId });
const { avatar: userAvatar } = useUserInfo(
computed(() => data.value?.userInfoBo?.userId)
);
const state = reactive({ const state = reactive({
course: [ course: [
@@ -502,85 +531,86 @@ const state = reactive({
name: "王星天（显示事业）", name: "王星天（显示事业）",
introduce: "教师是学生的镜子,学生是老师的影子。", introduce: "教师是学生的镜子,学生是老师的影子。",
peopleimg: img, peopleimg: img,
medal: [ medal: [medal1, medal2, medal3],
medal1,
medal2,
medal3,
],
}, },
], ],
}); });
const activeName = ref('first') const activeName = ref("first");
const totalprogress = ref(30) const totalprogress = ref(30);
const compulsoryprogress = ref(10) const compulsoryprogress = ref(10);
const handleClick = (tab, event) => { const handleClick = (tab, event) => {
console.log(tab, event); console.log(tab, event);
}; };
const path = {1: 'path'} const path = { 1: "path" };
const types = ref({ const types = ref({
typeName: { typeName: {
1: '在线', 1: "在线",
2: '面授', 2: "面授",
3: '案例', 3: "案例",
4: '作业', 4: "作业",
5: '考试', 5: "考试",
6: '直播', 6: "直播",
7: '外链', 7: "外链",
8: '讨论', 8: "讨论",
9: '活动', 9: "活动",
10: '测评', 10: "测评",
11: '评估', 11: "评估",
12: '投票', 12: "投票",
13: '项目', 13: "项目",
}, },
toName: { toName: {
1: '去上课', 1: "去上课",
2: '去上课', 2: "去上课",
3: '案例', 3: "案例",
4: '去完成', 4: "去完成",
5: '去完成', 5: "去完成",
6: '去签到', 6: "去签到",
7: '外链', 7: "外链",
8: '去讨论', 8: "去讨论",
9: '去签到', 9: "去签到",
10: '去完成', 10: "去完成",
11: '去完成', 11: "去完成",
12: '去投票', 12: "去投票",
13: '去完成', 13: "去完成",
}, },
path: { path: {
1: import.meta.env.VITE_BOE_ONLINE_CLASS_URL, 1: import.meta.env.VITE_BOE_ONLINE_CLASS_URL,
2: '/faceteach', 2: "/faceteach",
3: import.meta.env.VITE_BOE_CASS_DETAIL_URL, 3: import.meta.env.VITE_BOE_CASS_DETAIL_URL,
4: '/homeworkpage', 4: "/homeworkpage",
5: import.meta.env.VITE_BOE_TEST_DETAIL_URL, 5: import.meta.env.VITE_BOE_TEST_DETAIL_URL,
6: '/livebroadcast', 6: "/livebroadcast",
7: '', 7: "",
8: '/discusspage', 8: "/discusspage",
9: '/moreactive', 9: "/moreactive",
10: '/surveydetail', 10: "/surveydetail",
11: '/surveydetail', 11: "/surveydetail",
12: '/ballotpage', 12: "/ballotpage",
13: '去完成' 13: "去完成",
} },
}) });
function toFinish(d) { function toFinish(d) {
if (!types.value.path[d.type]) { if (!types.value.path[d.type]) {
ElMessage.error('暂时未开放') ElMessage.error("暂时未开放");
return
}
if (types.value.path[d.type] && types.value.path[d.type].startsWith('http')) {
//配置文件
const url = types.value.path[d.type] + (d.type === 1 ? d.targetId : d.courseId)
import.meta.env.DEV ? (window.location.href = url) : (window.parent.location.href = url)
return; return;
} }
router.push({path: types.value.path[d.type], query: {id: d.routerTaskId, type: 1, courseId: d.courseId}}) if (types.value.path[d.type] && types.value.path[d.type].startsWith("http")) {
//配置文件
const url =
types.value.path[d.type] + (d.type === 1 ? d.targetId : d.courseId);
import.meta.env.DEV
? (window.location.href = url)
: (window.parent.location.href = url);
return;
}
router.push({
path: types.value.path[d.type],
query: { id: d.routerTaskId, type: 1, courseId: d.courseId },
});
} }
</script> </script>
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->