历史报警列表

src/api/AlertMock.ts

@@ -1,4 +1,5 @@
 import { api } from 'src/boot/axios';
+import { PageDto, PageQueryDto } from './ApiCommon';
 
 const alertUriBase = '/api/alert/mock';
 
@@ -9,3 +10,31 @@ export function mockAlertSet(data: { lineId: number; alertType: string }) {
 export function mockAlertClear() {
   return api.post(`${alertUriBase}/clear`);
 }
+
+export class PagingQueryParams extends PageQueryDto {
+  alertType?: string;
+  lineId?: number;
+}
+
+interface Item {
+  id: number;
+  alertType: string;
+  timeType: string;
+  locationType: string;
+  drivingInfo: string;
+  submissionInfo: string;
+}
+
+/**
+ * 分页查询历史报警信息
+ * @param params
+ * @returns
+ */
+export async function alarmInfoListQuery(
+  params: PagingQueryParams
+): Promise<PageDto<Item>> {
+  const response = await api.get('/api/alertRecord/page/detail', {
+    params: params,
+  });
+  return response.data;
+}

src/components/alarm/alarmInfoDialog.vue

@@ -6,6 +6,7 @@
     :titleHeight="40"
     :fontSize="22"
     :width="dialogWidth"
+    fontColor=""
     :height="0"
   >
     <template v-slot:footer>

src/components/alarm/alarmInfoList.vue

@@ -1,13 +1,173 @@
 <template>
-  <draggable-dialog seamless title="报警列表" :width="500" :height="300">
-    <template>
-      <div>ZHAO</div>
-    </template>
+  <draggable-dialog
+    seamless
+    title="报警列表"
+    :width="dialogWidth"
+    :height="dialogHeight"
+  >
+    <q-table
+      ref="tableRef"
+      title="报警信息"
+      :style="{ height: dialogHeight + 'px' }"
+      :rows="rows"
+      :columns="columnDefs"
+      row-key="id"
+      v-model:pagination="pagination"
+      :rows-per-page-options="[10, 20, 50, 100]"
+      :loading="loading"
+      :filter="filter"
+      binary-state-sort
+      @request="onRequest"
+    >
+      <template v-slot:top-left>
+        <q-input
+          dense
+          debounce="1000"
+          v-model.number="filter.lineId"
+          label="线路ID"
+          type="number"
+        />
+        <q-btn flat round color="primary" icon="search" />
+      </template>
+      <template v-slot:top-right>
+        <q-input
+          dense
+          debounce="1000"
+          v-model="filter.alertType"
+          label="故障类型"
+        ></q-input>
+        <q-btn flat round color="primary" icon="search" />
+      </template>
+    </q-table>
   </draggable-dialog>
 </template>
 
 <script setup lang="ts">
 import DraggableDialog from '../common/DraggableDialog.vue';
-import { useQuasar } from 'quasar';
-import { ref } from 'vue';
+import { ref, reactive, onMounted } from 'vue';
+import { useQuasar, type QTableColumn } from 'quasar';
+import { alarmInfoListQuery } from 'src/api/AlertMock';
+
+const $q = useQuasar();
+const dialogWidth = window.screen.width * 0.5;
+const dialogHeight = window.screen.height * 0.5;
+onMounted(() => {
+  setTimeout(() => {
+    tableRef.value.requestServerInteraction();
+  });
+});
+
+const columnDefs: QTableColumn[] = [
+  {
+    name: 'id',
+    label: '编号',
+    field: 'id',
+    required: true,
+    align: 'center',
+  },
+  {
+    name: 'alertTime',
+    label: '时间',
+    field: 'alertTime',
+    align: 'center',
+  },
+  {
+    name: 'lineId',
+    label: '线路',
+    field: 'lineId',
+    align: 'center',
+  },
+  {
+    name: 'alertObject',
+    label: '设备',
+    field: 'alertObject',
+    align: 'center',
+  },
+  {
+    name: 'level',
+    label: '级别',
+    field: (row) => {
+      if (row.level) {
+        return (showAlertTypeData as never)[row.level + ''];
+      }
+    },
+    align: 'center',
+  },
+  {
+    name: 'alertType',
+    label: '故障类型',
+    field: (row) => {
+      if (row.alertType) {
+        return (showAlertTypeData as never)[row.alertType];
+      }
+    },
+    align: 'center',
+  },
+];
+
+const tableRef = ref();
+const rows = reactive([]);
+const filter = reactive({
+  alertType: '',
+  lineId: '',
+});
+const loading = ref(false);
+const pagination = ref({
+  sortBy: 'desc',
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+  rowsNumber: 10,
+});
+
+async function onRequest(props: any) {
+  const { page, rowsPerPage, sortBy, descending } = props.pagination;
+  const filter = props.filter;
+  loading.value = true;
+  try {
+    let response = await alarmInfoListQuery({
+      current: page,
+      size: rowsPerPage,
+      alertType: (saveAlertTypeData as never)[filter.alertType],
+      lineId: filter.lineId,
+    });
+    const pageData = response;
+    pagination.value.rowsNumber = pageData.total;
+    pagination.value.page = page;
+    pagination.value.rowsPerPage = rowsPerPage;
+    pagination.value.sortBy = sortBy;
+    pagination.value.descending = descending;
+    rows.splice(0, rows.length, ...(pageData.records as []));
+  } catch (err) {
+    $q.notify({
+      type: 'negative',
+      message: '无法获取报警信息列表',
+    });
+  } finally {
+    loading.value = false;
+  }
+}
+
+enum showAlertTypeData {
+  ALERT_TYPE_UNKNOWN = '未知故障',
+  BLUE_DISPLAY = '蓝显',
+  TRAIN_DELAY_2 = '列车延误2分钟',
+  TRAIN_DELAY_10 = '列车延误10分钟',
+  PLATFORM_DOOR_WITHOUT_LOCKED_SIGNAL = '站台门无关闭且锁紧信号',
+  PLATFORM_DOOR_CANNOT_OPEN = '整侧站台门无法打开',
+  PLATFORM_DOOR_CANNOT_CLOSE = '整侧站台门无法关闭',
+  I = 'I类信息',
+  II = 'II类信息',
+  III = 'III类信息',
+  IV = 'IV类信息',
+}
+
+enum saveAlertTypeData {
+  列车延误2分钟 = 'TRAIN_DELAY_2',
+  列车延误10分钟 = 'TRAIN_DELAY_10',
+  蓝显 = 'BLUE_DISPLAY',
+  站台门无关闭且锁紧信号 = 'PLATFORM_DOOR_WITHOUT_LOCKED_SIGNAL',
+  整侧站台门无法打开 = 'PLATFORM_DOOR_CANNOT_OPEN',
+  整侧站台门无法关闭 = 'PLATFORM_DOOR_CANNOT_CLOSE',
+}
 </script>