为自构建图谱添加类型

src/html/selfKnowledgeGraph.html

@@ -42,11 +42,9 @@
 					</div>
 					<div class="category-num"></div>
 					<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>
+					<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>
 						</ul>
 					</div>
 				</div>
@@ -58,26 +56,21 @@
 								<!-- <img class="iconSlide" src="./images/iconSlideDown.png" alt="iconSlide"> -->
 							</div>
 
-						<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" @input="handleChange">
-						<span class="searchBtn" id="searchBtn" @click="handleClick">搜索</span>
-						<ul class="tabNameList"></ul>
-						<ul class="tabNameListNoSearch">
-							<li class="ellipsis">请输入内容</li>
-						</ul>
+							<ul class="selectList">
+								<li class="selectItem" title="疾病" data-id="疾病">疾病</li>
+							</ul>
+						</div>
+						<div class="search">
+							<input type="text" id="searchInp" placeholder="搜索疾病名称" name="" autocomplete="off" @input="handleChange">
+							<span class="searchBtn" id="searchBtn" @click="handleClick">搜索</span>
+							<ul class="tabNameList"></ul>
+							<ul class="tabNameListNoSearch">
+								<li class="ellipsis">请输入内容</li>
+							</ul>
+						</div>
 					</div>
-				</div>
-				<div class="bottom">
-					<!-- <div class="tabList" id="tabList">
+					<div class="bottom">
+						<!-- <div class="tabList" id="tabList">
 						<div class="showTabList">
 						</div>
 						<div class="toggleTab">

src/js/api.js

