feat: databoard

wupengfei

3 天以前 89436385a31b0f31c33bb4688ab7c3b549ecc125

feat: databoard

 src/assets/dataBoard/data-board-center-chart-bg.png

 src/assets/dataBoard/data-board-center-icon1.png

 src/assets/dataBoard/data-board-center-icon2.png

 src/assets/dataBoard/data-board-center-icon3.png

 src/assets/dataBoard/data-board-center-icon4.png

 src/assets/dataBoard/data-board-center-icon5.png

 src/assets/dataBoard/data-board-center-icon6.png

 src/assets/dataBoard/data-board-center-icon7.png

 src/assets/dataBoard/data-board-center-map.png

 src/assets/dataBoard/data-board-data-info-bg1.png

 src/assets/dataBoard/data-board-data-info-bg2.png

 src/assets/dataBoard/data-board-data-info-bg3.png

 src/assets/dataBoard/data-board-data-info-bg4.png

 src/assets/dataBoard/data-board-data-info-bg5.png

 src/assets/dataBoard/data-board-data-info-bg6.png

 src/assets/dataBoard/data-board-data-info-bg7.png

 src/assets/dataBoard/data-board-title-bg.png

 src/assets/fonts/DINAlternate-Bold.woff2

Binary files differ

 src/services/api/DataBoard.ts

@@ -20,6 +20,24 @@
  );
}

/** 查询数据看板劳务人员排行 GET /api/DataBoard/GetDataBoardEnterpriseClientUserRank */
export async function getDataBoardEnterpriseClientUserRank(
  // 叠加生成的Param类型 (非body参数swagger默认没有生成对象)
  params: API.APIgetDataBoardEnterpriseClientUserRankParams,
  options?: API.RequestConfig
) {
  return request<API.GetDataBoardEnterpriseClientUserRankOutput>(
    '/api/DataBoard/GetDataBoardEnterpriseClientUserRank',
    {
      method: 'GET',
      params: {
        ...params,
      },
      ...(options || {}),
    }
  );
}

/** 查询数据看板投保人数排行 GET /api/DataBoard/GetDataBoardInsurePeopleCountRank */
export async function getDataBoardInsurePeopleCountRank(
  // 叠加生成的Param类型 (非body参数swagger默认没有生成对象)
@@ -28,6 +46,44 @@
) {
  return request<API.GetDataBoardInsurePeopleCountRankOutput>(
    '/api/DataBoard/GetDataBoardInsurePeopleCountRank',
    {
      method: 'GET',
      params: {
        ...params,
      },
      ...(options || {}),
    }
  );
}

/** 查询数据看板上季度在线劳务人员数据 GET /api/DataBoard/GetDataBoardLastQuarterEnterpriseClientUserCount */
export async function getDataBoardLastQuarterEnterpriseClientUserCount(
  // 叠加生成的Param类型 (非body参数swagger默认没有生成对象)
  params: API.APIgetDataBoardLastQuarterEnterpriseClientUserCountParams,
  options?: API.RequestConfig
) {
  return request<API.GetDataBoardLastQuarterEnterpriseClientUserCountOutput>(
    '/api/DataBoard/GetDataBoardLastQuarterEnterpriseClientUserCount',
    {
      method: 'GET',
      params: {
        ...params,
        input: undefined,
        ...params['input'],
      },
      ...(options || {}),
    }
  );
}

/** 查询数据看板上季度交易数据 GET /api/DataBoard/GetDataBoardLastQuarterOutputValueCount */
export async function getDataBoardLastQuarterOutputValueCount(
  // 叠加生成的Param类型 (非body参数swagger默认没有生成对象)
  params: API.APIgetDataBoardLastQuarterOutputValueCountParams,
  options?: API.RequestConfig
) {
  return request<API.GetDataBoardLastQuarterOutputValueCountOutput>(
    '/api/DataBoard/GetDataBoardLastQuarterOutputValueCount',
    {
      method: 'GET',
      params: {
@@ -70,8 +126,6 @@
      method: 'GET',
      params: {
        ...params,
        input: undefined,
        ...params['input'],
      },
      ...(options || {}),
    }
@@ -90,8 +144,6 @@
      method: 'GET',
      params: {
        ...params,
        input: undefined,
        ...params['input'],
      },
      ...(options || {}),
    }
@@ -138,6 +190,24 @@
  );
}

/** 查询数据看板交易排行 GET /api/DataBoard/GetDataBoardOutputValueRank */
export async function getDataBoardOutputValueRank(
  // 叠加生成的Param类型 (非body参数swagger默认没有生成对象)
  params: API.APIgetDataBoardOutputValueRankParams,
  options?: API.RequestConfig
) {
  return request<API.GetDataBoardOutputValueRankOutput>(
    '/api/DataBoard/GetDataBoardOutputValueRank',
    {
      method: 'GET',
      params: {
        ...params,
      },
      ...(options || {}),
    }
  );
}

/** 查询数据看板概况 GET /api/DataBoard/GetDataBoardOverview */
export async function getDataBoardOverview(
  // 叠加生成的Param类型 (非body参数swagger默认没有生成对象)
@@ -172,3 +242,101 @@
    }
  );
}

