| /*==========仓库类型=油罐仓的展示==========*/ | 
| 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}]; | 
|   | 
| 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}]; | 
|   | 
| distrList = [1]; | 
| bottomList = [9]; | 
|   | 
| //定义数据显示容器 | 
| layPoints = []; | 
| var cirNum = distrList.length; //圈数 | 
| var layNum = bottomList[bottomList.length-1]; //层数 | 
| var longAxis = 120; //第一内圈半长轴 | 
| var shortAxis = 20; //第一内圈半短轴 | 
| var spaceCir = 35; //两圈间距 | 
| var intervalTop = 20; //距离顶端距离 | 
| var spaceLay = 50; //层间距 | 
| var maxSpace = cirNum * spaceCir; //内外圈最大差值 | 
| var curVal = 1; //层数控制变量 | 
| var edge_distance = 0; | 
| var initAngle = 0; //角度控制 | 
| var clockwise = true; //时针控制 | 
| var displayMode = 'all'; //内外显示 | 
| var textSize = 15;//文本框大小 | 
| var waterShift = 0; //液体偏移值 | 
| var arr = [];//定义绑定事件数组 | 
| var waterMax = 12;//液位灌容量高度 | 
| var curWater = 10;//液位高度 | 
|   | 
| //色块颜色常量 | 
| var color = null; | 
| var R = 0; | 
| var G = 0; | 
| var B = 0; | 
| var timer; | 
| var t=-2; | 
|   | 
|   | 
| // 初始化参数 | 
| function initCanvasParam() { | 
|     cirNum = distrList.length; //圈数 | 
|     layNum = bottomList[bottomList.length-1]; //层数 | 
|     longAxis = 120; //第一内圈半长轴 | 
|     shortAxis = 20; //第一内圈半短轴 | 
|     spaceCir = 35; //两圈间距 | 
|     intervalTop = 20; //距离顶端距离 | 
|     spaceLay = 50; //层间距 | 
|     maxSpace = cirNum * spaceCir; //内外圈最大差值 | 
|     curVal = 1; //层数控制变量 | 
|     edge_distance = 0; | 
|     initAngle = 0; //角度控制 | 
|     clockwise = true; //时针控制 | 
|     displayMode = 'all'; //内外显示 | 
|     textSize = 15;//文本框大小 | 
|     waterShift = 0; //液体偏移值 | 
|     arr = [];//定义绑定事件数组 | 
| }; | 
|   | 
| // 睡眠 | 
| function sleep() { | 
|     t++; | 
|     if (t >= 0) { | 
|         waterShift += 1; | 
|         flash(); | 
|     } | 
|     if (timer) { | 
|         clearInterval(timer); | 
|     } | 
|     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) | 
|     // waterShow(ctx); | 
|     waterLine(ctx) | 
|     scaleShow(ctx) | 
| } | 
|   | 
| //绘制主程序 | 
| function draw(ctx) { | 
|     var canvas = document.getElementById('canvas'); | 
|     var ctx = canvas.getContext('2d'); | 
|     center_x = canvas.width/3; //仓心X坐标 | 
|     center_y = shortAxis /3+ maxSpace + intervalTop; //仓心y坐标 | 
|   | 
|     ctx.strokeStyle = "black"; | 
|     ctx.lineWidth = 1; | 
|     autoAdjust(canvas); | 
|     make_ellipse(ctx); | 
|     gainData(ctx); | 
|     entityBlock(ctx); | 
|     make_top_ellipse(ctx); | 
|     make_top_ellipse(ctx); | 
|     title(ctx); | 
|     showIndex(canvas,ctx); | 
|     // waterShow(ctx); | 
|     waterLine(ctx) | 
|     scaleShow(ctx) | 
| } | 
|   | 
| //绘制顶部椭圆 | 
| function make_top_ellipse(ctx){ | 
|     //绘制顶部椭圆 | 
|     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(ctx){ | 
|     //设置仓高 | 
|     caseHeight = spaceLay * layNum; | 
|     //计算仓库占画布总高 | 
|     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,"#c0deea"); | 
|     grd.addColorStop(1,"rgba(115,200,231,1)") | 
|     // grd.addColorStop(1,"#b1d6e6"); | 
|   | 
|     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,anticlockwise=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,"#c0deea"); | 
|     grd.addColorStop(1,"rgba(115,200,231,1)") | 
|   | 
|     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 (var i = 0; i < listPoints.length; i++) { | 
|         if (listPoints[i]['z'] + 1 === curVal) { | 
|             layPoints.push(listPoints[i]) | 
|         } | 
|     } | 
| } | 
|   | 
| // 进行排线,绘制色块 | 
| function entityBlock(ctx) { | 
|     z_peak = [ 1, cirNum ]; | 
|     color_list = [ "e9e9e9", "bbe5cc", "f8dabc", "f4c8d5", "958a9b", "9f9aa0" ]; | 
|     turns = null; | 
|     for (i = 0; i < bottomList.length; i++) { | 
|         if (curVal === bottomList[i]) { | 
|             turns = cirNum - i; | 
|             break; | 
|         } else { | 
|             turns = cirNum; | 
|         } | 
|     } | 
|     showMax = turns; | 
|     // 循环生成每圈 | 
|     for (i = turns; i >= 1; i--) { | 
|         //内外显示逻辑判断 | 
|         if((displayMode === 'outside' )&& !(i === cirNum)){ | 
|             ctx.beginPath(); | 
|             ctx.setLineDash([8, 5]); | 
|             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 ); | 
|             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)") | 
|             ctx.fillStyle = grd; | 
|             ctx.fill(); | 
|             // ctx.stroke(); | 
|             ctx.closePath(); | 
|             ctx.setLineDash([]); | 
|             break; | 
|         }else if ((displayMode === 'inner') && i === cirNum ){ | 
|             showMax -= 1 | 
|             continue; | 
|         } | 
|         splNum = distrList[i - 1]; | 
|         if(splNum === 1){ | 
|             point = null; | 
|             //循环找到对应点值 | 
|             for(k = 0;k < layPoints.length; k++){ | 
|                 if((layPoints[k]['x'] === 0)&&(layPoints[k]['y'] === 0)){ | 
|                     point = layPoints[k]; | 
|                     break; | 
|                 } | 
|             } | 
|             point_x = center_x ; | 
|             point_y = center_y  + curVal * spaceLay ; | 
|             textBox(ctx,point,point_x,point_y) | 
|             continue; | 
|         } | 
|   | 
|         ctx.beginPath(); | 
|         // ctx.strokeStyle = "rgba(123,123,132,1)"; | 
|         // ctx.strokeStyle = "rgba(255,28,0,1)"; | 
|         ctx.setLineDash([8, 5]); | 
|         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,"white"); | 
|             grd.addColorStop(1,"rgba(115,200,231,1)") | 
|             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(); | 
|         ctx.setLineDash([]); | 
|         //设置点值为null; | 
|         point = null; | 
|   | 
|         // 循环生成圈内点 | 
|         for (j = 0; j < splNum; j++) { | 
|             // 循环找到对应点值 | 
|             for (z = 0; z < layPoints.length; z++) { | 
|                 if ((layPoints[z]['x'] === i-1) && (layPoints[z]['y'] === j)) { | 
|                     point = layPoints[z]; | 
|                     break; | 
|                 } | 
|             } | 
|             //判断显示时针 | 
|             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); | 
|             textBox(ctx,point,point_x,point_y) | 
|         } | 
|     } | 
| } | 
|   | 
| // 绘制一个圆形文本框 | 
| function textBox(ctx, point, x, y) { | 
|     //val = point['temp'] | 
|     var val = -100; | 
|     if(point){ | 
|         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 <= -100){ | 
|         val ="备用"; | 
|     } | 
|     if(val <= -101){ | 
|         val = "故障"; | 
|     } | 
|     ctx.beginPath(); | 
|     ctx.lineWidth = 1; | 
|     ctx.arc(x, y, textSize, 0, 2 * Math.PI); | 
|     ctx.stroke(); | 
|     ctx.fill(); | 
|     ctx.fillStyle = "rgba(0,0,0,1)"; | 
|     ctx.textAlign = 'center' | 
|     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, | 
|         'col': point.y, | 
|         'val' : val | 
|     }) | 
| } | 
|   | 
| // 根据温度获取RGB | 
| function getColor(val) { | 
|     // 温度分段1 [50,+无穷)= [(255,0,0),(255,0,0)] | 
|     // 温度分段2 [20,50)= [(255,255,0),(255,0,0)] | 
|     // 温度分段3 [0,20)= [(100,255,30),(255,255,0)] | 
|     //温度分段4 [-10,0)= [(34,233,42),(100,255,30)] | 
|     if(val <= -100.0){ | 
|         color = "rgba(220,220,220,220)"; | 
|         return color; | 
|     } | 
|     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 waterLine(ctx){ | 
|     var start_x = center_x + (longAxis + maxSpace) + 20 + 3 * spaceLay; | 
|     var start_y = center_y + caseHeight * (1 - curWater/waterMax); | 
|     ctx.beginPath(); | 
|     ctx.moveTo(start_x,start_y); | 
|     for(i = 0;i<=  2 * spaceLay;i++){ | 
|         x = i | 
|         y = Math.sin(i/20 + waterShift) * 5 ; | 
|         ctx.lineTo(start_x + x,start_y-y) | 
|     } | 
|     ctx.lineTo(start_x + 2 * spaceLay,center_y + caseHeight ) | 
|     ctx.lineTo(start_x ,center_y + caseHeight  ) | 
|     ctx.lineTo(start_x,start_y) | 
|     ctx.fillStyle="rgba(183,233,221,1)" | 
|     ctx.fill(); | 
|     // ctx.stroke(); | 
|     ctx.closePath(); | 
|     ctx.beginPath(); | 
|     ctx.moveTo(start_x,start_y); | 
|     for(i = 0;i<=  2 * spaceLay;i++){ | 
|         x = i | 
|         y = Math.sin(i/10 + 1 + waterShift) * 5 ; | 
|         ctx.lineTo(start_x + x,start_y-y) | 
|   | 
|     } | 
|     ctx.lineTo(start_x + 2 * spaceLay,center_y + caseHeight ) | 
|     ctx.lineTo(start_x ,center_y + caseHeight) | 
|     ctx.lineTo(start_x,start_y) | 
|     ctx.fillStyle="rgba(71,205,198,1)" | 
|     // ctx.fillStyle="rgba(16,158,151,1)" | 
|     ctx.fill(); | 
|     // ctx.stroke(); | 
|     ctx.closePath(); | 
| } | 
|   | 
| //标题栏 | 
| 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.3, "#5858ff"); | 
|             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"); | 
|         } | 
|   | 
|         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)'; | 
|             //设置为未选择时的字体填充 | 
|         }else{ | 
|             ctx.fillStyle ='rgba(30,30,30,1)'; | 
|         } | 
|         var val = "第" + i + "层"; | 
|         ctx.font="15px Arial"; | 
|         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':'titel'}) | 
|     } | 
| } | 
|   | 
| //绑定触发的事件 | 
| function draws(x, y, canvas, ctx) { | 
|     //创建点击事件的画布(画布2)需要考虑父框的位置 | 
|     var parent = $("#canvas_parent"); | 
|     var parentLeft = parent.offset().left, parentTop = parent.offset().top; | 
|     ctx.rect(0, 0, canvas.width, canvas.height); | 
|     arr.forEach(function(v, i) { | 
|         ctx.beginPath(); | 
|         //绘制每一个对象的区域 | 
|         ctx.rect(v.x +parentLeft, v.y+parentTop, v.width, v.height); | 
|         ctx.closePath(); | 
|         //判断点是否在区域内 | 
|         if (ctx.isPointInPath(x, y)) { | 
|             //点的类型为值 | 
|             if (v.type === 'val') { | 
|                 //类型为val,则弹出点信息 | 
|                 layer.msg("层=" + (v.lay + 1) + "\n列=" + (v.col + 1) + "\n温度=" + v.val); | 
|             } 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 waterShow(ctx){ | 
|     //绘制水位显示外壳 | 
|     start_x = center_x + (longAxis + maxSpace) + 20 + 3 * spaceLay; | 
|     start_y = center_y; | 
|     ctx.beginPath(); | 
|     ctx.strokeStyle = "rgba(0,0,0,1)" | 
|     ctx.moveTo(start_x,start_y); | 
|     ctx.lineTo(start_x + 2 * spaceLay,start_y) | 
|     ctx.lineTo(start_x + 2 * spaceLay,start_y + caseHeight) | 
|     ctx.lineTo(start_x ,start_y + caseHeight) | 
|     ctx.lineTo(start_x,start_y) | 
|     ctx.stroke(); | 
|     ctx.closePath(); | 
| } | 
|   | 
| //显示液位高度 | 
| function scaleShow(ctx){ | 
|     start_x = center_x + (longAxis + maxSpace) + 20 + 5 * spaceLay; | 
|     start_y = center_y + caseHeight * (1 - curWater/waterMax); | 
|     ctx.beginPath(); | 
|     ctx.moveTo(start_x,start_y); | 
|     // ctx.lineTo(start_x + spaceLay, start_y) | 
|     ctx.lineTo(start_x + 30 ,start_y + 10); | 
|     ctx.lineTo(start_x + 20 ,start_y); | 
|     ctx.lineTo(start_x + 30 ,start_y - 10); | 
|     ctx.lineTo(start_x,start_y); | 
|     ctx.fillStyle = "rgba(207,86,128,1)" | 
|     ctx.fill(); | 
|     // ctx.stroke(); | 
|     ctx.closePath(); | 
|   | 
|     ctx.beginPath(); | 
|     ctx.strokeStyle = "rgba(0,0,0,1)" | 
|     ctx.moveTo(start_x + 20 ,start_y); | 
|     ctx.lineTo(start_x + 50,start_y); | 
|     ctx.stroke(); | 
|     ctx.lineTo(start_x + 40,start_y + 20) | 
|   | 
|     ctx.arcTo(start_x + 40, start_y + 30, start_x + 50, start_y + 30,10) | 
|     ctx.arcTo(start_x + 60, start_y + 30, start_x + 60, start_y + 20,10) | 
|     ctx.lineTo(start_x + 50,start_y) | 
|     ctx.fillStyle = "rgba(71,205,198,1)"; | 
|   | 
|     ctx.fill(); | 
|   | 
|     ctx.font="12px Arial"; | 
|     ctx.textAlign = 'center'; | 
|     ctx.fillStyle = "rgba(231,30,43,1)"; | 
|     ctx.fillText(curWater+"m", start_x + 50, start_y + 25); | 
|     ctx.closePath(); | 
| } | 
|   | 
| // --------------- 按钮点击事件--------------------- | 
| //上一行 | 
| 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 clockSwitch() { | 
|     if (clockwise) { | 
|         clockwise = false; | 
|     } else { | 
|         clockwise = true; | 
|     } | 
|     flash(); | 
| } | 
|   | 
| //角度旋转 | 
| function rotate() { | 
|     initAngle += (document.getElementById("rotate").value) * 2 * Math.PI / 360; | 
|     flash(); | 
| } | 
|   | 
| //全部显示点击事件 | 
| function display_all() { | 
|     displayMode = 'all'; | 
|     flash(); | 
| } | 
|   | 
| //外部显示点击事件 | 
| function display_outside() { | 
|     displayMode = 'outside'; | 
|     flash(); | 
| } | 
|   | 
| //内部显示点击事件 | 
| function display_inside() { | 
|     displayMode = 'inner'; | 
|     flash(); | 
| } | 
|   | 
| // 初始化三维粮情 | 
| function initGrainChar3d() { | 
|     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); | 
|   | 
|    // console.log(grainData); | 
|   | 
|     //液位高度获取 | 
|     var oilHeightAtt = grainData.oilHeight.split("-").map(Number); | 
|     curWater = oilHeightAtt[0];//液位高度 | 
|     waterMax = oilHeightAtt[1];//液位灌容量高度 | 
|   | 
|     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; | 
|         } | 
|     }); | 
| }; |