/*==========仓库类型为圆筒仓==========*/
|
//定义数据
|
var listPoints = [
|
{'z': 0, 'x': 0, 'y': 0, 'temp': 0.0},
|
{'z': 1, 'x': 0, 'y': 0, 'temp': 0.0},
|
{'z': 2, 'x': 0, 'y': 0, 'temp': 0.0},
|
{'z': 3, 'x': 0, 'y': 0, 'temp': 0.0},
|
{'z': 4, 'x': 0, 'y': 0, 'temp': 0.0},
|
{'z': 5, 'x': 0, 'y': 0, 'temp': 0.0},
|
{'z': 6, 'x': 0, 'y': 0, 'temp': 0.0},
|
{'z': 7, 'x': 0, 'y': 0, 'temp': 0.0},
|
{'z': 8, 'x': 0, 'y': 0, 'temp': 0.0},
|
{'z': 9, 'x': 0, 'y': 0, 'temp': 0.0}];
|
var listLays = [{z: 1, tempMin: 0.0, tempMax: 0.0, tempAve: 0.0}, {
|
z: 2,
|
tempMin: 0.0,
|
tempMax: 0.0,
|
tempAve: 0.0
|
}, {z: 3, tempMin: 0.0, tempMax: 0.0, tempAve: 0.0}, {z: 4, tempMin: 0.0, tempMax: 0.0, tempAve: 0.0}, {
|
z: 5,
|
tempMin: 0.0,
|
tempMax: 0.0,
|
tempAve: 0.0
|
}, {z: 6, tempMin: 0.0, tempMax: 0.0, tempAve: 0.0}, {z: 7, tempMin: 0.0, tempMax: 0.0, tempAve: 0.0}, {
|
z: 8,
|
tempMin: 0.0,
|
tempMax: 0.0,
|
tempAve: 0.0
|
}, {z: 9, tempMin: 0.0, tempMax: 0.0, tempAve: 0.0}, {z: 10, tempMin: 0.0, tempMax: 0.0, tempAve: 0.0}];
|
|
var distrList = [1];
|
var bottomList = [10];
|
//定义数据显示容器
|
var layPoints = [];
|
var colPoints = [];
|
var cirNum = distrList.length; //圈数
|
var layNum = getLayNum(); //层数
|
var longAxis = 100; //第一内圈半长轴
|
var shortAxis = 10; //第一内圈半短轴
|
var spaceCir = 35; //两圈间距
|
var intervalTop = 20; //距离顶端距离
|
var spaceLay = 55; //层间距
|
var maxSpace = cirNum * spaceCir; //内外圈最大差值
|
var curVal = 1; //层数控制变量
|
var curCol = 0;//当前根，大于0表示按照根执行
|
var initAngle = 0; //角度控制
|
var clockwise = true; //时针控制
|
var displayMode = 'all'; //内外显示
|
var textSize = 16;//文本框大小
|
|
var center_x;//仓心X坐标
|
var center_y;//仓心y坐标
|
|
var arr = [];//定义绑定事件数组
|
|
//色块颜色常量
|
var color = null;
|
var R = 0;
|
var G = 0;
|
var B = 0;
|
var ctx;
|
var timer;
|
var t = -2;
|
var caseHeight, sum_long;
|
|
var isSleep = true;
|
|
// 初始化参数
|
function initCanvasParam() {
|
isSleep = true;
|
cirNum = distrList.length; // 圈数
|
layNum = getLayNum(); // 层数
|
maxSpace = cirNum * spaceCir; // 内外圈最大差值
|
curVal = 1; // 层数控制变量
|
curCol = 0;
|
displayMode = 'all'; // 内外显示
|
arr = [];// 定义绑定事件数组
|
};
|
//获取层配置中的最高层值
|
function getLayNum() {
|
var i = 1;
|
bottomList.forEach(function (value, index, array) {
|
if (value > i) i = value;
|
});
|
return i;
|
};
|
|
|
//绘制主程序
|
function draw() {
|
var canvas = document.getElementById('canvas');
|
ctx = canvas.getContext('2d');
|
center_x = canvas.width / 3; //仓心X坐标
|
center_y = shortAxis / 3 + maxSpace + intervalTop; //仓心y坐标
|
ctx.strokeStyle = "black";
|
ctx.lineWidth = 1;
|
autoAdjust();
|
make_ellipse(ctx);
|
gainData(ctx);
|
entityBlock(ctx);
|
make_top_ellipse(ctx);
|
title(ctx);
|
showIndex(canvas, ctx);
|
}
|
|
//绘制顶部椭圆
|
function make_top_ellipse() {
|
//绘制顶部椭圆
|
ctx.beginPath();
|
ctx.strokeStyle = "rgba(0,0,0,0.5)";
|
ctx.ellipse(center_x, center_y, longAxis + maxSpace, shortAxis + maxSpace, 0, 0, Math.PI * 2);
|
ctx.stroke();
|
ctx.closePath();
|
}
|
|
//高度自调整
|
function autoAdjust() {
|
//设置仓高
|
caseHeight = spaceLay * (layNum - 1);
|
//计算仓库占画布总高
|
sum_long = caseHeight + 2 * (maxSpace + shortAxis + intervalTop);
|
//总高越界进行调整层间距
|
if (eval(canvas.height) < eval(sum_long)) {
|
//仓管设置为最高
|
caseHeight = canvas.height - 2 * (maxSpace + shortAxis + intervalTop);
|
//调整层间距
|
spaceLay = caseHeight / layNum;
|
}
|
};
|
|
//绘制仓体
|
function make_ellipse(ctx) {
|
|
//绘制仓左右边界
|
ctx.beginPath();
|
ctx.moveTo(center_x + (longAxis + maxSpace), center_y);
|
ctx.lineTo(center_x + (longAxis + maxSpace), center_y + caseHeight)
|
ctx.moveTo(center_x - (longAxis + maxSpace), center_y);
|
ctx.lineTo(center_x - (longAxis + maxSpace), center_y + caseHeight)
|
ctx.stroke();
|
ctx.closePath();
|
|
//填充背部
|
var grd = ctx.createRadialGradient(center_x, center_y + caseHeight - longAxis, shortAxis, center_x, center_y + caseHeight - 2 * longAxis, 5 * longAxis);
|
//grd.addColorStop(0, "white");
|
// grd.addColorStop(1, "rgba(115,200,231,1)");
|
grd.addColorStop(0, "rgba(245,222,179)");
|
grd.addColorStop(1, "rgba(240 255 255)");
|
|
ctx.beginPath();
|
ctx.fillStyle = grd;
|
ctx.moveTo(center_x + (longAxis + maxSpace), center_y + caseHeight);
|
ctx.lineTo(center_x + (longAxis + maxSpace), center_y);
|
ctx.ellipse(center_x, center_y, longAxis + maxSpace, shortAxis + maxSpace, 0, 0, Math.PI, true);
|
ctx.lineTo(center_x - (longAxis + maxSpace), center_y + caseHeight);
|
|
ctx.fill();
|
ctx.closePath();
|
|
//绘制底部椭圆
|
var grd = ctx.createRadialGradient(center_x, center_y + caseHeight - longAxis, shortAxis, center_x, center_y + caseHeight - 2 * longAxis, 5 * longAxis);
|
// grd.addColorStop(0, "white");
|
// grd.addColorStop(1, "rgba(115,200,231,1)");
|
grd.addColorStop(0, "rgba(245,222,179)");
|
grd.addColorStop(1, "rgba(240 255 255)");
|
|
ctx.beginPath();
|
ctx.fillStyle = grd;
|
ctx.ellipse(center_x, center_y + caseHeight, longAxis + maxSpace, shortAxis + maxSpace, 0, 0, Math.PI * 2);
|
ctx.stroke();
|
ctx.fill();
|
ctx.closePath();
|
}
|
|
//过滤数据
|
function gainData() {
|
for (i = 0; i < listPoints.length; i++) {
|
if (listPoints[i]['z'] + 1 === curVal) {
|
layPoints.push(listPoints[i])
|
}
|
}
|
}
|
|
//过滤数据
|
function gainData2() {
|
for (i = 0; i < listPoints.length; i++) {
|
if ((listPoints[i]['y'] + 1) == curCol) {
|
colPoints.push(listPoints[i])
|
}
|
}
|
}
|
|
//进行排线，绘制色块
|
function entityBlock(ctx) {
|
var z_peak = [1, cirNum];
|
var color_list = ["e9e9e9", "bbe5cc", "f8dabc", "f4c8d5", "958a9b", "9f9aa0"];
|
|
var turns = cirNum;
|
for (i = 0; i < bottomList.length; i++) {
|
if(curVal > bottomList[i]){
|
turns = turns - 1;
|
}
|
}
|
|
var showMax = turns;
|
//循环生成每圈
|
for (i = turns; i >= 1; i--) {
|
|
//内外显示逻辑判断
|
if ((displayMode === 'outside') && !(i === cirNum)) {
|
continue;
|
} else if ((displayMode === 'inner') && i === cirNum) {
|
showMax -= 1;
|
continue;
|
}
|
|
var splNum = distrList[i - 1];
|
//只有一列数据时候控制中心位置
|
if(splNum === 1){
|
point = null;
|
//循环找到对应点值
|
for(z = 0;z < layPoints.length; z++){
|
if((layPoints[z]['x'] +1 === i )&&(layPoints[z]['y'] === 0)){
|
point = layPoints[z];
|
break;
|
}
|
}
|
point_x = center_x ;
|
point_y = center_y + curVal * spaceLay ;
|
textBox(ctx,point,point_x,point_y);
|
continue;
|
}
|
|
|
ctx.beginPath();
|
|
ctx.strokeStyle = 'rgba(0,0,0,1)';
|
ctx.ellipse(center_x, center_y + (curVal) * spaceLay, longAxis + i * spaceCir, shortAxis + i * spaceCir, 0, 0, Math.PI * 2);
|
|
if (i === 1) {
|
var grd = ctx.createRadialGradient(center_x, center_y + caseHeight - longAxis, shortAxis, center_x, center_y + caseHeight - 2 * longAxis, 5 * longAxis);
|
grd.addColorStop(0, "rgba(245,222,179)");
|
grd.addColorStop(1, "rgba(240 255 255)");
|
|
ctx.fillStyle = grd;
|
ctx.fill();
|
|
} else {
|
var grd = ctx.createRadialGradient(center_x, center_y + caseHeight - longAxis, shortAxis, center_x, center_y + caseHeight - 2 * longAxis, 2 * longAxis);
|
grd.addColorStop(0, "white");
|
grd.addColorStop(1, "#" + color_list[i]);
|
ctx.fillStyle = grd;
|
ctx.fill();
|
}
|
|
ctx.stroke();
|
ctx.closePath();
|
|
//设置点值为null;
|
var point = null;
|
|
//每圈的起始与截止根,splNum为所在圈的根数
|
var startGen = 0, endGen = 0;
|
for(t = 0; t < distrList.length; t++){
|
if(t <= i - 1){
|
endGen += distrList[t];
|
}
|
}
|
startGen = endGen - splNum;
|
//循环生成圈内点
|
for (j = startGen; j < endGen; j++) {
|
//循环找到对应点值
|
for (z = 0; z < layPoints.length; z++) {
|
if ((layPoints[z]['x'] === (i - 1)) && (layPoints[z]['y'] === j)) {
|
point = layPoints[z];
|
break;
|
}
|
}
|
|
var angle;
|
//判断显示时针
|
if (clockwise) {
|
angle = (2 * Math.PI / splNum) * j + initAngle;
|
} else {
|
angle = (2 * Math.PI / splNum) * (splNum - j) + initAngle;
|
}
|
|
point_x = center_x + (longAxis + i * spaceCir) * Math.cos(angle);
|
point_y = center_y + curVal * spaceLay + (shortAxis + i * spaceCir) * Math.sin(angle);
|
if(point){
|
textBox(ctx, point, point_x, point_y)
|
}
|
}
|
}
|
}
|
|
|
//进行排线，绘制色块
|
function entityBlock2(ctx) {
|
//设置点值为null;
|
var point = null;
|
//循环生成圈内点
|
for (j = 0; j < colPoints.length; j++) {
|
point = colPoints[j];
|
point_x = center_x;
|
point_y = center_y + (j + 1) * spaceLay;
|
textBox(ctx, point, point_x, point_y)
|
}
|
}
|
|
//绘制一个圆形文本框
|
function textBox(ctx, point, x, y) {
|
val = point.temp;
|
|
if ((t % 2 === 1)) {
|
if (val == listLays[curVal - 1]['tempMax']) { //此点为最高温
|
ctx.fillStyle = "rgba(229,29,29,1)";
|
} else if (val == listLays[curVal - 1]['tempMin']) { //此点为最低温
|
ctx.fillStyle = "rgba(0,255,28,1)";
|
} else {
|
ctx.fillStyle = getColor(val);
|
}
|
} else {
|
ctx.fillStyle = getColor(val);
|
}
|
|
//如果是补点，不做点位渲染
|
if (val == -102) {
|
return;
|
}
|
if ("备用" != val) {
|
val = val.toFixed(1);
|
}
|
|
if(val <= -100){
|
val = "备用";
|
}
|
|
ctx.beginPath();
|
ctx.lineWidth = 0.75;
|
|
ctx.arc(x, y, textSize, 0, 2 * Math.PI);
|
ctx.stroke();
|
ctx.fill();
|
ctx.fillStyle = "rgba(0,0,0,1)";
|
ctx.textAlign = 'center';
|
|
|
ctx.font = "600 14px Arial";
|
ctx.fillText(val, x, y + 3);
|
ctx.closePath();
|
|
arr.push({
|
'x': x - 0.6 * textSize,
|
'y': y - 0.7 * textSize,
|
'width': 2.1 * textSize,
|
'height': 2.2 * textSize,
|
'type': 'val',
|
'lay': point['z'],
|
'val': point['temp'],
|
'cir': point['x'],
|
'rows': point['y']
|
})
|
}
|
|
//根据温度获取RGB
|
function getColor(val) {
|
if (val >= 50) {
|
color = "rgba(255,0,0,1)";
|
return color;
|
} else if (val >= 20) {
|
G = Math.round(255 - 255 * ((val - 20) / 30));
|
color = "rgba(255," + G + ",0,1)";
|
return color;
|
} else if (val >= 0) {
|
R = Math.round(100 + (155 / 20) * val);
|
B = Math.round(30 - 1.5 * val);
|
color = "rgba(" + R + ",255," + B + ",1)";
|
return color;
|
} else if (val >= -10) {
|
R = Math.round(100 - 6.6 * (val * (-1)));
|
G = Math.round(255 - 2.2 * (val * (-1)));
|
B = Math.round(30 + 1.2 * (val * (-1)));
|
color = "rgba(" + R + "," + G + "," + B + ",1)";
|
return color;
|
} else {
|
color = "rgba(34,233,42,1)";
|
return color;
|
}
|
}
|
|
//睡眠
|
function sleep() {
|
if(isSleep){
|
t++;
|
if (t >= 0) {
|
flash();
|
}
|
timer = setTimeout("sleep()", 400);
|
}
|
}
|
|
//闪烁程序
|
function flash() {
|
var canvas = document.getElementById('canvas');
|
var ctx = canvas.getContext('2d');
|
canvas.height = canvas.height;
|
layPoints = [];
|
arr = [];
|
make_ellipse(ctx);
|
gainData(ctx);
|
entityBlock(ctx);
|
make_top_ellipse(ctx);
|
title(ctx)
|
}
|
|
//闪烁程序
|
function flash2() {
|
var canvas = document.getElementById('canvas');
|
var ctx = canvas.getContext('2d');
|
canvas.height = canvas.height;
|
colPoints = [];
|
arr = [];
|
|
make_ellipse(ctx);
|
|
gainData2(ctx);
|
|
entityBlock2(ctx);
|
|
make_top_ellipse(ctx);
|
title(ctx)
|
}
|
|
//标题栏
|
function title(ctx) {
|
|
for (i = 1; i <= layNum; i++) {
|
|
start_x = center_x + (longAxis + maxSpace) + 20;
|
start_y = center_y + spaceLay * (i - 1);
|
|
if (curVal === i) {
|
var grad = ctx.createLinearGradient(start_x, start_y, start_x + 2 * spaceLay, start_y);
|
grad.addColorStop(0, "#2f2fff");
|
grad.addColorStop(0.7, "#b3b3ff");
|
grad.addColorStop(1, "#ffffff");
|
//设置为未选择时的渐变填充
|
} else {
|
var grad = ctx.createLinearGradient(start_x, start_y, start_x + 2 * spaceLay, start_y);
|
// grad.addColorStop(0, "#a2baef");
|
// grad.addColorStop(0.8, "#ffffff");
|
grad.addColorStop(0, "rgba(245,222,179)");
|
grad.addColorStop(1, "rgba(240 255 255)");
|
}
|
|
ctx.fillStyle = grad;
|
ctx.lineWidth = 1;
|
ctx.strokeStyle = 'rgba(214,223,232,1)';
|
ctx.beginPath();
|
ctx.moveTo(start_x, start_y + 1); //原点
|
ctx.lineTo(start_x + 1.8 * spaceLay, start_y + 1); //右移
|
ctx.lineTo(start_x + 1.8 * spaceLay, start_y + spaceLay - 1); //下移
|
ctx.lineTo(start_x, start_y + spaceLay - 1); //左移
|
ctx.lineTo(start_x, start_y + 1); //上移
|
ctx.stroke();
|
ctx.fill();
|
ctx.closePath();
|
//设置为选择时的字体填充
|
if (curVal === i) {
|
ctx.fillStyle = 'rgba(255,14,0,1)';
|
ctx.font = "600 14px Arial";
|
} else {
|
ctx.fillStyle = 'rgba(30,30,30,1)';
|
ctx.font = "14px Arial";
|
}
|
val = "第" + i + "层";
|
ctx.textAlign = 'center';
|
ctx.fillText(val, start_x + 0.9 * spaceLay, start_y + 0.7 * spaceLay);
|
arr.push({
|
'x': start_x,
|
'y': start_y + 1,
|
'width': 1.8 * spaceLay,
|
'height': spaceLay,
|
'num': i,
|
'type': 'title'
|
})
|
}
|
}
|
|
//绑定触发的事件
|
function draws(x, y, canvas, ctx) {
|
//创建点击事件的画布（画布2）
|
ctx.rect(0, 0, canvas.width, canvas.height);
|
arr.forEach(function (v, i) {
|
ctx.beginPath();
|
//绘制每一个对象的区域
|
ctx.rect(v.x, v.y, v.width, v.height);
|
ctx.closePath();
|
|
console.log(v);
|
|
//判断点是否在区域内
|
var showData;
|
if (ctx.isPointInPath(x, y)) {
|
//点的类型为值
|
if (v.type === 'val') {
|
//类型为val，则弹出点信息
|
showData = "当前层：" + (v.lay + 1) + "\n 当前电缆：第" + (v.rows + 1) + "根";
|
alert(showData);
|
} else { //其他类型则切换显示色块
|
curVal = v['num'];
|
flash();
|
}
|
}
|
})
|
}
|
|
//绑定事件
|
function showIndex(canvas, ctx) {
|
//整个画布对象添加点击事件
|
canvas.addEventListener('click', function location(e) {
|
x = e.clientX;
|
y = e.clientY;
|
draws(x, y, canvas, ctx);
|
}, false);
|
}
|
|
// --------------- 按钮点击事件---------------------
|
//上一行
|
function last() {
|
if (curVal === 1) {
|
curVal = Number(layNum);
|
} else {
|
curVal -= 1;
|
}
|
flash();
|
renderGrainByLay(curVal);
|
}
|
|
//下一行
|
function next() {
|
if (curVal === Number(layNum)) {
|
curVal = 1;
|
} else {
|
curVal += 1;
|
}
|
flash();
|
|
renderGrainByLay(curVal);
|
}
|
|
//根查看
|
function showCol() {
|
isSleep = false;
|
|
curCol = $("#value_col").val();
|
listPoints = grainData.listPoints;
|
listLays = grainData.listLays;
|
distrList = grainData.cable.split("-").map(Number);
|
bottomList = grainData.cableCir.split("-").map(Number);
|
|
flash2();
|
|
$("#switch_all").prop("checked", false);
|
form.render();
|
}
|
|
//角度旋转
|
function rotate() {
|
initAngle += (document.getElementById("rotate").value) * 2 * Math.PI / 360;
|
flash();
|
}
|
|
//全部显示点击事件
|
function display_all() {
|
isSleep = true;
|
displayMode = 'all';
|
flash();
|
}
|
|
//外部显示点击事件
|
function display_outside() {
|
isSleep = true;
|
displayMode = 'outside';
|
flash();
|
}
|
|
//内部显示点击事件
|
function display_inside() {
|
isSleep = true;
|
displayMode = 'inner';
|
flash();
|
}
|
|
// 初始化三维粮情
|
function initGrainChar3d() {
|
isSleep = true;
|
draw();
|
};
|
|
function clearGrainChart3d() {
|
initCanvasParam();
|
draw();
|
};
|
|
//重新渲染
|
function resetGrainChart3d() {
|
listPoints = grainData.listPoints;
|
listLays = grainData.listLays;
|
distrList = grainData.cable.split("-").map(Number);
|
bottomList = grainData.cableCir.split("-").map(Number);
|
|
initCanvasParam();
|
draw();
|
sleep();//开始闪烁
|
curType = "z";
|
curVal = 1;
|
renderGrainByLay(curVal);
|
}
|
|
// 根据用户选择的层，渲染数据，从1开始
|
function renderGrainByLay(num) {
|
var lay;
|
$.each(listLays, function (index, data) {
|
if (num == data.z) {
|
lay = data;
|
// 更新层信息
|
$("#dynamicAve").text(lay.tempAve);
|
$("#dynamicMax").text(lay.tempMax);
|
$("#dynamicMin").text(lay.tempMin);
|
$("#dynamicAveName").text("层均温");
|
$("#dynamicMaxName").text("层高温");
|
$("#dynamicMinName").text("层低温");
|
return;
|
}
|
});
|
};
|
