qichengbin/erqi-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

视频轮询功能

Browse Source
This commit is contained in:
zhangmj
2025-12-31 15:23:29 +08:00
parent d303a04986
commit 0bd3629190
16 changed files with 262 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
src/components/Map/index.vue
View File

@@ -13,18 +13,16 @@
<TrawlerInfoWindowComponent/>
</template>
<script setup>
import { computed, onMounted, onUnmounted, watch } from 'vue'
import { computed, nextTick, onMounted, onUnmounted, watch } from 'vue'
import * as maptalks from 'maptalks'
import GlobalMap from './js/GlobalMap'
import useMapStore from '@/store/modules/map'
import { getAssetsFile } from '@/utils/common'
import * as BoatUtil from './lbtbox/boatTerminal'
import * as $configs from './map-config.js'
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 { dsVideoList, findUavPage, findEnvPage } from '@/api/device.js'
import { dsVideoList, findUavPage, getVideoInfo } from '@/api/device.js'
const mapStore = useMapStore()
const UAV = computed(() => mapStore.legend.UAV)
@@ -34,6 +32,7 @@ const ais_station = computed(() => mapStore.legend.ais_station)
const environmental = computed(() => mapStore.legend.environmental)
const fence = computed(() => mapStore.legend.fence)
const sector = computed(() => mapStore.sector)
const locateData = computed(() => mapStore.locate.data)
let globalMap = null
let vector = {}
const geography = {
@@ -118,7 +117,9 @@ const addMonitorToMap = () => {
}
)
marker.addTo(vector.monitor)
drawSector('_monitor', [ item.longitude, item.latitude ], 5 * 1000, item.id, 30)
const visionDistance = item.visionDistance * 1000 || 5 * 1000
const pvalue = item.ptzcfg?.pValue || 0
drawSector('_monitor', [ item.longitude, item.latitude ], visionDistance, item.id, (90 - pvalue) % 360)
marker.on('click', (evt) => {
// 先隐藏所有扇形
changeSectorsInLayer('sectors_monitor', false)
@@ -130,24 +131,63 @@ const addMonitorToMap = () => {
// 显示当前点击项的所有相关扇形（圆、椭圆、线）
const baseId = `sector__monitor${item.id}`
const circleGeometry = vector.sectors_monitor.getGeometryById(baseId + '_circle')
const ellipseGeometry = vector.sectors_monitor.getGeometryById(baseId + '_ellipse')
const lineGeometry = vector.sectors_monitor.getGeometryById(baseId + '_line')
vector.sectors_monitor.getGeometryById(baseId + '_circle')?.show()
vector.sectors_monitor.getGeometryById(baseId + '_ellipse')?.show()
vector.sectors_monitor.getGeometryById(baseId + '_line')?.show()
if (circleGeometry) {
circleGeometry.show()
}
if (ellipseGeometry) {
ellipseGeometry.show()
}
if (lineGeometry) {
lineGeometry.show()
}
mapStore.updateWindowInfo({ visible: true, type: '_monitor', data: { ...item } })
})
}
})
vector.monitor.show()
}
// 要素/视频定位
const locateMoitor = (data) => {
const name = 'locate-monitor'
let layer = vector[name]
if (!layer) {
initLayerToMap('locate-monitor')
layer = vector['locate-monitor']
} else {
layer.clear()
}
const monitors = vector.monitor
const marker = monitors.getGeometryById(data.id)
if (marker) {
const coordinates = marker.getCoordinates()
geography.monitor.forEach((item) => {
if (item.id === data.id) {
// globalMap.map.animateTo(
// {
// center: [ coordinates.x, coordinates.y ]
// },
// {
// duration: 1000 * 0.5,
// easing: 'out'
// }
// )
// 先隐藏所有扇形
changeSectorsInLayer('sectors_monitor', false)
getVideoInfo({ id: item.id }).then(res => {
const visionDistance = item.visionDistance * 1000 || 5 * 1000 // 视角距离
const pvalue = res.data.ptzcfg.pValue || 0 // 旋转角度
drawSector('_monitor', [ item.longitude, item.latitude ], visionDistance, item.id, (90 - pvalue) % 360)
// 确保扇形图层是可见的
if (!vector.sectors_monitor.isVisible()) {
vector.sectors_monitor.show()
}
// 显示当前点击项的所有相关扇形（圆、椭圆、线）
const baseId = `sector__monitor${item.id}`
vector.sectors_monitor.getGeometryById(baseId + '_circle')?.show()
vector.sectors_monitor.getGeometryById(baseId + '_ellipse')?.show()
vector.sectors_monitor.getGeometryById(baseId + '_line')?.show()
})
}
})
}
}
/**
* 叠加无人机数据
@@ -189,7 +229,7 @@ const addUAVToMap = () => {
if (circleGeometry) {
circleGeometry.show()
}
if(item.sourceType) {
if(item.sourceType === '1' || item.sourceType === '2') {
mapStore.updateWindowInfo({ visible: true, type: '_UAV', data: { ...item } })
}
})
@@ -212,18 +252,29 @@ const changeSectorsInLayer = (layerName, show) => {
}
// 需要监控的起始角度和结束角度,修改视野范围可以传递经纬度坐标
const drawSector = (type, center, radius, id, angle) => {
const sectorLayerName = 'sectors' + type
// 检查是否存在扇形图层，不存在则初始化
if (!vector[sectorLayerName]) {
initLayerToMap(sectorLayerName.replace('sectors', 'sectors_')) // 例如 sectors_monitor -> sectors_monitor
}
const sectorId = `sector_${type}${id}`
// 如果已存在同ID的扇形，则先移除
const existingSector = vector['sectors' + type].getGeometryById(sectorId)
if (existingSector) {
vector['sectors' + type].removeGeometry(existingSector)
}
const existingCircle = vector[sectorLayerName].getGeometryById(sectorId + '_circle')
const existingEllipse = vector[sectorLayerName].getGeometryById(sectorId + '_ellipse')
const existingLine = vector[sectorLayerName].getGeometryById(sectorId + '_line')
// 如果已有该监控点的扇形图层，则先移除
if (globalMap.map.getLayer(sectorId)) {
globalMap.map.getLayer(sectorId).remove()
if (existingCircle) {
vector[sectorLayerName].removeGeometry(existingCircle)
}
if (existingEllipse) {
vector[sectorLayerName].removeGeometry(existingEllipse)
}
if (existingLine) {
vector[sectorLayerName].removeGeometry(existingLine)
}
let circle = new maptalks.Circle(center, radius, {
id: sectorId + '_circle',
symbol: {
@@ -234,15 +285,15 @@ const drawSector = (type, center, radius, id, angle) => {
polygonOpacity: 0.16
}
})
if(angle) {
let ellipse = new maptalks.Sector(center, radius - 1 * 1000, angle - 30, angle + 30, {
if(typeof angle === 'number' && !isNaN(angle)) {
let ellipse = new maptalks.Sector(center, radius, angle - 10, angle + 10, {
id: sectorId + '_ellipse',
symbol: {
lineColor: '#FF8D1C',
polygonFill: '#ff8d1c29'
}
})
let line = new maptalks.Sector(center, radius + 1 * 1000, angle, angle, {
let line = new maptalks.Sector(center, radius, angle, angle, {
id: sectorId + '_line',
symbol: {
lineColor: '#FF8D1C',
@@ -256,7 +307,6 @@ const drawSector = (type, center, radius, id, angle) => {
}
// 添加到可视域图层
changeSectorsInLayer('sectors' + type, false)
// vector['sectors' + type].hide()
}
/**
* 叠加ais基站数据
@@ -280,8 +330,6 @@ const addAisStationToMap = () => {
}
)
marker.addTo(vector.ais_station)
marker.on('click', (evt) => {
})
}
})
vector.ais_station.show()
@@ -308,8 +356,6 @@ const addEnvironmentalToMap = () => {
}
)
marker.addTo(vector.environmental)
marker.on('click', (evt) => {
})
}
})
vector.environmental.show()
@@ -329,10 +375,7 @@ const initUAV = () => {
}
const initMonitor = () => {
const params = {
pageNo: 1,
pageSize: 9999
}
const params = {}
dsVideoList(params).then(res => {
geography.monitor = res.data
addMonitorToMap()
@@ -354,7 +397,7 @@ const initFence = () => {
addFenceToMap('detailFence')
}
const toModel = () => {
mapStore.updateLargeModel(true)
mapStore.updateDialog({ visible: true, type: 'largeModel' })
}
onMounted(() => {
initMap()
@@ -374,6 +417,7 @@ watch(() => UAV.value, () => {
initUAV()
}else{
vector.UAV?.hide()
changeSectorsInLayer('sectors_UAV', false)
}
})
watch(() => monitor.value, () => {
@@ -381,6 +425,7 @@ watch(() => monitor.value, () => {
initMonitor()
}else{
vector.monitor?.hide()
changeSectorsInLayer('sectors_monitor', false)
}
})
watch(() => ais_station.value, () => {
@@ -427,6 +472,12 @@ watch(() => sector.value.UAV, (newVal) => {
}
}
})
// 定位数据变化
watch(() => locateData.value.videoCode, (newVal) => {
nextTick(() => {
locateMoitor(locateData.value)
})
})
onUnmounted(() => {
globalMap.destroy()
globalMap = null