直升机、机动无人机、卫星电话增加分页

src/components/HKVideo/index.vue

@@ -15,7 +15,7 @@
           <div class="err_inner_box">
             <div class="err_icon"></div>
             <div class="err_text">视频解析错误</div>
-            <div class="refresh_btn" @click="play_now">刷新</div>
+            <div class="refresh_btn" @click="play">刷新</div>
           </div>
         </div>
       </div>
@@ -88,7 +88,7 @@ watch(
     nextTick(() => {
       if (props.autoplay) {
         reload.value = false;
-        play_now();
+        play_now(true);
       }
     });
   },
@@ -96,16 +96,21 @@ watch(
     deep: true
   }
 );
-const play_now = async () => {
-  console.log('play_now');
+const play_now = async (check?: boolean) => {
   posterVisible.value = false;
-  errBKVisible.value = false;
-  isPlaying.value = true;
-  // 视频监控数据
-  getVideoUrlById(props.dot_data.video_code).then((res) => {
-    wsUrl.value = res.data;
-    videoPlayer.value.play(wsUrl.value);
-  });
+  // if (check === true && props.dot_data.status === '离线') {
+  //   errBKVisible.value = true;
+  //   isPlaying.value = false;
+  // } else {
+    errBKVisible.value = false;
+    isPlaying.value = true;
+    // 视频监控数据
+    getVideoUrlById(props.dot_data.video_code).then((res) => {
+      wsUrl.value = res.data;
+      videoPlayer.value.play(wsUrl.value);
+    });
+  // }
+  console.log('play_now');
 };
 
 const stop_now = async () => {
@@ -130,7 +135,7 @@ defineExpose({
 });
 onMounted(() => {
   if (!!props.autoplay) {
-    play_now();
+    play_now(true);
   }
 });
 </script>

src/types/components.d.ts

@@ -98,6 +98,7 @@ declare module 'vue' {
     VideoContainer2: typeof import('./../components/HKVideo/video-container2.vue')['default']
     VideoTagEdit: typeof import('./../components/VideoTagEdit/index.vue')['default']
     YMap: typeof import('./../components/Map/YMap.vue')['default']
+    YMapold: typeof import('./../components/Map/YMapold.vue')['default']
     YztMap: typeof import('./../components/Map/YztMap/index.vue')['default']
   }
   export interface ComponentCustomProperties {

src/views/emergencyCommandMap/LeftSection/VideoMonitorEdit.vue

@@ -12,10 +12,8 @@
               class="custom-select"
               popper-class="custom-select-popper"
               :teleported="false"
-              placeholder="全部"
               style="width: 450px"
             >
-              <el-option label="全部" value="" />
               <el-option v-for="item in video_type" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
           </el-form-item>

src/views/globalMap/RightMenu/Helicopter.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.helicopter_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 { getHelicopterList, getHelicopterTrajectory } from "@/api/globalMap/Helicopter";
+import { getHelicopterList, getHelicopterTrajectory } 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 = () => {
   getHelicopterList({
+    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,58 @@ 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/MobileUnmannedVehicle.vue

@@ -14,7 +14,7 @@
     </div>
     <div class="flex-container">
       <div class="text-item">机动无人机</div>
-      <div class="button-item common-btn-primary2 edit-icon" style="margin-top: -20px" @click="showMoreVideos">全部播放</div>
+      <div class="button-item common-btn-primary2 edit-icon" @click="showMoreVideos">全部播放</div>
     </div>
     <div class="custom-table">
       <div class="th">
@@ -22,15 +22,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.drone_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>
@@ -38,44 +49,44 @@
 <script setup lang="ts">
 import { Search } from '@element-plus/icons-vue';
 import { onMounted, reactive } from 'vue';
-import {
-  getDroneResourcesList,
-  getDroneResourcesTrajectory,
-  getDroneResourcesVideo
-} from "@/api/globalMap/MobileUnmannedVehicle";
+import { getDroneResourcesList, getDroneResourcesTrajectory, getDroneResourcesVideo } from '@/api/globalMap/MobileUnmannedVehicle';
 const getDataMethod = ref(null);
 const showMoreVideos = () => {
   getDataMethod.value = () => getDroneResourcesVideo(id);
 };
-
-
 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({
+    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 = () => {};
@@ -139,13 +150,12 @@ onMounted(() => {
 
 .custom-table {
   width: 100%;
-  height: 1030px;
-  overflow-y: auto;
-  overflow-x: hidden;
+  height: 1015px;
+  display: flex;
+  flex-direction: column;
   .table-content {
-    height: 880px;
+    flex: 1;
     overflow-y: auto;
-    overflow-x: hidden;
   }
   .th {
     width: 100%;
@@ -207,6 +217,7 @@ onMounted(() => {
   display: flex;
   justify-content: space-between; /* 左右两端对齐 */
   align-items: center; /* 垂直居中对齐 */
+  margin: 15px 0;
 }
 .text-item {
   font-size: 32px; /* 根据需要设置字体大小 */
@@ -217,4 +228,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/SatellitePhone.vue

@@ -18,16 +18,27 @@
         <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.unit_name }}</div>
           <div class="td" style="width: 330px; flex: unset">
-            <div class="text" @click="handleConnect(index, item)">连线</div>
-            <div class="text" size="small" @click="handleCollaborate(index, item)">电话</div>
+            <div class="text" @click="handleConnect">连线</div>
+            <div class="text" size="small" @click="handleCollaborate">电话</div>
             <div class="text" size="small" @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>
@@ -35,38 +46,44 @@
 <script setup lang="ts">
 import { Search } from '@element-plus/icons-vue';
 import { onMounted, reactive } from 'vue';
-import { getSatellitePhoneList, getSatellitePhoneTrajectory } from "@/api/globalMap/SatellitePhone";
+import { getSatellitePhoneList, getSatellitePhoneTrajectory } from '@/api/globalMap/SatellitePhone';
 
 const trackPlayback = inject('trackPlayback');
 
 // 数据列表,直接定义为数组
-const dataList = reactive([]);
+const dataList = ref([]);
 //入参
 const queryParams = reactive({
+  current: 1,
+  size: 10,
   keywords: '',
   unit_name: ''
 });
+const total = ref(0);
 //调接口
 const initData = () => {
   getSatellitePhoneList({
+    current: queryParams.current,
+    size: queryParams.size,
     query: {
       keywords: queryParams.keywords,
       unit_name: queryParams.unit_name
     }
   }).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();
 };
 
@@ -132,13 +149,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%;
@@ -195,4 +211,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>