g82tt/SecMPS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

V4优化: 预览+云台合并为一个对话框 视频左/方向键右

Browse Source
This commit is contained in:
g82tt
2026-05-17 14:21:10 +08:00
parent f04a92db02
commit f118e8b245
1 changed files with 21 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
web.vite/src/views/warehouse/device_manager/base_device.vue
View File

@@ -24,31 +24,31 @@
</template>
</view-grid>
<!-- 实时预览 -->
<!-- 实时预览 + 云台控制 -->
<vol-box :lazy="true" v-model="previewVisible" title="实时预览" :width="960" :padding="10">
<div style="background:#000;min-height:400px;display:flex;align-items:center;justify-content:center">
<div style="display:flex;gap:8px">
<div style="flex:1;background:#000;min-height:450px;display:flex;align-items:center;justify-content:center">
<div v-if="!wsFlv" style="color:#fff">{{ loading ? '加载中...' : '无法获取流地址' }}</div>
<video v-else ref="playerRef" :src="wsFlv" autoplay muted controls style="width:100%;height:450px" />
<video v-else :src="wsFlv" autoplay muted controls style="width:100%;height:450px" />
</div>
<div style="width:120px;display:flex;flex-direction:column;align-items:center;gap:4px;padding-top:60px">
<el-button circle @mousedown="ptzGo('up')" @mouseup="ptzStop" @mouseleave="ptzStop"><el-icon><ArrowUp /></el-icon></el-button>
<div style="display:flex;gap:4px">
<el-button circle @mousedown="ptzGo('left')" @mouseup="ptzStop"><el-icon><ArrowLeft /></el-icon></el-button>
<el-button circle type="danger" size="small" @click="ptzGo('stop')"><el-icon><Close /></el-icon></el-button>
<el-button circle @mousedown="ptzGo('right')" @mouseup="ptzStop"><el-icon><ArrowRight /></el-icon></el-button>
</div>
<el-button circle @mousedown="ptzGo('down')" @mouseup="ptzStop"><el-icon><ArrowDown /></el-icon></el-button>
<div style="display:flex;gap:4px;margin-top:8px">
<el-button circle size="small" @mousedown="ptzGo('zoom_in')" @mouseup="ptzStop">+</el-button>
<el-button circle size="small" @mousedown="ptzGo('zoom_out')" @mouseup="ptzStop">-</el-button>
</div>
</div>
</div>
<template #footer><el-button size="small" @click="previewVisible=false">关闭</el-button></template>
</vol-box>
<!-- 云台控制 -->
<vol-box :lazy="true" v-model="ptzVisible" title="云台控制" :width="320" :padding="10">
<div style="display:flex;flex-direction:column;align-items:center;gap:4px">
<el-button circle @mousedown="ptzGo('up')" @mouseup="ptzStop" @mouseleave="ptzStop"><el-icon><ArrowUp /></el-icon></el-button>
<div style="display:flex;gap:8px">
<el-button circle @mousedown="ptzGo('left')" @mouseup="ptzStop"><el-icon><ArrowLeft /></el-icon></el-button>
<el-button circle type="danger" @click="ptzGo('stop')"><el-icon><Close /></el-icon></el-button>
<el-button circle @mousedown="ptzGo('right')" @mouseup="ptzStop"><el-icon><ArrowRight /></el-icon></el-button>
</div>
<el-button circle @mousedown="ptzGo('down')" @mouseup="ptzStop"><el-icon><ArrowDown /></el-icon></el-button>
<div style="display:flex;gap:8px;margin-top:8px">
<el-button circle @mousedown="ptzGo('zoom_in')" @mouseup="ptzStop">+</el-button>
<el-button circle @mousedown="ptzGo('zoom_out')" @mouseup="ptzStop">-</el-button>
</div>
</div>
</vol-box>
<!-- 实时数据 -->
<vol-box :lazy="true" v-model="realtimeVisible" title="实时数据" :width="600" :padding="10">
@@ -87,7 +87,7 @@
//── 对话框状态 ──
const curDev = ref(null);
const previewVisible = ref(false), ptzVisible = ref(false);
const previewVisible = ref(false);
const realtimeVisible = ref(false), controlVisible = ref(false);
const wsFlv = ref(null), loading = ref(false);
const realtimeValues = ref([]), realtimeLoading = ref(false);
@@ -149,11 +149,6 @@
onClick={($e) => openPreview(row)}>
预览
</el-button>
<el-button size="small" plain
style="height:26px;padding:0 8px !important;margin-left:4px"
onClick={($e) => { curDev.value = row; ptzVisible.value = true }}>
云台
</el-button>
</div>
);
}