重点车辆、手机工作台、移动指挥车增加分页

src/views/globalMap/RightMenu/KeyVehicles.vue

@@ -20,7 +20,7 @@
         <div class="td" style="width: 120px; flex: unset">操作</div>
       </div>
       <div class="table-content">
-        <div v-for="(item, index) in dataList" :key="item.id" class="tr">
+        <div v-for="item in dataList" :key="item.id" class="tr">
           <div class="td">{{ item.vehicle_no }}</div>
           <div class="td">
             <dict-tag :options="alarm_identification" :value="item.alarm_flag" />
@@ -30,12 +30,23 @@
           </div>
           <div class="td">{{ parseTime(item.gpsDate) }}</div>
           <div class="td" style="width: 120px; flex: unset">
-            <div class="text" @click="handleConnect(index, item)">连线</div>
-            <div class="text" @click="handleCollaborate(index, item)">协同</div>
+            <div class="text" @click="handleConnect">连线</div>
+            <div class="text" @click="handleCollaborate">协同</div>
             <div class="text" @click="handleTrack(item)">轨迹</div>
           </div>
         </div>
       </div>
+      <div class="footer">
+        <el-pagination
+          background
+          :hide-on-single-page="true"
+          layout="total, prev, pager, next"
+          :total="total"
+          :page-size="queryParams.size"
+          :current-page="queryParams.current"
+          @current-change="handleChangePage"
+        />
+      </div>
     </div>
   </div>
 </template>
@@ -47,44 +58,40 @@ import { parseTime } from '@/utils/ruoyi';
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { car_type, alarm_identification } = toRefs<any>(proxy?.useDict('car_type', 'alarm_identification'));
 
-const AMapType = ['vectorgraph', 'satellite'];
 const initDataToPlay = inject('initDataToPlay');
-const props = defineProps({
-  activeMap: String
-});
 // 数据列表,直接定义为数组
-const dataList = reactive([]);
-//入参
+const dataList = ref([]);
+// 入参
 const queryParams = reactive({
+  current: 1,
+  size: 10,
   keywords: ''
 });
