#

luxiaotao1123

2020-11-18 a032ee1f6c375cbf90543e934c92dbe7b70d2100

#

 src/main/webapp/views/monitor/css/monitor.css

@@ -193,7 +193,7 @@
    float: left;
    width: 52%;
    height: 100%;
    padding: 2% 1%;
    padding: 1.2% 1% 1.5% 1%;
    box-sizing: border-box;
}
.map-board{
@@ -201,7 +201,7 @@
    width: 100%;
    border: 1px solid rgba(20, 80, 136, 1);
    position: relative;
    background-color: rgba(3, 36, 85, 0.5); /*针对其他浏览器*/
    background-color: rgba(3, 36, 85, 0.4); /*针对其他浏览器*/
    filter: Alpha(Opacity=50); /* 针对IE*/
}

@@ -560,14 +560,14 @@
    background-image: url(../img/banner/banner1.jpg);
}
#img-2 {
    background-image: url(../img/banner/test2.jpg);
    background-image: url(../img/banner/banner1.jpg);
}
#img-3 {
    background-image: url(../img/banner/test3.png);
    background-image: url(../img/banner/banner1.jpg);
}
#img-4 {
    background-image: url(../img/banner/test1.jpg);
    background-image: url(../img/banner/banner1.jpg);
}
#img-5 {
    background-image: url(../img/banner/test2.jpg);
    background-image: url(../img/banner/banner1.jpg);
}

 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;
@@ -184,17 +193,19 @@
                    <!-- 中上 -->
                    <div class="crn-speed">
                        <div class="speed-content">
                            <div>
                                <span>堆垛机走行速度：</span><span id="xSpeed" class="counter">5.00</span><span>米/秒</span>
                            <div id="crn-chart" class="speed-chart">
                            </div>
                            <div>
                                <span>堆垛机升降速度：</span><span id="ySpeed" class="counter">5.00</span><span>米/秒</span>
                            </div>
<!--                            <div id="xSpeed-chart" class="speed-chart">-->
<!--&lt;!&ndash;                                <span>堆垛机走行速度：</span><span id="xSpeed" class="counter">5.00</span><span>米/秒</span>&ndash;&gt;-->
<!--                            </div>-->
<!--                            <div id="ySpeed-chart" class="speed-chart">-->
<!--&lt;!&ndash;                                <span>堆垛机升降速度：</span><span id="ySpeed" class="counter">5.00</span><span>米/秒</span>&ndash;&gt;-->
<!--                            </div>-->
                        </div>
                    </div>

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

                        <div class="layui-carousel" id="test1">
                            <div carousel-item>
                                <div class="item-img" id="img-1" style="background-color: red"></div>
@@ -368,10 +379,284 @@
    /************************************ 堆垛机速度 *************************************/
    /***********************************************************************************/





    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: 220,
                splitNumber: 11,
                radius: '50%',
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: [[0.09, 'lime'], [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: 'km/h'}]
            },
            {
                name: '转速',
                type: 'gauge',
                center: ['25%', '55%'],    // 默认全局居中
                radius: '30%',
                min: 0,
                max: 7,
                endAngle: 45,
                splitNumber: 7,
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: [[0.29, 'lime'], [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: [25, '20%'],       // x, y，单位px
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontWeight: 'bolder',
                        color: '#fff'
                    }
                },
                data: [{value: 1.5, name: 'x1000 r/min'}]
            },
            {
                name: '油表',
                type: 'gauge',
                center: ['75%', '50%'],    // 默认全局居中
                radius: '30%',
                min: 0,
                max: 2,
                startAngle: 135,
                endAngle: 45,
                splitNumber: 2,
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: [[0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500']],
                        width: 2,
                        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: {
                    show: false
                },
                detail: {
                    show: false
                },
                data: [{value: 0.5, name: 'gas'}]
            },
            {
                name: '水表',
                type: 'gauge',
                center: ['75%', '50%'],    // 默认全局居中
                radius: '30%',
                min: 0,
                max: 2,
                startAngle: 315,
                endAngle: 225,
                splitNumber: 2,
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: [[0.2, 'lime'], [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 'H';
                            case '1': return 'Water';
                            case '2': return 'C';
                        }
                    }
                },
                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'}]
            }
        ]
    };
    setInterval(function (){
        crnChartOption.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;
        crnChartOption.series[1].data[0].value = (Math.random()*7).toFixed(2) - 0;
        crnChartOption.series[2].data[0].value = (Math.random()*2).toFixed(2) - 0;
        crnChartOption.series[3].data[0].value = (Math.random()*2).toFixed(2) - 0;
        crnChart.setOption(crnChartOption);
    }, 1000);


    /***********************************************************************************/