From 84c43b4577d43a583cde72503cbbf9df6ac2d64d Mon Sep 17 00:00:00 2001
From: lixg <lixg@dongwu-inc.com>
Date: Sun, 29 Jan 2023 21:30:22 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=A2=9E=E5=8A=A0=E9=A1=B9=E7=9B=AE?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env                                        |   2 +-
 src/api/api.js                              |  10 +-
 src/api/request.js                          |   3 +-
 src/assets/image/circle.png                 | Bin 0 -> 736 bytes
 src/components/img/UploadImg.vue            |   6 +-
 src/mock/mocks/task.js                      |  19 +-
 src/views/pathmap/LevelList.vue             | 143 ++++++
 src/views/pathmap/PathmapPage.vue           |   2 +-
 src/views/projectdetails/ProjectPath.vue    | 262 +++++++++++
 src/views/projectdetails/projectDetails.vue | 479 +++++++++++++++++---
 10 files changed, 855 insertions(+), 71 deletions(-)
 create mode 100644 src/assets/image/circle.png
 create mode 100644 src/views/pathmap/LevelList.vue
 create mode 100644 src/views/projectdetails/ProjectPath.vue

diff --git a/.env b/.env
index 2b89436..f47333a 100644
--- a/.env
+++ b/.env
@@ -2,7 +2,7 @@ VITE_BASE=/fe-student-h5
 VITE_BASE_API=
 VITE_OUTPUT_DIR=./dist
 VITE_BASE_LOGIN_URL=https://u-pre.boe.com/web?returnUrl=
-VITE_PROXY_URL=http://111.231.196.214/manageApi
+VITE_PROXY_URL=http://43.143.139.204/manageApi
 
 
 VITE_BOE_ONLINE_CLASS_URL=https://u-pre.boe.com/pc/course/studyindex?id=
diff --git a/src/api/api.js b/src/api/api.js
index ed18516..4213a66 100644
--- a/src/api/api.js
+++ b/src/api/api.js
@@ -2,14 +2,14 @@
  * @Author: lixg lixg@dongwu-inc.com
  * @Date: 2023-01-13 11:42:48
  * @LastEditors: lixg lixg@dongwu-inc.com
- * @LastEditTime: 2023-01-18 14:57:44
+ * @LastEditTime: 2023-01-29 18:02:48
  * @FilePath: /stu_h5/src/api/api.js
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
 export const BASE = 'http://localhost:3000'
 export const LOGIN = '/admin/CheckUser/userLogin post'
 export const FILE_UPLOAD = import.meta.env.VITE_BASE_API + '/file/upload'
-export const ROUTER_CHAPTER_LIST = '/stu/router/chapterList'
+export const ROUTER_CHAPTER_LIST = '/stu/router/chapterList post'
 export const ROUTER_LIST = '/stu/router/list post'
 export const ROUTER_PROCESS = '/stu/router/process'
 export const ROUTER_UNCOMPLETE_LIST = '/stu/router/unCompleteTaskList'
@@ -37,4 +37,8 @@ export const TASK_WORK_SUBMIT_LIST = '/workSubmit/queryWorkSubmitDetailById'
 export const WORK_HISTROY = '/workSubmit/queryWorkDetailListByStuId'
 export const ASSESSMENT_QUERY = assessmentId => `/stu/task/queryAssessmentDetailById`
 export const ASSESSMENT_SUBMIT = '/stu/task/evaluate/commit post'
-export const FILE_UPLOAD_ANNEX = import.meta.env.VITE_BASE_API + '/file/stuUploadAnnex'
+export const FILE_UPLOAD_ANNEX = import.meta.env.VITE_BASE_API + '/file/uploadFile'
+export const ROUTER_DETAILS = '/admin/router/detail'
+export const TASK_LIST = '/stu/tasks'
+export const ONLINE_PROCESS = '/onlineClasses/queryOnlineClassesStudyDetail post'
+export const PROJECT_PROCESS = '/stu/project/process'
\ No newline at end of file
diff --git a/src/api/request.js b/src/api/request.js
index 5ff003c..1f1d4a6 100644
--- a/src/api/request.js
+++ b/src/api/request.js
@@ -4,7 +4,7 @@ import axios from 'axios';
 import { getCookie } from "@/api/utils";
 import JSONBigInt from 'json-bigint';
 const JSONBigIntStr = JSONBigInt({ storeAsString: true });
