报告滚动

src/components/pages/components/studentReport.vue

@@ -3,8 +3,8 @@
     <div class="sr_head">
       学生成长报告
       <div class="sr_headBtnS">
-        <el-button v-if="seatNum > 0 && typeNum*1 !=1" type="primary" size="small" @click="upStu">上一位</el-button>
-        <el-button  style="margin-left: 10px;" v-if="seatNum < studentList.length-1 && typeNum*1 !=1" type="primary" size="small" @click="nextStu">下一位</el-button>
+        <el-button v-if="seatNum > 0 && typeNum !=1" type="primary" size="small" @click="upStu">上一位</el-button>
+        <el-button  style="margin-left: 10px;" v-if="seatNum < studentList.length-1 && typeNum !=1" type="primary" size="small" @click="nextStu">下一位</el-button>
         <el-button style="margin-left: 10px;" type="primary" size="small" @click="downloadFile('https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/student01-%E5%AD%A6%E7%94%9F%E6%88%90%E9%95%BF%E6%8A%A5%E5%91%8A1719315423787.pdf');">导出报告</el-button>
         <el-button style="margin-left: 10px;" @click="pageBack" type="primary" size="small">返回</el-button>
       </div>
@@ -74,8 +74,8 @@ export default {
           default: '',
     },
     typeNum: {
-          type: String,
-          default: '0',
+          type: Number,
+          default: 0,
     }
   },
   components: {

src/components/pages/components/studentWorksDetail.vue

@@ -303,13 +303,14 @@
                   class="allBox"
                   v-for="(sin, sIndex) in sInfo"
                   :key="sIndex"
+                  
                 >
                   <div
                     class="zyBox"
                     v-if="sin.course"
                     :class="{ fullZyBox: full }"
                   >
-                    <div class="top">
+                    <div class="top" :id="`${sin.stage}+${sin.task}`">
                       <div class="jdName">
                         <div>
                           {{
@@ -1427,14 +1428,16 @@
                         </div>
                         <div
                           class="worksTarget"
-                          v-if="worksDetail[sIndex].eList[0].target"
+                          v-if="isShow(worksDetail[sIndex]
+                              .eList)"
                         >
                           <span>目标</span>
                         </div>
                         <!-- {{ worksDetail[sIndex] }}  -->
                         <div
                           class="worksTargetCon"
-                          v-if="worksDetail[sIndex].eList[0].target"
+                          v-if="isShow(worksDetail[sIndex]
+                              .eList)"
                         >
                           <div
                             v-for="(item, tarIndex) in worksDetail[sIndex]
@@ -1856,6 +1859,19 @@ export default {
         }
         return (sco / (num - 1)).toFixed(1);
       };