/** 查询数据看板园区概况（第二版） GET /api/DataBoard/GetDataBoardOverviewByParkV2 */
export async function getDataBoardOverviewByParkV2(
  // 叠加生成的Param类型 (非body参数swagger默认没有生成对象)
  params: API.APIgetDataBoardOverviewByParkV2Params,
  options?: API.RequestConfig
) {
  return request<API.GetDataBoardOverviewByParkV2Output>(
    '/api/DataBoard/GetDataBoardOverviewByParkV2',
    {
      method: 'GET',
      params: {
        ...params,
      },
      ...(options || {}),
    }
  );
}

/** 查询企业C端用户导入信息 POST /api/DataBoard/GetEnterpriseCustomerImports */
export async function getEnterpriseCustomerImports(
  body: API.GetEnterpriseCustomerImportsInput,
  options?: API.RequestConfig
) {
  return request<API.GetEnterpriseCustomerImportsOutputPageOutput>(
    '/api/DataBoard/GetEnterpriseCustomerImports',
    {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      data: body,
      ...(options || {}),
    }
  );
}

/** 查询人资企业的甲方客户 GET /api/DataBoard/GetEnterpriseCustomers */
export async function getEnterpriseCustomers(options?: API.RequestConfig) {
  return request<any>('/api/DataBoard/GetEnterpriseCustomers', {
    method: 'GET',
    ...(options || {}),
  });
}

/** 查询产值 GET /api/DataBoard/GetEnterpriseOutputValue */
export async function getEnterpriseOutputValue(options?: API.RequestConfig) {
  return request<any>('/api/DataBoard/GetEnterpriseOutputValue', {
    method: 'GET',
    ...(options || {}),
  });
}

/** 导入企业C端用户 POST /api/DataBoard/ImportEnterpriseCustomerUsers */
export async function importEnterpriseCustomerUsers(options?: API.RequestConfig) {
  return request<any>('/api/DataBoard/ImportEnterpriseCustomerUsers', {
    method: 'POST',
    ...(options || {}),
  });
}

/** 重新导入企业C端用户 POST /api/DataBoard/ReImportEnterpriseCustomerUsers/ReImportEnterpriseCustomerUsers/${param0} */
export async function reImportEnterpriseCustomerUsersReImportEnterpriseCustomerUsersId(
  // 叠加生成的Param类型 (非body参数swagger默认没有生成对象)
  params: API.APIreImportEnterpriseCustomerUsersReImportEnterpriseCustomerUsersIdParams,
  body: {},
  file?: File,
  options?: API.RequestConfig
) {
  const { id: param0, ...queryParams } = params;
  const formData = new FormData();

  if (file) {
    formData.append('file', file);
  }

  Object.keys(body).forEach((ele) => {
    const item = (body as any)[ele];

    if (item !== undefined && item !== null) {
      formData.append(
        ele,
        typeof item === 'object' && !(item instanceof File) ? JSON.stringify(item) : item
      );
    }
  });

  return request<any>(
    `/api/DataBoard/ReImportEnterpriseCustomerUsers/ReImportEnterpriseCustomerUsers/${param0}`,
    {
      method: 'POST',
      params: { ...queryParams },
      data: formData,
      requestType: 'form',
      ...(options || {}),
    }
  );
}

 src/services/api/EnterpriseApplyFile.ts

@@ -203,6 +203,24 @@
  );
}

/** 获取企业已上传申报材料月份 POST /api/EnterpriseApplyFile/GetEnterpriseMonthApplyHasUploadFileList */
export async function getEnterpriseMonthApplyHasUploadFileList(
  body: API.GetEnterpriseMonthApplyHasUploadFileListInput,
  options?: API.RequestConfig
) {
  return request<API.GetEnterpriseMonthApplyFileOutput[]>(
    '/api/EnterpriseApplyFile/GetEnterpriseMonthApplyHasUploadFileList',
    {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      data: body,
      ...(options || {}),
    }
  );
}

