shuzhan
/
ipcps-pc


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394
							<!doctype html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>流程图</title>
  <!--#include file="common/_header.html"-->  
  <link rel="stylesheet" type="text/css" href="scripts/workflow/tipsy.css" />	
  <link rel="stylesheet" type="text/css" href="lib/select2/select2.min.css" />	
	<style>
	  body {
	    position: fixed;
	    top: 0;
	    bottom: 0;
	    left: 0;
	    right: 0;
	    margin: 0;
	    padding: 0;
	    font-family:tahoma "microsoft yahei";
	  }
	
	  .live.map {
	    width: 100%;
	    height: 100%;
	  }
	
	  .live.map text {
	    font-weight: 300;
	    font-size: 14px;
	  }
	  
	  .live.map .node rect {
	    stroke-width: 1.5px;
	    stroke: #bbb;
	    fill: #666;
	  } 
	   svg {
	    width: 100%;
	    height: 100%;
	    overflow: hidden;
	  }
	
	  .live.map .status {
	    height: 100%;
	    width: 15px;
	    display: block;
	    float: left;
	    border-top-left-radius: 5px;
	    border-bottom-left-radius: 5px;
	    margin-right: 4px;
        color:cornsilk;
	  }
	
	  .live.map .start .status {
	    background-color: green;
	  }	  
      
      .live.map .finish .status {
	    background-color: green;
	  }
	
    .live.map .running .status {
	    background-color:blue;
	  }

    .live.map .blank .status {
	    background-color: white;
	  }

	  .live.map .ignore .status {
	    background-color: #aaaaaa;
	  }
	
	  .live.map .end .status {
	    background-color: red;
	  }
		
	  .live.map .node g div {
	    width: 200px;
	    height: 40px;
	    color: #fff;
	  }

    .live.map .userTask{
      cursor:pointer;
    }
         	
	  .live.map .taskName {
	    display: inline-block;
	    width: 200px;
	    padding:2px;
	  }
	
	  .live.map .remark {
	    display: block;
	    float: left;
	    width: 130px;
	    height: 20px;
	    font-size: 12px;
	    margin-top: 2px;
        color:cornsilk;
	  }

	  .live.map .edgeLabel text {
	    width: 50px;
	    fill: #fff;
	  }
	
	  .live.map .edgePath path {
	    stroke: #999;
	    stroke-width: 1.5px;
	    fill: #999;
	  }

    .live.map .node g .gateway{
        width : 50px;
        height : 50px;
        border-radius: 100%;
    }

    .flex-container{
      display: flex;
      flex-direction: row;
      height:100%;
      width:100%;
    }

    #diagram{
      flex:1;
    }

    #propertyPanel{
      width:400px;
      border-left:1px dotted black;
      padding:5px;
      overflow:scroll;
    }

    .input-text{
      height:30px;
      border-radius: 4px;
      border: 1px solid #aaa;
      width:100%;
    }

    dt{
      font-weight: bold;
      height:30px;
      line-height:30px;
    }

    dd {
      margin-inline-start:0px; 
    }
	</style>
</head>
<body>
  <div class="flex-container">
      <h5 id="tmplName" style="position:absolute;left:10px;top:10px;"></h5>
      <div id="diagram" class="live map">
          <svg style="width:100%;height:100%;"></svg>
      </div>
  </div>
  <script id="taskTmpl" type="text/html">
        <div id="task_{{id}}" class="userTask {{className}}">
            <span class="status"></span>
            <span class="taskName" id="{{id}}">{{name}}</span>
            <span class="remark">{{remark}}</span>
        </div>
    </script>
	<script id="gatewayTmpl" type="text/html">
      <p class="gateway"></p>
  </script>
  <!--#include file="common/_footer.html"-->  
    <script type="text/javascript" src="scripts/workflow/d3.v3.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="scripts/workflow/dagre-d3.min.js" ></script>
    <script type="text/javascript" src="scripts/workflow/tipsy.js" ></script>
  <script type="text/javascript" src="scripts/global.js"></script>
  <script type="text/javascript">
    var procInstId = getQueryString("procInstId");
    var procDefKey = getQueryString("procDefKey");
  </script>
  <script type="text/javascript">
    $(document).ready(function(){
        var loadingIndex = layer.load(0, {shade: false});

        $.get(
          global_backend_url + "/procDef/loadDiagram",
          {
              procDefKey : procDefKey
          }, function(rs){
              var data = rs.data;
              createDiagram(data);
          }, "json").then(function(){
            console.log("读取流程进度:" + procInstId);
            
            if(procInstId==null ||procInstId.length==0){
              layer.close(loadingIndex);
              layer.msg("流程未开启!");              
              return;
            }

            $.get(
                global_backend_url + "/procInst/processProgress",
                {
                    procInstId : procInstId
                }, function(resp){
                    if(resp.result) {
                        var data = resp.data;

                        $("#tmplName").html("采用模板:" + data.template.title);

                        //将已完成任务节点添加样式
                        data.finishedTasks.forEach(function(task){
                            $("#task_" + task.key).removeClass("blank");
                            $("#task_" + task.key).addClass("finish");

                            $(".remark","#task_" + task.key).html("已完成");

                            var remark = [];
                            remark.push("经办人：" + task.assignee);
                            remark.push("完成时间:" + task.endTime);
                            
                            $("#task_" + task.key).attr("title", remark.join("\n"));
                        });

                        //将已忽略任务节点添加样式
                        if(data.ignoreTasks!=null){
                          data.ignoreTasks.forEach(function(task){
                              $("#task_" + task.key).removeClass("blank");
                              $("#task_" + task.key).removeClass("finish");
                              $("#task_" + task.key).addClass("ignore");

                              $(".remark","#task_" + task.key).html("自动忽略");
                          });
                        }

                        //将正在进行的节点添加样式
                        data.pendingTasks.forEach(function(task){
                            $("#task_" + task.key).removeClass("blank");
                            $("#task_" + task.key).addClass("running");

                            $(".remark","#task_" + task.key).html("进行中");

                            var remark = [];

                            if(task.assignee!=null){
                              remark.push("经办人：" + task.assignee);
                            }
                            else{
                              remark.push("候选人：" + task.candidates);
                            }

                            $("#task_" + task.key).attr("title", remark.join("\n"));
                        });
                        
                        layer.close(loadingIndex);
                    }
                    else{
                        layer.close(loadingIndex);

                        layer.msg("获取流程进度失败!" + resp.message);
                    }
                }, "json");
        });
    });

    function createDiagram(data){
        // Create a new directed graph
        var g = new dagreD3.graphlib.Graph();
        
        g.setGraph({
            nodesep: 70,
            ranksep: 50,
            rankdir: "TB",
            marginx: 20,
            marginy: 20
        });
    
        //start
        for(var i=0;i<data.startNodeList.length;i++){
            var node = data.startNodeList[i];

            g.setNode(node.id, {
                labelType: "html",
                label:template("taskTmpl",{
                    id:node.id,
                    name:node.name,
                    className:"start"
                }),		
                rx: 5,
                ry: 5,
                padding: 0
            });
        }
        
        //end
        for(var i=0;i<data.endNodeList.length;i++){
            var node = data.endNodeList[i];

            g.setNode(node.id, {
                labelType: "html",
                label:template("taskTmpl",{
                    id:node.id,
                    name:node.name,
                    className:"end"
                }),			
                rx: 5,
                ry: 5,
                padding: 0
            });
        }
        
        //用户任务
        for(var i=0;i<data.taskList.length;i++){
            var task = data.taskList[i];

            g.setNode(task.id, {
                labelType: "html",
                label:template("taskTmpl",{
                    id:task.id,
                    name:task.name,
                    className:"blank"
                }),
                rx: 5,
                ry: 5,
                padding: 1
            });
        }

        //独占网关
        for(var i=0;i<data.exclusiveGatewayList.length;i++){
            var gateway = data.exclusiveGatewayList[i];

            g.setNode(gateway.id, {
                shape: 'diamond',
                style: "fill: #fff; stroke: #000"
            });
        }

        //并行网关
        for(var i=0;i<data.parallelGatewayList.length;i++){
            var gateway = data.parallelGatewayList[i];

            g.setNode(gateway.id, {
                label:'',
                shape: 'diamond',
                style: "fill: #fff; stroke: #000"
            });
        }
        
        //连接线
        for(var i=0;i<data.seqFlowList.length;i++){
            var seqFlow = data.seqFlowList[i];
            
            g.setEdge(seqFlow.sourceRef, seqFlow.targetRef,{
                label: seqFlow.name
            }); 
        }
        
        // Create the renderer
        var render = new dagreD3.render();
        
        // Set up an SVG group so that we can translate the final graph.
        var svg = d3.select("svg"),
            inner = svg.append("g");
        
        // Set up zoom support
        var zoom = d3.behavior.zoom().on("zoom", function() {
            inner.attr("transform", "translate(" + d3.event.translate + ")" + "scale(" + d3.event.scale + ")");
        });
        
        svg.call(zoom);
        
        // Run the renderer. This is what draws the final graph.
        render(inner, g); 
        
        // Zoom and scale to fit
        // Zoom and scale to fit
        var graphWidth = g.graph().width + 80;
        var graphHeight = g.graph().height + 40;
        var width = parseInt(svg.style("width").replace(/px/, ""));
        var height = parseInt(svg.style("height").replace(/px/, ""));
        var zoomScale = Math.min(width / graphWidth, height / graphHeight);
        // var zoomScale = 1;

        // var translate = [(width/2) - ((graphWidth*zoomScale)/2), (height/2) - ((graphHeight*zoomScale)/2)];
        var translate = [(width/2) - ((graphWidth*zoomScale)/2), 0];
        zoom.translate(translate);
        zoom.scale(zoomScale);
        zoom.event(svg);
    }
  </script>
</body>
</html>