+    },
+    isShow(){
+      return function (val) {
+        let num = 0
+
+       val.forEach(i => {
+        if (i.target) {
+          num++
+        }
+       });
+       
+        return num*1
+      }
     }
   },
   methods: {
@@ -3297,12 +3313,15 @@ export default {
           var imgHeight = (592.28 / contentWidth) * contentHeight; // A4总高度
           var pageData = canvas.toDataURL("image/jpeg", 1.0);
 
-          var pdf = new jspdf("", "pt", "a4");
+          // var pdf = new jspdf("", "pt", "a4");
+          var pdf = new jspdf('', 'pt', [contentWidth, contentHeight]);
+
 
           //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
           //当内容未超过pdf一页显示的范围，无需分页
           // if (leftHeight < pageHeight) {
-          pdf.addImage(pageData, "JPEG", 10, 0, imgWidth - 20, imgHeight - 20);
+          // pdf.addImage(pageData, "JPEG", 10, 0, imgWidth - 20, imgHeight - 20);
+          pdf.addImage(pageData, 'JPEG', 0, 0, contentWidth, contentHeight );
 
           pdf.save(
             this.allWorks.course + "-" + this.allWorks.sName + "学生作业集.pdf"
@@ -3530,15 +3549,22 @@ export default {
       this.dyList2[s].isOpen = !this.dyList2[s].isOpen;
     },
     openTask(s, i, dyi, navi) {
+      console.log('openTask5',s, i, dyi, navi);
       
       if (!this.dyList2[dyi].taskList[navi].isWork) {
         this.$message.warning("该任务暂时没提交作业");
       } else {
+        const element = document.getElementById(`${s}+${i}`);
+        if (element) {
+          element.scrollIntoView({
+            behavior: 'smooth'
+          });
+        }
         var a = s + "-" + i;
-        var b = document.getElementById(a);
-        var d = b.getAttribute("scrollindex");
-        var c = document.getElementsByClassName("shuBox")[0];
-        c.scrollTop = parseInt(d) * 375;
+        // var b = document.getElementById(a);
+        // var d = b.getAttribute("scrollindex");
+        // var c = document.getElementsByClassName("shuBox")[0];
+        // c.scrollTop = parseInt(d) * 375;
         this.stageIndex = s;
         this.taskCount = i;
         this.navId = a;
@@ -4134,10 +4160,16 @@ export default {
   font-size: 16px;
   color: #7c7c7c;
   width: 100%;
-  margin-bottom: 10px;
+  /* margin-bottom: 10px; */
   display: flex;
   justify-content: space-between;
   align-items: center;
+  padding: 15px 20px 15px;
+  box-sizing: border-box;
+  z-index: 99;
+  background-color:#ededed;
+  position: sticky;
+    top: 0;
 }
 
 .course_t {
@@ -4321,7 +4353,8 @@ export default {
 .dialog_diy2 >>> .el-dialog__body,
 .dialog_diy2 >>> .el-dialog__footer {
   background: #ededed;
-  padding: 15px 20px;
+  /* padding: 15px 20px; */
+  padding: 0;
 }
 
 .a_addBox2 {
@@ -4372,7 +4405,7 @@ export default {
   align-items: center;
 }
 .a_add_body >>> .el-radio__label{
-  font-size: 14px !important;
+font-size: 14px !important;
 }
 
 .a_add_input {
@@ -4898,7 +4931,9 @@ ol {
   align-items: flex-start;
   width: 100%;
   height: calc(100% - 60px);
-  overflow: auto;
+  padding: 0 20px 15px;
+  box-sizing: border-box;
+  /* overflow: auto; */
 }
 
 .right_score {
@@ -4911,11 +4946,11 @@ ol {
   width: 20%;
   margin-right: 10px;
   background: rgb(255, 255, 255);
-  /* padding-right: 10px; */
-  /* height: 500px; */
-  /* height: 100%; */
-  min-height: 800px;
+  height: calc(100vh - 178px);
+  overflow: auto;
   border-radius: 5px;
+  position: sticky;
+  top: 70px;
 }
 
 .cTitle {
@@ -5111,7 +5146,9 @@ ol {
   /* height: 500px; */
   height: 100%;
 }
-
+.shuBox > .allBox:last-child {
+  margin-bottom: 0;
+}
 .answerbox {
   display: flex;
   flex-direction: row;
@@ -5166,11 +5203,15 @@ ol {
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: flex-end;
-  margin: 10px 0;
+  /* margin: 10px 0; */
+  margin: 0px 0 20px;
+  padding: 0 20px;
+  box-sizing: border-box;
 }
 
 .fullStyle >>> .el-dialog__body {
-  height: calc(100% - 68px) !important;
+  height: calc(100% - 40px) !important;
+  /* height: 100%; */
   overflow: auto;
 }
 

src/components/pages/components/worksDetail2.vue

@@ -297,7 +297,9 @@
                 >
               </div>
             </div>
+
             <div class="cBox">
+              
               <div class="pb_left">
                 <el-tooltip
                   class="cTitle"
@@ -335,6 +337,12 @@
                               dy.id == stageIndex,
                           }"
                         >
+                        <!-- :class="{
+                            openTaskActive:
+                              nav.id == taskCount &&
+                              dy.id + '-' + nav.id == navId &&
+                              dy.id == stageIndex,
+                          }" -->
                           <div
                             class="vedioNav"
                             :class="{
@@ -381,8 +389,9 @@
                     class="zyBox"
                     v-if="sin.course"
                     :class="{ fullZyBox: full }"
+                    
                   >
-                    <div class="top">
+                    <div class="top" :id="`${sin.stage}+${sin.task}`">
                       <div class="jdName">
                         <div>
                           {{
@@ -1496,9 +1505,9 @@
                             ></el-rate>
                           </div>
                         </div>
-                        <div class="worksTarget" v-if="worksDetail[sIndex].eList[0].target"><span>目标</span></div>
+                        <div class="worksTarget" v-if="isShow(worksDetail[sIndex].eList)"><span>目标</span></div>
                         <!-- {{ worksDetail[sIndex] }}  -->
-                        <div class="worksTargetCon" v-if="worksDetail[sIndex].eList[0].target">
+                        <div class="worksTargetCon" v-if="isShow(worksDetail[sIndex].eList)">
                             <div v-for="(item,tarIndex) in worksDetail[sIndex].eList" :key="tarIndex">
                               <span v-if="item.target"> {{ item.target }}</span>
                             </div>
@@ -1892,6 +1901,19 @@ export default {
         }
         return (sco / (num - 1)).toFixed(1)
       }
+    },
+    isShow(){
+      return function (val) {
+        let num = 0
+
+       val.forEach(i => {
+        if (i.target) {
+          num++
+        }
+       });
+       
+        return num*1
+      }
     }
   },
   watch: {
@@ -2082,12 +2104,12 @@ export default {
         var imgHeight = 592.28/contentWidth * contentHeight; // A4总高度
         var pageData = canvas.toDataURL('image/jpeg', 1.0);
 
-        var pdf = new jspdf('', 'pt', 'a4');
+        var pdf = new jspdf('', 'pt', [contentWidth, contentHeight]);
 
         //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
         //当内容未超过pdf一页显示的范围，无需分页
         // if (leftHeight < pageHeight) {
-        pdf.addImage(pageData, 'JPEG', 10, 0, imgWidth-20, imgHeight-20 );
+        pdf.addImage(pageData, 'JPEG', 0, 0, contentWidth, contentHeight );
        
         pdf.save( this.allWorks.course+'-'+ this.allWorks.sName+'学生作业集.pdf')
         this.worksLoading = false
@@ -3912,16 +3934,26 @@ export default {
       this.dyList2[s].isOpen = !this.dyList2[s].isOpen;
     },
     openTask(s, i, dyi, navi) {
-      console.log('openTask',s, i, dyi, navi);
+      console.log('openTask2',s, i, dyi, navi);
 
       if (!this.dyList2[dyi].taskList[navi].isWork) {
         this.$message.warning("该任务暂时没提交作业");
       } else {
+        const element = document.getElementById(`${s}+${i}`);
+        if (element) {
+          element.scrollIntoView({
+            behavior: 'smooth'
+          });
+        }
+        
+
+        // element.scrollTop = element.scrollTop - 70;
+        // window.scrollBy(0, -70); // 第二个参数是负数表示向上滚动
+
         var a = s + "-" + i;
-        var b = document.getElementById(a);
-        var d = b.getAttribute("scrollindex");
-        var c = document.getElementsByClassName("shuBox")[0];
-        c.scrollTop = parseInt(d) * 375;
+        // var b = document.getElementById(a);
+        // var d = b.getAttribute("scrollindex");
+        // c.scrollTop = parseInt(d) * 375;
         this.stageIndex = s;
         this.taskCount = i;
         this.navId = a;
@@ -4534,10 +4566,16 @@ export default {
   font-size: 16px;
   color: #7c7c7c;
   width: 100%;
-  margin-bottom: 10px;
+  /* margin-bottom: 10px; */
   display: flex;
   justify-content: space-between;
   align-items: center;
+  padding: 15px 20px 15px;
+  box-sizing: border-box;
+  z-index: 99;
+  background-color:#ededed;
+  position: sticky;
+    top: 0;
 }
 
 .course_t {
@@ -4722,7 +4760,7 @@ export default {
 .dialog_diy2 >>> .el-dialog__body,
 .dialog_diy2 >>> .el-dialog__footer {
   background: #ededed;
-  padding: 15px 20px;
+  padding: 0px;
 }
 
 .a_addBox2 {
@@ -4988,6 +5026,8 @@ font-size: 14px !important;
   align-items: flex-start;
   width: 100%;
   height: calc(100% - 60px);
+  padding: 0 20px 15px;
+  box-sizing: border-box;
   /* overflow: auto; */
 }
 
@@ -5003,11 +5043,16 @@ font-size: 14px !important;
   background: rgb(255, 255, 255);
   /* padding-right: 10px; */
   /* height: 500px; */
-  /* height: 100%; */
-  min-height: 800px;
+  /* height:calc(100% - 65px); */
+  height: calc(100vh - 178px);
+  overflow: auto;
+  /* min-height: 800px; */
   border-radius: 5px;
+  position: sticky;
+  top: 70px;
 }
 
+
 .cTitle {
   background: #205cc6;
   width: 85%;
@@ -5201,7 +5246,9 @@ font-size: 14px !important;
   /* height: 500px; */
   height: 100%;
 }
-
+.shuBox > .allBox:last-child {
+  margin-bottom: 0;
+}
 .answerbox {
   display: flex;
   flex-direction: row;
@@ -5256,11 +5303,14 @@ font-size: 14px !important;
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: flex-end;
-  margin: 10px 0;
+  margin: 0px 0 20px;
+  padding: 0 20px;
+  box-sizing: border-box;
 }
 
 .fullStyle >>> .el-dialog__body {
-  height: calc(100% - 68px) !important;
+  height: calc(100% - 40px) !important;
+  /* height: 100%; */
   overflow: auto;
 }
 

src/components/pages/works.vue

@@ -358,7 +358,7 @@
             <el-select
               class="r_select"
               v-model="uname"
-              placeholder="请选择学生"
+              placeholder="请选择班级"
               filterable
               @change="searchWork2"
             >
@@ -397,7 +397,7 @@
               align="center"
             >
             <template slot-scope="scope">
-              <div>{{ scope.row.class ? scope.row.class : '-' }}</div>
+              <div class="ellipsis">{{ scope.row.class ? scope.row.class : '-' }}</div>
             </template>
             </el-table-column>
             <el-table-column align="center" label="操作" min-width="20">
@@ -1002,4 +1002,9 @@ export default {
   padding: 0 90px 0px 0px;
   box-sizing: border-box;
 }
+.ellipsis{
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 </style>