From 92921431668181fb6d3387368c751ccc40aba8cf Mon Sep 17 00:00:00 2001
From: zhengyiming <540361168@qq.com>
Date: 星期五, 28 十一月 2025 17:14:32 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/dev-dataBoard'
---
src/views/DataBoard/components/DataBoardCenterMap.vue | 204 +++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 204 insertions(+), 0 deletions(-)
diff --git a/src/views/DataBoard/components/DataBoardCenterMap.vue b/src/views/DataBoard/components/DataBoardCenterMap.vue
new file mode 100644
index 0000000..df6d27f
--- /dev/null
+++ b/src/views/DataBoard/components/DataBoardCenterMap.vue
@@ -0,0 +1,204 @@
+<template>
+ <div class="data-board-home-content-center-map">
+ <div class="data-board-home-content-center-map-data">
+ <DataBoardDataInfoItem
+ :backgroundImage="DataBoardDataInfoBg5"
+ label="浼佷笟鏁伴噺"
+ v-model:value="totalCustomerCountValue"
+ ></DataBoardDataInfoItem>
+ <DataBoardDataInfoItem
+ :backgroundImage="DataBoardDataInfoBg6"
+ label="鍙戞斁棰�"
+ v-model:value="sumBountyReleaseAmountValue"
+ ></DataBoardDataInfoItem>
+ <DataBoardDataInfoItem
+ :backgroundImage="DataBoardDataInfoBg7"
+ label="浣跨敤棰�"
+ v-model:value="sumBountyUseAmountValue"
+ ></DataBoardDataInfoItem>
+ <DataBoardDataInfoItem
+ :backgroundImage="DataBoardDataInfoBg8"
+ label="鎶曚繚浜烘暟"
+ v-model:value="insurePeopleCountValue"
+ ></DataBoardDataInfoItem>
+ </div>
+ <div class="data-board-home-content-center-map-img">
+ <img class="data-board-home-content-center-map-img-bg" :src="DataBoardCenterMap" alt="" />
+ <DataBoardCenterMapMark
+ v-for="(item, index) in form.mapList"
+ :key="index"
+ v-model:choose="item.choose"
+ :parkName="item.parkName"
+ :class="item.class"
+ @click="handleClick(index)"
+ ></DataBoardCenterMapMark>
+ </div>
+ </div>
+</template>
+
+<script setup lang="ts">
+import DataBoardCenterMap from '@/assets/dataBoard/data-board-center-map.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 { useIntervalFn } from '@vueuse/core';
+
+defineOptions({
+ name: 'DataBoardCenterMap',
+});
+
+const queryClient = useQueryClient();
+
+const { dataBoardIndustrialParkList } = useIndustrialParkDropDownList();
+
+const form = reactive({
+ industrialParkId: '',
+ mapList: [],
+
+ totalCustomerCount: 0,
+ sumBountyReleaseAmount: 0,
+ sumBountyUseAmount: 0,
+ insurePeopleCount: 0,
+});
+
+function handleClick(chooseIndex: number) {
+ form.mapList.forEach((item, index) => {
+ item.choose = chooseIndex === index;
+ });
+ form.industrialParkId = dataBoardIndustrialParkList.value[chooseIndex]?.id;
+ refetch();
+}
+
+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,
+ 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);
+ },
+});
+
+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
+);
+
+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']);
+ if (dataBoardIndustrialParkList.value.length > 0) {
+ form.industrialParkId = dataBoardIndustrialParkList.value[0].id;
+ form.mapList = dataBoardIndustrialParkList.value;
+ refetch();
+ }
+ resume();
+});
+
+onUnmounted(() => {
+ pause();
+});
+</script>
+<style lang="scss" scoped>
+@use '@/style/common.scss' as *;
+
+.data-board-home-content-center-map {
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 100%;
+
+ .data-board-home-content-center-map-data {
+ position: absolute;
+ top: 30px;
+ left: 25px;
+ width: 223px;
+
+ .data-board-data-info-item {
+ margin-bottom: 16px;
+ padding: 9px 0;
+
+ :deep() {
+ .data-board-data-info-item-label {
+ margin-left: 65px;
+ }
+
+ .data-board-data-info-item-value {
+ margin-left: 65px;
+ }
+ }
+ }
+ }
+
+ .data-board-home-content-center-map-img {
+ position: relative;
+ height: 100%;
+ text-align: center;
+
+ .data-board-home-content-center-map-img-bg {
+ height: 100%;
+ }
+
+ .data-board-center-map-mark {
+ position: absolute;
+ cursor: pointer;
+
+ &.init1 {
+ top: 115px;
+ left: 230px;
+ }
+
+ &.init2 {
+ top: 260px;
+ left: 75px;
+ }
+
+ &.init3 {
+ top: 340px;
+ right: 90px;
+ }
+
+ &.init4 {
+ top: 305px;
+ right: 10px;
+ }
+ }
+ }
+}
+</style>
--
Gitblit v1.9.1