/**定义变量**/ 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("列低温"); } };