#
vincent
2020-05-30 5de76af00f69a66f60263046aacde1bcbc8c86b9
src/main/webapp/views/console.html
@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<!--5层 28列 1120库位-->
<head>
    <meta charset="UTF-8">
    <title>WCS控制中心</title>
@@ -12,12 +13,105 @@
    <script type="text/javascript" src="../static/js/jquery/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="../static/js/layer/layer.js"></script>
    <style>
        header {
            height: 20%;
            opacity: 0.8;
            position: relative;
        }
        /* 系统运行状态 */
        .system-state {
            float: left;
            margin-left: 30px;
            margin-top: 30px;
            text-align: center;
            color: #2d6aff;
        }
        .system-icon {
            width: 100px;
            height: 100px;
            background-image: url("../static/image/stop48.png");
            background-repeat: no-repeat;
            background-size:100% 100%;
            background-position: top center;
            cursor: pointer;
        }
        /* 状态显示 */
        .data-window {
            width: 70%;
            text-align: center;
        }
        .data-window h1 {
            font-size: 3em;
            margin: 0;
            letter-spacing: 1px;
            font-weight: inherit;
        }
        .crn-label, .site-label {
            display: inline-block;
            width: 15%;
            text-align: right;
            margin-bottom: 5px;
            font-size: 13px;
        }
        /* 堆垛机状态 */
        .crn-state-group {
            text-align: left;
        }
        .crn-state {
            display: inline-block;
            width: 50px;
            text-align: center;
        }
        /* 站点状态 */
        .site-state-group {
            text-align: left;
        }
        .site-state {
            display: inline-block;
            width: 50px;
            text-align: center;
        }
        /* 分割线 */
        .header-hr {
            border-radius: 5px;
            border: 1px solid #777;
            width: 80%;
            position: absolute;
            bottom: 0;
        }
    </style>
</head>
<body>
<header>
    <span>描述信息</span>
    <!-- 系统运行状态 -->
    <div class="system-state">
        <div class="system-icon"></div>
        <span>系统运行中...</span>
    </div>
    <!-- 信息展示 -->
    <div class="data-window">
        <h1>自动仓库 WCS 监控图</h1>
        <!--&lt;!&ndash;<div class="crn-state-group">&ndash;&gt;-->
            <!--&lt;!&ndash;<label class="crn-label">堆垛机状态颜色:</label>&ndash;&gt;-->
            <!--&lt;!&ndash;<span class="crn-state" style="background-color: #21ff3a">自动</span>&ndash;&gt;-->
            <!--&lt;!&ndash;<span class="crn-state" style="background-color: red">异常</span>&ndash;&gt;-->
        <!--&lt;!&ndash;</div>&ndash;&gt;-->
        <!--&lt;!&ndash;<div class="site-state-group">&ndash;&gt;-->
            <!--&lt;!&ndash;<label class="site-label">输送设备状态颜色:</label>&ndash;&gt;-->
            <!--&lt;!&ndash;<span class="site-state" style="background-color: #21ff3a;">自动</span>&ndash;&gt;-->
            <!--&lt;!&ndash;<span class="site-state" style="background-color: red;">异常</span>&ndash;&gt;-->
        <!--&lt;!&ndash;</div>&ndash;&gt;-->
    </div>
    <!--分割线-->
    <hr class="header-hr">
</header>
<main>
@@ -38,7 +132,7 @@
    <div class="site-row site-row-2">
        <div id="site-32" class="site" style="width: 80px; height: 50px;line-height: 50px">32</div>
        <div id="site-31" class="site" >31</div>
        <div id="site-30" class="site" style="width: 80px; height: 30px;line-height: 30px">30</div>
        <div id="site-30" class="site" style="width: 80px; height: 30px;line-height: 30px; background-color: red;">30</div>
        <div id="site-23" class="site" >23</div>
        <div id="site-22" class="site" style="width: 80px; height: 50px;line-height: 50px">22</div>
        <div id="site-20" class="site" >20</div>
@@ -97,6 +191,10 @@
            <button class="item">22</button>
            <button class="item">23</button>
            <button class="item">24</button>
            <button class="item">25</button>
            <button class="item">26</button>
            <button class="item">27</button>
            <button class="item">28</button>
            <div class="site site-none">&nbsp;&nbsp;&nbsp;&nbsp;</div>
        </div>
        <div class="stock-group">
@@ -125,6 +223,10 @@
            <button class="item">22</button>
            <button class="item">23</button>
            <button class="item">24</button>
            <button class="item">25</button>
            <button class="item">26</button>
            <button class="item">27</button>
            <button class="item">28</button>
            <div class="site site-none">&nbsp;&nbsp;&nbsp;&nbsp;</div>
        </div>
        <!-- 堆垛机 -->
@@ -159,6 +261,10 @@
            <button class="item">22</button>
            <button class="item">23</button>
            <button class="item">24</button>
            <button class="item">25</button>
            <button class="item">26</button>
            <button class="item">27</button>
            <button class="item">28</button>
            <div class="site site-none">&nbsp;&nbsp;&nbsp;&nbsp;</div>
        </div>
        <div class="stock-group">
@@ -187,6 +293,10 @@
            <button class="item">22</button>
            <button class="item">23</button>
            <button class="item">24</button>
            <button class="item">25</button>
            <button class="item">26</button>
            <button class="item">27</button>
            <button class="item">28</button>
            <div class="site site-none">&nbsp;&nbsp;&nbsp;&nbsp;</div>
        </div>
        <br>
@@ -220,6 +330,10 @@
            <button class="item">22</button>
            <button class="item">23</button>
            <button class="item">24</button>
            <button class="item">25</button>
            <button class="item">26</button>
            <button class="item">27</button>
            <button class="item">28</button>
            <div class="site site-none">&nbsp;&nbsp;&nbsp;&nbsp;</div>
        </div>
        <div class="stock-group">
@@ -248,6 +362,10 @@
            <button class="item">22</button>
            <button class="item">23</button>
            <button class="item">24</button>
            <button class="item">25</button>
            <button class="item">26</button>
            <button class="item">27</button>
            <button class="item">28</button>
            <div class="site site-none">&nbsp;&nbsp;&nbsp;&nbsp;</div>
        </div>
        <!-- 堆垛机 -->
@@ -282,6 +400,10 @@
            <button class="item">22</button>
            <button class="item">23</button>
            <button class="item">24</button>
            <button class="item">25</button>
            <button class="item">26</button>
            <button class="item">27</button>
            <button class="item">28</button>
            <div class="site site-none">&nbsp;&nbsp;&nbsp;&nbsp;</div>
        </div>
        <div class="stock-group">
@@ -310,6 +432,10 @@
            <button class="item">22</button>
            <button class="item">23</button>
            <button class="item">24</button>
            <button class="item">25</button>
            <button class="item">26</button>
            <button class="item">27</button>
            <button class="item">28</button>
            <div class="site site-none">&nbsp;&nbsp;&nbsp;&nbsp;</div>
        </div>
    </div>
@@ -320,12 +446,6 @@
</main>
<!-- 弹出层 -->
<form id="msg" style="display: none">
    <input name="name" type="text">
    <input name="password" type="password">
    <button>确定</button>
</form>
</body>
<script>
    var crn1Position = 0;
@@ -354,7 +474,7 @@
        layer.open({
            type: 1,
            shadeClose: true, //点击遮罩关闭层
            content: $("#msg")
            content: 'text'
        });
    })