-export function usePage(_url, param) {
+export function usePage(_url, param, callback) {
 
     const state = reactive({
         data: {},
@@ -28,6 +28,7 @@ export function usePage(_url, param) {
             state.total = r.data.total
             state.current = r.data.current
             state.loading = false
+            callback(r)
         })
     }
 
diff --git a/src/assets/image/circle.png b/src/assets/image/circle.png
new file mode 100644
index 0000000000000000000000000000000000000000..125dede73b71333c80e9d38b90f1942c455e584e
GIT binary patch
literal 736
zcmV<60w4W}P)<h;3K|Lk000e1NJLTq000#L000#T1^@s6sTZY|00001b5ch_0Itp)
z=>Px%nn^@KR5(wyl|4*TQ5c5b@BWmwaDk#FLd24S#yB_{DMBo9U^EQGkQf6-2NM%@
zFq$xQAn_+r2NM^6fM|&6fQ~GJPz2)WV2qYPLjopMO1aRMw)cGIUM&%8QBcl!&U@eU
zo%5adxr9O^7?kU)R-1%`R%RR|P%(p7iSR)Z7z!^GhtS?`{O)u5b@KSgh%#r3Twum^
z0DB5<3VbHQjheLQ!E3)i`?GF?sb}nIl_D8~3>-B@L=;g~Wl~X;8J4633E@m<GPOq5
z@G-N;(g0IgA-6@EPcP(**G=oEp6xZV*--+#L=?3b*`H`-r4s;iezin;eA$;;OLZ}`
z8$ehR!WVAtivHLLFpnHjBVz<KNRkwGRk#AOEH7_zbZf~ljMCU*EFgraC*skXbnOZA
zDy&Mq<Gq&vx@T5cv8()wEUWQ98RpgvBU85cb?FW>S2F0_%&{|%2*IH2txn7VsB$<R
zJ({My{aeGFPS^D#$wac7fcfcp=RT?%@Aor!*ldcs(tUBOhB<vS8okegJp^hYZ>aAU
z2v==3^?A9=HLzXNrC6*Zoz9#B<2HHU^t}M%q{C^yscB}nw>NZs*_TYDu7U89yyN|^
z0B$KMc6K{UO5SbH5=gA999~&X^Z+!xLzV8tovwFZqKMo5pSr&z@AP}3`Yr>w`_G9Y
zK0njg`Ou1~g*!D8GU>FH>}Rru7LP3kgy8*o**A^zDCH=6tZ8MF1u3P+8&b)&vlgWY
zpCm&xZlF}|Z5|jI*qv3=g8-UxJe3uB!ltUTg?I`eq-1PuAN?I)@_3q?urO$w?Ua}T
z3{)2ig9#5o9Pp%Tdp9Nj27_QwuB%QqGjl5>90J1*LJ9)!iD+ng-Z56_AN36{T4OQx
S$p%mW0000<MNUMnLSTYu=1VvL

literal 0
HcmV?d00001

diff --git a/src/components/img/UploadImg.vue b/src/components/img/UploadImg.vue
index 53eef83..f1811ac 100644
--- a/src/components/img/UploadImg.vue
+++ b/src/components/img/UploadImg.vue
@@ -2,14 +2,14 @@
  * @Author: lixg lixg@dongwu-inc.com
  * @Date: 2023-01-18 14:40:26
  * @LastEditors: lixg lixg@dongwu-inc.com
- * @LastEditTime: 2023-01-18 14:58:06
+ * @LastEditTime: 2023-01-20 11:31:34
  * @FilePath: /stu_h5/src/components/img/UploadImg.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
 <template>
   <el-upload
     :file-list="files"
-    :action="FILE_UPLOAD"
+    :action="FILE_UPLOAD_ANNEX"
     method="POST"
     :show-file-list="false"
     :on-change="handleChange"
@@ -25,7 +25,7 @@
   </el-upload>
 </template>
 <script setup>
-import { FILE_UPLOAD } from "@/api/api";
+import { FILE_UPLOAD_ANNEX } from "@/api/api";
 import { defineProps, ref, watch } from "vue";
 import { ElMessage } from "element-plus";
 
diff --git a/src/mock/mocks/task.js b/src/mock/mocks/task.js
index 30b4db0..000a5c8 100644
--- a/src/mock/mocks/task.js
+++ b/src/mock/mocks/task.js
@@ -48,7 +48,8 @@ export default {
     }),
     TASK_BROADCAST_DETAIL: () => ({
         "code": 0,
-        "data": {"assessmentsubmitvo": {
+        "data": {
+            "assessmentsubmitvo": {
                 "assessmentId": 0,
                 "assessmentName": "",
                 "assessment_submit_id": 0,
@@ -251,4 +252,20 @@ export default {
         "msg": "",
         "success": true
     }),
+    TASK_LIST: () => ({
+        "code": 0,
+        "data": {
+            "chapterDtoList": [
+                {
+                    "chapterId": "",
+                    "chapterName": 0,
+                    "remark": "2022-12-22 00:00:00",
+                    "status": "1"
+                }
+            ],
+
+        },
+        "msg": "",
+        "success": true
+    })
 }
diff --git a/src/views/pathmap/LevelList.vue b/src/views/pathmap/LevelList.vue
new file mode 100644
index 0000000..0e35068
--- /dev/null
+++ b/src/views/pathmap/LevelList.vue
@@ -0,0 +1,143 @@
+<!--
+ * @Author: lixg lixg@dongwu-inc.com
+ * @Date: 2023-01-19 14:59:34
+ * @LastEditors: lixg lixg@dongwu-inc.com
+ * @LastEditTime: 2023-01-19 18:59:50
+ * @FilePath: /stu_h5/src/views/pathmap/LevelList.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <div class="levelList">
+    <ReturnHead text="展开路径图"></ReturnHead>
+    <!-- 学习路径介绍 -->
+    <div class="pathdetail">
+      <div class="pathName">产品经理学习路径图</div>
+      <div class="pathIntro">
+        为了提升集团各条线产品经理的专业能力，集团XX组织为产
+        品经理设置了统一的学习径为了提升集团各条线产品经理的
+        专业能力，集团XX组织为产品经理设置了统一的学习径为了
+        提升集团各条线产品经理的专业
+      </div>
+    </div>
+    <!-- 学习路径介绍 -->
+    <!-- 关卡列表 -->
+    <div class="level">
+      <div class="leveltitle">关卡列表</div>
+      <div style="width: 100%; display: flex; justify-content: center">
+        <div class="levelItem">
+          <div class="levelName">
+            初级产品经理 - 初级产品经理 - 初级产 品经理-初级啊产品经理 - 初级产
+            - 初级产品经理 - 初级产 品经理-初级啊产品经理 - 初级产 -
+            初级产品经理 - 初级产 品经理-初级啊产品经理 - 初级产
+          </div>
+
+          <div class="levelStatus">
+            <img
+              style="width: 10px; height: 10px; margin-right: 5px"
+              src="../../assets/image/circle.png"
+            />
+            <div>已完成</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 关卡列表 -->
+  </div>
+</template>
+
+<script setup>
+import { computed, reactive, toRefs, onUnmounted, ref } from "vue";
+import ReturnHead from "@/components/ReturnHead.vue";
+import { useRequest, request, usePage } from "@/api/request";
+import {
+  ROUTER_PROCESS,
+  STUDY_RECORD,
+  ROUTER_DETAILS,
+  TASK_LIST,
+} from "@/api/api";
+import { useRoute, useRouter } from "vue-router";
+const {
+  query: { routerId, routerName },
+} = useRoute();
+const { data } = useRequest(TASK_LIST, { routerId: routerId });
+console.log("获取路径图", data);
+</script>
+
+<style lang="scss">
+.levelList {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .pathdetail {
+    width: 90%;
+    min-height: 173px;
+    background-color: #fff;
+    margin-top: 10px;
+    padding-left: 5%;
+    padding-right: 5%;
+    .pathName {
+      font-size: 14px;
+      font-weight: 600;
+      color: #04243c;
+      line-height: 21px;
+      margin-top: 30px;
+      margin-bottom: 19px;
+    }
+    .pathIntro {
+      font-size: 13px;
+      font-weight: 400;
+      color: #333330;
+      line-height: 24px;
+    }
+  }
+  .level {
+    width: 100%;
+    min-height: 173px;
+    background-color: #fff;
+    margin-top: 10px;
+    .leveltitle {
+      width: 95%;
+      height: 50px;
+      border-bottom: 1px solid #f1f2f3;
+      display: flex;
+      align-items: center;
+      padding-left: 5%;
+      margin-bottom: 8px;
+    }
+    .levelItem {
+      width: 82%;
+      height: 61px;
+      background-color: #f2f5f7;
+      border-radius: 8px;
+      margin-top: 10px;
+      display: flex;
+      align-items: center;
+      padding-left: 5%;
+      padding-right: 3%;
+      .levelName {
+        flex: 1;
+        font-size: 14px;
+        font-weight: 500;
+        color: #333330;
+        line-height: 24px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+      }
+      .levelStatus {
+        width: 52px;
+        display: flex;
+        align-items: center;
+        font-size: 11px;
+        font-weight: 500;
+        color: #22c4a0;
+        line-height: 24px;
+        margin-left: 10px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/pathmap/PathmapPage.vue b/src/views/pathmap/PathmapPage.vue
index 54e76c6..667d3a3 100644
--- a/src/views/pathmap/PathmapPage.vue
+++ b/src/views/pathmap/PathmapPage.vue
@@ -708,7 +708,7 @@ function toFinish(d) {
               display: flex;
               align-items: center;
               justify-content: center;
-              margin-right: 37px;
+              // margin-right: 37px;
               cursor: pointer;
             }
             // .tag1 {
diff --git a/src/views/projectdetails/ProjectPath.vue b/src/views/projectdetails/ProjectPath.vue
new file mode 100644
index 0000000..b942172
--- /dev/null
+++ b/src/views/projectdetails/ProjectPath.vue
@@ -0,0 +1,262 @@
+<!--
+ * @Author: lixg lixg@dongwu-inc.com
+ * @Date: 2023-01-19 11:28:11
+ * @LastEditors: lixg lixg@dongwu-inc.com
+ * @LastEditTime: 2023-01-29 17:58:47
+ * @FilePath: /stu_h5/src/views/projectdetails/ProjectPath.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <div class="projectPath">
+    <!-- 搜索 -->
+    <div class="search">
+      <div style="width: 90%">
+        <el-input
+          placeholder="搜索"
+          prefix-icon="el-icon-search"
+          v-model="searchContent"
+        >
+        </el-input>
+      </div>
+    </div>
+    <!-- 搜索 -->
+    <!-- 导航 -->
+    <div class="tabsMain" style="">
+      <el-tabs v-model="selectTab" @tab-click="handleClick">
+        <el-tab-pane label="进行中" name="1">
+          <!-- 上次学到 -->
+          <div class="contentMain">
+            <div class="text">上次学到</div>
+            <div class="items" @click="goDetails">
+              <img
+                style="width: 100px; height: 56px"
+                src="../../assets/image/pathmap/firstclass.png"
+              />
+              <div class="titlePro">
+                <div class="title">
+                  BOE端到端体系 - 第七章 文字不可超出第二行…
+                </div>
+                <div style="margin-top: 5px">
+                  <el-progress :percentage="50"></el-progress>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- 上次学到 -->
+          <!-- 我的任务 -->
+          <div class="contentMain">
+            <div class="text">我的任务</div>
+            <div class="items">
+              <img
+                style="width: 100px; height: 56px"
+                src="../../assets/image/pathmap/firstclass.png"
+              />
+              <div class="titlePro">
+                <div class="title">
+                  BOE端到端体系 - 第七章 文字不可超出第二行…
+                </div>
+                <div style="margin-top: 5px">
+                  <el-progress :percentage="50"></el-progress>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- 我的任务 -->
+          <!-- 其他课程 -->
+          <div class="contentMain">
+            <div class="text">其他课程</div>
+            <div class="items">
+              <img
+                style="width: 100px; height: 56px"
+                src="../../assets/image/pathmap/firstclass.png"
+              />
+              <div class="titlePro">
+                <div class="title">
+                  BOE端到端体系 - 第七章 文字不可超出第二行…
+                </div>
+                <div style="margin-top: 5px">
+                  <el-progress :percentage="50"></el-progress>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- 其他课程 -->
+        </el-tab-pane>
+        <el-tab-pane label="待开始" name="2">
+          <!-- 我的任务 -->
+          <div class="contentMain">
+            <div class="text">我的任务</div>
+            <div class="items">
+              <img
+                style="width: 100px; height: 56px"
+                src="../../assets/image/pathmap/firstclass.png"
+              />
+              <div class="titlePro">
+                <div class="title">
+                  BOE端到端体系 - 第七章 文字不可超出第二行…
+                </div>
+                <div style="margin-top: 5px">
+                  <el-progress :percentage="50"></el-progress>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- 我的任务 -->
+          <!-- 其他课程 -->
+          <div class="contentMain">
+            <div class="text">其他课程</div>
+            <div class="items">
+              <img
+                style="width: 100px; height: 56px"
+                src="../../assets/image/pathmap/firstclass.png"
+              />
+              <div class="titlePro">
+                <div class="title">
+                  BOE端到端体系 - 第七章 文字不可超出第二行…
+                </div>
+                <div style="margin-top: 5px">
+                  <el-progress :percentage="50"></el-progress>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- 其他课程 -->
+        </el-tab-pane>
+        <el-tab-pane label="已完成" name="3">
+          <!-- 我的任务 -->
+          <div class="contentMain">
+            <div class="text">我的任务</div>
+            <div class="items">
+              <img
+                style="width: 100px; height: 56px"
+                src="../../assets/image/pathmap/firstclass.png"
+              />
+              <div class="titlePro">
+                <div class="title">
+                  BOE端到端体系 - 第七章 文字不可超出第二行…
+                </div>
+                <div style="margin-top: 5px">
+                  <el-progress :percentage="50"></el-progress>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- 我的任务 -->
+          <!-- 其他课程 -->
+          <div class="contentMain">
+            <div class="text">其他课程</div>
+            <div class="items">
+              <img
+                style="width: 100px; height: 56px"
+                src="../../assets/image/pathmap/firstclass.png"
+              />
+              <div class="titlePro">
+                <div class="title">
+                  BOE端到端体系 - 第七章 文字不可超出第二行…
+                </div>
+                <div style="margin-top: 5px">
+                  <el-progress :percentage="50"></el-progress>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- 其他课程 -->
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+    <!-- 导航 -->
+  </div>
+</template>
+
+<script setup>
+import { computed, reactive, toRefs, onUnmounted, ref } from "vue";
+import { useRouter } from "vue-router";
+const router = useRouter();
+const searchContent = ref(""); //搜索内容
+const selectTab = ref("1");
+const handleClick = (tab, event) => {
+  console.log("选择tab", tab, event);
+  console.log("selectTab", selectTab.value);
+};
+const goDetails = () => {
+  // router.push({
+  //   path: "/levelList",
+  //   query: { routerId: 274 },
+  // });
+  router.push({
+    path: "/projectdetails",
+    query: { projectId: 3 },
+  });
+};
+</script>
+
+<style lang="scss">
+.projectPath {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .search {
+    width: 100%;
+    height: 52px;
+    background-color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .tabsMain {
+    width: 100%;
+    height: 45px;
+    background-color: #fff;
+    #tab-1 {
+      margin-left: 10%;
+    }
+    .el-tabs__nav-wrap::after {
+      display: none;
+    }
+    .el-tabs__item {
+      height: 45px;
+    }
+    .el-tabs__header {
+      margin: 0;
+    }
+    .contentMain {
+      width: 90%;
+      background-color: #ffffff;
+      margin-top: 10px;
+      padding-left: 5%;
+      padding-right: 5%;
+      min-height: 200px;
+      padding-top: 17px;
+      .text {
+        font-size: 18px;
+        font-weight: 500;
+        color: #0d233a;
+        line-height: 25px;
+      }
+      .items {
+        width: 100%;
+        margin-top: 16px;
+        display: flex;
+        align-items: center;
+        .titlePro {
+          margin-left: 10px;
+          .title {
+            font-size: 15px;
+            font-weight: 500;
+            color: #04243c;
+            line-height: 20px;
+          }
+          .el-progress__text {
+            min-width: 0px !important;
+            color: #277aff;
+          }
+          .el-progress-bar__inner {
+            background: linear-gradient(180deg, #5093ff 0%, #2478ff 100%);
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/projectdetails/projectDetails.vue b/src/views/projectdetails/projectDetails.vue
index 1e7a55e..6775984 100644
--- a/src/views/projectdetails/projectDetails.vue
+++ b/src/views/projectdetails/projectDetails.vue
@@ -1,23 +1,24 @@
 <template>
   <div class="projectdetails">
+    <ReturnHead text="项目详情"></ReturnHead>
     <div class="main">
       <div class="up">
-        <div class="notice">
+        <!-- <div class="notice">
           <span class="text"
             >请各位选课的同学提前阅读本课程的“教学大纲与计划请各位选课的同学提前阅读本课程的“教学大纲与计划</span
           >
           <span class="close"></span>
-        </div>
+        </div> -->
         <div class="content">
-          <div class="title">中级产品经理</div>
+          <div class="title">{{ data.name }}</div>
           <div class="text2">
-            课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介简介课程简介
+            {{ data.remark }}
           </div>
         </div>
       </div>
       <div class="down">
         <div class="project_title">项目内容</div>
-        <div class="project_first">
+        <!-- <div class="project_first">
           <div class="course1_first">
             <div class="text8">序：管理者如何持续找到发力点</div>
             <div class="course1_right">
@@ -48,33 +49,87 @@
               </div>
             </div>
           </div>
-        </div>
-        <div class="project_second">
-          <div class="course1_first">
-            <div class="text8">第一讲：业务起航的支点 - 你的风格</div>
-            <div class="course1_right">
-              <div class="circular"></div>
-              <div class="text9">进行中</div>
-              <div class="btn1"></div>
-            </div>
-          </div>
-          <div class="secondcontent">
-            <div class="question">
-              <div class="issue">
-                趣味课前小测 - MBTI测试：你适合做哪个方向？
+        </div> -->
+
+        <div
+          class="project_second"
+          v-for="(item, key) in data?.stageProcessList"
+          :key="key"
+        >
+          <div
+            v-if="item.stageId == '0' && item.taskProcessList.length == 0"
+          ></div>
+          <div
+            v-else
+            style="
+              width: 100%;
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+            "
+          >
+            <div class="course1_first">
+              <div class="text8">{{ item.stageName }}</div>
+              <div class="course1_right">
+                <div class="circular"></div>
+                <div class="text9">进行中</div>
+                <div class="btn1"></div>
               </div>
-              <div class="tag1">选修</div>
-              <div class="tag2">测评</div>
             </div>
-            <div class="question">
-              <div class="issue">社交产品如何做好模块化处理？</div>
-              <div class="tag3">必修</div>
-              <div class="tag2">作业</div>
+            <div class="secondcontent">
+              <div
+                class="question"
+                v-for="(el, index) in item.taskProcessList"
+                :key="index"
+              >
+                <div>
+                  <div class="issue">
+                    {{ el.name }}
+                  </div>
+                  <div class="coursetag">
+                    <div
+                      class="tag1"
+                      style="margin-right: 11px; margin-top: 16px"
+                      v-if="el.flag"
+                    >
+                      必修
+                    </div>
+                    <div
+                      class="tag2"
+                      style="margin-right: 11px; margin-top: 16px"
+                      v-if="!el.flag"
+                    >
+                      选修
+                    </div>
+                    <div
+                      class="tag3"
+                      style="margin-right: 11px; margin-top: 16px"
+                    >
+                      {{ types.typeName[el.type] || "" }}
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="goclass"
+                  :style="{
+                    background: `${types.path[el.type] ? '#2478ff' : '#999'}`,
+                  }"
+                  @click="toFinish(el)"
+                >
+                  {{
+                    el.status === 1
+                      ? "已完成"
+                      : types.path[el.type]
+                      ? types.toName[el.type]
+                      : "未开放"
+                  }}
+                </div>
+              </div>
             </div>
           </div>
         </div>
       </div>
-      <div class="last">
+      <!-- <div class="last">
         <div class="project_title">数据排行</div>
         <div class="ranking">
           <div class="rankingbox">
@@ -90,12 +145,289 @@
             </div>
           </div>
         </div>
-      </div>
+      </div> -->
     </div>
   </div>
 </template>
 
-<script></script>
+<script setup>
+import { computed, reactive, ref } from "vue";
+import { ElLoading } from "element-plus";
+
+import { useRequest, request } from "@/api/request";
+import { PROJECT_PROCESS, STUDY_RECORD } from "@/api/api";
+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";
+
+const {
+  query: { courseId, projectId },
+} = useRoute();
+const router = useRouter();
+
+const { data } = useRequest(PROJECT_PROCESS, {
+  projectId: projectId || courseId,
+});
+
+console.log("datadata", data);
+
+const userInfo = computed(() => store.state.userInfo);
+const activeName = ref("first");
+const handleClick = (tab, event) => {
+  console.log(tab, event);
+};
+const path = { 1: "path" };
+const types = ref({
+  typeName: {
+    1: "在线",
+    2: "面授",
+    3: "案例",
+    4: "作业",
+    5: "考试",
+    6: "直播",
+    7: "外链",
+    8: "讨论",
+    9: "活动",
+    10: "测评",
+    11: "评估",
+    12: "投票",
+    13: "项目",
+  },
+  toName: {
+    1: "去上课",
+    2: "去上课",
+    3: "去阅读",
+    4: "去完成",
+    5: "去完成",
+    6: "去观看",
+    7: "去查看",
+    8: "去讨论",
+    9: "去签到",
+    10: "去完成",
+    11: "去完成",
+    12: "去投票",
+    13: "去完成",
+  },
+  path: {
+    1: 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"
+      ),
+    3: import.meta.env.VITE_BOE_CASS_DETAIL_URL, //案例
+    4: "/homeworkpage",
+    5: import.meta.env.VITE_BOE_EXAM_DETAIL_URL, //考试
+    6: "/livebroadcast",
+    7: ({ targetId }) => window.open(targetId, "_top"),
+    8: "/discusspage",
+    9: "/moreactive",
+    10: ({ evaType, targetId }) =>
+      window.open(
+        evaType == 0
+          ? import.meta.env.VITE_BOE_TEST_DETAIL_URL + targetId
+          : import.meta.env.VITE_BOE_TEST_OUT_DETAIL_URL +
+              targetId +
+              `&quizTaskKid=${projectId}&channelCode=project`,
+        "_top"
+      ), //测评
+    11: "/surveydetail",
+    12: "/ballotpage",
+    13: "/projectdetails",
+  },
+});
+
+const dialogVisible = ref(false);
+const dialogVisibleTip = ref("该任务无法学习，请联系管理员进行替换！");
+
+// 判断当前任务已结束及时间意义上的结束 提示用户
+function judgeTaskIsEnd(type, endTimes, status) {
+  // type 任务类型 endTime 结束时间 status 任务状态 (状态  0 未完成 1 已完成 2 未开始 3 已结束)
+  console.log(type, endTimes, status);
+  let isEnd = false;
+  let nowTime = new Date().getTime();
+  let endTime = new Date().getTime(endTimes);
+  switch (type) {
+    case 1:
+      status == 3
+        ? (isEnd = true)
+        : nowTime > endTime
+        ? (isEnd = true)
+        : (isEnd = false);
+      break;
+    case 3:
+      status == 3
+        ? (isEnd = true)
+        : nowTime > endTime
+        ? (isEnd = true)
+        : (isEnd = false);
+      break;
+    case 5:
+      status == 3
+        ? (isEnd = true)
+        : nowTime > endTime
+        ? (isEnd = true)
+        : (isEnd = false);
+      break;
+    case 7:
+      status == 3
+        ? (isEnd = true)
+        : nowTime > endTime
+        ? (isEnd = true)
+        : (isEnd = false);
+      break;
+    case 10:
+      status == 3
+        ? (isEnd = true)
+        : nowTime > endTime
+        ? (isEnd = true)
+        : (isEnd = false);
+      break;
+  }
+  return isEnd;
+}
+
+function toFinish(d, sName, chapterOrStageId) {
+  console.log("dddddd", d, sName, chapterOrStageId);
+
+  if (judgeTaskIsEnd(d.type, data.value.endTime, data.value.status)) {
+    ElMessage.error("当前任务已结束");
+    return;
+  }
+  if (d.type == 2) {
+    let date1 = new Date(d.endTime).getTime();
+    let date2 = new Date().getTime();
+    if (date1 < date2) {
+      dialogVisibleTip.value = "当前面授课已结束";
+      dialogVisible.value = true;
+
+      //return
+    }
+  }
+  // 作业过期判断
+  if (d.type == 4) {
+    let date1 = new Date(d.endTime).getTime();
+    let date2 = new Date().getTime();
+    if (date1 < date2) {
+      dialogVisibleTip.value = "当前作业已结束";
+      dialogVisible.value = true;
+
+      //return
+    }
+  }
+  // 直播结束时间
+  if (d.type == 6) {
+    let date1 = new Date(d.endTime).getTime();
+    let date2 = new Date().getTime();
+    if (date1 < date2) {
+      dialogVisibleTip.value = "当前直播已结束";
+      dialogVisible.value = true;
+      //return
+    }
+  }
+  // 考试 停用
+  if (d.type == 5) {
+    if (d.taskStatus == 1 || d.taskStatus == 2) {
+      // ElMessage.error("该任务无法学习，请联系管理员进行替换。")
+      dialogVisibleTip.value = "该任务无法学习，请联系管理员进行替换！";
+      dialogVisible.value = true;
+      return;
+    }
+  }
+  // 评估 停用
+  if (d.type == 11) {
+    if (d.taskStatus == 1 || d.taskStatus == 2) {
+      // ElMessage.error("该任务无法学习，请联系管理员进行替换。")
+      dialogVisibleTip.value = "该任务无法学习，请联系管理员进行替换！";
+      dialogVisible.value = true;
+      return;
+    }
+  }
+  // 其他活动 结束时间
+  if (d.type == 9) {
+    let date1 = new Date(d.endTime).getTime();
+    let date2 = new Date().getTime();
+    if (date1 < date2) {
+      dialogVisibleTip.value = "当前活动已结束";
+      dialogVisible.value = true;
+      //return
+    }
+  }
+  // 在线课 停用 -- 暂时没有在线课停用标记
+  if (d.type == 1) {
+    if (d.taskStatus == 1 || d.taskStatus == 2) {
+      // ElMessage.error("该任务无法学习，请联系管理员进行替换。")
+      dialogVisibleTip.value = "该任务无法学习，请联系管理员进行替换！";
+      dialogVisible.value = true;
+      return;
+    }
+  }
+  // 面授课 停用
+  if (d.type == 2) {
+    if (d.taskStatus == 1 || d.taskStatus == 2) {
+      // ElMessage.error("该任务无法学习，请联系管理员进行替换。")
+      dialogVisibleTip.value = "该任务无法学习，请联系管理员进行替换！";
+      dialogVisible.value = true;
+      return;
+    }
+  }
+
+  if (!types.value.path[d.type]) {
+    ElMessage.error("暂时未开放");
+    return;
+  }
+  if (d.type == 3 || d.type == 7) {
+    d.status !== 1 &&
+      request(STUDY_RECORD, {
+        studentId: data.value.userInfoBo.userId,
+        targetId: data.value.routerId,
+        logo: PROJECT,
+        stageOrChapterId: chapterOrStageId,
+        taskId: d.projectTaskId,
+      });
+  }
+
+  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.projectTaskId,
+          type: PROJECT,
+          infoId: data.value.projectId,
+          courseId: d.courseId,
+          pName: data.value.name,
+          sName,
+          chapterOrStageId,
+        },
+      });
+  } 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 + "-");
+}
+// 查询当前阶段所有任务是否都完成
+const queryAllStatus = (data) => {
+  // status === 1 已完成
+  console.log(data);
+  for (let i = 0; i < data.length; i++) {
+    if (data[i].status !== 1) {
+      return false;
+    }
+  }
+  return true;
+};
+</script>
 
 <style lang="scss">
 .projectdetails {
@@ -448,6 +780,12 @@
             position: relative;
             height: 72px;
             border-bottom: 0.5px solid rgba(241, 242, 243, 1);
+
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            flex-wrap: wrap;
+
             .issue {
               width: 100%;
               display: flex;
@@ -455,45 +793,64 @@
               line-height: 30.29px;
               color: rgba(110, 123, 132, 1);
             }
-            .tag1 {
-              position: absolute;
-              left: 0;
-              bottom: 14.5px;
+            .coursetag {
               display: flex;
-              justify-content: center;
-              align-items: center;
-              font-size: 13px;
-              color: rgba(203, 128, 231, 1);
-              border: 0.5px solid rgba(203, 128, 231, 1);
-              line-height: 19.2px;
-              //padding: 0 10px;
+              flex-wrap: wrap;
             }
-            .tag2 {
-              position: absolute;
-              left: 92px;
-              bottom: 14.5px;
+            .goclass {
+              width: 63px;
+              height: 23px;
+              background: #2478ff;
+              box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
+              border-radius: 4px;
+              font-size: 14px;
+              font-weight: 800;
+              color: #ffffff;
               display: flex;
-              justify-content: center;
               align-items: center;
-              font-size: 13px;
-              color: rgba(136, 157, 238, 1);
-              border: 0.5px solid rgba(136, 157, 238, 1);
-              line-height: 19.2px;
-              //padding: 0 10px;
-            }
-            .tag3 {
-              position: absolute;
-              left: 0;
-              bottom: 14.5px;
-              display: flex;
               justify-content: center;
-              align-items: center;
-              font-size: 13px;
-              color: rgba(104, 206, 234, 1);
-              border: 0.5px solid rgba(104, 206, 234, 1);
-              line-height: 19.2px;
-              //padding: 0 10px;
+              // margin-right: 37px;
+              cursor: pointer;
             }
+            // .tag1 {
+            //   position: absolute;
+            //   left: 0;
+            //   bottom: 14.5px;
+            //   display: flex;
+            //   justify-content: center;
+            //   align-items: center;
+            //   font-size: 13px;
+            //   color: rgba(203, 128, 231, 1);
+            //   border: 0.5px solid rgba(203, 128, 231, 1);
+            //   line-height: 19.2px;
+            //   //padding: 0 10px;
+            // }
+            // .tag2 {
+            //   position: absolute;
+            //   left: 92px;
+            //   bottom: 14.5px;
+            //   display: flex;
+            //   justify-content: center;
+            //   align-items: center;
+            //   font-size: 13px;
+            //   color: rgba(136, 157, 238, 1);
+            //   border: 0.5px solid rgba(136, 157, 238, 1);
+            //   line-height: 19.2px;
+            //   //padding: 0 10px;
+            // }
+            // .tag3 {
+            //   position: absolute;
+            //   left: 0;
+            //   bottom: 14.5px;
+            //   display: flex;
+            //   justify-content: center;
+            //   align-items: center;
+            //   font-size: 13px;
+            //   color: rgba(104, 206, 234, 1);
+            //   border: 0.5px solid rgba(104, 206, 234, 1);
+            //   line-height: 19.2px;
+            //   //padding: 0 10px;
+            // }
           }
         }
       }