From 0c1471f65155dfe00dd93e6bf43751543d0434e5 Mon Sep 17 00:00:00 2001
From: joylink_fanyuhong <18706759286@163.com>
Date: Fri, 15 Nov 2024 09:03:37 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8A=A5=E8=AD=A6=E8=AE=B0=E5=BD=95=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SysMenu.vue |   2 +-
 src/layouts/MainLayout.vue |   8 +
 src/pages/AlarmRecord.vue  | 294 +++++++++++++++++++++++++++++++++++++
 src/router/routes.ts       |  15 ++
 4 files changed, 318 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/AlarmRecord.vue

diff --git a/src/components/SysMenu.vue b/src/components/SysMenu.vue
index 39e6192..fd6aaa4 100644
--- a/src/components/SysMenu.vue
+++ b/src/components/SysMenu.vue
@@ -130,7 +130,7 @@ const list = reactive([
   },
   {
     show: true,
-    path: '/sysManage/alarmRecord',
+    path: '/alarmInfo/list',
     label: '报警管理',
     icon: 'alarm_on',
   },
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index d2159a7..666dd9c 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -51,6 +51,13 @@
             label="返回"
             @click="backConfirm"
           />
+          <q-toggle
+            v-model="faultStatistics"
+            checked-icon="check"
+            color="red"
+            label="故障信息统计"
+            unchecked-icon="clear"
+          />
           <q-btn
             round
             dense
@@ -141,6 +148,7 @@ const router = useRouter();
 const route = useRoute();
 const lineStore = useLineStore();
 const lineNetStore = useLineNetStore();
+const faultStatistics = ref(false);
 
 watch(
   () => route.path,
diff --git a/src/pages/AlarmRecord.vue b/src/pages/AlarmRecord.vue
new file mode 100644
index 0000000..bbb4b65
--- /dev/null
+++ b/src/pages/AlarmRecord.vue
@@ -0,0 +1,294 @@
+<template>
+  <div class="q-pa-md">
+    <q-table
+      ref="tableRef"
+      title="警告记录"
+      :style="{ height: tableHeight + 'px' }"
+      class="my-sticky-virtscroll-table"
+      :rows="rows"
+      :columns="columnDefs"
+      row-key="id"
+      v-model:pagination="pagination"
+      :rows-per-page-options="[10, 20, 50, 100]"
+      :loading="loading"
+      binary-state-sort
+      @request="onRequest"
+    >
+      <template v-slot:top-right>
+        <q-input
+          dense
+          class="q-mr-md"
+          debounce="1000"
+          v-model="filter.name"
+          label="操作人"
+        ></q-input>
+        <q-input
+          v-model="filter.beginDate"
+          label="开始时间"
+          debounce="1000"
+          class="q-mr-md"
+          dense
+        >
+          <template v-slot:prepend>
+            <q-icon name="event" class="cursor-pointer">
+              <q-popup-proxy
+                cover
+                transition-show="scale"
+                transition-hide="scale"
+              >
+                <q-date v-model="filter.beginDate" mask="YYYY-MM-DD HH:mm:ss">
+                  <div class="row items-center justify-end">
+                    <q-btn v-close-popup label="关闭" color="primary" flat />
+                  </div>
+                </q-date>
+              </q-popup-proxy>
+            </q-icon>
+          </template>
+
+          <template v-slot:append>
+            <q-icon name="access_time" class="cursor-pointer">
+              <q-popup-proxy
+                cover
+                transition-show="scale"
+                transition-hide="scale"
+              >
+                <q-time
+                  v-model="filter.beginDate"
+                  mask="YYYY-MM-DD HH:mm:ss"
+                  format24h
+                  with-seconds
+                >
+                  <div class="row items-center justify-end">
+                    <q-btn v-close-popup label="Close" color="primary" flat />
+                  </div>
+                </q-time>
+              </q-popup-proxy>
+            </q-icon>
+          </template>
+        </q-input>
+        <q-input
+          v-model="filter.endDate"
+          label="截止时间"
+          debounce="1000"
+          class="q-mr-md"
+          dense
+        >
+          <template v-slot:prepend>
+            <q-icon name="event" class="cursor-pointer">
+              <q-popup-proxy
+                cover
+                transition-show="scale"
+                transition-hide="scale"
+              >
+                <q-date v-model="filter.endDate" mask="YYYY-MM-DD HH:mm:ss">
+                  <div class="row items-center justify-end">
+                    <q-btn v-close-popup label="关闭" color="primary" flat />
+                  </div>
+                </q-date>
+              </q-popup-proxy>
+            </q-icon>
+          </template>
+
+          <template v-slot:append>
+            <q-icon name="access_time" class="cursor-pointer">
+              <q-popup-proxy
+                cover
+                transition-show="scale"
+                transition-hide="scale"
+              >
+                <q-time
+                  v-model="filter.endDate"
+                  mask="YYYY-MM-DD HH:mm:ss"
+                  format24h
+                  with-seconds
+                >
+                  <div class="row items-center justify-end">
+                    <q-btn v-close-popup label="关闭" color="primary" flat />
+                  </div>
+                </q-time>
+              </q-popup-proxy>
+            </q-icon>
+          </template>
+        </q-input>
+        <q-btn flat round color="primary" icon="search" @click="searchQuery" />
+      </template>
+      <template v-slot:body-cell-subEventType="props">
+        <q-td :props="props">
+          <div class="q-gutter-sm row justify-center">
+            <q-chip outline size="sm" color="primary">
+              {{ getSubEventType(props.row.subEventType) }}
+            </q-chip>
+          </div>
+        </q-td>
+      </template>
+      <template v-slot:body-cell-requestSuccess="props">
+        <q-td :props="props">
+          <div class="q-gutter-sm row justify-center">
+            <q-chip outline size="sm" color="primary">
+              {{ props.row.requestSuccess === 1 ? '成功' : '失败' }}
+            </q-chip>
+          </div>
+        </q-td>
+      </template>
+      <!-- <template v-slot:top-right>
+        <q-input
+          dense
+          debounce="1000"
+          v-model="filter.name"
+          label="用户名"
+        ></q-input>
+        <q-btn flat round color="primary" icon="search" />
+      </template> -->
+      <!-- <template v-slot:body-cell-roles="props">
+        <q-td :props="props">
+          <div class="q-gutter-sm row justify-center">
+            <q-chip
+              outline
+              size="sm"
+              color="primary"
+              v-for="(item, index) in props.row.roleList"
+              :key="index"
+            >
+              {{ item.roleName }}
+            </q-chip>
+          </div>
+        </q-td>
+      </template> -->
+      <!-- <template v-slot:body-cell-operations="props">
+        <q-td :props="props">
+          <div class="q-gutter-sm row justify-center">
+            <q-btn
+              color="primary"
+              label="编辑角色"
+              :disable="operateDisabled"
+              @click="edieUserData(props.row)"
+            />
+          </div>
+        </q-td>
+      </template> -->
+    </q-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted, computed } from 'vue';
+import { type QTableColumn } from 'quasar';
+import { pageQuery, Record } from '../api/LogApi';
+import { errorNotify } from '../utils/CommonNotify';
+
+// const $q = useQuasar(); useQuasar
+const props = withDefaults(
+  defineProps<{
+    sizeHeight: number;
+  }>(),
+  { sizeHeight: 500 }
+);
+const tableHeight = computed(() => {
+  return props.sizeHeight - 32;
+});
+
+onMounted(() => {
+  tableRef.value.requestServerInteraction();
+});
+
+const columnDefs: QTableColumn[] = [
+  { name: 'id', label: 'ID', field: 'id', align: 'center' },
+  {
+    name: 'subEventType',
+    label: '操作',
+    field: 'subEventType',
+    align: 'center',
+  },
+  {
+    name: 'faceName',
+    label: '接口名称',
+    field: 'faceName',
+    align: 'center',
+  },
+  {
+    name: 'userName',
+    label: '操作人员',
+    field: 'userName',
+    align: 'center',
+  },
+  {
+    name: 'createDateTime',
+    label: '记录时间',
+    field: 'createDateTime',
+    align: 'center',
+  },
+  {
+    name: 'requestSuccess',
+    label: '请求成功',
+    field: 'requestSuccess',
+    align: 'center',
+  },
+];
+
+const tableRef = ref();
+const rows = reactive([]);
+const filter = reactive({
+  name: '',
+  beginDate: '',
+  endDate: '',
+});
+const loading = ref(false);
+const pagination = ref({
+  sortBy: 'desc',
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+  rowsNumber: 10,
+});
+
+// eslint-disable-next-line
+async function onRequest(props: any) {
+  const { page, rowsPerPage, sortBy, descending } = props.pagination;
+
+  loading.value = true;
+  try {
+    let response = await pageQuery({
+      current: page,
+      size: rowsPerPage,
+      logType: 'WARN',
+      name: filter.name,
+      beginDate: filter.beginDate,
+      endDate: filter.endDate,
+    });
+
+    pagination.value.rowsNumber = response.total;
+    pagination.value.page = page;
+    pagination.value.rowsPerPage = rowsPerPage;
+    pagination.value.sortBy = sortBy;
+    pagination.value.descending = descending;
+    rows.splice(0, rows.length, ...(response.records as []));
+  } catch (error: any) {
+    errorNotify('获取数据失败', error);
+  } finally {
+    loading.value = false;
+  }
+}
+
+function getSubEventType(type: string) {
+  switch (type) {
+    case 'LOGIN':
+      return '登录';
+    case 'LOGOUT':
+      return '登出';
+    case 'QUERY':
+      return '查询';
+    case 'SAVE_OR_UPDATE':
+      return '保存';
+    case 'DELETE':
+      return '删除';
+    case 'WARN':
+      return '警告';
+    default:
+      return '';
+  }
+}
+
+function searchQuery() {
+  tableRef.value.requestServerInteraction();
+}
+</script>
diff --git a/src/router/routes.ts b/src/router/routes.ts
index 4ddbeba..74a6f76 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -114,6 +114,21 @@ const routes: RouteRecordRaw[] = [
         meta: {
           description: '报警记录',
         },
+        component: () => import('pages/AlarmRecord.vue'),
+      },
+    ],
+  },
+  {
+    path: '/alarmInfo',
+    name: 'alarmInfo',
+    component: () => import('layouts/MainLayout.vue'),
+    children: [
+      {
+        path: 'list',
+        name: 'list',
+        meta: {
+          description: '报警信息',
+        },
         component: () => import('pages/AlarmInfoList.vue'),
       },
     ],