Главная Обзор Помощь
Регистрация Вход
front
/
knowledgeMap
2
0
Ответвить 0
Файлы Задачи 0 Запросы на слияние 0 Вики
Просмотр исходного кода

自构建查询

cynthia-qin 1 месяц назад
Родитель
47704976f1
Сommit
d8778be637
8 измененных файлов с 2331 добавлено и 64 удалено
Единый вид Показать статистику Diff
  1. 16 6
      src/css/home.less
  2. 21 0
      src/css/selfKnowledgeGraph.less
  3. 3 1
      src/html/home.html
  4. 124 34
      src/html/selfKnowledgeGraph.html
  5. 2 1
      src/js/api.js
  6. 8 5
      src/js/graphMap.js
  7. 421 17
      src/js/selfKnowledgeGraph.js
  8. 1736 0
      src/js/selfgraphMap.js

+ 16 - 6
src/css/home.less
Просмотреть файл 

@@ -10,10 +10,16 @@
 
     // transform: scale(0.8);
 
     // transform: scale(0.8);
 
 
 
     .el-header {
 
     .el-header {
 
-      height: 80px !important;
 
-      background-color: #3871B8;
 
+      height: 60px !important;
 
+background-image: linear-gradient(2deg, #dbe9fd, #e5f0fb, #eef7f8, #f7fef6);
 
+
 
+      // background-color: #3871B8;
 
+      // background-color: linear-gradient(#f2fcfe 10%, #1c92d2 100%);
 
+      // background: #1c92d2;  /* fallback for old browsers */
 
+      // background: -webkit-linear-gradient(to top,#1c92d2, #f2fcfe);  /* Chrome 10-25, Safari 5.1-6 */
 
+      // background: linear-gradient(to top,#1c92d2, #f2fcfe); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
 
       padding: 0px 50px;
 
       padding: 0px 50px;
 
-      color: #FFFFFF;
 
+      // color: #FFFFFF;
 
       display: flex;
 
       display: flex;
 
       flex-wrap: nowrap;
 
       flex-wrap: nowrap;
 
       align-items: center;
 
       align-items: center;
 
@@ -44,7 +50,8 @@
 
       flex-wrap: nowrap;
 
       flex-wrap: nowrap;
 
 
 
       .el-aside {
 
       .el-aside {
 
-        background-color: rgb(213, 233, 254);
 
+        // background-color: rgb(213, 233, 254);
 
+        background-color: #e5f0fb;
 
         overflow: hidden;
 
         overflow: hidden;
 
         height: 100%;
 
         height: 100%;
 
         // transition: all 10 linear;
 
         // transition: all 10 linear;
 
@@ -97,6 +104,7 @@
 
 
 
           .el-submenu__title {
 
           .el-submenu__title {
 
             height: 72px;
 
             height: 72px;
 
+            // height: 65px;
 
             display: flex;
 
             display: flex;
 
             align-items: center;
 
             align-items: center;
 
             // .el-submenu__icon-arrow,
 
             // .el-submenu__icon-arrow,
 
@@ -110,7 +118,8 @@
 
           .submenu {
 
           .submenu {
 
 
 
             &:is(.is-active) {
 
             &:is(.is-active) {
 
-              background-color: #0793FF !important;
 
+              // background-color: #0793FF !important;
 
+                background-color: #cae3fc !important;
 
             }
 
             }
 
 
 
             .submenu-text {
 
             .submenu-text {
 
@@ -145,7 +154,8 @@
 
         overflow-y: hidden;
 
         overflow-y: hidden;
 
 
 
         .tags {
 
         .tags {
 
-          height: 72px;
 
+          // height: 72px;
 
+          height: 65px;
 
           flex: 0 0 auto;
 
           flex: 0 0 auto;
 
           display: flex;
 
           display: flex;
 
           flex-direction: column;
 
           flex-direction: column;

+ 21 - 0
src/css/selfKnowledgeGraph.less
Просмотреть файл 

@@ -19,4 +19,25 @@
 
       }
 
       }
 
     }
 
     }
 
   }
 
   }
 
+  .main-box {
 
+    display: flex;
 
+    flex-wrap: wrap;
 
+    gap: 10px;
 
+    .knowledgeCard {
 
+      margin: 20px;
 
+    width: 300px;
 
+    height: 200px;
 
+    text-align: center;
 
+    line-height: 200px;
 
+    background-color: #f9f9f9;
 
+    border: 1px solid #ccc;
 
+    border-radius: 5px;
 
+    padding: 10px;
 
+    &:hover {
 
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 
+    }
 
+  }
 
+  }
 
+
 
+
 
 }
 
 }

+ 3 - 1
src/html/home.html
Просмотреть файл 

@@ -25,11 +25,13 @@
 
         </div>
 
         </div>
 
       </el-header>
 
       </el-header>
 
       <el-container>
 
       <el-container>
 
+        <!-- background-color="#D5E9FE" -->
 
         <el-aside :width="isCollapse?'69px':'268px'" v-if="!simpleUpdataPage">
 
         <el-aside :width="isCollapse?'69px':'268px'" v-if="!simpleUpdataPage">
 
+            <!-- <div class="logo" contenteditable="false">知识图谱维护管理</div> -->
 
           <div :class="isCollapse? 'collapse-sign collapse-sign-open': 'collapse-sign collapse-sign-close'"
 
           <div :class="isCollapse? 'collapse-sign collapse-sign-open': 'collapse-sign collapse-sign-close'"
 
             @click="isCollapse=!isCollapse"></div>
 
             @click="isCollapse=!isCollapse"></div>
 
           <el-menu :default-active="currentPage.id" :collapse-transition="false" :collapse="isCollapse"
 
           <el-menu :default-active="currentPage.id" :collapse-transition="false" :collapse="isCollapse"
 
-            background-color="#D5E9FE" text-color="#000000" active-text-color="#FFFFFF">
 
+            background-color="#e5f0fb" text-color="#000000" active-text-color="#0088F4">
 
             <el-submenu v-for="menu in menuData" :key="menu.id" :index="menu.id">
 
             <el-submenu v-for="menu in menuData" :key="menu.id" :index="menu.id">
 
               <template slot="title">
 
               <template slot="title">
 
                 <i class="menu-label"><img :src="menu.label" alt="图标"></i>
 
                 <i class="menu-label"><img :src="menu.label" alt="图标"></i>

+ 124 - 34
src/html/selfKnowledgeGraph.html
Просмотреть файл 

@@ -1,45 +1,135 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
-<html lang="zh-CN">
 
+<html lang="en">
 
 
 
 <head>
 
 <head>
 
-  <meta charset="UTF-8">
 
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  <title>自构建图谱查询</title>
 
-  <link rel="stylesheet" href="./elementUI/theme-chalk_2.7.2/index.css">
 
-  <!-- <link rel="stylesheet" href="./elementUI/theme-chalk/index.css"> -->
 
-  <style>
 
-
 
-  </style>
 
-
 
+	<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">
 
+	<style>
 
+		.node_name {
 
+			color: #333333;
 
+			font-size: 16px !important;
 
+			font-weight: Regular;
 
+		}
 
+	</style>
 
 </head>
 
 </head>
 
-
 
 <body>
 
 <body>
 
-  <div id="app" v-cloak>
 
-    <div v-show="!isShowKG">
 
-      <el-table :data="listData" style="width: 100%;" border class="kg-list">
 
-        <el-table-column type="index" :index="1" align="center" label="序号" width="100"></el-table-column>
 
-        <el-table-column prop="graph_name" align="center" label="名称"></el-table-column>
 
-        <el-table-column align="center" prop="nodeNum" sortable label="实体数量"></el-table-column>
 
-        <el-table-column prop="relationType" align="center" sortable label="相关关系类型"></el-table-column>
 
-        <el-table-column prop="relationNum" align="center" sortable label="相关关系数量"></el-table-column>
 
-        <li>
 
-          <div class="index">序号</div>
 
-          <div class="name">名称</div>
 
-          <div class="op">操作</div>
 
-        </li>
 
-
 
-        <li v-for="(item,idx) in listData">
 
-          <div class="index">{{idx+1}}</div>
 
-          <div class="name">{{item.graph_name}}</div>
 
-          <div class="op"><span @click="handleView(item)">查看</span></div>
 
-        </li>
 
-      </el-table>
 
+   <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>
 
-    <iframe v-show="isShowKG" :src="kgUrl" style="width: 100%;height: 100%;" frameborder="0"></iframe>
 
   </div>
 
   </div>
 
+	<div v-else class="knowledgeMapWrapper wrappper">
 
+		<div class="contextmenu">
 
+			<ul>
 
+				<li class="contextmenu-item" title="全部展开" data-id="expandAll">全部展开</li>
 
+				<li class="contextmenu-item" title="全部关闭" data-id="closeAll">全部关闭</li>
 
+			</ul>
 
+		</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="dropdown record"><span class="selectedData">历史记录 <span
 
+							class="icon-triangle-down"></span></span>
 
+					<ul class="selectList-record">
 
+						<li class="selectItem" name="艾滋病" label="疾病">艾滋病</li>
 
+					</ul>
 
+				</div>
 
+			</div>
 
+			<div class="right" style="display: none;">
 
+				<div class="top">
 
+					<div class="select">
 
+						<div class="box">
 
+							<span class="selectedName">疾病</span>
 
+							<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">
 
+						<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">
 
+						</div>
 
+						<div class="toggleTab">
 
+							<span class="toggleTabTxt">展开</span>
 
+							<span class="toggleArrow dropdown-up" style="transform: rotate(180deg);">
 
+						</div>
 
+						<div class="hideTabList">
 
+						</div>
 
+
 
+					</div> -->
 
+
 
+					<div class="tabBottom">
 
+						<!-- <div class="radioList">
 
+							<span class="radioItem disease ICD10" data-type="1" sub-type="1">
 
+								<img class="iconRadio" src="/images/radioSelect.png" alt="iconRadio">
 
+								ICD10
 
+							</span>
 
+							<span class="radioItem disease dept" data-type="1" sub-type="2">
 
+								<img class="iconRadio" src="/images/radioUnSelect.png" alt="iconRadio">
 
+								科室
 
+							</span>
 
+							<span class="radioItem medicine general" sub-type="0" data-type="2">
 
+								<img class="iconRadio" src="/images/radioSelect.png" alt="iconRadio">
 
+								通用分类
 
+							</span>
 
+							<span class="radioItem medicine act" sub-type="1" data-type="2">
 
+								<img class="iconRadio" src="/images/radioUnSelect.png" alt="iconRadio">
 
+								ATC分类
 
+							</span>
 
+						</div> -->
 
+						<div id="tree" class="ztree"></div>
 
+						<div class="right-aside-collapse"></div>
 
+
 
+					</div>
 
+
 
+				</div>
 
+			</div>
 
+
 
+		</div>
 
+
 
+	</div>
 
+   </div>
 
+
 
+	<!-- <div class="footer ltLogo" style="display: none;">
 
+		杭州朗通信息技术有限公司 & 浙江省卫生健康委&nbsp;&nbsp;&nbsp;联合开发
 
+	</div> -->
 
+
 
 </body>
 
 </body>
 
+<!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 
+<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
 
 <script>
 
 <script>
 
-
 
-</script>
 
+	$(document).ready(function () {
 
+		$("#dragMe").draggable({
 
+			containment: "#main"  // 限制拖拽范围在 #container 元素内
 
+		});
 
+	});
 
+</script> -->
 
 
 
 </html>
 
 </html>

+ 2 - 1
src/js/api.js
Просмотреть файл 

@@ -29,6 +29,7 @@ const api = {
 
   getCountList: "/api/kg/count/getCountList",
 
   getCountList: "/api/kg/count/getCountList",
 
   getCountInfo: "/api/kg/count/getCountInfo",
 
   getCountInfo: "/api/kg/count/getCountInfo",
 
   userGraphs: "/open-platform/kb/user_sub_graphs",
 
   userGraphs: "/open-platform/kb/user_sub_graphs",
 
+  getSelfTreeByUser:"/open-platform/kb/tree_structure"
 
 };
 
 };
 
 $(".goto-homeStatic").on("click", function () {
 
 $(".goto-homeStatic").on("click", function () {
 
   window.location.href = "http://192.168.2.121:5666" + $(this).attr("link");
 
   window.location.href = "http://192.168.2.121:5666" + $(this).attr("link");
 
@@ -90,7 +91,7 @@ const get = function (url, data) {
 
       method: 'get',
 
       method: 'get',
 
       url: url,
 
       url: url,
 
       data: data,
 
       data: data,
 
-      contentType: "application/json; charset=UTF-8",
 
+      // contentType: "application/json; charset=UTF-8",
 
       beforeSend: function (xmlHttp) {
 
       beforeSend: function (xmlHttp) {
 
         xmlHttp.setRequestHeader("If-Modified-Since", "0");
 
         xmlHttp.setRequestHeader("If-Modified-Since", "0");
 
         xmlHttp.setRequestHeader("Cache-Control", "no-cache");
 
         xmlHttp.setRequestHeader("Cache-Control", "no-cache");

+ 8 - 5
src/js/graphMap.js
Просмотреть файл 

@@ -18,7 +18,7 @@ function getGraph(val, type) {
 
         params = {
 
         params = {
 
             "input_str": val,
 
             "input_str": val,
 
             "label_name": type,
 
             "label_name": type,
 
-            "user_id": localStorage.getItem("userId") ? +JSON.parse(localStorage.getItem("userId")) : -1
 
+            "user_id": localStorage.getItem("userId") ? JSON.parse(localStorage.getItem("userId")) : 1
 
         }
 
         }
 
         return get(url, params).then(res => {
 
         return get(url, params).then(res => {
 
 
 
@@ -395,7 +395,7 @@ function drawGraph(data, resultShowId) {
 
                 layout: 'force', //circular,force
 
                 layout: 'force', //circular,force
 
                 cursor: 'pointer',
 
                 cursor: 'pointer',
 
                 categories: categories,
 
                 categories: categories,
 
-                symbolSize: 80,
 
+                symbolSize: 100,
 
                 roam: true, // 'move':仅拖动,'scale':仅放大和缩小,true:放大和缩小.
 
                 roam: true, // 'move':仅拖动,'scale':仅放大和缩小,true:放大和缩小.
 
                 scaleLimit: {     // 限制缩放的范围
 
                 scaleLimit: {     // 限制缩放的范围
 
                     min: 0.1,
 
                     min: 0.1,
 
@@ -410,7 +410,7 @@ function drawGraph(data, resultShowId) {
 
                     // cursor:'pointer',
 
                     // cursor:'pointer',
 
                     normal: {
 
                     normal: {
 
                         textStyle: {
 
                         textStyle: {
 
-                            fontSize: 20
 
+                            fontSize: 12
 
                         }
 
                         }
 
                     }
 
                     }
 
                 },
 
                 },
 
@@ -446,6 +446,8 @@ function drawGraph(data, resultShowId) {
 
                         color: 'target',
 
                         color: 'target',
 
                     }
 
                     }
 
                 },
 
                 },
 
+                left: 'center',
 
+                top: 'middle',
 
                 edgeLabel: {
 
                 edgeLabel: {
 
                     normal: {
 
                     normal: {
 
                         show: true,
 
                         show: true,
 
@@ -454,7 +456,7 @@ function drawGraph(data, resultShowId) {
 
                         },
 
                         },
 
                         textStyle: {
 
                         textStyle: {
 
                             // cursor: 'pointer',
 
                             // cursor: 'pointer',
 
-                            fontSize: 16,
 
+                            fontSize: 12,
 
                             fontWeight: 'normal',       // 正常字重
 
                             fontWeight: 'normal',       // 正常字重
 
                         },
 
                         },
 
 
 
@@ -465,7 +467,7 @@ function drawGraph(data, resultShowId) {
 
                         show: true,
 
                         show: true,
 
                         textStyle: {
 
                         textStyle: {
 
                             cursor: 'pointer',
 
                             cursor: 'pointer',
 
-                            fontSize: 16,
 
+                            fontSize: 12,
 
                             fontWeight: 'normal',       // 正常字重
 
                             fontWeight: 'normal',       // 正常字重
 
                         },
 
                         },
 
                         color: '#000', //label字体颜色
 
                         color: '#000', //label字体颜色
 
@@ -1163,6 +1165,7 @@ function drawTree(data, showNodeName) {
 
 }
 
 }
 
 // 定位到当前疾病
 
 // 定位到当前疾病
 
 function selectedZTreeNode(nodeName) {
 
 function selectedZTreeNode(nodeName) {
 
+     console.log("selectedZTreeNode", nodeName)
 
     const zTreeObj = $.fn.zTree.getZTreeObj("tree")
 
     const zTreeObj = $.fn.zTree.getZTreeObj("tree")
 
     // zTreeObj.expandAll()
 
     // zTreeObj.expandAll()
 
     // console.log("zTreeObj", zTreeObj)
 
     // console.log("zTreeObj", zTreeObj)

+ 421 - 17
src/js/selfKnowledgeGraph.js
Просмотреть файл 

@@ -1,5 +1,373 @@
 
+// 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, getUrlArgObject } = require('./api.js');
 
+const { mapData, zTreeData, mapData3, zTreeData3 } = require('./data.js');
 
+// const { drawGraph, updateTree, getGraph, getTree, getNode, getTab, renderTab, setTabBottomHei, selectedZTreeNode,
 
+//     setSelectName, hideHideTab, hideSlide, reDrawGraph } = require('./selfgraphMap.js');
 
+// /**右侧侧边栏折叠*/
 
+// let isRightCollapse = false
 
+// let self = getUrlArgObject("self") ? true : false;
 
+// let input = getUrlArgObject("input") || ""
 
+// let label = getUrlArgObject("label") || ""
 
+// let noTree = getUrlArgObject("no-tree") || false
 
+// let disease = getUrlArgObject("disease")
 
+// window.select_type = "疾病";
 
+// window.select_type_noSearch = "疾病";
 
+// window.refreshTree = true
 
+
 
+// // 用来存储节点操作的数据
 
+// window.knowledgeMapData = {}//当前右键节点数据
 
+// window.graphMapUpdatedData = null //实时更新的关系图数据
 
+// window.graphMap = null //当前关系图实例对象
 
+// window.knowledgeMapSetting = {
 
+//     self: self,
 
+//     operation: "view", //操作类型,修改
 
+//     draggable: true, //是否能拖拽节点
 
+//     zTree: !noTree,//是否有zTree
 
+//     expandPropertyId: [],//存储展开属性的nodeId
 
+//     expandRelationshipsId: [],//存储展开关系的nodeId
 
+//     currentNodeId: -1,//存储右侧显示的节点的nodeId
 
+//     legends: [],//图例
 
+//     selected: {},//选中的数据
 
+//     showLegend: true, //是否显示图例
 
+//     showLegendNum: 0,//展示图例的数量
 
+//     showLegendAll: false,//是否展示全部图例
 
+//     records: [],//历史记录
 
+// }
 
+// if (noTree) {
 
+//     $(".content .right").css('display', 'none')
 
+//     $(".content .left").css("width", "100%")
 
+// } else {
 
+//     $(".content .right").css('display', 'block')
 
+// }
 
+
 
+// setHei()
 
+// ifHideLogo();
 
+// function setHei() {
 
+//     const clientHei = $(window).height()
 
+//     const contentHei = 580
 
+//     $(".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);
 
+
 
+// })
 
+
 
+// // window.onload = function () {
 
+// //     console.log("notTree", notTree)
 
+
 
+// // }
 
+// function getTree2(data) {
 
+//     if (data.type == "疾病") {
 
+//         getTree(1, 1, data.label);
 
+//         $(".radioList").show()
 
+//     } else if (data.type == "药品") {
 
+//         getTree(0, 2, data.label);
 
+//         $(".radioList").show()
 
+//     } else if (data.type == "症状") {
 
+//         $(".radioList").hide()
 
+//         getTree(0, 3, data.label);
 
+
 
+//     }
 
+//     // else if (data.type == "手术和操作") {
 
+//     // $(".radioList").hide()
 
+//     //     getTree(0, 4, data.label);
 
+//     // } 
+//     else if (data.type == "实验室检查") {
 
+//         $(".radioList").hide()
 
+//         getTree(0, 5, data.label);
 
+
 
+//     } else if (data.type == "辅助检查") {
 
+//         $(".radioList").hide()
 
+//         getTree(0, 6, data.label);
 
+
 
+//     }
 
+// }
 
+// //关系图
 
+// getGraph(disease || input || "艾滋病", label || select_type);
 
+
 
+
 
+// // getTree(1, 1, disease || input || "艾滋病");
 
+// getTree2({
 
+//     type: label || select_type,
 
+//     label: disease || input || "艾滋病",
 
+// })
 
+// // $('#searchInp').val(disease || input || "艾滋病")
 
+
 
+
 
+// //选择类型
 
+// $('.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) {
 
+//     $('.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) {
 
+//     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()
 
+//                 $(".radioList .radioItem").hide()
 
+//                 $(".radioList .disease").show()
 
+
 
+//                 setTabBottomHei(1)
 
+//             } else if (select_type == '药品') {
 
+//                 $('.iconRadio').attr('src', '/images/radioUnSelect.png')
 
+//                 $('.general img').attr('src', '/images/radioSelect.png')
 
+//                 $(".radioList").show()
 
+//                 $(".radioList .radioItem").hide()
 
+//                 $(".radioList .medicine").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()
 
+//     // }
 
+// })
 
+
 
+// // $(function () {
 
+// //     $(".right-aside-collapse").on("click", function () {
 
+// //         isRightCollapse = !isRightCollapse
 
+// //         if (isRightCollapse) {
 
+// //             $("#tabList > .toggleTab").hide()
 
+// //             $(".right").animate({ "width": '150px' })
 
+// //         } else {
 
+// //             $(".right").animate({ "width": '394px' })
 
+// //         }
 
+// //     })
 
+// // })
 
+
 
+// 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()
 
+//         // document.querySelector('.toggleTab').style.display = 'none';
 
+//         $(".right").animate({ "width": '150px' }, function () {
 
+//         })
 
+//         const contentWidth = $(".content").width()
 
+//         const leftWidth = (contentWidth - 150).toString() + 'px'
 
+//         // console.log("contentWidth", leftWidth);
 
+//         $(".content .left").animate({ 'width': leftWidth, }, function () {
 
+//             window.graphMap.resize()
 
+//             // console.log("graphMap", window.graphMap)
 
+//         })
 
+
 
+//     } 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()
 
+//             // console.log("graphMap", window.graphMap)
 
+//         })
 
+//     }
 
+// })
 
+
 
+// window.addEventListener("message", function (event) {
 
+//     // console.log("message", event.data);
 
+//     if (event.data.operation == "left-collapse") {
 
+//         const contentWidth = $(".content").width()
 
+//         // console.log("contentWidth", contentWidth)
 
+//         let leftWidth = 0
 
+//         if (isRightCollapse) {
 
+//             leftWidth = (contentWidth - 150).toString() + 'px'
 
+//             $(".content .left").css('width', leftWidth)
 
+
 
+//         } else {
 
+//             leftWidth = (contentWidth - 461).toString() + 'px'
 
+//             $(".content .left").css('width', leftWidth)
 
+
 
+//         }
 
+//         // console.log("leftWidth", leftWidth);
 
+//         window.graphMap.resize()
 
+//     }
 
+// })
 
+// $(".record .selectedData,.record").on("click", function (event) {
 
+//     // console.log("event-record", event)
 
+//     event.stopPropagation()
 
+//     // event.preventDefault()
 
+//     $(".record .selectList-record").slideToggle()
 
+//     $(".record .selectList-record .selectItem-record").on("click", function (event) {
 
+//         // event.stopPropagation()
 
+//         // console.log("eve")
 
+//         const name = $(this).attr("name")
 
+//         const label = $(this).attr("label")
 
+//         // reDrawGraph(name, label)
 
+//         getGraph(name, label)
 
+//         // $(".record .selectList-record").slideUp()
 
+//     })
 
+// })
 
+
 
+
 
+
 
+
 
+// module.exports = {
 
+//     getTab,
 
+//     renderTab
 
+// }
 
+
 
+
 
+
 
 require("../css/selfKnowledgeGraph.less")
 
 require("../css/selfKnowledgeGraph.less")
 
 require("./../css/common.less");
 
 require("./../css/common.less");
 
+const { drawGraph, updateTree, getGraph, getTree, getNode, getTab, renderTab, setTabBottomHei, selectedZTreeNode,
 
+    setSelectName, hideHideTab, hideSlide, reDrawGraph } = require('./selfgraphMap.js');
 
 // require("element-ui/lib/theme-chalk/index.css")
 
 // require("element-ui/lib/theme-chalk/index.css")
 
 const { post, get, api, getUrlArgObject } = require('./api.js');
 
 const { post, get, api, getUrlArgObject } = require('./api.js');
 
 const $ = require('jquery')
 
 const $ = require('jquery')
 
@@ -9,6 +377,35 @@ const Vue = require("vue/dist/vue.esm.js").default;
 
 const ElementUI = require("element-ui/lib/index.js");
 
 const ElementUI = require("element-ui/lib/index.js");
 
 // import UmyUi from 'umy-ui'
 
 // import UmyUi from 'umy-ui'
 
 // Vue.use(UmyUi);
 
 // Vue.use(UmyUi);
 
+/**右侧侧边栏折叠*/
 
+let isRightCollapse = false
 
+let self = getUrlArgObject("self") ? true : false;
 
+let input = getUrlArgObject("input") || ""
 
+let label = getUrlArgObject("label") || ""
 
+let noTree = getUrlArgObject("no-tree") || false
 
+window.select_type = "疾病";
 
+window.select_type_noSearch = "疾病";
 
+window.refreshTree = true
 
+
 
+// 用来存储节点操作的数据
 
+window.knowledgeMapData = {}//当前右键节点数据
 
+window.graphMapUpdatedData = null //实时更新的关系图数据
 
+window.graphMap = null //当前关系图实例对象
 
+window.knowledgeMapSetting = {
 
+    self: self,
 
+    operation: "view", //操作类型,修改
 
+    draggable: true, //是否能拖拽节点
 
+    zTree: !noTree,//是否有zTree
 
+    expandPropertyId: [],//存储展开属性的nodeId
 
+    expandRelationshipsId: [],//存储展开关系的nodeId
 
+    currentNodeId: -1,//存储右侧显示的节点的nodeId
 
+    legends: [],//图例
 
+    selected: {},//选中的数据
 
+    showLegend: true, //是否显示图例
 
+    showLegendNum: 0,//展示图例的数量
 
+    showLegendAll: false,//是否展示全部图例
 
+    records: [],//历史记录
 
+}
 
 
 
 Vue.use(ElementUI)
 
 Vue.use(ElementUI)
 
 
 
@@ -23,37 +420,44 @@ const vm = new Vue({
 
         name: "头痛"
 
         name: "头痛"
 
       },
 
       },
 
       listData: [
 
       listData: [
 
-        {
 
-          id: 1,
 
-          title: "测试图1",
 
-          label: '症状',
 
-          name: "头痛"
 
-        },
 
-        {
 
-          id: 2,
 
-          title: "测试图2",
 
-          label: '症状',
 
-          name: "头痛"
 
-        }
 
+        // {
 
+        //   id: 1,
 
+        //   title: "测试图1",
 
+        //   label: '症状',
 
+        //   name: "头痛"
 
+        // },
 
+        // {
 
+        //   id: 2,
 
+        //   title: "测试图2",
 
+        //   label: '症状',
 
+        //   name: "头痛"
 
+        // }
 
       ]
 
       ]
 
     }
 
     }
 
   },
 
   },
 
   methods: {
 
   methods: {
 
-    handleView(data) {
 
+    showKnowledgeGraph(id) {
 
       // Object.assign(this.currentKnowledgeGraph, { ...data })
 
       // Object.assign(this.currentKnowledgeGraph, { ...data })
 
-      this.currentKnowledgeGraph.label = data.label
 
-      this.currentKnowledgeGraph.name = data.name
 
+      // this.currentKnowledgeGraph.label = data.label
 
+      // this.currentKnowledgeGraph.name = data.name
 
       this.isShowKG = true
 
       this.isShowKG = true
 
+      this.initGraph(id)
 
+    },
 
+    initGraph(id){
 
+      let user_id = localStorage.getItem("userId") ? JSON.parse(localStorage.getItem("userId")) : 1
 
+      getGraph('艾滋病','疾病',id)
 
+      getTree(user_id, id,'艾滋病')
 
+
 
     },
 
     },
 
     getUserGraphs: function () {
 
     getUserGraphs: function () {
 
       get(api.userGraphs, {
 
       get(api.userGraphs, {
 
-        user_id: localStorage.getItem("userId") ? +JSON.parse(localStorage.getItem("userId")) : -1,
 
+        user_id: localStorage.getItem("userId") ? JSON.parse(localStorage.getItem("userId")) : 1,
 
         pageNo: 1,
 
         pageNo: 1,
 
         pageSize: 10,
 
         pageSize: 10,
 
       }).then(res => {
 
       }).then(res => {
 
         const { code, records } = res.data
 
         const { code, records } = res.data
 
         if (code === 200) {
 
         if (code === 200) {
 
-          this.listData = records
 
+          this.listData = [...records]
 
         }
 
         }
 
       }).catch(e => {
 
       }).catch(e => {
 
         console.log(e)
 
         console.log(e)

Разница между файлами не показана из-за своего большого размера
+ 1736 - 0
src/js/selfgraphMap.js