<template>
|
<LoadingLayout :loading="isLoading">
|
<AppContainer>
|
<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 { 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 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>
|
