自构建图谱更新

src/css/knowledgeUpdate.less

@@ -329,7 +329,7 @@
     width: 359px;
     // float: right;
     height: 100% !important;
-    // position: absolute;
+    position: relative;
     // right: 0px;
     border-left: 1px dotted #000;
     box-sizing: border-box;

src/css/selfKnowledgeGraph.less

@@ -38,6 +38,23 @@
     }
   }
   }
+  .back {
+    position: absolute;
+    top: 10px;
+    left: 130px;
+    z-index: 1000;
+    color:#40a1ff;
+    background-color: #eef6ff;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    padding: 5px 10px;
+    cursor: pointer;
+    &:hover {
+      background-color: #40a1ff;
+      color: #fff;
+    }
+
+  }
 
 
 }

src/css/selfKnowledgeUpdate.less

@@ -1,30 +1,12 @@
-#app {
-  width: 100%;
-  height: 100%;
-
-  .kg-list {
-    li {
-      display: flex;
-
-      .index {
-        flex: 0 0 50px;
-      }
-
-      .name {
-        flex: 0 0 100px;
-      }
-
-      .op {
-        flex: 0 0 50px;
-      }
-    }
-  }
+// #app {
+  // width: 100%;
+  // height: 100%;
   .main-box {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     .knowledgeCard {
-      margin: 20px;
+    margin: 20px;
     width: 300px;
     height: 200px;
     text-align: center;
@@ -40,4 +22,554 @@
   }
 
 
+// }
+.knowledgeMapWrapper.knowledgeUpdate {
+  min-width: 1200px;
+  height: 100%;
+  // background: url("../images/bg2.png");
+  background-size: cover;
+  padding-top: 0px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0px 7px 14px 2px rgba(211, 211, 211, 0.3);
+  border-radius: 10px 10px 0px 0px;
+
+
+  .contextmenu,
+  .contextmenu-edge,
+  .contextmenu-node {
+    position: fixed;
+    display: none;
+    width: auto;
+    padding: 10px 20px;
+    border: 1px solid #E7E7E7;
+    z-index: 100;
+    background-color: white;
+    border-radius: 10px;
+    font-size: 20px;
+    font-weight: Regular;
+    box-sizing: border-box;
+
+    ul {
+      .contextmenu-item {
+        margin-bottom: 10px;
+        color: #6D6D6D;
+        cursor: default;
+
+        &:last-child {
+          margin-bottom: 0px;
+        }
+
+        &:hover {
+          color: #0793FF;
+        }
+      }
+    }
+  }
+
+  .contextmenu-node,
+  .contextmenu-edge {
+    width: 138px;
+  }
+
+  .topbar {
+    height: 78px;
+    flex: 0 0 auto;
+    box-sizing: border-box;
+    border-bottom: 1px solid #D9D9D9;
+    padding: 0px 23px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .dropdown {
+      position: relative;
+
+      .selectedData {
+        flex-grow: 1;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+
+      .selectList {
+        background-color: #FFFFFF;
+        top: 41px;
+        position: absolute;
+        display: none;
+        max-height: 500px;
+        min-width: 100%;
+        // width: 100%;
+        left: -1px;
+        z-index: 15;
+        border: 1px solid #E7E7E7;
+        // box-sizing: border-box;
+
+        .selectItem {
+          // margin-bottom: 26px;
+          padding: 13px 23px;
+          white-space: nowrap;
+
+          &:hover {
+            color: #00A6F5;
+          }
+
+          &:last-child {
+            padding-bottom: 26px;
+          }
+
+          &:first-child {
+            padding-top: 26px;
+          }
+        }
+      }
+    }
+
+    .topbar-left {
+      display: flex;
+      flex-wrap: nowrap;
+
+      .item-box-1 {
+        width: 175.6px;
+        height: 40px;
+        color: #333333;
+        font-weight: Regular;
+        font-size: 20px;
+        border: 1px solid #E7E7E7;
+        padding: 0px 22px;
+        margin-right: 19px;
+        display: flex;
+        align-items: center;
+        // justify-content: space-between;
+        cursor: pointer;
+        box-sizing: border-box;
+
+        .icon-triangle-down {
+          margin-left: auto;
+        }
+
+        &:last-child {
+          margin-right: 0px;
+        }
+      }
+    }
+
+    .topbar-right {
+      display: flex;
+      flex-wrap: nowrap;
+
+      .topbar-right-item {
+        display: flex;
+        flex-wrap: nowrap;
+        align-items: center;
+
+        .label {
+          line-height: 40px;
+          font-weight: Regular;
+          font-size: 20px;
+          margin: 0px 22px;
+        }
+
+        .item-box-2 {
+          width: 112.9px;
+          height: 40px;
+          color: #333333;
+          font-weight: Regular;
+          font-size: 20px;
+          border: 1px solid #E7E7E7;
+          padding: 0px 22px;
+          margin-right: 19px;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          cursor: pointer;
+          box-sizing: border-box;
+
+          .icon-triangle-down {
+            // margin-left: auto;
+          }
+
+          &:last-child {
+            margin-right: 0px;
+          }
+
+        }
+
+        .search {
+          margin-left: 28px;
+        }
+      }
+
+    }
+  }
+
+
+
+  .content {
+    // position: relative;
+    width: 100%;
+
+    // left: 0;
+    // flex: 1 1 auto;
+    height: calc(100% - 78px);
+    // margin-left: -600px;
+    cursor: default;
+    white-space: nowrap;
+    // border: 1px #6794A8 dotted;
+    box-sizing: border-box;
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+  }
+
+  .left {
+    // float: left;
+    background: #FFFFFF;
+    height: 100% !important;
+    margin: 0px;
+    // position: absolute;
+    // border-right: none;
+    // width: calc(100% - 394px);
+    box-sizing: border-box;
+    flex-grow: 1;
+    position: relative;
+
+    #main {
+      // width: 796px;
+      height: 100% !important;
+      cursor: pointer;
+      background-color: #FFFFFF;
+      position: relative;
+      white-space: nowrap;
+      box-sizing: border-box;
+      -webkit-font-smoothing: antialiased;
+      /* 开启字体平滑 */
+      -moz-osx-font-smoothing: grayscale;
+      /* 为 Firefox 设置字体平滑 */
+    }
+
+    .legendIcon {
+      position: absolute;
+      display: none;
+      width: 34px;
+      height: 24px;
+      bottom: 0px;
+      right: 10px;
+      // left: 0;
+      // border-top: 1px dotted black;
+      /*background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);*/
+    }
+
+    .category-num {
+      position: absolute;
+      width: 34px;
+      height: 24px;
+      bottom: 0px;
+      right: 35px;
+      color: #dd7172;
+    }
+
+    .legendIconImg {
+      width: 34px;
+      height: 24px;
+      // border-radius: 50%;
+      // position: absolute;
+      // right: 0px;
+      // top: 0px;
+      cursor: pointer;
+    }
+
+    .record {
+      position: absolute;
+      top: 10px;
+      left: 10px;
+      padding: 5px;
+      width: 100px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border: 1px solid #E7E7E7;
+      // box-sizing: border-box;
+      border-radius: 2px;
+
+      .selectedData {
+        position: relative;
+        z-index: 10;
+        overflow: visible;
+      }
+
+      /* 让子元素能够超出父元素的边界 */
+      .selectList-record {
+        position: absolute;
+        top: 34px;
+        left: 0px;
+        min-width: 100%;
+        max-width: 300px;
+        border: 1px solid skyblue;
+        padding: 0 5px;
+        display: none;
+        background-color: #fff;
+        box-sizing: border-box;
+
+        /* 强制元素创建新的堆叠上下文 */
+        &>.selectItem-record {
+          padding: 5px 0px;
+          text-overflow: ellipsis;
+          cursor: pointer;
+
+          &:hover {
+            color: #0071E7;
+          }
+        }
+      }
+
+    }
+
+    .legendIconImg {
+      background: url('./img/direct4@2x-2.png') no-repeat;
+      background-size: 34px 24px;
+    }
+
+    .legendIconImg:hover {
+      background: url('./img/direct4@2x-2.png') no-repeat;
+      background-size: 34px 24px;
+    }
+
+    .legendSlideUp {
+      background: url('./img/direct4@2x-1.png') no-repeat;
+      background-size: 34px 24px;
+    }
+
+    .legendSlideUp:hover {
+      background: url('./img/direct4@2x-1.png') no-repeat;
+      background-size: 34px 24px;
+    }
+
+
+
+  }
+
+  .right {
+    width: 359px;
+    // float: right;
+    height: 100% !important;
+    position: relative;
+    // right: 0px;
+    border-left: 1px dotted #000;
+    box-sizing: border-box;
+    overflow: auto;
+    padding-top: 19px;
+    box-sizing: border-box;
+
+    .content-right-box {
+      max-height: 33%;
+      display: flex;
+      flex-direction: column;
+
+      .box-title {
+        background-color: rgb(213, 233, 254);
+        // width: 100%;
+        height: 42px;
+        color: #333333;
+        font-family: Bold;
+        font-family: PingFang-SC-Bold;
+        font-size: 20px;
+        padding: 0px 9px;
+        line-height: 42px;
+      }
+
+      .box-content {
+        padding: 14px 8px;
+        font-size: 16px;
+        min-height: 100px;
+        // max-height: 200px;
+        // overflow-y: auto;
+        overflow-x: hidden;
+        box-sizing: border-box;
+
+        .text {
+          padding-bottom: 11px;
+          display: flex;
+          flex-wrap: nowrap;
+
+          &:last-child {
+            padding-bottom: 0px;
+          }
+
+          .text-key {
+            // max-width: 100px;
+            display: flex;
+            // display: inline-block;
+            // white-space: normal;
+            // text-overflow: ellipsis;
+          }
+
+          .text-value {
+            white-space: normal;
+          }
+
+        }
+
+      }
+
+      .box-footer {
+        padding: 14px 8px;
+
+        button {
+          width: 88px;
+          height: 38px;
+          background: #0793FF;
+          border-radius: 5px;
+          border-width: 1px;
+          color: #FFFFFF;
+          font-size: 16px;
+          font-weight: 400;
+          margin-right: 13px;
+
+          &:last-child {
+            margin-right: 0px;
+          }
+        }
+      }
+    }
+  }
+}
+
+.search {
+  // position: absolute;
+  display: inline-block;
+  width: 272px;
+  position: relative;
+
+  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: #aaa;
+  }
+
+  input:-moz-placeholder,
+  textarea:-moz-placeholder {
+    color: #aaa;
+  }
+
+  input::-moz-placeholder,
+  textarea::-moz-placeholder {
+    color: #aaa;
+  }
+
+  input:-ms-input-placeholder,
+  textarea:-ms-input-placeholder {
+    color: #aaa;
+  }
+
+  .searchBtn {
+    position: absolute;
+    cursor: pointer;
+    display: inline-block;
+    width: 60px;
+    height: 40px;
+    text-align: center;
+    line-height: 40px;
+    background: linear-gradient(270deg, #00A6F5 0%, #0071E7 100%);
+    border-radius: 0px 4px 4px 0px;
+    color: #fff;
+  }
+
+  .tabNameList,
+  .tabNameListNoSearch {
+    position: absolute;
+    top: 40px;
+    display: none;
+    width: 192px;
+    max-height: 200px;
+    background: white;
+    border: 1px solid #5BBBFF;
+    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: #000;
+    }
+
+    li:hover {
+      background: #5BBBFF;
+      color: white;
+    }
+
+    .nodeItem {
+      cursor: pointer;
+
+    }
+  }
+}
+
+.icon {
+  height: 18px;
+  width: 18px;
+  display: inline-block;
+  background-size: cover;
+  vertical-align: middle;
+  background-repeat: no-repeat;
+  cursor: pointer;
+}
+
+.icon-triangle-down {
+  .icon();
+  background-image: url("./img/rect46@2x.png");
+  width: 18px;
+  height: 12px;
+}
+
+.icon-rect-select {
+  height: 16px;
+  width: 16px;
+  display: inline-block;
+  background-size: cover;
+  vertical-align: middle;
+  background-repeat: no-repeat;
+  cursor: pointer;
+  border: 1px solid #ABABAB;
+  // box-sizing: border-box;
+}
+
+.icon-rect-selected {
+  height: 18px;
+  width: 18px;
+  display: inline-block;
+  background-size: cover;
+  vertical-align: middle;
+  background-repeat: no-repeat;
+  cursor: pointer;
+  background-image: url("./img/group105@2x.png");
+  // border: 1px solid #5BBBFF;
+  // box-sizing: content-box;
 }

