ucvl-home-vision/web/monitor.js

'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'));
});
setInterval(()=>{$('#wall-clock').textContent=new Date().toLocaleString('zh-CN',{hour12:false});},1000);
document.addEventListener('dragstart',e=>{const h=e.target.closest('[data-wall-drag]');if(!h)return;wallDragging=h.dataset.wallDrag;e.dataTransfer.setData('text/plain',wallDragging);e.dataTransfer.effectAllowed='move';});
$('#live-grid').addEventListener('dragover',e=>{if(wallDragging&&$('#wall-arrange').checked)e.preventDefault();});
$('#live-grid').addEventListener('drop',e=>{const c=e.target.closest('.camera-card');if(!c||!wallDragging)return;e.preventDefault();wallMove(wallDragging,c.querySelector('video').dataset.camera);wallDragging='';});
document.addEventListener('dragend',()=>wallDragging='');
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);
});
async function openPtz(id){
  const generation=++ptzGeneration;ptzCamera=id;$('#ptz-panel').hidden=false;
  $('#ptz-title').textContent=(state.cameras.find(c=>c.id===id)?.name||'摄像头')+' · 云台';
  $('#ptz-status').textContent='正在读取云台能力…';$$('[data-ptz-action]').forEach(b=>b.disabled=true);
  try{const caps=await api('/api/ptz?camera='+id);if(generation!==ptzGeneration)return;$('#ptz-status').textContent=caps.note;$$('[data-ptz-action]').forEach(b=>b.disabled=false);}
  catch(e){if(generation===ptzGeneration)$('#ptz-status').textContent=e.message;}
}
async function ptzCommand(action){
  if(!ptzCamera)return;const id=ptzCamera,generation=ptzGeneration;
  $$('[data-ptz-action]:not([data-ptz-action="stop"])').forEach(b=>b.disabled=true);
  $('#ptz-status').textContent=action==='stop'?'正在停止…':'正在微调…';
  try{await api('/api/ptz',{camera:id,action});if(generation===ptzGeneration)$('#ptz-status').textContent='停止指令已确认，可继续微调';}
  catch(e){if(generation===ptzGeneration)$('#ptz-status').textContent=e.message;}
  finally{if(generation===ptzGeneration)$$('[data-ptz-action]').forEach(b=>b.disabled=false);}
}
function closePtz(){ptzGeneration++;ptzCamera='';$('#ptz-panel').hidden=true;}
$('#ptz-close').onclick=closePtz;
$$('[data-ptz-action]').forEach(b=>b.onclick=()=>ptzCommand(b.dataset.ptzAction));
document.addEventListener('visibilitychange',()=>{if(document.hidden&&ptzCamera)ptzCommand('stop');});
window.addEventListener('pagehide',()=>{if(ptzCamera)fetch('/api/ptz',{method:'POST',keepalive:true,headers:{'Content-Type':'application/json'},body:JSON.stringify({camera:ptzCamera,action:'stop'})}).catch(()=>{});});