From 64ca9593b1d9c7626c9a8866247300df238f288a Mon Sep 17 00:00:00 2001
From: Pengxiansen <2422914688@qq.com>
Date: Mon, 17 Feb 2025 16:36:36 +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/views/growth/growthList.vue    |   9 +-
 src/views/growth/growthRoadmap.vue | 295 +++++++++++++----------------
 2 files changed, 134 insertions(+), 170 deletions(-)

diff --git a/src/views/growth/growthList.vue b/src/views/growth/growthList.vue
index b5cd5a4..e4f4ca3 100644
--- a/src/views/growth/growthList.vue
+++ b/src/views/growth/growthList.vue
@@ -4,6 +4,8 @@
       style="width: 100%; height: 290px"
       src="@/assets/image/growth/bg.png"
     />
+
+    
     <div class="nav">
       <div class="tabs">
         <div
@@ -80,7 +82,7 @@
 
     <template v-if="stageProcessList && stageProcessList.length">
       <div class="growth-list-content" v-loading="loading">
-        <el-row :gutter="24">
+        <el-row :gutter="40">
           <el-col
             style="margin-bottom: 21px"
             :span="6"
@@ -271,9 +273,6 @@ const { commit, dispatch, state } = useStore();
 const userInfo = computed(() => state.userInfo);
 
 const errorData = computed(() => state.projectError);
