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


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


        }




        /* 堆垛机状态 */


        .crn-state-group {


            text-align: left;


            font-size: 12px;


        }


        .crn-label {


            float: left;


            width: 20%;


            text-align: right;


            margin-bottom: 5px;


            font-size: 13px;


        }


        .crn-state {


            display: inline-block;


            width: 50px;


            text-align: center;


        }


        /* 站点状态 */


        .site-label {


            width: 20%;


            text-align: right;


            margin-bottom: 5px;


            font-size: 13px;


        }


        .site-state-group {


            display: inline-block;


            text-align: left;


        }


        .site-state-group .site {


            float: left;


            height: 22px;


            width: auto;


            padding: 0 10px;


            border: none;


        }




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


            <label class="crn-label">堆垛机状态颜色:</label>


            <div class="crn-state-group">


                <span class="crn-state" style="background-color: #21ff3a">自动</span>


                <span class="crn-state" style="background-color: red">异常</span>


            </div>


        </div>




        <div>


            <label class="site-label">输送设备状态颜色:</label>


            <div class="site-state-group">


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


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


            </div>


        </div>




    </div>




    <!--分割线-->


    <hr class="header-hr">


</header>


<main>




@@ -38,7 +147,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 +206,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 +238,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 +276,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 +308,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 +345,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 +377,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 +415,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 +447,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 +461,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 +489,7 @@


        layer.open({


            type: 1,


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


            content: $("#msg")


            content: 'text'


        });


    })