项目初始化

.gitignore

@@ -0,0 +1,32 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+icssfront.iml
+package-lock.json
+yarn.lock
+*-bak.*
+
+# Dependency directories
+node_modules/
+package-lock.json
+# Optional eslint cache
+.eslintcache
+/.DS_Store
+dist/
+dist
+.idea
+
+.vscode
+/.idea
+/dist
+
+
+# node
+app/
+app/package-lock.json
+app/yarn.lock
+app/logs
+app/node_modules

package.json

@@ -0,0 +1,49 @@
+{
+  "name": "zn",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "dependencies": {
+    "bluebird": "^3.5.5",
+    "babel-loader": "^8.0.5",
+    "jquery": "^1.12.4",
+    "poplar-annotation": "^2.0.3",
+    "webpack-cli": "^3.3.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.4.4",
+    "@babel/preset-env": "^7.4.4",
+    "babel-loader": "^8.0.5",
+    "babel-polyfill": "^6.26.0",
+    "clean-webpack-plugin": "^2.0.1",
+    "copy-webpack-plugin": "^5.1.1",
+    "css-loader": "^2.1.1",
+    "echarts": "^4.6.0",
+    "express": "^4.16.4",
+    "extract-text-webpack-plugin": "^4.0.0-beta.0",
+    "file-loader": "^3.0.1",
+    "html-webpack-plugin": "^3.2.0",
+    "less": "^3.9.0",
+    "less-loader": "^5.0.0",
+    "mini-css-extract-plugin": "^0.6.0",
+    "style-loader": "^0.23.1",
+    "uglifyjs-webpack-plugin": "^2.1.2",
+    "webpack": "^4.31.0",
+    "webpack-dev-middleware": "^3.6.2",
+    "webpack-dev-server": "^3.3.1",
+    "ztree": "^3.5.24"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack",
+    "watch": "webpack --watch",
+    "dev": "webpack-dev-server --open",
+    "server": "node server.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "http://192.168.2.236:10080/zhouna/knowledgeMap.git"
+  },
+  "author": "zn",
+  "license": "ISC"
+}

server.js

@@ -0,0 +1,16 @@
+const express = require('express');
+const webpack = require('webpack');
+const webpackDevMiddleware = require('webpack-dev-middleware');
+
+const app = express();
+const config = require('./webpack.config');
+const compiler = webpack(config);
+
+app.use(webpackDevMiddleware(compiler,{
+  publicPath: config.output.publicPath
+}));
+
+app.listen(3000,function(){
+  console.log('app listening on port 3000\n');
+});
+

src/css/common.less

