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


@@ -9,84 +10,55 @@


    <link rel="stylesheet" type="text/css" href="../static/css/normalize.css">


    <link rel="stylesheet" type="text/css" href="../static/css/common.css">


    <link rel="stylesheet" type="text/css" href="../static/css/console.css">


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


        /* 站点 */


        .site {


            color: #333;


            height: 20px;


            border: 1px solid #fff;


        .system-state {


            position: absolute;


            top: 40px;


            right: 20px;


        }




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


            width: 50px;


            text-align: center;


            background-color: #21ff3a;


            font-size: 13px;


        }


        /* 无效站点（必须在site下面） */


        .site-none {


            border: none;


            background-color: transparent;


        }




        .main-part {


            position: absolute;


            top: 200px;


            left: 400px;


            /*transform: translate(-50%, 0);*/


        }




        /* --------- 输送线总成 --------- */


        /* 输送线第一列 */


        .site-row-1 {


            position: absolute;


            left: 200px;


            top: 72px;


        }


        .site-row-1 .site {


            width: 100px;


        }


        /* 输送线第二列 */


        .site-row-2 {


            position: absolute;


            left: 300px;


            top: 72px;


        }


        .site-row-2 .site {


            width: 100px;


        }


        /* 输送线第三列 */


        .site-row-3 {


            position: absolute;


            left: 400px;


            top: 72px;


            width: 100px;


        }


        .site-row-3 .site {


            float: left;


            width: 100px;


        }


        /* 输送线第四列 */


        .site-row-4 {


            position: absolute;


            left: 500px;


            top: 72px;


            width: 100px;


        }


        .site-row-4 .site {


            float: right;


            width: 100px;


        }




    </style>


</head>


<body>


<header>


    <span>描述信息</span>


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


    <!-- 状态 -->


    <div class="machine-state">


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


            <span>堆垛机状态:</span>


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


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


        </div>


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


            <span>站点状态:</span>


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


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


        </div>


    </div>


    


    <!-- 系统运行 -->


    <div class="system-state">


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


    </div>


    


</header>


<main>




    <!-- 左输送线 -->


    <!-- 第一列（宽度 100px）-->


    <div class="site-row-1">


    <div class="site-row site-row-1">


        <div id="site-1" class="site" style="width: 80px; height: 50px;line-height: 50px">1[9999]</div>


        <div id="site-2" class="site" >2</div>


        <div id="site-3" class="site" style="width: 80px; height: 30px;line-height: 30px">3</div>


@@ -98,7 +70,7 @@


        <div id="site-9" class="site" >9</div>


    </div>


    <!-- 第二列（宽度 100px） -->


    <div class="site-row-2">


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


@@ -114,15 +86,15 @@


        <div id="site-10" class="site" >10</div>


    </div>


    <!-- 第三列（宽度 100px）-->


    <div class="site-row-3">


    <div class="site-row site-row-3">


        <div class="site-none" style="width: 80px; height: 50px;line-height: 50px"></div>


        <div id="site-29" class="site" style="width: 50px;">29</div>


        <div id="site-28" class="site" style="width: 50px;">28</div>


        <div class="site-none" style="width: 80px; height: 50px;line-height: 30px"></div>


        <div id="site-24" class="site" >24</div>


    </div>


    <!-- 第三列（宽度 100px）-->


    <div class="site-row-4">


    <!-- 第四列（宽度 100px）-->


    <div class="site-row site-row-4">


        <div class="site-none" style="width: 80px; height: 50px;line-height: 50px"></div>


        <div id="site-27" class="site" >27</div>


        <div id="site-26" class="site" style="width: 80px; height: 30px;line-height: 30px">26</div>


@@ -160,6 +132,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">


@@ -188,12 +164,16 @@


            <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="crn">


            <hr class="pathway">


            <div class="machine" style="margin-left: 30px"></div>


            <div id="crn1" class="machine"></div>


        </div>


        <!-- 货架 -->


        <div class="stock-group">


@@ -222,6 +202,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">


@@ -250,6 +234,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>


@@ -283,6 +271,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">


@@ -311,12 +303,16 @@


            <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="crn">


            <hr class="pathway">


            <div class="machine"></div>


            <div id="crn2" class="machine"></div>


        </div>


        <!-- 货架 -->


        <div class="stock-group">


@@ -345,6 +341,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">


@@ -373,11 +373,51 @@


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


</main>






</body>


<script>


    var crn1Position = 0;


    var crn2Position = 0;


    $('#animate').click(function () {


        crnAnimate(1, $('#val').val());


    });




    // 堆垛机偏移动画


    function crnAnimate(id, leftVal) {


        switch (id) {


            case 1:


                $("#crn1").animate({left: leftVal+'px'}, 1000);


                crn1Position = leftVal;


                break;


            case 2:


                $("#crn2").animate({left: leftVal+'px'}, 1000);


                crn2Position = leftVal;


                break;


            default:


                break


        }


    }




    $('.item').on('click', function () {


        layer.open({


            type: 1,


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


            content: 'text'


        });


    })




</script>


</html>