feat: databoard

wupengfei

3 天以前 89436385a31b0f31c33bb4688ab7c3b549ecc125

 src/views/DataBoard/components/DataBoardCenterDataContent.vue

@@ -1,21 +1,48 @@
<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 class="data-board-home-content-center-top-item between">
      <DataBoardCenterDataItem
        v-model:value="enterpriseCountValue"
        label="平台企业总数"
        :precision="0"
        :image="DataBoardCenterIcon1"
      ></DataBoardCenterDataItem>
      <DataBoardCenterDataItem
        v-model:value="sumOutputValueValue"
        label="总交易流水"
        :image="DataBoardCenterIcon2"
      ></DataBoardCenterDataItem>
      <DataBoardCenterDataItem
        v-model:value="enterpriseCustomerCountValue"
        label="在线甲方总数"
        :precision="0"
        :image="DataBoardCenterIcon3"
      ></DataBoardCenterDataItem>
      <DataBoardCenterDataItem
        v-model:value="enterpriseClientUserCountValue"
        label="在线劳务人员总数"
        :precision="0"
        :image="DataBoardCenterIcon4"
      ></DataBoardCenterDataItem>
    </div>
    <div class="data-board-home-content-center-top-item center">
      <DataBoardCenterDataItem
        v-model:value="sumBountyUseAmountValue"
        label="平台消费总额"
        :image="DataBoardCenterIcon5"
      ></DataBoardCenterDataItem>
      <DataBoardCenterDataItem
        v-model:value="sumBountyInsuranceUseAmountValue"
        label="保险消费总额"
        :image="DataBoardCenterIcon6"
      ></DataBoardCenterDataItem>
      <DataBoardCenterDataItem
        v-model:value="insurePeopleCountValue"
        label="总投保人次"
        :precision="0"
        :image="DataBoardCenterIcon7"
      ></DataBoardCenterDataItem>
    </div>
  </div>
</template>

@@ -23,54 +50,69 @@
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 DataBoardCenterIcon4 from '@/assets/dataBoard/data-board-center-icon4.png';
import DataBoardCenterIcon5 from '@/assets/dataBoard/data-board-center-icon5.png';
import DataBoardCenterIcon6 from '@/assets/dataBoard/data-board-center-icon6.png';
import DataBoardCenterIcon7 from '@/assets/dataBoard/data-board-center-icon7.png';
import DataBoardCenterDataItem from './DataBoardCenterDataItem.vue';
import * as dataBoardServices from '@/services/api/DataBoard';
import { useQuery } from '@tanstack/vue-query';
import { useIntervalValue } from '../hooks';
import { useGetDataBoardOverviewByParkV2, useIntervalValue } from '../hooks';

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

const form = reactive({
  currentMonthSumBountyReleaseAmount: 0,
  currentMonthSumBountyUseAmount: 0,
  currentMonthInsurePeopleCount: 0,
  industrialParkId: '',

  enterpriseCount: 0,
  sumOutputValue: 0,
  sumBountyUseAmount: 0,
  sumBountyInsuranceUseAmount: 0,
  enterpriseCustomerCount: 0,
  enterpriseClientUserCount: 0,
  insurePeopleCount: 0,
});

const { data: detail, isLoading } = useQuery({
  queryKey: ['dataBoardServices/getDataBoardOverview'],
  queryFn: async () => {
    return await dataBoardServices.getDataBoardOverview(
      {},
      {
        showLoading: false,
      }
    );
  },
  placeholderData: () => ({} as API.GetDataBoardOverviewOutput),
const { refetch } = useGetDataBoardOverviewByParkV2({
  industrialParkId: computed(() => form.industrialParkId),
  onSuccess(data) {
    form.currentMonthSumBountyReleaseAmount = data.currentMonthSumBountyReleaseAmount;
    changeCurrentMonthSumBountyReleaseAmount(data.currentMonthSumBountyReleaseAmount);
    form.currentMonthSumBountyUseAmount = data.currentMonthSumBountyUseAmount;
    changeCurrentMonthSumBountyUseAmount(data.currentMonthSumBountyUseAmount);
    form.currentMonthInsurePeopleCount = data.currentMonthInsurePeopleCount;
    changeCurrentMonthInsurePeopleCount(data.currentMonthInsurePeopleCount);
    form.enterpriseCount = data.enterpriseCount;
    changeEnterpriseCount(form.enterpriseCount);
    form.sumOutputValue = data.sumOutputValue;
    changeSumOutputValue(form.sumOutputValue);
    form.sumBountyUseAmount = data.sumBountyUseAmount;
    changeSumBountyUseAmount(form.sumBountyUseAmount);
    form.sumBountyInsuranceUseAmount = data.sumBountyInsuranceUseAmount;
    changeSumBountyInsuranceUseAmount(form.sumBountyInsuranceUseAmount);
    form.enterpriseCustomerCount = data.enterpriseCustomerCount;
    changeEnterpriseCustomerCount(form.enterpriseCustomerCount);
    form.enterpriseClientUserCount = data.enterpriseClientUserCount;
    changeEnterpriseClientUserCount(form.enterpriseClientUserCount);
    form.insurePeopleCount = data.insurePeopleCount;
    changeInsurePeopleCount(form.insurePeopleCount);
  },
});

const {
  value: currentMonthSumBountyReleaseAmountValue,
  changeValue: changeCurrentMonthSumBountyReleaseAmount,
} = useIntervalValue(form.currentMonthSumBountyReleaseAmount);
const {
  value: currentMonthSumBountyUseAmountValue,
  changeValue: changeCurrentMonthSumBountyUseAmount,
} = useIntervalValue(form.currentMonthSumBountyUseAmount);
const {
  value: currentMonthInsurePeopleCountValue,
  changeValue: changeCurrentMonthInsurePeopleCount,
} = useIntervalValue(form.currentMonthInsurePeopleCount);
const { value: enterpriseCountValue, changeValue: changeEnterpriseCount } = useIntervalValue(
  form.enterpriseCount
);
const { value: sumOutputValueValue, changeValue: changeSumOutputValue } = useIntervalValue(
  form.sumOutputValue
);
const { value: sumBountyUseAmountValue, changeValue: changeSumBountyUseAmount } = useIntervalValue(
  form.sumBountyUseAmount
);
const { value: sumBountyInsuranceUseAmountValue, changeValue: changeSumBountyInsuranceUseAmount } =
  useIntervalValue(form.sumBountyInsuranceUseAmount);
const { value: enterpriseCustomerCountValue, changeValue: changeEnterpriseCustomerCount } =
  useIntervalValue(form.enterpriseCustomerCount);
const { value: enterpriseClientUserCountValue, changeValue: changeEnterpriseClientUserCount } =
  useIntervalValue(form.enterpriseClientUserCount);
const { value: insurePeopleCountValue, changeValue: changeInsurePeopleCount } = useIntervalValue(
  form.insurePeopleCount
);
</script>

<style lang="scss" scoped>
@@ -78,9 +120,28 @@

.data-board-home-content-center-top {
  display: grid;
  margin-bottom: 6px;
  padding: 0 20px;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 16px;
  margin-bottom: 30px;
  padding: 60px 40px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  row-gap: 22px;
  background-image: url('@/assets/dataBoard/data-board-center-chart-bg.png');

  .data-board-home-content-center-top-item {
    display: flex;

    &.between {
      justify-content: space-between;
    }

    &.center {
      justify-content: center;
      gap: 20px;

      .data-board-center-data-item {
        min-width: 214px;
      }
    }
  }
}
</style>