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

src/views/growth/components/gowthPath2.vue

@@ -0,0 +1,261 @@
+<template>
+  <el-scrollbar height="935px">
+    <div
+      class="gowth-path2"
+      :style="{
+        height: position(stageProcessList.length - 1).top,
+      }"
+    >
+      <div
+        class="path-item"
+        @click="toFinish(item)"
+        :style="position(index)"
+        v-for="(item, index) of stageProcessList"
+      >
+        <template v-if="(index + 1) % 2">
+          <div class="item-link">
+            <div class="circle"></div>
+            <div
+              :style="{
+                width: widthConfig[index % 10],
+              }"
+              class="line-right"
+            ></div>
+          </div>
+        </template>
+        <div>
+          <div>
+            <div class="item-name">{{ item.taskName }}</div>
+            <div class="triangle"></div>
+          </div>
+          <div class="f-a-c" style="justify-content: flex-end">
+            <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="(index + 1) % 2 === 0">
+          <div class="item-link">
+            <div
+              :style="{
+                width: widthConfig[index % 10],
+              }"
+              class="line-left"
+            ></div>
+            <div class="circle"></div>
+          </div>
+        </template>
+      </div>
+    </div>
+  </el-scrollbar>
+</template>
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  stageProcessList: Array,
+});
+
+const point = [
+  {
+    top: 0,
+    right: -24,
+  },
+  {
+    top: 51,
+    right: 167,
+  },
+  {
+    top: 144,
+    right: -26,
+  },
+  {
+    top: 234,
+    right: 146,
+  },
+  {
+    top: 339,
+    right: 90,
+  },
+  {
+    top: 414,
+    right: 121,
+  },
+  {
+    top: 535,
+    right: 92,
+  },
+  {
+    top: 635,
+    right: 53,
+  },
+  {
+    top: 723,
+    right: 51,
+  },
+  {
+    top: 804,
+    right: 53,
+  },
+];
+
+// 基础配置项
+const widthConfig = [
+  "0px",
+  "0px",
+  "64px",
+  "40px",
+  "80px",
+  "20px",
+  "64px",
+  "80px",
+  "45px",
+  "65px",
+];
+
+const position = (index) => {
+  if (index < 0) {
+    return {
+      top: `0px`,
+      right: `0px`,
+    };
+  }
+  let num = index / 10;
+  // 获取倍数
+  let multiple = num < 1 ? 0 : Number(Math.floor(num));
+
+  let num2 = index % 10;
+
+  return {
+    top: `${multiple * (853 + 25) + point[num2].top}px`,
+    right: `${point[num2].right}px`,
+  };
+};
+// 基础配置项
+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 emit = defineEmits(["toFinish"]);
+const toFinish = (item) => {
+  emit("toFinish", item);
+};
+</script>
+<style lang="scss" scoped>
+.f-a-c {
+  display: flex;
+  align-items: center;
+}
+.gowth-path2 {
+  min-height: 200px;
+  position: relative;
+  margin: 53px 45px 31px 63px;
+  box-sizing: border-box;
+  background-image: url(@/assets/image/growth/path2.png);
+  background-size: 100%;
+
+  .path-item {
+    position: absolute;
+    display: flex;
+    padding-bottom: 20px;
+
+    .item-link {
+      height: 28px;
+      display: flex;
+      align-items: center;
+      .line-right {
+        height: 2px;
+        background: linear-gradient(90deg, #ffffff 0%, #0077ec 65%);
+        border-image: linear-gradient(0deg, #ffffff, #0077ec) 10 10;
+      }
+      .line-left {
+        height: 2px;
+        background: linear-gradient(-90deg, #ffffff 0%, #0077ec 65%);
+        border-image: linear-gradient(-90deg, #ffffff, #0077ec) 10 10;
+      }
+      .circle {
+        width: 10px;
+        height: 10px;
+        background: #ffffff;
+        border-radius: 50%;
+        border: 2px solid #0077ec;
+      }
+    }
+    .item-progress {
+      width: 71px;
+    }
+    .item-state {
+      width: 48px;
+      height: 16px;
+      border-radius: 3px;
+      text-align: center;
+      line-height: 16px;
+      margin-left: 4px;
+      font-size: 12px;
+    }
+    .item-name {
+      max-width: 125px;
+      min-width: 40px;
+      display: inline-block;
+      background: linear-gradient(268deg, #3c65f5 0%, #4395f9 100%);
+      border-radius: 4px;
+      font-size: 12px;
+      color: #ffffff;
+      padding: 8px 5px 9px 10px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    .triangle {
+      width: 0px;
+      height: 0px;
+      border: 5px solid transparent;
+      border-top-color: #4391f8;
+      margin-left: 22px;
+    }
+  }
+}
+</style>

src/views/growth/growthDetails.vue

@@ -550,6 +550,9 @@ const toPath = () => {
   box-sizing: border-box;
   background-color: #ffffff;
   position: relative;
+  :deep(input::placeholder) {
+    color: #ffffff;
+  }
   .container {
     position: absolute;
     background-color: #ffffff;

src/views/growth/growthPath.vue

@@ -4,7 +4,7 @@
       <div class="nav-left" @click="returnclick">
         <el-icon color="#fff" size="20"><ArrowLeft /></el-icon>
       </div>
-      <div class="nav-title">专业力必修</div>
+      <div class="nav-title">{{ growthInfo.growthName }}</div>
     </div>
     <div class="tabs">
       <div
@@ -62,10 +62,13 @@
     </div>
     <div class="container" v-loading="loading">
       <div :style="{ transform: 'scale(' + transformSize + ')' }">
+        <template v-if="growthInfo.template == 2">
           <div class="path-container">
             <div
               :class="
-              item.position + 1 < 3 || item.position + 1 == 4 || item.position + 1 == 6
+                item.position + 1 < 3 ||
+                item.position + 1 == 4 ||
+                item.position + 1 == 6
                   ? 'path-item-left'
                   : 'path-item-right'
               "
@@ -73,7 +76,13 @@
               :style="point[item.position]"
               v-for="(item, index) of stageProcessList"
             >
-            <template v-if="item.position + 1 < 3 || item.position + 1 == 4 || item.position + 1 == 6">
+              <template
+                v-if="
+                  item.position + 1 < 3 ||
+                  item.position + 1 == 4 ||
+                  item.position + 1 == 6
+                "
+              >
                 <div>
                   <div class="item-name">{{ item.taskName }}</div>
                   <div class="triangle"></div>
@@ -151,6 +160,10 @@
               </template>
             </div>
           </div>
+        </template>
+        <template v-else>
+          <GrowthPath2 @toFinish="toFinish" :stageProcessList="stageProcessList"></GrowthPath2>
+        </template>
       </div>
 
       <template v-if="stageProcessList && stageProcessList.length"> </template>
@@ -217,6 +230,7 @@ import { computed, reactive, ref, watch, onMounted } from "vue";
 import { ElLoading } from "element-plus";
 import { useRequest, request } from "@/api/request";
 import { growthRequest } from "@/api/growthRequest";
+import GrowthPath2 from "./components/gowthPath2.vue";
 import {
   EvaluationToLearn,
   QueryEvaluationTaskStatusOne,
@@ -289,6 +303,9 @@ const getList = () => {
     growthId: routerId,
     ...queryParams,
   }).then((res) => {
+    if (growthInfo.value.template == 1) {
+      stageProcessList.value = res.data;
+    } else {
       let newData = res.data.slice(0, 15).reverse();
       // 默认第一个在第一点位
       let num = 15 / newData.length;
@@ -300,6 +317,7 @@ const getList = () => {
         item.position = Number((index * num).toFixed());
         return item;
       });
+    }
 
     if (anchorNum.value === 0) {
       let find = stageProcessList.value.find((item) => item.lastStudy);
@@ -318,7 +336,7 @@ const openCourseList = ref([]);
 const openCourseIdList = ref([]);
 
 const userInfo = computed(() => store.state.userInfo);
-
+const growthInfo = computed(() => store.state.growthInfo);
 const point = [
   {
     top: "-15px",
@@ -743,6 +761,11 @@ const toPath = () => {
   box-sizing: border-box;
   background-color: #ffffff;
   position: relative;
+
+  :deep(input::placeholder) {
+    color: #ffffff;
+  }
+
   .container {
     position: absolute;
     background-color: #ffffff;