#

whycq

2023-03-23 5659a9ea7319179237f50fd3ba569b223311a43f

#

 src/main/webapp/views/monitor.css

New file
@@ -0,0 +1,665 @@
body {
    background-color: #6CA7A8;
    color: #FFF;
}
.head {
    width: 100%;
    height: 5%;
    display: flex;
}
label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 150px;

    font-size: 20px;
    color: #FFF;

}
label:active {
    border-top: 3px solid rgb(239, 177, 102);
    border-right: 1px solid #FFF;
    border-left: 1px solid #FFF;
}
/*label:checked {*/
/*    border-top: 3px solid rgb(239, 177, 102);*/
/*    border-right: 1px solid #FFF;*/
/*    border-left: 1px solid #FFF;*/
/*}*/
.body {
    height: 75%;
    width: 100%;
    border-top: 1px solid #FFF;
    background-color: #5D7677;
    display: flex;
    align-items: center;
    justify-content: center;
}
.canves {
    width: 90%;
    height: 648px;
    /*width: 1152px;*/
    /*height: 648px;*/
    background-image: url("monitor/img/background.png");
    background-repeat: no-repeat;
    background-size:100% 100%;
}
.canves-header {
    position: relative;
    height: 10%;
    width: 100%;
}
.button-left {
    position: absolute;
    margin-left: 21.4%;
    margin-top: 0.8%;
    width: 13.3%;
    height: 90%;
    background-image: url('monitor/img/right.png');
    background-size: 100% 100%;
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
    /*filter: FlipH;*/
    /*background-color: white;*/
}
.button-right {
    position: absolute;
    margin-left: 65.1%;
    margin-top: 0.8%;
    width: 13.3%;
    height: 90%;
    background-image: url('monitor/img/right.png');
    background-size: 100% 100%;
}
.canves-title {
    text-align: center;
    font-size: 28px;
    line-height: 60px;
}
.time-tools {
    position: absolute;
    top: 85px;
    left: 1560px;
    width: auto;
    height: 10%;
    text-align: center;
}

/*主体*/
.container{
    height: 90%;
    /*background-color: #074b0f;*/
}
.container-element-side {
    float: left;
    width: 24%;
    height: 100%;
    padding: 1%;
    box-sizing: border-box;
}
.container-side-box {
    position: relative;
    height: 100%;
    width: 100%;
    border: 1px solid rgba(20, 80, 136, 1);
    padding: 15px;
    box-sizing: border-box;
}

/* 左 */
/*左上*/
.english {
    font-size: xx-small;
    color: #999;
}
.introduce {
    height: 30%;
}
.introduce-content {
    text-indent: 2em;
    margin-top: 13px;
    height: 150px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 10px;
    opacity: 0.7;
}
/*左中*/
.charge-info {
    height: 60%;
}
.info-header {
    height: 15%;
}
.info-header h6 {
    letter-spacing: 3px;
}
.charge-info-elem {
    height: 20%;
}
.charge-info-elem img {
    display: inline-block;
    height: 100%;
    width: 30%;
    vertical-align: middle;
    padding: 10px 25px 10px 5px;
}
.info-detail {
    display: inline-block;
    height: 100%;
    width: 65%;
    vertical-align: middle
}
.real-data {
    width: 100%;
    height: 60%;
    position: relative;
}
.real-data .count {
    position: absolute;
    left: 0%;
    bottom: 0;
    font-size: x-large;
}
.real-data .unit {
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: x-small;
    opacity: 0.7;
}
.content {
    width: 100%;
    height: 40%;
    font-size: x-small;
    opacity: 0.7;
}
/*左下*/
.footer {
    position: relative;
    background-color: #063a7b;
    height: 10%;
    text-align: center;
}
.footer span {
    position: absolute;
    left: 18%;
    top: 50%;
    transform:translateY(-50%);
    -webkit-transform:translateY(-50%);  /*兼容-webkit-引擎浏览器*/
    -moz-transform:translateY(-50%);     /*兼容-moz-引擎浏览器*/
    overflow: hidden;
    text-overflow: ellipsis;
    white-space:nowrap;
}
.footer img {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: auto;
}
/* 中 */
.container-element-middle {
    float: left;
    width: 52%;
    height: 100%;
    padding: 1.2% 1% 1.5% 1%;
    box-sizing: border-box;
}
.map-board{
    height: 100%;
    width: 100%;
    border: 1px solid rgba(20, 80, 136, 1);
    position: relative;
    background-color: rgba(3, 36, 85, 0.4); /*针对其他浏览器*/
    filter: Alpha(Opacity=50); /* 针对IE*/
}


