成长路径

src/api/growth/index.js

@@ -0,0 +1,5 @@
+import ajax from "@/api/ajax"
+//获取详情
+export const getList = (params) => ajax.get('/manageApi',`/stu/grow/getStuLearnInfo?userId=${params}`);
+//获取路径图详情
+export const taskList = (params) => ajax.get('/manageApi',`/stu/grow/taskList?growId=${params}`);

src/views/study/Growth.vue

@@ -16,7 +16,7 @@
             </div>
             <div class="growth_explain1">
               <div class="growth_explain_text">
-                根据您的归属组织、您所在岗位、职级，已为您自动匹配“产品企划岗Band6～7成长路径”，抓紧时间学习吧～
+                <div class="text">根据您的归属组织、您所在岗位、职级，已为您自动匹配“{{detailData.growName || ''}}”，抓紧时间学习吧～</div>
                 <div class="explain_close"  @click="explainBody = false"></div>
               </div>
             </div>
@@ -31,12 +31,12 @@
     </div>
     <div class="growth_body">
       <div class="body_head">
-        <div class="head_left">产品企划岗Band6～7成长路径</div>
+        <div class="head_left">{{detailData.growName || ''}}</div>
         <div class="head_right">
-          <div class="head_right_one">京东方集团股份有限公司</div>
+          <div class="head_right_one">{{detailData.organizationName || ''}}</div>
           <div class="head_right_two">
             <span class="head_right_sta">学习状态:</span>
-            <span class="head_right_status"> 进行中</span>
+            <span class="head_right_status" :style="{color: ['#FF8336','#31AF0D','#409EFF '][detailData.studyStatus]}"> {{detailData.studyStatus==0?'未开始':detailData.studyStatus==1?'已完成':'进行中'}}</span>
           </div>
         </div>
       </div>
@@ -74,14 +74,14 @@
         </div>
       </el-popover>
       
-      <div class="body_explain">
+      <div v-if="detailData.remark" class="body_explain">
         <div class="body_explain_icon">
           <img class="body_explain_img" src="../../assets/images/growth/growthLeft.png" alt="">
           <div class="body_explain_text">说明</div>
         </div>
         <div class="body_explain_item">
           <div class="body_explain_text">
-            请各位选课的同学提前阅读本课程的 “教学大纲与计划”、“课程考核要求”与“学习要求”，并按给定的中学化学教学主题分好小组每位同学在网上学习的活动轨迹都会自动被系统记录將作为大家个人线上参与的评价依据;请大家务必
+            {{detailData.remark || ''}}
           </div>
         </div>
       </div>
@@ -97,17 +97,17 @@
               <div>当前任务</div>
             </div>
             <div class="body_schedule_right">
-              <div>10 门</div>
-              <div>产品考试</div>
+              <div>{{detailData.taskNum}}门</div>
+              <div>{{detailData.currentTaskName}}</div>
             </div>
           </div>
           <div class="body_schedule_two">
             <div class="body_schedule_pro">
               <span class="pro_text">总进度</span>
-              <el-progress :stroke-width="12" :percentage="50"></el-progress>
+              <el-progress :stroke-width="12" :percentage="detailData.overallCompletionRate"></el-progress>
             </div>
             <div class="body_schedule_btn" @click="startLearn">
-              <span class="body_schedule_text">开始学习</span>
+              <span class="body_schedule_text">{{detailData.overallCompletionRate==0?'开始学习':detailData.overallCompletionRate==100?'回顾':'继续学习'}}</span>
             </div>
           </div>
         </div>
@@ -137,6 +137,8 @@
 </template>
 
 <script>
