加了两个参数 pageNum 页数 pageSize 每页大小 ，返回结果也变了，原来返回是list集合现在返回的是个map对象，total是最大列数，result是原来返回的list集合分页后的结果

src/views/IntegratedAlarm/reliability/historyAnalyse/index.vue

@@ -154,8 +154,8 @@
       <el-table
         :data="state.tableData"
         stripe
-        height="calc(100% - 30px)"
-        style="height: calc(100% - 30px)"
+        height="calc(100% - 50px)"
+        style="height: calc(100% - 50px)"
         @sort-change="handleSortChange"
       >
         <el-table-column
@@ -216,6 +216,23 @@
           </template>
         </el-table-column>
       </el-table>
+      <div class="pagination-wrapper">
+        <el-pagination
+          layout="total, sizes, prev, pager, next"
+          :current-page="query.page"
+          :page-size="query.limit"
+          :page-sizes="[21, 100, 500, 1000]"
+          :total="query.pageTotal"
+          @size-change="
+            (value) => {
+              query.page = 1;
+              query.limit = value;
+              getTableList();
+            }
+          "
+          @current-change="handlePageChange"
+        ></el-pagination>
+      </div>
     </div>
     <el-dialog
       v-model="dialogVisible"
@@ -280,13 +297,17 @@ onMounted(() => {
   getWpArray();
   getequipmentmodel_list();
   getfetchRelatePart();
-//   state.tHeard = dataJson.data.data.title;
-//   state.tableData = dataJson.data.data.dataList;
   // getTableList();
 });
 const pageTitle = "报警分析";
 const store = useStore();
 const changZhanArray = ref([]);
+
+const query = reactive({
+  page: 1,
+  limit: 21,
+  pageTotal: null,
+});
 const state = reactive({
   typeVal: "windturbine",
   typeList: [
@@ -572,7 +593,7 @@ watch(
           : arr[1]?.[0]?.nemCode
           ? (state.components = [arr[1]?.[0]?.nemCode])
           : (state.components = []);
-        getAlarmId();
+        // getAlarmId();
       }
     }
   },
@@ -617,10 +638,20 @@ function getAlarmId() {
   ];
   getTableList();
 }
+
+// 分页导航
+const handlePageChange = (val) => {
+  query.page = val;
+  getTableList();
+};
+
 // 获取列表数据 调用接口
 function getTableList() {
   if (state.components?.length) {
+
     getAlarmCountList({
+        pageNum: query.page,
+        pageSize: query.limit,
       stationid: state.changZhan || "",
       begin: state.starttime,
       end: state.endtime,
@@ -637,7 +668,7 @@ function getTableList() {
             state.tableData = [];
         }
     }).catch(() =>{
-      changeTableData(dataJson.data.data.dataList)
+      changeTableData(dataJson)
     });
   } else {
     BASE.showMsg({
@@ -647,6 +678,7 @@ function getTableList() {
 }
 
 const changeTableData = (res) => {
+      query.pageTotal = res.length
     if (res.length) {
         let tableData = [];
         let tHeard = [];
@@ -832,6 +864,11 @@ const compare = function (property) {
         }
       }
     }
+    .pagination-wrapper :deep {
+        height: 30px;
+      text-align: right;
+      margin-top: 10px;
+    }
   }
   .bar {
     display: flex;