smms-web/src/views/home/index.vue

<template>
  <div class="container">
    <div class="card-box">
      <div class="left-box">
        <a-card class="count-card no-border">
          <CountPage :data></CountPage>
        </a-card>
        <a-card class="list-card no-border">
          <ListPage
            :data
            :pageObj="pageObj"
            @paginationFun="paginationFun"
          ></ListPage>
        </a-card>
      </div>
      <a-card class="right-card">
        <TreePage :data></TreePage>
      </a-card>
    </div>
  </div>
</template>
<script lang="ts" setup name="HomePage">
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 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 = () => {
  const { current, pageSize } = pageObj.value;
  fetchHomeAlarmTotal({ pageIndex: current, pageSize }).then(res => {
    data.value = res;
  });
};
function paginationFun(value: number) {
  pageObj.value.current = value;
  getData();
}
const { pause, resume, isActive } = useIntervalFn(() => {
  /* your function */
  getData();
}, 10 * 1000);
getData();
</script>
<style lang="less" scoped>
.container {
  padding: 10px;

  .card-box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
  }

  .left-box {
    width: 46%;
  }

  .list-card {
    :deep(.arco-card-body) {
      padding: 0;
    }
  }

  .right-card {
    width: 54%;
    margin-left: 10px;
  }

  .count-card {
    margin-bottom: 10px;
  }

  :deep(.arco-card-bordered) {
    border: none;
  }
}
</style>