feat(security-inspection):重构巡查记录列表展示并添加分页功能

src/api/securityPatrolApi.js

@@ -6,6 +6,13 @@ export function getSecurityPatrolList(params) {
     params: params
   })
 }
+export function getPatrolList(params) {
+  return request({
+    url: '/api/sddnWeiHe/securityPatrol/patrolList',
+    method: 'get',
+    params: params
+  })
+}
 //新增监测数据
 export function toAddSecurityPatrol(data){
     return request({

src/views/safety-inspection/left.vue

@@ -5,7 +5,26 @@
       <div class="card-item">
         <ul class="record-list">
           <template v-if="recordList.length > 0">
-            <el-collapse v-model="activeNames" class="v-collapse">
+            <li class="record-list-item" v-for="(obj, i) in recordList" :key="i">
+                <div class="record-title">{{ obj.securityPatrolName }}</div>
+                <div class="record-content">
+                  <div class="record-item">
+                    <span>巡查开始时间：</span><span>{{ formatDate(obj.startTime) }}</span>
+                  </div>
+                  <div class="record-item">
+                    <span>巡查结束时间：</span><span>{{ formatDate(obj.endTime) }}</span>
+                  </div>
+                  <div class="record-item" style="display: flex; justify-content: space-between">
+                    <div>
+                      <span>巡查点位数：</span><span>{{ obj.countPatrolPoints }}个</span>
+                    </div>
+                    <div>
+                      <span>巡查责任人：</span><span>{{ obj.responsiblePerson }}</span>
+                    </div>
+                  </div>
+                </div>
+              </li>
+            <!-- <el-collapse v-model="activeNames" class="v-collapse">
               <template v-for="(item, index) in listItem">
                 <el-collapse-item :title="item.responsiblePerson" :name="index" :key="index">
                   <template slot="title">
@@ -35,7 +54,7 @@
                   </li>
                 </el-collapse-item>
               </template>
-            </el-collapse>
+            </el-collapse -->
           </template>
           <template v-else>
             <div class="noData">
@@ -44,6 +63,18 @@
             </div>
           </template>
         </ul>
+        <!-- 添加分页组件 -->
+        <div class="pagination-container" v-if="total > 0">
+          <el-pagination
+            @current-change="handlePageChange"
+            :current-page="pageNum"
+            :page-size="pageSize"
+            :total="total"
+            layout="prev, pager, next"
+            background
+            small>
+          </el-pagination>
+        </div>
       </div>
     </div>
   </BasePanelLeft>
@@ -51,7 +82,7 @@
 <script>
 import BasePanelLeft from '@/components/base-panel/base-panel-left'
 import BaseHeader from '@/components/base-header/base-header'
-import { getSecurityPatrolList } from '@/api/securityPatrolApi'
+import { getPatrolList } from '@/api/securityPatrolApi'
 import moment from 'moment'
 export default {
   name: 'safetyInspectionLeft',
@@ -59,11 +90,14 @@ export default {
   data() {
     return {
       recordList: [],
-      activeNames:[0,1,2,3]
+      activeNames:[0,1,2,3],
+      pageNum: 1,      // 当前页码
+      pageSize: 5,     // 每页显示数量
+      total: 0         // 总记录数
     }
   },
   mounted() {
-    this.getSecurityPatrolList()
+    this.getPatrolList()
   },
   computed: {
     // 将数据按 responsiblePerson 分组
@@ -83,11 +117,21 @@ export default {
     },
   },
   methods: {
-    getSecurityPatrolList() {
-      getSecurityPatrolList({ finishedState: 1 }).then((res) => {
+    getPatrolList() {
+      let pageNum = this.pageNum
+      let pageSize = this.pageSize
+      let params = { finishedState: 1, pageNum, pageSize }
+      getPatrolList(params).then((res) => {
         this.recordList = res.data.records
+        this.total = res.data.total
       })
     },
+    // 处理页码变化
+    handlePageChange(val) {
+      console.log(val)
+      this.pageNum = val
+      this.getPatrolList()
+    },
     formatDate(date) {
       return moment(date).format('YYYY-MM-DD HH:mm:ss')
     }
@@ -126,7 +170,7 @@ export default {
     flex-direction: column;
     padding: px-to-rem(10);
     padding-top: 0;
-    height: 100%;
+    height: 92%;
     overflow: auto;
     .v-collapse {
       border-top: 0;