附近视频、切换图层

src/assets/styles/element-ui.scss

@@ -440,7 +440,7 @@
   background: #081b41;
   border: 1px solid #126cf7;
   .el-select-dropdown__item {
-    font-size: 30px;
+    font-size: 14px;
     color: #eaf3fc;
     &:hover {
       color: #126cf7;

src/components/Dialog/index.vue

@@ -56,11 +56,11 @@ const computedWidth = computed(() => {
   } else if (props.type === 'sm') {
     return '584px';
   } else if (props.type === 'lg') {
-    return '744px';
-  } else if (props.type === 'xl') {
     return '1024px';
-  } else {
+  } else if (props.type === 'xl') {
     return '1270px';
+  } else {
+    return '744px';
   }
 });
 const computedHeight = computed(() => {
@@ -108,6 +108,7 @@ const confirm = () => {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+  max-height: calc(100% - 100px);
   z-index: 99;
   font-size: 14px;
   display: flex;

src/components/HKVideo/video-container2.vue

@@ -4,7 +4,7 @@
       <div class="tag" :title="videoData[0].name">
         <div class="name">{{ videoData[0].name }}</div>
       </div>
-      <HKVideo :dot_data="videoData[0]" :height="1100" />
+      <HKVideo :dot_data="videoData[0]" :height="595" />
     </div>
   </div>
   <div v-else-if="videoData.length >= 2 && videoData.length <= 4" class="video-container2">
@@ -12,7 +12,7 @@
       <div class="tag" :title="item.name">
         <div class="name">{{ item.name }}</div>
       </div>
-      <HKVideo :dot_data="item" :height="8" />
+      <HKVideo :dot_data="item" :height="288" />
     </div>
   </div>
   <div v-else-if="videoData.length >= 5 && videoData.length <= 6" class="video-container3">
@@ -21,7 +21,7 @@
         <div class="tag" :title="videoData[0].name">
           <div class="name">{{ videoData[0].name }}</div>
         </div>
-        <HKVideo :dot_data="videoData[0]" :height="730" />
+        <HKVideo :dot_data="videoData[0]" :height="383" />
       </div>
     </div>
     <div class="box2">
@@ -29,13 +29,13 @@
         <div class="tag" :title="videoData[1].name">
           <div class="name">{{ videoData[1].name }}</div>
         </div>
-        <HKVideo :dot_data="videoData[1]" :height="365" />
+        <HKVideo :dot_data="videoData[1]" :height="188" />
       </div>
       <div class="video-item3">
         <div class="tag" :title="videoData[2].name">
           <div class="name">{{ videoData[2].name }}</div>
         </div>
-        <HKVideo :dot_data="videoData[2]" :height="365" />
+        <HKVideo :dot_data="videoData[2]" :height="188" />
       </div>
     </div>
     <div class="box3">
@@ -43,19 +43,19 @@
         <div class="tag" :title="videoData[3].name">
           <div class="name">{{ videoData[3].name }}</div>
         </div>
-        <HKVideo :dot_data="videoData[3]" :height="365" />
+        <HKVideo :dot_data="videoData[3]" :height="188" />
       </div>
       <div class="video-item">
         <div class="tag" :title="videoData[4].name">
           <div class="name">{{ videoData[4].name }}</div>
         </div>
-        <HKVideo :dot_data="videoData[4]" :height="365" />
+        <HKVideo :dot_data="videoData[4]" :height="188" />
       </div>
       <div class="video-item">
         <div class="tag" :title="videoData[5].name">
           <div class="name">{{ videoData[5].name }}</div>
         </div>
-        <HKVideo :dot_data="videoData[5]" :height="365" />
+        <HKVideo :dot_data="videoData[5]" :height="188" />
       </div>
     </div>
   </div>
@@ -64,7 +64,7 @@
       <div class="tag" :title="item.name">
         <div class="name">{{ item.name }}</div>
       </div>
-      <HKVideo :dot_data="item" :height="258" />
+      <HKVideo :dot_data="item" :height="180" />
     </div>
   </div>
   <div v-else class="tip">附近没有可用监控视频</div>
@@ -84,21 +84,21 @@ const props = withDefaults(defineProps<Props>(), {});
   position: relative;
   background: url('@/assets/images/video/videoBg.png') no-repeat;
   background-size: 100% 100%;
-  padding: 17px;
+  padding: 15px 10px 10px 10px;
   .tag {
     position: absolute;
-    bottom: 17px;
-    right: 17px;
+    bottom: 15px;
+    right: 10px;
     color: #fff;
     z-index: 11;
-    width: 546px;
-    height: 67px;
+    width: 179px;
+    height: 22px;
     background: url('@/assets/images/video/tag.png') no-repeat;
     display: flex;
     justify-content: flex-end;
     align-items: center;
     .name {
-      width: 480px;
+      width: 140px;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -113,11 +113,11 @@ const props = withDefaults(defineProps<Props>(), {});
   .video-item {
     width: 100%;
     height: 100%;
-    padding: 70px 50px;
+    padding: 35px 15px 38px 23px;
   }
   .tag {
-    right: 49px;
-    bottom: 73px;
+    right: 14px;
+    bottom: 38px;
   }
 }
 .video-container2 {
@@ -127,13 +127,13 @@ const props = withDefaults(defineProps<Props>(), {});
   height: 100%;
   .video-item {
     width: calc(50% - 12px);
-    height: 620px;
+    height: 322px;
     margin-bottom: 12px;
     margin-right: 12px;
-    padding: 30px 20px 30px 30px;
+    padding: 17px 9px 15px 11px;
     .tag {
-      bottom: 31px;
-      right: 20px;
+      bottom: 19px;
+      right: 10px;
     }
     &:nth-child(2n) {
       margin-right: 0;
@@ -147,43 +147,51 @@ const props = withDefaults(defineProps<Props>(), {});
   height: 100%;
   .box1 {
     width: calc(66.66666% - 6px);
-    height: 830px;
+    height: 430px;
     margin-bottom: 12px;
     margin-right: 12px;
     .video-item2 {
       width: 100%;
       height: 100%;
-      padding: 48px 30px 30px 40px;
+      padding: 22px 13px 19px 17px;
       .tag {
-        bottom: 50px;
-        right: 29px;
+        bottom: 24px;
+        right: 13px;
       }
     }
   }
   .box2 {
     width: calc(33.33333% - 6px);
-    height: 830px;
+    height: 430px;
     .video-item3 {
       width: 100%;
-      height: 415px;
+      height: 215px;
       margin-bottom: 12px;
-      padding: 25px 17px 20px 24px;
+      padding: 12px 7px 11px 11px;
       &:nth-child(2) {
         margin-top: 12px;
       }
+      .tag {
+        bottom: 15px;
+        right: 7px;
+      }
     }
   }
   .box3 {
     width: 100%;
-    height: 415px;
+    height: 215px;
     display: flex;
   }
   .video-item {
     width: calc(33.33333% - 8px);
-    height: 415px;
+    height: 215px;
     margin-bottom: 12px;
     margin-right: 12px;
-    padding: 25px 17px 20px 24px;
+    padding: 12px 7px 11px 11px;
+    .tag {
+      bottom: 15px;
+      right: 7px;
+    }
     &:nth-child(3n) {
       margin-right: 0;
     }
@@ -197,7 +205,7 @@ const props = withDefaults(defineProps<Props>(), {});
   overflow-y: auto;
   .video-item {
     width: calc(33.33333% - 8px);
-    height: 292px;
+    height: 210px;
     margin-bottom: 12px;
     margin-right: 12px;
     &:nth-child(3n) {
@@ -208,7 +216,7 @@ const props = withDefaults(defineProps<Props>(), {});
 .tip {
   width: 100%;
   height: 100%;
-  font-size: 44px;
+  font-size: 24px;
   display: flex;
   justify-content: center;
   align-items: center;

src/components/NearbyVideos/index.vue

@@ -0,0 +1,195 @@
+<template>
+  <Dialog custom-show type="lg" title="附近视频" height="780px" hide-footer @close="handleClose">
+    <div class="flex-box">
+      <div>附近距离</div>
+      <el-select v-model="queryParams.radius" class="custom-select" popper-class="custom-popper" :teleported="false" @change="initData">
+        <el-option v-for="item in radiusOption" :key="item.value" :label="item.label" :value="item.value" />
+      </el-select>
+    </div>
+    <div class="video-box">
+      <video-container2 v-show="!loading" :video-data="videoMonitorData" />
+    </div>
+    <div v-if="!!getDataMethod" class="footer">
+      <el-pagination
+        background
+        :hide-on-single-page="true"
+        layout="total, prev, pager, next"
+        :total="total"
+        :page-size="queryParams2.pageSize"
+        :current-page="queryParams2.page"
+        @current-change="initData2"
+      />
+    </div>
+  </Dialog>
+</template>
+
+<script lang="ts" setup name="NearbyVideos">
+// 请求参数
+import { getVideoInfo } from '@/api/globalMap';
+
+interface Props {
+  modelValue: boolean;
+  location?: string | number[];
+  getDataMethod?: Function;
+}
+const props = withDefaults(defineProps<Props>(), {});
+const emits = defineEmits(['update:modelValue']);
+const total = ref(0);
+const queryParams = reactive({
+  location: '',
+  radius: '500'
+});
+const queryParams2 = reactive({
+  page: 1,
+  pageSize: 9
+});
+let videoMonitorData = ref([]);
+const radiusOption = reactive([
+  { label: '500米', value: '500' },
+  { label: '1000米', value: '1000' },
+  { label: '1500米', value: '1500' },
+  { label: '2000米', value: '2000' }
+]);
+let loading = ref(false);
+const initData = () => {
+  loading.value = true;
+  getVideoInfo(queryParams)
+    .then((res) => {
+      res.data?.list.forEach((item) => {
+        item.video_code = item.indexcode;
+      });
+      videoMonitorData.value = res.data?.list;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+};
+const initData2 = () => {
+  loading.value = true;
+  props
+    .getDataMethod({ page: queryParams2.page, pageSize: queryParams2.pageSize, radius: queryParams.radius })
+    .then((res) => {
+      total.value = res.totalPages;
+      res.data?.list.forEach((item) => {
+        item.video_code = item.indexcode;
+      });
+      videoMonitorData.value = res.data?.list;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+};
+watch(
+  () => props.location,
+  () => {
+    if (props.location && props.location.length === 2) {
+      queryParams.location = `POINT(${props.location[0]} ${props.location[1]})`;
+      initData();
+    }
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+);
+watch(
+  () => props.getDataMethod,
+  () => {
+    if (!!props.getDataMethod) {
+      initData2();
+    }
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+);
+
+const handleClose = () => {
+  emits('update:modelValue', false);
+};
+</script>
+
+<style lang="scss" scoped>
+.dialog-container {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 9;
+  width: 2000px;
+  height: 1562px;
+  background: url('@/assets/images/nearbyVideos/dialog.png') no-repeat;
+  padding: 160px 30px 20px 40px;
+  font-size: 36px;
+  color: #ffffff;
+  display: flex;
+  flex-direction: column;
+}
+.flex-box {
+  display: flex;
+  align-items: center;
+  color: #eaf3fc;
+  font-size: 14px;
+  .custom-select {
+    width: 140px;
+    margin-left: 20px;
+  }
+}
+.video-box {
+  margin-top: 5px;
+  flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+  overflow: hidden;
+  margin-bottom: 10px;
+}
+.close-btn {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  width: 75px;
+  height: 70px;
+  background: url('@/assets/images/map/rightMenu/close.png') no-repeat;
+  background-size: 100% 100%;
+  cursor: pointer;
+}
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 10px;
+  padding-right: 20px;
+  :deep(.el-pagination__total) {
+    color: #a7ccdf;
+    font-size: 14px;
+  }
+
+  :deep(.el-pagination) {
+    .btn-next,
+    .btn-prev {
+      background-color: transparent;
+      border: none;
+      .el-icon {
+        font-size: 16px;
+        color: #a7ccdf;
+      }
+    }
+    .el-pager li {
+      text-align: center;
+      font-size: 14px;
+      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;
+    }
+  }
+}
+</style>

src/types/components.d.ts

@@ -104,6 +104,7 @@ declare module 'vue' {
     Map: typeof import('./../components/Map/index.vue')['default']
     ModalVideo: typeof import('./../components/HKVideo/modal-video.vue')['default']
     MultiInstanceUser: typeof import('./../components/Process/multiInstanceUser.vue')['default']
+    NearbyVideos: typeof import('./../components/NearbyVideos/index.vue')['default']
     Pagination: typeof import('./../components/Pagination/index.vue')['default']
     ParentView: typeof import('./../components/ParentView/index.vue')['default']
     QuickZoom: typeof import('./../components/Map/quickZoom.vue')['default']

src/views/globalMap/LeftMenu.vue

@@ -289,7 +289,7 @@ defineExpose({ setMenuChange });
     overflow-y: auto;
     overflow-x: hidden;
     .content-box {
-      padding: 0 10px;
+      padding: 0 5px;
       width: 250px;
       background: url('@/assets/images/menu/menuContent.png') no-repeat;
       background-size: 100% 100%;
@@ -367,7 +367,7 @@ defineExpose({ setMenuChange });
         }
 
         .box-item {
-          padding: 7px 5px;
+          padding: 7px 4px;
           cursor: pointer;
           font-size: 14px;
           font-family: 'PingFang SC', sans-serif;

src/views/globalMap/SwitchMapTool.vue

@@ -56,24 +56,28 @@ const handleExpand = () => {
     content: '';
     position: absolute;
     top: 0;
-    left: -15px;
-    width: 17px;
-    height: 268px;
+    left: -5px;
+    width: 6px;
+    height: 86px;
     background-image: url('@/assets/images/map/switchLeft.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
   }
   &::after {
     content: '';
     position: absolute;
     top: 0;
-    right: -15px;
-    width: 17px;
-    height: 268px;
+    right: -5px;
+    width: 6px;
+    height: 86px;
     background-image: url('@/assets/images/map/switchRight.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
   }
   .expand-btn {
-    padding: 0 10px;
-    width: 71px;
-    height: 262px;
+    padding: 0 3px;
+    width: 22px;
+    height: 84px;
     background: url('@/assets/images/map/switchBtn.png') no-repeat;
     background-size: 100% 100%;
     text-align: center;
@@ -82,37 +86,37 @@ const handleExpand = () => {
     color: #fff;
     cursor: pointer;
     flex-shrink: 0;
-    font-size: 32px;
+    font-size: 12px;
     font-weight: 700;
     text-wrap: wrap;
     word-wrap: break-word;
     word-break: break-all;
   }
   .switch-content {
-    height: 264px;
+    height: 84px;
     background-image: url('@/assets/images/map/switchBox.png');
     background-repeat: no-repeat;
-    background-size: cover;
+    background-size: 100% 100%;
     display: flex;
   }
   .switch-item {
-    width: 323px;
-    height: 262px;
+    width: 104px;
+    height: 84px;
     padding: 10px 0;
     box-sizing: border-box;
     flex-shrink: 0;
     display: flex;
     justify-content: center;
     align-items: center;
-    margin: 0 12px;
+    margin: 0 8px;
     &:nth-child(2) {
-      margin-left: 24px;
+      margin-left: 0;
     }
   }
   .item-bg1 {
     position: relative;
-    width: 323px;
-    height: 222px;
+    width: 104px;
+    height: 71px;
     cursor: pointer;
     background-size: 100% 100%;
   }
@@ -144,14 +148,14 @@ const handleExpand = () => {
     position: absolute;
     right: 0;
     bottom: 0;
-    width: 168px;
-    height: 60px;
-    line-height: 60px;
+    width: 64px;
+    height: 20px;
+    line-height: 20px;
     background-image: url('@/assets/images/map/bg-default.png');
     background-repeat: no-repeat;
-    background-size: cover;
+    background-size: 100% 100%;
     text-align: right;
-    font-size: 32px;
+    font-size: 12px;
   }
 
   .bg-active {

src/views/globalMap/index.vue

@@ -46,6 +46,7 @@ import RightMenu from './RightMenu/index.vue';
 import { PointType } from '@/api/globalMap/type';
 import DrawTools from '@/views/globalMap/RightMenu/DrawTools.vue';
 import CommunicationSupport from '@/views/globalMap/RightMenu/CommunicationSupport.vue';
+import NearbyVideos from '@/components/NearbyVideos/index.vue';
 
 const rightMenuRef = ref(null);
 const mapData = reactive(logicalData);
@@ -291,7 +292,7 @@ provide('getMarkers', getMarkers);
   //overflow: hidden;
   .tool-box {
     position: absolute;
-    right: 90px;
+    right: 85px;
     bottom: 90px;
     z-index: 10;
     color: #fff;