完成设备详情

src/views/equipmentManagement/devices/WarnRecord.vue

@@ -0,0 +1,181 @@
+<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>