Inicio Explorar Axuda
Rexistro Iniciar sesión
front
/
knowledgeMap
2
0
Fork 0
Ficheiros Incidencias 0 Pull Requests 0 Wiki
Explorar o código

更新侧边栏

yangdr hai 2 meses
pai
d976957b1e
achega
c007d854ba
Modificáronse 4 ficheiros con 85 adicións e 17 borrados
Unificar vista Mostrar estatísticas de Diff
  1. 21 1
      src/css/home.less
  2. 19 9
      src/css/knowledgeUpdate.less
  3. 43 5
      src/html/home.html
  4. 2 2
      src/js/graphMap.js

+ 21 - 1
src/css/home.less
Ver ficheiro 

@@ -476,6 +476,8 @@
 
           flex-wrap: nowrap;
 
           flex-wrap: nowrap;
 
           justify-content: space-between;
 
           justify-content: space-between;
 
 
 
+
 
+
 
           .left {
 
           .left {
 
 
 
             // .el-input__inner {
 
             // .el-input__inner {
 
@@ -521,10 +523,28 @@
 
                 align-content: flex-start;
 
                 align-content: flex-start;
 
               }
 
               }
 
 
 
+
 
               .el-input__icon {
 
               .el-input__icon {
 
                 line-height: 32px;
 
                 line-height: 32px;
 
               }
 
               }
 
             }
 
             }
 
+
 
+            .select-entity-name {
 
+
 
+              // input:focus {
 
+              //   border: none !important;
 
+              //   outline: none;
 
+              //   box-shadow: none;
 
+              // }
 
+
 
+              .el-input__inner {
 
+                padding: 0px 10px;
 
+              }
 
+
 
+              .el-input__suffix {
 
+                display: none !important;
 
+              }
 
+            }
 
           }
 
           }
 
 
 
           .right {
 
           .right {
 
@@ -744,7 +764,7 @@
 
   width: auto !important;
 
   width: auto !important;
 
   min-width: 150px;
 
   min-width: 150px;
 
   text-align: left;
 
   text-align: left;
 
-  
+
 
 }
 
 }

+ 19 - 9
src/css/knowledgeUpdate.less
Ver ficheiro 

@@ -77,7 +77,7 @@
 
         min-width: 100%;
 
         min-width: 100%;
 
         // width: 100%;
 
         // width: 100%;
 
         left: -1px;
 
         left: -1px;
 
-        z-index: 10;
 
+        z-index: 15;
 
         border: 1px solid #E7E7E7;
 
         border: 1px solid #E7E7E7;
 
         // box-sizing: border-box;
 
         // box-sizing: border-box;
 
 
 
@@ -182,10 +182,12 @@
 
 
 
 
 
   .content {
 
   .content {
 
-    position: relative;
 
+    // position: relative;
 
     width: 100%;
 
     width: 100%;
 
-    left: 0;
 
-    flex-grow: 1;
 
+
 
+    // left: 0;
 
+    // flex: 1 1 auto;
 
+    height: calc(100% - 78px);
 
     // margin-left: -600px;
 
     // margin-left: -600px;
 
     cursor: default;
 
     cursor: default;
 
     white-space: nowrap;
 
     white-space: nowrap;
 
@@ -206,6 +208,7 @@
 
     // width: calc(100% - 394px);
 
     // width: calc(100% - 394px);
 
     box-sizing: border-box;
 
     box-sizing: border-box;
 
     flex-grow: 1;
 
     flex-grow: 1;
 
+    position: relative;
 
 
 
     #main {
 
     #main {
 
       // width: 796px;
 
       // width: 796px;
 
@@ -227,7 +230,7 @@
 
       width: 34px;
 
       width: 34px;
 
       height: 24px;
 
       height: 24px;
 
       bottom: 0px;
 
       bottom: 0px;
 
-      right: 379px;
 
+      right: 10px;
 
       // left: 0;
 
       // left: 0;
 
       // border-top: 1px dotted black;
 
       // border-top: 1px dotted black;
 
       /*background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);*/
 
       /*background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);*/
 
@@ -238,7 +241,7 @@
 
       width: 34px;
 
       width: 34px;
 
       height: 24px;
 
       height: 24px;
 
       bottom: 0px;
 
       bottom: 0px;
 
-      right: 413px;
 
+      right: 35px;
 
       color: #dd7172;
 
       color: #dd7172;
 
     }
 
     }
 
 
 
