Home Explore Help
Register Sign In
front
/
knowledgeMap
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

添加选种状态

zhangxc 5 years ago
parent
cdffc7de62
commit
617d50b9a6
15 changed files with 91 additions and 23 deletions
Split View Show Diff Stats
  1. 32 2
      src/css/knowledgeMap.less
  2. 8 0
      src/css/knowledgeTree.less
  3. 8 7
      src/html/knowledgeMap.html
  4. 2 1
      src/html/knowledgeTree.html
  5. 13 6
      src/js/graphMap.js
  6. 21 2
      src/js/index.js
  7. 1 0
      src/js/knowledgeTree.js
  8. 5 5
      src/js/schemaMap.js
  9. 0 0
      src/resources/images/iconSelect.png
  10. 0 0
      src/resources/images/iconSlideDown.png
  11. 0 0
      src/resources/images/iconSlideUp.png
  12. BIN
      src/resources/images/logo.png
  13. 0 0
      src/resources/images/radioSelect.png
  14. 0 0
      src/resources/images/radioUnSelect.png
  15. 1 0
      src/resources/zTree/js/jquery.ztree.excheck.min.js

+ 32 - 2
src/css/knowledgeMap.less
View File 

@@ -13,6 +13,13 @@
 
         width: 1200px;
 
         left: 50%;
 
         margin-left: -600px;
 
+        color: #fff;
 
+        font-size: 14px;
 
+    }
 
+    .titleLogo{
 
+        position: relative;
 
+        top: 3px;
 
+        height: 20px;
 
     }
 
     .content{
 
         position: relative;
 
@@ -57,13 +64,21 @@
 
                     color: #5A8EEE;
 
                     position: relative;
 
                 }
 
+                .iconSlide{
 
+                    width: 7px;
 
+                    position: relative;
 
+                    top: -3px;
 
+                }
 
                 .selectList{
 
                     position: absolute;
 
                     display: none;
 
-                    width:92px;
 
+                    width:90px;
 
                     line-height: 30px;
 
                     text-align: center;
 
                     background: #fff;
 
+                    color: #333;
 
+                    border: 1px solid #e6e6e6;
 
+                    z-index: 2;
 
                 }
 
                 .selectItem:hover{
 
                     background: #abcdef;
 
@@ -82,6 +97,8 @@
 
                     border:1px solid rgba(230,230,230,1);
 
                     border-radius: 4px 0 0 4px;
 
                     box-sizing: border-box;
 
+                    outline: none;
 
+                    color: #333;
 
                 }
 
                 .searchBtn{
 
                     position: absolute;;
 
@@ -99,7 +116,6 @@
 
                     top: 5px;
 
                     display: none;
 
                     width:192px;
 
-                    padding: 0 10px;
 
                     max-height:200px;
 
                     background: #fff;
 
                     border:1px solid rgba(230,230,230,1);
 
@@ -108,6 +124,9 @@
 
                     overflow-y: auto;
 
                     li{
 
                         height: 40px;
 
+                        line-height: 40px;
 
+                        padding: 0 10px;
 
+                        color: #333;
 
                     }
 
                     li:hover{
 
                         background: #abcdef;
 
@@ -146,6 +165,17 @@
 
             .radioItem{
 
                 font-size: 12px;
 
                 color: #333;
 
+                line-height: 16px;
 
+            }
 
+            .iconRadio{
 
+                width: 14px;
 
+                position: relative;
 
+                top: 2px;
 
+            }
 
+            .iconSelect{
 
+                width: 12px;
 
+                top: 0px;
 
+                position: relative;
 
             }
 
         }
 
     }

+ 8 - 0
src/css/knowledgeTree.less
View File 

@@ -11,6 +11,13 @@
 
         width: 1200px;
 
         left: 50%;
 
         margin-left: -600px;
 
+        color: #fff;
 
+        font-size: 14px;
 
+    }
 
