自动化立体仓库 - WCS系统
parent: 5659a9ea | 补丁 | 提交 | ignore whitespace
#
whycq
2023-03-24 f000aa1fea823c92a343a5f3f3e8bc385d06fd34 
#
2个文件已修改
234 ■■■■■ 已修改文件
src/main/webapp/views/monitor.css 86 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/main/webapp/views/monitor.html 148 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 
 src/main/webapp/views/monitor.css


@@ -7,7 +7,7 @@


    height: 5%;


    display: flex;


}


label {


.head label {


    display: flex;


    flex-direction: column;


    align-items: center;


@@ -19,7 +19,7 @@


    color: #FFF;




}


label:active {


.head label:active {


    border-top: 3px solid rgb(239, 177, 102);


    border-right: 1px solid #FFF;


    border-left: 1px solid #FFF;


@@ -30,11 +30,12 @@


/*    border-left: 1px solid #FFF;*/


/*}*/


.body {


    height: 75%;


    height: 73%;


    width: 100%;


    border-top: 1px solid #FFF;


    background-color: #5D7677;


    /*background-color: #d0d0d0;*/


    display: flex;


    flex-direction: column;


    align-items: center;


    justify-content: center;


}


@@ -46,6 +47,13 @@


    background-image: url("monitor/img/background.png");


    background-repeat: no-repeat;


    background-size:100% 100%;


}


.canves1 {


    width: 100%;


    height: 100%;


    /*background-color: #f1f1f1;*/


    color: #ffffff;


    display: flex;


}


.canves-header {


    position: relative;


@@ -662,4 +670,74 @@


    font-size: 35px;


    font-weight: bold;


    /*color: #FF5722;*/


}


.monitor-operate {


    display: flex;


    height: 20%;


    justify-content: space-around;


    background-color: #FFF;




}


.monitor-operate-item {


    height: 100%;


    min-width: 320px;


    max-width: 600px;


    /*background-color: #888888;*/


    display: flex;


    flex-wrap: wrap;


    align-items: center;


    color: #282828;


}


.item-top {


    margin-left: 25px;


}


.monitor-operate-item button{


    width: 100px;


}


.operate-label {


    /*display: flex;*/


    /*flex-direction: column;*/


    /*flex-wrap: wrap;*/


    /*height: 50%;*/


}


.monitor-operate-item label{


    display: inline-block;


    text-align: center;


    height: 30px;


    /*line-height: 30px;*/


    width: 100px;


    padding: 5px;


    /*background-color: #01AAED;*/


    margin-top: 10px;


    margin-left: 10px;


}


.operator-item {


    display: inline-block;


    /*height: 100%;*/


    height: 40%;


    min-width: 300px;


    text-align: center;


    position: relative;


    vertical-align: middle;


    /*padding: 10px 0px 10px 50px;*/


}


.operator-item .select-title {


    display: inline-block;


    position: absolute;


    top: -11px;


    left: 50%;


    transform: translate(-50%, 0);


    background-color: #fff;


    color: #2e95d3;


    font-size: 12px;


    border: 1px solid #8d8d8d;


    border-radius: 5px;


    padding: 5px;


    z-index: 999;


}


.operator-item .select-container {


    padding: 10px 0;


    height: 100%;


    border: 1px solid #8d8d8d;


    border-radius: 5px;


}




 src/main/webapp/views/monitor.html


@@ -2,7 +2,7 @@


<html lang="en">


<head>


    <meta charset="UTF-8">


    <title>WCS输送设备管理</title>


    <title>显示器</title>


    <meta name="renderer" content="webkit">


    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">


    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">


@@ -15,24 +15,47 @@


    <script src="../static/layui/layui.js"></script>


    <script src="../static/js/common.js"></script>


    <script src="monitor/js/monitor.js"></script>


    <style>


        .abc {


            border-top: 3px solid rgb(239, 177, 102);


            border-right: 1px solid #FFF;


            border-left: 1px solid #FFF;


        }


    </style>


</head>


<body>


    <div style="padding: 10px;height: 100%;float: left;width: 6%">


        <div class="button-window">111</div>


        <div class="button-window"></div>


    </div>






    <div style="height: 100%;padding-left: 6%">


        <div style="padding: 10px;height: 100%">


            <div style="width: 100%;height: 100%;background-color: #93D1FF">


            <div style="width: 100%;height: 100%;">


                <div class="head">


                    <label for="">TV1</label>


                    <label for="">TV2</label>


                    <label for="">TV3</label>


                    <label for="" class="label ">TV1</label>


                    <label for="" class="label">TV2</label>


                    <label for="" class="label">TV3</label>


                </div>


                <div class="body">


                    <div class="time-tools">


                        <span id="bar-year"></span>-<span id="bar-month"></span>-<span id="bar-day"></span> <span id="bar-hour"></span>:<span id="bar-minute"></span>:<span id="bar-second"></span>&nbsp;&nbsp;<span id="bar-week"></span>


                    <!--<div class="time-tools">-->


                    <!--    <span id="bar-year"></span>-<span id="bar-month"></span>-<span id="bar-day"></span> <span id="bar-hour"></span>:<span id="bar-minute"></span>:<span id="bar-second"></span>&nbsp;&nbsp;<span id="bar-week"></span>-->


                    <!--</div>-->


                    <div class="canves1">


                        <div style="width: 30%;height: 100%;font-size: 30px;display: flex;flex-direction: column;justify-content: space-around">


                            <div style="width: 100%;height: 100px;line-height: 100px;text-align: center">累计行走：10869米</div>


                            <div style="width: 100%;height: 100px;line-height: 100px;text-align: center">累计行走：10869米</div>


                            <div style="width: 100%;height: 100px;line-height: 100px;text-align: center">累计行走：10869米</div>


                            <div style="width: 100%;height: 100px;line-height: 100px;text-align: center">累计行走：10869米</div>


                        </div>


                        <div style="width: 70%;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center">


                            <div style="width: 80%;height: 40%">


                                <div id="line-charts"></div>


                            </div>


                            <div style="width: 80%;height: 40%">


                                <div id="pie-charts"></div>


                            </div>


                        </div>


                    </div>


                    <div class="canves" style="display: none">


                        <!--头部-->


@@ -173,7 +196,7 @@


                                        </div>


                                    </div>


                                    <!--折线图-->


                                    <div id="line-charts"></div>


                                    <!--<div id="line-charts"></div>-->


                                </div>


                                <div class="container-side-box right-middle">


                                    <div class="image-border image-border1"></div>


@@ -191,7 +214,7 @@


                                        </div>


                                    </div>


                                    <div class="top-main">


                                        <div id="pie-charts"></div>


                                        <!--<div id="pie-charts"></div>-->


                                    </div>


                                    <div class="top-footer">


                                        <div class="top-footer-elem">


@@ -255,7 +278,7 @@




                        </div>


                    </div>


                    <div class="canves">


                    <div class="canves" style="display: none">


                        <div class="canves-header" >


                            <div class="button-left"></div>


                            <div class="button-right"></div>


@@ -277,13 +300,100 @@


                        </div>


                    </div>


                </div>




                <div class="monitor-operate">


                    <!--显示器选择-->


                    <div class="monitor-operate-item">


                        <div style="width: 100%" class="item-top">


                            <button id="selectAll">全选</button>


                            <button id="unSelectAll">取消全选</button>


                        </div>


                        <div id="checked" style="overflow-y: scroll;height: 80%;border: 1px solid #888" >


                            <label for=""><input type="checkbox" name="monitor" checked="checked" value="1">1号显示器</label>


                            <label for=""><input type="checkbox" name="monitor" >2号显示器</label>


                            <label for=""><input type="checkbox" name="monitor">3号显示器</label>


                            <label for=""><input type="checkbox" name="monitor">4号显示器</label>


                            <label for=""><input type="checkbox" name="monitor">5号显示器</label>


                            <label for=""><input type="checkbox" name="monitor">6号显示器</label>


                            <label for=""><input type="checkbox" name="monitor">7号显示器</label>


                            <label for=""><input type="checkbox" name="monitor">1号显示器</label>


                            <label for=""><input type="checkbox" name="monitor">2号显示器</label>


                            <label for=""><input type="checkbox">3号显示器</label>


                            <label for=""><input type="checkbox">4号显示器</label>


                            <label for=""><input type="checkbox">5号显示器</label>


                            <label for=""><input type="checkbox">6号显示器</label>


                            <label for=""><input type="checkbox">7号显示器</label>


                            <label for=""><input type="checkbox">1号显示器</label>


                            <label for=""><input type="checkbox">2号显示器</label>


                            <label for=""><input type="checkbox">3号显示器</label>


                            <label for=""><input type="checkbox">4号显示器</label>


                            <label for=""><input type="checkbox">5号显示器</label>


                            <label for=""><input type="checkbox">6号显示器</label>


                            <label for=""><input type="checkbox">7号显示器</label>


                            <label for=""><input type="checkbox">1号显示器</label>


                            <label for=""><input type="checkbox">2号显示器</label>


                            <label for=""><input type="checkbox">3号显示器</label>


                            <label for=""><input type="checkbox">4号显示器</label>


                            <label for=""><input type="checkbox">5号显示器</label>


                            <label for=""><input type="checkbox">6号显示器</label>


                            <label for=""><input type="checkbox">7号显示器</label>


                        </div>


                    </div>


                    <!--文本内容-->


                    <div class="monitor-operate-item"  style="height: 100%;min-width: 200px;display: flex;align-items: center;">


                            <textarea name="textarea" id="sendContent" cols="50" rows="3" style="font-size: 20px" placeholder="显示内容"></textarea>


                    </div>


                    <!--操作-->


                    <div class="monitor-operate-item"  style="height: 100%;min-width: 260px;display: flex;justify-content: space-around">


                            <button id="sendMessage">发送</button>


                            <button id="removeMessage">重置</button>


                    </div>


                </div>


            </div>


        </div>


    </div>


</body>


</html>


<script>


    $(function() {


        $(".label").click(function() {


            $(this).addClass("abc").siblings().removeClass("abc");


        });


    });


    $("#selectAll").click(function(){


        $('input:checkbox[name=monitor]').each(function () {


            $(this).prop("checked",true);


        })


    });


    $("#unSelectAll").click(function(){


        $('input:checkbox[name=monitor]').each(function () {


            $(this).prop("checked",false);


        })


    });


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


        var sendMessage = $('#sendContent').val()


        $('input:checkbox[name=monitor]').each(function () {


            if ($(this).is(':checked')) {


                console.log(sendMessage)


            } else {


                console.log('m')


            }


        })




    })


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


        var sendMessage = 'K'


        $('input:checkbox[name=monitor]').each(function () {


            if ($(this).is(':checked')) {


                console.log(sendMessage)


            } else {


                console.log('m')


            }


        })




    })


</script>


<script>




    layui.use(['element', 'carousel'], function(){


        var carousel = layui.carousel;


        var element = layui.element;


@@ -634,13 +744,13 @@


            data:  ['1', '2', '3', '4', '5', '6', '7'],


            axisLabel: {


                textStyle:{


                    color:'#aaa',  //坐标的字体颜色


                    fontSize: 6,


                    color:'#ffffff',  //坐标的字体颜色


                    fontSize: 20,


                },


            },


            axisLine:{


                lineStyle:{


                    color:'#3590ac', // 坐标轴颜色


                    color:'#ffffff', // 坐标轴颜色


                }


            }


        },


@@ -648,19 +758,19 @@


            type: 'value',


            axisLabel: {


                textStyle:{


                    color:'#aaa',  //坐标的字体颜色


                    fontSize: 5


                    color:'#ffffff',  //坐标的字体颜色


                    fontSize: 20


                },


            },


            axisLine:{


                lineStyle:{


                    color:'#3590ac', // 坐标轴颜色


                    color:'#ffffff', // 坐标轴颜色


                }


            },


            splitLine:{


                show: true,


                lineStyle:{


                    color:'#517a9b', // 分割线颜色


                    color:'#ffffff', // 分割线颜色


                }


            }