@@ -289,6 +292,7 @@
 
           padding: 5px 0px;
 
           padding: 5px 0px;
 
           text-overflow: ellipsis;
 
           text-overflow: ellipsis;
 
           cursor: pointer;
 
           cursor: pointer;
 
+
 
           &:hover {
 
           &:hover {
 
             color: #0071E7;
 
             color: #0071E7;
 
           }
 
           }
 
@@ -354,8 +358,8 @@
 
         padding: 14px 8px;
 
         padding: 14px 8px;
 
         font-size: 16px;
 
         font-size: 16px;
 
         min-height: 100px;
 
         min-height: 100px;
 
-        max-height: 200px;
 
-        overflow-y: auto;
 
+        // max-height: 200px;
 
+        // overflow-y: auto;
 
         overflow-x: hidden;
 
         overflow-x: hidden;
 
         box-sizing: border-box;
 
         box-sizing: border-box;
 
 
 
@@ -368,7 +372,13 @@
 
             padding-bottom: 0px;
 
             padding-bottom: 0px;
 
           }
 
           }
 
 
 
-          .text-key {}
 
+          .text-key {
 
+            // max-width: 100px;
 
+            display: flex;
 
+            // display: inline-block;
 
+            // white-space: normal;
 
+            // text-overflow: ellipsis;
 
+          }
 
 
 
           .text-value {
 
           .text-value {
 
             white-space: normal;
 
             white-space: normal;

+ 43 - 5
src/html/home.html
Ver ficheiro 

@@ -49,7 +49,7 @@
 
 
 
 <body>
 
 <body>
 
   <div id="app" v-cloak>
 
   <div id="app" v-cloak>
 
-    <el-container>
 
+    <el-container v-cloak>
 
       <el-header>
 
       <el-header>
 
         <div class="logo" contenteditable="false">知识图谱系统</div>
 
         <div class="logo" contenteditable="false">知识图谱系统</div>
 
         <div class="time">{{nowDate}}</div>
 
         <div class="time">{{nowDate}}</div>
 
@@ -285,10 +285,20 @@
 
                   </el-option>
 
                   </el-option>
 
                 </el-select>
 
                 </el-select>
 
                 <span style="margin-left: 10px;">实体名称：</span>
 
                 <span style="margin-left: 10px;">实体名称：</span>
 
-                <el-autocomplete v-model.trim="addPropertyDropdown.name"
 
+                <!-- <el-autocomplete v-model.trim="addPropertyDropdown.name"
 
                   :fetch-suggestions="((queryString,cb)=>{querySearchAsync(queryString,cb,addPropertyDropdown.label)})"
 
                   :fetch-suggestions="((queryString,cb)=>{querySearchAsync(queryString,cb,addPropertyDropdown.label)})"
 
                   @select="handleSelect($event,addPropertyDropdown,'addProperty-dropdown')"
 
                   @select="handleSelect($event,addPropertyDropdown,'addProperty-dropdown')"
 
-                  placeholder=" 请输入实体名称"></el-autocomplete>
 
+                  placeholder="请输入实体名称"></el-autocomplete> -->
 
+
 
+                <el-select class="select-entity-name" v-model.trim="addPropertyDropdown.nodeId" filterable remote
 
+                  placeholder="请输入实体名称" @change="addPropertyDropdownValueChange"
 
+                  :remote-method="((query)=>addPropertyDropdownRemoteMethod(query,addPropertyDropdown.label))"
 
+                  :loading="false">
 
+                  <el-option v-for="item in addPropertyDropdownOptions" :key="item.nodeId" :label="item.name"
 
+                    :value="item.nodeId">
 
+                  </el-option>
 
+                </el-select>
 
+
 
               </div>
 
               </div>
 
               <div class="right">
 
               <div class="right">
 
                 <span class="blue">导出模板</span>
 
                 <span class="blue">导出模板</span>
 
@@ -600,10 +610,11 @@
 
         ],
 
         ],
 
         addPropertyDropdown: {
 
         addPropertyDropdown: {
 
           "label": "疾病",
 
           "label": "疾病",
 
-          "nodeId": 0,
 
+          "nodeId": null,
 
           "name": "",
 
           "name": "",
 
           "property": [{ key: "", value: "" }]
 
           "property": [{ key: "", value: "" }]
 
         },
 
         },
 