src/html/home.html

@@ -135,7 +135,7 @@
           </div>
         </div>
         <!-- 下拉框删除实体 -->
-        <div v-if="dialogData.opType=='deleteEntity-dropdown'" class="modifyEntityName-dropdown">
+        <div v-if="dialogData.opType=='deleteEntity-dropdown' && nodeTable" class="modifyEntityName-dropdown">
           <div class="tools">
             <el-select v-model="selectedName" placeholder="请选择">
               <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">

src/html/selfKnowledgeGraph.html

@@ -41,7 +41,9 @@
 						<div class="legendIconImg"></div>
 					</div>
 					<div class="category-num"></div>
-					<div select="on" class="dropdown record"  @click="toggleSelectList"><span class="selectedData">历史记录 <span
+					<div class="back" @click="isShowKG=false">返回</div>
+					<div select="on" class="dropdown record"  @click="toggleSelectList">
+						<span class="selectedData">历史记录 <span
 								class="icon-triangle-down"></span></span>
 						<ul class="selectList-record" @click="handleSelectItem">
 							<li class="selectItem" name="艾滋病" label="疾病">艾滋病</li>

src/html/selfKnowledgeUpdate.html

@@ -5,7 +5,7 @@
   <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>自构建图谱更新</title>
+  <title>自构建知识更新</title>
   <link href="../resources/favicon.ico" rel="shortcut icon">
   <style>
     .node_name {
@@ -15,149 +15,163 @@
 </head>
 
 <body>
-  <div id="app" v-cloak>
-    <div class="main-box" v-if="!isShowKG">
-      <div class="knowledgeCard" id="knowledgeCard" v-for="item in listData" :key="item.graph_id"
-        @click="showKnowledgeGraph(item.graph_id)">
-        {{ item.graph_name }}
-      </div>
+  <!-- <div id="app" v-cloak> -->
+  	<div class="main-box" id="knowledgeCardContainer">
+			<div class="knowledgeCard" id="knowledgeCard" >
+			</div>
+		</div>
+  <div class="knowledgeMapWrapper wrappper knowledgeUpdate" style="display: none;" >
+    <!-- 右键菜单 -->
+    <div class="contextmenu">
+      <ul>
+        <li class="contextmenu-item" title="新增实体" data-id="addEntity">新增实体</li>
+        <li class="contextmenu-item" title="修改实体名称" data-id="modifyEntityName">修改实体名称</li>
+        <li class="contextmenu-item" title="编辑实体" data-id="editEntity">编辑实体</li>
+        <li class="contextmenu-item" title="删除实体" data-id="deleteEntity">删除实体</li>
+        <li class="contextmenu-item" title="新增关系" data-id="addRelationship">新增关系</li>
+        <li class="contextmenu-item" title="新增属性" data-id="addProperty">新增属性</li>
+        <li class="contextmenu-item" title="实体链接" data-id="entityLink">实体链接</li>
+        <li class="contextmenu-item" title="实体合并" data-id="entityMerge">实体合并</li>
+        <li class="contextmenu-item" title="展开关系" data-id="expandRelationships">展开关系</li>
+        <li class="contextmenu-item" title="展开属性" data-id="expandProperty">展开属性</li>
+        <li class="contextmenu-item center" title="全部展开" data-id="expandAll">全部展开</li>
+        <li class="contextmenu-item center" title="全部关闭" data-id="closeAll">全部关闭</li>
+      </ul>
+    </div>
+    <!-- 线的菜单 -->
+    <div class="contextmenu-edge">
+      <ul>
+        <li class="contextmenu-item" title="修改关系" data-id="modifyRelationship">修改关系</li>
+        <li class="contextmenu-item" title="删除关系" data-id="deleteRelationship">删除关系</li>
+      </ul>
+    </div>
+    <!-- 节点的菜单 -->
+    <div class="contextmenu-node">
+      <ul>
+        <li class="contextmenu-item" title="修改属性" data-id="modifyProperty">修改属性</li>
+        <li class="contextmenu-item" title="删除属性" data-id="deleteProperty">删除属性</li>
+      </ul>
     </div>
-    <div v-show="isShowKG" class="knowledgeMapWrapper wrappper knowledgeUpdate">
-      <!-- 右键菜单 -->
-      <div class="contextmenu">
-        <ul>
-          <li class="contextmenu-item" title="新增实体" data-id="addEntity">新增实体</li>
-          <li class="contextmenu-item" title="修改实体名称" data-id="modifyEntityName">修改实体名称</li>
-          <li class="contextmenu-item" title="编辑实体" data-id="editEntity">编辑实体</li>
-          <li class="contextmenu-item" title="删除实体" data-id="deleteEntity">删除实体</li>
-          <li class="contextmenu-item" title="新增关系" data-id="addRelationship">新增关系</li>
-          <li class="contextmenu-item" title="新增属性" data-id="addProperty">新增属性</li>
-          <li class="contextmenu-item" title="实体链接" data-id="entityLink">实体链接</li>
-          <li class="contextmenu-item" title="实体合并" data-id="entityMerge">实体合并</li>
-          <li class="contextmenu-item" title="展开关系" data-id="expandRelationships">展开关系</li>
-          <li class="contextmenu-item" title="展开属性" data-id="expandProperty">展开属性</li>
-          <li class="contextmenu-item center" title="全部展开" data-id="expandAll">全部展开</li>
-          <li class="contextmenu-item center" title="全部关闭" data-id="closeAll">全部关闭</li>
-        </ul>
-      </div>
-      <!-- 线的菜单 -->
-      <div class="contextmenu-edge">
-        <ul>
-          <li class="contextmenu-item" title="修改关系" data-id="modifyRelationship">修改关系</li>
-          <li class="contextmenu-item" title="删除关系" data-id="deleteRelationship">删除关系</li>
-        </ul>
-      </div>
-      <!-- 节点的菜单 -->
-      <div class="contextmenu-node">
-        <ul>
-          <li class="contextmenu-item" title="修改属性" data-id="modifyProperty">修改属性</li>
-          <li class="contextmenu-item" title="删除属性" data-id="deleteProperty">删除属性</li>
-        </ul>
-      </div>
 
-      <div class="topbar">
-        <div class="topbar-left">
-          <div select="off" class="item-box-1 dropdown">
-            <span>实体更新</span><span class="icon-triangle-down"></span>
-            <ul class="selectList">
-              <li class="selectItem" title="新增实体" data-id="addEntity">新增实体</li>
-              <li class="selectItem" title="修改实体名称" data-id="modifyEntityName-dropdown">修改实体名称</li>
-              <li class="selectItem" title="编辑实体" data-id="editEntity">编辑实体</li>
-              <li class="selectItem" title="删除实体" data-id="deleteEntity-dropdown">删除实体</li>
-            </ul>
+    <div class="topbar">
+      <div class="topbar-left">
+        <div select="off" class="item-box-1 dropdown">
+          <span>实体更新</span><span class="icon-triangle-down"></span>
+          <ul class="selectList">
+            <li class="selectItem" title="新增实体" data-id="addEntity">新增实体</li>
+            <li class="selectItem" title="修改实体名称" data-id="modifyEntityName-dropdown">修改实体名称</li>
+            <li class="selectItem" title="编辑实体" data-id="editEntity">编辑实体</li>
+            <li class="selectItem" title="删除实体" data-id="deleteEntity-dropdown">删除实体</li>
+          </ul>
+        </div>
+        <div select="off" class="item-box-1 dropdown">
+          <span>关系更新</span><span class="icon-triangle-down"></span>
+          <ul class="selectList">
+            <li class="selectItem" title="新增关系" data-id="addRelationship-dropdown">新增关系</li>
+            <li class="selectItem" title="修改关系名称" data-id="modifyRelationshipName-dropdown">修改关系名称</li>
+          </ul>
+        </div>
+        <div select="off" class="item-box-1 dropdown">
+          <span>属性更新</span><span class="icon-triangle-down"></span>
+          <ul class="selectList">
+            <li class="selectItem" title="新增属性" data-id="addProperty-dropdown">新增属性</li>
+            <li class="selectItem" title="修改属性" data-id="modifyProperty-dropdown">修改属性</li>
+          </ul>
+        </div>
+      </div>
+      <div class="topbar-right">
+        <div class="topbar-right-item">
+          <!-- select="on" 表示会改变 .selectedData -->
+          <div select="on" class="item-box-2 dropdown search-type">
+            <span class="selectedName selectedData">疾病</span>
+            <!-- <span class="icon-triangle-down"></span> -->
+            <!-- <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>
+            </ul> -->
           </div>
-          <div select="off" class="item-box-1 dropdown">
-            <span>关系更新</span><span class="icon-triangle-down"></span>
+        </div>
+        <!-- <div class="topbar-right-item"><span class="label">节点类型</span></div>
+        <div class="topbar-right-item">
+          <div class="item-box-2 dropdown">
+            <span class="selectedType">全部</span><span class="icon-triangle-down"></span>
             <ul class="selectList">
-              <li class="selectItem" title="新增关系" data-id="addRelationship-dropdown">新增关系</li>
-              <li class="selectItem" title="修改关系名称" data-id="modifyRelationshipName-dropdown">修改关系名称</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>
+              <li class="selectItem" title="辅助检查" data-id="辅助检查">辅助检查</li>
             </ul>
           </div>
-          <div select="off" class="item-box-1 dropdown">
-            <span>属性更新</span><span class="icon-triangle-down"></span>
-            <ul class="selectList">
-              <li class="selectItem" title="新增属性" data-id="addProperty-dropdown">新增属性</li>
-              <li class="selectItem" title="修改属性" data-id="modifyProperty-dropdown">修改属性</li>
+        </div> -->
+        <div class="topbar-right-item">
+          <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="topbar-right">
-          <div class="topbar-right-item">
-            <!-- select="on" 表示会改变 .selectedData -->
-            <div select="on" class="item-box-2 dropdown search-type">
-              <span class="selectedName selectedData">疾病</span><span class="icon-triangle-down"></span>
-              <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>
+    <div class="content clearfix">
+      <div class="left">
+        <div id="main" class="mapWrapper"></div>
+        <div id="dragMe" class="legendIcon">
+          <div class="legendIconImg"></div>
+        </div>
+        <div class="category-num"></div>
+        <div select="on" class="record">
+          <span class="selectedData">历史记录 <span class="icon-triangle-down"></span></span>
+          <ul class="selectList-record">
+            <li class="selectItem-record" name="艾滋病" label="疾病">艾滋病</li>
+          </ul>
+        </div>
+      </div>
+      <div class="right">
+        <div class="content-right-box basic-information">
+          <div class="box-title">基本信息</div>
+          <div class="box-content">
+            <div class="text">
+              <p class="text-key">ID：</p>
+              <p class="text-value">1001</p>
             </div>
-          </div>
-          <div class="topbar-right-item">
-            <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 class="text">
+              <p class="text-key">类型：</p>
+              <p class="text-value">疾病</p>
+            </div>
+            <div class="text">
+              <p class="text-key">名称：</p>
+              <p class="text-value">上呼吸道感染</p>
             </div>
           </div>
         </div>
-      </div>
-      <div class="content clearfix">
-        <div class="left">
-          <div id="main" class="mapWrapper"></div>
-          <div id="dragMe" class="legendIcon">
-            <div class="legendIconImg"></div>
-          </div>
-          <div class="category-num"></div>
-          <div select="on" class="record">
-            <span class="selectedData">历史记录 <span class="icon-triangle-down"></span></span>
-            <ul class="selectList-record">
-              <li class="selectItem-record" name="艾滋病" label="疾病">艾滋病</li>
-            </ul>
-          </div>
+        <div class="content-right-box property">
+          <div class="box-title">属性</div>
+          <div class="box-content"></div>
         </div>
-        <div class="right">
-          <div class="content-right-box basic-information">
-            <div class="box-title">基本信息</div>
-            <div class="box-content">
-              <div class="text">
-                <p class="text-key">ID：</p>
-                <p class="text-value">1001</p>
-              </div>
-              <div class="text">
-                <p class="text-key">类型：</p>
-                <p class="text-value">疾病</p>
-              </div>
-              <div class="text">
-                <p class="text-key">名称：</p>
-                <p class="text-value">上呼吸道感染</p>
-              </div>
-            </div>
-          </div>
-          <div class="content-right-box property">
-            <div class="box-title">属性</div>
-            <div class="box-content"></div>
-          </div>
-          <div class="content-right-box entity-node">
-            <div class="box-title">实体节点</div>
-            <div class="box-content"></div>
-            <div class="box-footer">
-              <button class="link-entity">实体链接</button>
-              <button class="merge-entity">实体合并</button>
-              <button class="delete-entity">实体删除</button>
-            </div>
+        <div class="content-right-box entity-node">
+          <div class="box-title">实体节点</div>
+          <div class="box-content"></div>
+          <div class="box-footer">
+            <button class="link-entity">实体链接</button>
+            <button class="merge-entity">实体合并</button>
+            <button class="delete-entity">实体删除</button>
           </div>
         </div>
       </div>
-
     </div>
+
   </div>
+  <!-- </div> -->
+
+
 
 </body>
 

src/js/api.js

@@ -30,7 +30,21 @@ const api = {
   getCountInfo: "/api/kg/count/getCountInfo",
   userGraphs: "/open-platform/kb/user_sub_graphs",
   getSelfTreeByUser:"/open-platform/kb/tree_structure",
-  getSelfNode:'/open-platform/graph_mg/entity/search'
+  getSelfNode:'/open-platform/graph_mg/entity/search',
+
+  // 自定义知识图谱
+  createCustomEntity: '/open-platform/graph_mg/entity/create', //新建实体
+  deleteCustomEntity: '/open-platform/graph_mg/entity/delete', //删除实体
+  updateCustomEntity: '/open-platform/graph_mg/entity/update', //更新实体
+  findCustomEntity: '/open-platform/graph_mg/entity/find', //查询实体（根据id查询实体）
+  searchCustomEntity: '/open-platform/graph_mg/entity/search', //查询实体（根据名称模糊查询实体）
+  createCustomRelationship: '/open-platform/graph_mg/relationship/create', //新建实体关系
+  deleteCustomRelationship: '/open-platform/graph_mg/relationship/delete', //删除实体关系
+  updateCustomRelationship: '/open-platform/graph_mg/relationship/update', //更新实体关系
+  searchCustomRelationship: '/open-platform/graph_mg/relationship/search', //查询实体关系
+  createCustomProperty: '/open-platform/graph_mg/property/create', //新建实体属性
+  deleteCustomProperty: '/open-platform/graph_mg/property/delete', //删除实体属性
+  updateCustomProperty: '/open-platform/graph_mg/property/update', //更新实体属性
   
 };
 $(".goto-homeStatic").on("click", function () {

src/js/selfKnowledgeGraph.js

@@ -106,49 +106,6 @@ $(".selectList .selectItem").click(function () {
   }
 });
 
-//搜索节点名
-// $("#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) {
-//     $('.radioItem').css('color', '#333333')
-//     $(this).css("color", '#409EF1')
-//     const dataId = $(".showTabList .tab.activeTab").attr("data-id")
-//     const initDiag = dataId == "疾病" ? "艾滋病" : "过氧化氢溶液"
-//     const type = +$(this).attr('data-type')
-//     const subType = +$(this).attr('sub-type')
-//     // $(this).children('img').attr('src')
-//     $('.iconRadio').attr('src', '/images/radioUnSelect.png')
-//     $(this).children('img').attr('src', '/images/radioSelect.png')
-//     $('#searchInp').val(initDiag)
-//     getTree(subType, type, initDiag);
-//     getGraph(initDiag, select_type);
-//     // updateTree(initDiag)
-// })
-
-//搜索
-// $("#searchBtn").click(function (e) {
-//   console.log("searchBtn");
-//   e.stopPropagation();
-//   hideSlide();
-//   const val = $("#searchInp").val().trim();
-//   if (val) {
-//     const clientHei = $(window).height();
-//     const contentHei = clientHei - 80;
-//     $(".tabNameList").hide();
-//     getGraph(val, "疾病");
-//   } else {
-//     $(".tabNameListNoSearch").show();
-//   }
-// });
-
 let renderTabInfo = getTab("疾病");
 renderTab(renderTabInfo);
 

src/js/selfgraphMap.js

@@ -60,10 +60,10 @@ function reDrawGraph(name, label) {
     let params = null
         url = api.getSelfGraph
         params = {
-            "input_str": val ? val : '',
-            "label_name": type,
+            "input_str": name ? name : '',
+            "label_name": label,
              "user_id": localStorage.getItem("userId") ? JSON.parse(localStorage.getItem("userId")) : 1,
-             'graph_id':id,
+             'graph_id':window.graph_id,
         }
         get(url, params).then(res => {
             if (res.data.code === 200) {
@@ -955,7 +955,8 @@ function getTree(userId, graphId, showNodeName) {
     if (!window.knowledgeMapSetting.zTree) return; //没有树,跳过
     get(api.getSelfTreeByUser,
         {
-            "user_id": userId,     //科室subType: 2, 疾病type:1
+            "user_id":userId || localStorage.getItem("userId") || 1,     //科室subType: 2, 疾病type:1
+
             "graph_id": graphId
         }
     ).then(res => {