@@ -0,0 +1,160 @@
+html, body{
+    background: #F7F8FA;
+}
+*{
+    margin: 0;
+    padding: 0;
+}
+ul,li{
+    list-style: none;
+}
+.clearfix {
+    zoom: 1
+}
+.clearfix:after {
+    display: block;
+    clear: both;
+    overflow: hidden;
+    width: 0;
+    content: '';
+}
+.ellipsis{
+    overflow: hidden;
+    text-overflow:ellipsis;
+    white-space: nowrap;
+}
+table,tr,td{
+    list-style: none;
+}
+.title{
+    width: 100%;
+    min-width: 1200px;
+    height: 40px;
+    background-image: linear-gradient(to right, #5A8EEE , #7EABFF);
+    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#1471da,endColorstr=#1C85FB);/*IE<9>*/
+    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#1471da, endColorstr=#1C85FB)";/*IE8+*/
+}
+.titleTxt{
+    width: 1200px;
+    padding-top: 5px;
+    margin: auto;
+    color: #fff;
+    font-size: 14px;
+}
+.titleLogo{
+    height: 20px;
+    vertical-align: middle;
+    margin-right: 10px;
+}
+.titleLogoShaiyifu{
+    height: 30px;
+}
+.titleInfo{
+    display: inline-block;
+    color: #fff;
+    vertical-align: middle;
+    height: 17px;
+}
+.pop-box{
+    position: absolute;
+    display: none;
+    width: 400px;
+    height: 550px;
+    background: #fff;
+    top:44px;
+    right: 0;
+    z-index: 999;
+    box-shadow:0px 14px 22px -6px rgba(20,39,75,0.12);
+    border:1px solid rgba(90,142,238,1);
+}
+.pop-box .pop-cover{
+    width: 100%;
+    height: 100%;
+    background: #000;
+    opacity: .4;
+}
+
+.pop-box .pop-container{
+    width: 400px;
+    height: 514px;
+    
+    border-radius: 5px;
+    position: absolute;
+    left: 0;
+    top:0px;
+    z-index: 2;
+}
+.pop-box .pop-title{
+    /* background: #5A8EEE; */
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    height: 35px;
+    line-height: 35px;
+    color:#fff;
+    position: absolute;
+    top: 0;
+    width: 100%;
+}
+.pop-box .pop-title h3{
+    float: left;
+    font-size: 16px;
+    text-indent: 15px;
+}
+.pop-box .pop-title .pop-close{
+    float: right;
+    margin: 7px 10px 0 0;
+    cursor: pointer;
+    width: 20px;
+}
+.pop-box .pop-ok,.pop-box .pop-cancel{
+    display: inline-block;
+    border: 1px solid #5A8EEE;
+    padding: 9px 20px;
+    text-align: center;
+    border-radius: 4px;
+    font-size: 14px;
+    cursor: pointer;
+}
+.pop-box .pop-body{
+    position: relative;
+    height: 100%;
+    margin-bottom: 20px;
+    overflow-y: auto;
+    top: 35px;
+    
+}
+.pop-box .pop-footer{
+    padding: 15px;
+    text-align: center;
+}
+.pop-box .pop-ok{
+    background-color: #5A8EEE;
+    color: #fff;
+}
+.pop-box .pop-cancel{
+    border-color: #5A8EEE;
+    color: #5A8EEE;
+    background: #fff;
+    margin: 0 0 0 50px;
+}
+
+input:focus,textarea:focus{
+    border: 1px solid #58a6e7 !important;
+    outline: 0;
+    -webkit-box-shadow:#58a6e7 0px 0px 2px;
+    -moz-box-shadow: #58a6e7 0px 0px 2px;
+    box-shadow: #58a6e7 0px 0px 2px;
+}
+input::-webkit-input-placeholder{
+    color: #ccc;
+}
+    
+input:-moz-placeholder,textarea:-moz-placeholder{
+    color: #ccc;
+}
+input::-moz-placeholder,textarea::-moz-placeholder{
+    color: #ccc;
+}
+input:-ms-input-placeholder,textarea:-ms-input-placeholder{
+    color: #ccc;
+}

src/css/knowledgeMap.less

@@ -0,0 +1,331 @@
+.knowledgeMapWrapper{
+     min-width: 1200px;
+   /* .title{
+         position: relative;
+         height: 40px;
+         line-height: 40px;
+         background-image: linear-gradient(to right, #5A8EEE , #7EABFF);
+        filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#1471da,endColorstr=#1C85FB);!*IE<9>*!
+         -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#1471da, endColorstr=#1C85FB)";!*IE8+*!
+
+     }
+     .titleTxt{
+         position: relative;
+         width: 1200px;
+         left: 50%;
+         margin-left: -600px;
+         color: #fff;
+         font-size: 14px;
+     }
+     .titleLogo{
+         position: relative;
+         top: -2px;
+         height: 20px;
+         margin: 0 20px 0 0;
+     }
+     .titleLogoShaiyifu{
+         top: 5px;
+         height: 30px;
+     }
+     .titleInfo{
+         position: relative;
+         display: inline-block;
+         top: -4px;
+         height: 40px;
+         line-height: 40px;
+     }*/
+    .content{
+        position: relative;
+        width: 1200px;
+        left: 50%;
+        margin-left: -600px;
+        cursor: default;
+        height: 100%;
+    }
+    .left{
+        float: left;
+        background: #fff;
+        height: 100%;
+        margin: 10px 0 0 0;
+        position: relative;
+    }
+    .right{
+        // background: #fff;
+        width: 394px;
+        float: right;
+        height: 100%;
+        margin: 10px 0 0 0;
+        .top{
+            position: relative;
+            width:394px;
+            height:80px;
+            background:#FFFFFF;
+            border-radius:2px;
+            margin: 0 0 10px 0;
+            font-size: 14px;
+            .select{
+                display: inline-block;
+                width:92px;
+                height:40px;
+                background:#E2ECFF;
+                border-radius:4px;
+                margin: 20px 10px  10px;
+                position: relative;
+                cursor: pointer;
+                .selectedName{
+                    display: inline-block;
+                    width: 92px;
+                    height: 40px;
+                    line-height: 40px;
+                    color: #5A8EEE;
+                    position: relative;
+                    padding: 0 10px;
+                }
+                .iconSlide{
+                    width: 13px;
+                    position: absolute ;
+                    top: 16px;
+                    right: 10px;
+                }
+                .selectList{
+                    position: absolute;
+                    display: none;
+                    width:90px;
+                    line-height: 30px;
+                    background: #fff;
+                    color: #333;
+                    border: 1px solid #e6e6e6;
+                    z-index: 3;
+                }
+                .selectItem{
+                    padding: 0 10px;
+                }
+                .selectItem:hover{
+                    background: #E2ECFF;
+                }
+            }
+            .search{
+                position: absolute;
+                display: inline-block;
+                width:272px;
+                top: 20px;
+                left: 112px;
+                input{
+                    width:192px;
+                    padding: 0 10px;
+                    height:40px;
+                    border:1px solid rgba(230,230,230,1);
+                    border-radius: 4px 0 0 4px;
+                    box-sizing: border-box;
+                    outline: none;
+                    color: #333;
+                    font-size: 14px;
+                    
+                }
+                input:focus{
+                    border: 1px solid #58a6e7;
+                    outline: 0;
+                    -webkit-box-shadow:#58a6e7 0px 0px 2px;
+                    -moz-box-shadow: #58a6e7 0px 0px 2px;
+                    box-shadow: #58a6e7 0px 0px 2px;
+                }
+                input::-ms-clear{display:none;}
+                input::-webkit-input-placeholder{
+                    color: #ccc;
+                }
+                    
+        　　　　input:-moz-placeholder,textarea:-moz-placeholder{
+                    color: #ccc;
+                }
+        　　　　input::-moz-placeholder,textarea::-moz-placeholder{
+                    color: #ccc;
+                }
+        　　　　input:-ms-input-placeholder,textarea:-ms-input-placeholder{
+                    color: #ccc;
+                }
+                .searchBtn{
+                    position: absolute;
+                    cursor: pointer;
+                    display: inline-block;
+                    width:60px;
+                    height:40px;
+                    text-align: center;
+                    line-height: 40px;
+                    background:#5A8EEE;
+                    border-radius:0px 4px 4px 0px;
+                    color: #fff;
+                }
+                .tabNameList,.tabNameListNoSearch{
+                    position: relative;
+                    top: 5px;
+                    display: none;
+                    width:192px;
+                    max-height:200px;
+                    background: #fff;
+                    border:1px solid rgba(230,230,230,1);
+                    border-radius: 4px 0 0 4px;
+                    box-sizing: border-box;
+                    overflow-y: auto;
+                    z-index:2;
+                    li{
+                        height: 40px;
+                        line-height: 40px;
+                        padding: 0 10px;
+                        color: #333;
+                    }
+                    li:hover{
+                        background: #E2ECFF;
+                    }
+                    .nodeItem{
+                        cursor: pointer;
+                    }
+                }
+            }
+        }
+        .bottom{
+            background: #fff;
+            .tabList{
+                width: 100%;
+                height: 43px;
+                box-sizing: border-box;
+                border-bottom: 1px solid #E6E6E6;
+                position: relative;
+                padding: 0 10px;
+                .tabBox{
+                    padding: 0 20px 0 10px;
+                }
+                .tab{
+                    display: inline-block;
+                    height: 42px;
+                    line-height: 42px;
+                    margin: 0 20px 0 10px;
+                    font-size: 14px;
+                    color: #777;
+                    cursor: pointer;
+                }
+                .tab:hover{
+                    color: #5A8EEE;
+                }
+                .activeTab{
+                    font-size: 16px;
+                    color: #5A8EEE;
+                    font-weight: bold;
+                    border-bottom: 3px solid #5A8EEE;
+                    box-sizing: border-box;
+                }
+            }
+            .tabListShow{
+                border: 1px solid #5A8EEE;
+                // box-shadow:0px 7px 6px -2px #14274B;
+                border-bottom: 1px solid #E6E6E6;
+
+            }
+            .showTabList{
+                margin-right: 66px;
+                
+            }
+            .toggleArrow{
+                width: 11px;
+                position: absolute;
+                top: 18px;
+                right: 0px;
+            }
+            .toggleTab{
+                display: inline-block;
+                position: absolute;
+                font-size: 14px ;
+                color: #AAA;
+                line-height: 44px;
+                right: 20px;
+                top: 0;
+                cursor: pointer;
+                padding: 0 10px 0 0;
+            }
+            .toggleTabTxt{
+                margin-right: 3px;
+            }
+            .hideTabList{
+                position: relative;
+                background: #fff;
+                width: 100%;
+                z-index: 2;
+                display: none;
+                top: -2px;
+                left: -11px;
+                padding: 0 10px;
+                border: 1px solid #5A8EEE;
+                border-top: 0;
+                box-shadow:0px 7px 6px -2px rgba(20,39,75,0.2);
+            }
+            .radioList{
+                height: 60px;
+                line-height: 60px;
+                padding: 0 10px;
+            }
+            .radioItem{
+                font-size: 14px;
+                color: #333;
+                line-height: 16px;
+                margin-right: 20px;
+                cursor: pointer;
+            }
+            .iconRadio{
+                width: 14px;
+                position: relative;
+                top: 2px;
+            }
+            .iconSelect{
+                width: 16px;
+                top: 0px;
+                position: relative;
+            }
+           
+        }
+    }
+    .legendIcon{
+        position: absolute;
+        display: none;
+        width: 35px;
+        height: 22px;
+        bottom: 50px;
+        right: 5px;
+        background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
+    }
+    .legendIconImg{
+        width: 22px;
+        height: 22px;
+        border-radius: 50%;
+        position: absolute;
+        right: 10px;
+        top: 2px;
+        cursor: pointer;
+    }
+    .legendIconImg{
+        background: url('./../resources/images/iconSlideUp1.png') no-repeat;
+        background-size: 22px 22px;
+    }
+    .legendIconImg:hover{
+        background: url('./../resources/images/iconSlideUp1Hover.png') no-repeat;
+        background-size: 22px 22px;
+    }
+    .legendSlideUp{
+        background: url('./../resources/images/iconSlideDown1.png') no-repeat;
+        background-size: 22px 22px;
+    }
+    .legendSlideUp:hover{
+        background: url('./../resources/images/iconSlideDown1Hover.png') no-repeat;
+        background-size: 22px 22px;
+    }
+   .footer{
+       position: absolute;
+       width: 100%;
+       bottom: 10px;
+       text-align: center;
+       font-size: 12px;
+       color: #bbb;
+   }
+    .ztree{
+        overflow: auto;
+        padding: 0 10px;
+    }
+}

src/css/knowledgeTree.less

@@ -0,0 +1,296 @@
+.knowledgeTreeWrapper{
+    min-width: 1200px;
+    .title{
+        position: relative;
+        height: 40px;
+        line-height: 40px;
+        background-image: linear-gradient(to right, #5A8EEE , #7EABFF);
+        filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#1471da,endColorstr=#1C85FB);/*IE<9>*/
+        -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#1471da, endColorstr=#1C85FB)";/*IE8+*/
+    }
+    .titleTxt{
+        position: relative;
+        width: 1200px;
+        left: 50%;
+        margin-left: -600px;
+        color: #fff;
+        font-size: 14px;
+        padding-top: 4px;
+    }
+    .titleLogo{
+        position: relative;
+        top: -4px;
+        height: 20px;
+        margin: 0 10px 0 0;
+        vertical-align: unset;
+    }
+    .titleLogoShaiyifu{
+        top: 2px;
+        height: 30px;
+    }
+    .titleInfo{
+        position: relative;
+        vertical-align: unset;
+        display: inline-block;
+        top: -8px;
+        height: 40px;
+        color: #fff;
+        line-height: 40px;
+    }
+    .content{
+        position: relative;
+        width: 1200px;
+        left: 50%;
+        margin-left: -600px;
+        cursor: default;
+        height: 100%;
+    }
+    .left{
+        float: left;
+        background: #fff;
+        height: 100%;
+        margin: 10px 0 0 0;
+        position: relative;
+    }
+    .right{
+        // background: #fff;
+        width: 394px;
+        float: right;
+        height: 100%;
+        margin: 10px 0 0 0;
+        .top{
+            position: relative;
+            width:394px;
+            height:80px;
+            background:#FFFFFF;
+            border-radius:2px;
+            margin: 0 0 10px 0;
+            font-size: 14px;
+            .select{
+                display: inline-block;
+                width:92px;
+                height:40px;
+                background:#E2ECFF;
+                border-radius:4px;
+                margin: 20px 10px  10px;
+                position: relative;
+                cursor: pointer;
+                .selectedName{
+                    display: inline-block;
+                    width: 92px;
+                    height: 40px;
+                    line-height: 40px;
+                    color: #5A8EEE;
+                    position: relative;
+                    padding: 0 10px;
+                }
+                .iconSlide{
+                    width: 13px;
+                    position: absolute ;
+                    top: 16px;
+                    right: 10px;
+                }
+                .selectList{
+                    position: absolute;
+                    display: none;
+                    width:90px;
+                    line-height: 30px;
+                    background: #fff;
+                    color: #333;
+                    border: 1px solid #e6e6e6;
+                    z-index: 3;
+                }
+                .selectItem{
+                    padding: 0 10px;
+                }
+                .selectItem:hover{
+                    background: #E2ECFF;
+                }
+            }
+            .search{
+                position: absolute;
+                display: inline-block;
+                width:272px;
+                top: 20px;
+                left: 112px;
+                input{
+                    width:192px;
+                    padding: 0 10px;
+                    height:40px;
+                    border:1px solid rgba(230,230,230,1);
+                    border-radius: 4px 0 0 4px;
+                    box-sizing: border-box;
+                    outline: none;
+                    color: #333;
+                    font-size: 14px;
+                    
+                }
+                input:focus{
+                    border: 1px solid #58a6e7;
+                    outline: 0;
+                    -webkit-box-shadow:#58a6e7 0px 0px 2px;
+                    -moz-box-shadow: #58a6e7 0px 0px 2px;
+                    box-shadow: #58a6e7 0px 0px 2px;
+                }
+                input::-ms-clear{display:none;}
+                input::-webkit-input-placeholder{
+                    color: #ccc;
+                }
+                    
+        　　　　input:-moz-placeholder,textarea:-moz-placeholder{
+                    color: #ccc;
+                }
+        　　　　input::-moz-placeholder,textarea::-moz-placeholder{
+                    color: #ccc;
+                }
+        　　　　input:-ms-input-placeholder,textarea:-ms-input-placeholder{
+                    color: #ccc;
+                }
+                .searchBtn{
+                    position: absolute;
+                    cursor: pointer;
+                    display: inline-block;
+                    width:60px;
+                    height:40px;
+                    text-align: center;
+                    line-height: 40px;
+                    background:#5A8EEE;
+                    border-radius:0px 4px 4px 0px;
+                    color: #fff;
+                }
+                .tabNameList,.tabNameListNoSearch{
+                    position: relative;
+                    top: 5px;
+                    display: none;
+                    width:192px;
+                    max-height:200px;
+                    background: #fff;
+                    border:1px solid rgba(230,230,230,1);
+                    border-radius: 4px 0 0 4px;
+                    box-sizing: border-box;
+                    overflow-y: auto;
+                    z-index:2;
+                    li{
+                        height: 40px;
+                        line-height: 40px;
+                        padding: 0 10px;
+                        color: #333;
+                    }
+                    li:hover{
+                        background: #E2ECFF;
+                    }
+                    .nodeItem{
+                        cursor: pointer;
+                    }
+                }
+            }
+        }
+        .bottom{
+            background: #fff;
+            .tabList{
+                width: 100%;
+                height: 43px;
+                box-sizing: border-box;
+                border-bottom: 1px solid #E6E6E6;
+                position: relative;
+                padding: 0 10px;
+                .tabBox{
+                    padding: 0 20px 0 10px;
+                }
+                .tab{
+                    display: inline-block;
+                    height: 42px;
+                    line-height: 42px;
+                    margin: 0 20px 0 10px;
+                    font-size: 14px;
+                    color: #777;
+                    cursor: pointer;
+                }
+                .tab:hover{
+                    color: #5A8EEE;
+                }
+                .activeTab{
+                    font-size: 16px;
+                    color: #5A8EEE;
+                    font-weight: bold;
+                    border-bottom: 3px solid #5A8EEE;
+                    box-sizing: border-box;
+                }
+            }
+            .tabListShow{
+                border: 1px solid #5A8EEE;
+                border-bottom: 1px solid #E6E6E6;
+            }
+            .showTabList{
+                margin-right: 66px;
+            }
+            .toggleArrow{
+                width: 11px;
+                position: absolute;
+                top: 18px;
+                right: 0px;
+            }
+            .toggleTab{
+                display: inline-block;
+                position: absolute;
+                font-size: 14px ;
+                color: #AAA;
+                line-height: 44px;
+                right: 20px;
+                top: 0;
+                cursor: pointer;
+                padding: 0 10px 0 0;
+            }
+            .toggleTabTxt{
+                margin-right: 3px;
+            }
+            .hideTabList{
+                position: relative;
+                background: #fff;
+                width: 100%;
+                z-index: 2;
+                display: none;
+                top: -2px;
+                left: -11px;
+                padding: 0 10px;
+                border: 1px solid #5A8EEE;
+                border-top: 0;
+                box-shadow:0px 7px 6px -2px rgba(20,39,75,0.2);
+            }
+            .radioList{
+                height: 60px;
+                line-height: 60px;
+                padding: 0 10px;
+            }
+            .radioItem{
+                font-size: 14px;
+                color: #333;
+                line-height: 16px;
+                margin-right: 20px;
+                cursor: pointer;
+            }
+            .iconRadio{
+                width: 14px;
+                position: relative;
+                top: 2px;
+            }
+            .iconSelect{
+                width: 16px;
+                top: 0px;
+                position: relative;
+            }
+        }
+    }
+    .footer{
+        position: absolute;
+        width: 100%;
+        bottom: 0px;
+        text-align: center;
+        font-size: 12px;
+        color: #bbb;
+    }
+    .ztree{
+        overflow: auto;
+        padding: 0 10px;
+    }
+}

src/css/medicalTermMap.less

@@ -0,0 +1,261 @@
+
+.knowledgeMapWrapper {
+    min-width: 1200px;
+    /* .title{
+        position: relative;
+        height: 40px;
+        line-height: 40px;
+        background-image: linear-gradient(to right, #5A8EEE , #7EABFF);
+       filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#1471da,endColorstr=#1C85FB);!*IE<9>*!
+        -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#1471da, endColorstr=#1C85FB)";!*IE8+*!
+
+    }
+    .titleTxt{
+        position: relative;
+        width: 1200px;
+        left: 50%;
+        margin-left: -600px;
+        color: #fff;
+        font-size: 14px;
+    }
+    .titleLogo{
+        position: relative;
+        top: -2px;
+        height: 20px;
+        margin: 0 20px 0 0;
+    }
+    .titleLogoShaiyifu{
+        top: 5px;
+        height: 30px;
+    }
+    .titleInfo{
+        position: relative;
+        display: inline-block;
+        top: -4px;
+        height: 40px;
+        line-height: 40px;
+    }*/
+    .title{
+        position: fixed;
+        top: 0;
+        z-index: 10;
+    }
+    .content {
+        position: relative;
+        width: 1200px;
+        left: 50%;
+        margin: 54px 0 0 -600px;
+        cursor: default;
+        height: 100%;
+        font-size: 14px;
+    }
+
+    .top {
+        background: #fff;
+        position: relative;
+        margin: 10px 0;
+    }
+
+    .tabList {
+        padding: 0 20px;
+        height: 44px;
+        border-bottom: 1px solid #E6E6E6;
+        color: #777;
+    }
+
+    .tabItem {
+        display: inline-block;
+        padding: 0 15px;
+        cursor: pointer;
+        height: 32px;
+        line-height: 32px;
+        position: relative;
+        top: 12px;
+    }
+
+    .infoTxt {
+        min-height: 33px;
+        width: 1160px;
+        font-size: 14px;
+        color: #333;
+        resize: none;
+        line-height: 20px;
+        // outline: none;
+        padding: 10px;
+        background: #F7F8FA;
+        border: 1px solid #ccc;
+        box-sizing: border-box;
+        margin: 20px;
+    }
+
+    .btnBox {
+        text-align: center;
+        padding: 0 0 20px 0;
+    }
+
+    .submit {
+        display: inline-block;
+        padding: 8px 36px;
+        background: #5A8EEE;
+        color: #fff;
+        border-radius: 4px;
+        cursor: pointer;
+    }
+
+    .termResult {
+        margin: 10px 0 0 0;
+        padding: 0 0 0 20px;
+    }
+
+    .mapResultTitle,
+    .graphTitle {
+        font-size: 16px;
+        font-weight: 600;
+        color: #333;
+        line-height: 44px;
+    }
+
+    .mapResult {
+        margin: 0 0 20px 0;
+        color: #AAA;
+    }
+    .noResult{
+        color: #AAA;
+    }
+
+    .bottom {
+        margin: 0 0 10px 0;
+        background: #fff;
+        padding-bottom: 40px;
+        position: relative;
+    }
+    .graphTitle{
+        padding: 0 20px;
+        border-top: 1px solid #E6E6E6;
+    }
+    .mapWrapper{
+        position: relative;
+        margin: 0px 0 0 -398px;
+        left: 50%;
+    }
+    .mainCont{
+        position: relative;
+    }
+    .emptyBox{
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background: #fff;
+        left: 0;
+        top: 0;
+        text-align: center;
+        z-index: 2;
+        // display: none;
+        img,p{
+            position: relative;
+            top: 150px;
+        }
+        img{
+            width: 140px;
+        }
+        p{
+            color:#AAA;
+            text-indent: 10px;
+            top: 155px;
+        }
+    }
+    .emptyBox2{
+        position: absolute;
+        display: none;
+        width: 100%;
+        height: 100%;
+        background: #fff;
+        left: 0;
+        top: 0;
+        text-align: center;
+        z-index: 2;
+        p{
+            position: relative;
+            color:#AAA;
+            text-indent: 10px;
+            top: 155px;
+        }
+    }
+    .legendBox{
+        position: relative;
+        width: 796px;
+        left: 50%;
+        margin-left: -398px;
+    }
+    .legendIcon{
+        position: absolute;
+        display: none;
+        width: 35px;
+        height: 22px;
+        bottom: 0px;
+        right: 5px;
+        background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
+    }
+    .legendIconImg{
+        width: 22px;
+        height: 22px;
+        border-radius: 50%;
+        position: absolute;
+        right: 10px;
+        top: 2px;
+        cursor: pointer;
+    }
+    .legendIconImg{
+        background: url('./../resources/images/iconSlideDown1.png') no-repeat;
+        background-size: 22px 22px;
+    }
+    .legendIconImg:hover{
+        background: url('./../resources/images/iconSlideDown1Hover.png') no-repeat;
+        background-size: 22px 22px;
+    }
+    .legendSlideUp{
+        background: url('./../resources/images/iconSlideUp1.png') no-repeat;
+        background-size: 22px 22px;
+    }
+    .legendSlideUp:hover{
+        background: url('./../resources/images/iconSlideUp1Hover.png') no-repeat;
+        background-size: 22px 22px;
+    }
+    .footer {
+        position: absolute;
+        width: 100%;
+        bottom: 10px;
+        text-align: center;
+        font-size: 12px;
+        color: #bbb;
+    }
+
+    .disabled {
+        opacity: 0.5;
+        filter: "alpha(opacity=50)";
+        filter: alpha(opacity=50);
+        cursor: not-allowed;
+    }
+
+    .activeTab {
+        font-size: 16px;
+        color: #5A8EEE;
+        background:linear-gradient(180deg,rgba(126,171,255,1) 0%,rgba(90,142,238,1) 100%);
+        border-radius:6px 6px 0px 0px;
+        box-sizing: border-box;
+        color: #fff;
+    }
+    .resultItem{
+        cursor: pointer;
+        display: inline-block;
+        padding: 5px 13px;
+        border: 1px solid #AAA;
+        margin: 20px 20px 0 0;
+        border-radius:4px;
+    }
+    .resultActive{
+        background: #EEF4FF;
+        color: #5A8EEE;
+        border: 1px solid #5A8EEE;
+    }
+}

src/css/participle.less

@@ -0,0 +1,447 @@
+.participleWrappper{
+   width: 100%;
+    min-width: 1200px;
+    /* .title{
+        width: 100%;
+        min-width: 1200px;
+        position: relative;
+        height: 40px;
+        line-height: 40px;
+        background-image: linear-gradient(to right, #5A8EEE , #7EABFF);
+        filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#1471da,endColorstr=#1C85FB);!*IE<9>*!
+        -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#1471da, endColorstr=#1C85FB)";!*IE8+*!
+    }
+    .titleTxt{
+        position: relative;
+        width: 1200px;
+        left: 50%;
+        margin-left: -600px;
+        color: #fff;
+        font-size: 14px;
+    }
+    .titleLogo{
+        position: relative;
+        top: -2px;
+        height: 20px;
+        margin: 0 20px 0 0;
+    }
+    .titleLogoShaiyifu{
+        top: 5px;
+        height: 30px;
+    }
+    .titleInfo{
+        position: relative;
+        display: inline-block;
+        top: -4px;
+        height: 40px;
+        color: #fff;
+        line-height: 40px;
+    }*/
+    .content{
+        position: relative;
+        width: 1200px;
+        left: 50%;
+        margin:10px 0 0  -600px;
+        cursor: default;
+        height: 100%;
+        border: 1px solid #f4f4f4;
+        border-radius:2px;
+        // margin: 10px 25px;  
+        .contentTitle{
+            font-size: 16px;
+            height: 44px;
+            line-height: 44px;
+            border-bottom: 1px solid #E6E6E6;
+            font-weight:600;
+            color: #333;
+            position: relative;
+            img {
+                position: absolute;
+                right: 0;
+                top: 12px;
+                width: 20px;
+                height: 20px;
+            }
+            #toggleImg, #toggleImgs{
+                position: absolute;
+                color: #5A8EEE;
+                display: block;
+                top: 6px;
+                width: 48px;
+                text-align: center;
+                height: 30px;
+                line-height: 28px;
+                cursor: pointer;
+                font-size: 14px;
+                font-weight: 400;
+                border: 1px solid #5A8EEE;
+                box-sizing: border-box;
+                display: none;
+            }
+            #toggleImg {
+                right: 47px;
+                border-radius: 4px 0 0 4px;
+                // display: none;
+            }
+            #toggleImgs {
+                right: 0;
+                border-radius: 0 4px 4px 0;
+                // display: block;
+            }
+            #toggleImg.activeBtn,#toggleImgs.activeBtn{
+                background: #5A8EEE;
+                color: #fff;
+            }
+        }
+        .contentInfoBox{
+            width: 1160px;
+            padding: 0 20px;
+            background: #fff;
+            margin: 0 0 10px 0;
+            position: relative;
+        }
+        .infoBox{
+            display: block;
+        }
+        .infoTxt{
+            min-height: 33px;
+            width: 1160px;
+            font-size: 14px;
+            color: #333;
+            resize: none;
+            line-height: 18px;
+            // outline: none;
+            padding: 10px;
+            background: #F7F8FA;
+            border: 1px solid #ccc;
+            box-sizing: border-box;
+            margin: 15px 0 0 0;
+        }
+        .infoTxt:focus{
+            border: 1px solid #58a6e7;
+            outline: 0;
+            -webkit-box-shadow:#58a6e7 0px 0px 2px;
+            -moz-box-shadow: #58a6e7 0px 0px 2px;
+            box-shadow: #58a6e7 0px 0px 2px;
+        }
+            input::-webkit-input-placeholder{
+                color: #ccc;
+            }
+                
+    　　　　input:-moz-placeholder,textarea:-moz-placeholder{
+                color: #ccc;
+            }
+    　　　　input::-moz-placeholder,textarea::-moz-placeholder{
+                color: #ccc;
+            }
+    　　　　input:-ms-input-placeholder,textarea:-ms-input-placeholder{
+                color: #ccc;
+            }
+
+        .btnBox{
+            height: 36px;
+            padding: 20px 0;
+            position: relative;
+        }
+        .btn{
+            position: absolute;
+            left: 50%;
+            margin-left: -48px;
+            background-color: #5A8EEE;
+            border-color: #5A8EEE;
+            color: #fff;
+            padding: 9px 20px;
+            text-align: center;
+            border-radius:4px;
+            font-size: 14px;
+            display: inline-block;
+            cursor: pointer;
+        }
+        .example-btn{
+            color: #5A8EEE;
+            text-align: center;
+            border-radius:4px;
+            font-size: 16px;
+            font-weight: 500;
+            display: inline-block;
+            margin: 0 20px 0 0;
+            cursor: pointer;
+            position: absolute;
+            right: 0;
+        }
+        // .example-btn:hover{
+        //     background-color: #5A8EEE;
+        //     border-color: #5A8EEE;
+        //     color: #fff;
+        // }
+        .resultBox{
+            white-space: pre-wrap;
+            min-height: 155px;
+            line-height: 21px;
+            padding: 20px 0;
+            width: 1160px;
+            position: relative;
+            font-size: 14px;
+            // css保留换行符
+            // white-space: pre-line;
+        }
+        .star{
+            color: #000;
+        }
+        .entryItem{
+            display: inline-block;
+            color: blue;
+            position: relative;
+            border-bottom: 1px solid blue;
+        }
+        .type{
+            position: absolute;
+            top: -35px;
+            white-space: nowrap;
+            left: 50%;
+            transform: translateX(-50%);
+            display: inline-block;
+            background: #7F7F7F;
+            padding: 5px;
+            font-size: 14px;
+            color: #fff;
+            display: none;
+            border-radius:4px;
+        }
+        .trangle{
+            position: absolute;
+            bottom: -12px;
+            left: 50%;
+            margin-left: -6px;
+            width: 0; 
+            height: 0;
+            border-width: 6px;
+            border-style: solid;
+            border-color:#7F7F7F transparent transparent transparent;
+        }
+     
+        .entryItem:hover{
+            span{
+                display: inline-block;
+            }
+        }
+        .tableBox{
+            min-height: 165px;
+            position: relative;
+            padding: 0 0 30px 0;
+        }
+        table{
+            display: none;
+            width: 1160px;
+            border: 1px solid #E6E8F0;
+            box-sizing: border-box;
+            border-collapse: collapse;
+            font-size: 14px;
+            thead{
+                tr,td{
+                    border: none;
+                }
+                
+                background: #EFF0F9;
+                top: 0;
+                width: 1160px;
+                display:table;
+                table-layout:fixed;
+
+            }
+            tbody{
+                display: block;
+                width: 1160px;
+                max-height:570px;
+                overflow-x:hidden;
+                overflow-y:auto;
+                text-align: center;
+                tr{
+                    width: 1160px;
+                    display:table;
+                    table-layout:fixed;
+                }
+            }
+        }
+        tr,td{
+            border: 1px solid #E6E8F0;
+            line-height: 36px;
+            height: 37px;
+        }
+        .tableTitle{
+            width: 100%;
+            font-size: 14px;
+            font-weight:600;
+            color: #333;
+            padding: 20px 0 10px;
+            display: none;
+        }
+        .entry1,.entry2,.relationType{
+            text-align: center;
+        }
+        .disabled{
+            opacity: 0.5;
+            filter: "alpha(opacity=50)";
+            filter: alpha(opacity=50);
+        }
+        .analying{
+            display: none;
+        }
+        .empty{
+            position: absolute;
+            // display: none;
+            width: 120px;
+            height: 140px;
+            top: 50%;
+            left: 50%;
+            margin: -50px 0 0 -51px;
+            // display: none;
+            .emptyImg{
+                position: relative;
+                width: 100px;
+                left: 10px;
+            }
+            .emptyTxt{
+                width: 120px;
+                font-size:12px;
+                margin: 20px 0 0 0;
+                text-align: center;
+                color: #aaa;
+            }
+        }
+    }
+
+}
+.example{
+    height: 48px;
+    position: relative;
+    line-height: 48px;
+    text-indent: 15px;
+    cursor: pointer;
+    color: #000;
+    font-size: 14px;
+    &:hover,&.selected{
+        background: #F0F5FF;
+        
+    }
+}
+.exampleInfo{
+    background: #F0F5FF;
+    padding: 15px;
+    font-size: 14px;
+    line-height: 21px;
+    display: none;
+}
+.exampleBtn{
+    display: inline-block;
+    width:60px;
+    height:28px;
+    line-height: 28px;
+    border-radius:14px;
+    border:1px solid #5A8EEE;
+    color: #5A8EEE;
+    position: absolute;
+    right: 75px;
+    top: 9px;
+}
+.iconSlide{
+    position: absolute;
+    width: 14px;
+    top: 20px;
+    right: 15px;
+}
+.footer{
+    position: fixed;
+    width:1200px;
+    height: 20px;
+    bottom: 0px;
+    text-align: center;
+    font-size: 12px;
+    color: #bbb;
+    background: #fff;
+}
+
+
+#svg > svg {
+    width: 100%;
+}
+
+#svg .poplar-annotation-content {
+    // font-family: "PingFang SC", serif;
+    font-size: 16px;
+}
+/* Label */
+#svg .poplar-annotation-label {
+    // font-family: "PingFang SC", serif;
+    font-size: 12px;
+}
+#svg .poplar-annotation-label rect{
+    rx: 4px;
+    fill: #d8e5ff;
+    color: #cbddff;
+}
+#svg .poplar-annotation-label g rect{
+    rx: 4px;
+    fill: #d8e5ff;
+    stroke: #fff;
+}
+#svg .poplar-annotation-label.hover {
+    
+}
+#svg .poplar-annotation-label.hover rect{
+    fill: #93b6f9;
+}
+/* Connection */
+#svg .poplar-annotation-connection {
+    // font-family: "PingFang SC", serif;
+    font-size: 11px;
+}
+/* 例如根元素的id是example时，需要 */
+/* 单独的.poplar-annotation-connection-line不会生效 */
+#svg .poplar-annotation-connection-line {
+    stroke: #FEAC41;
+}
+
+#svg .poplar-annotation-connection-line.hover {
+    stroke: #5A8EEE;
+}
+#svg {
+    display: none;
+}
+.showCheck {
+    display: none;
+    width: 700px;
+    // min-height: 100px;
+    // border: 1px solid #ccc;
+    position: fixed;
+    top: 30%;
+    left: 50%;
+    margin-left: -350px;
+    background-color: #fff;
+    img {
+        width: 15px;
+        height: 15px;
+        position: absolute;
+        top: -7px;
+        right: -7px;
+        display: inline-block;
+        cursor: pointer;
+        background-color: #fff;
+    }
+    table {
+        width: 100%;
+        border-collapse: collapse;
+        .head {
+            background-color: #EFF0F9;
+        }
+        tr {
+
+        }
+        td {
+            border: 1px solid #ccc;
+            font-size: 14px;
+            text-align: center;
+            padding: 5px 10px;
+        }
+    }
+}

