From 8e96cf016963c3eed7aed645df3fc6f46c3e0f7f Mon Sep 17 00:00:00 2001
From: Pengxiansen <2422914688@qq.com>
Date: Wed, 26 Feb 2025 00:00:57 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/image/growth/listJiaoBiao.png   | Bin 0 -> 423 bytes
 src/views/growth/components/gowthPath2.vue |  53 ++++++++++--
 src/views/growth/growthDetails.vue         |  90 +++++++++++++++++----
 src/views/growth/growthPath.vue            |  82 +++++++++++++++++--
 vite.config.js                             |   3 +-
 5 files changed, 198 insertions(+), 30 deletions(-)
 create mode 100644 src/assets/image/growth/listJiaoBiao.png

diff --git a/src/assets/image/growth/listJiaoBiao.png b/src/assets/image/growth/listJiaoBiao.png
new file mode 100644
index 0000000000000000000000000000000000000000..7eef55a665bca0c3f88da70b78af51e194784337
GIT binary patch
literal 423
zcmV;Y0a*TtP)<h;3K|Lk000e1NJLTq000{R001Qj1^@s6v!s%U00001b5ch_0Itp)
z=>Px$VM#<mR9HvtltD`ZQ51#Gb*6Gsn<D5RL?9uwEcIsu6+%!@k((?C+}S3G5T_!7
zb}ehys$B#sLJ+N6w<r=OlOQ4I-5AJ<$sCoT)w|nw@A=^4@Th9U8UHjSVP2S)8ojUx
zsZnZdX+Rc47DN`rlMYCYQe*c9<VXDNj&ZFhv|<U7257nysU2u!0U#IB-qN&u^KL_4
zjM%CVlx4u*4zyiZnOV&1sp5q*^f@~@p(yGpfKfM~D~y0kA0rV+<sbeEEAK=@y?wr8
z0%lqPTfyoC-U?O<+mwN=&~+-g*pfnIFrYPCZVF?@J&~9jSSuD>362HRh(}cL89-ys
z+utz8IdgqMUoV-Rf*SiznQ+iQID7;k@iXHKMueIW*wj<`gKi<tyQ&dgWY9i=`t7$*
z7~ffzH9NFXy7daw$T9b(##L7AwuY%{#7=5GYH}ob_3AaKk@vV8323T*_yGb8y*rj&
RWuyQA002ovPDHLkV1hswvB>}c

literal 0
HcmV?d00001

diff --git a/src/views/growth/components/gowthPath2.vue b/src/views/growth/components/gowthPath2.vue
index 617205d..d90e8b7 100644
--- a/src/views/growth/components/gowthPath2.vue
+++ b/src/views/growth/components/gowthPath2.vue
@@ -3,7 +3,7 @@
     <div
       class="gowth-path2"
       :style="{
-        height: position(stageProcessList.length - 1).top,
+        height: `${position(stageProcessList.length - 1).topNum + 10}px`,
       }"
     >
       <div
@@ -23,9 +23,33 @@
             ></div>
           </div>
         </template>
-        <div>
+        <div
+          style="display: flex; flex-direction: column"
+          :style="{
+            alignItems: position(index).align,
+          }"
+        >
           <div>
-            <div class="item-name">{{ item.taskName }}</div>
+            <div class="item-name">
+              <div
+                style="
+                  display: inline-block;
+                  border-radius: 50%;
+                  line-height: 16px;
+                  text-align: center;
+                  margin-right: 6px;
+                  width: 16px;
+                  height: 16px;
+                  font-size: 12px;
+                  font-weight: 700;
+                  background-color: #fff;
+                  color: #0077ec;
+                "
+              >
+                {{ stageProcessList.length - index }}
+              </div>
+              <div style="display: inline">{{ item.taskName }}</div>
+            </div>
             <div class="triangle"></div>
           </div>
           <div class="f-a-c" style="justify-content: flex-end">
@@ -78,6 +102,7 @@ const point = [
   {
     top: 51,
     right: 167,
+    align: "end",
   },
   {
     top: 144,
@@ -86,6 +111,7 @@ const point = [
   {
     top: 234,
     right: 146,
+    align: "end",
   },
   {
     top: 339,
@@ -94,6 +120,7 @@ const point = [
   {
     top: 414,
     right: 121,
+    align: "end",
   },
   {
     top: 535,
@@ -102,6 +129,7 @@ const point = [
   {
     top: 635,
     right: 53,
+    align: "end",
   },
   {
     top: 723,
@@ -110,17 +138,18 @@ const point = [
   {
     top: 804,
     right: 53,
+    align: "end",
   },
 ];
 
 // 基础配置项
 const widthConfig = [
   "0px",
-  "0px",
+  "20px",
   "64px",
   "40px",
   "80px",
-  "20px",
+  "40px",
   "64px",
   "80px",
   "45px",
@@ -143,6 +172,8 @@ const position = (index) => {
   return {
     top: `${multiple * (853 + 25) + point[num2].top}px`,
     right: `${point[num2].right}px`,
+    topNum: multiple * (853 + 25) + point[num2].top,
+    align: point[num2].align,
   };
 };
 // 基础配置项
@@ -176,6 +207,13 @@ const stateData = computed(() => {
         bgColor: "rgba(242, 144, 61, 0.2)",
         progressColor: "#F2903D",
       };
+    } else if (item.completionStatus === "3") {
+      return {
+        text: "已结束",
+        color: "#666666",
+        bgColor: "rgba(102, 102, 102, 0.2)",
+        progressColor: "#AEB3B8",
+      };
     }
   };
 });
@@ -197,6 +235,9 @@ const toFinish = (item) => {
   background-image: url(@/assets/image/growth/path2.png);
   background-size: 100%;
 
+  :deep(.el-progress-bar__outer){
+    background-color: #AEB3B8;
+  }
   .path-item {
     position: absolute;
     display: flex;
@@ -244,7 +285,7 @@ const toFinish = (item) => {
       border-radius: 4px;
       font-size: 12px;
       color: #ffffff;
-      padding: 8px 5px 9px 10px;
+      padding: 8px 8px;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
diff --git a/src/views/growth/growthDetails.vue b/src/views/growth/growthDetails.vue
index a95ce3a..da02fcf 100644
--- a/src/views/growth/growthDetails.vue
+++ b/src/views/growth/growthDetails.vue
@@ -45,6 +45,9 @@
         <img class="icon" src="@/assets/image/growth/qiehuan.png" />
         <template #dropdown>
           <el-dropdown-menu>
+            <el-dropdown-item @click="tabClick(null, '4')"
+              >全部</el-dropdown-item
+            >
             <el-dropdown-item @click="tabClick(null, '0')"
               >未开始</el-dropdown-item
             >
@@ -78,15 +81,16 @@
               style="width: 100%; height: 100%"
               :src="getAssetsFile(item.courseType)"
             />
+            <div class="task-img-icon">{{ key + 1 }}</div>
           </div>
-          <div>
+          <div style="margin-left: 11px">
             <div style="display: flex; align-items: center">
               <div class="task-type">
                 {{ TASK_TYPES.typeName[item.courseType] }}
               </div>
               <div class="task-name">{{ item.taskName }}</div>
             </div>
-            <div
+            <!-- <div
               class="task-state"
               :style="{
                 color:
@@ -104,20 +108,37 @@
                   ? "已完成"
                   : "进行中"
               }}
-            </div>
+            </div> -->
+
+            <template v-if="item.completionStatus === '0'">
+              <div
+                class="task-state"
+                :style="{
+                  color: item.canLearn ? '#F2903D' : '#c4c2c2',
+                }"
+              >
+                未开始
+              </div>
+            </template>
+            <template v-if="item.completionStatus === '1'">
+              <div class="task-state" style="color: #8bc34a">已完成</div>
+            </template>
+            <template v-if="item.completionStatus === '2'">
+              <div class="task-state" style="color: #f2903d">进行中</div>
+            </template>
+            <template v-if="item.completionStatus === '3'">
+              <div class="task-state" style="color: #c4c2c2">已结束</div>
+            </template>
+            <template v-if="item.completionStatus === '10'">
+              <div class="task-state" style="color: #c4c2c2">未解锁</div>
+            </template>
             <div style="display: flex; align-items: center">
               <div style="flex: 1">
                 <el-progress
                   :percentage="item.progress"
                   :show-text="false"
                   :stroke-width="3"
-                  :color="
-                    item.completionStatus === '0'
-                      ? '#C4C2C2'
-                      : item.completionStatus === '1'
-                      ? '#0077EC'
-                      : '#FF8726'
-                  "
+                  :color="item.progress == 100 ? '#8BC34A' : '#F2903D'"
                 />
               </div>
               <div class="progress-text">{{ item.progress }}%</div>
@@ -205,7 +226,7 @@ import dayjs from "dayjs";
 import { useStore } from "vuex";
 import { changeTime } from "@/api/method";
 const {
-  query: { courseId, routerId, type, infoId, chapterOrStageId, id },
+  query: { routerId, type },
 } = useRoute();
 const router = useRouter();
 const { commit, dispatch, state } = useStore();
@@ -224,6 +245,9 @@ const tabClick = (type, status) => {
   if (status) {
     queryParams.completionStatus = status;
   }
+  if (status == 4) {
+    queryParams.completionStatus = "";
+  }
   getList();
 };
 
@@ -241,6 +265,9 @@ const stageProcessList = ref([]);
 const anchorNum = ref(0);
 onMounted(() => {
   dispatch("getGrowthInfo", { routerId, type });
+  if (type) {
+    queryParams.type = type;
+  }
   getList();
 });
 
@@ -274,8 +301,16 @@ const openCourseIdList = ref([]);
 const userInfo = computed(() => store.state.userInfo);
 
 async function toFinish(d) {
+  if (!d.canLearn) {
+    ElMessage.warning(`学习任务暂未开始`);
+    return;
+  }
+  if (d.completionStatus == 3) {
+    ElMessage.warning(`学习任务已结束无法学习`);
+    return;
+  }
   if (d.completionStatus == 10) {
-    ElMessage.warning("当前未解锁");
+    ElMessage.warning(`请先完成“${d.superTaskName}”的学习任务`);
     return;
   }
   //更新学员当前任务
@@ -537,6 +572,7 @@ const toPath = () => {
     path: "/growthPath",
     query: {
       routerId,
+      type: queryParams.type,
     },
   });
 };
@@ -573,16 +609,31 @@ const toPath = () => {
         margin-left: 9px;
       }
       .task-img {
-        width: 110px;
-        height: 70px;
-        margin-right: 11px;
+        width: 121px;
         border-radius: 4px;
         overflow: hidden;
+        position: relative;
+      }
+      .task-img-icon {
+        position: absolute;
+        display: flex;
+        justify-content: center;
+        padding-top: 3px;
+        position: absolute;
+        color: #fff;
+        font-size: 12px;
+        box-sizing: border-box;
+        top: 0;
+        left: 10px;
+        background-image: url(@/assets/image/growth/listJiaoBiao.png);
+        background-size: 100% 100%;
+        width: 17px;
+        height: 25px;
       }
       .task-state {
         font-size: 13px;
-        margin-top: 11px;
-        margin-bottom: 13px;
+        margin-top: 7px;
+        margin-bottom: 17px;
       }
       .task-name {
         font-size: 14px;
@@ -637,6 +688,11 @@ const toPath = () => {
     align-items: center;
     height: 44px;
     .nav-title {
+      width: 300px;
+      text-align: center;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
       font-weight: 500;
       font-size: 18px;
       color: #ffffff;
diff --git a/src/views/growth/growthPath.vue b/src/views/growth/growthPath.vue
index b280e9a..1e9b5a1 100644
--- a/src/views/growth/growthPath.vue
+++ b/src/views/growth/growthPath.vue
@@ -45,6 +45,9 @@
         <img class="icon" src="@/assets/image/growth/qiehuan.png" />
         <template #dropdown>
           <el-dropdown-menu>
+            <el-dropdown-item @click="tabClick(null, '4')"
+              >全部</el-dropdown-item
+            >
             <el-dropdown-item @click="tabClick(null, '0')"
               >未开始</el-dropdown-item
             >
@@ -85,7 +88,26 @@
                   "
                 >
                   <div>
-                    <div class="item-name">{{ item.taskName }}</div>
+                    <div class="item-name">
+                      <div
+                        style="
+                          display: inline-block;
+                          border-radius: 50%;
+                          line-height: 16px;
+                          text-align: center;
+                          margin-right: 6px;
+                          width: 16px;
+                          height: 16px;
+                          font-size: 12px;
+                          font-weight: 700;
+                          background-color: #fff;
+                          color: #0077ec;
+                        "
+                      >
+                        {{ stageProcessList.length - index }}
+                      </div>
+                      <div style="display: inline">{{ item.taskName }}</div>
+                    </div>
                     <div class="triangle"></div>
                   </div>
                   <div class="f-a-c">
@@ -134,7 +156,26 @@
                   </div>
                   <div>
                     <div>
-                      <div class="item-name">{{ item.taskName }}</div>
+                      <div class="item-name">
+                        <div
+                          style="
+                            display: inline-block;
+                            border-radius: 50%;
+                            line-height: 16px;
+                            text-align: center;
+                            margin-right: 6px;
+                            width: 16px;
+                            height: 16px;
+                            font-size: 12px;
+                            font-weight: 700;
+                            background-color: #fff;
+                            color: #0077ec;
+                          "
+                        >
+                          {{ stageProcessList.length - index }}
+                        </div>
+                        <div style="display: inline">{{ item.taskName }}</div>
+                      </div>
                       <div class="triangle"></div>
                     </div>
                     <div class="f-a-c" style="justify-content: flex-end">
@@ -253,7 +294,7 @@ import dayjs from "dayjs";
 import { useStore } from "vuex";
 import { changeTime } from "@/api/method";
 const {
-  query: { courseId, routerId, type, infoId, chapterOrStageId, id },
+  query: { routerId, type },
 } = useRoute();
 const router = useRouter();
 const { commit, dispatch, state } = useStore();
@@ -272,6 +313,9 @@ const tabClick = (type, status) => {
   if (status) {
     queryParams.completionStatus = status;
   }
+  if (status == 4) {
+    queryParams.completionStatus = "";
+  }
   getList();
 };
 
@@ -290,6 +334,9 @@ onMounted(() => {
   updateWindowWidth(); // 初始化宽度
   window.addEventListener("resize", updateWindowWidth);
   dispatch("getGrowthInfo", { routerId, type });
+  if (type) {
+    queryParams.type = type;
+  }
   getList();
 });
 // 储存屏幕宽
@@ -309,7 +356,7 @@ const getList = () => {
     ...queryParams,
   }).then((res) => {
     if (growthInfo.value.template == 1) {
-      stageProcessList.value = res.data;
+      stageProcessList.value = res.data.reverse();
     } else {
       let newData = res.data.slice(0, 15).reverse();
       // 默认第一个在第一点位
@@ -486,12 +533,27 @@ const stateData = computed(() => {
         bgColor: "rgba(242, 144, 61, 0.2)",
         progressColor: "#F2903D",
       };
+    } else if (item.completionStatus === "3") {
+      return {
+        text: "已结束",
+        color: "#666666",
+        bgColor: "rgba(102, 102, 102, 0.2)",
+        progressColor: "#AEB3B8",
+      };
     }
   };
 });
 async function toFinish(d) {
+  if (!d.canLearn) {
+    ElMessage.warning(`学习任务暂未开始`);
+    return;
+  }
+  if (d.completionStatus == 3) {
+    ElMessage.warning(`学习任务已结束无法学习`);
+    return;
+  }
   if (d.completionStatus == 10) {
-    ElMessage.warning("当前未解锁");
+    ElMessage.warning(`请先完成“${d.superTaskName}”的学习任务`);
     return;
   }
   //更新学员当前任务
@@ -748,6 +810,7 @@ const toPath = () => {
     path: "/growthDetails",
     query: {
       routerId,
+      type: queryParams.type,
     },
   });
 };
@@ -770,7 +833,9 @@ const toPath = () => {
   :deep(input::placeholder) {
     color: #ffffff;
   }
-
+  :deep(.el-progress-bar__outer) {
+    background-color: #aeb3b8;
+  }
   .container {
     position: absolute;
     background-color: #ffffff;
@@ -927,6 +992,11 @@ const toPath = () => {
     align-items: center;
     height: 44px;
     .nav-title {
+      width: 300px;
+      text-align: center;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
       font-weight: 500;
       font-size: 18px;
       color: #ffffff;
diff --git a/vite.config.js b/vite.config.js
index f441e24..4b4a815 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -45,7 +45,8 @@ export default defineConfig(({ command, mode }) =>
       proxy: {
         // "/professional": {
 				// // target: 'http://192.168.237.141:32002',
-				// target: 'http://192.168.150.97:32002',
+				// // target: 'http://192.168.150.97:32002',
+        // target: 'http://192.168.66.211:32002',
 				// changeOrigin: true,
 			  // },
         "/growth": {