+        addPropertyDropdownOptions: [],
 
         addProperty: { //右键属性新增的数据
 
         addProperty: { //右键属性新增的数据
 
           "label": "",
 
           "label": "",
 
           "nodeId": -1,
 
           "nodeId": -1,
 
@@ -714,6 +725,7 @@
 
       }
 
       }
 
     },
 
     },
 
     methods: {
 
     methods: {
 
+
 
       menuSelect: function (item) {
 
       menuSelect: function (item) {
 
         this.currentPage = { ...item }
 
         this.currentPage = { ...item }
 
         const { id, title, url } = item
 
         const { id, title, url } = item
 
@@ -1060,7 +1072,33 @@
 
             this.dialogVisible = false
 
             this.dialogVisible = false
 
             this.sendChildWindowMessage("update-graph", "")
 
             this.sendChildWindowMessage("update-graph", "")
 
         }
 
         }
 
-
 
+      },
 
+      addPropertyDropdownValueChange(value) {
 
+        for (let i = 0; i < this.addPropertyDropdownOptions.length; i++) {
 
+          const option = this.addPropertyDropdownOptions[i]
 
+          if (option.nodeId === value) {
 
+            this.addPropertyDropdown.name = option.name
 
+            break
 
+          }
 
+        }
 
+        // this.addPropertyDropdownOptions
 
+      },
 
+      addPropertyDropdownRemoteMethod(name, label) {
 
+        axios.post("/api" + api.getNode, {
 
+          "inputStr": name,
 
+          "labelName": label
 
+        }).then(res => {
 
+          const { msg, code, data } = res.data
 
+          if (code == '0') {
 
+            this.addPropertyDropdownOptions = data
 
+            // data.forEach((el, index) => {
 
+            //   this.addPropertyDropdownOptions.push(
 
+            //     { oldName: el.name, name: "", nodeId: el.nodeId, type: el.label })
 
+            // })
 
+          }
 
+        }).catch(err => {
 
+          console.log("addPropertyDropdownRemoteMethod的getNode接口出错了", err)
 
+        })
 
       },
 
       },
 
       getNode() {
 
       getNode() {
 
         axios.post("/api" + api.getNode, {
 
         axios.post("/api" + api.getNode, {

+ 2 - 2
src/js/graphMap.js
Ver ficheiro 

@@ -693,7 +693,7 @@ const rightMsgRender = function (data) {
 
     </div>
 
     </div>
 
     <div class="text">
 
     <div class="text">
 
       <p class="text-key">名称：</p>
 
       <p class="text-key">名称：</p>
 
-      <p class="text-value">${data.properties.name}</p>
 
+      <p class="text-value">${data.properties.name || data.label}</p>
 
     </div>`
 
     </div>`
 
     let property_str = ""
 
     let property_str = ""
 
     for (let i in data.properties) {
 
     for (let i in data.properties) {
 
@@ -751,7 +751,7 @@ function rightEntityNode(data) {
 
         <div class="text" nodeIndex="${entityNode.name}" nodeId="${entityNode.nodeId}" label="${entityNode.type}">
 
         <div class="text" nodeIndex="${entityNode.name}" nodeId="${entityNode.nodeId}" label="${entityNode.type}">
 
             <p class='select-sign'><span class='icon-rect-select'></span>&nbsp;</p>
 
             <p class='select-sign'><span class='icon-rect-select'></span>&nbsp;</p>
 
             <p class="text-key">${entityNode.type}：</p>
 
             <p class="text-key">${entityNode.type}：</p>
 
-            <p class="text-value">${entityNode.properties.name}</p>
 
+            <p class="text-value">${entityNode.properties.name || entityNode.label}</p>
 
         </div>`
 
         </div>`
 
     }
 
     }
 
     $(".content .right .entity-node .box-content").html(entity_node_str)
 
     $(".content .right .entity-node .box-content").html(entity_node_str)