src/css/qaPage.less

@@ -0,0 +1,148 @@
+.wrappper{
+  width: 100%;
+  min-width: 1200px;
+  .content{
+    position: relative;
+    width: 1200px;
+    left: 50%;
+    margin: 10px 0 0 -600px;
+    cursor: default;
+    height: 100%;
+    border: 1px solid #f4f4f4;
+    border-radius: 2px;
+  }
+}
+.contentTitle{
+  font-size: 16px;
+  height: 44px;
+  line-height: 44px;
+  border-bottom: 1px solid #E6E6E6;
+  font-weight: 600;
+  color: #333;
+  position: relative;
+}
+.example{
+  color: #777;
+  font-size: 12px;
+  line-height: 18px;
+  margin-top: 15px;
+}
+.contentInfoBox{
+  width: 1160px;
+  padding: 0 20px;
+  background: #fff;
+  margin: 0 0 10px 0;
+  position: relative;
+}
+.infoBox{
+  display: block;
+}
+.infoTxt{
+  min-height: 33px;
+  width: 1160px;
+  font-size: 14px;
+  color: #333;
+  resize: none;
+  line-height: 18px;
+  font-family: "Microsoft Yahei", Verdana, Simsun, "Segoe UI Web Light", "Segoe UI Light", "Segoe UI Web Regular", "Segoe UI", "Segoe UI Symbol", "Helvetica Neue", Arial;
+  // outline: none;
+  padding: 10px;
+  background: #F7F8FA;
+  border: 1px solid #ccc;
+  box-sizing: border-box;
+  margin: 15px 0 0 0;
+}
+.infoTxt:focus{
+  border: 1px solid #58a6e7;
+  outline: 0;
+  -webkit-box-shadow:#58a6e7 0px 0px 2px;
+  -moz-box-shadow: #58a6e7 0px 0px 2px;
+  box-shadow: #58a6e7 0px 0px 2px;
+}
+.loading{
+  color: #aaa;
+  text-align: center;
+  margin-top:50px;
+  font-size:14px;
+}
+.disabled{
+  opacity: 0.5;
+  filter: "alpha(opacity=50)";
+  filter: alpha(opacity=50);
+}
+input::-webkit-input-placeholder{
+  color: #ccc;
+}
+
+　　　　input:-moz-placeholder,textarea:-moz-placeholder{
+  color: #ccc;
+}
+　　　　input::-moz-placeholder,textarea::-moz-placeholder{
+  color: #ccc;
+}
+　　　　input:-ms-input-placeholder,textarea:-ms-input-placeholder{
+  color: #ccc;
+}
+
+.btnBox{
+  height: 36px;
+  padding: 20px 0;
+  position: relative;
+}
+.btn{
+  position: absolute;
+  width: 60px;
+  left: 50%;
+  margin-left: -48px;
+  background-color: #5A8EEE;
+  border-color: #5A8EEE;
+  color: #fff;
+  padding: 9px 20px;
+  text-align: center;
+  border-radius:4px;
+  font-size: 14px;
+  display: inline-block;
+  cursor: pointer;
+}
+.resultBox{
+  white-space: pre-wrap;
+  min-height: 155px;
+  line-height: 21px;
+  padding: 10px 0 20px;
+  width: 1160px;
+  position: relative;
+  font-size: 14px;
+  color: #333;
+  // css保留换行符
+  // white-space: pre-line;
+}
+.empty{
+  position: absolute;
+  // display: none;
+  width: 120px;
+  height: 140px;
+  top: 50%;
+  left: 50%;
+  margin: -50px 0 0 -51px;
+  // display: none;
+  .emptyImg{
+    position: relative;
+    width: 100px;
+    left: 10px;
+  }
+  .emptyTxt{
+    width: 120px;
+    font-size:12px;
+    margin: 20px 0 0 0;
+    text-align: center;
+    color: #aaa;
+  }
+}
+.footer{
+  position: absolute;
+  width: 100%;
+  bottom: 10px;
+  text-align: center;
+  font-size: 12px;
+  color: #bbb;
+}

src/html/knowledgeGraph.html

@@ -0,0 +1,99 @@
+<!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 href="../resources/favicon.ico" rel="shortcut icon">
+	<!-- <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 wrappper">
+		<div class="title">
+			<div class="titleTxt">
+				<img class="titleLogo ltLogo" src="./images/logo.png" alt="logo">
+				 <img class="titleLogo titleLogoShaiyifu" src="./images/logo_shaoyifu.png" alt="logo">
+				<span class="titleInfo">|&nbsp;&nbsp;医学知识图谱</span>
+			</div>
+		</div>
+		<div class="content clearfix">
+			<div class="left">
+				<div id="main" class="mapWrapper" style="width: 796px;height:600px;cursor: pointer;"></div>
+				<div class="legendIcon">
+					<div class="legendIconImg"></div>
+				</div>
+				
+				 <div class="footer ltLogo">
+					杭州朗通信息技术有限公司 & 浙江大学医学院附属邵逸夫医院&nbsp;&nbsp;&nbsp;联合开发
+				</div>
+			</div>
+			<div class="right">
+				<div class="top">
+					<div class="select">
+						<span class="selectedName">疾病</span>
+						<img class="iconSlide" src="./images/iconSlideDown.png" alt="iconSlide">
+						<ul class="selectList">
+						<li class="selectItem" title="疾病" data-id="疾病">疾病</li>
+						<li class="selectItem" title="药品" data-id="药品通用名">药品</li>
+						<li class="selectItem" title="症状" data-id="症状">症状</li>
+						<li class="selectItem" title="手术和操作" data-id="手术和操作">手术和操作</li>
+						<li class="selectItem" title="实验室检查" data-id="实验室检查">实验室检查</li>
+						<li class="selectItem" title="辅助检查" data-id="辅助检查">辅助检查</li>
+					</ul>
+					</div>
+					<div class="search">
+						<input type="text" id="searchInp" placeholder="搜索疾病名称" name="" autocomplete="off"><span
+							class="searchBtn" id="searchBtn">搜索</span>
+						<ul class="tabNameList"></ul>
+						<ul class="tabNameListNoSearch">
+							<li class="ellipsis">请输入内容</li>
+						</ul>
+					</div>
+				</div>
+				<div class="bottom">
+					<div class="tabList" id="tabList">
+						<div class="showTabList">
+							<!-- <span class="tab diagnose activeTab" data-id="疾病">疾病</span>
+							<span  class="tab drug"  data-id="药品通用名">药品</span>
+							<span  class="tab symptom" data-id="症状">症状</span>
+							<span  class="tab operation"  data-id="手术和操作">手术和操作</span> -->
+						</div>
+						<div class="toggleTab">
+							<span class="toggleTabTxt">展开</span>
+							<img class="toggleArrow" src="./images/iconDown.png" alt="">
+						</div>
+						<div class="hideTabList">
+							<!-- <span  class="tab lab" data-id="实验室检查">实验室检查</span>
+							<span  class="tab examination"  data-id="辅助检查">辅助检查</span> -->
+						</div>
+					
+					</div>
+					
+					<div class="tabBottom">
+						<div class="radioList">
+							<span class="radioItem ICD10" data-type="1" >
+								<img class="iconRadio" src="/images/radioSelect.png" alt="iconRadio">
+								ICD10
+							</span>
+							<span class="radioItem dept" data-type="2" >
+								<img class="iconRadio" src="/images/radioUnSelect.png" alt="iconRadio">
+								科室
+							</span>
+						</div>
+						<div id="tree" class="ztree"></div>
+					</div>
+					
+				</div>
+			</div>
+			
+		</div>
+		
+	</div>
+
+</body>
+
+</html>

src/html/knowledgeTree.html

@@ -0,0 +1,90 @@
+<!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 href="../resources/favicon.ico" rel="shortcut icon">
+  <!-- <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="knowledgeTreeWrapper wrappper">
+      <div class="title">
+      
+        <div class="titleTxt">
+          <img class="titleLogo ltLogo" src="./images/logo.png" alt="logo">
+           <img class="titleLogo titleLogoShaiyifu" src="./images/logo_shaoyifu.png" alt="logo">
+          <span class="titleInfo">|&nbsp;&nbsp;描述框架</span>
+      </div>
+      <div class="content clearfix">
+        <div class="left">
+          <div id="main" class="mapWrapper" style="width: 796px;height:600px;cursor: pointer;"></div>
+           <div class="footer ltLogo">
+            杭州朗通信息技术有限公司 & 浙江大学医学院附属邵逸夫医院&nbsp;&nbsp;&nbsp;联合开发
+          </div>
+        </div>
+        <div class="right">
+          <div class="top">
+            <div class="select">
+              <span class="selectedName">疾病</span>
+              <img class="iconSlide" src="./images/iconSlideDown.png" alt="iconSlide">
+              <ul class="selectList">
+                <li class="selectItem" data-id="疾病">疾病</li>
+                <li class="selectItem" data-id="药品通用名">药品</li>
+                <li class="selectItem" title="症状" data-id="症状">症状</li>
+                <li class="selectItem" title="手术和操作" data-id="手术和操作">手术和操作</li>
+                <li class="selectItem" title="实验室检查" data-id="实验室检查">实验室检查</li>
+                <li class="selectItem" title="辅助检查" data-id="辅助检查">辅助检查</li>
+              </ul>
+            </div>
+            <div class="search">
+                <input type="text" id="searchInp" placeholder="搜索疾病名称" name="" autocomplete="off" ><span class="searchBtn" id="searchBtn">搜索</span>
+                <ul class="tabNameList"></ul>
+                <ul class="tabNameListNoSearch"><li class="ellipsis">请输入内容</li></ul>
+            </div>
+          </div>
+          <div class="bottom">
+             <div class="tabList" id="tabList">
+              <div class="showTabList">
+                <!-- <span class="tab diagnose activeTab" data-id="疾病">疾病</span>
+                <span  class="tab drug"  data-id="药品通用名">药品</span>
+                <span  class="tab symptom" data-id="症状">症状</span>
+                <span  class="tab operation"  data-id="手术和操作">手术和操作</span> -->
+              </div>
+              <div class="toggleTab">
+                <span class="toggleTabTxt">展开</span>
+                <img class="toggleArrow" src="./images/iconDown.png" alt="">
+              </div>
+              <div class="hideTabList">
+                <!-- <span  class="tab lab" data-id="实验室检查">实验室检查</span>
+                <span  class="tab examination"  data-id="辅助检查">辅助检查</span> -->
+              </div>
+            
+            </div>
+            <div class="tabBottom">
+              <div class="radioList">
+                <span class="radioItem ICD10" data-type="1">
+                  <img class="iconRadio" src="/images/radioSelect.png" alt="iconRadio">
+                  ICD10
+                </span>
+                <span class="radioItem dept" data-type="2">
+                  <img class="iconRadio" src="/images/radioUnSelect.png" alt="iconRadio">
+                  科室
+                </span>
+              </div>
+              <div id="tree" class="ztree"></div>
+            </div>
+           
+
+          </div>
+        </div>  
+      </div>
+  </div>
+
+</body>
+
+</html>

src/html/medicalTermMap.html

@@ -0,0 +1,78 @@
+<!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 href="../resources/favicon.ico" rel="shortcut icon">
+	<!-- <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 wrappper">
+		<div class="title">
+			<div class="titleTxt">
+				<img class="titleLogo ltLogo" src="./images/logo.png" alt="logo">
+				 <img class="titleLogo titleLogoShaiyifu" src="./images/logo_shaoyifu.png" alt="logo">
+				<span class="titleInfo">|&nbsp;&nbsp;医学术语映射</span>
+			</div>
+		</div>
+		<div class="content clearfix">
+            <div class="top">
+                <div class="termInput">
+                    <ul class="tabList">
+                        <li class="tabItem activeTab" title="疾病"  data-type="disease" data-name="疾病">疾病</li>
+						<!-- <li class="tabItem" title="药品"  data-type="drug" data-name="药品通用名">药品</li>
+						<li class="tabItem" title="症状" data-type="symptom" data-name="症状">症状</li>
+						<li class="tabItem" title="手术和操作" data-type="operation" data-name="手术和操作">手术和操作</li>
+						<li class="tabItem" title="实验室检查" data-type="lis" data-name="实验室检查">实验室检查</li>
+						<li class="tabItem" title="辅助检查" data-type="pacs" data-name="辅助检查">辅助检查</li> -->
+                    </ul>
+                    <textarea name="" id="infoTxt" class="infoTxt" cols="30" rows="5" placeholder="请在此输入内容…"></textarea>
+                </div>
+                <div class="btnBox">
+                    <span class="submit" id="submit">提交</span>
+                </div>
+               
+            </div>
+           
+			<div class="bottom">
+				<div class="termResult">
+                    <p class="mapResultTitle">
+                        标准词映射结果:
+                    </p>
+                    <div class="mapResult noResult">暂无结果～</div>
+                </div>
+				<p class="graphTitle">图谱映射结果:</p>
+				
+				<div class="mainCont">
+					<div class="emptyBox">
+						<img src ='./images/empty2.png'>   
+						<p>暂无结果~</p>
+					</div>
+					<div class="emptyBox2">
+						<p>正在加载中~</p>
+					</div>
+					<div id="main" class="mapWrapper" style="width: 796px;height:600px;cursor: pointer;"></div>
+					<div class="legendBox">
+						<div class="legendIcon">
+							<div class="legendIconImg legendSlideUp"></div>
+						</div>
+					</div>
+					
+				</div>
+				 <div class="footer ltLogo">
+					杭州朗通信息技术有限公司 & 浙江大学医学院附属邵逸夫医院&nbsp;&nbsp;&nbsp;联合开发
+				</div>
+			</div>
+			
+		</div>
+		
+	</div>
+
+</body>
+
+</html>