@@ -29,8 +29,8 @@ const api = {
   getCountList: "/api/kg/count/getCountList",
   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',
+  getSelfTreeByUser: "/open-platform/kb/tree_structure",
+  getSelfNode: '/open-platform/graph_mg/entity/search',
 
   // 自定义知识图谱
   createCustomEntity: '/open-platform/graph_mg/entity/create', //新建实体
@@ -45,7 +45,8 @@ const api = {
   createCustomProperty: '/open-platform/graph_mg/property/create', //新建实体属性
   deleteCustomProperty: '/open-platform/graph_mg/property/delete', //删除实体属性
   updateCustomProperty: '/open-platform/graph_mg/property/update', //更新实体属性
-  
+  graphCategories: "/open-platform/kb/graph_categories"//查询类型列表
+
 };
 $(".goto-homeStatic").on("click", function () {
   window.location.href = "http://192.168.2.121:5666" + $(this).attr("link");

src/js/home.js

@@ -303,7 +303,7 @@ const vm = new Vue({
     receiveIframeMsg() {
       const iframe = this.$refs.iframe;
       window.addEventListener("message", (event) => {
-        console.log("receiveIframeMsg", event);
+        // console.log("receiveIframeMsg", event);
         const { opType } = event.data;
         if (opType) {
           this.dialogData.title = event.data.title;
@@ -774,8 +774,8 @@ const vm = new Vue({
           break;
         case "modifyEntityName":
           this.modifyEntityName.user_id = localStorage.getItem("userId")
-            ? JSON.parse(localStorage.getItem("userId"))  
-            : 1;    
+            ? JSON.parse(localStorage.getItem("userId"))
+            : 1;
           this.modifyEntityName.graph_id = this.graphId;
           post(api.updateCustomEntity, [this.modifyEntityName])
             .then((res) => {
@@ -1052,7 +1052,7 @@ const vm = new Vue({
               console.log("updateEntityName接口出错", err);
             });
         })
-        .catch((err) => {});
+        .catch((err) => { });
     },
     updateSelfEntityName(data, index) {
       this.$confirm("确定修改实体名称吗？", "修改实体名称提示", {
@@ -1062,7 +1062,7 @@ const vm = new Vue({
       })
         .then(() => {
           let params = {
-            user_id: localStorage.getItem("userId")? JSON.parse(localStorage.getItem("userId")) :1,
+            user_id: localStorage.getItem("userId") ? JSON.parse(localStorage.getItem("userId")) : 1,
             graph_id: this.graphId,
             node_id: data[0].nodeId,
             name: data[0].name,
@@ -1084,7 +1084,7 @@ const vm = new Vue({
               console.log("updateCustomEntity接口出错", err);
             });
         })
-        .catch((err) => {});
+        .catch((err) => { });
     },
     deleteEntityFunc(data, index) {
       this.$confirm("确定删除该实体吗?", "删除实体提示", {
@@ -1135,7 +1135,7 @@ const vm = new Vue({
               });
           }
         })
-        .catch((err) => {});
+        .catch((err) => { });
     },
     addRelationshipDropdownAddRow() {
       this.addRelationshipDropdown.push(
@@ -1268,7 +1268,7 @@ const vm = new Vue({
               console.log("updateRelationshipType接口出错", err);
             });
         })
-        .catch(() => {});
+        .catch(() => { });
     },
     addPropertyDropdownAddRow() {
       this.addPropertyDropdown.property.push(
@@ -1297,7 +1297,7 @@ const vm = new Vue({
               console.log("updateEntityProperty接口出错");
             });
         })
-        .catch(() => {});
+        .catch(() => { });
     },
     drawGraph() {
       if (myChart) {
@@ -1603,6 +1603,7 @@ const vm = new Vue({
       const { type, username, userId } = event.data;
       if (type === "login") {
         this.username = username;
+        // console.log('@@@', username, userId)
         saveLocalVar("username", username);
         saveLocalVar("userId", userId);
         // window.localStorage.setItem('username', JSON.stringify(username))

src/js/index.js

@@ -147,7 +147,6 @@ $('.selectList .selectItem').click(function () {
     if (txt != oldTxt) {
         $('#searchInp').val("")
     }
-
 })
 
 

src/js/selfKnowledgeGraph.js

@@ -3,7 +3,7 @@ require("babel-polyfill");
 const echarts = require("echarts");
 require("./../css/knowledgeMap.less");
 require("./../css/common.less");
-// require("ztree");
+require("../css/selfKnowledgeGraph.less");
 require("./../resources/images/icon.png");
 require("./../resources/images/iconOpen.png");
 require("./../resources/images/iconClose.png");
@@ -21,10 +21,6 @@ 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 { mapData, zTreeData, mapData3, zTreeData3 } = require("./data.js");
-
-require("../css/selfKnowledgeGraph.less");
-require("./../css/common.less");
 const {
   drawGraph,
   updateTree,
@@ -39,14 +35,14 @@ const {
   hideHideTab,
   hideSlide,
   reDrawGraph,
+  getGraphCategories
 } = require("./selfgraphMap.js");
+const { saveLocalVar, getLocalVar } = require("../js/utils.js");
 const { post, get, api, getUrlArgObject, ifHideLogo } = require("./api.js");
-// const $ = require('jquery')
 const Vue = require("vue/dist/vue.esm.js").default;
 const ElementUI = require("../public/elementUI/2.7.2/index.js");
+Vue.use(ElementUI);
 
-// import UmyUi from 'umy-ui'
-// Vue.use(UmyUi);
 /**右侧侧边栏折叠*/
 let isRightCollapse = false;
 let self = getUrlArgObject("self") ? true : false;
@@ -63,7 +59,7 @@ window.graphMapUpdatedData = null; //实时更新的关系图数据
 window.graphMap = null; //当前关系图实例对象
 window.knowledgeMapSetting = {
   self: self,
-  operation: "view", //操作类型,修改
+  operation: "view", //操作类型,查看
   draggable: true, //是否能拖拽节点
   zTree: !noTree, //是否有zTree
   expandPropertyId: [], //存储展开属性的nodeId
@@ -115,29 +111,34 @@ $("html").click(function () {
 });
 
 let toggleTabHtml = "";
-$(".right-aside-collapse").on("click", function () {
-  isRightCollapse = !isRightCollapse;
-  if (isRightCollapse) {
-    $(this).attr("class", "right-aside-collapsed");
-    toggleTabHtml = $("#tabList > .toggleTab").html();
-    $("#tabList > .toggleTab").empty();
-    $(".right").animate({ width: "150px" }, function () {});
-    const contentWidth = $(".content").width();
-    const leftWidth = (contentWidth - 150).toString() + "px";
-    $(".content .left").animate({ width: leftWidth }, function () {
-      window.graphMap.resize();
-    });
-  } else {
-    $(this).attr("class", "right-aside-collapse");
-    $("#tabList > .toggleTab").html(toggleTabHtml);
-    $(".right").animate({ width: "461px" });
-    const contentWidth = $(".content").width();
-    const leftWidth = (contentWidth - 461).toString() + "px";
-    $(".content .left").animate({ width: leftWidth }, function () {
-      window.graphMap.resize();
-    });
-  }
-});
+
+function bindRightAsideCollapse() {
+  $(".right-aside-collapse").on("click", function () {
+    isRightCollapse = !isRightCollapse;
+    if (isRightCollapse) {
+      $(this).attr("class", "right-aside-collapsed");
+      toggleTabHtml = $("#tabList > .toggleTab").html();
+      $("#tabList > .toggleTab").empty();
+      $(".right").animate({ width: "150px" }, function () { });
+      const contentWidth = $(".content").width();
+      const leftWidth = (contentWidth - 150).toString() + "px";
+      $(".content .left").animate({ width: leftWidth }, function () {
+        window.graphMap.resize();
+      });
+    } else {
+      $(this).attr("class", "right-aside-collapse");
+      $("#tabList > .toggleTab").html(toggleTabHtml);
+      $(".right").animate({ width: "461px" });
+      const contentWidth = $(".content").width();
+      const leftWidth = (contentWidth - 461).toString() + "px";
+      $(".content .left").animate({ width: leftWidth }, function () {
+        window.graphMap.resize();
+      });
+    }
+  });
+}
+
+
 
 window.addEventListener("message", function (event) {
   if (event.data.operation == "left-collapse") {
@@ -155,7 +156,7 @@ window.addEventListener("message", function (event) {
 });
 
 
-Vue.use(ElementUI);
+
 setHei();
 ifHideLogo();
 function setHei() {
@@ -185,26 +186,11 @@ const vm = new Vue({
         label: "症状",
         name: "头痛",
       },
-      listData: [
-        // {
-        //   id: 1,
-        //   title: "测试图1",
-        //   label: '症状',
-        //   name: "头痛"
-        // },
-        // {
-        //   id: 2,
-        //   title: "测试图2",
-        //   label: '症状',
-        //   name: "头痛"
-        // }
-      ],
+      listData: [],
       searchTimeout: null, // 用于存储搜索的定时器
       searchResults: [], // 存储搜索结果
       graph_id: "",
-      user_id: localStorage.getItem("userId")
-        ? JSON.parse(localStorage.getItem("userId"))
-        : 1, // 获取用户ID
+      user_id: getLocalVar("userId") || 1, // 获取用户ID
     };
   },
   methods: {
@@ -230,47 +216,47 @@ const vm = new Vue({
       if (this.searchTimeout) {
         clearTimeout(this.searchTimeout);
       }
-          if (val) {
+      if (val) {
         getNode(val, '疾病')
-    } else {
+      } else {
         $(".tabNameList").hide()
-    }
+      }
     },
     handleClick() {
       hideSlide();
       const val = $("#searchInp").val().trim();
-      if (val) {
-        const clientHei = $(window).height();
-        const contentHei = clientHei - 80;
-        $(".tabNameList").hide();
-        getGraph(val, "疾病");
-        getTree(this.user_id, this.graph_id, val);
-      } else {
-        $(".tabNameListNoSearch").show();
-      }
+      const clientHei = $(window).height();
+      const contentHei = clientHei - 80;
+      $(".tabNameList").hide();
+      getGraph(val, "疾病");
+      getTree(this.user_id, this.graph_id, val);
+
+      // if (val) {
+      //   const clientHei = $(window).height();
+      //   const contentHei = clientHei - 80;
+      //   $(".tabNameList").hide();
+      //   getGraph(val, "疾病");
+      //   getTree(this.user_id, this.graph_id, val);
+      // } else {
+      //   $(".tabNameListNoSearch").show();
+      // }
     },
     showKnowledgeGraph(id) {
-      // Object.assign(this.currentKnowledgeGraph, { ...data })
-      // this.currentKnowledgeGraph.label = data.label
-      // this.currentKnowledgeGraph.name = data.name
       this.isShowKG = true;
       this.initGraph(id);
     },
     initGraph(id) {
       this.graph_id = id;
       window.graph_id = id; //清除上一个关系图实例
-      let user_id = localStorage.getItem("userId")
-        ? JSON.parse(localStorage.getItem("userId"))
-        : 1;
+      let user_id = getLocalVar('userId') || 1;
       window.user_id = user_id;
-      getGraph("艾滋病", "疾病", id);
-      getTree(user_id, id, "艾滋病");
+      getGraph("", "疾病", id);
+      getTree(user_id, id, "");
+      getGraphCategories(window.user_id, window.graph_id)
     },
     getUserGraphs: function () {
       get(api.userGraphs, {
-        user_id: localStorage.getItem("userId")
-          ? JSON.parse(localStorage.getItem("userId"))
-          : 1,
+        user_id: getLocalVar('userId') || 1,
         pageNo: 1,
         pageSize: 10,
       })
@@ -293,6 +279,7 @@ const vm = new Vue({
   watch: {},
   mounted() {
     this.getUserGraphs();
+    bindRightAsideCollapse()
   },
-  beforeDestroy() {},
+  beforeDestroy() { },
 });

src/js/selfKnowledgeUpdate.js

@@ -3,7 +3,7 @@ require("babel-polyfill");
 const echarts = require("echarts");
 require("./../css/selfKnowledgeUpdate.less");
 require("./../css/common.less");
-// require("ztree");
+
 require('./../resources/images/icon.png');
 require('./../resources/images/iconOpen.png');
 require('./../resources/images/iconClose.png');
@@ -21,13 +21,14 @@ 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 {get, post, api, ifHideLogo, getUrlArgObject } = require('./api.js');
+const { get, post, api, ifHideLogo, getUrlArgObject } = require('./api.js');
 const { mapData, zTreeData, mapData3, zTreeData3 } = require('./data.js');
 const { drawGraph, updateTree, getGraph, getTree, getNode, getTab, renderTab, setTabBottomHei, expandProperty,
   setSelectName, hideHideTab, hideSlide, reDrawGraph } = require('./selfgraphMap.js');
 const Vue = require("vue/dist/vue.esm.js").default;
 const ElementUI = require("../public/elementUI/2.7.2/index.js");
 Vue.use(ElementUI);
+
 /**右侧侧边栏折叠*/
 let isRightCollapse = false
 window.select_type = "疾病";
@@ -54,7 +55,7 @@ window.knowledgeMapSetting = {
 }
 
 
-setHei()
+
 ifHideLogo();
 function setHei() {
   const clientHei = $(window).height()
@@ -68,55 +69,51 @@ function setHei() {
   }
   $("#main").css("height", contentHei - 20 - 20 - 10 + 'px')
 }
+setHei()
 $(window).resize(function () {
   setHei()
   // getGraph(graphTxt,select_type);
 })
 getUserGraphs();
-     function getUserGraphs() {
-      get(api.userGraphs, {
-        user_id: localStorage.getItem("userId")
-          ? JSON.parse(localStorage.getItem("userId"))
-          : 1,
-        pageNo: 1,
-        pageSize: 10,
-      })
-        .then((res) => {
-          const { code, records } = res.data;
-          if (code === 200) {
-          // 生成知识卡片的 HTML 字符串
-      const knowledgeCardsHtml = records.map(item => `
+function getUserGraphs() {
+  get(api.userGraphs, {
+    user_id: localStorage.getItem("userId")
+      ? JSON.parse(localStorage.getItem("userId"))
+      : 1,
+    pageNo: 1,
+    pageSize: 10,
+  })
+    .then((res) => {
+      const { code, records } = res.data;
+      if (code === 200) {
+        // 生成知识卡片的 HTML 字符串
+        const knowledgeCardsHtml = records.map(item => `
         <div class="knowledgeCard" id="knowledgeCard-${item.graph_id}" data-graph-id="${item.graph_id}">
           ${item.graph_name}
         </div>
       `).join('');
 
-      // 渲染到页面指定容器中，假设容器 id 为 knowledgeCardContainer
-      $('#knowledgeCardContainer').html(knowledgeCardsHtml);
-       // 注册点击事件监听
-        $('#knowledgeCardContainer').on('click', '.knowledgeCard', function() {
+        // 渲染到页面指定容器中，假设容器 id 为 knowledgeCardContainer
+        $('#knowledgeCardContainer').html(knowledgeCardsHtml);
+        // 注册点击事件监听
+        $('#knowledgeCardContainer').on('click', '.knowledgeCard', function () {
           const graphId = $(this).data('graph-id');
           console.log('点击的知识卡片的 graph-id 为:', graphId);
           $('#knowledgeCardContainer').hide();
           $('.knowledgeMapWrapper.wrappper.knowledgeUpdate').show();
           window.graph_id = graphId; // 设置全局变量
           window.user_id = localStorage.getItem("userId") ? JSON.parse(localStorage.getItem("userId")) : 1;
-          getGraph("艾滋病", "疾病", graphId);
-          getTree(window.user_id, graphId, "艾滋病");
-        });
-          }
-        })
-        .catch((e) => {
-          console.log(e);
+          getGraph("", "疾病", graphId);
+          getTree(window.user_id, graphId, "");
         });
-    }
+      }
+    })
+    .catch((e) => {
+      console.log(e);
+    });
+}
+
 
-//关系图
-// getGraph(disease || "艾滋病", select_type, true);
-// getTree(1, 1, disease || "艾滋病");
-// $('#searchInp').val(disease || "艾滋病")
-//  getGraph("艾滋病", "疾病", 1);
-//   getTree(1, 1, "艾滋病");
 
 //选择类型
 $('.select').click(function (e) {
@@ -179,7 +176,7 @@ $("#searchInp").bind("input propertychange", function (event) {
 
 //切换条目
 $('.radioItem').click(function (e) {
-  const initDiag = disease || "艾滋病"
+  const initDiag = disease
   const type = $(this).attr('data-type')
   // $(this).children('img').attr('src')
   $('.iconRadio').attr('src', '/images/radioUnSelect.png')
@@ -232,11 +229,7 @@ $('#searchBtn').click(function (e) {
       }
       let renderTabInfo = getTab(select_type)
       renderTab(renderTabInfo)
-
     })
-
-
-
   } else {
     $('.tabNameListNoSearch').show()
   }
@@ -345,7 +338,7 @@ $("div[class*='contextmenu'] .contextmenu-item").on("click", function () {
   const showFooter = true
   const dialogVisible = true
   const data = {
-    opType, title, data: window.knowledgeMapData, showFooter, dialogVisible,graphId: window.graph_id
+    opType, title, data: window.knowledgeMapData, showFooter, dialogVisible, graphId: window.graph_id
   }
   console.log("contextmenu-item", data);
   menuOperation(opType, data)
@@ -357,7 +350,7 @@ $(".dropdown[select='off'] .selectList .selectItem").on("click", function () {
   const showFooter = true
   const dialogVisible = true
   const data = {
-    opType, title, showFooter, dialogVisible, data: {},graphId: window.graph_id
+    opType, title, showFooter, dialogVisible, data: {}, graphId: window.graph_id
   }
   console.log("dropdown-selectItem", data);
   menuOperation(opType, data)
@@ -727,81 +720,6 @@ $(document).on("click", ".link-entity", function () {
   }
   menuOperation(data.opType, data)
 })
-// const vm = new Vue({
-//   el: "#app",
-//   name: "selfKnowledgeUpdate",
-//   data() {
-//     return {
-//       isShowKG: false,
-//       currentKnowledgeGraph: {
-//         label: "症状",
-//         name: "头痛",
-//       },
-//       listData: [],
-//       searchTimeout: null, // 用于存储搜索的定时器
-//       searchResults: [], // 存储搜索结果
-//       graph_id: "",
-//       user_id: localStorage.getItem("userId")
-//         ? JSON.parse(localStorage.getItem("userId"))
-//         : 1, // 获取用户ID
-//     };
-//   },
-//   methods: {
-//     showKnowledgeGraph(id){
-//       this.isShowKG = true;
-//       this.initGraph(id);
-
-//     },
-//     initGraph(id) {
-//       this.graph_id = id;
-//       window.graph_id = id; //清除上一个关系图实例
-//       let user_id = localStorage.getItem("userId")
-//         ? JSON.parse(localStorage.getItem("userId"))
-//         : 1;
-//       window.user_id = user_id;
-//       getGraph("艾滋病", "疾病", id);
-//       getTree(user_id, id, "艾滋病");
-//     },
-//     getUserGraphs: function () {
-//       get(api.userGraphs, {
-//         user_id: localStorage.getItem("userId")
-//           ? JSON.parse(localStorage.getItem("userId"))
-//           : 1,
-//         pageNo: 1,
-//         pageSize: 10,
-//       })
-//         .then((res) => {
-//           const { code, records } = res.data;
-//           if (code === 200) {
-//             this.listData = [...records];
-//           }
-//         })
-//         .catch((e) => {
-//           console.log(e);
-//         });
-//     },
-//   },
-//   watch: {},
-//   mounted() {
-//     // this.getUserGraphs();
-//     $(".dropdown[select='off'] .selectList .selectItem").on("click", function () {
-//       console.log("click-selectItem")
-//   // const opType = $(this).attr("data-id")
-//   // const title = $(this).attr("title")
-//   // const showFooter = true
-//   // const dialogVisible = true
-//   // const data = {
-//   //   opType, title, showFooter, dialogVisible, data: {}
-//   // }
-//   // menuOperation(opType, data)
-
-// })
-//     this.isShowKG = true;
-//      getGraph("艾滋病", "疾病", 1);
-//       getTree(1, 1, "艾滋病");
-//   },
-//   beforeDestroy() {},
-// });
 
 
 

src/js/selfgraphMap.js

@@ -6,44 +6,83 @@ const iconDown = require('./../resources/images/iconDown.png');
 const clientHei = $(window).height()
 const contentHei = clientHei - 80
 let disease = getUrlArgObject("disease")
-// console.log("disease", disease);
+window.labelList = []
 
 //关系图
-function getGraph(val, type,id) {
+function getGraph(val, type, id) {
     let url = ""
     let params = null
-        url = api.getSelfGraph
-        params = {
-            "input_str": val ? val : '',
-            "label_name": type,
-             "user_id": localStorage.getItem("userId") ? JSON.parse(localStorage.getItem("userId")) : 1,
-             'graph_id':id ? id : window.graph_id,
+    url = api.getSelfGraph
+    params = {
+        "input_str": val ? val : '',
+        "label_name": type,
+        "user_id": localStorage.getItem("userId") ? JSON.parse(localStorage.getItem("userId")) : 1,
+        'graph_id': id ? id : window.graph_id,
+    }
+    return get(url, params).then(res => {
+        if (res.data.code == 200) {
+            // select_type = select_type_noSearch
+            $('#searchInp').val(val)
+            drawGraph(res.data.records[0].records, null)
+            window.graphTxt = val
+            window.refreshTree = true
+
+            if (type != select_type) {
+                select_type = type
+                let renderTabInfo = getTab(type)
+                renderTab(renderTabInfo)
+            }
+            addRecord(val, type)
+        } else {
+            let nodeStr
+            nodeStr = '<li class="ellipsis">暂无符合数据</li>'
+            $(".tabNameList").html(nodeStr)
+            $(".tabNameList").show()
+            window.refreshTree = false
         }
-        return get(url, params).then(res => {
-            if (res.data.code == 200) {
-                // select_type = select_type_noSearch
-                $('#searchInp').val(val)
-                drawGraph(res.data.records[0].records, null)
-                window.graphTxt = val
-                window.refreshTree = true
-
-                if (type != select_type) {
-                    select_type = type
-                    let renderTabInfo = getTab(type)
-                    renderTab(renderTabInfo)
-                }
-                addRecord(val, type)
-            } else {
-                let nodeStr
-                nodeStr = '<li class="ellipsis">暂无符合数据</li>'
-                $(".tabNameList").html(nodeStr)
-                $(".tabNameList").show()
-                window.refreshTree = false
+    })
+}
+
+function getGraphCategories(user_id, graph_id) {
+    get(api.graphCategories, { user_id, graph_id }).then(res => {
+        const { code, message, records } = res.data
+        if (code === 200) {
+            data = records[0].records
+            window.labelList = data
+            let str = ''
+            for (let i = 0; i < data.length; i++) {
+                str += `<li class="selectItem" title="${data[i]}" data-id="${data[i]}">${data[i]}</li>`
             }
-        })
-    }
+            $('.select .selectList').html(str)
+
+            $('.select').on('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').on('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("")
+                }
+            })
+        }
+    }).catch(e => {
+        console.log(e)
+    })
+}
 
 
 function reDrawGraph(name, label) {
@@ -58,75 +97,75 @@ function reDrawGraph(name, label) {
     }
     let url = ""
     let params = null
-        url = api.getSelfGraph
-        params = {
-            "input_str": name ? name : '',
-            "label_name": label,
-             "user_id": localStorage.getItem("userId") ? JSON.parse(localStorage.getItem("userId")) : 1,
-             'graph_id':window.graph_id,
-        }
-        get(url, params).then(res => {
-            if (res.data.code === 200) {
-                let records = res.data.records[0].records
-                records.node.forEach(node => {
-                    if (!node.itemStyle.display && node.label && node.symbol == 'circle') {
-                        node.symbol = 'pin'
-                        // node.symbolSize = [node.symbolSize * 1.5, node.symbolSize]
-                    }
-                });
-                window.graphMapUpdatedData = records
-                let expandPropertyNodes = [] //要展开节点的数据
-                let currentNode = null //当前显示信息的节点
-                let legendData = null //新的图例数据
-                for (let i = 0; i < window.graphMapUpdatedData.node.length; i++) {
-                    const node = window.graphMapUpdatedData.node[i]
-                    // console.log(window.knowledgeMapSetting.currentNodeId, node.nodeId)
-                    if (node.nodeId === window.knowledgeMapSetting.currentNodeId) {
-                        currentNode = node
-                    }
-                    for (let j = 0; j < window.knowledgeMapSetting.expandPropertyId.length; j++) {
-                        const expandNodeId = window.knowledgeMapSetting.expandPropertyId[j]
-                        if (expandNodeId === node.nodeId) {
-                            expandPropertyNodes.push(node)
-                        }
-                    }
+    url = api.getSelfGraph
+    params = {
+        "input_str": name ? name : '',
+        "label_name": label,
+        "user_id": localStorage.getItem("userId") ? JSON.parse(localStorage.getItem("userId")) : 1,
+        'graph_id': window.graph_id,
+    }
+    get(url, params).then(res => {
+        if (res.data.code === 200) {
+            let records = res.data.records[0].records
+            records.node.forEach(node => {
+                if (!node.itemStyle.display && node.label && node.symbol == 'circle') {
+                    node.symbol = 'pin'
+                    // node.symbolSize = [node.symbolSize * 1.5, node.symbolSize]
                 }
-                window.knowledgeMapSetting.legends = window.graphMapUpdatedData.categories.slice(2)
-                //重新计算showLegendNum
-                reShowLegendNum()
-                if (window.knowledgeMapSetting.showLegendAll) {
-                    legendData = window.knowledgeMapSetting.legends.map(el => el.name)
-                } else {
-                    legendData = window.knowledgeMapSetting.legends.slice(0, window.knowledgeMapSetting.showLegendNum).map(el => el.name)
+            });
+            window.graphMapUpdatedData = records
+            let expandPropertyNodes = [] //要展开节点的数据
+            let currentNode = null //当前显示信息的节点
+            let legendData = null //新的图例数据
+            for (let i = 0; i < window.graphMapUpdatedData.node.length; i++) {
+                const node = window.graphMapUpdatedData.node[i]
+                // console.log(window.knowledgeMapSetting.currentNodeId, node.nodeId)
+                if (node.nodeId === window.knowledgeMapSetting.currentNodeId) {
+                    currentNode = node
+                }
+                for (let j = 0; j < window.knowledgeMapSetting.expandPropertyId.length; j++) {
+                    const expandNodeId = window.knowledgeMapSetting.expandPropertyId[j]
+                    if (expandNodeId === node.nodeId) {
+                        expandPropertyNodes.push(node)
+                    }
                 }
+            }
+            window.knowledgeMapSetting.legends = window.graphMapUpdatedData.categories.slice(2)
+            //重新计算showLegendNum
+            reShowLegendNum()
+            if (window.knowledgeMapSetting.showLegendAll) {
+                legendData = window.knowledgeMapSetting.legends.map(el => el.name)
+            } else {
+                legendData = window.knowledgeMapSetting.legends.slice(0, window.knowledgeMapSetting.showLegendNum).map(el => el.name)
+            }
 
-                expandPropertyNodePad(expandPropertyNodes) //添加展开属性节点
-                reNodeCloseAndExpand(legendData) //添加隐藏节点
-                window.graphMap.setOption({
-                    legend: [{
-                        data: legendData
-                    }],
-                    series: [{
-                        edgeLabel: {
-                            formatter: function (x) {
-                                if (x.data.hideLabel) {
-                                    return " ";
-                                }
-                                else {
-                                    return x.data.value;  //横线关系
-                                }
-                            },
+            expandPropertyNodePad(expandPropertyNodes) //添加展开属性节点
+            reNodeCloseAndExpand(legendData) //添加隐藏节点
+            window.graphMap.setOption({
+                legend: [{
+                    data: legendData
+                }],
+                series: [{
+                    edgeLabel: {
+                        formatter: function (x) {
+                            if (x.data.hideLabel) {
+                                return " ";
+                            }
+                            else {
+                                return x.data.value;  //横线关系
+                            }
                         },
-                        categories: window.graphMapUpdatedData.categories,
-                        type: 'graph',
-                        data: window.graphMapUpdatedData.node,  // 更新节点数据
-                        links: window.graphMapUpdatedData.links,  // 更新边数据
-                    }]
-                }, false);  // 仅更新指定的部分，不重绘图表
-                rightMsgRender(currentNode) //重新渲染右侧数据
-            }
-        })
-    }
+                    },
+                    categories: window.graphMapUpdatedData.categories,
+                    type: 'graph',
+                    data: window.graphMapUpdatedData.node,  // 更新节点数据
+                    links: window.graphMapUpdatedData.links,  // 更新边数据
+                }]
+            }, false);  // 仅更新指定的部分，不重绘图表
+            rightMsgRender(currentNode) //重新渲染右侧数据
+        }
+    })
+}
 
 
 
@@ -854,9 +893,6 @@ function dataClick(param) {
     var data = param.data;
     rightMsgRender(data)
     window.knowledgeMapSetting.currentNodeId = param.data.nodeId
-    let labelList = ["疾病", "药品", "症状",
-        // "手术和操作", 
-        "实验室检查", "辅助检查"]
     // Object.keys(data.itemStyle) >= 1
     if (data.itemStyle.color || labelList.indexOf(param.data.type) === -1 || !data.itemStyle.display) return;
     const clientHei = $(window).height()
@@ -902,28 +938,8 @@ function dataClick(param) {
                 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);
-                }
+                getGraph(data.label, select_type, window.graph_id);
+                selectedZTreeNode(data.label)
             }
             // addRecord(data.label, select_type)
             // renderRecord()
@@ -955,7 +971,7 @@ function getTree(userId, graphId, showNodeName) {
     if (!window.knowledgeMapSetting.zTree) return; //没有树,跳过
     get(api.getSelfTreeByUser,
         {
-            "user_id":userId || localStorage.getItem("userId") || 1,     //科室subType: 2, 疾病type:1
+            "user_id": userId || localStorage.getItem("userId") || 1,     //科室subType: 2, 疾病type:1
 
             "graph_id": graphId
         }
@@ -1028,7 +1044,7 @@ function drawTree(data, showNodeName) {
                         select_type_noSearch = select_type
                         setSelectName(select_type)
                     }
-                    getGraph(name, select_type)
+                    getGraph(name, "疾病", window.graph_id)
                     const selectPId = $('.curSelectedNode').attr('id')
                     if (selectPId) {
                         const selectId = selectPId.substring(0, selectPId.length - 1) + 'ico'
@@ -1091,8 +1107,6 @@ function selectedZTreeNode(nodeName) {
                 behavior: "smooth"
             })
         }, 500)
-
-
     }
 }
 
@@ -1100,7 +1114,7 @@ function selectedZTreeNode(nodeName) {
 function getNode(val, type) {
     post(api.getSelfNode,
         {
-           user_id:localStorage.getItem("userId") || 1,
+            user_id: localStorage.getItem("userId") || 1,
             graph_id: window.graph_id,
             label: "疾病",
             name: val,
@@ -1375,11 +1389,11 @@ function bindTabClick() {
             setSelectName(select_type)
 
             if (id == "疾病") {
-                $('#searchInp').val(disease || "艾滋病")
+                $('#searchInp').val(disease)
                 $('.iconRadio').attr('src', '/images/radioUnSelect.png')
                 $('.ICD10 img').attr('src', '/images/radioSelect.png')
-                getTree(1, 1, disease || "艾滋病");
-                getGraph(disease || "艾滋病", select_type);
+                getTree(1, 1, disease);
+                getGraph(disease, select_type);
 
             } else if (id == "药品") {
                 $('#searchInp').val("过氧化氢溶液")
@@ -1631,5 +1645,6 @@ module.exports = {
     hideSlide,
     reDrawGraph,
     selectedZTreeNode,
-    expandProperty
+    expandProperty,
+    getGraphCategories
 }

webpack.config.js

@@ -310,7 +310,7 @@ module.exports = {
         },
       },
       '/open-platform': { //知识图谱统计API
-        target: "http://192.18.1.235:8000",
+        target: "http://173.18.12.205:8005",
         changeOrigin: true,
       }
     },