1
2025-10-31 a84e04a54fa499bcff8c9806df5c15e09ce3c504
src/main/webapp/views/console.html
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta charset="UTF-8" >
    <title>自动仓库wcs系统</title>
    <link rel="stylesheet" href="../static/css/render.css">
    <script src="../static/js/jquery/jquery-3.3.1.min.js"></script>
@@ -10,8 +10,6 @@
    <script src="../static/js/console.map.js"></script>
    <script src="../static/js/console.js"></script>
    <script src="../static/js/common.js"></script>
</head>
<body>
    <div id="main">
@@ -19,6 +17,7 @@
            <div class="head-left">
                <h1>自动仓库WCS监控图</h1>
                <h6>AUTOMATIC WAREHOUSE WCS MONITORING DIAGRAM</h6>
                <button class="zoom-btn" id="zoomBtn">缩小网页比例</button>
            </div>
            <div class="head-right">
                <img src="../static/images/zy-logo.png" alt="中扬" height="44" width="80">
@@ -327,6 +326,7 @@
        </div>
    </div>
</body>
</html>
@@ -344,7 +344,7 @@
            url: baseUrl + '/console/barcode/output/site',
            method: 'GET',
            success: function (res) {
                console.log(res)
                // console.log(res)
                if (res.code === 200) {
                    tData = eval(res.data);
                    if (tData.length <= 5) {
@@ -385,12 +385,11 @@
</script>
<script type="text/javascript">
    // 弹窗站点信息
    $('.site').on('click', function () {
    $(document).on('click', '.site' ,function () {
        var id = this.id.split("-")[1];
        $("#siteWindow").attr("style", "display:block;");//显示div
        $("#crnWindow").attr("style", "display:none;");
        $(".detailed").empty();
        $('.detailed').append(id + '站点详细信息');
        $("#siteWindow").css("display", "block");//显示div
        $("#crnWindow").css("display", "none");
        $(".detailed").empty().append(id + '站点详细信息');
        $.ajax({
            url: baseUrl + "/console/site/detail",
            headers: {
@@ -406,7 +405,7 @@
                    if (find[0].type === 'text') {
                        find.val(res.data[val]);
                    } else if (find[0].type === 'checkbox') {
                        find.attr("checked", res.data[val] === 'Y');
                        find.prop("checked", res.data[val] === 'Y');
                    }
                }
            }
@@ -415,32 +414,27 @@
    });
    // 堆垛机信息
    $('.machine').on('click', function () {
    $(document).on('click', '.machine',function () {
        var id = this.id.split("-")[1];
        $("#crnWindow").attr('style', 'display:block;');
        $("#siteWindow").attr("style", "display:none;");
        $('.detailed').empty();
        $('.detailed').append(id + '号堆垛机');
        $("#crnWindow").css("display","block");
        $("#siteWindow").css("display","none");
        $(".detailed").empty().append(id + '号堆垛机');
        $.ajax({
            url: baseUrl + "/console/crn/detail",
            headers: {
                'token': localStorage.getItem('token')
            },
            data: {
                crnNo: id
            },
            headers: {'token': localStorage.getItem('token')},
            data: {crnNo: id},
            method: 'post',
            success: function (res) {
                for (var val in res.data) {
                    var find = $("#crnWindow").find(":input[name='" + val + "']");
                    if (find[0].type === 'text') {
                for(var val in res.data){
                    var find = $("#crnWindow").find(":input[name='"+ val + "']");
                    if(find[0].type === 'text'){
                        find.val(res.data[val]);
                    } else if (find[0].type === 'checkbox') {
                        find.attr("checked", res.data[val] === 'Y');
                    }else if (find[0].type === 'checkbox'){
                        find.prop("checked", res.data[val] === 'Y')
                    }
                }
            }
            }
        })
    })
@@ -550,7 +544,7 @@
        });
    }
    // 输送设备实时数据获取
    // 输送设备实时数据获取csxit
    function getSitesInfo() {
        $.ajax({
            url: baseUrl + "/console/latest/data/site",
@@ -568,7 +562,7 @@
                            siteEl.html(sites[i].siteId);
                        }
                        if (sites[i].siteId === '1' || sites[i].siteId === '2') {
                        if (sites[i].siteId === '1' || sites[i].siteId === '2' || sites[i].siteId === '3'|| sites[i].siteId === '4') {
                            carAnimate(Number(sites[i].siteId), Number(sites[i].nearbySta));
                        }
@@ -602,30 +596,14 @@
                        }
                        // crnEl.animate({left: (crns[i].bay * unit) + 'px'}, 1000);
                        // crns[i].bay = 15;
                        var offSet = 0;
                        switch (i) {
                            case 0:
                            case 1:
                            case 2:
                            case 3:
                                unit = 35;
                                offSet = 500;
                                break;
                            case 5:
                                unit = 124;
                                offSet = 550;
                                break;
                            case 4:
                            case 6:
                                unit = 62;
                                offSet = 550;
                                break;
                        }
                        var offSet = 120;
                        unit = 15;
                        if(crns[i].bay === 1){
                            crnEl.animate({left: offSet + 'px'}, 1000);
                            crnEl.animate({left: offSet + 'px'}, 10);
                        } else {
                            crnEl.animate({left: (offSet - unit + (crns[i].bay * unit)) + 'px'}, 1000);
                            crnEl.animate({left: (offSet - unit + (crns[i].bay * unit)) + 'px'}, 10);
                        }
                    }
@@ -648,7 +626,7 @@
                if (res.code === 200) {
                    var barcodes = res.data;
                    for (var i = 0; i < barcodes.length; i++) {
                        $("#code-decoder-data-" + barcodes[i].barcodeId).html(barcodes[i].codeValue);
                        $("#barcode-"+barcodes[i].barcodeId).html(barcodes[i].codeValue ? barcodes[i].codeValue : "--");
                    }
                } else if (res.code === 403) {
                    parent.location.href = baseUrl + "/login";
@@ -715,43 +693,67 @@
    function carAnimate(id, target) {
        // debugger
        var targetTop = 0;
        if (id === 1 || id === '1' || id === '2' || id === 2) {
        if (id === 1 || id === '1' || id === '2' || id === 2 || id === '3' || id === 3 ||id === '4' || id === 4) {
            switch (target) {
                case 1:
                    targetTop += 792;
                case 1004:
                    targetTop += 84;
                    break;
                case 2:
                    targetTop += 771;
                case 1007:
                    targetTop += 128;
                    break;
                case 3:
                    targetTop += 727;
                    break;
                case 4:
                    targetTop += 706;
                    break;
                case 5:
                    targetTop += 662;
                    break;
                case 6:
                    targetTop += 620;
                    break;
                case 7:
                    targetTop += 578;
                    break;
                case 8:
                    targetTop += 530;
                    break;
                case 9:
                case 1010:
                    targetTop += 190;
                    break;
                case 10:
                    targetTop += 147;
                case 1014:
                    targetTop += 240;
                    break;
                case 11:
                    targetTop += 107;
                case 1018:
                    targetTop += 300;
                    break;
                case 12:
                    targetTop += 63;
                case 1021:
                    targetTop += 350;
                    break;
                case 1024:
                    targetTop += 415;
                    break;
                case 1028:
                    targetTop += 465;
                    break;
                case 1031:
                    targetTop += 530;
                    break;
                case 1035:
                    targetTop += 580;
                    break;
                case 2003:
                    targetTop += 84;
                    break;
                case 2006:
                    targetTop += 128;
                    break;
                case 2009:
                    targetTop += 19.;
                    break;
                case 2012:
                    targetTop += 240;
                    break;
                case 2015:
                    targetTop += 300;
                    break;
                case 2018:
                    targetTop += 350;
                    break;
                case 2021:
                    targetTop += 415;
                    break;
                case 2024:
                    targetTop += 465;
                    break;
                case 2027:
                    targetTop += 530;
                    break;
                case 2030:
                    targetTop += 580;
                    break;
                default:
                    return;
@@ -760,8 +762,56 @@
            return;
        }
        $("#site-" + id).animate({top: targetTop + 'px'}, 1000);
        $("#site-" + id).animate({top: targetTop + 'px'}, 0);
    }
    // 检查 URL 中是否包含 fullscreen=true 参数
    function checkFullscreen() {
        const urlParams = new URLSearchParams(window.location.search);
        const fullscreen = urlParams.get('fullscreen');
        if (fullscreen === 'true') {
            enterFullscreen();
        }
    }
    // 进入全屏模式
    function enterFullscreen() {
        if (!document.fullscreenElement) {
            if (document.documentElement.requestFullscreen) {
                document.documentElement.requestFullscreen();
            } else if (document.documentElement.mozRequestFullScreen) { // Firefox
                document.documentElement.mozRequestFullScreen();
            } else if (document.documentElement.webkitRequestFullscreen) { // Chrome, Safari, Opera
                document.documentElement.webkitRequestFullscreen();
            } else if (document.documentElement.msRequestFullscreen) { // IE/Edge
                document.documentElement.msRequestFullscreen();
            }
        }
    }
    // 按钮点击事件,触发缩放
    document.getElementById('zoomBtn').addEventListener('click', function() {
        simulateCtrlWheelZoomOut();
    });
    // 模拟 Ctrl + 滚轮下滑来缩小网页
    function simulateCtrlWheelZoomOut() {
        let scale = 1;  // 默认缩放比例
        // 获取当前页面的缩放比例
        let currentScale = window.getComputedStyle(document.body).transform;
        if (currentScale !== 'none') {
            scale = parseFloat(currentScale.match(/matrix\((.*)\)/)[1].split(',')[0]);
        }
        // 计算新的缩放比例,模拟缩小
        let newScale = scale * 0.9; // 每次点击缩小10%
        // 应用新的缩放比例
        document.body.style.transform = 'scale(' + newScale + ')';
        document.body.style.transformOrigin = 'top left';  // 设置缩放原点
    }
</script>