提交增加分页内容

src/apis/hdsj.js

@@ -41,7 +41,7 @@ export function GetYjWarning(id) {
     url: '/DigitalTwain/dredging/getCrossWarning',
     method: "post",
     data: {
-      page: 1, limit: 4, id
+      page: 1, limit:12, id
     }
   })
 }

src/views/hdsj/Index.vue

@@ -128,13 +128,31 @@
       </div>
       <div class="pr-b3 pr">
         <span class="title2-right">越界预警</span>
-        <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" >-->
+<!--          <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>-->
       </div>
     </div>
     <div v-else class="panel-right pr-no-data">无数据</div>
@@ -185,6 +203,10 @@ 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()
@@ -962,7 +984,7 @@ function handleShowBingTu()
       .prb3-main {
         display: flex;
         flex-direction: column;
-        align-items: flex-end;
+        align-items: center;
         width: 100%;
         // height: 20vh;
         // margin: 10px 0 25px;