会议中控大屏场景切换与信号调度演示系统
发布时间：2026-07-22 浏览人数：已有0 浏览
场景模式选择
<button class="gj-ctrl-scene-btn active" data-mode="full">全屏</button><button class="gj-ctrl-scene-btn" data-mode="split2">二分屏</button><button class="gj-ctrl-scene-btn" data-mode="split4">四分屏</button>
画面分区预览（先点击分区选中，再选择下方信号源分配）
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]
营业执照 
