#

luxiaotao1123

2020-11-19 8d45d00d1453dc8f545c8aae2c387c027c104a0b

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

@@ -271,7 +271,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">
@@ -366,12 +366,12 @@
    layui.use(['element', 'carousel'], function(){
        var carousel = layui.carousel;
        var element = layui.element;
        //建造实例
        // 轮播图
        carousel.render({
            elem: '#test1'
            ,width: '100%' //设置容器宽度
            ,arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
            ,arrow: 'hover' // 切换箭头默认显示状态，可选值为 hover（悬停显示） always（始终显示） none（始终不显示）
            ,interval: '3000' // 自动切换的时间间隔，单位：ms（毫秒），不能低于800
        });
    });

@@ -403,13 +403,13 @@
                radius: '50%',
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: [[0.09, 'lime'], [0.82, '#1e90ff'], [1, '#ff4500']],
                        color: [[0.09, '#0fe507'], [0.82, '#1e90ff'], [1, '#ff4500']],
                        width: 3,
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 10
                    }
                },
                axisLabel: {            // 坐标轴小标记
                axisLabel: {            // 坐标轴数字
                    fontWeight: 'bolder',
                    color: '#fff',
                    shadowColor: '#fff', //默认透明
@@ -436,7 +436,7 @@
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 5
                },
                title: {
                title: {    // 速度单位
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontWeight: 'bolder',
                        fontSize: 20,
@@ -446,7 +446,7 @@
                        shadowBlur: 10
                    }
                },
                detail: {
                detail: {   // 速度值
                    backgroundColor: 'rgba(30,144,255,0.8)',
                    borderWidth: 1,
                    borderColor: '#fff',
@@ -458,7 +458,7 @@
                        color: '#fff'
                    }
                },
                data: [{value: 40, name: 'm/min'}]
                data: [{value: 40, name: 'm/min\nx'}]
            },
            {
                name: '升降速度',
@@ -471,7 +471,7 @@
                splitNumber: 6,
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: [[0.29, 'lime'], [0.86, '#1e90ff'], [1, '#ff4500']],
                        color: [[0.32, '#0fe507'], [0.86, '#1e90ff'], [1, '#ff4500']],
                        width: 2,
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 10
@@ -523,15 +523,14 @@
                    shadowBlur: 5,
                    width: 80,
                    height: 30,
                    offsetCenter: [25, '20%'],       // x, y，单位px
                    offsetCenter: [35, '20%'],       // x, y，单位px
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontWeight: 'bolder',
                        color: '#fff'
                    }
                },
                data: [{value: 1.5, name: 'm/min'}]
                data: [{value: 1.5, name: 'y'}]
            },
            // 货叉最大速度，3.几米
            {
                name: '货叉速度',
                type: 'gauge',
@@ -544,11 +543,17 @@
                splitNumber: 2,
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: [[0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500']],
                        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控制线长
@@ -558,19 +563,19 @@
                        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';
                        }
                    }
                },
                // 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）控制线条样式
@@ -586,15 +591,33 @@
                    shadowBlur: 5
                },
                title: {
                    show: false
                    offsetCenter: [0, '-30%'],       // x, y，单位px
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontWeight: 'bolder',
                        fontStyle: 'italic',
                        color: '#fff',
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 10
                    }
                },
                detail: {
                    show: false
                    //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: 'gas'}]
                data: [{value: 0.5, name: 'z'}]
            },
            {
                name: '水表',
                name: '货叉位置',
                type: 'gauge',
                center: ['75%', '50%'],    // 默认全局居中
                radius: '30%',
@@ -605,7 +628,7 @@
                splitNumber: 2,
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: [[0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500']],
                        color: [[0.2, '#0fe507'], [0.8, '#1e90ff'], [1, '#ff4500']],
                        width: 2,
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 10
@@ -621,9 +644,9 @@
                    shadowBlur: 10,
                    formatter: function(v){
                        switch (v + '') {
                            case '0': return 'H';
                            case '1': return 'Water';
                            case '2': return 'C';
                            case '0': return '右';
                            case '1': return '中';
                            case '2': return '左';
                        }
                    }
                },
@@ -651,13 +674,6 @@
            }
        ]
    };
    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);


    /***********************************************************************************/
@@ -679,7 +695,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',  //坐标的字体颜色
@@ -713,45 +729,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:'#0cbad9', //折点颜色
                        lineStyle:{
                            color:'#07a093' //折线颜色
                        }
                    }
                }
            }
        }]
        ]
    };

    // 访问量报表加载
    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);
                }
            }
        });