From b5312ca8f8cea8218293053b1a0b5b232d321a0b Mon Sep 17 00:00:00 2001
From: wupengfei <834520024@qq.com>
Date: 星期三, 10 十二月 2025 17:27:29 +0800
Subject: [PATCH] feat: databoard
---
src/views/DataBoard/components/DataBoardCenterMap.vue | 155 +++++++++++++++++++++++++++++++++------------------
1 files changed, 99 insertions(+), 56 deletions(-)
diff --git a/src/views/DataBoard/components/DataBoardCenterMap.vue b/src/views/DataBoard/components/DataBoardCenterMap.vue
index f88f456..c0bb2ce 100644
--- a/src/views/DataBoard/components/DataBoardCenterMap.vue
+++ b/src/views/DataBoard/components/DataBoardCenterMap.vue
@@ -2,23 +2,41 @@
<div class="data-board-home-content-center-map">
<div class="data-board-home-content-center-map-data">
<DataBoardDataInfoItem
+ :backgroundImage="DataBoardDataInfoBg1"
+ label="骞冲彴鍟嗘埛鏁伴噺"
+ v-model:value="enterpriseCountValue"
+ ></DataBoardDataInfoItem>
+ <DataBoardDataInfoItem
+ :backgroundImage="DataBoardDataInfoBg2"
+ label="骞冲彴浜ゆ槗娴佹按"
+ v-model:value="sumOutputValueValue"
+ :precision="2"
+ ></DataBoardDataInfoItem>
+ <DataBoardDataInfoItem
+ :backgroundImage="DataBoardDataInfoBg3"
+ label="骞冲彴娑堣垂鎬婚"
+ v-model:value="sumBountyUseAmountValue"
+ :precision="2"
+ ></DataBoardDataInfoItem>
+ <DataBoardDataInfoItem
+ :backgroundImage="DataBoardDataInfoBg4"
+ label="骞冲彴淇濋櫓娑堣垂鎬婚"
+ :precision="2"
+ v-model:value="sumBountyInsuranceUseAmountValue"
+ ></DataBoardDataInfoItem>
+ <DataBoardDataInfoItem
:backgroundImage="DataBoardDataInfoBg5"
- label="浼佷笟鏁伴噺"
- v-model:value="totalCustomerCountValue"
+ label="鍦ㄧ嚎鐢叉柟鎬绘暟"
+ v-model:value="enterpriseCustomerCountValue"
></DataBoardDataInfoItem>
<DataBoardDataInfoItem
:backgroundImage="DataBoardDataInfoBg6"
- label="鍙戞斁棰�"
- v-model:value="sumBountyReleaseAmountValue"
+ label="鍦ㄧ嚎鍔冲姟浜哄憳鎬绘暟"
+ v-model:value="enterpriseClientUserCountValue"
></DataBoardDataInfoItem>
<DataBoardDataInfoItem
:backgroundImage="DataBoardDataInfoBg7"
- label="浣跨敤棰�"
- v-model:value="sumBountyUseAmountValue"
- ></DataBoardDataInfoItem>
- <DataBoardDataInfoItem
- :backgroundImage="DataBoardDataInfoBg8"
- label="鎶曚繚浜烘暟"
+ label="鎶曚繚鎬讳汉娆�"
v-model:value="insurePeopleCountValue"
></DataBoardDataInfoItem>
</div>
@@ -30,7 +48,7 @@
v-model:choose="item.choose"
:parkName="item.parkName"
:class="item.class"
- @click="handleClick(item.id)"
+ @click="handleClick(index)"
></DataBoardCenterMapMark>
</div>
</div>
@@ -38,17 +56,21 @@
<script setup lang="ts">
import DataBoardCenterMap from '@/assets/dataBoard/data-board-center-map.png';
+import DataBoardDataInfoBg1 from '@/assets/dataBoard/data-board-data-info-bg1.png';
+import DataBoardDataInfoBg2 from '@/assets/dataBoard/data-board-data-info-bg2.png';
+import DataBoardDataInfoBg3 from '@/assets/dataBoard/data-board-data-info-bg3.png';
+import DataBoardDataInfoBg4 from '@/assets/dataBoard/data-board-data-info-bg4.png';
import DataBoardDataInfoBg5 from '@/assets/dataBoard/data-board-data-info-bg5.png';
import DataBoardDataInfoBg6 from '@/assets/dataBoard/data-board-data-info-bg6.png';
import DataBoardDataInfoBg7 from '@/assets/dataBoard/data-board-data-info-bg7.png';
-import DataBoardDataInfoBg8 from '@/assets/dataBoard/data-board-data-info-bg8.png';
import DataBoardDataInfoItem from './DataBoardDataInfoItem.vue';
import DataBoardCenterMapMark from './DataBoardCenterMapMark.vue';
import * as dataBoardServices from '@/services/api/DataBoard';
import { useQuery, useQueryClient } from '@tanstack/vue-query';
import { useIndustrialParkDropDownList } from '@/hooks';
import _ from 'lodash';
-import { useIntervalValue } from '../hooks';
+import { useGetDataBoardOverviewByParkV2, useIntervalValue } from '../hooks';
+import { useIntervalFn } from '@vueuse/core';
defineOptions({
name: 'DataBoardCenterMap',
@@ -62,43 +84,66 @@
industrialParkId: '',
mapList: [],
- totalCustomerCount: 0,
- sumBountyReleaseAmount: 0,
+ enterpriseCount: 0,
+ sumOutputValue: 0,
sumBountyUseAmount: 0,
+ sumBountyInsuranceUseAmount: 0,
+ enterpriseCustomerCount: 0,
+ enterpriseClientUserCount: 0,
insurePeopleCount: 0,
});
-function handleClick(id: string) {
+function handleClick(chooseIndex: number) {
form.mapList.forEach((item, index) => {
- item.choose = item.id === id;
+ item.choose = chooseIndex === index;
});
- form.industrialParkId = id;
- refetch();
+ form.industrialParkId = dataBoardIndustrialParkList.value[chooseIndex]?.id;
}
-const { data: detail, refetch } = useQuery({
- queryKey: ['dataBoardServices/getDataBoardOverviewByPark', form.industrialParkId],
- queryFn: async () => {
- return await dataBoardServices.getDataBoardOverviewByPark(
- { industrialParkId: form.industrialParkId },
- {
- showLoading: false,
- }
- );
- },
- placeholderData: () => ({} as API.GetDataBoardOverviewByParkOutput),
- enabled: () => !!form.industrialParkId,
+const { refetch } = useGetDataBoardOverviewByParkV2({
+ industrialParkId: computed(() => form.industrialParkId),
onSuccess(data) {
- form.totalCustomerCount = data.totalCustomerCount;
- changeTotalCustomerCount(form.totalCustomerCount);
- form.sumBountyReleaseAmount = data.sumBountyReleaseAmount;
- changeSumBountyReleaseAmount(form.sumBountyReleaseAmount);
+ 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
+);
+
+const { pause, resume } = useIntervalFn(() => {
+ if (dataBoardIndustrialParkList.value.length === 0) return;
+ const index = _.random(0, dataBoardIndustrialParkList.value.length - 1);
+ handleClick(index);
+}, 30000);
onMounted(async () => {
await queryClient.invalidateQueries(['industrialParkServices/getIndustrialParkDropDownList']);
@@ -107,19 +152,12 @@
form.mapList = dataBoardIndustrialParkList.value;
refetch();
}
+ resume();
});
-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
-);
+onUnmounted(() => {
+ pause();
+});
</script>
<style lang="scss" scoped>
@use '@/style/common.scss' as *;
@@ -134,7 +172,7 @@
.data-board-home-content-center-map-data {
position: absolute;
- top: 30px;
+ top: 75px;
left: 25px;
width: 223px;
@@ -144,11 +182,11 @@
:deep() {
.data-board-data-info-item-label {
- margin-left: 65px;
+ margin-left: 58px;
}
.data-board-data-info-item-value {
- margin-left: 65px;
+ margin-left: 58px;
}
}
}
@@ -166,25 +204,30 @@
.data-board-center-map-mark {
position: absolute;
cursor: pointer;
+ display: none;
&.init1 {
- top: 115px;
- left: 230px;
+ top: 255px;
+ right: 75px;
+ display: block;
}
&.init2 {
- top: 260px;
+ top: 295px;
left: 75px;
+ display: block;
}
&.init3 {
- top: 340px;
- right: 90px;
+ bottom: 110px;
+ left: 130px;
+ display: block;
}
&.init4 {
- top: 305px;
- right: 10px;
+ right: 30px;
+ bottom: 150px;
+ display: block;
}
}
}
--
Gitblit v1.9.1