<template>
|
<div class="data-board-home-content-center-top">
|
<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>
|
|
<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 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 { useGetDataBoardOverviewByParkV2, useIntervalValue } from '../hooks';
|
|
defineOptions({
|
name: 'DataBoardCenterDataContent',
|
});
|
|
const form = reactive({
|
industrialParkId: '',
|
|
enterpriseCount: 0,
|
sumOutputValue: 0,
|
sumBountyUseAmount: 0,
|
sumBountyInsuranceUseAmount: 0,
|
enterpriseCustomerCount: 0,
|
enterpriseClientUserCount: 0,
|
insurePeopleCount: 0,
|
});
|
|
const { refetch } = useGetDataBoardOverviewByParkV2({
|
industrialParkId: computed(() => form.industrialParkId),
|
onSuccess(data) {
|
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: 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>
|
@use '@/style/common.scss' as *;
|
|
.data-board-home-content-center-top {
|
display: grid;
|
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>
|
