图像资源防溺水视频接入

src/api/globalMap/preventDrowning.ts

@@ -0,0 +1,10 @@
+import request from '@/utils/request';
+// 防溺水-获取视频列表
+
+export const getDrowningPreventionList = (data) => {
+  return request({
+    url: '/api/gateway/v2/get_video_drowning_prevention_list',
+    method: 'post',
+    data: data
+  });
+};

src/types/components.d.ts

@@ -102,7 +102,6 @@ declare module 'vue' {
     UserSelect: typeof import('./../components/UserSelect/index.vue')['default']
     VideoContainer: typeof import('./../components/HKVideo/video-container.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/globalMap/RightMenu/PreventDrowning.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="menu-content">
+    <div class="container">
+      <div class="gradient-text title">防溺水</div>
+      <div class="flex">
+        <el-input v-model="queryParams.keyword" :prefix-icon="Search" size="large" clearable />
+        <el-button type="primary" size="large" style="margin-left: 20px" @click="initData">搜索</el-button>
+      </div>
+      <div class="gradient-text">视频类型</div>
+      <div class="custom-table">
+        <div class="th">
+          <div class="td">
+            所有区县
+            <!--          <el-select v-model="queryParams.area" placeholder="所有区县" size="large" clearable @change="initData">-->
+            <!--            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />-->
+            <!--          </el-select>-->
+          </div>
+          <div class="td">名称</div>
+        </div>
+        <div class="table-content">
+          <div v-for="(item, index) in listData" :key="index" class="tr" @click="handleShowDialog(item)">
+            <div class="td">{{ item.area }}</div>
+            <div class="td">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <Dialog v-if="showDialog" v-model="showDialog" title="防溺水" width="2500px" height="1200px">
+        <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center">
+          <HKVideo :dot_data="videoMonitorData" />
+        </div>
+      </Dialog>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { Search } from '@element-plus/icons-vue';
+import Dialog from './Dialog.vue';
+import { deepClone } from '@/utils';
+import { getDrowningPreventionList } from '@/api/globalMap/preventDrowning';
+
+const queryParams = reactive({
+  current: 1,
+  size: 10,
+  keyword: '',
+  area: ''
+});
+const total = ref(0);
+
+const options = reactive([
+  {
+    value: '茂南区',
+    label: '茂南区'
+  },
+  {
+    value: '高州市',
+    label: '高州市'
+  },
+  {
+    value: '电白区',
+    label: '电白区'
+  },
+  {
+    value: '信宜市',
+    label: '信宜市'
+  },
+  {
+    value: '化州市',
+    label: '化州市'
+  }
+]);
+const listData = ref([]);
+
+let showDialog = ref(false);
+let videoMonitorData = ref({});
+const handleShowDialog = (row) => {
+  showDialog.value = false;
+  nextTick(() => {
+    videoMonitorData.value = row;
+    showDialog.value = true;
+  });
+};
+const initData = () => {
+  let newQueryParams = deepClone(queryParams);
+  newQueryParams.query = {
+    area: queryParams.area,
+    keyword: queryParams.keyword
+  };
+  delete newQueryParams.area;
+  delete newQueryParams.keyword;
+  getDrowningPreventionList(newQueryParams).then((res) => {
+    listData.value = res.rows;
+    total.value = res.total;
+  });
+};
+initData();
+</script>
+
+<style lang="scss" scoped>
+.menu-content {
+  width: 1579px;
+  height: 1394px;
+  background: url('@/assets/images/map/rightMenu/content.png') no-repeat;
+  padding: 130px 20px 20px 20px;
+  font-size: 36px;
+  position: relative;
+  color: #ffffff;
+}
+.title {
+  font-size: 60px;
+  position: absolute;
+  top: 20px;
+  left: 160px;
+}
+.custom-table {
+  width: 1499px;
+  .table-content {
+    height: 880px;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+  .th {
+    width: 1499px;
+    height: 151px;
+    background: url('@/assets/images/map/rightMenu/th.png') no-repeat;
+    display: flex;
+  }
+  .tr {
+
+    height: 139px;
+    background: url('@/assets/images/map/rightMenu/td.png') no-repeat;
+    //margin-left: -23px;
+    display: flex;
+    padding-right: 20px;
+    &:hover {
+      background: url('@/assets/images/map/rightMenu/td_checked.png') no-repeat;
+    }
+  }
+  .td {
+    flex: 1;
+    color: #edfaff;
+    font-size: 38px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+  }
+  .td-text {
+    /* 设置字体透明 */
+    color: transparent;
+    /* 使用 -webkit-background-clip 属性将背景剪裁至文本形状 */
+    -webkit-background-clip: text;
+    /* 非Webkit内核浏览器需要使用标准前缀 */
+    background-clip: text;
+    font-family: 'YouSheBiaoTiHei';
+    /* 设置线性渐变，从红色渐变到蓝色 */
+    background-image: linear-gradient(to bottom, #ffffff 50%, #3075d3 100%);
+    font-size: 48px;
+  }
+  .text-green {
+    background-image: linear-gradient(to bottom, #ffffff 50%, #40c75f 100%);
+  }
+  .text-danger {
+    background-image: linear-gradient(to bottom, #ffffff 50%, #ff2f3c 100%);
+  }
+}
+</style>

src/views/globalMap/RightMenu/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="right-menu">
     <div class="menu-container">
-      <div style="position: relative;margin-top: 60px;">
+      <div style="position: relative; margin-top: 60px">
         <div ref="scrollListRef" :class="!menuState.showMenu ? 'menu-list' : 'menu-list menu-list-right'">
           <div
             v-for="(item, index) in menuState.menuData"
@@ -21,13 +21,15 @@
       </div>
       <div v-show="menuState.showMenu">
         <!--图层分析-->
-        <LayerAnalysis v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '图层分析'" :pointType="pointType" />
+        <LayerAnalysis v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '图层分析'" :point-type="pointType" />
         <!--空间分析-->
-        <SpatialAnalysis v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '空间分析'" @handleMenu="handleMenu" />
+        <SpatialAnalysis v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '空间分析'" @handle-menu="handleMenu" />
         <!--江湖河库-->
         <Reservoir v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '江湖河库'" />
         <!--路网视频-->
         <RoadNetworkVideo v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '路网视频'" />
+        <!--防溺水视频-->
+        <PreventDrowning v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '防溺水'" />
         <!--水库监测-->
         <ReservoirMonitor v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '水库监测'" />
         <!--河道监测-->
@@ -57,6 +59,7 @@ import UAV from './UAV.vue';
 import WarningInfo from './WarningInfo.vue';
 import { PointType } from '@/api/globalMap/type';
 import RainMonitor from '@/views/globalMap/RightMenu/RainMonitor.vue';
+import PreventDrowning from '@/views/globalMap/RightMenu/PreventDrowning.vue';
 
 interface Props {
   pointType: PointType[];