import svgObject from "./svgOjbect" import ConstParas from "@/utils/constParas.js"; import UnitHelper from "@/utils/unit.js"; import PointToleranceConfig from "./PointToleranceConfig.js"; const ZlpChartDiagram = function () { var m_svg = null; var m_unit = { Q: 1, H: 0, P: 1 }; //功率、流量、扬程单位集合 var m_pumpInfo; //泵基本信息 var m_wrkCurve4Pixel; //工作曲线 var m_displayStyle; //显示样式 var m_chartSize; var m_localizationType = 0; //中文zhCN = 0, zhTW = 1, enUS = 2 var m_divChartName; //容器DIV名称 var m_chartSetting; var m_coordinatePara; //坐标信息 var m_chartObject; //图表上的物体 var m_warterMarkText; //水印 var m_toolTipContent; var m_dispEquipmentCurve = false; //装置曲线是否显示 var m_equipZeroH = 0; //装置曲线静扬程 //初始化显示设置 var initialDispStyle = function (displayStyle, chartSetting) { if (displayStyle != null) { m_displayStyle = displayStyle; } else { m_displayStyle = {}; m_displayStyle.IsMonoColor = false; m_displayStyle.DesignPointDispType = 0; //设计点显示方式(eDesignPointDispType) Cross 0 LeftDownTriangle 2 } m_displayStyle.GridLine = { "stroke": "#cccccc", "stroke-width": "1", "fill": "none", "zIndex": 10 }; m_displayStyle.ColorH = "#0000ff"; m_displayStyle.ColorE = "#8e870e"; m_displayStyle.ColorEquipment = "#013317"; if(m_displayStyle.IsMonoColor){ m_displayStyle.ColorH = "#000000"; m_displayStyle.ColorE = "#000000"; m_displayStyle.ColorP = "#000000"; m_displayStyle.ColorNPSH = "#000000"; m_displayStyle.ColorEquipment = "#000000"; m_displayStyle.ColorEqualParaCurvesE = "#000000"; m_displayStyle.ColorCurveLabel = "#000000"; } m_displayStyle.ColorCurveSize = 10; if (m_displayStyle.IsDispCurveLabel == null) m_displayStyle.IsDispCurveLabel = true; m_displayStyle.isAxisIntervalX = true; m_displayStyle.isDispMiniTick = true; //是否显示子刻度 m_displayStyle.MiniTickNumber = 1; }; //转成Bezier曲线模型 var transBezierCurveModel = function (pixelPoints) { if (pixelPoints == null || pixelPoints.length < 4) return null; var iPointCout = pixelPoints.length; var a = 0.09; var b = 0.09; var controlPoint = new Array(); for (var i = 0; i < iPointCout - 1; i++) { var bezier = {}; bezier.Point0 = pixelPoints[i]; if (i == 0) { var x1 = pixelPoints[i].X + a * (pixelPoints[i + 1].X - pixelPoints[i].X); var y1 = pixelPoints[i].Y + a * (pixelPoints[i + 1].Y - pixelPoints[i].Y); bezier.Point1 = { "X": x1, "Y": y1 }; } else { var x1 = pixelPoints[i].X + a * (pixelPoints[i + 1].X - pixelPoints[i - 1].X); var y1 = pixelPoints[i].Y + a * (pixelPoints[i + 1].Y - pixelPoints[i - 1].Y); bezier.Point1 = { "X": x1, "Y": y1 } } if (i == iPointCout - 2) { var x2 = pixelPoints[i + 1].X - b * (pixelPoints[i + 1].X - pixelPoints[i].X); var y2 = pixelPoints[i + 1].Y - b * (pixelPoints[i + 1].Y - pixelPoints[i].Y); bezier.Point2 = { "X": x2, "Y": y2 } } else { var x2 = pixelPoints[i + 1].X - b * (pixelPoints[i + 2].X - pixelPoints[i].X); var y2 = pixelPoints[i + 1].Y - b * (pixelPoints[i + 2].Y - pixelPoints[i].Y); bezier.Point2 = { "X": x2, "Y": y2 } } bezier.Point3 = pixelPoints[i + 1]; controlPoint.push(bezier); } return controlPoint; }; //转成曲线路径 var transBezierCurveToPath = function (pixelPoints) { var bezierCurveValue = transBezierCurveModel(pixelPoints); if (bezierCurveValue == null) { return; } var pathValue = new Array(); for (var h = 0; h < bezierCurveValue.length; h++) { if (h == 0) { pathValue.push("M ", bezierCurveValue[h].Point0.X, " ", bezierCurveValue[h].Point0.Y); pathValue.push(" C ", bezierCurveValue[h].Point1.X, " ", bezierCurveValue[h].Point1.Y, " ", bezierCurveValue[h].Point2.X, " ", bezierCurveValue[h].Point2.Y, " ", bezierCurveValue[h].Point3.X, " ", bezierCurveValue[h].Point3.Y); } else { pathValue.push(" L ", bezierCurveValue[h].Point0.X, " ", bezierCurveValue[h].Point0.Y); pathValue.push(" C ", bezierCurveValue[h].Point1.X, " ", bezierCurveValue[h].Point1.Y, " ", bezierCurveValue[h].Point2.X, " ", bezierCurveValue[h].Point2.Y, " ", bezierCurveValue[h].Point3.X, " ", bezierCurveValue[h].Point3.Y); } if (h == bezierCurveValue.length - 1) { pathValue.push(" L ", bezierCurveValue[h].Point3.X, " ", bezierCurveValue[h].Point3.Y); } } return pathValue; }; var getActualValue = function (actualMinValue, actualMaxValue, pixelMinValue, pixelMaxValue, pixelValue) { var actual = null; actual = (pixelValue - pixelMinValue) / (pixelMaxValue - pixelMinValue) * (actualMaxValue - actualMinValue) + actualMinValue; // actual = (pixelValue - pixelMinValue) / (pixelMaxValue - pixelMinValue) * (actualMaxValue - actualMinValue) + pixelMinValue; return actual; }; // actualValue 是标准单位下的值 var getPixelValueQ = function(actualValue) { //console.log(actualValue) var min= UnitHelper.ConvertQ_toM3H(m_coordinatePara.UnitQ, m_coordinatePara.CoordMinQ) ; var space = UnitHelper.ConvertQ_toM3H(m_coordinatePara.UnitQ, m_coordinatePara.CoordSpaceQ); return m_chartSize.SpaceLeft + (actualValue - min ) * m_chartSize.DiagramWidth / ( space * m_coordinatePara.GridNumberQ); //return (actualValue - actualMinValue) / (actualMaxValue - actualMinValue) * (pixelMaxValue - pixelMinValue) + pixelMinValue; }; var getPixelValueH = function(actualValue) { return m_chartSize.DiagramBottomY - (actualValue - m_coordinatePara.CoordMinH) * m_chartSize.DiagramHeight / (m_coordinatePara.CoordSpaceH * m_coordinatePara.GridNumberH); }; var getPixelValue = function (actualValue, actualMinValue, actualMaxValue, pixelMinValue, pixelMaxValue) { return (actualValue - actualMinValue) / (actualMaxValue - actualMinValue) * (pixelMaxValue - pixelMinValue) + pixelMinValue; }; var getSectPoint4Pixel = function (curve, x) { var iPtCount = curve.length; if (x < curve[0].Point0.X) { return null; } if (x > curve[iPtCount - 1].Point3.X) { return null; } for (var i = 0; i < iPtCount; i++) { if (x > curve[i].Point0.X && x < curve[i].Point3.X) { var ptBizer = curve[i]; // try { //alert(i); var minDis = Math.abs(ptBizer.Point3.X - ptBizer.Point0.X); //alert(x + " " + curve[i].Point0.X + " " + curve[i].Point3.X); var sectY = 0; var sectX = 0; for (var uu = 0; uu <= 1; uu = uu + 0.05) { var x0 = ptBizer.Point0.X * uu * uu * uu; var x1 = 3 * ptBizer.Point1.X * uu * uu * (1 - uu); var x2 = 3 * ptBizer.Point2.X * uu * (1 - uu) * (1 - uu); var x3 = ptBizer.Point3.X * (1 - uu) * (1 - uu) * (1 - uu); var curveX = x0 + x1 + x2 + x3; if (Math.abs(curveX - x) < minDis) { var y0 = ptBizer.Point0.Y * uu * uu * uu; var y1 = 3 * ptBizer.Point1.Y * uu * uu * (1 - uu); var y2 = 3 * ptBizer.Point2.Y * uu * (1 - uu) * (1 - uu); var y3 = ptBizer.Point3.Y * (1 - uu) * (1 - uu) * (1 - uu); minDis = Math.abs(curveX - x); sectY = y0 + y1 + y2 + y3; sectX = curveX; } } return { x: sectX, y: sectY }; } catch (ex) { alert(ex.message); } } } }; //通过流量获取扬程 var getHbyQ4WrkWaterCurve = function (q) { var qPixel = getPixelValue(q, m_coordinatePara.CoordMinQ, m_coordinatePara.CoordMaxQ, m_chartSize.SpaceLeft, m_chartSize.DiagramRightX); var r = getSectPoint4Pixel(m_wrkCurve4Pixel, qPixel); if (r == null) return 0; return getActualValue(m_coordinatePara.CoordMinH, m_coordinatePara.CoordMaxH, m_chartSize.DiagramBottomY, m_chartSize.SpaceTop, r.y); }; //通过流量获取效率 var getEbyQ4WrkWaterCurve = function (q) { var qPixel = getPixelValue(q, m_coordinatePara.CoordMinQ, m_coordinatePara.CoordMaxQ, m_chartSize.SpaceLeft, m_chartSize.DiagramRightX); var r = getSectPoint4Pixel(m_wrkCurve4Pixel.QE, qPixel); if (r == null) return 0; return getActualValue(m_coordinatePara.CoordMinE, m_coordinatePara.CoordMaxE, m_chartSize.DiagramBottomY, m_chartSize.SpaceTop, r.y); }; //通过流量获取功率 var getPbyQ4WrkWaterCurve = function (q) { var qPixel = getPixelValue(q, m_coordinatePara.CoordMinQ, m_coordinatePara.CoordMaxQ, m_chartSize.SpaceLeft, m_chartSize.DiagramRightX); var r = getSectPoint4Pixel(m_wrkCurve4Pixel.QP, qPixel); if (r == null) return 0; return getActualValue(m_coordinatePara.CoordMinP, m_coordinatePara.CoordMaxP, m_chartSize.DiagramBottomY, m_chartSize.SpaceTop, r.y); }; // var getSvgObjByName = function (objName) { return m_svg.getPathByName(objName); }; //查询线 var m_infoDv4VerticalLine; var m_verticalLine; var m_dispVerticalLine = false; var dispVerticalLine = function (disp) { m_dispVerticalLine = disp; if(m_infoDv4VerticalLine){ if (disp) { m_infoDv4VerticalLine.show(); m_verticalLine.show(); } else { //console.log(m_infoDv4VerticalLine, 210) m_infoDv4VerticalLine.hide(); m_verticalLine.hide(); } } }; var intersection = function (isShow) { //alert(m_svg.getPathByName("verticalLine")); if (isShow) { $(m_svg.getPathByName("verticalLine")).show(); } else { $(m_svg.getPathByName("verticalLine")).hide(); //$("#verticalLine").hide(); } }; var createVerticalLine = function () { if ($("#infoDv4VerticalLine").is("div")) { $("#infoDv4VerticalLine").remove(); } //先创建用于放置查询信息的Div var htmlDiv = "流量"; $("#" + m_divChartName).append($("
").css({ "position": "relative", //relative absolute "color": "gray", "font-size": "8px", //"font-family": "Times New Roman", //"font-weight": "bold", "width": "120px", "left": (m_chartSize.DiagramRightX - 100).toString() + "px", "top": (12 - m_chartSize.TotalHeight).toString() + "px", // + m_divChartName + "px" }).html(htmlDiv).hide()); m_infoDv4VerticalLine = $("#infoDv4VerticalLine"); //console.log(m_infoDv4VerticalLine, 247) var attr4verticalLine = { "stroke": "#A52A2A", "stroke-width": "2", "fill": "none", "zIndex": 100, "cursor": 'pointer', "stroke-opacity": '1', "shape-rendering": "geometricPrecision", }; var xStartValuePixel = (m_chartSize.SpaceLeft + m_chartSize.DiagramRightX) / 2; // 开始位置 //创建竖直线 var pathValue = new Array(); var vertialLinePathName = "verticalLine"; pathValue.push("M ", xStartValuePixel, " ", m_chartSize.SpaceTop, " L ", xStartValuePixel, " ", m_chartSize.DiagramBottomY); m_svg.createPath(vertialLinePathName, pathValue.join(''), { id: vertialLinePathName }, attr4verticalLine, null); var xPixel = xStartValuePixel dispQueryLineInfo(xStartValuePixel); var isMoveVerticalLine = false; //m_svg.getPathByName("verticalLine") m_verticalLine = $(getSvgObjByName(vertialLinePathName)); m_verticalLine.mousedown(function (e) { isMoveVerticalLine = true; //WebApp.stopDefault(e); e.preventDefault(); // $("#infoDv4VerticalLine").show(); //$("#infoDv4VerticalLine").show().css({ // "left": e.clientX + 5, // "top": e.clientY //}); }); $(document).mousemove(function (e) { var svg = m_svg.getNode(); if (isMoveVerticalLine) { var e = window.event || e; if (e.clientX - $(svg).offset().left > m_chartSize.SpaceLeft && m_chartSize.DiagramRightX + $(svg).offset().left - e.clientX > 0 && e.clientY - $(svg).offset().top > m_chartSize.SpaceTop && m_chartSize.DiagramBottomY + $(svg).offset().top - e.clientY > 0) { //x的像素 var xPixel2 = parseFloat(e.clientX - $(svg).offset().left); dispQueryLineInfo(xPixel2); var pathValue = new Array(); pathValue.push("M ", e.clientX - $(svg).offset().left, " ", m_chartSize.SpaceTop, " L ", e.clientX - $(svg).offset().left, " ", m_chartSize.DiagramBottomY); m_verticalLine.attr("d", pathValue.join('')); //修改位置 } } }).mouseup(function (e) { if (isMoveVerticalLine) { isMoveVerticalLine = false; //m_verticalLine.hide(); } }); //设置显示 dispVerticalLine(m_dispVerticalLine); }; var dispQueryLineInfo = function (xPixel) { //x的像素 var flow = "流量"; var head = "扬程"; if (m_localizationType == 2) { flow = "Q"; head = "H"; } flow = flow + " : " + parseFloat(getActualValue(m_coordinatePara.CoordMinQ, m_coordinatePara.CoordMaxQ, m_chartSize.SpaceLeft, m_chartSize.DiagramRightX, xPixel)).toFixed(1); flow = flow; //+ "m³/h"; var hPt = getSectPoint4Pixel(m_wrkCurve4Pixel, xPixel); if (hPt == null) return; var h = getActualValue(m_coordinatePara.CoordMinH, m_coordinatePara.CoordMaxH, m_chartSize.DiagramBottomY, m_chartSize.SpaceTop, hPt.y); head = head + " : " + h.toFixed(1); head = head; //+ "m"; m_infoDv4VerticalLine.show().html(flow + "
" + head + "
"); }; var svgClick = function (e, svg) { if (m_toolTipContent == null) return; if (e.clientX - $(svg).offset().left > m_chartSize.SpaceLeft && m_chartSize.DiagramRightX + $(svg).offset().left - e.clientX > 0 && e.clientY - $(svg).offset().top > m_chartSize.SpaceTop && m_chartSize.DiagramBottomY + $(svg).offset().top - e.clientY > 0) { var htmlContent = new Array(); var xPixel = e.clientX - $(svg).offset().left; var yPixel = e.clientY + $(document).scrollTop() - $(svg).offset().top; //可视区域 滚动有问题,所以要加上$(document).scrollTop() var flow = "点击处: 流量"; var head = "扬程"; var power = "功率"; if (m_localizationType == 2) { flow = "Click point : Q"; head = "H"; cavitation = "NPSH"; } flow = flow + " : " + parseFloat(getActualValue(m_coordinatePara.CoordMinQ, m_coordinatePara.CoordMaxQ, m_chartSize.SpaceLeft, m_chartSize.DiagramRightX, xPixel)).toFixed(1); htmlContent.push(flow + " m³/h"); htmlContent.push("  "); if (yPixel <= m_coordinatePara.ValidPixelMinH && yPixel >= m_coordinatePara.ValidPixelMaxH) { head = head + " : " + parseFloat(getActualValue(m_coordinatePara.CoordMinH, m_coordinatePara.CoordMaxH, m_chartSize.DiagramBottomY, m_chartSize.SpaceTop, yPixel)).toFixed(1); //alert(yPixel); alert(head); htmlContent.push(head + " m"); htmlContent.push("  "); } m_toolTipContent.html(htmlContent.join('')); } }; var svgMove = function (e, svg) { //alert("svgMove"); }; //初始化面板 var initialPanelSize = function ( ) { var divName = m_divChartName; if (divName == null) { return; } if (m_chartSize == null) { m_chartSize = {}; m_chartSize.TotalWidth = document.getElementById(divName).clientWidth; m_chartSize.TotalHeight = document.getElementById(divName).clientHeight; } if (m_chartSize.TotalHeight < 400) m_chartSize.TotalHeight = 400; var space_left = 44; var space_right = 12; var space_top = 15; var space_bottom = 55; if (m_localizationType == 2) { space_left = 65; space_right = 65; } m_chartSize.DiagramWidth = m_chartSize.TotalWidth - space_left - space_right; m_chartSize.DiagramHeight = m_chartSize.TotalHeight - space_top - space_bottom; m_chartSize.SpaceLeft = space_left; m_chartSize.SpaceTop = space_top; m_chartSize.SpaceRight = space_right; m_chartSize.SpaceBottom = space_bottom; m_chartSize.DiagramRightX = m_chartSize.TotalWidth - space_right; m_chartSize.DiagramBottomY = m_chartSize.TotalHeight - space_bottom; m_coordinatePara.SpaceSpixelX = m_chartSize.DiagramWidth / m_coordinatePara.GridNumberQ; m_coordinatePara.SpaceSpixelY = m_chartSize.DiagramHeight / m_coordinatePara.GridNumberH; m_coordinatePara.ValidPixelMinH = m_chartSize.DiagramBottomY - m_coordinatePara.SpaceSpixelY * m_coordinatePara.StartLineNoH; m_coordinatePara.ValidPixelMaxH = m_chartSize.DiagramBottomY - m_coordinatePara.SpaceSpixelY * m_coordinatePara.EndLineNoH; //把间隙弄小点 var areaAttr = { x: space_left, y: space_top, width: m_chartSize.DiagramWidth, height: m_chartSize.DiagramHeight }; var areaStyle = { "stroke-width": "1px", "stroke": "#cccccc", "fill": "#ffffff", "fill-opacity": "0.5", "zIndex:": 5 }; // //console.log(m_chartSize); m_svg = new svgObject().init(divName, m_chartSize.TotalWidth, m_chartSize.TotalHeight, svgClick, svgMove); // m_svg.createArea(areaAttr, areaStyle); }; //初始化工作曲线 var intitalWrkCurveInfo = function () { m_wrkCurve4Pixel = null; if (m_chartObject.WorkCurve != null) { var pixelPoints = new Array(); var points = m_chartObject.WorkCurve; for (var v = 0; v < points.length; v++) { var pt = points[v]; var x = m_chartSize.SpaceLeft + (pt.X - m_coordinatePara.CoordMinQ) * m_chartSize.DiagramWidth / (m_coordinatePara.CoordSpaceQ * m_coordinatePara.GridNumberQ); var y = m_chartSize.DiagramBottomY - (pt.Y - m_coordinatePara.CoordMinH) * m_chartSize.DiagramHeight / (m_coordinatePara.CoordSpaceH * m_coordinatePara.GridNumberH); pixelPoints.push({ "X": x, "Y": y }); } m_wrkCurve4Pixel = transBezierCurveModel(pixelPoints); } else { for (var i = 0; i < m_chartObject.CurveListQH.length; i++) { if (m_chartObject.CurveListQH[i].CurvePara == 0) { var pixelPoints = new Array(); var points = m_chartObject.CurveListQH[i].PointInfo; for (var v = 0; v < points.length; v++) { var pt = points[v]; var x = m_chartSize.SpaceLeft + (pt.X - m_coordinatePara.CoordMinQ) * m_chartSize.DiagramWidth / (m_coordinatePara.CoordSpaceQ * m_coordinatePara.GridNumberQ); var y = m_chartSize.DiagramBottomY - (pt.Y - m_coordinatePara.CoordMinH) * m_chartSize.DiagramHeight / (m_coordinatePara.CoordSpaceH * m_coordinatePara.GridNumberH); pixelPoints.push({ "X": x, "Y": y }); } m_wrkCurve4Pixel = transBezierCurveModel(pixelPoints); } } } }; //产生网格线竖直方向 var createGridLineX = function () { if (m_coordinatePara == null) { return; } var attr = { "stroke": "#cccccc", "stroke-width": "1", "fill": "none", "zIndex": 10 }; if (m_displayStyle != null && m_displayStyle.GridLine != null) { attr = m_displayStyle.GridLine; } for (var i = 0; i <= m_coordinatePara.GridNumberQ; i++) { var distance = m_coordinatePara.SpaceSpixelX * i; var valueTemp = new Array(); valueTemp.push("M ", m_chartSize.SpaceLeft + distance, " ", m_chartSize.SpaceTop, " L ", m_chartSize.SpaceLeft + distance, " ", m_chartSize.DiagramBottomY); m_svg.createPath("GridLienX" + i, valueTemp.join(''), attr, null); } }; //产生网格线水平方向 var createGridLineY = function () { if (m_coordinatePara == null) { return; } var attr = { "stroke": "#cccccc", "stroke-width": "1", "fill": "none", "zIndex": 10 }; if (m_displayStyle != null && m_displayStyle.GridLine != null) { attr = m_displayStyle.GridLine; } for (var i = 0; i <= m_coordinatePara.GridNumberH; i++) { var distance = m_coordinatePara.SpaceSpixelY * i; var valueTemp = new Array(); valueTemp.push("M ", m_chartSize.SpaceLeft, " ", m_chartSize.SpaceTop + distance, " L ", m_chartSize.DiagramRightX, " ", m_chartSize.SpaceTop + distance); m_svg.createPath("GridLienY" + i, valueTemp.join(''), attr, null); } }; //翻译 var getTranslateString = function(cn) { if (m_localizationType == 0) return cn; if (cn == "流量") return "Flow"; else if (cn == "压力") return "Press"; else if (cn == "扬程") return "Head"; else if (cn == "效率") return "Eta"; else if (cn == "功率") return "Power"; else return cn; }; //绘制x坐标(含标题) var createXAxis = function () { if (m_coordinatePara == null) { return; } //刻度线 var attrAxisTickX = { "stroke": "black", "stroke-width": "1", "fill": "none", "zIndex": 10 }; //刻度长度 var minTickLength = 4; var tickLength = 6; //刻度文字 var styleAxisLabelX = "font-size:10px;fill:red;fill-opacity:1;fill:black;"; //font-weight:bold //标题文字 var styleAxisTitleX = "font-size:12px;fill:red;fill-opacity:1;fill:black;font-weight:bold;"; // m_displayStyle.isAxisIntervalX = false; m_displayStyle.isRotateLabelX = false; if(m_coordinatePara.GridNumberQ >7){ m_displayStyle.isAxisIntervalX = true; m_displayStyle.isRotateLabelX = true; } // for (var i = 0; i <= m_coordinatePara.GridNumberQ; i++) { var q = (m_coordinatePara.CoordMinQ + i * m_coordinatePara.CoordSpaceQ); // console.log(q,m_displayStyle.isAxisIntervalX) var content = UnitHelper.valueFormat(q);// UnitHelper.valueFormat(UnitHelper.getDispValueQ(UnitHelper.ConvertQ_fromM3H(m_unit.Q, q))); var posiX_grid = m_chartSize.SpaceLeft + m_coordinatePara.SpaceSpixelX * i; //刻度线 var valueMain = new Array(); valueMain.push("M ", posiX_grid, " ", m_chartSize.DiagramBottomY, " L ", posiX_grid, " ", m_chartSize.DiagramBottomY + tickLength); m_svg.createPath("TickLineX" + i, valueMain.join(''), attrAxisTickX, null); //文字 m_isAxisIntervalX var label_y = m_chartSize.DiagramBottomY + tickLength + 12; if (m_displayStyle.isRotateLabelX) label_y = label_y + 1; var attrAxisLabelX = { "opacity": 1, "x": posiX_grid, "y": label_y, "text-anchor": "middle" }; var transform = null; if (m_displayStyle.isRotateLabelX) transform = "rotate(45 " + posiX_grid + "," + label_y + ")"; if ( m_displayStyle.isAxisIntervalX) { if (i % 2 == 0) m_svg.createText(attrAxisLabelX, styleAxisLabelX, content, 10, null, transform); } else { m_svg.createText(attrAxisLabelX, styleAxisLabelX, content, 10, null, transform); } //子刻度线 if (m_displayStyle.isDispMiniTick && i != m_coordinatePara.GridNumberQ) { for (var j = 0; j <= m_displayStyle.MiniTickNumber; j++) { var pois_minTick = posiX_grid + m_coordinatePara.SpaceSpixelX * j / (m_displayStyle.MiniTickNumber + 1); var valueMini = new Array(); valueMini.push("M ", pois_minTick, " ", m_chartSize.DiagramBottomY, " L ", pois_minTick, " ", m_chartSize.DiagramBottomY + minTickLength); m_svg.createPath("TickMinLineX" + i, valueMini.join(''), attrAxisTickX, null); } } } var attrAxisTitleX = { "opacity": 1, "x": (m_chartSize.SpaceLeft + m_chartSize.DiagramRightX) / 2, "y": m_chartSize.DiagramBottomY + 38, "text-anchor": "middle" }; if (m_displayStyle.isRotateLabelX) attrAxisTitleX.y = attrAxisTitleX.y + 12; let unit_name = UnitHelper.GetUnitNameQ(m_unit.Q); var axis_title = getTranslateString("流量") + " (" + unit_name + ")"; m_svg.createText(attrAxisTitleX, styleAxisTitleX,axis_title ); }; //绘制Y坐标(含标题) var createYAxis = function () { if (m_coordinatePara == null) { return; } //刻度长度 var minTickLength = 3; var tickLength = 6; //刻度线 var attrAxisTickH = { "stroke": m_displayStyle.ColorH, "stroke-width": "1", "fill": "none" }; //刻度文字 var styleAxisLabelH = "font-size:10px; fill-opacity:1; fill:" + m_displayStyle.ColorH + ";"; //标签 var styleAxisTitleH = "font-size:12px; ;fill-opacity:1; font-weight:bold; fill:" + m_displayStyle.ColorH + ";"; //标签 var attrAxisTitleH = { "opacity": 1, "x": m_chartSize.SpaceLeft - 32, "y": m_chartSize.DiagramBottomY - m_chartSize.DiagramHeight / 2, "text-anchor": "middle" }; if (m_localizationType == 0) { //中文 attrAxisTitleH.y = attrAxisTitleH.y - 5; m_svg.createText(attrAxisTitleH, styleAxisTitleH, "扬"); attrAxisTitleH.y = attrAxisTitleH.y + 15; m_svg.createText(attrAxisTitleH, styleAxisTitleH, "程"); if (m_coordinatePara.UnitH == 0) { attrAxisTitleH.y = attrAxisTitleH.y + 18; m_svg.createText(attrAxisTitleH, styleAxisTitleH, "(m)"); } } else { attrAxisTitleH.y = attrAxisTitleH.y + 15; attrAxisTitleH.x = attrAxisTitleH.x - 5; m_svg.createText(attrAxisTitleH, styleAxisTitleH, "Head"); if (m_coordinatePara.UnitH == 0) { attrAxisTitleH.y = attrAxisTitleH.y + 18; m_svg.createText(attrAxisTitleH, styleAxisTitleH, "(m)"); } } // for (var i = 0; i <= m_coordinatePara.GridNumberH; i++) { var content = UnitHelper.valueFormat(m_coordinatePara.CoordMinH + i * m_coordinatePara.CoordSpaceH); var posiY_grid = m_chartSize.DiagramBottomY - m_coordinatePara.SpaceSpixelY * i; //主刻度 var valueMain = new Array(); valueMain.push("M ", m_chartSize.SpaceLeft, " ", posiY_grid, " L ", m_chartSize.SpaceLeft - tickLength, " ", posiY_grid); m_svg.createPath("TickLineH" + i, valueMain.join(''), attrAxisTickH, null); //文字 var attrAxisLabelH = { "opacity": 1, "x": m_chartSize.SpaceLeft - 10, "y": posiY_grid + 3, "text-anchor": "end" }; m_svg.createText(attrAxisLabelH, styleAxisLabelH, content); //子刻度线 if (m_displayStyle.isDispMiniTick && i != m_coordinatePara.EndLineNoH) { for (var j = 1; j <= m_displayStyle.MiniTickNumber; j++) { var pois_minTick = posiY_grid - m_coordinatePara.SpaceSpixelY * j / (m_displayStyle.MiniTickNumber + 1); var valueMini = new Array(); valueMini.push("M ", m_chartSize.SpaceLeft, " ", pois_minTick, " L ", m_chartSize.SpaceLeft - minTickLength, " ", pois_minTick); m_svg.createPath("TickMinLineH" + i, valueMini.join(''), attrAxisTickH, null); } } } }; //产生装置曲线 var CreateEquipmentCurve = function () { $("#EquipmentCurve").remove(); if (m_chartObject.EquipmentSectPt == null) return; var pointNumber = 20; var EquipmentCurve = []; var space = m_chartObject.EquipmentSectPt.X / (pointNumber - 1); var k = (m_chartObject.EquipmentSectPt.Y - m_equipZeroH) / (m_chartObject.EquipmentSectPt.X * m_chartObject.EquipmentSectPt.X); for (var i = 0; i < pointNumber; i++) { var pt = {}; pt.X = space * i; pt.Y = m_equipZeroH + k * pt.X * pt.X; EquipmentCurve.push(pt); } createCurveQH("EquipmentCurve", EquipmentCurve, 1, m_displayStyle.ColorEquipment, m_dispEquipmentCurve); }; //绘制曲线 var createCurveQH = function (objName, points, curveWidth, curveColor, isDisp, strokeDasharray) { if (points == null) { return; } if (objName == null) { return; } var pixelPoints = new Array(); for (var v = 0; v < points.length; v++) { var pt = points[v]; var x = getPixelValueQ(pt.X); var y = getPixelValueH(pt.Y); pixelPoints.push({ "X": x, "Y": y }); } var pathValue = transBezierCurveToPath(pixelPoints); if (pathValue == null || pathValue == undefined) return; //有时会报错,加上这个就没事 tangxu 20151122 if (pathValue.toString().indexOf("M ,NaN, ,NaN") == 0) { return; }; var style = { "stroke-width": "2px", "stroke": m_displayStyle.ColorH, "fill": "none", "fill-opacity": "0.5", //"stroke-dasharray":"5 3", "shape-rendering": "geometricPrecision", "zIndex:": 7 }; if (curveWidth != null) { style["stroke-width"] = curveWidth; } if (curveColor != null) { style["stroke"] = curveColor; } if (strokeDasharray != null) { style["stroke-dasharray"] = strokeDasharray; //'10, 10';//'10, 10, 5, 5' } m_svg.createPath(objName, pathValue.join(''), { "id": objName }, style); if (isDisp != null && !isDisp) { $("#" + objName).hide(); } return pixelPoints; }; //绘制直线 var createLineQH = function (objName, point1, point2, curveWidth, curveColor, objTag) { if (point1 == null || point2 == null) { return; } if (objName == null) { return; } var x1 = getPixelValueQ(point1.X); var y1 = getPixelValueH(point1.Y); var x2 = getPixelValueQ(point2.X); var y2 =getPixelValueH(point2.Y); var style = { "stroke-width": "2px", "stroke": m_displayStyle.ColorH, "fill": "none", "fill-opacity": "0.5", //"stroke-dasharray":"5 3", "shape-rendering": "geometricPrecision", "zIndex:": 7 }; if (curveWidth != null) { style["stroke-width"] = curveWidth; } if (curveColor != null) { style["stroke"] = curveColor; } var temp = "M x1 y1 L x2 y2"; var pathValue = temp.replace("x1", x1).replace("y1", y1).replace("x2", x2).replace("y2", y2); if (objTag == null) m_svg.createPath(objName, pathValue, null, style); else m_svg.createPath(objName, pathValue, { "tag": objTag }, style); }; //绘制点 var createPointQH = function (objName, point, circleSize, circleColor) { if (point == null) { return; } if (objName == null) { return; } var xPixel = getPixelValueQ(point.X); var yPixel = getPixelValueH(point.Y); var attr = { "cx": xPixel, "cy": yPixel, "r": 2 } var style = { "stroke-width": "2px", "stroke": m_displayStyle.ColorH, "fill": "none", "fill-opacity": "0.5", //"stroke-dasharray":"5 3", "shape-rendering": "geometricPrecision", "zIndex:": 7 }; if (circleSize != null) { attr.r = circleSize; } if (circleColor != null) { style["stroke"] = circleColor; } m_svg.createCircle(objName, attr, style); }; //绘制文字 //textAnchor 文字对齐 start | middle | end var drawTextByQH = function (objName, text, point, textSize, textColor, offsetPixelX, offsetPixelY, textAnchor) { if (!text) { return; } if (!point) { return; } var xPixel =getPixelValueQ(point.X); if (offsetPixelX != null) { xPixel += offsetPixelX; } var yPixel = getPixelValueH(point.Y); if (offsetPixelY != null) { yPixel -= offsetPixelY; } var textStyle = "stroke-width:1px; "; //font-weight:bold; fill-opacity:0.9; if (textColor != null) { textStyle += " fill:" + textColor + ";"; } else { textStyle += " fill:#000000;"; } if (textSize != null) { textStyle += " font-size:" + textSize + "px;" } else { textStyle += " font-size:12px;"; } if (textAnchor != null) { textStyle += " text-anchor:" + textAnchor + ";"; } if (objName == null) { return m_svg.createText({ "opacity": 1, "y": yPixel, "x": xPixel }, textStyle, text); } else { return m_svg.createText({ "id": objName, "opacity": 1, "y": yPixel, "x": xPixel }, textStyle, text); } }; var drawDiagramPanel = function(){ //绘制网格线 createGridLineX(); createGridLineY(); //绘制坐标 createXAxis(); createYAxis(); }; //绘制图表 var drawChart = function () { drawDiagramPanel(); // if (m_chartObject.CurveListQH != null) { for (var i = 0; i < m_chartObject.CurveListQH.length; i++) { var points = m_chartObject.CurveListQH[i].PointInfo; if (points.length >= 4) { //曲线 createCurveQH("CurveQH" + i, points, 1, m_displayStyle.ColorH); } else if (points.length == 2 || points.length == 3) { //直线 createLineQH("CurveQH" + i, points[0], points[1], 1, m_displayStyle.ColorH); } else if (points.length == 1) { createPointQH("CurveQH" + i, points[0], 3, m_displayStyle.ColorH); } } } if (m_chartObject.CurveListQE != null) { for (var i = 0; i < m_chartObject.CurveListQE.length; i++) { var points = m_chartObject.CurveListQE[i].PointInfo; if (points.length >= 4) { //曲线 createCurveQH("CurveQE" + i, points, 1, m_displayStyle.ColorE); } else if (points.length == 2 || points.length == 3) { //直线 createLineQH("CurveQE" + i, points[0], points[1], 1, m_displayStyle.ColorE); } else if (points.length == 1) { createPointQH("CurveQE" + i, points[0], 3, m_displayStyle.ColorE); } } } if (m_chartObject.LabelPosi != null) { for (var i = 0; i < m_chartObject.LabelPosi.length; i++) { var lbl = m_chartObject.LabelPosi[i]; var posi = {}; posi.X = lbl.X; posi.Y = lbl.Y; //textAnchor 文字对齐 start | middle | end var curveName = "CurvePara" + lbl.CurveTag + i; // var drawTextByQH = function (objName, text, point, textSize, textColor, offsetPixelX, offsetPixelY, textAnchor) { // Right = 0, Bottom = 1, Left = 2, Top = 3, // console.log(lbl.CurveTag + " " + lbl.Text + " " + lbl.TextAligment); var lblColor = m_displayStyle.ColorH; if (lbl.CurveTag == "QE") lblColor = m_displayStyle.ColorE; if (lbl.TextAligment == 0) { drawTextByQH(curveName, lbl.Text, posi, 9, lblColor, 2, -4, "start"); } else if (lbl.TextAligment == 1) { drawTextByQH(curveName, lbl.Text, posi, 9, lblColor, 0, -15, "middle"); } else if (lbl.TextAligment == 2) { drawTextByQH(curveName, lbl.Text, posi, 9, lblColor, -2, -4, "end"); } else if (lbl.TextAligment == 3) { drawTextByQH(curveName, lbl.Text, posi, 9, lblColor, 0, 5, "middle"); } } } //设置设计点 drawDesignPoint(m_displayStyle.DesignPointDispType); //绘制工作曲线 if (m_chartObject.WorkCurve != null) { createCurveQH("WorkCurve", m_chartObject.WorkCurve, 2, "#ff0000"); } //初始化工作曲线 intitalWrkCurveInfo(); ////装置曲线 //CreateEquipmentCurve(); // //if (m_isDrawWaterMark && m_warterMarkText != null && m_warterMarkText.CN != "") // drawTextWaterMark(m_warterMarkText.CN); //createVerticalLine(); } //绘制水印 var drawTextWaterMark = function (text) { if (!text) { return; } var logoStyle = "-webkit-transform: rotate(5deg);-moz-transform: rotate(5deg);transform: rotate(5deg);fill:#000000;fill-opacity:0.6;font-weight:bold;stroke-width:1px"; var srt = text.toString(); var w = 30; var h = 80; var isDrawSecond = true; var left = null; var lingHeight = 250; logoStyle += ";font-size:10px"; w = 12; h = 35; isDrawSecond = false; left = (m_chartSize.DiagramRightX - m_chartSize.SpaceLeft - srt.length * w) / 2; for (var i = 0; i < srt.length; i++) { m_svg.createText({ "opacity": 0.5, "y": m_chartSize.SpaceTop + h + i * 10, "x": m_chartSize.SpaceLeft + left + i * w }, logoStyle, srt[i]); if (isDrawSecond) { var endHeight = h + srt.length * 10; //: h + srt.length * 10 - 80; m_svg.createText({ "opacity": 0.5, "y": m_chartSize.DiagramBottomY - endHeight + i * 10, "x": m_chartSize.SpaceLeft + left + i * w }, logoStyle, srt[i]) } } }; //绘制设计点 var drawDesignPoint = function (DispStyleType) { if (m_chartObject.DesignPoint1 == null) return; if (DispStyleType == 2) { //倒三角 var xPixel = m_chartSize.SpaceLeft + (m_chartObject.DesignPoint1.X - m_coordinatePara.CoordMinQ) * m_chartSize.DiagramWidth / (m_coordinatePara.CoordSpaceQ * m_coordinatePara.GridNumberQ); var yPixel = m_chartSize.DiagramBottomY - (m_chartObject.DesignPoint1.Y - m_coordinatePara.CoordMinH) * m_chartSize.DiagramHeight / (m_coordinatePara.CoordSpaceH * m_coordinatePara.GridNumberH); var xTri = m_chartSize.DiagramWidth / 20; var yTri = xTri / 2; var style = { "stroke-width": "2px", "stroke": "red", "fill": "none", "fill-opacity": "0.5", //"stroke-dasharray":"5 3", "shape-rendering": "geometricPrecision", "zIndex:": 18 }; //if (curveWidth != null) { // style["stroke-width"] = curveWidth; //} //if (curveColor != null) { // style["stroke"] = curveColor; //} var temp = "M x1 y1 L x2 y2"; var pathValue = temp.replace("x1", xPixel).replace("y1", yPixel).replace("x2", (xPixel - xTri)).replace("y2", yPixel); m_svg.createPath("DesignPointWater1", pathValue, { //"class": "DesignPoint1", "tag": "DesignPoint1" }, style); pathValue = temp.replace("x1", xPixel).replace("y1", yPixel).replace("x2", xPixel).replace("y2", (yPixel + yTri)); m_svg.createPath("DesignPointWater2", pathValue, { //"class": "DesignPoint1", "tag": "DesignPoint1" }, style); pathValue = temp.replace("x1", xPixel - xTri).replace("y1", yPixel).replace("x2", xPixel).replace("y2", (yPixel + yTri)); m_svg.createPath("DesignPointWater3", pathValue, { //"class": "DesignPoint1", "tag": "DesignPoint1" }, style); //m_svg.createPath(objName, pathValue.join(''), { // "id": objName //}, style); pathValue = temp.replace("x1", xPixel - xTri / 3).replace("y1", yPixel).replace("x2", xPixel).replace("y2", (yPixel + yTri / 3)); m_svg.createPath("DesignPointWater4", pathValue, { //"class": "DesignPoint1", "tag": "DesignPoint1" }, style); pathValue = temp.replace("x1", xPixel - xTri * 2 / 3).replace("y1", yPixel).replace("x2", xPixel).replace("y2", (yPixel + yTri * 2 / 3)); m_svg.createPath("DesignPointWater5", pathValue, { //"class": "DesignPoint1", "tag": "DesignPoint1" }, style); } else { //十字线 var x = m_chartObject.DesignPoint1.X; var y = m_chartObject.DesignPoint1.Y; var point1 = { X: x, Y: y * 0.92 }; var point2 = { X: x, Y: y * 1.08 }; createLineQH("DesignPointWater1", point1, point2, 3, "red", "DesignPoint1"); point1 = { X: x * 0.95, Y: y }; point2 = { X: x * 1.05, Y: y }; createLineQH("DesignPointWater2", point1, point2, 3, "red", "DesignPoint1"); } }; /** ----------------对外函数-------------------- **/ //设置设计点公差 this.SetUnit = function (unitQ, unitH, unitP) { m_unit.Q = unitQ; m_unit.H = unitH; m_unit.P = unitP; }; //设置语言 中文zhCN = 0, zhTW = 1, enUS = 2 this.setLocalizationType = function (localizationType) { m_localizationType = localizationType; }; //设置容器 this.setContainerDiv = function (divChartName, divWidth, divHeight) { m_divChartName = divChartName; if (m_chartSize == null) { m_chartSize = {}; } if (divWidth != null) { m_chartSize.TotalWidth = divWidth; } else { m_chartSize.TotalWidth = document.getElementById(divChartName).clientWidth; } if (divHeight != null) { m_chartSize.TotalHeight = divHeight; } else { m_chartSize.TotalHeight = document.getElementById(divChartName).clientHeight; } }; //初始化图表(入口) this.initialChart = function (ChartFullInfo, displayStyle) { //console.log(m_divChartName, ChartFullInfo, 1191) if (!m_divChartName) return; if (ChartFullInfo.ChartObjectDict == null) return; if (ChartFullInfo.ChartObjectDict.Coordinate == null) return; m_pumpInfo = ChartFullInfo.BaseInfo; m_chartObject = ChartFullInfo.ChartObjectDict; m_chartSetting = ChartFullInfo.SettingInfo; m_coordinatePara = ChartFullInfo.ChartObjectDict.Coordinate; //extend(m_coordinatePara, ChartFullInfo.Coordinate); // m_chartSetting.UnitQ = m_coordinatePara.UnitQ; // m_chartSetting.UnitH = m_coordinatePara.UnitH; //console.log(m_chartSetting, m_coordinatePara, 1191) this.SetUnit( //设置单位 m_chartSetting.UnitQ, m_chartSetting.UnitH, m_chartSetting.UnitP); //初始化显示设置 initialDispStyle(displayStyle, m_chartSetting); //初始化面板 initialPanelSize( ); //console.log("开始初始化", 1234) drawChart(); return this; }; //更新工作曲线信息 this.updateWrkInfo = function (ChartFullInfo) { //设置设计点 var listDesignPointWater = $("path[tag='DesignPoint1']"); listDesignPointWater.remove(); m_chartObject.DesignPoint1 = ChartFullInfo.ChartObject.DesignPoint1; drawDesignPoint(m_displayStyle.DesignPointDispType); // m_chartObject.WorkCurve = ChartFullInfo.ChartObject.WorkCurve; $("#WorkCurve").remove(); //objName, points, curveWidth, curveColor, isDisp, strokeDasharray createCurveQH("WorkCurve", m_chartObject.WorkCurve, 2, "#ff0000"); // intitalWrkCurveInfo(); //装置曲线 //CreateEquipmentCurve(); }; //重新刷新装置曲线 this.RefreshEquipmentCurve = function (equipZeroH) { m_equipZeroH = equipZeroH; CreateEquipmentCurve(); }; //设置装置曲线静扬程 this.SetEquipZeroH = function (equipZeroH) { m_equipZeroH = equipZeroH; }; //显示装置曲线 this.DispEquipmentCurve = function (isDisp) { m_dispEquipmentCurve = isDisp; if (isDisp) { $("#EquipmentCurve").show(); //var char = 'http://www.w3.org/2000/svg', //path = document.getElementsByTagNameNS(char, 'path')[0], //var path = document.getElementById("EquipmentCurve"); var pathEquipmentCurve = document.getElementById("EquipmentCurve"); //.getElementsByTagNameNS(char, 'path')[0], var len = pathEquipmentCurve.getTotalLength(); pathEquipmentCurve.style.strokeDasharray = len; pathEquipmentCurve.style.strokeDashoffset = len; pathEquipmentCurve.style.animation = 'act 1s linear forwards'; } else { $("#EquipmentCurve").hide(); } } //设置工具提示栏 this.setToolTipName = function (toolTipName) { m_toolTipContent = $("#" + toolTipName); }; //根据ID设置物体显示状态 this.setObjectDispByID = function (name, isDisp) { if (isDisp) { $("#" + name).show(); } else { $("#" + name).hide(); } }; //删除 this.removeByName = function (name) { m_svg.removeByName(name); }; //设置物体显示 this.setObjectVisibleByID = function (objName, isDisp) { var obj = m_svg.getPathByName(name); if (obj == null) return; if (isDisp) { series.style.display = ""; } else { series.style.display = "none"; } }; this.setObjectVisibleByTag = function (objTag, isDisp) { var list = $("path[tag='" + objTag + "']"); if (list.length == 0) return; if (isDisp) { list.show(); } else { list.hide(); } }; this.getHbyQ4WrkWaterCurve = function (q) { return getHbyQ4WrkWaterCurve(q); }; this.getEbyQ4WrkWaterCurve = function (q) { return getEbyQ4WrkWaterCurve(q); }; this.getPbyQ4WrkWaterCurve = function (q) { return getPbyQ4WrkWaterCurve(q); }; this.DispVerticalLine = function (disp) { dispVerticalLine(disp); }; this.ToggleVerticalLine = function () { if(m_infoDv4VerticalLine){ if (m_infoDv4VerticalLine.is(":hidden")) { dispVerticalLine(true); } else { dispVerticalLine(false); } } }; //设计点显示方式(eDesignPointDispType) Cross 0 LeftDownTriangle 2 this.SetDesignPointStyle = function (type) { var list = $("path[tag='DesignPoint1']"); list.remove(); drawDesignPoint(type); }; // this.GetTotalHeigth = function () { return m_chartSize.TotalHeight; }; this.GetTotalWidth = function () { return m_chartSize.TotalWidth; }; this.GetCoordinatePara = function () { return m_coordinatePara; }; this.UpdateByCoordinate = function (Coordinate) { m_coordinatePara = Coordinate; m_coordinatePara.CoordMaxQ = m_coordinatePara.CoordMinQ + m_coordinatePara.CoordSpaceQ * m_coordinatePara.GridNumberQ; m_coordinatePara.CoordMaxH = m_coordinatePara.CoordMinH + m_coordinatePara.CoordSpaceH * m_coordinatePara.GridNumberH; $("#" + m_divChartName).empty(); //初始化面板 initialPanelSize( ); drawChart(); }; //右边间隙 this.ChangePanelRightPadding = function (rightPadding) { m_chartSize.TotalWidth = document.getElementById(m_divChartName).clientWidth - rightPadding; m_chartSize.TotalHeight = document.getElementById(m_divChartName).clientHeight; $("#" + m_divChartName).empty(); //初始化面板 initialPanelSize( ); drawChart(); }; //重绘图表大小 this.Resize = function () { m_chartSize = null; //现在置空原有的尺寸 $("#" + m_divChartName).empty(); //初始化面板 initialPanelSize( ); drawChart(); }; }; export default ZlpChartDiagram