perf: 首页列表分页

src/api/home.ts

@@ -34,7 +34,13 @@ export interface AlarmTotalRes {
   low: number;
   tree: Tree[];
 }
-export async function fetchHomeAlarmTotal(): Promise<AlarmTotalRes> {
-  const res = await instance.post('/api/RouteInfo/AlarmTotal');
+export interface Page {
+  pageIndex: number;
+  pageSize: number;
+}
+export async function fetchHomeAlarmTotal(
+  params: object
+): Promise<AlarmTotalRes> {
+  const res = await instance.post('/api/RouteInfo/AlarmTotal', params);
   return res.data;
 }

src/views/device/status/device-info/index.vue

@@ -129,6 +129,9 @@ const chartOptions = ref<EChartsOption>({
   title: {
     text: '24-hour status of equipment',
     left: 'center',
+    textStyle: {
+      color: '#ffffff',
+    },
   },
   tooltip: {
     trigger: 'axis',
@@ -169,6 +172,14 @@ const chartOptions = ref<EChartsOption>({
       '23',
       '24',
     ],
+    axisLabel: {
+      color: '#ffffff', // 设置 x 轴文字为白色
+    },
+    axisLine: {
+      lineStyle: {
+        color: '#ffffff', // 设置 x 轴线为白色
+      },
+    },
   },
   yAxis: {
     type: 'category', // 改为类目轴
@@ -179,11 +190,17 @@ const chartOptions = ref<EChartsOption>({
         // 可以根据需要进行国际化处理
         return value;
       },
+      color: '#ffffff', // 设置 x 轴文字为白色
     },
     // 设置 y 轴位置对应关系
     axisTick: {
       alignWithLabel: true,
     },
+    axisLine: {
+      lineStyle: {
+        color: '#ffffff', // 设置 x 轴线为白色
+      },
+    },
   },
   series: [
     {
@@ -257,6 +274,9 @@ const sensorChartOptions = ref<EChartsOption>({
       '23',
       '24',
     ],
+    axisLabel: {
+      color: '#ffffff', // 设置 x 轴文字为白色
+    },
   },
   yAxis: {
     type: 'value',
@@ -265,6 +285,7 @@ const sensorChartOptions = ref<EChartsOption>({
     interval: 10, // 设置刻度间隔
     axisLabel: {
       formatter: '{value} °C',
+      color: '#ffffff', // 设置 y 轴文字为白色
     },
   },
   series: [

src/views/home/index.vue

@@ -6,7 +6,11 @@
           <CountPage :data></CountPage>
         </a-card>
         <a-card class="list-card no-border">
-          <HomePage :data></HomePage>
+          <ListPage
+            :data
+            :pageObj="pageObj"
+            @paginationFun="paginationFun"
+          ></ListPage>
         </a-card>
       </div>
       <a-card class="right-card">
@@ -20,16 +24,25 @@ import { ref } from 'vue';
 import { useIntervalFn } from '@vueuse/core';
 import type { AlarmTotalRes } from '@/api/home';
 import { fetchHomeAlarmTotal } from '@/api/home';
+import { SizeProps, Pagination } from '@/types/global';
 
-import HomePage from './list/index.vue';
+import ListPage from './list/index.vue';
 import CountPage from './count/index.vue';
 import TreePage from './tree/index.vue';
 const data = ref<AlarmTotalRes>({} as AlarmTotalRes);
+const pageObj = ref<Pagination>({
+  current: 1,
+  pageSize: 20,
+});
 const getData = () => {
-  fetchHomeAlarmTotal().then(res => {
+  const { current, pageSize } = pageObj.value;
+  fetchHomeAlarmTotal({ pageIndex: current, pageSize }).then(res => {
     data.value = res;
   });
 };
+function paginationFun(value: number) {
+  pageObj.value.current = value;
+}
 const { pause, resume, isActive } = useIntervalFn(() => {
   /* your function */
   getData();

src/views/home/list/index.vue

@@ -5,7 +5,7 @@
     :loading="loading"
     :pagination="pagination"
     :columns="cloneColumns"
-    :data="data.data"
+    :data="tableData"
     :bordered="false"
     :size="size"
     :scrollbar="true"
@@ -70,10 +70,17 @@ import { STATIONKEY, StationKey } from '@/utils/const';
 
 interface ListPageProps {
   data: AlarmTotalRes;
+  pageObj: Pagination;
+}
+interface ListPageEmits {
+  (e: 'paginationFun', val: number): void;
 }
 const props = withDefaults(defineProps<ListPageProps>(), {
   data: () => ({}) as AlarmTotalRes,
+  pageObj: () => ({}) as Pagination,
 });
+
+const emit = defineEmits<ListPageEmits>();
 const { t } = useI18n();
 
 const { loading, setLoading } = useLoading(true);
@@ -129,22 +136,8 @@ const basePagination: Pagination = {
 const pagination = reactive({
   ...basePagination,
 });
-const generateFormModel = () => {
-  return {
-    pageIndex: 1,
-    pageSize: 20,
-    name: null,
-    address: null,
-    status: null,
-    startTime: null,
-    endTime: null,
-    time: ['', ''],
-    entityType: null,
-  } as DeviceParams;
-};
 const tableData = ref<Data[]>([] as Data[]);
 const size = ref<SizeProps>('medium');
-const formModel = ref<DeviceParams>(generateFormModel());
 const visible = shallowRef<boolean>(false);
 const this_ = getCurrentInstance()?.appContext.config.globalProperties;
 const deviceInfo = ref<DeviceInfo[]>([] as DeviceInfo[]);
@@ -161,11 +154,12 @@ watch(
   newVal => {
     if (newVal && newVal.data) {
       const { totalCount, data } = newVal;
+      const { current, pageSize } = props.pageObj;
       // 更新表格数据
       tableData.value.length = 0;
       tableData.value.push(...newVal.data);
-      pagination.current = 1;
-      pagination.pageSize = totalCount;
+      pagination.current = current;
+      pagination.pageSize = pageSize;
       pagination.total = totalCount;
       setLoading(false);
     }
@@ -174,7 +168,7 @@ watch(
 );
 
 const onPageChange = (current: number) => {
-  formModel.value.pageIndex = current;
+  emit('paginationFun', current);
 };
 
 const handleClick = (value: DataList) => {