From dbc73373c7f7235d09d5a5e78249c1d6364b9ca0 Mon Sep 17 00:00:00 2001
From: wupengfei <834520024@qq.com>
Date: 星期五, 28 十一月 2025 14:20:26 +0800
Subject: [PATCH] fix: bug
---
src/views/DataBoard/components/DataBoardDataInfoItem.vue | 8 +-
src/views/DataBoard/components/DataOverviewContent.vue | 53 +++++++++++-
src/views/DataBoard/DataBoardHome.vue | 27 ------
src/views/DataBoard/components/DataBoardCenterMap.vue | 29 +++++--
src/views/DataBoard/components/DataBoardTableView.vue | 2
src/views/DataBoard/hooks/index.ts | 2
src/views/DataBoard/components/DataBoardCenterDataContent.vue | 50 +++++++++++-
src/views/DataBoard/components/DataBoardCenterDataItem.vue | 10 +
8 files changed, 126 insertions(+), 55 deletions(-)
diff --git a/src/views/DataBoard/DataBoardHome.vue b/src/views/DataBoard/DataBoardHome.vue
index f2cbf04..9ae4146 100644
--- a/src/views/DataBoard/DataBoardHome.vue
+++ b/src/views/DataBoard/DataBoardHome.vue
@@ -103,33 +103,6 @@
const dataBoardTime = ref(null);
let timer = null;
-const tableData = [
- {
- name: '鍏徃鍚�',
- num: 3842,
- },
- {
- name: '鍏徃鍚�',
- num: 32,
- },
- {
- name: '鍏徃鍚�',
- num: 342,
- },
- {
- name: '鍏徃鍚�',
- num: 342,
- },
- {
- name: '鍏徃鍚�',
- num: 342,
- },
- {
- name: '鍏徃鍚�',
- num: 342,
- },
-];
-
const updateTime = () => {
dataBoardTime.value = format(new Date(), 'YYYY.MM.DD HH:mm:ss');
};
diff --git a/src/views/DataBoard/components/DataBoardCenterDataContent.vue b/src/views/DataBoard/components/DataBoardCenterDataContent.vue
index 6357cdf..d7ff949 100644
--- a/src/views/DataBoard/components/DataBoardCenterDataContent.vue
+++ b/src/views/DataBoard/components/DataBoardCenterDataContent.vue
@@ -1,17 +1,17 @@
<template>
<div class="data-board-home-content-center-top">
<DataBoardCenterDataItem
- :value="detail?.currentMonthSumBountyReleaseAmount"
+ v-model:value="currentMonthSumBountyReleaseAmountValue"
label="褰撴湀鍙戞斁棰�"
:image="DataBoardCenterIcon1"
></DataBoardCenterDataItem>
<DataBoardCenterDataItem
- :value="detail?.currentMonthSumBountyUseAmount"
+ v-model:value="currentMonthSumBountyUseAmountValue"
label="褰撴湀浣跨敤棰�"
:image="DataBoardCenterIcon2"
></DataBoardCenterDataItem>
<DataBoardCenterDataItem
- :value="detail?.currentMonthInsurePeopleCount"
+ v-model:value="currentMonthInsurePeopleCountValue"
label="褰撴湀鎶曚繚浜烘暟"
:precision="0"
:image="DataBoardCenterIcon3"
@@ -24,13 +24,53 @@
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 { useGetDataBoardOverview } from '../hooks';
+import * as dataBoardServices from '@/services/api/DataBoard';
+import { useQuery } from '@tanstack/vue-query';
+import { useIntervalValue } from '../hooks';
defineOptions({
name: 'DataBoardCenterDataContent',
});
-const { detail } = useGetDataBoardOverview();
+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>
diff --git a/src/views/DataBoard/components/DataBoardCenterDataItem.vue b/src/views/DataBoard/components/DataBoardCenterDataItem.vue
index 9006fb9..2634059 100644
--- a/src/views/DataBoard/components/DataBoardCenterDataItem.vue
+++ b/src/views/DataBoard/components/DataBoardCenterDataItem.vue
@@ -5,7 +5,7 @@
</div>
<div class="data-board-data-info-item-content">
<div class="data-board-data-info-item-value">
- <el-statistic :value="value" :precision="precision" />
+ <el-statistic :value="_value" :precision="precision" />
</div>
<div class="data-board-data-info-item-label">{{ label }}</div>
</div>
@@ -22,14 +22,18 @@
type Props = {
image: string;
label: string;
- value: number;
precision?: number;
};
const props = withDefaults(defineProps<Props>(), {
- value: 0,
precision: 2,
});
+
+const value = defineModel<number>('value');
+
+const _value = useTransition(value, {
+ duration: 500,
+});
</script>
<style lang="scss" scoped>
diff --git a/src/views/DataBoard/components/DataBoardCenterMap.vue b/src/views/DataBoard/components/DataBoardCenterMap.vue
index 5a784c8..f88f456 100644
--- a/src/views/DataBoard/components/DataBoardCenterMap.vue
+++ b/src/views/DataBoard/components/DataBoardCenterMap.vue
@@ -4,22 +4,22 @@
<DataBoardDataInfoItem
:backgroundImage="DataBoardDataInfoBg5"
label="浼佷笟鏁伴噺"
- :value="form.totalCustomerCount"
+ v-model:value="totalCustomerCountValue"
></DataBoardDataInfoItem>
<DataBoardDataInfoItem
:backgroundImage="DataBoardDataInfoBg6"
label="鍙戞斁棰�"
- :value="form.sumBountyReleaseAmount"
+ v-model:value="sumBountyReleaseAmountValue"
></DataBoardDataInfoItem>
<DataBoardDataInfoItem
:backgroundImage="DataBoardDataInfoBg7"
label="浣跨敤棰�"
- :value="form.sumBountyUseAmount"
+ v-model:value="sumBountyUseAmountValue"
></DataBoardDataInfoItem>
<DataBoardDataInfoItem
:backgroundImage="DataBoardDataInfoBg8"
label="鎶曚繚浜烘暟"
- :value="form.insurePeopleCount"
+ v-model:value="insurePeopleCountValue"
></DataBoardDataInfoItem>
</div>
<div class="data-board-home-content-center-map-img">
@@ -44,12 +44,11 @@
import DataBoardDataInfoBg8 from '@/assets/dataBoard/data-board-data-info-bg8.png';
import DataBoardDataInfoItem from './DataBoardDataInfoItem.vue';
import DataBoardCenterMapMark from './DataBoardCenterMapMark.vue';
-import { useIntervalFn } from '@vueuse/core';
import * as dataBoardServices from '@/services/api/DataBoard';
import { useQuery, useQueryClient } from '@tanstack/vue-query';
import { useIndustrialParkDropDownList } from '@/hooks';
import _ from 'lodash';
-import { on } from 'events';
+import { useIntervalValue } from '../hooks';
defineOptions({
name: 'DataBoardCenterMap',
@@ -68,8 +67,6 @@
sumBountyUseAmount: 0,
insurePeopleCount: 0,
});
-
-// const { value } = useIntervalValue(12222);
function handleClick(id: string) {
form.mapList.forEach((item, index) => {
@@ -93,9 +90,13 @@
enabled: () => !!form.industrialParkId,
onSuccess(data) {
form.totalCustomerCount = data.totalCustomerCount;
+ changeTotalCustomerCount(form.totalCustomerCount);
form.sumBountyReleaseAmount = data.sumBountyReleaseAmount;
+ changeSumBountyReleaseAmount(form.sumBountyReleaseAmount);
form.sumBountyUseAmount = data.sumBountyUseAmount;
+ changeSumBountyUseAmount(form.sumBountyUseAmount);
form.insurePeopleCount = data.insurePeopleCount;
+ changeInsurePeopleCount(form.insurePeopleCount);
},
});
@@ -107,6 +108,18 @@
refetch();
}
});
+
+const { value: totalCustomerCountValue, changeValue: changeTotalCustomerCount } = useIntervalValue(
+ form.totalCustomerCount
+);
+const { value: sumBountyReleaseAmountValue, changeValue: changeSumBountyReleaseAmount } =
+ useIntervalValue(form.sumBountyReleaseAmount);
+const { value: sumBountyUseAmountValue, changeValue: changeSumBountyUseAmount } = useIntervalValue(
+ form.sumBountyUseAmount
+);
+const { value: insurePeopleCountValue, changeValue: changeInsurePeopleCount } = useIntervalValue(
+ form.insurePeopleCount
+);
</script>
<style lang="scss" scoped>
@use '@/style/common.scss' as *;
diff --git a/src/views/DataBoard/components/DataBoardDataInfoItem.vue b/src/views/DataBoard/components/DataBoardDataInfoItem.vue
index 5826b80..9f04cb2 100644
--- a/src/views/DataBoard/components/DataBoardDataInfoItem.vue
+++ b/src/views/DataBoard/components/DataBoardDataInfoItem.vue
@@ -7,7 +7,7 @@
>
<div class="data-board-data-info-item-label">{{ label }}</div>
<div class="data-board-data-info-item-value">
- <el-statistic :value="value" />
+ <el-statistic :value="_value" />
</div>
</div>
</template>
@@ -28,9 +28,9 @@
const value = defineModel<number>('value');
-// const _value = useTransition(value, {
-// duration: 500,
-// });
+const _value = useTransition(value, {
+ duration: 500,
+});
</script>
<style lang="scss" scoped>
diff --git a/src/views/DataBoard/components/DataBoardTableView.vue b/src/views/DataBoard/components/DataBoardTableView.vue
index e0479fd..aa6fdcf 100644
--- a/src/views/DataBoard/components/DataBoardTableView.vue
+++ b/src/views/DataBoard/components/DataBoardTableView.vue
@@ -39,7 +39,7 @@
});
type Props = {
- tableData: any[];
+ tableData?: any[];
unit: string;
isMoney?: boolean;
customerName: string;
diff --git a/src/views/DataBoard/components/DataOverviewContent.vue b/src/views/DataBoard/components/DataOverviewContent.vue
index 6604d75..a9fcec0 100644
--- a/src/views/DataBoard/components/DataOverviewContent.vue
+++ b/src/views/DataBoard/components/DataOverviewContent.vue
@@ -3,22 +3,22 @@
<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"
></DataBoardDataInfoItem>
<DataBoardDataInfoItem
:backgroundImage="DataBoardDataInfoBg4"
label="濂栧姳閲戜娇鐢ㄦ�婚"
- :value="detail?.sumBountyUseAmount"
+ v-model:value="sumBountyUseAmountValue"
></DataBoardDataInfoItem>
</div>
</template>
@@ -29,13 +29,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>
diff --git a/src/views/DataBoard/hooks/index.ts b/src/views/DataBoard/hooks/index.ts
index 4d5a3f2..e4853ae 100644
--- a/src/views/DataBoard/hooks/index.ts
+++ b/src/views/DataBoard/hooks/index.ts
@@ -11,7 +11,7 @@
setTimeout(() => {
value.value = preValue.value;
}, 500);
- }, 5000);
+ }, 10000);
function changeValue(_value: T) {
value.value = _value;
--
Gitblit v1.9.1