From 17530b6c92cf7a9885984b7a06f6e0556573520b Mon Sep 17 00:00:00 2001
From: Wangjunqi123 <wangjunqi@kylinos.cn>
Date: Thu, 16 Nov 2023 09:05:29 +0800
Subject: [PATCH] adjust clusterview

---
 web/src/views/ClusterView.vue | 106 +++++++++++++++++-----------------
 1 file changed, 54 insertions(+), 52 deletions(-)

diff --git a/web/src/views/ClusterView.vue b/web/src/views/ClusterView.vue
index eed66ab..2a19f77 100755
--- a/web/src/views/ClusterView.vue
+++ b/web/src/views/ClusterView.vue
@@ -15,7 +15,7 @@
             </div>
             <div class="noDrag">
               <MyEcharts :query="item.query" :startTime="startTime"
-                :endTime="endTime" style="width:100%;height:100%;">
+                :endTime="endTime" :style="{ 'width': '100%', 'height': '100%'}">
               </MyEcharts>
             </div>
           </grid-item>
@@ -273,6 +273,7 @@ const SizeAutoChange = (i: string, isChart?: boolean) => {
 }
 
 .drag {
+  --title_height: 24px;
   width: 100%;
   height: var(--title_height);
   border-radius: 4px 4px 0 0;
@@ -302,6 +303,7 @@ const SizeAutoChange = (i: string, isChart?: boolean) => {
     }
 
 .noDrag {
+  --title_height: 24px;
   width: 100%;
   height: calc(100% - var(--title_height));
   margin-top: var(--title_height);
@@ -317,67 +319,67 @@ const SizeAutoChange = (i: string, isChart?: boolean) => {
     user-select: none;
   }
 
-  .vue-grid-layout {
+.vue-grid-layout {
   width: 100%;
   height: 100%;
   margin-top: 5px;
   background: #f1ecec;
+}
+.vue-grid-item {
+  box-sizing: border-box;
+  background-color: #ffffff;
+  border-radius: 4px;
+  box-shadow: 0 1px 5px rgba(45, 47, 51, 0.1);
+}
 
-  .vue-grid-item {
-    box-sizing: border-box;
-    background-color: #fff;
-    border-radius: 4px;
-    box-shadow: 0 1px 5px rgba(45, 47, 51, 0.1);
-  }
-
-  .vue-grid-item .resizing {
-    opacity: 0.9;
-  }
+.vue-grid-item .resizing {
+  opacity: 0.9;
+}
 
-  .vue-grid-item .static {
-    background: #cce;
-  }
+.vue-grid-item .static {
+  background: #cce;
+}
 
-  .vue-grid-item .text {
-    font-size: 24px;
-    text-align: center;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    margin: auto;
-    height: 100%;
-    width: 100%;
-  }
+.vue-grid-item .text {
+  font-size: 24px;
+  text-align: center;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  height: 100%;
+  width: 100%;
+}
 
-  .vue-grid-item .no-drag {
-    height: 100%;
-    width: 100%;
-  }
+.vue-grid-item .no-drag {
+  height: 100%;
+  width: 100%;
+}
 
-  .vue-grid-item .minMax {
-    font-size: 12px;
-  }
+.vue-grid-item .minMax {
+  font-size: 12px;
+}
 
-  .vue-grid-item .add {
-    cursor: pointer;
-  }
+.vue-grid-item .add {
+  cursor: pointer;
+}
 
-  .vue-draggable-handle {
-    position: absolute;
-    width: 20px;
-    height: 20px;
-    top: 0;
-    left: 0;
-    /* background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>") no-repeat; */
-    background-color: aqua;
-    background-position: bottom right;
-    padding: 0 8px 8px 0;
-    background-repeat: no-repeat;
-    background-origin: content-box;
-    box-sizing: border-box;
-    cursor: pointer;
-  }
+.vue-draggable-handle {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  top: 0;
+  left: 0;
+  /* background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>") no-repeat; */
+  background-color: aqua;
+  background-position: bottom right;
+  padding: 0 8px 8px 0;
+  background-repeat: no-repeat;
+  background-origin: content-box;
+  box-sizing: border-box;
+  cursor: pointer;
 }
+
 </style>
-- 
Gitee