易涝点调整

src/components/NearbyVideos/index.vue

@@ -2,7 +2,7 @@
   <Dialog custom-show type="lg" :title="!!title ? title : '附近视频'" height="720px" draggable 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-select v-model="queryParams.radius" class="custom-select" popper-class="custom-popper" :teleported="false" @change="handleChange">
         <el-option v-for="item in radiusOption" :key="item.value" :label="item.label" :value="item.value" />
       </el-select>
     </div>
@@ -54,6 +54,13 @@ const radiusOption = reactive([
   { label: '2000米', value: '2000' }
 ]);
 let loading = ref(false);
+const handleChange = () => {
+  if (!!props.getDataMethod) {
+    initData2();
+  } else {
+    initData();
+  }
+};
 const initData = () => {
   loading.value = true;
   getVideoInfo(queryParams)
@@ -69,8 +76,13 @@ const initData = () => {
 };
 const initData2 = () => {
   loading.value = true;
+  const query = { page: queryParams2.page, pageSize: queryParams2.pageSize, radius: queryParams.radius };
+  if (props.location) {
+    query.longitude = props.location[0];
+    query.latitude = props.location[1];
+  }
   props
-    .getDataMethod({ page: queryParams2.page, pageSize: queryParams2.pageSize, radius: queryParams.radius })
+    .getDataMethod(query)
     .then((res) => {
       total.value = res.totalPages;
       res.data?.list.forEach((item) => {
@@ -85,7 +97,7 @@ const initData2 = () => {
 watch(
   () => props.location,
   () => {
-    if (props.location && props.location.length === 2) {
+    if (!props.getDataMethod && props.location && props.location.length === 2) {
       queryParams.location = `POINT(${props.location[0]} ${props.location[1]})`;
       initData();
     }

src/types/components.d.ts

@@ -26,6 +26,8 @@ declare module 'vue' {
     ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
     ElBadge: typeof import('element-plus/es')['ElBadge']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
+    ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
@@ -40,6 +42,7 @@ declare module 'vue' {
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElMenu: typeof import('element-plus/es')['ElMenu']
@@ -52,13 +55,19 @@ declare module 'vue' {
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSlider: typeof import('element-plus/es')['ElSlider']
+    ElStep: typeof import('element-plus/es')['ElStep']
+    ElSteps: typeof import('element-plus/es')['ElSteps']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTag: typeof import('element-plus/es')['ElTag']
     ElText: typeof import('element-plus/es')['ElText']
+    ElTimeline: typeof import('element-plus/es')['ElTimeline']
+    ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
+    ElTree: typeof import('element-plus/es')['ElTree']
     ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
     ElUpload: typeof import('element-plus/es')['ElUpload']
     ExcelEditor: typeof import('./../components/ExcelEditor/index.vue')['default']
@@ -72,8 +81,6 @@ declare module 'vue' {
     HikvisionPlayer: typeof import('./../components/HKVideo/hikvision-player.vue')['default']
     HKVideo: typeof import('./../components/HKVideo/index.vue')['default']
     IconSelect: typeof import('./../components/IconSelect/index.vue')['default']
-    IEpCaretBottom: typeof import('~icons/ep/caret-bottom')['default']
-    IEpCaretTop: typeof import('~icons/ep/caret-top')['default']
     IFrame: typeof import('./../components/iFrame/index.vue')['default']
     ImagePreview: typeof import('./../components/ImagePreview/index.vue')['default']
     ImageUpload: typeof import('./../components/ImageUpload/index.vue')['default']

src/views/globalMap/RightMenu/PotentialFloodHazard.vue

@@ -48,20 +48,22 @@
           </div>
           <div class="td">易涝点名称</div>
           <div class="td">提供单位</div>
+          <div class="td">视频</div>
         </div>
         <div class="table-content">
-          <div v-for="(item, index) in dataList" :key="index" class="tr" @click="handleShowDialog(item)">
+          <div v-for="(item, index) in dataList" :key="index" class="tr">
             <div class="td">{{ item.area }}</div>
-            <div class="td btn3">
+            <div class="td btn3" @click="handleShowDialog(item)">
               <div class="video-icon"></div>
               {{ item.flood_name }}
             </div>
             <div class="td">{{ item.unit }}</div>
+            <div class="td play-btn" @click="handlePlay(item)">播放</div>
           </div>
         </div>
       </div>
     </div>
-    <NearbyVideos v-if="showNearbyVideos" v-model="showNearbyVideos" :getDataMethod="getDataMethod" />
+    <NearbyVideos v-if="showNearbyVideos" v-model="showNearbyVideos" :location="location" :get-data-method="getDataMethod" />
   </div>
 </template>
 
@@ -78,8 +80,8 @@ const queryParams = reactive({
 });
 const dataList = ref([]);
 const showNearbyVideos = ref(false);
+const location = ref([]);
 const getDataMethod = ref(null);
-let location = ref([]);
 const initData = () => {
   getWaterloggedRoadsList(queryParams).then((res) => {
     dataList.value = res.data.list;
@@ -91,12 +93,18 @@ const handleCancel = () => {
 };
 const showMoreVideos = () => {
   getDataMethod.value = getWaterloggedAllVideoInfo;
+  location.value = [];
   showNearbyVideos.value = true;
 };
 const handleShowDialog = (item) => {
   location.value = [item.lng, item.lat];
   showDetail(item, 4);
 };
+const handlePlay = (row) => {
+  getDataMethod.value = getWaterloggedAllVideoInfo;
+  location.value = [row.lng, row.lat];
+  showNearbyVideos.value = true;
+};
 let timeArr = ref([]);
 onMounted(() => {
   initData();
@@ -262,4 +270,9 @@ onMounted(() => {
     }
   }
 }
+.play-btn {
+  cursor: pointer;
+  font-size: 16px;
+  color: #00d0ee;
+}
 </style>