#
luxiaotao1123
2022-08-19 162eca31378c749b8f70c32ce2ed988b1101e881
views/index.html
@@ -9,35 +9,146 @@
    <link rel="stylesheet" href="../static/css/index.css">
    <link rel="stylesheet" href="../static/css/loader.css" media="all">
    <script type="text/javascript" src="../static/js/lib/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="../static/js/lib/echarts.min.js"></script>
    <script type="text/javascript" src="../static/js/utils.js"></script>
    <script type="text/javascript" src="../static/js/common.js"></script>
    <script type="text/javascript" src="../static/js/data/Asrs.js"></script>
    <script type="text/javascript" src="../static/js/utils.js"></script>
    <script type="text/javascript" src="../static/js/lib/echarts.min.js"></script>
    <script type="text/javascript" src="../static/js/data/BuildingData.js"></script>
    <script type="text/javascript" src="../static/js/data/ConveyData.js"></script>
    <script type="text/javascript" src="../static/js/object/Cube.js"></script>
    <script type="text/javascript" src="../static/js/object/StoreArea.js"></script>
    <script type="text/javascript" src="../static/js/object/Store.js"></script>
    <script type="text/javascript" src="../static/js/object/StoreGroup.js"></script>
    <script type="text/javascript" src="../static/js/object/StoreGoods.js"></script>
    <script type="text/javascript" src="../static/js/object/Route.js"></script>
    <script type="text/javascript" src="../static/js/object/CrnTask.js"></script>
    <script type="text/javascript" src="../static/js/object/Floor.js"></script>
    <script type="text/javascript" src="../static/js/lib/btnHide.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html {
            height: 100%;
        }
        body {
            height: 100%;
        }
    </style>
    <script type="text/javascript" src="../static/js/object/ObjectSelect.js"></script>
    <script type="text/javascript" src="../static/js/utils/DataShow.js"></script>
</head>
<body>
<div id="label"></div>
<!-- 控制面板 -->
<div id="sidebar">
    <button id="sidebar-btn" onclick="sidebar()">展示</button>
    <div class="sidebar-contain" >
        <div class="sidebar-header">
            <div class="t">中扬立库</div>
            <div class="i">Zoneyung Intelligent Three-Dimensional Warehouse</div>
        </div>
        <div class="sidebar-main">
            <!-- 任务 -->
            <div class="task-box">
                <div class="task-title">
                    出库作业
                </div>
                <div class="task-rbl">
                    <select class="task-select">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="2">3</option>
                        <option value="2">4</option>
                        <option value="2">5</option>
                        <option value="2">6</option>
                        <option value="2">7</option>
                        <option value="2">8</option>
                        <option value="2">9</option>
                        <option value="1">10</option>
                        <option value="1">11</option>
                        <option value="2">12</option>
                        <option value="2">13</option>
                        <option value="2">14</option>
                        <option value="2">15</option>
                        <option value="2">16</option>
                        <option value="2">17</option>
                        <option value="2">18</option>
                        <option value="2">19</option>
                    </select>
                    <select class="task-select">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="2">3</option>
                        <option value="2">4</option>
                        <option value="2">5</option>
                        <option value="2">6</option>
                        <option value="2">7</option>
                        <option value="2">8</option>
                        <option value="2">9</option>
                        <option value="1">10</option>
                        <option value="1">11</option>
                        <option value="2">12</option>
                        <option value="2">13</option>
                        <option value="2">14</option>
                        <option value="2">15</option>
                        <option value="2">16</option>
                        <option value="2">17</option>
                        <option value="2">18</option>
                        <option value="2">19</option>
                    </select>
                    <select class="task-select">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="2">3</option>
                        <option value="2">4</option>
                        <option value="2">5</option>
                        <option value="2">6</option>
                        <option value="2">7</option>
                        <option value="2">8</option>
                        <option value="2">9</option>
                        <option value="1">10</option>
                        <option value="1">11</option>
                        <option value="2">12</option>
                        <option value="2">13</option>
                        <option value="2">14</option>
                        <option value="2">15</option>
                        <option value="2">16</option>
                        <option value="2">17</option>
                        <option value="2">18</option>
                        <option value="2">19</option>
                    </select>
                </div>
                <div class="task-confirm">
                </div>
            </div>
            <!-- 报表 -->
            <div class="charts-box">
                <!-- 表 1 -->
                <div id="io-chart"></div>
                <!-- 表 2 -->
                <div class="io-msg">
                    <div class="tbl-header">
                        <table border="0" cellspacing="0" cellpadding="0" >
                            <thead>
                                <tr>
                                    <th>设备类型</th>
                                    <th>编号</th>
                                    <th>报文数据</th>
                                    <th>时间</th>
                                </tr>
                            </thead>
                            <tbody style="opacity:0;" ></tbody>
                        </table>
                    </div>
                    <div class="tbl-body">
                        <table border="0" cellspacing="0" cellpadding="0">
                            <thead>
                                <tr>
                                    <th>设备类型</th>
                                    <th>编号</th>
                                    <th>报文数据</th>
                                    <th>时间</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="mask" class="mask"></div>
