feat:增加外链评估直播

This commit is contained in:
lixg
2023-01-17 19:43:45 +08:00
parent cd70db77a4
commit cd23ef10a6
21 changed files with 2844 additions and 651 deletions

View File

@@ -1,6 +1,7 @@
<template>
<div class="faceteach">
<TitleHead text="【其他活动】核心项目面授课"></TitleHead>
<ReturnHead text="课程详情"></ReturnHead>
<TitleHead :text="'【面授课】' + data.planDto?.name"></TitleHead>
<div class="main">
<div class="title">
<div class="titlemain">
@@ -11,7 +12,11 @@
src="../../assets/image/faceteach/time.png"
/>
<div style="font-size: 12px; color: rgba(110, 123, 132, 1)">
2022-07-20 20:00-21:00
{{
dayjs(data.planDto?.beginTime).format("YYYY-MM-DD HH:mm") +
" 至 " +
dayjs(data.planDto?.endTime).format("YYYY-MM-DD HH:mm")
}}
</div>
</div>
<div class="time" style="margin-top: 9px">
@@ -20,32 +25,129 @@
src="../../assets/image/faceteach/position.png"
/>
<div style="font-size: 12px; color: rgba(110, 123, 132, 1)">
大族广场
{{ data.planDto?.address }}
</div>
</div>
</div>
<div class="titlebtn">评估</div>
<!-- <div class="titlebtn">评估</div> -->
<div v-if="projectStatus && projectEndTime">
<div
v-if="
projectStatus !== '3' &&
new Date(projectEndTime).getTime() > new Date().getTime()
"
style="display: flex"
>
<botton
class="titlebtn"
style="margin-right: 20px"
:style="{
background: isAllowSign
? data.signFlag
? '#999'
: 'rgb(57, 146, 249)'
: '#999',
}"
@click="signClick"
>{{ data.signFlag ? "已签到" : "签到" }}
</botton>
<!-- <botton style="background: #999" class="btn" @click="toSurvery" v-if="data.planDto?.evalFlag == 0">
评估
</botton> -->
<botton
v-if="data.planDto?.evalFlag !== 0"
:style="{
background: `${
new Date(data.planDto?.beginTime).getTime() >
new Date().getTime()
? '#999'
: data.isSurvery
? '#999'
: 'rgb(57, 146, 249)'
}`,
}"
class="titlebtn"
@click="toSurvery"
>{{ data.isSurvery ? "已评估" : "评估" }}
</botton>
</div>
</div>
<div v-else>
<div style="display: flex">
<botton
class="titlebtn"
style="margin-right: 20px"
:style="{
background: isAllowSign
? data.signFlag
? '#999'
: 'rgb(57, 146, 249)'
: '#999',
}"
@click="signClick"
>{{ data.signFlag ? "已签到" : "签到" }}
</botton>
<!-- <botton style="background: #999" class="btn" @click="toSurvery" v-if="data.planDto?.evalFlag == 0">
评估
</botton> -->
<botton
v-if="data.planDto?.evalFlag !== 0"
:style="{
background: `${
new Date(data.planDto?.beginTime).getTime() >
new Date().getTime()
? '#999'
: data.isSurvery
? '#999'
: 'rgb(57, 146, 249)'
}`,
}"
class="titlebtn"
@click="toSurvery"
>{{ data.isSurvery ? "已评估" : "评估" }}
</botton>
</div>
</div>
<!-- <button
v-if="data.planDto?.evalFlag !== 0"
:style="{
background: `${
new Date(data.planDto?.beginTime).getTime() >
new Date().getTime()
? '#999'
: data.isSurvery
? '#999'
: 'rgb(57, 146, 249)'
}`,
}"
class="titlebtn"
@click="toSurvery"
>
{{ data.isSurvery ? "已评估" : "评估" }}
</button> -->
</div>
</div>
<div class="teacher">
<div style="width: 90%">
<div class="teachertitle">
<div class="teachertitle" style="width: 100px">
<img
style="width: 17px; height: 17px"
src="../../assets/image/faceteach/livelecturer.png"
/>
<div class="talk">直播讲师</div>
<div class="box"></div>
<div class="talk">面授课讲师</div>
<div class="box" style="width: 80px; right: 0px"></div>
</div>
<div class="teachermain">
<img class="teacherAvatar" src="../../assets/image/img.jpg" />
<img class="teacherAvatar" :src="teacherInfo.avatar" />
<div style="flex: 1; margin-left: 11px; margin-right: 13px">
<div class="teacherName">王星天显示事业</div>
<div class="teacherName">{{ data.planDto?.teacher }}</div>
<div class="teacherIntro">
教师是学生的镜子,学生是 老师的影子
{{ data.planDto?.bandDesc }}
</div>
</div>
<div class="teacherFollow">+ 关注</div>
<!-- <div class="teacherFollow">+ 关注</div> -->
</div>
</div>
</div>
@@ -60,12 +162,7 @@
<div class="box"></div>
</div>
<div class="detailMain">
通过对各级人员的软件平台培训使其能够了解如何
运用乾元坤和智能信息管理系统来提升企业管理水平
最大限度发挥软件产品在企业中的作用<br />
1.使企业不同部门人员掌握便捷有效的系统平台操 作方法;<br />
2.通过系统平台的培训提高员工对企业的管理理念认 识与提升<br />
3.通过系统平台培训加强沟通统一部署协同工作 提高效率
{{ data.planDto?.description }}
</div>
</div>
</div>
@@ -74,76 +171,215 @@
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="课程附件" name="first">
<div
v-for="(el, index) in enclosure"
:key="el.id"
class="enclosure"
:style="{
'border-bottom':
index === enclosure.length - 1
? null
: '1px solid rgba(56, 125, 247, 0.2)',
}"
v-if="data.planDto?.attach === ''"
style="
font-size: 14px;
font-weight: 400;
line-height: 24px;
cursor: pointer;
margin-left: 40px;
margin-top: 20px;
margin-bottom: 20px;
"
>
<div class="enclosureL">
<img style="width: 19.5px; height: 22px" :src="el.img" />
<div style="margin-left: 15px">{{ el.name }}</div>
</div>
<div class="download">
<img
style="width: 13px; height: 12px"
src="../../assets/image/faceteach/download.png"
/>
<div style="margin-left: 2.5px">下载</div>
此课程无附件
</div>
<div v-else>
<div
v-for="(el, index) in formateArr(data.planDto?.attach)"
:key="index"
class="enclosure"
:style="{
borderBottom: '1px solid rgba(56, 125, 247, 0.2)',
}"
>
<div class="enclosureL">
<FileTypeImg
:v-model="
el.name
? el.name
: el.slice(el.lastIndexOf('/') + 1, el.indexOf('-')) +
el.slice(el.lastIndexOf('.'))
"
:style="{
width: '19.5px',
height: '22px',
marginLeft: '10px',
}"
></FileTypeImg>
<div style="margin-left: 15px">
{{
el.name
? el.name
: el.slice(el.lastIndexOf("/") + 1, el.indexOf("-")) +
el.slice(el.lastIndexOf("."))
}}
</div>
<!-- <img style="width: 19.5px; height: 22px" :src="el.img" />
<div style="margin-left: 15px">{{ el.name }}</div> -->
</div>
<div
v-if="
projectStatus !== '3' &&
new Date(projectEndTime).getTime() > new Date().getTime()
"
>
<div
v-if="
new Date(data.planDto.beginTime).getTime() >
new Date().getTime()
"
class="download"
>
<img
style="width: 13px; height: 12px"
src="../../assets/image/faceteach/download.png"
/>
<div style="margin-left: 2.5px" @click="downloads(el)">
下载
</div>
</div>
<div v-else class="download">
<img
style="width: 13px; height: 12px"
src="../../assets/image/faceteach/download.png"
/>
<div
style="margin-left: 2.5px; color: #999"
@click="download(el.name ? el.response.data : el)"
>
下载
</div>
</div>
</div>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="课程作业" name="second">
<div class="work">
<div class="question">社交产品如何做好模块化处理</div>
<div style="display: flex; justify-content: space-between">
<div
style="
margin-top: 16px;
flex: 1;
display: flex;
flex-wrap: wrap;
"
>
<div class="tag1" style="margin: 0px 10px 10px 0px">
必修
</div>
<div class="tag3" style="margin: 0px 10px 10px 0px">
作业
<div v-if="data.workDto">
<div>
<div class="question">{{ data.workDto?.workName }}</div>
<div style="display: flex; justify-content: space-between">
<div
style="
margin-top: 16px;
flex: 1;
display: flex;
flex-wrap: wrap;
"
>
<div
class="tag1"
v-if="data.workDto?.workFlag"
style="margin: 0px 10px 10px 0px"
>
必修
</div>
<div class="tag3" style="margin: 0px 10px 10px 0px">
作业
</div>
</div>
</div>
</div>
<div class="submit">提交</div>
<div
v-if="
projectStatus !== '3' &&
new Date(projectEndTime).getTime() > new Date().getTime()
"
:style="{
background:
new Date(data.planDto?.beginTime).getTime() >
new Date().getTime()
? '#999'
: '',
}"
class="submit"
@click="toWork"
>
交作业
</div>
</div>
<div
v-else
style="
font-size: 14px;
font-weight: 400;
line-height: 24px;
cursor: pointer;
margin-left: 40px;
margin-top: 20px;
"
>
此课程无作业
</div>
</div>
</el-tab-pane>
<el-tab-pane label="课程考试" name="third">
<div class="work">
<el-tab-pane
label="课程考试"
name="third"
:disabed="dayjs().isBefore(dayjs(data.planDto?.beginTime))"
>
<div class="work" v-if="data.examinationDto?.examinationTestName">
<div class="question">
模块化产品展示相关案例与展示如何自由组合你的 思考
{{ data.examinationDto?.examinationName }}
</div>
<div style="display: flex; justify-content: space-between">
<div
style="
margin-top: 16px;
flex: 1;
display: flex;
flex-wrap: wrap;
"
>
<div class="tag1" style="margin: 0px 10px 10px 0px">
必修
</div>
<div class="tag3" style="margin: 0px 10px 10px 0px">
作业
<div>
<div
style="
margin-top: 16px;
flex: 1;
display: flex;
flex-wrap: wrap;
"
>
<div
class="tag1"
style="margin: 0px 10px 10px 0px"
v-if="data.examinationDto?.examinationFlag"
>
必修
</div>
<div class="tag3" style="margin: 0px 10px 10px 0px">
考试
</div>
</div>
</div>
<div class="submit">提交</div>
<div
v-if="
projectStatus !== '3' &&
new Date(projectEndTime).getTime() > new Date().getTime()
"
:style="{
background:
new Date(data.planDto?.beginTime).getTime() >
new Date().getTime()
? '#999'
: '',
}"
class="submit"
@click="toExamItem(data.examinationDto)"
>
去考试
</div>
</div>
</div>
<div
v-else
style="
font-size: 14px;
font-weight: 400;
line-height: 24px;
cursor: pointer;
margin-left: 40px;
margin-top: 20px;
margin-bottom: 20px;
"
>
此课程无考试
</div>
</el-tab-pane>
</el-tabs>
</div>
@@ -152,79 +388,217 @@
</div>
</template>
<script>
import { reactive, toRefs } from "vue";
<script setup>
import TitleHead from "@/components/TitleHead.vue";
export default {
name: "FaceTeach",
components: {
TitleHead,
},
setup() {
const state = reactive({
activeName: "first",
enclosure: [
{
id: 1,
name: "项目参考文档.doc",
img: require("../../assets/image/file/word.png"),
},
{
id: 2,
name: "人工智能启蒙讲解讲义.pptx",
img: require("../../assets/image/file/ppt.png"),
},
{
id: 3,
name: "人工智能启蒙讲解讲义.xlsx",
img: require("../../assets/image/file/excel.png"),
},
],
teacher: [
{
id: 1,
name: "王星天(显示事业)",
introduce: "教师是学生的镜子,学生是老师的影子。",
peopleimg: require("../../assets/image/img.jpg"),
medal: [
require("../../assets/image/medal/medal1.png"),
require("../../assets/image/medal/medal2.png"),
require("../../assets/image/medal/medal3.png"),
],
},
{
id: 2,
name: "王星天(显示事业)",
introduce: "教师是学生的镜子,学生是老师的影子。",
peopleimg: require("../../assets/image/img.jpg"),
medal: [
require("../../assets/image/medal/medal1.png"),
require("../../assets/image/medal/medal2.png"),
],
},
{
id: 3,
name: "王星天(显示事业)",
introduce:
"教师是学生的镜子,学生是老师的影子。教师是学生的镜子,学生是老师的影子。教师是学生的镜子,学生是老师的影子。教师是学生的镜子,学生是老师的影子。",
peopleimg: require("../../assets/image/img.jpg"),
medal: [
require("../../assets/image/medal/medal1.png"),
require("../../assets/image/medal/medal2.png"),
require("../../assets/image/medal/medal3.png"),
],
},
],
});
const handleClick = (tab, event) => {
console.log(tab, event);
};
return {
...toRefs(state),
handleClick,
};
},
import ReturnHead from "@/components/ReturnHead.vue";
import { computed, reactive, toRefs, watch, onUnmounted } from "vue";
import FileTypeImg from "@/components/FileTypeImg.vue";
import { request, useRequest } from "@/api/request";
import {
STU_OFFCOURSE_DETAIL,
TASK_OFFCOURSE_NOTASK_SIGN,
TASK_OFFCOURSE_SIGN,
TASK_BROADCAST_SIGN,
} from "@/api/api";
import { useRoute, useRouter } from "vue-router";
import { useUserInfo } from "@/api/utils";
import { ElMessage, messageConfig } from "element-plus";
import dayjs from "dayjs";
const router = useRouter();
const returnclick = () => {
router.back();
};
const {
query: { courseId, type, id: taskId, projectStatus, projectEndTime },
} = useRoute();
const { data } = useRequest(STU_OFFCOURSE_DETAIL, { courseId });
console.log("datadatadatadatadatadatadata", data);
console.log("项目状态字段传递", projectStatus, projectEndTime);
const teacherInfo = useUserInfo(computed(() => data.value?.planDto?.teacherId));
const state = reactive({
activeName: "first",
enclosure: "",
isAllowSign: false,
});
const { activeName, enclosure, isAllowSign } = toRefs(state);
const handleClick = (tab, event) => {
console.log("附件", tab, event);
};
const download = (url) => {
window.open(url);
};
const downloads = (url) => {
ElMessage.warning("未到开始时间,请耐心等待!");
};
function formateArr(strs) {
let newArr = [];
try {
newArr = JSON.parse(strs);
} catch {
newArr = strs.split(",");
}
console.log("112233", newArr);
return newArr;
}
let timer = null;
//判断能否签到
function isSignClick() {
timer = setInterval(() => {
let beginTime = new Date(data.value.planDto?.beginTime).getTime();
let endTime = !data.value.planDto?.afterStart
? new Date(data.value.planDto?.endTime).getTime()
: new Date(data.value.planDto?.beginTime).getTime();
let nowTime = new Date().getTime();
if (data.value.planDto?.beforeStart && data.value.planDto?.afterStart) {
//有开始前有开始后
beginTime = beginTime - data.value.planDto?.beforeStart * 60 * 1000;
endTime = endTime + data.value.planDto?.afterStart * 60 * 1000;
console.log("1111");
} else if (
data.value.planDto?.beforeStart &&
!data.value.planDto?.afterStart
) {
//只有开始前无开始后
beginTime = beginTime - data.value.planDto?.beforeStart * 60 * 1000;
console.log("11112222");
} else if (
!data.value.planDto?.beforeStart &&
data.value.planDto?.afterStart
) {
//无开始前有开始后
endTime = endTime + data.value.planDto?.afterStart * 60 * 1000;
console.log("1111333");
}
if (nowTime < endTime && nowTime > beginTime) {
state.isAllowSign = true;
} else {
state.isAllowSign = false;
}
// console.log(
// "isAllowSign",
// state.isAllowSign,
// nowTime,
// endTime,
// beginTime,
// nowTime < endTime,
// nowTime > beginTime
// );
}, 1000);
}
isSignClick();
//签到
const signClick = () => {
if (data.value.signFlag) {
return;
}
// console.log(
// "data.signFlag",
// data.value.signFlag,
// state.isAllowSign,
// !state.isAllowSign
// );
//if (data.value.planDto.beginTime) {
// let date1 = new Date(data.value.planDto.beginTime).getTime()
// let date2 = new Date().getTime()
// if (date1 > date2) {
// ElMessage.info("未到开始时间,请耐心等待!");
// return;
// }
//}
if (!state.isAllowSign) {
// console.log("data.signFlag", data.value.signFlag, isAllowSign);
ElMessage.warning("未在允许签到时间范围内");
return;
}
data.value.signFlag = 1;
ElMessage.warning("签到成功");
if (taskId) {
request(TASK_OFFCOURSE_SIGN, { courseId: courseId, taskId, type });
} else {
request(TASK_OFFCOURSE_NOTASK_SIGN, { courseId: courseId });
}
};
function toSurvery() {
if (data.value.isSurvery) {
// return;
}
if (
data.value.planDto.beginTime &&
dayjs().isBefore(data.value.planDto.beginTime)
) {
ElMessage.warning("课程未开始,请耐心等待!");
return;
}
if (data.value.planDto.evalFlag == 0) {
ElMessage.warning("此课程无评估");
return;
}
router.push({
path: "/investigatpage",
query: {
id: taskId,
courseId: data.value.planDto.evaluateId,
pName: "面授课",
infoId: data.value.planDto.offcoursePlanId,
chapterOrStageId: 0,
sName: data.value.planDto.name,
type,
},
});
}
function toWork() {
if (data.value.planDto.beginTime) {
let date1 = new Date(data.value.planDto.beginTime).getTime();
let date2 = new Date().getTime();
if (date1 > date2) {
ElMessage.warning("未到开始时间,请耐心等待!");
}
}
router.push({
path: "/homeworkpage",
query: {
courseId: data.value.workDto.workId,
id: taskId,
infoId: data.value.offcourseDto.offcourseId,
chapterOrStageId: 0,
type,
pName: "面授课",
sName: data.value.planDto.name,
},
});
}
function toExamItem(obj) {
if (data.value.planDto.beginTime) {
let date1 = new Date(data.value.planDto.beginTime).getTime();
let date2 = new Date().getTime();
if (date1 > date2) {
ElMessage.warning("未到开始时间,请耐心等待!");
}
}
console.log("obj", obj.examinationTestId);
window.open(
import.meta.env.VITE_BOE_EXAM_DETAIL_URL + obj.examinationTestId,
"_top"
); //测评
// router.push({ path: import.meta.env.VITE_BOE_EXAM_DETAIL_URL+ obj.examinationTestId });
}
onUnmounted(() => {
if (timer) {
clearInterval(timer);
}
});
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->