hexiugang
/
iamberry-common-parent


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328
							<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />

<style>
	.charts-box{width:500px;height:400px;display: inline-block;position: relative;margin-right: 40px;margin-bottom: 40px;}
	.my-nav{width: 100%;height: 48px;background: #fff;display: table;text-align: center;}
	.my-nav>a{display: table-cell;vertical-align: middle; border: 1px solid #32a3d8;font-size: 15px;border-left: 0;color: #32a3d8;}
	.my-nav>a:first-child{border-left: 1px solid #32a3d8;}
	.my-nav>a.active{background-color: #32a3d8;color:#fff;}
</style>
<title>生产统计</title>
<#include "/base/list_base.ftl">
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 统计管理 <span class="c-gray en">&gt;</span> 生产统计 <a class="btn btn-success radius r mr-20" style="line-height:1.6em;margin-top:3px;background-color: #32a3d8;border: 1px solid #32a3d8;" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>
<div class="pd-20">
	<div style="width: 250px;margin-bottom: 20px;">
	<nav class="my-nav" id="tab-nav-menu">
		<a <#if machineType == '1'>class="active" </#if> onclick="machineTypeNormal(1);">净水机</a><a <#if machineType == '2'>class="active" </#if> onclick="machineTypeNormal(2);">冲奶机</a>
	</nav>
	</div>
	<div>
		<div class="charts-box">
	<div id="container" style="width:500px;height:400px;display: inline-block;"></div>
	</div>
		<div class="charts-box">
	<div id="container1" style="width:500px;height:400px;display: inline-block;"></div>
	</div>
	</div>
	<div>
	<div class="charts-box" style="height: 478px;background-color: #f5f5f5;">
		<div style="margin: 15px;">
		<nav class="my-nav" id="tab-nav-map">
            <#list processList as list>
                <a  name="${list.processId }" <#if list_index == 0>class="active"</#if> >${list.processName }</a>
            </#list>
		</nav>
		</div>
	<div id="container3" style="width:500px;height:400px;display: inline-block;"></div>
	</div>	
		<div class="charts-box" style="height: 478px;">
	<div id="container2" style="width:500px;height:478px;display: inline-block;"></div>
	</div>
	
	</div>
</div>
<script type="text/javascript" src="${path}/common/lib/hcharts/Highcharts/5.0.6/js/highcharts.js"></script>
<!--<script type="text/javascript" src="lib/Highcharts/4.1.7/js/modules/exporting.js"></script>-->
<script type="text/javascript">
$(function () {
	
});	

 var chart =new Highcharts.Chart('container', {
        chart: {
            type: 'column',
            backgroundColor:'#f5f5f5'
        },
        title: {
            text: '每月生产数量'
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            categories: [
                '一月',
                '二月',
                '三月',
                '四月',
                '五月',
                '六月',
                '七月',
                '八月',
                '九月',
                '十月',
                '十一月',
                '十二月'
            ]
        },
        legend: {
            enabled: false
        },
        yAxis: {
            min: 0,
            title: {
                text: '数量'
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0"> </td>' +
                '<td style="padding:0"><b>{point.y} 台</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: ' ',
            data: ${years!''}

        }]
    });
    
    var chart1 =new Highcharts.Chart('container1', { 
        chart: {
            type: 'column',
            backgroundColor:'#f5f5f5'
        },
        title: {
            text: '七天每日生产数量'
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            categories: ${monthDay!''}
        },
        legend: {
            enabled: false
        },
        yAxis: {
            min: 0,
            title: {
                text: '数量'
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr></td>' +
                '<td style="padding:0"><b>{point.y} 台</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: ' ',
            data: ${days!''}

        }]
    });
    
  var chart2 =new Highcharts.Chart('container2', {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            backgroundColor:'#f5f5f5'
        },
        title: {
            text: '流程异常'
        },
        subtitle: {
            text: '共生产台${machineNum!''}机器，${machineAbnormality!''}台流程异常<span style="color:#fba62e;">异常率${abnormalityPercentage!''}%</span>'
        },
        tooltip: {
    	    pointFormat: '<b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    format: '{point.percentage:.1f} %'
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'Browser share',
            colors: ['#2adaa7', '#fba62e', '#90ed7d', '#f7a35c', '#8085e9', '#f15c80', '#e4d354', '#2b908f', '#f45b5b', '#91e8e1'],
            data: [
                ['正常',   ${normalPercentage!''}],
                {
                    name: '异常',
                    y: ${abnormalityPercentage!''},
                    sliced: true,
                    selected: true
                },
            ]
        }]
    });
  var chart3 =new Highcharts.Chart('container3', {

        chart: {
            type: 'column',
            backgroundColor:'#f5f5f5'
        },
        title: {
            text: ''
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            categories: ${desString!''}
        },
        legend: {
            enabled: false
        },
        yAxis: {
            min: 0,
            title: {
                text: '类型'
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key} ：</span><table>',
            pointFormat: '<tr>' +
                '<td style="padding:0"><b>{point.y} 台</b></td></tr>',
            footerFormat: '</table>',
            shared: false,
            useHTML: false
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: ' ',
            data: ${nodeString!''}

        }]
    });
    
    
//按钮切换    
$(document).on('click', '#tab-nav-menu>a', function() {
	$(this).addClass("active").siblings().removeClass("active");
	//这里写更新1，2，3，4图数据的代码，逻辑自己判断
});	


$(document).on('click', '#tab-nav-map>a', function() {
	$(this).addClass("active").siblings().removeClass("active");
    var processId = $(this).attr("name");
    $.ajax({
        "type" : "post",
        "url" : "${path}/admin/machine/_node_normal",
        "dataType" : "json",
        "data" :{processId : processId},
        "success" : function(data) {
            if(data.returnCode == 200){
                var desString = eval(data.desString);
                var nodeString = eval(data.nodeString);
                chart3.update({
                    chart: {
                        type: 'column',
                        backgroundColor:'#f5f5f5'
                    },
                    title: {
                        text: ''
                    },
                    subtitle: {
                        text: ''
                    },
                    xAxis: {
                        categories: desString
                    },
                    legend: {
                        enabled: false
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: '类型'
                        }
                    },
                    tooltip: {
                        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                        pointFormat: '<tr><td style="color:{series.color};padding:0"> </td>' +
                        '<td style="padding:0"><b>{point.y} 台</b></td></tr>',
                        footerFormat: '</table>',
                        shared: false,
                        useHTML: false
                    },
                    plotOptions: {
                        column: {
                            pointPadding: 0.2,
                            borderWidth: 0
                        }
                    },
                    series: [{
                        name: ' ',
                        data: nodeString

                    }]
                });
            }else{
                layer.msg('查询失败', {icon: 2, time: 2000});
            }
        },
        "error":function(data){
            layer.msg('操作失败', {icon: 2, time: 2000});
        }
    });

});

function machineTypeNormal(machineType) {
    window.location.href=root_path + '/admin/machine/_produced_abnormality_statistics?machineType='+machineType;
}
</script>
</body>
</html>