知识图谱样式

src/css/common.less

@@ -43,7 +43,7 @@ table,tr,td{
     margin: auto;
     color: #fff;
     font-size: 14px;
-    margin-left: 18.7%;
+    margin-left: calc(50% - 600px);
 }
 .titleLogo{
     height: 20px;
@@ -151,17 +151,17 @@ input:focus,textarea:focus{
     box-shadow: #58a6e7 0px 0px 2px;
 }
 ::-webkit-input-placeholder{
-    color: #6794A8;
+    color: #333;
 }
     
 :-moz-placeholder,:-moz-placeholder{
-    color: #6794A8;
+    color: #333;
 }
 ::-moz-placeholder,::-moz-placeholder{
-    color: #6794A8;
+    color: #333;
 }
 :-ms-input-placeholder,:-ms-input-placeholder{
-    color: #6794A8;
+    color: #333;
 }
 
 /* chrome & safari 浏览器 */

src/css/knowledgeMap.less

@@ -46,10 +46,11 @@
     }
     .left{
         float: left;
-        background: #fff;
+        background: #0D2C53;
         height: 100%;
         margin: 10px 0 0 0;
         position: relative;
+        border:1px #6794A8 solid;
     }
     .right{
         // background: #fff;
@@ -61,7 +62,7 @@
             position: relative;
             width:394px;
             height:80px;
-            background:#FFFFFF;
+            background:#0D2C53;
             border-radius:2px;
             margin: 0 0 10px 0;
             font-size: 14px;
@@ -69,7 +70,7 @@
                 display: inline-block;
                 width:92px;
                 height:40px;
-                background:#E2ECFF;
+                background:rgba(66, 143, 220, 0.25);
                 border-radius:4px;
                 margin: 20px 10px  10px;
                 position: relative;
@@ -79,7 +80,7 @@
                     width: 92px;
                     height: 40px;
                     line-height: 40px;
-                    color: #5A8EEE;
+                    color: #5BBBFF;
                     position: relative;
                     padding: 0 10px;
                 }
@@ -94,16 +95,16 @@
                     display: none;
                     width:90px;
                     line-height: 30px;
-                    background: #fff;
-                    color: #333;
-                    border: 1px solid #e6e6e6;
+                    background: #0D2C53;
+                    color: #fff;
+                    border: 1px solid #5BBBFF;
                     z-index: 3;
                 }
                 .selectItem{
                     padding: 0 10px;
                 }
                 .selectItem:hover{
-                    background: #E2ECFF;
+                    background: #1a4478;
                 }
             }
             .search{
@@ -120,7 +121,7 @@
                     border-radius: 4px 0 0 4px;
                     box-sizing: border-box;
                     outline: none;
-                    color: #333;
+                    color: #fff;
                     font-size: 14px;
                     
                 }
