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

src/views/globalMap/RightMenu/KeyVehicles.vue

@@ -20,7 +20,7 @@
         <div class="td" style="width: 330px; 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: 330px; 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>
@@ -45,59 +56,43 @@ import { Search } from '@element-plus/icons-vue';
 import { getVehicleList, getVehicleTrajectory } from '@/api/globalMap/KeyVehicles';
 import { onMounted, reactive, inject } from 'vue';
 import { parseTime } from '@/utils/ruoyi';
-const AMapType = ['vectorgraph', 'satellite'];
+
 const initDataToPlay = inject('initDataToPlay');
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { car_type, alarm_identification } = toRefs<any>(proxy?.useDict('car_type', 'alarm_identification'));
-const props = defineProps({
-  activeMap: String
-});
 
-// 数据列表,直接定义为数组
-const dataList = reactive([]);
-//入参
+const dataList = ref([]);
+// 入参
 const queryParams = reactive({
+  current: 1,
+  size: 10,
   keywords: ''
 });
-
-const vehicleTypeMap = {
-  0: '空车',
-  1: '重车',
-  2: '过境车'
-};
-//调接口
+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 showDetail = inject('showDetail');
-// const handleShowDialog = (item) => {
-//   location.value = [item.lng, item.lat];
-//   showDetail(item, 30);
-// };
 // 轨迹