+    .titleLogo{
 
+        position: relative;
 
+        top: 3px;
 
+        height: 20px;
 
     }
 
     .tipsInfo{
 
         margin: 0 0 20px 0;
 
@@ -35,6 +42,7 @@
 
             font-size: 14px;
 
             color: #333;
 
             resize: none;
 
+            outline: none;
 
             padding: 10px;
 
             background: #F7F8FA;
 
         }

+ 8 - 7
src/html/knowledgeMap.html
View File 

@@ -12,7 +12,7 @@
 
 <body>
 
   <div class="knowledgeMapWrapper">
 
       <div class="title">
 
-        <div class="titleTxt"> 医学知识图谱</div>
 
+        <div class="titleTxt"><img class="titleLogo" src="./images/logo.png" alt="logo">&nbsp;&nbsp;|&nbsp;&nbsp;  医学知识图谱</div>
 
       </div>
 
       <div class="content clearfix">
 
         <div class="left">
 
@@ -22,28 +22,29 @@
 
           <div class="top">
 
             <div class="select">
 
               <span class="selectedName">疾病</span>
 
-              <ul class="selectList">
 
+              <img class="iconSlide" src="./images/iconSlideDown.png" alt="iconSlide">
 
+              <!-- <ul class="selectList">
 
                 <li class="selectItem" data-id="diagnose">疾病</li>
 
                 <li class="selectItem">药物</li>
 
                 <li class="selectItem">症状</li>
 
                 <li class="selectItem">诊疗</li>
 
-              </ul>
 
+              </ul> -->
 
             </div>
 
             <div class="search">
 
-                <input type="text" id="searchInp" name="" autocomplete="no" ><span class="searchBtn" id="searchBtn">搜索</span>
 
+                <input type="text" id="searchInp" name="" autocomplete="off" ><span class="searchBtn" id="searchBtn">搜索</span>
 
                 <ul class="tabNameList"></ul>
 
             </div>
 
           </div>
 
           <div class="bottom">
 
              <div class="tabList" id="tabList">
 
                 <span class="tab activeTab" data-id="diagnose">疾病</span>
 
-                <span  class="tab">药物</span>
 
+                <!-- <span  class="tab">药物</span>
 
                 <span  class="tab">症状</span>
 
-                <span  class="tab">诊疗</span>
 
+                <span  class="tab">诊疗</span> -->
 
              </div>
 
              <div class="radioList">
 
                 <span class="radioItem">  
-                    <!-- <img class="iconRadio" src="/images/unSelect.png" alt="iconRadio"> -->
 
+                    <img class="iconRadio" src="/images/radioSelect.png" alt="iconRadio">
 
                     ICD10
 
                 </span>
 
              </div>

+ 2 - 1
src/html/knowledgeTree.html
View File 

@@ -9,7 +9,8 @@
 
 <body>
 
   <div class="knowledgeTreeWrapper">
 
     <div class="title">
 
-      <div class="titleTxt"> 医学知识图谱</div>
 
+     
+      <div class="titleTxt"><img class="titleLogo" src="./images/logo.png" alt="logo">&nbsp;&nbsp;|&nbsp;&nbsp; 描述框架</div>
 
     </div>
 
     <div class="content">
 
       <div class="tipsInfo">

+ 13 - 6
src/js/graphMap.js
View File 

@@ -169,7 +169,6 @@ function drawGraph(data,resultShowId) {
 
         ]
 
     };
 
     myChart.setOption(option);
 
-    myChart.on('click',dataClick);
 
     // myChart = echarts.init(document.getElementById(resultShowId),'light');
 
     // categories = data['categories'];
 
     // var legends = categories.slice(2, categories.length);
 
