<template>
|
<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="enterpriseCustomerCountValue"
|
></DataBoardDataInfoItem>
|
<DataBoardDataInfoItem
|
:backgroundImage="DataBoardDataInfoBg6"
|
label="在线劳务人员总数"
|
v-model:value="enterpriseClientUserCountValue"
|
></DataBoardDataInfoItem>
|
<DataBoardDataInfoItem
|
:backgroundImage="DataBoardDataInfoBg7"
|
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 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 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 { useGetDataBoardOverviewByParkV2, useIntervalValue } from '../hooks';
|
import { useIntervalFn } from '@vueuse/core';
|
|
defineOptions({
|
name: 'DataBoardCenterMap',
|
});
|
|
const queryClient = useQueryClient();
|
|
const { dataBoardIndustrialParkList } = useIndustrialParkDropDownList();
|
|
const form = reactive({
|
industrialParkId: '',
|
mapList: [],
|
|
enterpriseCount: 0,
|
sumOutputValue: 0,
|
sumBountyUseAmount: 0,
|
sumBountyInsuranceUseAmount: 0,
|
enterpriseCustomerCount: 0,
|
enterpriseClientUserCount: 0,
|
insurePeopleCount: 0,
|
});
|
|
function handleClick(chooseIndex: number) {
|
form.mapList.forEach((item, index) => {
|
item.choose = chooseIndex === index;
|
});
|
form.industrialParkId = dataBoardIndustrialParkList.value[chooseIndex]?.id;
|
}
|
|
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
|
);
|
|
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: 75px;
|
left: 25px;
|
width: 223px;
|
|
.data-board-data-info-item {
|
margin-bottom: 16px;
|
padding: 9px 0;
|
|
:deep() {
|
.data-board-data-info-item-label {
|
margin-left: 58px;
|
}
|
|
.data-board-data-info-item-value {
|
margin-left: 58px;
|
}
|
}
|
}
|
}
|
|
.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;
|
display: none;
|
|
&.init1 {
|
top: 255px;
|
right: 75px;
|
display: block;
|
}
|
|
&.init2 {
|
top: 295px;
|
left: 75px;
|
display: block;
|
}
|
|
&.init3 {
|
bottom: 110px;
|
left: 130px;
|
display: block;
|
}
|
|
&.init4 {
|
right: 30px;
|
bottom: 150px;
|
display: block;
|
}
|
}
|
}
|
}
|
</style>
|
