style: code state

src/components/station-page/device-alarm-detail-modal.vue

@@ -14,7 +14,7 @@ import { renderAlarmDateCell, renderDeviceTypeCell, renderAlarmTypeCell, renderF
 import { downloadByData } from '@/utils';
 import { useMutation } from '@tanstack/vue-query';
 import dayjs from 'dayjs';
-import { NButton, NCol, NDataTable, NModal, NRow, NSpace, NStatistic, NTag, type DataTableColumns, type DataTableProps, type DataTableRowData, type PaginationProps } from 'naive-ui';
+import { NButton, NDataTable, NGrid, NGridItem, NModal, NSpace, NStatistic, NTag, type DataTableColumns, type DataTableProps, type DataTableRowData, type PaginationProps } from 'naive-ui';
 import { computed, h, reactive, ref, toRefs } from 'vue';
 
 interface Props {
@@ -125,7 +125,7 @@ const resetFilterFields = () => {
   filterFields.faultLevel_in = [];
 };
 
-const tablePagination = reactive<PaginationProps>({
+const pagination = reactive<PaginationProps>({
   size: 'small',
   showSizePicker: true,
   page: 1,
@@ -135,27 +135,27 @@ const tablePagination = reactive<PaginationProps>({
     return h('div', {}, { default: () => `共${itemCount}条` });
   },
   onUpdatePage: (page: number) => {
-    tablePagination.page = page;
-    getStaionAlarmList();
+    pagination.page = page;
+    getTableData();
   },
   onUpdatePageSize: (pageSize: number) => {
-    tablePagination.pageSize = pageSize;
-    tablePagination.page = 1;
-    getStaionAlarmList();
+    pagination.pageSize = pageSize;
+    pagination.page = 1;
+    getTableData();
   },
 });
 
 const tableData = ref<DataTableRowData[]>([]);
 
 const onAfterModalEnter = () => {
-  getStaionAlarmList();
+  getTableData();
 };
 
 const onAfterModalLeave = () => {
   resetFilterFields();
-  tablePagination.page = 1;
-  tablePagination.pageSize = 10;
-  tablePagination.itemCount = 0;
+  pagination.page = 1;
+  pagination.pageSize = 10;
+  pagination.itemCount = 0;
   tableData.value = [];
 };
 
@@ -168,10 +168,10 @@ const onUpdateFilters: DataTableProps['onUpdateFilters'] = (filterState) => {
   filterFields.alarmType_in = alarmTypeKeys;
   const faultLevelVals = filterState['faultLevel'];
   filterFields.faultLevel_in = faultLevelVals;
-  getStaionAlarmList();
+  getTableData();
 };
 
-const { mutate: getStaionAlarmList, isPending: tableLoading } = useMutation({
+const { mutate: getTableData, isPending: loading } = useMutation({
   mutationFn: async () => {
     const now = dayjs();
     const res = await pageDeviceAlarmLogApi(
@@ -188,8 +188,8 @@ const { mutate: getStaionAlarmList, isPending: tableLoading } = useMutation({
           createdTime_precisest: now.startOf('date').format('YYYY-MM-DD HH:mm:ss'),
           createdTime_preciseed: now.endOf('date').format('YYYY-MM-DD HH:mm:ss'),
         },
-        current: tablePagination.page ?? 1,
-        size: tablePagination.pageSize ?? 10,
+        current: pagination.page ?? 1,
+        size: pagination.pageSize ?? 10,
         order: 'descending',
         sort: 'id',
       },
@@ -201,8 +201,8 @@ const { mutate: getStaionAlarmList, isPending: tableLoading } = useMutation({
   },
   onSuccess: (res) => {
     const { records, size, total } = res;
-    tablePagination.pageSize = parseInt(size);
-    tablePagination.itemCount = parseInt(total);
+    pagination.pageSize = parseInt(size);
+    pagination.itemCount = parseInt(total);
     tableData.value = records;
   },
   onError: (error) => {
@@ -226,8 +226,8 @@ const { mutate: exportTableData, isPending: exporting } = useMutation({
           createdTime_precisest: now.startOf('date').format('YYYY-MM-DD HH:mm:ss'),
           createdTime_preciseed: now.endOf('date').format('YYYY-MM-DD HH:mm:ss'),
         },
-        current: tablePagination.page ?? 1,
-        size: tablePagination.pageSize ?? 10,
+        current: pagination.page ?? 1,
+        size: pagination.pageSize ?? 10,
         order: 'descending',
         sort: 'id',
       },
@@ -264,11 +264,11 @@ const { mutate: exportTableData, isPending: exporting } = useMutation({
     </div>
     <div v-else style="height: 100%; display: flex; flex-direction: column">
       <div style="flex: 0 0 auto; margin-bottom: 16px">
-        <NRow>
-          <NCol :span="3" v-for="item in classifiedAlarmCounts" :key="item.label">
+        <NGrid cols="9">
+          <NGridItem v-for="item in classifiedAlarmCounts" :key="item.label" span="1">
             <NStatistic :label="item.label + '告警'" :value="item.count" />
-          </NCol>
-        </NRow>
+          </NGridItem>
+        </NGrid>
       </div>
       <div style="flex: 0 0 auto; display: flex; align-items: center; padding: 8px 0">
         <div style="font-size: medium">今日设备告警列表</div>
@@ -278,10 +278,10 @@ const { mutate: exportTableData, isPending: exporting } = useMutation({
       </div>
       <div style="flex: 1 1 auto; min-height: 0">
         <NDataTable
-          :loading="tableLoading"
+          :loading="loading"
           :columns="tableColumns"
           :data="tableData"
-          :pagination="tablePagination"
+          :pagination="pagination"
           :single-line="false"
           remote
           flex-height