SMANAGE/backup/Manage/T4/Screenshot.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/font.css">
    <link rel="stylesheet" href="/css/xadmin.css">
    <link rel="stylesheet" href="/css/win10ui.css">
    <link rel="stylesheet" href="/css/theme.css">
    <link rel="stylesheet" href="/lib/layui/css/layui.css">
    <link rel="stylesheet" href="/T4/css/task.css">
    <link rel="stylesheet" href="/T4/css/hardware.css">
    <link rel="stylesheet" href="/T4/css/font.css">
    <link rel="stylesheet" href="/T4/css/chart.css">
    <link rel="stylesheet" href="/T4/css/cmd.css">
    <style>
        /* Add this new CSS for fullscreen image */
        .fullscreen-image-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-color: rgba(0, 0, 0, 0.9);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            cursor: zoom-out;
        }
        
        .fullscreen-image {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }
        
        .close-fullscreen {
            position: absolute;
            top: 20px;
            right: 20px;
            color: white;
            font-size: 30px;
            cursor: pointer;
            z-index: 10000;
        }
    </style>
    <script type="text/javascript" src="/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/js/xadmin.js"></script>
    <script src="/assets/js/socket/Socket.IO.js"></script>
    <script src="/assets/js/core/echarts.min.js"></script>

    <script>window.breadcrumbs = [{name: "首页", url: ""},{name: "Termination4", url: ""},{name: "设备Screenshot"}];</script>
    <script src="/js/address.bar.js"></script>
</head>

<body>
    
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">远程二进制查看器</div>
                    <div class="layui-card-body">
                        <!-- 图片展示区域 -->
                        <div class="layui-upload">
                            <div class="layui-form-item">
                                <button type="button" class="layui-btn" id="loadImageBtn">截屏</button>
                                <button type="button" class="layui-btn" id="loadImageURL">外部打开URL</button>
                            </div>
                            <div class="layui-upload-list">
                                <img class="layui-upload-img" id="bytesImageView" style="width: 100%; height: 80vh; object-fit: contain; display: none; cursor: zoom-in;">
                                <p id="demoText"></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Fullscreen image container (hidden by default) -->
    <div id="fullscreenContainer" class="fullscreen-image-container" style="display: none;">
        <span class="close-fullscreen">&times;</span>
        <img id="fullscreenImage" class="fullscreen-image" src="">
    </div>

    <script>
        socket = io("/Termination4SocketIOSpace");
        layui.use(['layer', 'upload', 'jquery'], function() {
            var layer = layui.layer;
            var $ = layui.jquery;
            var upload = layui.upload;
            
            // Function to show image in fullscreen
            function showFullscreenImage(imageUrl) {
                var fullscreenImg = document.getElementById('fullscreenImage');
                var container = document.getElementById('fullscreenContainer');
                
                fullscreenImg.src = imageUrl;
                container.style.display = 'flex';
                
                // Close fullscreen when clicking the container or X button
                container.onclick = function(e) {
                    if (e.target === container || e.target.classList.contains('close-fullscreen')) {
                        container.style.display = 'none';
                    }
                };
            }
            
            // New function: display image from URL
            window.showImageFromUrl = function(imageUrl) {
                try {
                    var imgElement = document.getElementById('bytesImageView');
                    imgElement.src = imageUrl;
                    imgElement.style.display = 'block';
                    
                    // Click to view in fullscreen
                    imgElement.onclick = function() {
                        showFullscreenImage(imageUrl);
                    };
                    
                    return true;
                } catch (e) {
                    console.error('显示图片失败:', e);
                    Toast.error("设备截屏", "显示图片失败，错误："+e.message, 3000);
                    return false;
                }
            };
            
            $('#loadImageBtn').on('click', function() {
                Toast.success("设备截屏", "开始截屏", 3000);
                socket.emit('T4CMDCommand', {PCMachineGUID: PCMachineGUID, 'work': 'Screenshot'});
            });
            
            $('#loadImageURL').on('click', function() {
                var imgUrl = document.getElementById('bytesImageView').src;
                if(imgUrl && imgUrl !== '') {
                    window.open(imgUrl);
                } else {
                    Toast.error("设备截屏", "没用可用的图片连接", 3000);
                }
            });
    
            document.addEventListener('DOMContentLoaded', function() {
                socket.emit('T4CMDCommand', {PCMachineGUID: PCMachineGUID, 'work': 'Screenshot'});
            });
    
            // Modified event listener to handle image URL
            socket.on(PCMachineGUID + 'CMDRScreenshot', (message) => {
                if(message.SSB) {
                    Toast.success("设备截屏", "接收到图片", 3000);
                    var imageUrl = "https://www.gvsds.com/T4/ShowSSB.api?SSB="+message.SSB;
                    showImageFromUrl(imageUrl);
                    
                    // Auto show in fullscreen
                    showFullscreenImage(imageUrl);
                } else {
                    Toast.error("设备截屏", "未收到有效的图片链接", 3000);
                }
            });
        });
    </script>
</body>
</html>