5 years ago · 7ae6bcbab9
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
 
				     "babel-loader": "^8.0.5",
			
 
				     "clean-webpack-plugin": "^2.0.1",
			
 
				     "css-loader": "^2.1.1",
			
 
				+    "echarts": "^4.6.0",
			
 
				     "express": "^4.16.4",
			
 
				     "file-loader": "^3.0.1",
			
 
				     "html-webpack-plugin": "^3.2.0",
			
@@ -25,7 +26,8 @@
 
				     "uglifyjs-webpack-plugin": "^2.1.2",
			
 
				     "webpack": "^4.31.0",
			
 
				     "webpack-dev-middleware": "^3.6.2",
			
 
				-    "webpack-dev-server": "^3.3.1"
			
 
				+    "webpack-dev-server": "^3.3.1",
			
 
				+    "ztree": "^3.5.24"
			
 
				   },
			
 
				   "scripts": {
			
 
				     "test": "echo \"Error: no test specified\" && exit 1",
			
--- a/src/css/common.css
+++ b/src/css/common.css
@@ -0,0 +1,18 @@
 
				+html, body{
			
 
				+    overflow: hidden;
			
 
				+    background: #F7F8FA;
			
 
				+}
			
 
				+*{
			
 
				+    margin: 0;
			
 
				+    padding: 0;
			
 
				+}
			
 
				+.clearfix {
			
 
				+    zoom: 1
			
 
				+}
			
 
				+.clearfix:after {
			
 
				+    display: block;
			
 
				+    clear: both;
			
 
				+    overflow: hidden;
			
 
				+    width: 0;
			
 
				+    content: '';
			
 
				+}
			
--- a/src/css/knowledgeMap.less
+++ b/src/css/knowledgeMap.less
@@ -0,0 +1,22 @@
 
				+.knowledgeMapWrapper{
			
 
				+    min-width: 1200px;
			
 
				+    .title{
			
 
				+        height: 40px;
			
 
				+        line-height: 40px;
			
 
				+        background-image: linear-gradient(to right, #5A8EEE , #7EABFF);
			
 
				+    }
			
 
				+    // .content{
			
 
				+    //     position: relative;
			
 
				+    //     width: 1200px;
			
 
				+    //     left: 50%;
			
 
				+    //     margin-left: -600px;
			
 
				+    // }
			
 
				+    // .mapWrapper,.zTreeWrapper{
			
 
				+    //     float: left;
			
 
				+    //     background: #fff;
			
 
				+    //     height: 100%;
			
 
				+    // }
			
 
				+    // .zTreeWrapper{
			
 
				+    //     width: 394px;
			
 
				+    // }
			
 
				+}
			
--- a/src/html/knowledgeMap.html
+++ b/src/html/knowledgeMap.html
@@ -0,0 +1,26 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+  <meta charset="UTF-8">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
			
 
				+  <title><%= htmlWebpackPlugin.options.title %></title>
			
 
				+  <!-- <link rel="stylesheet" href="./../resources/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css"> -->
			
 
				+	<!-- <script type="text/javascript" src="./../resources/zTree/js/jquery.ztree.core.min.js"></script> -->
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+  <div class="knowledgeMapWrapper">
			
 
				+      <div class="title">
			
 
				+        医学知识图谱
			
 
				+      </div>
			
 
				+      <div class="content clearfix">
			
 
				+        <div id="main" class="mapWrapper" style="width: 796px;height:800px;"></div>
			
 
				+        <div id="treeDemo" ></div>
			
 
				+      </div>
			
 
				+  </div>
			
 
				+
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
 
				+
			
--- a/src/html/index.html
+++ b/src/html/index.html
@@ -6,9 +6,9 @@
 
				   <meta http-equiv="X-UA-Compatible" content="ie=edge">
			
 
				   <title><%= htmlWebpackPlugin.options.title %></title>
			
 
				 </head>
			
 
				-
			
 
				 <body>
			
 
				-  aaaa111
			
 
				+  <div id="treeDemo" style="width: 1200px;height:800px;"></div>
			
 
				+  <div id="main" style="width: 1200px;height:800px;"></div>
			
 
				 </body>
			
 
				 
			
 
				 </html>
			
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -1,2 +1,446 @@
 
				 const $ = require("jquery");
			
 
				-document.write("aaaa");
			
 
				+const echarts = require("echarts");
			
 
				+require("./../css/knowledgeMap.less");
			
 
				+require("./../css/common.css");
			
 
				+require("ztree");
			
 
				+require('./../resources/zTree/js/jquery.ztree.core.min.js');
			
 
				+require('./../resources/zTree/css/zTreeStyle/zTreeStyle.css');
			
 
				+// document.write("aaaa");
			
 
				+
			
 
				+        var myChart = echarts.init(document.getElementById('main'));
			
 
				+        option = {
			
 
				+            title: { text: '关系图谱' },
			
 
				+            tooltip: {
			
 
				+                formatter: function (x) {
			
 
				+                    return x.data.des;
			
 
				+                }
			
 
				+            },
			
 
				+            series: [
			
 
				+                {
			
 
				+                    type: 'graph',
			
 
				+                    layout: 'force',
			
 
				+                    symbolSize: 80,
			
 
				+                    roam: true,
			
 
				+                    edgeSymbol: ['circle', 'arrow'],
			
 
				+                    edgeSymbolSize: [4, 10],
			
 
				+                    edgeLabel: {
			
 
				+                        normal: {
			
 
				+                            textStyle: {
			
 
				+                                fontSize: 20
			
 
				+                            }
			
 
				+                        }
			
 
				+                    },
			
 
				+                    force: {
			
 
				+                        repulsion: 2500,
			
 
				+                        edgeLength: [10, 50]
			
 
				+                    },
			
 
				+                    draggable: true,
			
 
				+                    animation: true,
			
 
				+                    hoverAnimation:true,
			
 
				+                    animationDuration:5000,
			
 
				+                    focusNodeAdjacency: true,
			
 
				+                    itemStyle: {
			
 
				+                        normal: {
			
 
				+                            color: '#4b565b'
			
 
				+                        }
			
 
				+                    },
			
 
				+                    lineStyle: {
			
 
				+                        normal: {
			
 
				+                            width: 2,
			
 
				+                            color: '#4b565b'
			
 
				+
			
 
				+                        }
			
 
				+                    },
			
 
				+                    edgeLabel: {
			
 
				+                        normal: {
			
 
				+                            show: true,
			
 
				+                            formatter: function (x) {
			
 
				+                                return x.data.name;
			
 
				+                            }
			
 
				+                        }
			
 
				+                    },
			
 
				+                    label: {
			
 
				+                        normal: {
			
 
				+                            show: true,
			
 
				+                            textStyle: {
			
 
				+                            }
			
 
				+                        }
			
 
				+                    },
			
 
				+                    data: [
			
 
				+                        {
			
 
				+                            name: '侯亮平',
			
 
				+                            des: '最高检反贪局侦查处处长，汉东省人民检察院副检察长兼反贪局局长。<br/>经过与腐败违法分子的斗争，最终将一批腐败分子送上了审判台，<br/>正义战胜邪恶，自己也迎来了成长。',
			
 
				+                            symbolSize: 100,
			
 
				+                            symbol:'rect',
			
 
				+                            itemStyle: {
			
 
				+                                normal: {
			
 
				+                                    color: 'red',
			
 
				+                                }
			
 
				+                            }
			
 
				+                        }, {
			
 
				+                            name: '李达康',
			
 
				+                            des: '汉东省省委常委，京州市市委书记。是一个正义无私的好官。<br/>但为人过于爱惜自己的羽毛，对待身边的亲人和朋友显得有些无情。',
			
 
				+                            itemStyle: {
			
 
				+                                normal: {
			
 
				+                                    color: 'red',
			
 
				+                                }
			
 
				+                            }
			
 
				+                        }, {
			
 
				+                            name: '祁同伟',
			
 
				+                            des: '汉东省公安厅厅长',
			
 
				+                            symbolSize: 100
			
 
				+                        }, {
			
 
				+                            name: '陈岩石',
			
 
				+                            des: '离休干部、汉东省检察院前常务副检察长。充满正义，平凡而普通的共 产 党人。<br/>对大老虎赵立春，以各种形式执着举报了十二年。<br/>在这场关系党和国家生死存亡的斗争中，老人家以耄耋高龄，<br/>义无反顾地背起了炸 药包，在反腐胜利前夕因病去世。',
			
 
				+                            itemStyle: {
			
 
				+                                normal: {
			
 
				+                                    color: 'red'
			
 
				+                                }
			
 
				+                            }
			
 
				+                        }, {
			
 
				+                            name: '陆亦可',
			
 
				+                            des: '汉东省检察院反贪局一处处长',
			
 
				+                            itemStyle: {
			
 
				+                                normal: {
			
 
				+                                    color: 'red'
			
 
				+                                }
			
 
				+                            }
			
 
				+                        }, {
			
 
				+                            name: '高育良',
			
 
				+                            des: '汉东省省委副书记兼政法委书记。年近六十，是一个擅长太极功夫的官场老手。侯亮平、陈海和祁同伟是其学生。',
			
 
				+                            symbolSize: 100
			
 
				+                        }, {
			
 
				+                            name: '沙瑞金',
			
 
				+                            des: '汉东省省委书记',
			
 
				+                            itemStyle: {
			
 
				+                                normal: {
			
 
				+                                    color: 'red'
			
 
				+                                }
			
 
				+                            }
			
 
				+                        }, {
			
 
				+                            name: '高小琴',
			
 
				+                            des: '山水集团董事长，是一位叱咤于政界和商界的风云人物，处事圆滑、精明干练。'
			
 
				+                        }, {
			
 
				+                            name: '高小凤'
			
 
				+                        }, {
			
 
				+                            name: '赵东来',
			
 
				+                            des: '汉东省京州市公安局局长，充满正义，整治恶势力，<br/>在与检察部门的合作中从最初的质疑到之后的通力配合。',
			
 
				+                            itemStyle: {
			
 
				+                                normal: {
			
 
				+                                    color: 'red'
			
 
				+                                }
			
 
				+                            }
			
 
				+                        }, {
			
 
				+                            name: '程度',
			
 
				+                            des: '汉东省京州市公安局光明区分局局长，因犯错误，被李达康书记和赵东来局长点名要清除公安队伍。<br/>但在高小琴的帮助下，祁同伟调他当上了省公安厅办公室副主任。<br/>尽管程度逃避了所有罪责，上面也有人保他，<br/>但最终还是在反贪局局长侯亮平的缜密侦查下被绳之于法。',
			
 
				+                        }, {
			
 
				+                            name: '吴惠芬',
			
 
				+                            des: '汉东省省委副书记高育良的妻子，汉东大学明史教授。',
			
 
				+                            itemStyle: {
			
 
				+                                normal: {
			
 
				+                                    color: 'red'
			
 
				+                                }
			
 
				+                            }
			
 
				+                        }, {
			
 
				+                            name: '赵瑞龙',
			
 
				+                            des: '副国级人物赵立春的公子哥，官二代，打着老子的旗子，<br/>黑白两道通吃，可谓呼风唤雨，权倾一时。',
			
 
				+                        }, {
			
 
				+                            name: '赵立春',
			
 
				+                            des: '副国级领导人，曾经的改革闯将，在权利面前，显得极其渺小。',
			
 
				+                        }, {
			
 
				+                            name: '陈海',
			
 
				+                            itemStyle: {
			
 
				+                                normal: {
			
 
				+                                    color: 'red'
			
 
				+                                }
			
 
				+                            }
			
 
				+                        }, {
			
 
				+                            name: '梁璐',
			
 
				+                            itemStyle: {
			
 
				+                                normal: {
			
 
				+                                    color: 'red'
			
 
				+                                }
			
 
				+                            }
			
 
				+                        }, {
			
 
				+                            name: '刘新建'
			
 
				+                        }, {
			
 
				+                            name: '欧阳菁'
			
 
				+                        }, {
			
 
				+                            name: '吴心怡',
			
 
				+                            itemStyle: {
			
 
				+                                normal: {
			
 
				+                                    color: 'red'
			
 
				+                                }
			
 
				+                            }
			
 
				+                        }, {
			
 
				+                            name: '蔡成功'
			
 
				+                        }, {
			
 
				+                            name: '丁义珍'
			
 
				+                        }
			
 
				+                    ],
			
 
				+                    links: [
			
 
				+                        {
			
 
				+                            source: '高育良',
			
 
				+                            target: '侯亮平',
			
 
				+                            name: '师生',
			
 
				+                            des: '侯亮平是高育良的得意门生'
			
 
				+                        }, {
			
 
				+                            source: '高育良',
			
 
				+                            target: '祁同伟',
			
 
				+                            name: '师生'
			
 
				+                        }, {
			
 
				+                            source: '赵立春',
			
 
				+                            target: '高育良',
			
 
				+                            name: "前领导"
			
 
				+                        }, {
			
 
				+                            source: '赵立春',
			
 
				+                            target: '赵瑞龙',
			
 
				+                            name: "父子"
			
 
				+                        }, {
			
 
				+                            source: '赵立春',
			
 
				+                            target: '刘新建',
			
 
				+                            name: "前部队下属"
			
 
				+                        }, {
			
 
				+                            source: '李达康',
			
 
				+                            target: '赵立春',
			
 
				+                            name: "前任秘书"
			
 
				+                        }, {
			
 
				+                            source: '祁同伟',
			
 
				+                            target: '高小琴',
			
 
				+                            name: "情人"
			
 
				+                        }, {
			
 
				+                            source: '陈岩石',
			
 
				+                            target: '陈海',
			
 
				+                            name: "父子"
			
 
				+                        }, {
			
 
				+                            source: '陆亦可',
			
 
				+                            target: '陈海',
			
 
				+                            name: "属下"
			
 
				+                        }, {
			
 
				+                            source: '沙瑞金',
			
 
				+                            target: '陈岩石',
			
 
				+                            name: "故人"
			
 
				+                        }, {
			
 
				+                            source: '祁同伟',
			
 
				+                            target: '陈海',
			
 
				+                            name: "师哥"
			
 
				+                        }, {
			
 
				+                            source: '祁同伟',
			
 
				+                            target: '侯亮平',
			
 
				+                            name: "师哥"
			
 
				+                        }, {
			
 
				+                            source: '侯亮平',
			
 
				+                            target: '陈海',
			
 
				+                            name: "同学，生死朋友"
			
 
				+                        }, {
			
 
				+                            source: '高育良',
			
 
				+                            target: '吴惠芬',
			
 
				+                            name: "夫妻"
			
 
				+                        }, {
			
 
				+                            source: '陈海',
			
 
				+                            target: '赵东来',
			
 
				+                            name: "朋友"
			
 
				+                        }, {
			
 
				+                            source: '高小琴',
			
 
				+                            target: '高小凤',
			
 
				+                            name: "双胞胎",
			
 
				+                            symbolSize: '1'
			
 
				+                        }, {
			
 
				+                            source: '赵东来',
			
 
				+                            target: '陆亦可',
			
 
				+                            name: "爱慕"
			
 
				+                        }, {
			
 
				+                            source: '祁同伟',
			
 
				+                            target: '程度',
			
 
				+                            name: "领导"
			
 
				+                        }, {
			
 
				+                            source: '高育良',
			
 
				+                            target: '高小凤',
			
 
				+                            name: "情人"
			
 
				+                        }, {
			
 
				+                            source: '赵瑞龙',
			
 
				+                            target: '祁同伟',
			
 
				+                            name: "勾结",
			
 
				+                            symbolSize: '1',
			
 
				+                        }, {
			
 
				+                            source: '李达康',
			
 
				+                            target: '赵东来',
			
 
				+                            name: "领导"
			
 
				+                        }, {
			
 
				+                            source: '赵瑞龙',
			
 
				+                            target: '程度',
			
 
				+                            name: "领导"
			
 
				+                        }, {
			
 
				+                            source: '沙瑞金',
			
 
				+                            target: '李达康',
			
 
				+                            name: "领导"
			
 
				+                        }, {
			
 
				+                            source: '沙瑞金',
			
 
				+                            target: '高育良',
			
 
				+                            name: "领导"
			
 
				+                        }, {
			
 
				+                            source: '祁同伟',
			
 
				+                            target: '梁璐',
			
 
				+                            name: "夫妻"
			
 
				+                        }, {
			
 
				+                            source: '吴惠芬',
			
 
				+                            target: '梁璐',
			
 
				+                            name: "朋友"
			
 
				+                        }, {
			
 
				+                            source: '李达康',
			
 
				+                            target: '欧阳菁',
			
 
				+                            name: "夫妻"
			
 
				+                        }, {
			
 
				+                            source: '赵瑞龙',
			
 
				+                            target: '刘新建',
			
 
				+                            name: "洗钱工具"
			
 
				+                        }, {
			
 
				+                            source: '赵瑞龙',
			
 
				+                            target: '高小琴',
			
 
				+                            name: "勾结，腐化",
			
 
				+                            symbolSize: '1'
			
 
				+                        }, {
			
 
				+                            source: '赵瑞龙',
			
 
				+                            target: '高小凤',
			
 
				+                            name: "腐化"
			
 
				+                        }, {
			
 
				+                            source: '吴心怡',
			
 
				+                            target: '陆亦可',
			
 
				+                            name: "母女"
			
 
				+                        }, {
			
 
				+                            source: '吴心怡',
			
 
				+                            target: '吴惠芬',
			
 
				+                            name: "姐妹"
			
 
				+                        }, {
			
 
				+                            source: '蔡成功',
			
 
				+                            target: '侯亮平',
			
 
				+                            name: "发小"
			
 
				+                        }, {
			
 
				+                            source: '蔡成功',
			
 
				+                            target: '欧阳菁',
			
 
				+                            name: "举报",
			
 
				+                            lineStyle: {
			
 
				+                                normal: {
			
 
				+                                    type: 'dotted',
			
 
				+                                    color: '#000'
			
 
				+                                }
			
 
				+                            }
			
 
				+                        }, {
			
 
				+                            source: '欧阳菁',
			
 
				+                            target: '刘新建',
			
 
				+                            name: "举报",
			
 
				+                            lineStyle: {
			
 
				+                                normal: {
			
 
				+                                    type: 'dotted',
			
 
				+                                    color: '#000'
			
 
				+                                }
			
 
				+                            }
			
 
				+                        }, {
			
 
				+                            source: '刘新建',
			
 
				+                            target: '赵瑞龙',
			
 
				+                            name: "举报",
			
 
				+                            lineStyle: {
			
 
				+                                normal: {
			
 
				+                                    type: 'dotted',
			
 
				+                                    color: '#000'
			
 
				+                                }
			
 
				+                            }
			
 
				+                        }, {
			
 
				+                            source: '李达康',
			
 
				+                            target: '丁义珍',
			
 
				+                            name: "领导"
			
 
				+                        }, {
			
 
				+                            source: '高小琴',
			
 
				+                            target: '丁义珍',
			
 
				+                            name: "策划出逃"
			
 
				+                        }, {
			
 
				+                            source: '祁同伟',
			
 
				+                            target: '丁义珍',
			
 
				+                            name: "勾结"
			
 
				+                        }, {
			
 
				+                            source: '赵瑞龙',
			
 
				+                            target: '丁义珍',
			
 
				+                            name: "勾结"
			
 
				+                        }]
			
 
				+                }
			
 
				+            ]
			
 
				+        };
			
 
				+        myChart.setOption(option);
			
 
				+
			
 
				+
			
 
				+        function zTreeOnClick(event, treeId, treeNode) {
			
 
				+		    alert(treeNode.id + ", " + treeNode.name);
			
 
				+		};
			
 
				+		//树的配置
			
 
				+		var setting = {	
			
 
				+				//数据格式的设置
			
 
				+				data:{
			
 
				+					simpleData:{
			
 
				+						enable:true  //使用简单的json数据
			
 
				+					}
			
 
				+				},
			
 
				+				//树的显示设置
			
 
				+				view:{
			
 
				+					showLine:true, //设置是否显示连线 默认为true
			
 
				+					showTitle: false,//设置是否显示鼠标悬浮时显示title的效果
			
 
				+					dblClickExpand: false,//设置是否支持双击展开树节点
			
 
				+					fontCss : {color:"blue"},//设置节点样式  
			
 
				+					expandSpeed: "slow",//设置展开的速度  fast normal  slow 
			
 
				+					nameIsHTML: true,//名字是否是HTML
			
 
				+					
			
 
				+				},
			
 
				+				//设置事件回调
			
 
				+				callback:{
			
 
				+					onClick:zTreeOnClick
			
 
				+				}
			
 
				+		};
			
 
				+		
			
 
				+		/**
			
 
				+		属性说明  id  当前节点的唯一ID
			
 
				+			   pId [必须大写]  代表当前节点的父节点id
			
 
				+			   name:节点名称
			
 
				+			   open:是否展开当前节点，默认为false
			
 
				+			   isParent:true  标记当前节点是否为父节点 默认为如果当前节点下有子节点 则为true   否则为false
			
 
				+			   icon:设置节点的图标地址
			
 
				+			   iconOpen:设置节点展开时的图标地址  此节点必须是父节点 isParent:true
			
 
				+			   iconClose:设置节点收起的的图标地地址  此节点必须是父节点 isParent:true
			
 
				+			   url:点击节点打开的链接地址  如果想使用onClick:zTreeOnClick事件，就不要加url属性 或者改名字 href
			
 
				+			   target:设置打开链接的方式  [在新窗口打开(_blank)，要本窗口打开(_self)]
			
 
				+			   
			
 
				+		**/
			
 
				+		//树的json数据
			
 
				+		var zNodes =[
			
 
				+			{ id:1, pId:0, name:"<font color='red'>父节点1 - 展开</font>", open:true},
			
 
				+			{ id:11, pId:1, name:"父节点11 - 折叠",icon:"resources/zTree/css/zTreeStyle/img/diy/2.png"},
			
 
				+			{ id:111, pId:11, name:"叶子节点111",target:'_blank',url:'http://www.baidu.com'},
			
 
				+			{ id:112, pId:11, name:"叶子节点112"},
			
 
				+			{ id:113, pId:11, name:"叶子节点113"},
			
 
				+			{ id:114, pId:11, name:"叶子节点114"},
			
 
				+			{ id:12, pId:1, name:"父节点12 - 折叠",iconOpen:"resources/zTree/css/zTreeStyle/img/diy/1_open.png",iconClose:"resources/zTree/css/zTreeStyle/img/diy/1_close.png"},
			
 
				+			{ id:121, pId:12, name:"叶子节点121"},
			
 
				+			{ id:122, pId:12, name:"叶子节点122"},
			
 
				+			{ id:123, pId:12, name:"叶子节点123"},
			
 
				+			{ id:124, pId:12, name:"叶子节点124"},
			
 
				+			{ id:13, pId:1, name:"父节点13 - 没有子节点", isParent:true},
			
 
				+			{ id:2, pId:0, name:"父节点2 - 折叠"},
			
 
				+			{ id:21, pId:2, name:"父节点21 - 展开", open:true},
			
 
				+			{ id:211, pId:21, name:"叶子节点211"},
			
 
				+			{ id:212, pId:21, name:"叶子节点212"},
			
 
				+			{ id:213, pId:21, name:"叶子节点213"},
			
 
				+			{ id:214, pId:21, name:"叶子节点214"},
			
 
				+			{ id:22, pId:2, name:"父节点22 - 折叠"},
			
 
				+			{ id:221, pId:22, name:"叶子节点221"},
			
 
				+			{ id:222, pId:22, name:"叶子节点222"},
			
 
				+			{ id:223, pId:22, name:"叶子节点223"},
			
 
				+			{ id:224, pId:22, name:"叶子节点224"},
			
 
				+			{ id:23, pId:2, name:"父节点23 - 折叠"},
			
 
				+			{ id:231, pId:23, name:"叶子节点231"},
			
 
				+			{ id:232, pId:23, name:"叶子节点232"},
			
 
				+			{ id:233, pId:23, name:"叶子节点233"},
			
 
				+			{ id:234, pId:23, name:"叶子节点234"},
			
 
				+			{ id:3, pId:0, name:"父节点3 - 没有子节点", isParent:true}
			
 
				+		];
			
 
				+		$(document).ready(function(){
			
 
				+			//初始化zTree
			
 
				+			$.fn.zTree.init($("#treeDemo"), setting, zNodes);
			
 
				+		});
			
--- a/src/js/knowledgeTree.js
+++ b/src/js/knowledgeTree.js
@@ -0,0 +1,189 @@
 
				+const $ = require("jquery");
			
 
				+const echarts = require('echarts');
			
 
				+
			
 
				+
			
 
				+var myChart = echarts.init(document.getElementById('main'));
			
 
				+
			
 
				+const data = {
			
 
				+    "children": [
			
 
				+        {
			
 
				+            "children": [
			
 
				+                {
			
 
				+                    "children": [
			
 
				+                        {
			
 
				+                            "children": [],
			
 
				+                            "name": "低压车间表计82"
			
 
				+                        }
			
 
				+                    ],
			
 
				+                    "name": "低压关口表计1"
			
 
				+                }
			
 
				+            ],
			
 
				+            "name": "高压子表计122"
			
 
				+        },
			
 
				+        {
			
 
				+            "children": [
			
 
				+                {
			
 
				+                    "children": [],
			
 
				+                    "name": "低压关口表计101"
			
 
				+                }
			
 
				+            ],
			
 
				+            "name": "高压子表计141"
			
 
				+        },
			
 
				+        {
			
 
				+            "children": [
			
 
				+                {
			
 
				+                    "children": [
			
 
				+                        {
			
 
				+                            "children": [],
			
 
				+                            "name": "低压车间表计82-1"
			
 
				+                        },
			
 
				+                        {
			
 
				+                            "children": [],
			
 
				+                            "name": "低压车间表计82-2"
			
 
				+                        },
			
 
				+                        {
			
 
				+                            "children": [],
			
 
				+                            "name": "低压车间表计82-3"
			
 
				+                        },
			
 
				+                        {
			
 
				+                            "children": [],
			
 
				+                            "name": "低压车间表计82-4"
			
 
				+                        },
			
 
				+                        {
			
 
				+                            "children": [],
			
 
				+                            "name": "低压车间表计82-5"
			
 
				+                        }
			
 
				+                    ],
			
 
				+                    "name": "低压关口表计1-1"
			
 
				+                }
			
 
				+            ],
			
 
				+            "name": "高压子表计122-1"
			
 
				+        },
			
 
				+    ],
			
 
				+    "name": "高压总表计102"
			
 
				+}
			
 
				+// echarts.util.each(data.children, function (datum, index) {  //index为偶数时展开
			
 
				+//     index % 2 === 0 && (datum.collapsed = true);
			
 
				+// });
			
 
				+myChart.setOption(option = {
			
 
				+    tooltip: {
			
 
				+        show:'true',//默认：true；是否显示提示框组件，包括提示框浮层和 axisPointer。
			
 
				+        trigger: 'item',//默认：item；触发类型。item：数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。'axis'：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。'none':什么都不触发。
			
 
				+        triggerOn: 'mousemove',
			
 
				+        borderColor: '#abcdef'
			
 
				+    },
			
 
				+    series:[
			
 
				+        {
			
 
				+            type: 'tree',
			
 
				+
			
 
				+            data: [data],
			
 
				+
			
 
				+            left: '105px',
			
 
				+            right: '100px',
			
 
				+            top: '15%',
			
 
				+            bottom: '10%',
			
 
				+
			
 
				+            symbol: 'emptyCircle',
			
 
				+            itemStyle:{
			
 
				+                borderColor: '#abcdef'
			
 
				+            },
			
 
				+            // orient: 'vertical',
			
 
				+            symbolSize:10,   //标记的大小，就是那个小圆圈，默认7
			
 
				+            expandAndCollapse: true,//默认：true；子树折叠和展开的交互，默认打开 。
			
 
				+
			
 
				+            initialTreeDepth:2,//默认：2，树图初始展开的层级（深度）。根节点是第 0 层，然后是第 1 层、第 2 层，... ，直到叶子节点
			
 
				+
			
 
				+            label: {
			
 
				+                normal: {
			
 
				+                    // distance:0,
			
 
				+                    // position:'top',//标签的位置。
			
 
				+                    position:['-100%',5],
			
 
				+                    rotate: 0,//标签旋转。从 -90 度到 90 度。正值是逆时针。
			
 
				+                    verticalAlign: 'middle',//文字垂直对齐方式，默认自动。
			
 
				+                    align: 'right',//文字水平对齐方式，默认自动。
			
 
				+                    fontSize: 12,//文字的字体大小
			
 
				+                    borderColor: '#abcdef',
			
 
				+                    backgroundColor:'#abcdef',
			
 
				+                    color: '#fff',
			
 
				+                    padding: [5,5,5,5]
			
 
				+                },
			
 
				+            },
			
 
				+
			
 
				+            leaves: {
			
 
				+                label: {
			
 
				+                    normal: {
			
 
				+                        position: ['-100%',5],
			
 
				+                        rotate:0,
			
 
				+                        verticalAlign: 'middle',
			
 
				+                        align: 'right',
			
 
				+                        fontSize: 12,//文字的字体大小
			
 
				+                    }
			
 
				+                }
			
 
				+            },  
			
 
				+
			
 
				+            animationDurationUpdate: 750
			
 
				+            
			
 
				+        }
			
 
				+    ]
			
 
				+})
			
 
				+myChart.setOption(option);
			
 
				+
			
 
				+
			
 
				+
			
 
				+var setting = { };
			
 
				+
			
 
				+var zNodes =[
			
 
				+{ name:"父节点1 - 展开", open:true,
			
 
				+children: [
			
 
				+{ name:"父节点11 - 折叠",
			
 
				+children: [
			
 
				+{ name:"叶子节点111"},
			
 
				+{ name:"叶子节点112"},
			
 
				+{ name:"叶子节点113"},
			
 
				+{ name:"叶子节点114"}
			
 
				+]},
			
 
				+{ name:"父节点12 - 折叠",
			
 
				+children: [
			
 
				+{ name:"叶子节点121"},
			
 
				+{ name:"叶子节点122"},
			
 
				+{ name:"叶子节点123"},
			
 
				+{ name:"叶子节点124"}
			
 
				+]},
			
 
				+{ name:"父节点13 - 没有子节点", isParent:true}
			
 
				+]},
			
 
				+{ name:"父节点2 - 折叠",
			
 
				+children: [
			
 
				+{ name:"父节点21 - 展开", open:true,
			
 
				+children: [
			
 
				+{ name:"叶子节点211"},
			
 
				+{ name:"叶子节点212"},
			
 
				+{ name:"叶子节点213"},
			
 
				+{ name:"叶子节点214"}
			
 
				+]},
			
 
				+{ name:"父节点22 - 折叠",
			
 
				+children: [
			
 
				+{ name:"叶子节点221"},
			
 
				+{ name:"叶子节点222"},
			
 
				+{ name:"叶子节点223"},
			
 
				+{ name:"叶子节点224"}
			
 
				+]},
			
 
				+{ name:"父节点23 - 折叠",
			
 
				+children: [
			
 
				+{ name:"叶子节点231"},
			
 
				+{ name:"叶子节点232"},
			
 
				+{ name:"叶子节点233"},
			
 
				+{ name:"叶子节点234"}
			
 
				+]}
			
 
				+]},
			
 
				+{ name:"父节点3 - 没有子节点", isParent:true}
			
 
				+
			
 
				+];
			
 
				+//这下面三个 都是一样的功能 都是就绪函数的意思。
			
 
				+// window.onload=function () { }
			
 
				+// $(function () {
			
 
				+// 
			
 
				+// })
			
 
				+$(document).ready(function(){
			
 
				+    console.log( ' $.fn.zTree',$.fn)
			
 
				+     $.fn.zTree.init($("#treeDemo"), setting, zNodes); 
			
 
				+});
			
--- a/src/resources/es5-shim.js
+++ b/src/resources/es5-shim.js
--- a/src/resources/zTree/css/zTreeStyle/img/diy/1_close.png
+++ b/src/resources/zTree/css/zTreeStyle/img/diy/1_close.png
--- a/src/resources/zTree/css/zTreeStyle/img/diy/1_open.png
+++ b/src/resources/zTree/css/zTreeStyle/img/diy/1_open.png
--- a/src/resources/zTree/css/zTreeStyle/img/diy/2.png
+++ b/src/resources/zTree/css/zTreeStyle/img/diy/2.png
--- a/src/resources/zTree/css/zTreeStyle/img/diy/3.png
+++ b/src/resources/zTree/css/zTreeStyle/img/diy/3.png
--- a/src/resources/zTree/css/zTreeStyle/img/diy/4.png
+++ b/src/resources/zTree/css/zTreeStyle/img/diy/4.png
--- a/src/resources/zTree/css/zTreeStyle/img/diy/5.png
+++ b/src/resources/zTree/css/zTreeStyle/img/diy/5.png
--- a/src/resources/zTree/css/zTreeStyle/img/diy/6.png
+++ b/src/resources/zTree/css/zTreeStyle/img/diy/6.png
--- a/src/resources/zTree/css/zTreeStyle/img/diy/7.png
+++ b/src/resources/zTree/css/zTreeStyle/img/diy/7.png
--- a/src/resources/zTree/css/zTreeStyle/img/diy/8.png
+++ b/src/resources/zTree/css/zTreeStyle/img/diy/8.png
--- a/src/resources/zTree/css/zTreeStyle/img/diy/9.png
+++ b/src/resources/zTree/css/zTreeStyle/img/diy/9.png
--- a/src/resources/zTree/css/zTreeStyle/img/line_conn.gif
+++ b/src/resources/zTree/css/zTreeStyle/img/line_conn.gif
--- a/src/resources/zTree/css/zTreeStyle/img/loading.gif
+++ b/src/resources/zTree/css/zTreeStyle/img/loading.gif
--- a/src/resources/zTree/css/zTreeStyle/img/zTreeStandard.gif
+++ b/src/resources/zTree/css/zTreeStyle/img/zTreeStandard.gif
--- a/src/resources/zTree/css/zTreeStyle/img/zTreeStandard.png
+++ b/src/resources/zTree/css/zTreeStyle/img/zTreeStandard.png
--- a/src/resources/zTree/css/zTreeStyle/zTreeStyle.css
+++ b/src/resources/zTree/css/zTreeStyle/zTreeStyle.css
@@ -0,0 +1,97 @@
 
				+/*-------------------------------------
			
 
				+zTree Style
			
 
				+
			
 
				+version:	3.5.19
			
 
				+author:		Hunter.z
			
 
				+email:		hunter.z@263.net
			
 
				+website:	http://code.google.com/p/jquerytree/
			
 
				+
			
 
				+-------------------------------------*/
			
 
				+
			
 
				+.ztree * {padding:0; margin:0; font-size:12px; font-family: Verdana, Arial, Helvetica, AppleGothic, sans-serif}
			
 
				+.ztree {margin:0; padding:5px; color:#333}
			
 
				+.ztree li{padding:0; margin:0; list-style:none; line-height:14px; text-align:left; white-space:nowrap; outline:0}
			
 
				+.ztree li ul{ margin:0; padding:0 0 0 18px}
			
 
				+.ztree li ul.line{ background:url(./img/line_conn.gif) 0 0 repeat-y;}
			
 
				+
			
 
				+.ztree li a {padding:1px 3px 0 0; margin:0; cursor:pointer; height:17px; color:#333; background-color: transparent;
			
 
				+	text-decoration:none; vertical-align:top; display: inline-block}
			
 
				+.ztree li a:hover {text-decoration:underline}
			
 
				+.ztree li a.curSelectedNode {padding-top:0px; background-color:#FFE6B0; color:black; height:16px; border:1px #FFB951 solid; opacity:0.8;}
			
 
				+.ztree li a.curSelectedNode_Edit {padding-top:0px; background-color:#FFE6B0; color:black; height:16px; border:1px #FFB951 solid; opacity:0.8;}
			
 
				+.ztree li a.tmpTargetNode_inner {padding-top:0px; background-color:#316AC5; color:white; height:16px; border:1px #316AC5 solid;
			
 
				+	opacity:0.8; filter:alpha(opacity=80)}
			
 
				+.ztree li a.tmpTargetNode_prev {}
			
 
				+.ztree li a.tmpTargetNode_next {}
			
 
				+.ztree li a input.rename {height:14px; width:80px; padding:0; margin:0;
			
 
				+	font-size:12px; border:1px #7EC4CC solid; *border:0px}
			
 
				+.ztree li span {line-height:16px; margin-right:2px}
			
 
				+.ztree li span.button {line-height:0; margin:0; width:16px; height:16px; display: inline-block; vertical-align:middle;
			
 
				+	border:0 none; cursor: pointer;outline:none;
			
 
				+	background-color:transparent; background-repeat:no-repeat; background-attachment: scroll;
			
 
				+	background-image:url("./img/zTreeStandard.png"); *background-image:url("./img/zTreeStandard.gif")}
			
 
				+
			
 
				+.ztree li span.button.chk {width:13px; height:13px; margin:0 3px 0 0; cursor: auto}
			
 
				+.ztree li span.button.chk.checkbox_false_full {background-position:0 0}
			
 
				+.ztree li span.button.chk.checkbox_false_full_focus {background-position:0 -14px}
			
 
				+.ztree li span.button.chk.checkbox_false_part {background-position:0 -28px}
			
 
				+.ztree li span.button.chk.checkbox_false_part_focus {background-position:0 -42px}
			
 
				+.ztree li span.button.chk.checkbox_false_disable {background-position:0 -56px}
			
 
				+.ztree li span.button.chk.checkbox_true_full {background-position:-14px 0}
			
 
				+.ztree li span.button.chk.checkbox_true_full_focus {background-position:-14px -14px}
			
 
				+.ztree li span.button.chk.checkbox_true_part {background-position:-14px -28px}
			
 
				+.ztree li span.button.chk.checkbox_true_part_focus {background-position:-14px -42px}
			
 
				+.ztree li span.button.chk.checkbox_true_disable {background-position:-14px -56px}
			
 
				+.ztree li span.button.chk.radio_false_full {background-position:-28px 0}
			
 
				+.ztree li span.button.chk.radio_false_full_focus {background-position:-28px -14px}
			
 
				+.ztree li span.button.chk.radio_false_part {background-position:-28px -28px}
			
 
				+.ztree li span.button.chk.radio_false_part_focus {background-position:-28px -42px}
			
 
				+.ztree li span.button.chk.radio_false_disable {background-position:-28px -56px}
			
 
				+.ztree li span.button.chk.radio_true_full {background-position:-42px 0}
			
 
				+.ztree li span.button.chk.radio_true_full_focus {background-position:-42px -14px}
			
 
				+.ztree li span.button.chk.radio_true_part {background-position:-42px -28px}
			
 
				+.ztree li span.button.chk.radio_true_part_focus {background-position:-42px -42px}
			
 
				+.ztree li span.button.chk.radio_true_disable {background-position:-42px -56px}
			
 
				+
			
 
				+.ztree li span.button.switch {width:18px; height:18px}
			
 
				+.ztree li span.button.root_open{background-position:-92px -54px}
			
 
				+.ztree li span.button.root_close{background-position:-74px -54px}
			
 
				+.ztree li span.button.roots_open{background-position:-92px 0}
			
 
				+.ztree li span.button.roots_close{background-position:-74px 0}
			
 
				+.ztree li span.button.center_open{background-position:-92px -18px}
			
 
				+.ztree li span.button.center_close{background-position:-74px -18px}
			
 
				+.ztree li span.button.bottom_open{background-position:-92px -36px}
			
 
				+.ztree li span.button.bottom_close{background-position:-74px -36px}
			
 
				+.ztree li span.button.noline_open{background-position:-92px -72px}
			
 
				+.ztree li span.button.noline_close{background-position:-74px -72px}
			
 
				+.ztree li span.button.root_docu{ background:none;}
			
 
				+.ztree li span.button.roots_docu{background-position:-56px 0}
			
 
				+.ztree li span.button.center_docu{background-position:-56px -18px}
			
 
				+.ztree li span.button.bottom_docu{background-position:-56px -36px}
			
 
				+.ztree li span.button.noline_docu{ background:none;}
			
 
				+
			
 
				+.ztree li span.button.ico_open{margin-right:2px; background-position:-110px -16px; vertical-align:top; *vertical-align:middle}
			
 
				+.ztree li span.button.ico_close{margin-right:2px; background-position:-110px 0; vertical-align:top; *vertical-align:middle}
			
 
				+.ztree li span.button.ico_docu{margin-right:2px; background-position:-110px -32px; vertical-align:top; *vertical-align:middle}
			
 
				+.ztree li span.button.edit {margin-right:2px; background-position:-110px -48px; vertical-align:top; *vertical-align:middle}
			
 
				+.ztree li span.button.remove {margin-right:2px; background-position:-110px -64px; vertical-align:top; *vertical-align:middle}
			
 
				+
			
 
				+.ztree li span.button.ico_loading{margin-right:2px; background:url(./img/loading.gif) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
			
 
				+
			
 
				+ul.tmpTargetzTree {background-color:#FFE6B0; opacity:0.8; filter:alpha(opacity=80)}
			
 
				+
			
 
				+span.tmpzTreeMove_arrow {width:16px; height:16px; display: inline-block; padding:0; margin:2px 0 0 1px; border:0 none; position:absolute;
			
 
				+	background-color:transparent; background-repeat:no-repeat; background-attachment: scroll;
			
 
				+	background-position:-110px -80px; background-image:url("./img/zTreeStandard.png"); *background-image:url("./img/zTreeStandard.gif")}
			
 
				+
			
 
				+ul.ztree.zTreeDragUL {margin:0; padding:0; position:absolute; width:auto; height:auto;overflow:hidden; background-color:#cfcfcf; border:1px #00B83F dotted; opacity:0.8; filter:alpha(opacity=80)}
			
 
				+.zTreeMask {z-index:10000; background-color:#cfcfcf; opacity:0.0; filter:alpha(opacity=0); position:absolute}
			
 
				+
			
 
				+/* level style*/
			
 
				+/*.ztree li span.button.level0 {
			
 
				+	display:none;
			
 
				+}
			
 
				+.ztree li ul.level0 {
			
 
				+	padding:0;
			
 
				+	background:none;
			
 
				+}*/
			
--- a/src/resources/zTree/js/jquery.ztree.core.min.js
+++ b/src/resources/zTree/js/jquery.ztree.core.min.js
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -8,6 +8,7 @@ const proxyHost = "http://192.168.2.236:5050";
 
				 module.exports = {
			
 
				   entry: {
			
 
				     index: path.resolve(__dirname, 'src/js', 'index.js'),
			
 
				+    knowledgeTree: path.resolve(__dirname, 'src/js', 'knowledgeTree.js'),
			
 
				     vendor: 'lodash'// 多个页面所需的公共库文件，防止重复打包带入
			
 
				   },
			
 
				   output: {
			
@@ -21,9 +22,9 @@ module.exports = {
 
				   },
			
 
				   plugins: [// 多入口的html文件用chunks这个参数来区分
			
 
				     new HtmlWebpackPlugin({
			
 
				-      title: 'index',
			
 
				-      template: path.resolve(__dirname, 'src/html', 'index.html'),
			
 
				-      filename: 'index.html',
			
 
				+      title: 'knowledgeMap',
			
 
				+      template: path.resolve(__dirname, 'src/html', 'knowledgeMap.html'),
			
 
				+      filename: 'knowledgeMap.html',
			
 
				       chunks: ['index', 'vendor', 'common'],
			
 
				       inject: true,
			
 
				       hash: true, //防止缓存
			
@@ -33,10 +34,28 @@ module.exports = {
 
				         collapseWhitespace: true //删除空白符与换行符
			
 
				       }
			
 
				     }),
			
 
				+    new HtmlWebpackPlugin({
			
 
				+        title: 'knowledgeTree',
			
 
				+        template: path.resolve(__dirname, 'src/html', 'knowledgeTree.html'),
			
 
				+        filename: 'knowledgeTree.html',
			
 
				+        chunks: ['knowledgeTree', 'vendor', 'common'],
			
 
				+        inject: true,
			
 
				+        hash: true, //防止缓存
			
 
				+        minify: {
			
 
				+          removeAttributeQuotes: true, //压缩 去掉引号
			
 
				+          removeComments: true, //移除HTML中的注释
			
 
				+          collapseWhitespace: true //删除空白符与换行符
			
 
				+        }
			
 
				+      }),
			
 
				     new MiniCssExtractPlugin({
			
 
				       filename: 'css/[name].css',
			
 
				       chunkFilename: '[id].css'
			
 
				     }),
			
 
				+    new webpack.ProvidePlugin({
			
 
				+        $: 'jquery',
			
 
				+        jQuery: 'jquery',
			
 
				+        'window.jQuery': 'jquery'
			
 
				+    }),
			
 
				     new webpack.HotModuleReplacementPlugin(),
			
 
				     new CleanWebpackPlugin()
			
 
				   ],
			
@@ -134,7 +153,7 @@ module.exports = {
 
				       '/api': proxyHost
			
 
				     },
			
 
				     hot: true,
			
 
				-    openPage:'index.html'
			
 
				+    openPage:'knowledgeMap.html'
			
 
				     
			
 
				   }
			
 
				 }