feat:增加项目排行榜,项目积分榜单接口获取数据

src/api/index1.js

@@ -1,3 +1,11 @@
+/*
+ * @Author: lixg lixg@dongwu-inc.com
+ * @Date: 2022-11-04 22:45:31
+ * @LastEditors: lixg lixg@dongwu-inc.com
+ * @LastEditTime: 2022-11-06 16:48:50
+ * @FilePath: /fe-manage/src/api/index1.js
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
 import http from "./config";
 import qs from 'qs';
 
@@ -63,7 +71,12 @@ export const getRouterDetail = (routerId) => http.get('/admin/router/detail', {
 export const addStudent = (obj) => http.post('/admin/router/addStudent', obj);
 
 
-
+//项目基础信息-----------------------------------
+//项目积分榜单
+export const scoreRank = (obj) => http.post('/admin/project/scoreRank', obj);
+//排行榜
+export const billboard = (obj) => http.post('/admin/project/billboard', obj);
+//项目基础信息-----------------------------------
 
 // 测试方法
 // import * as api from '../../api/index'

src/components/drawers/AddHomework.vue

@@ -156,7 +156,7 @@ export default {
     });
     const formRef = ref();
     const state = reactive({
-      routerId: storage.get("routerId") ? storage.get("routerId") : null,
+      routerId: storage.get("routerId") ?JSON.parse(storage.get("routerId"))  : null,
     })
 
     let checkWorkName = async (_rule, value) => {

src/components/drawers/ProjectScore.vue

@@ -2,12 +2,13 @@
 <template>
   <div class="split"></div>
   <div class="contentscore">
-    <a-tabs v-model:activeKey="activeKeyScore">
+    <a-tabs v-model:activeKey="activeKeyScore" @change="tabsChange">
       <a-tab-pane key="1" tab="学员获取">
         <div class="group">
           <div class="groupleft">
             <div class="groupname" style="width: 42px">姓名：</div>
-            <a-input class="ant-input"
+            <a-input
+              class="ant-input"
               v-model:value="value"
               placeholder="请输入姓名"
             />
@@ -24,7 +25,7 @@
           </div>
         </div>
         <div class="tableBox" style="margin: 20px 32px 30px 32px">
-          <a-table 
+          <a-table
             style="border: 1px solid #f2f6fe"
             :columns="tablecolumnStu"
             :data-source="tabledataStu"
@@ -49,32 +50,39 @@
       <a-tab-pane key="2" tab="榜单" force-render>
         <div class="scorelist">
           <div class="grouprightscore">
-            <div class="sbutton" @click="stuValue = !stuValue">
+            <div class="sbutton" @click="typeChange(1)">
-              <img v-if=stuValue src="../../assets/images/taskpage/stu0.png"/>
+              <img
-              <img v-else src="../../assets/images/taskpage/stu.png"/>
+                v-if="stuValue===2"
-              <div :class="stuValue ? '' : 'btn1'">学员积分榜</div>
+                src="../../assets/images/taskpage/stu0.png"
+              />
+              <img v-else src="../../assets/images/taskpage/stu.png" />
+              <div :class="stuValue===2 ? '' : 'btn1'">学员积分榜</div>
             </div>
-            <div class="sbutton" @click="stuValue = !stuValue">
+            <div class="sbutton" @click="typeChange(2)">
-              
+              <img
-              <img v-if=stuValue src="../../assets/images/taskpage/group.png"/>
+                v-if="stuValue===2"
-              <img v-else src="../../assets/images/taskpage/group0.png"/>
+                src="../../assets/images/taskpage/group.png"
-              <div :class="stuValue ? 'btn1' : ''">小组积分榜</div>
+              />
+              <img v-else src="../../assets/images/taskpage/group0.png" />
+              <div :class="stuValue===2 ? 'btn1' : ''">小组积分榜</div>
             </div>
           </div>
           <div class="group" style="justify-content: center">
             <div class="groupleft">
               <div class="groupname">姓名：</div>
-            <a-input class="ant-input" style="width:152px"
+              <a-input
-                v-model:value="value"
+                class="ant-input"
+                style="width: 152px"
+                v-model:value="searchRankName"
                 placeholder="请输入姓名"
               />
             </div>
             <div class="groupright">
-              <div class="btn1" style="margin-left: 16px ;">
+              <div class="btn1" style="margin-left: 16px" @click="searchRank">
                 <img src="../../assets/images/courseManage/search0.png" />
                 <span class="btn1text">搜索</span>
               </div>
-              <div class="btn2">
+              <div class="btn2" @click="rankReset">
                 <img src="../../assets/images/courseManage/reset1.png" />
                 <span class="btn2text">重置</span>
               </div>
@@ -91,8 +99,9 @@
               <a-radio-button class="today" value="3">近一个月</a-radio-button>
             </a-radio-group>
           </div>
-          <div class="listdiv"> <div class="slist">
+          <div class="listdiv">
-              <a-list :data-source="stuValue ? datascoreg : datascore">
+            <div class="slist">
+              <a-list :data-source="stuValue ===1? datascoreg : datascore">
                 <template #renderItem="{ item }">
                   <div class="item">
                     <div v-if="item.id == 1" class="itemleft">
@@ -132,39 +141,55 @@
             <div class="groupright">
               <div class="spandiv"><span class="spantext">规则</span></div>
               <div v-if="edit" class="btns">
-                <div class="btn1" @click="edit=!edit">
+                <div class="btn1" @click="edit = !edit">
-                <img src="../../assets/images/projectadd/edit1.png" />
+                  <img src="../../assets/images/projectadd/edit1.png" />
-                <span class="btn1text">编辑</span>
+                  <span class="btn1text">编辑</span>
-              </div>
+                </div>
-            
               </div>
               <div v-else class="btns">
-                <div class="btn1" @click="edit=!edit">
+                <div class="btn1" @click="edit = !edit">
-                <span class="btn1text">保存</span>
+                  <span class="btn1text">保存</span>
-              </div>
+                </div>
               </div>
             </div>
 
             <div v-if="edit" class="pjcb_content">
               <div class="content content1">
-                <span>当前设计下，学员可以获得 </span><span class="scoretext">{{scoresum}}</span><span>积分</span>
+                <span>当前设计下，学员可以获得 </span
+                ><span class="scoretext">{{ scoresum }}</span
+                ><span>积分</span>
               </div>
               <div class="content content2">
-                <span>完成【必修/选修】获得 </span><span class="scoretext">{{score1}} </span><span>积分</span>
+                <span>完成【必修/选修】获得 </span
+                ><span class="scoretext">{{ score1 }} </span><span>积分</span>
               </div>
               <div class="content">
-                <span>优秀学员可获得 </span><span class="scoretext">{{score2}}</span><span>积分</span>
+                <span>优秀学员可获得 </span
+                ><span class="scoretext">{{ score2 }}</span
+                ><span>积分</span>
               </div>
             </div>
             <div v-else class="pjcb_content">
               <div class="content content1">
-                <span>当前设计下，学员可以获得 </span><span class="scoretext">{{scoresum}}</span><span>积分</span>
+                <span>当前设计下，学员可以获得 </span
+                ><span class="scoretext">{{ scoresum }}</span
+                ><span>积分</span>
               </div>
               <div class="content content2">
-                <span>完成【必修/选修】获得 </span><span ><a-input v-model:value="score1" :bordered="false" @change="getScore"/> </span><span>积分</span>
+                <span>完成【必修/选修】获得 </span
+                ><span
+                  ><a-input
+                    v-model:value="score1"
+                    :bordered="false"
+                    @change="getScore"
+                  /> </span
+                ><span>积分</span>
               </div>
-              <div class="content ">
+              <div class="content">
-                <span>优秀学员可获得 </span><span ><a-input v-model:value="score2" :bordered="false" /></span><span>积分</span>
+                <span>优秀学员可获得 </span
+                ><span
+                  ><a-input v-model:value="score2" :bordered="false" /></span
+                ><span>积分</span>
               </div>
             </div>
           </div>
@@ -178,12 +203,19 @@
 <script>
 import StuScoreDetail from "../../components/drawers/StuScoreDetail";
 import { reactive, toRefs } from "vue";
+import * as api from "../../api/index1";
 export default {
   name: "ProjectScore",
-  components:{
+  components: {
     StuScoreDetail,
   },
-  setup() {
+  props: {
+    projectId: {
+      type: Number,
+      default: null,
+    },
+  },
+  setup(props) {
     const state = reactive({
       tabledataStu: [
         {
@@ -194,7 +226,6 @@ export default {
           group: "好好学习",
           diploma: "0",
           operation: "查看",
-          
         },
         {
           key: 2,
@@ -204,7 +235,6 @@ export default {
           group: "天天向上",
           diploma: "0",
           operation: "查看",
-         
         },
         {
           key: 3,
@@ -214,7 +244,6 @@ export default {
           group: "好好学习",
           diploma: "0",
           operation: "查看",
-        
         },
         {
           key: 4,
@@ -224,7 +253,6 @@ export default {
           group: "天天向上",
           diploma: "0",
           operation: "查看",
-          
         },
       ],
 
@@ -336,15 +364,16 @@ export default {
       valueDate: "", //排行榜输入日期
       noticeChecked: true,
       noticeContent: "请输入要发布的公告",
-      activeKeyScore: "1",
+      activeKeyScore: "2",
       stuName: "请输入姓名",
       todayvalue: "1",
       tableDataTotal: 30,
       stuValue: false,
-      Svisible:false,
+      Svisible: false,
-      score1:5,
+      score1: 5,
-      score2:5,
+      score2: 5,
-      edit:true,
+      edit: true,
+      searchRankName:null,//榜单搜索名称
     });
     const getTableData = () => {
       let datas = state.tabledataStu;
@@ -360,7 +389,7 @@ export default {
                 }}
               >
                 查看
-              </div>                
+              </div>
             </div>
           );
         }
@@ -368,139 +397,190 @@ export default {
       state.tabledataStu = datas;
     };
     getTableData();
-  
+
+    const tabsChange = (e) => {
+      if (e == 2) {
+        // console.log('获取项目积分-榜单')
+        scoreRank(1, 1);
+      }
+      rankReset()
+      state.todayvalue='1'
+      state.stuValue=1
+    };
+   
+   
+    //重置
+    const rankReset=()=>{
+        state.searchRankName=null  
+    }
+    // start -------榜单---------------榜单------------榜单------------------榜单---------
+    //学员积分还是小组积分
+     const typeChange = (num) => {
+      state.stuValue = num;
+      scoreRank(state.stuValue , state.todayvalue);
+    };
+    //选择时间
+    const changeday = (e) => {
+      state.todayvalue = e.target.value;
+      scoreRank(state.stuValue , state.todayvalue);
+    };
+     //搜索
+    const searchRank = () => {
+     scoreRank(state.stuValue , state.todayvalue)
+    };
+    //项目积分榜单
+    const scoreRank = (period, type) => {
+      console.log("projectId", props.projectId);
+      let obj = {
+        name: state.searchRankName,
+        pageNo: 1,
+        pageSize: 5,
+        period: Number(period),
+        projectId: props.projectId,
+        type: Number(type),
+      };
+      api
+        .scoreRank(obj)
+        .then((res) => {
+          console.log("获取项目积分-榜单", res);
+        })
+        .catch((err) => {
+          console.log("获取项目积分-榜单失败", err);
+        });
+    };
+    // end -----榜单----------------榜单----------------------榜单-----------榜单----------
     return {
       ...toRefs(state),
-     
+      typeChange,
+      changeday,
+      searchRank,
+      rankReset,
+      tabsChange,
+      scoreRank,
     };
   },
   computed: {
     // 计算属性的 getter
     scoresum: function () {
-        return Number(this.score1)+Number(this.score2);
+      return Number(this.score1) + Number(this.score2);
-      }
+    },
-    }
+  },
 };
 </script>
 <style lang="scss">
 .contentscore {
   margin-top: 20px;
   margin-bottom: 100px;
-  .ant-tabs-nav-wrap{
+  .ant-tabs-nav-wrap {
-    border-bottom:1px solid #ededed;
+    border-bottom: 1px solid #ededed;
   }
   .ant-tabs-tab-btn {
     font-size: 18px;
     font-weight: 700;
   }
   .ant-input {
-        border-radius: 8px;
+    border-radius: 8px;
-        width: 264px;
+    width: 264px;
-        height: 40px;
+    height: 40px;
-    }  
+  }
   .group {
+    display: flex;
+    justify-content: space-between;
+    .groupleft {
       display: flex;
-      justify-content: space-between;
+      align-items: center;
-      .groupleft {
+      margin-left: 32px;
+      .groupname {
+        height: 22px;
+        width: 42px;
+        color: #000000;
+        font-size: 14px;
+      }
+    }
+    .groupright {
+      display: flex;
+      .btn1 {
+        width: 100px;
+        height: 40px;
         display: flex;
         align-items: center;
-        margin-left: 32px;
+        justify-content: center;
-        .groupname {        
+        margin-right: 16px;
-          height: 22px;
+        border: 1px solid #409eff;
-          width: 42px;
+        border-radius: 8px;
-          color: #000000;
+        background: #409eff;
+        cursor: pointer;
+        .btn1text {
+          color: #ffffff;
+          margin-left: 5px;
           font-size: 14px;
         }
-        
       }
-      .groupright {
+      .btn2 {
-        display: flex;
+        width: 100px;
-        .btn1 {
+        height: 40px;
-          width: 100px;
-          height: 40px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          margin-right: 16px;
-          border: 1px solid #409eff;
-          border-radius: 8px;
-          background: #409eff;
-          cursor: pointer;
-          .btn1text {
-            color: #ffffff;
-            margin-left: 5px;
-            font-size: 14px;
-          }
-        }
-        .btn2 {
-          width: 100px;
-          height: 40px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          margin-right: 32px;
-          border: 1px solid #409eff;
-          border-radius: 8px;
-          cursor: pointer;
-          background: #ffffff;
-          .btn2text {
-            color: #409eff;
-            margin-left: 5px;
-            font-size: 14px;
-          }
-        }
-      }
-      
-    }
-  .tableBox {
-      .ant-table-selection-column {
-        padding: 0px !important;
-        // padding-left: 45px !important;
-      }
-
-      .ant-table-thead > tr > th {
-        background-color: rgba(239, 244, 252, 1) !important;
-        color: rgba(0, 0, 0, 0.8500);
-      }
-
-      .ant-table-cell {
-        color: rgba(0, 0, 0, 0.6500);
-      }
-
-      .ant-table-selection-column {
-        padding: 0 !important;
-      }
-
-      th.h {
-        background-color: #eff4fc !important;
-      }
-
-      
-      .ant-table-tbody
-        > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
-        > td {
-          
-        background: #f6f9fd;
-      }
-      .ant-table-tbody > tr > td {
-          border-bottom: 1px solid rgba(240, 244, 254, 1);
-          padding: 16px 16px;
-          .operation {
-          color: rgba(56, 125, 247, 1);
-          cursor: pointer;
-          }
-      }
-      .pa {
-        margin-top: 15px;
-        // height: 20px;
-        // background-color: red;
         display: flex;
+        align-items: center;
         justify-content: center;
-        // bottom: 20px;
+        margin-right: 32px;
+        border: 1px solid #409eff;
+        border-radius: 8px;
+        cursor: pointer;
+        background: #ffffff;
+        .btn2text {
+          color: #409eff;
+          margin-left: 5px;
+          font-size: 14px;
+        }
       }
     }
+  }
+  .tableBox {
+    .ant-table-selection-column {
+      padding: 0px !important;
+      // padding-left: 45px !important;
+    }
+
+    .ant-table-thead > tr > th {
+      background-color: rgba(239, 244, 252, 1) !important;
+      color: rgba(0, 0, 0, 0.85);
+    }
+
+    .ant-table-cell {
+      color: rgba(0, 0, 0, 0.65);
+    }
+
+    .ant-table-selection-column {
+      padding: 0 !important;
+    }
+
+    th.h {
+      background-color: #eff4fc !important;
+    }
+
+    .ant-table-tbody
+      > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
+      > td {
+      background: #f6f9fd;
+    }
+    .ant-table-tbody > tr > td {
+      border-bottom: 1px solid rgba(240, 244, 254, 1);
+      padding: 16px 16px;
+      .operation {
+        color: rgba(56, 125, 247, 1);
+        cursor: pointer;
+      }
+    }
+    .pa {
+      margin-top: 15px;
+      // height: 20px;
+      // background-color: red;
+      display: flex;
+      justify-content: center;
+      // bottom: 20px;
+    }
+  }
   .scorelist {
-    
     padding-bottom: 100px;
     padding-top: 50px;
     .grouprightscore {
@@ -522,7 +602,6 @@ export default {
       }
     }
     .radiobutton {
-     
       margin-top: 23px;
       margin-bottom: 23px;
       justify-content: center;
@@ -533,75 +612,75 @@ export default {
         height: 32px;
       }
     }
-    .listdiv{
+    .listdiv {
-        display: flex;
+      display: flex;
-        justify-content: space-evenly;
+      justify-content: space-evenly;
-        text-align: center;
+      text-align: center;
       .slist {
-      width: 736px;
+        width: 736px;
-      background-color: #f5f8fc;
+        background-color: #f5f8fc;
-      padding-left: 28px;
+        padding-left: 28px;
-      padding-right: 28px;
+        padding-right: 28px;
-      padding-bottom: 20px;
+        padding-bottom: 20px;
-      padding-top: 16px;
+        padding-top: 16px;
-      font-size: 18px;
+        font-size: 18px;
 
-      .item {
+        .item {
-        display: flex;
-        justify-content: space-evenly;
-        text-align: center;
-        border-bottom: none;
-        height: 56px;
-        align-items: center;
-        background-color: white;
-        border-radius: 21px;
-        margin-top: 10px;
-        .itemleft {
-          justify-content: center;
           display: flex;
+          justify-content: space-evenly;
+          text-align: center;
+          border-bottom: none;
+          height: 56px;
           align-items: center;
-          width: 150px;
+          background-color: white;
-          .itemid {
+          border-radius: 21px;
-            font-size: 40px;
+          margin-top: 10px;
-            font-family: math;
+          .itemleft {
-            font-style: italic;
+            justify-content: center;
-            font-weight: 700;
+            display: flex;
-            color: #409eff;
+            align-items: center;
-            margin-left: 5px;
+            width: 150px;
+            .itemid {
+              font-size: 40px;
+              font-family: math;
+              font-style: italic;
+              font-weight: 700;
+              color: #409eff;
+              margin-left: 5px;
+            }
+            .elseid {
+              font-size: 26px;
+              font-family: math;
+              font-weight: 500;
+              margin-left: 40px;
+            }
           }
-          .elseid {
+          .itemcenter {
-            font-size: 26px;
+            width: 300px;
-            font-family: math;
+          }
-            font-weight: 500;
+          .itemright {
-            margin-left: 40px;
+            width: 150px;
           }
-        }
-        .itemcenter {
-          width: 300px;
-        }
-        .itemright {
-          width: 150px;
         }
       }
     }
-    }
   }
   .projectscore {
-  .pjc_body {
+    .pjc_body {
-    margin-left: 34px;
+      margin-left: 34px;
-    margin-right: 34px;
+      margin-right: 34px;
-    .spandiv{
+      .spandiv {
-      position: relative;
+        position: relative;
-      /* height: 100%; */
+        /* height: 100%; */
-      width: 40px;
+        width: 40px;
-      .spantext{
+        .spantext {
-        position: absolute;
+          position: absolute;
-        left: 0;
+          left: 0;
-        bottom: 0px;
+          bottom: 0px;
+        }
       }
