<template>
|
<div class="data-overview-content">
|
<DataBoardDataInfoItem
|
:backgroundImage="DataBoardDataInfoBg1"
|
label="总入驻企业"
|
v-model:value="totalCustomerCountValue"
|
></DataBoardDataInfoItem>
|
<DataBoardDataInfoItem
|
:backgroundImage="DataBoardDataInfoBg2"
|
label="总申报数量"
|
v-model:value="totalBountyApplyCountValue"
|
></DataBoardDataInfoItem>
|
<DataBoardDataInfoItem
|
:backgroundImage="DataBoardDataInfoBg3"
|
label="奖励金发放总额"
|
v-model:value="sumBountyReleaseAmountValue"
|
></DataBoardDataInfoItem>
|
<DataBoardDataInfoItem
|
:backgroundImage="DataBoardDataInfoBg4"
|
label="奖励金使用总额"
|
v-model:value="sumBountyUseAmountValue"
|
></DataBoardDataInfoItem>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import DataBoardDataInfoBg1 from '@/assets/dataBoard/data-board-data-info-bg1.png';
|
import DataBoardDataInfoBg2 from '@/assets/dataBoard/data-board-data-info-bg2.png';
|
import DataBoardDataInfoBg3 from '@/assets/dataBoard/data-board-data-info-bg3.png';
|
import DataBoardDataInfoBg4 from '@/assets/dataBoard/data-board-data-info-bg4.png';
|
import DataBoardDataInfoItem from './DataBoardDataInfoItem.vue';
|
import { useQuery } from '@tanstack/vue-query';
|
import * as dataBoardServices from '@/services/api/DataBoard';
|
import { useIntervalValue } from '../hooks';
|
|
defineOptions({
|
name: 'DataOverviewContent',
|
});
|
|
const form = reactive({
|
totalCustomerCount: 0,
|
totalBountyApplyCount: 0,
|
sumBountyReleaseAmount: 0,
|
sumBountyUseAmount: 0,
|
});
|
|
const { data: detail, isLoading } = useQuery({
|
queryKey: ['dataBoardServices/getDataBoardOverview'],
|
queryFn: async () => {
|
return await dataBoardServices.getDataBoardOverview(
|
{},
|
{
|
showLoading: false,
|
}
|
);
|
},
|
placeholderData: () => ({} as API.GetDataBoardOverviewOutput),
|
onSuccess(data) {
|
form.totalCustomerCount = data.totalCustomerCount;
|
changeTotalCustomerCount(form.totalCustomerCount);
|
form.totalBountyApplyCount = data.totalBountyApplyCount;
|
changeTotalBountyApplyCount(form.totalBountyApplyCount);
|
form.sumBountyReleaseAmount = data.sumBountyReleaseAmount;
|
changeSumBountyReleaseAmount(form.sumBountyReleaseAmount);
|
form.sumBountyUseAmount = data.sumBountyUseAmount;
|
changeSumBountyUseAmount(form.sumBountyUseAmount);
|
},
|
});
|
|
const { value: totalCustomerCountValue, changeValue: changeTotalCustomerCount } = useIntervalValue(
|
form.totalCustomerCount
|
);
|
const { value: totalBountyApplyCountValue, changeValue: changeTotalBountyApplyCount } =
|
useIntervalValue(form.totalBountyApplyCount);
|
const { value: sumBountyReleaseAmountValue, changeValue: changeSumBountyReleaseAmount } =
|
useIntervalValue(form.sumBountyReleaseAmount);
|
const { value: sumBountyUseAmountValue, changeValue: changeSumBountyUseAmount } = useIntervalValue(
|
form.sumBountyUseAmount
|
);
|
</script>
|
|
<style lang="scss" scoped>
|
@use '@/style/common.scss' as *;
|
|
.data-overview-content {
|
display: grid;
|
justify-content: center;
|
align-items: center;
|
padding: 50px 18px;
|
grid-template-columns: repeat(2, 1fr);
|
grid-column-gap: 18px;
|
grid-row-gap: 30px;
|
|
.data-board-data-info-item {
|
padding: 14px 0;
|
}
|
}
|
</style>
|
