add table

src/views/dashboard/admin/index.vue

@@ -1,96 +1,69 @@
 <template>
   <div class="dashboard-editor-container">
-    <github-corner class="github-corner" />
+    <el-table
-
+      :data="tableData"
-    <panel-group @handleSetLineChartData="handleSetLineChartData" />
+      border
-
+      style="width: 100%"
-    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
+    >
-      <line-chart :chart-data="lineChartData" />
+      <el-table-column
-    </el-row>
+        prop="date"
-
+        label="所属集群"
-    <el-row :gutter="32">
+        width="180"
-      <el-col :xs="24" :sm="24" :lg="8">
+      />
-        <div class="chart-wrapper">
+      <el-table-column
-          <raddar-chart />
+        prop="name"
-        </div>
+        label="Node 名称"
-      </el-col>
+        width="180"
-      <el-col :xs="24" :sm="24" :lg="8">
+      />
-        <div class="chart-wrapper">
+      <el-table-column
-          <pie-chart />
+        prop="address"
-        </div>
+        label="Node IP"
-      </el-col>
+      />
-      <el-col :xs="24" :sm="24" :lg="8">
+      <el-table-column
-        <div class="chart-wrapper">
+        prop="role"
-          <bar-chart />
+        label="Role"
-        </div>
+      />
-      </el-col>
+      <el-table-column
-    </el-row>
+        prop="status"
-
+        label="状态"
-    <el-row :gutter="8">
+      />
-      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">
+    </el-table>
-        <transaction-table />
-      </el-col>
-      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
-        <todo-list />
-      </el-col>
-      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
-        <box-card />
-      </el-col>
-    </el-row>
   </div>
 </template>
 
 <script>
-import GithubCorner from '@/components/GithubCorner'
-import PanelGroup from './components/PanelGroup'
-import LineChart from './components/LineChart'
-import RaddarChart from './components/RaddarChart'
-import PieChart from './components/PieChart'
-import BarChart from './components/BarChart'
-import TransactionTable from './components/TransactionTable'
-import TodoList from './components/TodoList'
-import BoxCard from './components/BoxCard'
-
-const lineChartData = {
-  newVisitis: {
-    expectedData: [100, 120, 161, 134, 105, 160, 165],
-    actualData: [120, 82, 91, 154, 162, 140, 145]
-  },
-  messages: {
-    expectedData: [200, 192, 120, 144, 160, 130, 140],
-    actualData: [180, 160, 151, 106, 145, 150, 130]
-  },
-  purchases: {
-    expectedData: [80, 100, 121, 104, 105, 90, 100],
-    actualData: [120, 90, 100, 138, 142, 130, 130]
-  },
-  shoppings: {
-    expectedData: [130, 140, 141, 142, 145, 150, 160],
-    actualData: [120, 82, 91, 154, 162, 140, 130]
-  }
-}
-
 export default {
   name: 'DashboardAdmin',
-  components: {
-    GithubCorner,
-    PanelGroup,
-    LineChart,
-    RaddarChart,
-    PieChart,
-    BarChart,
-    TransactionTable,
-    TodoList,
-    BoxCard
-  },
   data() {
     return {
-      lineChartData: lineChartData.newVisitis
+      tableData: [] // 初始为空数组，将在 mounted 时获取数据
     }
   },
+  mounted() {
+    this.fetchTableData() // 页面加载时调用数据请求方法
+  },
   methods: {
-    handleSetLineChartData(type) {
+    fetchTableData() {
-      this.lineChartData = lineChartData[type]
+      fetch('http://localhost:5090/dashboard/nodes', {
+        method: 'Get',
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      })
+        .then(response => response.json())
+        .then(data => {
+          console.log('looking handsome', data)
+
+          // 假设返回的数据包含节点列表，并转换成表格所需格式
+          this.tableData = data.map(node => ({
+            date: node.cluster, // 假设 cluster 表示集群
+            name: node.name, // 假设 name 表示节点名称
+            address: node.ip, // 假设 ip 表示节点 IP
+            role: node.role, // 假设 role 表示节点角色
+            status: node.status // 假设 status 表示状态
+          }))
+        })
+        .catch(error => console.error('Error fetching table data:', error))
     }
   }
 }

vue.config.js

@@ -36,6 +36,13 @@ module.exports = {
       warnings: false,
       errors: true
     },
+    proxy: {
+      '/grafana': {
+        target: 'http://localhost:3030', // 替换为服务器 B 的域名或 IP 地址
+        changeOrigin: true,
+        pathRewrite: { '^/grafana': '' } // 如果服务器 B 的接口不以 /api 开头，去掉前缀
+      }
+    },
     before: require('./mock/mock-server.js')
   },
   configureWebpack: {