数据库列表

src/views/detabase/analysis/index.vue

@@ -13,36 +13,61 @@
               v-for="(database, dbIndex) in item.databaseList"
               :key="dbIndex"
               :index="item.id + '-' + (dbIndex + 1)"
+              class="custom-menu-item"
             >
-              {{ database }}
+             <span>{{ database}}</span>
+              <el-select
+                clearable
+                v-model="select[dbIndex]"
+                style="margin-left: 10px"
+                class="custom-select"
+              >
+                <el-option
+                  v-for="item in tableList"
+                  :key="item"
+                  :label="item"
+                  :value="item">
+                  {{item}}
+                </el-option>
+              </el-select>
             </el-menu-item>
           </el-submenu>
         </el-menu>
       </el-aside>
 
       <el-container>
-        <el-header style="text-align: right; font-size: 12px">
-          <el-dropdown>
-            <i class="el-icon-setting" style="margin-right: 15px"></i>
-            <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item>查看</el-dropdown-item>
-              <el-dropdown-item>新增</el-dropdown-item>
-              <el-dropdown-item>删除</el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
-          <span>王小虎</span>
-        </el-header>
-
         <el-main>
-          <el-table :data="tableData">
+          <el-card style="height: 500px">
+            <el-container>
+              <el-header style="height: 200px">
+                <h1  style=" margin-top: -2px; font-size: 50px;  text-align: center; width: 100%; font-weight: 600; line-height: 100px ">{{title}}--资产结构概述</h1>
 
-            <el-table-column prop="date" label="日期" width="140">
+                <el-row style="margin-top: -50px" justify="center">
-            </el-table-column>
+                  <el-col :span="12">
-            <el-table-column prop="name" label="姓名" width="120">
+                    <el-card style="width: 80%;" class="centered-card"></el-card>
-            </el-table-column>
+                  </el-col>
-            <el-table-column prop="address" label="地址">
+                  <el-col :span="12">
-            </el-table-column>
+                    <el-card style="width: 80%;" class="centered-card"></el-card>
-          </el-table>
+                  </el-col>
+                </el-row>
+
+              </el-header>
+              <el-container>
+                <el-aside width="200px">Aside</el-aside>
+                <el-container>
+                  <el-main>Main</el-main>
+                  <el-footer>Footer</el-footer>
+                </el-container>
+              </el-container>
+            </el-container>
+            <textarea v-model="selectSqlResp.sql" style="height: 400px;width: 100%">
+
+            </textarea>
+            <el-button type="primary" @click="selectSql">查询</el-button>
+          </el-card>
+          <el-card style="height: 100%">
+
+          </el-card>
         </el-main>
       </el-container>
     </el-container>
@@ -74,23 +99,49 @@ export default {
       /*数据源查询条件*/
       queryParams: {},
       databaseList:[],
-      tableList:[]
+      tableList:[],
+      select:[],
+      selectSqlResp:{},
+      title:''
     }
   },
   created() {
     this.getList()
   },
+  watch:{
+    "select":{
+      handler(val){
+        val.forEach(item=>{
+          if(item){
+            this.selectSqlResp.tableName=item
+          }
+        })
+      },
+      deep:true
+    }
+  },
   methods: {
+    selectSql(){
+      console.log(this.selectSqlResp)
+    },
     /*选中标题*/
     handSubmenuTitle(item){
+      this.title=item.name
       let databaseConnect={};
+      item.databaseList=[]
       databaseConnect.username=item.username;
       databaseConnect.password=item.password;
       databaseConnect.host=item.host;
       databaseConnect.type=item.type;
       selectDatabaseList(databaseConnect).then(
         res=>{
-          item.databaseList=res.data
+          /*所有数据库*/
+          //item.databaseList=res.data
+          res.data.forEach(item1=>{
+            if(item1==item.databaseName){
+              item.databaseList.push(item1)
+            }
+          })
         }
       )
       console.log(item)
@@ -137,6 +188,7 @@ export default {
           password: item.password,
           type: item.type,
           connectionParam: item.connectionParam,
+          databaseName: item.databaseName,
           databaseList:[
 
           ]
@@ -150,6 +202,14 @@ export default {
 }
 </script>
 <style>
+
+.centered-card {
+  display: flex;
+  justify-content: center; /* 水平居中 */
+  align-items: center; /* 垂直居中 */
+  flex-direction: column; /* 如果需要垂直堆叠内容 */
+}
+
 .el-header {
   background-color: #B3C0D1;
   color: #333;
@@ -159,4 +219,28 @@ export default {
 .el-aside {
   color: #333;
 }
+
+.custom-menu-item {
+  display: flex;
+  align-items: center;
+}
+
+.custom-select {
+  margin-left: 10px; /* 根据需要调整间距 */
+}
+
+.el-header, .el-footer {
+  background-color: white;
+  color: #333;
+  text-align: center;
+  line-height: 60px;
+}
+
+
+.el-main {
+  background-color: #E9EEF3;
+  color: #333;
+  text-align: center;
+  line-height: 160px;
+}
 </style>