+import {getList} from '@/api/growth'
+import {mapGetters} from 'vuex'
 export default {
   name: 'Growth',
   data() {
@@ -145,10 +147,21 @@ export default {
       explainBody: false,
       centerDialogVisible: true,
       checked: false,
+      detailData: {},
     }
   },
   mounted() {
-    
+    getList(this.userInfo.aid).then(res=>{
+      if(res.code == 200 ){
+        this.detailData = res.data
+      }
+      if(res.code == 4){
+        this.$message({
+          type: 'error',
+          message: res.msg
+        })
+      }
+    })
   },
   watch:{
     
@@ -156,10 +169,14 @@ export default {
   methods: {
     startLearn(){
       this.$router.push({
-        path: '/growthpath'
+        path: '/growthpath',
+        query: {growId:this.detailData.growId,name: this.detailData.growName}
       })
     },
-  }
+  },
+  computed: {
+    ...mapGetters(['userInfo'])
+  },
 };
 </script>
 
@@ -278,6 +295,15 @@ export default {
       line-height: 28px;
       text-align: left;
       position: relative;
+      .text{
+        display: -webkit-box;
+        word-wrap: break-word;
+        word-break:break-all;
+        overflow: hidden;
+        text-overflow:ellipsis;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp:2;
+      }
       .explain_close{
         cursor: pointer;
         background-image: url(../../assets/images/growth/close.png);
@@ -328,7 +354,7 @@ export default {
   .growth_heads{
     display: flex;
     justify-content: space-between;
-    margin: 43px 86px 37px 81px;
+    margin: 22px 43px 19px 40px;
     position: relative;
     .growth_left{
       display: flex;
@@ -391,7 +417,7 @@ export default {
     background: #FFFFFF;
     border-radius: 10px;
     border: 1px solid #E4EDFE;
-    margin: 0 81px 52px 76px;
+    margin: 0 41px 0px 38px;
     position: relative;
     .growth_body_shared{
       cursor: pointer;
@@ -423,7 +449,7 @@ export default {
       justify-content: space-between;
       margin-bottom: 25px;
       .head_left{
-        width: 272px;
+        // width: 272px;
         height: 28px;
         font-weight: 600;
         font-size: 20px;
@@ -433,7 +459,7 @@ export default {
         margin: 29px 0 0 33px;
       }
       .head_right{
-        width: 326px;
+        // width: 326px;
         height: 22px;
         font-weight: 400;
         font-size: 16px;
@@ -444,10 +470,12 @@ export default {
         justify-content: space-between;
         line-height: 22px;
         .head_right_one{
-
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
         }
         .head_right_two{
-          
+          margin-left: 14px;
           .head_right_sta{
 
           }
@@ -495,6 +523,13 @@ export default {
           color: #333333;
           line-height: 28px;
           text-align: left;
+          display: -webkit-box;
+          word-wrap: break-word;
+          word-break:break-all;
+          overflow: hidden;
+          text-overflow:ellipsis;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp:2;
         }
       }
     }

src/views/study/GrowthPath.vue

@@ -7,17 +7,23 @@
       <div style=" background: #0078fc;height: 150px;width: 100%;position: absolute;top: 0;z-index:-9999;"></div>
       <div class="pathdetails">
         <div class="pdname">
-          销售岗Band6路径图
+          {{$route.query.name}}路径图
         </div>
         <div class="detailinfo">
           <div class="select">
             <div class="select-radio" style="margin-left: 0;"><span style="background: #34CA2B;"></span> 必修</div>
             <div class="select-radio"><span style="background: #FE9C4A;"></span>选修</div>
-            <div class="select-radio"><span style="background: #F2675D;"></span>已完成</div>
+            <!-- <div class="select-radio"><span style="background: #F2675D;"></span>已完成</div> -->
           </div>
           <div class="btn">
             <el-button type="primary" @click="dialogTableVisible = true">全岗位路径图</el-button>
-            <el-button type="primary"  style="margin-left: 0;margin-top: 30px;">信息概览</el-button>
+            <!-- <el-button type="primary"  style="margin-left: 0;margin-top: 30px;">信息概览</el-button> -->
+          </div>
+          <div class="linehig">
+            <el-switch
+              v-model="switchFalse"
+              active-text="高亮显示未完成">
+            </el-switch>
           </div>
           <div class="detailContent">
             <div :class="dataList.length <= 7 ? 'detailbgc' : 'detailAllbgc'">
@@ -27,16 +33,16 @@
                   <div style="font-size: 14px;padding: 20px 20px 10px; ">
                     <div style="font-size: 16px;font-weight: 600">{{ item.title }}</div>
                     <div style="margin: 20px 0;">
-                      <el-tag>必修</el-tag>
-                      <el-tag type="success">在线</el-tag>
+                      <el-tag hit :type="item.flag == 0 ? 'danger' : 'success'">{{ item.flag == 0 ? '选修' : '必修' }}</el-tag>
+                      <el-tag>{{item.type == 1 ? '在线' : item.type == 5 ?'考试' : '课程'}}</el-tag>
                     </div>
                     <div>
                       <span style="color: #387DF7;">学习进度</span>
-                      <el-progress :percentage="50"></el-progress>
+                      <el-progress :percentage="item.currentRatio || 0"></el-progress>
                     </div>
-                    <div style="margin: 20px 0;">课程讲师：启用家</div>
-                    <div>课程简介：无</div>
-                    <el-button style="width: 100%;margin-top: 20px;" type="primary">
+                    <div style="margin: 20px 0;">课程讲师：{{item.teacherName}}</div>
+                    <div>课程简介：{{item.introduce}}</div>
+                    <el-button style="width: 100%;margin-top: 20px;" type="primary" @click="goStudy(item)">
                       <div style="display: flex;justify-content: space-between;align-items: center;">
                         <div></div>
                         <span>去学习</span>
@@ -50,22 +56,22 @@
                     </el-button>
                   </div>
                   <div slot="reference" class="address" :style="{
-                    backgroundColor: getColor(item.status, 0),
+                    backgroundColor: getColor(item.flag, 0),
                     left: getPosition(item.name, index).left + 'px',
                     top: getPosition(item.name, index).top + 'px'
                   }">
                     <div class="icon">
-                      <div v-if="item.status" class="icon-content" :style="{ background: getColor(item.status, 1) }">
-                        {{ item.progress }}%
+                      <div class="icon-content" :style="{ background: getColor(item.flag, 1) }">
+                        {{ item.currentRatio || 0 }}%
                       </div>
-                      <div v-else class="icon-content" style="background-color: #fff;">
+                      <!-- <div v-else class="icon-content" style="background-color: #fff;">
                         <svg style="width: 36px;height: 36px;" t="1706149497692" class="icon" viewBox="0 0 1024 1024"
                           version="1.1" p-id="4648">
                           <path
                             d="M0 512C0 229.234759 229.234759 0 512 0s512 229.234759 512 512-229.234759 512-512 512S0 794.765241 0 512z m419.310345 194.630621a35.310345 35.310345 0 0 0 49.399172 1.271172l335.518897-311.931586a35.310345 35.310345 0 0 0-48.075035-51.729655l-309.124413 289.544827-145.125518-149.645241a35.310345 35.310345 0 1 0-50.688 49.169655l168.112552 173.320828z"
                             fill="#F2675D" p-id="4649"></path>
                         </svg>
-                      </div>
+                      </div> -->
                     </div>
                   </div>
                 </el-popover>
@@ -76,13 +82,13 @@
               </div>
             </div>
           </div>
-          <div class="footerBtn">
+          <!-- <div class="footerBtn">
             <el-button type="primary">1-7课</el-button>
             <el-button>8-14课程</el-button>
             <el-button type="primary" @click="switchInfo(5)">5</el-button>
             <el-button type="primary" @click="switchInfo(7)">7</el-button>
             <el-button type="primary" @click="switchInfo(14)">14</el-button>
-          </div>
+          </div> -->
         </div>
       </div>
     </div>
@@ -213,14 +219,16 @@
 
 <script>
 import portalHeader from '@/components/PortalHeader.vue';
+import {taskList} from '@/api/growth';
 export default {
   name: 'GrowthPath',
   components: { portalHeader },
   data() {
     return {
+      switchFalse: false,
       showUClass: false,
       colorAttrValue: {
-        0: ['#f1c9c3', "#e27166"],
+        0: ['#FFD04B', "#FBA944"],
         1: ["#b8e3b8", "#8ac84a"],
         2: ['#FFD04B', '#FBA944']
       },
@@ -264,35 +272,7 @@ export default {
           ]
         }
       },
-      dataList: [{
-        name: '路径图背景',
-        progress: '99',
-        title: '岗前培训+OJT辅导OJT辅导OJT辅导OJT辅导OJT辅导',
-        status: 0
-      }, {
-        name: '路径图背景',
-        progress: '10',
-        title: '岗前培JT辅导OJT辅导',
-        status: 1
-      },
-      {
-        name: '路径图背景',
-        progress: '10',
-        title: '岗前',
-        status: 2
-      },
-      {
-        name: '路径图背景',
-        progress: '10',
-        title: '岗位',
-        status: 0
-      },
-      {
-        name: '路径图背景',
-        progress: '10',
-        title: '岗前岗前',
-        status: 1
-      }],
+      dataList: [],
       dialogTableVisible: false,
       gridData: [{
         name: '市场企划岗',
@@ -331,11 +311,27 @@ export default {
         salesManagement: 1
       }],
       drawer: false,
-      activeName: 'first'
-
+      activeName: 'first',
     };
   },
   mounted() {
+    taskList(this.$route.query.growId).then(res=>{
+      if(res.code == 200 ){
+        if(res.data.length <= 7){
+          this.dataList = res.data.map(item=>({
+            title:item.name,
+            ...item,
+            name: '路径图背景7',
+          }))
+        }else{
+          this.dataList = res.data.map(item=>({
+            title:item.name,
+            ...item,
+            name: '路径图背景全',
+          }))
+        }
+      }
+    })
   },
   methods: {
     cylClick() {
@@ -526,7 +522,18 @@ export default {
     },
     getPosition(name, index) {
       return this.iconAttrs[name].positions[index]
+    },
+    goStudy(item) {
+      if(item.type == 1){
+        console.log(item,'在线')
+        this.$router.push("/course/studyindex?id=" + item.targetId);
+      }else if (item.type == 5) {
+        console.log(item,'考试')
+        this.$router.push("exam/test?id=" + item.targetId);
+      }else{
+        console.log(item,'其他')
       }
+    },
   }
 };
 </script>
@@ -649,7 +656,11 @@ export default {
         display: flex;
         flex-direction: column;
       }
-
+      .linehig{
+        position: absolute;
+        top: 30px;
+        right: 30px;
+      }
       .select {
         position: absolute;
         top: 30px;