<template>
|
<div class="data-board-home-content-center-map">
|
<div class="data-board-home-content-center-map-data">
|
<DataBoardDataInfoItem
|
:backgroundImage="DataBoardDataInfoBg5"
|
label="企业数量"
|
:value="form.totalCustomerCount"
|
></DataBoardDataInfoItem>
|
<DataBoardDataInfoItem
|
:backgroundImage="DataBoardDataInfoBg6"
|
label="发放额"
|
:value="form.sumBountyReleaseAmount"
|
></DataBoardDataInfoItem>
|
<DataBoardDataInfoItem
|
:backgroundImage="DataBoardDataInfoBg7"
|
label="使用额"
|
:value="form.sumBountyUseAmount"
|
></DataBoardDataInfoItem>
|
<DataBoardDataInfoItem
|
:backgroundImage="DataBoardDataInfoBg8"
|
label="投保人数"
|
:value="form.insurePeopleCount"
|
></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(item.id)"
|
></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 { 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';
|
|
defineOptions({
|
name: 'DataBoardCenterMap',
|
});
|
|
const queryClient = useQueryClient();
|
|
const { dataBoardIndustrialParkList } = useIndustrialParkDropDownList();
|
|
const form = reactive({
|
industrialParkId: '',
|
mapList: [],
|
|
totalCustomerCount: 0,
|
sumBountyReleaseAmount: 0,
|
sumBountyUseAmount: 0,
|
insurePeopleCount: 0,
|
});
|
|
// const { value } = useIntervalValue(12222);
|
|
function handleClick(id: string) {
|
form.mapList.forEach((item, index) => {
|
item.choose = item.id === id;
|
});
|
form.industrialParkId = 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;
|
form.sumBountyReleaseAmount = data.sumBountyReleaseAmount;
|
form.sumBountyUseAmount = data.sumBountyUseAmount;
|
form.insurePeopleCount = data.insurePeopleCount;
|
},
|
});
|
|
onMounted(async () => {
|
await queryClient.invalidateQueries(['industrialParkServices/getIndustrialParkDropDownList']);
|
if (dataBoardIndustrialParkList.value.length > 0) {
|
form.industrialParkId = dataBoardIndustrialParkList.value[0].id;
|
form.mapList = dataBoardIndustrialParkList.value;
|
refetch();
|
}
|
});
|
</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>
|
