修改分页

haiwei-admin/src/main/resources/templates/board/board1.html

@@ -99,28 +99,25 @@
       params.endTime = new Date($('#endTime1').val())
     }
     params.timeInterval=$('#timeInterval1').val();
-    $.get(ctx + 'broad/home/queryParamData', params, (e) => {
-      if (e.data.length > 0) {
+    $.get(ctx + 'broad/home/queryParamDataA', params, (e) => {
+      let data = e.rows
+      if (data.length > 0) {
         $('#chart1').remove()
         $("#modal1 .centerModal .centerModalInfo").append('<div class="chart1" id="chart1"></div>')
         chart = null
-        chart1(document.getElementById('chart1'), e.data)
+        chart1(document.getElementById('chart1'), data)
       } else {
         $("#chart1").html(`<div style="width: 100%;height: 100%;text-align: center;line-height:35vw;color: #fff ">暂无数据</div>`)
       }
     })
   }
-  const Modal2Search = () => {
-    let params = {}
-    params.timeInterval=$('#timeInterval').val();
-    if ($('#startTime2').val()) {
-      params.beginTime = new Date($('#startTime2').val())
-    }
-    if ($('#endTime2').val()) {
-      params.endTime = new Date($('#endTime2').val())
-    }
-    console.log(params)
-    $.get(ctx + 'broad/home/queryParamData', params, (e) => {
+  let pageSize = 10
+  let pageNum = 1
+  let pagesNum = 0
+  const Modal2SearchReq = async  (params) => {
+    await $.get(ctx + 'broad/home/queryParamData', {...params,pageSize,pageNum}, (e) => {
+      pagesNum = Math.ceil(e.total / 10)
+      let data = e.rows
       $("#chart2").empty()
       tableHeadChangeArr =[
         "采集时间",
@@ -131,13 +128,13 @@
         "一体机A切刀电流",
         "一体机A切刀转速"
       ]
-      if (e.data.length > 0) {
+      if (data.length > 0) {
         dynamicTable({
           el: '#chart2',
           rowNum: 10,
           timeout: 5,
           header: ['序号', '<input type="checkbox" checked onchange="tableHeadChange(\'采集时间\',this)"/> 采集时间', '<input type="checkbox" checked onchange="tableHeadChange(\'一体机A转速\',this)"/> 一体机A转速', '<input type="checkbox" checked onchange="tableHeadChange(\'一体机A电流\',this)"/> 一体机A电流', '<input type="checkbox" checked onchange="tableHeadChange(\'一体机A机头压力\',this)"/> 一体机A机头压力', '<input type="checkbox" checked onchange="tableHeadChange(\'一体机A机头温度\',this)"/> 一体机A机头温度', '<input type="checkbox" checked onchange="tableHeadChange(\'一体机A切刀电流\',this)"/> 一体机A切刀电流', '<input type="checkbox" checked onchange="tableHeadChange(\'一体机A切刀转速\',this)"/> 一体机A切刀转速'],
-          data: e.data.map((val, i) => [i, val.time, val['一体机A转速'], val['一体机A电流'], val['一体机A机头压力'], val['一体机A机头温度'], val['一体机A切刀电流'], val['一体机A切刀转速']]),
+          data: data.map((val, i) => [i, val.time, val['一体机A转速'], val['一体机A电流'], val['一体机A机头压力'], val['一体机A机头温度'], val['一体机A切刀电流'], val['一体机A切刀转速']]),
           index: true,
           fontColor: '#03BCD4 ',
           indexBGC: '#86F3FF',
@@ -145,10 +142,89 @@
           oddRowBGC: '#092A77',
           evenRowBGC: '#092A77',
         })
+
+        $("#Pagination").empty()
+        $("#Pagination").append(`
+            <li onclick="pre()">
+              <a aria-label="Previous" href="#">
+                <span aria-hidden="true">&laquo;</span>
+              </a>
+            </li>
+          `)
+        new Array(Math.ceil(data.length % 10)).fill(1).map((i,k)=>{
+          $("#Pagination").append(`
+          <li  pageId="${k+1}" class="page" onclick="pageClick(this,${k+1})"><a href="#">${k+1}</a></li>
+          `)
+        })
+        $("#Pagination").append(`
+            <li onclick="Next()">
+              <a aria-label="Next" href="#">
+                <span aria-hidden="true">&raquo;</span>
+              </a>
+            </li>
+          `)
       } else {
         $("#chart2").html(`<div style="width: 100%;height: 100%;text-align: center;line-height:35vw;color: #fff ">暂无数据</div>`)
       }
     })
+
+  }
+  const Modal2Search = async () => {
+    let params = {}
+    params.timeInterval=$('#timeInterval').val();
+    if ($('#startTime2').val()) {
+      params.beginTime = new Date($('#startTime2').val())
+    }
+    if ($('#endTime2').val()) {
+      params.endTime = new Date($('#endTime2').val())
+    }
+    await Modal2SearchReq(params)
+    $($(".page")[0]).addClass('active')
+    $($(".page")[0]).siblings().removeClass('active')
+  }
+  const pageClick = (e) =>{
+    $(e).addClass('active')
+    $(e).siblings().removeClass('active')
+    pageNum = e
+    let params = {}
+    params.timeInterval=$('#timeInterval').val();
+    if ($('#startTime2').val()) {
+      params.beginTime = new Date($('#startTime2').val())
+    }
+    if ($('#endTime2').val()) {
+      params.endTime = new Date($('#endTime2').val())
+    }
+    Modal2SearchReq(params)
+  }
+  const pre = () =>{
+    pageNum -= 1
+    if(pageNum < 1){
+      pageNum = 1
+    }
+    let params = {}
+    params.timeInterval=$('#timeInterval').val();
+    if ($('#startTime2').val()) {
+      params.beginTime = new Date($('#startTime2').val())
+    }
+    if ($('#endTime2').val()) {
+      params.endTime = new Date($('#endTime2').val())
+    }
+    Modal2SearchReq(params)
+  }
+  const Next = () =>{
+    pageNum += 1
+    if(pageNum > pagesNum){
+      pageNum = pagesNum
+    }
+    let params = {}
+    params.timeInterval=$('#timeInterval').val();
+    if ($('#startTime2').val()) {
+      params.beginTime = new Date($('#startTime2').val())
+    }
+    if ($('#endTime2').val()) {
+      params.endTime = new Date($('#endTime2').val())
+    }
+    Modal2SearchReq(params)
   }
   const derive = () => {
     let canvasNode = $("#chart1 div canvas")[0]
@@ -284,7 +360,11 @@
                   class="fa fa-search"></i>&nbsp;搜索</a>
           <a class="btn btn-warning btn-rounded btn-sm" onclick="derive2()"><i class="fa fa-download"></i>&nbsp;导出</a>
         </div>
-        <div class="chart1" id="chart2" style="position:relative;top:2%;left: 0;height: 92%"></div>
+        <div class="chart1" id="chart2" style="position:relative;top:2%;left: 0;height: 80%"></div>
+        <nav aria-label="Page navigation">
+          <ul class="pagination pagination-lg" id="Pagination">
+          </ul>
+        </nav>
       </div>
     </div>
   </div>