wupengfei
2025-04-23 e944883d021a71da57b3f6c7ce7101c2bcc31b90
src/views/Home/Home.vue
@@ -1,34 +1,119 @@
<template>
  <LoadingLayout :loading="isLoading">
    <AppContainer>
      <ChunkCell title="待处理"> </ChunkCell>
      <ChunkCell title="数据看板"> </ChunkCell>
      <ChunkCell title="待处理">
        <div class="data-board-card-list">
          <DataBoardCard title="待审核批次" :contentBetween="true">
            <DataBoardCardPrice
              :value="detail?.waitCheckEnterpriseNumber ?? 0"
              :isInline="true"
              :useThousand="false"
              unit=""
            />
            <el-button type="primary" link @click="goToAudit">去审核</el-button>
          </DataBoardCard>
          <DataBoardCard title="奖励金待发放" :contentBetween="true">
            <DataBoardCardPrice
              :isInline="true"
              :value="detail?.waitForSettleRewardNumber ?? 0"
              :useThousand="false"
              unit=""
            />
            <el-button type="primary" link @click="goToGrant">去发放</el-button>
          </DataBoardCard>
        </div>
      </ChunkCell>
      <ChunkCell title="数据看板">
        <div class="data-board-card-list">
          <DataBoardCard title="累计已审核企业">
            <DataBoardCardPrice
              :value="detail?.accumulatedCheckEnterpriseNumber ?? 0"
              :useThousand="false"
              unit="家"
            />
          </DataBoardCard>
          <DataBoardCard title="累计已审核通过企业">
            <DataBoardCardPrice
              :value="detail?.accumulatedCheckPassEnterpriseNumber ?? 0"
              :useThousand="false"
              unit="家"
            />
          </DataBoardCard>
          <DataBoardCard title="累计未审核通过企业">
            <DataBoardCardPrice
              :value="detail?.accumulatedCheckRejectEnterpriseNumber ?? 0"
              :useThousand="false"
              unit="家"
            />
          </DataBoardCard>
          <DataBoardCard title="累计已发放">
            <DataBoardCardPrice :value="detail?.accumulatedHasSettleRewardAmount ?? 0" unit="元" />
          </DataBoardCard>
          <DataBoardCard title="累计待发放">
            <DataBoardCardPrice
              :value="detail?.accumulatedWaitForSettleRewardAmount ?? 0"
              unit="元"
            />
          </DataBoardCard>
          <DataBoardCard title="累计已使用">
            <DataBoardCardPrice :value="detail?.accumulatedUsedRewardAmount ?? 0" unit="元" />
          </DataBoardCard>
        </div>
      </ChunkCell>
    </AppContainer>
  </LoadingLayout>
</template>
<script setup lang="ts">
import {
  ProForm,
  ProFormItemV2,
  ProFormSelect,
  ProFormText,
  ProFormCol,
  ProFormColItem,
  ProFormInputNumber,
  ProFormTextArea,
  ProFormRadio,
  ChunkCell,
  AppScrollContainer,
} from '@bole-core/components';
import { AppContainer, ChunkCell } from '@bole-core/components';
import DataBoardCard from '@/components/DataBoardCard/DataBoardCard.vue';
import DataBoardCardPrice from '@/components/DataBoardCard/DataBoardCardPrice.vue';
import * as parkBountyApplyServices from '@/services/api/ParkBountyApply';
import { useQuery, useQueryClient } from '@tanstack/vue-query';
defineOptions({
  name: 'Home',
});
const isLoading = ref(false);
const router = useRouter();
const { data: detail, isLoading } = useQuery({
  queryKey: ['parkBountyApplyServices/getGoverDataBoard'],
  queryFn: async () => {
    return await parkBountyApplyServices.getGoverDataBoard({
      showLoading: false,
    });
  },
  placeholderData: () => ({} as API.GetGoverDataBoardOutput),
});
function goToAudit() {
  router.push({
    name: 'MaterialReviewList',
  });
}
function goToGrant() {
  router.push({
    name: 'RewardGrant',
  });
}
const queryClient = useQueryClient();
onMounted(async () => {
  await queryClient.ensureQueryData({
    queryKey: ['parkBountyApplyServices/getGoverDataBoard'],
  });
});
</script>
<style lang="scss" scoped>
@use '@/style/common.scss' as *;
.data-board-card-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 40px;
  padding: 20px;
}
</style>