/*右*/
/*右上*/
.container-side-box.right-top {
    height: 30%;
    margin-bottom: 5%;
}
.line-chart-title {
    height: 30%;
}
.order-report {
    position: relative;
    height: 50%;
}
.order-report .order-report-left {
    letter-spacing: 2px;
    position: absolute;
    left: 0;
    bottom: 0;
}
.order-report .order-report-right {
    letter-spacing: 2px;
    font-size: x-large;
    position: absolute;
    transform-origin: 0 100%;
    right: 0;
    bottom: 0;
}
.order-report-english {
    position: relative;
    height: 50%;
}
.order-report-english .order-report-left {
    letter-spacing: 2px;
    color: #999;
    font-size: xx-small;
    transform: scale(0.50);
    -webkit-transform: scale(0.50);
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    position: absolute;
    left: 0;
    top: 0;
}
.order-report-english .order-report-right {
    font-size: xx-small;
    color: #999;
    transform: scale(0.50);
    -webkit-transform: scale(0.50);
    transform-origin: 100% 0;
    -webkit-transform-origin: 100% 0;
    position: absolute;
    right: 0;
    top: 0;
}
#line-charts {
    height: 70%;
}
/*右中*/
.container-side-box.right-middle {
    height: 50%;
    margin-bottom: 5%;
}
.top-header {
    height: 20%;
}
.income-date {
    position: relative;
    height: 50%;
}
.income-date .income-date-left {
    letter-spacing: 2px;
    position: absolute;
    left: 0;
    bottom: 0;
}
.income-date .income-date-right {
    letter-spacing: 2px;
    font-size: large;
    position: absolute;
    transform-origin: 0 100%;
    right: 0;
    bottom: 0;
}
.income-date-english {
    position: relative;
    height: 50%;
}
.income-date-english .income-date-left {
    letter-spacing: 2px;
    color: #999;
    font-size: xx-small;
    transform: scale(0.50);
    -webkit-transform: scale(0.50);
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    position: absolute;
    left: 0;
    top: 0;
}
.income-date-english .income-date-right {
    font-size: xx-small;
    color: #999;
    transform: scale(0.50);
    -webkit-transform: scale(0.50);
    transform-origin: 100% 0;
    -webkit-transform-origin: 100% 0;
    position: absolute;
    right: 0;
    top: 0;
}

.top-main {
    height: 40%;
}
#pie-charts {
    height: 100%;
}

.top-footer {
    height: 40%;
}
.top-footer-elem {
    float: left;
    width: 33.33%;
    height: 100%;
}
.elem-header {
    height: 60%;
    background-repeat: no-repeat;
    background-position: 45% 50%;
    background-size: 50% auto;
}
#elem-header-first {
    background-image: url("../img/g1.png");
}
#elem-header-second {
    background-image: url("../img/f1.png");
}
#elem-header-third {
    background-image: url("../img/e1.png");
}
.elem-main {
    height: 20%;
    text-align: center;
    font-size: small;
    opacity: 0.7;
    padding: 4px 0;
}
.elem-footer {
    height: 20%;
    text-align: center;
    letter-spacing: 2px;
}
/*右下*/
.container-side-box.right-bottom {
    height: 15%;
}
.progress-bar {
    height: 60%;
}
.usage-rate {
    position: relative;
    height: 50%;
}
.usage-rate .usage-rate-left {
    letter-spacing: 2px;
    position: absolute;
    left: 0;
    bottom: 0;
}
.usage-rate .usage-rate-right {
    letter-spacing: 2px;
    font-size: large;
    position: absolute;
    transform-origin: 0 100%;
    right: 0;
    bottom: 0;
}
.usage-rate .usage-rate-right span {
    letter-spacing: 2px;
    font-size: large;
}
.usage-rate-english {
    position: relative;
    height: 50%;
}
.usage-rate-english .usage-rate-left {
    letter-spacing: 2px;
    color: #999;
    font-size: xx-small;
    transform: scale(0.50);
    -webkit-transform: scale(0.50);
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    position: absolute;
    left: 0;
    top: 0;
}
.usage-rate-english .usage-rate-right {
    font-size: xx-small;
    color: #999;
    transform: scale(0.50);
    -webkit-transform: scale(0.50);
    transform-origin: 100% 0;
    -webkit-transform-origin: 100% 0;
    position: absolute;
    right: 0;
    top: 0;
}
.progress-bar-modal {
    height: 30%;
    padding-top: 1%;
}
.bar-container {
    width: 70%;
    height: 100%;
    background-color: #233751;
    vertical-align: middle;
    display: inline-block;
}
.bar-proportion {
    width: 60%;
    height: 100%;
    background-color: #e77b2c;
    position: relative;
}
.bar-proportion span {
    font-size: xx-small;
    position: absolute;
    right: 5%;
    top: 45%;
    transform:translateY(-50%);
    -webkit-transform:translateY(-50%);  /*兼容-webkit-引擎浏览器*/
    -moz-transform:translateY(-50%);     /*兼容-moz-引擎浏览器*/
    opacity: 0.8;
}
.bar-container-count, .bar-container-count span  {
    float: right;
    color: #e77b2c;
    vertical-align: middle;
    font-size: 18px;
}

