fix: bug

wupengfei

8 天以前 ead4078079a71bbef43ffc22a7ea7fb0f4039bf0

 src/views/DataBoard/components/DataOverviewContent.vue

@@ -3,22 +3,24 @@
    <DataBoardDataInfoItem
      :backgroundImage="DataBoardDataInfoBg1"
      label="总入驻企业"
      :value="detail?.totalCustomerCount"
      v-model:value="totalCustomerCountValue"
    ></DataBoardDataInfoItem>
    <DataBoardDataInfoItem
      :backgroundImage="DataBoardDataInfoBg2"
      label="总申报数量"
      :value="detail?.totalBountyApplyCount"
      v-model:value="totalBountyApplyCountValue"
    ></DataBoardDataInfoItem>
    <DataBoardDataInfoItem
      :backgroundImage="DataBoardDataInfoBg3"
      label="奖励金发放总额"
      :value="detail?.sumBountyReleaseAmount"
      v-model:value="sumBountyReleaseAmountValue"
      :precision="2"
    ></DataBoardDataInfoItem>
    <DataBoardDataInfoItem
      :backgroundImage="DataBoardDataInfoBg4"
      label="奖励金使用总额"
      :value="detail?.sumBountyUseAmount"
      v-model:value="sumBountyUseAmountValue"
      :precision="2"
    ></DataBoardDataInfoItem>
  </div>
</template>
@@ -29,13 +31,54 @@
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 { useGetDataBoardOverview } from '../hooks';
import { useQuery } from '@tanstack/vue-query';
import * as dataBoardServices from '@/services/api/DataBoard';
import { useIntervalValue } from '../hooks';

defineOptions({
  name: 'DataOverviewContent',
});

const { detail } = useGetDataBoardOverview();
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>
@@ -45,9 +88,9 @@
  display: grid;
  justify-content: center;
  align-items: center;
  padding: 50px 18px;
  padding: 50px 8px;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 18px;
  grid-column-gap: 12px;
  grid-row-gap: 30px;

  .data-board-data-info-item {