import svgObject from "./svgOjbect"
|
import ConstParas from "@/utils/constParas.js"
|
import UnitHelper from "@/utils/unit.js"
|
|
var LxpSpectrumChart = function () {
|
|
var m_svg;//ElementPrototype
|
var m_unit = { Q: 1, H: 0, P: 1 };//功率、流量、扬程单位集合
|
|
|
var m_chartSize;
|
var m_localizationType = 0;//中文zhCN = 0, zhTW = 1, enUS = 2
|
var m_divChartName;//容器DIV名称
|
var m_coordinatePara;//坐标信息
|
|
var svgClick = function (e, svg) {
|
|
};
|
|
var svgMove = function (e, svg) {
|
//alert("svgMove");
|
};
|
|
|
|
//转成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;
|
};
|
|
//取对数
|
var getPixelValue = function (actualValue, actualMinValue, actualMaxValue, pixelMinValue, pixelMaxValue) {
|
return (Math.log(actualValue) - Math.log(actualMinValue)) / (Math.log(actualMaxValue) - Math.log(actualMinValue)) * (pixelMaxValue - pixelMinValue) + pixelMinValue;
|
// 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 getLineString = function (pt1_x, pt1_y, pt2_x, pt2_y) {
|
return "M " + pt1_x + " " + pt1_y + " L " + pt2_x + " " + pt2_y;
|
};
|
|
//绘制曲线
|
var createCurve = function (curveName, curvePoints, style) {
|
if (curvePoints == null) {
|
return;
|
};
|
|
var coordinates = new Array();
|
for (var v = 0; v < curvePoints.length; v++) {
|
var x = getPixelValue(calcToChartQ(curvePoints[v].X), m_coordinatePara.CoordMinQ, m_coordinatePara.CoordMaxQ, m_chartSize.SpaceLeft, m_chartSize.DiagramRightX);
|
var y = getPixelValue(curvePoints[v].Y, m_coordinatePara.CoordMinH, m_coordinatePara.CoordMaxH, m_chartSize.DiagramBottomY, m_chartSize.SpaceTop);
|
coordinates.push({ "X": x, "Y": y });
|
}
|
|
var bezierCurveValue = transBezierCurveModel(coordinates);
|
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);
|
}
|
};
|
|
|
m_svg.createPath(curveName, pathValue.join(''), {
|
"id": curveName
|
}, style);
|
|
},
|
|
//产生包络线
|
createRegionCurveList = function (dataCurves) {
|
|
if (dataCurves == null)
|
return;
|
var style = {
|
"stroke-width": 2,
|
"stroke": "#2F4F2F",
|
"fill": "none",
|
"stroke-opacity": '0.8',
|
"fill-opacity": "0.8",
|
"shape-rendering": "optimizeSpeed",
|
"zIndex:": 100
|
};
|
//if (m_workRegionCurve != null) {
|
// style.stroke = "#cccccc";
|
//}
|
for (var i = 0; i < dataCurves.length; i++) {
|
var curveInfo = dataCurves[i]["Points"];
|
//console.log(dataCurves[i]);
|
//判断类型
|
var curveName = "SpectrumShape1_" + dataCurves[i].ID;
|
if (curveInfo.length >= 4) {//曲线
|
// console.log(curveName);
|
createCurve(curveName, curveInfo, style);
|
} else if (path.length == 3) {//直线
|
m_svg.createPath(curveName, getLineString(calcToChartQ(dataCurves[0].X), dataCurves[0].Y, calcToChartQ(dataCurves[2].X), dataCurves[2].Y), xAttr, xStyle);
|
} else if (path.length == 2) {//直线
|
m_svg.createPath(curveName, getLineString(calcToChartQ(dataCurves[0].X), dataCurves[0].Y, calcToChartQ(dataCurves[1].X), dataCurves[1].Y), xAttr, xStyle);
|
} else if (path.length == 1) {
|
//点
|
var attr = {
|
"cx": calcToChartQ(dataCurves[0].X),
|
"cy": dataCurves[0].Y,
|
"r": 2,
|
"stroke": "#2F4F2F",
|
"fill": "#2F4F2F"
|
};
|
|
m_svg.createCircle(curveName, attr, style);
|
}
|
}
|
},
|
|
//产生型谱
|
createSpectrumShapeList = function (dataCurves) {
|
//console.log(dataCurves,280)
|
if (dataCurves == null)
|
return;
|
|
for (var i = 0; i < dataCurves.length; i++) {
|
createSpectrumCurve(dataCurves[i]);
|
createSpectrumShape(dataCurves[i]);
|
}
|
},
|
|
//参数型谱
|
createSpectrumShape = function (data) {
|
if (data == null)
|
return;
|
var style = {
|
"stroke-width": 2,
|
"stroke": "2F4F2F",
|
"fill": "white",
|
"stroke-opacity": '0.1',
|
"fill-opacity": "0.5",
|
"shape-rendering": "optimizeSpeed",
|
"zIndex:": 110
|
};
|
|
var coordinates_1 = new Array();
|
for (var v = 0; v < data["LeftParabolaPoints"].length; v++) {
|
var x = getPixelValue(data["LeftParabolaPoints"][v].X, m_coordinatePara.CoordMinQ, m_coordinatePara.CoordMaxQ, m_chartSize.SpaceLeft, m_chartSize.DiagramRightX);
|
var y = getPixelValue(data["LeftParabolaPoints"][v].Y, m_coordinatePara.CoordMinH, m_coordinatePara.CoordMaxH, m_chartSize.DiagramBottomY, m_chartSize.SpaceTop);
|
coordinates_1.push({ "X": x, "Y": y });
|
}
|
for (var v = 0; v < data["BasePoints"].length; v++) {
|
var x = getPixelValue(data["BasePoints"][v].X, m_coordinatePara.CoordMinQ, m_coordinatePara.CoordMaxQ, m_chartSize.SpaceLeft, m_chartSize.DiagramRightX);
|
var y = getPixelValue(data["BasePoints"][v].Y, m_coordinatePara.CoordMinH, m_coordinatePara.CoordMaxH, m_chartSize.DiagramBottomY, m_chartSize.SpaceTop);
|
coordinates_1.push({ "X": x, "Y": y });
|
}
|
|
var coordinates_2 = new Array();
|
for (var v = 0; v < data["SimularPoints"].length; v++) {
|
var x = getPixelValue(data["SimularPoints"][v].X, m_coordinatePara.CoordMinQ, m_coordinatePara.CoordMaxQ, m_chartSize.SpaceLeft, m_chartSize.DiagramRightX);
|
var y = getPixelValue(data["SimularPoints"][v].Y, m_coordinatePara.CoordMinH, m_coordinatePara.CoordMaxH, m_chartSize.DiagramBottomY, m_chartSize.SpaceTop);
|
coordinates_2.push({ "X": x, "Y": y });
|
}
|
for (var v = 0; v < data["RightParabolaPoints"].length; v++) {
|
var x = getPixelValue(data["RightParabolaPoints"][v].X, m_coordinatePara.CoordMinQ, m_coordinatePara.CoordMaxQ, m_chartSize.SpaceLeft, m_chartSize.DiagramRightX);
|
var y = getPixelValue(data["RightParabolaPoints"][v].Y, m_coordinatePara.CoordMinH, m_coordinatePara.CoordMaxH, m_chartSize.DiagramBottomY, m_chartSize.SpaceTop);
|
coordinates_2.push({ "X": x, "Y": y });
|
}
|
|
|
var pathValue_1 = transBezierCurveToPath(coordinates_1);
|
var pathValue_2 = transBezierCurveToPath(coordinates_2);
|
// console.log(data);
|
//有时会报错，加上这个就没事 tangxu 20151122
|
if (pathValue_1.toString().indexOf("M ,NaN, ,NaN") == 0 || pathValue_2.toString().indexOf("M ,NaN, ,NaN") == 0) {
|
return;
|
};
|
|
//
|
var attr;
|
m_svg.createPath("SpectrumShape1_" + data.PumpID, pathValue_1.join(''), attr, style);
|
m_svg.createPath("SpectrumShape2_" + data.PumpID, pathValue_2.join(''), attr, style);
|
},
|
|
//
|
createSpectrumCurve = function (data) {
|
if (data == null)
|
return;
|
var style = {
|
"stroke-width": 1,
|
"stroke": "#2F4F2F",
|
"fill": "none",
|
"stroke-opacity": '0.8',
|
"fill-opacity": "0.8",
|
"shape-rendering": "optimizeSpeed",
|
"zIndex:": 100
|
};
|
|
|
|
createCurve("LeftParabolaPoints", data["LeftParabolaPoints"], style);
|
|
createCurve("BasePoints", data["BasePoints"], style);
|
|
|
createCurve("SimularPoints", data["SimularPoints"], style);
|
|
createCurve("RightParabolaPoints", data["RightParabolaPoints"], style);
|
|
|
|
},
|
|
|
//产生文字(自动绘制等效线值的文字位置)
|
createCurveName1 = function (dataCurves) {
|
if (dataCurves == null)
|
return;
|
|
//字体
|
var styleText = "font-size: 10px;fill:#2F4F2F;";
|
//if (systemPlantType == 1) {//0: 电脑 1:手机页面 tangxu 20150824
|
// styleText = "font-size: 8px;fill:#2F4F2F;";
|
//}
|
for (var i = 0; i < dataCurves.length; i++) {
|
var curveInfo = dataCurves[i]["PointInfo"];
|
var maxX = 0;
|
var maxY = 0;
|
for (var j = 0; j < curveInfo.length; j++) {
|
if (j == 0) {
|
maxY = curveInfo[j].Y;
|
maxX = curveInfo[j].X;
|
} else {
|
if (maxX < curveInfo[j].X) {
|
maxY = curveInfo[j].Y;
|
maxX = curveInfo[j].X;
|
}
|
}
|
}
|
var attrTextPosi = {
|
"x": calcToChartQ(maxX),
|
"y": maxY
|
};
|
attrTextPosi.x = getPixelValue(attrTextPosi.x, m_coordinatePara.CoordMinQ, m_coordinatePara.CoordMaxQ, m_chartSize.SpaceLeft, m_chartSize.DiagramRightX);
|
attrTextPosi.y = getPixelValue(attrTextPosi.y, m_coordinatePara.CoordMinH, m_coordinatePara.CoordMaxH, m_chartSize.DiagramBottomY, m_chartSize.SpaceTop);
|
|
//显示等效线的值 tangxu 20150824
|
if (systemPlantType == 0) {//0: 电脑
|
m_svg.createText(attrTextPosi, styleText, dataCurves[i]["CurvePara"]);
|
}
|
else if (systemPlantType == 1) {//1:手机页面
|
if (i % 2 == 0) {
|
m_svg.createText(attrTextPosi, styleText, dataCurves[i]["CurvePara"]);
|
}
|
}
|
}
|
},
|
|
//产生文字(文字位置根据数据库中存储的设置)
|
createCurveName2 = function (dataAnnos) {
|
if (dataAnnos == null)
|
return;
|
|
//显示等效线的值 tangxu 20150824
|
var coordSpaceQ = m_coordinatePara.AxisLabelQ[1] - m_coordinatePara.AxisLabelQ[0];
|
var coordSpaceH = m_coordinatePara.AxisLabelH[1] - m_coordinatePara.AxisLabelH[0];
|
|
//字体
|
var styleText = "font-size: 10px;fill:#2F4F2F;";
|
if (systemPlantType == 1) {//0: 电脑 1:手机页面 tangxu 20150824
|
styleText = "font-size: 8px;fill:#2F4F2F;";
|
}
|
for (var i = 0; i < dataAnnos.length; i++) {
|
var attrTextPosi = null;
|
if (dataAnnos[i]["TextAligment"] == "0") {//Right = 0,
|
//console.log("Right");
|
attrTextPosi =
|
{
|
"x": dataAnnos[i].X + coordSpaceQ / 5,
|
"y": dataAnnos[i].Y
|
};
|
}
|
else if (dataAnnos[i]["TextAligment"] == "1") {//Bottom = 1,
|
//console.log("Bottom");
|
attrTextPosi =
|
{
|
"x": dataAnnos[i].X,
|
"y": dataAnnos[i].Y - coordSpaceH / 4
|
};
|
}
|
else if (dataAnnos[i]["TextAligment"] == "2") {//Left = 2,
|
attrTextPosi =
|
{
|
"x": dataAnnos[i].X - coordSpaceQ / 2,
|
"y": dataAnnos[i].Y
|
};
|
}
|
else if (dataAnnos[i]["TextAligment"] == "3") {//Top = 3,
|
attrTextPosi =
|
{
|
"x": dataAnnos[i].X,
|
"y": dataAnnos[i].Y + coordSpaceH / 4
|
};
|
}
|
else {
|
attrTextPosi =
|
{
|
"x": dataAnnos[i].X,
|
"y": dataAnnos[i].Y
|
};
|
}
|
|
attrTextPosi.x = calcToChartQ(getPixelValue(attrTextPosi.x, m_coordinatePara.CoordMinQ, m_coordinatePara.CoordMaxQ, m_chartSize.SpaceLeft, m_chartSize.DiagramRightX));
|
attrTextPosi.y = getPixelValue(attrTextPosi.y, m_coordinatePara.CoordMinH, m_coordinatePara.CoordMaxH, m_chartSize.DiagramBottomY, m_chartSize.SpaceTop);
|
|
m_svg.createText(attrTextPosi, styleText, dataAnnos[i]["Text"]);
|
}
|
},
|
|
//初始化面板
|
initialMainPanel = function (divName) {
|
if (divName == null) {
|
return;
|
}
|
if (m_chartSize == null) {
|
return;
|
}
|
|
var space_left = 55;
|
var space_right = 20;
|
var space_top = 10;
|
var space_bottom = 58;
|
|
|
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;
|
|
|
|
//把间隙弄小点
|
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
|
};
|
|
//
|
var m_svgID = "FeatCurveSvg";
|
m_svg = new svgObject().init(divName, m_chartSize.TotalWidth, m_chartSize.TotalHeight, svgClick, svgMove, m_svgID);
|
//
|
m_svg.createArea(areaAttr, areaStyle);
|
},
|
|
|
|
|
//流量转换计算
|
calcToChartQ = function (v) {
|
return v;
|
//if (unitQ == 0) {//LS = 0,
|
// return v / 3.6;
|
//}
|
//else if (unitQ == 1) {//M3H = 1,
|
// return v;
|
//}
|
//else {
|
// return v;
|
//}
|
},
|
|
//产生网格线竖直方向
|
createGridLineX = function () {
|
var attrGridLineX = {
|
"stroke": "#cccccc",
|
"stroke-width": "1",
|
"fill": "none",
|
"zIndex": 10
|
};
|
|
|
//文字
|
var label_y = m_chartSize.DiagramBottomY + 15;
|
var attrAxisLabelX = {
|
"opacity": 1,
|
"x": 5,
|
"y": label_y + 2,
|
"text-anchor": "middle"
|
};
|
|
//刻度文字
|
var styleAxisLabelX = "font-size:10px;fill:red;fill-opacity:1;fill:black;";//font-weight:bold
|
|
for (var i = 0; i < m_coordinatePara.AxisLabelQ.length; i++) {
|
var q = m_coordinatePara.AxisLabelQ[i];
|
|
var content = UnitHelper.valueFormat(UnitHelper.getDispValueQ(UnitHelper.ConvertQ_fromM3H(m_unit.Q, q)));
|
|
var posiX_grid =
|
getPixelValue(q, m_coordinatePara.CoordMinQ, m_coordinatePara.CoordMaxQ, m_chartSize.SpaceLeft, m_chartSize.DiagramRightX);
|
|
var valueTemp = new Array();
|
valueTemp.push("M ", posiX_grid, " ", m_chartSize.SpaceTop, " L ", posiX_grid, " ", m_chartSize.DiagramBottomY);
|
m_svg.createPath("GridLienX" + i, valueTemp.join(''), attrGridLineX, null);
|
|
attrAxisLabelX.x = posiX_grid;
|
var rotate_x = posiX_grid;
|
var rotate_y = label_y;
|
var transform = "rotate(45 " + rotate_x + "," + rotate_y + ")";
|
|
m_svg.createText(attrAxisLabelX, styleAxisLabelX, content, 10, null, transform);
|
}
|
|
|
//标题文字
|
var styleAxisTitleX = "font-size:12px;fill:red;fill-opacity:1;fill:black;font-weight:bold;";
|
let unit_name = UnitHelper.GetUnitNameQ(m_unit.Q);
|
|
var attrAxisTitleX = {
|
"opacity": 1,
|
"x": (m_chartSize.SpaceLeft + m_chartSize.DiagramRightX) / 2 - 1,
|
"y": m_chartSize.DiagramBottomY + 48,
|
"text-anchor": "middle"
|
};
|
|
m_svg.createText(attrAxisTitleX, styleAxisTitleX, getTranslateString("流量") + " (" + unit_name + ")");
|
|
},
|
|
//产生网格线水平方向
|
createGridLineY = function () {
|
var attrGridLineH = {
|
"stroke": "#cccccc",
|
"stroke-width": "1",
|
"fill": "none",
|
"zIndex": 10
|
};
|
//刻度文字
|
var styleAxisLabelH = "font-size:10px; fill-opacity:1; fill:black;";
|
//标签
|
var styleAxisTitleH = "font-size:12px; ;fill-opacity:1; font-weight:bold; fill:black;";
|
|
for (var i = 0; i < m_coordinatePara.AxisLabelH.length; i++) {
|
var h = m_coordinatePara.AxisLabelH[i];
|
var content = UnitHelper.valueFormat(UnitHelper.getDispValueH(UnitHelper.ConvertH_fromM(m_unit.H, h)));
|
var posiY_grid =
|
getPixelValue(content, m_coordinatePara.CoordMinH, m_coordinatePara.CoordMaxH, m_chartSize.DiagramBottomY, m_chartSize.SpaceTop);
|
var valueTemp = new Array();
|
valueTemp.push("M ", m_chartSize.SpaceLeft, " ", posiY_grid, " L ", m_chartSize.DiagramRightX, " ", posiY_grid);
|
m_svg.createPath("GridLienY" + i, valueTemp.join(''), attrGridLineH, null);
|
|
|
//文字
|
var attrAxisLabelH = {
|
"opacity": 1,
|
"x": m_chartSize.SpaceLeft - 8,
|
"y": posiY_grid + 5,
|
"text-anchor": "end"
|
};
|
|
m_svg.createText(attrAxisLabelH, styleAxisLabelH, content);
|
}
|
|
//标签
|
var styleAxisTitleH = "font-size:12px; ;fill-opacity:1; font-weight:bold; fill:black;";
|
|
let unit_h_name = UnitHelper.GetUnitNameH(m_unit.H);
|
//标签
|
var attrAxisTitleH = {
|
"opacity": 1,
|
"x": m_chartSize.SpaceLeft - 35,
|
"y": (m_chartSize.DiagramBottomY + m_chartSize.SpaceTop) / 2 - 10,
|
"text-anchor": "middle"
|
};
|
attrAxisTitleH.y = attrAxisTitleH.y + 8;
|
|
var content = getTranslateString("扬程") + " (" + unit_h_name + ")";
|
if (m_unit.H == UnitHelper.H.MPa || m_unit.H == UnitHelper.H.KPa) {
|
var content = getTranslateString("压力") + " (" + unit_h_name + ")";
|
}
|
var transform = "rotate(-90 " + attrAxisTitleH.x + "," + attrAxisTitleH.y + ")";
|
m_svg.createText(attrAxisTitleH, styleAxisTitleH, content, 10, null, transform);
|
|
};
|
//翻译
|
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;
|
};
|
//设置容器
|
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(divName).clientHeight;
|
}
|
};
|
/** ----------------对外函数-------------------- **/
|
|
//设置设计点公差
|
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.initialChart = function (ChartType, coordinate_paras, region_curves, spectrum_shapes, displayStyle) {
|
if (!m_divChartName)
|
return;
|
if (coordinate_paras == null)
|
return;
|
|
m_coordinatePara = coordinate_paras;
|
|
|
////初始化面板
|
initialMainPanel(m_divChartName);
|
|
//绘制网格线
|
createGridLineX();
|
createGridLineY();
|
|
|
////
|
if (region_curves != null)
|
createRegionCurveList(region_curves);
|
if (spectrum_shapes != null)
|
createSpectrumShapeList(spectrum_shapes);
|
|
|
|
////回调
|
//if (typeof param.loadChartCallBack === "function") {
|
// param.loadChartCallBack(workCurveGroup);
|
//}
|
return this;
|
};
|
|
|
|
|
//绘制设计点
|
this.drawDesignPoint = function (pointQ, pointH, callback) {
|
//console.log(pointQ,pointH,746)
|
var style = {
|
"stroke-width": 4,
|
"stroke": "red",
|
"fill": "none",
|
"stroke-opacity": '0.8',
|
"shape-rendering": "optimizeSpeed",
|
"zIndex:": 101
|
};
|
|
var x11 = getPixelValue(pointQ * 0.92, m_coordinatePara.CoordMinQ, m_coordinatePara.CoordMaxQ, m_chartSize.SpaceLeft, m_chartSize.DiagramRightX);
|
var x12 = getPixelValue(pointQ * 1.08, m_coordinatePara.CoordMinQ, m_coordinatePara.CoordMaxQ, m_chartSize.SpaceLeft, m_chartSize.DiagramRightX);
|
var y1 = getPixelValue(pointH, m_coordinatePara.CoordMinH, m_coordinatePara.CoordMaxH, m_chartSize.DiagramBottomY, m_chartSize.SpaceTop);
|
|
m_svg.createPath("DesignPointH", getLineString(calcToChartQ(x11), y1, calcToChartQ(x12), y1), null, style);
|
|
|
var x2 = getPixelValue(pointQ, m_coordinatePara.CoordMinQ, m_coordinatePara.CoordMaxQ, m_chartSize.SpaceLeft, m_chartSize.DiagramRightX);
|
var y21 = getPixelValue(pointH * 0.95, m_coordinatePara.CoordMinH, m_coordinatePara.CoordMaxH, m_chartSize.DiagramBottomY, m_chartSize.SpaceTop);
|
var y22 = getPixelValue(pointH * 1.05, m_coordinatePara.CoordMinH, m_coordinatePara.CoordMaxH, m_chartSize.DiagramBottomY, m_chartSize.SpaceTop);
|
m_svg.createPath("DesignPointQ", getLineString(calcToChartQ(x2), y21, calcToChartQ(x2), y22), null, style);
|
|
|
if (typeof callback == "function") {
|
var p = callback(x1, x2, y1, y2);
|
x1 = p[0];
|
x2 = p[1];
|
y1 = p[2];
|
y2 = p[3];
|
}
|
};
|
};
|
export default LxpSpectrumChart;
|