src/html/participle.html

@@ -0,0 +1,96 @@
+<!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 href="../resources/favicon.ico" rel="shortcut icon">
+</head>
+
+<body>
+	<div class="participleWrappper wrappper">
+		<div class="title">
+			<div class="titleTxt">
+				<img class="titleLogo ltLogo" src="./images/logo.png" alt="logo">
+				 <img class="titleLogo titleLogoShaiyifu" src="./images/logo_shaoyifu.png" alt="logo">
+				<span class="titleInfo">|&nbsp;&nbsp;电子病历信息抽取</span>
+			</div>
+		</div>
+		<div class="content">
+			<div class="contentInfoBox">
+				<p class="contentTitle">病历（现病史）<span class="example-btn" id="showEgBtn">引用示例</span></p>
+				<div class="exampleList pop-box">
+					<!-- <div class="pop-cover"></div> -->
+					<div class="pop-container">
+						<div class="pop-title">
+							<h3>示例列表</h3>
+							<img class="pop-close" src="./images/iconClose3.png" alt="">
+						</div>
+						<div class="pop-body"></div>
+						<!-- <div class="pop-footer">
+							<button class="pop-ok">确定</button>
+							<button class="pop-cancel">取消</button>
+						</div> -->
+					</div>
+				</div>
+				<div class="infoBox">
+					<textarea name="" id="infoTxt" class="infoTxt" cols="30" rows="10" placeholder="请输入病例内容......"></textarea>
+				</div>
+				<div class="btnBox clearfix">
+					<span class="btn" id="analy">开始分析</span>
+				</div>
+			</div>
+			<div class="contentInfoBox">
+				<p class="contentTitle">实体抽取
+					<span id="toggleImg" class="activeBtn">文本</span><span id="toggleImgs" class="">图像</span> 
+					<!-- <img id="toggleImg" src="./images/icon_tu.png" alt="" title="文本模式"><img title="图像模式" id="toggleImgs" src="./images/icon_wenzi.png" alt=""> -->
+				</p>
+				<div class="resultBox">
+					<div class="empty">
+						<img class="emptyImg" src="./images/empty2.png" alt="您提交的信息暂未收录">
+						<p class="emptyTxt">暂无实体抽取数据～</p>
+					</div>
+					<div class="resultBoxInfo" id="resultBoxInfo"></div>
+					<div class="resultBoxInfo" id="svg"></div>
+				</div>
+			</div>
+			<div class="contentInfoBox">
+				<p class="contentTitle">关系抽取</p>
+				<div class="tableBox">
+					<div class="empty">
+						<img class="emptyImg" src="./images/empty2.png" alt="您提交的信息暂未收录">
+						<p class="emptyTxt">暂无关系抽取数据～</p>
+					</div>
+					<p class="tableTitle">关系列表</p>
+					<div class="tableWrapper">
+						<p class="analying" style="color: #aaa;text-align: center;margin-top:50px;font-size: 14px;">正在分析...</p>
+						<table>
+							<thead>
+								<tr>
+									<td class="entry1">实体1</td>
+									<td class="relationType">关系类别</td>
+									<td class="entry2">实体2</td>
+								</tr>
+							</thead>
+							<tbody class="relationBody"></tbody>
+						</table>
+					</div>
+					
+				</div>
+				
+			</div>
+			 <div class="footer ltLogo">
+				杭州朗通信息技术有限公司 & 浙江大学医学院附属邵逸夫医院&nbsp;&nbsp;&nbsp;联合开发
+			</div>
+		</div>
+	</div>
+	
+	<div class="showCheck">
+		<img src="./images/iconClose3.png" alt="">
+		<table class="table"></table>
+	</div>
+</body>
+
+</html>

src/html/qaPage.html

@@ -0,0 +1,56 @@
+<!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 href="../resources/favicon.ico" rel="shortcut icon">
+</head>
+
+<body>
+<div class="qaPageWrappper wrappper">
+    <div class="title">
+        <div class="titleTxt">
+            <img class="titleLogo ltLogo" src="./images/logo.png" alt="logo">
+             <img class="titleLogo titleLogoShaiyifu" src="./images/logo_shaoyifu.png" alt="logo">
+            <span class="titleInfo">|&nbsp;&nbsp;智能问答</span>
+        </div>
+    </div>
+    <div class="content">
+        <div class="contentInfoBox">
+            <p class="contentTitle">请输入问题</p>
+            <div class="example">
+                <p>提示说明：输入症状及易感人群、并发症、治愈率、诱因等相关医疗问题，展示其智能回答。每次问答，目前仅支持单个疾病。</p>
+                <p>输入示例：1.黄斑病变的并发症是    2.黄斑病变的症状是什么    3.黄斑病变多大概率能治好   4.黄斑病变哪些人发病几率大    5.什么情况下容易得黄斑病变</p>
+            </div>
+            <div class="infoBox">
+                <textarea name="" id="infoTxt" class="infoTxt" cols="30" rows="10" placeholder="请在此输入问题......"></textarea>
+            </div>
+            <div class="btnBox clearfix">
+                <span class="btn disabled" id="analy">提&nbsp;交</span>
+            </div>
+        </div>
+        <div class="contentInfoBox">
+            <p class="contentTitle">
+                智能回答
+            </p>
+            <div class="resultBox">
+                <div class="empty">
+                    <img class="emptyImg" src="./images/empty2.png" alt="暂无智能回答">
+                    <p class="emptyTxt">暂无智能回答～</p>
+                </div>
+                <div class="resultBoxInfo" id="resultBoxInfo"></div>
+            </div>
+        </div>
+         <div class="footer ltLogo">
+            杭州朗通信息技术有限公司 & 浙江大学医学院附属邵逸夫医院&nbsp;&nbsp;&nbsp;联合开发
+        </div>
+    </div>
+</div>
+
+
+</body>
+
+</html>

src/js/api.js

@@ -0,0 +1,105 @@
+
+// const api = {
+//   getGraph:'/api/ltkg/kg/getGraph',
+//   getNode:'/api/ltkg/kg/getNode',
+//   getSchema:'/api/ltkg/kg/getSchema',
+//   getTree:'/api/ltkg/kg/getTree',
+//   entity_predict:'api/ltkg/nlp/getNlp',
+//   getMrInfo:'/api/ltkg/presetInfo/getMrInfo',
+//   getAnswer:'/api/ltkg/qa/charBot',
+//   getTerm:'/api/ltkg/term/getTerm',
+//   check:'http://192.168.2.121:7010/test/testStandConvert',
+// };
+
+const api = {
+  getGraph:'/kg/getGraph',
+  getNode:'/kg/getNode',
+  getSchema:'/kg/getSchema',
+  getTree:'/kg/getTree',
+  entity_predict:'/nlp/getNlp',
+  getMrInfo:'/presetInfo/getMrInfo',
+  getAnswer:'/qa/charBot',
+  getTerm:'/term/getTerm',
+  check:'http://192.168.2.121:7010/test/testStandConvert',
+};
+
+const getUrlArgObject = function(name) {//
+  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
+  var reg_rewrite = new RegExp("(^|/)" + name + "/([^/]*)(/|$)", "i");
+  var r = window.location.search.substr(1).match(reg);
+  var q = window.location.pathname.substr(1).match(reg_rewrite);
+  if (r != null) {
+    return decodeURIComponent(r[2]);
+  } else if (q != null) {
+    return decodeURIComponent(q[2]);
+  } else {
+    return null;
+  }
+}
+//判断隐藏logo
+const ifHideLogo = function(){
+    const hideLg = getUrlArgObject("hideLg");
+    if(hideLg){
+      $(".ltLogo").hide();
+    }
+}
+
+const post = function (url, data,pId) {
+  const securityCode = getUrlArgObject("code");
+  const appKeyId = getUrlArgObject("appI");
+  const appKeySecret = getUrlArgObject("appS");
+  const productId = getUrlArgObject("productId");
+  return new Promise((resolve, reject) => {
+    $.ajax({
+      method: 'post',
+      url: url,
+      data: JSON.stringify(data),
+      contentType: "application/json; charset=UTF-8",
+      beforeSend: function (xmlHttp) {
+        xmlHttp.setRequestHeader("If-Modified-Since", "0");
+        xmlHttp.setRequestHeader("Cache-Control", "no-cache");
+        xmlHttp.setRequestHeader("appKeyId", appKeyId);
+        xmlHttp.setRequestHeader("appKeySecret", appKeySecret);
+        xmlHttp.setRequestHeader("securityCode", securityCode);
+        xmlHttp.setRequestHeader("productId", productId);
+      },
+      success: function (res) {
+        resolve({ data: res });
+      },
+      error: function (error) {
+        reject(error);
+      },
+    });
+  });
+}
+
+const typeLis = {
+  "临床表现":"symptom",
+  "疾病名称":"disease",
+  "手术名称":"operation",
+  "药物名称":"drug",
+  "药物过敏原":"drug",
+  "实验室检查套餐":"lis",
+  "实验室检查":"lis",
+  "辅助检查":"pacs",
+  "体征":"vital",
+}
+const typeLisName = {
+  "临床表现":"症状",
+  "疾病名称":"疾病",
+  "手术名称":"手术和操作",
+  "药物名称":"药品",
+  "药物过敏原":"药品",
+  "实验室检查套餐":"实验室检查",
+  "实验室检查":"实验室检查",
+  "辅助检查":"辅助检查",
+  "体征":"辅助检查",
+}
+module.exports ={
+  post,
+  api,
+  typeLisName,
+  typeLis,
+  getUrlArgObject,
+  ifHideLogo
+}

src/js/graphMap.js