<div id="title-box" class="title-box">
@@ -70,9 +181,23 @@
    </div>
    <div id="control-remind" class="remind">您现在可以自由移动视角</div>
</div>
<ul class="menu" id="menu">
    <li id="menu-w">
        <div><div>主</div></div>
    </li>
    <li id="menu-m">
        <div><div>左</div></div>
    </li>
    <li id="menu-t">
        <div><div>俯</div></div>
    </li>
    <li id="menu-b">
        <div><div>返</div></div>
    </li>
</ul>
<div id="container"></div>
<script type="text/javascript" src="../static/js/data/sidebar.js"></script>
</body>
<script type="module">
@@ -87,19 +212,33 @@
    document.getElementById("btn-lock").addEventListener('click', function () {
        player.lockControl();
        removeClass(document.getElementById("ship-info-btn"), "show");
        removeClass(document.getElementById("title-box"), "show");
        document.getElementById("ship-type-ul").style.transform = 'translateY(-60px)';
    }, false);
    document.getElementById("menu-w").addEventListener('click', function () {
        player.mainView();
    }, false);
    document.getElementById("menu-m").addEventListener('click', function () {
        player.leftView();
    }, false);
    document.getElementById("menu-t").addEventListener('click', function () {
        player.verticalView();
    }, false);
    document.getElementById("menu-b").addEventListener('click', function () {
        player.backlView();
    }, false);
</script>
<script>
<script type="text/javascript">
    var percent = 0;
    var shipInfoBtn = document.getElementById("ship-info-btn");
    var speedDom = document.getElementById("speed");
    var timer = setInterval(function () {
        if (percent < 100.00) {
            percent += 0.02;
            // percent += 1;
            // percent += 0.04;
            percent += 1;
            speedDom.innerText = percent.toFixed(2);
        } else {
            speedDom.innerText = '100.00';
@@ -111,14 +250,22 @@
    }, 1);
    $(document).on('click','.btn-word', function () {
        fullScreen()
        $("#mask").fadeOut(1, function () {
        fullScreen();
        $("#mask").fadeOut(1, function () {  // 3000
            $("#menu").addClass("show");
            setTimeout(function () {
                $("#ship-type-ul").css("transform", "translateY(-40px)");
                $("#ship-info-btn .btn-word").text("体验调度世界");
                $("#ship-info-btn").data("type", 2).addClass("show");
                $("#ship-info-btn #btn-lock").css("z-index", "10");
            }, 1);
                if (window.screen.width > 600) {
                    $("#ship-info-btn .btn-word").text("体验调度世界");
                    $("#ship-info-btn").data("type", 2).addClass("show");
                    $("#ship-info-btn #btn-lock").css("z-index", "10");
                    $('#sidebar-btn').show();
                }
                $("#menu li").css("transition", "all 200ms !important");
                setTimeout(function () {
                    removeClass(document.getElementById("title-box"), "show");
                }, 5000);
            }, 1);   // 1000
        });
        $("#title-box, #logo").addClass("show");
        $("#ship-info-btn").removeClass("show");
@@ -126,5 +273,20 @@
        $("#ship-type-ul").css("transform", "translateY(-20px)");
    });
    // 开始模拟
    $(document).on('click','.task-confirm', function () {
        $.ajax({
            // url: 'http://47.97.1.152:58080/jkwcs/three/start',
            url: 'http://localhost:9090/jkwcs/three/start',
            type: "GET",
            data: {},
            success: function (res) {
                if (res.code !== 200) {
                    alert(res.msg);
                }
            }
        })
    })
</script>
</html>