feat:修改版本

src/views/projectdetails/projectDetails.vue

@@ -51,33 +51,90 @@
                     border: 2px solid #999;
                   "
                   :style="
-                    (item.stageStatusName === '未开始' ||
-                      item.stageStatusName === '已结束') &&
-                    'border: 1px solid #999;'
+                    item.statusName === '已完成' || item.statusName === '进行中'
+                      ? 'border: 2px solid #0060ff'
+                      : 'border: 1px solid #999;'
                   "
                 ></div>
                 <div
                   class="text9"
                   :style="
-                    (item.stageStatusName === '未开始' ||
-                      item.stageStatusName === '已结束') &&
-                    'color:#999'
+                    item.statusName === '已完成' || item.statusName === '进行中'
+                      ? 'color:#0060ff'
+                      : 'color:#999'
                   "
                 >
-                  {{ item.stageStatusName }}
+                  {{
+                    item.statusName ||
+                    (data.unlockMode === 1 ? "未开始" : "未解锁")
+                  }}
                 </div>
               </div>
             </div>
             <div class="secondcontent">
               <div
                 class="question"
-                v-for="(el, index) in item.taskProcessList"
+                v-for="(el, index) in item.taskProcessList
+                  .sort((a, b) => {
+                    return a.id - b.id;
+                  })
+                  .filter((e) => !whiteTypes(e.type))"
                 :key="index"
+                :style="{ height: el.type === 1 ? '90px' : '72px' }"
               >
                 <div style="width: calc(100% - 80px)">
-                  <div class="issue">
+                  <div class="issue" :title="el.name">
                     {{ el.name }}
                   </div>
+                  <div v-if="el.type === 1" class="progressBox">
+                    <!-- <div>当前进度</div> -->
+                    <div
+                      class="progress"
+                      style="
+                        display: flex;
+                        align-items: center;
+                        margin-bottom: 3px;
+                      "
+                    >
+                      <div style="width: 200px">
+                        <el-progress
+                          :percentage="parseInt(el.currentRatio)"
+                          :show-text="false"
+                          :stroke-width="8"
+                          :color="
+                            {
+                              0: 'rgba(238, 112, 108, 1)',
+                              1: 'rgba(255, 151, 38, 1)',
+                              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(parseInt(el.currentRatio) / 20)]
+                          "
+                        />
+                      </div>
+                      <div
+                        style="
+                          font-size: 12px;
+                          font-weight: 500;
+                          color: #277aff;
+                          margin-left: 10px;
+                        "
+                        :style="{
+                          color: {
+                            0: 'rgba(238, 112, 108, 1)',
+                            1: 'rgba(255, 151, 38, 1)',
+                            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(parseInt(el.currentRatio) / 20)],
+                        }"
+                      >
+                        {{ parseInt(el.currentRatio) }}%
+                      </div>
+                    </div>
+                  </div>
                   <div class="coursetag">
                     <div
                       class="tag1"
@@ -97,23 +154,26 @@
                       class="tag3"
                       style="margin-right: 11px; margin-top: 3px"
                     >
-                      {{ types.typeName[el.type] || "" }}
+                      {{ TASK_TYPES.typeName[el.type] || "" }}
                     </div>
                   </div>
                 </div>
                 <div
                   class="goclass"
-                  :style="{
-                    background: `${types.path[el.type] ? '#2478ff' : '#999'}`,
-                  }"
                   @click="toFinish(el)"
+                  :style="{
+                    background:
+                      el.statusName !== '已结束' &&
+                      (el.statusName || data.unlockMode === 1)
+                        ? '#2478ff'
+                        : '#999',
+                  }"
                 >
                   {{
-                    el.status === 1
-                      ? "已完成"
-                      : types.path[el.type]
-                      ? types.toName[el.type]
-                      : "未开放"
+                    el.statusName ||
+                    (data.unlockMode === 1
+                      ? TASK_TYPES.toName[el.type]
+                      : "未解锁")
                   }}
                 </div>
               </div>
@@ -143,7 +203,7 @@
 </template>
 
 <script setup>
