fix:报警操作台页面修改

src/views/andonManagement/humanComputerInteraction/index.vue

@@ -17,15 +17,18 @@
                         </template>
 </el-table-column> -->
                 </el-table>
-                <pagination class="mt10" background :total="total" :page.sync="queryParams.pageNum"
-                    :limit.sync="queryParams.pageSize" @pagination="getLeftList" />
+
+                <!-- 使用Element UI的pagination组件 -->
+                <el-pagination background :current-page="queryParams.pageNum" :page-sizes="[10, 20, 50, 100]"
+                    :page-size="queryParams.pageSize" layout="prev, pager, next,total" :total="total"
+                    @size-change="handleSizeChange" @current-change="handleCurrentChange" style="margin-top: 10px;" />
             </el-col>
             <el-col :span="18">
                 <div style="width: 100%; height: 50px;">
                     <el-button type="primary" @click="handleAdd">新增</el-button>
                     <el-button type="primary" @click="handleQuery">查询</el-button>
                 </div>
-                <div style="width: 100%; height: 80vh; ">
+                <div style="width: 100%; ">
                     <el-row :gutter="10">
                         <el-col :span="24">
                             <el-form ref="form" :model="form" label-width="100" label-position="left">
@@ -125,8 +128,8 @@
                     </el-table>
                 </div>
             </el-col>
-
         </el-row>
+
         <!-- 查询弹窗 -->
         <el-dialog @close="handleClose" :close-on-click-modal="false" title="查询" :visible.sync="queryVisible"
             width="500px">
@@ -146,11 +149,12 @@
                 <el-button type="primary" @click="handleTimeSubmit">确 定</el-button>
             </div>
         </el-dialog>
+
         <!-- 新增 -->
-        <el-dialog :close-on-click-modal="false" @close="cancel" :title="title" :lock-scroll="false" :visible.sync="open">
+        <el-dialog :close-on-click-modal="false" @close="cancel" :title="title" :lock-scroll="false"
+            :visible.sync="open">
             <el-form ref="form" :model="form1" :rules="rules" :label-width="formLabelWidth">
                 <el-row :gutter="20">
-
                     <el-col :lg="12">
                         <el-form-item label="报警类型" prop="alarmType">
                             <el-select v-model="form1.alarmType" placeholder="请选择报警类型" @change="handleAlarmTypeChange">
@@ -159,7 +163,6 @@
                             </el-select>
                         </el-form-item>
                     </el-col>
-
                     <el-col :lg="12">
                         <el-form-item label="父区域" prop="area1">
                             <el-select v-model="form1.area1" placeholder="请选择区域" @change="handleAreaChange">
@@ -176,19 +179,16 @@
                             </el-select>
                         </el-form-item>
                     </el-col>
-
                     <el-col :lg="12">
                         <el-form-item label="报警信息" prop="alarmInfo">
                             <el-input v-model="form1.alarmInfo" placeholder="请输入报警信息" />
                         </el-form-item>
                     </el-col>
-
                     <el-col :lg="12">
                         <el-form-item label="备注" prop="remarks">
                             <el-input v-model="form1.remarks" placeholder="请输入备注" />
                         </el-form-item>
                     </el-col>
-
                 </el-row>
             </el-form>
             <div slot="footer" class="dialog-footer">
@@ -207,6 +207,7 @@ import {
     getAndonAreaChildDictList,//区域二
 } from '@/api/andonManagement/policeRecord/index.js';
 import store from '@/store';
+
 export default {
     data() {
         const rules = {
@@ -268,7 +269,6 @@ export default {
         }
     },
 
-
     created() {
         this.userId = store.getters.userId;
         this.userName = store.getters.userName;
@@ -287,7 +287,6 @@ export default {
                 })
             }
         })
-
     },
 
     mounted() {
@@ -408,7 +407,6 @@ export default {
         submitForm: function () {
             this.$refs["form"].validate((valid) => {
                 if (valid) {
-
                     let data = {
                         ...this.form1,
                     };
@@ -566,6 +564,18 @@ export default {
             const day = String(date.getDate()).padStart(2, '0');
             return `${year}-${month}-${day}`;
         },
+
+        // 分页相关方法
+        handleSizeChange(val) {
+            this.queryParams.pageSize = val;
+            this.queryParams.pageNum = 1; // 重置为第一页
+            this.getLeftList();
+        },
+
+        handleCurrentChange(val) {
+            this.queryParams.pageNum = val;
+            this.getLeftList();
+        }
     }
 }
 </script>