feat: databoard

wupengfei

4 天以前 b5312ca8f8cea8218293053b1a0b5b232d321a0b

 src/views/DataBoard/components/DataBoardCenterMap.vue

@@ -2,24 +2,42 @@
  <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="企业数量"
        :value="form.totalCustomerCount"
        label="在线甲方总数"
        v-model:value="enterpriseCustomerCountValue"
      ></DataBoardDataInfoItem>
      <DataBoardDataInfoItem
        :backgroundImage="DataBoardDataInfoBg6"
        label="发放额"
        :value="form.sumBountyReleaseAmount"
        label="在线劳务人员总数"
        v-model:value="enterpriseClientUserCountValue"
      ></DataBoardDataInfoItem>
      <DataBoardDataInfoItem
        :backgroundImage="DataBoardDataInfoBg7"
        label="使用额"
        :value="form.sumBountyUseAmount"
      ></DataBoardDataInfoItem>
      <DataBoardDataInfoItem
        :backgroundImage="DataBoardDataInfoBg8"
        label="投保人数"
        :value="form.insurePeopleCount"
        label="投保总人次"
        v-model:value="insurePeopleCountValue"
      ></DataBoardDataInfoItem>
    </div>
    <div class="data-board-home-content-center-map-img">
@@ -30,7 +48,7 @@
        v-model:choose="item.choose"
        :parkName="item.parkName"
        :class="item.class"
        @click="handleClick(item.id)"
        @click="handleClick(index)"
      ></DataBoardCenterMapMark>
    </div>
  </div>
@@ -38,18 +56,21 @@

<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 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 { useGetDataBoardOverviewByParkV2, useIntervalValue } from '../hooks';
import { useIntervalFn } from '@vueuse/core';

defineOptions({
  name: 'DataBoardCenterMap',
@@ -63,41 +84,66 @@
  industrialParkId: '',
  mapList: [],

  totalCustomerCount: 0,
  sumBountyReleaseAmount: 0,
  enterpriseCount: 0,
  sumOutputValue: 0,
  sumBountyUseAmount: 0,
  sumBountyInsuranceUseAmount: 0,
  enterpriseCustomerCount: 0,
  enterpriseClientUserCount: 0,
  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;
  refetch();
  form.industrialParkId = dataBoardIndustrialParkList.value[chooseIndex]?.id;
}

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,
const { refetch } = useGetDataBoardOverviewByParkV2({
  industrialParkId: computed(() => form.industrialParkId),
  onSuccess(data) {
    form.totalCustomerCount = data.totalCustomerCount;
    form.sumBountyReleaseAmount = data.sumBountyReleaseAmount;
    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']);
@@ -106,6 +152,11 @@
    form.mapList = dataBoardIndustrialParkList.value;
    refetch();
  }
  resume();
});

onUnmounted(() => {
  pause();
});
</script>
<style lang="scss" scoped>
@@ -121,7 +172,7 @@

  .data-board-home-content-center-map-data {
    position: absolute;
    top: 30px;
    top: 75px;
    left: 25px;
    width: 223px;

@@ -131,11 +182,11 @@

      :deep() {
        .data-board-data-info-item-label {
          margin-left: 65px;
          margin-left: 58px;
        }

        .data-board-data-info-item-value {
          margin-left: 65px;
          margin-left: 58px;
        }
      }
    }
@@ -153,25 +204,30 @@
    .data-board-center-map-mark {
      position: absolute;
      cursor: pointer;
      display: none;

      &.init1 {
        top: 115px;
        left: 230px;
        top: 255px;
        right: 75px;
        display: block;
      }

      &.init2 {
        top: 260px;
        top: 295px;
        left: 75px;
        display: block;
      }

      &.init3 {
        top: 340px;
        right: 90px;
        bottom: 110px;
        left: 130px;
        display: block;
      }

      &.init4 {
        top: 305px;
        right: 10px;
        right: 30px;
        bottom: 150px;
        display: block;
      }
    }
  }