@@ -134,17 +135,17 @@
                 input::-ms-clear{display:none;}
 
                 input::-webkit-input-placeholder{
-                    color: #c3ebf5;
+                    color: #aaa;
                 }
 
                 　　　　input:-moz-placeholder,textarea:-moz-placeholder{
-                    color: #c3ebf5;
+                    color: #aaa;
                 }
                 　　　　input::-moz-placeholder,textarea::-moz-placeholder{
-                    color: #c3ebf5;
+                    color: #aaa;
                 }
                 　　　　input:-ms-input-placeholder,textarea:-ms-input-placeholder{
-                    color: #c3ebf5;
+                    color: #aaa;
                 }
                 .searchBtn{
                     position: absolute;
@@ -154,7 +155,7 @@
                     height:40px;
                     text-align: center;
                     line-height: 40px;
-                    background:#5A8EEE;
+                    background: linear-gradient(270deg, #00A6F5 0%, #0071E7 100%);
                     border-radius:0px 4px 4px 0px;
                     color: #fff;
                 }
@@ -164,8 +165,8 @@
                     display: none;
                     width:192px;
                     max-height:200px;
-                    background: #fff;
-                    border:1px solid rgba(230,230,230,1);
+                    background: #0D2C53;
+                    border:1px solid #5BBBFF;
                     border-radius: 4px 0 0 4px;
                     box-sizing: border-box;
                     overflow-y: auto;
@@ -174,10 +175,10 @@
                         height: 40px;
                         line-height: 40px;
                         padding: 0 10px;
-                        color: #333;
+                        color: #fff;
                     }
                     li:hover{
-                        background: #E2ECFF;
+                        background: #1a4478;
                     }
                     .nodeItem{
                         cursor: pointer;
@@ -186,7 +187,7 @@
             }
         }
         .bottom{
-            background: #fff;
+            background: #0D2C53;
             .tabList{
                 width: 100%;
                 height: 43px;
@@ -203,7 +204,7 @@
                     line-height: 42px;
                     margin: 0 20px 0 10px;
                     font-size: 14px;
-                    color: #777;
+                    color: #A7CFFC;
                     cursor: pointer;
                 }
                 .tab:hover{
@@ -211,9 +212,9 @@
                 }
                 .activeTab{
                     font-size: 16px;
-                    color: #5A8EEE;
+                    color: #5BBBFF;
                     font-weight: bold;
-                    border-bottom: 3px solid #5A8EEE;
+                    border-bottom: 3px solid #5BBBFF;
                     box-sizing: border-box;
                 }
             }