-
 const handleTrack = (item) => {
   getVehicleTrajectory(item.vehicle_no).then((res) => {
     const trajectory = [];
@@ -110,7 +105,7 @@ const handleTrack = (item) => {
     initDataToPlay({ type: 'track', data: trajectory });
   });
 };
-//调用函数
+// 调用函数
 onMounted(() => {
   initData();
 });
@@ -159,13 +154,12 @@ onMounted(() => {
 
 .custom-table {
   width: 100%;
-  height: 1030px;
-  overflow-y: auto;
-  overflow-x: hidden;
+  height: 1120px;
+  display: flex;
+  flex-direction: column;
   .table-content {
-    height: 880px;
+    flex: 1;
     overflow-y: auto;
-    overflow-x: hidden;
   }
   .th {
     width: 100%;
@@ -237,4 +231,57 @@ onMounted(() => {
   font-size: 32px; /* 根据需要设置字体大小 */
   line-height: 1; /* 确保行高一致 */
 }
+.footer {
+  height: 64px;
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 25px;
+  .pagination-container {
+    height: 64px;
+    margin: 0;
+  }
+  :deep(.el-pagination__total) {
+    color: #a7ccdf;
+    font-size: 32px;
+  }
+  :deep(.el-pagination) {
+    .btn-next,
+    .btn-prev {
+      background-color: transparent;
+      border: none;
+      .el-icon {
+        font-size: 22px;
+        color: #a7ccdf;
+      }
+    }
+    .btn-prev:disabled,
+    .btn-next:disabled {
+      background-color: transparent;
+      border: none;
+    }
+    .el-pager li {
+      width: 64px;
+      height: 64px;
+      line-height: 64px;
+      text-align: center;
+      font-size: 38px;
+      color: #a7ccdf;
+      background-color: #0e3064;
+      border: 1px solid #0c57a7;
+      margin: 0 6px;
+      &:hover {
+        background-color: #038dff;
+        border: 1px solid #038dff;
+      }
+    }
+    .el-pager li.is-active {
+      background-color: #038dff;
+      border: 1px solid #038dff;
+    }
+    .el-pagination__goto {
+      font-size: 38px;
+      color: #a7ccdf;
+    }
+  }
+}
 </style>

src/views/globalMap/RightMenu/MobileCommandVehicle.vue

@@ -18,15 +18,26 @@
         <div class="td" style="width: 220px; 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" style="width: 220px; 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>
@@ -34,34 +45,40 @@
 <script setup lang="ts">
 import { Search } from '@element-plus/icons-vue';
 import { onMounted, reactive } from 'vue';
-import { getMobileCommandVehicleList, getMobileCommandVehicleTrajectory } from "@/api/globalMap/MobileCommandVehicle";
+import { getMobileCommandVehicleList, getMobileCommandVehicleTrajectory } from '@/api/globalMap/MobileCommandVehicle';
 const trackPlayback = inject('trackPlayback');
 // 数据列表,直接定义为数组
-const dataList = reactive([]);
+const dataList = ref([]);
 //入参
 const queryParams = reactive({
+  current: 1,
+  size: 10,
   keywords: ''
 });
+const total = ref(0);
 //调接口
 const initData = () => {
   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 = () => {};
@@ -125,13 +142,12 @@ onMounted(() => {
 
 .custom-table {
   width: 100%;
-  height: 1030px;
-  overflow-y: auto;
-  overflow-x: hidden;
+  height: 1120px;
+  display: flex;
+  flex-direction: column;
   .table-content {
-    height: 880px;
+    flex: 1;
     overflow-y: auto;
-    overflow-x: hidden;
   }
   .th {
     width: 100%;
@@ -203,4 +219,57 @@ onMounted(() => {
   font-size: 32px; /* 根据需要设置字体大小 */
   line-height: 1; /* 确保行高一致 */
 }
+.footer {
+  height: 64px;
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 25px;
+  .pagination-container {
+    height: 64px;
+    margin: 0;
+  }
+  :deep(.el-pagination__total) {
+    color: #a7ccdf;
+    font-size: 32px;
+  }
+  :deep(.el-pagination) {
+    .btn-next,
+    .btn-prev {
+      background-color: transparent;
+      border: none;
+      .el-icon {
+        font-size: 22px;
+        color: #a7ccdf;
+      }
+    }
+    .btn-prev:disabled,
+    .btn-next:disabled {
+      background-color: transparent;
+      border: none;
+    }
+    .el-pager li {
+      width: 64px;
+      height: 64px;
+      line-height: 64px;
+      text-align: center;
+      font-size: 38px;
+      color: #a7ccdf;
+      background-color: #0e3064;
+      border: 1px solid #0c57a7;
+      margin: 0 6px;
+      &:hover {
+        background-color: #038dff;
+        border: 1px solid #038dff;
+      }
+    }
+    .el-pager li.is-active {
+      background-color: #038dff;
+      border: 1px solid #038dff;
+    }
+    .el-pagination__goto {
+      font-size: 38px;
+      color: #a7ccdf;
+    }
+  }
+}
 </style>

src/views/globalMap/RightMenu/MobilePlatform.vue

@@ -21,17 +21,28 @@
         <div class="td" style="width: 330px; 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: 330px; 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>
     <Contact v-if="shareState.showShare" v-model="shareState.showShare" @close="handleCloseShare" @confirm="handleShareConfirm" />
   </div>
@@ -45,31 +56,37 @@ import { getStartMiniParam } from '@/api/emergencyCommandMap/communication';
 import { showSuccessMsg } from '@/utils/notification';
 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 = () => {
@@ -172,13 +189,12 @@ onMounted(() => {
 
 .custom-table {
   width: 100%;
-  height: 1030px;
-  overflow-y: auto;
-  overflow-x: hidden;
+  height: 1120px;
+  display: flex;
+  flex-direction: column;
   .table-content {
-    height: 880px;
+    flex: 1;
     overflow-y: auto;
-    overflow-x: hidden;
   }
   .th {
     width: 100%;
@@ -235,4 +251,57 @@ onMounted(() => {
     margin-right: 0;
   }
 }
+.footer {
+  height: 64px;
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 25px;
+  .pagination-container {
+    height: 64px;
+    margin: 0;
+  }
+  :deep(.el-pagination__total) {
+    color: #a7ccdf;
+    font-size: 32px;
+  }
+  :deep(.el-pagination) {
+    .btn-next,
+    .btn-prev {
+      background-color: transparent;
+      border: none;
+      .el-icon {
+        font-size: 22px;
+        color: #a7ccdf;
+      }
+    }
+    .btn-prev:disabled,
+    .btn-next:disabled {
+      background-color: transparent;
+      border: none;
+    }
+    .el-pager li {
+      width: 64px;
+      height: 64px;
+      line-height: 64px;
+      text-align: center;
+      font-size: 38px;
+      color: #a7ccdf;
+      background-color: #0e3064;
+      border: 1px solid #0c57a7;
+      margin: 0 6px;
+      &:hover {
+        background-color: #038dff;
+        border: 1px solid #038dff;
+      }
+    }
+    .el-pager li.is-active {
+      background-color: #038dff;
+      border: 1px solid #038dff;
+    }
+    .el-pagination__goto {
+      font-size: 38px;
+      color: #a7ccdf;
+    }
+  }
+}
 </style>