Merge remote-tracking branch 'yx/250207-growth-prod-master-zp' into dev0731

src/views/growth/components/roadmap1/index.vue

@@ -0,0 +1,318 @@
+<template>
+  <div
+    style="transform-origin: top left; width: 1920px; height: 1122px"
+    class="roadmap"
+  >
+    <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>
+  </div>
+</template>
+<script setup>
+import { computed } from "vue";
+const emit = defineEmits("click");
+const propas = defineProps({
+  stageProcessList: Array,
+});
+
+const point = [
+  {
+    top: "226px",
+    right: "128px",
+  },
+  {
+    top: 0,
+    right: "234px",
+  },
+  {
+    top: "347px",
+    right: "341px",
+  },
+  {
+    top: "92px",
+    right: "455px",
+  },
+  {
+    top: "443px",
+    right: "561px",
+  },
+  {
+    top: "155px",
+    right: "673px",
+  },
+  {
+    top: "512px",
+    right: "780px",
+  },
+  {
+    top: "200px",
+    right: "893px",
+  },
+  {
+    top: "565px",
+    right: "1000px",
+  },
+  {
+    top: "232px",
+    right: "1111px",
+  },
+  {
+    top: "602px",
+    right: "1220px",
+  },
+  {
+    top: "254px",
+    right: "1331px",
+  },
+  {
+    top: "630px",
+    right: "1440px",
+  },
+  {
+    top: "267px",
+    right: "1551px",
+  },
+  {
+    top: "650px",
+    right: "1660px",
+  },
+];
+const toFinish = (item) => {
+  emit("click", item);
+};
+const stateData = computed(() => {
+  return (item) => {
+    if (item.completionStatus === "10") {
+      return {
+        text: "未解锁",
+        color: "#666666",
+        bgColor: "rgba(102, 102, 102, 0.2)",
+        progressColor: "#AEB3B8",
+      };
+    } else if (item.completionStatus === "0") {
+      return {
+        text: "未开始",
+        color: "#666666",
+        bgColor: "rgba(102, 102, 102, 0.2)",
+        progressColor: "#AEB3B8",
+      };
+    } else if (item.completionStatus === "1") {
+      return {
+        text: "已完成",
+        color: "#0077EC",
+        bgColor: "rgba(0, 119, 236, 0.2)",
+        progressColor: "#0077EC",
+      };
+    } else if (item.completionStatus === "2") {
+      return {
+        text: "进行中",
+        color: "#F2903D",
+        bgColor: "rgba(242, 144, 61, 0.2)",
+        progressColor: "#F2903D",
+      };
+    }
+  };
+});
+</script>
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+.f-a-c {
+  display: flex;
+  align-items: center;
+}
+.roadmap {
+  background-image: url(@/assets/image/growth/path-bg.png);
+  background-size: 100%;
+  background-repeat: no-repeat;
+}
+.path-container {
+  position: relative;
+  width: 100%;
+  height: 659px;
+  margin-top: 53px;
+  background-image: url(@/assets/image/growth/path.png);
+  .path-item-bottom {
+    position: absolute;
+    width: 210px;
+    cursor: pointer;
+    .item-progress {
+      flex: 1;
+    }
+    .item-state {
+      width: 64px;
+      height: 24px;
+      border-radius: 6px;
+      text-align: center;
+      line-height: 24px;
+      margin-left: 5px;
+    }
+    .item-name {
+      display: inline-block;
+      max-width: 210px;
+      min-width: 80px;
+      background: linear-gradient(268deg, #3c65f5 0%, #4395f9 100%);
+      border-radius: 7px;
+      font-size: 16px;
+      color: #ffffff;
+      padding: 14px 10px 14px 15px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    .triangle {
+      width: 0px;
+      height: 0px;
+      border: 7px solid transparent;
+      border-bottom-color: #4391f8;
+      margin-left: 32px;
+      padding-top: 10px;
+    }
+    .item-link {
+      position: relative;
+      .line {
+        width: 2px;
+        height: 138px;
+        margin-left: 39px;
+        background: linear-gradient(180deg, #ffffff 0%, #0077ec 65%);
+        border-image: linear-gradient(180deg, #ffffff, #0077ec) 10 10;
+      }
+      .circle {
+        width: 14px;
+        height: 14px;
+        background: #ffffff;
+        border-radius: 50%;
+        border: 3px solid #0077ec;
+        position: absolute;
+        top: 0;
+        left: 30px;
+      }
+    }
+  }
+  .path-item-top {
+    position: absolute;
+    width: 210px;
+    cursor: pointer;
+    .item-progress {
+      flex: 1;
+    }
+    .item-state {
+      width: 64px;
+      height: 24px;
+      border-radius: 6px;
+      text-align: center;
+      line-height: 24px;
+      margin-left: 5px;
+    }
+    .item-name {
+      max-width: 210px;
+      min-width: 80px;
+      display: inline-block;
+      background: linear-gradient(268deg, #3c65f5 0%, #4395f9 100%);
+      border-radius: 7px;
+      font-size: 16px;
+      color: #ffffff;
+      padding: 14px 10px 14px 15px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    .triangle {
+      width: 0px;
+      height: 0px;
+      border: 7px solid transparent;
+      border-top-color: #4391f8;
+      margin-left: 32px;
+    }
+    .item-link {
+      position: relative;
+      .line {
+        margin-left: 39px;
+        width: 2px;
+        height: 210px;
+        background: linear-gradient(0deg, #ffffff 0%, #0077ec 65%);
+        border-image: linear-gradient(0deg, #ffffff, #0077ec) 10 10;
+      }
+      .circle {
+        width: 14px;
+        height: 14px;
+        background: #ffffff;
+        border-radius: 50%;
+        border: 3px solid #0077ec;
+        position: absolute;
+        bottom: 0;
+        left: 30px;
+      }
+    }
+  }
+}
+</style>

src/views/growth/components/roadmap2/index.vue

@@ -0,0 +1,359 @@
+<template>
+  <div
+    style="transform-origin: top left; width: 1920px; height: 1122px"
+    class="roadmap"
+  >
+    <el-scrollbar height="1122px">
+      <div
+        class="path-container"
+        :style="{
+          height: `${Number(position(stageProcessList.length - 1).topNum) + 100}px`,
+        }"
+      >
+        <div
+          class="path-item"
+          @click="toFinish(item)"
+          :style="position(index)"
+          v-for="(item, index) of stageProcessList"
+        >
+          <template v-if="leftOfRight(index) === 'right'">
+            <div class="circle-right">
+              <div></div>
+            </div>
+          </template>
+          <div class="item-container">
+            <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>
+          </div>
+          <template v-if="leftOfRight(index) === 'left'">
+            <div class="circle-left">
+              <div></div>
+            </div>
+          </template>
+        </div>
+      </div>
+    </el-scrollbar>
+  </div>
+</template>
+<script setup>
+import { computed } from "vue";
+const emit = defineEmits("toFinish");
+const propas = defineProps({
+  stageProcessList: Array,
+});
+let left = [1, 2, 3, 7, 8, 11, 16, 17, 22, 25, 27, 30, 32];
+let right = [
+  0, 4, 5, 6, 9, 10, 12, 13, 14, 15, 18, 19, 20, 21, 23, 24, 26, 28, 29, 31, 33,
+  34, 35,
+];
+const leftOfRight = (index) => {
+  if (left.includes(index % 35)) {
+    return "left";
+  }
+  if (right.includes(index % 35)) {
+    return "right";
+  }
+};
+const position = (index) => {
+  if (index < 0) {
+    return {
+      top: `0px`,
+      right: `0px`,
+      topNum: 0,
+    };
+  }
+  let num = index / 35;
+  // 获取倍数
+  let multiple = num < 1 ? 0 : Number(Math.floor(num));
+
+  let num2 = index % 35;
+
+  return {
+    top: `${multiple * (5613 + 400) + Number(point[num2].top)}px`,
+    right: `${point[num2].right}px`,
+    topNum: `${multiple * (5613 + 400) + Number(point[num2].top)}`,
+  };
+};
+
+const point = [
+  {
+    top: "-57",
+    right: "55",
+  },
+  {
+    top: "-1",
+    right: "709",
+  },
+  {
+    top: "108",
+    right: "1034",
+  },
+  {
+    top: "241",
+    right: "1021",
+  },
+  {
+    top: "281",
+    right: "521",
+  },
+  {
+    top: "446",
+    right: "176",
+  },
+  {
+    top: "561",
+    right: "435",
+  },
+  {
+    top: "598",
+    right: "1023",
+  },
+  {
+    top: "702",
+    right: "1452",
+  },
+  {
+    top: "902",
+    right: "1040",
+  },
+  {
+    top: "1102",
+    right: "540",
+  },
+  {
+    top: "1227",
+    right: "1140",
+  },
+  {
+    top: "1500",
+    right: "1640",
+  },
+  {
+    top: "1644",
+    right: "1200",
+  },
+  {
+    top: "1760",
+    right: "653",
+  },
+  {
+    top: "1872",
+    right: "202",
+  },
+  {
+    top: "2072",
+    right: "585",
+  },
+  {
+    top: "2131",
+    right: "1106",
+  },
+  {
+    top: "2340",
+    right: "1533",
+  },
+  {
+    top: "2545",
+    right: "1033",
+  },
+  {
+    top: "2627",
+    right: "597",
+  },
+  {
+    top: "2767",
+    right: "67",
+  },
+  {
+    top: "2946",
+    right: "767",
+  },
+  {
+    top: "3161",
+    right: "1184",
+  },
+  {
+    top: "3406",
+    right: "484",
+  },
+  {
+    top: "3679",
+    right: "-11",
+  },
+  {
+    top: "3830",
+    right: "322",
+  },
+
+  {
+    top: "3882",
+    right: "950",
+  },
+  {
+    top: "4049",
+    right: "1383",
+  },
+  {
+    top: "4249",
+    right: "492",
+  },
+  {
+    top: "4423",
+    right: "151",
+  },
+  {
+    top: "4744",
+    right: "501",
+  },
+  {
+    top: "4834",
+    right: "1101",
+  },
+  {
+    top: "5066",
+    right: "1490",
+  },
+  {
+    top: "5400",
+    right: "790",
+  },
+  {
+    top: "5613",
+    right: "50",
+  },
+];
+const toFinish = (item) => {
+    emit("toFinish", item);
+};
+const stateData = computed(() => {
+  return (item) => {
+    if (item.completionStatus === "10") {
+      return {
+        text: "未解锁",
+        color: "#666666",
+        bgColor: "rgba(102, 102, 102, 0.2)",
+        progressColor: "#AEB3B8",
+      };
+    } else if (item.completionStatus === "0") {
+      return {
+        text: "未开始",
+        color: "#666666",
+        bgColor: "rgba(102, 102, 102, 0.2)",
+        progressColor: "#AEB3B8",
+      };
+    } else if (item.completionStatus === "1") {
+      return {
+        text: "已完成",
+        color: "#0077EC",
+        bgColor: "rgba(0, 119, 236, 0.2)",
+        progressColor: "#0077EC",
+      };
+    } else if (item.completionStatus === "2") {
+      return {
+        text: "进行中",
+        color: "#F2903D",
+        bgColor: "rgba(242, 144, 61, 0.2)",
+        progressColor: "#F2903D",
+      };
+    }
+  };
+});
+</script>
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+.f-a-c {
+  display: flex;
+  align-items: center;
+}
+.roadmap {
+  background-image: url(@/assets/image/growth/path-bg.png);
+  background-size: 100%;
+  background-repeat: no-repeat;
+}
+.path-container {
+  position: relative;
+  width: 100%;
+  min-height: 200px;
+  margin-top: 100px;
+  margin-bottom: 50px;
+  background-image: url(@/assets/image/growth/path2.png);
+  background-size: 100%;
+  .path-item {
+    position: absolute;
+
+    display: flex;
+    align-items: flex-end;
+    cursor: pointer;
+    .item-container {
+      width: 220px;
+    }
+    .item-progress {
+      flex: 1;
+    }
+    .item-state {
+      width: 64px;
+      height: 24px;
+      border-radius: 6px;
+      text-align: center;
+      line-height: 24px;
+      margin-left: 5px;
+    }
+    .item-name {
+      display: inline-block;
+      max-width: 210px;
+      min-width: 80px;
+      background: linear-gradient(268deg, #3c65f5 0%, #4395f9 100%);
+      border-radius: 7px;
+      font-size: 16px;
+      color: #ffffff;
+      padding: 14px 10px 14px 15px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    .circle-left,
+    .circle-right {
+      width: 42px;
+      height: 42px;
+      background: rgba(64, 158, 255, 0.2);
+      border-radius: 50%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      div {
+        width: 30px;
+        height: 30px;
+        background: #0077ec;
+        border-radius: 50%;
+      }
+    }
+    .circle-left {
+      margin-left: 30px;
+    }
+    .circle-right {
+      margin-right: 30px;
+    }
+  }
+}
+</style>

src/views/growth/growthList.vue

@@ -4,8 +4,26 @@
       style="width: 100%; height: 290px"
       src="@/assets/image/growth/bg.png"
     />
-
-    
+    <div class="nav-title">
+      <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="#fff" size="24"><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>
     <div class="nav">
       <div class="tabs">
         <div
@@ -55,77 +73,225 @@
         >
       </div>
     </div>
-    <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>
+      <div class="growth-name-type">
+        <div class="growth-type">
+          <div class="type-item-list">列表</div>
+          <div class="type-item-path" @click="templateClick">路径</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">列表</div>
-        <div class="type-item-path" @click="templateClick">路径</div>
       </div>
-    </div>
 
-    <template v-if="stageProcessList && stageProcessList.length">
-      <div class="growth-list-content" v-loading="loading">
-        <el-row :gutter="40">
-          <el-col
-            style="margin-bottom: 21px"
-            :span="6"
-            v-for="(value, index) in stageProcessList"
-          >
-            <div class="list-item" @click="toFinish(value)">
-              <div class="item-img">
+      <div style="display: flex">
+        <template v-if="stageProcessList && stageProcessList.length">
+          <div class="growth-list-content" v-loading="loading">
+            <el-row>
+              <el-col :span="24" v-for="(value, index) in stageProcessList">
+                <div class="list-item">
+                  <div class="item-img">
+                    <img
+                      style="width: 100%; height: 100%"
+                      :src="getAssetsFile(value.courseType)"
+                    />
+                  </div>
+                  <div class="item-content">
+                    <div>
+                      <div class="item-name">
+                        {{ value.taskName }}
+                      </div>
+                      <div class="item-task-type">
+                        {{ TASK_TYPES.typeName[value.courseType] }}
+                      </div>
+                    </div>
+                    <div>
+                      <div class="item-progress">
+                        <el-progress
+                          :percentage="parseInt(value.progress)"
+                          :show-text="false"
+                          :stroke-width="4"
+                          :color="value.progress == 100 ? '#0077EC' : '#F2903D'"
+                        />
+                      </div>
+                      <div class="item-time">
+                        <div>{{ `已完成 ${value.progress}%` }}</div>
+                        <div style="color: #999999">
+                          {{ `${value.createTime} 更新` }}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="item-button">
+                    <template v-if="value.completionStatus === '10'">
+                      <div @click="toFinish(value)" style="background: #999">
+                        未解锁
+                      </div>
+                    </template>
+                    <template
+                      v-if="
+                        value.completionStatus === '0' ||
+                        value.completionStatus === '2'
+                      "
+                    >
+                      <div @click="toFinish(value)" style="background: #f2903d">
+                        {{ TASK_TYPES.toName[value.courseType] }}
+                      </div>
+                    </template>
+                    <template v-if="value.completionStatus === '1'">
+                      <div @click="toFinish(value)" style="background: #2478ff">
+                        已完成
+                      </div>
+                    </template>
+                  </div>
+                </div>
+              </el-col>
+            </el-row>
+          </div>
+        </template>
+        <template v-else>
+          <el-empty description="暂无数据" />
+        </template>
+
+        <div class="detailR">
+          <!--        todo #路径详情 课程公告及共享文档缺失-->
+          <!-- 个人信息及学习进度 -->
+          <div class="detailRB">
+            <div class="info">
+              <div class="title">
                 <img
-                  style="width: 100%; height: 100%"
-                  :src="getAssetsFile(value.courseType)"
+                  style="width: 21px; height: 20px"
+                  src="../../assets/image/pathdetails/info.png"
                 />
+                <div class="text" style="margin-left: 7px">个人信息</div>
+                <div class="box"></div>
               </div>
-              <div class="item-content">
-                <div class="item-name">
-                  {{
-                    `【${TASK_TYPES.typeName[value.courseType]}】${
-                      value.taskName
-                    }`
-                  }}
+              <!--            todo #路径详情 个人信息缺少img和介绍-->
+              <div
+                class="teacheritem"
+                :style="{
+                  'border-bottom': '1px solid rgba(56, 125, 247, 0.2)',
+                }"
+              >
+                <!-- <img
+                  class="peopleimg"
+                  :src="userInfo?.avatar ? '/upload' + userInfo?.avatar : ''"
+                /> -->
+                <img
+                  class="peopleimg"
+                  src="../../assets/image/growth/touxiang.png"
+                />
+                <div style="margin-left: 17px">
+                  <div class="teacherName">
+                    <div style="margin-right: 5px">
+                      {{ userInfo?.realName }}
+                    </div>
+                  </div>
+                  <div class="introduce">{{ userInfo?.bandDesc }}</div>
                 </div>
-                <div class="item-progress">
-                  <el-progress
-                    :percentage="parseInt(value.progress)"
-                    :show-text="false"
-                    :stroke-width="4"
-                    color="#0077EC"
-                  />
+              </div>
+            </div>
+            <div class="info" style="padding: 20px 0 33px 0">
+              <div class="title">
+                <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" v-if="lastLearned">
+                <div class="ratetext">上次学到：{{ lastLearned.taskName }}</div>
+                <div
+                  v-if="lastLearned"
+                  class="ratebtn"
+                  @click="toFinish(lastLearned)"
+                >
+                  继续学习
                 </div>
-                <div class="item-time">
-                  <div>{{ `已完成 ${value.progress}%` }}</div>
-                  <div style="color: #999999">
-                    {{ `${value.createTime} 更新` }}
+              </div>
+
+              <div style="margin-top: 16px">
+                <div class="progressBox">
+                  <div>总进度</div>
+                  <div class="progress">
+                    <div style="width: 291px">
+                      <el-progress
+                        :percentage="totalProgress"
+                        :show-text="false"
+                        :stroke-width="8"
+                        :color="totalProgress == 100 ? '#0077EC' : '#F2903D'"
+                      />
+                    </div>
+                    <div
+                      style="
+                        font-size: 14px;
+                        font-weight: 500;
+                        margin-left: 10px;
+                        color: #677d86;
+                      "
+                    >
+                      {{ totalProgress }}%
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div style="margin-top: 31px">
+                <div class="progressBox">
+                  <div>必修进度</div>
+                  <div class="progress">
+                    <div style="width: 291px">
+                      <el-progress
+                        :percentage="requiredProgress"
+                        :show-text="false"
+                        :stroke-width="8"
+                        :color="requiredProgress == 100 ? '#0077EC' : '#F2903D'"
+                      />
+                    </div>
+                    <div
+                      style="
+                        font-size: 14px;
+                        font-weight: 500;
+                        color: #277aff;
+                        margin-left: 10px;
+                        color: #677d86;
+                      "
+                    >
+                      {{ requiredProgress }}%
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div style="margin-top: 31px">
+                <div class="progressBox">
+                  <div>选修进度</div>
+                  <div class="progress">
+                    <div style="width: 291px">
+                      <el-progress
+                        :percentage="electiveProgress"
+                        :show-text="false"
+                        :stroke-width="8"
+                        :color="electiveProgress == 100 ? '#0077EC' : '#F2903D'"
+                      />
+                    </div>
+                    <div
+                      style="
+                        font-size: 14px;
+                        font-weight: 500;
+                        color: #277aff;
+                        margin-left: 10px;
+                        color: #677d86;
+                      "
+                    >
+                      {{ electiveProgress }}%
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
-          </el-col>
-        </el-row>
+          </div>
+        </div>
       </div>
-    </template>
-    <template v-else>
-      <el-empty description="暂无数据" />
-    </template>
+    </div>
+
     <!-- 弹框提示信息 -->
     <el-dialog
       title=""
@@ -271,9 +437,56 @@ const {
 const router = useRouter();
 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 totalProgress = computed(() => {
+  if (state.growthInfo.totalTaskCompletedNum && state.growthInfo.totalTaskNum) {
+    let num =
+      state.growthInfo.totalTaskCompletedNum / state.growthInfo.totalTaskNum;
+    num = num * 100;
+    num = num.toFixed(0);
+    return Number(num);
+  } else {
+    return 0;
+  }
+});
+// 选修总进度
+const electiveProgress = computed(() => {
+  if (
+    state.growthInfo.electiveTaskCompletedNum &&
+    state.growthInfo.electiveTaskNum
+  ) {
+    let num =
+      state.growthInfo.electiveTaskCompletedNum /
+      state.growthInfo.electiveTaskNum;
+    num = num * 100;
+    num = num.toFixed(0);
+    return Number(num);
+  } else {
+    return 0;
+  }
+});
+// 必修总进度
+const requiredProgress = computed(() => {
+  if (
+    state.growthInfo.requiredTaskCompletedNum &&
+    state.growthInfo.requiredTaskNum
+  ) {
+    let num =
+      state.growthInfo.requiredTaskCompletedNum /
+      state.growthInfo.requiredTaskNum;
+    num = num * 100;
+    num = num.toFixed(0);
+    return Number(num);
+  } else {
+    return 0;
+  }
+});
 const getAssetsFile = (url) => {
   return new URL(`../../assets/image/growth/type${url}.png`, import.meta.url)
     .href;
@@ -621,10 +834,145 @@ function toOffcoursePlanPage(id) {
 <style lang="scss" scoped>
 .growth-list {
   background: #f6f6fc;
-
+  position: relative;
   :deep(.el-popper) {
     z-index: 9999 !important;
   }
+  .nav-title {
+    position: absolute;
+    top: 75px;
+    margin-left: 55px;
+    .growth-name {
+      display: flex;
+      align-items: center;
+      font-weight: 700;
+      font-size: 24px;
+      color: #fff;
+      cursor: pointer;
+    }
+  }
+  .detailR {
+    width: 494px;
+
+    .detailRB {
+      min-height: 459px;
+      background: #ffffff;
+      margin-right: 82px;
+
+      .info .title {
+        display: flex;
+        align-items: center;
+        padding-top: 39px;
+        position: relative;
+        margin-left: 48px;
+      }
+
+      .info .title .text {
+        margin-left: 8px;
+        font-size: 16px;
+        color: rgba(51, 51, 51, 1);
+        font-weight: 800;
+      }
+
+      .info .title .box {
+        width: 75px;
+        height: 10px;
+        background-color: rgba(36, 120, 255, 0.15);
+        position: absolute;
+        left: 23px;
+        top: 53px;
+      }
+
+      .info .teacheritem {
+        margin-left: 48px;
+        margin-right: 48px;
+        margin-top: 30px;
+        display: flex;
+        // align-items: center;
+      }
+
+      .info .teacheritem .peopleimg {
+        width: 60px;
+        height: 60px;
+        border-radius: 30px;
+      }
+
+      .info .teacheritem .teacherName {
+        font-size: 14px;
+        font-weight: bold;
+        color: #394145;
+        display: flex;
+        align-items: center;
+        width: 260px;
+      }
+
+      .info .teacheritem .teacherName .teacherMedal {
+        width: 17px;
+        height: 19px;
+        margin-right: 4px;
+        display: flex;
+        align-items: center;
+      }
+
+      .info .teacheritem .introduce {
+        width: 260px;
+        font-size: 14px;
+        font-weight: 500;
+        color: #394145;
+        margin-top: 14px;
+        line-height: 24px;
+      }
+
+      .info .rate {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-top: 29px;
+        margin-left: 48px;
+        margin-right: 26px;
+      }
+
+      .info .rate .ratetext {
+        width: 259px;
+        font-size: 14px;
+        font-weight: 500;
+        color: #677d86;
+        line-height: 24px;
+      }
+
+      .info .rate .ratebtn {
+        width: 86px;
+        height: 36px;
+        border: 1px solid #2478ff;
+        border-radius: 4px;
+        font-size: 14px;
+        font-weight: 500;
+        color: #2478ff;
+        line-height: 24px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .info .progressBox {
+        font-size: 14px;
+        font-weight: 500;
+        color: #677d86;
+        margin-top: 16px;
+        margin-left: 44px;
+
+        .progress {
+          display: flex;
+          align-items: center;
+        }
+
+        .progress .el-progress-bar__outer {
+          background-color: rgba(232, 241, 254, 1);
+        }
+      }
+    }
+  }
   .nav {
     display: flex;
     justify-content: space-between;
@@ -636,36 +984,50 @@ function toOffcoursePlanPage(id) {
   .growth-name-type {
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    justify-content: flex-end;
     padding: 32px 80px 14px 80px;
   }
-  .growth-name {
-    display: flex;
-    align-items: center;
-    font-weight: 700;
-    font-size: 20px;
-    color: #000000;
-    cursor: pointer;
-  }
+
   .growth-list-content {
-    padding: 0 80px;
+    flex: 1;
+    padding: 11px 40px 53px 40px;
+    margin: 0 18px 0 70px;
+    background-color: #ffffff;
+    box-sizing: border-box;
+    border: 2px solid #f5f5f5;
     .list-item {
-      cursor: pointer;
+      display: flex;
+      padding: 29px 0;
+      border-bottom: 1px solid #d3e3f2;
       // width: 425px;
     }
+    .item-button {
+      width: 120px;
+      height: 36px;
+      margin-left: 187px;
+      cursor: pointer;
+      div {
+        width: 100%;
+        height: 100%;
+        border-radius: 4px;
+        font-size: 16px;
+        color: #ffffff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
     .item-time {
       display: flex;
+      margin-top: 18px;
       justify-content: space-between;
       align-items: center;
       font-size: 14px;
       color: #0077ec;
     }
-    .item-progress {
-      margin: 15px 0 19px 0;
-    }
     .item-img {
-      width: 100%;
-      border-radius: 14px 14px 0px 0px;
+      width: 300px;
+      border-radius: 14px;
       overflow: hidden;
 
       img:hover {
@@ -674,12 +1036,32 @@ function toOffcoursePlanPage(id) {
       }
     }
     .item-content {
-      padding: 29px 24px 31px 26px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      padding: 0 0 0 32px;
       box-sizing: border-box;
-      background: #ffffff;
-      border-radius: 0px 0px 15px 15px;
+      flex: 1;
+    }
+    .item-progress {
+      margin: 15px 0 19px 0;
+    }
+    .item-task-type {
+      margin-top: 20px;
+      background-image: url(../../assets/image/growth/task-type.png);
+      background-size: 100% 100%;
+      width: 70px;
+      height: 28px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 16px;
+      color: #ffffff;
     }
     .item-name {
+      font-weight: 700;
+      font-size: 20px;
+      color: #000000;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;

src/views/growth/growthRoadmap.vue

@@ -4,138 +4,78 @@
       style="width: 100%; height: 290px"
       src="@/assets/image/growth/bg.png"
     />
-    <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 class="nav-title">
+      <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="#fff" size="24"><CaretBottom /></el-icon>
           </div>
         </div>
-      </div>
-      <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 #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item
+              :disabled="selectGrowth.id == item.id"
+              v-for="item of growthList"
             >
-              <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="暂无数据" />
+              <div @click="select(item)">{{ item.growthName }}</div>
+            </el-dropdown-item>
+          </el-dropdown-menu>
         </template>
+      </el-dropdown>
+    </div>
+    <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 class="growth-path-container">
+      <div class="growth-name-type">
+        <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
+          :style="{ transform: 'scale(' + transformSize + ')' }"
+          style="transform-origin: top left"
+        >
+          <template v-if="selectGrowth.template == 1">
+            <Roadmap2
+              @toFinish="toFinish"
+              :stageProcessList="stageProcessList"
+            ></Roadmap2>
+          </template>
+          <template v-else>
+            <Roadmap1
+              @click="toFinish"
+              :stageProcessList="stageProcessList"
+            ></Roadmap1>
+          </template>
+        </div>
+      </template>
+      <template v-else>
+        <el-empty description="暂无数据" />
+      </template>
+    </div>
+
     <!-- 弹框提示信息 -->
     <el-dialog
       title=""
@@ -262,6 +202,8 @@ import { computed, onMounted, onUnmounted, ref, watch, reactive } from "vue";
 import { ElMessage } from "element-plus";
 import { request } from "@/api/request";
 import { growthRequest } from "@/api/growthRequest";
+import Roadmap1 from "./components/roadmap1/index.vue";
+import Roadmap2 from "./components/roadmap2/index.vue";
 import {
   EvaluationToLearn,
   QueryEvaluationTaskStatusOne,
@@ -278,109 +220,12 @@ const {
   query: { courseId, routerId },
 } = useRoute();
 
-const point = [
-  {
-    top: "226px",
-    right: "128px",
-  },
-  {
-    top: 0,
-    right: "234px",
-  },
-  {
-    top: "347px",
-    right: "341px",
-  },
-  {
-    top: "92px",
-    right: "455px",
-  },
-  {
-    top: "443px",
-    right: "561px",
-  },
-  {
-    top: "155px",
-    right: "673px",
-  },
-  {
-    top: "512px",
-    right: "780px",
-  },
-  {
-    top: "200px",
-    right: "893px",
-  },
-  {
-    top: "565px",
-    right: "1000px",
-  },
-  {
-    top: "232px",
-    right: "1111px",
-  },
-  {
-    top: "602px",
-    right: "1220px",
-  },
-  {
-    top: "254px",
-    right: "1331px",
-  },
-  {
-    top: "630px",
-    right: "1440px",
-  },
-  {
-    top: "267px",
-    right: "1551px",
-  },
-  {
-    top: "650px",
-    right: "1660px",
-  },
-];
 const router = useRouter();
 const { commit, dispatch, state } = useStore();
 const userInfo = computed(() => state.userInfo);
 
 const errorData = computed(() => state.projectError);
 
-
-const stateData = computed(() => {
-  return (item) => {
-    if (item.completionStatus === "10") {
-      return {
-        text: "未解锁",
-        color: "#666666",
-        bgColor: "rgba(102, 102, 102, 0.2)",
-        progressColor: "#AEB3B8",
-      };
-    } else if (item.completionStatus === "0") {
-      return {
-        text: "未开始",
-        color: "#666666",
-        bgColor: "rgba(102, 102, 102, 0.2)",
-        progressColor: "#AEB3B8",
-      };
-    } else if (item.completionStatus === "1") {
-      return {
-        text: "已完成",
-        color: "#0077EC",
-        bgColor: "rgba(0, 119, 236, 0.2)",
-        progressColor: "#0077EC",
-      };
-    } else if (item.completionStatus === "2") {
-      return {
-        text: "进行中",
-        color: "#F2903D",
-        bgColor: "rgba(242, 144, 61, 0.2)",
-        progressColor: "#F2903D",
-      };
-    }
-  };
-});
-
 // 储存屏幕宽
 const windowWidth = ref(0);
 const transformSize = ref(1);
@@ -429,17 +274,22 @@ const getList = () => {
   }
   loading.value = true;
   growthRequest(PROFESSIONAL_STUDENT_TASKLIST, params).then((res) => {
-    let newData = res.data.slice(0, 15).reverse()
-    // 默认第一个在第一点位
-    let num = 15 / newData.length;
-    stageProcessList.value = newData.map((item, index) => {
+    if (selectGrowth.value.template === "1") {
+      stageProcessList.value = res.data;
+    } else {
+      let newData = res.data.slice(0, 15).reverse();
       // 默认第一个在第一点位
-      if (index === 0) {
-        item.position = 0;
-      }
-      item.position = Number((index * num).toFixed());
-      return item;
-    });
+      let num = 15 / newData.length;
+      stageProcessList.value = newData.map((item, index) => {
+        // 默认第一个在第一点位
+        if (index === 0) {
+          item.position = 0;
+        }
+        item.position = Number((index * num).toFixed());
+        return item;
+      });
+    }
+
     loading.value = false;
   });
 };
@@ -751,6 +601,19 @@ function toOffcoursePlanPage(id) {
   :deep(.el-progress-bar__outer) {
     background-color: #aeb3b8;
   }
+  .nav-title {
+    position: absolute;
+    top: 75px;
+    margin-left: 55px;
+    .growth-name {
+      display: flex;
+      align-items: center;
+      font-weight: 700;
+      font-size: 24px;
+      color: #fff;
+      cursor: pointer;
+    }
+  }
   .nav {
     display: flex;
     justify-content: space-between;
@@ -763,7 +626,7 @@ function toOffcoursePlanPage(id) {
   .growth-name-type {
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    justify-content: flex-end;
     padding: 32px 80px 14px 80px;
   }
   .growth-name {
@@ -772,135 +635,12 @@ function toOffcoursePlanPage(id) {
     font-weight: 700;
     font-size: 20px;
     color: #000000;
+    cursor: pointer;
   }
   .growth-path-container {
-    background-image: url(@/assets/image/growth/path-bg.png);
-    background-size: 100%;
-    background-repeat: no-repeat;
-    width: 1920px;
-    transform-origin: top left;
-    height: 1122px;
-  }
-  .path-container {
-    position: relative;
-    width: 100%;
-    height: 659px;
-    margin-top: 53px;
-    background-image: url(@/assets/image/growth/path.png);
-    .path-item-bottom {
-      position: absolute;
-      width: 210px;
-      cursor: pointer;
-      .item-progress {
-        flex: 1;
-      }
-      .item-state {
-        width: 64px;
-        height: 24px;
-        border-radius: 6px;
-        text-align: center;
-        line-height: 24px;
-        margin-left: 5px;
-      }
-      .item-name {
-        display: inline-block;
-        max-width: 210px;
-        min-width: 80px;
-        background: linear-gradient(268deg, #3c65f5 0%, #4395f9 100%);
-        border-radius: 7px;
-        font-size: 16px;
-        color: #ffffff;
-        padding: 14px 10px 14px 15px;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-      }
-      .triangle {
-        width: 0px;
-        height: 0px;
-        border: 7px solid transparent;
-        border-bottom-color: #4391f8;
-        margin-left: 32px;
-        padding-top: 10px;
-      }
-      .item-link {
-        position: relative;
-        .line {
-          width: 2px;
-          height: 138px;
-          margin-left: 39px;
-          background: linear-gradient(180deg, #ffffff 0%, #0077ec 65%);
-          border-image: linear-gradient(180deg, #ffffff, #0077ec) 10 10;
-        }
-        .circle {
-          width: 14px;
-          height: 14px;
-          background: #ffffff;
-          border-radius: 50%;
-          border: 3px solid #0077ec;
-          position: absolute;
-          top: 0;
-          left: 30px;
-        }
-      }
-    }
-    .path-item-top {
-      position: absolute;
-      width: 210px;
-      cursor: pointer;
-      .item-progress {
-        flex: 1;
-      }
-      .item-state {
-        width: 64px;
-        height: 24px;
-        border-radius: 6px;
-        text-align: center;
-        line-height: 24px;
-        margin-left: 5px;
-      }
-      .item-name {
-        max-width: 210px;
-        min-width: 80px;
-        display: inline-block;
-        background: linear-gradient(268deg, #3c65f5 0%, #4395f9 100%);
-        border-radius: 7px;
-        font-size: 16px;
-        color: #ffffff;
-        padding: 14px 10px 14px 15px;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-      }
-      .triangle {
-        width: 0px;
-        height: 0px;
-        border: 7px solid transparent;
-        border-top-color: #4391f8;
-        margin-left: 32px;
-      }
-      .item-link {
-        position: relative;
-        .line {
-          margin-left: 39px;
-          width: 2px;
-          height: 210px;
-          background: linear-gradient(0deg, #ffffff 0%, #0077ec 65%);
-          border-image: linear-gradient(0deg, #ffffff, #0077ec) 10 10;
-        }
-        .circle {
-          width: 14px;
-          height: 14px;
-          background: #ffffff;
-          border-radius: 50%;
-          border: 3px solid #0077ec;
-          position: absolute;
-          bottom: 0;
-          left: 30px;
-        }
-      }
-    }
+    background-color: #ffffff;
   }
+
   .growth-type {
     display: flex;
     align-items: baseline;