go.js流程圖

電力項目配置須要一個能夠配置的萬能流程圖,選型技術爲go.js。node

拿到需求,老大說看一下go.js, so 如今官網上找了個demo,跑通。git

而後須要的效果圖以下:.net

而後改改demo成這樣:get

接着改顏色,思路:遍歷出全部國網綠顏色的節點 依次找到節點間的連線 改變連線的屬性(顏色寬度箭頭顏色大小)。上代碼:源碼

/**
   * 查找全部須要的節點
   * @returns {}
   */
  
  function findAllNodes() {
      var arrStep = [];
      var everyStep = null;
      myDiagram.nodes.each(function(node) {
          if (node.data.hasOwnProperty('category') && node.data.category === 'blueStep') {
              everyStep = node;
              arrStep.push(everyStep); 
          } else {
               return false;
          }
          
      });
      return arrStep;
  };
  
  /**
   * 查找步驟之間的連線
   * @param nodes
   * @returns {Array}
   */
  function findFinishedLinks(steps) {it

      var arrLinks = [];io

      if (!steps || steps.length < 1) return arrLinks;function

      var currStep = steps[0];// 【開始】步驟配置

      for (var i = 0; i < steps.length; i++) {model

          var step = steps[i];

          // 連線
          var link = currStep.findLinksBetween(step).first();
          if (!link) continue;
          arrLinks.push(link);

          currStep = step;
      }

      return arrLinks;
  };
  
  
  /**
   * 改變全部「已完成」步驟的連線顏色
   * @param links
   */
  function showFinishedLinks(links) {

      if (!links) return;

      for (var i = 0; i < links.length; i++) {

          // 連線
          var link = links[i];
         /*  link.findObject("HIGHLIGHT").stroke = "#2DACA5";
          link.findObject("myArrow").fill = "#2DACA5";
          link.findObject("HIGHLIGHT").strokeWidth = 2; */
          myDiagram.startTransaction("vacate");
          myDiagram.model.setDataProperty(link.data, "stroke", (link.data.color ="#2DACA5"));
          myDiagram.model.setDataProperty(link.data, "stroke", (link.data.stroke = "#2DACA5"));
          myDiagram.model.setDataProperty(link.data, "fill", "#2DACA5");
          myDiagram.model.setDataProperty(link.data, "strokeWidth", 2);
          myDiagram.commitTransaction("vacate");
          
      /*  // 置於最上層,防止被遮擋
          myDiagram.startTransaction('modified zOrder');
          myDiagram.model.setDataProperty(link.data, "fill", "#2DACA5");
          myDiagram.model.setDataProperty(link.data, "zOrder", 2);
          myDiagram.commitTransaction('modified zOrder'); */
      }
  };

後期整理會把相關源碼上傳到git主頁,,,,

相關文章
相關標籤/搜索