实时同步-任务运维

src/views/realTimeSync/taskOperationsMaintenance/workDetail.vue

@@ -23,7 +23,7 @@
         >
       </div>
     </div>
-    <div style="margin-left: 20px">
+    <div style="margin: 0 20px">
       <Tabs defaultActiveKey="任务运行详情" @change="handleChangeTab">
         <TabPane tab="任务运行详情" key="任务运行详情">
           <img
@@ -45,7 +45,7 @@
                 </RadioGroup>
               </div>
             </div>
-            <BasicTable @register="registerTable1">
+            <BasicTable class="color-able" @register="registerTable1">
               <template #bodyCell="{ column, record, text }">
                 <template v-if="column.key === 'action'">
                   <TableAction
@@ -62,8 +62,8 @@
           </div>
         </TabPane>
         <TabPane tab="任务事件详情" key="任务事件详情">
-          <div style="width: 100%; height: 100%; background-color: white">
-            <div style="width: 100%; height: 30%">
+          <div style="width: 100%; background-color: white">
+            <div style="width: 100%">
               <div style="height: 30px">
                 <div class="selectCss">
                   <BasicForm @register="registerForm" />
@@ -168,7 +168,7 @@
                 </Row>
               </div>
             </div>
-            <div style="width: 100%; height: 70%">
+            <div style="width: 100%">
               <div style="display: flex; justify-content: space-between">
                 <div style="margin-left: 10px">
                   <a-input-search
@@ -197,8 +197,8 @@
           </div>
         </TabPane>
         <TabPane tab="异常数据详情" key="异常数据详情">
-          <div style="width: 100%; height: 100%; background-color: white">
-            <div style="width: 100%; height: 30%">
+          <div style="width: 100%; background-color: white">
+            <div style="width: 100%">
               <div style="height: 30px; display: flex; justify-content: space-between">
                 <div class="selectCss">
                   <BasicForm @register="registerForm2" />
@@ -344,7 +344,7 @@
                 </Row>
               </div>
             </div>
-            <div style="width: 100%; height: 70%">
+            <div style="width: 100%">
               <BasicTable @register="registerTable3">
                 <template #bodyCell="{ column, record }">
                   <template v-if="column.key === 'action'">
@@ -363,8 +363,8 @@
           </div>
         </TabPane>
         <TabPane tab="DDL事件详情" key="DDL事件详情">
-          <div style="width: 100%; height: 100%; background-color: white">
-            <div style="width: 100%; height: 30%">
+          <div style="width: 100%; background-color: white">
+            <div style="width: 100%">
               <div style="height: 30px">
                 <div class="selectCss">
                   <BasicForm @register="registerForm3" />
@@ -524,7 +524,7 @@
                 </Row>
               </div>
             </div>
-            <div style="width: 100%; height: 70%">
+            <div style="width: 100%">
               <BasicTable @register="registerTable4">
                 <template #bodyCell="{ column, record }">
                   <template v-if="column.key === 'action'">
@@ -702,6 +702,7 @@
                 </Col>
               </Row>
             </div>
+            <div style="display: flex; flex-direction: column; gap: 30px; height: 100%">
               <div style="height: 25%">
                 <Card size="small" class="w-full !md:mt-0" :loading="loading" title="同步任务总览">
                   <div style="display: flex">
@@ -709,7 +710,7 @@
                   </div>
                 </Card>
               </div>
-            <div style="display: flex; height: 25%">
+              <div style="display: flex; gap: 20px; height: 25%">
                 <Card
                   class="md:w-1/2 w-full !md:mt-0"
                   size="small"
@@ -731,7 +732,6 @@
                 </Card>
                 <Card
                   class="md:w-1/2 w-full !md:mt-0"
-                style="height: 220%"
                   size="small"
                   :loading="loading"
                   title="数据延迟"
@@ -741,7 +741,7 @@
                   </div>
                 </Card>
               </div>
-            <div style="display: flex; height: 25%">
+              <div style="display: flex; gap: 20px; height: 25%">
                 <Card
                   class="md:w-1/2 w-full !md:mt-0"
                   size="small"
@@ -750,8 +750,9 @@
                 >
                   <div ref="chartRef7" style="width: 80%; height: 220%"></div>
                 </Card>
+                <div class="md:w-1/2 w-full !md:mt-0" style="display: flex; gap: 20px">
                   <Card
-                class="md:w-1/4 w-full !md:mt-0"
+                    class="md:w-1/2 w-full !md:mt-0"
                     size="small"
                     :loading="loading"
                     title="同步点信息"
@@ -768,7 +769,7 @@
                     >
                   </Card>
                   <Card
-                class="md:w-1/4 w-full !md:mt-0"
+                    class="md:w-1/2 w-full !md:mt-0"
                     size="small"
                     :loading="loading"
                     title="日志文件"
@@ -785,7 +786,8 @@
                     >
                   </Card>
                 </div>
-            <div style="display: flex; height: 25%">
+              </div>
+              <div style="display: flex; gap: 20px; height: 25%">
                 <Card
                   class="md:w-1/2 w-full !md:mt-0"
                   size="small"
@@ -804,6 +806,7 @@
                 </Card>
               </div>
             </div>
+          </div>
         </TabPane>
       </Tabs>
     </div>
@@ -1746,7 +1749,7 @@
     selectIndex.value = item;
   }
   function getColor() {
-    const domList = document.querySelectorAll('.ant-table-row-level-0');
+    const domList = document.querySelectorAll('.color-able .ant-table-row-level-0');
     const upList = [];
     for (let item of domList) {
       const tdList = item.querySelectorAll('.ant-table-cell-ellipsis');