second commit

This commit is contained in:
2025-12-25 18:33:15 +08:00
parent 78407f1cbd
commit 6a6ddba71a
34 changed files with 527 additions and 1226 deletions

View File

@@ -9,7 +9,7 @@ import useMapStore from '@/store/modules/map'
const mapStore = useMapStore()
const handle = (type) => {
mapStore.updateDialog(type)
mapStore.updateDialog({ visible: true, type })
}
</script>
<style scoped lang="scss">

View File

@@ -111,7 +111,7 @@ const toggle = (index) => {
const handle = (type, item) => {
switch (type) {
case 'more':
mapStore.updateDialog('alarm')
mapStore.updateDialog({ visible: true, type: 'alarm' })
break
default:
break

View File

@@ -7,7 +7,6 @@
@click="handle(index)">{{item}}</div>
</div>
<!-- <div class="flv-container"><FlvPlayerComponent :url="uavDialog.url"/></div> -->
<video class="flv-container" :src="getAssetsFile('alarm/mock2.mp4')" autoplay controls muted loop></video>
</div>
</template>
<script setup>

File diff suppressed because one or more lines are too long

View File

@@ -1,389 +0,0 @@
<template>
<div class="device-wrapper">
<div :class="['device-content', isFold ? 'fold' : '']">
<div class="tab-wrapper">
<div :class="['tab-button', current === index ? 'active' : '']" v-for="(item, index) in tabs" :key="index"
@click="toggleDevice(index)">{{ item.label }}</div>
</div>
<div class="list-wrapper">
<template v-if="current === 0">
<el-tree :data="tableData" ref="treeRef" :props="{ label: 'videoName', children: 'children' }" node-key="id"
@node-click="handleNodeClick">
<template v-slot="{ node }">
<img src="@/assets/images/livePreview/icon-monitor.png" alt="">
<span>{{ node.label }}</span>
</template>
</el-tree>
</template>
<template v-else>
<div class="list-item" v-for="item in tableData" :key="item.id" @click="handleDevice(item)">
<span>{{ item.videoName }}</span>
</div>
</template>
</div>
</div>
<div class="fold-button" @click="toggleFold">
<template v-if="isFold">
<span>展开</span>
<img src="@/assets/images/drone/icon-arrow-right.png" alt="">
</template>
<template v-else>
<span>收起</span>
<img src="@/assets/images/drone/icon-arrow-left.png" alt="">
</template>
</div>
</div>
</template>
<script setup>
import { ref, reactive, watch } from 'vue'
import { videoCameraFindPage, findUavPage, findEnvPage } from '@/api/device.js'
import { Message } from '@element-plus/icons-vue'
const preview = reactive({
visible: false,
codes: []
})
const current = ref(1)
const isFold = ref(false)
const tabs = [
{
label: '监控设备',
value: 'monitor'
},
{
label: '无人机设备',
value: 'plane'
},
{
label: '环境监测设备',
value: 'environment'
},
{
label: '感知设备',
value: 'AIS'
}
]
const tableData = ref([])
const initMonitor = () => {
const params = new FormData()
params.append('pageNo', 1)
params.append('pageSize', 999)
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,
children: children
}
})
tableData.value = result
} else {
Message.error(res.msg || '查询失败!')
}
})
}
const initPlane = () => {
const params = new FormData()
params.append('pageNo', 1)
params.append('pageSize', 999)
findUavPage(params).then(res => {
if (res.success) {
tableData.value = res.result.records
} else {
Message.error(res.msg || '查询失败!')
}
})
}
const initEnvironment = () => {
const params = new FormData()
params.append('pageNo', 1)
params.append('pageSize', 999)
params.append('videoType', '航道流速设备,气象观测站设备')
findEnvPage(params).then(res => {
if (res.success) {
tableData.value = res.result.records
} else {
Message.error(res.msg || '查询失败!')
}
})
}
const initAIS = () => {
const params = new FormData()
params.append('pageNo', 1)
params.append('pageSize', 999)
params.append('videoType', 'AIS基站设备')
findEnvPage(params).then(res => {
if (res.success) {
tableData.value = res.result.records
} else {
Message.error(res.msg || '查询失败!')
}
})
}
const initMap = {
'monitor': initMonitor,
'plane': initPlane,
'environment': initEnvironment,
'AIS': initAIS
}
const initData = () => {
tableData.value = []
const tabValue = tabs[current.value].value
const initFunction = initMap[tabValue]
if (initFunction) {
try {
initFunction()
} catch (error) {
console.error(error)
}
}
}
const toggleDevice = (index) => {
current.value = index
}
const handleDevice = (item) => {
preview.visible = true
}
const handleNodeClick = (node) => {
if (!node.children || node.children.length === 0) {
// 雷云一体机一个视频
if (node.videoName.indexOf('雷云') !== -1) {
preview.codes = ['0f69d447002a40629e15f8a251fc46fa']
} else {
preview.codes = ['b7f9fff8e3504e419cb2f5fad5b2845c', '9b49bdc8988e430baad9ca727fed545a', 'e0a42cd6cbf940a6a4fc0aa789d43a04']
}
preview.visible = true
}
}
const toggleFold = () => {
isFold.value = !isFold.value
}
watch(() => current.value, () => {
initData()
}, { immediate: true })
</script>
<style lang="scss" scoped>
.device-wrapper {
position: absolute;
left: 45px;
top: 89px;
bottom: 411px;
.device-content {
width: 401px;
height: 100%;
padding: 10px;
background: linear-gradient( 90deg, #0C1929 0%, rgba(12,25,41,0.6) 100%);
border-radius: 0px 0px 0px 0px;
border: 1px solid;
border-image: linear-gradient(270deg, rgba(42, 159, 255, 0.2), rgba(42, 159, 255, 0.8)) 1 1;
box-sizing: border-box;
display: flex;
gap: 6px;
opacity: 1;
visibility: visible;
transition: all 0.3s ease-in-out;
&.fold {
width: 0;
overflow: hidden;
opacity: 0;
visibility: hidden;
}
.tab-wrapper {
width: 28px;
height: 100%;
.tab-button {
position: relative;
width: 100%;
height: 25%;
// height: 130px;
color: #FFFFFF;
font-size: 12px;
text-align: center;
line-height: 28px;
writing-mode: vertical-rl;
text-orientation: upright;
background-color: #2061bd;
border-radius: 3px 0 0 28px;
cursor: pointer;
margin-bottom: -7px;
opacity: .6;
&:not(:first-of-type) {
border-radius: 0 28px 0 28px;
&::before {
content: '';
display: block;
width: 28px;
height: 28px;
position: absolute;
background: radial-gradient(circle at 28px 3px, transparent 28px, #2162bd 28px);
top: -24px;
left: 0;
}
}
&::after {
content: '';
display: block;
width: 28px;
height: 28px;
position: absolute;
background: radial-gradient(circle at 0px 25px, transparent 28px, #2061bd 28px);
bottom: -24px;
right: 0;
}
&.active {
background-color: #2061BD;
opacity: 1;
}
}
}
.list-wrapper {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
overflow: auto;
background: transparent;
.list-item {
width: 100%;
height: 44px;
padding-left: 20px;
background-color: rgba(24, 128, 254, 0.3);
border-radius: 3px 3px 3px 3px;
font-size: 14px;
color: #E1F1FAFF;
display: flex;
align-items: center;
box-sizing: border-box;
border: 1px solid rgba(24, 128, 254, 0);
flex-shrink: 0;
cursor: pointer;
&::before {
content: '';
display: inline-block;
width: 16px;
height: 16px;
background-image: url('@/assets/images/livePreview/icon-monitor.png');
background-size: 100% 100%;
background-repeat: no-repeat;
margin-right: 10px;
}
&.active,
&:hover {
color: #0EF8F8FF;
background-color: rgba(24, 128, 254, 0.5);
border: 1px solid #5FA4FF;
&::before {
background-image: url('@/assets/images/livePreview/icon-monitor-active.png');
}
}
}
.el-tree {
background: transparent;
}
:deep(.el-tree-node) {
width: 100%;
margin-bottom: 4px;
background-color: rgba(24, 128, 254, 0.3);
border-radius: 3px 3px 3px 3px;
font-size: 14px;
align-items: center;
box-sizing: border-box;
border: 1px solid rgba(24, 128, 254, 0);
flex-shrink: 0;
cursor: pointer;
.el-tree-node__content {
height: 44px;
border: 1px solid transparent;
box-sizing: border-box;
}
img {
margin-right: 10px;
}
span {
color: #E1F1FAFF;
}
&:focus>.el-tree-node__content,
.el-tree-node__content:hover {
color: #0EF8F8FF;
background-color: rgba(24, 128, 254, 0.5);
border: 1px solid #5FA4FF;
&::before {
background-image: url('@/assets/images/livePreview/icon-monitor-active.png');
}
}
}
}
}
.fold-button {
position: absolute;
right: -17px;
top: 0;
width: 17px;
height: 82px;
background-image: url('@/assets/images/drone/subscript-background-vertical.png');
background-size: 100% 100%;
background-repeat: no-repeat;
color: #FFFFFFCC;
font-size: 12px;
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
visibility: visible;
}
}
</style>

View File

@@ -1,16 +0,0 @@
<template>
<div>
<DeviceComponent/>
<ControlComponent/>
</div>
</template>
<script setup>
import DeviceComponent from './device.vue'
import ControlComponent from './control.vue'
</script>
<style lang="scss" scoped>
</style>

View File

@@ -90,7 +90,7 @@ import FilterCom from '@/components/Filter/index.vue'
import { nextTick, onBeforeUnmount, onMounted, onUnmounted, reactive, ref } from 'vue'
import TableComponent from '@/components/Table/index2.vue'
import TitleComponent from '@/components/Title/index.vue'
// import { videoIdentificationPage, removeVideoIdentification } from '@/api/identification.js'
import { videoIdentificationPage, removeVideoIdentification } from '@/api/identification.js'
import HikPlayerBackCom from '@/components/Player/HikPlayer-back.vue'
import { dayjs, ElMessage, ElMessageBox } from 'element-plus'
import { useRoute } from 'vue-router'
@@ -337,20 +337,20 @@ const edit = reactive({
const initData = () => {
loading.value = true
const params = new FormData()
const obj = {
...model,
// illegalType: illegalType.value.join(','),
illegalType: illegalType.value,
beginTime: model.time && model.time[0] ? model.time[0] : '',
endTime: model.time && model.time[1] ? model.time[1] : '',
pageNo: pagination.current,
pageSize: pagination.size
}
delete obj.time
Object.keys(obj).forEach((key) => {
params.append(key, obj[key])
})
// const params = new FormData()
// const obj = {
// ...model,
// // illegalType: illegalType.value.join(','),
// illegalType: illegalType.value,
// beginTime: model.time && model.time[0] ? model.time[0] : '',
// endTime: model.time && model.time[1] ? model.time[1] : '',
// pageNo: pagination.current,
// pageSize: pagination.size
// }
// delete obj.time
// Object.keys(obj).forEach((key) => {
// params.append(key, obj[key])
// })
// videoIdentificationPage(params).then(res => {
// if (res.success) {
// tableData.value = res.result.records.map(i => {
@@ -368,7 +368,7 @@ const initData = () => {
// // 有识别记录数据,默认查看第一条详情
// handle('check', res.result.total > 0 ? tableData.value[0] : {})
// } else {
// Message.error(res.msg || '查询失败!')
// ElMessage.error(res.msg || '查询失败!')
// }
// }).finally(() => {
loading.value = false
@@ -464,7 +464,6 @@ const handle = (type, data) => {
}
case 'check': {
closeVideo()
console.log(data, 'datatata')
detail.data = [ { ...data,
videoName: '',
trackerPicPath: data.trackerPicPath.split(',')
@@ -497,10 +496,10 @@ const handle = (type, data) => {
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// removeVideoIdentification({ id: data.id }).then(() => {
// ElMessage.success('删除成功')
// initData()
// })
removeVideoIdentification({ id: data.id }).then(() => {
ElMessage.success('删除成功')
initData()
})
})
break
default:
@@ -538,6 +537,9 @@ onBeforeUnmount(() => {
closeVideo()
})
defineExpose({
appPlayer
})
</script>
<style scoped lang="scss">
.content-container{

View File

@@ -1,25 +1,44 @@
<template>
<!-- 识别记录页面 -->
<DialogComponent :style="{ resize: 'both', overflow: 'auto' }" v-if="type === 'alarm'" title="识别记录" width="1800" :draggable="true" :modal="false" @close="close">
<AlarmCom/>
<DialogComponent @mousedown="drag" :style="{ resize: 'both', overflow: 'auto' }" title="识别记录" width="1800" :draggable="true" :modal="false" @close="close">
<AlarmCom ref="alarm"/>
</DialogComponent>
</template>
<script setup>
import { computed } from 'vue'
import { computed, ref } 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 type = computed(() => mapStore.dialogVisible.type)
const alarm = ref(null)
const close = () => {
mapStore.updateDialog('')
router.back()
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 {

View File

@@ -7,8 +7,8 @@
</div>
<Alarm/>
<LargeModelCom v-if="largeModel"/>
<IdentificationCom/>
<WallCom/>
<IdentificationCom v-if="visible && type === 'alarm'"/>
<WallCom v-if="visible && (type==='CCTV'|| type==='UAV')"/>
</div>
</template>
<script setup>
@@ -25,6 +25,8 @@ const mapStore = useMapStore()
const largeModel = computed(() => {
return mapStore.largeModel
})
const visible = computed(() => mapStore.dialog.visible)
const type = computed(() => mapStore.dialog.type)
window.name = 'business_window'
</script>
@@ -203,7 +205,7 @@ window.name = 'business_window'
position: absolute;
right: 7px;
i:not(.el-select__clear) {
background: url("@/assets/images/common/icon_suffix.png") center center no-repeat;
// background: url("@/assets/images/common/icon_suffix.png") center center no-repeat;
background-size: 8px 6px;
width: 8px;
height: 6px;
@@ -231,7 +233,7 @@ window.name = 'business_window'
right: 7px;
top: 13px;
.el-input__suffix-inner{
background: url("@/assets/images/common/icon_suffix.png") center center no-repeat;
// background: url("@/assets/images/common/icon_suffix.png") center center no-repeat;
background-size: 8px 6px;
width: 8px;
height: 6px;

View File

@@ -22,7 +22,7 @@
<script setup>
import { nextTick, onMounted, onUnmounted, ref } from 'vue'
// import { getHistory } from '@/api/model'
import { getHistory } from '@/api/model'
import axios from 'axios'
const emit = defineEmits([ 'changeDialog' ])
@@ -34,15 +34,15 @@ const show = ref(true)
let resizeObserver = null
const initList = () => {
// axios.get(getHistory, {}, {
// headers: {
// 'Content-Type': 'application/json'
// }
// }).then((res) => {
// if(res.status === 200) {
// list.value = res.data.reverse()
// }
// })
axios.get(getHistory, {}, {
headers: {
'Content-Type': 'application/json'
}
}).then((res) => {
if(res.status === 200) {
list.value = res.data.reverse()
}
})
}
const toggleExpand = () => {
collapse.value = !collapse.value

View File

@@ -51,7 +51,7 @@ import { initResizeDetection, cleanupAndRestoreHik
import HikPlayerComponent from '@/components/Player/HikPlayer.vue'
import FlvPlayerComponent from '@/components/FlvPlayer/index.vue'
import { dragEvent } from '@/utils/common'
// import { getVideoStream, doStartOrStopUavAlgorithm } from '@/api/uav'
import { getVideoStream, doStartOrStopUavAlgorithm } from '@/api/uav'
import { ElMessage } from 'element-plus'
import useMapStore from '@/store/modules/map'
@@ -123,13 +123,13 @@ const openUav = (data) => {
sn: data.droneSn,
enable_orc: false
}
// getVideoStream(params).then(res => {
// if(res.success) {
// setTimeout(() => {
// uavDialog.url = res.result.httpUrl
// }, 10000)
// }
// })
getVideoStream(params).then(res => {
if(res.success) {
setTimeout(() => {
uavDialog.url = res.result.httpUrl
}, 10000)
}
})
}, 20000)
}
// 开启/关闭算法
@@ -150,14 +150,14 @@ const handleAlgorithm = () => {
status: 'start',
sn: uavData.value.droneSn
}
// doStartOrStopUavAlgorithm(params).then(res => {
// if(res.success) {
// algorithmStatus.value = true
// ElMessage.success('算法已开启')
// }else {
// ElMessage.error(res.result)
// }
// })
doStartOrStopUavAlgorithm(params).then(res => {
if(res.success) {
algorithmStatus.value = true
ElMessage.success('算法已开启')
}else {
ElMessage.error(res.result)
}
})
}
}
// 算法关闭
@@ -166,15 +166,15 @@ const closeAlgorithm = () => {
status: 'stop',
sn: uavData.value.droneSn
}
// doStartOrStopUavAlgorithm(params).then(res => {
// if(res.success) {
// algorithmStatus.value = false
// algorithmValue.value = []
// ElMessage.success(res.result)
// }else {
// ElMessage.error(res.result)
// }
// })
doStartOrStopUavAlgorithm(params).then(res => {
if(res.success) {
algorithmStatus.value = false
algorithmValue.value = []
ElMessage.success(res.result)
}else {
ElMessage.error(res.result)
}
})
}
/**
* 拖拽事件

View File

@@ -41,10 +41,10 @@
<script setup>
import { nextTick, onMounted, onUnmounted, ref } from 'vue'
import { marked } from 'marked'
// import { useStore } from 'vuex'
import GlobalMap from '@/components/map/js/GlobalMap.js'
import GlobalMap from '@/components/Map/js/GlobalMap.js'
import useMapStore from '@/store/modules/map'
// const store = useStore()
const mapStore = useMapStore()
const emit = defineEmits([ 'openVideo', 'openUav' ])
const videoArr = ref([])
const uavArr = ref([])
@@ -193,29 +193,7 @@ return ''
// 监控视频查看
const openVideoHandler = (index) => {
const data = videoArr.value[index]
// 雷云一体机一个视频
if(data.videoName.indexOf('雷云') !== -1) {
const videos = videoArr.value.filter(i => i.videoName.indexOf('雷云') !== -1).sort((a, b) => {
const index1 = a.videoName[a.videoName.length - 1]
const index2 = b.videoName[b.videoName.length - 1]
return index1 - index2
})
codes.value = [ videos[0].videoCode ]
}else{
if(data.videoName.indexOf('球机') !== -1) {
const videos = videoArr.value.filter(i => i.videoName.indexOf('球机') !== -1).sort((a, b) => {
const index1 = a.videoName[a.videoName.length - 1]
const index2 = b.videoName[b.videoName.length - 1]
return index1 - index2
})
codes.value = videos.map((i, index) => {
return i.previewUrl
})
}else{
codes.value = [ data.videoCode ]
}
}
codes.value = [ data.videoCode ]
nextTick(() => {
setTimeout(() => {
visible.value = true
@@ -235,17 +213,17 @@ const openImageHandle = (url) => {
// 开启无人机控制
const openUavHandler = (index) => {
const data = uavArr.value[index]
// store.commit('mapStore/updateUavData', { ...data })
mapStore.updateUavData({ ...data })
emit('openUav', { ...data })
}
// 渔船追踪
const openTrawlerHandler = (index) => {
const data = boatArr.value[index]
// store.commit('mapStore/updateWindowInfo', {
// visible: true,
// type: '_trawler_dynamic',
// data: { ...data }
// })
mapStore.updateWindowInfo({
visible: true,
type: '_trawler_dynamic',
data: { ...data }
})
GlobalMap.instance.map.animateTo(
{
zoom: 20,

View File

@@ -92,7 +92,8 @@ const handleNodeClick = (node) => {
}
changeGridType(4)
defineExpose({
handleNodeClick
handleNodeClick,
videoPreview
})
onUnmounted(() => {
if(videoPreview.value) {
@@ -105,7 +106,7 @@ onUnmounted(() => {
<style lang="scss" scoped>
.wall-wrapper {
height: 812px;
height: calc(100% - 36px);
position: relative;
width: 80%;
.treeTool{
@@ -141,7 +142,7 @@ onUnmounted(() => {
justify-content: flex-end;
}
.con_right{
height: 100%;
height: calc(100% - 36px);
padding: 5px;
width: 100%;
display: flex;

View File

@@ -1,6 +1,6 @@
<template>
<!-- 电视墙页面 -->
<DialogComponent class="wall-dialog" :style="{ resize: 'both', overflow: 'auto' }" v-if="type==='CCTV'|| type==='UAV'" :title="title" width="1800" :draggable="true" :modal="false" @close="close">
<DialogComponent @mousedown="drag" class="wall-dialog" :style="{ resize: 'both', overflow: 'auto' }" :title="title" width="1800" :draggable="true" :modal="false" @close="close">
<div class="wall-container">
<TreeCom ref="Tree" @handle="handle"/>
<GridCom ref="Grid"/>
@@ -14,10 +14,11 @@ import TreeCom from './tree.vue'
import GridCom from './grid.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 type = computed(() => mapStore.dialogVisible.type)
const type = computed(() => mapStore.dialog.type)
const Tree = ref(null)
const Grid = ref(null)
@@ -31,8 +32,7 @@ const handle = (node) => {
Grid.value.handleNodeClick(node)
}
const close = () => {
mapStore.updateDialog('')
router.back()
mapStore.updateDialog(false)
}
watch(() => type.value, () => {
if(type.value) {
@@ -41,10 +41,43 @@ watch(() => type.value, () => {
})
}
})
}, { immediate: true })
/**
* 拖拽事件
* @param e
*
*/
const drag = (e) => {
if(e.target.className.includes('el-dialog-title')) {
dragEvent(e, 'el-dialog-title', () => {
if(Grid.value.videoPreview) {
Grid.value.videoPreview.forEach(i => {
i.initResize(false)
})
}
})
}else{
resizeEvent(e, 'el-dialog', () => {
if(Grid.value?.videoPreview) {
Grid.value.videoPreview.forEach(i => {
i.initResize()
})
}
})
}
}
</script>
<style scoped lang="scss">
<style lang="scss">
.wall-dialog{
height: 900px;
.el-dialog__body{
height: calc(100% - 56px) !important;
}
}
.wall-container{
display: flex;
height: 100%;
}
</style>

View File

@@ -55,6 +55,9 @@ const refresh = (type) => {
}
const handleNodeClick = (data, node) => {
if(data.status && data.status === 'offline') {
return false
}
if(!data.children || data.children.length === 0) {
emit('handle', node.data)
}
@@ -107,7 +110,7 @@ defineExpose({
border: 1px solid #5FA4FF;
&::before {
background-image: url('@/assets/images/livePreview/icon-monitor-active.png');
// background-image: url('@/assets/images/livePreview/icon-monitor-active.png');
}
&:has(.offline) {
background-color: none;