@@ -230,14 +231,14 @@
             .toggleArrow{
                 width: 11px;
                 position: absolute;
-                top: 18px;
+                top: 15px;
                 right: 0px;
             }
             .toggleTab{
                 display: inline-block;
                 position: absolute;
                 font-size: 14px ;
-                color: #AAA;
+                color: #A7CFFC;
                 line-height: 44px;
                 right: 20px;
                 top: 0;
@@ -249,7 +250,7 @@
             }
             .hideTabList{
                 position: relative;
-                background: #fff;
+                background: #0D2C53;
                 width: 100%;
                 z-index: 2;
                 display: none;
@@ -267,7 +268,7 @@
             }
             .radioItem{
                 font-size: 14px;
-                color: #333;
+                color: #fff;
                 line-height: 16px;
                 margin-right: 20px;
                 cursor: pointer;
@@ -292,7 +293,7 @@
         height: 22px;
         bottom: 50px;
         right: 5px;
-        background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
+        /*background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);*/
     }
     .legendIconImg{
         width: 22px;

src/html/knowledgeGraph.html

@@ -27,9 +27,9 @@
 					<div class="legendIconImg"></div>
 				</div>
 				
-				 <div class="footer ltLogo">
+				 <!--<div class="footer ltLogo">
 					杭州朗通信息技术有限公司 & 浙江大学医学院附属邵逸夫医院&nbsp;&nbsp;&nbsp;联合开发
-				</div>
+				</div>-->
 			</div>
 			<div class="right">
 				<div class="top">

src/js/graphMap.js

@@ -55,9 +55,12 @@ function drawGraph(data,resultShowId) {
         title: { 
             text: '医学知识图谱',
             top: '10',
-            left: '10'
+            left: '10',
+          titleStyle:{
+                color:'#fff'
+          }
         },
-        // color:colors,
+        color:['#008560','#E57373','#0EB1EE','#9D96F5','#ACC68E','#EDAA77','#14BBB3','#538FFF','#1390FB','#C7B02E',],
         tooltip: {
             formatter: function (x) {
                 return x.data.label;
@@ -73,11 +76,15 @@ function drawGraph(data,resultShowId) {
              icon: 'circle',
              width: 766,
              verticalAlign:'top',
+                color:'#fff',
              borderColor:'#E6E6E6',
             //  borderTopWidth:1,
             padding:[20, 1000, 0, 1000],
-            backgroundColor: "#FFFFFF",
+            backgroundColor: "#0D2C53",
             selected:{},
+            textStyle:{
+                  color:'#fff'
+            },
             // orient: 'vertical',
             data: legends.slice(0,showLegendNum).map(function (a) {
                 return a.name;
@@ -94,7 +101,7 @@ function drawGraph(data,resultShowId) {
                 roam: 'move',
                 edgeSymbol: ['circle', 'arrow'],
                 edgeSymbolSize: [1, 5],
-                edgeLabel: {
+                ledgeLabel: {
                     // cursor:'pointer',
                     normal: {
                         textStyle: {
@@ -144,7 +151,7 @@ function drawGraph(data,resultShowId) {
                         textStyle: {
                             cursor:'pointer',
                         },
-                        color:'#1E1E1E', //label字体颜色
+                        color:'#fff', //label字体颜色
                         formatter: function (x) {
                              var tmp = x.data.label;
                             if(tmp.length >= 12){
@@ -297,7 +304,7 @@ function drawTree(data, showNodeName){
             showLine:true, //设置是否显示连线 默认为true
             showTitle: true,//设置是否显示鼠标悬浮时显示title的效果
             dblClickExpand: true,//设置是否支持双击展开树节点
-            fontCss : {color:"#333"},//设置节点样式  
+            fontCss : {color:"#fff"},//设置节点样式
             expandSpeed: "normal",//设置展开的速度  fast normal  slow 
             nameIsHTML: true,//名字是否是HTML
             selectedMulti: true,

src/js/medicalTermMap.js

@@ -153,7 +153,7 @@ function drawGraph(data,resultShowId) {
              icon: 'circle',
             padding:[20, 2000, 0, 2000],
             // cursor:'pointer',
-            backgroundColor: "#FFFFFF",
+            backgroundColor: "#0D2C53",
             data: legends.slice(0,showLegendNum).map(function (a) {
                 return a.name;
             })
@@ -218,7 +218,7 @@ function drawGraph(data,resultShowId) {
                         textStyle: {
                             cursor:'pointer',
                         },
-                        color:'#1E1E1E', //label字体颜色
+                        color:'#fff', //label字体颜色
                         formatter: function (x) {
                              var tmp = x.data.label;
                             if(tmp.length >= 12){

src/js/schemaMap.js

@@ -48,7 +48,7 @@ function drawTree(data, showNodeName){
             showLine:true, //设置是否显示连线 默认为true
             showTitle: true,//设置是否显示鼠标悬浮时显示title的效果
             dblClickExpand: true,//设置是否支持双击展开树节点
-            fontCss : {color:"#333"},//设置节点样式  
+            fontCss : {color:"#fff"},//设置节点样式
             expandSpeed: "normal",//设置展开的速度  fast normal  slow 
             nameIsHTML: true,//名字是否是HTML
             selectedMulti: true,
@@ -280,7 +280,7 @@ function getSchema(val, type){
                         fontSize: 12,//文字的字体大小
                         // borderColor: '#abcdef',
                         // backgroundColor:'#abcdef',
-                        color: '#333',
+                        color: '#fff',
                         padding: [5,5,5,5],
                         formatter: function (x) {
                             var tmp = x.data.name;

src/resources/zTree/css/zTreeStyle/zTreeStyle.css

@@ -19,7 +19,7 @@ website:	http://code.google.com/p/jquerytree/
 .ztree li a {padding:1px 3px 0 0; margin:0; cursor:pointer; height:22px; 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:24px; box-sizing: border-box; border:1px #FFB951 solid; opacity:0.8;}
+.ztree li a.curSelectedNode {padding-top:0px; /*background-color:#FFE6B0;*/ color:#FEAC41!important; height:24px; box-sizing: border-box; /*border:1px #FFB951 solid;*/ opacity:0.8;}
 .ztree li a.curSelectedNode_Edit {padding-top:0px; background-color:#FFE6B0; color:black; height:24px; box-sizing: border-box; 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)}