修改分页

src/apis/hdsj.js

@@ -36,12 +36,12 @@ export function GetFstjByDay(time, id) {
   })
 }
 
-export function GetYjWarning(id) {
+export function GetYjWarning(index,size,id) {
   return request({
     url: '/DigitalTwain/dredging/getCrossWarning',
     method: "post",
     data: {
-      page: 1, limit:12, id
+      page: index, limit:size, id
     }
   })
 }

src/apis/ssky.js

@@ -44,10 +44,14 @@ export function GetLdkll() {
   })
 }
 
-export function GetThxx() {
+export function GetThxx(index,size) {
   return request({
     url: '/DigitalTwain/PassengerTraffic/getDelayLine',
     method: "post",
+    data: {
+      index, //分页页码
+      size //分页大小
+    }
   })
 }
 

src/views/hdsj/Index.vue

@@ -128,31 +128,45 @@
       </div>
       <div class="pr-b3 pr">
         <span class="title2-right">越界预警</span>
-        <el-carousel
-               style="width: 100%"
-                height="17vh"
-                trigger="click"
-                     indicator-position="outside"
-                     arrow="never"
-                     :autoplay="true">
-          <el-carousel-item style="width: 100%;height:100%;"  v-for="page in data_yuejie_page"  :key="page" >
-            <ul class="prb3-main" >
-                <li class="prb3-item2" v-for="item in data_yuejie.value.slice((page-1)*4, (page-1)*4+4)" >
-                  <img :src="require('@/assets/imgs/page_hdsj/icon-wgyj-list.png')" alt="">
-                  <span>{{ item.shipName }}</span>
-                  <span>{{ item.times? useDateFormat(item.times, 'MM-DD  HH:mm').value: '-' }}</span>
-                </li>
-            </ul>
-          </el-carousel-item>
-        </el-carousel>
-
-<!--        <ul class="prb3-main" >-->
-<!--          <li v-for="item in data_yuejie.value" class="prb3-item2">-->
-<!--            <img :src="require('@/assets/imgs/page_hdsj/icon-wgyj-list.png')" alt="">-->
-<!--            <span>{{ item.shipName }}</span>-->
-<!--            <span>{{ item.times? useDateFormat(item.times, 'MM-DD  HH:mm').value: '-' }}</span>-->
-<!--          </li>-->
-<!--        </ul>-->
+<!--        <el-carousel-->
+<!--               style="width: 100%"-->
+<!--                height="17vh"-->
+<!--                trigger="click"-->
+<!--                     indicator-position="outside"-->
+<!--                     arrow="never"-->
+<!--                     :autoplay="true">-->
+<!--          <el-carousel-item style="width: 100%;height:100%;"  v-for="page in data_yuejie_page"  :key="page" >-->
+<!--            <ul class="prb3-main" >-->
+<!--                <li class="prb3-item2" v-for="item in data_yuejie.value.slice((page-1)*4, (page-1)*4+4)" >-->
+<!--                  <img :src="require('@/assets/imgs/page_hdsj/icon-wgyj-list.png')" alt="">-->
+<!--                  <span>{{ item.shipName }}</span>-->
+<!--                  <span>{{ item.times? useDateFormat(item.times, 'MM-DD  HH:mm').value: '-' }}</span>-->
+<!--                </li>-->
+<!--            </ul>-->
+<!--          </el-carousel-item>-->
+<!--        </el-carousel>-->
+                <ul class="prb3-main" v-if="data_yuejie.value.length>0" >
+                  <li v-for="item in data_yuejie.value" class="prb3-item2">
+                    <img :src="require('@/assets/imgs/page_hdsj/icon-wgyj-list.png')" alt="">
+                    <span>{{ item.shipName }}</span>
+                    <span>{{ item.times? useDateFormat(item.times, 'MM-DD  HH:mm').value: '-' }}</span>
+                  </li>
+                </ul>
+        <el-pagination
+                class="pageForDown"
+                style="opacity: 0.6;color: #eff7fb"
+                small
+                background="false"
+                :current-page="currentPage"
+                :page-size="pageSize"
+                :total="totals"
+                layout="prev, pager, next"
+                @current-change="handlePageChange"
+                @size-change="handleSizeChange"
+        >
+        </el-pagination>
+
+
       </div>
     </div>
     <div v-else class="panel-right pr-no-data">无数据</div>
@@ -176,7 +190,8 @@
 <script setup>
   import { onMounted, reactive, ref, computed, onBeforeUnmount, watch } from 'vue';
   import { setSjjk } from '../../echarts/options'
-  import { ElCarousel, ElCarouselItem } from 'element-plus'
+  import { ElCarousel, ElCarouselItem ,ElPagination} from 'element-plus'
+  import 'element-plus/es/components/pagination/style/css'
   import 'element-plus/es/components/carousel/style/css'
   import 'element-plus/es/components/carousel-item/style/css'
   import { GetBoatNum, GetFstj, GetFstjByDay, GetYjWarning, GetGctj, GetGcxx } from '@/apis/hdsj'
@@ -196,17 +211,17 @@
   import ShowYuWarning from '@/views/hdsj/cpns/ShowYuWarning'
   import {addLayerByName} from "@/utils/map/Layer"
   import {compareSjBeforeAfter} from "@/utils/map/Channel";
+
+
   const type =ref('计划方量')
   const aside_hide = asideShow().isHide
 
+
 function handleShowBingTu()
 {
   showSuJun.value=true
 }
 
-  const data_yuejie_page = computed(() => {
-    return Math.ceil(data_yuejie.value.length/4)
-  })
   onMounted(() => {
     // setSjjk(document.getElementById('chart_fstj'), chartData_fstj.value)
     // getGctj()
@@ -295,7 +310,6 @@ function handleShowBingTu()
 
 
   }
-
   const currentProject = reactive({ id: '', name: '', status: '' })
   const showRightDetail = ref(true)
   watch(()=>currentProject.id, (val)=> {
@@ -527,15 +541,36 @@ function handleShowBingTu()
   })
 
   function getYjWarning(id) {
-    GetYjWarning(id).then(res => {
-      if(res.data) {
+    GetYjWarning(currentPage.value,pageSize.value,id).then(res => {
+      if(res.code=="200") {
+        // data_yuejie.value = res.data.Rows.sort((a,b) => b.TIME - a.TIME)
         data_yuejie.value = res.data.Rows.sort((a,b) => b.TIME - a.TIME)
+        totals.value = res.data.TotalRowCount
       } else {
         data_yuejie.value = data_yuejie.default
+
       }
     })
   }
+  const currentPage = ref(1)
+  const pageSize = ref(5)
+  const totals = ref(0)
+  function  indexCreate(row, column, cellValue, index) {
+    return index + 1 + pageSize.value*(currentPage.value - 1)
+  }
+
+  function handlePageChange(val) {
+    currentPage.value = val
+    getYjWarning(currentProject.id)
+  }
 
+  function handleSizeChange(val) {
+    // debugger
+    pageSize.value = val
+    currentPage.value = 1
+    getYjWarning(currentProject.id)
+
+  }
   onBeforeUnmount(() => {
     bus.off('ueRec_InitShujun')
     bus.off('ueRec_ClickShujun')
@@ -1016,5 +1051,12 @@ function handleShowBingTu()
         }
       }
     }
+    .pageForDown{
+      height: 20px;
+      margin: 0 auto;
+      button{
+        opacity: 0.5;
+      }
+    }
   }
 </style>

src/views/ssky/Index.vue

@@ -132,6 +132,20 @@
           </div>
         </div>
       </div>
+      <el-pagination
+              class="pageForDown"
+              style="opacity: 0.6;color: #eff7fb"
+              small
+              background="false"
+              popper-class="is-first"
+              :current-page="currentPage"
+              :page-size="pageSize"
+              :total="total"
+              layout="prev, pager, next"
+              @current-change="handlePageChange"
+              @size-change="handleSizeChange"
+      >
+      </el-pagination>
     </div>
 
 
@@ -162,6 +176,8 @@ export default {
   import LdkllLineDetail from './cpns/LdkllLineDetail.vue'
   import { asideShow } from '@/store/index'
 
+  import { ElPagination } from 'element-plus'
+  import 'element-plus/es/components/pagination/style/css'
 
   import  {clearMap} from "@/utils/map/ArcgisUtil"
   import  {pjylLine,djldLineAll} from "@/utils/map/WaterPassenger"
@@ -177,7 +193,25 @@ export default {
 
   const boatDockListShow = ref(false)
 
+  const currentPage = ref(1)
+  const pageSize = ref(10)
+  const total = ref(0)
+  function  indexCreate(row, column, cellValue, index) {
+    return index + 1 + pageSize.value*(currentPage.value - 1)
+  }
+
+  function handlePageChange(val) {
+    currentPage.value = val
+    getThxx()
+  }
+
+  function handleSizeChange(val) {
+    // debugger
+    pageSize.value = val
+    currentPage.value = 1
+    getThxx()
 
+  }
   let timer
 
   //关闭船舶后列表选择状态
@@ -354,9 +388,11 @@ export default {
   }
 
   function getThxx() {
-    GetThxx().then(res => {
+    GetThxx(currentPage.value,pageSize.value).then(res => {
       if(res.data.Rows.length>0) {
-        thxxData.value = res.data.Rows.slice(0,3)
+        // thxxData.value = res.data.Rows.slice(0,3)
+        thxxData.value = res.data.Rows
+        total.value = res.data.TotalRowCount
       }
     })
   }
@@ -496,6 +532,7 @@ export default {
   }
 
   .panel-right {
+    position:absolute;
     right: 0;
     padding: 0 30px 10px;
     &.is-hide {
@@ -952,6 +989,14 @@ export default {
       }
     }
   }
-
+  .pageForDown{
+    height: 20px;
+    position: absolute;
+    right: 10vh;
+    bottom: 20px;
+    button{
+    opacity: 0.5;
+    }
+  }
 }
 </style>