lxb
/
xs_imcs-code-platform


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260
							<!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: 2.5em;
            line-height: 80px;
            color: #fff;
        }
        #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="header_nav fl t_title">
            服务平台大数据中心
        </div>
    </div>
</div>

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

    <div class="data_bottom">
        <!--<div class="bottom_1 fl t_btn5" style="cursor: pointer;">
            <div class="t_line_box">
                <i class="t_l_line"></i>
                <i class="l_t_line"></i>
            </div>
            <div class="t_line_box">
                <i class="t_r_line"></i>
                <i class="r_t_line"></i>
            </div>
            <div class="t_line_box">
                <i class="l_b_line"></i>
                <i class="b_l_line"></i>
            </div>
            <div class="t_line_box">
                <i class="r_b_line"></i>
                <i class="b_r_line"></i>
            </div>
            <div class="main_title">
                <img src="../picture/t_7.png" alt="">
                农村电商交易概况
            </div>

            <div class="main_table t_btn8">
                <img src="../picture/jichuang.jpg">
                <table>
                    <thead>
                    <tr>
                        <th>设备状态</th>
                        <th>空闲</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>设备名称</td>
                        <td>设备名称</td>
                    </tr>
                    <tr>
                        <td>型号</td>
                        <td>型号</td>
                    </tr>
                    <tr>
                        <td>主轴转速</td>
                        <td>12000</td>
                    </tr>
                    <tr>
                        <td>主轴倍率</td>
                        <td>12000</td>
                    </tr>
                    <tr>
                        <td>进给速度</td>
                        <td>12000</td>
                    </tr>
                    <tr>
                        <td>进给倍率</td>
                        <td>12000</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>-->
    </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;
    function init(){
        callAPI();
        // 首次调用函数开始刷新
        refreshPage();
    }
    function refreshPage() {
        setTimeout(function() {
            location.reload(true); // 重新加载页面，参数为 true 表示强制从服务器重新加载
            callAPI();
        }, 10000); // 设置10秒钟的定时器
    }


    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;

                // 循环遍历设备信息数组
                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+`.jpg" ">
                      <table>
                                <thead>
                                <tr>
                                    <th>设备状态</th>
                                    <th>${device.deviceState}</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>设备厂家</td>
                                    <td>${device.factory? device.factory : '未知'}</td>
                                </tr>
                                <tr>
                                    <td>型号</td>
                                    <td>${device.deviceModel? device.deviceModel : '未知'}</td>
                                </tr>
                                    <td>主程序号</td>
                                    <td>${device.mainProg}</td>
                                </tr>
                                <tr>
                                    <td>主轴转速</td>
                                    <td>${device.actSpindle}</td>
                                </tr>
                                <tr>
                                    <td>主轴倍率</td>
                                    <td>${device.spindleMagnification}</td>
                                </tr>

                                <tr>
                                    <td>进给速度</td>
                                    <td>${device.actFeed}</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();

                        // 发送新的请求
                        /*$.ajax({
                            url: "/admin/page/crudQuery/deviceDetail",
                            type: "POST",
                            contentType: "application/json",
                            dataType: "JSON",
                            data: JSON.stringify(detailRequestData),
                            success: function(detailResp) {
                                // 成功返回数据后，渲染新页面
                                renderDetailPage(detailResp);
                            }
                        });*/
                    });
                });


            }
        });
    }

    init();

</script>


</html>