/*边框*/
.image-border {
    position: absolute;
    width: 5px;
    height: 5px;
}
.image-border1 {
    top: 0;
    left: 0;
    border-left: 2px solid #31c4c4;
    border-top: 2px solid #31c4c4;
    /*transform: scale(0.5)*/
}
.image-border2 {
    top: 0;
    right: 0;
    border-right: 2px solid #31c4c4;
    border-top: 2px solid #31c4c4;
}
.image-border3 {
    bottom: 0;
    left: 0;
    border-bottom: 2px solid #31c4c4;
    border-left: 2px solid #31c4c4;
}
.image-border4 {
    bottom: 0;
    right: 0;
    border-right: 2px solid #31c4c4;
    border-bottom: 2px solid #31c4c4;
}

/*地图*/
.anchorBL img{
    display: none;
}
.BMap_cpyCtrl.BMap_noprint.anchorBL {
    display: none;
}
.ec-extension-bmap{
    border-radius:15px;
}

/*遮罩*/
#detail-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 1;
    display: none;
}
#closeBtn {
    font-size: large;
    float: right;
    background-color: black;
    color: white;
    border: none;
    padding: 10px 15px;
    outline: none;
    cursor: pointer;
}
#closeBtn:hover {
    background-color: white;
    color: black;
}
#detail-modal ul {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, 0);
    list-style-type: none;
}
#detail-modal li {
    font-size: large;
    padding: 20px;
}
.animationTop {
    -webkit-animation: animationTop 0.4s;
    animation: animationTop 0.4s;
}
@-webkit-keyframes animationTop {
    from {
        top: -500px;
        opacity: 0;
    }
    to {
        top: 0;
        opacity: 1;
    }
}
@keyframes animationTop {
    from {
        top: -500px;
        opacity: 0;
    }
    to {
        top: 0;
        opacity: 1;
    }
}

.item-img {
    background-size: 100% 100%;
}
#img-1 {
    background-image: url(monitor/img/banner/banner1.jpg);
}
#img-2 {
    background-image: url(monitor/img/banner/banner2.jpg);
}
#img-3 {
    background-image: url(monitor/img/banner/banner3.jpg);
}
#img-4 {
    background-image: url(monitor/img/banner/banner4.jpg);
}
#img-5 {
    background-image: url(monitor/img/banner/banner5.jpg);
}

.crn-speed {
    width: 100%;
    height: 75%;
    position: absolute;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    top: -15%;
    /*border-bottom: 1px solid rgba(0, 0, 0, 0.3);*/
}

.crn-speed span {
    display:inline-block;
    margin:20px auto;
    font-size:56px;
    font-family:'Pacifico',serif
}
.speed-content {
    height: 100%;
}
.speed-chart {
    float: left;
    width: 100%;
    height: 100%;
}


.scroll-pane {
    position: absolute;
    top: 42%;
    width: 100%;
    height: 58%;
}
.scroll-bar {
    float: left;
    width: 50%;
    height: 100%;
    text-align: center;
}

.scroll-header span {
    font-size:64px;
    font-family:'Pacifico',serif
}

