自动化立库仓库-WCS系统
blame | 历史 | 补丁 | 提交 | 提交对比 | ignore whitespace
#
vincent
2020-05-30 7ce087fd752a1f0222a5b49865091136f758da5d 
 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,119 @@


    <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;


        }


        /* 分割线 */


        .header-hr {


            border-radius: 5px;


            border: 1px solid #777;


            width: 80%;


            position: absolute;


            bottom: 0;


        }


        /* 系统运行状态 */


        .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 {


            float: left;


            width: 70%;


            text-align: center;


        }


        .data-window h1 {


            font-size: 3em;


            margin: 0;


            letter-spacing: 1px;


            font-weight: inherit;


        }




        /* 颜色提示 */


        .tips {


            position: absolute;


            bottom: 5%;


            left: 10%;


        }


        .tips-item {


            margin-bottom: 0;


            font-size: 0;


            text-align: left;


        }


        .tips-item label {


            display: inline-block;


            width: 130px;


            text-align: right;


            font-size: xx-small;


        }


        .item-group {


            display: inline-block;


        }


        .item-group span {


            font-size: xx-small;


            padding: 0 10px;


        }


    </style>


</head>


<body>


<header>


    <span>描述信息</span>


    <!-- 系统运行状态 -->


    <div class="system-state">


        <div class="system-icon"></div>


        <span>系统运行中...</span>


    </div>




    <!-- 信息展示 -->


    <div class="data-window">


        <!-- 标题 -->


        <h1>自动仓库&nbsp;WCS&nbsp;监控图</h1>




        <!-- 颜色提示 -->


        <div class="tips">


            <div class="tips-item">


                <label>堆垛机状态颜色:&nbsp;</label>


                <div class="item-group">


                    <span class="machine-put">入库</span>


                    <span class="machine-take">出库</span>


                    <span class="machine-stock-move">库到库</span>


                    <span class="machine-site-move">站到站</span>


                    <span class="machine-p-move">PToP</span>


                    <span class="machine-error">异常</span>


                    <span class="machine-auto">自动</span>


                    <span class="machine-unauto">非自动/手动</span>


                </div>


            </div>


            <div class="tips-item">


                <label>输送设备状态颜色:&nbsp;</label>


                <div class="item-group">


                    <span class="site-auto-run-id">自动+有物+ID</span>


                    <span class="site-auto-run">自动+有物</span>


                    <span class="site-auto-id">自动+ID</span>


                    <span class="site-auto">自动</span>


                    <span class="site-unauto">非自动/手动</span>


                </div>


            </div>


        </div>


    </div>




    <!--分割线-->


    <hr class="header-hr">


</header>


<main>




@@ -38,7 +146,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 +205,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 +237,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 +275,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 +307,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 +344,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 +376,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 +414,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,22 +446,18 @@


            <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>




    <!-- 右输送线 -->


    <input id="val" type="text">


    <button id="animate">animate</button>


    <!--<input id="val" type="text">-->


    <!--<button id="animate">animate</button>-->


</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 +486,7 @@


        layer.open({


            type: 1,


            shadeClose: true, //点击遮罩关闭层


            content: $("#msg")


            content: 'text'


        });


    })