无人机、监控列表

src/api/device.js

@@ -0,0 +1,57 @@
+import request from '@/utils/request'
+
+/**
+ * 分页查询监控设备列表
+ * 查询
+ * @param data
+ * @returns {*}
+ */
+export const videoCameraFindPage = (data) => {
+  return request({
+    url: '/videoCamera/findPage',
+    method: 'post',
+    data: data
+  })
+}
+/**
+ * 原有监控点位
+ * 查询
+ * @param data
+ * @returns {*}
+ */
+export const dsVideoList = (data) => {
+  return request({
+    url: '/fishingPort/dsVideo/getList',
+    method: 'post',
+    data: data,
+    headers: {
+      'Content-Type': 'application/json;charset=utf-8'
+    }
+  })
+}
+/**
+ * 分页查询无人机设备列表
+ * 查询
+ * @param data
+ * @returns {*}
+ */
+export const findUavPage = (data) => {
+  return request({
+    url: '/videoCamera/findUavPage',
+    method: 'post',
+    data: data
+  })
+}
+/**
+ * 分页查询环境检测设备列表 / ais基站
+ * 查询
+ * @param data
+ * @returns {*}
+ */
+export const findEnvPage = (data) => {
+  return request({
+    url: '/videoCamera/findEnvPage',
+    method: 'post',
+    data: data
+  })
+}

src/components/Map/index.vue

@@ -24,6 +24,7 @@ import { ElMessage } from 'element-plus'
 import { monitors, uavs, stations, environmentals, fences, detailFences } from './js/mock.js'
 import InfoWindowComponent from '@/components/Map/window/index.vue'
 import TrawlerInfoWindowComponent from '@/components/Map/window/trawler.vue'
+import { videoCameraFindPage, findUavPage, findEnvPage, dsVideoList } from '@/api/device.js'
 
 const mapStore = useMapStore()
 const UAV = computed(() => mapStore.legend.UAV)
