画面分区预览（先点击分区选中，再选择下方信号源分配）
16路信号源列表
[xss_clean](function(){ const GjCtrl = {curMode:"full",selectedDom:null}; const previewBox = document.getElementById("gjPreviewBox"); const sourceBox = document.getElementById("gjSourceBox"); for(let i=1;i<=16;i++){ const btn = document.createElement("button"); btn.className="gj-ctrl-source-btn"; btn.innerText="信号源"+i; sourceBox.appendChild(btn); } function renderLayout(mode){ previewBox[xss_clean]=""; previewBox.className="gj-ctrl-preview-box"; let labelList=[]; if(mode==="full"){previewBox.classList.add("gj-ctrl-layout-full");labelList=["画面1"];} else if(mode==="split2"){previewBox.classList.add("gj-ctrl-layout-2");labelList=["左侧画面","右侧画面"];} else if(mode==="split4"){previewBox.classList.add("gj-ctrl-layout-4");labelList=["左上","右上","左下","右下"];} labelList.forEach(text=>{ const div=document.createElement("div"); div.className="gj-ctrl-area"; div.innerText=text; div.onclick=function(){ document.querySelectorAll(".gj-ctrl-area").forEach(d=>d.classList.remove("selected")); this.classList.add("selected");GjCtrl.selectedDom=this; }; previewBox.appendChild(div); }); GjCtrl.selectedDom=null; } renderLayout("full"); document.querySelectorAll(".gj-ctrl-scene-btn").forEach(btn=>{ btn.onclick=function(){ document.querySelectorAll(".gj-ctrl-scene-btn").forEach(b=>b.classList.remove("active")); this.classList.add("active"); GjCtrl.curMode=this.dataset.mode; renderLayout(GjCtrl.curMode); } }); document.querySelectorAll(".gj-ctrl-source-btn").forEach(btn=>{ btn.onclick=function(){ if(!GjCtrl.selectedDom){ alert("请先选中上方画面分区！"); return; } GjCtrl.selectedDom.innerText=this.innerText; } });})();[xss_clean]
