添加空状态

src/css/knowledgeTree.less

@@ -58,6 +58,28 @@
             border-radius: 2px;
             top: 20px;
         }
+        .mainBox{
+            position: relative;
+        }
+        .empty{
+            position: absolute;
+            width: 216px;
+            height: 140px;
+            top: 50%;
+            left: 50%;
+            margin: -70px 0 0 -108px;
+            display: none;
+            .emptyImg{
+                width: 216px;
+            }
+            .emptyTxt{
+                width: 216px;
+                font-size:12px;
+                margin: 40px 0 0 0;
+                text-align: center;
+                color: #ccc;
+            }
+        }
         .mainWrapper{
             border: 1px solid #E6E6E6;
         }

src/html/knowledgeTree.html

@@ -19,7 +19,16 @@
       </div>
       <textarea class="searchTxt" id="searchTxt" autocomplete="off" rows="5"></textarea>
       <div class="btnBox"><span class="sumbit">提交</span></div>
-      <div id="main" class="mainWrapper" style="width: 1160px;height:600px;"></div>
+      <div class="mainBox">
+        <div id="main" class="mainWrapper" style="width: 1160px;height:600px;">
+          
+        </div>
+        <div class="empty">
+          <img class="emptyImg" src="./images/empty.png" alt="您提交的信息暂未收录">
+          <p class="emptyTxt">您提交的信息暂未收录!</p>
+        </div>
+      </div>
+      
     </div>
  
   </div>

src/js/knowledgeTree.js

@@ -1,6 +1,7 @@
 require("./../css/knowledgeTree.less");
 require("./../css/common.css");
 require('./../resources/images/logo.png');
+require('./../resources/images/empty.png');
 const $ = require("jquery");
 const echarts = require('echarts');
 const { getSchema } = require('./schemaMap.js');

src/js/schemaMap.js

@@ -7,6 +7,11 @@ function getSchema(val, type){
         "pramNme": val
     }).then(res=>{
         if(res.data.code == 0) {
+            if(res.data.data.length >0){
+                $('.empty').hide()
+            }else{
+                $('.empty').show()
+            }
             drawSchema(res.data.data)
         }
     })