lxb
/
xs_imcs-code-platform


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>兴胜机械数字化车间</title>
    <link href="../css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/index.css">

    <style>
        .t_title{
            width: 100%;
            height: 100%;
            text-align: center;
            font-size: 3.8em;
            line-height: 80px;
            color: #fff;
            background: -webkit-linear-gradient(top, #4e72b8, #FFF);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        #chart_map{
            cursor: pointer;
        }
        .t_show{
            position: absolute;
            top: 0;
            right: 0;
            border-radius: 2px;
            background: #2C58A6;
            padding: 2px 5px;
            color: #fff;
            cursor: pointer;
        }
    </style>
</head>
<body>

<!--header-->
<div class="header">
    <div class="bg_header">
        <div class="temp">
            <span id="temp"></span>
            <img style="top: -8%;position: absolute;" src="../images/icons8-温度-64.png">
        </div>
        <div class="hum">
            <span id="hum"></span>
            <img style="top: -8%;position: absolute;    margin-left: 16%;" src="../images/icons8-湿度-60.png">
        </div>
        <div onclick="fullScreen()">
            <img class="fullScreen" src="../images/icons8-全屏-50.png">
        </div>
        <div class="header_nav fl t_title">
            兴胜机械数字化车间
        </div>
    </div>
</div>

<!--main-->
<div class="data_content" style="height: 100vh;">

    <div class="data_bottom">
    </div>

</div>
</body>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/common.js"></script>
<script src="../js/echarts.min.js"></script>
<script src="../js/datatool.js"></script>
<!-- <script src="scripts/china.js"></script> -->
<script src="../js/guangxi.js"></script>

<script type="text/javascript">
    // 假设设备信息的容器元素是一个 <div> 标签，并具有类名 "data_bottom"
    const container = document.querySelector('.data_bottom');
    var requestData;
    let shouldRefresh = true; // 一个标志，用于确定页面是否应该刷新
    function init(){

        callAPI();
        // 首次调用函数开始刷新
        setInterval(function() {
            refreshPage();
        }, 10000); // 设置10秒钟的定时器
    }
    function refreshPage() {
            $.ajax({
                url: "/bigScreen/getRefresh",
                type: "GET", // 指定请求类型为 POST
                dataType: "JSON",
                success: function (resp) {
                    if(resp.data ||resp.data == null){
                        location.reload(true); // 重新加载页面，参数为 true 表示强制从服务器重新加载
                    }
                },
                error: function (error) {
                    console.error("发生错误：", error);
                }
            });
    }


    function callAPI() {
        requestData = {
            // 根据你的后端要求构建 PageParam 对象
            pageParam: {
                // 可能需要添加具体的属性值，比如 pageSize, pageNumber 等等
                "openPage": "NO"
            }
        };

        $.ajax({
            url:"/admin/page/crudQuery/aDevice",
            type: "POST", // 指定请求类型为 POST
            contentType: "application/json", // 设置请求的内容类型为 JSON
            dataType: "JSON",
            data: JSON.stringify(requestData), // 将请求数据转换为 JSON 字符串
            success:function(resp){


                // 获取接口返回的设备信息数组
                const devices = resp.data.rows;
                var temp=devices[0].temp;
                var hum=devices[0].hum;
                $('#temp').text(temp);
                $('#hum').text(hum);
                // 循环遍历设备信息数组
                devices.forEach(device => {
                    // 创建一个新的 div 元素用于展示设备信息
                    const newDeviceDiv = document.createElement('div');
                    newDeviceDiv.classList.add('bottom_1', 'fl', 't_btn5');

                    // 构建设备信息的 HTML 结构
                    newDeviceDiv.innerHTML = `
                    <div class="main_title">
                      <img src="../picture/t_7.png" alt="">
                      ${device.deviceName ? device.deviceName : '未知'}
                    </div>
                    <div class="main_table t_btn8" id=\"${device.id}\">
                      <img src="../picture/device/`+device.deviceModel+`.png" ">
                      <table>
                                <thead>
                                <tr>
                                    <th style="color: ${device.deviceState === '在线' ? 'green' : 'red'};">${device.deviceState}</th>
                                    <th style="color: ${device.deviceWorkState === '加工' ? '' : 'orange'};">${device.deviceWorkState == null ? '' : device.deviceWorkState}</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>主程序号</td>
                                    <td>${(device.mainProg !== null && device.mainProg !== undefined && device.mainProg !== 'NaN' && device.mainProg !== '') ? device.mainProg : ''}</td>
                                </tr>
                                <tr>
                                    <td>主轴转速</td>
                                    <td>${(device.actSpindle !== null && device.actSpindle !== undefined && device.actSpindle !== 'NaN' && device.actSpindle !== '') ? device.actSpindle : '0'}</td>
                                </tr>
                                <tr>
                                    <td>主轴倍率</td>
                                    <td>${(device.spindleMagnification !== null && device.spindleMagnification !== undefined && device.spindleMagnification !== 'NaN' && device.spindleMagnification !== '') ? device.spindleMagnification + '%' : '0'}</td>
                                </tr>

                                <tr>
                                    <td>进给速度</td>
                                    <td>${(device.actFeed !== null && device.actFeed !== undefined && device.actFeed !== 'NaN' && device.actFeed !== '') ? device.actFeed : '0'}</td>
                                </tr>
                                <tr>
                                    <td>进给倍率</td>
                                    <td>${(device.feedRateOvr !== null && device.feedRateOvr !== undefined && device.feedRateOvr !== 'NaN' && device.feedRateOvr !== '') ? device.feedRateOvr + '%' : '0'}</td>
                                </tr>
                                </tbody>
                            </table>
                    </div>
                  `;

                    // 将创建的设备信息 div 添加到容器中
                    container.appendChild(newDeviceDiv);


                    const deviceContainer = document.getElementById(device.id);
                    deviceContainer.addEventListener('click', function() {

                        // 点击事件触发时，构建新的请求数据
                        var detailRequestData = {
                            deviceId: device.id  // 假设接口需要的参数是 deviceId
                        };

                        const id = device.id; // 假设设备元素的 ID 存储在 data-id 属性中

                        // 动态创建链接并跳转
                        const link = document.createElement('a');
                        link.href = '/admin/bigScreenDetail/index.html?id=' + encodeURIComponent(id);
                        /*link.target = '_blank'; // 设置链接在新标签页中打开*/
                        document.body.appendChild(link);
                        link.click();

                    });
                });


            }
        });
    }
    function fullScreen() {
        const element = document.documentElement; // 获取整个页面元素
        if (!document.fullscreenElement) {
            // 如果当前不是全屏状态，则请求全屏
            if (element.requestFullscreen) {
                element.requestFullscreen();
            } else if (element.webkitRequestFullscreen) {
                // 兼容性处理，针对某些浏览器
                element.webkitRequestFullscreen();
            } else if (element.msRequestFullscreen) {
                // 兼容性处理，针对IE浏览器
                element.msRequestFullscreen();
            }
        } else {
            // 如果当前是全屏状态，则退出全屏
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.webkitExitFullscreen) {
                // 兼容性处理，针对某些浏览器
                document.webkitExitFullscreen();
            } else if (document.msExitFullscreen) {
                // 兼容性处理，针对IE浏览器
                document.msExitFullscreen();
            }
        }
    }
    init();

</script>


</html>