alarm-manage/src/views/Home.vue

<template>
  <div style="height: calc(100vh - 2.5rem); overflow: auto; margin-top: 1.3rem;">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        :finished-text="finishedText"
        @load="onLoad"
      >
        <van-cell v-for="item in list" :key="item.id" class="panel-container">
          <van-panel :title="`${item.userName ? item.userName : ''} ${item.userMobile ? item.userMobile : ''}`" :desc="`${item.createTime}`" status="紧急报警">
            <div class="panel-content">
              <div style="font-size: 0.27rem;" v-if="item.address && item.longitude !== 0 && item.latitude !== 0">设备{{item.imei}}，在{{item.address}}附近发起紧急报警。</div>
              <div style="font-size: 0.27rem;" v-else>设备{{item.imei}}， {{item.address}}</div>
              <div style="text-align: right">
                <van-button size="small" type="primary" @click.native="handleDetailAlarm(item)">处理</van-button>
              </div>
            </div>
          </van-panel>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { Toast, Dialog } from "vant";
import { mapGetters, mapActions } from "vuex";

export default {
  data() {
    return {
      list: [],
      dialogLoading: false,
      loading: false,
      finished: false,
      refreshing: false,
      page: 1,
      finishedText: '已经到底啦~~'
    };
  },
  computed: {
    ...mapGetters(["alarmList"]),
  },
  methods: {
    ...mapActions({
      getAlarmList: "alarm/fetchAlarmList",
      handleAlarms: "alarm/handleAlarms"
    }),
    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
            this.list = [];
            this.refreshing = false;
          }
          this.getAlarmList(`startTime=&endTime=&state=0&limit=10&page=${this.page}&type=0&sidx=&order=asc&serviceTime=1`).then((res) => {
            this.loading = false;
            if (res.code === 0) {
              this.list.push(...this.alarmList);
              if (this.page == res.totalPage) {
                this.finishedText = '已经到底啦~~'
                this.finished = true;
              }
              this.page++;
            } else {
              this.finished = true;
              this.finishedText = '服务器异常，请稍后重试~~'
            }
          });
      }, 500);
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.page = 1;
      this.onLoad();
    },
    handleDetailAlarm(alarm) {
      Dialog.confirm({
        title: '报警处理',
        message: '是否处理该紧急报警？',
        beforeClose: (action, done) => {
          if (action === 'confirm') {
            this.handleAlarms([alarm.id]).then(res => {
              if (res.code === 0) {
                Toast.success('处理成功！');
                this.list = []
                this.onRefresh()
              }
              done()
            })
          } else done()
        }
      }).catch(() => {
        console.log('返回')
      })
    }
  },
};
</script>
<style lang="less">
.panel-container {
  margin-bottom: 5px;
  .panel-content {
    padding: 0.26667rem 0.4rem;
  }
}
.van-hairline--top-bottom::after {
  border: none !important;
}

.van-cell {
  padding-bottom: 0 !important;
  .van-cell__title {
    flex: 3;
  }
}
</style>