draw

ruoyi-ui/src/views/echarts/myterminal/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="terminals">
-    <div id="pathlistdiv" style="width: 30%;height: 560px;background-color:#F3F4FA;margin-top: 20px;float: left;">
+    <!-- <div id="pathlistdiv" style="width: 30%;height: 560px;background-color:#F3F4FA;margin-top: 20px;float: left;">
       <ul v-for="list in pathlist">
         <li
           style="width: 99%;box-shadow: 3px 3px 1px 1px rgba(0, 0, 255, .2);margin:0 auto;margin-top: 5px;list-style: none;height: 40px;background-color: white;border-radius: 15px;text-align: center;line-height: 40px;">
@@ -26,6 +26,14 @@
       starting resourcemanager, logging to /root/software/hadoop-2.9.0/logs/yarn-root-resourcemanager-local1.out<br>
       local1: starting nodemanager, logging to /root/software/hadoop-2.9.0/logs/yarn-root-nodemanager-local1.out<br>
       [root@local1 ~]#
+    </div> -->
+    <div id="flumelistdiv" style="width: 40%;">
+      <el-table :data="tableData" stripe>
+        <el-table-column prop="name" label="序号" width="190px">
+        </el-table-column>
+        <el-table-column prop="scanpath" label="路径" width="360px">
+        </el-table-column>
+      </el-table>
     </div>
   </div>
 </template>
@@ -36,16 +44,31 @@
     data() {
       return {
         pathlist: [],
+        tableData: []
       }
     },
     methods: {
       axiosGet() {
+        var that = this;
         this.$http.get('/gethivepath')
           .then(resp => {
             console.log(resp.data);
             this.pathlist = resp.data;
+            that.$message({
+              showClose: true,
+              message: '路径获取成功！',
+              type: 'success'
+            });
+            for(var pathx in resp.data){
+              this.tableData.push({'name':pathx,'scanpath':resp.data[pathx]})
+            }
           })
           .catch(function(error) {
+            that.$message({
+              showClose: true,
+              message: '路径获取出错！请检查是否开启集群或联系管理员！',
+              type: 'error'
+            });
             console.log(error);
           });
       }
@@ -77,12 +100,12 @@
     margin-bottom: 10px;
     margin-top: 10px;
     width: 98%;
-    height: 640px;
+    height: 720px;
     background-color: #F3F4FA;
     border-radius: 15px;
   }
 
-  .btn {
+  /* .btn {
     width: 150px;
     height: 80px;
     display: flex;
@@ -104,14 +127,14 @@
     box-shadow: 0px 15px 0px 0px rgba(0, 0, 255, .2);
     transition: all .5s;
   }
-
+ */
   /*
   .three-d:hover {
       background-color: #eeeeee;
   } */
 
-  .three-d:active {
+  /* .three-d:active {
     transform: translate(0, 4px);
     box-shadow: 0px 1px 0px 0px #F3F4FA;
-  }
+  } */
 </style>