zhengyiming
3 天以前 54d5eab23e2b74273ad59194ebc5063e95ea5637
src/views/DataBoard/components/DataBoardCenterMap.vue
@@ -4,22 +4,24 @@
      <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">
@@ -30,7 +32,7 @@
        v-model:choose="item.choose"
        :parkName="item.parkName"
        :class="item.class"
        @click="handleClick(item.id)"
        @click="handleClick(index)"
      ></DataBoardCenterMapMark>
    </div>
  </div>
@@ -44,12 +46,12 @@
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',
@@ -69,13 +71,11 @@
  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();
}
@@ -93,11 +93,33 @@
  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']);
@@ -106,6 +128,11 @@
    form.mapList = dataBoardIndustrialParkList.value;
    refetch();
  }
  resume();
});
onUnmounted(() => {
  pause();
});
</script>
<style lang="scss" scoped>