-      }
+
-    
+      .groupright {
-    .groupright {
         display: flex;
         justify-content: space-between;
         .btn1 {
@@ -639,34 +718,32 @@ export default {
           }
         }
       }
-    .pjcb_content {
+      .pjcb_content {
-      border: 1px solid #409eff;
+        border: 1px solid #409eff;
-      padding: 20px;
+        padding: 20px;
-      margin-top: 10px;
+        margin-top: 10px;
-      .ant-input{
+        .ant-input {
           width: 46px;
           font-size: 16px;
           color: #409eff;
         }
-      .scoretext{
+        .scoretext {
-        color: #409eff;
+          color: #409eff;
-        font-size: 16px;
+          font-size: 16px;
-        margin-left: 3px;
+          margin-left: 3px;
-        margin-right: 4px;
+          margin-right: 4px;
+        }
+        .pjcb_content :last-child {
+          margin-bottom: 0px;
+        }
+        .content {
+          align-items: center;
+          height: 50px;
+          display: flex;
+        }
+        margin-bottom: 130px;
       }
-      .pjcb_content :last-child {
-        margin-bottom: 0px;
-      }
-      .content {
-        align-items: center;
-        height: 50px;
-        display: flex;
-      }
-      margin-bottom: 130px;
     }
   }
 }
-}
-
-
 </style>