@@ -0,0 +1,685 @@
+const echarts = require("echarts");
+const { post, api } = require('./api.js');
+const iconUp = require('./../resources/images/iconUp.png');
+const iconDown = require('./../resources/images/iconDown.png');
+
+const clientHei = $(window).height()
+const contentHei = clientHei - 80
+
+//关系图
+function getGraph(val, type){
+    return post(api.getGraph,{
+        "inputStr": val,
+        "labelName": type
+    }).then(res=>{
+        if(res.data.code == 0) {
+            // select_type = select_type_noSearch
+            $('#searchInp').val(val)
+            drawGraph(res.data.data)
+            window.graphTxt = val
+            window.refreshTree = true
+            if(type != select_type){
+                select_type = type
+                let renderTabInfo = getTab(type) 
+                renderTab(renderTabInfo) 
+              
+            }
+        }else{
+            let nodeStr
+            nodeStr = '<li class="ellipsis">暂无符合数据</li>'
+            $(".tabNameList").html(nodeStr)
+            $(".tabNameList").show()
+            window.refreshTree = false
+        }
+    })
+}
+
+
+function drawGraph(data,resultShowId) {
+    // var colors = [
+    //     '#FB95AF','#788083','#B2CCCF','#68BDF6','#FFD86E','#6DCE9F','#9BB2F0','#DBB7AC'
+    // ]
+    var myChart = echarts.init(document.getElementById('main'));
+    var categories = data['categories'];
+    var legends = categories.slice(2, categories.length);
+    var showLegendNum = 0;
+    let sum = 0
+    for(let i = 0; i < legends.length; i++){
+
+        sum += 2+legends[i].name.length+1
+        if(sum <= 60){
+            showLegendNum ++
+        }
+    }
+    var option = {
+        title: { 
+            text: '医学知识图谱',
+            top: '10',
+            left: '10'
+        },
+        // color:colors,
+        tooltip: {
+            formatter: function (x) {
+                return x.data.label;
+            }
+        },
+        legend: [{
+            type: 'scroll',
+            bottom: 0,
+            //  left: 0,
+             itemWidth: 8,
+             itemHeight: 8,
+             itemGap: 20,
+             icon: 'circle',
+             width: 766,
+             verticalAlign:'top',
+             borderColor:'#E6E6E6',
+            //  borderTopWidth:1,
+            padding:[20, 1000, 0, 1000],
+            backgroundColor: "#FFFFFF",
+            selected:{},
+            // orient: 'vertical',
+            data: legends.slice(0,showLegendNum).map(function (a) {
+                return a.name;
+            }),
+            
+        }],
+        series: [
+            {
+                type: 'graph',
+                layout: 'force',
+                cursor:'pointer',
+                categories: categories,
+                symbolSize: 80,
+                roam: 'move',
+                edgeSymbol: ['circle', 'arrow'],
+                edgeSymbolSize: [1, 5],
+                edgeLabel: {
+                    // cursor:'pointer',
+                    normal: {
+                        textStyle: {
+                            fontSize: 20
+                        }
+                    }
+                },
+                force: {
+                    repulsion: 500,
+                    gravity: 0.8,
+                    friction :0.2, //动画速度
+                    edgeLength: [4, 7],
+                    layoutAnimation : true
+                },
+                draggable: false,
+                animation: true,
+                hoverAnimation:false,
+                animationDuration:5000,
+                focusNodeAdjacency: true,
+                itemStyle: {
+                    normal: {
+                        width: 2,
+                        // color: 'target',
+                        // cursor:'pointer',
+                        curveness: 0,
+                        opacity: 1
+                    }
+                },
+                lineStyle: {
+                    normal: {
+                        width: 2,
+                        cursor:'default',
+                        color: 'target'
+                    }
+                },
+                edgeLabel: {
+                    normal: {
+                        show: true,
+                        formatter: function (x) {
+                            return x.data.value;  //横线关系
+                        }
+                    }
+                },
+                label: {
+                    normal: {
+                        show: true,
+                        textStyle: {
+                            cursor:'pointer',
+                        },
+                        color:'#1E1E1E', //label字体颜色
+                        formatter: function (x) {
+                             var tmp = x.data.label;
+                            if(tmp.length >= 12){
+                                tmp = tmp.substring(0,12);
+                                tmp = tmp + "...";
+                            }
+                            return tmp;
+                        }
+                    }
+                },
+                data: data.node,
+                links: data.links
+            }
+        ]
+    };
+    $(window).resize(function(){
+        myChart.resize(); 
+     })
+    myChart.on('click',dataClick);
+    let selected = {}
+    myChart.on('legendselectchanged',function(obj){
+        selected = obj.selected
+    })
+    myChart.setOption(option,true);
+    if(legends.length > showLegendNum){
+        $('.legendSlideUp').toggleClass('legendSlideUp')
+        $('.legendIcon').css('display',"block")
+    }else{
+        $('.legendSlideUp').toggleClass('legendSlideUp')
+        $('.legendIcon').css('display',"none")
+    }
+    $('.legendIconImg').off("click").on('click',function(e){
+        e.stopPropagation()
+        $('.legendIconImg').toggleClass('legendSlideUp')
+        if(option.legend[0].type=='scroll'){
+            option.legend[0].type='plain'
+            option.legend[0].data = legends
+            option.legend[0].selected = selected
+        }else{
+            option.legend[0].type='scroll'
+            option.legend[0].data = legends.slice(0,showLegendNum)
+            option.legend[0].selected = selected
+        }
+       
+        myChart.setOption(option,true);
+    })
+}   
+
+function dataClick(param){
+    var data = param.data;
+    const clientHei = $(window).height()
+    const contentHei = clientHei - 80
+    // console.log('data', data,select_type)
+    // var nodes = option.series[0].nodes;
+    if(data.category == 0){
+        return
+    }else{
+        if(data.symbol != "circle"){
+            return
+        }else{
+            if(data.type == select_type){
+                $('#searchInp').val(data.label)
+                updateTree(data.label)
+                getGraph(data.label,select_type);
+              
+            }else {
+                let renderTabInfo = getTab(data.type) 
+                renderTab(renderTabInfo) 
+               
+                if(data.type == "疾病"){
+                    $(".radioList").show()
+                    $('.iconRadio').attr('src','/images/radioUnSelect.png')
+                    $('.ICD10 img').attr('src','/images/radioSelect.png')
+                    setTabBottomHei(1)
+                }else{
+                    $(".radioList").hide()
+                    setTabBottomHei(2)
+                }
+                select_type_noSearch = data.type
+                select_type = data.type
+                setSelectName(select_type)
+                $('#searchInp').val(data.label)
+                if(data.type == "疾病"){
+                    getTree(1,1,data.label);
+                    getGraph(data.label,select_type);
+                }else if(data.type == "药品通用名"){
+                    getTree(0,2,data.label);
+                    getGraph(data.label,select_type);
+                }else if(data.type == "症状"){
+                  
+                    getTree(0,3,data.label);
+                    getGraph(data.label,select_type);
+                }else if(data.type == "手术和操作"){
+                    getTree(0,4,data.label);
+                    getGraph(data.label,select_type);
+                }else if(data.type == "实验室检查"){
+                    getTree(0,5,data.label);
+                    getGraph(data.label,select_type);
+                }else if(data.type == "辅助检查"){
+                    getTree(0,6,data.label);
+                    getGraph(data.label,select_type);
+                }
+            }
+        }
+    }
+ }
+
+
+
+
+function getTree(subType, type,showNodeName){
+    post(api.getTree,
+        {
+            "subType": subType,     //科室subType: 2, 疾病type:1
+            "type": type
+        }
+    ).then(res=>{
+        if(res.data.code == 0) {
+            const data = res.data.data
+            drawTree(data,showNodeName)
+        }
+    })
+}
+function drawTree(data, showNodeName){
+    /**
+        属性说明  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)]
+            
+    **/
+    var setting = {	
+        //数据格式的设置
+        data:{
+            simpleData: {
+                enable: true, //使用简单的JSON格式
+                idKey: "id",
+                pIdKey: "pId",
+                rootPId: ""
+            },
+        },
+        //树的显示设置
+        view:{
+            showLine:true, //设置是否显示连线 默认为true
+            showTitle: true,//设置是否显示鼠标悬浮时显示title的效果
+            dblClickExpand: true,//设置是否支持双击展开树节点
+            fontCss : {color:"#333"},//设置节点样式  
+            expandSpeed: "normal",//设置展开的速度  fast normal  slow 
+            nameIsHTML: true,//名字是否是HTML
+            selectedMulti: true,
+            
+        },
+        //设置事件回调
+        callback:{
+            onClick: function (treeId, treeNode) {
+                const selectPId = $('.curSelectedNode').attr('id')
+                if(selectPId){
+                    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) {
+                    zTree.expandNode(treeNode);
+                    return false;
+                } else {
+                    const treeNodeName = treeNode.name
+                    let index = treeNodeName.indexOf(' ')
+                    const name = treeNodeName.substring(index+1)
+                    if(select_type != select_type_noSearch){
+                        select_type_noSearch = select_type
+                        setSelectName(select_type)
+                    }
+                    getGraph(name,select_type)
+                    const selectPId = $('.curSelectedNode').attr('id')
+                    if(selectPId){
+                        const selectId = selectPId.substring(0,selectPId.length-1) + 'ico'
+                        $('#'+selectId + ' .iconSelect').remove()
+                    }
+             
+                    // showKnowledgeGraph(treeNode.name, 'graph', 0);
+                    return true;
+                }
+            }
+        }
+    };
+    var zNodes = data.nodes;
+    // var zNodes = zTreeData.nodes; 
+    $.fn.zTree.init($("#tree"), setting, zNodes);
+    if(showNodeName) {
+        updateTree(showNodeName)
+
+    }
+}
+
+function getNode(val, type){
+    post(api.getNode,
+        {
+            "inputStr": val,
+            "labelName": type
+        }
+    ).then(res=>{
+        if(res.data.code == 0) {
+            const data = res.data.data
+            let nodeStr =''
+            if(data.length > 0){
+                for(let i = 0; i < data.length; i++){
+                    nodeStr +=`<li class="ellipsis nodeItem" title=${data[i].name}>${data[i].name}</li>`
+                }
+            }else{
+                nodeStr = '<li class="ellipsis">暂无符合数据</li>'
+            }
+            $(".tabNameList").html(nodeStr)
+            $(".tabNameList").show()
+            $(".tabNameList li").click(function(){
+                const txt = $(this).text()
+                if(txt !="暂无符合数据"){
+                    $('#searchInp').val(txt)
+                }
+                const clientHei = $(window).height()
+                const contentHei = clientHei - 80
+                $(".tabNameList").hide()
+                getGraph(txt,select_type_noSearch).then(()=>{
+                    if(!window.refreshTree){
+                      
+                        return
+                    }
+                        select_type = select_type_noSearch
+                        
+                        if(select_type == '疾病'){
+                            // $('#searchInp').val("高血压3级")
+                            getTree(1,1,txt);
+                        }else if(select_type == '药品通用名'){
+                            getTree(0,2,txt);
+                        }else if(select_type == '症状'){
+                            getTree(0,3,txt);
+                        }else if(select_type == '手术和操作'){
+                            getTree(0,4,txt);
+                        }else if(select_type == '实验室检查'){
+                            getTree(0,5,txt);
+                        }else if(select_type == '辅助检查'){
+                            getTree(0,6,txt);
+                        }
+                        if(select_type == '疾病'){
+                            $('.iconRadio').attr('src','/images/radioUnSelect.png')
+                            $('.ICD10 img').attr('src','/images/radioSelect.png')
+                            $(".radioList").show()
+                            setTabBottomHei(1)
+                        }else{
+                            $(".radioList").hide()
+                            setTabBottomHei(2)
+                        }
+                        let renderTabInfo = getTab(select_type) 
+                        renderTab(renderTabInfo)
+                    
+                })
+               
+            })
+        }
+    })
+}
+
+function updateTree(keyWord, txt) {
+    var t = $("#tree");
+        // if(zNodes&& zNodes.length > 0 && zNodes[0]['name'].indexOf(txt) != -1){
+        //     $.fn.zTree.init(t, setting, zNodes);
+        //     var zTree = $.fn.zTree.getZTreeObj("tree");
+        //     zTree.selectNode(zTree.getNodeByParam("name", keyWord));
+        // }else {
+        var tree_select = document.getElementsByClassName("tree_selected");
+        for(i = 0; i < tree_select.length; i++){
+            tree_select[i].className = "tree_button";
+        }
+        var tree_button = document.getElementsByClassName("tree_button");
+        for(i = 0; i < tree_button.length; i++){
+            if(tree_button[i].text == txt){
+                tree_button[i].className = "tree_selected";
+            }
+        }
+        if(txt != "疾病"){
+            $("#radio").hide();
+        }else {
+             $("#radio").show();
+        }
+        selectedNode = keyWord;
+        var data = {"name":'tree'};
+        var zTree = $.fn.zTree.getZTreeObj("tree");
+                zTree.selectNode(zTree.getNodeByParam("name", keyWord));
+                const selectPId = $('.curSelectedNode').attr('id')
+                if(selectPId){
+                    const selectId = selectPId.substring(0,selectPId.length-1) + 'ico'
+                    $('.iconSelect').remove()
+                    $('#'+selectId).append('<img class="iconSelect" src="./images/iconSelect.png">')
+                }
+       
+}
+
+
+
+function isEmpty(obj){
+    if(typeof obj == "undefined" || obj == null || obj == ""){
+        return true;
+    }else{
+        return false;
+    }
+}
+
+function getKeyEvent(evt) {
+    var evt = (evt) ? evt : ((window.event) ? window.event : "");
+    var key = evt.keyCode?evt.keyCode:evt.which;
+    if(key==13){
+        keyDown = true;
+        queryGraph();
+        evt.cancleBubble = true;
+        evt.returnValue = false;
+        return false;
+    }else{
+        return false;
+    }
+}
+
+function getTab(tabName){
+    let tabList = ["疾病","药品通用名","症状","手术和操作","实验室检查","辅助检查"]
+    let tabListCopy = tabList.slice()
+    const index = tabList.findIndex(item => item == tabName)
+  
+    if(index <= 3){
+        return {
+            activeIndex: index,
+            showTabList:tabListCopy.slice(0,4),
+            hideTabList:tabListCopy.slice(4)
+        }
+    }else{
+        tabListCopy.splice(index,1)
+        let hideTabList = tabListCopy.slice(3)
+        
+        return {
+            activeIndex: 3,
+            showTabList:tabListCopy.slice(0,3).concat(tabName),
+            hideTabList:hideTabList
+        }
+    }
+}
+
+function renderTab(data){
+    const showList = data.showTabList
+    const hideList = data.hideTabList
+    const activeIndex = data.activeIndex
+    let showtabStr = ``
+    let hidetabStr = ``
+    for(let i = 0; i < showList.length; i++){
+        showtabStr +=`	<span class="tab ${i === activeIndex ? 'activeTab':''}" data-id="${showList[i]}">${showList[i] =="药品通用名" ?"药品":showList[i]}</span>`
+        if(i === activeIndex){
+            if(showList[i] =="药品通用名"){
+                $("#searchInp").attr("placeholder",`请输入药品名称`)
+            }else{
+                $("#searchInp").attr("placeholder",`请输入${showList[i]}名称`)
+            }
+        }
+        
+    }
+    for(let i = 0; i < hideList.length; i++){
+        hidetabStr +=`<span class="tab " data-id="${hideList[i]}">${hideList[i]}</span>`
+    }
+    hidetabStr += `<div class="toggleTab">
+    <span class="toggleTabTxt">收起</span>
+    <img class="toggleArrow" src="./images/iconUp.png" alt="">
+</div>`
+    // console.log('showtabStr',showtabStr)
+    
+    $('.showTabList').html(showtabStr)
+    $('.hideTabList').html(hidetabStr)
+    bindTabClick()
+    ToggleTab()
+}
+ToggleTab()
+function ToggleTab(){
+    $(".toggleTab").off("click").click(function(e){
+        e.stopPropagation()
+        hideSlide("hideTabList")
+        const hideTabDis = $(".hideTabList").css("display")
+        if(hideTabDis == "none"){
+            showHideTab()
+        }else{
+            hideHideTab()
+        }
+    })
+    
+  
+}
+function showHideTab(){
+    $(".hideTabList").show()
+    $(".tabList").addClass("tabListShow")
+    $(".toggleTab").css("display","none")
+    $(".hideTabList .toggleTab").css("display","inline-block")
+    // $(".toggleTabTxt").html("收起")
+    // $(".toggleArrow").attr("src",iconUp)
+}
+function hideHideTab(e){
+    $(".hideTabList").hide()
+    // $(".toggleTabTxt").html("展开")
+    // $(".toggleArrow").attr("src",iconDown)
+        $(".toggleTab").css("display","block")
+        $(".tabList").removeClass("tabListShow")
+    
+    
+}
+bindTabClick()
+//切换tab
+function bindTabClick(){
+    $('.tabList .tab').click(function(){
+        const id = $(this).attr('data-id')
+        $(this).addClass("activeTab").siblings().removeClass('activeTab')
+        let renderInfo = getTab(id) 
+        renderTab(renderInfo)
+        if(id != select_type){
+            if(id != "疾病"){
+                $(".radioList").hide()
+                setTabBottomHei(2)
+            }else{
+                $(".radioList").show()
+                setTabBottomHei(1)
+            }
+            select_type_noSearch = id
+            select_type = id
+            setSelectName(select_type)
+           
+            if(id == "疾病"){
+               
+                $('#searchInp').val("急性胰腺炎")
+                $('.iconRadio').attr('src','/images/radioUnSelect.png')
+                $('.ICD10 img').attr('src','/images/radioSelect.png')
+                getTree(1,1,"急性胰腺炎");
+                getGraph("急性胰腺炎",select_type);
+            
+            }else if(id=="药品通用名"){
+                $('#searchInp').val("地高辛(XC01AAD072A001010100372)")
+                getTree(0,2,"地高辛(XC01AAD072A001010100372)");
+                getGraph("地高辛(XC01AAD072A001010100372)",select_type);
+            }else if(id == "症状"){
+                $('#searchInp').val("背痛")
+                getTree(0,3,"背痛");
+                getGraph("背痛",select_type);
+            }else if(id == "手术和操作"){
+                $('#searchInp').val("动脉缝合术")
+                getTree(0,4,"动脉缝合术");
+                getGraph("动脉缝合术",select_type);
+            }else if(id == "实验室检查"){
+                $('#searchInp').val("白细胞计数(WBC)")
+                getTree(0,5,"白细胞计数(WBC)");
+                getGraph("白细胞计数(WBC)",select_type);
+            }else if(id == "辅助检查"){
+                $('#searchInp').val("肝彩超")
+                getTree(0,6,"肝彩超");
+                getGraph("肝彩超",select_type);
+            }
+           
+            // getTree(1,1,"");  //切换tab重新画菜单树
+        }
+       
+        hideHideTab()
+    })
+}
+
+function setTabBottomHei(type){
+    const clientHei = $(window).height()
+    const contentHei = clientHei - 80
+    if(type==1){
+        $(".tabBottom").css({
+            'margin': '0px 0px 0px 0px'
+        })
+        $(".tabBottom").css("height",contentHei-80-43-10+19+'px')
+        $(".ztree").css("height",contentHei-80-43-60-20-24+19+'px')
+
+    }else if(type == 2){
+        $(".tabBottom").css("height",contentHei-80-43-10-20+19+'px')
+        $(".tabBottom").css({
+            'margin': '20px 0px 0px 0px'
+        })
+        $(".ztree").css("height",contentHei-80-43-20-20-20+19+'px')
+    }
+ }
+
+ function setSelectName(name){
+    if(name=="药品通用名"){
+        $('.selectedName').html("药品")
+        $('.selectedName').attr("title","药品")
+        $("#searchInp").attr("placeholder",`请输入药品名称`)
+    }else{
+        $('.selectedName').attr('title', name)
+        $("#searchInp").attr("placeholder",`请输入${name}名称`)
+        if(name.length > 4){
+            $('.selectedName').html(name.slice(0,4)+'...')
+        }else{
+            $('.selectedName').html(name)
+        }
+       
+    }
+ }
+ function hideSlide(expectClass){
+    let hideSlideList = ['selectList', 'tabNameList','tabNameListNoSearch','hideTabList']
+    let index = hideSlideList.findIndex(item => item == expectClass)
+    for(let i = 0; i < hideSlideList.length; i++){
+        if(i != index){
+            if(hideSlideList[i] == "selectList"){
+                $('.'+hideSlideList[i]).hide()
+                $('.iconSlide').attr('src','./images/iconSlideDown.png')
+            }else if(hideSlideList[i] == "hideTabList"){
+                hideHideTab()
+            }else{
+                $('.'+hideSlideList[i]).hide()
+            }
+        }
+    }
+ }
+
+
+module.exports ={
+    drawGraph,
+    updateTree,
+    getGraph,
+    getTree,
+    getNode,
+    getTab,
+    renderTab,
+    setTabBottomHei,
+    setSelectName,
+    hideHideTab,
+    hideSlide
+}

src/js/index.js

@@ -0,0 +1,198 @@
+const $ = require("jquery");
+require("babel-polyfill");
+const echarts = require("echarts");
+require("./../css/knowledgeMap.less");
+require("./../css/common.less");
+// require("ztree");
+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/syflogo.png');
+require('./../resources/images/logo.png');
+require('./../resources/images/logo_shaoyifu.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');
+const iconUp = require('./../resources/images/iconUp.png');
+const iconDown = require('./../resources/images/iconDown.png');
+const { post, api,ifHideLogo } = require('./api.js');
+const { mapData, zTreeData,mapData3,zTreeData3 } = require('./data.js');
+const { drawGraph,updateTree,getGraph,getTree,getNode,getTab,renderTab,setTabBottomHei,setSelectName,hideHideTab,hideSlide} = require('./graphMap.js');
+
+window.select_type="疾病";
+window.select_type_noSearch="疾病";
+window.refreshTree = true
+
+ setHei()
+ifHideLogo();
+ function setHei(){
+    const clientHei = $(window).height()
+    const contentHei = clientHei - 80+19
+    $(".left").css("height",contentHei+'px')
+    $(".right").css("height",contentHei+'px')
+    if(select_type=="疾病"){
+        setTabBottomHei(1)
+    }else{
+        setTabBottomHei(2)
+    }
+    $("#main").css("height",contentHei-20-20-10+'px')
+ }
+ $(window).resize(function(){
+    setHei()
+    // getGraph(graphTxt,select_type);
+ })
+
+//关系图
+getGraph("急性胰腺炎",select_type);
+getTree(1,1,"急性胰腺炎");
+$('#searchInp').val("急性胰腺炎")
+
+//选择类型
+$('.select').click(function(e){
+    e.stopPropagation();
+    hideSlide('selectList')
+    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')
+    const txt =  $(this).text()
+    const oldTxt = $(".selectedName").html()
+    setSelectName(txt)
+   
+    $("#searchInp").attr("placeholder",`请输入${txt}名称`)
+    if(txt != oldTxt){
+        $('#searchInp').val("")
+    }
+    
+})
+
+//搜索节点名
+$("#searchInp").bind("input propertychange",function(event){
+    const val = $("#searchInp").val().trim()
+    if(val){
+        getNode(val,select_type_noSearch)
+    }else{
+        $(".tabNameList").hide()
+    }
+});
+
+//切换条目
+$('.radioItem').click(function(e){
+    const initDiag = "急性胰腺炎"
+    const type = $(this).attr('data-type')
+    // $(this).children('img').attr('src')
+    $('.iconRadio').attr('src','/images/radioUnSelect.png')
+    $(this).children('img').attr('src','/images/radioSelect.png')
+     $('#searchInp').val(initDiag)
+    getTree(type,1,initDiag);
+    getGraph(initDiag,select_type);
+    // updateTree(initDiag)
+})
+
+//搜索
+$('#searchBtn').click(function(e){
+    e.stopPropagation()
+    hideSlide()
+    const val = $('#searchInp').val().trim()
+    if(val){
+        const clientHei = $(window).height()
+        const contentHei = clientHei - 80
+        $(".tabNameList").hide()
+        getGraph(val,select_type_noSearch).then(()=>{
+            if(!window.refreshTree){
+              
+                return
+            }
+                select_type = select_type_noSearch
+                
+                if(select_type == '疾病'){
+                    // $('#searchInp').val("高血压3级")
+                    getTree(1,1,val);
+                }else if(select_type == '药品通用名'){
+                    getTree(0,2,val);
+                }else if(select_type == '症状'){
+                    getTree(0,3,val);
+                }else if(select_type == '手术和操作'){
+                    getTree(0,4,val);
+                }else if(select_type == '实验室检查'){
+                    getTree(0,5,val);
+                }else if(select_type == '辅助检查'){
+                    getTree(0,6,val);
+                }
+                if(select_type == '疾病'){
+                    $('.iconRadio').attr('src','/images/radioUnSelect.png')
+                    $('.ICD10 img').attr('src','/images/radioSelect.png')
+                    $(".radioList").show()
+                    setTabBottomHei(1)
+                }else{
+                    $(".radioList").hide()
+                    setTabBottomHei(2)
+                }
+                let renderTabInfo = getTab(select_type) 
+                renderTab(renderTabInfo)
+            
+        })
+        
+   
+       
+    }else{
+       $('.tabNameListNoSearch').show()
+    }
+})
+
+
+
+let renderTabInfo = getTab("疾病") 
+renderTab(renderTabInfo)
+
+$(".tabList").click(function(e){
+    e.stopPropagation()
+    hideSlide()
+})
+$(".hideTabList").click(function(e){
+    e.stopPropagation()
+    hideSlide()
+})
+//点击页面其他地方关闭下拉
+$('html').click(function(){
+    hideSlide()
+    // const selectListShow = $('.selectList').css('display')
+    // const tabNameListShow = $('.tabNameList').css('display')
+    // const tabNameListNoSearchShow = $('.tabNameListNoSearch').css('display')
+    // const hideTabListShow = $('.hideTabList').css('display')
+    // if(selectListShow == 'block'){
+    //     $('.selectList').hide()
+    //     $('.iconSlide').attr('src','./images/iconSlideDown.png')
+    // }
+    // if(tabNameListShow == 'block'){
+    //     $('.tabNameList').hide()
+    // }
+    // if(tabNameListNoSearchShow == 'block'){
+    //     $('.tabNameListNoSearch').hide()
+    // }
+    // if(hideTabListShow == 'block'){
+    //     hideHideTab()
+    // }
+})
+
+
+module.exports ={
+    getTab,
+    renderTab
+}
+		
+		
+	