@@ -313,12 +314,30 @@ const addEnvironmentalToMap = () => {
 }
 
 const initUAV = () => {
-  geography.UAV = uavs
+  const params = {
+    pageNo: 1,
+    pageSize: 9999
+  }
+  findUavPage(params).then(res => {
+    if (res.success) {
+        geography.UAV = res.result.records
         addUAVToMap()
       }
+  })
+
+}
 const initMonitor = () => {
-  geography.monitor = monitors
+  const params = {
+    pageNo: 1,
+    pageSize: 9999
+  }
+  videoCameraFindPage(params).then(res => {
+      if (res.success) {
+  geography.monitor = res.result.records
   addMonitorToMap()
+
+      }
+    })
 }
 const initAisStation = () => {
   geography.ais_station = stations

src/components/Map/window/uav.vue

@@ -1,219 +1,27 @@
 <template>
     <div class="content-wrapper">
-      <div class="left-wrapper">
+      <iframe :src="url" frameborder="no" style="width: 100%; height: 100%" scrolling="auto" />
-        <div class="uav-button" @click="handleAlgorithm">{{algorithmStatus ? '关闭' : '开启'}}算法</div>
-        <div class="Form">
-          <el-checkbox-group v-model="algorithmValue">
-            <el-checkbox
-              v-for="item in algorithms"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value" />
-          </el-checkbox-group>
-        </div>
-        <div class="flv-container"><FlvPlayerComponent v-if="uavDialog.url" id="uav" :url="uavDialog.url"/></div>
-      </div>
-      <div class="resize-handle" @mousedown="startResize"></div>
-      <div class="right-wrapper">
-        <CockpitCom v-if="uavDialog.visible"/>
-      </div>
     </div>
 </template>
 
 <script setup>
-import { computed, reactive, ref } from 'vue'
+import { computed } from 'vue'
 import useMapStore from '@/store/modules/map'
-import FlvPlayerComponent from '@/components/FlvPlayer/index.vue'
-import CockpitCom from '@/views/business/drone/cockpit.vue'
 
 const mapStore = useMapStore()
 const data = computed(() => mapStore.windowInfo.data)
-// 算法开启关闭状态
+const url = computed(() => 'https://lbs.baidu.com/maptool/getpoint')
-const algorithmStatus = ref(false)
+console.log(data.value.droneSn, 'data.value.droneSn')
-const algorithms = [
-  { value: 120000, label: 'AIS挂牌/船牌识别' },
-  { value: 140000, label: '船型识别' },
-  { value: 139000, label: '未穿救生衣' },
-  { value: 140009, label: '未悬挂国旗' },
-  { value: 140008, label: '未封舱' }
-]
-const algorithmValue = ref([])
-const uavDialog = reactive({
-  visible: false,
-  url: ''
-})
-// 添加分割线相关的响应式数据
-const isResizing = ref(false)
-const leftWidth = ref('462px')
-const rightWidth = ref('1391px')
-const containerWidth = ref(0)
-let containerBoundsLeft = 0 // 容器左边界
-
-// 开启/关闭算法
-const handleAlgorithm = () => {
-  if(algorithmStatus.value) {
-    closeAlgorithm()
-  } else {
-    let enable_orc = false
-    const valueArray = [ ...algorithmValue.value ]
-    const index = valueArray.indexOf(120000)
-    if (index > -1) {
-      valueArray.splice(index, 1)
-      enable_orc = true
-    }
-    const params = {
-      class_codes: valueArray.join(','),
-      enable_orc,
-      status: 'start',
-      sn: data.value.droneSn
-    }
-    // doStartOrStopUavAlgorithm(params).then(res => {
-    //   if(res.success) {
-    //     algorithmStatus.value = true
-    //     ElMessage.success('算法已开启')
-    //   }else {
-    //     ElMessage.error(res.result)
-    //   }
-    // })
-  }
-}
-// 添加分割线控制相关方法
-const startResize = (e) => {
-  isResizing.value = true
-  const containerRect = e.target.parentElement.getBoundingClientRect()
-  containerWidth.value = containerRect.width
-  // 保存容器的左边界位置
-  containerBoundsLeft = containerRect.left
-  document.addEventListener('mousemove', resize)
-  document.addEventListener('mouseup', stopResize)
-}
-const resize = (e) => {
-  if (isResizing.value) {
-    // 使用预先保存的容器左边界
-    const offsetX = e.clientX - containerBoundsLeft
-
-    // 计算左侧宽度百分比
-    let leftPercent = offsetX / containerWidth.value * 100
-    // 限制左右两侧的最小宽度
-    const minRightWidth = 1391
-    const minLeftWidth = 200
-
-    // 计算右侧最小百分比
-    const minRightPercent = minRightWidth / containerWidth.value * 100
-    const minLeftPercent = minLeftWidth / containerWidth.value * 100
-
-    // 限制拖动范围
-    if (leftPercent < minLeftPercent) {
-      leftPercent = minLeftPercent
-    } else if (leftPercent > 100 - minRightPercent) {
-      leftPercent = 100 - minRightPercent
-    }
-
-    leftWidth.value = `${leftPercent}%`
-    rightWidth.value = `${100 - leftPercent}%`
-  }
-}
-
-const stopResize = () => {
-  isResizing.value = false
-  document.removeEventListener('mousemove', resize)
-  document.removeEventListener('mouseup', stopResize)
-}
 </script>
 
 <style lang="scss" scoped>
 // 无人机弹窗
 .content-wrapper{
-  display: flex;
   position: relative;
-  height: 100%;
+  height: 850px;
-  video{
+  iframe{
     width: 100%;
-    height: 830px;
-    object-fit: fill;
-  }
-  // //播放按钮
-  video::-webkit-media-controls-play-button{display: none;}
-  //进度条
-  video::-webkit-media-controls-timeline{display: none;}
-  //观看的当前时间
-  video::-webkit-media-controls-current-time-display{display: none;}
-  //剩余时间
-  video::-webkit-media-controls-time-remaining-display{display: none;}
-  //音量按钮
-  video::-webkit-media-controls-mute-button{display: none;}
-  video::-webkit-media-controls-toggle-closed-captions-buttonf{display: none;}
-  //1音量的控制条
-  video::-webkit-media-controls-volume-slider{display: none;}
-  video::-webkit-media-controls-enclosuret{display: none;}
-  .uav-button{
-    width: fit-content;
-    cursor: pointer;
-    color: #00c0ff;
-    padding: 6px 10px;
-    background: rgba(22, 119, 255, 0.21);
-    border-radius: 2px 2px 2px 2px;
-    border: 1px solid #236ACE;
-    color: rgba(255, 255, 255, 0.9);
-  }
-  .left-wrapper{
-    // width: 60%;
-    width: v-bind(leftWidth);
-    height: 830px;
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    .el-checkbox-group{
-      gap: 4px !important;
-      .el-checkbox{
-        width: 150px !important;
-        padding-left: 5px !important;
-      }
-    }
-    .flv-container{
-      flex: 1; // 占据剩余空间
-      overflow: hidden; // 隐藏溢出内容
-    }
-  }
-    .resize-handle {
-    width: 8px;
     height: 100%;
-    background: transparent;
-    cursor: col-resize;
-    position: relative;
-    user-select: none;
-    z-index: 10;
-    &::after {
-      content: "";
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      width: 2px;
-      // height: 40px;
-      background: #fff;
-    }
-
-    &:hover {
-      background: transparent;
-    }
-  }
-  .right-wrapper{
-    // width: 40%;
-    width: v-bind(rightWidth);
-    height: 830px;
-    // position: absolute;
-    // right: 0;
-    flex: 1;
-  }
-  .temporary{
-      position: absolute;
-      right: 0'';
-      right: 0;
-      top: 48px;
-      z-index: 999;
-      width: 1069px;
-      height: 429px;
   }
 }
 </style>

src/views/business/alarm/monitor.vue

@@ -1,16 +1,18 @@
 <template>
-  <div class="monitor-container">
+  <div class="monitor-container" @mousedown="drag">
     <div class="tab">
         <div v-for="(item,index) in tabs"
             :key="index"
             :class="['tab-item',active === index ? 'active' : '']"
             @click="handle(index)">{{item}}</div>
     </div>
+    <div class="resize" :style="{ resize: 'both', overflow: 'auto' }"></div>
     <!-- <div class="flv-container"><FlvPlayerComponent :url="uavDialog.url"/></div> -->
   </div>
 </template>
 <script setup>
 import { ref } from 'vue'
+import { dragEvent, resizeEvent } from '@/utils/common'
 import FlvPlayerComponent from '@/components/FlvPlayer/index.vue'
 import { getAssetsFile } from '@/utils/common'
 const tabs = [
@@ -20,6 +22,26 @@ const active = ref(0)
 
 const handle = (index) => {
     active.value = index
+}
+/**
+ * 拖拽事件
+ * @param e
+ *
+ */
+ const drag = (e) => {
+  if(e.target.className === 'resize') {
+resizeEvent(e, 'resize', (i) => {
+  document.querySelector('.monitor-container').style.height = i.height + 'px'
+  document.querySelector('.monitor-container').style.width = i.width + 'px'
+    })
+  }else{
+dragEvent(e, 'monitor-container', () => {
+    })
+  }
+
+}
+const resize = (e) => {
+
 }
 </script>
 <style scoped lang="scss">
@@ -28,6 +50,7 @@ const handle = (index) => {
   position: fixed;
   right: 40px;
   bottom: 46px;
+
 //   display: flex;
 //   flex-direction: column;
 //   gap: 20px;
@@ -38,6 +61,13 @@ const handle = (index) => {
   border: 1px solid;
   border-image: linear-gradient(270deg, rgba(42, 159, 255, 0.2), rgba(42, 159, 255, 0.8)) 1 1;
   padding: 20px;
+  .line{
+    position: absolute;
+    top: 0 !important;
+    left: 0 !important;
+    width: 100%;
+    height: 20px;
+  }
   .tab{
     display: flex;
     .tab-item{
@@ -64,5 +94,12 @@ const handle = (index) => {
     width: 100%;
     margin-top: 10px;
   }
+  .resize{
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 524px;
+  height: 386px;
+  }
 }
 </style>

src/views/business/identification/index.vue

@@ -1,44 +1,24 @@
 <template>
   <!-- 识别记录页面 -->
-  <DialogComponent @mousedown="drag" :style="{ resize: 'both', overflow: 'auto' }" title="识别记录" width="1800" :draggable="true" :modal="false" @close="close">
+  <DialogComponent :style="{ resize: 'both', overflow: 'auto' }" v-if="type === 'alarm'" title="识别记录" width="1800" :draggable="true" :modal="false" @close="close">
-     <AlarmCom ref="alarm"/>
+     <AlarmCom/>
   </DialogComponent>
 </template>
 <script setup>
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 import DialogComponent from '@/components/Dialog/screen.vue'
 import AlarmCom from './alarm/index.vue'
 import { useRouter } from 'vue-router'
 import useMapStore from '@/store/modules/map'
-import { dragEvent, resizeEvent } from '@/utils/common'
 
 const mapStore = useMapStore()
 const router = useRouter()
-const alarm = ref(null)
+const type = computed(() => mapStore.dialog.type)
+
 const close = () => {
   mapStore.updateDialog(false)
 }
-/**
- * 拖拽事件
- * @param e
- *
- */
- const drag = (e) => {
-  if(e.target.className.includes('el-dialog-title')) {
-     dragEvent(e, 'el-dialog-title', () => {
-      if(alarm.value.appPlayer) {
-        alarm.value.appPlayer[0].onResize(false)
-      }
-    })
-  }else{
-    resizeEvent(e, 'el-dialog', () => {
-      if(alarm.value?.appPlayer) {
-        alarm.value.appPlayer[0].onResize()
-      }
-    })
-  }
 
-}
 </script>
 <style scoped lang="scss">
 .el-tabs {

src/views/business/wall/tree.vue

@@ -17,6 +17,7 @@
 
 <script setup>
 import { ref, reactive, onMounted } from 'vue'
+import { videoCameraFindPage, findUavPage, findEnvPage, dsVideoList } from '@/api/device.js'
 
 const emit = defineEmits([ 'handle' ])
 
@@ -26,31 +27,75 @@ const treeType = ref('')
 const refresh = (type) => {
     treeType.value = type
     if(type === 'CCTV') {
-        tableData.value = [
+      const params = {
-            { videoName: '温州鹿城屯前江润大楼', children: [ { videoName: '浙江-温州-江润大楼-球机1', videoCode: 'fd3b45e1429a4e47bba873af602a9bed' },
+        pageNo: 1,
-                { videoName: '浙江-温州-江润大楼-球机2', videoCode: 'b7f9fff8e3504e419cb2f5fad5b2845c' },
+        pageSize: 9999
-                { videoName: '浙江-温州-江润大楼-球机3', videoCode: '15a73f6bfa6f46c5bad965f0ead70059' },
-                { videoName: '浙江-温州-江润大楼-球机4', videoCode: '55dafd6aef164fd6a3af331419058c56' } ]
-            },
-            { videoName: '永嘉桥下坦头南', children: [ { videoName: '浙江-温州-永嘉桥下坦头南-球机1', videoCode: '5bedb9f9f6c94d30821b6cca1428bd1a' },
-                { videoName: '浙江-温州-永嘉桥下坦头南-球机2', videoCode: 'd93a735382c74a4c9e8ba3ed25a3b1ed' },
-                { videoName: '浙江-温州-永嘉桥下坦头南-球机3', videoCode: '1ce2a9c72f704fc09da9d77426b58775' },
-                { videoName: '浙江-温州-永嘉桥下坦头南-球机4', videoCode: '43cf81a75dea47b688bc9586db63cc04' } ]
       }
-        ]
+      videoCameraFindPage(params).then(res => {
+       if (res.success) {
+        const data = res.result.records
+        const groupedData = {}
+        data.forEach(item => {
+          const belong = item.videoBelong
+          if (!groupedData[belong]) {
+            groupedData[belong] = []
+          }
+          groupedData[belong].push(item)
+        })
+        // 转换为树形结构
+        const result = Object.keys(groupedData).map(belong => {
+          const children = groupedData[belong]
+          if (children.length === 1) {
+            // 只有一个子元素，直接返回该子元素
+            return children[0]
+          }
+            // 有多个子元素，返回分组节点
+            return {
+              videoName: belong,
+              longitude: children[0].longitude,
+              latitude: children[0].latitude,
+              children: children
+            }
+
+        })
+        tableData.value = result
+       }
+      })
     }else if(type === 'UAV') {
-        tableData.value = [
+      const params = {
-            { videoName: '鹿城山福临江工业区南', children: [ { videoName: '浙江-温州-鹿城山福临江工业区南-无人机1', videoCode: 'fd3b45e1429a4e47bba873af602a9bed', status: 'offline' },
+        pageNo: 1,
-                { videoName: '浙江-温州-鹿城山福临江工业区南-无人机2', videoCode: 'b7f9fff8e3504e419cb2f5fad5b2845c', status: 'online' },
+        pageSize: 9999
-                { videoName: '浙江-温州-鹿城山福临江工业区南-无人机3', videoCode: '15a73f6bfa6f46c5bad965f0ead70059', status: 'online' },
-                { videoName: '浙江-温州-鹿城山福临江工业区南-无人机4', videoCode: '55dafd6aef164fd6a3af331419058c56', status: 'online' } ]
-            },
-            { videoName: '永嘉梅岙镇', children: [ { videoName: '浙江-温州-永嘉梅岙镇-无人机-球机1', videoCode: '5bedb9f9f6c94d30821b6cca1428bd1a', status: 'online' },
-                { videoName: '浙江-温州-永嘉梅岙镇-无人机-球机2', videoCode: 'd93a735382c74a4c9e8ba3ed25a3b1ed', status: 'online' },
-                { videoName: '浙江-温州-永嘉梅岙镇-无人机-球机3', videoCode: '1ce2a9c72f704fc09da9d77426b58775', status: 'online' },
-                { videoName: '浙江-温州-永嘉梅岙镇-无人机-球机4', videoCode: '43cf81a75dea47b688bc9586db63cc04', status: 'offline' } ]
       }
-        ]
+      findUavPage(params).then(res => {
+       if (res.success) {
+        const data = res.result.records
+        const groupedData = {}
+        data.forEach(item => {
+          const belong = item.videoBelong
+          if (!groupedData[belong]) {
+            groupedData[belong] = []
+          }
+          groupedData[belong].push(item)
+        })
+        // 转换为树形结构
+        const result = Object.keys(groupedData).map(belong => {
+          const children = groupedData[belong]
+          if (children.length === 1) {
+            // 只有一个子元素，直接返回该子元素
+            return children[0]
+          }
+            // 有多个子元素，返回分组节点
+            return {
+              videoName: belong,
+              longitude: children[0].longitude,
+              latitude: children[0].latitude,
+              children: children
+            }
+
+        })
+        tableData.value = result
+       }
+      })
     }
 
 }
@@ -73,6 +118,8 @@ defineExpose({
   width: 25%;
   .el-tree{
         background: transparent;
+        height: -webkit-fill-available;
+    overflow: auto;
       }
       :deep(.el-tree-node){
         width: 100%;