src/views/learningpath/LevelAdd.vue

@@ -919,7 +919,7 @@ export default {
     // const routers = useRoute();
     // const store = useStore();
     const state = reactive({
-      routerId: storage.get("routerId") ? storage.get("routerId") : null, //学习路径页面传的学习路径id
+      routerId: storage.get("routerId") ?JSON.parse(storage.get("routerId"))  : null, //学习路径页面传的学习路径id
       gatename: null, //关卡名称
       gatenamee: null, //学员管理关卡名称
       deleteAll: false, //批量删除学员弹窗

src/views/learningpath/LevelAddDetail.vue

@@ -16,7 +16,7 @@
             :key="item.id"
           > -->
 
- <draggable
+          <draggable
             v-model="level"
             chosenClass="chosen"
             ghostClass="ghost"
@@ -24,35 +24,34 @@
             group="stage"
             animation="500"
           >
-            <template #item="{ element}">
+            <template #item="{ element }">
-             <div
+              <div
-            class="items"
+                class="items"
-            :class="isactive == element.chapterId ? 'active' : ''"
+                :class="isactive == element.chapterId ? 'active' : ''"
-            @click="changebgc(element.chapterId)"
+                @click="changebgc(element.chapterId)"
-          >
+              >
-            <div class="items1">
+                <div class="items1">
-              <div class="boxs_left">
+                  <div class="boxs_left">
-                <div class="script">
+                    <div class="script">
-                  <span style="font-size: 12px; color: #ffffff">说明</span>
+                      <span style="font-size: 12px; color: #ffffff">说明</span>
+                    </div>
+                    <div class="imgIcon"></div>
+                  </div>
+                  <div class="boxs_right">
+                    <div class="imgIcon"></div>
+                  </div>
                 </div>
-                <div class="imgIcon"></div>
+                <div class="items2">
-              </div>
+                  <div class="nname">{{ element.name }}</div>
-              <div class="boxs_right">
+                </div>
-                <div class="imgIcon"></div>
+                <!-- <div class="itemle">
-              </div>
-            </div>
-            <div class="items2">
-              <div class="nname">{{ element.name }}</div>
-            </div>
-            <!-- <div class="itemle">
               <div class="tit">{{ item.remark }}</div>
               <div class="name">{{ item.name }}</div>
             </div> -->
-          </div>
+              </div>
             </template>
           </draggable>
 
-
           <!-- <div
             class="items"
             :class="isactive == index ? 'active' : ''"
@@ -353,175 +352,169 @@
           </div>
           <div class="tableBox">
             <div
+              style="
+                height: 50px;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                background-color: #eff4fc;
+                font-size: 14px;
+                font-weight: 400;
+                color: #999ba3;
+                line-height: 36px;
+                border-bottom: 1px solid #f2f6fc;
+              "
+            >
+              <div
                 style="
-                  height: 50px;
+                  width: 87px;
+                  text-align: center;
                   display: flex;
-                  justify-content: space-between;
+                  margin-left: 46px;
-                  align-items: center;
-                  background-color: #eff4fc;
-                  font-size: 14px;
-                  font-weight: 400;
-                  color: #999ba3;
-                  line-height: 36px;
-                  border-bottom: 1px solid #f2f6fc;
                 "
               >
-                <div
+                <img
                   style="
-                    width: 87px;
+                    width: 16px;
-                    text-align: center;
+                    height: 16px;
-                    display: flex;
+                    cursor: pointer;
-                    margin-left: 46px;
+                    margin-top: 12px;
                   "
-                >
+                  :src="
-                  <img
+                    selectAll === 0
-                    style="
+                      ? require('../../assets/images/notSelect.png')
-                      width: 16px;
+                      : selectAll === 1
-                      height: 16px;
+                      ? require('../../assets/images/selectAll.png')
-                      cursor: pointer;
+                      : require('../../assets/images/select.png')
-                      margin-top: 12px;
+                  "
-                    "
+                  @click="selectRowAll"
-                    :src="
+                />
-                      selectAll === 0
+                <!-- <a-checkbox
-                        ? require('../../assets/images/notSelect.png')
-                        : selectAll === 1
-                        ? require('../../assets/images/selectAll.png')
-                        : require('../../assets/images/select.png')
-                    "
-                    @click="selectRowAll"
-                  />
-                  <!-- <a-checkbox
                     v-model:checked="selectAll"
                     @change="selectRowAll"
                   >
                   </a-checkbox> -->
-                  <div style="margin-top: 2px; margin-left: 8px">类型</div>
+                <div style="margin-top: 2px; margin-left: 8px">类型</div>
-                </div>
-                <div style="width: 120px; text-align: center">任务名称</div>
-                <div style="width: 120px; text-align: center">必修/选修</div>
-                <div style="width: 87px; text-align: center">时长</div>
-                <div
-                  style="width: 120px; text-align: center; margin-right: 20px"
-                >
-                  操作
-                </div>
               </div>
-              <draggable
+              <div style="width: 120px; text-align: center">任务名称</div>
-                v-model="tableData"
+              <div style="width: 120px; text-align: center">必修/选修</div>
-                chosenClass="chosen"
+              <div style="width: 87px; text-align: center">时长</div>
-                ghostClass="ghost"
+              <div style="width: 120px; text-align: center; margin-right: 20px">
-                forceFallback="true"
+                操作
-                group="task"
+              </div>
-                animation="500"
+            </div>
-                @start="onStart"
+            <draggable
-                @end="onEnd"
+              v-model="tableData"
-              >
+              chosenClass="chosen"
-                <template #item="{ element }">
+              ghostClass="ghost"
+              forceFallback="true"
+              group="task"
+              animation="500"
+              @start="onStart"
+              @end="onEnd"
+            >
+              <template #item="{ element }">
+                <div
+                  style="
+                    height: 50px;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    border-bottom: 1px solid #f2f6fc;
+                    font-size: 14px;
+                    font-weight: 400;
+                    color: #4f5156;
+                    line-height: 36px;
+                  "
+                  class="tableRow"
+                >
                   <div
                     style="
-                      height: 50px;
+                      width: 87px;
-                      display: flex;
+                      text-align: center;
-                      justify-content: space-between;
+                      margin-left: 46px;
-                      align-items: center;
+                      position: relative;
-                      border-bottom: 1px solid #f2f6fc;
-                      font-size: 14px;
-                      font-weight: 400;
-                      color: #4f5156;
-                      line-height: 36px;
                     "
-                    class="tableRow"
                   >
-                    <div
+                    <div class="racona">
-                      style="
+                      <div
-                        width: 87px;
+                        class="img"
-                        text-align: center;
+                        style="
-                        margin-left: 46px;
+                          cursor: pointer;
-                        position: relative;
+                          margin-top: 2px;
-                      "
+                          margin-right: 9px;
-                    >
+                          position: absolute;
-                      <div class="racona">
+                          left: -25px;
-                        <div
+                        "
-                          class="img"
+                      ></div>
-                          style="
+                      <a-checkbox
-                            cursor: pointer;
+                        :id="element.id"
-                            margin-top: 2px;
+                        v-model:checked="element.checked"
-                            margin-right: 9px;
+                        @change="changeRow"
-                            position: absolute;
+                      >
-                            left: -25px;
+                      </a-checkbox>
-                          "
+                      <div style="margin-top: 2px; margin-left: 8px">
-                        ></div>
+                        {{ element.lei }}
-                        <a-checkbox
-                          :id="element.id"
-                          v-model:checked="element.checked"
-                          @change="changeRow"
-                        >
-                        </a-checkbox>
-                        <div style="margin-top: 2px; margin-left: 8px">
-                          {{ element.lei }}
-                        </div>
                       </div>
                     </div>
-                    <div style="width: 120px; text-align: center">
+                  </div>
-                      {{ element.creater }}
+                  <div style="width: 120px; text-align: center">
-                    </div>
+                    {{ element.creater }}
-                    <div style="width: 120px; text-align: center">
+                  </div>
-                      <div class="opat">
+                  <div style="width: 120px; text-align: center">
-                        <div class="opacationt clearfix">
+                    <div class="opat">
-                          <a-switch
+                      <div class="opacationt clearfix">
-                            style="margin-left: -50px; margin-top: 3px"
+                        <a-switch
-                            :checked="element.checked1"
+                          style="margin-left: -50px; margin-top: 3px"
-                            size="small"
+                          :checked="element.checked1"
-                            active-color="red"
+                          size="small"
-                            @click="changeCourseType(element.id)"
+                          active-color="red"
-                          />
+                          @click="changeCourseType(element.id)"
-                          <div class="showt clearfix">
+                        />
-                            <div
+                        <div class="showt clearfix">
-                              class="bi"
+                          <div
-                              :style="{
+                            class="bi"
-                                'z-index': element.checked1 ? 999 : 998,
+                            :style="{
-                              }"
+                              'z-index': element.checked1 ? 999 : 998,
-                            >
+                            }"
-                              必修
+                          >
-                            </div>
+                            必修
-                            <div class="xuan">选修</div>
                           </div>
-                        </div>
+                          <div class="xuan">选修</div>
-                      </div>
-                    </div>
-                    <div style="width: 87px; text-align: center">
-                      {{ element.cretime }}分钟
-                    </div>
-                    <div
-                      style="
-                        width: 120px;
-                        text-align: center;
-                        margin-right: 20px;
-                      "
-                    >
-                      <div class="opa">
-                        <div class="opacation">
-                          <span
-                            style="
-                              color: #4ea6ff;
-                              margin-right: 25px;
-                              cursor: pointer;
-                            "
-                          >
-                            编辑
-                          </span>
-                          <span
-                            style="color: #4ea6ff; cursor: pointer"
-                            @click="showDelete(element.id)"
-                          >
-                            删除
-                          </span>
                         </div>
                       </div>
                     </div>
                   </div>
-                </template>
+                  <div style="width: 87px; text-align: center">
-              </draggable>
+                    {{ element.cretime }}分钟
-              
+                  </div>
+                  <div
+                    style="width: 120px; text-align: center; margin-right: 20px"
+                  >
+                    <div class="opa">
+                      <div class="opacation">
+                        <span
+                          style="
+                            color: #4ea6ff;
+                            margin-right: 25px;
+                            cursor: pointer;
+                          "
+                        >
+                          编辑
+                        </span>
+                        <span
+                          style="color: #4ea6ff; cursor: pointer"
+                          @click="showDelete(element.id)"
+                        >
+                          删除
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </template>
+            </draggable>
+
             <!-- <a-table
               style="border: 1px solid #f2f6fe"
               :columns="tableDataFunc()"
@@ -854,7 +847,9 @@ export default {
   },
   setup() {
     const state = reactive({
-      routerId: storage.get("routerId") ? storage.get("routerId") : null,
+      routerId: storage.get("routerId")
+        ? JSON.parse(storage.get("routerId"))
+        : null,
       level: [
         {
           chapterId: "1",
@@ -1081,7 +1076,7 @@ export default {
       updateChapterID: null, //修改关卡id
       // 表示当前触发列表的id,用来发送编辑和删除
       ListChoosedId: 0,
-       selectRow: [], //选择行
+      selectRow: [], //选择行
       selectAll: 0, //0：未选择，1：全选，2：部分选择
     });
     const showDrawerAddDiscuss = () => {
@@ -1166,34 +1161,33 @@ export default {
     // tableData数据赋值方法
     const dataAssignment = (id) => {
       console.log(state.level);
-      for(let i=0;i<state.level.length;i++){
+      for (let i = 0; i < state.level.length; i++) {
-if(state.level[i].chapterId===id){
+        if (state.level[i].chapterId === id) {
-  let array=[]
+          let array = [];
-state.level[i].taskList.forEach((element, ) => {
+          state.level[i].taskList.forEach((element) => {
-        let obj = {
+            let obj = {
-          id: element.routerTaskId,
+              id: element.routerTaskId,
-          key: element.routerTaskId,
+              key: element.routerTaskId,
-          lei: checkType(element.type),
+              lei: checkType(element.type),
-          creater: element.name,
+              creater: element.name,
-          cretime: element.duration,
+              cretime: element.duration,
-          checked1: element.flag,
+              checked1: element.flag,
-          routerTaskId: element.routerTaskId,
+              routerTaskId: element.routerTaskId,
-        };
+            };
-        array.push(obj)
+            array.push(obj);
-      });
+          });
-      state.tableData=array
+          state.tableData = array;
-}
+        }
       }
-      
     };
     const getDetail = (index) => {
       GetRouterDetail(state.routerId)
         .then((res) => {
           state.level = res.data.data.chapterList;
           console.log(state.level);
-          if (index == 0&&state.level.length>0) {
+          if (index == 0 && state.level.length > 0) {
             dataAssignment(state.level[0].chapterId);
-            state.isactive=state.level[0].chapterId
+            state.isactive = state.level[0].chapterId;
           }
           state.deleteModal = false;
         })
@@ -1561,9 +1555,9 @@ state.level[i].taskList.forEach((element, ) => {
     });
     const changebgc = (chapterId) => {
       state.isactive = chapterId;
-       state.selectRow= [], //选择行
+      state.selectRow = [] //选择行
-      state.selectAll=0, //0：未选择，1：全选，2：部分选择
+        state.selectAll = 0 //0：未选择，1：全选，2：部分选择
-      dataAssignment(chapterId);
+        dataAssignment(chapterId);
     };
     const gqxy_hShow = () => {
       state.gqxy_hs = !state.gqxy_hs;
@@ -1611,8 +1605,7 @@ state.level[i].taskList.forEach((element, ) => {
       getDetail(0);
     };
 
-
+    //选择单个任务
- //选择单个任务
     const changeRow = (e) => {
       //selectRow:已经选择的任务的id数组
       let arr = state.selectRow;
@@ -2093,7 +2086,7 @@ state.level[i].taskList.forEach((element, ) => {
         display: flex;
         flex-direction: column;
         align-items: center;
-         .chosen {
+        .chosen {
           // background-color: pink;
         }
         .ghost {
@@ -2384,14 +2377,14 @@ state.level[i].taskList.forEach((element, ) => {
         .tableBox {
           margin-top: 21px;
           margin-bottom: 20px;
-           .chosen {
+          .chosen {
-              background-color: #f2f6fc;
+            background-color: #f2f6fc;
-              opacity: 1;
+            opacity: 1;
-            }
+          }
-            .ghost {
+          .ghost {
-              // background-color: red;
+            // background-color: red;
-              opacity: 0;
+            opacity: 0;
-            }
+          }
           .classify {
             margin-left: 10px !important;
             padding-left: 9px !important;

src/views/projectcenter/TaskAdd.vue

@@ -29,9 +29,9 @@
               <div
                 class="item"
                 :class="
-                  isactive == index && isActive == true ? 'bgcactive' : ''
+                  chooseStageId == element.id  ? 'bgcactive' : ''
                 "
-                @click="changebgc(index, element.id)"
+                @click="changebgc(element.id)"
               >
                 <div class="itemle">
                   <div class="tit">{{ element.tit }}</div>
@@ -820,7 +820,7 @@ export default {
   },
   setup() {
     const state = reactive({
-      projectId: storage.get("projectId") ? storage.get("projectId") : null,
+      projectId: storage.get("projectId") ?JSON.parse(storage.get("projectId"))  : null,
       chooseStageId: null,
       projectNameList: [
         {
@@ -965,7 +965,6 @@ export default {
       cC: false,
       cancelModal: false, //确认取消阶段弹窗
       deleteModal: false, //确认删除弹窗
-      isactive: -1,
       isActive: false,
       deleteLiveID: null, //删除直播id
       deleteExternalID: null, //删除外链id
@@ -1016,6 +1015,7 @@ export default {
     const getTableData = (tableData) => {
       let data = tableData;
       let array = [];
+      console.log('data',data)
       data.map((value) => {
         let obj = {
           id: value.projectTaskId,
@@ -1060,11 +1060,13 @@ export default {
     const getStageData = (tableData) => {
       let data = tableData;
       let array = [];
+       console.log('tableData',data)
       data.map((value) => {
         let obj = {
           id: value.stageId,
           tit: value.name,
           name: value.remark,
+          taskList:value.taskList,
         };
         array.push(obj);
       });
@@ -1214,9 +1216,12 @@ export default {
             console.log("22222", res.data.data.stageList);
             // console.log("22222", res.data.data.stageList);
             let leng = res.data.data.stageList.length;
+            if( leng > 0){
             //获取任务列表
             let arr = res.data.data.stageList[0].taskList;
             getTableData(arr);
+            }
+           
             let stagearr = res.data.data.stageList;
             console.log(stagearr, 111111);
             if (stagearr.length > 0) {
@@ -1830,10 +1835,11 @@ export default {
     const closeDelete = () => {
       state.deleteModal = false;
     };
-    const changebgc = (index, id) => {
+    const changebgc = ( id) => {
-      state.isactive = index;
       state.isActive = !state.isActive;
-      console.log(id);
+       state.selectRow = [] //选择行
+        state.selectAll = 0 //0：未选择，1：全选，2：部分选择
+      console.log('state.level',id,state.level);
       state.chooseStageId = id;
       let final = state.level.find((item) => item.id === id);
       getTableData(final.taskList);
@@ -2393,7 +2399,7 @@ export default {
         }
         .bgcactive {
           opacity: 1;
-          transition: all 0.5s;
+          // transition: all 0.5s;
         }
       }
     }

src/views/projectcenter/TaskPage.vue

@@ -45,6 +45,7 @@
         v-model:activeKey="activeKey"
         size="large"
         :tabBarStyle="{ marginLeft: '10px', marginTop: '5px' }"
+        @change="tabsChange"
       >
         <a-tab-pane key="1" tab="概览">
           <div class="split"></div>
@@ -809,7 +810,7 @@
           <NoticePub></NoticePub>
         </a-tab-pane>
         <a-tab-pane key="5" tab="项目积分">
-          <ProjectScore></ProjectScore>
+          <ProjectScore :projectId="projectId"></ProjectScore>
         </a-tab-pane>
         <a-tab-pane key="6" tab="排行榜">
           <div class="split"></div>
@@ -837,15 +838,16 @@
                     v-model:value="valueDate"
                     style="border-radius: 8px; height: 40px; margin-left: 5px"
                     :placeholder="['      开始时间', '        结束时间']"
+                    @change="rankTimeChange"
                   />
                 </div>
               </div>
               <div class="right">
-                <div class="btn btn1">
+                <div class="btn btn1" @click="rankSearch">
                   <div class="img1"></div>
                   <div class="te">搜索</div>
                 </div>
-                <div class="btn btn2">
+                <div class="btn btn2" @click="rankReset">
                   <div class="img2"></div>
                   <div class="te">重置</div>
                 </div>
@@ -1664,6 +1666,7 @@ import NoticePub from "../../components/drawers/NoticePub";
 import ProjectScore from "../../components/drawers/ProjectScore";
 import TaskImpStu from "../../components/drawers/TaskFaceIn";
 import { storage } from "../../api/storage";
+import * as api from "../../api/index1";
 export default {
   name: "taskPage",
   components: {
@@ -1686,7 +1689,7 @@ export default {
   },
   setup() {
     const state = reactive({
-      projectId: storage.get("projectId") ? storage.get("projectId") : null,
+      projectId: storage.get("projectId") ?JSON.parse(storage.get("projectId")) : null,
       goodstuList: [
         {
           id: 1,
@@ -1799,7 +1802,7 @@ export default {
       checkedd2: false, //设置按钮2
       radioV1: "",
       radioV2: "",
-      activeKey: "1", //1:概览 2.任务...
+      activeKey: "5", //1:概览 2.任务...
       activeKey1: "8", //8:学员管理 9：小组管理
       activeKey2: "3",
       inputValue: 5,
@@ -1811,7 +1814,7 @@ export default {
       valuegood: "",
       valuestub: "", //学员管理部门
       valuestug: "", //学员管理小组名称
-      valueName: "", //排行榜输入姓名
+
       valueDate: "", //排行榜输入日期
       noticeChecked: true,
       noticeContent: "",
@@ -2267,6 +2270,11 @@ export default {
       showTestText: "",
       //直播、活动页面传递参数
       showkaoqinText: "",
+
+      //排行榜时间
+      rankStartTime: null,
+      rankEndTime: null,
+      valueName: "", //排行榜输入姓名
     });
 
     // 输入接入 -- start --
@@ -2665,6 +2673,78 @@ export default {
     const delete_exit = () => {
       state.delete_hs = false;
     };
+
+    //tabs切换
+    const tabsChange = (e) => {
+     
+      //排行榜
+      if (e == 6) {
+        //获取进度榜
+      getbillboard(1, 1);
+      //获取学分榜
+      getbillboard(2, 1);
+      //获取学时榜
+      getbillboard(3, 1);
+      } else {
+        rankReset();
+      }
+    };
+
+    
+
+
+
+    // start -------排行榜---------------排行榜------------排行榜------------------排行榜---------
+    //选择搜索时间
+    const rankTimeChange = (e, date) => {
+      let startTime = date[0] + " 00:00:00";
+      let endTime = date[1] + " 23:59:59";
+      state.rankStartTime = new Date(startTime).getTime() / 1000;
+      state.rankEndTime = new Date(endTime).getTime() / 1000;
+      console.log("e", state.rankStartTime, state.rankEndTime);
+    };
+    //获取排行榜 category:榜单类别参数 type:人员类别参数
+    const getbillboard = (category, type) => {
+      let obj = {
+        beginTime: state.rankStartTime,
+        category: category,
+        endTime: state.rankEndTime,
+        name: state.valueName,
+        projectId: state.projectId,
+        stageId: 0,
+        type: type,
+      };
+      api
+        .billboard(obj)
+        .then((res) => {
+          console.log("获取成功", res);
+        })
+        .catch((err) => {
+          console.log("获取失败", err);
+        });
+    };
+
+    //搜索
+    const rankSearch = () => {
+      //获取进度榜
+      getbillboard(1, 1);
+      //获取学分榜
+      getbillboard(2, 1);
+      //获取学时榜
+      getbillboard(3, 1);
+    };
+    //重置
+    const rankReset = () => {
+      state.rankStartTime = null;
+      state.rankEndTime = null;
+      state.valueDate = null;
+      state.valueName = null;
+    };
+
+    // end -----排行榜----------------排行榜----------------------排行榜-----------排行榜----------
+
+
+
     return {
       ...toRefs(state),
       totask,
@@ -2706,6 +2786,15 @@ export default {
       showhuodModal,
       closehuodModal,
       closezhibModal,
+
+      tabsChange,
+
+     
+
+      rankTimeChange,
+      getbillboard,
+      rankSearch,
+      rankReset,
     };
   },
 };