修改阶段状态

src/views/project/ProjectDetails.vue

@@ -21,8 +21,8 @@
             <div class="titleR" :style="{ display: 'flex' }">
               <img src="../../assets/image/pathdetails/circle.png"/>
               <div class="titleRT"
-                   :style="(i.stageStatusName === '未开始' || i.stageStatusName === '已结束') && 'color:#999'">
+                   :style="(i.statusName === '已完成' || i.statusName === '进行中') ? 'color:#0060ff' : 'color:#999'">
-                {{ i.stageStatusName }}
+                {{ i.statusName || (data.unlockMode === 1 ? '未开始' : '未解锁') }}
               </div>
             </div>
             <!-- <div class="titleR" :style="{ display: i.status === 2 ? 'flex' : 'none' }">
@@ -90,14 +90,9 @@
                 </div>
               </div>
             </div>
-            <div class="goclass" @click="toFinish(value, i.stageName, i.stageId)">
+            <div class="goclass" @click="toFinish(value, i.stageName, i.stageId)"
-              {{
+                 :style="{background:(value.statusName !=='已结束' && (value.statusName || data.unlockMode === 1)) ?'#2478ff':'#999'}">
-                value.status === 1
+              {{ value.statusName || (data.unlockMode === 1 ? types.toName[value.type] : '未解锁') }}
-                    ? "已完成"
-                    : types.path[value.type]
-                        ? types.toName[value.type]
-                        : "未开放"
-              }}
             </div>
             <!--            <div :style="{ display: value.status === 1 ? 'block' : 'none' }">-->
             <!--              <div-->
@@ -440,8 +435,39 @@ const router = useRouter();
 const {data} = useRequest(PROJECT_PROCESS, {
   projectId: projectId || courseId,
 });
+
+
 watch(() => data.value.stageProcessList, () => {
-  data.value.stageProcessList.forEach((t)=>{t.stageStatusName = getTaskStatus(t)})
+  // data.value.unlockMode 1自由模式 2闯关模式 3 闯关模式 必修 flag true
+  if (data.value.status === -1) {
+    data.value.stageProcessList.forEach((t) => {
+      t.statusName = '已结束';
+      t.taskProcessList?.forEach((s) => s.statusName = '已结束')
+    })
+    return
+  }
+  if (data.value.unlockMode === 1) {
+    data.value.stageProcessList.forEach((t) => {
+      t.statusName = '进行中'
+      const stageState = t.taskProcessList?.every((s) => {
+        s.statusName = s.status === 1 ? '已完成' : types.value.toName[s.type]
+        return s.status === 1
+      })
+      stageState && (t.statusName = '已完成')
+    })
+    return
+  }
+  data.value.stageProcessList.some((t) => {
+    t.statusName = '已完成'
+    const stageState = t.taskProcessList?.some((s) => {
+      s.unlock = true
+      s.statusName = '已完成'
+      s.status !== 1 && (s.statusName = types.value.toName[s.type])
+      return data.value.unlockMode === 2 ? s.status !== 1 : (s.status !== 1 && s.flag)
+    })
+    stageState && (t.statusName = '进行中');
+    return stageState
+  })
 }, {deep: true})
 
 
@@ -524,23 +550,6 @@ request(PointList, {projectId: projectId}).then(res => {
   console.log(err)
 });
 
