perf: remove suffix of offline device count; optimize routes; optimize station Select option

2025-08-22 15:54:51 +08:00
parent 29ff837da8
commit 5d131ee1df
5 changed files with 240 additions and 27 deletions
--- a/src/components/offline-device-detail-modal.vue
+++ b/src/components/offline-device-detail-modal.vue
@@ -121,7 +121,7 @@ const onModalClose = () => {
        <div style="flex: 0 0 auto; margin-bottom: 16px">
          <NRow>
            <NCol :span="3" v-for="item in classifiedCounts" :key="item.label">
-              <NStatistic :label="item.label + '离线数'" :value="`${item.offlineCount}/${item.total}`" />
+              <NStatistic :label="item.label" :value="`${item.offlineCount}/${item.total}`" />
            </NCol>
          </NRow>
        </div>
--- a/src/pages/alarm-page.vue
+++ b/src/pages/alarm-page.vue
@@ -10,11 +10,27 @@ import dayjs from 'dayjs';
 import type { DataTableColumns, DataTableRowData, PaginationProps, SelectOption } from 'naive-ui';
 import { NForm, NInput, NButton, NSpace, NDataTable, NFormItemGi, NGrid, NSelect, NGridItem, NDatePicker } from 'naive-ui';
 import { storeToRefs } from 'pinia';
-import { ref, reactive, onBeforeMount, h } from 'vue';
+import { ref, reactive, onBeforeMount, h, shallowRef, watch } from 'vue';

 const stationStore = useStationStore();
 const { stationList } = storeToRefs(stationStore);

+const stationSelectOptions = shallowRef<SelectOption[]>([]);
+watch(
+  stationList,
+  (list) => {
+    const next = list.map<SelectOption>((station) => ({
+      label: station.name,
+      value: station.deviceIdPrefix,
+    }));
+    stationSelectOptions.value.splice(0, stationSelectOptions.value.length, ...next);
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+);
+
 const searchFields = reactive({
  stationCode_in: [] as string[],
  deviceType_in: [] as string[],
@@ -174,17 +190,7 @@ onBeforeMount(() => getAlarmList());
      <NForm>
        <NGrid :cols="3" :x-gap="24">
          <NFormItemGi :span="1" label="车站" label-placement="left">
-            <NSelect
-              v-model:value="searchFields.stationCode_in"
-              :options="[
-                ...stationList.map<SelectOption>((station) => ({
-                  label: station.name,
-                  value: station.deviceIdPrefix,
-                })),
-              ]"
-              multiple
-              clearable
-            />
+            <NSelect v-model:value="searchFields.stationCode_in" :options="stationSelectOptions" multiple clearable />
          </NFormItemGi>
          <NFormItemGi :span="1" label="设备类型" label-placement="left">
            <NSelect
--- a/src/pages/log-page.vue
+++ b/src/pages/log-page.vue
@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import { useRoute } from 'vue-router';
-
-const route = useRoute();
-</script>
-
-<template>
-  <div>alarm</div>
-  <pre>{{ route }}</pre>
-</template>
-
-<style scoped></style>
--- a/src/pages/vimp-log-page.vue
+++ b/src/pages/vimp-log-page.vue
@@ -0,0 +1,209 @@
+<script setup lang="ts">
+import type { NdmVimpLogResultVO } from '@/apis/models/device';
+import { ndmVimpLogDefaultExportByTemplate, postNdmVimpLogPage } from '@/apis/requests';
+import { useStationListQuery } from '@/composables/query/use-station-list-query';
+import { JAVA_INTEGER_MAX_VALUE } from '@/constants';
+import { useStationStore } from '@/stores/station';
+import { downloadByData } from '@/utils/download';
+import { useMutation } from '@tanstack/vue-query';
+import dayjs from 'dayjs';
+import {
+  NButton,
+  NDataTable,
+  NDatePicker,
+  NForm,
+  NFormItemGi,
+  NGrid,
+  NGridItem,
+  NSelect,
+  NSpace,
+  NTag,
+  type DataTableColumns,
+  type DataTableRowData,
+  type PaginationProps,
+  type SelectOption,
+} from 'naive-ui';
+import { storeToRefs } from 'pinia';
+import { h, onBeforeMount, reactive, ref, shallowRef, watch } from 'vue';
+
+useStationListQuery();
+const stationStore = useStationStore();
+const { stationList } = storeToRefs(stationStore);
+
+const stationSelectOptions = shallowRef<SelectOption[]>([]);
+watch(
+  stationList,
+  (list) => {
+    const next = list.map<SelectOption>((station) => ({
+      label: station.name,
+      value: station.deviceIdPrefix,
+    }));
+    stationSelectOptions.value.splice(0, stationSelectOptions.value.length, ...next);
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+);
+
+const searchFields = reactive({
+  stationCode: stationList.value.find((s) => s.online)?.code,
+  createdTime: [dayjs().startOf('date').subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().endOf('date').format('YYYY-MM-DD HH:mm:ss')] as [string, string],
+});
+const resetSearchFields = () => {
+  searchFields.stationCode = undefined;
+};
+
+const tableColumns: DataTableColumns<NdmVimpLogResultVO> = [
+  { title: '时间', key: 'createdTime' },
+  { title: '操作内容', key: 'description' },
+  { title: '请求IP', key: 'requestIp' },
+  { title: '操作参数', key: 'params' },
+  { title: '操作结果', key: 'result' },
+];
+
+const tableData = ref<DataTableRowData[]>([]);
+
+const tablePagination = reactive<PaginationProps>({
+  showSizePicker: true,
+  page: 1,
+  pageSize: 10,
+  pageSizes: [5, 10, 20, 50, 80, 100],
+  pageCount: 1,
+  itemCount: 0,
+  prefix: ({ itemCount }) => {
+    return h('div', {}, { default: () => `共${itemCount}条` });
+  },
+  onUpdatePage: (page: number) => {
+    tablePagination.page = page;
+    getVimpLogList();
+  },
+  onUpdatePageSize: (pageSize: number) => {
+    tablePagination.pageSize = pageSize;
+    tablePagination.page = 1;
+    getVimpLogList();
+  },
+});
+
+const { mutate: getVimpLogList, isPending: isTableLoading } = useMutation({
+  mutationFn: async () => {
+    if (!searchFields.stationCode) return [];
+    const res = await postNdmVimpLogPage(searchFields.stationCode, {
+      model: {},
+      extra: {
+        createdTime_precisest: searchFields.createdTime[0],
+        createdTime_preciseed: searchFields.createdTime[1],
+      },
+      size: tablePagination.pageSize!,
+      current: tablePagination.page!,
+      sort: 'id',
+      order: 'descending',
+    });
+    const { records, pages, size, total } = res;
+    tablePagination.pageSize = parseInt(size);
+    tablePagination.pageCount = parseInt(pages);
+    tablePagination.itemCount = parseInt(total);
+    return records;
+  },
+  onSuccess: (records) => {
+    tableData.value = records;
+  },
+  onError: (error) => {
+    window.$message.error(error.message);
+  },
+});
+
+const onClickReset = () => {
+  resetSearchFields();
+  tablePagination.page = 1;
+  tablePagination.pageSize = 10;
+  tablePagination.pageCount = 1;
+  tablePagination.itemCount = 0;
+  getVimpLogList();
+};
+const onClickQuery = () => getVimpLogList();
+
+const { mutate: downloadTableData, isPending: isDownloading } = useMutation({
+  mutationFn: async () => {
+    if (!searchFields.stationCode) throw Error('请选择车站');
+    const data = await ndmVimpLogDefaultExportByTemplate(searchFields.stationCode, {
+      model: {},
+      extra: {
+        createdTime_precisest: searchFields.createdTime[0],
+        createdTime_preciseed: searchFields.createdTime[1],
+      },
+      current: 1,
+      size: JAVA_INTEGER_MAX_VALUE,
+      sort: 'id',
+      order: 'descending',
+    });
+    return data;
+  },
+  onSuccess: (data) => {
+    downloadByData(data, `设备告警记录.xlsx`);
+  },
+  onError: (error) => {
+    window.$message.error(error.message);
+  },
+});
+
+const exportTableData = () => downloadTableData();
+
+onBeforeMount(() => getVimpLogList());
+</script>
+
+<template>
+  <!-- 容器：上下布局，表格自适应剩余高度 -->
+  <div style="height: 100%; display: flex; flex-direction: column">
+    <!-- 查询面板 -->
+    <div style="flex: 0 0 auto; padding: 8px">
+      <NForm>
+        <NGrid :cols="3" :x-gap="24">
+          <NFormItemGi :span="1" label="车站" label-placement="left">
+            <NSelect
+              v-model:value="searchFields.stationCode"
+              :options="stationSelectOptions"
+              :render-label="
+                (option: SelectOption) => {
+                  return [
+                    h(NTag, { type: option.disabled ? 'error' : 'success', size: 'tiny' }, { default: () => (option.disabled ? '离线' : '在线') }),
+                    h('span', {}, { default: () => `${option.label}` }),
+                  ];
+                }
+              "
+              :multiple="false"
+              clearable
+            />
+          </NFormItemGi>
+          <NFormItemGi :span="1" label="时间" label-placement="left">
+            <NDatePicker v-model:formatted-value="searchFields.createdTime" type="datetimerange" />
+          </NFormItemGi>
+        </NGrid>
+        <!-- 按钮 -->
+        <NGrid :cols="1">
+          <NGridItem>
+            <NSpace>
+              <NButton @click="onClickReset">重置</NButton>
+              <NButton type="primary" :loading="isTableLoading" @click="onClickQuery">查询</NButton>
+            </NSpace>
+          </NGridItem>
+        </NGrid>
+      </NForm>
+    </div>
+
+    <!-- 工具栏：横向、右对齐按钮） -->
+    <div style="flex: 0 0 auto; display: flex; align-items: center; padding: 8px">
+      <div style="font-size: medium">视频平台日志</div>
+      <NSpace style="margin-left: auto">
+        <NButton type="primary" :loading="isDownloading" @click="exportTableData">导出</NButton>
+      </NSpace>
+    </div>
+
+    <!-- 表格区域：填满剩余空间 -->
+    <div style="flex: 1 1 auto; min-height: 0; padding: 8px">
+      <NDataTable remote :columns="tableColumns" :data="tableData" :pagination="tablePagination" :loading="isTableLoading" :single-line="false" flex-height style="height: 100%" />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -31,7 +31,17 @@ const router = createRouter({
        },
        {
          path: 'log',
-          component: () => import('@/pages/log-page.vue'),
+          redirect: '/log/vimp-log',
+          children: [
+            {
+              path: 'vimp-log',
+              component: () => import('@/pages/vimp-log-page.vue'),
+            },
+          ],
+        },
+        {
+          path: 'debug',
+          component: () => import('@/pages/debug-page.vue'),
        },
        {
          path: '/:pathMatch(.*)*',
@@ -43,7 +53,7 @@ const router = createRouter({
  ],
 });

-const whiteList = ['/login'];
+const whiteList = ['/login', '/debug'];

 router.beforeEach((to, from, next) => {
  const userStore = useUserStore();