|
@@ -1,63 +1,63 @@
|
|
|
<!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" />
|
|
|
+<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:700px;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: 18px;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>
|
|
|
+<style>
|
|
|
+ .charts-box{width:700px;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: 18px;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"></i> 首页 <span class="c-gray en">></span> 统计管理 <span class="c-gray en">></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"></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:700px;height:400px;display: inline-block;"></div>
|
|
|
- </div>
|
|
|
- <div class="charts-box">
|
|
|
- <div id="container1" style="width:700px;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:700px;height:400px;display: inline-block;"></div>
|
|
|
- </div>
|
|
|
- <div class="charts-box" style="height: 478px;">
|
|
|
- <div id="container2" style="width:700px;height:478px;display: inline-block;"></div>
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
+ <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:700px;height:400px;display: inline-block;"></div>
|
|
|
+ </div>
|
|
|
+ <div class="charts-box">
|
|
|
+ <div id="container1" style="width:700px;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:700px;height:400px;display: inline-block;"></div>
|
|
|
+ </div>
|
|
|
+ <div class="charts-box" style="height: 478px;">
|
|
|
+ <div id="container2" style="width:700px;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 () {
|
|
|
-
|
|
|
- });
|
|
|
+$(function () {
|
|
|
+
|
|
|
+});
|
|
|
|
|
|
- var chart =new Highcharts.Chart('container', {
|
|
|
+ var chart =new Highcharts.Chart('container', {
|
|
|
chart: {
|
|
|
type: 'column',
|
|
|
backgroundColor:'#f5f5f5'
|
|
@@ -96,7 +96,7 @@
|
|
|
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>',
|
|
|
+ '<td style="padding:0"><b>{point.y} 台</b></td></tr>',
|
|
|
footerFormat: '</table>',
|
|
|
shared: true,
|
|
|
useHTML: true
|
|
@@ -113,8 +113,8 @@
|
|
|
|
|
|
}]
|
|
|
});
|
|
|
-
|
|
|
- var chart1 =new Highcharts.Chart('container1', {
|
|
|
+
|
|
|
+ var chart1 =new Highcharts.Chart('container1', {
|
|
|
chart: {
|
|
|
type: 'column',
|
|
|
backgroundColor:'#f5f5f5'
|
|
@@ -140,7 +140,7 @@
|
|
|
tooltip: {
|
|
|
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
|
|
|
pointFormat: '<tr></td>' +
|
|
|
- '<td style="padding:0"><b>{point.y} 台</b></td></tr>',
|
|
|
+ '<td style="padding:0"><b>{point.y} 台</b></td></tr>',
|
|
|
footerFormat: '</table>',
|
|
|
shared: true,
|
|
|
useHTML: true
|
|
@@ -157,8 +157,8 @@
|
|
|
|
|
|
}]
|
|
|
});
|
|
|
-
|
|
|
- var chart2 =new Highcharts.Chart('container2', {
|
|
|
+
|
|
|
+ var chart2 =new Highcharts.Chart('container2', {
|
|
|
chart: {
|
|
|
plotBackgroundColor: null,
|
|
|
plotBorderWidth: null,
|
|
@@ -172,7 +172,7 @@
|
|
|
text: '共生产台${machineNum!''}机器,${machineAbnormality!''}台流程异常<span style="color:#fba62e;">异常率${abnormalityPercentage!''}%</span>'
|
|
|
},
|
|
|
tooltip: {
|
|
|
- pointFormat: '<b>{point.percentage:.1f}%</b>'
|
|
|
+ pointFormat: '<b>{point.percentage:.1f}%</b>'
|
|
|
},
|
|
|
plotOptions: {
|
|
|
pie: {
|
|
@@ -201,7 +201,7 @@
|
|
|
]
|
|
|
}]
|
|
|
});
|
|
|
- var chart3 =new Highcharts.Chart('container3', {
|
|
|
+ var chart3 =new Highcharts.Chart('container3', {
|
|
|
|
|
|
chart: {
|
|
|
type: 'column',
|
|
@@ -228,7 +228,7 @@
|
|
|
tooltip: {
|
|
|
headerFormat: '<span style="font-size:10px">{point.key} :</span><table>',
|
|
|
pointFormat: '<tr>' +
|
|
|
- '<td style="padding:0"><b>{point.y} 台</b></td></tr>',
|
|
|
+ '<td style="padding:0"><b>{point.y} 台</b></td></tr>',
|
|
|
footerFormat: '</table>',
|
|
|
shared: false,
|
|
|
useHTML: false
|
|
@@ -245,84 +245,84 @@
|
|
|
|
|
|
}]
|
|
|
});
|
|
|
+
|
|
|
+
|
|
|
+//按钮切换
|
|
|
+$(document).on('click', '#tab-nav-menu>a', function() {
|
|
|
+ $(this).addClass("active").siblings().removeClass("active");
|
|
|
+ //这里写更新1,2,3,4图数据的代码,逻辑自己判断
|
|
|
+});
|
|
|
|
|
|
|
|
|
- //按钮切换
|
|
|
- $(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'
|
|
|
- },
|
|
|
+$(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: ''
|
|
|
- },
|
|
|
- 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
|
|
|
+ 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});
|
|
|
+ }]
|
|
|
+ });
|
|
|
+ }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;
|
|
|
- }
|
|
|
+});
|
|
|
+
|
|
|
+function machineTypeNormal(machineType) {
|
|
|
+ window.location.href=root_path + '/admin/machine/_produced_abnormality_statistics?machineType='+machineType;
|
|
|
+}
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|