| | |
| | | <DataBoardDataInfoItem |
| | | :backgroundImage="DataBoardDataInfoBg5" |
| | | label="企业数量" |
| | | :value="form.totalCustomerCount" |
| | | v-model:value="totalCustomerCountValue" |
| | | ></DataBoardDataInfoItem> |
| | | <DataBoardDataInfoItem |
| | | :backgroundImage="DataBoardDataInfoBg6" |
| | | label="发放额" |
| | | :value="form.sumBountyReleaseAmount" |
| | | v-model:value="sumBountyReleaseAmountValue" |
| | | :precision="2" |
| | | ></DataBoardDataInfoItem> |
| | | <DataBoardDataInfoItem |
| | | :backgroundImage="DataBoardDataInfoBg7" |
| | | label="使用额" |
| | | :value="form.sumBountyUseAmount" |
| | | v-model:value="sumBountyUseAmountValue" |
| | | :precision="2" |
| | | ></DataBoardDataInfoItem> |
| | | <DataBoardDataInfoItem |
| | | :backgroundImage="DataBoardDataInfoBg8" |
| | | label="投保人数" |
| | | :value="form.insurePeopleCount" |
| | | v-model:value="insurePeopleCountValue" |
| | | ></DataBoardDataInfoItem> |
| | | </div> |
| | | <div class="data-board-home-content-center-map-img"> |
| | |
| | | v-model:choose="item.choose" |
| | | :parkName="item.parkName" |
| | | :class="item.class" |
| | | @click="handleClick(item.id)" |
| | | @click="handleClick(index)" |
| | | ></DataBoardCenterMapMark> |
| | | </div> |
| | | </div> |
| | |
| | | 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'; |
| | | import { useIntervalFn } from '@vueuse/core'; |
| | | |
| | | defineOptions({ |
| | | name: 'DataBoardCenterMap', |
| | |
| | | insurePeopleCount: 0, |
| | | }); |
| | | |
| | | // const { value } = useIntervalValue(12222); |
| | | |
| | | 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; |
| | | form.industrialParkId = dataBoardIndustrialParkList.value[chooseIndex]?.id; |
| | | refetch(); |
| | | } |
| | | |
| | |
| | | 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']); |
| | |
| | | form.mapList = dataBoardIndustrialParkList.value; |
| | | refetch(); |
| | | } |
| | | resume(); |
| | | }); |
| | | |
| | | onUnmounted(() => { |
| | | pause(); |
| | | }); |
| | | </script> |
| | | <style lang="scss" scoped> |