#
vincent
2020-05-30 a5c50ff60d14cad5ff27bfcade405c796f9ab0d3
#
2个文件已修改
1个文件已添加
123 ■■■■ 已修改文件
src/main/webapp/static/css/console.css 46 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/main/webapp/static/image/stop48.png 补丁 | 查看 | 原始文档 | blame | 历史
src/main/webapp/views/console.html 77 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/main/webapp/static/css/console.css
@@ -1,18 +1,48 @@
html {
    height: 100%;
}
body {
    height: 100%;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 3px rgba(0,0,0,.3);
}
/* 头部 */
/* ------------------------------------ 头部 ------------------------------------*/
header {
    height: 20%;
    border: 1px solid red;
    text-align: center;
    opacity: 0.8;
    position: relative;
}
/* 主体 */
header h1 {
    margin: 0;
    letter-spacing: 2px;
}
/* 状态显示 */
.machine-state {
    text-align: left;
}
.crn-state-group {
    margin-bottom: 5px;
}
/* 堆垛机状态 */
.crn-state {
    display: inline-block;
    width: 50px;
    text-align: center;
}
/* 站点状态 */
.site-state {
    display: inline-block;
    width: 50px;
    text-align: center;
}
/* ------------------------------------ 主体 ------------------------------------*/
main {
    height: 80%;
    position: relative;
@@ -25,21 +55,21 @@
}
/* 输送线第一列 */
.site-row-1 {
    left: 200px;
    left: 400px;
}
.site-row-1 .site {
    width: 100px;
}
/* 输送线第二列 */
.site-row-2 {
    left: 300px;
    left: 500px;
}
.site-row-2 .site {
    width: 100px;
}
/* 输送线第三列 */
.site-row-3 {
    left: 400px;
    left: 600px;
    width: 100px;
}
.site-row-3 .site {
@@ -48,7 +78,7 @@
}
/* 输送线第四列 */
.site-row-4 {
    left: 500px;
    left: 700px;
    width: 100px;
}
.site-row-4 .site {
@@ -77,7 +107,7 @@
.main-part {
    position: absolute;
    top: 250px;
    left: 400px;
    left: 600px;
}
/* 排号 */
@@ -109,7 +139,7 @@
button.item {
    font-size: 13px;
    padding: 1px 1px 1px 1px;
    width: 20px;
    width: 30px;
    height: 20px;
    outline: none;
    cursor: pointer;
src/main/webapp/static/image/stop48.png
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,46 @@
    <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>
        .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;
        }
    </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>
@@ -97,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">
@@ -125,6 +164,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 +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">
@@ -187,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>
@@ -220,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">
@@ -248,6 +303,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 +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">
@@ -310,6 +373,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 +387,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 +415,7 @@
        layer.open({
            type: 1,
            shadeClose: true, //点击遮罩关闭层
            content: $("#msg")
            content: 'text'
        });
    })