tmzn-weihe/src/views/safety-inspection/left.vue

<template>
  <BasePanelLeft>
    <div class="safety-inspection-left-container">
      <base-header title="巡查记录"></base-header>
      <div class="card-item">
        <ul class="record-list">
          <template v-if="recordList.length > 0">
            <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">
                    <div class="title-num">
                      <div class="left">{{ item.responsiblePerson }}</div>
                      <div class="right">{{ item.lists.length }}条</div>
                    </div>
                  </template>
                  <li class="record-list-item" v-for="(obj, i) in item.lists" :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-item>
              </template>
            </el-collapse -->
          </template>
          <template v-else>
            <div class="noData">
              <img src="@/assets/image/comprehensive/noData.png" alt="" />
              <div class="txt">暂无巡查记录</div>
            </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>
</template>
<script>
import BasePanelLeft from '@/components/base-panel/base-panel-left'
import BaseHeader from '@/components/base-header/base-header'
import { getPatrolList } from '@/api/securityPatrolApi'
import moment from 'moment'
export default {
  name: 'safetyInspectionLeft',
  components: { BasePanelLeft, BaseHeader },
  data() {
    return {
      recordList: [],
      activeNames:[0,1,2,3],
      pageNum: 1,      // 当前页码
      pageSize: 5,     // 每页显示数量
      total: 0         // 总记录数
    }
  },
  mounted() {
    this.getPatrolList()
  },
  computed: {
    // 将数据按 responsiblePerson 分组
    listItem() {
      const grouped = {}
      this.recordList.forEach((item) => {
        const person = item.responsiblePerson
        if (!grouped[person]) {
          grouped[person] = {
            responsiblePerson: person,
            lists: []
          }
        }
        grouped[person].lists.push(item)
      })
      return Object.values(grouped)
    },
  },
  methods: {
    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')
    }
  }
}
</script>
<style scoped lang="scss">
@import url('@/assets/scss/px-to-rem.scss');
.safety-inspection-left-container {
  position: relative;
  height: 100%;
  z-index: 1;
  .noData {
    width: 100%;
    height: 100%;
    text-align: center;
    img {
      margin-top: px-to-rem(70);
      margin-bottom: px-to-rem(20);
    }
    .txt {
      color: #fff;
      font-size: px-to-rem(14);
    }
  }
  .card-item {
    position: relative;
    width: 3.68rem;
    padding: px-to-rem(10);
    margin-bottom: px-to-rem(19);
    background: url('@/assets/image/common/areaBg.png') no-repeat 0 0 / 100% 100%;
    height: calc(100% - px-to-rem(72));
  }
  .record-list {
    display: flex;
    flex-direction: column;
    padding: px-to-rem(10);
    padding-top: 0;
    height: 92%;
    overflow: auto;
    .v-collapse {
      border-top: 0;
      border-bottom: 0;
      margin-top: px-to-rem(11);
      :deep(.el-collapse-item__header) {
        background: #2c5789;
        font-weight: 500;
        font-size: px-to-rem(14);
        color: #ffffff;
        padding: px-to-rem(5) px-to-rem(11);
        height: auto;
        line-height: initial;
        border-bottom: 0;
      }
      :deep(.el-collapse-item__wrap) {
        background-color: transparent;
        border-bottom: 0;
      }
      :deep(.el-collapse-item__content) {
        padding: px-to-rem(12) px-to-rem(0);
      }
      .title-num {
        width: 90%;
        display: flex;
        justify-content: space-between;
      }
    }
    &::-webkit-scrollbar {
      display: none;
    }
    .record-list-item {
      display: flex;
      flex-direction: column;
      margin-bottom: px-to-rem(10);
      .record-title {
        font-weight: bold;
        font-size: px-to-rem(14);
        color: #fff;
        line-height: px-to-rem(30);
      }
      .record-content {
        display: flex;
        flex-direction: column;
        border-bottom: 1px solid #5a80b4;
        padding-bottom: px-to-rem(20);
        .record-item {
          font-weight: 400;
          font-size: px-to-rem(14);
          color: #fff;
          opacity: 0.8;
          line-height: px-to-rem(30);
        }
      }
    }
  }
}
</style>