Merge branch 'develop' of ssh://gitlab.dongwu-inc.com:10022/BOE/fe-stu into develop
BIN
src/assets/image/pathdetails/组 23(1).png
Normal file
|
After Width: | Height: | Size: 21 KiB |
BIN
src/assets/image/pathdetails/组 23.png
Normal file
|
After Width: | Height: | Size: 5.4 KiB |
BIN
src/assets/image/pathdetails/组 23@2x.png
Normal file
|
After Width: | Height: | Size: 16 KiB |
BIN
src/assets/image/pathdetails/组 23@3x.png
Normal file
|
After Width: | Height: | Size: 32 KiB |
BIN
src/assets/image/pathdetails/路径图背景线.png
Normal file
|
After Width: | Height: | Size: 64 KiB |
BIN
src/assets/image/pathdetails/路径图背景线@2x.png
Normal file
|
After Width: | Height: | Size: 161 KiB |
BIN
src/assets/image/pathdetails/路径图背景线@3x.png
Normal file
|
After Width: | Height: | Size: 114 KiB |
82
src/components/PathDetailImage.vue
Normal file
@@ -0,0 +1,82 @@
|
|||||||
|
<template>
|
||||||
|
<div class="pathDetail" v-if="visiable" :style="{background:`url('${back}') no-repeat`}">
|
||||||
|
<div v-for="(item,i) in detail.chapterDtoList" :key="i" class="cha"
|
||||||
|
:style="{top:`${imgAttr.positions[i]?.top - (current===i?10:0)}px`,left:`${imgAttr.positions[i]?.left - (current===i?10:0)}px`}">
|
||||||
|
<div @click="toDetail(i)"
|
||||||
|
:style="{background: `url('${current===i?currentBack:nameBack}')`,width:`${current===i?278:245}px`,height:`${current===i?120:105}px`,textAlign:'center',lineHeight:'75px',color:'#FFF'}">
|
||||||
|
{{ item.name }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import {computed, defineProps, ref, watch} from "vue";
|
||||||
|
import back from '@/assets/image/pathdetails/路径图背景线.png'
|
||||||
|
import nameBack from '@/assets/image/pathdetails/组 23@2x.png'
|
||||||
|
import currentBack from '@/assets/image/pathdetails/组 23(1).png'
|
||||||
|
import {useRouter} from "vue-router/dist/vue-router";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
value: String,
|
||||||
|
img: String,
|
||||||
|
detail: {
|
||||||
|
type: Object,
|
||||||
|
default: {}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const router = useRouter();
|
||||||
|
const visiable = ref(true)
|
||||||
|
const imageAttrs = {
|
||||||
|
'路径图背景-1671015331292.png': {
|
||||||
|
width: 1437,
|
||||||
|
height: 594,
|
||||||
|
positions: [
|
||||||
|
{left: -72, top: 508},
|
||||||
|
{left: 147, top: 356},
|
||||||
|
{left: 689, top: 263},
|
||||||
|
{left: 617, top: 69},
|
||||||
|
{left: 1047, top: 42},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const imgAttr = computed(() => imageAttrs[Object.keys(imageAttrs).find(e => props.img.includes(e))] || {})
|
||||||
|
|
||||||
|
const current = computed(() => props.detail.chapterDtoList.findIndex(e => e.chapterId === props.detail.currentStageId))
|
||||||
|
|
||||||
|
function show() {
|
||||||
|
visiable.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
function toDetail(i) {
|
||||||
|
if (current.value !== i) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
import.meta.env.MODE === "development"
|
||||||
|
? router.push({
|
||||||
|
path: "/pathdetails",
|
||||||
|
query: {routerId: props.detail.routerId, routerName: props.detail.routerName},
|
||||||
|
})
|
||||||
|
: window.open(
|
||||||
|
`${import.meta.env.VITE_BOE_PATH_DETAIL_URL}/pathdetails¶ms=${encodeURIComponent(
|
||||||
|
`routerId=${props.detail.routerId}&routerName=${props.detail.routerName}`
|
||||||
|
)}`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function close() {
|
||||||
|
visiable.value = false
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
.pathDetail {
|
||||||
|
width: 100%;
|
||||||
|
height: 1011px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cha {
|
||||||
|
position: absolute;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -14,13 +14,11 @@
|
|||||||
<span class="content" style="margin-left: 31px">下一个</span>
|
<span class="content" style="margin-left: 31px">下一个</span>
|
||||||
<button class="btn btn02" style="margin-left: 6px"></button>
|
<button class="btn btn02" style="margin-left: 6px"></button>
|
||||||
</div>-->
|
</div>-->
|
||||||
|
<div class="return">
|
||||||
<div class="return">
|
|
||||||
<div style="display: flex" @click="returnclick">
|
<div style="display: flex" @click="returnclick">
|
||||||
<img class="img2" style="margin-right: 22px;cursor: pointer;" src="../../assets/image/return.png" />
|
<el-button style="color:#0073FB"> <img class="img2" style="margin-right:11px;cursor: pointer;" src="../../assets/image/return.png" />返回</el-button>
|
||||||
<div style="cursor: pointer;" class="text">返回</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 面包屑导航 -->
|
<!-- 面包屑导航 -->
|
||||||
<div class="debateTitle" style="color: #fff">
|
<div class="debateTitle" style="color: #fff">
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
<div class="pathdetails" style="padding: 30px">
|
<div class="pathdetails" style="padding: 30px">
|
||||||
<!-- 面包屑导航 -->
|
<!-- 面包屑导航 -->
|
||||||
<div class="crumb">
|
<div class="crumb">
|
||||||
<div>{{data.name}}</div>
|
<div>{{ data.name }}</div>
|
||||||
<div style="margin-left: 6px; margin-right: 6px">/</div>
|
<div style="margin-left: 6px; margin-right: 6px">/</div>
|
||||||
<div style="font-weight: 700">项目详情</div>
|
<div style="font-weight: 700">项目详情</div>
|
||||||
|
|
||||||
@@ -14,12 +14,12 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- 面包屑导航 -->
|
<!-- 面包屑导航 -->
|
||||||
<div class="pdname">
|
<div class="pdname">
|
||||||
{{ userInfo.bandDesc }}
|
{{ userInfo.bandDesc }}
|
||||||
<span @click="introductionPro" style="font-size:14px;color:#fff;margin-left: 33px;cursor: pointer;">简介
|
<span @click="introductionPro" style="font-size:14px;color:#fff;margin-left: 33px;cursor: pointer;">简介
|
||||||
<span style="position: relative;top:1px;left:-3px;cursor: pointer;">></span>
|
<span style="position: relative;top:1px;left:-3px;cursor: pointer;">></span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 详细信息 -->
|
<!-- 详细信息 -->
|
||||||
<div class="detailinfo">
|
<div class="detailinfo">
|
||||||
<div class="detailL">
|
<div class="detailL">
|
||||||
@@ -115,7 +115,7 @@
|
|||||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||||
<el-tab-pane label="课程公告" name="first">
|
<el-tab-pane label="课程公告" name="first">
|
||||||
<div class="notice">
|
<div class="notice">
|
||||||
{{ data.remark || "暂无公告" }}
|
{{ data.notice || "暂无公告" }}
|
||||||
</div>
|
</div>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<!--
|
<!--
|
||||||
@@ -237,17 +237,13 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- 详细信息 -->
|
<!-- 详细信息 -->
|
||||||
<!-- 弹框提示信息 -->
|
<!-- 弹框提示信息 -->
|
||||||
<el-dialog
|
<el-dialog title="" top="347px" v-model="dialogVisible" :show-close="false"
|
||||||
title=""
|
|
||||||
top="347px"
|
|
||||||
v-model="dialogVisible"
|
|
||||||
:show-close="false"
|
|
||||||
style="display:flex;justify-content:center;align-items:center;height: 283px;padding:0;border-radius: 4px;"
|
style="display:flex;justify-content:center;align-items:center;height: 283px;padding:0;border-radius: 4px;"
|
||||||
width="502px">
|
width="502px">
|
||||||
<div style="width:288px;color:#333333;font-size: 22px;font-weight: 600;">{{ dialogVisibleTip }}</div>
|
<div style="width:288px;color:#333333;font-size: 22px;font-weight: 600;">{{ dialogVisibleTip }}</div>
|
||||||
<span slot="footer" style="display:inline-block;margin-top:60px;">
|
<span slot="footer" style="display:inline-block;margin-top:60px;">
|
||||||
<el-button @click="dialogVisible = false" style="width:140px;height:40px;margin-right: 22px;">取消</el-button>
|
<el-button @click="dialogVisible = false" style="width:140px;height:40px;margin-right: 22px;">取消</el-button>
|
||||||
<el-button type="primary" @click="dialogVisible = false" style="width:140px;height:40px;">确定</el-button>
|
<el-button type="primary" @click="dialogVisible = false" style="width:140px;height:40px;">确定</el-button>
|
||||||
</span>
|
</span>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
@@ -374,18 +370,18 @@ const dialogVisibleTip = ref('该任务无法学习,请联系管理员进行
|
|||||||
// }
|
// }
|
||||||
|
|
||||||
function introductionPro() {
|
function introductionPro() {
|
||||||
dialogVisibleTip.value =data.value.remark;
|
dialogVisibleTip.value = data.value.remark;
|
||||||
dialogVisible.value = true;
|
dialogVisible.value = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
function toFinish(d, sName, chapterId) {
|
function toFinish(d, sName, chapterOrStageId) {
|
||||||
console.log("dddddd", d, sName);
|
console.log("dddddd", d, sName, chapterOrStageId);
|
||||||
// 作业过期判断
|
// 作业过期判断
|
||||||
if (d.type == 4) {
|
if (d.type == 4) {
|
||||||
let date1 = new Date(d.endTime).getTime();
|
let date1 = new Date(d.endTime).getTime();
|
||||||
let date2 = new Date().getTime();
|
let date2 = new Date().getTime();
|
||||||
if (date1 < date2) {
|
if (date1 < date2) {
|
||||||
dialogVisibleTip.value ='当前作业已结束';
|
dialogVisibleTip.value = '当前作业已结束';
|
||||||
dialogVisible.value = true;
|
dialogVisible.value = true;
|
||||||
// ElMessage.error("当前作业已结束")
|
// ElMessage.error("当前作业已结束")
|
||||||
return
|
return
|
||||||
@@ -396,7 +392,7 @@ function toFinish(d, sName, chapterId) {
|
|||||||
let date1 = new Date(d.endTime).getTime();
|
let date1 = new Date(d.endTime).getTime();
|
||||||
let date2 = new Date().getTime();
|
let date2 = new Date().getTime();
|
||||||
if (date1 < date2) {
|
if (date1 < date2) {
|
||||||
dialogVisibleTip.value ='当前直播已结束';
|
dialogVisibleTip.value = '当前直播已结束';
|
||||||
dialogVisible.value = true;
|
dialogVisible.value = true;
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
@@ -405,7 +401,7 @@ function toFinish(d, sName, chapterId) {
|
|||||||
if (d.type == 5) {
|
if (d.type == 5) {
|
||||||
if (d.taskStatus == 1 || d.taskStatus == 2) {
|
if (d.taskStatus == 1 || d.taskStatus == 2) {
|
||||||
// ElMessage.error("该任务无法学习,请联系管理员进行替换。")
|
// ElMessage.error("该任务无法学习,请联系管理员进行替换。")
|
||||||
dialogVisibleTip.value ='该任务无法学习,请联系管理员进行替换!';
|
dialogVisibleTip.value = '该任务无法学习,请联系管理员进行替换!';
|
||||||
dialogVisible.value = true;
|
dialogVisible.value = true;
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
@@ -414,7 +410,7 @@ function toFinish(d, sName, chapterId) {
|
|||||||
if (d.type == 11) {
|
if (d.type == 11) {
|
||||||
if (d.taskStatus == 1 || d.taskStatus == 2) {
|
if (d.taskStatus == 1 || d.taskStatus == 2) {
|
||||||
// ElMessage.error("该任务无法学习,请联系管理员进行替换。")
|
// ElMessage.error("该任务无法学习,请联系管理员进行替换。")
|
||||||
dialogVisibleTip.value ='该任务无法学习,请联系管理员进行替换!';
|
dialogVisibleTip.value = '该任务无法学习,请联系管理员进行替换!';
|
||||||
dialogVisible.value = true;
|
dialogVisible.value = true;
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
@@ -424,7 +420,7 @@ function toFinish(d, sName, chapterId) {
|
|||||||
let date1 = new Date(d.endTime).getTime();
|
let date1 = new Date(d.endTime).getTime();
|
||||||
let date2 = new Date().getTime();
|
let date2 = new Date().getTime();
|
||||||
if (date1 < date2) {
|
if (date1 < date2) {
|
||||||
dialogVisibleTip.value ='当前活动已结束';
|
dialogVisibleTip.value = '当前活动已结束';
|
||||||
dialogVisible.value = true;
|
dialogVisible.value = true;
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
@@ -433,7 +429,7 @@ function toFinish(d, sName, chapterId) {
|
|||||||
if (d.type == 1) {
|
if (d.type == 1) {
|
||||||
if (d.taskStatus == 1 || d.taskStatus == 2) {
|
if (d.taskStatus == 1 || d.taskStatus == 2) {
|
||||||
// ElMessage.error("该任务无法学习,请联系管理员进行替换。")
|
// ElMessage.error("该任务无法学习,请联系管理员进行替换。")
|
||||||
dialogVisibleTip.value ='该任务无法学习,请联系管理员进行替换!';
|
dialogVisibleTip.value = '该任务无法学习,请联系管理员进行替换!';
|
||||||
dialogVisible.value = true;
|
dialogVisible.value = true;
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
@@ -442,7 +438,7 @@ function toFinish(d, sName, chapterId) {
|
|||||||
if (d.type == 2) {
|
if (d.type == 2) {
|
||||||
if (d.taskStatus == 1 || d.taskStatus == 2) {
|
if (d.taskStatus == 1 || d.taskStatus == 2) {
|
||||||
// ElMessage.error("该任务无法学习,请联系管理员进行替换。")
|
// ElMessage.error("该任务无法学习,请联系管理员进行替换。")
|
||||||
dialogVisibleTip.value ='该任务无法学习,请联系管理员进行替换!';
|
dialogVisibleTip.value = '该任务无法学习,请联系管理员进行替换!';
|
||||||
dialogVisible.value = true;
|
dialogVisible.value = true;
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
@@ -475,6 +471,7 @@ function toFinish(d, sName, chapterId) {
|
|||||||
courseId: d.courseId,
|
courseId: d.courseId,
|
||||||
pName: data.value.name,
|
pName: data.value.name,
|
||||||
sName,
|
sName,
|
||||||
|
chapterOrStageId
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
} else if (typeof types.value.path[d.type] === "function") {
|
} else if (typeof types.value.path[d.type] === "function") {
|
||||||
@@ -491,21 +488,23 @@ function whiteTypes(type) {
|
|||||||
.el-dialog__header {
|
.el-dialog__header {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.crumb {
|
.crumb {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
display: flex;
|
display: flex;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
|
|
||||||
.return {
|
.return {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 10%;
|
right: 10%;
|
||||||
|
|
||||||
.text {
|
.text {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,79 +1,80 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="learnpath">
|
<div class="learnpath">
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<div class="titleL">
|
<div class="titleL">
|
||||||
<div @click="returnfun" class="text">学习路径图</div>
|
<div @click="returnfun" class="text">学习路径图</div>
|
||||||
<div class="info" style="margin-right: 14px" v-if="userInfo.jobName">
|
<div class="info" style="margin-right: 14px" v-if="userInfo.jobName">
|
||||||
<img style="width: 20px; height: 18px; margin-right: 10px" src="../../assets/image/pm.png" />
|
<img style="width: 20px; height: 18px; margin-right: 10px" src="../../assets/image/pm.png"/>
|
||||||
<div style="margin-top: 1px">{{ userInfo.jobName }}</div>
|
<div style="margin-top: 1px">{{ userInfo.jobName }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="info" v-if="userInfo.bandDesc">
|
<div class="info" v-if="userInfo.bandDesc">
|
||||||
<img style="width: 18px; height: 17px; margin-right: 11px" src="../../assets/image/band.png" />
|
<img style="width: 18px; height: 17px; margin-right: 11px" src="../../assets/image/band.png"/>
|
||||||
<div style="margin-top: 2px">{{ userInfo.bandDesc }}</div>
|
<div style="margin-top: 2px">{{ userInfo.bandDesc }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div :style="{ display: !showmapdetail ? 'flex' : 'none' }">
|
<div :style="{ display: !showmapdetail ? 'flex' : 'none' }">
|
||||||
<!-- <el-popover width="475px" trigger="hover" popper-class="lppopover">-->
|
<!-- <el-popover width="475px" trigger="hover" popper-class="lppopover">-->
|
||||||
<!-- <div>-->
|
<!-- <div>-->
|
||||||
<!-- <div class="finish">-->
|
<!-- <div class="finish">-->
|
||||||
<!-- <img-->
|
<!-- <img-->
|
||||||
<!-- src="../../assets/image/circle.png"-->
|
<!-- src="../../assets/image/circle.png"-->
|
||||||
<!-- style="width: 20px; height: 20px"-->
|
<!-- style="width: 20px; height: 20px"-->
|
||||||
<!-- />-->
|
<!-- />-->
|
||||||
<!-- <div class="text">未完成</div>-->
|
<!-- <div class="text">未完成</div>-->
|
||||||
<!-- <div class="box"></div>-->
|
<!-- <div class="box"></div>-->
|
||||||
<!-- </div>-->
|
<!-- </div>-->
|
||||||
<!-- <div-->
|
<!-- <div-->
|
||||||
<!-- v-for="(value, index) in unCompleteTaskList"-->
|
<!-- v-for="(value, index) in unCompleteTaskList"-->
|
||||||
<!-- :key="index"-->
|
<!-- :key="index"-->
|
||||||
<!-- class="tasks"-->
|
<!-- class="tasks"-->
|
||||||
<!-- :style="{-->
|
<!-- :style="{-->
|
||||||
<!-- 'border-bottom':-->
|
<!-- 'border-bottom':-->
|
||||||
<!-- index === unCompleteTaskList.length - 1-->
|
<!-- index === unCompleteTaskList.length - 1-->
|
||||||
<!-- ? null-->
|
<!-- ? null-->
|
||||||
<!-- : '1px solid rgba(229, 228, 228, 1)',-->
|
<!-- : '1px solid rgba(229, 228, 228, 1)',-->
|
||||||
<!-- }"-->
|
<!-- }"-->
|
||||||
<!-- >-->
|
<!-- >-->
|
||||||
<!-- <div style="font-size: 14px; font-weight: 500; color: #677d86">-->
|
<!-- <div style="font-size: 14px; font-weight: 500; color: #677d86">-->
|
||||||
<!-- {{ value.name }}-->
|
<!-- {{ value.name }}-->
|
||||||
<!-- </div>-->
|
<!-- </div>-->
|
||||||
<!-- <img-->
|
<!-- <img-->
|
||||||
<!-- style="width: 20px; height: 20px"-->
|
<!-- style="width: 20px; height: 20px"-->
|
||||||
<!-- src="../../assets/image/go.png"-->
|
<!-- src="../../assets/image/go.png"-->
|
||||||
<!-- @click="toUnTask(chapterId)"-->
|
<!-- @click="toUnTask(chapterId)"-->
|
||||||
<!-- />-->
|
<!-- />-->
|
||||||
<!-- </div>-->
|
<!-- </div>-->
|
||||||
<!-- </div>-->
|
<!-- </div>-->
|
||||||
<!-- <template #reference>-->
|
<!-- <template #reference>-->
|
||||||
<!-- todo #学习路径 只会有一个未完成任务么?是否是直接跳到任务详情-->
|
<!-- todo #学习路径 只会有一个未完成任务么?是否是直接跳到任务详情-->
|
||||||
<!-- <div class="titleR">进入未完成任务</div>-->
|
<!-- <div class="titleR">进入未完成任务</div>-->
|
||||||
<!-- </template>-->
|
<!-- </template>-->
|
||||||
<!-- </el-popover>-->
|
<!-- </el-popover>-->
|
||||||
</div>
|
</div>
|
||||||
<div :style="{ display: showmapdetail ? 'flex' : 'none' }" class="titleR" @click="returnfun">
|
<div :style="{ display: showmapdetail ? 'flex' : 'none' }" class="titleR" @click="returnfun">
|
||||||
返回列表
|
返回列表
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 路径列表-->
|
<!-- 路径列表-->
|
||||||
<div :style="{ display: !showmapdetail ? 'flex' : 'none' }" class="head">
|
<div :style="{ display: !showmapdetail ? 'flex' : 'none' }" class="head">
|
||||||
<div style="min-width: 770px; width: 100%">
|
<div style="min-width: 770px; width: 100%">
|
||||||
<el-table :data="data" style="width: 100%" @row-click="gofun">
|
<el-table :data="data" style="width: 100%" @row-click="gofun">
|
||||||
<el-table-column prop="img" label="缩略图" #default="scope" align="center" width="255">
|
<el-table-column prop="img" label="缩略图" #default="scope" align="center" width="255">
|
||||||
<img :src="scope.row.picUrl" style="width: 230px; height: 155px" />
|
<img :src="scope.row.picUrl" style="width: 230px; height: 155px"/>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column align="center" prop="name" label="路径名称" />
|
<el-table-column align="center" prop="name" label="路径名称"/>
|
||||||
<el-table-column align="center" prop="introduce" label="路径介绍" #default="scope">
|
<el-table-column align="center" prop="introduce" label="路径介绍" #default="scope">
|
||||||
<el-popover placement="bottom-start" :width="400" title="路径介绍" trigger="hover" :content="scope.row.remark">
|
<el-popover placement="bottom-start" :width="400" title="路径介绍" trigger="hover"
|
||||||
<template #reference>
|
:content="scope.row.remark">
|
||||||
<div>{{ scope.row.remark }}</div>
|
<template #reference>
|
||||||
</template>
|
<div>{{ scope.row.remark }}</div>
|
||||||
</el-popover>
|
</template>
|
||||||
</el-table-column>
|
</el-popover>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
<el-table-column align="center" prop="organizationName" label="归属组织" />
|
<el-table-column align="center" prop="organizationName" label="归属组织"/>
|
||||||
<el-table-column #default="scope" align="center" :width="150" prop="state" label="状态">
|
<el-table-column #default="scope" align="center" :width="150" prop="state" label="状态">
|
||||||
<img :src="
|
<img :src="
|
||||||
scope.row.taskStatus === 1
|
scope.row.taskStatus === 1
|
||||||
? ongoing
|
? ongoing
|
||||||
: scope.row.taskStatus === 2
|
: scope.row.taskStatus === 2
|
||||||
@@ -81,243 +82,220 @@
|
|||||||
: scope.row.taskStatus === 0
|
: scope.row.taskStatus === 0
|
||||||
? nostarted
|
? nostarted
|
||||||
: null
|
: null
|
||||||
" style="width: 99px; height: 99px" />
|
" style="width: 99px; height: 99px"/>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- :src="{ 0: nostarted, 1: completed, 2: ongoing }[scope.row.status]"-->
|
||||||
<!-- :src="{ 0: nostarted, 1: completed, 2: ongoing }[scope.row.status]"-->
|
<!-- 路径列表-->
|
||||||
<!-- 路径列表-->
|
<!-- 路径详情图 -->
|
||||||
<!-- 路径详情图 -->
|
<div :style="{ display: showmapdetail ? 'flex' : 'none' }" class="mapdetail">
|
||||||
<div :style="{ display: showmapdetail ? 'flex' : 'none' }" class="mapdetail">
|
<PathDetailImage img="https://u-pre.boe.com/upload/路径图背景-1671015331292.png" :detail="detail"></PathDetailImage>
|
||||||
<div v-for="(item, i) in detail?.rows" :key="i">
|
</div>
|
||||||
<img :src="useImage(`222_0${i + 2}.png`)" />
|
<!-- 路径详情图 -->
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="modal"-->
|
</div>
|
||||||
<!-- style="width: calc(100% - 168px); height: 525px;background-image: url('../../src/assets/image/mapdetail.png');background-size: 100%;background-repeat: no-repeat;">-->
|
|
||||||
<!-- </div>-->
|
|
||||||
</div>
|
|
||||||
<!-- 路径详情图 -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import { reactive, toRefs, ref, onMounted, computed } from "vue";
|
import {computed, ref} from "vue";
|
||||||
import nostarted from "../../assets/image/nostarted.png";
|
import nostarted from "../../assets/image/nostarted.png";
|
||||||
import completed from "../../assets/image/completed.png";
|
import completed from "../../assets/image/completed.png";
|
||||||
import ongoing from "../../assets/image/ongoing.png";
|
import ongoing from "../../assets/image/ongoing.png";
|
||||||
import { boeRequest, request, usePage, useRequest } from "@/api/request";
|
import {usePage} from "@/api/request";
|
||||||
import {
|
import {ROUTER_LIST,} from "@/api/api";
|
||||||
ROUTER_CHAPTER_LIST,
|
import {useRouter} from "vue-router";
|
||||||
ROUTER_LIST,
|
|
||||||
ROUTER_UNCOMPLETE_LIST,
|
|
||||||
} from "@/api/api";
|
|
||||||
import { useImage } from "@/api/utils";
|
|
||||||
import { useRouter } from "vue-router";
|
|
||||||
import store from "@/store";
|
import store from "@/store";
|
||||||
|
import PathDetailImage from "@/components/PathDetailImage.vue";
|
||||||
|
|
||||||
const detail = ref();
|
const detail = ref();
|
||||||
|
const showmapdetail = ref(false);
|
||||||
|
const currentStageId = ref();
|
||||||
const userInfo = computed(() => store.state.userInfo);
|
const userInfo = computed(() => store.state.userInfo);
|
||||||
const { data } = usePage(ROUTER_LIST, { pageSize: 60 });
|
const {data} = usePage(ROUTER_LIST, {pageSize: 60});
|
||||||
console.log("datadata", data);
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const returnclick = () => {
|
const returnclick = () => {
|
||||||
router.back();
|
router.back();
|
||||||
};
|
};
|
||||||
|
|
||||||
// const {unCompleteTaskList} = useRequest(ROUTER_UNCOMPLETE_LIST, {});
|
// const {unCompleteTaskList} = useRequest(ROUTER_UNCOMPLETE_LIST, {});
|
||||||
|
|
||||||
const state = reactive({
|
|
||||||
showmapdetail: false,
|
|
||||||
});
|
|
||||||
const { showmapdetail } = toRefs(state);
|
|
||||||
|
|
||||||
const returnfun = () => {
|
const returnfun = () => {
|
||||||
state.showmapdetail = false;
|
showmapdetail.value = false;
|
||||||
};
|
};
|
||||||
|
|
||||||
async function gofun({ routerId, name: routerName }) {
|
async function gofun(e) {
|
||||||
// console.log(routerId)
|
detail.value = e
|
||||||
// const data = await request(ROUTER_CHAPTER_LIST, {stuChapterListVo: {routerId}})
|
showmapdetail.value = true;
|
||||||
// detail.value = data.data
|
}
|
||||||
// state.showmapdetail = true;
|
|
||||||
// router.push({path: "/pathdetails", query: {routerId}});
|
function toUnTask() {
|
||||||
import.meta.env.MODE === "development"
|
|
||||||
? router.push({
|
|
||||||
path: "/pathdetails",
|
|
||||||
query: { routerId, routerName },
|
|
||||||
})
|
|
||||||
: window.open(
|
|
||||||
`${import.meta.env.VITE_BOE_PATH_DETAIL_URL}/pathdetails¶ms=${encodeURIComponent(
|
|
||||||
`routerId=${routerId}&routerName=${routerName}`
|
|
||||||
)}`
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
function toUnTask() { }
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
#app div:nth-child(1) {
|
#app div:nth-child(1) {
|
||||||
// background: rgba(0, 0, 0, 0) !important;
|
// background: rgba(0, 0, 0, 0) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal {}
|
.modal {
|
||||||
|
}
|
||||||
|
|
||||||
.modal:after {
|
.modal:after {
|
||||||
content: "";
|
content: "";
|
||||||
}
|
}
|
||||||
|
|
||||||
.learnpath {
|
.learnpath {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 800px;
|
min-height: 800px;
|
||||||
//border-radius: 8px;
|
//border-radius: 8px;
|
||||||
background-color: rgba(255, 255, 255, 1);
|
background-color: rgba(255, 255, 255, 1);
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
// flex: 1;
|
// flex: 1;
|
||||||
margin-top: 43px;
|
margin-top: 43px;
|
||||||
|
position: relative;
|
||||||
|
// background-color: pink;
|
||||||
|
.title {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-left: 53px;
|
||||||
|
margin-right: 54px;
|
||||||
|
}
|
||||||
|
|
||||||
// background-color: pink;
|
.title .titleL {
|
||||||
.title {
|
display: flex;
|
||||||
display: flex;
|
align-items: center;
|
||||||
justify-content: space-between;
|
}
|
||||||
align-items: center;
|
|
||||||
margin-left: 53px;
|
|
||||||
margin-right: 54px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title .titleL {
|
.title .titleL .text {
|
||||||
display: flex;
|
font-size: 18px;
|
||||||
align-items: center;
|
font-weight: bold;
|
||||||
}
|
color: #333333;
|
||||||
|
line-height: 24px;
|
||||||
|
margin-right: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
.title .titleL .text {
|
.title .titleL .info {
|
||||||
font-size: 18px;
|
display: flex;
|
||||||
font-weight: bold;
|
// align-items: center;
|
||||||
color: #333333;
|
font-size: 14px;
|
||||||
line-height: 24px;
|
font-weight: 400;
|
||||||
margin-right: 26px;
|
color: #387df7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title .titleL .info {
|
.title .titleR {
|
||||||
display: flex;
|
width: 157px;
|
||||||
// align-items: center;
|
height: 48px;
|
||||||
font-size: 14px;
|
border: 2px solid #0060ff;
|
||||||
font-weight: 400;
|
border-radius: 8px;
|
||||||
color: #387df7;
|
display: flex;
|
||||||
}
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #0060ff;
|
||||||
|
}
|
||||||
|
|
||||||
.title .titleR {
|
.head {
|
||||||
width: 157px;
|
// height: 50px;
|
||||||
height: 48px;
|
background: #f9f9f9;
|
||||||
border: 2px solid #0060ff;
|
margin-top: 50px;
|
||||||
border-radius: 8px;
|
display: flex;
|
||||||
display: flex;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
font-size: 14px;
|
||||||
cursor: pointer;
|
font-weight: 500;
|
||||||
font-size: 16px;
|
color: #333333;
|
||||||
font-weight: bold;
|
margin-left: 53px;
|
||||||
color: #0060ff;
|
margin-right: 54px;
|
||||||
}
|
width: calc(100% - 107px);
|
||||||
|
// min-width: 770px;
|
||||||
|
overflow-x: auto;
|
||||||
|
|
||||||
.head {
|
.el-table th.el-table__cell {
|
||||||
// height: 50px;
|
background: rgba(249, 249, 249, 1);
|
||||||
background: #f9f9f9;
|
color: rgba(51, 51, 51, 1);
|
||||||
margin-top: 50px;
|
font-size: 14px;
|
||||||
display: flex;
|
font-weight: 500;
|
||||||
justify-content: space-between;
|
}
|
||||||
align-items: center;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #333333;
|
|
||||||
margin-left: 53px;
|
|
||||||
margin-right: 54px;
|
|
||||||
width: calc(100% - 107px);
|
|
||||||
// min-width: 770px;
|
|
||||||
overflow-x: auto;
|
|
||||||
|
|
||||||
.el-table th.el-table__cell {
|
.el-table .cell {
|
||||||
background: rgba(249, 249, 249, 1);
|
overflow: hidden;
|
||||||
color: rgba(51, 51, 51, 1);
|
text-overflow: ellipsis;
|
||||||
font-size: 14px;
|
width: 100%;
|
||||||
font-weight: 500;
|
display: -webkit-box;
|
||||||
}
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 3;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
.el-table .cell {
|
.el-table__row {
|
||||||
overflow: hidden;
|
height: 231px;
|
||||||
text-overflow: ellipsis;
|
font-size: 14px;
|
||||||
width: 100%;
|
color: rgba(102, 102, 102, 1);
|
||||||
display: -webkit-box;
|
font-weight: 500;
|
||||||
-webkit-box-orient: vertical;
|
}
|
||||||
-webkit-line-clamp: 3;
|
}
|
||||||
word-break: break-all;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-table__row {
|
.mapdetail {
|
||||||
height: 231px;
|
width: calc(100% - 107px);
|
||||||
font-size: 14px;
|
min-height: 577px;
|
||||||
color: rgba(102, 102, 102, 1);
|
background: rgba(242, 245, 247, 0.6);
|
||||||
font-weight: 500;
|
margin-top: 26px;
|
||||||
}
|
border-radius: 8px;
|
||||||
}
|
margin-left: 53px;
|
||||||
|
margin-right: 54px;
|
||||||
.mapdetail {
|
display: flex;
|
||||||
width: calc(100% - 107px);
|
align-items: center;
|
||||||
height: 577px;
|
justify-content: center;
|
||||||
background: rgba(242, 245, 247, 0.6);
|
}
|
||||||
margin-top: 26px;
|
}
|
||||||
border-radius: 8px;
|
|
||||||
margin-left: 53px;
|
|
||||||
margin-right: 54px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.lppopover {
|
.lppopover {
|
||||||
.finish {
|
.finish {
|
||||||
padding-left: 27px;
|
padding-left: 27px;
|
||||||
padding-right: 18px;
|
padding-right: 18px;
|
||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
margin-bottom: 17px;
|
margin-bottom: 17px;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text {
|
.text {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
margin-left: 8px;
|
margin-left: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.box {
|
.box {
|
||||||
width: 59px;
|
width: 59px;
|
||||||
height: 10px;
|
height: 10px;
|
||||||
background-color: rgba(36, 120, 255, 0.15);
|
background-color: rgba(36, 120, 255, 0.15);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 50px;
|
left: 50px;
|
||||||
top: 15px;
|
top: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tasks {
|
||||||
|
width: 405px;
|
||||||
|
height: 52px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-left: 28px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
.tasks {
|
|
||||||
width: 405px;
|
|
||||||
height: 52px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-left: 28px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.box-item {
|
.box-item {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,17 +1,15 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="surveydetail" style="padding: 30px">
|
<div class="surveydetail" style="padding: 30px">
|
||||||
<!-- 面包屑导航 -->
|
<!-- 面包屑导航 -->
|
||||||
<div
|
<div style="display: flex; align-items: center; justify-content: space-between">
|
||||||
style="display: flex; align-items: center; justify-content: space-between"
|
<div class="crumb">
|
||||||
>
|
<div>{{ pName }}</div>
|
||||||
<div class="crumb">
|
<div style="margin-left: 6px; margin-right: 6px">/</div>
|
||||||
<div>{{ pName }}</div>
|
<div>{{ sName }}</div>
|
||||||
<div style="margin-left: 6px; margin-right: 6px">/</div>
|
<div style="margin-left: 6px; margin-right: 6px">/</div>
|
||||||
<div>{{ sName }}</div>
|
<div style="font-weight: 700; font-size: 16px">评估详情</div>
|
||||||
<div style="margin-left: 6px; margin-right: 6px">/</div>
|
</div>
|
||||||
<div style="font-weight: 700; font-size: 16px">评估详情</div>
|
<!--
|
||||||
</div>
|
|
||||||
<!--
|
|
||||||
<div class="prevnext">
|
<div class="prevnext">
|
||||||
<div class="prev">
|
<div class="prev">
|
||||||
<img
|
<img
|
||||||
@@ -44,164 +42,115 @@
|
|||||||
return a[0].orderNumber - b[0].orderNumber
|
return a[0].orderNumber - b[0].orderNumber
|
||||||
}) }} -->
|
}) }} -->
|
||||||
|
|
||||||
<div
|
<div class="question" v-for="
|
||||||
class="question"
|
(value, index) in formateArr([data.assessmentEssayQuestionDtoList, data.assessmentMultipleChoiceDtoList, data.assessmentScoringQuestionDtoList, data.assessmentSingleChoiceDtoList]).sort((a, b) => {
|
||||||
v-for="
|
return a[0].orderNumber - b[0].orderNumber
|
||||||
(value, index) in formateArr([data.assessmentEssayQuestionDtoList,data.assessmentMultipleChoiceDtoList,data.assessmentScoringQuestionDtoList,data.assessmentSingleChoiceDtoList]).sort((a,b)=>{
|
}) " :key="index" :style="{ 'margin-top': index === 0 ? '57px' : '41px' }">
|
||||||
return a[0].orderNumber - b[0].orderNumber
|
<div v-if="value[0].questionType == '4'">
|
||||||
}) "
|
<div class="question" v-for="(value, index) in data.assessmentScoringQuestionDtoList" :key="index"
|
||||||
:key="index"
|
:style="{ 'margin-top': index === 0 ? '57px' : '41px' }">
|
||||||
:style="{ 'margin-top': index === 0 ? '57px' : '41px' }"
|
<div class="text">{{ value.assessmentScTitle }}</div>
|
||||||
>
|
<div class="answer">
|
||||||
<div v-if="value[0].questionType=='4'">
|
<div class="answerL">完全没用</div>
|
||||||
<div
|
<div class="answerC">
|
||||||
class="question"
|
<div class="answerCitem" v-for="(item, key) in Array.from(
|
||||||
v-for="(value, index) in data.assessmentScoringQuestionDtoList"
|
{ length: value.assessmentMaxScore },
|
||||||
:key="index"
|
(k, i) => i
|
||||||
:style="{ 'margin-top': index === 0 ? '57px' : '41px' }"
|
)" :key="key" :style="{
|
||||||
>
|
'margin-left': key === 0 ? '15px' : '10px',
|
||||||
<div class="text">{{ value.assessmentScTitle }}</div>
|
background:
|
||||||
<div class="answer">
|
value.selectAnswer === item
|
||||||
<div class="answerL">完全没用</div>
|
? 'rgba(86, 163, 249, 1)'
|
||||||
<div class="answerC">
|
: 'rgba(86, 163, 249, 0)',
|
||||||
<div
|
color:
|
||||||
class="answerCitem"
|
value.selectAnswer === item
|
||||||
v-for="(item, key) in Array.from(
|
? '#fff'
|
||||||
{ length: value.assessmentMaxScore },
|
: 'rgba(86, 163, 249, 1)',
|
||||||
(k, i) => i
|
}" @click="
|
||||||
)"
|
() => {
|
||||||
:key="key"
|
if (data.isSubmit) {
|
||||||
:style="{
|
return;
|
||||||
'margin-left': key === 0 ? '15px' : '10px',
|
}
|
||||||
background:
|
value.selectAnswer = item;
|
||||||
value.selectAnswer === item
|
}
|
||||||
? 'rgba(86, 163, 249, 1)'
|
">
|
||||||
: 'rgba(86, 163, 249, 0)',
|
<div>{{ item + 1 }}</div>
|
||||||
color:
|
</div>
|
||||||
value.selectAnswer === item
|
</div>
|
||||||
? '#fff'
|
<div class="answerR">非常有帮助/启发</div>
|
||||||
: 'rgba(86, 163, 249, 1)',
|
</div>
|
||||||
}"
|
</div>
|
||||||
@click="
|
</div>
|
||||||
() => {
|
|
||||||
if (data.isSubmit) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
value.selectAnswer = item;
|
|
||||||
}
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div>{{ item + 1 }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="answerR">非常有帮助/启发</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-else-if="value[0].questionType=='1'">
|
<div v-else-if="value[0].questionType == '1'">
|
||||||
<div
|
<div class="question" style="margin-top: 41px" v-if="
|
||||||
class="question"
|
data.assessmentSingleChoiceDtoList &&
|
||||||
style="margin-top: 41px"
|
data.assessmentSingleChoiceDtoList.length
|
||||||
v-if="
|
">
|
||||||
data.assessmentSingleChoiceDtoList &&
|
<div class="text">
|
||||||
data.assessmentSingleChoiceDtoList.length
|
{{ data.assessmentSingleChoiceDtoList[0]?.singleStemName }}
|
||||||
"
|
</div>
|
||||||
>
|
<div v-for="(value, index) in data.assessmentSingleChoiceDtoList" :key="index"
|
||||||
<div class="text">
|
style="display: flex; align-items: center" :style="{
|
||||||
{{ data.assessmentSingleChoiceDtoList[0]?.singleStemName }}
|
'margin-top': index === 0 ? '29px' : '22px',
|
||||||
</div>
|
cursor: 'pointer',
|
||||||
<div
|
}" @click="
|
||||||
v-for="(value, index) in data.assessmentSingleChoiceDtoList"
|
() => {
|
||||||
:key="index"
|
if (data.isSubmit) {
|
||||||
style="display: flex; align-items: center"
|
return;
|
||||||
:style="{
|
}
|
||||||
'margin-top': index === 0 ? '29px' : '22px',
|
data.assessmentSingleChoiceDtoList.forEach((e) => {
|
||||||
cursor: 'pointer',
|
e.select = false;
|
||||||
}"
|
});
|
||||||
@click="
|
value.select = true;
|
||||||
() => {
|
}
|
||||||
if (data.isSubmit) {
|
">
|
||||||
return;
|
<img style="width: 19px; height: 18px; cursor: pointer" :src="value.select ? checkbox : checkbox2" />
|
||||||
}
|
<div class="people">{{ value.singleOptionName }}</div>
|
||||||
data.assessmentSingleChoiceDtoList.forEach((e) => {
|
</div>
|
||||||
e.select = false;
|
</div>
|
||||||
});
|
</div>
|
||||||
value.select = true;
|
|
||||||
}
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
style="width: 19px; height: 18px; cursor: pointer"
|
|
||||||
:src="value.select ? checkbox : checkbox2"
|
|
||||||
/>
|
|
||||||
<div class="people">{{ value.singleOptionName }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-else-if="value[0].questionType=='2'">
|
<div v-else-if="value[0].questionType == '2'">
|
||||||
<div
|
<div class="question" style="margin-top: 41px" v-if="
|
||||||
class="question"
|
data.assessmentMultipleChoiceDtoList &&
|
||||||
style="margin-top: 41px"
|
data.assessmentMultipleChoiceDtoList.length
|
||||||
v-if="
|
">
|
||||||
data.assessmentMultipleChoiceDtoList &&
|
<div class="text">
|
||||||
data.assessmentMultipleChoiceDtoList.length
|
{{ data.assessmentMultipleChoiceDtoList[0]?.multipleStemName }}
|
||||||
"
|
</div>
|
||||||
>
|
<div v-for="(value, index) in data.assessmentMultipleChoiceDtoList" :key="index"
|
||||||
<div class="text">
|
style="display: flex; align-items: center" :style="{
|
||||||
{{ data.assessmentMultipleChoiceDtoList[0]?.multipleStemName }}
|
'margin-top': index === 0 ? '29px' : '22px',
|
||||||
</div>
|
cursor: 'pointer',
|
||||||
<div
|
}" @click="
|
||||||
v-for="(value, index) in data.assessmentMultipleChoiceDtoList"
|
() => {
|
||||||
:key="index"
|
if (data.isSubmit) {
|
||||||
style="display: flex; align-items: center"
|
return;
|
||||||
:style="{
|
}
|
||||||
'margin-top': index === 0 ? '29px' : '22px',
|
value.select = !value.select;
|
||||||
cursor: 'pointer',
|
}
|
||||||
}"
|
">
|
||||||
@click="
|
<img style="width: 19px; height: 18px; cursor: pointer" :src="value.select ? checkbox : checkbox2" />
|
||||||
() => {
|
<div class="people">{{ value.multipleOptionName }}</div>
|
||||||
if (data.isSubmit) {
|
</div>
|
||||||
return;
|
</div>
|
||||||
}
|
</div>
|
||||||
value.select = !value.select;
|
|
||||||
}
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
style="width: 19px; height: 18px; cursor: pointer"
|
|
||||||
:src="value.select ? checkbox : checkbox2"
|
|
||||||
/>
|
|
||||||
<div class="people">{{ value.multipleOptionName }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-else-if="value[0].questionType=='3'">
|
<div v-else-if="value[0].questionType == '3'">
|
||||||
<div
|
<div class="question" style="margin-top: 41px" v-for="(item, i) in data.assessmentEssayQuestionDtoList"
|
||||||
class="question"
|
:key="i">
|
||||||
style="margin-top: 41px"
|
<div class="text">{{ item.assessmentQaTitle }}</div>
|
||||||
v-for="(item, i) in data.assessmentEssayQuestionDtoList"
|
<div style="width: 713px; margin-top: 31px; position: relative">
|
||||||
:key="i"
|
<el-input v-model="item.content" :autosize="{ minRows: 5, maxRows: 5 }" resize="none" maxlength="200"
|
||||||
>
|
type="textarea" :readonly="!!data.isSubmit" />
|
||||||
<div class="text">{{ item.assessmentQaTitle }}</div>
|
<div class="words">{{ item.content?.length || 0 }}/200</div>
|
||||||
<div style="width: 713px; margin-top: 31px; position: relative">
|
</div>
|
||||||
<el-input
|
</div>
|
||||||
v-model="item.content"
|
</div>
|
||||||
:autosize="{ minRows: 5, maxRows: 5 }"
|
</div>
|
||||||
resize="none"
|
|
||||||
maxlength="200"
|
|
||||||
type="textarea"
|
|
||||||
:readonly="!!data.isSubmit"
|
|
||||||
/>
|
|
||||||
<div class="words">{{ item.content?.length || 0 }}/200</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- <div
|
<!-- <div
|
||||||
class="question"
|
class="question"
|
||||||
v-for="(value, index) in data.assessmentScoringQuestionDtoList"
|
v-for="(value, index) in data.assessmentScoringQuestionDtoList"
|
||||||
:key="index"
|
:key="index"
|
||||||
@@ -339,42 +288,39 @@
|
|||||||
<div class="words">{{ item.content?.length || 0 }}/200</div>
|
<div class="words">{{ item.content?.length || 0 }}/200</div>
|
||||||
</div>
|
</div>
|
||||||
</div> -->
|
</div> -->
|
||||||
|
|
||||||
<div
|
<div style="display: flex; justify-content: center" v-if="
|
||||||
style="display: flex; justify-content: center"
|
data.assessmentEssayQuestionDtoList?.length ||
|
||||||
v-if="
|
data.assessmentMultipleChoiceDtoList?.length ||
|
||||||
data.assessmentEssayQuestionDtoList?.length ||
|
data.assessmentSingleChoiceDtoList?.length ||
|
||||||
data.assessmentMultipleChoiceDtoList?.length ||
|
data.assessmentScoringQuestionDtoList?.length
|
||||||
data.assessmentSingleChoiceDtoList?.length ||
|
">
|
||||||
data.assessmentScoringQuestionDtoList?.length
|
<div class="submit" @click="submit" :style="{ background: data.isSubmit ? '#999' : '#2478ff' }">
|
||||||
"
|
提交
|
||||||
>
|
</div>
|
||||||
<div
|
</div>
|
||||||
class="submit"
|
</div>
|
||||||
@click="submit"
|
</div>
|
||||||
:style="{ background: data.isSubmit ? '#999' : '#2478ff' }"
|
<!-- 基本信息 -->
|
||||||
>
|
<!-- todo 测评页面 没有接口-->
|
||||||
提交
|
</div>
|
||||||
</div>
|
<el-dialog v-model="centerDialogVisible" title="" width="20%" center :show-close="false" :align-center="true">
|
||||||
</div>
|
<div style="text-align: center;font-size:16px;"> <span style="color:black">
|
||||||
</div>
|
提交成功
|
||||||
</div>
|
</span></div>
|
||||||
<!-- 基本信息 -->
|
<template #footer>
|
||||||
<!-- todo 测评页面 没有接口-->
|
<span class="dialog-footer">
|
||||||
</div>
|
<el-button class="cancel"
|
||||||
<el-dialog v-model="centerDialogVisible" title="" width="20%" center :show-close="false" :align-center="true">
|
style="color: #387DF7; border: 1px solid #387DF7;padding: 8px 32px; border-radius: 4px;"
|
||||||
<div style="text-align: center;font-size:16px;"> <span style="color:black">
|
@click="centerDialogVisible = false">取消</el-button>
|
||||||
提交成功
|
<el-button class="back"
|
||||||
</span></div>
|
style="background: #387DF7;box-shadow: 1px 2px 15px 1px rgba(56,125,247,0.34);border: 0px;padding: 8px 32px;"
|
||||||
<template #footer>
|
type="primary" @click="returnclick">
|
||||||
<span class="dialog-footer">
|
返回
|
||||||
<el-button class="cancel" style="color: #387DF7; border: 1px solid #387DF7;padding: 8px 32px; border-radius: 4px;" @click="centerDialogVisible = false">取消</el-button>
|
</el-button>
|
||||||
<el-button class="back" style="background: #387DF7;box-shadow: 1px 2px 15px 1px rgba(56,125,247,0.34);border: 0px;padding: 8px 32px;" type="primary" @click="returnclick">
|
</span>
|
||||||
返回
|
</template>
|
||||||
</el-button>
|
</el-dialog>
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</el-dialog>
|
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import checkbox from "@/assets/image/checkbox.png";
|
import checkbox from "@/assets/image/checkbox.png";
|
||||||
@@ -383,226 +329,243 @@ import { useRoute, useRouter } from "vue-router/dist/vue-router";
|
|||||||
import { request, usePage, useRequest } from "@/api/request";
|
import { request, usePage, useRequest } from "@/api/request";
|
||||||
import { ASSESSMENT_QUERY, ASSESSMENT_SUBMIT } from "@/api/api";
|
import { ASSESSMENT_QUERY, ASSESSMENT_SUBMIT } from "@/api/api";
|
||||||
import { ElMessage } from "element-plus";
|
import { ElMessage } from "element-plus";
|
||||||
import { ref} from "vue";
|
import { ref } from "vue";
|
||||||
|
|
||||||
const {
|
const {
|
||||||
query: { courseId, id: taskId, type, pName, sName },
|
query: { courseId, id: taskId, type, pName, sName, chapterOrStageId },
|
||||||
} = useRoute();
|
} = useRoute();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const returnclick = () => {
|
const returnclick = () => {
|
||||||
router.back();
|
router.back();
|
||||||
};
|
};
|
||||||
|
|
||||||
// 数组去空对象
|
// 数组去空对象
|
||||||
function formateArr(arr1) {
|
function formateArr(arr1) {
|
||||||
console.log(arr1,arr1[0],arr1[0].length)
|
console.log(arr1, arr1[0], arr1[0].length)
|
||||||
let newarr = []
|
let newarr = []
|
||||||
for(let i=0;i<arr1.length;i++){
|
for (let i = 0; i < arr1.length; i++) {
|
||||||
if(arr1[i].length!==0){
|
if (arr1[i].length !== 0) {
|
||||||
newarr.push(arr1[i])
|
newarr.push(arr1[i])
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return newarr
|
return newarr
|
||||||
}
|
}
|
||||||
|
|
||||||
const { data } = useRequest(ASSESSMENT_QUERY(courseId), { id: courseId });
|
const { data } = useRequest(ASSESSMENT_QUERY(courseId), { id: courseId, type, chapterOrStageId, targetId: taskId });
|
||||||
console.log('我是需要排序得题目', data )
|
console.log('我是需要排序得题目', data)
|
||||||
|
|
||||||
function goHome() {
|
function goHome() {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const centerDialogVisible =ref(false);
|
const centerDialogVisible = ref(false);
|
||||||
const open=()=>{
|
const open = () => {
|
||||||
centerDialogVisible.value = true
|
centerDialogVisible.value = true
|
||||||
};
|
};
|
||||||
function submit() {
|
function submit() {
|
||||||
if (data.value.isSubmit) {
|
if (1 > 0) {
|
||||||
return;
|
console.log(data)
|
||||||
}
|
console.log('我是提交的数据', {
|
||||||
console.log("data.value",data.value);
|
targetId: taskId, // 项目、路径图或开课的Id
|
||||||
let list1 = data.value.assessmentEssayQuestionDtoList;
|
chapterOrStageId: chapterOrStageId, // 关卡或者阶段Id 关卡Id不允许为空
|
||||||
if(list1 &&list1.length > 0){
|
assessmentId: courseId,
|
||||||
list1.forEach((item) => {
|
taskId,
|
||||||
if(item && !item.content){
|
type,
|
||||||
|
result: JSON.stringify(data.value),
|
||||||
return ElMessage.warning("您有未填写的评估题干");
|
})
|
||||||
}
|
}
|
||||||
})
|
if (data.value.isSubmit) {
|
||||||
}
|
return;
|
||||||
let list2 = data.value.assessmentScoringQuestionDtoList;
|
}
|
||||||
if(list2 &&list2.length > 0){
|
console.log("data.value", data.value);
|
||||||
list2.forEach((item) => {
|
let list1 = data.value.assessmentEssayQuestionDtoList;
|
||||||
if(item && !item.selectAnswer){
|
if (list1 && list1.length > 0) {
|
||||||
|
list1.forEach((item) => {
|
||||||
return ElMessage.warning("您有未填写的评估题干");
|
if (item && !item.content) {
|
||||||
}
|
|
||||||
})
|
return ElMessage.warning("您有未填写的评估题干");
|
||||||
}
|
}
|
||||||
let list3 = data.value.assessmentSingleChoiceDtoList;
|
})
|
||||||
if(list3 &&list3.length > 0){
|
}
|
||||||
let flag = 0;
|
let list2 = data.value.assessmentScoringQuestionDtoList;
|
||||||
list3.forEach((item) => {
|
if (list2 && list2.length > 0) {
|
||||||
flag = flag + item.select? 1 : 0;
|
list2.forEach((item) => {
|
||||||
})
|
if (item && !item.selectAnswer) {
|
||||||
if(flag ==0 ){
|
|
||||||
|
return ElMessage.warning("您有未填写的评估题干");
|
||||||
return ElMessage.warning("您有未填写的评估题干");
|
}
|
||||||
}
|
})
|
||||||
}
|
}
|
||||||
let list4 = data.value.assessmentMultipleChoiceDtoList;
|
let list3 = data.value.assessmentSingleChoiceDtoList;
|
||||||
if(list4 &&list4.length > 0){
|
if (list3 && list3.length > 0) {
|
||||||
let flag = 0;
|
let flag = 0;
|
||||||
list4.forEach((item) => {
|
list3.forEach((item) => {
|
||||||
flag = flag + item.select? 1 : 0;
|
flag = flag + item.select ? 1 : 0;
|
||||||
})
|
})
|
||||||
if(flag == 0 ){
|
if (flag == 0) {
|
||||||
|
|
||||||
return ElMessage.warning("您有未填写的评估题干");
|
return ElMessage.warning("您有未填写的评估题干");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
data.value.isSubmit = !data.value.isSubmit;
|
let list4 = data.value.assessmentMultipleChoiceDtoList;
|
||||||
request(ASSESSMENT_SUBMIT, {
|
if (list4 && list4.length > 0) {
|
||||||
assessmentId: courseId,
|
let flag = 0;
|
||||||
taskId,
|
list4.forEach((item) => {
|
||||||
type,
|
flag = flag + item.select ? 1 : 0;
|
||||||
result: JSON.stringify(data.value),
|
})
|
||||||
}).then(() => {
|
if (flag == 0) {
|
||||||
open();
|
|
||||||
});
|
return ElMessage.warning("您有未填写的评估题干");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
data.value.isSubmit = !data.value.isSubmit;
|
||||||
|
request(ASSESSMENT_SUBMIT, {
|
||||||
|
targetId: taskId, // 项目、路径图或开课的Id
|
||||||
|
chapterOrStageId: chapterOrStageId, // 关卡或者阶段Id 关卡Id不允许为空
|
||||||
|
assessmentId: courseId,
|
||||||
|
taskId,
|
||||||
|
type,
|
||||||
|
result: JSON.stringify(data.value),
|
||||||
|
}).then(() => {
|
||||||
|
open();
|
||||||
|
});
|
||||||
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.surveydetail {
|
.surveydetail {
|
||||||
.crumb {
|
.crumb {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
display: flex;
|
display: flex;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
}
|
}
|
||||||
.return {
|
|
||||||
position: absolute;
|
|
||||||
right: 10%;
|
|
||||||
.text {
|
|
||||||
text-align: center;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.prevnext {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #ffffff;
|
|
||||||
|
|
||||||
.prev {
|
.return {
|
||||||
display: flex;
|
position: absolute;
|
||||||
align-items: center;
|
right: 10%;
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
.text {
|
||||||
font-size: 20px;
|
text-align: center;
|
||||||
font-weight: 800;
|
display: flex;
|
||||||
color: #ffffff;
|
flex-direction: row;
|
||||||
line-height: 24px;
|
align-items: center;
|
||||||
margin-top: 17px;
|
}
|
||||||
margin-left: -11px;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.bascinfo {
|
.prevnext {
|
||||||
width: 100%;
|
display: flex;
|
||||||
min-height: 1032px;
|
align-items: center;
|
||||||
margin-top: 24px;
|
font-size: 14px;
|
||||||
background: #ffffff;
|
font-weight: 500;
|
||||||
border-radius: 8px;
|
color: #ffffff;
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.question .text {
|
.prev {
|
||||||
font-size: 16px;
|
display: flex;
|
||||||
font-weight: 500;
|
align-items: center;
|
||||||
color: #333330;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.question .answer {
|
.title {
|
||||||
margin-top: 30px;
|
font-size: 20px;
|
||||||
display: flex;
|
font-weight: 800;
|
||||||
align-items: center;
|
color: #ffffff;
|
||||||
font-size: 14px;
|
line-height: 24px;
|
||||||
font-weight: 500;
|
margin-top: 17px;
|
||||||
color: #56a3f9;
|
margin-left: -11px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.question .answer .answerC {
|
.bascinfo {
|
||||||
width: 540px;
|
width: 100%;
|
||||||
height: 73px;
|
min-height: 1032px;
|
||||||
border: 1px solid #d7e5fd;
|
margin-top: 24px;
|
||||||
border-radius: 8px;
|
background: #ffffff;
|
||||||
display: flex;
|
border-radius: 8px;
|
||||||
align-items: center;
|
display: flex;
|
||||||
margin-left: 11px;
|
flex-direction: column;
|
||||||
margin-right: 11px;
|
align-items: center;
|
||||||
// justify-content: center;
|
|
||||||
.answerCitem {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
border: 1px solid #56a3f9;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #ffffff;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin-left: 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.question .people {
|
.question .text {
|
||||||
font-size: 14px;
|
font-size: 16px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #333330;
|
color: #333330;
|
||||||
margin-left: 15px;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.question .words {
|
.question .answer {
|
||||||
position: absolute;
|
margin-top: 30px;
|
||||||
right: 15px;
|
display: flex;
|
||||||
bottom: 5px;
|
align-items: center;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #333330;
|
color: #56a3f9;
|
||||||
}
|
}
|
||||||
|
|
||||||
.question .el-textarea__inner {
|
.question .answer .answerC {
|
||||||
border-radius: 8px;
|
width: 540px;
|
||||||
background-color: rgba(245, 246, 247, 1);
|
height: 73px;
|
||||||
}
|
border: 1px solid #d7e5fd;
|
||||||
|
border-radius: 8px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-left: 11px;
|
||||||
|
margin-right: 11px;
|
||||||
|
|
||||||
.submit {
|
// justify-content: center;
|
||||||
width: 126px;
|
.answerCitem {
|
||||||
height: 46px;
|
width: 40px;
|
||||||
background: #2478ff;
|
height: 40px;
|
||||||
box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
|
border: 1px solid #56a3f9;
|
||||||
border-radius: 4px;
|
border-radius: 8px;
|
||||||
font-size: 16px;
|
font-size: 14px;
|
||||||
font-weight: 800;
|
font-weight: 400;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
line-height: 24px;
|
display: flex;
|
||||||
display: flex;
|
align-items: center;
|
||||||
align-items: center;
|
justify-content: center;
|
||||||
justify-content: center;
|
margin-left: 10px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
margin-top: 39px;
|
}
|
||||||
margin-bottom: 30px;
|
}
|
||||||
}
|
|
||||||
}
|
.question .people {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333330;
|
||||||
|
margin-left: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.question .words {
|
||||||
|
position: absolute;
|
||||||
|
right: 15px;
|
||||||
|
bottom: 5px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333330;
|
||||||
|
}
|
||||||
|
|
||||||
|
.question .el-textarea__inner {
|
||||||
|
border-radius: 8px;
|
||||||
|
background-color: rgba(245, 246, 247, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit {
|
||||||
|
width: 126px;
|
||||||
|
height: 46px;
|
||||||
|
background: #2478ff;
|
||||||
|
box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 800;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 24px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-top: 39px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||