-import { computed, reactive, ref, watch } from "vue";
+import { computed, reactive, ref, watch, onMounted } from "vue";
 import { ElLoading } from "element-plus";
 import { useRequest, request } from "@/api/request";
 import {
@@ -157,15 +217,18 @@ import { useRoute, useRouter } from "vue-router";
 import store from "@/store";
 import { ElMessage } from "element-plus";
 import ReturnHead from "@/components/ReturnHead.vue";
-import { PROJECT } from "@/api/CONST";
+import { PROJECT, TASK_TYPES } from "@/api/CONST";
 import dayjs from "dayjs";
+import { useStore } from "vuex";
 const {
   query: { courseId, projectId },
 } = useRoute();
 const router = useRouter();
+const { commit, dispatch, state } = useStore();
+const data = computed(() => state.projectInfo);
 
-const { data } = useRequest(PROJECT_PROCESS, {
-  projectId: projectId || courseId,
+onMounted(() => {
+  dispatch("getProjectInfo", { projectId });
 });
 watch(
   () => data.value.stageProcessList,
@@ -334,6 +397,10 @@ function judgeTaskIsEnd(type, endTimes, status) {
 }
 
 function toFinish(d, sName, chapterOrStageId) {
+  if (data.value.unlockMode !== 1 && !d.statusName) {
+    ElMessage.warning("当前未解锁");
+    return;
+  }
   console.log("dddddd", data, d, sName, chapterOrStageId);
 
   if (judgeTaskIsEnd(d.type, data.value.endTime, data.value.status)) {
@@ -430,7 +497,7 @@ function toFinish(d, sName, chapterOrStageId) {
     }
   }
 
-  if (!types.value.path[d.type]) {
+  if (!TASK_TYPES.path[d.type]) {
     ElMessage.error("暂时未开放");
     return;
   }
@@ -438,18 +505,18 @@ function toFinish(d, sName, chapterOrStageId) {
   //更新学员当前任务
   request(UPDATE_CURRENT_TASK, {
     id: d.id,
-    type: ROUTER,
-    pid: routerId,
+    type: PROJECT,
+    pid: projectId,
     name: d.name,
   });
-  if (typeof types.value.path[d.type] === "string") {
-    types.value.path[d.type] &&
-      types.value.path[d.type].startsWith("http") &&
-      window.open(types.value.path[d.type] + d.targetId, "_top");
-    types.value.path[d.type] &&
-      types.value.path[d.type].startsWith("/") &&
+  if (typeof TASK_TYPES.path[d.type] === "string") {
+    TASK_TYPES.path[d.type] &&
+      TASK_TYPES.path[d.type].startsWith("http") &&
+      window.open(TASK_TYPES.path[d.type] + d.targetId, "_top");
+    TASK_TYPES.path[d.type] &&
+      TASK_TYPES.path[d.type].startsWith("/") &&
       router.push({
-        path: types.value.path[d.type],
+        path: TASK_TYPES.path[d.type],
         query: {
           id: d.id,
           type: PROJECT,
@@ -465,9 +532,35 @@ function toFinish(d, sName, chapterOrStageId) {
           btype: 1,
         },
       });
-  } else if (typeof types.value.path[d.type] === "function") {
-    types.value.path[d.type](d);
+  } else if (typeof TASK_TYPES.path[d.type] === "function") {
+    TASK_TYPES.path[d.type](d);
   }
+  // if (typeof types.value.path[d.type] === "string") {
+  //   types.value.path[d.type] &&
+  //     types.value.path[d.type].startsWith("http") &&
+  //     window.open(types.value.path[d.type] + d.targetId, "_top");
+  //   types.value.path[d.type] &&
+  //     types.value.path[d.type].startsWith("/") &&
+  //     router.push({
+  //       path: types.value.path[d.type],
+  //       query: {
+  //         id: d.id,
+  //         type: PROJECT,
+  //         infoId: data.value.projectId,
+  //         courseId: d.courseId,
+  //         pName: data.value.name,
+  //         sName,
+  //         chapterOrStageId: data.value.currentStageId,
+  //         studentId: userInfo.value.id,
+  //         status: d.status,
+  //         targetId: d.targetId,
+  //         evaType: d.evaType,
+  //         btype: 1,
+  //       },
+  //     });
+  // } else if (typeof types.value.path[d.type] === "function") {
+  //   types.value.path[d.type](d);
+  // }
 }
 function whiteTypes(type) {
   return import.meta.env.VITE_TASK_WHITE_TYPE.includes("-" + type + "-");