//根据选择查看方式，调整展示角度
|
function resetGrainChartAlpha(type) {
|
var alpha = 40;
|
var beta = 0;
|
var distance = 165;
|
var boxWidth = 150;// 每列宽度
|
var boxDepth = 75;// 每行深度
|
|
var parentWidth = $('#grainChar3d').width();
|
boxWidth = parentWidth / numX; // 动态计算每列的宽度
|
|
if ("lay" == type) {// 层查看
|
alpha = 45;
|
beta = 0;
|
boxWidth = 150;// 每列宽度
|
boxDepth = 75;// 每行深度
|
// 调整数据展示
|
renderGrainByLay(1);
|
}
|
if ("row" == type) {// 行查看
|
alpha = 15;
|
beta = 0;
|
// 调整数据展示
|
renderGrainByRow(1);
|
}
|
if ("col" == type) {// 列查看
|
distance = 210;
|
alpha = 35;
|
beta = 75;
|
boxWidth = 80;
|
boxDepth = 150;
|
// 调整数据展示
|
renderGrainByCol(1);
|
}
|
if ("all" == type) {// 全部查看
|
alpha = 45;
|
beta = 0;
|
boxWidth = 150;// 每列宽度
|
boxDepth = 75;// 每行深度
|
// 调整数据展示
|
renderGrainByAll();
|
}
|
// 更新按钮信息
|
updateGrainBtn(type);
|
|
grainChar3d.option.grid3D.boxWidth = boxWidth;
|
grainChar3d.option.grid3D.boxDepth = boxDepth;
|
|
grainChar3d.option.grid3D.viewControl.distance = distance;
|
grainChar3d.option.grid3D.viewControl.alpha = alpha;
|
grainChar3d.option.grid3D.viewControl.beta = beta;
|
grainChar3d.chart.setOption(grainChar3d.option);
|
};
|
|
// 动态调整粮情的最大层行列展示
|
function resetGrainChart3d() {
|
var attr = grainData.cable.split("-");
|
var x = new Array();
|
var y = new Array();
|
var z = new Array();
|
numZ = attr[0];
|
numY = attr[1];
|
numX = attr[2];
|
|
for (var i = numX; i > 0; i--) {
|
x.push({
|
value : i + "列",
|
textStyle : {}
|
});
|
}
|
for (var i = 1; i <= numY; i++) {
|
y.push({
|
value : i + "行",
|
textStyle : {}
|
});
|
}
|
for (var i = numZ; i > 0; i--) {
|
z.push({
|
value : i + "层",
|
textStyle : {}
|
});
|
}
|
grainChar3d.option.xAxis3D.data = x;
|
grainChar3d.option.yAxis3D.data = y;
|
grainChar3d.option.zAxis3D.data = z;
|
|
// 默认渲染第一层
|
//renderGrainByLay(1);
|
|
//默认渲染全部
|
renderGrainByAll();
|
};
|
|
// 更新按钮显示
|
function updateGrainBtn(type) {
|
var btnNext = $("#btn_next");
|
var btnPre = $("#btn_pre");
|
if ("lay" == type) {
|
btnNext.text("下一层");
|
btnPre.text("上一层");
|
}
|
if ("row" == type) {// 行查看
|
btnNext.text("下一行");
|
btnPre.text("上一行");
|
}
|
if ("col" == type) {// 列查看
|
btnNext.text("下一列");
|
btnPre.text("上一列");
|
}
|
if ("all" == type) {
|
btnNext.text("下一层");
|
btnPre.text("上一层");
|
}
|
// 将信息保存在btnNext中
|
btnNext.attr("num", 1);
|
btnNext.attr("typeTag", type);
|
};
|
|
// 下一层/行/列
|
function grainNext() {
|
var btnNext = $("#btn_next");
|
var num = btnNext.attr("num");// 当前所在行/列/层
|
var type = btnNext.attr("typeTag");
|
num = Number(num) + 1;
|
if ("lay" == type) {// 层查看
|
if (num > numZ)
|
num = 1;
|
renderGrainByLay(num);
|
}
|
if ("row" == type) {// 行查看
|
if (num > numY)
|
num = 1;
|
renderGrainByRow(num);
|
}
|
if ("col" == type) {// 列查看
|
if (num > numX)
|
num = 1;
|
renderGrainByCol(num);
|
}
|
|
btnNext.attr("num", num);
|
};
|
|
// 上一层/行/列
|
function grainPre() {
|
var btnNext = $("#btn_next");
|
var num = btnNext.attr("num");// 当前所在行/列/层
|
var type = btnNext.attr("typeTag");
|
num = Number(num) - 1;
|
if ("lay" == type) {// 层查看
|
if (num < 1)
|
num = numZ;
|
renderGrainByLay(num);
|
}
|
if ("row" == type) {// 行查看
|
if (num < 1)
|
num = numY;
|
renderGrainByRow(num);
|
}
|
if ("col" == type) {// 列查看
|
if (num < 1)
|
num = numX;
|
renderGrainByCol(num);
|
}
|
btnNext.attr("num", num);
|
};
|
|
// 根据用户选择的列，渲染数据，从1开始
|
function renderGrainByCol(num) {
|
if (!num)
|
num = 1;
|
var result = new Array();
|
var listPoints = grainData.listPoints;
|
$.each(listPoints, function(index, data) {
|
if (num == (numX - data.x)) {
|
result.push([ data.x, data.y, (numZ - data.fz), data.temp ]);
|
}
|
});
|
|
// 根据选择调整样式
|
var dataList = grainChar3d.option.xAxis3D.data;
|
$.each(dataList, function(index, item) {
|
if (index == (numX - num)) {
|
dataList[index] = {
|
value : item.value,
|
textStyle : {
|
color : "#900",
|
fontSize : 18
|
}
|
}
|
} else {
|
dataList[index] = {
|
value : item.value
|
}
|
}
|
});
|
grainChar3d.option.xAxis3D.data = dataList;
|
grainChar3d.option.series[0].data = result;
|
grainChar3d.option.series[0].label.show = true;
|
grainChar3d.chart.setOption(grainChar3d.option);
|
};
|
|
// 根据用户选择的行，渲染数据，从1开始
|
function renderGrainByRow(num) {
|
if (!num) num = 1;
|
var result = new Array();
|
var listPoints = grainData.listPoints;
|
$.each(listPoints, function(index, data) {
|
if ((num - 1) == data.y) {
|
result.push([ data.x, data.y, (numZ - data.fz), data.temp ]);
|
}
|
});
|
// 根据选择调整当前层的样式
|
var yDataList = grainChar3d.option.yAxis3D.data;
|
$.each(yDataList, function(index, item) {
|
if (index == (num - 1)) {
|
yDataList[index] = {
|
value : item.value,
|
textStyle : {
|
color : "#900",
|
fontSize : 18
|
}
|
}
|
} else {
|
yDataList[index] = {
|
value : item.value
|
}
|
}
|
});
|
|
grainChar3d.option.yAxis3D.data = yDataList;
|
grainChar3d.option.series[0].data = result;
|
grainChar3d.option.series[0].label.show = true;
|
grainChar3d.chart.setOption(grainChar3d.option);
|
|
// 获取行信息
|
var row;
|
var listRows = grainData.listRows;
|
$.each(listRows, function(index, data) {
|
if ((num - 1) == data.y) {
|
row = data;
|
}
|
});
|
// 更新层信息
|
$("#dynamicAve").text(row.tempAve);
|
$("#dynamicMax").text(row.tempMax);
|
$("#dynamicMin").text(row.tempMin);
|
$("#dynamicAveName").text("行均温");
|
$("#dynamicMaxName").text("行高温");
|
$("#dynamicMinName").text("行低温");
|
};
|
|
// 根据用户选择的层，渲染数据，从1开始
|
function renderGrainByLay(num) {
|
var result = new Array();
|
var listPoints = grainData.listPoints;
|
$.each(listPoints, function(index, data) {
|
if (num == data.fz) {
|
result.push([ data.x, data.y, (numZ - data.fz), data.temp ]);
|
}
|
});
|
|
// 根据选择调整样式
|
var dataList = grainChar3d.option.zAxis3D.data;
|
$.each(dataList, function(index, item) {
|
if (index == (numZ - num)) {
|
dataList[index] = {
|
value : item.value,
|
textStyle : {
|
color : "#900",
|
fontSize : 18
|
}
|
}
|
} else {
|
dataList[index] = {
|
value : item.value
|
}
|
}
|
});
|
|
grainChar3d.option.zAxis3D.data = dataList;
|
grainChar3d.option.series[0].data = result;
|
grainChar3d.option.series[0].label.show = true;
|
grainChar3d.chart.setOption(grainChar3d.option);
|
// 获取层信息
|
var lay;
|
var listLays = grainData.listLays;
|
$.each(listLays, function(index, data) {
|
if (num == data.fz) {
|
lay = data;
|
}
|
});
|
// 更新层信息
|
$("#dynamicAve").text(lay.tempAve);
|
$("#dynamicMax").text(lay.tempMax);
|
$("#dynamicMin").text(lay.tempMin);
|
$("#dynamicAveName").text("层均温");
|
$("#dynamicMaxName").text("层高温");
|
$("#dynamicMinName").text("层低温");
|
};
|
|
|
// 以层展示方式显示所有的数据
|
function renderGrainByAll() {
|
var result = new Array();
|
var listPoints = grainData.listPoints;
|
$.each(listPoints, function(index, data) {
|
result.push([ data.x, data.y, (numZ - data.fz), data.temp ]);
|
});
|
|
// 根据选择调整样式
|
var dataList = grainChar3d.option.zAxis3D.data;
|
$.each(dataList, function(index, item) {
|
dataList[index] = {
|
value : item.value,
|
textStyle : {
|
color : "#900",
|
fontSize : 18
|
}
|
}
|
});
|
|
grainChar3d.option.zAxis3D.data = dataList;
|
grainChar3d.option.series[0].data = result;
|
|
grainChar3d.option.series[0].label.show = false;
|
grainChar3d.chart.setOption(grainChar3d.option);
|
|
// 更新层信息
|
$("#dynamicAve").text("--");
|
$("#dynamicMax").text("--");
|
$("#dynamicMin").text("--");
|
$("#dynamicAveName").text("层均温");
|
$("#dynamicMaxName").text("层高温");
|
$("#dynamicMinName").text("层低温");
|
};
|
|
// 初始化三维粮情
|
function initGrainChar3d() {
|
var div = $('#grainChar3d');
|
var leftHeight = $("#mainLeft").height();
|
var topWidth = $("#topInfo").width();
|
var height = leftHeight - 10;
|
var width = topWidth;
|
|
height = 600;
|
|
div.css("height", height);
|
div.css("width", width);
|
|
var boxWidth = 150;// 每列宽度
|
var boxDepth = 75;// 每行深度
|
boxWidth = width / numX; // 动态计算每列的宽度
|
|
var x = [ '列7', '列6', '列5', '列4', '列3', '列2', '列1' ];
|
var y = [ '行1', '行2', '行3', '行4', '行5', '行6' ];
|
var z = [ '四层', '三层', '二层', '一层' ];
|
var data = [];
|
var option = {
|
xAxis3D : {
|
name : "",
|
show : false,
|
type : 'category',
|
data : x,
|
axisLine : {
|
interval : 0
|
},
|
axisLabel : {
|
interval : 0
|
}
|
},
|
yAxis3D : {
|
name : "",
|
show : false,
|
type : 'category',
|
data : y,
|
},
|
zAxis3D : {
|
name : "",
|
show : false,
|
type : 'category',
|
data : z
|
},
|
grid3D : {
|
boxWidth : boxWidth,
|
boxDepth : boxDepth,
|
light : {
|
main : {
|
intensity : 1.2,
|
shadow : true
|
},
|
ambient : {
|
intensity : 0.3
|
}
|
},
|
environment : new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {
|
offset : 0,
|
color : '#00aaff' // 天空颜色
|
}, {
|
offset : 0.7,
|
color : '#998866' // 地面颜色
|
}, {
|
offset : 1,
|
color : '#998866' // 地面颜色
|
} ], false),
|
|
splitArea : {
|
show : true,
|
interval : 0,
|
},
|
axisPointer : {
|
show : false
|
},
|
viewControl : {
|
projection : 'perspective',
|
autoRotate : false,
|
rotateSensitivity : 1, //鼠标旋转 1= 可以，0 不可以
|
zoomSensitivity : 1, //鼠标缩放 0 是无法缩放，其他代表灵敏度
|
distance : 170,
|
alpha : 45,
|
beta : 0
|
},
|
},
|
series : [ {
|
type : 'scatter3D',
|
symbol : 'pin',
|
symbolSize : 20,
|
shading : 'lambert',
|
label : {
|
show : true,
|
distance : 1,
|
position : 'left',
|
textStyle : {
|
fontSize : '16',
|
borderWidth : 1
|
},
|
formatter : function(params) {
|
if (params.value[3] == -100) {
|
return "备用";
|
}
|
if (params.value[3] == 85.0) {
|
return "故障";
|
}
|
return params.value[3].toFixed(1);
|
}
|
},
|
emphasis : {
|
show : true,
|
label : {
|
textStyle : {
|
fontSize : 24,
|
color : '#900'
|
}
|
},
|
itemStyle : {
|
color : '#900'
|
}
|
},
|
data : data,
|
itemStyle : {// 散点
|
normal : {
|
color : function(params) {
|
return getColor(params.value[3]);
|
}
|
}
|
}
|
} ]
|
};
|
var myChart = echarts.init(document.getElementById('grainChar3d'), "light");
|
myChart.setOption(option, true);
|
|
myChart.on('click', 'series', function(params) {
|
showPointChart(params.data);
|
});
|
return {
|
"chart" : myChart,
|
"option" : option
|
};
|
};
|
|
// 根据值获取展示颜色
|
var colors = [ '#05FF46', '#1FFF3E', '#45FF33', '#69FF29', '#94FF1B',
|
'#A8FF15', '#CDFF0C', '#FAFF00', '#FFEB01', '#FFA104', '#FF630E',
|
'#FF3116', '#FF0D1B' ];
|
function getColor(value) {
|
if ("备用" == value || -100 == value) {
|
return "#BBBBBB";
|
}
|
if ("故障" == value || -101 == value) {
|
return "#BBBBBB";
|
}
|
if (value <= -5) {
|
return "#05FF46";
|
}
|
if (value > -5 && value <= 0) {
|
return colors[1];
|
}
|
if (value > 0 && value <= 5) {
|
return colors[2];
|
}
|
if (value > 5 && value <= 11) {
|
return colors[3];
|
}
|
if (value > 11 && value <= 14) {
|
return colors[4];
|
}
|
if (value > 14 && value <= 17) {
|
return colors[5];
|
}
|
if (value > 17 && value <= 20) {
|
return colors[6];
|
}
|
if (value > 20 && value <= 23) {
|
return colors[7];
|
}
|
if (value > 23 && value <= 26) {
|
return colors[8];
|
}
|
if (value > 26 && value <= 29) {
|
return colors[9];
|
}
|
if (value > 29 && value <= 32) {
|
return colors[10];
|
}
|
if (value > 32 && value <= 35) {
|
return colors[11];
|
}
|
return "#FF0D1B";
|
};
|
|
/**
|
* 显示采集点走势
|
*
|
* @param pointData
|
*/
|
function showPointChart(pointData) {
|
// console.log(pointData);
|
var param = {
|
numX : numX,
|
numY : numY,
|
numZ : numZ,
|
x : pointData[0],
|
y : pointData[1],
|
z : pointData[2],
|
depotId : depotId,
|
batchId : grainData.batchId
|
};
|
|
// 渲染走势
|
var pointChart = initPointChartLine();
|
|
var index = layer.load();
|
var title = "粮情采集点走势：层=" + (numZ - param.z) + " 行=" + (param.y + 1) + " 列="
|
+ (numX - param.x);
|
|
layer.open({
|
type : 1,
|
title : 0,
|
area : [ '1350px', '580px' ],
|
shade : 0,
|
content : $('#pointChart'),
|
btn : 0,
|
closeBtn : 1
|
});
|
|
// 开始加载数据
|
$.ajax({
|
type : "POST",
|
url : "../../basic/grain/chart-point-line",
|
dataType : "json",
|
contentType : "application/json;charset=UTF-8",
|
data : JSON.stringify(param),
|
success : function(result) {
|
layer.close(index);
|
if (result.code != "0000") {
|
layer.msg(result.msg);
|
} else {
|
pointChart.option.title.text = title;
|
pointChart.option.xAxis[0].data = result.data.xaxisData;
|
pointChart.option.series[0].data = result.data.series[0].data;
|
pointChart.option.series[1].data = result.data.series[1].data;
|
pointChart.chart.setOption(pointChart.option);
|
}
|
},
|
error : function() {
|
layer.close(index);
|
layer.msg("获取当前仓库检测记录失败，请重新尝试");
|
}
|
});
|
|
};
|
|
// 采集位走势
|
function initPointChartLine() {
|
var option = {
|
title : {
|
text : '粮情采集点走势',
|
show : true
|
},
|
tooltip : {
|
trigger : 'axis',
|
axisPointer : {
|
type : 'cross',
|
label : {
|
backgroundColor : '#6a7985'
|
}
|
}
|
},
|
legend : {
|
data : [ '粮温', '平均粮温' ],
|
bottom : '5',
|
top : 'top'
|
},
|
grid : {
|
left : '3%',
|
right : '3%',
|
bottom : '45',
|
containLabel : true
|
},
|
xAxis : [ {
|
data : [ '01:00', '02:00', '03:00', '04:00', '05:00', '06:00',
|
'07:00', '08:00', '09:00', '10:00', '11:00', '12:00' ]
|
} ],
|
yAxis : [ {
|
type : 'value'
|
} ],
|
dataZoom : [ {
|
start : 50,
|
end : 100
|
}, {
|
type : 'inside'
|
} ],
|
series : [
|
{
|
name : '粮温',
|
type : 'line',
|
data : [ 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0,
|
0.0, 0.0 ]
|
},
|
{
|
name : '平均粮温',
|
type : 'line',
|
data : [ 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0,
|
0.0, 0.0 ]
|
} ]
|
};
|
var myChart = echarts.init(document.getElementById("pointChartLine"),
|
"light");
|
myChart.setOption(option, true);
|
return {
|
"chart" : myChart,
|
"option" : option
|
};
|
};
|
