海康摄像头增加了云台控制等

This commit is contained in:
2025-12-28 13:14:40 +08:00
parent 2ee25a4f7c
commit 231247c80f
12 changed files with 774 additions and 107 deletions

View File

@@ -41,8 +41,6 @@
</div>
<div class="modal fade" id="subModal" tabindex="-1"><div class="modal-dialog modal-lg modal-dialog-centered"><div class="modal-content shadow-lg"><div class="modal-body p-0"><iframe id="frame-sub" src="Subscription.html" style="height: 650px;" name="sub"></iframe></div></div></div></div>
<div class="modal fade" id="preModal" tabindex="-1"><div class="modal-dialog modal-md modal-dialog-centered"><div class="modal-content shadow-lg"><div class="modal-body p-0"><iframe id="frame-pre" src="Preprocessing.html" style="height: 580px;" name="pre"></iframe></div></div></div></div>
<div class="modal fade" id="ctrlModal" tabindex="-1"><div class="modal-dialog modal-dialog-centered"><div class="modal-content shadow-lg"><div class="modal-body p-0"><iframe id="frame-ctrl" src="CameraControl.html" style="height: 480px;" name="ctrl"></iframe></div></div></div></div>
<script src="https://cdn.staticfile.org/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<script>
@@ -58,12 +56,11 @@
top: document.getElementById('frame-top').contentWindow,
editor: document.getElementById('frame-editor').contentWindow,
diag: document.getElementById('frame-diag').contentWindow,
sub: document.getElementById('frame-sub').contentWindow,
pre: document.getElementById('frame-pre').contentWindow,
ctrl: document.getElementById('frame-ctrl').contentWindow
sub: document.getElementById('frame-sub').contentWindow
};
const editorIframe = document.getElementById('frame-editor');
// 辅助:切回详情页
const switchToDetail = () => {
editorIframe.src = "Editor.html";
editorIframe.onload = () => {
@@ -76,7 +73,7 @@
switch(msg.type) {
case 'DEVICE_SELECTED':
currentDeviceId = msg.data.id;
// 如果当前不是Editor页面切回
// 如果当前在深层页面(Edit/Add/Pre/Ctrl),强制切回详情页
if (!editorIframe.src.includes('Editor.html')) {
switchToDetail();
} else {
@@ -102,42 +99,44 @@
if(diagEl) diagEl.style.height = msg.expanded ? '350px' : '45px';
break;
// 弹窗逻辑
case 'OPEN_SUBSCRIPTION':
new bootstrap.Modal(document.getElementById('subModal')).show();
setTimeout(() => frames.sub.postMessage({ type: 'LOAD_SUBS_DATA', deviceId: msg.id }, '*'), 400);
break;
// --- 路由切换逻辑 ---
// 1. 编辑/新增
case 'OPEN_CAMERA_EDIT':
case 'OPEN_CAMERA_ADD':
editorIframe.src = "CameraEdit.html";
editorIframe.onload = () => {
const initType = msg.type === 'OPEN_CAMERA_ADD' ? 'INIT_ADD_PAGE' : 'LOAD_EDIT_DATA';
editorIframe.contentWindow.postMessage({ type: initType, deviceId: msg.id, apiBase: API_BASE }, '*');
};
break;
// 2. 预处理
case 'OPEN_PREPROCESS':
editorIframe.src = "Preprocessing.html";
editorIframe.onload = () => {
editorIframe.contentWindow.postMessage({ type: 'LOAD_PREPROCESS_DATA', deviceId: msg.id, apiBase: API_BASE }, '*');
};
break;
case 'OPEN_CAMERA_CONTROL':
new bootstrap.Modal(document.getElementById('ctrlModal')).show();
setTimeout(() => frames.ctrl.postMessage({ type: 'LOAD_CTRL_DATA', deviceId: msg.id, apiBase: API_BASE }, '*'), 400);
break;
// --- 统一使用 CameraEdit.html ---
case 'OPEN_CAMERA_EDIT':
editorIframe.src = "CameraEdit.html";
// 3. 【修改】云台控制 (不弹窗,全屏)
case 'OPEN_CAMERA_CONTROL':
editorIframe.src = "CameraControl.html";
editorIframe.onload = () => {
editorIframe.contentWindow.postMessage({ type: 'LOAD_EDIT_DATA', deviceId: msg.id, apiBase: API_BASE }, '*');
};
break;
case 'OPEN_CAMERA_ADD': // 新增也指向同一个文件
editorIframe.src = "CameraEdit.html";
editorIframe.onload = () => {
editorIframe.contentWindow.postMessage({ type: 'INIT_ADD_PAGE', apiBase: API_BASE }, '*');
editorIframe.contentWindow.postMessage({ type: 'LOAD_CTRL_DATA', deviceId: msg.id, apiBase: API_BASE }, '*');
};
break;
// 统一关闭逻辑
case 'CLOSE_EDIT_MODE':
case 'CLOSE_PREPROCESS_MODE':
case 'CLOSE_ADD_MODE':
case 'CLOSE_PREPROCESS_MODE':
case 'CLOSE_CONTROL_MODE': // 【新增】
switchToDetail();
if(msg.needRefresh) frames.list.postMessage({ type: 'REFRESH_LIST' }, '*');
break;