import svgObject from "./svgOjbect" import languageHelper from "@/utils/languageHelper.js" import UnitHelper from "@/utils/unit.js"; const ZlpChartDiagram = function () { var m_svg = null; 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_coordinatePara; //坐标信息 var m_chartObject; //图表上的物体 //var m_warterMarkText; //水印 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"; m_displayStyle.WrkCurveColor = "#ff0000"; 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.WrkCurveColor = "#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; if (chartSetting == null) { console.log("chartSetting none"); } }; //转成Bezier曲线模型 var transBezierCurveModel = function (pixelPoints) { if (pixelPoints == null || pixelPoints.length < 4) return null; var iPointCout = pixelPoints.length; var controlPoint = []; var smooth_value = 0.6; for (var i = 0; i < iPointCout - 1; i++) { var x0, y0; if (i > 0) { x0 = pixelPoints[i - 1].X; y0 = pixelPoints[i - 1].Y; } else { x0 = pixelPoints[i].X; y0 = pixelPoints[i].Y; } var x1 = pixelPoints[i].X; var y1 = pixelPoints[i].Y; var x2 = pixelPoints[i + 1].X; var y2 = pixelPoints[i + 1].Y; var x3, y3; if (i >= iPointCout - 2) { x3 = pixelPoints[i + 1].X; y3 = pixelPoints[i + 1].Y; } else { x3 = pixelPoints[i + 2].X; y3 = pixelPoints[i + 2].Y; } var xc1 = (x0 + x1) / 2.0; var yc1 = (y0 + y1) / 2.0; var xc2 = (x1 + x2) / 2.0; var yc2 = (y1 + y2) / 2.0; var xc3 = (x2 + x3) / 2.0; var yc3 = (y2 + y3) / 2.0; var len1 = Math.sqrt((x1 - x0) * (x1 - x0) + (y1 - y0) * (y1 - y0)); var len2 = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1)); var len3 = Math.sqrt((x3 - x2) * (x3 - x2) + (y3 - y2) * (y3 - y2)); var k1 = len1 / (len1 + len2); var k2 = len2 / (len2 + len3); var xm1 = xc1 + (xc2 - xc1) * k1; var ym1 = yc1 + (yc2 - yc1) * k1; var xm2 = xc2 + (xc3 - xc2) * k2; var ym2 = yc2 + (yc3 - yc2) * k2; // Resulting control points. Here smooth_value is mentioned // above coefficient K whose value should be in range [0...1]. var ctrl1_x = xm1 + (xc2 - xm1) * smooth_value + x1 - xm1; var ctrl1_y = ym1 + (yc2 - ym1) * smooth_value + y1 - ym1; var ctrl2_x = xm2 + (xc2 - xm2) * smooth_value + x2 - xm2; var ctrl2_y = ym2 + (yc2 - ym2) * smooth_value + y2 - ym2; var bezier = {}; bezier.Point0 = pixelPoints[i]; bezier.Point1 = { "X": ctrl1_x, "Y": ctrl1_y }; bezier.Point2 = { "X": ctrl2_x, "Y": ctrl2_y }; bezier.Point3 = pixelPoints[i + 1]; controlPoint.push(bezier); } return controlPoint; }; //转成曲线路径 var transBezierCurveToPath = function (pixelPoints) { var bezierCurveValue = transBezierCurveModel(pixelPoints); if (bezierCurveValue == null) { return; } var pathValue = []; 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); }; 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 removeElementById = function (id) { var obj = document.getElementById(id); if (obj != null) { //console.log(id+ " is remove") obj.remove(); } }; var hideElementById = function (id) { var obj = document.getElementById(id); if (obj != null) { //console.log(id+ " is remove") obj.style.display = 'none'; } }; var showElementById = function (id) { var obj = document.getElementById(id); if (obj != null) { obj.style.display = ""; } }; // var svgClick = function (e, svg) { }; 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 = []; 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 = []; 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 = []; 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 = []; 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; return languageHelper.translateString(m_localizationType, 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);// var posiX_grid = m_chartSize.SpaceLeft + m_coordinatePara.SpaceSpixelX * i; //刻度线 var valueMain = []; 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 = []; 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; //console.log(m_unit) let unit_name = UnitHelper.GetUnitNameQ(m_coordinatePara.UnitQ); 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 = []; 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 + 5, "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 = []; 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 () { removeElementById("EquipmentCurve"); 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 = []; 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; //有时会报错,加上这个就没事 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' } //console.log(pathValue.join('')) m_svg.createPath(objName, pathValue.join(''), { "id": objName }, style); if (isDisp != null && !isDisp) { hideElementById(objName); } 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.CurveListQNPSH != null) { for (var i = 0; i < m_chartObject.CurveListQNPSH.length; i++) { var points = m_chartObject.CurveListQNPSH[i].PointInfo; if (points.length >= 4) { //曲线 createCurveQH("CurveQNPSH" + i, points, 1, "#DA70D6"); } else if (points.length == 2 || points.length == 3) { //直线 createLineQH("CurveQNPSH" + i, points[0], points[1], 1, "#DA70D6"); } else if (points.length == 1) { createPointQH("CurveQNPSH" + i, points[0], 3, "#DA70D6"); } } } //设置设计点 drawDesignPoint(m_displayStyle.DesignPointDispType); //绘制工作曲线 removeElementById("WorkCurve"); if (m_chartObject.WorkCurve != null) { createCurveQH("WorkCurve", m_chartObject.WorkCurve, 2, m_displayStyle.WrkCurveColor); } //初始化工作曲线 intitalWrkCurveInfo(); //绘制水印 drawLogoWaterMark(); drawChartTextAnnotation(); drawContantLineCurve(m_chartObject.MaxHeadPt,0); drawContantLineCurve(m_chartObject.AverageHeadPt,1); drawContantLineCurve(m_chartObject.MinHeadPt,2); ////装置曲线 //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; 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 drawLogoWaterMark = function () { var watermark_img_url = "static/img/watermark.png"; var img_watermark = new Image() img_watermark.src = watermark_img_url; img_watermark.onload = function () { var watermark_image_width_real = img_watermark.width var watermark_image_height_real = img_watermark.height; //console.log('m_chartSize',m_chartSize)//TotalHeight TotalWidth var ratio_byHeight = m_chartSize.TotalHeight * 0.2 / watermark_image_height_real; var ratio_byWidth = m_chartSize.TotalWidth * 0.2 / watermark_image_width_real; //console.log('m_chartSize',ratio_byHeight,ratio_byWidth)//TotalHeight TotalWidth var ratio_waterMark = Math.min(ratio_byHeight, ratio_byWidth); var watermark_image_width = watermark_image_width_real * ratio_waterMark; var watermark_image_height = watermark_image_height_real * ratio_waterMark; var logoStyle = "-webkit-transform: rotate(5deg);-moz-transform: rotate(5deg);transform: rotate(15deg);fill:#000000;fill-opacity:0.6;font-weight:bold;stroke-width:1px;font-size:16px;z-index:0"; var logoPosi1 = { "opacity": 0.9, "y": m_chartSize.TotalHeight * 1 / 4 - watermark_image_height / 2, "x": m_chartSize.TotalWidth * 1 / 4 - watermark_image_width / 2, "width": watermark_image_width, "height": watermark_image_height } m_svg.createImage(logoPosi1, logoStyle, "WaterMarkImage2", watermark_img_url); var logoPosi2 = { "opacity": 0.9, "y": m_chartSize.TotalHeight * 3 / 4 - watermark_image_height / 2, "x": m_chartSize.TotalWidth * 1 / 4 - watermark_image_width / 2, "width": watermark_image_width, "height": watermark_image_height } m_svg.createImage(logoPosi2, logoStyle, "WaterMarkImage2", watermark_img_url); var logoPosi3 = { "opacity": 0.9, "y": m_chartSize.TotalHeight * 1 / 4 - watermark_image_height / 2, "x": m_chartSize.TotalWidth * 3 / 4 - watermark_image_width / 2, "width": watermark_image_width, "height": watermark_image_height } m_svg.createImage(logoPosi3, logoStyle, "WaterMarkImage3", watermark_img_url); var logoPosi4 = { "opacity": 0.9, "y": m_chartSize.TotalHeight * 3 / 4 - watermark_image_height / 2, "x": m_chartSize.TotalWidth * 3 / 4 - watermark_image_width / 2, "width": watermark_image_width, "height": watermark_image_height } m_svg.createImage(logoPosi4, logoStyle, "WaterMarkImage4", watermark_img_url); } //加载失败绘制文字 // console.log(m_warterMarkText) //if (m_displayStyle.isDrawWaterMark && m_warterMarkText != null && m_warterMarkText != "") // drawTextWaterMark(m_warterMarkText); }; var drawChartTextAnnotation = function () { if (m_chartObject.LabelPosi == null || m_chartObject.LabelPosi.length == 0) return; for (var i = 0; i < m_chartObject.LabelPosi.length; i++) { var anno = m_chartObject.LabelPosi[i]; var posi = {}; posi.X = anno.X; posi.Y = anno.Y; var curveName = "CurvePara_" + anno.CurveTag +"_" + anno.ID; var lblColor = m_displayStyle.ColorH; if (anno.CurveTag == "QE") lblColor = m_displayStyle.ColorE; else if (anno.CurveTag == "EQUNPSH") lblColor = "#DA70D6"; if (anno.TextAligment == 0) {//textAnchor 文字对齐 start | middle | end drawTextByQH(curveName, anno.Text, posi, 9, lblColor, 2, -4, "start"); } else if (anno.TextAligment == 1) { drawTextByQH(curveName, anno.Text, posi, 9, lblColor, 0, -15, "middle"); } else if (anno.TextAligment == 2) { drawTextByQH(curveName, anno.Text, posi, 9, lblColor, -2, -4, "end"); } else if (anno.TextAligment == 3) { drawTextByQH(curveName, anno.Text, posi, 9, lblColor, 0, 5, "middle"); } } }; //绘制设计点 var drawDesignPoint = function (DispStyleType) { //var listDesignPointWater = ("path[tag='DesignPoint']"); removeElementById("DesignPointWater1"); removeElementById("DesignPointWater2"); removeElementById("DesignPointWater3"); removeElementById("DesignPointWater4"); removeElementById("DesignPointWater5"); if (m_chartObject.DesignPoint4StdUnit == null) return; DispStyleType = 2;//暂时不能改 if (DispStyleType == 2) { //倒三角 var xPixel = getPixelValueQ(m_chartObject.DesignPoint4StdUnit.X); var yPixel = getPixelValueH(m_chartObject.DesignPoint4StdUnit.Y); 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 }; 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, { "DesignPoint": "pt1" }, style); pathValue = temp.replace("x1", xPixel).replace("y1", yPixel).replace("x2", xPixel).replace("y2", (yPixel + yTri)); m_svg.createPath("DesignPointWater2", pathValue, { "DesignPoint": "pt1" }, style); pathValue = temp.replace("x1", xPixel - xTri).replace("y1", yPixel).replace("x2", xPixel).replace("y2", (yPixel + yTri)); m_svg.createPath("DesignPointWater3", pathValue, { "DesignPoint": "pt1" }, style); pathValue = temp.replace("x1", xPixel - xTri / 3).replace("y1", yPixel).replace("x2", xPixel).replace("y2", (yPixel + yTri / 3)); m_svg.createPath("DesignPointWater4", pathValue, { "DesignPoint": "pt1" }, 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, { "DesignPoint": "pt1" }, style); } else { //十字线 var x = m_chartObject.DesignPoint4StdUnit.X; var y = m_chartObject.DesignPoint4StdUnit.Y; var point1 = { X: x, Y: y * 0.92 }; var point2 = { X: x, Y: y * 1.08 }; createLineQH("DesignPointWater1", point1, point2, 3, "red"); point1 = { X: x * 0.95, Y: y }; point2 = { X: x * 1.05, Y: y }; createLineQH("DesignPointWater2", point1, point2, 3, "red"); } }; //绘制约束 最高扬程=0, 平均扬程=1, 最低扬程=2 var drawContantLineCurve = function (pt, type) { var obj_name = "ContantLine"; var obj_text = ""; if (type == 0) { obj_name = "ContantLine4Max"; obj_text = "最高扬程"; } else if (type == 1) { obj_text = "平均扬程"; obj_name = "ContantLine4Average"; } else if (type == 2) { obj_text = "最低扬程"; obj_name = "ContantLine4Min"; } removeElementById(obj_name + "line"); removeElementById(obj_name + "text"); removeElementById(obj_name + "circle"); // pt = {}; // pt.Q = 375 * 3.6; // pt.H = 6.9; if (pt == null) return; var xPixel = getPixelValueQ(pt.Q); var yPixel = getPixelValueH(pt.H); var lineStyle = { "stroke-width": "1px", "stroke": "Magenta", "fill": "none", "fill-opacity": "0.5", //"stroke-dasharray":"5 3", "shape-rendering": "geometricPrecision", "zIndex:": 18 }; var temp = "M x1 y1 L x2 y2"; var pathValue = temp.replace("x1", m_chartSize.SpaceLeft).replace("y1", yPixel).replace("x2", m_chartSize.SpaceLeft + m_chartSize.DiagramWidth).replace("y2", yPixel); m_svg.createPath(obj_name + "line", pathValue, { "ObjTag": obj_name }, lineStyle); var circleAttr = { "cx": xPixel, "cy": yPixel, "r": 3 } var circleStyle = { "stroke-width": "2px", "stroke": "Magenta", "fill": "Magenta", "fill-opacity": "0.5", "shape-rendering": "geometricPrecision", "zIndex:": 7 }; m_svg.createCircle(obj_name + "circle", circleAttr, circleStyle); var textStyle = "stroke-width:1px; fill:Magenta;font-size:12px;"; //font-weight:bold; fill-opacity:0.9; m_svg.createText({ "id": obj_name + "text", "opacity": 1, "y": yPixel - 5, "x": m_chartSize.SpaceLeft + m_chartSize.DiagramWidth - 20, "text-anchor": "end" }, textStyle, obj_text + " : " + pt.H); }; /** ----------------对外函数-------------------- **/ //设置用户设置:用坐标自带的单位 this.setUserSetting = function (uiUserSetting, unitQ, unitH, unitP) { // m_unit.Q = unitQ; // m_unit.H = unitH; // m_unit.P = unitP; //console.log(m_unit,unitQ, unitH, unitP, "1221") }; //设置语言 中文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, cbDict) { // console.log( chartFullInfo, 1191) if (!m_divChartName) return; if (chartFullInfo.ChartObjectDict == null) return; if (chartFullInfo.ChartObjectDict.Coordinate == null) return; m_pumpInfo = chartFullInfo.BaseInfo; if (m_pumpInfo == null) { return; } m_chartObject = chartFullInfo.ChartObjectDict; m_coordinatePara = chartFullInfo.ChartObjectDict.Coordinate; //extend(m_coordinatePara, chartFullInfo.Coordinate); //console.log(m_coordinatePara) var chartSetting = chartFullInfo.SettingInfo; // m_chartSetting.UnitQ = m_coordinatePara.UnitQ; // m_chartSetting.UnitH = m_coordinatePara.UnitH; //console.log(m_chartSetting, m_coordinatePara, 1191) // this.SetUnit( //设置单位 // chartSetting.SeriesUnitQ, // chartSetting.SeriesUnitH, // chartSetting.SeriesUnitP); //初始化显示设置 initialDispStyle(displayStyle, chartSetting); //初始化面板 initialPanelSize(); //console.log("开始初始化", 1234) drawChart(); return this; }; //更新工作曲线信息 this.updateWrkInfo = function (chartFullInfo) { //设置设计点 m_chartObject.DesignPoint4StdUnit = chartFullInfo.ChartObject.DesignPoint4StdUnit; drawDesignPoint(m_displayStyle.DesignPointDispType); // m_chartObject.WorkCurve = chartFullInfo.ChartObject.WorkCurve; removeElementById("WorkCurve"); //objName, points, curveWidth, curveColor, isDisp, strokeDasharray if (chartFullInfo.ChartObject.WorkCurve != null) { createCurveQH("WorkCurve", m_chartObject.WorkCurve, 2, m_displayStyle.WrkCurveColor); // intitalWrkCurveInfo(); } }; //设置工具提示栏 this.setToolTipName = function (toolTipName) { }; //删除 this.removeByName = function (name) { m_svg.removeByName(name); }; this.getEbyQ4WrkWaterCurve = function (q) { return getEbyQ4WrkWaterCurve(q); }; this.getPbyQ4WrkWaterCurve = function (q) { return getPbyQ4WrkWaterCurve(q); }; //设计点显示方式(eDesignPointDispType) Cross 0 LeftDownTriangle 2 this.SetDesignPointStyle = function (type) { drawDesignPoint(type); }; // this.updateConstantLine = function (paras) { if(paras.type == 0){ m_chartObject.MaxHeadPt = paras; drawContantLineCurve(m_chartObject.MaxHeadPt,paras.type ); } if(paras.type == 1){ m_chartObject.AverageHeadPt = paras; drawContantLineCurve(m_chartObject.AverageHeadPt,paras.type ); } if(paras.type == 2){ m_chartObject.MinHeadPt = paras drawContantLineCurve(m_chartObject.MinHeadPt,paras.type); } }; // this.getCoordinatePara = function () { return m_coordinatePara; }; // this.updateCoordinatePara = 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; document.getElementById(m_divChartName).innerHTML = ""; //初始化面板 initialPanelSize(); drawChart(); }; //重绘图表大小 this.Resize = function () { m_chartSize = null; //现在置空原有的尺寸 document.getElementById(m_divChartName).innerHTML = ""; //初始化面板 initialPanelSize(); drawChart(); }; //修改设计点 this.refreshByDp = function (response) { var ChartInfo = response.ChartObjectDict; if (ChartInfo == null) return; // m_chartObject.DesignPoint4StdUnit = ChartInfo.DesignPoint4StdUnit; if (m_chartObject.DesignPoint4StdUnit == null) return; m_chartObject.WorkCurve = ChartInfo.WorkCurve; drawDesignPoint(m_displayStyle.DesignPointDispType); removeElementById("WorkCurve"); if (m_chartObject.WorkCurve != null) { createCurveQH("WorkCurve", m_chartObject.WorkCurve, 2, m_displayStyle.WrkCurveColor); // intitalWrkCurveInfo(); } }; //修改设计点 (相似换算) this.refreshByDp4Simu = function (response) { var ChartInfo = response.ChartObjectDict; if (ChartInfo == null) return; // m_chartObject.DesignPoint4StdUnit = ChartInfo.DesignPoint4StdUnit; if (m_chartObject.DesignPoint4StdUnit == null) return; m_chartObject.CurveListQH = ChartInfo.CurveListQH; m_chartObject.CurveListQE = ChartInfo.CurveListQE; m_chartObject.CurveListQNPSH = ChartInfo.CurveListQNPSH; m_chartObject.LabelPosi = ChartInfo.LabelPosi; m_chartObject.WorkCurve = ChartInfo.WorkCurve; document.getElementById(m_divChartName).innerHTML = ""; //初始化面板 initialPanelSize(); drawChart(); }; }; export default ZlpChartDiagram