Selaa lähdekoodia

增加底部表格数据的显示,及样式优化

yanglzh 11 kuukautta sitten
vanhempi
commit
553d058d33
1 muutettua tiedostoa jossa 31 lisäystä ja 11 poistoa
  1. 31 11
      src/views/home/AllLink.vue

+ 31 - 11
src/views/home/AllLink.vue

@@ -6,17 +6,17 @@
         <el-input size="small" v-model="form.end" style="width: 120px;margin-right: 6px;" placeholder="末节点"></el-input>
         <button class="el-button el-button--primary el-button--small" @click="search">搜索</button>
       </div>
-      <button class="el-button el-button--primary el-button--small" @click="search">返回上一级</button>
+      <!-- <button class="el-button el-button--primary el-button--small" @click="search">返回上一级</button> -->
       <!-- <button type="primary" size="small" class="btn" v-if="level === 1" @click="draw">返回上一级</button> -->
     </div>
     <div class="chart" id="g6ChartWrapper"></div>
-    <div class="table-wrapper" v-if="showTable">
-      <el-table :data="tableData" border size="small" style="width: 100%" max-height="200px" v-loading="loading">
+    <div class="table-wrapper">
+      <el-table :data="tableData" v-if="showTable" border size="small" style="width: 100%" height="128px" v-loading="loading">
         <el-table-column prop="ID" label="ID" align="center" wud />
         <el-table-column prop="USE_STATUS" label="USE_STATUS" align="center" />
         <el-table-column prop="OS_TYPE" label="OS_TYPE" align="center" />
         <el-table-column prop="SERVER_NAME" label="SERVER_NAME" align="center" />
-        <el-table-column prop="IMPACT" label="IMPACT" align="center" show-overflow-tooltip/>
+        <el-table-column prop="IMPACT" label="IMPACT" align="center" show-overflow-tooltip />
         <!-- <el-table-column prop="APPLICATION_DESCRIPTION" label="APPLICATION_DESCRIPTION" align="center" />
         <el-table-column prop="APPLICATION_REMARK" label="APPLICATION_REMARK" align="center" /> -->
         <el-table-column prop="SERVER_TYPE" label="SERVER_TYPE" align="center" />
@@ -93,7 +93,6 @@ function draw() {
   // graph.on('node:click', nodeClick2);
 }
 
-
 function draw2() {
   level.value = 2
   graph.clear();
@@ -110,18 +109,39 @@ function draw2() {
   position: relative;
   // display: flex;
   // justify-content: space-between;
+  display: flex;
+  flex-flow: column;
 
   .table-wrapper {
-    width: 97vw;
-    margin-left: 20px;
-    position: fixed;
-    left: 0;
-    bottom: 1.5vw;
+    // width: 97vw;
+    // margin-left: 20px;
+    // position: fixed;
+    // left: 0;
+    // bottom: 1.5vw;
+    height: 128px;
+    margin-bottom: 2vw;
+
+    .el-table ::v-deep {
+      --el-table-border-color: #555;
+      --el-table-bg-color: #101220;
+      --el-table-tr-bg-color: #101220;
+      --el-table-header-bg-color: #101220;
+      --el-fill-color-light: #555;
+      --el-mask-color: #555;
+
+      tr {
+        color: #fff;
+      }
+
+      th {
+        color: #fff;
+      }
+    }
   }
 
   .chart {
     flex: 1;
-    height: calc(100% - 2vw);
+    // height: calc(100% - 2vw);
   }
 
   .search {