From 83fe42c293a3a25cbb0cffed0add60f1ce20757e Mon Sep 17 00:00:00 2001
From: unify-z <3336016933@qq.com>
Date: Mon, 26 Aug 2024 14:27:20 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=88=91=E7=9A=84=E8=8A=82?=
 =?UTF-8?q?=E7=82=B9=E9=A1=B5=E9=9D=A2=E5=8D=A1=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/myclusters.vue | 29 ++++++++++++++++++++++-------
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/pages/myclusters.vue b/src/pages/myclusters.vue
index 9bfc23e..eb3468a 100644
--- a/src/pages/myclusters.vue
+++ b/src/pages/myclusters.vue
@@ -1,16 +1,18 @@
 <template>
   <div>
-  <el-button type="primary" @click="bindCluster" class="bind-button">绑定节点</el-button>
+    <el-button type="primary" @click="bindCluster" class="bind-button">绑定节点</el-button>
     <el-row :gutter="20">
       <el-col :span="8" v-for="cluster in clusters" :key="cluster.clusterId">
-        <el-card class="card">
+        <el-card :class="{'card-online': isOnline(cluster), 'card-offline': !isOnline(cluster)}">
           <div class="card-title font-weight-black white-text">
             {{ cluster.clusterName }}
           </div>
           <el-divider></el-divider>
           <div class="card-text">
-            <p>clusterId:{{ cluster.clusterId }}</p>
-            <p>EndPoint:{{ cluster.endPoint }}</p>
+            <p>ID: {{ cluster.clusterId }}</p>
+            <p>EndPoint: {{ cluster.endPoint }}</p>
+            <p>上传速率: {{ cluster.bandwidth }}</p>
+            <p>创建日期: {{ cluster.createdAt }}</p>
           </div>
         </el-card>
       </el-col>
@@ -89,11 +91,16 @@ async function bindCluster() {
     ElMessage.success('节点绑定成功');
     fetchClusters(); 
   } catch (error) {
-    ElMessage.error('节点绑定失败:'+error);
+    ElMessage.error('节点绑定失败: ' + error);
     console.error(error);
   }
 }
 
+function isOnline(cluster) {
+
+  return cluster.isOnline === 'online'; 
+}
+
 onMounted(() => {
   main();
 });
@@ -105,7 +112,7 @@ onMounted(() => {
   color: white;
   padding: 16px;
 }
-.card{
+.card {
   margin-top: 10px;
   margin-left: 10px;
 }
@@ -114,6 +121,14 @@ onMounted(() => {
 }
 .bind-button {
   margin-top: 20px;
-  margin-left: 10px
+  margin-left: 10px;
+}
+
+.card-online {
+  background-color: #00cc66; 
+}
+
+.card-offline {
+  background-color: #ff6666;
 }
 </style>