-const lastLearned = computed(() =>
-  stageProcessList.value.find((item) => item.lastStudy)
-);
 
 const getAssetsFile = (url) => {
   return new URL(`../../assets/image/growth/type${url}.png`, import.meta.url)
@@ -284,7 +283,7 @@ const templateClick = () => {
   router.push({
     path: "/growthRoadmap",
     query: {
-      routerId: routerId,
+      routerId: selectGrowth.value.id,
     },
   });
 };
diff --git a/src/views/growth/growthRoadmap.vue b/src/views/growth/growthRoadmap.vue
index c83e0b4..d092fbd 100644
--- a/src/views/growth/growthRoadmap.vue
+++ b/src/views/growth/growthRoadmap.vue
@@ -4,164 +4,138 @@
       style="width: 100%; height: 290px"
       src="@/assets/image/growth/bg.png"
     />
-    <div class="nav" :style="{ transform: 'scale(' + transformSize + ')' }">
-      <div class="tabs">
-        <div
-          class="tabs-item"
-          :class="queryParams.type == 1 ? 'active' : ''"
-          @click="tabClick(1)"
-        >
-          <div class="tabs-text">我的必修</div>
-          <div class="tabs-line"></div>
-        </div>
-        <div
-          class="tabs-item"
-          :class="queryParams.type == 2 ? 'active' : ''"
-          @click="tabClick(2)"
-        >
-          <div class="tabs-text">我的选修</div>
-          <div class="tabs-line"></div>
+    <div
+      :style="{ transform: 'scale(' + transformSize + ')' }"
+      style="transform-origin: top left"
+    >
+      <div class="nav">
+        <div class="tabs">
+          <div
+            class="tabs-item"
+            :class="queryParams.type == 1 ? 'active' : ''"
+            @click="tabClick(1)"
+          >
+            <div class="tabs-text">我的必修</div>
+            <div class="tabs-line"></div>
+          </div>
+          <div
+            class="tabs-item"
+            :class="queryParams.type == 2 ? 'active' : ''"
+            @click="tabClick(2)"
+          >
+            <div class="tabs-text">我的选修</div>
+            <div class="tabs-line"></div>
+          </div>
         </div>
       </div>
-      <!-- <div style="display: flex">
-        <el-select
-          style="width: 230px"
-          :teleported="false"
-          v-model="queryParams.completionStatus"
-          placeholder="搜索学习状态"
-        >
-          <el-option label="全部" value="3"> </el-option>
-          <el-option label="未开始" value="0"> </el-option>
-          <el-option label="已完成" value="1"> </el-option>
-          <el-option label="进行中" value="2"> </el-option>
-        </el-select>
-        <el-input
-          style="margin-left: 9px; width: 230px"
-          v-model="queryParams.taskName"
-          placeholder="搜索名称"
-          clearable
-        />
-        <el-button
-          icon="Search"
-          style="margin-left: 20px"
-          type="primary"
-          @click="getList"
-          >搜索</el-button
-        >
-        <el-button icon="Refresh" style="margin-left: 20px" @click="refresh"
-          >清除</el-button
-        >
-      </div> -->
-    </div>
-    <div
-      class="growth-path-container"
-      :style="{ transform: 'scale(' + transformSize + ')' }"
-    >
-      <div class="growth-name-type">
-        <el-dropdown :teleported="false" trigger="click" ref="dropdownRef">
-          <div class="growth-name">
-            <div>{{ selectGrowth?.growthName }}</div>
-            <div style="margin-left: 20px; cursor: pointer">
-              <el-icon color="#000" size="16"><CaretBottom /></el-icon>
+      <div class="growth-path-container">
+        <div class="growth-name-type">
+          <el-dropdown :teleported="false" trigger="click" ref="dropdownRef">
+            <div class="growth-name">
+              <div>{{ selectGrowth?.growthName }}</div>
+              <div style="margin-left: 20px; cursor: pointer">
+                <el-icon color="#000" size="16"><CaretBottom /></el-icon>
+              </div>
+            </div>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item
+                  :disabled="selectGrowth.id == item.id"
+                  v-for="item of growthList"
+                >
+                  <div @click="select(item)">{{ item.growthName }}</div>
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+          <div class="growth-type">
+            <div class="type-item-list" @click="templateClick">列表</div>
+            <div class="type-item-path">路径</div>
+          </div>
+        </div>
+
+        <template v-if="stageProcessList && stageProcessList.length">
+          <div class="path-container">
+            <div
+              :class="
+                (item.position + 1) % 2 || item.position + 1 == 15
+                  ? 'path-item-bottom'
+                  : 'path-item-top'
+              "
+              @click="toFinish(item)"
+              :style="point[item.position]"
+              v-for="(item, index) of stageProcessList"
+            >
+              <template
+                v-if="(item.position + 1) % 2 || item.position + 1 == 15"
+              >
+                <div class="item-link">
+                  <div class="circle"></div>
+                  <div class="line"></div>
+                </div>
+                <div>
+                  <div class="triangle"></div>
+                  <div class="item-name">{{ item.taskName }}</div>
+                </div>
+                <div class="f-a-c" style="margin-top: 9px">
+                  <div class="item-progress">
+                    <el-progress
+                      :percentage="parseInt(item.progress)"
+                      :show-text="false"
+                      :stroke-width="6"
+                      :color="stateData(item).progressColor"
+                    />
+                  </div>
+
+                  <div
+                    class="item-state"
+                    :style="{
+                      color: stateData(item).color,
+                      background: stateData(item).bgColor,
+                    }"
+                  >
+                    {{ stateData(item).text }}
+                  </div>
+                </div>
+              </template>
+              <template v-else>
+                <div>
+                  <div class="item-name">{{ item.taskName }}</div>
+                  <div class="triangle"></div>
+                </div>
+                <div class="f-a-c">
+                  <div class="item-progress">
+                    <el-progress
+                      :percentage="parseInt(item.progress)"
+                      :show-text="false"
+                      :stroke-width="6"
+                      :color="stateData(item).progressColor"
+                    />
+                  </div>
+
+                  <div
+                    class="item-state"
+                    :style="{
+                      color: stateData(item).color,
+                      background: stateData(item).bgColor,
+                    }"
+                  >
+                    {{ stateData(item).text }}
+                  </div>
+                </div>
+                <div class="item-link">
+                  <div class="line"></div>
+                  <div class="circle"></div>
+                </div>
+              </template>
             </div>
           </div>
-          <template #dropdown>
-            <el-dropdown-menu>
-              <el-dropdown-item
-                :disabled="selectGrowth.id == item.id"
-                v-for="item of growthList"
-              >
-                <div @click="select(item)">{{ item.growthName }}</div>
-              </el-dropdown-item>
-            </el-dropdown-menu>
-          </template>
-        </el-dropdown>
-        <div class="growth-type">
-          <div class="type-item-list" @click="templateClick">列表</div>
-          <div class="type-item-path">路径</div>
-        </div>
+        </template>
+        <template v-else>
+          <el-empty description="暂无数据" />
+        </template>
       </div>
