修改我的节点页面卡片

unify-z · Aug 26, 2024 · 83fe42c · 83fe42c
1 parent 1e908a6
commit 83fe42c
Showing 1 changed file with 22 additions and 7 deletions.
diff --git 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>