<%@ page language="java" contentType="text/html; charset=utf-8"
|
pageEncoding="utf-8"%>
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
<html>
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<script src="../pub/echarts.min.js"></script>
|
</head>
|
<body>
|
<div style="OVERFLOW-Y: auto; OVERFLOW-X:hidden;">
|
<form id="form" method="post">
|
<input type="hidden" id="mdFixCodeId" name ="mdFixCodeId">
|
<input type="hidden" id="remark" name ="remark">
|
<input type="hidden" id="zFixCode">
|
<input type="hidden" id="gFixCode">
|
<input type="hidden" id="zj">
|
<input type="hidden" id="gz">
|
<table style="OVERFLOW-Y: auto; OVERFLOW-X:hidden;">
|
<tr>
|
<td style="border: 1px solid #DDDDDD;"> <input onclick="checkIds(1)" style="width:20px;height:20px; padding-left:50px; padding-top: 100px;" type="checkbox" value="1" id = "checkBox1"></td>
|
<td style="border: 1px solid #DDDDDD;">
|
<h2 style="text-align: center;">在线监测数据统计图</h2>
|
<!-- 显示Echarts图表 -->
|
<div style="height: 300px;width: 1170px;" id="main_edit"></div>
|
</td>
|
</tr>
|
<tr>
|
<td style="border: 1px solid #DDDDDD;"> <input onclick="checkIds(2)" style="width:20px;height:20px; padding-left:50px; padding-top: 100px;" type="checkbox" value="2" id= "checkBox2"></td>
|
<td style="border: 1px solid #DDDDDD;">
|
<h2 style="text-align: center;">生产实绩故障数据统计图</h2>
|
<div id="mainBar_edit" style="height:300px;width: 1170px;"></div>
|
</td>
|
</tr>
|
<tr></tr>
|
</table>
|
</form>
|
<script type="text/javascript">
|
var zFixCode=""; //质检Id
|
var gFixCode=""; //故障统计Id
|
$(function (){
|
// 基于准备好的dom，初始化echarts实例
|
var myChart = echarts.init(document.getElementById('main_edit'));
|
// 指定图表的配置项和数据
|
var option = {
|
tooltip: {
|
trigger: 'axis', //坐标轴触发提示框，多用于柱状、折线图中
|
/*
|
控制提示框内容输出格式
|
formatter: '{b0}<br/><font color=#FF3333> ● </font>{a0} : {c0} ℃ ' +
|
'<br/><font color=#53FF53>● </font>{a1} : {c1} % ' +
|
'<br/><font color=#68CFE8> ● </font>{a3} : {c3} mm ' +
|
'<br/><font color=#FFDC35> ● </font>{a4} : {c4} m/s ' +
|
'<br/><font color=#B15BFF> ● </font>{a2} : {c2} hPa '
|
*/
|
},
|
|
dataZoom: [
|
{
|
type: 'slider', //支持鼠标滚轮缩放
|
start: 0, //默认数据初始缩放范围为10%到90%
|
end: 100
|
},
|
{
|
type: 'inside', //支持单独的滑动条缩放
|
start: 0, //默认数据初始缩放范围为10%到90%
|
end: 100
|
}
|
],
|
|
color:[
|
'#FF3333', //重量平均数
|
'#53FF53', //圆周平均数
|
'#B15BFF', //圆度平均数
|
'#FFCCCF', //长度平均数
|
'#FFDC35', //吸阻平均数
|
'#63CEEC', //总通风率
|
'#E93EFF' //硬度
|
],
|
toolbox : {
|
//显示策略，可选为：true（显示） | false（隐藏），默认值为false
|
show : true,
|
//启用功能，目前支持feature，工具箱自定义功能回调处理
|
feature : {
|
//辅助线标志
|
mark : {
|
show : true
|
},
|
//dataZoom，框选区域缩放，自动与存在的dataZoom控件同步，分别是启用，缩放后退
|
dataZoom : {
|
show : true,
|
title : {
|
dataZoom : '区域缩放',
|
dataZoomReset : '区域缩放后退'
|
}
|
},
|
//数据视图，打开数据视图，可设置更多属性,readOnly 默认数据视图为只读(即值为true)，可指定readOnly为false打开编辑功能
|
dataView : {
|
show : true,
|
readOnly : true
|
},
|
//magicType，动态类型切换，支持直角系下的折线图、柱状图、堆积、平铺转换
|
magicType : {
|
show : true,
|
type : [ 'line', 'bar' ]
|
},
|
//restore，还原，复位原始图表
|
restore : {
|
show : true
|
},
|
//saveAsImage，保存图片（IE8-不支持）,图片类型默认为'png'
|
saveAsImage : {
|
show : true
|
}
|
}
|
},
|
xAxis: { //X轴
|
type : 'category',
|
data : [] //先设置数据值为空，后面用Ajax获取动态数据填入
|
},
|
yAxis : [ //Y轴（这里我设置了两个Y轴，左右各一个）
|
{
|
//第一个（左边）Y轴，yAxisIndex为0
|
type : 'value',
|
name : '值',
|
/* max: 120,
|
min: -40, */
|
axisLabel : {
|
formatter: '{value}' //控制输出格式
|
}
|
}
|
|
],
|
series : [ //系列（内容）列表
|
{
|
name:'重量',
|
type:'line', //折线图表示（生成温度曲线）
|
symbol:'emptycircle', //设置折线图中表示每个坐标点的符号；emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
|
data:[] //数据值通过Ajax动态获取
|
},
|
|
{
|
name:'圆周',
|
type:'line',
|
symbol:'emptyrect',
|
data:[]
|
},
|
|
{
|
name:'圆度）',
|
type:'line',
|
symbol:'circle', //标识符号为实心圆
|
//与第二y轴有关
|
data:[]
|
},
|
|
{
|
name:'长度',
|
type:'line', //柱状图表示
|
//barMinHeight: 10, //柱条最小高度，可用于防止某数据项的值过小而影响交互
|
/* label: { //显示值
|
normal: {
|
show: true,
|
position: 'top'
|
}
|
}, */
|
data:[]
|
},
|
|
{
|
name:'吸阻',
|
type:'line',
|
symbol:'emptydiamond',
|
data:[]
|
},
|
{
|
name:'通风率',
|
type:'line',
|
symbol:'emptydiamond',
|
data:[]
|
},
|
{
|
name:'硬度',
|
type:'line',
|
symbol:'emptydiamond',
|
data:[]
|
}
|
]
|
};
|
|
myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
|
|
var weightAvg=[]; //重量平均值
|
var cirAvg=[]; //圆周平均值
|
var roundAvg=[]; //圆度平均值
|
var lenAvg=[]; //长度平均值
|
var xzAvg=[]; //吸阻平均值
|
var ventsAvg=[]; //总通风率平均值
|
var hdAvg=[]; //硬度平均值
|
var dates=[]; //时间数组
|
$.ajax({ //使用JQuery内置的Ajax方法
|
type : "post", //post请求方式
|
async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
|
url : "${pageContext.request.contextPath}/pms/onlineCheck/getJson.do", //请求发送到ShowInfoIndexServlet处
|
data : {param:"A0001"}, //请求内包含一个key为name，value为A0001的参数；服务器接收到客户端请求时通过request.getParameter方法获取该参数值
|
dataType : "JSON", //返回数据形式为json
|
success : function(result) {
|
result = JSON.parse(result);
|
//请求成功时执行该函数内容，result即为服务器返回的json对象
|
if (result != null && result.length > 0) {
|
for(var i=0;i<result.length;i++){
|
weightAvg.push(result[i].weightAvg);
|
cirAvg.push(result[i].cirAvg);
|
roundAvg.push(result[i].roundAvg);
|
lenAvg.push(result[i].lenAvg);
|
xzAvg.push(result[i].xzAvg);
|
ventsAvg.push(result[i].ventsAvg);
|
hdAvg.push(result[i].hdAvg);
|
dates.push(result[i].timestamp_);
|
}
|
myChart.hideLoading(); //隐藏加载动画
|
|
myChart.setOption({ //载入数据
|
xAxis: {
|
data: dates //填入X轴数据
|
},
|
series: [ //填入系列（内容）数据
|
{
|
// 根据名字对应到相应的系列
|
name: '重量',
|
data: weightAvg
|
},
|
{
|
name: '圆周',
|
data: cirAvg
|
},
|
{
|
name: '圆度',
|
data: roundAvg
|
},
|
{
|
name: '长度',
|
data: lenAvg
|
},
|
{
|
name: '吸阻',
|
data: xzAvg
|
},
|
{
|
name: '通风率',
|
data: ventsAvg
|
},
|
{
|
name: '硬度',
|
data: hdAvg
|
}
|
]
|
});
|
|
}
|
else {
|
//返回的数据为空时显示提示信息
|
alert("图表请求数据为空，可能服务器暂未录入上个班次的观测数据，您可以稍后再试！");
|
myChart.hideLoading();
|
}
|
|
},
|
error : function(errorMsg) {
|
//请求失败时执行该函数
|
alert("图表请求数据失败，可能是服务器开小差了");
|
myChart.hideLoading();
|
}
|
})
|
myChart.setOption(option); //载入图表
|
|
//--- 折柱 ---
|
//基于准备好的dom,初始化echart图表
|
var myChart2 = echarts.init(document.getElementById('mainBar_edit'));
|
//定义图表option
|
var option = {
|
//标题，每个图表最多仅有一个标题控件，每个标题控件可设主副标题
|
|
//提示框，鼠标悬浮交互时的信息提示
|
tooltip : {
|
//触发类型，默认（'item'）数据触发，可选为：'item' | 'axis'
|
trigger : 'axis'
|
},
|
dataZoom: [
|
{
|
type: 'slider', //支持鼠标滚轮缩放
|
start: 0, //默认数据初始缩放范围为10%到90%
|
end: 100
|
},
|
{
|
type: 'inside', //支持单独的滑动条缩放
|
start: 0, //默认数据初始缩放范围为10%到90%
|
end: 100
|
}
|
],
|
//图例，每个图表最多仅有一个图例
|
//legend : {
|
//显示策略，可选为：true（显示） | false（隐藏），默认值为true
|
// show : true,
|
//水平安放位置，默认为全图居中，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
|
// x : 'center',
|
//垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
|
// y : 'top',
|
//legend的data: 用于设置图例，data内的字符串数组需要与sereis数组内每一个series的name值对应
|
// data : [ '蒸发量', '降水量' ]
|
//},
|
//工具箱，每个图表最多仅有一个工具箱
|
toolbox : {
|
//显示策略，可选为：true（显示） | false（隐藏），默认值为false
|
show : true,
|
//启用功能，目前支持feature，工具箱自定义功能回调处理
|
feature : {
|
//辅助线标志
|
mark : {
|
show : true
|
},
|
//dataZoom，框选区域缩放，自动与存在的dataZoom控件同步，分别是启用，缩放后退
|
dataZoom : {
|
show : true,
|
title : {
|
dataZoom : '区域缩放',
|
dataZoomReset : '区域缩放后退'
|
}
|
},
|
//数据视图，打开数据视图，可设置更多属性,readOnly 默认数据视图为只读(即值为true)，可指定readOnly为false打开编辑功能
|
dataView : {
|
show : true,
|
readOnly : true
|
},
|
//magicType，动态类型切换，支持直角系下的折线图、柱状图、堆积、平铺转换
|
magicType : {
|
show : true,
|
type : [ 'line', 'bar' ]
|
},
|
//restore，还原，复位原始图表
|
restore : {
|
show : true
|
},
|
//saveAsImage，保存图片（IE8-不支持）,图片类型默认为'png'
|
saveAsImage : {
|
show : true
|
}
|
}
|
},
|
//是否启用拖拽重计算特性，默认关闭(即值为false)
|
calculable : true,
|
//直角坐标系中横轴数组，数组中每一项代表一条横轴坐标轴，仅有一条时可省略数值
|
//横轴通常为类目型，但条形图时则横轴为数值型，散点图时则横纵均为数值型
|
xAxis : [ {
|
//显示策略，可选为：true（显示） | false（隐藏），默认值为true
|
show : true,
|
//坐标轴类型，横轴默认为类目型'category'
|
type : 'category',
|
//类目型坐标轴文本标签数组，指定label内容。 数组项通常为文本，'\n'指定换行
|
data : []
|
} ],
|
//直角坐标系中纵轴数组，数组中每一项代表一条纵轴坐标轴，仅有一条时可省略数值
|
//纵轴通常为数值型，但条形图时则纵轴为类目型
|
yAxis : [ {
|
//显示策略，可选为：true（显示） | false（隐藏），默认值为true
|
show : true,
|
//坐标轴类型，纵轴默认为数值型'value'
|
type : 'value',
|
//分隔区域，默认不显示
|
splitArea : {
|
show : true
|
}
|
} ],
|
|
//sereis的数据: 用于设置图表数据之用。series是一个对象嵌套的结构；对象内包含对象
|
series : [
|
{
|
//系列名称，如果启用legend，该值将被legend.data索引相关
|
name : '停机时间',
|
//图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示。
|
type : 'bar',
|
//系列中的数据内容数组，折线图以及柱状图时数组长度等于所使用类目轴文本标签数组axis.data的长度，并且他们间是一一对应的。数组项通常为数值
|
data :[]
|
},
|
{
|
//系列名称，如果启用legend，该值将被legend.data索引相关
|
name : '停机次数',
|
//图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示。
|
type : 'bar',
|
//系列中的数据内容数组，折线图以及柱状图时数组长度等于所使用类目轴文本标签数组axis.data的长度，并且他们间是一一对应的。数组项通常为数值
|
data :[]
|
|
} ]
|
};
|
|
var names=[];
|
var times=[];
|
var times2=[];
|
$.ajax( {
|
url:"${pageContext.request.contextPath}/pms/sysUser/getSchStatfaultJson.do",
|
type:'post',
|
async : true,
|
dataType:'JSON',
|
success:function(data) {
|
var result = JSON.parse(data);
|
if(result != null && result.length>0){
|
for(var i=0;i<result.length;i++){
|
names.push(result[i].name);
|
times.push(result[i].time);
|
times2.push(result[i].times);
|
}
|
myChart2.setOption({ //载入数据
|
xAxis: {
|
data: names //填入X轴数据
|
},
|
series: [ //填入系列（内容）数据
|
{
|
// 根据名字对应到相应的系列
|
name: '停机时间',
|
data: times
|
},
|
{
|
name: '停机次数',
|
data: times2
|
}
|
]
|
});
|
}
|
},
|
error : function() {
|
// view("异常！");
|
alert("异常！");
|
}
|
});
|
//为echarts对象加载数据
|
myChart2.setOption(option);
|
$.ajax( {
|
url:"${pageContext.request.contextPath}/pms/sysUser/getModel.do",// 跳转到 action
|
type:'post',
|
cache:false,
|
dataType:'json',
|
data : {param:"edit"},
|
success:function(data) {
|
data = JSON.parse(data);
|
if(data!=null && data.length>0){
|
for(var i=0;i<data.length;i++){
|
if("YZSMK0001001"==data[i].type){
|
zFixCode = data[i].id;
|
}
|
if("YZSMK0001002"==data[i].type){
|
gFixCode = data[i].id;
|
}
|
}
|
document.getElementById("zFixCode").value = zFixCode;
|
document.getElementById("zj").value ="del";
|
document.getElementById("gFixCode").value = gFixCode;
|
document.getElementById("gz").value ="del";
|
$("#mdFixCodeId").val($("#zFixCode").val()+","+$("#gFixCode").val());
|
$("#remark").val($("#zj").val()+","+$("#gz").val());
|
}
|
},
|
error : function() {
|
// view("异常！");
|
alert("异常！");
|
}
|
});
|
});
|
|
function checkIds(num){
|
|
if(1==num){
|
if(document.getElementById("checkBox1").checked){
|
document.getElementById("zFixCode").value = zFixCode;
|
document.getElementById("zj").value ="save";
|
}else{
|
document.getElementById("zFixCode").value = zFixCode;
|
document.getElementById("zj").value ="del";
|
}
|
}else{
|
if(document.getElementById("checkBox2").checked){
|
document.getElementById("gFixCode").value = gFixCode;
|
document.getElementById("gz").value ="save";
|
}else{
|
document.getElementById("gFixCode").value = gFixCode;
|
document.getElementById("gz").value ="del";
|
}
|
}
|
$("#mdFixCodeId").val($("#zFixCode").val()+","+$("#gFixCode").val());
|
$("#remark").val($("#zj").val()+","+$("#gz").val());
|
}
|
</script>
|
</div>
|
</body>
|
</html>
|
