监控中心 - 环境监控 根据UI设计图进行页面优化

hx-ai-intelligent/src/view/monitor/environmentMonitor/averageData/index.vue

@@ -1,19 +1,22 @@
 <!-- eslint-disable vue/v-on-event-hyphenation -->
 <template>
   <!-- <a-spin :spinning="loading"> -->
-  <div style="background: #ffffff; height: 95%">
+  <div style="background: #ffffff; height: 95%; position: relative">
     <a-spin :spinning="loading">
       <a-table
         :columns="tableColumns"
         :data-source="pageData"
         bordered
         :pagination="false"
+        style="height: 75%"
         :scroll="{ x: 100, y: 450 }">
         <template #title>
           <div
             style="display: flex; align-items: center; justify-content: space-between; width: 100%">
             <div style="display: flex; align-items: center; width: 85%">
-              <div style="width: 10%">数据报表</div>
+              <div style="width: 10%"
+                ><ns-icon name="title" size="11" style="margin-right: 3px" />数据报表</div
+              >
 
               <a-select
                 v-model:value="frequencyValue"
@@ -39,15 +42,24 @@
           </div>
         </template>
       </a-table>
-      <a-pagination
-        :current="queryParams.pageNum"
-        :total="total"
-        :page-size="queryParams.pageSize"
-        style="display: flex; justify-content: center; margin-top: 16px"
-        :show-size-changer="true"
-        :show-quick-jumper="true"
-        @change="onChange" />
     </a-spin>
+    <a-pagination
+      :current="queryParams.pageNum"
+      :total="total"
+      :show-total="(total, range) => ` 共 ${total} 条`"
+      :page-size="queryParams.pageSize"
+      style="
+        display: flex;
+        position: absolute;
+        bottom: 20px;
+        right: 30px;
+        justify-content: right;
+        margin-top: 16px;
+        margin-right: 30px;
+      "
+      :show-size-changer="true"
+      :show-quick-jumper="true"
+      @change="onChange" />
   </div>
   <!-- </a-spin> -->
 </template>