Commit a5cfff36 authored by Kimber's avatar Kimber

'update'

parent 77b91064
......@@ -648,8 +648,16 @@ var reqApis = function () {
"code": { name: "剖面编号", must: true, },
"height": { name: "剖面高度(m)", must: true, default: 100 },
"width": { name: "剖面宽度(m)", must: true, default: 100 },
"sdeg": { name: "水区扇形起始角(默认为10)", must: true, default: 10 },
"diameter": { name: "绘制直径(默认为2)", must: true, default: 2 },
"type": { name: "图表类型", type:'radio', must:true, default:'arcdiagram', key:'name',
val:'value', change: function(val, item) {
var Dict = this.Dict, info = Dict.baseInfo;
var flag = ~~(val === 'arcdiagram');
info.sdeg.form = flag;
info.diameter.form = flag;
}
},
"sdeg": { name: "水区扇形起始角(默认为10)", must: true, default:10, form:1},
"diameter": { name: "绘制直径(默认为2)", must: true, default:2, form:1},
"drys": { name: "关联设备", must: true, type: 'select', multiple: true, val: 'equipno', key: 'equipname', },
},
selectList: {
......@@ -658,6 +666,10 @@ var reqApis = function () {
return res.body || []
});
},
type:[
{name:'弧形图', value:'arcdiagram',},
{name:'折线图', value:'polyxiadian',},
],
},
},
config: {
......@@ -668,6 +680,10 @@ var reqApis = function () {
buttons: [
{
'type': 'primary', 'icon': 'el-icon-edit', 'callback': function (item) {
var Dict = this.Dict, info = Dict.baseInfo;
var flag = ~~(item.type === 'arcdiagram');
info.sdeg.form = flag;
info.diameter.form = flag;
item = Object.assign({}, item);
reqApi.common.toEdit.call(this.$parent, item);
}
......@@ -681,6 +697,9 @@ var reqApis = function () {
otherBtn: [
{
type: 'primary', icon: 'el-icon-plus', name: '添加剖面', 'callback': function () {
var Dict = this.Dict, info = Dict.baseInfo;
info.sdeg.form = 1;
info.diameter.form = 1;
reqApi.common.toAdd.call(this);
}
},
......
......@@ -616,7 +616,7 @@ export default {
},
cuCharts(ctn, data, opts){
var cuCharts=function(ctn,data,opts){var ctn=this.ctn=typeof element==="string"?document.getElementById(ctn):ctn;if(!ctn)return console.log('%c cuCharts Error Element is a invalid param! ','color:red');var self=this,setDpr=1;var dpr=window.devicePixelRatio||qf.envir.dpr;self.dpr=dpr*setDpr;self.Cache={};!ctn.style.position&&(ctn.style.position='relative');var canvas=this.canvas=document.createElement("canvas");canvas.style.cssText='position:absolute;height:100%;width:100%;';this.ctx=canvas.getContext("2d");ctn.appendChild(canvas);var defaults=this.defaults={altitude:1000,damHeight:data.dissect.height||100,damWidth:data.dissect.width||100,axisLineWidth:6,axisColor:'red',margin:{top:14,right:0,bottom:0,left:18},};var left=defaults.margin.left*this.dpr,top=defaults.margin.top*this.dpr,right=defaults.margin.right*this.dpr,bottom=defaults.margin.bottom*this.dpr;this.ladders=data.steps||[];this.devices=this.formatDeviceParam(data.devices);var ladderInfo=this.discernDamHeight(this.ladders);this.options={damWidth:defaults.damWidth,damHeight:ladderInfo.damHeight,axisLineWidth:defaults.axisLineWidth||6,stepAverageHeight:ladderInfo.averageHeight,initX:defaults.margin.left*dpr+(defaults.axisLineWidth/2),initY:defaults.margin.top*dpr,bottomDist:defaults.margin.bottom*dpr,rightDist:defaults.margin.right*dpr,waterArea:{startAngle:data.dissect.sdeg,radius:data.dissect.diameter},alarm:data.alarm,axisLineWidth:opts.axisLineWidth||defaults.axisLineWidth,axisColor:opts.axisColor||defaults.axisColor,};this.init()};cuCharts.prototype={init:function(){this.setModule();this.onresize()},drawAxis:function(color,damHeight){var lw=this.options.axisLineWidth;var wHalf=lw/2;var initX=this.options.initX;var endX=this.options.endX;var endY=this.options.endY;var axisYSX=initX-wHalf;var axisXEY=endY+lw;var axisYEY=endY+wHalf;this.drawLiner({sx:axisYSX,sy:0,ex:axisYSX,ey:axisXEY,width:lw,color:color});var fontY=~~(this.options.damPxHeight/2+this.options.initY);var fontSize=12;var axisXText='剖面高度'+~~damHeight+'';this.drawText({x:this.options.initY/2+2,y:fontY,size:fontSize,width:fontSize*this.dpr,text:axisXText,color:'#fff',align:'center',vertical:'center',});this.drawLiner({sx:initX,sy:axisYEY,ex:endX,ey:axisYEY,width:lw,color:color})},drawSteps:function(ladders){ladders=ladders||[0];var initX=this.options.initX,initY=this.options.initY;var cumulationX=initX,cumulationY=initY;var damLength=this.options.endX;var damDepth=this.options.endY;var pxRetioY=this.options.pxRetioY;var averageHeight=this.options.stepAverageHeight*pxRetioY;var damPxWidth=this.options.damPxWidth;var damPxHeight=this.options.damPxHeight;var len=ladders.length;var stepWidth=damPxWidth/(len+0);var stepHeight=damPxHeight/(len+0);var slopeRatio=damPxHeight/damPxWidth;var maxStepDepth={ratio:slopeRatio};this.Cache.ladders=[];for(var i=0;i<len;i++){var item=ladders[i];var setWidth=item.width*this.dpr*this.options.pxRetioX;var setHeight=item.height*pxRetioY||averageHeight;var slope=item.slope||0;var aCoord=this.byAngleAndHeightToCoord(slope,setHeight);var fEndX,fEndY;if(setWidth){fEndX=cumulationX+setWidth;stepWidth=(damLength-(cumulationX+setWidth+aCoord.x*this.dpr))/(len-(i+1))}else{fEndX=cumulationX+(stepWidth-aCoord.x*this.dpr)};if(setHeight){fEndY=cumulationY+setHeight;stepHeight=(damDepth-(cumulationY+setHeight))/(len-(i+1))}else{fEndY=cumulationY+stepHeight};var lEndX=fEndX+aCoord.x*this.dpr,lEndY=fEndY+aCoord.y*this.dpr;var stepDepthRatio=(damDepth-~~lEndY)/(damLength-lEndX);if(stepDepthRatio&&stepDepthRatio<maxStepDepth.ratio&&i<len-1){maxStepDepth={ratio:stepDepthRatio,x:lEndX,y:lEndY,}};this.drawLiner({sx:cumulationX,sy:cumulationY,ex:fEndX,ey:cumulationY,width:2,color:"#8b8b8b"});this.drawLiner({sx:fEndX,sy:cumulationY,ex:lEndX,ey:lEndY,width:2,color:"#8b8b8b"});this.Cache.ladders[i]={sx:cumulationX,sy:cumulationY,ex:fEndX,ey:cumulationY,slope:slope,slopeX:lEndX,slopeY:lEndY,xy:aCoord.xy};cumulationX=lEndX;cumulationY=lEndY};this.drawLiner({sx:cumulationX,sy:cumulationY,ex:damLength,ey:damDepth,width:2,color:"#8b8b8b"});var damHeight=(cumulationY-this.options.initY)/pxRetioY;return maxStepDepth.damHeight=damHeight,maxStepDepth},drawDevice:function(list){var lineW=4*this.dpr,deviceW=6*this.dpr,deviceH=3*this.dpr;var initX=this.options.initX;var endX=this.options.endX;var endY=this.options.endY;var ladders=this.Cache.ladders||[];var fontSize=11;var fontTopDev=fontSize*this.dpr+3;this.options.deviceCoords=[];for(var device of list){var holeX=~~(endX-device.x*this.options.pxRetioX);var depthText='埋深'+device.depth+'';var holeDistY=device.holeDepth*this.options.pxRetioY;var deviceY=device.value*this.options.pxRetioY;var ladderSY=this.xPixelToStepsYPixel(holeX);this.drawText({x:holeX,y:ladderSY-fontTopDev,size:fontSize,text:depthText,color:'red',align:'center',});var holeEndY=ladderSY+holeDistY;holeEndY=holeEndY>endY?endY:holeEndY;this.drawLiner({sx:holeX,sy:ladderSY,ex:holeX,ey:holeEndY,width:lineW,color:"grey"});var deviceLY=ladderSY+deviceY;var deviceEY=deviceLY+(deviceH/2);var deviceSY=deviceEY-deviceH;this.drawLiner({sx:holeX,sy:deviceSY,ex:holeX,ey:deviceEY,width:deviceW,color:"#3403CB"});this.options.deviceCoords.push({x:holeX,y:deviceLY,stepY:ladderSY});var valFont=11;var valueSY=~~(deviceSY-valFont*this.dpr-6);var text='水位值'+device.waterValue+'';this.drawText({x:holeX,y:valueSY,size:valFont,text:text,color:'white',align:'center',})}},drawAlarmLine:function(alarms,Steps){var alarmValues=alarms.value;var alarmLevel=alarms.alarmLevel;var deviceCoords=this.options.deviceCoords||[];var deviceSX=deviceCoords[0].x;var deviceSY=deviceCoords[0].y;var initX=this.options.initX;var initY=this.options.initY;var endY=this.options.endY;var endX=this.options.endX;var alarmLevelNum=['red','orange','yellow','blue']||Object.keys(alarmValues);var alarmLine={};var level=(~~alarmLevel||alarmLevelNum.length+1)-1;var nearLevel=level?level-1:level;var alarm=alarmLevelNum[level];var nearAlarm=alarmLevelNum[nearLevel];alarmLine[nearAlarm]=alarmValues[nearAlarm];if(alarm){alarmLine[alarm]=alarmValues[alarm]};var alarmRealParam=this.getAlarmRealParam(Object.values(alarmLine))||Steps.ratio;var deviceSlopeRatio=alarmRealParam.ratio;for(var key in alarmLine){var value=alarmValues[key];if(key){var ladderSY=this.xPixelToStepsYPixel(deviceSX)-initX+6;var lineSY=(value*this.options.pxRetioY+ladderSY)-(deviceSX-initX)*deviceSlopeRatio;var lineEX=(endY-lineSY)/deviceSlopeRatio;this.drawLiner({sx:initX,sy:lineSY+initY,ex:lineEX,ey:endY,width:2,color:key})}}},getCirHeightDev:function(r,x){return r-Math.sqrt(Math.pow(r,2)-Math.pow(x,2))},drawWaterArea:function(depth){depth=100;var startAngle=this.options.waterArea.startAngle;var radiusMultiple=this.options.waterArea.radius;var angleRatio=90/0.5;var initArc=startAngle/angleRatio;var ctx=this.ctx,initX=this.options.initX;var arcOrigin=1.50,arcStart=arcOrigin+initArc;var sAngle=(arcStart-arcOrigin)*angleRatio;var r1=this.options['damPxWidth']*radiusMultiple;var waterApexToAxisXDist=Math.sin(sAngle*0.017453293)*r1;var sAngleToTopSpotDist=(r1-(Math.cos(sAngle*0.017453293)*r1));var depth=(depth||30)*this.options.pxRetioY+sAngleToTopSpotDist;var firstDeviceX=this.devices[0].x*this.options.pxRetioX;var ladderSY=this.xPixelToStepsYPixel(firstDeviceX+initX)-initX+6;var deviceToAxisXDist=firstDeviceX+waterApexToAxisXDist;var deviceToAxisYDist=Math.sqrt(r1*r1-deviceToAxisXDist*deviceToAxisXDist);var deviceAreaToApexDev=r1-deviceToAxisYDist-sAngleToTopSpotDist-ladderSY;var firstDeviceY=this.options.damPxHeight-this.devices[0].value*this.options.pxRetioY;firstDeviceY+=deviceAreaToApexDev;var ry=r1+this.options.endY-sAngleToTopSpotDist-firstDeviceY;var lineToY=r1-sAngleToTopSpotDist-firstDeviceY;var eAngle=Math.acos(lineToY/r1)/0.017453293;var arcEnd=eAngle/angleRatio+arcOrigin;ctx.beginPath();ctx.arc(initX-waterApexToAxisXDist,ry,r1,arcStart*Math.PI,arcEnd*Math.PI,false);ctx.lineTo(initX,ry-lineToY);ctx.fillStyle='#00A2E8';ctx.fill()},byAngleAndHeightToCoord:function(angle,height){var devX=Math.tan(angle*0.017453293)*height;var xy=height/Math.cos(angle*0.017453293);var devY=height-devX;var yRatio=height/devX;var x=0,y=0;if(angle>50){x=height,y=devY*yRatio}else{x=devX,y=0};return{x:x,y:y,xy:xy}},discernDamHeight(list){var not=0,set=0,sum=0;for(var item of list){var height=item.height;height?(set++,sum+=height):not++};var damHeight=not?this.defaults.damHeight:sum;var averageHeight=(damHeight-sum)/not;return{averageHeight:averageHeight,damHeight:damHeight}},setModule:function(){this.ctx.clearRect(0,0,this.SumWidth,this.SumHeight);var canvas=this.canvas;var SumWidth=this.SumWidth=(this.ctn.clientWidth*this.dpr)-this.ctn.clientLeft-0;var SumHeight=this.SumHeight=this.ctn.clientHeight*this.dpr-this.ctn.clientTop-0;canvas.width=SumWidth*this.dpr;canvas.height=SumHeight*this.dpr;canvas.style.cssText='position:absolute;top:0;left:0;height:'+(SumHeight)+'px;width:'+SumWidth+'px;user-select: none;-webkit-tap-highlight-color:rgba(0,0,0,0);padding:0;margin:0;border-width:0;box-sizing: border-box;';var top=this.options.initY,left=this.options.initX,bottom=this.options.bottomDist,right=this.options.rightDist;var damPxWidth=SumWidth-(right+left),damPxHeight=SumHeight-(bottom+top+this.options.axisLineWidth),endX=SumWidth-right,endY=SumHeight-bottom-this.options.axisLineWidth;this.options['endX']=endX;this.options['endY']=endY;this.options['damPxWidth']=damPxWidth;this.options['damPxHeight']=damPxHeight;this.options['pxRetioX']=damPxWidth/this.defaults.damWidth;this.options['pxRetioY']=damPxHeight/this.options.damHeight;this.options['HWRation']=(endY-top)/(endX-left);this.drawChart()},formatDeviceParam:function(devices){var devices=devices||[];var arr=[];for(var item of devices){arr.push({x:item.jrx_coord_x,holeDepth:item.jrx_trepanning,value:item.depth,depth:item.jrx_burial,waterValue:item.stage})};return arr},getAlarmRealParam:function(aValues){var aval=aValues[0];var coords=this.options.deviceCoords||[];var valY=aval*this.options.pxRetioY;var sy=valY+coords[0].stepY,sx=coords[0].x,ey=0,ex=0;var len=coords.length;for(var i=1;i<len;i++){var item=coords[i];ey=valY+item.stepY,ex=item.x};return{ratio:(ey-sy)/(ex-sx),sy:sy,ey:ey}},drawChart:function(){var Steps=this.drawSteps(this.ladders);this.drawAxis(this.options.axisColor,Steps.damHeight);var depth=55;this.drawWaterArea(depth);this.drawDevice(this.devices);this.drawAlarmLine(this.options.alarm,Steps)},onresize:function(){qf.resize(()=>{this.setModule()})},updateData:function(data){data=data||{};this.stations=data.stations||this.stations;this.points=data.points||this.points;this.draw(this.cacheX+this.destX,true)},drawLiner:function(o){var ctx=this.ctx;ctx.beginPath();ctx.moveTo(o.sx,o.sy);ctx.lineTo(o.ex,o.ey);ctx.lineWidth=o.width;ctx.strokeStyle=o.color;ctx.stroke()},drawText:function(o){var ctx=this.ctx;var fontSize=(o.size||14)*this.dpr;var text=o.text||'';var textWidth=this.getTextWidth(text,fontSize);var width=o.width||textWidth;var align=o.align||'normal';ctx.font='normal '+fontSize+"px 'Open Sans', 'PingFang SC', Helvetica, Arial, sans-serif";var rows=[];if(width&&~~width<textWidth){var str='',texts=text.split("");for(var word of texts){var testStr=str+word;var testWidth=ctx.measureText(testStr).width;if(testWidth>width){rows.push(str);str=word}else{if(testWidth===width){rows.push(testStr);str=''}else{str=testStr}}};str&&rows.push(str)}else{rows=text.split(/\r\n|\n/g)};var rlen=rows.length,sumHeight=(rlen+1)*fontSize;var x=o.x;var y=o.vertical==='center'?o.y-(sumHeight/2):o.y;var color=o.randomColor?this.getRandomColor():o.color||'red';var lsx=x,lsy=y;for(var b=0;b<rlen;b++){if(align==='center'){var textW=this.getTextWidth(rows[b],fontSize);lsx=x-(textW/2)};lsy=(b+1)*fontSize;ctx.lineHeight=1;ctx.fillStyle=color;ctx.fillText(rows[b],~~lsx+0.5,y+(~~lsy)+0.5)}},getTextWidth:function(text,fontSize){return(this.ctx.measureText(text).width/parseInt(this.ctx.font))*fontSize},drawImg:function(img,x,y,w,h){x=x-w/2;y=y-h;ctx.drawImage(img,x,y,w,h)},getRandomColor:function(){return"#"+Math.floor(Math.random()*16777215).toString(16)},getEventTarget:function(x,y){if(y>bottomReferY-imgA.height-1&&y<bottomReferY+1){var arr=this.points;var i=arr.length-1,obj,halfW=imgA.width/2-1;while(obj=arr[i]){var ix=this.getDrawDoord(obj.x*1);if(Math.abs(ix-x)<halfW){return obj};i--}};if(y>bottomReferY-imgB.height-1&&y<bottomReferY+1){var arr=this.stations;var i=arr.length-1,obj,halfW=imgA.width/2-1;while(obj=arr[i]){var ix=this.getDrawDoord(obj.x*1);if(Math.abs(ix-x)<halfW){return obj};i--}}},xPixelToStepsYPixel:function(x){var ladders=this.Cache.ladders||[],ladderSY=0;for(var ladder of ladders){if(x>=ladder.sx&&x<ladder.slopeX){if(x<ladder.ex){ladderSY=ladder.sy}else{var slopeWidth=ladder.slopeX-ladder.ex;var slopeHeight=ladder.slopeY-ladder.ey;ladderSY=(x-ladder.ex)*(slopeHeight/slopeWidth)+ladder.ey}}};return ladderSY},};return new cuCharts(ctn,data,opts);
var cuCharts=function(ctn,data,opts){var ctn=this.ctn=typeof element==="string"?document.getElementById(ctn):ctn;if(!ctn)return console.log('%c cuCharts Error Element is a invalid param! ','color:red');var self=this,setDpr=1;var dpr=window.devicePixelRatio||qf.envir.dpr;self.dpr=dpr*setDpr;self.Cache={};!ctn.style.position&&(ctn.style.position='relative');var canvas=this.canvas=document.createElement("canvas");canvas.style.cssText='position:absolute;height:100%;width:100%;';this.ctx=canvas.getContext("2d");ctn.appendChild(canvas);var defaults=this.defaults={altitude:1000,damHeight:data.dissect.height||100,damWidth:data.dissect.width||100,axisLineWidth:6,axisColor:'red',margin:{top:14,right:0,bottom:0,left:18},};var left=defaults.margin.left*this.dpr,top=defaults.margin.top*this.dpr,right=defaults.margin.right*this.dpr,bottom=defaults.margin.bottom*this.dpr;this.ladders=data.steps||[];this.devices=this.formatDeviceParam(data.devices);var ladderInfo=this.discernDamHeight(this.ladders);this.options={damWidth:defaults.damWidth,damHeight:ladderInfo.damHeight,axisLineWidth:defaults.axisLineWidth||6,stepAverageHeight:ladderInfo.averageHeight,initX:defaults.margin.left*dpr+(defaults.axisLineWidth/2),initY:defaults.margin.top*dpr,bottomDist:defaults.margin.bottom*dpr,rightDist:defaults.margin.right*dpr,waterArea:{startAngle:data.dissect.sdeg,radius:data.dissect.diameter},alarm:data.alarm,axisLineWidth:opts.axisLineWidth||defaults.axisLineWidth,axisColor:opts.axisColor||defaults.axisColor,type:data.dissect.type,waterColor:'#00A2E8',};this.init()};cuCharts.prototype={init:function(){this.setModule();this.onresize()},drawAxis:function(color,damHeight){var lw=this.options.axisLineWidth;var wHalf=lw/2;var initX=this.options.initX;var endX=this.options.endX;var endY=this.options.endY;var axisYSX=initX-wHalf;var axisXEY=endY+lw;var axisYEY=endY+wHalf;this.drawLiner({sx:axisYSX,sy:0,ex:axisYSX,ey:axisXEY,width:lw,color:color});var fontY=~~(this.options.damPxHeight/2+this.options.initY);var fontSize=12;var axisXText='剖面高度'+~~damHeight+'';this.drawText({x:this.options.initY/2+2,y:fontY,size:fontSize,width:fontSize*this.dpr,text:axisXText,color:'#fff',align:'center',vertical:'center',});this.drawLiner({sx:initX,sy:axisYEY,ex:endX,ey:axisYEY,width:lw,color:color})},drawSteps:function(ladders){ladders=ladders||[0];var initX=this.options.initX,initY=this.options.initY;var cumulationX=initX,cumulationY=initY;var damLength=this.options.endX;var damDepth=this.options.endY;var pxRetioY=this.options.pxRetioY;var averageHeight=this.options.stepAverageHeight*pxRetioY;var damPxWidth=this.options.damPxWidth;var damPxHeight=this.options.damPxHeight;var len=ladders.length;var stepWidth=damPxWidth/(len+0);var stepHeight=damPxHeight/(len+0);var maxStepDepth={ratio:this.options.HWRation};this.Cache.ladders=[];for(var i=0;i<len;i++){var item=ladders[i];var setWidth=item.width*this.dpr*this.options.pxRetioX;var setHeight=item.height*pxRetioY||averageHeight;var slope=item.slope||0;var aCoord=this.byAngleAndHeightToCoord(slope,setHeight);var fEndX,fEndY;if(setWidth){fEndX=cumulationX+setWidth;stepWidth=(damLength-(cumulationX+setWidth+aCoord.x*this.dpr))/(len-(i+1))}else{fEndX=cumulationX+(stepWidth-aCoord.x*this.dpr)};if(setHeight){fEndY=cumulationY+setHeight;stepHeight=(damDepth-(cumulationY+setHeight))/(len-(i+1))}else{fEndY=cumulationY+stepHeight};var lEndX=fEndX+aCoord.x*this.dpr,lEndY=fEndY+aCoord.y*this.dpr;var stepDepthRatio=(damDepth-~~lEndY)/(damLength-lEndX);if(stepDepthRatio&&stepDepthRatio<maxStepDepth.ratio&&i<len-1){maxStepDepth={ratio:stepDepthRatio,x:lEndX,y:lEndY,}};this.drawLiner({sx:cumulationX,sy:cumulationY,ex:fEndX,ey:cumulationY,width:2,color:"#8b8b8b"});this.drawLiner({sx:fEndX,sy:cumulationY,ex:lEndX,ey:lEndY,width:2,color:"#8b8b8b"});this.Cache.ladders[i]={sx:cumulationX,sy:cumulationY,ex:fEndX,ey:cumulationY,slope:slope,slopeX:lEndX,slopeY:lEndY,xy:aCoord.xy};cumulationX=lEndX;cumulationY=lEndY};this.drawLiner({sx:cumulationX,sy:cumulationY,ex:damLength,ey:damDepth,width:2,color:"#8b8b8b"});var damHeight=(cumulationY-this.options.initY)/pxRetioY;return maxStepDepth.damHeight=damHeight,maxStepDepth},drawAlarmLine:function(alarms,Steps){var alarmValues=alarms.value;var alarmLevel=alarms.alarmLevel;var coords=this.devices||[];var deviceSX=coords[0].x;var deviceSY=coords[0].y;var initX=this.options.initX;var initY=this.options.initY;var endY=this.options.endY;var endX=this.options.endX;var alarmLevelNum=['red','orange','yellow','blue']||Object.keys(alarmValues);var alarmLine={};var level=(~~alarmLevel||alarmLevelNum.length+1)-1;var nearLevel=level?level-1:level;var alarm=alarmLevelNum[level];var nearAlarm=alarmLevelNum[nearLevel];alarmLine[nearAlarm]=alarmValues[nearAlarm];if(alarm){alarmLine[alarm]=alarmValues[alarm]};var alarmRealParam=this.getAlarmRealParam(Object.values(alarmLine))||Steps.ratio;var deviceSlopeRatio=alarmRealParam.ratio;for(var key in alarmLine){var value=alarmValues[key];if(key){var ladderSY=this.xPixelToStepsYPixel(deviceSX)-initX+6;var lineSY=(value*this.options.pxRetioY+ladderSY)-(deviceSX-initX)*deviceSlopeRatio;var lineEX=(endY-lineSY)/deviceSlopeRatio;this.drawLiner({sx:initX,sy:lineSY+initY,ex:lineEX,ey:endY,width:2,color:key})}}},getCirHeightDev:function(r,x){return r-Math.sqrt(Math.pow(r,2)-Math.pow(x,2))},drawWaterArea:function(depth){var startAngle=this.options.waterArea.startAngle;var radiusMultiple=this.options.waterArea.radius;var angleRatio=90/0.5;var initArc=startAngle/angleRatio;var ctx=this.ctx,initX=this.options.initX;var arcOrigin=1.50,arcStart=arcOrigin+initArc;var sAngle=(arcStart-arcOrigin)*angleRatio;var r1=this.options['damPxWidth']*radiusMultiple;var waterApexToAxisXDist=Math.sin(sAngle*0.017453293)*r1;var sAngleToTopSpotDist=(r1-(Math.cos(sAngle*0.017453293)*r1));var depth=(depth||30)*this.options.pxRetioY+sAngleToTopSpotDist;var firstDeviceX=this.devices[0].dist*this.options.pxRetioX;var ladderSY=this.xPixelToStepsYPixel(firstDeviceX+initX)-initX+6;var deviceToAxisXDist=firstDeviceX+waterApexToAxisXDist;var deviceToAxisYDist=Math.sqrt(r1*r1-deviceToAxisXDist*deviceToAxisXDist);var deviceAreaToApexDev=r1-deviceToAxisYDist-sAngleToTopSpotDist-ladderSY;var firstDeviceY=this.options.damPxHeight-this.devices[0].value*this.options.pxRetioY;firstDeviceY+=deviceAreaToApexDev;var ry=r1+this.options.endY-sAngleToTopSpotDist-firstDeviceY;var lineToY=r1-sAngleToTopSpotDist-firstDeviceY;var eAngle=Math.acos(lineToY/r1)/0.017453293;var arcEnd=eAngle/angleRatio+arcOrigin;ctx.beginPath();ctx.arc(initX-waterApexToAxisXDist,ry,r1,arcStart*Math.PI,arcEnd*Math.PI,false);ctx.lineTo(initX,ry-lineToY);ctx.fillStyle=this.options.waterColor;ctx.fill()},byAngleAndHeightToCoord:function(angle,height){var devX=Math.tan(angle*0.017453293)*height;var xy=height/Math.cos(angle*0.017453293);var devY=height-devX;var yRatio=height/devX;var x=0,y=0;if(angle>50){x=height,y=devY*yRatio}else{x=devX,y=0};return{x:x,y:y,xy:xy}},discernDamHeight(list){var not=0,set=0,sum=0;for(var item of list){var height=item.height;height?(set++,sum+=height):not++};var damHeight=not?this.defaults.damHeight:sum;var averageHeight=(damHeight-sum)/not;return{averageHeight:averageHeight,damHeight:damHeight}},autoAdjustWaterValue(list,len,val){var y=0;for(var i=0;i<len;i++){var obj=list[i];if(val){if(obj.y>val){obj.y=val}};if(y>obj.y){this.autoAdjustWaterValue(list,i,obj.y)};y=obj.y};return list},setDevicesPosition(list){list.sort(function(a,b){return b.dist-a.dist});for(var item of list){var waterX=~~(this.options.endX-item.dist*this.options.pxRetioX);var ladderSY=this.xPixelToStepsYPixel(waterX);var waterY=(item.depth-item.waterValue)*this.options.pxRetioY+ladderSY;item.x=waterX,item.y=waterY,item.stepY=ladderSY}},customizeDemo1:function(){var ix=this.options.initX;var ey=this.options.endY;var devices=this.devices;if(this.options.type==='polyxiadian'){devices=this.autoAdjustWaterValue(devices,devices.length)};var spx=devices[0].x-ix;var spy=devices[0].y;var epc=devices[devices.length-1];var epy=ey-epc.y;var sp={x:ix,y:spy-spx*this.options.HWRation};var ep={x:epy/this.options.HWRation+epc.x,y:ey};var poly=[].concat(sp,devices,ep,{x:ix,y:ey});this.drawPolyArea(poly)},drawCustomizeDevice:function(list){var lineW=4*this.dpr,deviceW=6*this.dpr,deviceH=3*this.dpr,waterFaceH=2*this.dpr;var endX=this.options.endX;var endY=this.options.endY;var ladders=this.Cache.ladders||[];var fontSize=11;var fontTopDev=fontSize*this.dpr+3;this.options.deviceCoords=[];var leftDist=this.options.initX;for(var item of list){var holeX=item.x;var depthText='孔深'+item.holeDepth+'';var holeLength=item.holeDepth*this.options.pxRetioY;var ladderSY=item.stepY;this.drawText({x:holeX,y:ladderSY-fontTopDev,size:fontSize,text:depthText,color:'red',align:'center',});var holeEndY=ladderSY+holeLength;holeEndY=holeEndY>endY?endY:holeEndY;this.drawLiner({sx:holeX,sy:ladderSY,ex:holeX,ey:holeEndY,width:lineW,color:"grey"});var deviceEY=item.y+(waterFaceH/2);var deviceSY=deviceEY-waterFaceH;this.drawLiner({sx:holeX,sy:deviceSY,ex:holeX,ey:deviceEY,width:deviceW,color:"#004AFC"});this.options.deviceCoords.push({x:holeX,y:item.y,stepY:ladderSY});var valFont=11;var valueSY=~~(deviceSY-valFont*this.dpr-6);var text='水位值'+item.waterValue+'';this.drawText({x:holeX,y:valueSY,size:valFont,text:text,color:'white',align:'center',})}},setModule:function(){this.ctx.clearRect(0,0,this.SumWidth,this.SumHeight);var canvas=this.canvas;var SumWidth=this.SumWidth=(this.ctn.clientWidth*this.dpr)-this.ctn.clientLeft-0;var SumHeight=this.SumHeight=this.ctn.clientHeight*this.dpr-this.ctn.clientTop-0;canvas.width=SumWidth*this.dpr;canvas.height=SumHeight*this.dpr;canvas.style.cssText='position:absolute;top:0;left:0;height:'+(SumHeight)+'px;width:'+SumWidth+'px;user-select: none;-webkit-tap-highlight-color:rgba(0,0,0,0);padding:0;margin:0;border-width:0;box-sizing: border-box;';var top=this.options.initY,left=this.options.initX,bottom=this.options.bottomDist,right=this.options.rightDist;var damPxWidth=SumWidth-(right+left),damPxHeight=SumHeight-(bottom+top+this.options.axisLineWidth),endX=SumWidth-right,endY=SumHeight-bottom-this.options.axisLineWidth;this.options['endX']=endX;this.options['endY']=endY;this.options['damPxWidth']=damPxWidth;this.options['damPxHeight']=damPxHeight;this.options['pxRetioX']=damPxWidth/this.defaults.damWidth;this.options['pxRetioY']=damPxHeight/this.options.damHeight;this.options['HWRation']=(endY-top)/(endX-left);this.drawChart()},formatDeviceParam:function(devices){var devices=devices||[];var arr=[];for(var item of devices){arr.push({dist:item.jrx_coord_x,holeDepth:item.jrx_trepanning,value:item.depth,depth:item.jrx_burial,waterValue:item.stage})};return arr},getAlarmRealParam:function(aValues){var aval=aValues[0];var coords=this.devices||[];var valY=aval*this.options.pxRetioY;var sy=valY+coords[0].stepY,sx=coords[0].x,ey=0,ex=0;var len=coords.length;for(var i=1;i<len;i++){var item=coords[i];ey=valY+item.stepY,ex=item.x};return{ratio:(ey-sy)/(ex-sx),sy:sy,ey:ey}},drawChart:function(){var Steps=this.drawSteps(this.ladders);this.drawAxis(this.options.axisColor,Steps.damHeight);this.setDevicesPosition(this.devices);if(this.options.type==='arcdiagram'){this.drawWaterArea()}else{this.customizeDemo1()};this.drawCustomizeDevice(this.devices);this.drawAlarmLine(this.options.alarm,Steps)},onresize:function(){qf.resize(()=>{this.setModule()})},updateData:function(data){data=data||{};this.stations=data.stations||this.stations;this.points=data.points||this.points;this.draw(this.cacheX+this.destX,true)},drawLiner:function(o){var ctx=this.ctx;ctx.beginPath();ctx.moveTo(o.sx,o.sy);ctx.lineTo(o.ex,o.ey);ctx.lineWidth=o.width;ctx.strokeStyle=o.color;ctx.stroke()},drawPolyArea:function(poly){var ctx=this.ctx;ctx.beginPath();for(var i=0,len=poly.length;i<len;i++){var item=poly[i];if(i){ctx.lineTo(item.x,item.y)}else{ctx.moveTo(item.x,item.y)}};ctx.fillStyle=this.options.waterColor;ctx.fill()},drawText:function(o){var ctx=this.ctx;var fontSize=(o.size||14)*this.dpr;var text=o.text||'';var textWidth=this.getTextWidth(text,fontSize);var width=o.width||textWidth;var align=o.align||'normal';ctx.font='normal '+fontSize+"px 'Open Sans', 'PingFang SC', Helvetica, Arial, sans-serif";var rows=[];if(width&&~~width<textWidth){var str='',texts=text.split("");for(var word of texts){var testStr=str+word;var testWidth=ctx.measureText(testStr).width;if(testWidth>width){rows.push(str);str=word}else{if(testWidth===width){rows.push(testStr);str=''}else{str=testStr}}};str&&rows.push(str)}else{rows=text.split(/\r\n|\n/g)};var rlen=rows.length,sumHeight=(rlen+1)*fontSize;var x=o.x;var y=o.vertical==='center'?o.y-(sumHeight/2):o.y;var color=o.randomColor?this.getRandomColor():o.color||'red';var lsx=x,lsy=y;for(var b=0;b<rlen;b++){if(align==='center'){var textW=this.getTextWidth(rows[b],fontSize);lsx=x-(textW/2)};lsy=(b+1)*fontSize;ctx.lineHeight=1;ctx.fillStyle=color;ctx.fillText(rows[b],~~lsx+0.5,y+(~~lsy)+0.5)}},getTextWidth:function(text,fontSize){return(this.ctx.measureText(text).width/parseInt(this.ctx.font))*fontSize},drawImg:function(img,x,y,w,h){x=x-w/2;y=y-h;ctx.drawImage(img,x,y,w,h)},getRandomColor:function(){return"#"+Math.floor(Math.random()*16777215).toString(16)},getEventTarget:function(x,y){if(y>bottomReferY-imgA.height-1&&y<bottomReferY+1){var arr=this.points;var i=arr.length-1,obj,halfW=imgA.width/2-1;while(obj=arr[i]){var ix=this.getDrawDoord(obj.x*1);if(Math.abs(ix-x)<halfW){return obj};i--}};if(y>bottomReferY-imgB.height-1&&y<bottomReferY+1){var arr=this.stations;var i=arr.length-1,obj,halfW=imgA.width/2-1;while(obj=arr[i]){var ix=this.getDrawDoord(obj.x*1);if(Math.abs(ix-x)<halfW){return obj};i--}}},xPixelToStepsYPixel:function(x){var ladders=this.Cache.ladders||[],ladderSY=0;for(var ladder of ladders){if(x>=ladder.sx&&x<ladder.slopeX){if(x<ladder.ex){ladderSY=ladder.sy}else{var slopeWidth=ladder.slopeX-ladder.ex;var slopeHeight=ladder.slopeY-ladder.ey;ladderSY=(x-ladder.ex)*(slopeHeight/slopeWidth)+ladder.ey}}};return ladderSY},};return new cuCharts(ctn,data,opts);
},
mapOnload(){
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment