gooflow學習筆記

前端jqury腳本實現流程設計，兼容目前主流瀏覽器

gooflow 默認屬性節點只有：id,name,top,left,width,height,type （各個版本不同，屬性節點有所增加），但是這些都是和流程設計器本身有關的

實現自定義屬性字段：

1、在節點數據對象上加上自己的定義屬性字段（我自定義了一個data 屬性字段）

2、修改的時候把屬性字段填充到對應的對象屬性字段中

var focusLine = demo.getItemInfo(focusId, "node");
focusLine.data = $("#ele_data").val();

<!DOCTYPE html>
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>流程圖DEMO</title>
<!--[if lt IE 9]>
<?import namespace="v" implementation="#default#VML" ?>
<![endif]-->
<link rel="stylesheet" type="text/css" href="../codebase/GooFlow.css"/>
<style>
.myForm{display:block;margin:0px;padding:0px;line-height:1.5;border:#ccc 1px solid;font: 12px Arial, Helvetica, sans-serif;margin:5px 5px 0px 0px;border-radius:4px;}
.myForm .form_title{background:#428bca;padding:4px;color:#fff;border-radius:3px 3px 0px 0px;}
.myForm .form_content{padding:4px;background:#fff;}
.myForm .form_content table{border:0px}
.myForm .form_content table td{border:0px}
.myForm .form_content table .th{text-align:right;font-weight:bold}
.myForm .form_btn_div{text-align:center;border-top:#ccc 1px solid;background:#f5f5f5;padding:4px;border-radius:0px 0px 3px 3px;} 
#propertyForm{float:right;width:260px}
</style>
<script type="text/javascript" src="child.js"></script>
<script type="text/javascript" src="../plugin/jquery.min.js"></script>
<script type="text/javascript" src="../codebase/GooFunc.js"></script>
<script type="text/javascript" src="../plugin/json2.js"></script>
<link rel="stylesheet" type="text/css" href="default.css"/>
<script type="text/javascript" src="../codebase/GooFlow.js"></script>
<script type="text/javascript" src="../codebase/GooFlow.color.js"></script>
<script type="text/javascript">
var property={
	width:1072,
	height:600,
	toolBtns:["start round","end round","task round","node","chat","state","plug","join","fork","complex mix"],
	haveHead:true,
	headBtns:["new","open","save","undo","redo","reload"],//如果haveHead=true，則定義HEAD區的按鈕
	haveTool:true,
	haveGroup:true,
	useOperStack:true
};
var remark={
	cursor:"選擇指針",
	direct:"結點連線",
	start:"入口結點",
	"end":"結束結點",
	"task":"任務結點",
	node:"自動結點",
	chat:"決策結點",
	state:"狀態結點",
	plug:"附加插件",
	fork:"分支結點",
	"join":"聯合結點",
	"complex mix":"複合結點",
	group:"組織劃分框編輯開關"
};
var demo;
$(document).ready(function(){
	demo=$.createGooFlow($("#demo"),property);
	demo.setNodeRemarks(remark);
	demo.onItemDel=function(id,type){
		if(confirm("確定要刪除該單元嗎?")){
      this.blurItem();
      return true;
		}else{
      return false;
		}
	}
	demo.loadData(jsondata);
	demo.onItemFocus=function(id,model){
	console.info(this.$nodeData);
      $("#ele_model").val(model);
      $("#ele_id").val(id);
      if(model=="line"){
        obj=this.$lineData[id];
        $("#ele_type").val(obj.M);
        $("#ele_left").val("");
        $("#ele_top").val("");
        $("#ele_width").val("");
        $("#ele_height").val("");
        $("#ele_from").val(obj.from);
        $("#ele_to").val(obj.to);
		$("#ele_data").val(obj.data);
      }else if(model=="node"){
        obj=this.$nodeData[id];
        $("#ele_type").val(obj.type);
        $("#ele_left").val(obj.left);
        $("#ele_top").val(obj.top);
        $("#ele_width").val(obj.width);
        $("#ele_height").val(obj.height);
        $("#ele_from").val("");
        $("#ele_to").val("");
	    $("#ele_data").val(obj.data);
      }
      $("#ele_name").val(obj.name);
      return true;
	};
	demo.onItemBlur=function(id,model){
    document.getElementById("propertyForm").reset();
    return true;
	};
});
var out;
function Export(){
    document.getElementById("result").value=JSON.stringify(demo.exportData());
}

 function backConChoose(focusId) {

        var focusNode = demo.getItemInfo(focusId, "node");
        focusNode.data = $("#ele_data").val();
		
		 document.getElementById("result").value=JSON.stringify(demo.exportData());
    }

</script>
</head>
<body style="background:#EEEEEE">
<div id="demo" style="margin:5px;float:left"></div>
<form class="myForm" id="propertyForm">
<div class="form_title">屬性設置</div>
<div class="form_content">
  <table>
    <tr><td class="th">Id：</td><td><input type="text" style="width:120px" id="ele_id"/></td></tr>
    <tr><td class="th">Name：</td><td><input type="text" style="width:120px" id="ele_name"/></td></tr>
    <tr><td class="th">Type：</td><td><input type="text" style="width:120px" id="ele_type"/></td></tr>
    <tr><td class="th">Model：</td><td><input type="text" style="width:120px" id="ele_model"/></td></tr>
    <tr><td class="th">Left-r：</td><td><input type="text" style="width:120px" id="ele_left"/></td></tr>
    <tr><td class="th">Top-r：</td><td><input type="text" style="width:120px" id="ele_top"/></td></tr>
    <tr><td class="th">Width：</td><td><input type="text" style="width:120px" id="ele_width"/></td></tr>
    <tr><td class="th">Height：</td><td><input type="text" style="width:120px" id="ele_height"/></td></tr>
    <tr><td class="th">From：</td><td><input type="text" style="width:120px" id="ele_from"/></td></tr>
    <tr><td class="th">To：</td><td><input type="text" style="width:120px" id="ele_to"/></td></tr>
	<tr><td class="th">Data：</td><td><input type="text" style="width:120px" id="ele_data"/></td></tr>
  </table>
</div>
<div class="form_btn_div">
  <input type="reset" value="重置"/>
  <input type="button" value="確定" onclick="backConChoose(demo.$focus)"/>
</div>
</form>
<div style="clear:both">
<input id="submit" type="button" value='導出結果' onclick="Export()"/>
<textarea id="result" row="6"></textarea>
</div>
</body>
</html>

其特點：

1、跨瀏覽器，可兼容IE7--IE11， FireFox， Chrome， Opera等幾大內核的瀏覽器，且不需要瀏覽器再加裝任何控件。（IE7-IE8時，使用VML；IE9以上，FF，OPERA，CHROME，SAFARI上使用SVG）
2、多系統兼容性、可移植性:由於只包括前臺UI,因此二次開發者可很方便將本插件用在任何一種需要流程圖的B/S系統應用上，流程圖的詳細實現邏輯完全交於後臺程序開發者自己實現;對於後臺,只要能返回/接收能被本插件解析的JSON格式數據即可.所以本插件可用於不同的服務器語言建立的後臺上.
3、跨領域:流程圖設計器不止用在電信領域,在其它需要IT進行技術支持的領域中都有重大作用.

以下從純技術實現層面具體描述:
1、頁面頂部欄、左邊側邊欄均可自定義；
2、當左邊的側邊欄設爲不顯示時，爲只讀狀態，此時的視圖區可當作是一個查看器而非編輯器。
3、側邊工具欄除了基本和一些流程節點按鈕外，還自定義新的節點按鈕，自定義節點都可以有自有的圖標、類型名稱，定義後在使用可可在工作區內增加這些自定義節點。
4、頂部欄可顯示流程圖數據組的標題，也可提供一些常用操作按鈕。
5、頂部欄的按鈕，除了撤銷、重做按鈕外，其餘按鈕均可自定義點擊事件。
6、可畫直線、折線；折線還可以左右/上下移動其中段。
7、具有區域劃分功能，能讓用戶更直觀地瞭解哪些節點及其相互間的轉換，是屬於何種自定義區域內的。
8、具有標註功能，用橙紅色標註某個結點或者轉換線，一般用在展示流程進度時。
9、能直接雙擊結點、連線、分組區域中的文字進行編輯
10、在對結點、連線、分組區域的各種編輯操作，如新增/刪除/修改名稱/重設樣式或大小/移動/標註時，均可捕捉到事件，並觸發自定義事件，如果自定義事件執行的方法返回FALSE，則會阻止操作。
11、具有操作事務序列控制功能，在工作區內的各種有效操作都能記錄到一個棧中，然後可以進行撤銷（undo()）或重做（redo()），像典型的C/S軟件一樣。

　　gooflow 官網：https://gooflow.xyz/docs/index.html#methods

感謝博主：https://www.cnblogs.com/tangxf/p/4227639.html

https://files.cnblogs.com/files/itclw/GooFlow1.1.zip

gooflow學習筆記

虛擬雲電腦

docker 上安裝Jenkins

在Docker下調試.NetCore程序報 “\vsdbg\vs2017u5”

group by是分組函數，partition by是分區函數, rank和dense_rank 是排名函數

iis 10 使用該命令提示版本不支持

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結