.scroll-content {
    animation:anis 10s linear infinite;
    padding: 200px 10px 20px 10px;
    font-family:'Pacifico',serif;
    overflow:hidden;
}
.scroll-content:last-child {
    border-left: 1px solid rgba(0, 0, 0, 0.3);
}
.scroll-content:hover {
    animation-play-state:paused;
}
@keyframes anis {
    100% {
        transform:translateY(-200px)
    }
}

#led-content {
    display: none;
}
#led-p-content {
    text-align: center;
    padding: 20px 40px;
    font-size: 35px;
    font-weight: bold;
    /*color: #FF5722;*/
}

 src/main/webapp/views/monitor.html

New file
@@ -0,0 +1,826 @@
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WCS输送设备管理</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">
    <link rel="stylesheet" type="text/css" href="../static/css/common.css">
    <link rel="stylesheet" type="text/css" href="./monitor.css">
    <link href="../static/layui/css/layui.css" rel="stylesheet">
    <link href="monitor/css/lunbo.css" rel="stylesheet">
    <script src="monitor/js/jquery-3.3.1.min.js"></script>
    <script src="monitor/js/echarts/echarts.min.js"></script>
    <script src="../static/layui/layui.js"></script>
    <script src="../static/js/common.js"></script>
    <script src="monitor/js/monitor.js"></script>