src/js/knowledgeTree.js

@@ -0,0 +1,176 @@
+const $ = require("jquery");
+require("babel-polyfill");
+const echarts = require("echarts");
+require("./../css/knowledgeTree.less");
+require("./../css/common.less");
+// require("ztree");
+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/syflogo.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');
+const iconUp = require('./../resources/images/iconUp.png');
+const iconDown = require('./../resources/images/iconDown.png');
+// document.write("aaaa");
+const {getSchema,getTree,getNode,getTab,renderTab,setTabBottomHei,setSelectName,hideSlide} = require('./schemaMap.js');
+const {ifHideLogo} = require("./api.js");
+
+window.select_type="疾病";
+window.select_type_noSearch="疾病";
+window.refreshTree = true
+
+
+ setHei()
+ifHideLogo()
+ function setHei(){
+    const clientHei = $(window).height()
+    const contentHei = clientHei - 80+12
+    $(".left").css("height",contentHei+'px')
+    $(".right").css("height",contentHei+'px')
+    console.log('select_type',select_type)
+    if(select_type=="疾病"){
+        setTabBottomHei(1)
+    }else{
+        setTabBottomHei(2)
+    }
+    $("#main").css("height",contentHei-20-20+'px')
+ }
+
+
+
+ $(window).resize(function(){
+    setHei()
+    // getSchema(graphTxt,select_type);
+ })
+//关系图
+getSchema("胆囊炎",select_type);
+getTree(1,1,"胆囊炎");
+$('#searchInp').val("胆囊炎")
+
+
+//选择类型
+$('.select').click(function(e){
+    e.stopPropagation();
+    hideSlide('selectList')
+    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')
+    const txt =  $(this).text()
+    const oldTxt = $(".selectedName").html()
+    setSelectName(txt)
+    $("#searchInp").attr("placeholder",`请输入${txt}名称`)
+    if(txt != oldTxt){
+        $('#searchInp').val("")
+    }
+    
+})
+
+//搜索节点名
+$("#searchInp").bind("input propertychange",function(event){
+    const val = $("#searchInp").val().trim()
+    if(val){
+        getNode(val,select_type_noSearch)
+    }else{
+        $(".tabNameList").hide()
+    }
+});
+
+//切换条目
+$('.radioItem').click(function(e){
+    const initDiag = "胆囊炎"
+    const type = $(this).attr('data-type')
+    // $(this).children('img').attr('src')
+    $('.iconRadio').attr('src','/images/radioUnSelect.png')
+    $(this).children('img').attr('src','/images/radioSelect.png')
+     $('#searchInp').val(initDiag)
+    getTree(type,1,initDiag);
+    getSchema(initDiag,select_type);
+    // updateTree(initDiag)
+})
+//搜索
+$('#searchBtn').click(function(e){
+    e.stopPropagation()
+    const val = $('#searchInp').val().trim()
+    if(val){
+        const clientHei = $(window).height()
+        const contentHei = clientHei - 80
+        $(".tabNameList").hide()
+        getSchema(val,select_type_noSearch).then(()=>{
+            if(!window.refreshTree){
+                return
+            }
+                select_type = select_type_noSearch
+                
+                if(select_type == '疾病'){
+                    // $('#searchInp').val("高血压3级")
+                    getTree(1,1,val);
+                }else if(select_type == '药品通用名'){
+                    getTree(0,2,val);
+                }else if(select_type == '症状'){
+                    getTree(0,3,val);
+                }else if(select_type == '手术和操作'){
+                    getTree(0,4,val);
+                }else if(select_type == '实验室检查'){
+                    getTree(0,5,val);
+                }else if(select_type == '辅助检查'){
+                    getTree(0,6,val);
+                }
+                if(select_type == '疾病'){
+                    $('.iconRadio').attr('src','/images/radioUnSelect.png')
+                    $('.ICD10 img').attr('src','/images/radioSelect.png')
+                    $(".radioList").show()
+                    setTabBottomHei(1)
+                }else{
+                    $(".radioList").hide()
+                    setTabBottomHei(2)
+                }
+                let renderTabInfo = getTab(select_type) 
+                renderTab(renderTabInfo)
+           
+        })
+    }else{
+       $('.tabNameListNoSearch').show()
+    }
+})
+let renderTabInfo = getTab("疾病") 
+renderTab(renderTabInfo)
+
+
+$(".tabList").click(function(e){
+    e.stopPropagation()
+    hideSlide()
+})
+$(".hideTabList").click(function(e){
+    e.stopPropagation()
+    hideSlide()
+})
+
+//点击页面其他地方关闭下拉
+$('html').click(function(){
+    hideSlide()
+})
+		
+		
+	
+
+
+
+
+

src/js/medicalTermMap.js

@@ -0,0 +1,330 @@
+const $ = require("jquery");
+require("babel-polyfill");
+const echarts = require("echarts");
+require("./../css/medicalTermMap.less");
+require('./../resources/images/empty2.png');
+const { post, api,ifHideLogo } = require('./api.js');
+const { medicalTermDefaultMap } = require('./utils.js');
+
+window.select_type="disease";
+window.select_name="疾病";
+ifHideLogo();
+$("#infoTxt").bind("input propertychange",function(event){
+    const val = $("#infoTxt").val().trim();
+    if(!val){
+        $('#submit').addClass('disabled')
+    }else{
+        $('#submit').removeClass('disabled')
+    }
+});
+
+$(".submit").on("click",function(){
+    const val = $('#infoTxt').val().trim()
+    if(!val || $('.disabled')[0]){
+        return
+    }
+    let param = {
+        word_type: select_type,
+        word: val,
+        number: 10
+    }
+    $('#submit').addClass('disabled')
+    $(".mapResult").html('正在加载中~')
+    $(".emptyBox2").css("display","block")
+    return post(api.getTerm,param).then(res =>{
+        if(res.data.code == 0){
+            const data = res.data.data 
+            let standardList = []
+            if(data){
+                dataObj = JSON.parse(data)
+                standardList = dataObj['standard_words'] || []
+                if(standardList.length > 0){
+                    getGraph(standardList[0].standard_word,select_name)
+                    renderStandrandWord(standardList)
+                }else{
+                    renderStandrandWord(standardList)
+                    $(".emptyBox2").css("display","none")
+                    $('#submit').removeClass('disabled')
+                }
+                
+            }
+           
+        }else{
+            // getGraph(medicalTermDefaultMap[select_type],select_type)
+            $('#submit').removeClass('disabled')
+        }
+    })
+})
+
+//设置默认值
+setDefaultVal(medicalTermDefaultMap[select_type])
+// $(".tabItem").click(function(){
+//     const selectType = $(this).attr("data-type")
+//     const selectName = $(this).attr("data-name")
+//     select_type = selectType
+//     select_name = selectName
+//     $(this).addClass("activeTab").siblings().removeClass("activeTab")
+//     setDefaultVal(medicalTermDefaultMap[select_type])
+
+// })
+
+function setDefaultVal(val){
+    $("#infoTxt").val(val)
+    $(".submit").click()
+}
+
+
+function renderStandrandWord(list){
+    let str = ""
+    for(let i = 0; i < list.length; i++){
+        str += `<span class="resultItem ${i === 0 ? 'resultActive':''}" data-name="${list[i].standard_word}">${list[i].standard_word}</span>`
+    }
+    if(list.length === 0){
+        str="暂无结果～"
+        $(".emptyBox").css("display","block")
+    }
+    $(".mapResult").html(str)
+    bindResultItemClick()
+}
+function bindResultItemClick(){
+    $(".resultItem").off("click").on("click",function(){
+        $(this).addClass("resultActive").siblings().removeClass("resultActive")
+        const name = $(this).attr("data-name")
+        getGraph(name,select_name)
+    })
+}
+//关系图
+function getGraph(val, type){
+    return post(api.getGraph,{
+        "inputStr": val,
+        "labelName": type
+    }).then(res=>{
+        if(res.data.code == 0) {
+            // select_type = select_type_noSearch
+           
+            drawGraph(res.data.data)
+            $(".emptyBox").css("display","none")
+        }else{
+           $(".emptyBox").css("display","block")
+        }
+        $('#submit').removeClass('disabled')
+        $(".emptyBox2").css("display","none")
+    })
+}
+
+
+
+function drawGraph(data,resultShowId) {
+    // var colors = [
+    //     '#FB95AF','#788083','#B2CCCF','#68BDF6','#FFD86E','#6DCE9F','#9BB2F0','#DBB7AC'
+    // ]
+    var myChart = echarts.init(document.getElementById('main'));
+    var categories = data['categories'];
+    var legends = categories.slice(2, categories.length);
+    var showLegendNum = 0;
+    let sum = 0
+    for(let i = 0; i < legends.length; i++){
+
+        sum += 2+legends[i].name.length+1
+        if(sum <= 65){
+            showLegendNum ++
+        }
+    }
+    var option = {
+        // title: { 
+        //     text: '医学知识图谱',
+        //     top: '10',
+        //     left: '10'
+        // },
+        // color:colors,
+        tooltip: {
+            formatter: function (x) {
+                return x.data.label;
+            }
+        },
+        legend: [{
+            type: 'scroll',
+            bottom: 0,
+            //  left: 0,
+             itemWidth: 8,
+             itemHeight: 8,
+             itemGap: 20,
+             width:766,
+             icon: 'circle',
+            padding:[20, 2000, 0, 2000],
+            // cursor:'pointer',
+            backgroundColor: "#FFFFFF",
+            data: legends.slice(0,showLegendNum).map(function (a) {
+                return a.name;
+            })
+        }],
+        series: [
+            {
+                type: 'graph',
+                layout: 'force',
+                cursor:'pointer',
+                categories: categories,
+                symbolSize: 80,
+                roam: 'move',
+                edgeSymbol: ['circle', 'arrow'],
+                edgeSymbolSize: [1, 5],
+                edgeLabel: {
+                    // cursor:'pointer',
+                    normal: {
+                        textStyle: {
+                            fontSize: 20
+                        }
+                    }
+                },
+                force: {
+                    repulsion: 500,
+                    gravity: 0.8,
+                    friction :0.2, //动画速度
+                    edgeLength: [4, 7],
+                    layoutAnimation : true
+                },
+                draggable: false,
+                animation: true,
+                hoverAnimation:false,
+                animationDuration:5000,
+                focusNodeAdjacency: true,
+                itemStyle: {
+                    normal: {
+                        width: 2,
+                        // color: 'target',
+                        // cursor:'pointer',
+                        curveness: 0,
+                        opacity: 1
+                    }
+                },
+                lineStyle: {
+                    normal: {
+                        width: 2,
+                        cursor:'default',
+                        color: 'target'
+                    }
+                },
+                edgeLabel: {
+                    normal: {
+                        show: true,
+                        formatter: function (x) {
+                            return x.data.value;  //横线关系
+                        }
+                    }
+                },
+                label: {
+                    normal: {
+                        show: true,
+                        textStyle: {
+                            cursor:'pointer',
+                        },
+                        color:'#1E1E1E', //label字体颜色
+                        formatter: function (x) {
+                             var tmp = x.data.label;
+                            if(tmp.length >= 12){
+                                tmp = tmp.substring(0,12);
+                                tmp = tmp + "...";
+                            }
+                            return tmp;
+                        }
+                    }
+                },
+                data: data.node,
+                links: data.links
+            }
+        ]
+    };
+    $(window).resize(function(){
+        myChart.resize(); 
+     })
+    // myChart.on('click',dataClick);
+    let selected = {}
+    myChart.on('legendselectchanged',function(obj){
+        selected = obj.selected
+    })
+    myChart.setOption(option,true);
+    if(legends.length > showLegendNum){
+        $('.legendSlideUp').toggleClass('legendSlideUp')
+        $('.legendIcon').css('display',"block")
+    }else{
+        $('.legendSlideUp').toggleClass('legendSlideUp')
+        $('.legendIcon').css('display',"none")
+    }
+    $('.legendIconImg').off("click").on('click',function(e){
+        e.stopPropagation()
+        $('.legendIconImg').toggleClass('legendSlideUp')
+        if(option.legend[0].type=='scroll'){
+            option.legend[0].type='plain'
+            option.legend[0].data = legends
+            option.legend[0].selected = selected
+        }else{
+            option.legend[0].type='scroll'
+            option.legend[0].data = legends.slice(0,showLegendNum)
+            option.legend[0].selected = selected
+        }
+       
+        myChart.setOption(option,true);
+    })
+   
+}
+
+
+// function dataClick(param){
+//     var data = param.data;
+//     console.log('data',data)
+//     const clientHei = $(window).height()
+//     const contentHei = clientHei - 80
+//     // console.log('data', data,select_type)
+//     // var nodes = option.series[0].nodes;
+//     if(data.category == 0){
+//         return
+//     }else{
+//         if(data.symbol != "circle"){
+//             return
+//         }else{
+//             if(data.type == select_type){
+//                 $('#searchInp').val(data.label)
+//                 updateTree(data.label)
+//                 getGraph(data.label,select_type);
+              
+//             }else {
+//                 let renderTabInfo = getTab(data.type) 
+//                 renderTab(renderTabInfo) 
+               
+//                 if(data.type == "疾病"){
+//                     $(".radioList").show()
+//                     $('.iconRadio').attr('src','/images/radioUnSelect.png')
+//                     $('.ICD10 img').attr('src','/images/radioSelect.png')
+//                     setTabBottomHei(1)
+//                 }else{
+//                     $(".radioList").hide()
+//                     setTabBottomHei(2)
+//                 }
+//                 select_type_noSearch = data.type
+//                 select_type = data.type
+//                 setSelectName(select_type)
+//                 $('#searchInp').val(data.label)
+//                 if(data.type == "疾病"){
+//                     getTree(1,1,data.label);
+//                     getGraph(data.label,select_type);
+//                 }else if(data.type == "药品通用名"){
+//                     getTree(0,2,data.label);
+//                     getGraph(data.label,select_type);
+//                 }else if(data.type == "症状"){
+                  
+//                     getTree(0,3,data.label);
+//                     getGraph(data.label,select_type);
+//                 }else if(data.type == "手术和操作"){
+//                     getTree(0,4,data.label);
+//                     getGraph(data.label,select_type);
+//                 }else if(data.type == "实验室检查"){
+//                     getTree(0,5,data.label);
+//                     getGraph(data.label,select_type);
+//                 }else if(data.type == "辅助检查"){
+//                     getTree(0,6,data.label);
+//                     getGraph(data.label,select_type);
+//                 }
+//             }
+//         }
+//     }
+//  }

src/js/participle.js