/** 获取园区汇总材料类型 POST /api/EnterpriseApplyFile/GetParkCollectFileTypeList */
export async function getParkCollectFileTypeList(
  body: API.GetParkCollectFileTypeListInput,

 src/services/api/typings.d.ts

@@ -471,6 +471,7 @@
  interface AddParkBountyApplyByEnterpriseInput {
    batchNo?: string;
    enterpriseMonthApplyId?: string;
    enterpriseId?: string;
  }

  interface AddParkBountyApplyStepOneInput {
@@ -1429,9 +1430,23 @@
    take?: number;
  }

  interface APIgetDataBoardEnterpriseClientUserRankParams {
    /** 查询数量 */
    take?: number;
  }

  interface APIgetDataBoardInsurePeopleCountRankParams {
    /** 查询数量 */
    take?: number;
  }

  interface APIgetDataBoardLastQuarterEnterpriseClientUserCountParams {
    input?: GetDataBoardLastQuarterEnterpriseClientUserCountInput;
  }

  interface APIgetDataBoardLastQuarterOutputValueCountParams {
    /** 万元单位 */
    wanUnit?: boolean;
  }

  interface APIgetDataBoardNewBountyApplyCountParams {
@@ -1439,11 +1454,13 @@
  }

  interface APIgetDataBoardNewBountyReleaseAmountCountParams {
    input?: GetDataBoardNewBountyReleaseAmountCountInput;
    /** 万元单位 */
    wanUnit?: boolean;
  }

  interface APIgetDataBoardNewBountyUseAmountCountParams {
    input?: GetDataBoardNewBountyUseAmountCountInput;
    /** 万元单位 */
    wanUnit?: boolean;
  }

  interface APIgetDataBoardNewCustomerCountParams {
@@ -1454,7 +1471,17 @@
    input?: GetDataBoardNewInsurePeopleCountInput;
  }

  interface APIgetDataBoardOutputValueRankParams {
    /** 查询数量 */
    take?: number;
  }

  interface APIgetDataBoardOverviewByParkParams {
    industrialParkId?: string;
  }

  interface APIgetDataBoardOverviewByParkV2Params {
    /** 园区Id 不传查全部 */
    industrialParkId?: string;
  }

@@ -2052,6 +2079,10 @@

  interface APIqueryRechargeParams {
    bussSeqNo?: string;
  }

  interface APIreImportEnterpriseCustomerUsersReImportEnterpriseCustomerUsersIdParams {
    id: string;
  }

  interface APIsearchParams {
@@ -6519,6 +6550,8 @@
  interface ExportRewardStatisticsInput {
    /** 月份 */
    month?: string;
    /** 月份 */
    months?: string[];
    /** 所属园区Id */
    industrialParkId?: string;
    /** 关键字 */
@@ -7858,6 +7891,17 @@
    amount?: number;
  }

  interface GetDataBoardEnterpriseClientUserRankOutput {
    items?: GetDataBoardEnterpriseClientUserRankOutputItem[];
  }

  interface GetDataBoardEnterpriseClientUserRankOutputItem {
    /** 企业名称 */
    enterpriseName?: string;
    /** 签约人数 */
    count?: number;
  }

  interface GetDataBoardInsurePeopleCountRankOutput {
    items?: GetDataBoardInsurePeopleCountRankOutputItem[];
  }
@@ -7867,6 +7911,22 @@
    enterpriseName?: string;
    /** 人数 */
    count?: number;
  }

  type GetDataBoardLastQuarterEnterpriseClientUserCountInput = Record<string, any>;

  interface GetDataBoardLastQuarterEnterpriseClientUserCountOutput {
    /** X轴 */
    x?: string[];
    /** 上季度数据 */
    data?: number[];
  }

  interface GetDataBoardLastQuarterOutputValueCountOutput {
    /** X轴 */
    x?: string[];
    /** 上季度数据 */
    data?: number[];
  }

  type GetDataBoardNewBountyApplyCountInput = Record<string, any>;
@@ -7880,8 +7940,6 @@
    lastMonthData?: number[];
  }

  type GetDataBoardNewBountyReleaseAmountCountInput = Record<string, any>;

  interface GetDataBoardNewBountyReleaseAmountCountOutput {
    /** X轴 */
    x?: string[];
@@ -7890,8 +7948,6 @@
    /** 上月数据 */
    lastMonthData?: number[];
  }

  type GetDataBoardNewBountyUseAmountCountInput = Record<string, any>;

  interface GetDataBoardNewBountyUseAmountCountOutput {
    /** X轴 */
@@ -7922,6 +7978,17 @@
    data?: number[];
  }

  interface GetDataBoardOutputValueRankOutput {
    items?: GetDataBoardOutputValueRankOutputItem[];
  }

  interface GetDataBoardOutputValueRankOutputItem {
    /** 企业名称 */
    enterpriseName?: string;
    /** 金额 */
    outputValue?: number;
  }

  interface GetDataBoardOverviewByParkOutput {
    /** 总入驻企业 */
    totalCustomerCount?: number;
@@ -7929,6 +7996,23 @@
    sumBountyReleaseAmount?: number;
    /** 奖励金使用总额 */
    sumBountyUseAmount?: number;
    /** 投保人数 */
    insurePeopleCount?: number;
  }

  interface GetDataBoardOverviewByParkV2Output {
    /** 平台企业总数 */
    enterpriseCount?: number;
    /** 总交易流水 */
    sumOutputValue?: number;
    /** 在线甲方总数 */
    enterpriseCustomerCount?: number;
    /** 在线劳务人员总数 */
    enterpriseClientUserCount?: number;
    /** 平台消费总额 */
    sumBountyUseAmount?: number;
    /** 保险消费总额 */
    sumBountyInsuranceUseAmount?: number;
    /** 投保人数 */
    insurePeopleCount?: number;
  }
@@ -7991,6 +8075,49 @@
    errmsg?: string;
    cost?: string;
    data?: GetEnterpriseCredentialDataResponse;
  }

  interface GetEnterpriseCustomerImportsInput {
    pageModel?: Pagination;
    /** 关键字 */
    keywords?: string;
    /** 导入失败的记录 */
    failImport?: boolean;
  }

  interface GetEnterpriseCustomerImportsOutput {
    /** Id */
    id?: string;
    /** 企业Id */
    enterpriseId?: string;
    /** 文件 */
    file?: string;
    /** 总行数 */
    count?: number;
    /** 成功行数 */
    successCount?: number;
    /** 空白行数 */
    emptyCount?: number;
    /** 失败行数 */
    failCount?: number;
    /** 失败原因 */
    failReason?: string;
    /** 预计保存数量 */
    estimateSaveCount?: number;
    /** 保存数量 */
    saveCount?: number;
    /** 插入数量 */
    insertCount?: number;
    /** 更新数量 */
    updateCount?: number;
    /** 更新文件地址 */
    updateFile?: string;
  }

  interface GetEnterpriseCustomerImportsOutputPageOutput {
    pageModel?: Pagination;
    objectData?: any;
    data?: GetEnterpriseCustomerImportsOutput[];
  }

  interface GetEnterpriseDrawWithDetailOutput {
@@ -8087,6 +8214,10 @@
    pageModel?: Pagination;
    objectData?: any;
    data?: GetEnterpriseMonthApplyFileOutput[];
  }

  interface GetEnterpriseMonthApplyHasUploadFileListInput {
    enterpriseId?: string;
  }

  interface GetEnterpriseParkApplyUploadFileOutput {
@@ -9618,6 +9749,8 @@
    outReCheckTime?: string;
    /** 撤回原因 */
    reasonForWithdrawal?: string;
    /** 是否隐藏 */
    isHidden?: boolean;
  }

  interface GetParkBountyApplyListOutputPageOutput {

 src/style/index.scss

@@ -204,6 +204,13 @@
}