-//调接口
+const total = ref(0);
+// 调接口
 const initData = () => {
-  getVehicleList({
-    query: {
-      keywords: queryParams.keywords
-    }
-  }).then((res) => {
-    if (res.code === 0 && Array.isArray(res.rows)) {
-      dataList.splice(0, dataList.length, ...res.rows); // 使用 splice 替换数组内容，保持响应性
-    } else {
-      console.error('Invalid response from server:', res);
-      // 可以选择清空数据列表或显示错误消息
-      dataList.splice(0, dataList.length); // 清空数据列表
-    }
+  getVehicleList({ current: queryParams.current, size: queryParams.size, query: { keywords: queryParams.keywords } }).then((res) => {
+    dataList.value = res.rows;
+    total.value = res.total;
   });
 };
 
+const handleChangePage = (newNum) => {
+  queryParams.current = newNum;
+  initData();
+};
+
 // 取消按钮的逻辑，搜索框清空并重新加载数据
 const handleCancel = () => {
   queryParams.keywords = '';
+  queryParams.current = 1;
   initData();
 };
 
 const handleConnect = () => {};
 const handleCollaborate = () => {};
-// 轨迹
 
+// 轨迹
 const handleTrack = (item) => {
   getVehicleTrajectory(item.vehicle_no).then((res) => {
     const trajectory = [];
@@ -97,7 +104,7 @@ const handleTrack = (item) => {
     initDataToPlay({ type: 'track', data: trajectory });
   });
 };
-//调用函数
+// 调用函数
 onMounted(() => {
   initData();
 });
@@ -131,11 +138,13 @@ onMounted(() => {
   }
 }
 .custom-table {
-  width: 550px;
+  width: 100%;
+  height: 470px;
+  display: flex;
+  flex-direction: column;
   .table-content {
-    height: 385px;
+    flex: 1;
     overflow-y: auto;
-    overflow-x: hidden;
   }
   .th {
     background: url('@/assets/images/map/rightMenu/th.png') no-repeat;
@@ -190,4 +199,47 @@ onMounted(() => {
     margin-right: 0;
   }
 }
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 8px;
+  .pagination-container {
+    margin: 0;
+  }
+  :deep(.el-pagination__total) {
+    color: #a7ccdf;
+  }
+  :deep(.el-pagination) {
+    .btn-next,
+    .btn-prev {
+      background-color: transparent;
+      border: none;
+      .el-icon {
+        color: #a7ccdf;
+      }
+    }
+    .btn-prev:disabled,
+    .btn-next:disabled {
+      background-color: transparent;
+      border: none;
+    }
+    .el-pager li {
+      text-align: center;
+      color: #a7ccdf;
+      background-color: #0e3064;
+      border: 1px solid #0c57a7;
+      &:hover {
+        background-color: #038dff;
+        border: 1px solid #038dff;
+      }
+    }
+    .el-pager li.is-active {
+      background-color: #038dff;
+      border: 1px solid #038dff;
+    }
+    .el-pagination__goto {
+      color: #a7ccdf;
+    }
+  }
+}
 </style>

src/views/globalMap/RightMenu/MobileCommandVehicle.vue

@@ -18,15 +18,26 @@
         <div class="td" style="width: 80px; flex: unset">操作</div>
       </div>
       <div class="table-content">
-        <div v-for="(item, index) in dataList" :key="item.id" class="tr">
+        <div v-for="item in dataList" :key="item.id" class="tr">
           <div class="td">{{ item.drone_name }}</div>
           <div class="td" style="width: 80px; flex: unset">
-            <div class="text" @click="handleConnect(index, item)">连线</div>
+            <div class="text" @click="handleConnect">连线</div>
             <!--            <div class="text" @click="handleCollaborate(index, item)">协同</div>-->
             <div class="text" @click="handleTrack(item)">轨迹</div>
           </div>
         </div>
       </div>
+      <div class="footer">
+        <el-pagination
+          background
+          :hide-on-single-page="true"
+          layout="total, prev, pager, next"
+          :total="total"
+          :page-size="queryParams.size"
+          :current-current="queryParams.current"
+          @current-change="handleChangePage"
+        />
+      </div>
     </div>
   </div>
 </template>
@@ -37,31 +48,37 @@ import { onMounted, reactive } from 'vue';
 import { getDroneResourcesList, getDroneResourcesTrajectory } from '@/api/globalMap/Helicopter';
 const trackPlayback = inject('trackPlayback');
 // 数据列表,直接定义为数组
-const dataList = reactive([]);
+const dataList = ref([]);
 //入参
 const queryParams = reactive({
+  current: 1,
+  size: 10,
   keywords: ''
 });
+const total = ref(0);
 //调接口
 const initData = () => {
-  getDroneResourcesList({
+  getMobileCommandVehicleList({
+    current: queryParams.current,
+    size: queryParams.size,
     query: {
       keywords: queryParams.keywords
     }
   }).then((res) => {
-    if (res.code === 0 && Array.isArray(res.rows)) {
-      dataList.splice(0, dataList.length, ...res.rows); // 使用 splice 替换数组内容，保持响应性
-    } else {
-      console.error('Invalid response from server:', res);
-      // 可以选择清空数据列表或显示错误消息
-      dataList.splice(0, dataList.length); // 清空数据列表
-    }
+    dataList.value = res.rows;
+    total.value = res.total;
   });
 };
 
+const handleChangePage = (newNum) => {
+  queryParams.current = newNum;
+  initData();
+};
+
 // 取消按钮的逻辑，搜索框清空并重新加载数据
 const handleCancel = () => {
   queryParams.keywords = '';
+  queryParams.current = 1;
   initData();
 };
 const handleConnect = () => {};

src/views/globalMap/RightMenu/MobilePlatform.vue

@@ -21,17 +21,28 @@
         <div class="td" style="width: 120px; flex: unset">操作</div>
       </div>
       <div class="table-content">
-        <div v-for="(item, index) in dataList" :key="item.id" class="tr">
+        <div v-for="item in dataList" :key="item.id" class="tr">
           <div class="td">{{ item.name }}</div>
           <div class="td">{{ item.work_unit }}</div>
           <div class="td">{{ item.position }}</div>
           <div class="td" style="width: 120px; flex: unset">
-            <div class="text" @click="handleConnect(index, item)">连线</div>
-            <div class="text" @click="handleCollaborate(index, item)">协同</div>
+            <div class="text" @click="handleConnect">连线</div>
+            <div class="text" @click="handleCollaborate">协同</div>
             <div class="text" @click="handleTrack(item)">轨迹</div>
           </div>
         </div>
       </div>
+      <div class="footer">
+        <el-pagination
+          background
+          :hide-on-single-page="true"
+          layout="total, prev, pager, next"
+          :total="total"
+          :page-size="queryParams.size"
+          :current-current="queryParams.current"
+          @current-change="handleChangePage"
+        />
+      </div>
     </div>
   </div>
 </template>
@@ -42,31 +53,37 @@ import { getMobileWorkstationList, getMobileWorkstationTrajectory } from '@/api/
 import { onMounted, reactive } from 'vue';
 const trackPlayback = inject('trackPlayback');
 // 数据列表,直接定义为数组
-const dataList = reactive([]);
+const dataList = ref([]);
 //入参
 const queryParams = reactive({
+  current: 1,
+  size: 10,
   keywords: ''
 });
+const total = ref(0);
 //调接口
 const initData = () => {
   getMobileWorkstationList({
+    current: queryParams.current,
+    size: queryParams.size,
     query: {
       keywords: queryParams.keywords
     }
   }).then((res) => {
-    if (res.code === 0 && Array.isArray(res.rows)) {
-      dataList.splice(0, dataList.length, ...res.rows); // 使用 splice 替换数组内容，保持响应性
-    } else {
-      console.error('Invalid response from server:', res);
-      // 可以选择清空数据列表或显示错误消息
-      dataList.splice(0, dataList.length); // 清空数据列表
-    }
+    dataList.value = res.rows;
+    total.value = res.total;
   });
 };
 
+const handleChangePage = (newNum) => {
+  queryParams.current = newNum;
+  initData();
+};
+
 // 取消按钮的逻辑，搜索框清空并重新加载数据
 const handleCancel = () => {
   queryParams.keywords = '';
+  queryParams.current = 1;
   initData();
 };
 const handleConnect = () => {};
@@ -115,11 +132,13 @@ onMounted(() => {
   }
 }
 .custom-table {
-  width: 550px;
+  width: 100%;
+  height: 470px;
+  display: flex;
+  flex-direction: column;
   .table-content {
-    height: 385px;
+    flex: 1;
     overflow-y: auto;
-    overflow-x: hidden;
   }
   .th {
     background: url('@/assets/images/map/rightMenu/th.png') no-repeat;
@@ -174,4 +193,47 @@ onMounted(() => {
     margin-right: 0;
   }
 }
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 8px;
+  .pagination-container {
+    margin: 0;
+  }
+  :deep(.el-pagination__total) {
+    color: #a7ccdf;
+  }
+  :deep(.el-pagination) {
+    .btn-next,
+    .btn-prev {
+      background-color: transparent;
+      border: none;
+      .el-icon {
+        color: #a7ccdf;
+      }
+    }
+    .btn-prev:disabled,
+    .btn-next:disabled {
+      background-color: transparent;
+      border: none;
+    }
+    .el-pager li {
+      text-align: center;
+      color: #a7ccdf;
+      background-color: #0e3064;
+      border: 1px solid #0c57a7;
+      &:hover {
+        background-color: #038dff;
+        border: 1px solid #038dff;
+      }
+    }
+    .el-pager li.is-active {
+      background-color: #038dff;
+      border: 1px solid #038dff;
+    }
+    .el-pagination__goto {
+      color: #a7ccdf;
+    }
+  }
+}
 </style>