@@ -0,0 +1,356 @@
+const $ = require("jquery");
+require("babel-polyfill");
+require("./../css/participle.less");
+require("./../css/common.less");
+const { post, api,getUrlArgObject,ifHideLogo,typeLis,typeLisName  } = require('./api.js');
+require('./../resources/images/empty2.png');
+require('./../resources/images/iconUp.png');
+require('./../resources/images/iconDown.png');
+require('./../resources/images/syflogo.png');
+require('./../resources/images/iconClose3.png');
+require('./../css/img/icon_tu.png');
+require('./../css/img/icon_wenzi.png');
+
+const {currentIIData} = require('./data.js')
+ifHideLogo();
+function appendCurrentII(currentIIList){
+    for(let i = 0; i < currentIIList.length; i++){
+        let str = `<p class="example" id="example${i+1}" data-index=${i}>${currentIIList[i].title} <span class="exampleBtn">引用</span> <img class="iconSlide" src="./images/iconDown.png" alt="logo"></p>
+                    <div class="exampleInfo${i} exampleInfo">${currentIIList[i].content}</div>`;
+        $('.exampleList .pop-body').append(str)
+    }
+    
+    $('.example').click(function(){
+        const index1 = $(".example.selected").attr('data-index');
+        $(`.example.selected img`).attr('src','./images/iconDown.png')
+        $(`.exampleInfo${index1}`).slideUp()
+        $(".example").removeClass("selected");
+        $(this).addClass("selected");
+        const index2 = $(".example.selected").attr('data-index');
+        if($(`.exampleInfo${index2}`).css('display') === 'block'){
+            $(`.example.selected img`).attr('src','./images/iconDown.png')
+            $(".example").removeClass("selected");
+            $(`.exampleInfo${index2}`).slideUp();
+
+        }else{
+            $(`.exampleInfo${index2}`).slideDown()
+            $(`.example.selected img`).attr('src','./images/iconUp.png')
+        }
+        
+    });
+    $('.exampleBtn').click(function(e){
+        e.stopPropagation();
+        const index = $(this).parent().attr('data-index');
+        $('#infoTxt').val(currentIIList[index].content);
+        getEntityPredict();
+        $(".pop-box").hide();
+    });
+}
+
+
+
+
+
+
+$("#showEgBtn").click(function(){
+    const popShow = $(".pop-box").css('display')
+    if(popShow === 'block'){
+        $(".pop-box").hide();
+    } else{
+        $(".pop-box").show();
+    }
+    
+});
+/******弹窗事件******/
+$(".pop-cover,.pop-close,.pop-cancel").click(()=>{
+    $(".pop-box").hide();
+})
+
+
+ let svgData;
+function getEntityPredict(){
+    $("#toggleImgs").css("display","none");
+    $("#toggleImg").css("display","none");
+    $('.tableTitle').css("display","none");
+    const val = $('#infoTxt').val()
+    const param ={
+        data:[
+            {"medical_text_type": "chief_present",
+             "content": val,
+             "title": "自定义添加的属性",
+             "detail_title": "自定义添加的属性"
+             }
+    
+        ]
+
+    };
+    $("#resultBoxInfo").html(`<p style="color: #aaa;text-align: center;margin-top:50px;font-size:14px;">正在分析...</p>`);
+    $("#svg").html(`<p style="color: #aaa;text-align: center;margin-top:50px;font-size:14px;">正在分析...</p>`);
+ 
+    $(".analying").css('display','block');
+    $('table').css("display","none")
+    
+    $('.empty').hide();
+    post(api.entity_predict, param).then(res =>{
+        if(res.data.code == '0'){
+            const data = JSON.parse(res.data.data)
+            const result = data.data[0].entity_relation_object
+            const entryList  = result&&result.outputs&&result.outputs.annotation['T']
+            const relationList = result&&result.outputs&&result.outputs.annotation['R']
+            let content = result.content
+            if((JSON.stringify(entryList)!='[""]')&&(JSON.stringify(relationList)!='[""]')){
+                // getRelationList(relationList,entryList)
+                const relationListCopy = JSON.parse(JSON.stringify(relationList))
+                let enter = chageEnter(entryList)
+                let rela = chageRelation(relationList)
+                svgData = Object.assign(enter,rela,{"content":content})
+                if($("#svg").css("display") == "block"){
+                    showSvg(svgData)
+                }
+                getSchema(content,entryList)
+                getRelationList(relationListCopy,entryList)
+                $('#analy').removeClass('disabled')
+            }else{
+                // $('#analy').addClass('disabled')
+                $('#resultBoxInfo').html('')
+                $('.empty').css("display","block");
+                $('.analying').css("display","none");
+                $('.tableTitle').css("display","none");
+                $('table').css("display","none");
+            }
+        }
+    })
+}
+$("#toggleImg").click(()=>{
+    $("#resultBoxInfo").css("display","block")
+    $("#svg").css("display","none")
+    $("#toggleImgs").removeClass("activeBtn")
+    $("#toggleImg").addClass('activeBtn')
+    // $("#toggleImg").css("display","none");
+    // $("#toggleImgs").css("display","block");
+   
+
+})
+$("#toggleImgs").click(()=>{
+    $("#resultBoxInfo").css("display","none");
+    $("#svg").css("display","block")
+    $("#svg").html(`<p style="color: #aaa;text-align: center;margin-top:50px;font-size:14px;">正在生成，请稍后～</p>`);
+    
+    $("#toggleImg").removeClass("activeBtn")
+    $("#toggleImgs").addClass("activeBtn")
+    setTimeout(()=>{
+        showSvg(svgData)
+    }) 
+    // $("#toggleImgs").css("display","none");
+    // $("#toggleImg").css("display","block");
+})
+function chageEnter(data){
+    var keyMap = {
+        "name" : "text",
+        "start" : "startIndex",
+        "end" : "endIndex",
+        "id" : "categoryId",
+    };
+    for(let i = 0;i < data.length;i++){
+        let obj = data[i];
+        for(let key in obj){
+            let newKey = keyMap[key];
+            if(newKey){
+                obj[newKey] = obj[key];
+                // delete obj[key];
+            }
+            obj.color = "red"
+            obj.borderColor = "#5A8EEE"
+        }
+    }
+    data.splice(0,1)
+    return {
+        "labelCategories":data,
+        "labels":data
+    }
+}
+function chageRelation(data){
+    var keyMap = {
+        "name" : "text",
+        "from" : "fromId",
+        "to" : "toId",
+        "id" : "categoryId",
+    };
+    for(let i = 0;i < data.length;i++){
+        let obj = data[i];
+        for(let key in obj){
+            let newKey = keyMap[key];
+            if(newKey){
+                obj[newKey] = obj[key];
+            }
+            obj.id = i
+            obj.categoryId = i
+        }
+    }
+    data.splice(0,1)
+    return {
+        "connectionCategories":data,
+        "connections":data,
+    }
+}
+
+function insertStr(soure, start, newStr){   
+    return soure.slice(0, start) + newStr + soure.slice(start);
+ }
+ function getSchema(content, entryList){
+    let addNum = 0
+    for(let i = 1; i < entryList.length; i++){
+        content = insertStr(content, entryList[i].start+addNum, `<span class="star">* </span><span class="entryItem"><span class="type"><span class="trangle"></span>${entryList[i].name}</span>`)
+        addNum += 107 + entryList[i].name.length
+        if(i < entryList.length-1&&(entryList[i].end ===entryList[i+1].start)){
+            content = insertStr(content, entryList[i].end+addNum, '</span>')
+            addNum += 7
+        } else{
+            content = insertStr(content, entryList[i].end+addNum, '</span><span class="star">*</span>')
+            addNum += 34
+        }
+    }
+    $('#resultBoxInfo').html(content)
+    $("#toggleImgs").css("display","block");
+    $("#toggleImg").css("display","block");
+    $(".entryItem").click(function(){
+        let hasCheck = getUrlArgObject("num");
+        if(!hasCheck){return}
+        let txt = ($(this).html()).replace(/<span[^>]*>(.|\n)*<\/span>/gi,"")
+        let curType = $(this).find(".type").text()
+        post(api.check, {
+            "number": hasCheck,
+            "word": txt,
+            "word_type": typeLis[curType]||"transfusion"
+        }).then(res =>{
+            if(res.data.code == '0'){
+                let result = res.data.data.standard_words||[]
+                if(result.length == 0){
+                    $(".showCheck").css("display","none")
+                    return
+                }
+                let str = '',head=`
+                <tr class="head">
+                    <td>实体名称</td>
+                    <td>类型</td>
+                    <td>标准词</td>
+                </tr>`
+                for(let i = 0;i < result.length;i++){
+                    str += `<tr>
+                    <td>${txt}</td>
+                    <td>${typeLisName[curType]||'其他'}</td>
+                    <td>${result[i].standard_word}</td>
+                    </tr>`
+                }
+                if(result.length>0){
+                    $(".showCheck").css("display","block").find(".table").html(head+str)
+                    $(".showCheck img").click(function(){
+                        $(this).parent().css("display","none")
+                    })
+                }
+            }
+        })
+    })
+}
+function getRelationList(relationList,entryList){
+   
+    let str = ''
+    for(let i = 1; i < relationList.length; i++){
+        const relationItem = relationList[i]
+        const relationName = relationList[i].name
+        const entry1 = entryList.find(item => item.id === relationList[i].from).value
+        const entry2 = entryList.find(item => item.id === relationList[i].to).value
+        str += `<tr>
+            <td class="entry1">${entry1}</td>
+            <td class="relationType">${relationName}</td>
+            <td class="entry2">${entry2}</td>
+        </tr>`
+    }
+    if(str){
+        $('.empty').css("display","none");
+        $('.analying').css("display","none")
+        $('table').css("display","table")
+        $('.tableTitle').css("display","block")
+    }else{
+        $('.tableTitle').css("display","none")
+        $('.tableBox .empty').css("display","block");
+        $('.analying').css("display","none")
+    }
+    $('.relationBody').html(str)
+}
+
+$("#analy").click(function(){
+    const val = $("#infoTxt").val().trim()
+    if(val){
+        getEntityPredict()
+    }
+})
+getMrInfo()
+function getMrInfo(){
+    post(api.getMrInfo, {}).then(res =>{
+        if(res.data.code == '0'){
+            const MrInfoList = res.data.data
+            const initData = MrInfoList[0].content
+            initTxtData(initData)
+            const currentIIList = MrInfoList&&MrInfoList.slice(1,MrInfoList.length)
+            appendCurrentII(currentIIList)
+        }
+    })
+}
+
+function initTxtData(data){
+    $('#infoTxt').val(data)
+    getEntityPredict();
+}
+
+$("#infoTxt").bind("input propertychange",function(event){
+    const val = $("#infoTxt").val().trim();
+    if(!val){
+        $('#analy').addClass('disabled')
+        $('#resultBoxInfo').html('')
+        $('.empty').css("display","block");
+        $('table').css("display","none")
+        $('.tableTitle').css("display","none");
+        $("#toggleImgs").css("display","none");
+        $("#toggleImg").css("display","none");
+    }else{
+        $('#analy').removeClass('disabled')
+    }
+});
+
+function showSvg(data){
+    $("#svg").html("")//防止页面不渲染
+    const poplar = require('poplar-annotation');
+    const {Annotator} = poplar;
+    const elm = document.getElementById("svg");
+    new Annotator(data,elm,{
+        contentEditable:false,
+        unconnectedLineStyle:"none",
+        labelPadding:3,
+        topContextMargin:-2,
+        bracketWidth:5,
+        labelWidthCalcMethod:'label'
+    });
+}
+
+function IEVersion() {
+    // 取得浏览器的userAgent字符串
+    var userAgent = navigator.userAgent;
+    // 判断是否为小于IE11的浏览器
+    var isLessIE11 = userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1;
+    // 判断是否为IE的Edge浏览器
+    var isEdge = userAgent.indexOf('Edge') > -1 && !isLessIE11;
+    // 判断是否为IE11浏览器
+    var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf('rv:11.0') > -1;
+    if (isLessIE11) {
+        return true
+    } else if (isIE11) {
+        return true
+    } else {
+        return false
+    }
+}
+if(IEVersion()){
+    $("#toggleImg").css("display","none")
+    $("#toggleImgs").css("display","none")
+}

src/js/qaPage.js

@@ -0,0 +1,40 @@
+require("./../css/common.less");
+require("./../css/qaPage.less");
+const { post, api,ifHideLogo } = require('./api.js');
+const $ = require("jquery");
+
+(function(){
+    ifHideLogo();
+  $("#analy").click(function(){
+    getAnswer();
+  });
+  $("#infoTxt").bind("input propertychange",function(event){
+    const val = $("#infoTxt").val().trim();
+    if(!val){
+      $('#analy').addClass('disabled')
+      $('#resultBoxInfo').html('');
+      $('.empty').css("display","block");
+    }else{
+      $('#analy').removeClass('disabled')
+    }
+  });
+
+  function getAnswer(){
+    const qa = $("#infoTxt").val().trim();
+    if(!qa)return;
+    $('#resultBoxInfo').html(`<p class="loading">正在检索中…</p>`);
+    $('.empty').css("display","none");
+    post(api.getAnswer, {question:qa}).then(res =>{
+      const data=res.data;
+      if(data.code==="0"){
+        const ans = data.data.answer;
+        $('#resultBoxInfo').html(ans);
+        $('.empty').css("display","none");
+      }else{
+        $('#resultBoxInfo').html('');
+        $('.empty').css("display","block");
+        $('.analying').css("display","none");
+      }
+    });
+  }
+})();

src/js/schemaMap.js

