修改界面内容

tanghaolin

2025-03-07 d9e68c8234a79ecaa9fb3304caadbc99607715c9

 src/components/Chart/js/ThumbnailChart.js

@@ -140,15 +140,13 @@
        };

        this.createCircle = function (name, attr, style) {
            var
                    circle = document.createElementNS(importAddress, elementType.circle);
            circle.createKey(name);
            // paths[name] = circle;
            if (style != null) {
            var circle = document.createElementNS(importAddress, elementType.circle);
            circle.createKey(name); 
            if (style == null) {
                circle.setAttr(attr);
            }
            else {
                circle.setAttr(attr).setAttr("style", style);
                circle.setAttr(attr).setStyle( style);
            }
            // circle.setAttr("id", name);
            node.appendChild(circle);
@@ -180,33 +178,30 @@
            return node;
        };

        this.init = function (divName,svgClick, svgMove) {
        this.init = function (divName, size) {

            var container = document.getElementById(divName);

            paths = new Object();
            //paths = new Object();
 
            var        size = {
                        "width": document.getElementById(divName).clientWidth,
                        "height": document.getElementById(divName).clientHeight
                    };

            if (node == null) {
                node = document.createElementNS(importAddress, elementType.svg);
                node.setAttribute("xmlns", "http://www.w3.org/2000/svg")
                node.setAttribute("shape-rendering", "crispEdges");
                node.setAttribute("version", "1.0");
                node.on("mousemove", function (e) {
                    if (typeof svgMove == "function") {//没有起到作用                     
                        var e = e || window.event;
                        svgMove(e, node);
                    }
                });
                node.on("click", function (e) {
                    if (typeof svgClick == "function") {//没有起到作用      
                        var e = e || window.event;
                        svgClick(e, node);
                    }
                });
                // node.on("mousemove", function (e) {
                //     if (typeof svgMove == "function") {//没有起到作用                     
                //         var e = e || window.event;
                //         svgMove(e, node);
                //     }
                // });
                // node.on("click", function (e) {
                //     if (typeof svgClick == "function") {//没有起到作用      
                //         var e = e || window.event;
                //         svgClick(e, node);
                //     }
                // });
            }
            container.appendChild(node.setAttr(size));
            return this;
@@ -216,23 +211,14 @@
    var thumbnailChart = function () {
        var m_svg;
        var m_chartType = 1;//Speed 0     Cut 1     BaoLuo 2    ZhouLiu 4
     
 
        var m_displayStyle;//显示样式
        var m_chartSize;
        var m_localizationType = 0;//中文zhCN = 0, zhTW = 1,   enUS = 2
        var m_chartSize; 
        var m_divChartName;//容器DIV名称
        var m_divChartHeight = 50;
        var m_divChartWidth = 100;
 
        var m_chartStyle = null;//风格
        var m_chartObject;//图表上的物体
        var m_systemPlantType = 0;  //0: 电脑 1:手机  
 
 
 
        var m_designPoint;

 
        var m_designPoint;

        //转成Bezier曲线模型
        var transBezierCurveModel = function (pixelPoints) {
@@ -369,7 +355,6 @@
                        alert(ex.message);
                    }
                }

            }
        };

@@ -380,17 +365,10 @@
            return m_svg.getPathByName(objName);
        };

 
 

        var svgClick = function (e, svg) {
           


        var svgClick = function (e, svg) {          
        };

        var svgMove = function (e, svg) {
            //alert("svgMove");
        };

        //初始化面板
@@ -401,10 +379,10 @@
            var width = m_divChartWidth;
            var height = m_divChartHeight;

            var space_left = 3;
            var space_right = 3;
            var space_top = 3;
            var space_bottom = 3;
            var space_left = 2;
            var space_right = 2;
            var space_top = 2;
            var space_bottom = 2;

            m_chartSize = {};
            m_chartSize.TotalWidth = width;
@@ -420,7 +398,15 @@
            m_chartSize.DiagramRightX = width - space_right;
            m_chartSize.DiagramBottomY = height - space_bottom;
 
 
            // var size = {
            //     "width": document.getElementById(divName).clientWidth,
            //     "height": document.getElementById(divName).clientHeight
            // };
            var size = {
                "width": width,
                "height": height
            };
            m_svg = new svgObject().init(divName, size);

            //把间隙弄小点
            var areaAttr = {
@@ -437,15 +423,10 @@
                "opacity":"0",
                "fill-opacity": "0.5",
                "zIndex:": 5
            };

            //
            m_svg = new svgObject().init(divName, svgClick, svgMove);
            //
            m_svg.createArea(areaAttr, areaStyle);
            };    
             m_svg.createArea(areaAttr, areaStyle);
        };

 

        //产生型谱
        var craeteSpectrumShape = function (spectrumShape) {
@@ -464,7 +445,6 @@
                var x  = getPixelValue(pt.X, m_chartObject.MinQ, m_chartObject.MaxQ, m_chartSize.SpaceLeft, m_chartSize.DiagramRightX);
                var y = getPixelValue(pt.Y, m_chartObject.MinH, m_chartObject.MaxH, m_chartSize.DiagramBottomY, m_chartSize.SpaceTop);


                coordinates_Left.push({ "X": x, "Y": y });
            }
            var bezierCurveValue = transBezierCurveModel(coordinates_Left);           