@font-face {
  font-family: DINAlternate-Bold;
  src: url('@/assets/fonts/DINAlternate-Bold.woff2') format('woff2');
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: 'YouSheBiaoTiHei Regular';
  src: url('@/assets/fonts/YouSheBiaoTiHei Regular.ttf') format('truetype');
  font-style: normal;

 src/views/DataBoard/DataBoardHome.vue

@@ -13,17 +13,19 @@
      </div>
      <div class="data-board-home-content">
        <div class="data-board-home-content-left">
          <DataBoardContentItem title="数据概况" class="data-overview">
            <DataOverviewContent></DataOverviewContent>
          </DataBoardContentItem>
          <DataBoardContentItem title="新增入驻企业" class="new-enter">
            <div class="new-enter-content">
              <v-chart :option="newEnterOption" />
          <DataBoardContentItem title="上季度交易数据">
            <div class="data-chart-content">
              <v-chart :option="LastQuarterOutputValueCountChartOption" />
            </div>
          </DataBoardContentItem>
          <DataBoardContentItem title="新增申报批次" :hasBottom="false" class="new-declare">
            <div class="new-declare-content">
              <v-chart :option="newDeclareOption" />
          <DataBoardContentItem title="上季度在线劳务人员数据">
            <div class="data-chart-content">
              <v-chart :option="LastQuarterEnterpriseClientUserCountChartOption" />
            </div>
          </DataBoardContentItem>
          <DataBoardContentItem title="月度平台消费数据" :hasBottom="false">
            <div class="data-chart-content">
              <v-chart :option="newBountyUseAmountCountChartOption" />
            </div>
          </DataBoardContentItem>
        </div>
@@ -42,28 +44,30 @@
            />
            <DataBoardCenterMap></DataBoardCenterMap>
          </div>
          <DataBoardCenterChart></DataBoardCenterChart>
        </div>
        <div class="data-board-home-content-right">
          <DataBoardContentItem title="可用资金使用排行" class="data-table-content">
          <DataBoardContentItem title="交易Top">
            <DataBoardTableView
              :tableData="dataBoardOutputValueRankList"
              unit="元"
              :isMoney="true"
              customerName="产值"
            ></DataBoardTableView>
          </DataBoardContentItem>
          <DataBoardContentItem title="劳务人员Top">
            <DataBoardTableView
              :tableData="enterpriseClientUserRankList"
              unit="人"
              customerName="签约人数"
            ></DataBoardTableView>
          </DataBoardContentItem>
          <DataBoardContentItem title="平台消费Top" :hasBottom="false">
            <DataBoardTableView
              :tableData="bountyUseAmountRankList"
              unit="元"
              :isMoney="true"
              customerName="使用金额"
              customerName="发放金额"
            ></DataBoardTableView>
          </DataBoardContentItem>
          <DataBoardContentItem title="投保人数排行" class="data-table-content">
            <DataBoardTableView
              :tableData="insurePeopleCountRankList"
              unit="人"
              customerName="投保人数"
            ></DataBoardTableView>
          </DataBoardContentItem>
          <DataBoardContentItem title="投保人数对比" :hasBottom="false" class="insure-person">
            <div class="insure-person-content">
              <v-chart :option="insurePersonOption" />
            </div>
          </DataBoardContentItem>
        </div>
      </div>
@@ -88,14 +92,22 @@
  createNewEnterChartOptions,
  createNewDeclareChartOptions,
  createInsurePersonOptionChartOptions,
  creatDataBoardLeftLineChartOptions,
  creatDataBoardLeftBarChartOptions,
} from './utils';
import { useQuery } from '@tanstack/vue-query';
import {
  useGetDataBoardBountyUseAmountRank,
  useGetDataBoardEnterpriseClientUserRank,
  useGetDataBoardInsurePeopleCountRank,
  useGetDataBoardLastQuarterEnterpriseClientUserCount,
  useGetDataBoardLastQuarterOutputValueCount,
  useGetDataBoardNewBountyApplyCount,
  useGetDataBoardNewBountyReleaseAmountCount,
  useGetDataBoardNewBountyUseAmountCount,
  useGetDataBoardNewCustomerCount,
  useGetDataBoardNewInsurePeopleCount,
  useGetDataBoardOutputValueRank,
} from './hooks';

