小屏控制大屏html+css+js实现

应用场景

大厅展示，大屏在墙上，下面有一个带有触控屏的一体机与大屏链接并负责空值大屏展示。
需要在写两个两个页面，第一个在一体机触控屏上，一个在大屏展示。

控制流程

原理：利用html控制进程间通信的技术实现小屏控制大屏的操作
简单的实现小屏控制大屏展示，具体样式展示要根据公司要求进行创造。

主要代码

main.js主进程函数

// Modules to control application life and create native browser window
const { app, BrowserWindow, ipcMain, screen} = require('electron')
const path = require('node:path')
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS']=true

let win = null
let childWindows = {};
const preload = path.join(__dirname, 'preload.js')
const createWindow = () => {
    // Create the browser window.
    win = new BrowserWindow({
        width: 2560,
        height: 1600,
        frame: false,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js')
        }
    })

    // 加载 index.html
    win.loadFile('mainBoard.html')

    // 打开开发工具
    // win.webContents.openDevTools()
}

// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
    createWindow()

    app.on('activate', () => {
        // 在 macOS 系统内, 如果没有已开启的应用窗口
        // 点击托盘图标时通常会重新创建一个新窗口
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})

// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此, 通常
// 对应用程序和它们的菜单栏来说应该时刻保持激活状态,
// 直到用户使用 Cmd + Q 明确退出
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
})

// 在当前文件中你可以引入所有的主进程代码
// 也可以拆分成几个文件，然后用 require 导入。

// New window example arg: new windows url
ipcMain.handle('open-win', (_, path, arg) => {
    const displayScreen = screen.getAllDisplays().find(it => {
        return it.size.width > 1800;
    });
    if (displayScreen == null) {
        return;
    }
    const childWindow = new BrowserWindow({
        type: 'DisplayScreen',
        frame: false,
        x: displayScreen.workArea.x,
        y: displayScreen.workArea.y,
        // width: displayScreen.workArea.width,
        // height: displayScreen.workArea.height,
        fullscreen: true,
        webPreferences: {
            preload: preload,
            nodeIntegration: true,
            contextIsolation: true,
        },
        parent: win,
    })

    childWindow.loadFile('index.html')
    if (arg.id) {
        childWindows[arg.id] = childWindow;
    }

    // 打开开发工具
    // childWindow.webContents.openDevTools()
})

ipcMain.on('ctrl-signal', (_, arg) => {
    BrowserWindow.getAllWindows().forEach((it) => {
        const url = it.webContents.getURL();
        
        if (url != null && url.endsWith("index.html")) {
            it.webContents.send('ctrl-signal', arg)
        }
    })
})
ipcMain.on('close', (_, id, arg) => {
    if (childWindows[id]) {
        childWindows[id].close();
        delete childWindows[id];
    }
})

ipcMain.on('exit', (_, id, arg) => {
    win = null
    if (process.platform !== 'darwin') app.quit()
})

创建好主进程后，以后就靠它广播小屏发给大屏的信号了
在小平端主要代码如下：
mainBoard.html负责与用户交互，发信号给大屏，需要先发送给主进程，可以通过主进程广播给其他进程

function openDisplayScreen() {
        var div = document.getElementById('polygonId');
        div.style.opacity = 0;
        setTimeout(function () {
            div.style.display = 'none';
        }, 250);
        var div2 = document.getElementById('pt_triggerId');
        setTimeout(function () {
            div2.style.opacity = 1;
        }, 250);
        div2.style.display = 'block';
        if (isOpen === 1) {
            isOpen++;
            window.ipcRenderer.invoke('open-win', 'display', { id: 1 });
        }
    }
    function closeDisplayScreen() {
        if (isOpen === 2) {
            isOpen--;
            window.ipcRenderer.send("close", 1)
        }
    }
    function exit() {
        window.ipcRenderer.send("exit",)
    }

主要是通过
window.ipcRenderer.send(“close”, 1)
这段发送给到主进程，其中“close”是名称，主进程中会有监听接收广播名为这个的信息， 1 就是广播携带的数据。

上下翻页功能

功能实现代码

$iterateUp.on("click", function () {
      // nextPage(2);
      window.ipcRenderer.send("ctrl-signal", {
        date: dayjs().format("YYYY-MM-DD HH:mm:ss"),
        project: 2,
      });
    });

这个消息还是先发送给main主线程，再由主线程广播出去，然今后由大屏展示代码捕捉到
大屏展示主要代码：

window.ipcRenderer.on('ctrl-signal', (event, arg) => {
            // 在这里处理接收到的 arg 数据
            project = arg.project;
            console.log(project);
            
            // let projectData = getListByProjectName(project)
            // let htmlTable = jsonToHtmlTable(projectData);
            // let tableContainer = document.getElementById("echart4");
            // tableContainer.innerHTML = htmlTable;
            if (project === 1){
                PageButton(1);
            }else{
                nextPageButton(2);
            }
        });

然后执行你想执行的任务。

综上就完成了整个过程。
简单的放一个展示效果：
需要放视频比较麻烦以后有机会再放吧。