@@ -472,7 +452,6 @@
                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);
@@ -529,16 +508,18 @@
                }
            }


            var style = {
                "stroke-width": "1",
                "stroke": "none",
                "fill": "yellow",
                "fill": "lightskyblue",
                "stroke-opacity": '0.1',
                "fill-opacity": "0.3",
                "shape-rendering": "optimizeSpeed",
                "zIndex:": -1
            };
            if(m_chartStyle != null && m_chartStyle.SpectrumColor != null){
                style.fill = m_chartStyle.SpectrumColor;
            }
            m_svg.createPath("SpectrumShape", pathValue.join(''), {
                "id": "SpectrumShape"
            }, style);
@@ -559,7 +540,6 @@
            }

            var pathValue = transBezierCurveToPath(pixelPoints);


            var style = {
                "stroke-width": "2px",
@@ -584,7 +564,7 @@
 
        };
        //绘制直线
        var createLineQH = function (objName, point1, point2, curveWidth, curveColor, objTag) {
        var createLineQH = function (objName, point1, point2, curveWidth, curveColor) {
            if (point1 == null || point2 == null) {
                return;
            }
@@ -616,10 +596,7 @@
            }
            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);
            m_svg.createPath(objName, pathValue, null, style);
        };
        //绘制点
        var createPointQH = function (objName, point, circleSize, circleColor) {
@@ -656,53 +633,45 @@

            m_svg.createCircle(objName, attr, style);
        };
 
 

  
        //绘制设计点
        var drawDesignPoint = function () {
            if(m_designPoint == null)
                return;

            var style = {
                "stroke-width": 2,
                "stroke": "red",
                "fill": "none",
                "stroke-opacity": '0.8',
                "shape-rendering": "optimizeSpeed",
                "zIndex:": 101
            };
     
            var x0 = getPixelValue(m_designPoint.Q, m_chartObject.MinQ, m_chartObject.MaxQ, m_chartSize.SpaceLeft, m_chartSize.DiagramRightX);
            var y0 = getPixelValue(m_designPoint.H, m_chartObject.MinH, m_chartObject.MaxH, m_chartSize.DiagramBottomY, m_chartSize.SpaceTop);

            var attr = {
                "cx": x0,
                "cy": y0,
                "r": 5
            }
            var style = {
                "stroke-width": "2",     
                "stroke": "red",
                "fill": "red",
                //"stroke-opacity": '0.8',
                "shape-rendering": "optimizeSpeed",
                "zIndex:": 101
            };
 
    
            var temp1 = "M x1 y1 L x2 y2";
            var pathValue1 = temp1.replace("x1", x0 - m_chartSize.DiagramWidth * 0.08).replace("y1", y0).replace("x2", x0 + m_chartSize.DiagramWidth * 0.08).replace("y2", y0);
            m_svg.createPath("DesignPointQ", pathValue1, null, style);


            var temp2 = "M x1 y1 L x2 y2";
            var pathValue2 = temp2.replace("x1", x0).replace("y1", y0 - m_chartSize.DiagramHeight * 0.1).replace("x2", x0).replace("y2", y0 + m_chartSize.DiagramHeight * 0.1);
            m_svg.createPath("DesignPointH", pathValue2, null, style);

 
           
        };

 
    
            m_svg.createCircle("DesignPoint", attr, style);
        };   
 
        //设置容器
        this.setContainerDivInfo = function (divChartName,divWidth,divHeight) {

            m_divChartName = divChartName;
            m_divChartHeight = divHeight;
            m_divChartWidth = divWidth;
            //console.log(divWidth, divHeight);
        };

        //风格
        this.setChartStyle = function(chart_style){
            m_chartStyle = chart_style;    
        };
        //
        this.setDesignPoint = function (dpQ, dpH) {
            m_designPoint = {};
            m_designPoint.Q = dpQ;
@@ -710,10 +679,12 @@
        };

        //初始化图表(入口)
        this.createChartLxp = function (ChartFullInfo) {
           
        this.createChartLxp = function (ChartFullInfo) {          
            if (!m_divChartName)
                return;

            document.getElementById(m_divChartName).innerHTML = "";

            m_chartObject = ChartFullInfo;

            initialMainPanel(m_divChartName);
@@ -731,18 +702,41 @@

        //初始化图表(入口)
        this.createChartZlp = function (ChartFullInfo) {

            if (!m_divChartName)
                return;

            m_chartObject = ChartFullInfo;

            initialMainPanel(m_divChartName);
 
  
            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);
                    } else if (points.length == 2 || points.length == 3) { //直线
                        createLineQH("CurveQH" + i, points[0], points[1] );
                    } else if (points.length == 1) {
                        createPointQH("CurveQH" + i, points[0] );
                    } 
                }
            }
            
            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 );
                    } else if (points.length == 2 || points.length == 3) { //直线
                        createLineQH("CurveQE" + i, points[0], points[1] );
                    } else if (points.length == 1) {
                        createPointQH("CurveQE" + i, points[0] );
                    }
                }
            }

            //设置设计点
            drawDesignPoint();

    

            return this;
        };
@@ -750,8 +744,5 @@
    };

    window.ThumbnailChart = thumbnailChart;
 


})(window);
export default window
export default window