205 lines
5.1 KiB
Plaintext
205 lines
5.1 KiB
Plaintext
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
|
<%@ page import="com.sipai.tools.SessionManager"%>
|
|
<%
|
|
SessionManager sessionManager = new SessionManager();
|
|
%>
|
|
<%String contextPath = request.getContextPath();%>
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title></title>
|
|
<script src="<%=contextPath%>/JS/Highcharts-3.0.6/js/chart/jquery.min.js" charset="utf-8"></script>
|
|
<script src="<%=contextPath%>/JS/Highcharts-3.0.6/js/chart/highcharts.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="<%=contextPath%>/JS/Highcharts-3.0.6/js/chart/highcharts-more.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="<%=contextPath%>/JS/Highcharts-3.0.6/js/chart/solid-gauge.js" type="text/javascript" charset="utf-8"></script>
|
|
<script type="text/javascript">
|
|
var ext = ext || {};
|
|
ext.contextPath = '<%=contextPath%>';
|
|
|
|
$(function() {
|
|
$.ajaxSetup({
|
|
async : false
|
|
});
|
|
})
|
|
//同步
|
|
var gosmpid ="${gosmpid}";
|
|
var casmpid ="${gcasmpid}";
|
|
|
|
var getSpeedFun = function(mpid) {
|
|
var datay = $.get(ext.contextPath +"/material/cuttercncinfo/getInfo.do?mpid="+mpid);
|
|
return parseFloat(datay.responseText);
|
|
};
|
|
|
|
</script>
|
|
<body>
|
|
<div style="width: 600px; height: 250px; margin: 0 auto">
|
|
<div id="container-speed" style="width: 300px; height: 200px; float: left"></div>
|
|
<div id="container-rpm" style="width: 300px; height: 200px; float: left"></div>
|
|
</div>
|
|
<script language="JavaScript">
|
|
$(document).ready(function() {
|
|
var chart = {
|
|
type: 'solidgauge'
|
|
};
|
|
var title = null;
|
|
|
|
var pane = {
|
|
center: ['50%', '85%'],
|
|
size: '140%',
|
|
startAngle: -90,
|
|
endAngle: 90,
|
|
background: {
|
|
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
|
|
innerRadius: '60%',
|
|
outerRadius: '100%',
|
|
shape: 'arc'
|
|
}
|
|
};
|
|
|
|
var tooltip = {
|
|
enabled: false
|
|
};
|
|
|
|
// the value axis
|
|
var yAxis = {
|
|
stops: [
|
|
[0.1, '#55BF3B'], // green
|
|
[0.5, '#DDDF0D'], // yellow
|
|
[0.9, '#DF5353'] // red
|
|
],
|
|
lineWidth: 0,
|
|
minorTickInterval: null,
|
|
tickPixelInterval: 400,
|
|
tickWidth: 0,
|
|
title: {
|
|
y: -70
|
|
},
|
|
labels: {
|
|
y: 16
|
|
},
|
|
min: 0,
|
|
max: 100,
|
|
title: {
|
|
text: 'G1进给速度'
|
|
}
|
|
};
|
|
|
|
var plotOptions = {
|
|
solidgauge: {
|
|
dataLabels: {
|
|
y: 5,
|
|
borderWidth: 0,
|
|
useHTML: true
|
|
}
|
|
}
|
|
};
|
|
|
|
var credits = {
|
|
enabled: false
|
|
};
|
|
|
|
var series = [{
|
|
name: 'G1进给速度',
|
|
data: [getSpeedFun("${gosmpid}")],
|
|
dataLabels: {
|
|
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
|
|
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
|
|
'<span style="font-size:12px;color:silver"> 百分比%</span></div>'
|
|
},
|
|
tooltip: {
|
|
valueSuffix: ' %'
|
|
}
|
|
}];
|
|
|
|
var json = {};
|
|
json.chart = chart;
|
|
json.title = title;
|
|
json.pane = pane;
|
|
json.tooltip = tooltip;
|
|
json.yAxis = yAxis;
|
|
json.credits = credits;
|
|
json.series = series;
|
|
$('#container-speed').highcharts(json);
|
|
|
|
|
|
// the value axis
|
|
yAxis = {
|
|
stops: [
|
|
[0.1, '#55BF3B'], // green
|
|
[0.5, '#DDDF0D'], // yellow
|
|
[0.9, '#DF5353'] // red
|
|
],
|
|
lineWidth: 0,
|
|
minorTickInterval: null,
|
|
tickPixelInterval: 400,
|
|
tickWidth: 0,
|
|
title: {
|
|
y: -70
|
|
},
|
|
labels: {
|
|
y: 16
|
|
},
|
|
min: 0,
|
|
max: 100,
|
|
title: {
|
|
text: '主轴转速'
|
|
}
|
|
};
|
|
|
|
series = [{
|
|
name: '主轴转速',
|
|
data: [getSpeedFun("${casmpid}")],
|
|
dataLabels: {
|
|
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
|
|
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span><br/>' +
|
|
'<span style="font-size:12px;color:silver"> 百分比%</span></div>'
|
|
},
|
|
tooltip: {
|
|
valueSuffix: ' %'
|
|
}
|
|
}];
|
|
|
|
json.yAxis = yAxis;
|
|
json.series = series;
|
|
$('#container-rpm').highcharts(json);
|
|
|
|
var chartFunction = function() {
|
|
// Speed
|
|
var chart = $('#container-speed').highcharts();
|
|
var point;
|
|
var newVal;
|
|
var inc;
|
|
|
|
if (chart) {
|
|
point = chart.series[0].points[0];
|
|
/*inc = Math.round((Math.random() - 0.5) * 100);
|
|
newVal = point.y + inc;
|
|
|
|
if (newVal < 0 || newVal > 200) {
|
|
newVal = point.y - inc;
|
|
}*/
|
|
point.update(getSpeedFun("${gosmpid}"));
|
|
}
|
|
|
|
// RPM
|
|
chart = $('#container-rpm').highcharts();
|
|
if (chart) {
|
|
point = chart.series[0].points[0];
|
|
/* inc = Math.random() - 0.5;
|
|
newVal = point.y + inc;
|
|
|
|
if (newVal < 0 || newVal > 5) {
|
|
newVal = point.y - inc;
|
|
}*/
|
|
|
|
point.update(getSpeedFun("${casmpid}"));
|
|
}
|
|
};
|
|
|
|
// Bring life to the dials
|
|
setInterval(chartFunction, 2000);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|