@@ -271,7 +270,6 @@ function drawGraph(data,resultShowId) {
 
 function dataClick(param){
 
     var data = param.data;
 
     // var nodes = option.series[0].nodes;
 
-     console.log('clickData',data);
 
     if(data.source !== undefined && data.target !== undefined)
 
     {
 
         // myChart.setOption(option);
 
@@ -483,8 +481,8 @@ function drawTree(data, showNodeName){
 
         view:{
 
             showLine:true, //设置是否显示连线 默认为true
 
             showTitle: false,//设置是否显示鼠标悬浮时显示title的效果
 
-            dblClickExpand: false,//设置是否支持双击展开树节点
 
-            fontCss : {color:"blue"},//设置节点样式  
+            dblClickExpand: true,//设置是否支持双击展开树节点
 
+            fontCss : {color:"#333"},//设置节点样式  
             expandSpeed: "slow",//设置展开的速度  fast normal  slow 
             nameIsHTML: true,//名字是否是HTML
 
             selectedMulti: true,
 
@@ -492,7 +490,11 @@ function drawTree(data, showNodeName){
 
         },
 
         //设置事件回调
 
         callback:{
 
-            // onClick:zTreeOnClick,
 
+            onClick: function (treeId, treeNode) {
 
+                const selectPId = $('.curSelectedNode').attr('id')
 
+                const selectId = selectPId.substring(0,selectPId.length-1) + 'ico'
 
+                $('#'+selectId).append('<img class="iconSelect" src="./images/iconSelect.png">')
 
+            },
 
             beforeClick: function (treeId, treeNode) {
 
                 var zTree = $.fn.zTree.getZTreeObj("tree");
 
                 if (treeNode.isParent) {
 
@@ -503,6 +505,9 @@ function drawTree(data, showNodeName){
 
                     let index = treeNodeName.indexOf(' ')
 
                     const name = treeNodeName.substring(index+1)
 
                     getGraph(name,'diagnose')
 
+                    const selectPId = $('.curSelectedNode').attr('id')
 
+                    const selectId = selectPId.substring(0,selectPId.length-1) + 'ico'
 
+                    $('#'+selectId + ' .iconSelect').remove()
 
                     // showKnowledgeGraph(treeNode.name, 'graph', 0);
 
                     return true;
 
                 }
 
@@ -526,7 +531,6 @@ function getNode(val, type){
 
         }
 
     ).then(res=>{
 
         if(res.data.code == 0) {
 
-            console.log('res',res)
 
             const data = res.data.data
 
             let nodeStr =''
 
             if(data.length > 0){
 
@@ -575,6 +579,9 @@ function updateTree(keyWord, txt) {
 
         var data = {"name":'tree'};
 
         var zTree = $.fn.zTree.getZTreeObj("tree");
 
                 zTree.selectNode(zTree.getNodeByParam("name", keyWord));
 
+                const selectPId = $('.curSelectedNode').attr('id')
 
+                const selectId = selectPId.substring(0,selectPId.length-1) + 'ico'
 
+                $('#'+selectId).append('<img class="iconSelect" src="./images/iconSelect.png">')
 
         // $.ajax({
 
         //     type: 'GET',
 
         //     url: '/load_tree/' + txt,

+ 21 - 2
src/js/index.js
View File 

@@ -7,7 +7,14 @@ require('./../resources/images/icon.png');
 
 require('./../resources/images/iconOpen.png');
 
 require('./../resources/images/iconClose.png');
 
 require('./../resources/images/node.png');
 
+require('./../resources/images/radioUnSelect.png');
 
+require('./../resources/images/radioSelect.png');
 
+require('./../resources/images/iconSlideUp.png');
 
+require('./../resources/images/iconSlideDown.png');
 
+require('./../resources/images/iconSelect.png');
 
+require('./../resources/images/logo.png');
 
 require('./../resources/zTree/js/jquery.ztree.core.min.js');
 
+require('./../resources/zTree/js/jquery.ztree.excheck.min.js')
 
 require('./../resources/zTree/css/zTreeStyle/zTreeStyle.css');
 
 // document.write("aaaa");
 
 const { post, api } = require('./api.js');
 
@@ -21,7 +28,7 @@ var select_type_noSearch="diagnose";
 
  const contentHei = clientHei - 60
 
  $(".left").css("height",contentHei+'px')
 
  $(".right").css("height",contentHei+'px')
 
- $(".ztree").css("height",contentHei-80-43-60-10+'px')
 
+ $(".ztree").css("height",contentHei-80-43-60-20+'px')
 
 //关系图
 
 getGraph("胆囊炎",select_type);
 
 getTree(1,1,"胆囊炎");
 
@@ -30,7 +37,14 @@ $('#searchInp').val("胆囊炎")
 
 //选择类型
 
 $('.select').click(function(e){
 
     e.stopPropagation();
 
+    const selectListShow = $('.selectList').css('display')
 
+    if(selectListShow == 'none'){
 
+        $('.iconSlide').attr('src','./images/iconSlideUp.png')
 
+    } else{
 
+        $('.iconSlide').attr('src','./images/iconSlideDown.png')
 
+    }
 
     $('.selectList').fadeToggle()
 
+   
 })
 
 $('.selectList .selectItem').click(function(){
 
     select_type_noSearch = $(this).attr('data-id')
 
@@ -52,7 +66,6 @@ $("#searchInp").bind("input propertychange",function(event){
 
 //搜索
 
 $('#searchBtn').click(function(){
 
     const val = $('#searchInp').val()
 
-    console.log('aaaaaaaaa',val)
 
     getGraph(val,'diagnose')
 
     updateTree(val)
 
 })
 
@@ -75,8 +88,14 @@ $('.tabList .tab').click(function(){
 
 //点击页面其他地方关闭下拉
 
 $('html').click(function(){
 
     const selectListShow = $('.selectList').css('display')
 
+    const tabNameListShow = $('.tabNameList').css('display')
 
+   
     if(selectListShow == 'block'){
 
         $('.selectList').hide()
 
+        $('.iconSlide').attr('src','./images/iconSlideDown.png')
 
+    }
 
+    if(tabNameListShow == 'block'){
 
+        $('.tabNameList').hide()
 
     }
 
 })

+ 1 - 0
src/js/knowledgeTree.js
View File 

@@ -1,5 +1,6 @@
 
 require("./../css/knowledgeTree.less");
 
 require("./../css/common.css");
 
+require('./../resources/images/logo.png');
 
 const $ = require("jquery");
 
 const echarts = require('echarts');
 
 const { getSchema } = require('./schemaMap.js');

+ 5 - 5
src/js/schemaMap.js
View File 

@@ -19,7 +19,7 @@ function getSchema(val, type){
 
             show:'true',//默认：true；是否显示提示框组件，包括提示框浮层和 axisPointer。
 
             trigger: 'item',//默认：item；触发类型。item：数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。'axis'：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。'none':什么都不触发。
 
             triggerOn: 'mousemove',
 
-            borderColor: '#abcdef'
 
+            // borderColor: '#abcdef'
 
         },
 
         series:[
 
             {
 
@@ -34,7 +34,7 @@ function getSchema(val, type){
 
     
                 // symbol: 'emptyCircle',
 
                 itemStyle:{
 
-                    borderColor: '#abcdef'
 
+                    // borderColor: '#abcdef'
 
                 },
 
                 // orient: 'vertical',
 
                 symbolSize:10,   //标记的大小，就是那个小圆圈，默认7
 
@@ -51,9 +51,9 @@ function getSchema(val, type){
 
                         verticalAlign: 'middle',//文字垂直对齐方式，默认自动。
 
                         align: 'right',//文字水平对齐方式，默认自动。
 
                         fontSize: 12,//文字的字体大小
 
-                        borderColor: '#abcdef',
 
-                        backgroundColor:'#abcdef',
 
-                        color: '#fff',
 
+                        // borderColor: '#abcdef',
 
+                        // backgroundColor:'#abcdef',
 
+                        color: '#333',
 
                         padding: [5,5,5,5]
 
                     },
 
                 },

src/resources/images/icon_select@2x.png → src/resources/images/iconSelect.png
View File


src/resources/images/icon_more-xia@2x.png → src/resources/images/iconSlideDown.png
View File


src/resources/images/icon_more-shang@2x.png → src/resources/images/iconSlideUp.png
View File


BIN
src/resources/images/logo.png
View File


src/resources/images/box_select@2x.png → src/resources/images/radioSelect.png
View File


src/resources/images/unSelect.png → src/resources/images/radioUnSelect.png
View File


File diff suppressed because it is too large
+ 1 - 0
src/resources/zTree/js/jquery.ztree.excheck.min.js