路网视频打点

src/views/globalMap/RightMenu/RoadNetworkVideo.vue

@@ -49,11 +49,14 @@
         </div>
       </div>
     </div>
-    <Dialog v-if="showDialog" v-model="showDialog" type="md" title="路网视频" height="720px" draggable 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,
@@ -84,14 +88,15 @@ const options = reactive([
 ]);
 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) => {
@@ -131,7 +136,7 @@ initData();
 .custom-table {
   width: 550px;
   .table-content {
-    height: 290px;
+    height: 250px;
     overflow-y: auto;
     overflow-x: hidden;
   }
@@ -247,4 +252,42 @@ initData();
   display: flex;
   align-items: center;
 }
+
+.pagination-container {
+  height: 64px;
+  margin: 8px 0 0 0;
+}
+
+:deep(.el-pagination__total) {
+  color: #a7ccdf !important;
+}
+:deep(.el-pagination) {
+  .btn-next,
+  .btn-prev {
+    background-color: transparent !important;
+    border: none !important;
+    .el-icon {
+      color: #a7ccdf !important;
+    }
+  }
+  .btn-prev:disabled,
+  .btn-next:disabled {
+    background-color: transparent !important;
+    border: none !important;
+  }
+  .el-pager li {
+    text-align: center;
+    color: #a7ccdf !important;
+    background-color: #0e3064 !important;
+    border: 1px solid #0c57a7 !important;
+    &:hover {
+      background-color: #038dff !important;
+      border: 1px solid #038dff !important;
+    }
+  }
+  .el-pager li.is-active {
+    background-color: #038dff !important;
+    border: 1px solid #038dff !important;
+  }
+}
 </style>

src/views/globalMap/index.vue

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