路网视频打点

src/components/Pagination/index.vue

@@ -82,6 +82,57 @@ function handleCurrentChange(val: number) {
     float: v-bind(float);
   }
 }
+
+.pagination-container {
+  height: 64px;
+  margin: 8px 0 0 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: 32px;
+    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;
+  }
+}
 .pagination-container.hidden {
   display: none;
 }

src/views/globalMap/RightMenu/PotentialFloodHazard.vue

@@ -60,7 +60,7 @@
       </div>
     </div>
   </div>
-  <NearbyVideos v-if="showNearbyVideos2" v-model="showNearbyVideos2" :get-data-method="getDataMethod" />
+  <NearbyVideos v-if="showNearbyVideos" v-model="showNearbyVideos" :get-data-method="getDataMethod" />
 </template>
 
 <script lang="ts" setup>
@@ -76,7 +76,6 @@ const queryParams = reactive({
 });
 const dataList = ref([]);
 const showNearbyVideos = ref(false);
-const showNearbyVideos2 = ref(false);
 const getDataMethod = ref(null);
 
 const initData = () => {
@@ -90,7 +89,7 @@ const handleCancel = () => {
 };
 const showMoreVideos = () => {
   getDataMethod.value = getWaterloggedAllVideoInfo;
-  showNearbyVideos2.value = true;
+  showNearbyVideos.value = true;
 };
 const handleShowDialog = (item) => {
   showDetail(item, 4);

src/views/globalMap/RightMenu/RoadNetworkVideo.vue

@@ -49,11 +49,14 @@
         </div>
       </div>
     </div>
-    <Dialog v-if="showDialog" v-model="showDialog" type="md" draggable title="路网视频" hide-footer>
-      <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center">
-        <HKVideo :dot_data="videoMonitorData" />
-      </div>
-    </Dialog>
+    <pagination
+      v-show="total > 0"
+      v-model:page="queryParams.current"
+      v-model:limit="queryParams.size"
+      :total="total"
+      layout="total, prev, pager, next"
+      @pagination="initData"
+    />
   </div>
 </template>
 
@@ -63,6 +66,7 @@ import { getRoadVideoList } from '@/api/globalMap/roadNetworkVideo';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { district_type } = toRefs<any>(proxy?.useDict('district_type'));
+const showDetail = inject('showDetail');
 const queryParams = reactive({
   current: 1,
   size: 10,
@@ -79,19 +83,20 @@ const options = reactive([
   { label: '高速公路', value: '2', checked: true },
   { label: '国道', value: '3', checked: true },
   { label: '省市县际道路', value: '4', checked: true },
-  { label: '乡道', value: '5', checked: true },
+  { label: '乡道', value: '5', checked: true }
   // { label: '高速服务区', value: '高速服务区', checked: true }
 ]);
 const listData = ref([]);
 
-let showDialog = ref(false);
-let videoMonitorData = ref({});
 const handleShowDialog = (row) => {
-  showDialog.value = false;
-  nextTick(() => {
-    videoMonitorData.value = row;
-    showDialog.value = true;
-  });
+  showDetail(
+    {
+      id: row.video_code,
+      lng: row.longitude,
+      lat: row.latitude
+    },
+    'video'
+  );
 };
 const initData = () => {
   getRoadVideoList(queryParams).then((res) => {
@@ -136,7 +141,7 @@ initData();
 .custom-table {
   width: 100%;
   .table-content {
-    height: 570px;
+    height: 500px;
     overflow-y: auto;
     overflow-x: hidden;
   }

src/views/globalMap/index.vue

@@ -309,6 +309,7 @@ let detailsData = ref({
   id: '',
   dataType: ''
 });
+//  显示打点详情
 const showDetail = (data, dataType) => {
   const domRef = mapStore.isAMap ? mapRef.value : map2Ref.value;
   if (!!domRef) {