</head>
<body>
    <div style="padding: 10px;height: 100%;float: left;width: 6%">
        <div class="button-window">111</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 class="head">
                    <label for="">TV1</label>
                    <label for="">TV2</label>
                    <label for="">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>
                    <div class="canves" style="display: none">
                        <!--头部-->
                        <div class="canves-header" >
                            <div class="button-left"></div>
                            <div class="button-right"></div>
                            <!--<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="canves-title">
                                自动仓库WCS监控平台
                            </div>
                        </div>
                        <div class="container">

                            <!--左-->
                            <div class="container-element-side">
                                <div class="container-side-box">
                                    <div class="image-border image-border1"></div>
                                    <div class="image-border image-border2"></div>
                                    <div class="image-border image-border3"></div>
                                    <div class="image-border image-border4"></div>
                                    <div class="introduce">
                                        <h6>自动化立体仓库</h6>
                                        <p class="english">Automatic Storageand Retrieval System</p>
                                        <p class="introduce-content">  利用立体仓库设备可实现仓库高层合理化、存取自动化、操作简便化；自动化立体仓库是当前技术水平较高的形式。自动化立体仓库的主体由货架、巷道式堆垛起重机、入(出)库工作台和自动运进(出)及操作控制系统组成。货架是钢结构或钢筋混凝土结构的建筑物或结构体，货架内是标准尺寸的货位空间，巷道堆垛起重机穿行于货架之间的巷道中，完成存、取货的工作。管理上采用计算机及条形码技术。</p>
                                    </div>
                                    <div class="charge-info">
                                        <div class="info-header">
                                            <h6>仓库数据</h6>
                                            <p class="english">warehouse data</p>
                                        </div>
                                        <div class="charge-info-elem">
                                            <img src="monitor/img/a1.png">
                                            <div class="info-detail">
                                                <div class="real-data">
                                                    <i class="count" id="xDistance">0</i>
                                                    <span class="unit">m</span>
                                                </div>
                                                <div class="content">累计走行距离(米)</div>
                                            </div>
                                        </div>
                                        <div class="charge-info-elem">
                                            <img src="monitor/img/b1.png">
                                            <div class="info-detail">
                                                <div class="real-data">
                                                    <i class="count" id="yDistance">0</i>
                                                    <span class="unit">m</span>
                                                </div>
                                                <div class="content">累计升降距离(米)</div>
                                            </div>
                                        </div>
                                        <div class="charge-info-elem">
                                            <img src="monitor/img/c1.png">
                                            <div class="info-detail">
                                                <div class="real-data">
                                                    <i class="count" id="xDuration">0</i>
                                                    <span class="unit">s</span>
                                                </div>
                                                <div class="content">累计走行时长(秒)</div>
                                            </div>
                                        </div>
                                        <div class="charge-info-elem">
                                            <img src="monitor/img/d1.png">
                                            <div class="info-detail">
                                                <div class="real-data">
                                                    <i class="count" id="yDuration">0</i>
                                                    <span class="unit">s</span>
                                                </div>
                                                <div class="content">累计升降时长(秒)</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="footer container-side-box">
                                        <div class="image-border image-border1"></div>
                                        <div class="image-border image-border2"></div>
                                        <div class="image-border image-border3"></div>
                                        <div class="image-border image-border4"></div>
                                        <span>浙江中扬立库技术有限公司</span>
                                        <img src="../static/images/barcode.png">
                                    </div>
                                </div>
                            </div>

                            <!--中-->
                            <div class="container-element-middle">
                                <div class="map-board">
                                    <div class="image-border image-border1"></div>
                                    <div class="image-border image-border2"></div>
                                    <div class="image-border image-border3"></div>
                                    <div class="image-border image-border4"></div>

                                    <!-- 中上 -->
                                    <div class="crn-speed">
                                        <div class="speed-content">
                                            <div id="crn-chart" class="speed-chart">
                                            </div>
                                        </div>
                                    </div>

                                    <!-- 中下 -->
                                    <div class="scroll-pane">
                                        <div class="layui-carousel" id="banner">
                                            <div carousel-item>
                                                <div class="item-img" id="img-1" style="background-color: red"></div>
                                                <div class="item-img" id="img-2" style="background-color: gold"></div>
                                                <div class="item-img" id="img-3" style="background-color: green"></div>
                                                <div class="item-img" id="img-4" style="background-color: white"></div>
                                                <div class="item-img" id="img-5" style="background-color: darkgoldenrod"></div>
                                            </div>
                                        </div>

                                        <div id="led-content">
                                            <pre id="led-p-content"></pre>
                                        </div>


                                    </div>

                                </div>
                            </div>

                            <!--右-->
                            <div class="container-element-side">
                                <div class="container-side-box right-top">
                                    <div class="image-border image-border1"></div>
                                    <div class="image-border image-border2"></div>
                                    <div class="image-border image-border3"></div>
                                    <div class="image-border image-border4"></div>
                                    <div class="line-chart-title">
                                        <div class="order-report">
                                            <span class="order-report-left" >入出库统计</span>
                                            <span class="order-report-right">31</span>
                                        </div>
                                        <div class="order-report-english english">
                                            <span class="order-report-left">ORDER STATISTICS</span>
                                            <span class="order-report-right">今日充电订单数</span>
                                        </div>
                                    </div>
                                    <!--折线图-->
                                    <div id="line-charts"></div>
                                </div>
                                <div class="container-side-box right-middle">
                                    <div class="image-border image-border1"></div>
                                    <div class="image-border image-border2"></div>
                                    <div class="image-border image-border3"></div>
                                    <div class="image-border image-border4"></div>
                                    <div class="top-header">
                                        <div class="income-date">
                                            <span class="income-date-left" >库存类型</span>
                                            <span class="income-date-right">今天</span>
                                        </div>
                                        <div class="income-date-english english">
                                            <span class="income-date-left">INCOME DATE</span>
                                            <span class="income-date-right">Today</span>
                                        </div>
                                    </div>
                                    <div class="top-main">
                                        <div id="pie-charts"></div>
                                    </div>
                                    <div class="top-footer">
                                        <div class="top-footer-elem">
                                            <div class="elem-header" id="elem-header-first">
                                            </div>
                                            <div class="elem-main">
                                                在库
                                            </div>
                                            <div class="elem-footer">
                                                <span id="stock-count">0</span>
                                            </div>
                                        </div>
                                        <div class="top-footer-elem">
                                            <div class="elem-header" id="elem-header-second">
                                            </div>
                                            <div class="elem-main">
                                                空库
                                            </div>
                                            <div class="elem-footer">
                                                <span id="empty-count">0</span>
                                            </div>
                                        </div>
                                        <div class="top-footer-elem">
                                            <div class="elem-header" id="elem-header-third">
                                            </div>
                                            <div class="elem-main">
                                                禁用
                                            </div>
                                            <div class="elem-footer">
                                                <span id="none-count">0</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="container-side-box right-bottom">
                                    <div class="image-border image-border1"></div>
                                    <div class="image-border image-border2"></div>
                                    <div class="image-border image-border3"></div>
                                    <div class="image-border image-border4"></div>
                                    <div class="progress-bar">
                                        <div class="usage-rate">
                                            <span class="usage-rate-left" >库位使用率</span>
                                            <span class="usage-rate-right"><span id="usedPr">0</span>%</span>
                                        </div>
                                        <div class="usage-rate-english english">
                                            <span class="usage-rate-left">EQUIPMENT USAGE THIS MONTH</span>
                                            <span class="usage-rate-right">同比上月 + 5%</span>
                                        </div>
                                    </div>
                                    <div class="progress-bar-modal">
                                        <div class="layui-progress layui-progress-big" lay-filter="used-progress" style="background-color: #233751;width: 80%;display: inline-block">
                                            <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
                                        </div>
                                        <!--                    <div class="bar-container">-->
                                        <!--                        <div class="bar-proportion"><span>实际使用</span></div>-->
                                        <!--                    </div>-->
                                        <i class="bar-container-count"><span id="used">0</span></i>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="canves">
                        <div class="canves-header" >
                            <div class="button-left"></div>
                            <div class="button-right"></div>

                            <div class="canves-title">
                                自动仓库WCS监控平台
                            </div>
                        </div>
                        <div style="height: 90%;">
                            <div class="container-side-box" style="width: 95%;height: 95%;margin: 20px auto">
                                <div class="image-border image-border1"></div>
                                <div class="image-border image-border2"></div>
                                <div class="image-border image-border3"></div>
                                <div class="image-border image-border4"></div>
                                <div style="display: flex;align-items: center;justify-content: center;height: 100%;font-size: 40px">
                                    Automatic Storageand Retrieval System
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</body>
</html>
<script>
    layui.use(['element', 'carousel'], function(){
        var carousel = layui.carousel;
        var element = layui.element;
        // 轮播图
        carousel.render({
            elem: '#banner'
            ,width: '100%' //设置容器宽度
            ,arrow: 'hover' // 切换箭头默认显示状态，可选值为 hover（悬停显示） always（始终显示） none（始终不显示）
            ,interval: '3000' // 自动切换的时间间隔，单位：ms（毫秒），不能低于800
            ,anim: 'fade'
        });
    });

    /***********************************************************************************/
    /************************************* 头部按钮 *************************************/
    /***********************************************************************************/
    // 左
    $('.button-left').click(function () {
        exitFull();
    });
    // 右
    $('.button-right').click(function () {
        full();
    });



    /***********************************************************************************/
    /************************************ 堆垛机速度 *************************************/
    /***********************************************************************************/

    var crnChart = echarts.init(document.getElementById('crn-chart'));
    crnChartOption = {
        // backgroundColor: '#1b1b1b',
        tooltip: {
            formatter: '{a} <br/>{c} {b}'
        },
        // toolbox: {  // 保存图片
        //     show: true,
        //     feature: {
        //         mark: {show: true},
        //         restore: {show: true},
        //         saveAsImage: {show: true}
        //     }
        // },
        series: [
            {
                name: '走行速度',
                type: 'gauge',
                min: 0,
                max: 160,
                splitNumber: 16,
                radius: '50%',
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: [[0.09, '#0fe507'], [0.82, '#1e90ff'], [1, '#ff4500']],
                        width: 3,
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 10
                    }
                },
                axisLabel: {            // 坐标轴数字
                    fontWeight: 'bolder',
                    color: '#fff',
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 10
                },
                axisTick: {            // 坐标轴小标记
                    length: 15,        // 属性length控制线长
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: 'auto',
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 10
                    }
                },
                splitLine: {           // 分隔线
                    length: 25,         // 属性length控制线长
                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                        width: 3,
                        color: '#fff',
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 10
                    }
                },
                pointer: {           // 分隔线
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 5
                },
                title: {    // 速度单位
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontWeight: 'bolder',
                        fontSize: 20,
                        fontStyle: 'italic',
                        color: '#fff',
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 10
                    }
                },
                detail: {   // 速度值
                    backgroundColor: 'rgba(30,144,255,0.8)',
                    borderWidth: 1,
                    borderColor: '#fff',
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 5,
                    offsetCenter: [0, '50%'],       // x, y，单位px
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontWeight: 'bolder',
                        color: '#fff'
                    }
                },
                data: [{value: 40, name: 'x\nm/min'}]
            },
            {
                name: '升降速度',
                type: 'gauge',
                center: ['25%', '55%'],    // 默认全局居中
                radius: '30%',
                min: 0,
                max: 40,
                endAngle: 40,
                splitNumber: 5,
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: [[0.32, '#0fe507'], [0.86, '#1e90ff'], [1, '#ff4500']],
                        width: 2,
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 10
                    }
                },
                axisLabel: {            // 坐标轴小标记
                    fontWeight: 'bolder',
                    color: '#fff',
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 10
                },
                axisTick: {            // 坐标轴小标记
                    length: 12,        // 属性length控制线长
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: 'auto',
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 10
                    }
                },
                splitLine: {           // 分隔线
                    length: 20,         // 属性length控制线长
                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                        width: 3,
                        color: '#fff',
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 10
                    }
                },
                pointer: {
                    width: 5,
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 5
                },
                title: {
                    offsetCenter: [0, '-30%'],       // x, y，单位px
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontWeight: 'bolder',
                        fontStyle: 'italic',
                        color: '#fff',
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 10
                    }
                },
                detail: {
                    //backgroundColor: 'rgba(30,144,255,0.8)',
                    // borderWidth: 1,
                    borderColor: '#fff',
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 5,
                    width: 80,
                    height: 30,
                    offsetCenter: [35, '20%'],       // x, y，单位px
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontWeight: 'bolder',
                        color: '#fff'
                    }
                },
                data: [{value: 1.5, name: 'y'}]
            },
            {
                name: '货叉速度',
                type: 'gauge',
                center: ['75%', '50%'],    // 默认全局居中
                radius: '30%',
                min: 0,
                max: 50,
                startAngle: 135,
                endAngle: 50,
                splitNumber: 2,
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: [[0.2, '#0fe507'], [0.8, '#1e90ff'], [1, '#ff4500']],
                        width: 2,
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 10
                    }
                },
                axisLabel: {            // 坐标轴小标记
                    fontWeight: 'bolder',
                    color: '#fff',
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 10
                },
                axisTick: {            // 坐标轴小标记
                    length: 12,        // 属性length控制线长
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: 'auto',
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 10
                    }
                },
                // axisLabel: {
                //     fontWeight: 'bolder',
                //     color: '#fff',
                //     shadowColor: '#fff', //默认透明
                //     shadowBlur: 10,
                //     formatter: function (v){
                //         switch (v + '') {
                //             case '0': return 'E';
                //             case '1': return 'Gas';
                //             case '2': return 'F';
                //         }
                //     }
                // },
                splitLine: {           // 分隔线
                    length:15,         // 属性length控制线长
                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                        width:3,
                        color: '#fff',
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 10
                    }
                },
                pointer: {
                    width:2,
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 5
                },
                title: {
                    offsetCenter: [0, '-30%'],       // x, y，单位px
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontWeight: 'bolder',
                        fontStyle: 'italic',
                        color: '#fff',
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 10
                    }
                },
                detail: {
                    //backgroundColor: 'rgba(30,144,255,0.8)',
                    // borderWidth: 1,
                    borderColor: '#fff',
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 5,
                    width: 80,
                    height: 30,
                    offsetCenter: [40, '5%'],       // x, y，单位px
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontWeight: 'bolder',
                        color: '#fff'
                    }
                },
                data: [{value: 0.5, name: 'z'}]
            },
            {
                name: '货叉位置',
                type: 'gauge',
                center: ['75%', '50%'],    // 默认全局居中
                radius: '30%',
                min: 0,
                max: 2,
                startAngle: 315,
                endAngle: 225,
                splitNumber: 2,
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: [[0.2, '#0fe507'], [0.8, '#1e90ff'], [1, '#ff4500']],
                        width: 2,
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 10
                    }
                },
                axisTick: {            // 坐标轴小标记
                    show: false
                },
                axisLabel: {
                    fontWeight: 'bolder',
                    color: '#fff',
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 10,
                    formatter: function(v){
                        switch (v + '') {
                            case '0': return '右';
                            case '1': return '中';
                            case '2': return '左';
                        }
                    }
                },
                splitLine: {           // 分隔线
                    length: 15,         // 属性length控制线长
                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                        width: 3,
                        color: '#fff',
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 10
                    }
                },
                pointer: {
                    width: 2,
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 5
                },
                title: {
                    show: false
                },
                detail: {
                    show: false
                },
                data:[{value: 0.5, name: 'gas'}]
            }
        ]
    };


    /***********************************************************************************/
    /************************************* 折线图 ***************************************/
    /***********************************************************************************/

    var lineCharts = echarts.init(document.getElementById('line-charts'));
    var lineChartOption = {
        // animation: false,
        grid: {
            top: '0%',
            left: '0%',
            right: '2%',
            bottom: '0%',
            containLabel: true,
            // backgroundColor: 'rgb(116,148,174,0.3)',
            show: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data:  ['1', '2', '3', '4', '5', '6', '7'],
            axisLabel: {
                textStyle:{
                    color:'#aaa',  //坐标的字体颜色
                    fontSize: 6,
                },
            },
            axisLine:{
                lineStyle:{
                    color:'#3590ac', // 坐标轴颜色
                }
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                textStyle:{
                    color:'#aaa',  //坐标的字体颜色
                    fontSize: 5
                },
            },
            axisLine:{
                lineStyle:{
                    color:'#3590ac', // 坐标轴颜色
                }
            },
            splitLine:{
                show: true,
                lineStyle:{
                    color:'#517a9b', // 分割线颜色
                }
            }

        },
        series: [
            {
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                // areaStyle: {
                //     color: '#7494ae' // 折线区域颜色
                // },
                itemStyle:{
                    normal:{
                        color:'#3590ac', //折点颜色
                        lineStyle:{
                            color:'#3590ac' //折线颜色
                        }
                    }
                }
            },
            {
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                // areaStyle: {
                //     color: '#d55b35' // 折线区域颜色
                // },
                itemStyle:{
                    normal:{
                        color:'#ef550e', //折点颜色
                        lineStyle:{
                            color:'#ec670f' //折线颜色
                        }
                    }
                }
            }
        ]
    };

    function initlineChart() {
        var reportView = lineChartOption;
        $.ajax({
            url: baseUrl+"/monitor/line/charts",
            method: 'GET',
            success: function (res) {
                if (res.code === 200){
                    var json = res.data.rows;
                    reportView.xAxis.data=[getDateFormat(-11), getDateFormat(-10), getDateFormat(-9), getDateFormat(-8), getDateFormat(-7), getDateFormat(-6),
                        getDateFormat(-5), getDateFormat(-4), getDateFormat(-3), getDateFormat(-2), getDateFormat(-1), getDateFormat(-0)];
                    reportView.series[0].data=res.data.rows[0].data;
                    reportView.series[1].data=res.data.rows[1].data;
                    lineCharts.setOption(reportView)
                } else if (res.code === 403){
                    top.location.href = "/";
                } else {
                    console.log(res.msg);
                }
            }
        });
    }

    /***********************************************************************************/
    /************************************* 饼图 *****************************************/
    /***********************************************************************************/

    var pieCharts = echarts.init(document.getElementById('pie-charts'));
    var pieChartOption = {
        // animation: false,
        grid: {
            top: '0%',
            left: '0%',
            right: '0%',
            bottom: '0%',
            containLabel: false,
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 10,
            data: ['在库', '空']
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: ['25%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: false,
                        fontSize: '50',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    {value: 1, name: '在库'},
                    {value: 1, name: '空'},
                    {value: 1, name: '使用'},
                    {value: 1, name: '禁用'},
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    },
                    normal:{
                        color:function(params) {
                            //自定义颜色
                            let colorList = [
                                '#28b9a2', '#69d7fc', '#fcbf5d',
                            ];
                            return colorList[params.dataIndex]
                        }
                    }
                }
            }
        ]
    };
    // 饼图加载
    function initPieChart() {
        $.ajax({
            url: baseUrl+"/monitor/loc/rep",
            method: 'GET',
            success: function (res) {
                if (res.code === 200){
                    pieChartOption.series[0].data = res.data.pie;
                    pieCharts.setOption(pieChartOption);

                    $('#stock-count').text(res.data.stockCunt);
                    $('#empty-count').text(res.data.emptyCount);
                    $('#none-count').text(res.data.noneCount);

                    $('#usedPr').text(res.data.usedPr);
                    $('#used').text(res.data.used);

                    layui.element.progress('used-progress', res.data.usedPr + '%');
                } else if (res.code === 403){
                    top.location.href = "/";
                } else {
                    layer.msg(res.msg);
                }
            }
        });
    }

    // eCharts 跟随窗口改变
    window.onresize = function(){
        crnChart.resize();
        lineCharts.resize();
        pieCharts.resize();
    }

</script>