fix: bug

wupengfei

8 天以前 002207ca5633a180568edf1932926219728515fa

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<template>
  <div class="data-board-home-content-center-top">
    <DataBoardCenterDataItem
      v-model:value="currentMonthSumBountyReleaseAmountValue"
      label="当月发放额"
      :image="DataBoardCenterIcon1"
    ></DataBoardCenterDataItem>
    <DataBoardCenterDataItem
      v-model:value="currentMonthSumBountyUseAmountValue"
      label="当月使用额"
      :image="DataBoardCenterIcon2"
    ></DataBoardCenterDataItem>
    <DataBoardCenterDataItem
      v-model:value="currentMonthInsurePeopleCountValue"
      label="当月投保人数"
      :precision="0"
      :image="DataBoardCenterIcon3"
    ></DataBoardCenterDataItem>
  </div>
</template>
 
<script setup lang="ts">
import DataBoardCenterIcon1 from '@/assets/dataBoard/data-board-center-icon1.png';
import DataBoardCenterIcon2 from '@/assets/dataBoard/data-board-center-icon2.png';
import DataBoardCenterIcon3 from '@/assets/dataBoard/data-board-center-icon3.png';
import DataBoardCenterDataItem from './DataBoardCenterDataItem.vue';
import * as dataBoardServices from '@/services/api/DataBoard';
import { useQuery } from '@tanstack/vue-query';
import { useIntervalValue } from '../hooks';
 
defineOptions({
  name: 'DataBoardCenterDataContent',
});
 
const form = reactive({
  currentMonthSumBountyReleaseAmount: 0,
  currentMonthSumBountyUseAmount: 0,
  currentMonthInsurePeopleCount: 0,
});
 
const { data: detail, isLoading } = useQuery({
  queryKey: ['dataBoardServices/getDataBoardOverview'],
  queryFn: async () => {
    return await dataBoardServices.getDataBoardOverview(
      {},
      {
        showLoading: false,
      }
    );
  },
  placeholderData: () => ({} as API.GetDataBoardOverviewOutput),
  onSuccess(data) {
    form.currentMonthSumBountyReleaseAmount = data.currentMonthSumBountyReleaseAmount;
    changeCurrentMonthSumBountyReleaseAmount(data.currentMonthSumBountyReleaseAmount);
    form.currentMonthSumBountyUseAmount = data.currentMonthSumBountyUseAmount;
    changeCurrentMonthSumBountyUseAmount(data.currentMonthSumBountyUseAmount);
    form.currentMonthInsurePeopleCount = data.currentMonthInsurePeopleCount;
    changeCurrentMonthInsurePeopleCount(data.currentMonthInsurePeopleCount);
  },
});
 
const {
  value: currentMonthSumBountyReleaseAmountValue,
  changeValue: changeCurrentMonthSumBountyReleaseAmount,
} = useIntervalValue(form.currentMonthSumBountyReleaseAmount);
const {
  value: currentMonthSumBountyUseAmountValue,
  changeValue: changeCurrentMonthSumBountyUseAmount,
} = useIntervalValue(form.currentMonthSumBountyUseAmount);
const {
  value: currentMonthInsurePeopleCountValue,
  changeValue: changeCurrentMonthInsurePeopleCount,
} = useIntervalValue(form.currentMonthInsurePeopleCount);
</script>
 
<style lang="scss" scoped>
@use '@/style/common.scss' as *;
 
.data-board-home-content-center-top {
  display: grid;
  margin-bottom: 6px;
  padding: 0 20px;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 16px;
}
</style>