Codex
143 lines
11 KiB
JavaScript
143 lines
11 KiB
JavaScript
'use strict';
|
|
let wallOwner='',wallOrder=[],wallPage=0,wallDragging='',ptzCamera='',ptzGeneration=0;
|
|
const WALL_LAYOUTS={auto:[0,0],1:[1,1],2:[2,1],4:[2,2],6:[3,2],9:[3,3],16:[4,4]};
|
|
function wallStorageKey(){return 'zhaofu-monitor-'+(currentUser?.id||'guest');}
|
|
function wallSave(){try{localStorage.setItem(wallStorageKey(),JSON.stringify({order:wallOrder,layout:$('#wall-layout').value}));}catch{}}
|
|
function wallSync(){
|
|
if(wallOwner!==(currentUser?.id||'')){
|
|
wallOwner=currentUser?.id||'';wallPage=0;let saved={};try{saved=JSON.parse(localStorage.getItem(wallStorageKey()))||{};}catch{}
|
|
wallOrder=Array.isArray(saved.order)?saved.order.filter(x=>/^[a-f0-9]{16}$/.test(x)):[];
|
|
$('#wall-layout').value=Object.hasOwn(WALL_LAYOUTS,saved.layout)?saved.layout:'auto';
|
|
}
|
|
const cameras=filtered(),ids=cameras.map(c=>c.id);
|
|
const allIds=new Set(state.cameras.map(c=>c.id));wallOrder=wallOrder.filter(id=>allIds.has(id));
|
|
for(const id of ids)if(!wallOrder.includes(id))wallOrder.push(id);
|
|
const ordered=wallOrder.filter(id=>ids.includes(id)),layout=$('#wall-layout').value;
|
|
const capacity=Number(layout)||6,pages=Math.max(1,Math.ceil(ordered.length/capacity));
|
|
wallPage=Math.min(wallPage,pages-1);const visible=new Set(ordered.slice(wallPage*capacity,(wallPage+1)*capacity));
|
|
$('#live-grid').dataset.layout=layout;
|
|
for(const card of $$('#live-grid .camera-card')){
|
|
const id=card.querySelector('video').dataset.camera;
|
|
card.style.order=ordered.indexOf(id);card.hidden=!visible.has(id);
|
|
card.querySelector('[data-wall-before]').disabled=ordered.indexOf(id)===0;
|
|
card.querySelector('[data-wall-after]').disabled=ordered.indexOf(id)===ordered.length-1;
|
|
}
|
|
$('#wall-page').textContent=`${wallPage+1} / ${pages} 页 · ${ordered.length} 个画面`;
|
|
$('#wall-prev').disabled=wallPage===0;$('#wall-next').disabled=wallPage===pages-1;
|
|
$('#live-grid').classList.toggle('arranging',$('#wall-arrange').checked);
|
|
$$('[data-ptz-camera]').forEach(b=>b.hidden=!(isAdmin()||currentUser?.ptzControl));
|
|
}
|
|
function wallMove(id,target){
|
|
const from=wallOrder.indexOf(id),to=wallOrder.indexOf(target);if(from<0||to<0||from===to)return;
|
|
wallOrder.splice(from,1);wallOrder.splice(to,0,id);wallSave();wallSync();
|
|
}
|
|
$('#wall-layout').onchange=()=>{wallPage=0;wallSave();wallSync();};
|
|
$('#wall-arrange').onchange=wallSync;
|
|
$('#wall-prev').onclick=()=>{wallPage--;wallSync();};$('#wall-next').onclick=()=>{wallPage++;wallSync();};
|
|
$('#wall-fullscreen').onclick=async()=>{
|
|
try{if(document.fullscreenElement)await document.exitFullscreen();else await $('#page-live').requestFullscreen();}
|
|
catch{toast('浏览器未允许全屏，可按 F11 进入浏览器全屏');}
|
|
};
|
|
document.addEventListener('fullscreenchange',()=>{
|
|
$('#wall-fullscreen').textContent=document.fullscreenElement?'退出全屏 · Esc':'全屏监控';
|
|
document.body.classList.toggle('wall-fullscreen',document.fullscreenElement===$('#page-live'));
|
|
});
|
|
document.addEventListener('keydown',e=>{
|
|
if(e.key==='Escape'&&document.fullscreenElement===$('#page-live'))document.exitFullscreen().catch(()=>{});
|
|
});
|
|
setInterval(()=>{$('#wall-clock').textContent=new Date().toLocaleString('zh-CN',{hour12:false});},1000);
|
|
let wallPointer=null;
|
|
function wallDragEnd(){wallPointer=null;wallDragging='';$$('.wall-drop-target').forEach(c=>c.classList.remove('wall-drop-target'));}
|
|
$('#live-grid').addEventListener('pointerdown',e=>{
|
|
const handle=e.target.closest('[data-wall-drag]');if(!handle||e.button!==0||!$('#wall-arrange').checked)return;
|
|
e.preventDefault();handle.setPointerCapture(e.pointerId);wallDragging=handle.dataset.wallDrag;
|
|
wallPointer={x:e.clientX,y:e.clientY,id:e.pointerId,moved:false};
|
|
});
|
|
$('#live-grid').addEventListener('pointermove',e=>{
|
|
if(!wallPointer||wallPointer.id!==e.pointerId)return;
|
|
wallPointer.moved ||= Math.hypot(e.clientX-wallPointer.x,e.clientY-wallPointer.y)>8;
|
|
$$('.wall-drop-target').forEach(c=>c.classList.remove('wall-drop-target'));
|
|
if(wallPointer.moved)document.elementFromPoint(e.clientX,e.clientY)?.closest('.camera-card')?.classList.add('wall-drop-target');
|
|
});
|
|
$('#live-grid').addEventListener('pointerup',e=>{
|
|
if(!wallPointer||wallPointer.id!==e.pointerId)return;
|
|
const target=document.elementFromPoint(e.clientX,e.clientY)?.closest('.camera-card')?.querySelector('video')?.dataset.camera;
|
|
if(wallPointer.moved&&target)wallMove(wallDragging,target);wallDragEnd();
|
|
});
|
|
$('#live-grid').addEventListener('pointercancel',wallDragEnd);
|
|
document.addEventListener('click',e=>{
|
|
const b=e.target.closest('button');if(!b)return;
|
|
if(b.dataset.wallBefore||b.dataset.wallAfter){const ids=wallOrder.filter(id=>filtered().some(c=>c.id===id)),id=b.dataset.wallBefore||b.dataset.wallAfter;wallMove(id,ids[ids.indexOf(id)+(b.dataset.wallBefore?-1:1)]);}
|
|
if(b.dataset.ptzCamera)openPtz(b.dataset.ptzCamera);
|
|
});
|
|
let ptzPresets=null,ptzPresetGeneration=0,ptzBusy=false,ptzCommandGeneration=0,ptzReady=false,ptzConfirmation=null;
|
|
function setPtzBusy(busy){
|
|
ptzBusy=busy;
|
|
$$('[data-ptz-action]').forEach(b=>b.disabled=!ptzReady||(busy&&b.dataset.ptzAction!=='stop'));
|
|
$$('#ptz-presets button,#ptz-presets input').forEach(b=>b.disabled=busy);
|
|
if(!busy&&ptzPresets)$('#preset-form button').disabled=ptzPresets.items.length>=ptzPresets.maximum;
|
|
}
|
|
function clearPresetConfirmation(){ptzConfirmation=null;$('#preset-confirmation').hidden=true;}
|
|
function renderPresets(data){
|
|
ptzPresets=data;clearPresetConfirmation();
|
|
$('#preset-list').innerHTML=data.items.map(p=>`<div class="preset-row"><strong>${esc(p.name)}</strong><button class="quiet" data-preset-goto="${esc(p.token)}">转到</button>${isAdmin()?`<button class="quiet" data-preset-remove="${esc(p.token)}">删除</button>`:''}</div>`).join('')||'<p class="description">还没有预置位。把云台调到需要的位置后保存。</p>';
|
|
$('#preset-count').textContent=`${data.items.length} / ${data.maximum} 个位置`;
|
|
$('#preset-form').hidden=!isAdmin();$('#preset-form button').disabled=data.items.length>=data.maximum;
|
|
}
|
|
async function loadPresets(){
|
|
if(!ptzCamera||ptzBusy)return;const id=ptzCamera,generation=++ptzPresetGeneration;
|
|
ptzPresets=null;clearPresetConfirmation();$('#preset-list').replaceChildren();$('#preset-form').hidden=true;
|
|
$('#preset-status').textContent='正在读取设备预置位…';$('#preset-reload').disabled=true;
|
|
try{const data=await api('/api/ptz/presets?camera='+encodeURIComponent(id));if(generation!==ptzPresetGeneration||id!==ptzCamera||!loggedIn)return;renderPresets(data);$('#preset-status').textContent=data.note;}
|
|
catch(e){if(!e.stale&&generation===ptzPresetGeneration)$('#preset-status').textContent=e.message;}
|
|
finally{if(generation===ptzPresetGeneration)$('#preset-reload').disabled=false;}
|
|
}
|
|
async function openPtz(id){
|
|
if(ptzCamera&&ptzCamera!==id)closePtz();
|
|
const generation=++ptzGeneration;ptzCamera=id;ptzReady=false;$('#ptz-panel').hidden=false;
|
|
$('#ptz-title').textContent=(state.cameras.find(c=>c.id===id)?.name||'摄像头')+' · 云台与预置位';
|
|
$('#ptz-status').textContent='正在读取云台能力…';setPtzBusy(false);loadPresets();
|
|
try{const caps=await api('/api/ptz?camera='+id);if(generation!==ptzGeneration||!loggedIn)return;ptzReady=true;$('#ptz-status').textContent=caps.note;setPtzBusy(ptzBusy);}
|
|
catch(e){if(!e.stale&&generation===ptzGeneration)$('#ptz-status').textContent=e.message;}
|
|
}
|
|
async function ptzCommand(action){
|
|
if(!ptzCamera||(!ptzReady&&action!=='stop')||(ptzBusy&&action!=='stop'))return;
|
|
const id=ptzCamera,generation=ptzGeneration,command=++ptzCommandGeneration;
|
|
setPtzBusy(true);$('#ptz-status').textContent=action==='stop'?'正在停止…':'正在微调…';
|
|
try{await api('/api/ptz',{camera:id,action});if(generation===ptzGeneration&&command===ptzCommandGeneration)$('#ptz-status').textContent='停止指令已确认，可继续微调';}
|
|
catch(e){if(!e.stale&&generation===ptzGeneration&&command===ptzCommandGeneration)$('#ptz-status').textContent=e.message;}
|
|
finally{if(generation===ptzGeneration&&command===ptzCommandGeneration)setPtzBusy(false);}
|
|
}
|
|
function confirmPreset(action,token){
|
|
if(!isAdmin()||ptzBusy||!ptzPresets)return;
|
|
const preset=ptzPresets.items.find(p=>p.token===token);if(!preset)return;
|
|
ptzConfirmation={action,token,name:preset.name};
|
|
$('#preset-confirm-text').textContent=`删除“${preset.name}”？设备中的这个预置位会被移除。`;
|
|
$('#preset-confirmation').hidden=false;
|
|
}
|
|
async function presetCommand(action,token,name){
|
|
if(ptzBusy||!ptzCamera||!ptzPresets)return;
|
|
const id=ptzCamera,generation=ptzGeneration,command=++ptzCommandGeneration,revision=ptzPresets.revision;
|
|
clearPresetConfirmation();setPtzBusy(true);$('#preset-status').textContent=action==='goto'?'正在转到预置位，可随时点击停止…':'正在更新设备预置位…';
|
|
try{const result=await api('/api/ptz/presets',{camera:id,action,token,name,revision});
|
|
if(generation!==ptzGeneration||command!==ptzCommandGeneration||!loggedIn)return;
|
|
if(result.presets){renderPresets(result.presets);$('#preset-form').reset();}
|
|
$('#preset-status').textContent=result.message;
|
|
}catch(e){if(!e.stale&&generation===ptzGeneration&&command===ptzCommandGeneration){ptzPresets=null;$('#preset-list').replaceChildren();$('#preset-form').hidden=true;$('#preset-status').textContent=e.message+'。请重新读取后核对。';}}
|
|
finally{if(generation===ptzGeneration&&command===ptzCommandGeneration)setPtzBusy(false);}
|
|
}
|
|
function closePtz(){
|
|
const id=ptzCamera;if(id&&ptzBusy&&loggedIn)api('/api/ptz',{camera:id,action:'stop'}).catch(()=>{});
|
|
ptzGeneration++;ptzPresetGeneration++;ptzCommandGeneration++;ptzCamera='';ptzPresets=null;ptzBusy=false;ptzReady=false;
|
|
$('#ptz-panel').hidden=true;$('#preset-list').replaceChildren();$('#preset-form').reset();clearPresetConfirmation();
|
|
}
|
|
$('#ptz-close').onclick=closePtz;
|
|
$$('[data-ptz-action]').forEach(b=>b.onclick=()=>ptzCommand(b.dataset.ptzAction));
|
|
$('#preset-reload').onclick=loadPresets;
|
|
$('#preset-form').onsubmit=e=>{e.preventDefault();presetCommand('create',undefined,$('#preset-name').value);};
|
|
$('#preset-confirm-cancel').onclick=clearPresetConfirmation;
|
|
$('#preset-confirm-yes').onclick=()=>{if(ptzConfirmation){const p=ptzConfirmation;presetCommand(p.action,p.token,p.name);}};
|
|
$('#preset-list').onclick=e=>{const b=e.target.closest('button');if(!b)return;if(b.dataset.presetGoto)presetCommand('goto',b.dataset.presetGoto);if(b.dataset.presetRemove)confirmPreset('remove',b.dataset.presetRemove);};
|
|
document.addEventListener('visibilitychange',()=>{if(document.hidden&&ptzCamera&&ptzBusy)ptzCommand('stop');});
|
|
window.addEventListener('pagehide',()=>{if(ptzCamera&&ptzBusy)fetch('/api/ptz',{method:'POST',keepalive:true,headers:{'Content-Type':'application/json'},body:JSON.stringify({camera:ptzCamera,action:'stop'})}).catch(()=>{});});
|