fix: bug

wupengfei

8 天以前 dbc73373c7f7235d09d5a5e78249c1d6364b9ca0

fix: bug

 src/views/DataBoard/DataBoardHome.vue

@@ -103,33 +103,6 @@
const dataBoardTime = ref(null);
let timer = null;

const tableData = [
  {
    name: '公司名',
    num: 3842,
  },
  {
    name: '公司名',
    num: 32,
  },
  {
    name: '公司名',
    num: 342,
  },
  {
    name: '公司名',
    num: 342,
  },
  {
    name: '公司名',
    num: 342,
  },
  {
    name: '公司名',
    num: 342,
  },
];

const updateTime = () => {
  dataBoardTime.value = format(new Date(), 'YYYY.MM.DD HH:mm:ss');
};

 src/views/DataBoard/components/DataBoardCenterDataContent.vue

@@ -1,17 +1,17 @@
<template>
  <div class="data-board-home-content-center-top">
    <DataBoardCenterDataItem
      :value="detail?.currentMonthSumBountyReleaseAmount"
      v-model:value="currentMonthSumBountyReleaseAmountValue"
      label="当月发放额"
      :image="DataBoardCenterIcon1"
    ></DataBoardCenterDataItem>
    <DataBoardCenterDataItem
      :value="detail?.currentMonthSumBountyUseAmount"
      v-model:value="currentMonthSumBountyUseAmountValue"
      label="当月使用额"
      :image="DataBoardCenterIcon2"
    ></DataBoardCenterDataItem>
    <DataBoardCenterDataItem
      :value="detail?.currentMonthInsurePeopleCount"
      v-model:value="currentMonthInsurePeopleCountValue"
      label="当月投保人数"
      :precision="0"
      :image="DataBoardCenterIcon3"
@@ -24,13 +24,53 @@
import DataBoardCenterIcon2 from '@/assets/dataBoard/data-board-center-icon2.png';
import DataBoardCenterIcon3 from '@/assets/dataBoard/data-board-center-icon3.png';
import DataBoardCenterDataItem from './DataBoardCenterDataItem.vue';
import { useGetDataBoardOverview } from '../hooks';
import * as dataBoardServices from '@/services/api/DataBoard';
import { useQuery } from '@tanstack/vue-query';
import { useIntervalValue } from '../hooks';

defineOptions({
  name: 'DataBoardCenterDataContent',
});

const { detail } = useGetDataBoardOverview();
const form = reactive({
  currentMonthSumBountyReleaseAmount: 0,
  currentMonthSumBountyUseAmount: 0,
  currentMonthInsurePeopleCount: 0,
});

const { data: detail, isLoading } = useQuery({
  queryKey: ['dataBoardServices/getDataBoardOverview'],
  queryFn: async () => {
    return await dataBoardServices.getDataBoardOverview(
      {},
      {
        showLoading: false,
      }
    );
  },
  placeholderData: () => ({} as API.GetDataBoardOverviewOutput),
  onSuccess(data) {
    form.currentMonthSumBountyReleaseAmount = data.currentMonthSumBountyReleaseAmount;
    changeCurrentMonthSumBountyReleaseAmount(data.currentMonthSumBountyReleaseAmount);
    form.currentMonthSumBountyUseAmount = data.currentMonthSumBountyUseAmount;
    changeCurrentMonthSumBountyUseAmount(data.currentMonthSumBountyUseAmount);
    form.currentMonthInsurePeopleCount = data.currentMonthInsurePeopleCount;
    changeCurrentMonthInsurePeopleCount(data.currentMonthInsurePeopleCount);
  },
});

const {
  value: currentMonthSumBountyReleaseAmountValue,
  changeValue: changeCurrentMonthSumBountyReleaseAmount,
} = useIntervalValue(form.currentMonthSumBountyReleaseAmount);
const {
  value: currentMonthSumBountyUseAmountValue,
  changeValue: changeCurrentMonthSumBountyUseAmount,
} = useIntervalValue(form.currentMonthSumBountyUseAmount);
const {
  value: currentMonthInsurePeopleCountValue,
  changeValue: changeCurrentMonthInsurePeopleCount,
} = useIntervalValue(form.currentMonthInsurePeopleCount);
</script>

<style lang="scss" scoped>

 src/views/DataBoard/components/DataBoardCenterDataItem.vue

@@ -5,7 +5,7 @@
    </div>
    <div class="data-board-data-info-item-content">
      <div class="data-board-data-info-item-value">
        <el-statistic :value="value" :precision="precision" />
        <el-statistic :value="_value" :precision="precision" />
      </div>
      <div class="data-board-data-info-item-label">{{ label }}</div>
    </div>
@@ -22,14 +22,18 @@
type Props = {
  image: string;
  label: string;
  value: number;
  precision?: number;
};

const props = withDefaults(defineProps<Props>(), {
  value: 0,
  precision: 2,
});

const value = defineModel<number>('value');

const _value = useTransition(value, {
  duration: 500,
});
</script>

<style lang="scss" scoped>

 src/views/DataBoard/components/DataBoardCenterMap.vue

@@ -4,22 +4,22 @@
      <DataBoardDataInfoItem
        :backgroundImage="DataBoardDataInfoBg5"
        label="企业数量"
        :value="form.totalCustomerCount"
        v-model:value="totalCustomerCountValue"
      ></DataBoardDataInfoItem>
      <DataBoardDataInfoItem
        :backgroundImage="DataBoardDataInfoBg6"
        label="发放额"
        :value="form.sumBountyReleaseAmount"
        v-model:value="sumBountyReleaseAmountValue"
      ></DataBoardDataInfoItem>
      <DataBoardDataInfoItem
        :backgroundImage="DataBoardDataInfoBg7"
        label="使用额"
        :value="form.sumBountyUseAmount"
        v-model:value="sumBountyUseAmountValue"
      ></DataBoardDataInfoItem>
      <DataBoardDataInfoItem
        :backgroundImage="DataBoardDataInfoBg8"
        label="投保人数"
        :value="form.insurePeopleCount"
        v-model:value="insurePeopleCountValue"
      ></DataBoardDataInfoItem>
    </div>
    <div class="data-board-home-content-center-map-img">