defineOptions({
@@ -114,11 +126,11 @@
const { detail: newInsurePeopleCount } = useGetDataBoardNewInsurePeopleCount();

const { bountyUseAmountRankList } = useGetDataBoardBountyUseAmountRank({
  take: 6,
  take: 5,
});

const { insurePeopleCountRankList } = useGetDataBoardInsurePeopleCountRank({
  take: 6,
  take: 5,
});

const newEnterOption = computed(() =>
@@ -139,13 +151,51 @@
  })
);

const insurePersonOption = computed(() =>
  createInsurePersonOptionChartOptions({
    data: newInsurePeopleCount.value.data,
    xAxisData: newInsurePeopleCount.value.x,
    name: format(new Date(), 'YYYY-MM'),
const { detail: lastQuarterOutputValueCount } = useGetDataBoardLastQuarterOutputValueCount({
  wanUnit: true,
});
const { detail: lastQuarterEnterpriseClientUserCount } =
  useGetDataBoardLastQuarterEnterpriseClientUserCount();

const { detail: newBountyUseAmountCount } = useGetDataBoardNewBountyUseAmountCount();

const LastQuarterOutputValueCountChartOption = computed(() =>
  creatDataBoardLeftLineChartOptions({
    data: lastQuarterOutputValueCount.value.data,
    xAxisData: lastQuarterOutputValueCount.value.x,
    name: '本月',
    yAxisName: '单位/万元',
    smooth: true,
    color: '#FECD07',
    opacityColor: 'rgba(187, 189, 84, 0.5)',
  })
);
const LastQuarterEnterpriseClientUserCountChartOption = computed(() =>
  creatDataBoardLeftLineChartOptions({
    data: lastQuarterEnterpriseClientUserCount.value.data,
    xAxisData: lastQuarterEnterpriseClientUserCount.value.x,
    name: '本月',
    yAxisName: '单位/元',
    smooth: false,
    color: '#00A6FF',
    opacityColor: 'rgba(0, 166, 255, 0.5)',
  })
);

const newBountyUseAmountCountChartOption = computed(() =>
  creatDataBoardLeftBarChartOptions({
    data: newBountyUseAmountCount.value.currentMonthData,
    xAxisData: newBountyUseAmountCount.value.x,
  })
);

const { dataBoardOutputValueRankList } = useGetDataBoardOutputValueRank({
  take: 5,
});

const { enterpriseClientUserRankList } = useGetDataBoardEnterpriseClientUserRank({
  take: 5,
});

onMounted(() => {
  updateTime();
@@ -232,6 +282,14 @@
    .data-board-home-content-left {
      width: 446px;

      .data-board-content-item {
        height: 300px;

        .data-chart-content {
          height: 258px;
        }
      }

      .new-enter {
        .new-enter-content {
          width: 100%;
@@ -254,13 +312,12 @@

      .data-board-home-content-center-map {
        position: relative;
        margin-bottom: 10px;
        width: 100%;
        height: 560px;
        height: 630px;

        .data-board-home-content-center-map-bg {
          position: absolute;
          top: 0;
          top: 35px;
          width: 70px;
          height: 560px;


 src/views/DataBoard/components/DataBoardCenterDataContent.vue

@@ -1,21 +1,48 @@
<template>
  <div class="data-board-home-content-center-top">
    <div class="data-board-home-content-center-top-item between">
    <DataBoardCenterDataItem
      v-model:value="currentMonthSumBountyReleaseAmountValue"
      label="上月发放额"
        v-model:value="enterpriseCountValue"
        label="平台企业总数"
        :precision="0"
      :image="DataBoardCenterIcon1"
    ></DataBoardCenterDataItem>
    <DataBoardCenterDataItem
      v-model:value="currentMonthSumBountyUseAmountValue"
      label="上月使用额"
        v-model:value="sumOutputValueValue"
        label="总交易流水"
      :image="DataBoardCenterIcon2"
    ></DataBoardCenterDataItem>
    <DataBoardCenterDataItem
      v-model:value="currentMonthInsurePeopleCountValue"
      label="上月投保人数"
        v-model:value="enterpriseCustomerCountValue"
        label="在线甲方总数"
      :precision="0"
      :image="DataBoardCenterIcon3"
    ></DataBoardCenterDataItem>
      <DataBoardCenterDataItem
        v-model:value="enterpriseClientUserCountValue"
        label="在线劳务人员总数"
        :precision="0"
        :image="DataBoardCenterIcon4"
      ></DataBoardCenterDataItem>
    </div>
    <div class="data-board-home-content-center-top-item center">
      <DataBoardCenterDataItem
        v-model:value="sumBountyUseAmountValue"
        label="平台消费总额"
        :image="DataBoardCenterIcon5"
      ></DataBoardCenterDataItem>
      <DataBoardCenterDataItem
        v-model:value="sumBountyInsuranceUseAmountValue"
        label="保险消费总额"
        :image="DataBoardCenterIcon6"
      ></DataBoardCenterDataItem>
      <DataBoardCenterDataItem
        v-model:value="insurePeopleCountValue"
        label="总投保人次"
        :precision="0"
        :image="DataBoardCenterIcon7"
      ></DataBoardCenterDataItem>
    </div>
  </div>
</template>

@@ -23,54 +50,69 @@
import DataBoardCenterIcon1 from '@/assets/dataBoard/data-board-center-icon1.png';
import DataBoardCenterIcon2 from '@/assets/dataBoard/data-board-center-icon2.png';
import DataBoardCenterIcon3 from '@/assets/dataBoard/data-board-center-icon3.png';
import DataBoardCenterIcon4 from '@/assets/dataBoard/data-board-center-icon4.png';
import DataBoardCenterIcon5 from '@/assets/dataBoard/data-board-center-icon5.png';
import DataBoardCenterIcon6 from '@/assets/dataBoard/data-board-center-icon6.png';
import DataBoardCenterIcon7 from '@/assets/dataBoard/data-board-center-icon7.png';
import DataBoardCenterDataItem from './DataBoardCenterDataItem.vue';
import * as dataBoardServices from '@/services/api/DataBoard';
import { useQuery } from '@tanstack/vue-query';
import { useIntervalValue } from '../hooks';
import { useGetDataBoardOverviewByParkV2, useIntervalValue } from '../hooks';

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

const form = reactive({
  currentMonthSumBountyReleaseAmount: 0,
  currentMonthSumBountyUseAmount: 0,
  currentMonthInsurePeopleCount: 0,
  industrialParkId: '',

  enterpriseCount: 0,
  sumOutputValue: 0,
  sumBountyUseAmount: 0,
  sumBountyInsuranceUseAmount: 0,
  enterpriseCustomerCount: 0,
  enterpriseClientUserCount: 0,
  insurePeopleCount: 0,
});

const { data: detail, isLoading } = useQuery({
  queryKey: ['dataBoardServices/getDataBoardOverview'],
  queryFn: async () => {
    return await dataBoardServices.getDataBoardOverview(
      {},
      {
        showLoading: false,
      }
    );
  },
  placeholderData: () => ({} as API.GetDataBoardOverviewOutput),
const { refetch } = useGetDataBoardOverviewByParkV2({
  industrialParkId: computed(() => form.industrialParkId),
  onSuccess(data) {
    form.currentMonthSumBountyReleaseAmount = data.currentMonthSumBountyReleaseAmount;
    changeCurrentMonthSumBountyReleaseAmount(data.currentMonthSumBountyReleaseAmount);
    form.currentMonthSumBountyUseAmount = data.currentMonthSumBountyUseAmount;
    changeCurrentMonthSumBountyUseAmount(data.currentMonthSumBountyUseAmount);
    form.currentMonthInsurePeopleCount = data.currentMonthInsurePeopleCount;
    changeCurrentMonthInsurePeopleCount(data.currentMonthInsurePeopleCount);
    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: currentMonthSumBountyReleaseAmountValue,
  changeValue: changeCurrentMonthSumBountyReleaseAmount,
} = useIntervalValue(form.currentMonthSumBountyReleaseAmount);
const {
  value: currentMonthSumBountyUseAmountValue,
  changeValue: changeCurrentMonthSumBountyUseAmount,
} = useIntervalValue(form.currentMonthSumBountyUseAmount);
const {
  value: currentMonthInsurePeopleCountValue,
  changeValue: changeCurrentMonthInsurePeopleCount,
} = useIntervalValue(form.currentMonthInsurePeopleCount);
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
);
</script>

<style lang="scss" scoped>
@@ -78,9 +120,28 @@

.data-board-home-content-center-top {
  display: grid;
  margin-bottom: 6px;
  padding: 0 20px;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 16px;
  margin-bottom: 30px;
  padding: 60px 40px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  row-gap: 22px;
  background-image: url('@/assets/dataBoard/data-board-center-chart-bg.png');

  .data-board-home-content-center-top-item {
    display: flex;

    &.between {
      justify-content: space-between;
    }

    &.center {
      justify-content: center;
      gap: 20px;

      .data-board-center-data-item {
        min-width: 214px;
      }
    }
  }
}
</style>

 src/views/DataBoard/components/DataBoardCenterDataItem.vue

@@ -4,10 +4,10 @@
      <img :src="image" alt="" />
    </div>
    <div class="data-board-data-info-item-content">
      <div class="data-board-data-info-item-label">{{ label }}</div>
      <div class="data-board-data-info-item-value">
        <el-statistic :value="_value" :precision="precision" />
      </div>
      <div class="data-board-data-info-item-label">{{ label }}</div>
    </div>
  </div>
</template>
@@ -41,8 +41,8 @@

.data-board-center-data-item {
  display: flex;
  padding: 8px 12px;
  background: rgba(0, 5, 18, 0.27);
  // padding: 8px 12px;
  // background: rgba(0, 5, 18, 0.27);

  .data-board-data-info-item-icon {
    width: 64px;
@@ -64,8 +64,8 @@
    .data-board-data-info-item-value {
      margin-bottom: 5px;
      font-size: 22px;
      font-family: DrukWide-Bold;
      line-height: 30px;
      font-family: DINAlternate-Bold;
      line-height: 26px;

      :deep() {
        .el-statistic__content {
@@ -77,7 +77,7 @@
    .data-board-data-info-item-label {
      font-size: 16px;
      line-height: 22px;
      color: #ffffff;
      color: #b9c4d0;
    }
  }
}

 src/views/DataBoard/components/DataBoardCenterMap.vue

@@ -2,25 +2,41 @@
  <div class="data-board-home-content-center-map">
    <div class="data-board-home-content-center-map-data">
      <DataBoardDataInfoItem
        :backgroundImage="DataBoardDataInfoBg5"
        label="企业数量"
        v-model:value="totalCustomerCountValue"
        :backgroundImage="DataBoardDataInfoBg1"
        label="平台商户数量"
        v-model:value="enterpriseCountValue"
      ></DataBoardDataInfoItem>
      <DataBoardDataInfoItem
        :backgroundImage="DataBoardDataInfoBg6"
        label="发放额"
        v-model:value="sumBountyReleaseAmountValue"
        :backgroundImage="DataBoardDataInfoBg2"
        label="平台交易流水"
        v-model:value="sumOutputValueValue"
        :precision="2"
      ></DataBoardDataInfoItem>
      <DataBoardDataInfoItem
        :backgroundImage="DataBoardDataInfoBg7"
        label="使用额"
        :backgroundImage="DataBoardDataInfoBg3"
        label="平台消费总额"
        v-model:value="sumBountyUseAmountValue"
        :precision="2"
      ></DataBoardDataInfoItem>
      <DataBoardDataInfoItem
        :backgroundImage="DataBoardDataInfoBg8"
        label="投保人数"
        :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>
@@ -40,17 +56,20 @@

<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 * as dataBoardServices from '@/services/api/DataBoard';
import { useQuery, useQueryClient } from '@tanstack/vue-query';
import { useIndustrialParkDropDownList } from '@/hooks';
import _ from 'lodash';
import { useIntervalValue } from '../hooks';
import { useGetDataBoardOverviewByParkV2, useIntervalValue } from '../hooks';
import { useIntervalFn } from '@vueuse/core';

defineOptions({
@@ -65,52 +84,58 @@
  industrialParkId: '',
  mapList: [],

  totalCustomerCount: 0,
  sumBountyReleaseAmount: 0,
  enterpriseCount: 0,
  sumOutputValue: 0,
  sumBountyUseAmount: 0,
  sumBountyInsuranceUseAmount: 0,
  enterpriseCustomerCount: 0,
  enterpriseClientUserCount: 0,
  insurePeopleCount: 0,
});

function handleClick(chooseIndex: number) {
  console.log('chooseIndex: ', chooseIndex);
  form.mapList.forEach((item, index) => {
    item.choose = chooseIndex === index;
  });
  form.industrialParkId = dataBoardIndustrialParkList.value[chooseIndex]?.id;
  refetch();
}

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;
    changeTotalCustomerCount(form.totalCustomerCount);
    form.sumBountyReleaseAmount = data.sumBountyReleaseAmount;
    changeSumBountyReleaseAmount(form.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: totalCustomerCountValue, changeValue: changeTotalCustomerCount } = useIntervalValue(
  form.totalCustomerCount
const { value: enterpriseCountValue, changeValue: changeEnterpriseCount } = useIntervalValue(
  form.enterpriseCount
);
const { value: sumBountyReleaseAmountValue, changeValue: changeSumBountyReleaseAmount } =
  useIntervalValue(form.sumBountyReleaseAmount);
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
);
@@ -148,7 +173,7 @@

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

@@ -158,11 +183,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;
        }
      }
    }
@@ -180,25 +205,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;
      }
    }
  }

 src/views/DataBoard/components/DataBoardContentItem.vue

@@ -2,7 +2,7 @@
  <div
    class="data-board-content-item"
    :style="{
      marginBottom: hasBottom ? '18px' : '0',
      marginBottom: hasBottom ? '20px' : '0',
    }"
  >
    <div class="data-board-content-item-title">
@@ -45,7 +45,7 @@

    .data-board-content-item-title-text {
      padding-left: 36px;
      font-size: 24px;
      font-size: 22px;
      line-height: 32px;
      background: linear-gradient(to bottom, #ffffff, #b5efff);
      -webkit-background-clip: text;

 src/views/DataBoard/components/DataBoardDataInfoItem.vue

@@ -50,7 +50,7 @@
  .data-board-data-info-item-label {
    margin-bottom: 4px;
    margin-left: 80px;
    font-size: 13px;
    font-size: 14px;
    color: #ffffff;
  }


 src/views/DataBoard/components/DataBoardTableView.vue

@@ -57,14 +57,14 @@

.data-board-table {
  display: flex;
  padding: 0 14px 11px;
  padding: 0 14px;
  flex-direction: column;
  min-height: 270px;
  min-height: 258px;

  .data-board-table-item {
    display: grid;
    align-items: center;
    height: 37px;
    height: 42px;
    font-size: 14px;
    color: #ffffff;
    background-position: bottom center;

 src/views/DataBoard/hooks/index.ts

@@ -195,3 +195,137 @@
    insurePeopleCountRankList,
  };
}

type UseDataBoardOverviewByParkV2 = {
  industrialParkId: MaybeRef<string>;
  onSuccess?: (data: API.GetDataBoardOverviewByParkV2Output) => void;
};

export function useGetDataBoardOverviewByParkV2(options: UseDataBoardOverviewByParkV2) {
  const { industrialParkId, onSuccess } = options;
  const {
    data: detail,
    isLoading,
    refetch,
  } = useQuery({
    queryKey: ['dataBoardServices/getDataBoardOverviewByParkV2', industrialParkId],
    queryFn: async () => {
      let params: API.APIgetDataBoardOverviewByParkV2Params = {};
      if (!!unref(industrialParkId)) {
        params.industrialParkId = unref(industrialParkId);
      }
      return await dataBoardServices.getDataBoardOverviewByParkV2(params, {
        showLoading: false,
      });
    },
    placeholderData: () => ({} as API.GetDataBoardOverviewByParkV2Output),
    onSuccess: (data) => {
      onSuccess?.(data);
    },
  });

  return {
    detail,
    refetch,
  };
}

type UseWanUnitOptions = {
  wanUnit: boolean;
};

export function useGetDataBoardLastQuarterOutputValueCount(options: UseWanUnitOptions) {
  const { wanUnit } = options;

  const { data: detail, isLoading } = useQuery({
    queryKey: ['dataBoardServices/getDataBoardLastQuarterOutputValueCount', wanUnit],
    queryFn: async () => {
      return await dataBoardServices.getDataBoardLastQuarterOutputValueCount(
        { wanUnit: wanUnit },
        {
          showLoading: false,
        }
      );
    },
    placeholderData: () => ({} as API.GetDataBoardLastQuarterOutputValueCountOutput),
  });

  return {
    detail,
  };
}

export function useGetDataBoardLastQuarterEnterpriseClientUserCount() {
  const { data: detail, isLoading } = useQuery({
    queryKey: ['dataBoardServices/getDataBoardLastQuarterEnterpriseClientUserCount'],
    queryFn: async () => {
      return await dataBoardServices.getDataBoardLastQuarterEnterpriseClientUserCount(
        {},
        {
          showLoading: false,
        }
      );
    },
    placeholderData: () => ({} as API.GetDataBoardLastQuarterEnterpriseClientUserCountOutput),
  });

  return {
    detail,
  };
}

export function useGetDataBoardOutputValueRank(options: UseGetDataBoardBountyUseAmountRankOptions) {
  const { take } = options;
  const { data: detail, isLoading } = useQuery({
    queryKey: ['dataBoardServices/getDataBoardOutputValueRank', take],
    queryFn: async () => {
      return await dataBoardServices.getDataBoardOutputValueRank(
        { take: take },
        {
          showLoading: false,
        }
      );
    },
    placeholderData: () => ({} as API.GetDataBoardOutputValueRankOutput),
  });

  const dataBoardOutputValueRankList = computed(() =>
    detail.value.items?.map((x) => ({
      name: x.enterpriseName,
      value: x.outputValue,
    }))
  );

  return {
    dataBoardOutputValueRankList,
  };
}

export function useGetDataBoardEnterpriseClientUserRank(
  options: UseGetDataBoardBountyUseAmountRankOptions
) {
  const { take } = options;
  const { data: detail, isLoading } = useQuery({
    queryKey: ['dataBoardServices/getDataBoardEnterpriseClientUserRank', take],
    queryFn: async () => {
      return await dataBoardServices.getDataBoardEnterpriseClientUserRank(
        { take: take },
        {
          showLoading: false,
        }
      );
    },
    placeholderData: () => ({} as API.GetDataBoardEnterpriseClientUserRankOutput),
  });

  const enterpriseClientUserRankList = computed(() =>
    detail.value.items?.map((x) => ({
      name: x.enterpriseName,
      value: x.count,
    }))
  );

  return {
    enterpriseClientUserRankList,
  };
}

 src/views/DataBoard/utils/index.ts

@@ -286,3 +286,102 @@
    })),
  } as EChartsOption);
}

type CreatDataBoardLeftLineChartOptions = {
  data: number[];
  xAxisData: (number | string)[];
  name: string;
  yAxisName: string;
  smooth: boolean;
  color: string;
  opacityColor: string;
};

export function creatDataBoardLeftLineChartOptions({
  data,
  xAxisData,
  name,
  yAxisName,
  smooth,
  color,
  opacityColor,
}: CreatDataBoardLeftLineChartOptions) {
  return _.merge({}, CommonBarChartOptions, {
    grid: {
      left: '15%',
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985',
        },
      },
    },
    xAxis: {
      data: xAxisData,
    },
    yAxis: {
      name: yAxisName,
    },
    series: [
      {
        name: name,
        type: 'line',
        data: data,
        smooth: smooth,
        lineStyle: {
          width: 1,
          color: color, // 折线颜色
        },
        itemStyle: {
          opacity: 0,
        },
        showSymbol: false,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1, // 渐变方向：0,0（右上）→ 0,1（右下）（垂直向下）
            [
              { offset: 0, color: opacityColor }, // 折线处颜色（不透明）
              { offset: 1, color: 'rgba(64, 158, 255, 0)' }, // X轴处颜色（完全透明）
            ]
          ),
        },
      },
    ],
  } as EChartsOption);
}

type CreatDataBoardLeftBarChartOptions = {
  data: number[];
  xAxisData: (number | string)[];
};

export function creatDataBoardLeftBarChartOptions({
  data,
  xAxisData,
}: CreatDataBoardLeftBarChartOptions) {
  return _.merge({}, CommonBarChartOptions, {
    xAxis: {
      data: xAxisData,
    },
    yAxis: {
      name: '单位/万元',
    },
    series: [
      {
        name: '本月',
        type: 'bar',
        data: data,
        itemStyle: {
          color: '#19DAB0',
        },
        barWidth: '15%',
      },
    ],
  } as EChartsOption);
}