ProductionLineMonitor/ProductionLineMonitor.Web/wwwroot/js/energy-consumption/energy-consumption.js

$(".form-control").datepicker({
    format: 'yyyy-mm-dd',
    language: 'zh-CN',
    autoclose: true,
    todayBtn: 'linked'
}).on('changeDate', function () {

}).on('keydown', function (e) {
    return false;
});

var zTreeObj;
var setting = {
    check: {
        enable: true
    },
    view: {
        showIcon: false
    }
};

$.ajax({
    url: "/ProductionLine/GetProductionLineMachineTree",
    type: "GET",
    async: true,
    success: function (zNodes) {
        zTreeObj = $.fn.zTree.init($("#productionLineTree"), setting, zNodes);
    }
});

function getEnergyConsumptions() {
    var nodes = zTreeObj.getCheckedNodes(true);
    if (nodes.length === 0) {
        alert("请勾选设备！");
        return;
    }
    var ids = new Array();
    for (var i = 0; i < nodes.length; i++) {
        if (nodes[i].level === 1) {
            ids.push(nodes[i].id);
        }
    }
    if (ids.length === 0) {
        alert("请勾选设备！");
        return;
    }
    var startTime = $("#date1").val();
    var endTime = $("#date2").val();
    $.ajax({
        url: "/EnergyConsumption/GetEnergyConsumptionDtoByMes",
        type: "POST",
        async: true,
        data: {
            "ids": ids.toString(),
            "startTime": startTime,
            "endTime": endTime
        },
        success: function (rev) {
            if (rev.code === 0) {
                option.series = [];
                setX(rev.data.x);
                setLegend(rev.data.legend);
                for (var i = 0; i < rev.data.series.length; i++) {
                    addSerie(rev.data.series[i].name, "line", rev.data.series[i].data, 0, " kW·h", rev.data.series[i].id);
                }
                myChart.setOption(option, true);
            }
        }
    });
    option2.series = [];
    myChart2.setOption(option2, true);
    option3.series = [];
    myChart3.setOption(option3, true);
}

function setLegend(legend) {
    option.legend.data = legend;
}

function getHourEnergyConsumptions(id, time) {
    $.ajax({
        url: "/EnergyConsumption/GetHourEnergyConsumptionByMes",
        type: "POST",
        async: true,
        data: {
            "id": id,
            "time": time
        },
        success: function (rev) {
            if (rev.code === 0) {
                if (rev.data.series < 3) {
                    return;
                }

                $("#chartName2").text(rev.data.chartName + " 能耗/产能小时曲线");
                option2.series = [];
                addSerie2(rev.data.series[0].name, "line", rev.data.series[0].data, 0, " kW·h");
                addSerie2(rev.data.series[1].name, "line", rev.data.series[1].data, 1, " pcs");
                myChart2.setOption(option2, true);
                
                $("#chartName3").text(rev.data.chartName + " 能耗产能比");
                option3.series = [];
                addSerie3(rev.data.series[2].name, "line", rev.data.series[2].data, 0, "  kW·h/pcs");
                myChart3.setOption(option3, true);
            }
        }
    });
}


var dom = document.getElementById('container1');
var myChart = echarts.init(dom, 'dark');
var option;

option = {
    backgroundColor: '#001529',
    tooltip: {
        trigger: 'axis'
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    legend: {
        data: []
    },
    toolbox: {
        feature: {
            dataZoom: { yAxisIndex: 'none' },
            restore: {},
            saveAsImage: {}
        }
    },
    textStyle: {
        "fontSize": 16
    },
    xAxis: {
        type: 'category',
        /*boundaryGap: false,*/
        axisLabel:{
            /*interval: 0,*/
            fontSize: 16,
            formatter: function (value) {
                return value.substring(5, 13)
            }
        }
    },
    yAxis: {
        type: 'value',
        name: '能耗',
        axisLabel: {
            fontSize: 16,
            formatter: '{value} Kw·h'
        }
    },
    series: []
};

myChart.on('click', function (params) {
    //console.log(params);
    getHourEnergyConsumptions(params.seriesId, params.name);
});

if (option && typeof option === 'object') {
    myChart.setOption(option);
}

window.addEventListener('resize', myChart.resize);

function setX(x) {
    option.xAxis.data = x;
}

function addSerie(name, type, data, yIndex, company, id) {
    var serie = {
        id: id,
        name: name,
        type: type,
        yAxisIndex: yIndex,
        tooltip: {
            valueFormatter: function (value) {
                return value + company;
            }
        },
        label: {
            show: true
        },
        data: data
    }
    option.series.push(serie);
}

var dom2 = document.getElementById('container2');
var myChart2 = echarts.init(dom2, 'dark');
var option2;
option2 = {
    backgroundColor: '#001529',
    tooltip: {
        trigger: 'axis'
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    legend: {
        data: []
    },
    toolbox: {
        feature: {
            dataZoom: { yAxisIndex: 'none' },
            restore: {},
            saveAsImage: {}
        }
    },
    textStyle: {
        "fontSize": 16
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        axisLabel: {
            fontSize: 16,
            interval: 0,
            //formatter: function (value) {
            //    return value.substring(11, 13)
            //}
        }
    },
    yAxis: [
        {
            type: 'value',
            name: '能耗',
            axisLabel: {
                fontSize: 16,
                formatter: '{value} kW·h'
            }
        },
        {
            type: 'value',
            name: '产能',
            axisLabel: {
                fontSize: 16,
                formatter: '{value} pcs'
            }
        }
    ],
    series: []
};
if (option2 && typeof option === 'object') {
    myChart2.setOption(option);
}
window.addEventListener('resize', myChart2.resize);

function addSerie2(name, type, data, yIndex, company) {
    var serie = {
        name: name,
        type: type,
        yAxisIndex: yIndex,
        //stack: 'Total',
        tooltip: {
            valueFormatter: function (value) {
                return value + company;
            }
        },
        data: data
    }
    option2.series.push(serie);
}

var dom3 = document.getElementById('container3');
var myChart3 = echarts.init(dom3, 'dark');
var option3;
option3 = {
    backgroundColor: '#001529',
    tooltip: {
        trigger: 'axis'
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    legend: {
        data: []
    },
    toolbox: {
        feature: {
            dataZoom: { yAxisIndex: 'none' },
            restore: {},
            saveAsImage: {}
        }
    },
    textStyle: {
        "fontSize": 16
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        axisLabel: {
            interval: 0,
            fontSize: 16,
            //formatter: function (value) {
            //    return value.substring(11, 13)
            //}
        }
    },
    yAxis: {
        type: 'value',
        name: '能耗/产能',
        axisLabel: {
            fontSize: 16,
            formatter: '{value} kW·h/pcs'
        }
    },
    series: []
};
if (option3 && typeof option === 'object') {
    myChart3.setOption(option);
}
window.addEventListener('resize', myChart3.resize);

function addSerie3(name, type, data, yIndex, company) {
    var serie = {
        name: name,
        type: type,
        yAxisIndex: yIndex,
        tooltip: {
            valueFormatter: function (value) {
                return value + company;
            }
        },
        data: data
    }
    option3.series.push(serie);
}