@@ -44,12 +44,11 @@
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';

defineOptions({
  name: 'DataBoardCenterMap',
@@ -68,8 +67,6 @@
  sumBountyUseAmount: 0,
  insurePeopleCount: 0,
});

// const { value } = useIntervalValue(12222);

function handleClick(id: string) {
  form.mapList.forEach((item, index) => {
@@ -93,9 +90,13 @@
  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);
  },
});

@@ -107,6 +108,18 @@
    refetch();
  }
});

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
);
</script>
<style lang="scss" scoped>
@use '@/style/common.scss' as *;

 src/views/DataBoard/components/DataBoardDataInfoItem.vue

@@ -7,7 +7,7 @@
  >
    <div class="data-board-data-info-item-label">{{ label }}</div>
    <div class="data-board-data-info-item-value">
      <el-statistic :value="value" />
      <el-statistic :value="_value" />
    </div>
  </div>
</template>
@@ -28,9 +28,9 @@

const value = defineModel<number>('value');

// const _value = useTransition(value, {
//   duration: 500,
// });
const _value = useTransition(value, {
  duration: 500,
});
</script>

<style lang="scss" scoped>

 src/views/DataBoard/components/DataBoardTableView.vue

@@ -39,7 +39,7 @@
});

type Props = {
  tableData: any[];
  tableData?: any[];
  unit: string;
  isMoney?: boolean;
  customerName: string;

 src/views/DataBoard/components/DataOverviewContent.vue

@@ -3,22 +3,22 @@
    <DataBoardDataInfoItem
      :backgroundImage="DataBoardDataInfoBg1"
      label="总入驻企业"
      :value="detail?.totalCustomerCount"
      v-model:value="totalCustomerCountValue"
    ></DataBoardDataInfoItem>
    <DataBoardDataInfoItem
      :backgroundImage="DataBoardDataInfoBg2"
      label="总申报数量"
      :value="detail?.totalBountyApplyCount"
      v-model:value="totalBountyApplyCountValue"
    ></DataBoardDataInfoItem>
    <DataBoardDataInfoItem
      :backgroundImage="DataBoardDataInfoBg3"
      label="奖励金发放总额"
      :value="detail?.sumBountyReleaseAmount"
      v-model:value="sumBountyReleaseAmountValue"
    ></DataBoardDataInfoItem>
    <DataBoardDataInfoItem
      :backgroundImage="DataBoardDataInfoBg4"
      label="奖励金使用总额"
      :value="detail?.sumBountyUseAmount"
      v-model:value="sumBountyUseAmountValue"
    ></DataBoardDataInfoItem>
  </div>
</template>
@@ -29,13 +29,54 @@
import DataBoardDataInfoBg3 from '@/assets/dataBoard/data-board-data-info-bg3.png';
import DataBoardDataInfoBg4 from '@/assets/dataBoard/data-board-data-info-bg4.png';
import DataBoardDataInfoItem from './DataBoardDataInfoItem.vue';
import { useGetDataBoardOverview } from '../hooks';
import { useQuery } from '@tanstack/vue-query';
import * as dataBoardServices from '@/services/api/DataBoard';
import { useIntervalValue } from '../hooks';

defineOptions({
  name: 'DataOverviewContent',
});

const { detail } = useGetDataBoardOverview();
const form = reactive({
  totalCustomerCount: 0,
  totalBountyApplyCount: 0,
  sumBountyReleaseAmount: 0,
  sumBountyUseAmount: 0,
});

const { data: detail, isLoading } = useQuery({
  queryKey: ['dataBoardServices/getDataBoardOverview'],
  queryFn: async () => {
    return await dataBoardServices.getDataBoardOverview(
      {},
      {
        showLoading: false,
      }
    );
  },
  placeholderData: () => ({} as API.GetDataBoardOverviewOutput),
  onSuccess(data) {
    form.totalCustomerCount = data.totalCustomerCount;
    changeTotalCustomerCount(form.totalCustomerCount);
    form.totalBountyApplyCount = data.totalBountyApplyCount;
    changeTotalBountyApplyCount(form.totalBountyApplyCount);
    form.sumBountyReleaseAmount = data.sumBountyReleaseAmount;
    changeSumBountyReleaseAmount(form.sumBountyReleaseAmount);
    form.sumBountyUseAmount = data.sumBountyUseAmount;
    changeSumBountyUseAmount(form.sumBountyUseAmount);
  },
});

const { value: totalCustomerCountValue, changeValue: changeTotalCustomerCount } = useIntervalValue(
  form.totalCustomerCount
);
const { value: totalBountyApplyCountValue, changeValue: changeTotalBountyApplyCount } =
  useIntervalValue(form.totalBountyApplyCount);
const { value: sumBountyReleaseAmountValue, changeValue: changeSumBountyReleaseAmount } =
  useIntervalValue(form.sumBountyReleaseAmount);
const { value: sumBountyUseAmountValue, changeValue: changeSumBountyUseAmount } = useIntervalValue(
  form.sumBountyUseAmount
);
</script>

<style lang="scss" scoped>

 src/views/DataBoard/hooks/index.ts

@@ -11,7 +11,7 @@
    setTimeout(() => {
      value.value = preValue.value;
    }, 500);
  }, 5000);
  }, 10000);

  function changeValue(_value: T) {
    value.value = _value;