Browse Source

优化右侧树高度占比不全的问题

yangdr 2 weeks ago
parent
commit
a4103dcd7a
4 changed files with 39 additions and 29 deletions
  1. 15 5
      src/css/knowledgeMap.less
  2. 9 9
      src/html/home.html
  3. 14 14
      src/js/graphMap.js
  4. 1 1
      webpack.config.js

+ 15 - 5
src/css/knowledgeMap.less

@@ -305,6 +305,8 @@
             // border: 1px #6794A8 solid;
             // color: #000;
             height: calc(100% - 120px);
+            display: flex;
+            flex-direction: column;
 
             .tabList {
                 width: 100%;
@@ -314,6 +316,7 @@
                 position: relative;
                 padding: 0 10px;
                 margin-bottom: 20px;
+                flex: 0 0 auto;
 
                 .tabBox {
                     padding: 0 20px 0 10px;
@@ -358,7 +361,12 @@
             }
 
             .tabBottom {
-                height: calc(100% - 85px) !important;
+                // height: calc(100% - 85px) !important;
+                flex: 1 1 auto;
+                display: flex;
+                flex-direction: column;
+                overflow: hidden;
+                box-sizing: border-box;
             }
 
             .tabListShow {
@@ -420,11 +428,12 @@
             }
 
             .radioList {
-                height: 60px;
-                line-height: 60px;
-                padding: 0 10px 0px 30px;
+                // height: 60px;
+                // line-height: 60px;
+                padding: 10px 30px;
                 background-color: rgb(238, 246, 255);
                 margin-bottom: 20px;
+                flex: 0 0 auto;
             }
 
             .radioItem {
@@ -574,7 +583,8 @@
     .ztree,
     #tree {
         overflow: auto;
-        height: calc(100% - 60px) !important;
+        // height: calc(100% - 60px) !important;
+        flex: 1 1 auto;
         // height: 100% !important;
         padding: 0 10px 20px 30px;
         position: relative;

+ 9 - 9
src/html/home.html

@@ -515,15 +515,15 @@
   let myChart = null
   let timer = null //计时器标志
   const api = {
-    "createEntity": "/entity/createEntity",//批量新增实体
-    "getNode": "/kg/getNode",
-    "updateEntityName": "/entity/updateEntityName",
-    "deleteEntity": "/entity/deleteEntity",
-    "createRelationship": "/relationship/createRelationship",
-    "findRelationshipType": "/relationship/findRelationshipType", //根据名称模糊查询关系
-    "updateRelationshipType": "/relationship/updateRelationshipType",
-    "createEntityProperty": "/property/createEntityProperty", //批量新增实体属性
-    "deleteRelationship": "/relationship/deleteRelationship",//批量删除关系
+    createEntity: "/entity/createEntity",//批量新增实体
+    getNode: "/kg/getNode",
+    updateEntityName: "/entity/updateEntityName",
+    deleteEntity: "/entity/deleteEntity",
+    createRelationship: "/relationship/createRelationship",
+    findRelationshipType: "/relationship/findRelationshipType", //根据名称模糊查询关系
+    updateRelationshipType: "/relationship/updateRelationshipType",
+    createEntityProperty: "/property/createEntityProperty", //批量新增实体属性
+    deleteRelationship: "/relationship/deleteRelationship",//批量删除关系
     findEntityListByName: "/entity/findEntityListByName", //实体列表查询(根据标签和名字模糊查询实体)
     updateEntityProperty: "/property/updateEntityProperty", //更新实体属性
     deleteEntityProperty: "/property/deleteEntityProperty", //删除实体属性

+ 14 - 14
src/js/graphMap.js

@@ -1388,20 +1388,20 @@ function bindTabClick() {
 function setTabBottomHei(type) {
     const clientHei = $(window).height()
     const contentHei = 700
-    if (type == 1) {
-        $(".tabBottom").css({
-            'margin': '0px 0px 0px 0px'
-        })
-        $(".tabBottom").css("height", contentHei - 220 - 43 - 10 + 19 + 'px')
-        $(".ztree").css("height", contentHei - 220 - 43 - 60 - 20 - 24 + 19 + 'px')
-
-    } else if (type == 2) {
-        $(".tabBottom").css("height", contentHei - 220 - 43 - 10 - 20 + 19 + 'px')
-        $(".tabBottom").css({
-            'margin': '20px 0px 0px 0px'
-        })
-        $(".ztree").css("height", contentHei - 220 - 43 - 20 - 20 - 20 + 19 + 'px')
-    }
+    // if (type == 1) {
+    //     $(".tabBottom").css({
+    //         'margin': '0px 0px 0px 0px'
+    //     })
+    //     $(".tabBottom").css("height", contentHei - 220 - 43 - 10 + 19 + 'px')
+    //     $(".ztree").css("height", contentHei - 220 - 43 - 60 - 20 - 24 + 19 + 'px')
+
+    // } else if (type == 2) {
+    //     $(".tabBottom").css("height", contentHei - 220 - 43 - 10 - 20 + 19 + 'px')
+    //     $(".tabBottom").css({
+    //         'margin': '20px 0px 0px 0px'
+    //     })
+    //     $(".ztree").css("height", contentHei - 220 - 43 - 20 - 20 - 20 + 19 + 'px')
+    // }
 }
 
 function setSelectName(name) {

+ 1 - 1
webpack.config.js

@@ -271,7 +271,7 @@ module.exports = {
   // devtool: 'cheap-module-eval-source-map', //开发环境cheap-module-eval-source-map   //生产环境cheap-module-source-map
   mode: 'development',
   devServer: {
-    host: "172.16.8.57",
+    // host: "172.16.8.57",
     contentBase: "./dist", //静态文件根目录
     proxy: {
       '/api': {