src/views/historicTaskScreen.vue

@@ -677,16 +677,32 @@
               </div>
               <div class="task_dialog_box_other" v-if="dialogType==2">
                 <el-table
-                  :data="gridData"
+                  :data="pagedData"
                   :header-cell-style="changeHeaderCellStyle"
                   :cell-style="changeCellStyle"
                   stripe
                   :border="true"
                 >
+                  <el-table-column label="序号" header-align="center" align="center" type="index" width="55px" :index="getTableIndex" />
                   <el-table-column align="center"   property="participantName" label="姓名" max-width="350"></el-table-column>
                   <el-table-column align="center" property="score" label="成绩" max-width="300"></el-table-column>
                 </el-table>
 
+                <el-row type="flex" justify="end" style="margin-top: 10px;">
+                  <el-pagination
+                      :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"
+                      @size-change="onPageSizeChange">
+                  </el-pagination>
+
+                </el-row>
+
+                <operation-space v-if="showOperationSpace" :flow-instance="currentFlowInstance" @close="onOperationSpaceClose"></operation-space>
+
               </div>
 
               <div class="dialog_footer_box">
@@ -721,6 +737,8 @@ export default {
   },
   data() {
     return {
+      showOperationSpace: false,
+      currentFlowInstance: undefined,
       systemTaskId:'',
       unitTaskValue:'',
       systemFinshedValue:'',
@@ -790,6 +808,13 @@ export default {
       unitSubGradeValue:'',
       systemSubGradeValue:'',
       gridData:[],
+      gridData2:{
+        data: [],
+        length:0,
+        currentPage:1,
+        pageSize:10,
+        paged:true,
+      },
       dataSrc:'https://cctvwbndbd.a.bdydns.com/cctvwbnd/cctv1_2/index.m3u8?BR=single',
       completionRate:false,
       systemcompletionRate:false,
@@ -801,8 +826,106 @@ export default {
       currentYear:'',
     }
   },
-  methods:{
+  computed:{
+    pagedData() { // 动态计算当前页的数据
+      const start = (this.gridData2.currentPage - 1) * this.gridData2.pageSize
+      const end = start + this.gridData2.pageSize
+      if(this.gridData2.data!=null){
+        return this.gridData2.data.slice(start, end)
+      }else{
+        return null
+      }
 
+    }
+  },
+  methods:{
+    /**
+     * 获取每一行的index信息
+     * @param {Integer} index 表格在本页位置
+     */
+    getTableIndex (index) {
+      let a
+      a=((this.gridData2.currentPage - 1) * this.gridData2.pageSize + (index + 1))
+      return a;
+    },
+    onCurrentPageChange (newCurrentPage) {
+        this.loadTableDataImpl3(newCurrentPage, this.gridData2.pageSize).then(() => {//数据加载成功
+        this.gridData2.currentPage = newCurrentPage;
+        this.oldPage = this.gridData2.currentPage-1
+        if(this.gridData2.data.length <= newCurrentPage*this.gridData2.pageSize   ){
+          this.gridData2.paged=true
+        }else{
+          this.gridData2.paged=false
+        }
+      }).catch(() => {//数据加载失败
+        this.gridData2.currentPage = this.oldPage;
+      });
+    },
+    /**
+     * 表格分页每页显示数量变化
+     * @param {Integer} newPageSize 变化后的每页显示数量
+     */
+    onPageSizeChange (newPageSize) {
+      this.gridData2.pageSize = newPageSize;
+      this.gridData2.currentPage = 1
+      this.loadTableDataImpl3(1, newPageSize).then(() => {
+        this.oldPage = this.gridData2.currentPage;
+        this.oldPageSize = this.gridData2.pageSize;
+      }).catch(e => {
+        this.gridData2.currentPage = this.oldPage;
+        this.gridData2.pageSize = this.oldPageSize;
+      });
+    },
+    /**
+     * 获取表格数据
+     * @param {Integer} pageNum 当前分页
+     * @param {Integer} pageSize 每页数量
+     * @param {Boolean} reload 是否重新获取数据
+     */
+    loadTableDataImpl3 (pageNum, pageSize, reload = false) {
+      // 判断是否需要重新加载数据
+      if (reload || !this.gridData2.data || this.gridData2.data.length === 0) {
+        // 调用后端接口或其他数据来源获取数据
+        // 这里省略具体实现
+        // 模拟一个返回结果的 Promise 对象
+        const mockData = new Promise(resolve => {
+          const data = [];
+          for (let i = 1; i <= pageSize; i++) {
+            data.push({
+              id: pageNum * pageSize + i,
+              name: `任务${pageNum * pageSize + i}`,
+              status: Math.floor(Math.random() * 4)
+            });
+          }
+          resolve(data);
+        });
+        // 返回 Promise 对象，以便分页组件可以在数据加载完成后进行下一步处理。
+        return mockData.then(data => {
+          // 更新任务列表数据
+          this.gridData2.data = data;
+          // 返回新的任务列表数据
+          return this.gridData2.data.slice((pageNum - 1) * pageSize, pageNum * pageSize);
+        });
+      } else {// 直接返回已有的任务列表数据
+        return Promise.resolve(this.gridData2.data.slice((pageNum - 1) * pageSize, pageNum * pageSize));
+      }
+    },
+    refreshFormAllInstance (reloadData = false) {
+      if (reloadData) {
+        this.renwuliebiao.refreshTable(true, 1);
+      } else {
+        this.renwuliebiao.refreshTable();
+      }
+      if (!this.isInit) {
+        // 初始化下拉数据
+      }
+      this.isInit = true;
+    },
+    onOperationSpaceClose () {
+      this.showOperationSpace = false;
+      this.currentFlowInstance = null;
+      this.refreshFormAllInstance()
+    },
     // 获取单位名称
     getName(list, id) {
       var tmp =  list.find(k => k["value"] == id)
@@ -2562,6 +2685,8 @@ export default {
       console.log('item',item);
       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

@@ -10,46 +10,10 @@
       <div class="content_cotainer">
         <div class="center_chart_cotainer_task" id="taskItem">
           <div class="task_detail_cotainer_task" style="width:100%;">
-
-
-<!--            <div v-if="false" class="header_line_style">-->
-<!--              <div class="headerTitle"></div>-->
-<!--            </div>-->
-
-<!--            <div v-if="false" class="task_name_header">「{{ currentTaskName }}」任务态势大屏</div>-->
-<!--             任务屏幕-->
-
-<!--            <div class="task_item_header">-->
-<!--              <el-select-->
-<!--                  v-model="wholeOutTaskId"-->
-<!--                  placeholder="「切换任务」"-->
-<!--                  style="width:270px;"-->
-<!--                  @change="changeTask"-->
-<!--                  filterable-->
-<!--              >-->
-<!--                <el-option-->
-<!--                    v-for="item in taskOPtion"-->
-<!--                    :key="item.value"-->
-<!--                    :label="item.label"-->
-<!--                    :value="item.value"-->
-<!--                >-->
-<!--                </el-option>-->
-<!--              </el-select>-->
-<!--            </div>-->
-
             <div class="task_item_body" >
                 <el-row class="task_item_body1" >
                   <el-col :span="24"  >
-
-                    <el-table ref="teacher" :data="pagedData" size="mini"
-                              @sort-change="pagedData.onSortChange"
-                              header-cell-class-name="table-header-gray" class="task_item_body_bak" >
-<!--                    <el-table ref="teacher" :data="renwuliebiao.data" size="mini"-->
-<!--                              @sort-change="renwuliebiao.onSortChange"-->
-<!--                              header-cell-class-name="table-header-gray">-->
-
-
-<!--                      <el-table-column label="序号" header-align="center" align="center" type="index" width="55px" :index="renwuliebiao.getTableIndex" />-->
+                    <el-table ref="teacher" :data="pagedData" size="mini" @sort-change="pagedData.onSortChange" stripe:border="true" header-cell-class-name="table-header-gray" class="task_item_body_bak" >
                       <el-table-column label="序号" header-align="center" align="center" type="index" width="55px" :index="getTableIndex" />
                       <el-table-column label="任务实际开始时间" prop="0" />
                       <el-table-column label="任务关联ID" prop="1" />
@@ -65,30 +29,23 @@
                         </template>
                       </el-table-column>
                     </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, 20, 50, 100]"
+                          :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">
                       </el-pagination>
-
                     </el-row>
                   </el-col>
                 </el-row>
-
                 <operation-space v-if="showOperationSpace" :flow-instance="currentFlowInstance" @close="onOperationSpaceClose"></operation-space>
-
             </div>
-
           </div>
         </div>
-
-
       </div>
     </div>
   </v-scale-screen>
@@ -108,8 +65,6 @@ import hkv from '../components/hk/hkv.vue'
 import hkCamara from '../components/hk/hkCamara.vue'
 import {Message} from "element-ui";
 
-
-
 export default {
   components:{
     myFlylineChartEnhanced,
@@ -123,9 +78,7 @@ export default {
     return {
       showOperationSpace: false,
       currentFlowInstance: undefined,
-      // formAllInstanceWidget: new TableWidget(this.loadAllTaskData, this.loadAllTaskVerify, true, false),
       isInit: false,
-
       HKCardShow: false,
       HKCamaraShow: false,
       systemFinshedValue:'',
@@ -143,16 +96,15 @@ export default {
       websocketOrder: null, //建立的连接
       websocketBpmn: null, //建立的连接
       updatekey:'1',
-
       renwuliebiao:{
         header: ['1', '2', '3','4', '5', '6','7', '8'],
         waitTime:1500,
         data: [],
+        length:0,
         columnWidth: [80],
         oddRowBGC:'#072347',
         evenRowBGC:'#021736',
 
-
         actualStartTime:'',
         bk:'',
         description:'',
@@ -163,12 +115,10 @@ export default {
         taskStage:'',
 
         currentPage:1,
-        pageSize:10,
+        pageSize:15,
 
         paged:true,
       },
-
-
       scrollTableConfig:{
         header: ['课目名称', '指令名称', '特情注入', '指令内容', '模训系统', '时间'],
         waitTime:1500,
@@ -217,9 +167,14 @@ export default {
     pagedData() { // 动态计算当前页的数据
       const start = (this.renwuliebiao.currentPage - 1) * this.renwuliebiao.pageSize
       const end = start + this.renwuliebiao.pageSize
-      // console.log("hhhh1:  ",start+"---"+end )
-      // console.log("hhhh2:  ",this.renwuliebiao.data.slice(start, end) )
-      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:{
@@ -229,36 +184,20 @@ export default {
      */
     onCurrentPageChange (newCurrentPage) {
 
-      console.log("1:  ",newCurrentPage )
-      console.log("2:  ",this.renwuliebiao.pageSize )
-      console.log("3:  ",this.oldPage)
-
-
-      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
-        console.log("4:  ",newCurrentPage)
-        console.log("5:  ",this.renwuliebiao.currentPage)
-        console.log("6:  ",this.oldPage)
-
-
-        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("7:  ",this.oldPage)
-        console.log("8:  ",this.renwuliebiao.currentPage)
-
+        console.log("h1_3",this.renwuliebiao.currentPage)
       });
     },
     /**
@@ -266,17 +205,20 @@ export default {
      * @param {Integer} newPageSize 变化后的每页显示数量
      */
     onPageSizeChange (newPageSize) {
-
-      console.log("hhhh2:  ",newPageSize )
-
-      this.renwuliebiao.pageSize = 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)
       });
     },
     /**
@@ -285,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();
@@ -295,25 +238,16 @@ export default {
      * @param {Integer} pageSize 每页数量
      * @param {Boolean} reload 是否重新获取数据
      */
-    loadTableDataImpl (pageNum, pageSize, reload = false) {
+    loadTableDataImpl1 (pageNum, pageSize, reload = false) {
       console.log("11:  ",pageNum+"---"+pageSize+"---"+reload)
-
-      // const start = (pageNum - 1) * this.renwuliebiao.pageSize
-      // const end = start + this.renwuliebiao.pageSize
-      // // console.log("hhhh1:  ",start+"---"+end )
-      // // console.log("hhhh2:  ",this.renwuliebiao.data.slice(start, end) )
-      // return this.renwuliebiao.data.slice(start, end)
-
-
-// 判断是否需要重新加载数据
+      // 判断是否需要重新加载数据
       if (reload || !this.renwuliebiao.data || this.renwuliebiao.data.length === 0) {
+        console.log("111:")
         // 调用后端接口或其他数据来源获取数据
         // 这里省略具体实现
-
         // 模拟一个返回结果的 Promise 对象
         const mockData = new Promise(resolve => {
           const data = [];
-
           for (let i = 1; i <= pageSize; i++) {
             data.push({
               id: pageNum * pageSize + i,
@@ -321,10 +255,8 @@ export default {
               status: Math.floor(Math.random() * 4)
             });
           }
-
           resolve(data);
         });
-
         // 返回 Promise 对象，以便分页组件可以在数据加载完成后进行下一步处理。
         return mockData.then(data => {
           // 更新任务列表数据
@@ -332,45 +264,14 @@ export default {
           // 返回新的任务列表数据
           return this.renwuliebiao.data.slice((pageNum - 1) * pageSize, pageNum * pageSize);
         });
-      } else {
-        // 直接返回已有的任务列表数据
+      } 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));
       }
-
-
-      // return new Promise((resolve, reject) => {
-      //   console.log("12:  ",this.loadTableData)
-      //
-      //   if (typeof this.loadTableData !== 'function') {
-      //     reject();
-      //   } else {// 如果pageSize和pageNum没有变化，并且不强制刷新
-      //     console.log("13:  ",pageNum+"---"+pageSize+"---"+reload)
-      //     if (this.paged && !reload && this.oldPage === pageNum && this.oldPageSize === pageSize) {
-      //       resolve();
-      //     } else {
-      //       let params = {};
-      //       if (this.orderInfo.fieldName != null) params.orderParam = [this.orderInfo];
-      //       if (this.paged) {
-      //         params.pageParam = {
-      //           pageNum,
-      //           pageSize
-      //         }
-      //       }
-      //       this.loading = true;
-      //       this.loadTableData(params).then(tableData => {
-      //         this.dataList = tableData.dataList;
-      //         this.totalCount = tableData.totalCount;
-      //         this.loading = false;
-      //         resolve();
-      //       }).catch(e => {
-      //         this.loading = false;
-      //         reject(e);
-      //       });
-      //     }
-      //   }
-      // });
     },
-
     /**
      * 刷新表格数据
      * @param {Boolean} research 是否按照新的查询条件重新查询（调用verify函数）
@@ -382,78 +283,33 @@ export default {
         if (typeof this.searchVerify === 'function' && !this.searchVerify()) return;
         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 => {});
       }
     },
-
-
-
-
     /**
      * 获取每一行的index信息
      * @param {Integer} index 表格在本页位置
      */
     getTableIndex (index) {
-
-      // console.log("页码1：  "+index)
-      // console.log(".....1  "+index)
-      // console.log("页码2：  "+this.renwuliebiao.paged ? ((this.renwuliebiao.currentPage - 1) * this.renwuliebiao.pageSize + (index + 1)) : (index + 1))
-      // console.log(".....2  "+this.renwuliebiao.paged)
       let a
-      // let a=this.renwuliebiao.paged ? ((this.renwuliebiao.currentPage - 1) * this.renwuliebiao.pageSize + (index + 1)) : (index + 1);
-      // console.log(".....a  "+a)
-      // return this.renwuliebiao.paged ? ((this.renwuliebiao.currentPage - 1) * this.renwuliebiao.pageSize + (index + 1)) : (index + 1);
-
-
-
-
-
-      console.log("参数：  "+this.renwuliebiao.paged+" "+this.renwuliebiao.pageSize+" "+index)
-      // if(this.renwuliebiao.paged){
-      //   console.log("a1")
-      //   a=((this.renwuliebiao.currentPage - 1) * this.renwuliebiao.pageSize + (index + 1))
-      // }else{
-      //   console.log("a2")
-      //   a=(index + 1)
-      // }
       a=((this.renwuliebiao.currentPage - 1) * this.renwuliebiao.pageSize + (index + 1))
-      console.log(".....a  "+a)
       return a;
-
-
-
-
-
-
-
-
     },
-
-
-
     onTiaozhuan (a) {
-
-
-      console.log("111",a[5])
-      // this.$router.push({name: 'testParams',params: {testParams:'testParams'}});
-      // location.reload()
       this.$router.push({
         path:"/taskScreen",
         query:{
           key1:a[5],
-          key2:a[6],
         }
       });
-      // location.reload()
     },
     refreshFormAllInstance (reloadData = false) {
       if (reloadData) {
@@ -461,28 +317,22 @@ export default {
       } else {
         this.renwuliebiao.refreshTable();
       }
-      if (!this.isInit) {
-        // 初始化下拉数据
+      if (!this.isInit) {// 初始化下拉数据
       }
       this.isInit = true;
     },
-
     onOperationSpaceClose () {
       this.showOperationSpace = false;
       this.currentFlowInstance = null;
       this.refreshFormAllInstance()
     },
-
     HKCardInit(){
       this.HKCardShow = true;
     },
     jumpToHistory() {
       // this.$refs.hk.$destroy();
       //     this.HKshow = false;
-
       this.$router.push("/situationScreen")
-
-
     },
     // 表格样式修改
     changeHeaderCellStyle(row,column, rowIndex, columnIndex){
@@ -499,9 +349,6 @@ export default {
         return 'background: #0A427C ; color:#fff;';
       }
     },
-
-
-
     // 获取全部系统
     async getAllSystems(){
       let params={}
@@ -520,9 +367,6 @@ export default {
         this.$message.error(errorMessage)
       }
     },
-
-
-
     // 获取全部单位
     async getAllUnits (){
       let params={}
@@ -545,7 +389,6 @@ export default {
       }
     },
 
-
     /**
      * 获取所有任务实例
      */
@@ -576,7 +419,6 @@ export default {
       });
     },
 
-
     // 获取任务列表
     async getTaskList() {
       let params = {};
@@ -589,32 +431,10 @@ export default {
         this.renwuList=data
         let tempData=[]
         data.forEach((item)=>{
-          console.log("1:  ", item);
-
-
           tempData.push([item.actualStartTime, item.bk, item.description,item.status,item.taskCode,item.taskId ,item.taskName, item.taskStage])
         })
         this.renwuliebiao.data=tempData
-
-          //
-          // this.instructList=data
-          // let tempData=[]
-          // data.forEach((item)=>{
-          //   tempData.push([item.subjectName, item.name, item.situation, item.content, item.system,item.time])
-          // })
-          // this.scrollTableConfig.data=tempData
-          // console.log("🚀 data >> ", this.scrollTableConfig.data);
-          // this.updatekey=new Date().getTime()
-
-
-
-
-
-
-
-
-
-
+        this.renwuliebiao.length=this.renwuliebiao.data.length
         this.taskList = data;
         this.wholeOutTaskId = data[0].taskId;
         this.processInstanceId = this.wholeOutTaskId;
@@ -625,7 +445,6 @@ export default {
           };
         });
 
-
         let param = {taskId: this.processInstanceId};
         const res1 = await request("/dt_screen/rest/v2/task/getDefId/", "post", param, false);
         this.processDefinitionId = res1.data;
@@ -956,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 == '')
@@ -1077,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

@@ -682,16 +682,32 @@
               </div>
               <div class="task_dialog_box_other" v-if="dialogType==2">
                 <el-table
-                  :data="gridData"
+                  :data="pagedData"
                   :header-cell-style="changeHeaderCellStyle"
                   :cell-style="changeCellStyle"
                   stripe
                   :border="true"
-                  height="400"
+
                 >
+                  <el-table-column label="序号" header-align="center" align="center" type="index" width="55px" :index="getTableIndex" />
                   <el-table-column align="center"   property="participantName" label="姓名" max-width="350"></el-table-column>
                   <el-table-column align="center" property="score" label="成绩" max-width="300"></el-table-column>
                 </el-table>
+                <el-row type="flex" justify="end" style="margin-top: 10px;">
+                  <el-pagination
+
+                      :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"
+                      @size-change="onPageSizeChange">
+                  </el-pagination>
+
+                </el-row>
+
+                <operation-space v-if="showOperationSpace" :flow-instance="currentFlowInstance" @close="onOperationSpaceClose"></operation-space>
 
               </div>
 
@@ -722,10 +738,13 @@ export default {
   components:{
     myFlylineChartEnhanced,
     sacleBox,
-    myscrollBoard
+    myscrollBoard,
+
   },
   data() {
     return {
+      showOperationSpace: false,
+      currentFlowInstance: undefined,
       systemTaskId:'',
       unitTaskValue:'',
       systemFinshedValue:'',
@@ -795,6 +814,15 @@ export default {
       unitSubGradeValue:'',
       systemSubGradeValue:'',
       gridData:[],
+
+      gridData2:{
+        data: [],
+        length:0,
+        currentPage:1,
+        pageSize:10,
+
+        paged:true,
+      },
       dataSrc:'https://cctvwbndbd.a.bdydns.com/cctvwbnd/cctv1_2/index.m3u8?BR=single',
       completionRate:false,
       systemcompletionRate:false,
@@ -806,7 +834,132 @@ export default {
       currentYear:'',
     }
   },
+  computed:{
+    pagedData() { // 动态计算当前页的数据
+      const start = (this.gridData2.currentPage - 1) * this.gridData2.pageSize
+      const end = start + this.gridData2.pageSize
+      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:{
+    /**
+     * 获取每一行的index信息
+     * @param {Integer} index 表格在本页位置
+     */
+    getTableIndex (index) {
+      let a
+      console.log("参数：  "+this.gridData2.paged+" "+this.gridData2.pageSize+" "+index)
+      a=((this.gridData2.currentPage - 1) * this.gridData2.pageSize + (index + 1))
+      console.log(".....a  "+a)
+      return a;
+    },
+    onCurrentPageChange (newCurrentPage) {
+
+      console.log("1:  ",newCurrentPage )
+      console.log("2:  ",this.gridData2.pageSize )
+      console.log("3:  ",this.oldPage)
+
+      this.loadTableDataImpl2(newCurrentPage, this.gridData2.pageSize).then(() => {//数据加载成功
+
+        this.gridData2.currentPage = newCurrentPage;
+        this.oldPage = this.gridData2.currentPage-1
+        console.log("4:  ",newCurrentPage)
+        console.log("5:  ",this.gridData2.currentPage)
+        console.log("6:  ",this.oldPage)
+
+        if(this.gridData2.data.length <= newCurrentPage*this.gridData2.pageSize   ){
+          this.gridData2.paged=true
+        }else{
+          this.gridData2.paged=false
+        }
+
+      }).catch(() => {//数据加载失败
+        this.gridData2.currentPage = this.oldPage;
+        console.log("7:  ",this.oldPage)
+        console.log("8:  ",this.gridData2.currentPage)
+
+      });
+    },
+    /**
+     * 表格分页每页显示数量变化
+     * @param {Integer} newPageSize 变化后的每页显示数量
+     */
+    onPageSizeChange (newPageSize) {
+      console.log("hhhh2:  ",newPageSize )
+      this.gridData2.pageSize = newPageSize;
+      this.gridData2.currentPage = 1
+      this.loadTableDataImpl2(1, newPageSize).then(() => {
+        this.oldPage = this.gridData2.currentPage;
+        this.oldPageSize = this.gridData2.pageSize;
+      }).catch(e => {
+        this.gridData2.currentPage = this.oldPage;
+        this.gridData2.pageSize = this.oldPageSize;
+      });
+    },
+    /**
+     * 获取表格数据
+     * @param {Integer} pageNum 当前分页
+     * @param {Integer} pageSize 每页数量
+     * @param {Boolean} reload 是否重新获取数据
+     */
+    loadTableDataImpl2 (pageNum, pageSize, reload = false) {
+      console.log("11:  ",pageNum+"---"+pageSize+"---"+reload)
+      // 判断是否需要重新加载数据
+      if (reload || !this.gridData2.data || this.gridData2.data.length === 0) {
+        // 调用后端接口或其他数据来源获取数据
+        // 这里省略具体实现
+
+        // 模拟一个返回结果的 Promise 对象
+        const mockData = new Promise(resolve => {
+          const data = [];
+          for (let i = 1; i <= pageSize; i++) {
+            data.push({
+              id: pageNum * pageSize + i,
+              name: `任务${pageNum * pageSize + i}`,
+              status: Math.floor(Math.random() * 4)
+            });
+          }
+
+          resolve(data);
+        });
+        // 返回 Promise 对象，以便分页组件可以在数据加载完成后进行下一步处理。
+        return mockData.then(data => {
+          // 更新任务列表数据
+          this.gridData2.data = data;
+          // 返回新的任务列表数据
+          return this.gridData2.data.slice((pageNum - 1) * pageSize, pageNum * pageSize);
+        });
+      } else {// 直接返回已有的任务列表数据
+        return Promise.resolve(this.gridData2.data.slice((pageNum - 1) * pageSize, pageNum * pageSize));
+      }
+    },
+
+    refreshFormAllInstance (reloadData = false) {
+      if (reloadData) {
+        this.renwuliebiao.refreshTable(true, 1);
+      } else {
+        this.renwuliebiao.refreshTable();
+      }
+      if (!this.isInit) {
+        // 初始化下拉数据
+      }
+      this.isInit = true;
+    },
+
+    onOperationSpaceClose () {
+      this.showOperationSpace = false;
+      this.currentFlowInstance = null;
+      this.refreshFormAllInstance()
+    },
+
     jumpToCurrent() {
       // window.location.href = "/taskScreen"
       // this.$router.push("/taskScreen")
@@ -2604,6 +2757,8 @@ export default {
       console.log('item',item);
       const { subjectScore } = item
       this.gridData=subjectScore
+      this.gridData2.data=subjectScore
+      this.gridData2.length=this.gridData2.data.length
     },
     // 全屏事件
     showFull(id){