/**定义变量**/
|
var listPoints = [];
|
var listLays = [];
|
var listRows = [];
|
/**列**/
|
var cols = 9;
|
/**层**/
|
var lays = 4;
|
/**行**/
|
var rows = 5;
|
|
var oneWidth;
|
var oneHeight;
|
//矩形高
|
var back_height;
|
//矩形长
|
var back_width;
|
//最大宽
|
var rect_max_width;
|
var width;
|
var height;
|
var x;
|
var y;
|
var display_mode = "all";
|
|
var edge_distance = 0;//设置边距
|
|
var blockWidth = 30;//色块宽度
|
var blockHeight = 15;//色块高度
|
var curType = "z";//显示类型
|
var curVal = 1; //显示类型的列层行
|
var shift;
|
var out_window_top;
|
var out_window_left;
|
var out_window_width;
|
|
//初始化参数，如果行数大于12列，隐藏左侧卡片信息，调整区域宽度
|
function initCanvasParam() {
|
if (cols > 12) {
|
$("#lq-left2").css("display", "none");
|
$("#lq-center").css("width", "100%");
|
$("#lq-center").css("overflow-x", "auto");
|
var wWidth = window.innerWidth;
|
var wHeight = window.innerHeight;
|
$("#lq-center").css("height", wHeight - 180);
|
if (wWidth < 1600) {
|
$("#canvas").attr("width", 1600);
|
} else {
|
$("#canvas").attr("width", wWidth - 100);
|
}
|
} else {
|
$("#lq-left2").css("display", "block");
|
$("#lq-center").css("width", "75%");
|
$("#canvas").attr("width", "1000");
|
}
|
|
oneWidth = 9 * blockWidth * getRatio();//一个分割快的宽度
|
oneHeight = 6 * blockHeight * getRatio();//一个分割快的高度
|
|
back_height = oneHeight * 2.1 * (2 - rows / 30);
|
back_width = 3 * blockWidth * cols * (2 - cols / 30) / 2;
|
rect_max_width = back_width + 0.5 * oneWidth;
|
rect_max_width = back_width + 0.5 * oneWidth;
|
width = oneWidth * 4;
|
height = oneHeight * 5;
|
x = back_width / 2 - rect_max_width / 2;
|
y = back_width / 2 - oneHeight * 2.8;
|
|
var canvasParent = $("#canvas_parent");
|
out_window_top = canvasParent.offset().top;
|
out_window_left = canvasParent.offset().left;
|
out_window_width = canvasParent.width();
|
};
|
|
initCanvasParam();
|
|
//色块颜色常量
|
var color = null;
|
var R = 0;
|
var G = 0;
|
var B = 0;
|
|
//行、列、层要显示点的集合
|
var x_points = [];
|
var y_points = [];
|
var z_points = [];
|
|
//事件(显示方式切换、弹出点的信息)判定区域对象的集合
|
var arr = [];
|
|
//设置定时器
|
var timer;
|
var t = -2;
|
|
function sleep() {
|
if (timer) {
|
clearInterval(timer);
|
}
|
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;
|
ctx.strokeStyle = "black";
|
ctx.lineWidth = 1;
|
arr = [];
|
x_points = [];
|
y_points = [];
|
z_points = [];
|
|
//清空图形画布
|
canvas.height = canvas.height;
|
//重新绘制图形画布
|
|
createBack(ctx);
|
createLeft(ctx);
|
createBottom(ctx, back_height);
|
|
gainData(listPoints, curType, curVal);
|
|
split(ctx);
|
|
entityBlock(ctx, curType, curVal);
|
|
title(ctx);
|
border(ctx)
|
}
|
|
//绘制主程序
|
function draw() {
|
var canvas = document.getElementById('canvas');
|
var ctx = canvas.getContext('2d');
|
|
shift = out_window_left;
|
if ((out_window_width - canvas.width) > 0) {
|
shift = out_window_left + (out_window_width - canvas.width) / 2;
|
}
|
edge_distance = (canvas.width - (oneWidth / 2 + back_width + 78)) / 2 + 35;//设置边距
|
|
ctx.strokeStyle = "black";
|
ctx.lineWidth = 1;
|
|
createBack(ctx);
|
createLeft(ctx);
|
createBottom(ctx, back_height);
|
gainData(listPoints, curType, curVal);
|
split(ctx);
|
entityBlock(ctx, curType, curVal);
|
|
title(ctx);
|
showIndex(canvas, ctx);
|
border(ctx);
|
|
};
|
|
//绘制矩形外边框
|
function border(ctx) {
|
ctx.beginPath();
|
ctx.lineWidth = 0.5;
|
ctx.strokeStyle = 'black';
|
ctx.moveTo(oneWidth / 2 + back_width + edge_distance, 0 * oneHeight);
|
ctx.lineTo(back_width + edge_distance, 2 * oneHeight);
|
ctx.lineTo(edge_distance, 2 * oneHeight);
|
ctx.moveTo(back_width + edge_distance, 2 * oneHeight + 0.5 * back_height);
|
ctx.lineTo(back_width + edge_distance, 2 * oneHeight);
|
ctx.stroke();
|
ctx.closePath();
|
}
|
|
//制造虚影
|
function split(context) {
|
//设置列切分虚影
|
for (i = 0; i <= cols; i++) {
|
var start_x = back_width / cols * i + edge_distance;
|
var start_y = 2 * oneHeight;
|
//设置透明度
|
context.fillStyle = "rgba(255,255,255,0.1)";
|
context.beginPath();
|
context.moveTo(start_x, start_y);
|
context.lineTo(start_x, start_y + 0.5 * back_height);
|
context.lineTo(start_x + oneWidth / 2, 0.5 * back_height);
|
context.lineTo(start_x + oneWidth / 2, 0);
|
context.lineTo(start_x, start_y);
|
context.fill();
|
context.closePath();
|
}
|
|
//设置行切分虚影
|
for (i = 0; i <= rows; i++) {
|
|
var start_x = oneWidth / 2 / rows * i + edge_distance;
|
var start_y = (2 * oneHeight) / rows * (rows - i);
|
//设置透明度
|
context.fillStyle = "rgba(255,255,255,0.1)";
|
// context.fillStyle = "rgba(150,150,150,1)";
|
context.beginPath();
|
context.moveTo(start_x, start_y);
|
context.lineTo(start_x + back_width, start_y);
|
context.lineTo(start_x + back_width, start_y + 0.5 * back_height);
|
context.lineTo(start_x, start_y + 0.5 * back_height);
|
context.lineTo(start_x, start_y);
|
context.fill();
|
context.closePath();
|
}
|
|
//设置层切分虚影
|
for (i = 0; i <= lays; i++) {
|
var start_x = oneWidth / 2 + edge_distance;
|
var y = (lays - i) * 0.5 * back_height / lays;
|
//设置透明度
|
context.fillStyle = "rgba(255,255,255,0.2)";
|
context.beginPath();
|
context.moveTo(start_x, y);
|
context.lineTo(start_x + back_width, y);
|
context.lineTo(back_width + edge_distance, 2 * oneHeight + y);
|
context.lineTo(edge_distance, 2 * oneHeight + y);
|
context.lineTo(start_x, y);
|
context.fill();
|
context.closePath();
|
}
|
|
}
|
|
function textbox(context, x, y, val, obj) {
|
if (val === null || val == -100 || val == -101) {
|
//设置空值时填充颜色
|
context.fillStyle = "rgba(125,146,159,1)";
|
} else {
|
//设置有值时填充颜色
|
context.fillStyle = "rgba(50,66,81,1)";
|
//将点击事件触发区域对象写入arr集合
|
// alert(pointX)
|
arr.push({
|
'x': x + shift - 10,
|
'y': y + out_window_top - 10,
|
'width': 40,
|
'height': 25,
|
'type': 'val',
|
'pointX': obj['x'] + 1,
|
'pointY': obj['y'] + 1,
|
'pointZ': obj['z'] + 1,
|
'val': val,
|
})
|
}
|
context.beginPath();
|
context.lineWidth = 1;
|
context.moveTo(x, y + 12);
|
context.lineTo(x + 5, y + 7);
|
context.arcTo(x + 15, y + 7, x + 15, y + 2, 5);
|
context.lineTo(x + 15, y - 3);
|
context.arcTo(x + 15, y - 8, x + 5, y - 8, 5);
|
context.lineTo(x - 10, y - 8);
|
context.arcTo(x - 15, y - 8, x - 15, y - 3, 5);
|
context.lineTo(x - 15, y + 2);
|
context.arcTo(x - 15, y + 7, x - 10, y + 7, 5);
|
context.lineTo(x - 5, y + 7)
|
context.lineTo(x, y + 12)
|
context.stroke();
|
context.fill();
|
context.textAlign = 'center';
|
context.fillStyle = "rgba(226,228,229,1)";
|
|
if (val === null || val <= -100) {
|
context.fillText("备用", x, y + 2);
|
} else if (val == -101) {
|
context.fillText("故障", x, y + 2);
|
} else {
|
context.fillText(val, x, y + 2);
|
}
|
context.textAlign = 'left';
|
context.closePath();
|
}
|
|
//数据筛选
|
function gainData(listPoints, curType, curVal) {
|
z_peak = [0, lays - 1];
|
x_peak = [0, cols - 1];
|
y_peak = [0, rows - 1];
|
|
//当层显示时，把要显示的点添加到z_points
|
if (curType === 'z') {
|
for (var i = 0; i < listPoints.length; i++) {
|
//设置全显示
|
if (display_mode === "all") {
|
if (listPoints[i]['z'] + 1 === curVal) {
|
z_points.push(listPoints[i])
|
}
|
// 设置外部显示
|
} else if (display_mode === "outside") {
|
if ((listPoints[i]['z'] + 1 === curVal)
|
&& ((x_peak.includes(listPoints[i]['x'])) || (y_peak
|
.includes(listPoints[i]['y'])))) {
|
z_points.push(listPoints[i]);
|
}
|
//设置内部显示
|
} else {
|
if ((listPoints[i]['z'] + 1 === curVal)
|
&& (!(x_peak.includes(listPoints[i]['x'])) && !(y_peak
|
.includes(listPoints[i]['y'])))) {
|
z_points.push(listPoints[i]);
|
}
|
}
|
}
|
}
|
|
//当列显示时，把要显示的点添加到x_points aaaa
|
if (curType === 'x') {
|
for (i = 0; i < listPoints.length; i++) {
|
//设置全显示
|
if (display_mode === "all") {
|
if (listPoints[i]['x'] === (cols - curVal)) {
|
x_points.push(listPoints[i])
|
}
|
} else if (display_mode === "outside") {// 设置外部显示
|
if ((listPoints[i]['x'] === (cols - curVal))
|
&& ((z_peak.includes(listPoints[i]['z'])) || (y_peak
|
.includes(listPoints[i]['y'])))) {
|
x_points.push(listPoints[i]);
|
}
|
|
} else {//设置内部显示
|
if ((listPoints[i]['x'] === (cols - curVal))
|
&& (!(z_peak.includes(listPoints[i]['z'])) && !(y_peak
|
.includes(listPoints[i]['y'])))) {
|
x_points.push(listPoints[i]);
|
}
|
}
|
}
|
}
|
|
//当行显示时，把要显示的点添加到y_points
|
if (curType === 'y') {
|
for (i = 0; i < listPoints.length; i++) {
|
|
//设置全显示
|
if (display_mode === "all") {
|
if (listPoints[i]['y'] + 1 === curVal) {
|
y_points.push(listPoints[i])
|
}
|
// 设置外部显示
|
} else if (display_mode === "outside") {
|
if ((listPoints[i]['y'] + 1 === curVal)
|
&& ((z_peak.includes(listPoints[i]['z'])) || (x_peak
|
.includes(listPoints[i]['x'])))) {
|
y_points.push(listPoints[i]);
|
}
|
//设置内部显示
|
} else {
|
if ((listPoints[i]['y'] + 1 === curVal)
|
&& (!(z_peak.includes(listPoints[i]['z'])) && !(x_peak
|
.includes(listPoints[i]['x'])))) {
|
y_points.push(listPoints[i]);
|
}
|
}
|
}
|
}
|
}
|
|
//生成色块
|
function entityBlock(context, curType, curVal) {
|
|
//定义行层列间隔
|
var y_interval = 2 * oneHeight / rows;
|
var x_interval = back_width / cols;
|
var z_interval = 0.5 * back_height / lays;
|
|
//显示方式为层
|
if (curType === 'z') {
|
//生成行
|
for (i = 1; i <= rows; i++) {
|
var start_x = (oneWidth / 2 / rows) * (i - 1) + edge_distance;
|
var start_y = (2 * oneHeight / rows) * (rows - i + 1) + curVal
|
* z_interval;
|
|
//生成列
|
for (j = 1; j <= cols; j++) {
|
|
//外部显示
|
if ((display_mode === "outside") && !y_peak.includes(i - 1)
|
&& !x_peak.includes(j - 1)) {
|
start_x += x_interval;
|
continue;
|
//内部显示
|
} else if ((display_mode === "inner")
|
&& (y_peak.includes(i - 1) || x_peak.includes(j - 1))) {
|
start_x += x_interval;
|
continue;
|
}
|
|
//声明色块数值
|
var val = null;
|
//声明点的序列值
|
var index = null;
|
|
//循环遍历找到对应色块
|
for (k = 0; k < z_points.length; k++) {
|
if ((z_points[k]['y'] + 1 === i)
|
&& (z_points[k]['x'] + 1 === j)) {
|
val = z_points[k]['temp']
|
index = k;
|
break;
|
}
|
}
|
|
//绘制色块
|
context.beginPath();
|
context.lineWidth = 1;
|
context.strokeStyle = 'rgba(224,235,242,1)'
|
context.moveTo(start_x, start_y);
|
context.lineTo(start_x + x_interval, start_y);
|
context.lineTo(start_x + x_interval + (oneWidth / 2 / rows),
|
start_y - y_interval);
|
context.lineTo(start_x + (oneWidth / 2 / rows), start_y
|
- y_interval);
|
context.lineTo(start_x, start_y);
|
|
//设置对应颜色
|
if (val === null || val == -100 || val == -101) {
|
context.fillStyle = "rgba(155,171,182,1)";
|
// val = "备用";
|
} else {
|
if (t % 2 === 1) {
|
if (listLays[curVal - 1]['tempMax'] && val == listLays[curVal - 1]['tempMax']) { //此点为最高温
|
context.fillStyle = "rgba(229,29,29,1)";
|
} else if (listLays[curVal - 1]['tempMin'] && val == listLays[curVal - 1]['tempMin']) { //此点为最低温
|
context.fillStyle = "rgba(0,255,28,1)";
|
} else {
|
context.fillStyle = getColor(val);
|
}
|
} else {
|
context.fillStyle = getColor(val);
|
}
|
}
|
context.fill();
|
context.stroke();
|
context.closePath();
|
|
//绘制点文本框
|
textbox(context, start_x + 0.5 * x_interval + 0.5
|
* (oneWidth / 2 / rows), start_y - 0.5 * y_interval,
|
val, z_points[index]);
|
//修改色块起始值
|
start_x += x_interval;
|
}
|
}
|
//显示方式为行
|
} else if (curType === 'y') {
|
//生成层
|
for (var i = 1; i <= lays; i++) {
|
var start_x = (oneWidth / 2 / rows) * (curVal - 1) + edge_distance;
|
var start_y = (2 * oneHeight / rows) * (rows - curVal + 1) + i
|
* z_interval;
|
|
//生成列
|
for (var j = 1; j <= cols; j++) {
|
|
//外部显示
|
if ((display_mode === "outside") && !z_peak.includes(i - 1)
|
&& !x_peak.includes(j - 1)) {
|
start_x += x_interval;
|
continue;
|
//内部显示
|
} else if ((display_mode === "inner")
|
&& (z_peak.includes(i - 1) || x_peak.includes(j - 1))) {
|
start_x += x_interval;
|
continue;
|
}
|
|
//声明色块数值
|
var val = null;
|
//声明点的序列值
|
var index = null;
|
|
//循环遍历找到对应色块
|
for (k = 0; k < y_points.length; k++) {
|
if ((y_points[k]['z'] + 1 === i)
|
&& (y_points[k]['x'] + 1 === j)) {
|
val = y_points[k]['temp']
|
index = k;
|
break;
|
}
|
}
|
|
////绘制一个色块,显示方式为正视图
|
context.fillStyle = "rgba(155,171,182,1)";
|
context.beginPath();
|
context.lineWidth = 1.5;
|
context.strokeStyle = 'rgba(224,235,242,1)'
|
context.moveTo(start_x, start_y);
|
context.lineTo(start_x + x_interval, start_y);
|
context.lineTo(start_x + x_interval, start_y - z_interval);
|
context.lineTo(start_x, start_y - z_interval);
|
context.lineTo(start_x, start_y);
|
|
//设置对应颜色
|
if (val === null || val == -100) {
|
context.fillStyle = "rgba(155,171,182,1)";
|
} else {
|
if (t % 2 === 1) {
|
if (val == listRows[curVal - 1]['tempMax']) { //此点为最高温
|
context.fillStyle = "rgba(229,29,29,1)";
|
} else if (val == listRows[curVal - 1]['tempMin']) { //此点为最低温
|
context.fillStyle = "rgba(0,255,28,1)";
|
} else {
|
context.fillStyle = getColor(val);
|
}
|
} else {
|
context.fillStyle = getColor(val);
|
|
}
|
}
|
|
context.fill();
|
context.stroke();
|
context.closePath();
|
|
//绘制点文本框
|
textbox(context, start_x + 0.4 * x_interval, start_y - 0.5
|
* z_interval, val, y_points[index]);
|
|
//修改色块起始值
|
start_x += x_interval;
|
}
|
}
|
|
//显示方式为列
|
} else if (curType === 'x') {
|
|
//生成一层
|
for (var i = lays; i > 0; i--) {
|
var start_x = (cols - curVal) * x_interval + edge_distance;
|
var start_y = (2 * oneHeight / rows) * (rows) + i * z_interval;
|
|
//生成一行
|
for (var j = 1; j <= rows; j++) {
|
|
//外部显示
|
if ((display_mode === "outside") && !z_peak.includes(i - 1)
|
&& !y_peak.includes(j - 1)) {
|
start_x += (oneWidth / 2 / rows);
|
start_y -= (2 * oneHeight / rows);
|
continue;
|
//内部显示
|
} else if ((display_mode === "inner")
|
&& (z_peak.includes(i - 1) || y_peak.includes(j - 1))) {
|
start_x += (oneWidth / 2 / rows);
|
start_y -= (2 * oneHeight / rows);
|
continue;
|
}
|
|
//声明色块数值
|
var val = null;
|
//声明点的序列值
|
var index = null;
|
|
//循环遍历找到对应色块
|
for (var k = 0; k < x_points.length; k++) {
|
if ((x_points[k]['y'] + 1 === j)
|
&& (x_points[k]['z'] === (i - 1))) {
|
val = x_points[k]['temp'];
|
index = k;
|
break;
|
}
|
}
|
;
|
|
//绘制一个色块,显示方式为侧视图
|
context.fillStyle = "rgba(155,171,182,1)";
|
context.beginPath();
|
context.lineWidth = 1.5;
|
context.strokeStyle = 'rgba(224,235,242,1)'
|
context.moveTo(start_x, start_y);
|
context.lineTo(start_x + (oneWidth / 2 / rows), start_y
|
- y_interval);
|
context.lineTo(start_x + (oneWidth / 2 / rows), start_y
|
- y_interval - z_interval);
|
context.lineTo(start_x, start_y - z_interval);
|
context.lineTo(start_x, start_y);
|
|
//设置对应颜色
|
if (val === null || val == -100) {
|
context.fillStyle = "rgba(155,171,182,1)";
|
} else {
|
context.fillStyle = getColor(val);
|
}
|
|
context.fill();
|
context.stroke();
|
context.closePath();
|
|
//绘制点文本框
|
textbox(context, start_x + 0.5 * (oneWidth / 2 / rows), start_y
|
- 0.5 * y_interval - 0.5 * z_interval, val,
|
x_points[index]);
|
|
//修改色块起始值
|
start_x += (oneWidth / 2 / rows);
|
start_y -= (2 * oneHeight / rows);
|
}
|
}
|
}
|
}
|
|
//绑定触发的事件
|
function draws(x, y, canvas, ctx) {
|
//创建点击事件的画布（画布2）需要考虑父框的位置
|
ctx.rect(0, 0, canvas.width, canvas.height);
|
//给arr集合中的每一个对象添加点击事件
|
arr.forEach(function (v, i) {
|
ctx.beginPath();
|
//绘制每一个对象的区域
|
ctx.rect(v.x, v.y, v.width, v.height);
|
ctx.closePath();
|
|
//判断点击点是否在区域中
|
if (ctx.isPointInPath(x, y)) {
|
//判断点击区域类型
|
if (v.type === 'val') {
|
//类型为val，则弹出点信息
|
// showData = "x=" + v.pointX + "\ny=" + v.pointY + "\nz=" + v.pointZ;
|
// alert(showData)
|
layer.msg("层=" + (v.pointZ) + "\n行=" + (v.pointY) + "\n列=" + (cols - v.pointX + 1) + "\n温度="
|
+ v.val);
|
} else { //其他类型则切换显示色块
|
//清空数据
|
curType = v['type'];
|
curVal = v['num'];
|
if (curType === 'x') {
|
curVal = cols - v['num'] + 1;
|
}
|
arr = [];
|
x_points = [];
|
y_points = [];
|
z_points = [];
|
|
//清空图形画布
|
canvas.height = canvas.height;
|
//重新绘制
|
createBack(ctx);
|
createLeft(ctx);
|
createBottom(ctx, back_height);
|
gainData(listPoints, curType, curVal);
|
split(ctx);
|
entityBlock(ctx, curType, curVal);
|
title(ctx);
|
border(ctx);
|
|
//更改Btn名称，同时更新层行列的选择
|
updateGrainBtn(true);
|
|
//切换为层显示
|
if (v['type'] === 'z') {
|
//起始点
|
start_x = v['start_x'];
|
start_y = v['start_y'];
|
|
//设计点击时的渐变
|
var grad = ctx.createLinearGradient(start_x, start_y,
|
start_x + 120, start_y);
|
grad.addColorStop(0, "#2f2fff");
|
grad.addColorStop(0.3, "#5858ff");
|
grad.addColorStop(0.7, "#b3b3ff");
|
grad.addColorStop(1, "#ffffff");
|
ctx.fillStyle = grad;
|
|
//开始绘制
|
ctx.beginPath();
|
ctx.lineWidth = 5;
|
ctx.strokeStyle = 'rgba(214,223,232,1)';
|
ctx.moveTo(start_x, start_y);
|
ctx.lineTo(start_x + 75, start_y);
|
ctx.lineTo(start_x + 75, start_y - 0.5
|
* (back_height / lays));
|
ctx.lineTo(start_x, start_y - 0.5 * (back_height / lays));
|
|
ctx.lineTo(start_x, start_y);
|
ctx.stroke();
|
ctx.fill();
|
|
//标题栏文本
|
ctx.fillStyle = 'rgba(255,14,0,1)';
|
val = "第" + v['num'] + "层";
|
ctx.font = "15px Arial";
|
ctx.fillText(val, start_x + 10, start_y + 5 - 0.5
|
* (back_height / lays) / 2);
|
|
//切换为行显示
|
} else if (v['type'] === 'y') {
|
//起始点
|
start_x = v['start_x'];
|
start_y = v['start_y'];
|
|
//设计点击时的渐变
|
var grad = ctx.createLinearGradient(start_x, start_y,
|
start_x + 120, start_y);
|
grad.addColorStop(0, "#2f2fff");
|
grad.addColorStop(0.3, "#5858ff");
|
grad.addColorStop(0.7, "#b3b3ff");
|
grad.addColorStop(1, "#ffffff");
|
ctx.fillStyle = grad;
|
|
//开始绘制
|
ctx.beginPath();
|
ctx.lineWidth = 5;
|
ctx.strokeStyle = 'rgba(214,223,232,1)';
|
ctx.moveTo(start_x, start_y);
|
ctx.lineTo(start_x + 75, start_y);
|
ctx.lineTo(start_x + 75 + (oneWidth / 2 / rows), start_y
|
- (2 * oneHeight / rows));
|
ctx.lineTo(start_x + (oneWidth / 2 / rows), start_y
|
- (2 * oneHeight / rows));
|
ctx.lineTo(start_x, start_y);
|
ctx.stroke();
|
ctx.fill();
|
|
//标题栏文本
|
ctx.fillStyle = 'rgba(255,14,0,1)';
|
val = "第" + v['num'] + "行";
|
|
if (rows > 10) {
|
ctx.font = "12px Arial";
|
ctx.fillText(val, start_x + 25, start_y - 5);
|
} else {
|
ctx.font = "15px Arial";
|
ctx.fillText(val, start_x + 25, start_y - 9);
|
}
|
|
//切换为列显示
|
} else if (v['type'] === 'x') {
|
//起始点
|
start_x = v['start_x'];
|
start_y = v['start_y'];
|
|
//设计点击时的渐变
|
var grad = ctx.createLinearGradient(start_x, start_y,
|
start_x + 120, start_y);
|
grad.addColorStop(0, "#2f2fff");
|
grad.addColorStop(0.3, "#5858ff");
|
grad.addColorStop(0.7, "#b3b3ff");
|
grad.addColorStop(1, "#ffffff");
|
ctx.fillStyle = grad;
|
|
//开始绘制
|
ctx.beginPath();
|
ctx.lineWidth = 5;
|
ctx.strokeStyle = 'rgba(214,223,232,1)';
|
ctx.moveTo(start_x, start_y);
|
ctx.lineTo(start_x - (oneWidth / 2 / rows), start_y
|
+ (2 * oneHeight / rows));
|
ctx.lineTo(start_x + (back_width / cols)
|
- (oneWidth / 2 / rows), start_y
|
+ (2 * oneHeight / rows));
|
ctx.lineTo(start_x + (back_width / cols), start_y);
|
ctx.lineTo(start_x, start_y);
|
ctx.stroke();
|
ctx.fill();
|
|
//标题栏文本
|
ctx.fillStyle = 'rgba(255,14,0,1)';
|
val = "第" + (cols - v['num'] + 1) + "列";
|
ctx.font = "15px Arial";
|
ctx.fillText(val, start_x - 0.5 * (oneWidth / 2 / rows),
|
start_y + 0.7 * (2 * oneHeight / rows));
|
}
|
}
|
}
|
});
|
}
|
|
//绑定事件
|
function showIndex(canvas, ctx) {
|
|
//整个画布对象添加点击事件
|
canvas.addEventListener('click', function location(e) {
|
x = e.clientX;
|
y = e.clientY;
|
draws(x, y, canvas, ctx);
|
}, false);
|
}
|
|
//行、列、层标题栏
|
function title(context) {
|
|
//层标题栏
|
for (i = 1; i <= lays; i++) {
|
//设置起始点
|
start_x = (oneWidth / 2) + back_width + edge_distance + 3;
|
start_y = 0.5 * (back_height / lays) * i;
|
|
//设置为选择时的渐变填充
|
if ((curType === "z") && (curVal === i)) {
|
var grad = context.createLinearGradient(start_x, start_y,
|
start_x + 120, start_y);
|
grad.addColorStop(0, "#2f2fff");
|
grad.addColorStop(0.3, "#5858ff");
|
grad.addColorStop(0.7, "#b3b3ff");
|
grad.addColorStop(1, "#ffffff");
|
//设置为未选择时的渐变填充
|
} else {
|
var grad = context.createLinearGradient(start_x, start_y,
|
start_x + 200, start_y);
|
grad.addColorStop(0, "#ffffff");
|
grad.addColorStop(0.8, "#a2baef");
|
}
|
context.fillStyle = grad;
|
|
//绘制
|
context.beginPath();
|
context.lineWidth = 5;
|
context.strokeStyle = 'rgba(214,223,232,1)';
|
context.moveTo(start_x, start_y);
|
context.lineTo(start_x + 75, start_y);
|
context.lineTo(start_x + 75, start_y - 0.5 * (back_height / lays));
|
context.lineTo(start_x, start_y - 0.5 * (back_height / lays));
|
context.lineTo(start_x, start_y);
|
context.stroke();
|
context.fill();
|
|
//设置为选择时的字体填充
|
if ((curType === "z") && (curVal === i)) {
|
context.fillStyle = 'rgba(255,14,0,1)';
|
//设置为未选择时的字体填充
|
} else {
|
context.fillStyle = 'rgba(30,30,30,1)';
|
}
|
|
//设置标题文本
|
val = "第" + i + "层";
|
context.font = "15px Arial";
|
context.fillText(val, start_x + 10, start_y + 5 - 0.5
|
* (back_height / lays) / 2);
|
|
//将显示方式切换事件加入arr数组
|
arr.push({
|
'x': start_x + 10 + shift,
|
'y': start_y - 0.5 * (back_height / lays) / 2 - 22
|
+ out_window_top,
|
'width': 60,
|
'height': 40,
|
'type': 'z',
|
'num': i,
|
'start_x': start_x,
|
'start_y': start_y
|
})
|
context.closePath();
|
}
|
|
//行标题栏
|
for (i = 1; i <= rows; i++) {
|
//设置起始点
|
start_x = back_width + (oneWidth / 2 / rows) * (i - 1) + edge_distance;
|
start_y = (2 * oneHeight + 0.5 * back_height) - (2 * oneHeight / rows)
|
* (i - 1) + 5;
|
|
//设置为选择时的渐变填充
|
if ((curType === "y") && (curVal === i)) {
|
var grad = context.createLinearGradient(start_x, start_y,
|
start_x + 120, start_y);
|
grad.addColorStop(0, "#2f2fff");
|
grad.addColorStop(0.3, "#5858ff");
|
grad.addColorStop(0.7, "#b3b3ff");
|
grad.addColorStop(1, "#ffffff");
|
//设置为未选择时的渐变填充
|
} else {
|
var grad = context.createLinearGradient(start_x, start_y,
|
start_x + 200, start_y);
|
grad.addColorStop(0, "#ffffff");
|
grad.addColorStop(0.8, "#a2baef");
|
}
|
context.fillStyle = grad;
|
|
//绘制
|
context.beginPath();
|
context.lineWidth = 5;
|
context.strokeStyle = 'rgba(215,224,230,1)';
|
context.moveTo(start_x, start_y);
|
context.lineTo(start_x + 75, start_y);
|
context.lineTo(start_x + 75 + (oneWidth / 2 / rows), start_y
|
- (2 * oneHeight / rows));
|
context.lineTo(start_x + (oneWidth / 2 / rows), start_y
|
- (2 * oneHeight / rows));
|
context.lineTo(start_x, start_y);
|
context.stroke();
|
context.fill();
|
|
//设置为选择时的字体填充
|
if ((curType === "y") && (curVal === i)) {
|
context.fillStyle = 'rgba(255,14,0,1)';
|
//设置为未选择时的字体填充
|
} else {
|
context.fillStyle = 'rgba(30,30,30,1)';
|
}
|
|
//设置标题文本
|
val = "第" + i + "行";
|
if (rows > 10) {
|
context.font = "12px Arial";
|
context.fillText(val, start_x + 25, start_y - 5);
|
} else {
|
context.font = "15px Arial";
|
context.fillText(val, start_x + 25, start_y - 9);
|
}
|
|
//将显示方式切换事件加入arr数组
|
arr.push({
|
'x': start_x + blockWidth + shift,
|
'y': start_y - blockHeight + out_window_top,
|
'width': 50,
|
'height': 20,
|
'type': 'y',
|
'num': i,
|
'start_x': start_x,
|
'start_y': start_y
|
})
|
context.closePath();
|
}
|
|
//列标题栏
|
for (i = 1; i <= cols; i++) {
|
//设置起始点
|
start_x = (back_width / cols) * (i - 1) + edge_distance;
|
start_y = (2 * oneHeight + 0.5 * back_height) + 5;
|
|
//设置为选择时的渐变填充
|
if ((curType === "x") && (curVal === (cols - i + 1))) {
|
var grad = context.createLinearGradient(start_x, start_y,
|
start_x + 120, start_y);
|
grad.addColorStop(0, "#2f2fff");
|
grad.addColorStop(0.3, "#5858ff");
|
grad.addColorStop(0.7, "#b3b3ff");
|
grad.addColorStop(1, "#ffffff");
|
context.strokeStyle = 'rgba(100,100,255,1)';
|
//设置为未选择时的渐变填充
|
} else {
|
context.strokeStyle = 'rgba(215,224,230,1)';
|
var grad = context.createLinearGradient(start_x, start_y,
|
start_x + 120, start_y);
|
grad.addColorStop(0, "#ffffff");
|
grad.addColorStop(0.8, "#a2baef");
|
}
|
context.fillStyle = grad;
|
|
//绘制
|
context.beginPath();
|
context.lineWidth = 5;
|
context.moveTo(start_x, start_y);
|
context.lineTo(start_x - (oneWidth / 2 / rows), start_y
|
+ (2 * oneHeight / rows));
|
context.lineTo(start_x + (back_width / cols) - (oneWidth / 2 / rows),
|
start_y + (2 * oneHeight / rows));
|
context.lineTo(start_x + (back_width / cols), start_y);
|
context.lineTo(start_x, start_y);
|
context.stroke();
|
context.fill();
|
|
//设置为选择时的字体填充
|
if ((curType === "x") && (curVal === (cols - i + 1))) {
|
context.fillStyle = 'rgba(255,14,0,1)';
|
//设置为未选择时的字体填充
|
} else {
|
context.fillStyle = 'rgba(30,30,30,1)';
|
}
|
val = "第" + (cols - i + 1) + "列";
|
context.font = "15px Arial";
|
context.fillText(val, start_x - 0.5 * (oneWidth / 2 / rows), start_y
|
+ 0.7 * (2 * oneHeight / rows));
|
//将显示方式切换事件加入arr数组
|
arr.push({
|
'x': start_x - 0.3 * (oneWidth / 2 / rows) + shift,
|
'y': start_y + 0.5 * (2 * oneHeight / rows) + out_window_top,
|
'width': 55,
|
'height': 25,
|
'type': 'x',
|
'num': i,
|
'start_x': start_x,
|
'start_y': start_y
|
})
|
context.closePath();
|
}
|
|
}
|
|
//制造底矩形
|
function createBottom(context, y) {
|
//设置填充样式
|
var gra = context.createRadialGradient(oneWidth, oneHeight, 0,
|
oneWidth / 2, oneHeight / 2, width * 100);
|
gra.addColorStop(0, "#c9dde8");
|
// gra.addColorStop(0.8, "white");
|
gra.addColorStop(1, "#c0deea");
|
var start_x = oneWidth / 2 + edge_distance;
|
|
//绘制矩形
|
context.fillStyle = "rgba(168,208,225,1)";
|
context.fillStyle = gra;
|
context.beginPath();
|
context.moveTo(start_x, 0.5 * back_height);
|
context.lineTo(edge_distance, 2 * oneHeight + 0.5 * back_height);
|
context.lineTo(edge_distance + back_width, 2 * oneHeight + 0.5
|
* back_height);
|
context.lineTo(start_x + back_width, 0.5 * back_height);
|
context.lineWidth = 1.5;
|
context.fill();
|
context.stroke();
|
context.closePath();
|
}
|
|
//制造背矩形
|
function createBack(context) {
|
|
//设置填充样式
|
var gra = context.createRadialGradient(oneWidth, oneHeight, 0,
|
oneWidth / 2, oneHeight / 2, width * 100);
|
gra.addColorStop(0, "#a8d0e1");
|
gra.addColorStop(1, "white");
|
|
//绘制
|
var start_x = oneWidth / 2 + edge_distance
|
var start_y = 0
|
context.fillStyle = "rgba(168,208,225,1)";
|
context.fillStyle = gra;
|
context.beginPath();
|
context.moveTo(start_x, start_y);
|
|
context.lineTo(start_x + back_width, start_y);
|
context.lineTo(start_x + back_width, 0.5 * back_height);
|
|
context.lineTo(start_x, 0.5 * back_height);
|
context.lineTo(start_x, start_y);
|
context.lineWidth = 1.5;
|
context.fill();
|
context.stroke();
|
context.closePath();
|
}
|
|
//制造左矩形
|
function createLeft(context) {
|
//绘制
|
var start_x = edge_distance;
|
var start_y = 2 * oneHeight;
|
context.fillStyle = "rgba(168,208,225,1)";
|
context.beginPath();
|
context.moveTo(start_x, start_y);
|
context.lineTo(start_x, start_y + 0.5 * back_height);
|
context.lineTo(oneWidth / 2 + start_x, 0.5 * back_height);
|
context.lineTo(oneWidth / 2 + start_x, 0);
|
context.lineTo(start_x, start_y);
|
context.lineWidth = 1.5;
|
context.stroke();
|
context.fill();
|
context.closePath();
|
}
|
|
//获取纵横比
|
function getRatio() {
|
var tmp = 1.3;
|
if (Screen.height > 1050) {
|
tmp = 1.05
|
if (rows <= 5)
|
tmp = 1.3
|
else if ((rows >= 6) && (rows <= 7))
|
tmp = 1.2
|
else if ((rows >= 8) && (rows <= 9))
|
tmp = 1.1
|
} else if ((Screen.height <= 1050) && (Screen.height > 960)) {
|
tmp = 1;
|
if (rows <= 5)
|
tmp = 1.3
|
else if ((rows >= 6) && (rows <= 7))
|
tmp = 1.2
|
else if ((rows >= 8) && (rows <= 9))
|
tmp = 1.1
|
} else if ((Screen.height <= 960) && (Screen.height > 900)) {
|
tmp = 0.9;
|
if (rows <= 7)
|
tmp = 1.2
|
else if (rows === 8)
|
tmp = 1.1
|
else if (rows === 9)
|
tmp = 1
|
} else if ((Screen.height <= 900) && (Screen.height > 800)) {
|
tmp = 0.8;
|
if (rows <= 6)
|
tmp = 1.2
|
else if (rows === 7)
|
tmp = 1.1
|
else if (rows === 8)
|
tmp = 1
|
else if (rows === 9)
|
tmp = 0.9
|
} else if ((Screen.height <= 800) && (Screen.height > 768)) {
|
tmp = 0.75;
|
if (rows <= 6)
|
tmp = 1.2
|
else if (rows === 7)
|
tmp = 1
|
else if (rows === 8)
|
tmp = 0.9
|
else if (rows === 9)
|
tmp = 0.8
|
} else if ((Screen.height <= 768) && (Screen.height > 720)) {
|
tmp = 0.75;
|
if (rows <= 6)
|
tmp = 1.1
|
else if (rows === 7)
|
tmp = 1
|
else if (rows === 8)
|
tmp = 0.9
|
else if (rows === 9)
|
tmp = 0.8
|
back_height = oneHeight * 2.1 * (2 - rows / 10) * 0.7
|
} else if (Screen.height <= 720) {
|
tmp = 0.66;
|
if (rows <= 6)
|
tmp = 1
|
else if (rows === 7)
|
tmp = 0.9
|
else if (rows === 8)
|
tmp = 0.8
|
else if (rows === 9)
|
tmp = 0.7
|
}
|
|
return tmp;
|
}
|
|
//根据温度获取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 next() {
|
if (curType === "x") {
|
if (curVal === Number(cols)) {
|
curVal = 1;
|
} else {
|
curVal += 1;
|
}
|
} else if (curType === "y") {
|
if (curVal === Number(rows)) {
|
curVal = 1;
|
} else {
|
curVal += 1;
|
}
|
} else {
|
if (curVal === Number(lays)) {
|
curVal = 1;
|
} else {
|
curVal += 1;
|
}
|
}
|
flash();
|
updateTemp();
|
}
|
|
//上一个点击事件
|
function last() {
|
if (curType === "x") {
|
if (curVal === 1) {
|
curVal = Number(cols);
|
} else {
|
curVal -= 1;
|
}
|
} else if (curType === "y") {
|
if (curVal === 1) {
|
curVal = Number(rows);
|
} else {
|
curVal -= 1;
|
}
|
} else {
|
if (curVal === 1) {
|
curVal = Number(lays);
|
} else {
|
curVal -= 1;
|
}
|
}
|
flash();
|
updateTemp();
|
}
|
|
//层显示点击事件
|
function lay() {
|
curType = "z";//显示类型
|
curVal = 1;
|
flash();
|
updateGrainBtn(false);
|
|
};
|
|
//列显示点击事件
|
function col() {
|
curType = "x";//显示类型
|
curVal = 1;
|
flash();
|
updateGrainBtn(false);
|
};
|
|
//行显示点击事件
|
function row() {
|
curType = "y";//显示类型
|
curVal = 1;
|
flash();
|
updateGrainBtn(false);
|
};
|
|
//全部显示点击事件
|
function display_all() {
|
display_mode = "all";
|
flash();
|
}
|
|
//外部显示点击事件
|
function display_outside() {
|
display_mode = "outside";
|
flash();
|
}
|
|
//内部显示点击事件
|
function display_inside() {
|
display_mode = "inner";
|
flash();
|
}
|
|
// 初始化三维粮情
|
function initGrainChar3d() {
|
draw();
|
};
|
|
function clearGrainChart3d() {
|
listPoints = [];
|
listLays = [];
|
listRows = [];
|
lays = 4;
|
rows = 5;
|
cols = 8;
|
curType = "z";
|
curVal = 1;
|
initCanvasParam();
|
draw();
|
};
|
|
//重新渲染
|
function resetGrainChart3d() {
|
listPoints = grainData.listPoints;
|
listLays = grainData.listLays;
|
listRows = grainData.listRows;
|
var attr = grainData.cable.split("-");
|
lays = attr[0];
|
rows = attr[1];
|
cols = attr[2];
|
|
initCanvasParam();
|
|
draw();
|
sleep();//开始闪烁
|
curType = "z";
|
curVal = 1;
|
|
updateTemp();
|
}
|
|
//更新Btn名称
|
function updateGrainBtn(isUpdateSelect) {
|
var btnNext = $("#btn_next");
|
var btnPre = $("#btn_pre");
|
if ("z" === curType) {
|
btnNext.text("下一层");
|
btnPre.text("上一层");
|
}
|
if ("y" === curType) {// 行查看
|
btnNext.text("下一行");
|
btnPre.text("上一行");
|
}
|
if ("x" === curType) {// 列查看
|
btnNext.text("下一列");
|
btnPre.text("上一列");
|
}
|
|
//需改温度
|
updateTemp();
|
|
};
|
|
function updateTemp() {
|
//更新层温，行温度信息
|
if ("z" === curType) {
|
$.each(listLays, function (index, item) {
|
if (item.z === (curVal - 1)) {
|
// 更新层信息
|
$("#dynamicAve").text(item.tempAve);
|
$("#dynamicMax").text(item.tempMax);
|
$("#dynamicMin").text(item.tempMin);
|
$("#dynamicAveName").text("层均温");
|
$("#dynamicMaxName").text("层高温");
|
$("#dynamicMinName").text("层低温");
|
return;
|
}
|
});
|
}
|
if ("y" === curType) {
|
$.each(listRows, function (index, item) {
|
if (item.y === (curVal - 1)) {
|
$("#dynamicAve").text(item.tempAve);
|
$("#dynamicMax").text(item.tempMax);
|
$("#dynamicMin").text(item.tempMin);
|
$("#dynamicAveName").text("行均温");
|
$("#dynamicMaxName").text("行高温");
|
$("#dynamicMinName").text("行低温");
|
}
|
});
|
}
|
if ("x" === curType) {
|
$("#dynamicAve").text("--");
|
$("#dynamicMax").text("--");
|
$("#dynamicMin").text("--");
|
$("#dynamicAveName").text("列均温");
|
$("#dynamicMaxName").text("列高温");
|
$("#dynamicMinName").text("列低温");
|
}
|
};
|
