#

zjj

2024-04-23 01a2d01abeadef5488a100ddf58a22dbcf7b95d6

 src/main/webapp/views/monitor/monitor.html

@@ -18,11 +18,13 @@
    <style>
        .crn-speed {
            width: 100%;
            height: 35%;
            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);*/
        }

@@ -33,13 +35,20 @@
            font-family:'Pacifico',serif
        }
        .speed-content {
            display: inline-block;
            height: 100%;
        }
        .speed-chart {
            float: left;
            width: 100%;
            height: 100%;
        }


        .scroll-pane {
            position: absolute;
            top: 42%;
            width: 100%;
            height: 65%;
            height: 58%;
        }
        .scroll-bar {
            float: left;
@@ -69,6 +78,17 @@
            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;*/
        }

    </style>
@@ -121,43 +141,43 @@
                        <p class="english">warehouse data</p>
                    </div>
                    <div class="charge-info-elem">
                        <img src="img/a.png">
                        <img src="img/a1.png">
                        <div class="info-detail">
                            <div class="real-data">
                                <i class="count">7777</i>
                                <span class="unit">个</span>
                                <i class="count" id="xDistance">0</i>
                                <span class="unit">m</span>
                            </div>
                            <div class="content">库位总数(个)</div>
                            <div class="content">累计走行距离(米)</div>
                        </div>
                    </div>
                    <div class="charge-info-elem">
                        <img src="img/b.png">
                        <img src="img/b1.png">
                        <div class="info-detail">
                            <div class="real-data">
                                <i class="count">777</i>
                                <span class="unit">个</span>
                                <i class="count" id="yDistance">0</i>
                                <span class="unit">m</span>
                            </div>
                            <div class="content">使用中库位(个)</div>
                            <div class="content">累计升降距离(米)</div>
                        </div>
                    </div>
                    <div class="charge-info-elem">
                        <img src="img/c.png">
                        <img src="img/c1.png">
                        <div class="info-detail">
                            <div class="real-data">
                                <i class="count">33</i>
                                <span class="unit">托</span>
                                <i class="count" id="xDuration">0</i>
                                <span class="unit">s</span>
                            </div>
                            <div class="content">今日入库(托)</div>
                            <div class="content">累计走行时长(秒)</div>
                        </div>
                    </div>
                    <div class="charge-info-elem">
                        <img src="img/d.png">
                        <img src="img/d1.png">
                        <div class="info-detail">
                            <div class="real-data">
                                <i class="count">14296</i>
                                <span class="unit">千瓦时</span>
                                <i class="count" id="yDuration">0</i>
                                <span class="unit">s</span>
                            </div>
                            <div class="content">今日电总量(千瓦时)</div>
                            <div class="content">累计升降时长(秒)</div>
                        </div>
                    </div>
                </div>
@@ -166,8 +186,8 @@
                    <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="img/wxCode.jpg">
                    <span>米多</span>
                    <img src="../../static/images/barcode.png">
                </div>
            </div>
        </div>
@@ -183,25 +203,25 @@
                    <!-- 中上 -->
                    <div class="crn-speed">
                        <div class="speed-content">
                            <div>
                                <span>堆垛机走行速度：</span><span class="counter">5.00</span><span>米/秒</span>
                            </div>
                            <div>
                                <span>堆垛机升降速度：</span><span class="counter">5.00</span><span>米/秒</span>
                            <div id="crn-chart" class="speed-chart">
                            </div>
                        </div>
                    </div>

                    <!-- 中下 -->
                    <div class="scroll-pane">

                        <div class="layui-carousel" id="test1">
                        <div class="layui-carousel" id="banner">
                            <div carousel-item>
                                <div style="background-color: red">条目1</div>
                                <div style="background-color: gold">条目2</div>
                                <div style="background-color: #333333">条目3</div>
                                <div style="background-color: #00FF00">条目4</div>
                                <div style="background-color: #5FB878">条目5</div>
                                <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>

<!--                        &lt;!&ndash; 中左 &ndash;&gt;-->
@@ -259,7 +279,7 @@
                <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-left" >入出库统计</span>
                        <span class="order-report-right">31</span>
                    </div>
                    <div class="order-report-english english">
@@ -313,10 +333,10 @@
                        <div class="elem-header" id="elem-header-third">
                        </div>
                        <div class="elem-main">
                            使用中
                            禁用
                        </div>
                        <div class="elem-footer">
                            <span id="used-count">0</span>
                            <span id="none-count">0</span>
                        </div>
                    </div>
                </div>
@@ -329,7 +349,7 @@
                <div class="progress-bar">
                    <div class="usage-rate">
                        <span class="usage-rate-left" >库位使用率</span>
                        <span class="usage-rate-right">60%</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>
@@ -337,10 +357,13 @@
                    </div>
                </div>
                <div class="progress-bar-modal">
                    <div class="bar-container">
                        <div class="bar-proportion"><span>实际使用</span></div>
                    <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>
                    <i class="bar-container-count">7777<span>个</span></i>
<!--                    <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>
@@ -348,24 +371,332 @@
    </div>
</body>
<script>
    layui.use('carousel', function(){
    layui.use(['element', 'carousel'], function(){
        var carousel = layui.carousel;
        //建造实例
        var element = layui.element;
        // 轮播图
        carousel.render({
            elem: '#test1'
            elem: '#banner'
            ,width: '100%' //设置容器宽度
            ,arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
            ,arrow: 'hover' // 切换箭头默认显示状态，可选值为 hover（悬停显示） always（始终显示） none（始终不显示）
            ,interval: '3000' // 自动切换的时间间隔，单位：ms（毫秒），不能低于800
            ,anim: 'fade'
        });
    });
    $('.counter').countUp();
    //  遮罩
    let closeBtn = document.getElementById('closeBtn');
    let detailModal = document.getElementById('detail-modal');
    closeBtn.onclick = function () {
        detailModal.style.display = 'none';

    /***********************************************************************************/
    /************************************* 头部按钮 *************************************/
    /***********************************************************************************/
    // 左
    $('.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 data = [];


    /***********************************************************************************/
@@ -387,7 +718,7 @@
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['1', '2', '3', '4', '5', '6', '7'],
            data:  ['1', '2', '3', '4', '5', '6', '7'],
            axisLabel: {
                textStyle:{
                    color:'#aaa',  //坐标的字体颜色
@@ -421,45 +752,57 @@
            }

        },
        series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            areaStyle: {
                color: '#7494ae' // 折线区域颜色
        series: [
            {
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                // areaStyle: {
                //     color: '#7494ae' // 折线区域颜色
                // },
                itemStyle:{
                    normal:{
                        color:'#3590ac', //折点颜色
                        lineStyle:{
                            color:'#3590ac' //折线颜色
                        }
                    }
                }
            },
            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 initlinChart() {
    function initlineChart() {
        var reportView = lineChartOption;
        var xAxisDate = [];
        var seriesDate=[];
        $.ajax({
            url: baseUrl+"/monitor/pakin/rep",
            url: baseUrl+"/monitor/line/charts",
            method: 'GET',
            success: function (res) {
                if (res.code === 200){
                    var json = res.data;
                    for (var i = 0; i < json.length; i++) {
                        xAxisDate[i]=json[i].node;
                        seriesDate[i]=json[i].val;
                    }
                    reportView.xAxis.data=xAxisDate;
                    reportView.series[0].data=seriesDate;
                    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 {
                    layer.msg(res.msg);
                    console.log(res.msg);
                }
            }
        });
@@ -546,6 +889,11 @@
                    $('#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 {
@@ -555,5 +903,13 @@
        });
    }

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


</script>
</html>