[UPDATE] fix bug in *Screen

src/views/historicTaskScreen.vue

@@ -690,9 +690,9 @@
 
                 <el-row type="flex" justify="end" style="margin-top: 10px;">
                   <el-pagination
-                      :total="gridData2.data.length"
-                      :current-page="gridData2.currentPage"
-                      :page-size="gridData2.pageSize"
+                      :total="this.gridData2.length"
+                      :current-page="this.gridData2.currentPage"
+                      :page-size="this.gridData2.pageSize"
                       :page-sizes="[5,10, 15,20]"
                       layout="total, prev, pager, next, sizes"
                       @current-change="onCurrentPageChange"
@@ -810,6 +810,7 @@ export default {
       gridData:[],
       gridData2:{
         data: [],
+        length:0,
         currentPage:1,
         pageSize:10,
         paged:true,
@@ -829,7 +830,12 @@ export default {
     pagedData() { // 动态计算当前页的数据
       const start = (this.gridData2.currentPage - 1) * this.gridData2.pageSize
       const end = start + this.gridData2.pageSize
-      return this.gridData2.data.slice(start, end)
+      if(this.gridData2.data!=null){
+        return this.gridData2.data.slice(start, end)
+      }else{
+        return null
+      }
+
     }
   },
   methods:{
@@ -2680,6 +2686,7 @@ export default {
       const { subjectScore } = item
       this.gridData=subjectScore
       this.gridData2.data=subjectScore
+      this.gridData2.length=this.gridData2.data.length
     },
     // 全屏事件
     showFull(id){

src/views/mainScreen.css

@@ -159,16 +159,7 @@
     box-sizing: border-box;
     position: relative;
   }
-  .dialog_map_box {
-    /* background-image:url('../assets/img/bg.jpg'); */
-    background-repeat: no-repeat;
-    width: 100%;
-    height: 100%;
-    /* background-size:100% 100%; */
-    /* padding: 108px 10px 10px 10px; */
-    box-sizing: border-box;
-    position: relative;
-  }
+
   
   .task_header {
     color: #fff;
@@ -200,7 +191,7 @@
     top: 55px;
     left: 1%;
     right: 50%;
-    color: #FFFFFF;
+    color: #ffffff;
     font-weight: 550;
     font-size: 20px;
     text-align: center;
@@ -219,378 +210,42 @@
 .tag:hover{
     cursor: pointer;
 }
-  
-  .task_name_header {
-    color: #fff;
-    font-weight: 600;
-    font-size: 22px;
-    font-family: YouSheBiaoTiHei;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    z-index: 100;
-    top: -34px;
-  }
-  
+
   .content_cotainer {
     display: flex;
     align-items: flex-start;
     height: 100%;
     width: 100%;
   }
-  .task_base_info_table {
-    width: 420px;
-    padding: 10px;
-    box-sizing: border-box;
-    /* border: 1px solid #4F8BC7; */
-    border-radius: 6px;
-    height: 100%;
-    margin-right: 10px;
-    position: relative;
-    z-index: 100;
-    overflow: hidden;
-  
-    background-image: url("../assets/img/newleft.png");
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    box-sizing: border-box;
-    position: relative;
-    padding: 24px 24px 5px 24px;
-    box-sizing: border-box;
-  }
-  .center_chart_cotainer {
-    height: 100%;
-    margin-right: 10px;
-    width: calc(100% - 770px);
-  }
-  .center_chart_cotainer_task {
-    height: 100%;
-    margin-right: 10px;
-    width: 900%;
-  }
-  .task_chart_cotainer {
-    width: 350px;
-    box-sizing: border-box;
-    border-radius: 6px;
-    height: 100%;
-    padding-bottom: 10px;
-    box-sizing: border-box;
-  }
-  .task_detail_cotainer {
-    width: 100%;
-    padding: 24px 10px 20px 10px;
-    box-sizing: border-box;
-    border: 1px solid #4f8bc7;
-    border-radius: 6px;
-    height: calc(100% - 250px);
-    position: relative;
-  }
 
-  /*边框线*/
-  .task_detail_cotainer_task {
-    width: 100%;
-    padding: 24px 10px 20px 10px;
-    box-sizing: border-box;
-    border: 1px solid #4f8bc7;
-    border-radius: 6px;
-    height: 100%;
-    position: relative;
+.center_chart_cotainer_task {
+  height: 100%;
+  /*margin-right: 10px;*/
+  /*background-color: #6cfcdb;*/
+  width: 100%;
+}
 
-    /*background: #6cfcdb;*/
-  }
-  .task_detail_dialog {
+  .task_detail_cotainer {
     width: 100%;
-    padding: 48px 20px 20px 20px;
+    padding: 20px 10px 20px 10px;
     box-sizing: border-box;
     border: 1px solid #4f8bc7;
     border-radius: 6px;
+    height: calc(100% - 250px);
+    /*background-color: #a99525;*/
     position: relative;
   }
-  .inner_info_table {
-    opacity: 0.5;
-    background: linear-gradient(270deg, #10427b 0%, #031429 100%);
-    width: 100%;
-    height: 100%;
-    border: 1px solid #4f8bc7;
-    overflow: hidden;
-  }
-  .task_other_cotainer {
-    box-sizing: border-box;
-    border-radius: 6px;
-    height: 86vh;
-  }
-  .header_line_style {
-    height: 10px;
-    position: absolute;
-    top: -2px;
-    width: 100%;
-    left: 0;
-    right: 0;
-    border-radius: 6px;
-    background-image: linear-gradient(to right, #0674ef 0%, #45fec1 100%);
-  }
-  .headerTitle {
-    background-image: url("../assets/img/headerTitle.png");
-    background-repeat: no-repeat;
-    width: 100%;
-    height: 40px;
-    background-size: 50% 100%;
-    position: absolute;
-    left: 75%;
-    right: 50%;
-    top: 6px;
-    transform: translate(-50%, -50%);
-  }
-  .chart_item_box {
-    width: 100%;
-    height: 33%;
-    padding: 10px;
-    box-sizing: border-box;
-    /* border: 1px solid #4F8BC7; */
-    border-radius: 6px;
-    margin-bottom: 10px;
-    position: relative;
-  
-    background-image: url("../assets/img/newModule.png");
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    box-sizing: border-box;
-    position: relative;
-    padding: 20px 12px 5px 12px;
-    box-sizing: border-box;
-  }
-  .chart_item_box_foooter {
-    width: 100%;
-    height: 100%;
-    padding: 10px;
-    box-sizing: border-box;
-    /* border: 1px solid #4F8BC7; */
-    border-radius: 6px;
-  
-    background-image: url("../assets/img/newLong.png");
-    background-repeat: no-repeat;
-    width: 100%;
-    height: 100%;
-    background-size: 100% 100%;
-    box-sizing: border-box;
-    position: relative;
-    padding: 18px 24px 5px 24px;
-    box-sizing: border-box;
-  }
-  .task_footer_chart {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-top: 10px;
-    height: 240px;
-  }
-  .task_number_box {
-    width: 100%;
-    height: 80px;
-    background: linear-gradient(140deg, #48a5e8 0%, #0a427c 50%, #1d71af 100%);
-    border-radius: 6px;
-    opacity: 1;
-    border: 1px solid;
-    border-image: linear-gradient(180deg, rgba(101, 178, 215, 1), rgba(255, 255, 255, 1), rgba(53, 123, 174, 1)) 1 1;
-    margin: 0 20px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 20px;
-    box-sizing: border-box;
-    color: #fff;
-    margin-left: 0;
-  }
-  .subject_number_box {
-    width: 220px;
-    height: 60px;
-    background: linear-gradient(140deg, #48a5e8 0%, #0a427c 50%, #1d71af 100%);
-    border-radius: 6px;
-    opacity: 1;
-    border: 1px solid;
-    border-image: linear-gradient(180deg, rgba(101, 178, 215, 1), rgba(255, 255, 255, 1), rgba(53, 123, 174, 1)) 1 1;
-    margin: 0 20px 10px 20px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 20px 20px 20px 0px;
-    box-sizing: border-box;
-    color: #fff;
-    margin-left: 0;
-    font-size: 12px;
-  }
-  .task_outer_cotnainer {
-    height: 100%;
-  }
-  .task_list_container {
-    color: #fff;
-    /* height: 85vh; */
-    height: 90%;
-    overflow-y: auto;
-    width: 100%;
-    padding: 20px 0px 20px 0;
-    box-sizing: border-box;
-    overflow-x: hidden;
-  }
-  .taskNumber_style {
-    font-size: 50px;
-    font-family: YouSheBiaoTiHei;
-    color: rgb(8, 252, 183);
-    line-height: 65px;
-    text-shadow: 0px 4px 4px #004279;
-  }
-  .SubjectNumber_style {
-    font-size: 30px;
-    font-family: YouSheBiaoTiHei;
-    color: rgb(8, 252, 183);
-    line-height: 65px;
-    text-shadow: 0px 4px 4px #004279;
-  }
-  .task_num_left_style {
-    display: flex;
-    align-items: center;
-    font-size: 22px;
-    font-family: PingFangSC-Semibold, PingFang SC;
-    font-weight: 600;
-    color: #ffffff;
-    letter-spacing: 1px;
-  }
-  .subject_num_left_style {
-    display: flex;
-    align-items: center;
-    font-size: 16px;
-    font-family: PingFangSC-Semibold, PingFang SC;
-    font-weight: 600;
-    color: #ffffff;
-    letter-spacing: 0.5px;
-    white-space: nowrap;
-  }
-  .task_list_header {
-    display: flex;
-    align-items: center;
-    font-size: 16px;
-    font-family: PingFangSC-Semibold, PingFang SC;
-    font-weight: 600;
-    color: #ffffff;
-    line-height: 30px;
-    letter-spacing: 1px;
-    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
-    margin-bottom: 0px;
-  }
-  .search_box {
-    margin: 10px 0 20px 0;
-  }
-  .task_item_left {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-  }
-  .left_point {
-    width: 10px;
-    height: 10px;
-    background: #60fbd7;
-    opacity: 0.5;
-    border-radius: 50%;
-  }
-  .left_line {
-    width: 1px;
-    border-right: 2px dashed #297c76;
-    min-height: 170px;
-    margin-left: 3px;
-  }
-  .task_item_container {
-    display: flex;
-    align-items: flex-start;
-  }
-  .task_content_header {
-    font-size: 16px;
-    font-family: PingFangSC-Medium, PingFang SC;
-    font-weight: 500;
-    color: #6cfcdb;
-    margin-left: 10px;
-    margin-top: -8px;
-  }
-  .task_content_description {
-    padding: 10px 0px 0 10px;
-    display: flex;
-    align-items: flex-start;
-    box-sizing: border-box;
-    margin-left: 10px;
-    margin-top: 10px;
-    /* background: #004279; */
-  }
-  .task_name {
-    font-size: 14px;
-    font-family: PingFangSC-Medium, PingFang SC;
-    font-weight: 500;
-    color: #ffffff;
-  }
-  .task_participantName {
-    margin-top: 10px;
-    font-size: 14px;
-    font-family: PingFangSC-Light, PingFang SC;
-    font-weight: 300;
-    color: #ffffff;
-    opacity: 0.6;
-    width: 305px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .task_date_box {
-    font-size: 12px;
-    font-family: PingFangSC-Regular, PingFang SC;
-    font-weight: 400;
-    color: #ffffff;
-    margin-top: 10px;
-  }
-  .task_data {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-  }
-  .view_more {
-    background: rgba(3, 79, 135, 0.24);
-    border-radius: 2px;
-    border: 1px solid #05ddf7;
-    padding: 2px 20px;
-    box-sizing: border-box;
-    white-space: nowrap;
-    text-align: center;
-    margin: 10px 0;
-    width: 50%;
-    float: left;
-  }
-  .view_more:hover {
-    cursor: pointer;
-  }
-  .task_content_right {
-    flex: 1;
-  }
-  .task_content_box {
-    flex: 1;
-  }
-  .date_between {
-    opacity: 0.8;
-  }
-  .grade_box {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    position: relative;
-  }
-  .grade_item {
-    font-size: 40px;
-    font-family: YouSheBiaoTiHei;
-    color: #f1d73a;
-    text-shadow: 0px 4px 4px #004279;
-    min-width: 70px;
-    text-align: center;
-    position: absolute;
-    right: 0;
-    top: -20px;
-  }
+.task_detail_cotainer_task {
+  width: 100%;
+  margin-top: -5px;
+  padding: 20px 10px 20px 10px;
+  box-sizing: border-box;
+  border: 1px solid #4f8bc7;
+  border-radius: 6px;
+  height: 101%;
+  position: relative;
+  /*background-color: #b26cfc;*/
+}
   ::-webkit-scrollbar {
     /* 去除滚动条 */
     width: 0;
@@ -598,123 +253,18 @@
     opacity: 0;
     display: none;
   }
-  .noTaskData {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding-top: 100px;
-    font-weight: 600;
-  }
-  .inner_info_table_status {
-    width: 100%;
-  }
-  .inner_info_table_precent {
-    text-align: center;
-  }
-  .task_dialog_box {
-    background: linear-gradient(295deg, #000712 0%, #00040b 100%);
-    padding: 10px;
-    box-sizing: border-box;
-    color: #fff;
-  }
-  .task_dialog_box_other {
-    padding: 10px;
-    box-sizing: border-box;
-    color: #fff;
-  }
-  .task_dialog_name {
-    margin-bottom: 12px;
-    font-size: 14px;
-    font-family: PingFangSC-Medium, PingFang SC;
-    font-weight: 500;
-    color: #ffffff;
-  }
-  .task_dialog_particpater {
-    font-size: 14px;
-    font-family: PingFangSC-Light, PingFang SC;
-    font-weight: 300;
-    color: #d2d7de;
-  }
-  .task_date_status {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    background: #021735;
-    padding: 6px 10px;
-    box-sizing: border-box;
-    margin-bottom: 12px;
-  }
-  .date_task_dialog {
-    color: #f9fafa;
-    font-size: 12px;
-  }
-  .status_task_dialog {
-    color: #6cfcdb;
-    font-size: 12px;
-  }
-  .subject_item_header {
-    display: flex;
-    align-content: flex-start;
-  }
-  .subject_item_header:hover {
-    cursor: pointer;
-  }
-  .subject_child_item {
-    padding-left: 25px;
-    line-height: 24px;
-  }
-  .suvject_item_container {
-    color: #f9fafa;
-    font-size: 14px;
-    padding-top: 8px;
-  }
-  .download_file:hover {
-    cursor: pointer;
-  }
-  .download_file {
-    color: #6cfcdb;
-  }
-  .view_table_style {
-    border: 1px solid #6cfcdb;
-    padding: 3px 20px;
-    box-sizing: border-box;
-  }
-  .view_table_style:hover {
-    cursor: pointer;
-  }
-  .dialog_footer_box {
-    display: flex;
-    justify-content: flex-end;
-    padding: 10px;
-    box-sizing: border-box;
-    margin-top: 24px;
-  }
-  .dialog_footer_box:hover {
-    /* cursor: pointer; */
-  }
 
-
-  /*筛选框*/
-  .task_item_header {
-    display: flex;
-    justify-content: flex-end;
-    margin-bottom: 10px;
-    margin-top: -10px;
-    /*background: #00a854;*/
-
-  }
-  /*边框线里边第一层*/
 .task_item_body {
   /*margin-top: 1px;*/
   /*margin-left: 50px;*/
   /*display: flex;*/
   /*justify-content: flex-end;*/
   /*margin-bottom: 10px;*/
-  /*margin-top: -10px;*/
+  margin-top: -20px;
+
   height: 100%;
   /*width: 100%;*/
   /*background: #cb0e60;*/
-
 }
 
 /*白色数据列表*/
@@ -723,8 +273,8 @@
   /*margin-left: 20px;*/
   /*display: flex;*/
   /*justify-content: flex-end;*/
-  /*margin-bottom: 10px;*/
-  /*margin-top: -10px;*/
+  margin-bottom: 10px;
+  margin-top: 10px;
   height: 100%;
   width: 100%;
   /*background: #c5cb0e;*/
@@ -769,403 +319,8 @@
   background: #004279 !important;
 
 }
-  .fullScreenStyle:hover {
-    cursor: pointer;
-  }
-  .task_header_top {
-    height: 47%;
-    width: 100%;
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    color: #fff;
-  }
-  .task_header_footer {
-    height: 47%;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    color: #fff;
-    padding-top: 10px;
-    box-sizing: border-box;
-  }
-  .task_header_footer_task {
-    height: 48%;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    color: #fff;
-    padding-top: 10px;
-    box-sizing: border-box;
-  }
-  .task_header_footer_task_new {
-    height: 98%;
-    width: 350%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    color: #fff;
-    padding-top: 10px;
-    box-sizing: border-box;
-  }
-  .subject_task_item {
-    width: 100%;
-    height: 100%;
-    padding: 10px;
-    box-sizing: border-box;
-    /* border: 1px solid #4F8BC7; */
-    border-radius: 6px;
-    margin-bottom: 10px;
-    margin-right: 10px;
-  
-    background-image: url("../assets/img/opitty.png");
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    box-sizing: border-box;
-    position: relative;
-    padding: 8px 14px 5px 14px;
-    box-sizing: border-box;
-  }
-  .subject_task_item_task {
-    width: 280%;
-    height: 100%;
-    padding: 10px;
-    box-sizing: border-box;
-    /* border: 1px solid #4F8BC7; */
-    border-radius: 6px;
-    margin-bottom: 10px;
-    margin-right: 10px;
-  
-    background-image: url("../assets/img/opitty.png");
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    box-sizing: border-box;
-    position: relative;
-    padding: 8px 14px 5px 14px;
-    box-sizing: border-box;
-  }
 
-.subject_task_item_task1 {
-  width: 100%;
-  height: 10%;
-}
-.subject_task_item_task2 {
-  width: 100%;
-  height: 100%;
-  /*padding: 10px;*/
-  /*box-sizing: border-box;*/
-  /*!* border: 1px solid #4F8BC7; *!*/
-  /*border-radius: 6px;*/
-  /*margin-bottom: 10px;*/
-  /*margin-right: 10px;*/
 
-  /*background-image: url("../assets/img/opitty.png");*/
-  /*background-repeat: no-repeat;*/
-  /*background-size: 100% 100%;*/
-  /*box-sizing: border-box;*/
-  /*position: relative;*/
-  /*padding: 8px 14px 5px 14px;*/
-  /*box-sizing: border-box;*/
-}
-  .commandMonitoring {
-    width: 30%;
-    height: 100%;
-    padding: 10px;
-    box-sizing: border-box;
-    /* border: 1px solid #4F8BC7; */
-    border-radius: 6px;
-    margin-bottom: 10px;
-  
-    background-image: url("../assets/img/opitty.png");
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    box-sizing: border-box;
-    position: relative;
-    padding: 8px 14px 5px 14px;
-    box-sizing: border-box;
-  }
-  .commandMonitoring_task {
-    width: 28%;
-    height: 100%;
-    padding: 10px;
-    box-sizing: border-box;
-    /* border: 1px solid #4F8BC7; */
-    border-radius: 6px;
-    margin-bottom: 10px;
-    display: flex;
-    flex-direction: column;
-    background-image: url("../assets/img/opitty.png");
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    box-sizing: border-box;
-    position: relative;
-    padding: 8px 14px 5px 14px;
-    box-sizing: border-box;
-  }
-  .unit_map_box {
-    width: 34%;
-    height: 100%;
-    padding: 10px;
-    box-sizing: border-box;
-    /* border: 1px solid #4F8BC7; */
-    border-radius: 6px;
-    margin-bottom: 10px;
-    margin-right: 10px;
-  
-    background-image: url("../assets/img/opitty.png");
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    box-sizing: border-box;
-    position: relative;
-    padding: 8px 14px 5px 14px;
-    box-sizing: border-box;
-  }
-  
-  .unit_map_box_task {
-    width: 44%;
-    height: 100%;
-    padding: 10px;
-    box-sizing: border-box;
-    /* border: 1px solid #4F8BC7; */
-    border-radius: 6px;
-    margin-bottom: 10px;
-    margin-right: 10px;
-    display: flex;
-    flex-direction: column;
-    background-image: url("../assets/img/opitty.png");
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    box-sizing: border-box;
-    position: relative;
-    padding: 8px 14px 5px 14px;
-    box-sizing: border-box;
-  }
-  
-  .unit_map_box_task_new {
-    width: 72%;
-    height: 100%;
-    padding: 10px;
-    box-sizing: border-box;
-    /* border: 1px solid #4F8BC7; */
-    border-radius: 6px;
-    margin-bottom: 10px;
-  
-    background-image: url("../assets/img/opitty.png");
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    box-sizing: border-box;
-    position: relative;
-    padding: 8px 14px 5px 14px;
-    box-sizing: border-box;
-  }
-  .select_lsit_box {
-    display: flex;
-    align-items: center;
-    margin-bottom: 10px;
-  }
-  .search_button {
-    border-radius: 4px;
-    border: 1px solid #05ddf7;
-    padding: 3px 13px;
-    box-sizing: border-box;
-    white-space: nowrap;
-    margin-bottom: 0px;
-    margin-left: 10px;
-    font-size: small;
-  }
-  .search_button:hover {
-    cursor: pointer;
-  }
-  .subject_list_item {
-    background: #072347;
-    width: 100%;
-    margin-bottom: 8px;
-  }
-  .subject_list_item_new {
-    background: #072347;
-    width: 100%;
-    margin-bottom: 8px;
-  }
-  .subject_list_item_new:hover {
-    cursor: pointer;
-  }
-  .subject_list_header {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    padding: 10px 10px 0 10px;
-    box-sizing: border-box;
-    font-size: 12px;
-  }
-  .orgainzers {
-    color: #8d9bab;
-    margin: 8px 0 8px 0;
-  }
-  .system_task_style {
-    background: #021736;
-    font-size: 12px;
-    font-family: PingFangSC-Regular, PingFang SC;
-    font-weight: 400;
-    color: #ffffff;
-    padding: 4px 10px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-  .subject_list_container {
-    height: calc(100% - 48px);
-    overflow-y: auto;
-  }
-  .task_outer_cotnainer_status {
-    height: 100%;
-  }
-  .map_more_box {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-  .moreBtn_style:hover {
-    cursor: pointer;
-  }
-  .subject_list_container_int {
-    height: calc(100% - 38px);
-    overflow-y: auto;
-    width: 100%;
-  }
   .header {
     background: #004279 !important;
-  }
-  .header-item {
-    font-size: 12px !important;
-  }
-  .row-item {
-    font-size: 12px !important;
-  }
-  .task_other_cotainer_scrool {
-    width: 100%;
-    height: 100%;
-  }
-  .num_subject_left {
-    width: 75%;
-    height: 50%;
-    margin-right: 0px;
-    margin-top: 36px;
-  }
-  .num_subject_right {
-    width: 100%;
-    height: 100%;
-    position: relative;
-    right: 10px;
-  }
-  .num_subject_box {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-  }
-  .num_subject_box_new {
-    text-align: left;
-  }
-  .subject_status_precent {
-    position: absolute;
-    top: -5px;
-    font-size: 14px;
-    left: 39%;
-    font-weight: 600;
-    color: #37d3f3;
-  }
-  .subject_status_precent_task {
-    position: absolute;
-    top: -5px;
-    font-size: 12px;
-    left: 50%;
-    font-weight: 600;
-    color: #37d3f3;
-  }
-  .center_no_data {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    margin-top: 40px;
-  }
-  .leftCirIcon_left_top {
-    position: absolute;
-    left: -5px;
-    top: -2px;
-    /* box-shadow: 0px 0px 4px 0px #94E1FD; */
-  }
-  .leftCirIcon_left_bottom {
-    position: absolute;
-    bottom: -5px;
-    left: -5px;
-    transform: rotate(-90deg);
-    /* box-shadow: 0px 0px 4px 0px #94E1FD; */
-  }
-  .showLessStyle:hover {
-    cursor: pointer;
-  }
-  .tempalte_no_data {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 14px;
-    color: #fff;
-    height: 100%;
-  }
-  .new_style_grade {
-    position: absolute;
-    top: -80px;
-  }
-  .border_new_style {
-    border: 1px solid #ccc;
-    border-top: none;
-    border-right: none;
-  }
-  .video_title {
-    margin: 5px 0 14px 0;
-    font-weight: 600;
-    font-family: PingFangSC-Semibold, PingFang SC;
-    font-weight: 600;
-    color: #ffffff;
-    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
-    font-size: 14px;
-  }
-  .video_title_new_child {
-    margin: 5px 0 14px 0;
-    font-weight: 600;
-    font-family: PingFangSC-Semibold, PingFang SC;
-    font-weight: 600;
-    color: #ffffff;
-    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
-    font-size: 14px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-  .play_to_full {
-    color: #37d3f3;
-    font-size: 12px;
-  }
-  .play_to_full:hover {
-    cursor: pointer;
-  }
-  .plugin {
-    width: 100%;
-    height: 100%;
-  }
-  
-  .video_body1 {
-    min-height: 80%;
-    max-height: 80%;
-    min-width: 100%;
-    max-width: 100%;
-  }
-  
-  .video_body2 {
-    min-height: 90%;
-    max-height: 90%;
-    min-width: 100%;
-    max-width: 100%;
-  }
+  }

src/views/mainScreen.vue

@@ -31,10 +31,10 @@
                     </el-table>
                     <el-row type="flex" justify="end" style="margin-top: 10px;">
                       <el-pagination
-                          :total="renwuliebiao.data.length"
-                          :current-page="renwuliebiao.currentPage"
-                          :page-size="renwuliebiao.pageSize"
-                          :page-sizes="[5,10, 15,20, 50]"
+                          :total="this.renwuliebiao.length"
+                          :current-page="this.renwuliebiao.currentPage"
+                          :page-size="this.renwuliebiao.pageSize"
+                          :page-sizes="[5,10, 15]"
                           layout="total, prev, pager, next, sizes"
                           @current-change="onCurrentPageChange"
                           @size-change="onPageSizeChange">
@@ -100,6 +100,7 @@ export default {
         header: ['1', '2', '3','4', '5', '6','7', '8'],
         waitTime:1500,
         data: [],
+        length:0,
         columnWidth: [80],
         oddRowBGC:'#072347',
         evenRowBGC:'#021736',
@@ -166,7 +167,14 @@ export default {
     pagedData() { // 动态计算当前页的数据
       const start = (this.renwuliebiao.currentPage - 1) * this.renwuliebiao.pageSize
       const end = start + this.renwuliebiao.pageSize
-      return this.renwuliebiao.data.slice(start, end)
+      console.log("1:  ",start+"---"+end)
+      console.log("12:  ",this.renwuliebiao.data)
+      if(this.renwuliebiao.data!=null){
+        return this.renwuliebiao.data.slice(start, end)
+      }else{
+        return null
+      }
+
     }
   },
   methods:{
@@ -175,16 +183,21 @@ export default {
      * @param {Integer} newCurrentPage 变化后的显示页面
      */
     onCurrentPageChange (newCurrentPage) {
-      this.loadTableDataImpl(newCurrentPage, this.renwuliebiao.pageSize).then(() => {//数据加载成功
+
+      console.log("h1:",newCurrentPage,this.renwuliebiao.pageSize)
+      this.loadTableDataImpl1(newCurrentPage, this.renwuliebiao.pageSize).then(() => {//数据加载成功
         this.renwuliebiao.currentPage = newCurrentPage;
         this.oldPage = this.renwuliebiao.currentPage-1
-        if(this.renwuliebiao.data.length <= newCurrentPage*this.renwuliebiao.pageSize   ){
+        console.log("h1_1",this.renwuliebiao.data.length,newCurrentPage*this.renwuliebiao.pageSize)
+        if(this.renwuliebiao.data.length <= newCurrentPage*this.renwuliebiao.pageSize){
           this.renwuliebiao.paged=true
         }else{
           this.renwuliebiao.paged=false
         }
+        console.log("h1_2",this.renwuliebiao.paged)
       }).catch(() => {//数据加载失败
         this.renwuliebiao.currentPage = this.oldPage;
+        console.log("h1_3",this.renwuliebiao.currentPage)
       });
     },
     /**
@@ -192,13 +205,20 @@ export default {
      * @param {Integer} newPageSize 变化后的每页显示数量
      */
     onPageSizeChange (newPageSize) {
+      console.log("h2:",newPageSize)
       this.renwuliebiao.currentPage = 1
-      this.loadTableDataImpl(1, newPageSize).then(() => {
+      this.renwuliebiao.pageSize=newPageSize
+      this.loadTableDataImpl1(1, newPageSize).then(() => {
         this.oldPage = this.renwuliebiao.currentPage;
         this.oldPageSize = this.renwuliebiao.pageSize;
+        console.log("h2_1",this.renwuliebiao.currentPage,this.renwuliebiao.pageSize)
+        console.log("h2_2",this.oldPage,this.oldPageSize)
+
       }).catch(e => {
         this.renwuliebiao.currentPage = this.oldPage;
         this.renwuliebiao.pageSize = this.oldPageSize;
+        console.log("h2_3",this.renwuliebiao.currentPage,this.renwuliebiao.pageSize)
+        console.log("h2_4",this.oldPage,this.oldPageSize)
       });
     },
     /**
@@ -207,6 +227,7 @@ export default {
      * @param {String} order 正序还是倒序
      */
     onSortChange ({ prop, order }) {
+      console.log("h3:",prop,order)
       this.orderInfo.fieldName = prop;
       this.orderInfo.asc = (order === 'ascending');
       this.refreshTable();
@@ -217,10 +238,11 @@ export default {
      * @param {Integer} pageSize 每页数量
      * @param {Boolean} reload 是否重新获取数据
      */
-    loadTableDataImpl (pageNum, pageSize, reload = false) {
+    loadTableDataImpl1 (pageNum, pageSize, reload = false) {
       console.log("11:  ",pageNum+"---"+pageSize+"---"+reload)
       // 判断是否需要重新加载数据
       if (reload || !this.renwuliebiao.data || this.renwuliebiao.data.length === 0) {
+        console.log("111:")
         // 调用后端接口或其他数据来源获取数据
         // 这里省略具体实现
         // 模拟一个返回结果的 Promise 对象
@@ -243,6 +265,10 @@ export default {
           return this.renwuliebiao.data.slice((pageNum - 1) * pageSize, pageNum * pageSize);
         });
       } else {// 直接返回已有的任务列表数据
+        console.log("112:")
+        console.log("112_1:",pageNum ,pageSize)
+        console.log("112_2:",this.renwuliebiao.data.slice((pageNum - 1) * pageSize,pageNum * pageSize))
+        console.log("112_2:",Promise.resolve(this.renwuliebiao.data.slice((pageNum - 1) * pageSize,pageNum * pageSize)))
         return Promise.resolve(this.renwuliebiao.data.slice((pageNum - 1) * pageSize, pageNum * pageSize));
       }
     },
@@ -258,14 +284,14 @@ export default {
         reload = true;
       }
       if (Number.isInteger(pageNum) && pageNum !== this.renwuliebiao.currentPage) {
-        this.loadTableDataImpl(pageNum, this.renwuliebiaopageSize, reload).then(res => {
+        this.loadTableDataImpl1(pageNum, this.renwuliebiaopageSize, reload).then(res => {
           this.oldPage = this.renwuliebiao.currentPage = pageNum;
           if (research && showMsg) Message.success('查询成功');
         }).catch(e => {
           this.renwuliebiao.currentPage = this.oldPage;
         });
       } else {
-        this.loadTableDataImpl(this.renwuliebiao.currentPage, this.renwuliebiao.pageSize, true).catch(e => {});
+        this.loadTableDataImpl1(this.renwuliebiao.currentPage, this.renwuliebiao.pageSize, true).catch(e => {});
       }
     },
     /**
@@ -408,6 +434,7 @@ export default {
           tempData.push([item.actualStartTime, item.bk, item.description,item.status,item.taskCode,item.taskId ,item.taskName, item.taskStage])
         })
         this.renwuliebiao.data=tempData
+        this.renwuliebiao.length=this.renwuliebiao.data.length
         this.taskList = data;
         this.wholeOutTaskId = data[0].taskId;
         this.processInstanceId = this.wholeOutTaskId;
@@ -748,30 +775,7 @@ export default {
       }
     },
 
-    // 初始化视频
-    initVideo(nowPlayVideoUrl,id) {
-      let that =this
-
-      // 这些options属性也可直接设置在video标签上，见 muted
-      let options = {
-        autoplay: true, // 设置自动播放
-        controls: true, // 显示播放的控件
-        sources: [
-          // 注意，如果是以option方式设置的src,是不能实现 换台的 (即使监听了nowPlayVideoUrl也没实现)
-          {
-            src: nowPlayVideoUrl,
-            type: "application/x-mpegURL" // 告诉videojs,这是一个hls流
-          }
-        ]
-      };
-      // videojs的第一个参数表示的是，文档中video的id
-      const myPlyer= Videojs(id, options, function onPlayerReady() {
-        console.log("onPlayerReady 中的this指的是：", this); // 这里的this是指Player,是由Videojs创建出来的实例
-        console.log(myPlyer === this); // 这里返回的是true
-      });
-      this.playerList.push(myPlyer)
 
-    },
 
     async initUrl(subjectName) {
       if (subjectName == '')
@@ -869,45 +873,13 @@ export default {
     }
   },
   mounted() {
-
-
-
     // 获取全部单位
     this.getAllUnits();
     // 获取全部系统
     this.getAllSystems();
     // 建立任务的weksocket链接
     this.initWebsoket();
-    // setTimeout(() => {
-    // this.initUrl('步坦协同课目');
-    //   }, 1000);
-    //   setTimeout(() => {
-
-    //  console.log('this.camaraSrc :>> ', this.camaraSrc);
-    // for(let index = 0; index < this.camaraSrc.length;index++)
-    // {
-    //   this.camaraData.push(this.resolveUrl(this.camaraSrc[index]))
-    // }
-
-    // console.log('this.camaraData :>> ', this.camaraData);
-
-    // }, 1000);
-
-    //  setTimeout(() => {
-
-    //   this.HKshow = true;
-
-    // }, 800);
 
-    // this.currentSubject = "步坦协同课目";
-    //
-    // //     // 过14秒调用
-    // setTimeout(() => {
-    //   for (let index = 0; index < this.camaraSrc.length; index++) {
-    //     console.log('object :>> ',this.camaraSrc[index]);
-    //     this.initVideo(this.camaraSrc[index], this.videoList[index]);
-    //   }
-    // }, 5000);
   },
   beforeDestroy() {
     this.HKshow = false;

src/views/situationScreen.vue

@@ -695,9 +695,10 @@
                 </el-table>
                 <el-row type="flex" justify="end" style="margin-top: 10px;">
                   <el-pagination
-                      :total="gridData2.data.length"
-                      :current-page="gridData2.currentPage"
-                      :page-size="gridData2.pageSize"
+
+                      :total="this.gridData2.length"
+                      :current-page="this.gridData2.currentPage"
+                      :page-size="this.gridData2.pageSize"
                       :page-sizes="[5,10,15, 20]"
                       layout="total, prev, pager, next, sizes"
                       @current-change="onCurrentPageChange"
@@ -816,7 +817,7 @@ export default {
 
       gridData2:{
         data: [],
-
+        length:0,
         currentPage:1,
         pageSize:10,
 
@@ -837,9 +838,15 @@ export default {
     pagedData() { // 动态计算当前页的数据
       const start = (this.gridData2.currentPage - 1) * this.gridData2.pageSize
       const end = start + this.gridData2.pageSize
-      // console.log("hhhh1:  ",start+"---"+end )
-      // console.log("hhhh2:  ",this.renwuliebiao.data.slice(start, end) )
-      return this.gridData2.data.slice(start, end)
+      if(this.gridData2.data!=null){
+        console.log("hhhh1:  ",start+"---"+end )
+        console.log("hhhh2:  ",this.gridData2.data )
+        console.log("hhhh3:  ",this.gridData2.data.slice(start, end) )
+        return this.gridData2.data.slice(start, end)
+      }else{
+        return null
+      }
+
     }
   },
   methods:{
@@ -2751,6 +2758,7 @@ export default {
       const { subjectScore } = item
       this.gridData=subjectScore
       this.gridData2.data=subjectScore
+      this.gridData2.length=this.gridData2.data.length
     },
     // 全屏事件
     showFull(id){