From 89436385a31b0f31c33bb4688ab7c3b549ecc125 Mon Sep 17 00:00:00 2001
From: wupengfei <834520024@qq.com>
Date: 星期三, 10 十二月 2025 17:15:52 +0800
Subject: [PATCH] feat: databoard
---
src/views/DataBoard/components/DataBoardCenterDataContent.vue | 145 +++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 123 insertions(+), 22 deletions(-)
diff --git a/src/views/DataBoard/components/DataBoardCenterDataContent.vue b/src/views/DataBoard/components/DataBoardCenterDataContent.vue
index 6357cdf..b2d17b9 100644
--- a/src/views/DataBoard/components/DataBoardCenterDataContent.vue
+++ b/src/views/DataBoard/components/DataBoardCenterDataContent.vue
@@ -1,21 +1,48 @@
<template>
<div class="data-board-home-content-center-top">
- <DataBoardCenterDataItem
- :value="detail?.currentMonthSumBountyReleaseAmount"
- label="褰撴湀鍙戞斁棰�"
- :image="DataBoardCenterIcon1"
- ></DataBoardCenterDataItem>
- <DataBoardCenterDataItem
- :value="detail?.currentMonthSumBountyUseAmount"
- label="褰撴湀浣跨敤棰�"
- :image="DataBoardCenterIcon2"
- ></DataBoardCenterDataItem>
- <DataBoardCenterDataItem
- :value="detail?.currentMonthInsurePeopleCount"
- 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,14 +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 { useGetDataBoardOverview } from '../hooks';
+import * as dataBoardServices from '@/services/api/DataBoard';
+import { useQuery } from '@tanstack/vue-query';
+import { useGetDataBoardOverviewByParkV2, useIntervalValue } from '../hooks';
defineOptions({
name: 'DataBoardCenterDataContent',
});
-const { detail } = useGetDataBoardOverview();
+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>
@@ -38,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>
--
Gitblit v1.9.1