dyf-vue-ui/src/views/equipmentManagement/devices/WarnRecord.vue

<template>
  <div class="content">
    <div class="topFilter">
      <el-form :inline="true" :model="filter" class="demo-form-inline">
        <el-form-item label="操作时间">
          <el-date-picker
            v-model="filter.Date"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
            :size="'default'"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getRecordList">查询</el-button>
          <el-button link type="primary" @click="filter.Date = []">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="grid" v-loading="Status.loading">
      <el-table ref="grid" v-loading="Status.loading" border :data="List" height="calc(100vh - 320px)">
        <el-table-column prop="deviceAction" label="报警事项" align="center">
          <template #default="scope">
            <div>{{ dic.warType[scope.row.deviceAction] }}</div>
          </template>
        </el-table-column>

        <el-table-column label="报警开始时间" align="center" prop="startTime" />
        <el-table-column label="报警结束时间" align="center" prop="finishTime" />
        <el-table-column label="报警持续时间" align="center" prop="durationTime" />
        <el-table-column label="处理状态" align="center" prop="treatmentState">
          <template #default="scope">
            <div>{{ dic.treamt[scope.row.deviceAction] ? dic.treamt[scope.row.deviceAction] :'未处理' }}</div>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="pagin.total > 0"
        v-model:page="pagin.pageIndex"
        v-model:limit="pagin.pageSize"
        :total="pagin.total"
        @pagination="getRecordList"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
import request from '@/utils/request';

const props = defineProps({
  data: {
    type: Object,
    required: true
  },
  acIndex: {
    type: Number,
    required: true
  }
});

var dic = {
  warType: {
    0: '强制报警',
    1: '撞击闯入',
    2: '手动报警',
    3: '电子围栏告警',
    4: '强制告警'
  },
  treamt:{
    0:"已处理",
    1:"未处理"
  }
};

var filter = ref({
  Date: []
});
var Status = ref({
  loading: false
});

var data = ref({});
var grid = ref(null);
var List = ref([]);
var pagin = ref({
  total: 0,
  pageIndex: 1,
  pageSize: 10
});
function getRecordList() {
  Status.value.loading = true;

  setTimeout(() => {
    initData(props.data, true);
  }, 0);
}

var deviceid = null;
function initData(item, Refresh) {
  if (deviceid == item.data.deviceId && !Refresh) {
    Status.value.loading = false;
    return;
  }
  List.value = [];
  deviceid = item.data.deviceId;
  let params = {
    startTime: '',
    endTime: '',
    pageNum:pagin.value.pageIndex,
    pageSize:pagin.value.pageSize,
    orderByColumn:"updateTime",
    isAsc:"descending"
  };
  if (filter.value.Date && filter.value.Date.length) {
    params.startTime = filter.value.Date[0];
    params.endTime = filter.value.Date.length > 1 ? filter.value.Date[1] : '';
  }

  request({
    url: '/api/device/getAlarmRecord/' + item.data.deviceId,
    method: 'get',
    params: params
  })
    .then((res) => {
      debugger;
      if (res.code == 200) {
        if (res.rows) {
          if (res.rows.length) {
            List.value = res.rows;
          }
        }
         pagin.value.total= res.total;
      }
    })
    .finally(() => {
      data.value = item.data;
      Status.value.loading = false;
    });
}

watch(
  () => props.acIndex, // 监听的属性
  (newVal) => {
    if (newVal === 4) {
      // 确保参数有效

      console.log('newVal=', newVal);
      getRecordList(); // 调用回调
    }
  },
  { immediate: true } // 关键：组件初始化时立即执行一次
);
</script>
<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 30px 12px 12px 12px;
}

.pickerContent {
  box-sizing: border-box;
  border: 1px solid rgba(189, 198, 215, 0.8);
  border-radius: 2px;
}
.topFilter {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-end;
  align-items: center;
}
:deep .pickerContent .el-date-editor {
  border: none !important;
}
</style>