运营管理装卸监测添加滚动

src/views/yyjg/Index.vue

@@ -29,31 +29,40 @@
     <div class="panel-right">
       <div class="pr pr-b1">
         <span class="title1-right">装卸监测</span>
-        <ul class="prb1-main">
-          <li class="prb1-main-item" v-for="item in listData_zxjc.data">
-            <i></i>
-            <div>
-              <div>
-                <span>{{ item.shipName }}</span>
-                <span>{{ item.state }}</span>
-              </div>
-              <span v-if="item.startWorkTime!=='--'">
-                {{ useDateFormat(item.startWorkTime, 'MM/DD HH:mm').value + ' - ' + useDateFormat(item.gpsTime, 'MM/DD HH:mm').value }}
-              </span>
-              <span v-else>--</span>
+        <el-carousel
+          trigger="click"
+          height="21vh"
+          class="prb1-main"
+          indicator-position="outside"
+          arrow="never"
+          :autoplay="true"
+        >
+          <el-carousel-item v-for="page in listData_zxjc_len" :key="page">
+            <div v-for="item,index in listData_zxjc.data.slice((page-1)*2, (page-1)*2+2)" class="prb1-main-item">
+              <i></i>
               <div>
                 <div>
-                  <span>货物: </span>
-                  <span>{{ item.cargoName }}</span>
+                  <span>{{ item.shipName }}</span>
+                  <span>{{ item.state }}</span>
                 </div>
+                <span v-if="item.startWorkTime!=='--'">
+                  {{ useDateFormat(item.startWorkTime, 'MM/DD HH:mm').value + ' - ' + useDateFormat(item.gpsTime, 'MM/DD HH:mm').value }}
+                </span>
+                <span v-else>--</span>
                 <div>
-                  <span>申报量(吨): </span>
-                  <span>{{ item.declareTon }}</span>
+                  <div>
+                    <span>货物: </span>
+                    <span>{{ item.cargoName }}</span>
+                  </div>
+                  <div>
+                    <span>申报量(吨): </span>
+                    <span>{{ item.declareTon }}</span>
+                  </div>
                 </div>
               </div>
             </div>
-          </li>
-        </ul>
+          </el-carousel-item>
+        </el-carousel>
       </div>
       <div class="pr pr-b2">
         <span class="title1-right">运行动态</span>
@@ -87,11 +96,14 @@ export default {
 </script>
 
 <script setup>
-  import { onMounted, reactive, nextTick, ref } from 'vue';
+  import { onMounted, reactive, nextTick, ref, computed } from 'vue';
   import { setEntThroughput5 } from '@/echarts/options';
   import EntInfoList from './cpns/EntInfoList'
   import { GetQygk, GetYxdt, GetZysb, GetZxjc, GetWggj } from '@/apis/yyjg'
   import { useDateFormat } from '@vueuse/core'
+  import { ElCarousel, ElCarouselItem } from 'element-plus'
+  import 'element-plus/es/components/carousel/style/css'
+  import 'element-plus/es/components/carousel-item/style/css'
 
   onMounted(() => {
     getData()
@@ -155,6 +167,9 @@ export default {
   function getData_zxjc() {
     GetZxjc().then(res => {
       listData_zxjc.data = res.data.Rows
+      setTimeout(() => {
+        getData_zxjc()
+      }, 10000);
     })
   }
 
@@ -163,6 +178,10 @@ export default {
     { shipName: '--', state: '--', startWorkTime: '--', gpsTime: '--', cargoName: '--', declareTon: 0 }
   ]})
 
+  const listData_zxjc_len = computed(() => {
+    return Math.ceil(listData_zxjc.data.length/2)
+  })
+
   function getData_yxdt() {
     GetYxdt().then(res => {
       cataData_yxdt.data.forEach(i => {
@@ -364,11 +383,7 @@ export default {
 
   .pr-b1 {
     .prb1-main {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-end;
-      height: 210px;
-      overflow: hidden;
+      width: 90%;
     }
     .prb1-main-item {
       display: flex;
@@ -439,6 +454,17 @@ export default {
         }
       }
     }
+    ::v-deep {
+      .el-carousel__indicator--horizontal {
+        margin: 0 2px;
+        padding: 8px 3px;
+      }
+      .el-carousel__indicator button {
+        width: 5px;
+        height: 5px;
+        border-radius: 50%;
+      }
+    }
   }
 
   .pr-b2 {