@@ -0,0 +1,539 @@
+const echarts = require("echarts");
+const { post, api } = require('./api.js');
+const iconUp = require('./../resources/images/iconUp.png');
+const iconDown = require('./../resources/images/iconDown.png');
+
+const clientHei = $(window).height()
+const contentHei = clientHei - 80
+
+function getTree(subType, type,showNodeName){
+    post(api.getTree,
+        {
+            "subType": subType,
+            "type": type
+        }
+    ).then(res=>{
+        if(res.data.code == 0) {
+            const data = res.data.data
+            drawTree(data,showNodeName)
+        }
+    })
+}
+function drawTree(data, showNodeName){
+    /**
+        属性说明  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)]
+            
+    **/
+    var setting = {	
+        //数据格式的设置
+        data:{
+            simpleData: {
+                enable: true, //使用简单的JSON格式
+                idKey: "id",
+                pIdKey: "pId",
+                rootPId: ""
+            },
+        },
+        //树的显示设置
+        view:{
+            showLine:true, //设置是否显示连线 默认为true
+            showTitle: true,//设置是否显示鼠标悬浮时显示title的效果
+            dblClickExpand: true,//设置是否支持双击展开树节点
+            fontCss : {color:"#333"},//设置节点样式  
+            expandSpeed: "normal",//设置展开的速度  fast normal  slow 
+            nameIsHTML: true,//名字是否是HTML
+            selectedMulti: true,
+            
+        },
+        //设置事件回调
+        callback:{
+            onClick: function (treeId, treeNode) {
+                const selectPId = $('.curSelectedNode').attr('id')
+                if(selectPId){
+                    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) {
+                    zTree.expandNode(treeNode);
+                    return false;
+                } else {
+                    const treeNodeName = treeNode.name
+                    let index = treeNodeName.indexOf(' ')
+                    const name = treeNodeName.substring(index+1)
+                    if(select_type != select_type_noSearch){
+                        select_type_noSearch = select_type
+                        setSelectName(select_type)
+                    }
+                    getSchema(name,select_type)
+                    const selectPId = $('.curSelectedNode').attr('id')
+                    if(selectPId){
+                        const selectId = selectPId.substring(0,selectPId.length-1) + 'ico'
+                        $('#'+selectId + ' .iconSelect').remove()
+                    }
+             
+                    return true;
+                }
+            }
+        }
+    };
+    var zNodes = data.nodes;
+    // var zNodes = zTreeData.nodes; 
+    $.fn.zTree.init($("#tree"), setting, zNodes);
+    if(showNodeName) {
+        updateTree(showNodeName)
+
+    }
+}
+
+function getNode(val, type){
+    post(api.getNode,
+        {
+            "inputStr": val,
+            "labelName": type
+        }
+    ).then(res=>{
+        if(res.data.code == 0) {
+            const data = res.data.data
+            let nodeStr =''
+            if(data.length > 0){
+                for(let i = 0; i < data.length; i++){
+                    nodeStr +=`<li class="ellipsis nodeItem" title=${data[i].name}>${data[i].name}</li>`
+                }
+            }else{
+                nodeStr = '<li class="ellipsis">暂无符合数据</li>'
+            }
+            $(".tabNameList").html(nodeStr)
+            $(".tabNameList").show()
+            $(".tabNameList li").click(function(){
+                const txt = $(this).text()
+                if(txt !="暂无符合数据"){
+                    $('#searchInp').val(txt)
+                }
+                const clientHei = $(window).height()
+                const contentHei = clientHei - 80
+                $(".tabNameList").hide()
+                getSchema(txt,select_type_noSearch).then(()=>{
+                    if(!window.refreshTree){
+                        return
+                    }
+                        select_type = select_type_noSearch
+                        
+                        if(select_type == '疾病'){
+                            // $('#searchInp').val("高血压3级")
+                            getTree(1,1,txt);
+                        }else if(select_type == '药品通用名'){
+                            getTree(0,2,txt);
+                        }else if(select_type == '症状'){
+                            getTree(0,3,txt);
+                        }else if(select_type == '手术和操作'){
+                            getTree(0,4,txt);
+                        }else if(select_type == '实验室检查'){
+                            getTree(0,5,txt);
+                        }else if(select_type == '辅助检查'){
+                            getTree(0,6,txt);
+                        }
+                        if(select_type == '疾病'){
+                            $('.iconRadio').attr('src','/images/radioUnSelect.png')
+                            $('.ICD10 img').attr('src','/images/radioSelect.png')
+                            $(".radioList").show()
+                            setTabBottomHei(1)
+                        }else{
+                            $(".radioList").hide()
+                            setTabBottomHei(2)
+                        }
+                        let renderTabInfo = getTab(select_type) 
+                        renderTab(renderTabInfo)
+                   
+                })
+
+
+               
+            })
+        }
+    })
+}
+
+function updateTree(keyWord, txt) {
+    var t = $("#tree");
+        // if(zNodes&& zNodes.length > 0 && zNodes[0]['name'].indexOf(txt) != -1){
+        //     $.fn.zTree.init(t, setting, zNodes);
+        //     var zTree = $.fn.zTree.getZTreeObj("tree");
+        //     zTree.selectNode(zTree.getNodeByParam("name", keyWord));
+        // }else {
+        var tree_select = document.getElementsByClassName("tree_selected");
+        for(i = 0; i < tree_select.length; i++){
+            tree_select[i].className = "tree_button";
+        }
+        var tree_button = document.getElementsByClassName("tree_button");
+        for(i = 0; i < tree_button.length; i++){
+            if(tree_button[i].text == txt){
+                tree_button[i].className = "tree_selected";
+            }
+        }
+        if(txt != "疾病"){
+            $("#radio").hide();
+        }else {
+             $("#radio").show();
+        }
+        selectedNode = keyWord;
+        var data = {"name":'tree'};
+        var zTree = $.fn.zTree.getZTreeObj("tree");
+                zTree.selectNode(zTree.getNodeByParam("name", keyWord));
+                const selectPId = $('.curSelectedNode').attr('id')
+                if(selectPId){
+                    const selectId = selectPId.substring(0,selectPId.length-1) + 'ico'
+                    $('.iconSelect').remove()
+                    $('#'+selectId).append('<img class="iconSelect" src="./images/iconSelect.png">')
+                }
+                
+}
+
+function getSchema(val, type){
+    return post(api.getSchema,{
+        "labelName": type,
+        "pramNme": val
+    }).then(res=>{
+        if(res.data.code == 0) {
+            if(res.data.data.length >0){
+                $('#searchInp').val(val)
+                window.refreshTree = true
+                window.schemaTxt = val
+                drawSchema(res.data.data)
+                if(type != select_type){
+                    select_type = type
+                    let renderTabInfo = getTab(type) 
+                    renderTab(renderTabInfo) 
+                  
+                }
+            }else{
+                let nodeStr
+                window.refreshTree = false
+                nodeStr = '<li class="ellipsis">暂无符合数据</li>'
+                $(".tabNameList").html(nodeStr)
+                $(".tabNameList").show()
+            }
+        }else{
+            let nodeStr
+            window.refreshTree = false
+            nodeStr = '<li class="ellipsis">暂无符合数据</li>'
+            $(".tabNameList").html(nodeStr)
+            $(".tabNameList").show()
+        }
+    })
+}
+ function drawSchema(data){
+    var myChart = echarts.init(document.getElementById('main'));
+    myChart.setOption(option = {
+        title: { 
+            text: 'schema 结构',
+            top: '10',
+            left: '10'
+        },
+        tooltip: {
+            show:'true',//默认：true；是否显示提示框组件，包括提示框浮层和 axisPointer。
+            trigger: 'item',//默认：item；触发类型。item：数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。'axis'：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。'none':什么都不触发。
+            triggerOn: 'mousemove',
+            // borderColor: '#abcdef'
+        },
+        series:[
+            {
+                type: 'tree',
+                cursor:'pointer',
+                data: data,
+    
+                left: '105px',
+                right: '100px',
+                top: '15%',
+                bottom: '10%',
+    
+                // symbol: 'emptyCircle',
+                itemStyle:{
+                    // borderColor: '#abcdef'
+                },
+                // orient: 'vertical',
+                symbolSize:10,   //标记的大小，就是那个小圆圈，默认7
+                expandAndCollapse: true,//默认：true；子树折叠和展开的交互，默认打开 。
+    
+                initialTreeDepth:1,//默认：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: '#333',
+                        padding: [5,5,5,5],
+                        formatter: function (x) {
+                            var tmp = x.data.name;
+                           if(tmp.length >= 12){
+                               tmp = tmp.substring(0,3);
+                               tmp = tmp + "...";
+                           }
+                           return tmp;
+                       }
+                    },
+                    
+                },
+    
+                leaves: {
+                    cursor:'pointer',
+                    label: {
+                      
+                        normal: {
+                            position: ['-100%',5],
+                            // color:' red',
+                            rotate:0,
+                            cursor:'default',
+                            verticalAlign: 'middle',
+                            align: 'right',
+                            fontSize: 12,//文字的字体大小
+                            formatter: function (x) {
+                                var tmp = x.data.name;
+                               if(tmp.length >= 12){
+                                   tmp = tmp.substring(0,3);
+                                   tmp = tmp + "...";
+                               }
+                               return tmp;
+                           }
+                           
+                        },
+                        
+                    }
+                },  
+    
+                animationDurationUpdate: 750
+                
+            }
+        ]
+    })
+    $(window).resize(function(){
+        myChart.resize(); 
+     })
+    myChart.setOption(option);
+ }
+
+
+ function getTab(tabName){
+    console.log('tabName', tabName)
+    let tabList = ["疾病","药品通用名","症状","手术和操作","实验室检查","辅助检查"]
+    let tabListCopy = tabList.slice()
+    const index = tabList.findIndex(item => item == tabName)
+  
+    if(index <= 3){
+        return {
+            activeIndex: index,
+            showTabList:tabListCopy.slice(0,4),
+            hideTabList:tabListCopy.slice(4)
+        }
+    }else{
+        tabListCopy.splice(index,1)
+        let hideTabList = tabListCopy.slice(3)
+        
+        return {
+            activeIndex: 3,
+            showTabList:tabListCopy.slice(0,3).concat(tabName),
+            hideTabList:hideTabList
+        }
+    }
+}
+
+function renderTab(data){
+    const showList = data.showTabList
+    const hideList = data.hideTabList
+    const activeIndex = data.activeIndex
+    let showtabStr = ``
+    let hidetabStr = ``
+    for(let i = 0; i < showList.length; i++){
+        showtabStr +=`    <span class="tab ${i === activeIndex ? 'activeTab':''}" data-id="${showList[i]}">${showList[i] =="药品通用名" ?"药品":showList[i]}</span>`
+        if(i === activeIndex){
+            if(showList[i] =="药品通用名"){
+                $("#searchInp").attr("placeholder",`请输入药品名称`)
+            }else{
+                $("#searchInp").attr("placeholder",`请输入${showList[i]}名称`)
+            }
+        }
+        
+    }
+    for(let i = 0; i < hideList.length; i++){
+        hidetabStr +=`<span class="tab " data-id="${hideList[i]}">${hideList[i]}</span>`
+    }
+    hidetabStr += `<div class="toggleTab">
+        <span class="toggleTabTxt">收起</span>
+        <img class="toggleArrow" src="./images/iconUp.png" alt="">
+    </div>`
+    // console.log('showtabStr',showtabStr)
+    
+    $('.showTabList').html(showtabStr)
+    $('.hideTabList').html(hidetabStr)
+    bindTabClick()
+    ToggleTab()
+}
+ToggleTab()
+function ToggleTab(){
+    $(".toggleTab").off("click").click(function(e){
+        e.stopPropagation()
+        hideSlide("hideTabList")
+        const hideTabDis = $(".hideTabList").css("display")
+        if(hideTabDis == "none"){
+            showHideTab()
+        }else{
+            hideHideTab()
+        }
+    })
+}
+function showHideTab(){
+    $(".hideTabList").show()
+    $(".tabList").addClass("tabListShow")
+    $(".toggleTab").css("display","none")
+    $(".hideTabList .toggleTab").css("display","inline-block")
+    // $(".toggleTabTxt").html("收起")
+    // $(".toggleArrow").attr("src",iconUp)
+}
+function hideHideTab(e){
+    $(".hideTabList").hide()
+    // $(".toggleTabTxt").html("展开")
+    // $(".toggleArrow").attr("src",iconDown)
+    $(".toggleTab").css("display","block")
+    $(".tabList").removeClass("tabListShow")
+    
+    
+}
+bindTabClick()
+//切换tab
+function bindTabClick(){
+    $('.tabList .tab').click(function(){
+        const id = $(this).attr('data-id')
+        $(this).addClass("activeTab").siblings().removeClass('activeTab')
+        let renderInfo = getTab(id) 
+        renderTab(renderInfo)
+        if(id != select_type){
+            if(id != "疾病"){
+                $(".radioList").hide()
+                setTabBottomHei(2)
+            }else{
+                setTabBottomHei(1)
+                $(".radioList").show()
+            }
+            select_type_noSearch = id
+            select_type = id
+            setSelectName(select_type)
+           
+            if(id == "疾病"){
+               
+                $('#searchInp').val("高血压3级")
+                $('.iconRadio').attr('src','/images/radioUnSelect.png')
+                $('.ICD10 img').attr('src','/images/radioSelect.png')
+                getTree(1,1,"胆囊炎");
+                getSchema("胆囊炎",select_type);
+            
+            
+            }else if(id=="药品通用名"){
+                $('#searchInp').val("地高辛(XC01AAD072A001010100372)")
+                getTree(0,2,"地高辛(XC01AAD072A001010100372)");
+                getSchema("地高辛(XC01AAD072A001010100372)",select_type);
+              
+            }else if(id == "症状"){
+                $('#searchInp').val("背痛")
+                getTree(0,3,"背痛");
+                getSchema("背痛",select_type);
+            }else if(id == "手术和操作"){
+                $('#searchInp').val("动脉缝合术")
+                getTree(0,4,"动脉缝合术");
+                getSchema("动脉缝合术",select_type);
+            }else if(id == "实验室检查"){
+                $('#searchInp').val("白细胞计数(WBC)")
+                getTree(0,5,"白细胞计数(WBC)");
+                getSchema("白细胞计数(WBC)",select_type);
+            }else if(id == "辅助检查"){
+                $('#searchInp').val("肝彩超")
+                getTree(0,6,"肝彩超");
+                getSchema("肝彩超",select_type);
+            }
+            // getTree(1,1,"");  //切换tab重新画菜单树
+        }
+       
+        hideHideTab()
+    })
+}
+function setTabBottomHei(type){
+    const clientHei = $(window).height()
+    const contentHei = clientHei - 80
+    if(type==1){
+        $(".tabBottom").css({
+            'margin': '0px 0px 0px 0px'
+        })
+        $(".tabBottom").css("height",contentHei-80-43-10+12+'px')
+        $(".ztree").css("height",contentHei-80-43-60-20-24+12+'px')
+
+    }else if(type == 2){
+        $(".tabBottom").css("height",contentHei-80-43-10-20+12+'px')
+        $(".tabBottom").css({
+            'margin': '20px 0px 0px 0px'
+        })
+        $(".ztree").css("height",contentHei-80-43-20-20-20+12+'px')
+    }
+ }
+ function setSelectName(name){
+    if(name=="药品通用名"){
+        $('.selectedName').html("药品")
+        $('.selectedName').attr("title","药品")
+        $("#searchInp").attr("placeholder",`请输入药品名称`)
+    }else{
+        $('.selectedName').attr('title', name)
+        $("#searchInp").attr("placeholder",`请输入${name}名称`)
+        if(name.length > 4){
+            $('.selectedName').html(name.slice(0,4)+'...')
+        }else{
+            $('.selectedName').html(name)
+        }
+       
+    }
+ }
+
+ function hideSlide(expectClass){
+    let hideSlideList = ['selectList', 'tabNameList','tabNameListNoSearch','hideTabList']
+    let index = hideSlideList.findIndex(item => item == expectClass)
+    for(let i = 0; i < hideSlideList.length; i++){
+        if(i != index){
+            if(hideSlideList[i] == "selectList"){
+                $('.'+hideSlideList[i]).hide()
+                $('.iconSlide').attr('src','./images/iconSlideDown.png')
+            }else if(hideSlideList[i] == "hideTabList"){
+                hideHideTab()
+            }else{
+                $('.'+hideSlideList[i]).hide()
+            }
+        }
+    }
+ }
+ module.exports ={
+    getSchema,
+    getTree,
+    updateTree,
+    getNode,
+    getTab,
+    renderTab,
+    setTabBottomHei,
+    setSelectName,
+    hideHideTab,
+    hideSlide
+ }

src/js/utils.js

@@ -0,0 +1,12 @@
+const medicalTermDefaultMap={
+    "disease":"高血压3级",
+    "symptom":"背痛",
+    "operation":"动脉缝合术",
+    "drug":"地辛高",
+    "lis":"白细胞计数",
+    "pacs":"肝彩超",
+}
+
+module.exports ={
+    medicalTermDefaultMap
+}

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

@@ -0,0 +1,112 @@
+/*-------------------------------------
+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:14px;}
+/* .ztree * { 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; position: relative; left:0px;}
+
+.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_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)}
+.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:19px; 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;margin-top:3px; background-position:-110px -16px; vertical-align:top; *vertical-align:middle}
+.ztree li span.button.ico_close{margin-right:2px;margin-top:3px; background-position:-110px 0; vertical-align:top; *vertical-align:middle}
+.ztree li span.button.ico_docu{margin-right:2px;margin-top:3px; background-position:-110px -32px; vertical-align:top; *vertical-align:middle}
+.ztree li span.button.edit {margin-right:2px;margin-top:3px; background-position:-110px -48px; vertical-align:top; *vertical-align:middle}
+.ztree li span.button.remove {margin-right:2px;margin-top:3px; 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;
+}*/
+.ztree li span.button.switch{
+	display:none;
+}
+.node_name{
+	display: inline-block;
+	max-width: 264px;
+	overflow: hidden;
+    text-overflow:ellipsis;
+    white-space: nowrap;
+}
+.node_name:hover{
+	border-bottom: 1px solid #333;
+}

webpack.config.js

@@ -0,0 +1,219 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CleanWebpackPlugin = require('clean-webpack-plugin') // 清空打包目录的插件
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const webpack = require('webpack');
+const proxyHost = "http://173.18.12.192:8775";
+// const proxyHost = "http://192.168.3.113:5050";
+module.exports = {
+  entry: {
+    index: path.resolve(__dirname, 'src/js', 'index.js'),
+    knowledgeTree: path.resolve(__dirname, 'src/js', 'knowledgeTree.js'),
+    participle: path.resolve(__dirname,'src/js', 'participle.js'),
+    qaPage:path.resolve(__dirname,'src/js', 'qaPage.js'),
+    medicalTermMap:path.resolve(__dirname,'src/js', 'medicalTermMap.js'),
+    vendor: 'lodash'// 多个页面所需的公共库文件，防止重复打包带入
+  },
+  output: {
+    publicPath: '/', //这里要放的是静态资源CDN的地址
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'js/[name].js'
+  },
+  resolve: {
+    extensions: [".js", ".css", ".json"],
+    alias: {} //配置别名可以加快webpack查找模块的速度
+  },
+  plugins: [// 多入口的html文件用chunks这个参数来区分
+    new HtmlWebpackPlugin({
+      title: '医学知识图谱',
+      template: path.resolve(__dirname, 'src/html', 'knowledgeGraph.html'),
+      filename: 'knowledgeGraph.html',
+      chunks: ['index', 'vendor', 'common'],
+      inject: true,
+      hash: true, //防止缓存
+      minify: {
+        removeAttributeQuotes: true, //压缩 去掉引号
+        removeComments: true, //移除HTML中的注释
+        collapseWhitespace: true //删除空白符与换行符
+      }
+    }),
+    new HtmlWebpackPlugin({
+        title: '描述框架',
+        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 HtmlWebpackPlugin({
+        title: '电子病历信息抽取',
+        template: path.resolve(__dirname, 'src/html', 'participle.html'),
+        filename: 'participle.html',
+        chunks: ['participle', 'vendor', 'common'],
+        inject: true,
+        hash: true, //防止缓存
+        minify: {
+          removeAttributeQuotes: true, //压缩 去掉引号
+          removeComments: true, //移除HTML中的注释
+          collapseWhitespace: true //删除空白符与换行符
+        }
+      }),
+      new HtmlWebpackPlugin({
+        title: '智能问答',
+        template: path.resolve(__dirname, 'src/html', 'qaPage.html'),
+        filename: 'qaPage.html',
+        chunks: ['qaPage', 'vendor', 'common'],
+        inject: true,
+        hash: true, //防止缓存
+        minify: {
+          removeAttributeQuotes: true, //压缩 去掉引号
+          removeComments: true, //移除HTML中的注释
+          collapseWhitespace: true //删除空白符与换行符
+        }
+      }),
+      new HtmlWebpackPlugin({
+        title: '医学术语映射',
+        template: path.resolve(__dirname, 'src/html', 'medicalTermMap.html'),
+        filename: 'medicalTermMap.html',
+        chunks: ['medicalTermMap', 'vendor', 'common'],
+        inject: true,
+        hash: true, //防止缓存
+        minify: {
+          removeAttributeQuotes: true, //压缩 去掉引号
+          removeComments: true, //移除HTML中的注释
+          collapseWhitespace: true //删除空白符与换行符
+        }
+      }),
+      new CopyWebpackPlugin([
+        {
+          from:'src/resources',
+          to:path.resolve(__dirname,'dist','resources'),
+          flatten:true,   //false会拷贝原始文件夹路径
+        }
+      ]),
+      new MiniCssExtractPlugin({
+        filename: 'css/[name].css',
+        chunkFilename: '[id].css'
+      }),
+      new webpack.ProvidePlugin({
+          $: 'jquery',
+          jQuery: 'jquery',
+          'window.jQuery': 'jquery'
+      }),
+      new webpack.HotModuleReplacementPlugin(),
+      new CleanWebpackPlugin(),
+      new ExtractTextPlugin("stylesheets/[name].css"),
+  ],
+  optimization: { //webpack4.x的最新优化配置项，用于提取公共代码
+    minimizer: [
+      new UglifyJsPlugin({
+        uglifyOptions: {
+          ie8: true,
+          compress: {
+            properties: false,
+            warnings: false
+          },
+          mangle: {
+            screw_ie8: false,
+            except: ['e']
+          },
+          output: {
+              beautify: true
+          },
+          sourceMap: false
+        }
+      })
+    ],
+    splitChunks: {
+      cacheGroups: {
+        commons: {
+          chunks: "initial",
+          name: "common",
+          minChunks: 2,
+          maxInitialRequests: 5, // The default limit is too small to showcase the effect
+          minSize: 0, // This is example is too small to create commons chunks
+          reuseExistingChunk: true // 可设置是否重用该chunk
+        }
+      }
+    }
+  },
+      
+  module: {
+    rules: [
+      {
+          test: /.js$/,
+          enforce: 'post', 
+          loader: 'babel-loader'
+      },
+      {
+        test: /\.m?js$/,
+        exclude: /(node_modules|bower_components)/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets:['@babel/preset-env']
+          }
+        }
+      },
+      {
+        test: /\.css$/,
+        use:ExtractTextPlugin.extract({
+          use: [
+          // {
+          //   loader: MiniCssExtractPlugin.loader
+          // },
+          'css-loader'
+        ]
+        })
+      },
+      {
+        test: /\.less$/,
+        use: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: [
+              // {
+              //   loader: 'style-loader', // creates style nodes from JS strings
+              // },
+              {
+                loader: 'css-loader', // translates CSS into CommonJS
+              },
+              {
+                loader: 'less-loader', // compiles Less to CSS
+              },
+            ],
+          })
+        
+      },
+      { 
+        test: /\.(png|jpg|jpeg|gif|svg)$/,
+        use: {
+          loader: 'file-loader',
+          options: {
+            outputPath: 'images/', // 图片输出的路径和存储路径保持一致
+            limit: 10000,
+            name: '[name].[ext]'
+          }
+        }
+      }
+    ]
+  },
+  // devtool: 'cheap-module-eval-source-map', //开发环境cheap-module-eval-source-map   //生产环境cheap-module-source-map
+  mode: 'development',
+  devServer: {
+    contentBase: "./dist", //静态文件根目录
+    proxy: {
+      '/': proxyHost
+    },
+    hot: true,
+    openPage:'knowledgeGraph.html'
+    
+  }
+}