-
-function getTaskStatus(d){
-  if (data.value.status !== 3) {
-    return '已结束'
-  }
-  if (dayjs().isBefore(dayjs(d.beginTime)) || !d.taskProcessList?.filter(t => t.status === 1)?.length) {
-    return '未开始'
-  }
-  if (dayjs().isAfter(dayjs(data.value.endTime))) {
-    return '已结束'
-  }
-  if (d.taskProcessList?.filter(t => t.status === 1)?.length === d.taskProcessList?.length) {
-    return '已完成'
-  }
-  return '进行中'
-}
-
 const loading = ref(false);
 loading.value = ElLoading.service({
   lock: true,
@@ -630,7 +639,6 @@ const dialogVisibleTip = ref('该任务无法学习，请联系管理员进行
 // 判断当前任务已结束及时间意义上的结束 提示用户
 function judgeTaskIsEnd(type, endTimes, status) {
   // type 任务类型 endTime 结束时间 status 任务状态 (状态  0 未完成 1 已完成 2 未开始 -1 已结束)
-  console.log(type, endTimes, status);
   let isEnd = false;
   let nowTime = new Date().getTime();
   let endTime = new Date().getTime(endTimes);
@@ -656,7 +664,10 @@ function judgeTaskIsEnd(type, endTimes, status) {
 }
 
 async function toFinish(d, sName, chapterOrStageId) {
-  console.log("dddddd", d, sName, chapterOrStageId);
+  if (data.value.unlockMode !==1 && !d.statusName) {
+    ElMessage.warning("当前未解锁")
+    return
+  }
   if (judgeTaskIsEnd(d.type, data.value.endTime, data.value.status)) {
     ElMessage.error("当前任务已结束")
     return

src/views/roadmap/PathDetails.vue

@@ -6,7 +6,8 @@
 
     <div class="pdname">
       {{ data.name }}
-			<el-popover v-if="data.chapterRemark" ref="popover" popper-class="jianjie" placement="right" trigger="hover" :width="300"
+      <el-popover v-if="data.chapterRemark" ref="popover" popper-class="jianjie" placement="right" trigger="hover"
+                  :width="300"
                   :content="data.chapterRemark">
         <template #reference><span style="font-size: 16px;font-weight: 600;">关卡说明></span></template>
       </el-popover>
@@ -19,11 +20,15 @@
           <div class="title">
             <div class="titleL">{{ data.currentStageName }}</div>
             <div class="titleR" :style="{ display: 'flex' }">
-							<img :src="data.currentChapterCnt ? circle : circle2" />
+              <img :src="data.currentChapterCnt ? circle : circle2"/>
-							<div class="titleRT" :style="(stageStatusName === '未开始' || stageStatusName === '已结束') && 'color:#999'">{{stageStatusName}}</div>
+              <div class="titleRT"
+                   :style="(data.statusName === '已完成' || data.statusName === '进行中') ? 'color:#0060ff' : 'color:#999'">
+                {{ data.statusName || (data.unlockMode === 1 ? '未开始' : '未解锁') }}
               </div>
             </div>
-					<div class="course" v-for="(value, index) in data.taskBoList?.filter((e) => !whiteTypes(e.type))" :key="index">
+          </div>
+          <div class="course" v-for="(value, index) in data.taskBoList?.filter((e) => !whiteTypes(e.type))"
+               :key="index">
             <div style="width: 70%">
               <div v-if="value.name.length > 50" class="coursename" :title="value.name">
                 <el-popover ref="popover" placement="right" trigger="hover" :width="300" :content="value.name">
@@ -58,7 +63,8 @@
                 <div>当前进度</div>
                 <div class="progress">
                   <div style="width: 291px">
-										<el-progress :percentage="parseInt(value.currentRatio)" :show-text="false" :stroke-width="8" :color="
+                    <el-progress :percentage="parseInt(value.currentRatio)" :show-text="false" :stroke-width="8"
+                                 :color="
 	{
 		0: 'rgba(238, 112, 108, 1)',
 		1: 'rgba(255, 151, 38, 1)',
@@ -67,7 +73,7 @@
 		4: 'rgba(57, 219, 183, 1)',
 		5: 'rgba(57, 219, 183, 1)',
 	}[parseInt(parseInt(value.currentRatio) / 20)]
-" />
+"/>
                   </div>
                   <div style="font-size: 14px;font-weight: 500;color: #277aff;margin-left: 10px;" :style="{
 	color: {
@@ -84,10 +90,10 @@
                 </div>
               </div>
             </div>
-						<div class="goclass" :style="{
+            <div class="goclass"
-	background: `${types.path[value.type] ? '#2478ff' : '#999'}`,
+                 :style="{background:(value.statusName !=='已结束' && (value.statusName || data.unlockMode === 1)) ?'#2478ff':'#999'}"
-}" @click="toFinish(value)">
+                 @click="toFinish(value)">
-							{{ value.status === 1 ? "已完成" : types.path[value.type] ? types.toName[value.type] : "未开放" }}
+              {{ value.statusName || (data.unlockMode === 1 ? types.toName[value.type] : '未解锁') }}
             </div>
             <!--            <div :style="{ display: value.status === 1 ? 'block' : 'none' }">-->
             <!--              <div-->
@@ -128,7 +134,9 @@
 								align-items: center;
 								margin-bottom: 15px;">
                   <!-- <img :src="value.img" style="width: 22px; height: 26px"/> -->
-								<FileTypeImg :v-model="value.name? value.name : value.slice(value.lastIndexOf('/')+1,value.indexOf('-')) + value.slice(value.lastIndexOf('.'))" :style="{width: '22px',height: '26px'}"></FileTypeImg>
+                  <FileTypeImg
+                      :v-model="value.name? value.name : value.slice(value.lastIndexOf('/')+1,value.indexOf('-')) + value.slice(value.lastIndexOf('.'))"
+                      :style="{width: '22px',height: '26px'}"></FileTypeImg>
                   <div class="sharedocname">{{ value.name }}</div>
                   <div class="download">
                     <img
@@ -147,13 +155,13 @@
         <div class="detailRB">
           <div class="info">
             <div class="title">
-							<img style="width: 21px; height: 20px" src="../../assets/image/pathdetails/info.png" />
+              <img style="width: 21px; height: 20px" src="../../assets/image/pathdetails/info.png"/>
               <div class="text" style="margin-left: 7px">个人信息</div>
               <div class="box"></div>
             </div>
             <!--            todo #路径详情 个人信息缺少img和介绍-->
             <div class="teacheritem" :style="{ 'border-bottom': '1px solid rgba(56, 125, 247, 0.2)' }">
-							<img class="peopleimg" :src="userInfo?.avatar" />
+              <img class="peopleimg" :src="userInfo?.avatar"/>
               <div style="margin-left: 17px">
                 <div class="teacherName">
                   <div style="margin-right: 5px">
@@ -169,14 +177,16 @@
           </div>
           <div class="info" style="padding-top: 20px">
             <div class="title">
-							<img style="width: 18px; height: 17px" src="../../assets/image/pathdetails/study.png" />
+              <img style="width: 18px; height: 17px" src="../../assets/image/pathdetails/study.png"/>
               <div class="text" style="margin-left: 9px">学习进度</div>
               <div class="box"></div>
             </div>
 
             <div class="rate">
               <div class="ratetext">上次学到：{{ data.lastLearned }}</div>
-						<div v-if="data.lastLearned" class="ratebtn" @click="continueLearn(data.lastLearned, data.taskBoList)">继续学习</div>
+              <div v-if="data.lastLearned" class="ratebtn" @click="continueLearn(data.lastLearned, data.taskBoList)">
+                继续学习
+              </div>
             </div>
             <div style="margin-top: 16px">
               <div class="progressBox">
@@ -193,7 +203,7 @@
 		4: 'rgba(57, 219, 183, 1)',
 		5: 'rgba(57, 219, 183, 1)',
 	}[(parseInt(data.currentChapterCnt / data.totalChapterCnt) * 100) / 20]
-" />
+"/>
                   </div>
                   <div style="font-size: 14px; font-weight: 500; margin-left: 10px" :style="{
 	color: {
@@ -225,7 +235,7 @@
 		4: 'rgba(57, 219, 183, 1)',
 		5: 'rgba(57, 219, 183, 1)',
 	}[parseInt((data.currentReqCnt / data.totalReqCnt * 100) / 20)]
-" />
+"/>
                   </div>
                   <div style="
                       font-size: 14px;
@@ -267,45 +277,58 @@
 </template>
 
 <script setup>
-import { computed, reactive, ref, watch } from "vue";
+import {computed, reactive, ref, watch} from "vue";
 import circle from '@/assets/image/pathdetails/circle.png';
 import circle2 from '@/assets/image/pathdetails/circle2.png';
-import { boeRequest, useRequest, request } from "@/api/request";
+import {boeRequest, useRequest, request} from "@/api/request";
-import { ROUTER_PROCESS, LINK_DETAILS, STUDY_RECORD, EvaluationToLearn, SubmitExternalExam } from "@/api/api";
+import {ROUTER_PROCESS, LINK_DETAILS, STUDY_RECORD, EvaluationToLearn, SubmitExternalExam} 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 store from "@/store";
 import {ROUTER} from "@/api/CONST";
 import FileTypeImg from "@/components/FileTypeImg.vue";
 import {UPDATE_CURRENT_TASK} from "../../api/api";
 
 const {
-	query: { routerId, routerName },
+  query: {routerId, routerName},
 } = useRoute();
 const router = useRouter();
 const returnclick = () => {
   router.back();
 };
-const { data } = useRequest(ROUTER_PROCESS, { routerId });
+const {data} = useRequest(ROUTER_PROCESS, {routerId});
 const userInfo = computed(() => store.state.userInfo);
 const activeName = ref("first");
 
-const stageStatusName = computed(()=>{
+watch(() => data.value.taskBoList, () => {
-  if(data.value.status !== 1){
+  // data.value.unlockMode 1自由模式 2闯关模式 3 闯关模式 必修 flag true
-    return '已结束'
+  if (data.value.status === -1) {
+    data.value.statusName = '已结束'
+    data.value.taskBoList.forEach((t) => t.statusName = '已结束')
+    return
   }
-  if(!data.value.taskBoList?.filter(t=>t.status===1)?.length){
+  data.value.statusName = '进行中'
-    return '未开始'
+  if (data.value.unlockMode === 1) {
+    data.value.taskBoList?.every((s) => {
+      s.statusName = s.status === 1 ? '已完成' : types.value.toName[s.type]
+      return s.status === 1
+    }) && (data.value.statusName = '已完成')
+    return
   }
-  if(data.value.taskBoList.filter(t=>t.status===1).length === data.value.taskBoList.length){
+  data.value.statusName = '已完成'
-    return '已完成'
+  data.value.taskBoList?.some((s) => {
-  }
+    s.unlock = true
-  return '进行中'
+    s.statusName = '已完成'
-});
+    s.status !== 1 && (s.statusName = types.value.toName[s.type])
+    return data.value.unlockMode === 2 ? s.status !== 1 : (s.status !== 1 && s.flag)
+  }) && (data.value.statusName = '进行中')
+
+}, {deep: true})
+
 const handleClick = (tab, event) => {
   console.log(tab, event);
 };
-const path = { 1: "path" };
+const path = {1: "path"};
 
 const dialogVisible = ref(false);
 const dialogVisibleTip = ref('');
@@ -343,20 +366,20 @@ const types = ref({
   },
   path: {
     1: window.location.protocol + import.meta.env.VITE_BOE_ONLINE_CLASS_URL, //在线
-    	2: ({ courseId }) => window.open(`${location.protocol}//${location.host}${import.meta.env.VITE_BASE_API}/stu/project/redirectDetail?courseId=${courseId}`, '_top'),
+    2: ({courseId}) => window.open(`${location.protocol}//${location.host}${import.meta.env.VITE_BASE_API}/stu/project/redirectDetail?courseId=${courseId}`, '_top'),
     3: window.location.protocol + import.meta.env.VITE_BOE_CASS_DETAIL_URL, //案例
     4: "/homeworkpage",
     5: window.location.protocol + import.meta.env.VITE_BOE_EXAM_DETAIL_URL, //考试
     6: "/livebroadcast",
-		7: ({ targetId }) => window.open(targetId, '_top'), //外联
+    7: ({targetId}) => window.open(targetId, '_top'), //外联
     8: "/discusspage",
     9: "/moreactive",
-		10: ({ evaType, targetId }) =>
+    10: ({evaType, targetId}) =>
         window.open(
             evaType == 0
-					? window.location.protocol + import.meta.env.VITE_BOE_TEST_DETAIL_URL+targetId
+                ? window.location.protocol + import.meta.env.VITE_BOE_TEST_DETAIL_URL + targetId
-					: window.location.protocol + import.meta.env.VITE_BOE_TEST_OUT_DETAIL_URL + targetId+`&quizTaskKid=${routerId}&channelCode=learningpath`
+                : window.location.protocol + import.meta.env.VITE_BOE_TEST_OUT_DETAIL_URL + targetId + `&quizTaskKid=${routerId}&channelCode=learningpath`
-			,'_top'), //测评
+            , '_top'), //测评
     11: "/surveydetail",
     12: "/ballotpage",
     13: "/projectdetails",
@@ -391,9 +414,10 @@ function judgeTaskIsEnd(type, endTimes, status) {
 }
 
 async function toFinish(d) {
-  console.log(d)
+  if (data.value.unlockMode !==1 && !d.statusName) {
-  console.log(data.value.currentStageId, routerId)
+    ElMessage.warning("当前未解锁")
-
+    return
+  }
   if (judgeTaskIsEnd(d.type, data.value.endTime, data.value.status)) {
     ElMessage.error("当前任务已结束")
     return
@@ -624,17 +648,17 @@ function whiteTypes(type) {
 }
 
 // 共享文档下载
-function downloadFile(url){
+function downloadFile(url) {
   window.open(url);
 }
 
 // 继续学习
-function continueLearn(taskname, datas){
+function continueLearn(taskname, datas) {
-	console.log('我是当前的列表展示信息',data)
+  console.log('我是当前的列表展示信息', data)
   console.log(datas)
   let jumpinfo
-	for(let i=0; i<datas.length; i++){
+  for (let i = 0; i < datas.length; i++) {
-		if(datas[i].name==taskname){
+    if (datas[i].name == taskname) {
       jumpinfo = datas[i]
     }
   }