-
-      <template v-if="stageProcessList && stageProcessList.length">
-        <div class="path-container">
-          <div
-            :class="
-              (item.position + 1) % 2 || item.position + 1 == 15
-                ? 'path-item-bottom'
-                : 'path-item-top'
-            "
-            @click="toFinish(item)"
-            :style="point[item.position]"
-            v-for="(item, index) of stageProcessList"
-          >
-            <template v-if="(item.position + 1) % 2 || item.position + 1 == 15">
-              <div class="item-link">
-                <div class="circle"></div>
-                <div class="line"></div>
-              </div>
-              <div>
-                <div class="triangle"></div>
-                <div class="item-name">{{ item.taskName }}</div>
-              </div>
-              <div class="f-a-c" style="margin-top: 9px">
-                <div class="item-progress">
-                  <el-progress
-                    :percentage="parseInt(item.progress)"
-                    :show-text="false"
-                    :stroke-width="6"
-                    :color="stateData(item).progressColor"
-                  />
-                </div>
-
-                <div
-                  class="item-state"
-                  :style="{
-                    color: stateData(item).color,
-                    background: stateData(item).bgColor,
-                  }"
-                >
-                  {{ stateData(item).text }}
-                </div>
-              </div>
-            </template>
-            <template v-else>
-              <div>
-                <div class="item-name">{{ item.taskName }}</div>
-                <div class="triangle"></div>
-              </div>
-              <div class="f-a-c">
-                <div class="item-progress">
-                  <el-progress
-                    :percentage="parseInt(item.progress)"
-                    :show-text="false"
-                    :stroke-width="6"
-                    :color="stateData(item).progressColor"
-                  />
-                </div>
-
-                <div
-                  class="item-state"
-                  :style="{
-                    color: stateData(item).color,
-                    background: stateData(item).bgColor,
-                  }"
-                >
-                  {{ stateData(item).text }}
-                </div>
-              </div>
-              <div class="item-link">
-                <div class="line"></div>
-                <div class="circle"></div>
-              </div>
-            </template>
-          </div>
-        </div>
-      </template>
-      <template v-else>
-        <el-empty description="暂无数据" />
-      </template>
     </div>
-
     <!-- 弹框提示信息 -->
     <el-dialog
       title=""
@@ -361,7 +335,6 @@ const point = [
     top: "267px",
     right: "1551px",
   },
-
   {
     top: "650px",
     right: "1660px",
@@ -372,9 +345,7 @@ const { commit, dispatch, state } = useStore();
 const userInfo = computed(() => state.userInfo);
 
 const errorData = computed(() => state.projectError);
-const lastLearned = computed(() =>
-  stageProcessList.value.find((item) => item.lastStudy)
-);
+
 
 const stateData = computed(() => {
   return (item) => {
@@ -423,7 +394,7 @@ const templateClick = () => {
   router.push({
     path: "/growthList",
     query: {
-      routerId: routerId,
+      routerId: selectGrowth.value.id,
     },
   });
 };
@@ -445,12 +416,6 @@ const tabClick = (type, status) => {
 // 学习任务列表
 const stageProcessList = ref([]);
 
-// 清除
-const refresh = () => {
-  queryParams.taskName = "";
-  queryParams.completionStatus = "";
-  getList();
-};
 // 是否加载数据中
 const loading = ref(false);
 const getList = () => {
@@ -464,7 +429,7 @@ const getList = () => {
   }
   loading.value = true;
   growthRequest(PROFESSIONAL_STUDENT_TASKLIST, params).then((res) => {
-    let newData = res.data.slice(0, 15);
+    let newData = res.data.slice(0, 15).reverse()
     // 默认第一个在第一点位
     let num = 15 / newData.length;
     stageProcessList.value = newData.map((item, index) => {
@@ -793,7 +758,7 @@ function toOffcoursePlanPage(id) {
     height: 80px;
     background: #ffffff;
     padding: 0 80px 0 62px;
-    transform-origin: top left;
+    width: 1920px;
   }
   .growth-name-type {
     display: flex;