From 8e99c3b1e12340c27ef71a3a3b0e7c93ae7f8464 Mon Sep 17 00:00:00 2001
From: wupengfei <834520024@qq.com>
Date: 星期五, 28 十一月 2025 13:04:29 +0800
Subject: [PATCH] feat: databoard

---
 src/views/DataBoard/components/DataBoardContentItem.vue       |   56 +
 src/views/DataBoard/components/DataBoardCenterMapMark.vue     |   84 ++
 src/assets/dataBoard/data-board-center-bg.png                 |    0 
 src/assets/dataBoard/data-board-center-icon2.png              |    0 
 src/assets/dataBoard/data-board-title-bg.png                  |    0 
 src/services/api/WaterDropCloud.ts                            |   11 
 src/assets/fonts/DrukWide-Bold.woff                           |    0 
 src/views/DataBoard/hooks/index.ts                            |  197 +++++
 src/assets/dataBoard/data-board-data-info-bg1.png             |    0 
 src/views/DataBoard/components/DataBoardCenterDataContent.vue |   46 +
 src/assets/dataBoard/data-board-data-info-bg5.png             |    0 
 src/views/DataBoard/components/DataOverviewContent.vue        |   57 +
 src/assets/dataBoard/data-board-map-choose.png                |    0 
 src/services/api/DataBoard.ts                                 |  174 +++++
 src/assets/fonts/YouSheBiaoTiHei Regular.ttf                  |    0 
 src/style/index.scss                                          |   21 
 src/assets/dataBoard/data-board-center-map.png                |    0 
 src/views/DataBoard/components/DataBoardCenterMap.vue         |  179 +++++
 src/views/DataBoard/components/DataBoardTableView.vue         |  117 +++
 src/assets/dataBoard/data-board-center-icon1.png              |    0 
 src/services/api/IndustrialPark.ts                            |   18 
 src/assets/dataBoard/data-board-data-info-bg4.png             |    0 
 src/views/DataBoard/components/DataBoardDataInfoItem.vue      |   64 +
 src/assets/dataBoard/data-board-map-init.png                  |    0 
 src/assets/dataBoard/data-board-data-info-bg8.png             |    0 
 src/views/DataBoard/DataBoardHome.vue                         |  306 +++++++++
 src/assets/dataBoard/data-board-table-icon2.png               |    0 
 src/views/DataBoard/utils/index.ts                            |  280 ++++++++
 src/assets/dataBoard/data-board-table-icon3.png               |    0 
 src/services/api/typings.d.ts                                 |  211 ++++++
 src/assets/dataBoard/data-board-data-info-bg7.png             |    0 
 src/assets/fonts/Fontquan-XinYiGuanHeiTi Regular.ttf          |    0 
 src/assets/dataBoard/data-board-center-chart-bg.png           |    0 
 src/assets/dataBoard/data-board-data-info-bg3.png             |    0 
 src/hooks/industrialPark.ts                                   |   10 
 src/services/api/index.ts                                     |    4 
 src/assets/dataBoard/data-board-footer.png                    |    0 
 src/assets/dataBoard/data-board-table-icon1.png               |    0 
 src/assets/fonts/DrukWide-Bold.ttf                            |    0 
 src/assets/dataBoard/data-board-center-icon3.png              |    0 
 src/assets/dataBoard/data-board-bg.png                        |    0 
 src/assets/dataBoard/data-board-data-info-bg6.png             |    0 
 src/views/DataBoard/components/DataBoardCenterChart.vue       |   92 ++
 src/assets/dataBoard/data-board-data-info-bg2.png             |    0 
 src/assets/fonts/DrukWide-Bold.woff2                          |    0 
 src/views/DataBoard/components/DataBoardCenterDataItem.vue    |   80 ++
 46 files changed, 2,004 insertions(+), 3 deletions(-)

diff --git a/src/assets/dataBoard/data-board-bg.png b/src/assets/dataBoard/data-board-bg.png
new file mode 100644
index 0000000..15d656e
--- /dev/null
+++ b/src/assets/dataBoard/data-board-bg.png
Binary files differ
diff --git a/src/assets/dataBoard/data-board-center-bg.png b/src/assets/dataBoard/data-board-center-bg.png
new file mode 100644
index 0000000..1abd0d5
--- /dev/null
+++ b/src/assets/dataBoard/data-board-center-bg.png
Binary files differ
diff --git a/src/assets/dataBoard/data-board-center-chart-bg.png b/src/assets/dataBoard/data-board-center-chart-bg.png
new file mode 100644
index 0000000..12aaf93
--- /dev/null
+++ b/src/assets/dataBoard/data-board-center-chart-bg.png
Binary files differ
diff --git a/src/assets/dataBoard/data-board-center-icon1.png b/src/assets/dataBoard/data-board-center-icon1.png
new file mode 100644
index 0000000..754a590
--- /dev/null
+++ b/src/assets/dataBoard/data-board-center-icon1.png
Binary files differ
diff --git a/src/assets/dataBoard/data-board-center-icon2.png b/src/assets/dataBoard/data-board-center-icon2.png
new file mode 100644
index 0000000..baa1574
--- /dev/null
+++ b/src/assets/dataBoard/data-board-center-icon2.png
Binary files differ
diff --git a/src/assets/dataBoard/data-board-center-icon3.png b/src/assets/dataBoard/data-board-center-icon3.png
new file mode 100644
index 0000000..a7a3a1d
--- /dev/null
+++ b/src/assets/dataBoard/data-board-center-icon3.png
Binary files differ
diff --git a/src/assets/dataBoard/data-board-center-map.png b/src/assets/dataBoard/data-board-center-map.png
new file mode 100644
index 0000000..59862d9
--- /dev/null
+++ b/src/assets/dataBoard/data-board-center-map.png
Binary files differ
diff --git a/src/assets/dataBoard/data-board-data-info-bg1.png b/src/assets/dataBoard/data-board-data-info-bg1.png
new file mode 100644
index 0000000..d9f19a3
--- /dev/null
+++ b/src/assets/dataBoard/data-board-data-info-bg1.png
Binary files differ
diff --git a/src/assets/dataBoard/data-board-data-info-bg2.png b/src/assets/dataBoard/data-board-data-info-bg2.png
new file mode 100644
index 0000000..ac63e2a
--- /dev/null
+++ b/src/assets/dataBoard/data-board-data-info-bg2.png
Binary files differ
diff --git a/src/assets/dataBoard/data-board-data-info-bg3.png b/src/assets/dataBoard/data-board-data-info-bg3.png
new file mode 100644
index 0000000..bfef642
--- /dev/null
+++ b/src/assets/dataBoard/data-board-data-info-bg3.png
Binary files differ
diff --git a/src/assets/dataBoard/data-board-data-info-bg4.png b/src/assets/dataBoard/data-board-data-info-bg4.png
new file mode 100644
index 0000000..d65983b
--- /dev/null
+++ b/src/assets/dataBoard/data-board-data-info-bg4.png
Binary files differ
diff --git a/src/assets/dataBoard/data-board-data-info-bg5.png b/src/assets/dataBoard/data-board-data-info-bg5.png
new file mode 100644
index 0000000..daff347
--- /dev/null
+++ b/src/assets/dataBoard/data-board-data-info-bg5.png
Binary files differ
diff --git a/src/assets/dataBoard/data-board-data-info-bg6.png b/src/assets/dataBoard/data-board-data-info-bg6.png
new file mode 100644
index 0000000..a5f7d59
--- /dev/null
+++ b/src/assets/dataBoard/data-board-data-info-bg6.png
Binary files differ
diff --git a/src/assets/dataBoard/data-board-data-info-bg7.png b/src/assets/dataBoard/data-board-data-info-bg7.png
new file mode 100644
index 0000000..3fecb41
--- /dev/null
+++ b/src/assets/dataBoard/data-board-data-info-bg7.png
Binary files differ
diff --git a/src/assets/dataBoard/data-board-data-info-bg8.png b/src/assets/dataBoard/data-board-data-info-bg8.png
new file mode 100644
index 0000000..3d5b9df
--- /dev/null
+++ b/src/assets/dataBoard/data-board-data-info-bg8.png
Binary files differ
diff --git a/src/assets/dataBoard/data-board-footer.png b/src/assets/dataBoard/data-board-footer.png
new file mode 100644
index 0000000..0c7bc3c
--- /dev/null
+++ b/src/assets/dataBoard/data-board-footer.png
Binary files differ
diff --git a/src/assets/dataBoard/data-board-map-choose.png b/src/assets/dataBoard/data-board-map-choose.png
new file mode 100644
index 0000000..e4d4e2b
--- /dev/null
+++ b/src/assets/dataBoard/data-board-map-choose.png
Binary files differ
diff --git a/src/assets/dataBoard/data-board-map-init.png b/src/assets/dataBoard/data-board-map-init.png
new file mode 100644
index 0000000..590929b
--- /dev/null
+++ b/src/assets/dataBoard/data-board-map-init.png
Binary files differ
diff --git a/src/assets/dataBoard/data-board-table-icon1.png b/src/assets/dataBoard/data-board-table-icon1.png
new file mode 100644
index 0000000..8c71a84
--- /dev/null
+++ b/src/assets/dataBoard/data-board-table-icon1.png
Binary files differ
diff --git a/src/assets/dataBoard/data-board-table-icon2.png b/src/assets/dataBoard/data-board-table-icon2.png
new file mode 100644
index 0000000..1b362f6
--- /dev/null
+++ b/src/assets/dataBoard/data-board-table-icon2.png
Binary files differ
diff --git a/src/assets/dataBoard/data-board-table-icon3.png b/src/assets/dataBoard/data-board-table-icon3.png
new file mode 100644
index 0000000..585ea20
--- /dev/null
+++ b/src/assets/dataBoard/data-board-table-icon3.png
Binary files differ
diff --git a/src/assets/dataBoard/data-board-title-bg.png b/src/assets/dataBoard/data-board-title-bg.png
new file mode 100644
index 0000000..165d571
--- /dev/null
+++ b/src/assets/dataBoard/data-board-title-bg.png
Binary files differ
diff --git a/src/assets/fonts/DrukWide-Bold.ttf b/src/assets/fonts/DrukWide-Bold.ttf
new file mode 100644
index 0000000..3c5feb2
--- /dev/null
+++ b/src/assets/fonts/DrukWide-Bold.ttf
Binary files differ
diff --git a/src/assets/fonts/DrukWide-Bold.woff b/src/assets/fonts/DrukWide-Bold.woff
new file mode 100644
index 0000000..06100fa
--- /dev/null
+++ b/src/assets/fonts/DrukWide-Bold.woff
Binary files differ
diff --git a/src/assets/fonts/DrukWide-Bold.woff2 b/src/assets/fonts/DrukWide-Bold.woff2
new file mode 100644
index 0000000..c2a3c17
--- /dev/null
+++ b/src/assets/fonts/DrukWide-Bold.woff2
Binary files differ
diff --git a/src/assets/fonts/Fontquan-XinYiGuanHeiTi Regular.ttf b/src/assets/fonts/Fontquan-XinYiGuanHeiTi Regular.ttf
new file mode 100644
index 0000000..e651bf5
--- /dev/null
+++ b/src/assets/fonts/Fontquan-XinYiGuanHeiTi Regular.ttf
Binary files differ
diff --git a/src/assets/fonts/YouSheBiaoTiHei Regular.ttf b/src/assets/fonts/YouSheBiaoTiHei Regular.ttf
new file mode 100644
index 0000000..3729151
--- /dev/null
+++ b/src/assets/fonts/YouSheBiaoTiHei Regular.ttf
Binary files differ
diff --git a/src/hooks/industrialPark.ts b/src/hooks/industrialPark.ts
index d32c100..ac9adc3 100644
--- a/src/hooks/industrialPark.ts
+++ b/src/hooks/industrialPark.ts
@@ -37,6 +37,15 @@
     return industrialPark?.parkName ?? '';
   }
 
+  /**鏁版嵁鐪嬫澘 */
+  const dataBoardIndustrialParkList = computed(() => {
+    return industrialParkList.value.map((x, index) => ({
+      ...x,
+      choose: index === 0,
+      class: `init${index + 1}`,
+    }));
+  });
+
   return {
     industrialParkList,
     getIndustrialParkNameById,
@@ -44,5 +53,6 @@
     getIndustrialParkTypeNameById,
     getIndustrialParkByName,
     fourStreamsIndustrialParkList,
+    dataBoardIndustrialParkList,
   };
 }
diff --git a/src/services/api/DataBoard.ts b/src/services/api/DataBoard.ts
new file mode 100644
index 0000000..79bb9f7
--- /dev/null
+++ b/src/services/api/DataBoard.ts
@@ -0,0 +1,174 @@
+/* eslint-disable */
+// @ts-ignore
+import { request } from '@/utils/request';
+
+/** 鏌ヨ鏁版嵁鐪嬫澘濂栧姳閲戜娇鐢ㄦ帓琛� GET /api/DataBoard/GetDataBoardBountyUseAmountRank */
+export async function getDataBoardBountyUseAmountRank(
+  // 鍙犲姞鐢熸垚鐨凱aram绫诲瀷 (闈瀊ody鍙傛暟swagger榛樿娌℃湁鐢熸垚瀵硅薄)
+  params: API.APIgetDataBoardBountyUseAmountRankParams,
+  options?: API.RequestConfig
+) {
+  return request<API.GetDataBoardBountyUseAmountRankOutput>(
+    '/api/DataBoard/GetDataBoardBountyUseAmountRank',
+    {
+      method: 'GET',
+      params: {
+        ...params,
+      },
+      ...(options || {}),
+    }
+  );
+}
+
+/** 鏌ヨ鏁版嵁鐪嬫澘鎶曚繚浜烘暟鎺掕 GET /api/DataBoard/GetDataBoardInsurePeopleCountRank */
+export async function getDataBoardInsurePeopleCountRank(
+  // 鍙犲姞鐢熸垚鐨凱aram绫诲瀷 (闈瀊ody鍙傛暟swagger榛樿娌℃湁鐢熸垚瀵硅薄)
+  params: API.APIgetDataBoardInsurePeopleCountRankParams,
+  options?: API.RequestConfig
+) {
+  return request<API.GetDataBoardInsurePeopleCountRankOutput>(
+    '/api/DataBoard/GetDataBoardInsurePeopleCountRank',
+    {
+      method: 'GET',
+      params: {
+        ...params,
+      },
+      ...(options || {}),
+    }
+  );
+}
+
+/** 鏌ヨ鏁版嵁鐪嬫澘鏂板鐢虫姤鎵规 GET /api/DataBoard/GetDataBoardNewBountyApplyCount */
+export async function getDataBoardNewBountyApplyCount(
+  // 鍙犲姞鐢熸垚鐨凱aram绫诲瀷 (闈瀊ody鍙傛暟swagger榛樿娌℃湁鐢熸垚瀵硅薄)
+  params: API.APIgetDataBoardNewBountyApplyCountParams,
+  options?: API.RequestConfig
+) {
+  return request<API.GetDataBoardNewBountyApplyCountOutput>(
+    '/api/DataBoard/GetDataBoardNewBountyApplyCount',
+    {
+      method: 'GET',
+      params: {
+        ...params,
+        input: undefined,
+        ...params['input'],
+      },
+      ...(options || {}),
+    }
+  );
+}
+
+/** 鏌ヨ鏁版嵁鐪嬫澘鏂板鍙戞斁棰� GET /api/DataBoard/GetDataBoardNewBountyReleaseAmountCount */
+export async function getDataBoardNewBountyReleaseAmountCount(
+  // 鍙犲姞鐢熸垚鐨凱aram绫诲瀷 (闈瀊ody鍙傛暟swagger榛樿娌℃湁鐢熸垚瀵硅薄)
+  params: API.APIgetDataBoardNewBountyReleaseAmountCountParams,
+  options?: API.RequestConfig
+) {
+  return request<API.GetDataBoardNewBountyReleaseAmountCountOutput>(
+    '/api/DataBoard/GetDataBoardNewBountyReleaseAmountCount',
+    {
+      method: 'GET',
+      params: {
+        ...params,
+        input: undefined,
+        ...params['input'],
+      },
+      ...(options || {}),
+    }
+  );
+}
+
+/** 鏌ヨ鏁版嵁鐪嬫澘鏂板鍙戞斁棰� GET /api/DataBoard/GetDataBoardNewBountyUseAmountCount */
+export async function getDataBoardNewBountyUseAmountCount(
+  // 鍙犲姞鐢熸垚鐨凱aram绫诲瀷 (闈瀊ody鍙傛暟swagger榛樿娌℃湁鐢熸垚瀵硅薄)
+  params: API.APIgetDataBoardNewBountyUseAmountCountParams,
+  options?: API.RequestConfig
+) {
+  return request<API.GetDataBoardNewBountyUseAmountCountOutput>(
+    '/api/DataBoard/GetDataBoardNewBountyUseAmountCount',
+    {
+      method: 'GET',
+      params: {
+        ...params,
+        input: undefined,
+        ...params['input'],
+      },
+      ...(options || {}),
+    }
+  );
+}
+
+/** 鏌ヨ鏁版嵁鐪嬫澘鏂板鍏ラ┗浼佷笟 GET /api/DataBoard/GetDataBoardNewCustomerCount */
+export async function getDataBoardNewCustomerCount(
+  // 鍙犲姞鐢熸垚鐨凱aram绫诲瀷 (闈瀊ody鍙傛暟swagger榛樿娌℃湁鐢熸垚瀵硅薄)
+  params: API.APIgetDataBoardNewCustomerCountParams,
+  options?: API.RequestConfig
+) {
+  return request<API.GetDataBoardNewCustomerCountOutput>(
+    '/api/DataBoard/GetDataBoardNewCustomerCount',
+    {
+      method: 'GET',
+      params: {
+        ...params,
+        input: undefined,
+        ...params['input'],
+      },
+      ...(options || {}),
+    }
+  );
+}
+
+/** 鏌ヨ鏁版嵁鐪嬫澘鎶曚繚浜烘暟瀵规瘮 GET /api/DataBoard/GetDataBoardNewInsurePeopleCount */
+export async function getDataBoardNewInsurePeopleCount(
+  // 鍙犲姞鐢熸垚鐨凱aram绫诲瀷 (闈瀊ody鍙傛暟swagger榛樿娌℃湁鐢熸垚瀵硅薄)
+  params: API.APIgetDataBoardNewInsurePeopleCountParams,
+  options?: API.RequestConfig
+) {
+  return request<API.GetDataBoardNewInsurePeopleCountOutput>(
+    '/api/DataBoard/GetDataBoardNewInsurePeopleCount',
+    {
+      method: 'GET',
+      params: {
+        ...params,
+        input: undefined,
+        ...params['input'],
+      },
+      ...(options || {}),
+    }
+  );
+}
+
+/** 鏌ヨ鏁版嵁鐪嬫澘姒傚喌 GET /api/DataBoard/GetDataBoardOverview */
+export async function getDataBoardOverview(
+  // 鍙犲姞鐢熸垚鐨凱aram绫诲瀷 (闈瀊ody鍙傛暟swagger榛樿娌℃湁鐢熸垚瀵硅薄)
+  params: API.APIgetDataBoardOverviewParams,
+  options?: API.RequestConfig
+) {
+  return request<API.GetDataBoardOverviewOutput>('/api/DataBoard/GetDataBoardOverview', {
+    method: 'GET',
+    params: {
+      ...params,
+      input: undefined,
+      ...params['input'],
+    },
+    ...(options || {}),
+  });
+}
+
+/** 鏌ヨ鏁版嵁鐪嬫澘鍥尯姒傚喌 GET /api/DataBoard/GetDataBoardOverviewByPark */
+export async function getDataBoardOverviewByPark(
+  // 鍙犲姞鐢熸垚鐨凱aram绫诲瀷 (闈瀊ody鍙傛暟swagger榛樿娌℃湁鐢熸垚瀵硅薄)
+  params: API.APIgetDataBoardOverviewByParkParams,
+  options?: API.RequestConfig
+) {
+  return request<API.GetDataBoardOverviewByParkOutput>(
+    '/api/DataBoard/GetDataBoardOverviewByPark',
+    {
+      method: 'GET',
+      params: {
+        ...params,
+      },
+      ...(options || {}),
+    }
+  );
+}
diff --git a/src/services/api/IndustrialPark.ts b/src/services/api/IndustrialPark.ts
index 2f0af63..d07dcca 100644
--- a/src/services/api/IndustrialPark.ts
+++ b/src/services/api/IndustrialPark.ts
@@ -99,6 +99,24 @@
   );
 }
 
+/** 鏌ヨ鍥尯濂栧姳閲戞ā鏉垮悕绉� POST /api/IndustrialPark/GetIndustrialPartBountyTemplates */
+export async function getIndustrialPartBountyTemplates(
+  body: API.GetIndustrialPartBountyTemplatesInput,
+  options?: API.RequestConfig
+) {
+  return request<API.GetIndustrialPartBountyTemplatesOutput>(
+    '/api/IndustrialPark/GetIndustrialPartBountyTemplates',
+    {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      data: body,
+      ...(options || {}),
+    }
+  );
+}
+
 /** 璁剧疆濂栧姳閲戠敵鎶ョ姸鎬� POST /api/IndustrialPark/SetIndustrialParkRewardEnable */
 export async function setIndustrialParkRewardEnable(
   body: API.SetIndustrialParkRewardEnableInput,
diff --git a/src/services/api/WaterDropCloud.ts b/src/services/api/WaterDropCloud.ts
new file mode 100644
index 0000000..b4cdc31
--- /dev/null
+++ b/src/services/api/WaterDropCloud.ts
@@ -0,0 +1,11 @@
+/* eslint-disable */
+// @ts-ignore
+import { request } from '@/utils/request';
+
+/** 鍚屾瀹㈡埛鏉愭枡 POST /api/WaterDropCloud/SyncCompanyMaterial */
+export async function syncCompanyMaterial(options?: API.RequestConfig) {
+  return request<any>('/api/WaterDropCloud/SyncCompanyMaterial', {
+    method: 'POST',
+    ...(options || {}),
+  });
+}
diff --git a/src/services/api/index.ts b/src/services/api/index.ts
index a0a2349..ec96c7f 100644
--- a/src/services/api/index.ts
+++ b/src/services/api/index.ts
@@ -23,6 +23,7 @@
 import * as Consult from './Consult';
 import * as CooperationApply from './CooperationApply';
 import * as Customer from './Customer';
+import * as DataBoard from './DataBoard';
 import * as ElectronSign from './ElectronSign';
 import * as EnterpriseApplyFile from './EnterpriseApplyFile';
 import * as EnterpriseMaterial from './EnterpriseMaterial';
@@ -90,6 +91,7 @@
 import * as Version from './Version';
 import * as Wallet from './Wallet';
 import * as WalletChannel from './WalletChannel';
+import * as WaterDropCloud from './WaterDropCloud';
 import * as Withdraw from './Withdraw';
 import * as WxNotify from './WxNotify';
 import * as WxPayNotify from './WxPayNotify';
@@ -115,6 +117,7 @@
   Consult,
   CooperationApply,
   Customer,
+  DataBoard,
   ElectronSign,
   EnterpriseApplyFile,
   EnterpriseMaterial,
@@ -182,6 +185,7 @@
   Version,
   Wallet,
   WalletChannel,
+  WaterDropCloud,
   Withdraw,
   WxNotify,
   WxPayNotify,
diff --git a/src/services/api/typings.d.ts b/src/services/api/typings.d.ts
index 3e48d67..e6dfa4b 100644
--- a/src/services/api/typings.d.ts
+++ b/src/services/api/typings.d.ts
@@ -249,7 +249,7 @@
     /** 鏄惁鏀寔璐㈡斂鎷ㄤ粯 */
     suportFinance?: boolean;
     /** 鏂囦欢 */
-    industrialParkApplyFileFile?: IndustrialParkApplyFileFile[];
+    bountTemplates?: AddIndustrialParkInputBountTemplate[];
     /** 鏃犻渶鏀垮姟绔鏍� */
     notNeedGovernmentAudit?: boolean;
     /** 鏃犻渶杩愯惀绔鏍� */
@@ -258,6 +258,15 @@
     dualReviewOfGovernmentAffairs?: boolean;
     /** 鍏徃淇℃伅 */
     industrialParkCompanyFile?: IndustrialParkCompanyFile[];
+  }
+
+  interface AddIndustrialParkInputBountTemplate {
+    /** 妯℃澘Id */
+    templateId?: string;
+    /** 妯℃澘鍚嶇О */
+    templateName?: string;
+    /** 鏂囦欢 */
+    items?: IndustrialParkApplyFileFile[];
   }
 
   interface AddIndustryBodyAuditInput {
@@ -467,6 +476,8 @@
   interface AddParkBountyApplyStepOneInput {
     batchNo?: string;
     parkId?: string;
+    /** 濂栧姳閲戞ā鏉縄d */
+    bountyTemplateId?: string;
     applyMonth?: string;
     removeCompanyIds?: string[];
   }
@@ -1398,6 +1409,7 @@
 
   interface APIgetCustomerFileTypeHeadParams {
     enterpriseId?: string;
+    templateId?: string;
   }
 
   interface APIgetCustomerTemplateDetailParams {
@@ -1410,6 +1422,44 @@
 
   interface APIgetCustomerTemplateParamListByTemplateIdParams {
     templateId?: string;
+  }
+
+  interface APIgetDataBoardBountyUseAmountRankParams {
+    /** 鏌ヨ鏁伴噺 */
+    take?: number;
+  }
+
+  interface APIgetDataBoardInsurePeopleCountRankParams {
+    /** 鏌ヨ鏁伴噺 */
+    take?: number;
+  }
+
+  interface APIgetDataBoardNewBountyApplyCountParams {
+    input?: GetDataBoardNewBountyApplyCountInput;
+  }
+
+  interface APIgetDataBoardNewBountyReleaseAmountCountParams {
+    input?: GetDataBoardNewBountyReleaseAmountCountInput;
+  }
+
+  interface APIgetDataBoardNewBountyUseAmountCountParams {
+    input?: GetDataBoardNewBountyUseAmountCountInput;
+  }
+
+  interface APIgetDataBoardNewCustomerCountParams {
+    input?: GetDataBoardNewCustomerCountInput;
+  }
+
+  interface APIgetDataBoardNewInsurePeopleCountParams {
+    input?: GetDataBoardNewInsurePeopleCountInput;
+  }
+
+  interface APIgetDataBoardOverviewByParkParams {
+    industrialParkId?: string;
+  }
+
+  interface APIgetDataBoardOverviewParams {
+    input?: GetDataBoardOverviewInput;
   }
 
   interface APIgetDefaultConnectionStringParams {
@@ -5851,6 +5901,8 @@
     applyAmount?: number;
     fileTypes?: CustomerUploadMonthApplyFileType[];
     enterpriseId?: string;
+    /** 濂栧姳閲戞ā鏉縄d */
+    bountyTemplateId?: string;
     /** 鏄惁鏄繍钀ョ浠ｄ笂浼� */
     isAdminFileUpload?: boolean;
   }
@@ -5880,6 +5932,8 @@
     applyAmount?: number;
     fileTypes?: CustomerUploadMonthApplyFileType[];
     enterpriseId?: string;
+    /** 濂栧姳閲戞ā鏉縄d */
+    bountyTemplateId?: string;
     /** 鏄惁鏄繍钀ョ浠ｄ笂浼� */
     isAdminFileUpload?: boolean;
     /** 姹囨�绘潗鏂� */
@@ -7722,6 +7776,8 @@
   interface GetCustomerUploadApplyFilesInput {
     id?: string;
     enterpriseId?: string;
+    /** 濂栧姳閲戞ā鏉縄d */
+    bountyTemplateId?: string;
     userId?: string;
     withMonth?: string;
     parkBountyApplyId?: string;
@@ -7746,6 +7802,8 @@
   interface GetCustomerUploadApplyFilesResponse {
     /** 鎵�灞炴湀浠� */
     withMonth?: string;
+    /** 濂栧姳閲戞ā鏉縄d */
+    bountyTemplateId?: string;
     /** 浼佷笟鍚嶇О */
     enterpriseName?: string;
     /** 鐢虫姤閲戦 */
@@ -7759,6 +7817,8 @@
   interface GetCustomerUploadApplyFilesV2Response {
     /** 鎵�灞炴湀浠� */
     withMonth?: string;
+    /** 濂栧姳閲戞ā鏉縄d */
+    bountyTemplateId?: string;
     /** 浼佷笟鍚嶇О */
     enterpriseName?: string;
     /** 鐢虫姤閲戦 */
@@ -7775,11 +7835,119 @@
 
   interface GetCustomerUploadFileRecordInput {
     withMonth?: string;
+    /** 濂栧姳閲戞ā鏉縄d */
+    bountyTemplateId?: string;
     userId?: string;
+    isApply?: boolean;
   }
 
   interface GetCustomerUploadFileRecordOutput {
     id?: string;
+  }
+
+  interface GetDataBoardBountyUseAmountRankOutput {
+    items?: GetDataBoardBountyUseAmountRankOutputItem[];
+  }
+
+  interface GetDataBoardBountyUseAmountRankOutputItem {
+    /** 浼佷笟鍚嶇О */
+    enterpriseName?: string;
+    /** 閲戦 */
+    amount?: number;
+  }
+
+  interface GetDataBoardInsurePeopleCountRankOutput {
+    items?: GetDataBoardInsurePeopleCountRankOutputItem[];
+  }
+
+  interface GetDataBoardInsurePeopleCountRankOutputItem {
+    /** 浼佷笟鍚嶇О */
+    enterpriseName?: string;
+    /** 浜烘暟 */
+    count?: number;
+  }
+
+  type GetDataBoardNewBountyApplyCountInput = Record<string, any>;
+
+  interface GetDataBoardNewBountyApplyCountOutput {
+    /** X杞� */
+    x?: string[];
+    /** 褰撴湀鏁版嵁 */
+    currentMonthData?: number[];
+    /** 涓婃湀鏁版嵁 */
+    lastMonthData?: number[];
+  }
+
+  type GetDataBoardNewBountyReleaseAmountCountInput = Record<string, any>;
+
+  interface GetDataBoardNewBountyReleaseAmountCountOutput {
+    /** X杞� */
+    x?: string[];
+    /** 褰撴湀鏁版嵁 */
+    currentMonthData?: number[];
+    /** 涓婃湀鏁版嵁 */
+    lastMonthData?: number[];
+  }
+
+  type GetDataBoardNewBountyUseAmountCountInput = Record<string, any>;
+
+  interface GetDataBoardNewBountyUseAmountCountOutput {
+    /** X杞� */
+    x?: string[];
+    /** 褰撴湀鏁版嵁 */
+    currentMonthData?: number[];
+    /** 涓婃湀鏁版嵁 */
+    lastMonthData?: number[];
+  }
+
+  type GetDataBoardNewCustomerCountInput = Record<string, any>;
+
+  interface GetDataBoardNewCustomerCountOutput {
+    /** X杞� */
+    x?: string[];
+    /** 褰撴湀鏁版嵁 */
+    currentMonthData?: number[];
+    /** 涓婃湀鏁版嵁 */
+    lastMonthData?: number[];
+  }
+
+  type GetDataBoardNewInsurePeopleCountInput = Record<string, any>;
+
+  interface GetDataBoardNewInsurePeopleCountOutput {
+    /** X杞� */
+    x?: string[];
+    /** 鏁版嵁 */
+    data?: number[];
+  }
+
+  interface GetDataBoardOverviewByParkOutput {
+    /** 鎬诲叆椹讳紒涓� */
+    totalCustomerCount?: number;
+    /** 濂栧姳閲戝彂鏀炬�婚 */
+    sumBountyReleaseAmount?: number;
+    /** 濂栧姳閲戜娇鐢ㄦ�婚 */
+    sumBountyUseAmount?: number;
+    /** 鎶曚繚浜烘暟 */
+    insurePeopleCount?: number;
+  }
+
+  type GetDataBoardOverviewInput = Record<string, any>;
+
+  interface GetDataBoardOverviewOutput {
+    /** 鎬诲叆椹讳紒涓� */
+    totalCustomerCount?: number;
+    /** 鎬荤敵鎶ユ暟閲� */
+    totalBountyApplyCount?: number;
+    /** 濂栧姳閲戝彂鏀炬�婚 */
+    sumBountyReleaseAmount?: number;
+    /** 濂栧姳閲戜娇鐢ㄦ�婚 */
+    sumBountyUseAmount?: number;
+    /** 褰撴湀鍙戞斁棰� */
+    currentMonthSumBountyReleaseAmount?: number;
+    /** 褰撴湀浣跨敤棰� */
+    currentMonthSumBountyUseAmount?: number;
+    /** 褰撴湀鎶曚繚浜烘暟 */
+    currentMonthInsurePeopleCount?: number;
   }
 
   interface GetEnterpriseBuntyTradeDto {
@@ -8215,6 +8383,21 @@
     categoryId?: string;
     /** 鏌ヨ鏉′欢锛氫骇鍝佸悕绉�/鏈嶅姟鍟嗗悕绉� */
     queryCondition?: string;
+  }
+
+  interface GetIndustrialPartBountyTemplatesInput {
+    /** 鍥尯Id */
+    id?: string;
+  }
+
+  interface GetIndustrialPartBountyTemplatesOutput {
+    /** 濂栧姳閲戞ā鏉垮悕绉� */
+    bountyTemplates?: GetIndustrialPartBountyTemplatesOutputItem[];
+  }
+
+  interface GetIndustrialPartBountyTemplatesOutputItem {
+    id?: string;
+    templateName?: string;
   }
 
   interface GetInformationAdvertiseByCategoryInput {
@@ -9605,6 +9788,8 @@
 
   interface GetParkCollectFileTypeListInput {
     parkId?: string;
+    /** 濂栧姳閲戞ā鏉縄d */
+    bountyTemplateId?: string;
     searchType?: number;
   }
 
@@ -11725,8 +11910,18 @@
     registerAddress?: string;
     /** 澶囨敞 */
     remark?: string;
-    industrialParkFileTypeList?: IndustrialParkFileTypeOutput[];
+    /** 濂栧姳閲戞ā鏉� */
+    bountyTemplates?: IndustrialParkDetailOutputFileTypeTemplate[];
     industrialParkCompanyList?: IndustrialParkCompanyOutput[];
+  }
+
+  interface IndustrialParkDetailOutputFileTypeTemplate {
+    /** 妯℃澘Id */
+    templateId?: string;
+    /** 妯℃澘鍚嶇О */
+    templateName?: string;
+    /** 鏉愭枡 */
+    items?: IndustrialParkFileTypeOutput[];
   }
 
   interface IndustrialParkDropDownOutput {
@@ -16659,6 +16854,10 @@
   interface OutCheckParkBountyApplyBaseInfo {
     /** 鐢宠鎵规鍙� */
     batchNo?: string;
+    /** 濂栧姳閲戞ā鏉� */
+    bountyTemplateId?: string;
+    /** 濂栧姳閲戞ā鏉垮悕绉� */
+    bountyTemplateName?: string;
     /** 鐢宠鍥尯Id */
     parkId?: string;
     /** 鐢宠鍥尯 */
@@ -16808,6 +17007,10 @@
   interface ParkBountyApplyBaseInfo {
     /** 鐢宠鎵规鍙� */
     batchNo?: string;
+    /** 妯℃澘Id */
+    bountyTemplateId?: string;
+    /** 妯℃澘鍚嶇О */
+    bountyTemplateName?: string;
     /** 鐢宠鍥尯Id */
     parkId?: string;
     /** 鐢宠鍥尯 */
@@ -22899,7 +23102,7 @@
     /** 鏄惁鏀寔璐㈡斂鎷ㄤ粯 */
     suportFinance?: boolean;
     /** 鏂囦欢 */
-    industrialParkApplyFileFile?: IndustrialParkApplyFileFile[];
+    bountTemplates?: AddIndustrialParkInputBountTemplate[];
     /** 鏃犻渶鏀垮姟绔鏍� */
     notNeedGovernmentAudit?: boolean;
     /** 鏃犻渶杩愯惀绔鏍� */
@@ -23587,6 +23790,8 @@
     fileSearchTypeId?: string;
     listFiles?: CustomerUploadMonthApplyFileTypeDto[];
     enterpriseId?: string;
+    /** 濂栧姳閲戞ā鏉縄d */
+    bountyTemplateId?: string;
   }
 
   interface UploadParkApplyCustomerFilesInput {
diff --git a/src/style/index.scss b/src/style/index.scss
index 16db70a..42de2c8 100644
--- a/src/style/index.scss
+++ b/src/style/index.scss
@@ -195,3 +195,24 @@
     }
   }
 }
+
+@font-face {
+  font-family: DrukWide-Bold;
+  src: url('@/assets/fonts/DrukWide-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;
+  font-weight: normal;
+}
+
+@font-face {
+  font-family: 'Fontquan-XinYiGuanHeiTi Regular';
+  src: url('@/assets/fonts/Fontquan-XinYiGuanHeiTi Regular.ttf') format('truetype');
+  font-style: normal;
+  font-weight: normal;
+}
diff --git a/src/views/DataBoard/DataBoardHome.vue b/src/views/DataBoard/DataBoardHome.vue
new file mode 100644
index 0000000..f2cbf04
--- /dev/null
+++ b/src/views/DataBoard/DataBoardHome.vue
@@ -0,0 +1,306 @@
+<template>
+  <div class="data-board-home-wrapper">
+    <div class="data-board-home">
+      <div class="data-board-home-title">
+        <div class="data-board-home-title-logo"></div>
+        <div class="data-board-home-title-text">{{ '姹熻タ818缁煎悎鏁版嵁灞曠ず' }}</div>
+        <div class="data-board-home-title-time">
+          {{ dataBoardTime }}
+        </div>
+      </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" />
+            </div>
+          </DataBoardContentItem>
+          <DataBoardContentItem title="鏂板鐢虫姤鎵规" :hasBottom="false" class="new-declare">
+            <div class="new-declare-content">
+              <v-chart :option="newDeclareOption" />
+            </div>
+          </DataBoardContentItem>
+        </div>
+        <div class="data-board-home-content-center">
+          <DataBoardCenterDataContent></DataBoardCenterDataContent>
+          <div class="data-board-home-content-center-map">
+            <img
+              class="data-board-home-content-center-map-bg left"
+              :src="DataBoardCenterBg"
+              alt=""
+            />
+            <img
+              class="data-board-home-content-center-map-bg right"
+              :src="DataBoardCenterBg"
+              alt=""
+            />
+            <DataBoardCenterMap></DataBoardCenterMap>
+          </div>
+          <DataBoardCenterChart></DataBoardCenterChart>
+        </div>
+        <div class="data-board-home-content-right">
+          <DataBoardContentItem title="濂栧姳閲戜娇鐢ㄦ帓琛�" class="data-table-content">
+            <DataBoardTableView
+              :tableData="bountyUseAmountRankList"
+              unit="鍏�"
+              :isMoney="true"
+              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>
+      <div class="data-board-home-footer"></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import DataBoardContentItem from './components/DataBoardContentItem.vue';
+import DataBoardTableView from './components/DataBoardTableView.vue';
+import DataBoardCenterMap from './components/DataBoardCenterMap.vue';
+import DataBoardCenterChart from './components/DataBoardCenterChart.vue';
+import DataOverviewContent from './components/DataOverviewContent.vue';
+import DataBoardCenterDataContent from './components/DataBoardCenterDataContent.vue';
+import DataBoardCenterBg from '@/assets/dataBoard/data-board-center-bg.png';
+import 'echarts';
+import vChart from 'vue-echarts';
+import * as dataBoardServices from '@/services/api/DataBoard';
+import { format } from '@/utils';
+import {
+  createNewEnterChartOptions,
+  createNewDeclareChartOptions,
+  createInsurePersonOptionChartOptions,
+} from './utils';
+import { useQuery } from '@tanstack/vue-query';
+import {
+  useGetDataBoardBountyUseAmountRank,
+  useGetDataBoardInsurePeopleCountRank,
+  useGetDataBoardNewBountyApplyCount,
+  useGetDataBoardNewCustomerCount,
+  useGetDataBoardNewInsurePeopleCount,
+} from './hooks';
+import { take } from 'lodash';
+
+defineOptions({
+  name: 'DataBoardHome',
+});
+
+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');
+};
+
+const { detail: newCustomerCount } = useGetDataBoardNewCustomerCount();
+const { detail: newBountyApplyCount } = useGetDataBoardNewBountyApplyCount();
+const { detail: newInsurePeopleCount } = useGetDataBoardNewInsurePeopleCount();
+
+const { bountyUseAmountRankList } = useGetDataBoardBountyUseAmountRank({
+  take: 6,
+});
+
+const { insurePeopleCountRankList } = useGetDataBoardInsurePeopleCountRank({
+  take: 6,
+});
+
+const newEnterOption = computed(() =>
+  createNewEnterChartOptions({
+    data: [newCustomerCount.value.lastMonthData, newCustomerCount.value.currentMonthData],
+    xAxisData: newCustomerCount.value.x,
+    name: ['涓婃湀', '鏈湀'],
+    color: ['#19DAB0', '#00A6FF'],
+  })
+);
+
+const newDeclareOption = computed(() =>
+  createNewDeclareChartOptions({
+    data: [newBountyApplyCount.value.lastMonthData, newBountyApplyCount.value.currentMonthData],
+    xAxisData: newBountyApplyCount.value.x,
+    name: ['涓婃湀', '鏈湀'],
+    color: ['#00A6FF', '#FECD07'],
+  })
+);
+
+const insurePersonOption = computed(() =>
+  createInsurePersonOptionChartOptions({
+    data: newInsurePeopleCount.value.data,
+    xAxisData: newInsurePeopleCount.value.x,
+    name: format(new Date(), 'YYYY-MM'),
+  })
+);
+
+onMounted(() => {
+  updateTime();
+  timer = setInterval(updateTime, 1000);
+});
+
+// 鍗歌浇鏃舵竻闄ゅ畾鏃跺櫒锛堥伩鍏嶅唴瀛樻硠婕忥級
+onUnmounted(() => {
+  clearInterval(timer);
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/style/common.scss' as *;
+
+.data-board-home-wrapper {
+  overflow: auto;
+  min-width: 0;
+  flex: 1;
+  height: 100%;
+}
+
+.data-board-home {
+  width: 1920px;
+  height: 1080px;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  background-color: #182234;
+  background-image: url('@/assets/dataBoard/data-board-bg.png');
+
+  .data-board-home-title {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+    padding: 0 34px;
+
+    .data-board-home-title-text {
+      display: inline-flex;
+      font-size: 36px;
+      line-height: 47px;
+      font-family: YouSheBiaoTiHei Regular;
+      background: linear-gradient(to bottom, #ffffff, #bef6ff);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+
+    .data-board-home-title-time {
+      position: absolute;
+      right: 34px;
+      display: inline-flex;
+      font-size: 16px;
+      font-family: Fontquan-XinYiGuanHeiTi Regular;
+      background: linear-gradient(to bottom, #ffffff, #6fcdff);
+      -webkit-background-clip: text;
+      line-height: 19px;
+      -webkit-text-fill-color: transparent;
+    }
+  }
+
+  .data-board-home-content {
+    display: flex;
+    justify-content: space-between;
+    padding: 30px 30px 0;
+
+    .data-board-home-content-left {
+      width: 446px;
+
+      .new-enter {
+        .new-enter-content {
+          width: 100%;
+          height: 280px;
+        }
+      }
+
+      .new-declare {
+        .new-declare-content {
+          width: 100%;
+          height: 250px;
+        }
+      }
+    }
+
+    .data-board-home-content-center {
+      margin: 0 20px;
+      min-width: 0;
+      flex: 1;
+
+      .data-board-home-content-center-map {
+        position: relative;
+        margin-bottom: 10px;
+        width: 100%;
+        height: 560px;
+
+        .data-board-home-content-center-map-bg {
+          position: absolute;
+          top: 0;
+          width: 70px;
+          height: 560px;
+
+          &.left {
+            left: 0;
+          }
+
+          &.right {
+            right: 0;
+            transform: rotateY(180deg);
+          }
+        }
+      }
+    }
+
+    .data-board-home-content-right {
+      width: 446px;
+
+      .insure-person {
+        .insure-person-content {
+          width: 100%;
+          height: 250px;
+        }
+      }
+    }
+  }
+
+  .data-board-home-footer {
+    width: 100%;
+    height: 46px;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    background-image: url('@/assets/dataBoard/data-board-footer.png');
+  }
+}
+</style>
diff --git a/src/views/DataBoard/components/DataBoardCenterChart.vue b/src/views/DataBoard/components/DataBoardCenterChart.vue
new file mode 100644
index 0000000..e89d930
--- /dev/null
+++ b/src/views/DataBoard/components/DataBoardCenterChart.vue
@@ -0,0 +1,92 @@
+<template>
+  <div class="data-board-center-chart">
+    <div class="data-board-center-chart-item">
+      <div class="data-board-center-chart-item-title">鏂板鍙戞斁棰�</div>
+      <div class="data-board-center-chart-item-chart">
+        <v-chart :option="newBountyReleaseAmountOption" />
+      </div>
+    </div>
+    <div class="data-board-center-chart-item right">
+      <div class="data-board-center-chart-item-title">鏂板浣跨敤棰�</div>
+      <div class="data-board-center-chart-item-chart">
+        <v-chart :option="newBountyUseAmountCountOption" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import 'echarts';
+import vChart from 'vue-echarts';
+import { createNewBountyReleaseAmountChartOptions } from '../utils';
+import {
+  useGetDataBoardNewBountyReleaseAmountCount,
+  useGetDataBoardNewBountyUseAmountCount,
+} from '../hooks';
+
+defineOptions({
+  name: 'DataBoardCenterChart',
+});
+
+const { detail: newBountyReleaseAmountCount } = useGetDataBoardNewBountyReleaseAmountCount();
+const { detail: newBountyUseAmountCount } = useGetDataBoardNewBountyUseAmountCount();
+
+const newBountyReleaseAmountOption = computed(() =>
+  createNewBountyReleaseAmountChartOptions({
+    data: [
+      newBountyReleaseAmountCount.value.lastMonthData,
+      newBountyReleaseAmountCount.value.currentMonthData,
+    ],
+    xAxisData: newBountyReleaseAmountCount.value.x,
+    name: ['涓婃湀', '鏈湀'],
+    color: ['#00A6FF', '#FECD07'],
+  })
+);
+
+const newBountyUseAmountCountOption = computed(() =>
+  createNewBountyReleaseAmountChartOptions({
+    data: [
+      newBountyUseAmountCount.value.lastMonthData,
+      newBountyUseAmountCount.value.currentMonthData,
+    ],
+    xAxisData: newBountyUseAmountCount.value.x,
+    name: ['涓婃湀', '鏈湀'],
+    color: ['#00A6FF', '#FECD07'],
+  })
+);
+</script>
+
+<style lang="scss" scoped>
+@use '@/style/common.scss' as *;
+
+.data-board-center-chart {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  padding: 35px 20px;
+  height: 292px;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  background-image: url('@/assets/dataBoard/data-board-center-chart-bg.png');
+
+  .data-board-center-chart-item {
+    &.right {
+      margin-left: 20px;
+    }
+
+    .data-board-center-chart-item-title {
+      margin-bottom: 20px;
+      font-size: 22px;
+      font-family: YouSheBiaoTiHei Regular;
+      text-align: center;
+      background: linear-gradient(to bottom, #ffffff, #98ecff);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+
+    .data-board-center-chart-item-chart {
+      width: 100%;
+      height: 200px;
+    }
+  }
+}
+</style>
diff --git a/src/views/DataBoard/components/DataBoardCenterDataContent.vue b/src/views/DataBoard/components/DataBoardCenterDataContent.vue
new file mode 100644
index 0000000..6357cdf
--- /dev/null
+++ b/src/views/DataBoard/components/DataBoardCenterDataContent.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="data-board-home-content-center-top">
+    <DataBoardCenterDataItem
+      :value="detail?.currentMonthSumBountyReleaseAmount"
+      label="褰撴湀鍙戞斁棰�"
+      :image="DataBoardCenterIcon1"
+    ></DataBoardCenterDataItem>
+    <DataBoardCenterDataItem
+      :value="detail?.currentMonthSumBountyUseAmount"
+      label="褰撴湀浣跨敤棰�"
+      :image="DataBoardCenterIcon2"
+    ></DataBoardCenterDataItem>
+    <DataBoardCenterDataItem
+      :value="detail?.currentMonthInsurePeopleCount"
+      label="褰撴湀鎶曚繚浜烘暟"
+      :precision="0"
+      :image="DataBoardCenterIcon3"
+    ></DataBoardCenterDataItem>
+  </div>
+</template>
+
+<script setup lang="ts">
+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 DataBoardCenterDataItem from './DataBoardCenterDataItem.vue';
+import { useGetDataBoardOverview } from '../hooks';
+
+defineOptions({
+  name: 'DataBoardCenterDataContent',
+});
+
+const { detail } = useGetDataBoardOverview();
+</script>
+
+<style lang="scss" scoped>
+@use '@/style/common.scss' as *;
+
+.data-board-home-content-center-top {
+  display: grid;
+  margin-bottom: 6px;
+  padding: 0 20px;
+  grid-template-columns: repeat(3, 1fr);
+  grid-column-gap: 16px;
+}
+</style>
diff --git a/src/views/DataBoard/components/DataBoardCenterDataItem.vue b/src/views/DataBoard/components/DataBoardCenterDataItem.vue
new file mode 100644
index 0000000..9006fb9
--- /dev/null
+++ b/src/views/DataBoard/components/DataBoardCenterDataItem.vue
@@ -0,0 +1,80 @@
+<template>
+  <div class="data-board-center-data-item">
+    <div class="data-board-data-info-item-icon">
+      <img :src="image" alt="" />
+    </div>
+    <div class="data-board-data-info-item-content">
+      <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>
+
+<script setup lang="ts">
+import { useTransition } from '@vueuse/core';
+
+defineOptions({
+  name: 'DataBoardCenterDataItem',
+});
+
+type Props = {
+  image: string;
+  label: string;
+  value: number;
+  precision?: number;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  value: 0,
+  precision: 2,
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/style/common.scss' as *;
+
+.data-board-center-data-item {
+  display: flex;
+  padding: 8px 12px;
+  background: rgba(0, 5, 18, 0.27);
+
+  .data-board-data-info-item-icon {
+    width: 64px;
+    height: 64px;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .data-board-data-info-item-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    margin-left: 10px;
+
+    .data-board-data-info-item-value {
+      margin-bottom: 5px;
+      font-size: 22px;
+      font-family: DrukWide-Bold;
+      line-height: 30px;
+
+      :deep() {
+        .el-statistic__content {
+          color: #ffffff;
+        }
+      }
+    }
+
+    .data-board-data-info-item-label {
+      font-size: 16px;
+      line-height: 22px;
+      color: #ffffff;
+    }
+  }
+}
+</style>
diff --git a/src/views/DataBoard/components/DataBoardCenterMap.vue b/src/views/DataBoard/components/DataBoardCenterMap.vue
new file mode 100644
index 0000000..5a784c8
--- /dev/null
+++ b/src/views/DataBoard/components/DataBoardCenterMap.vue
@@ -0,0 +1,179 @@
+<template>
+  <div class="data-board-home-content-center-map">
+    <div class="data-board-home-content-center-map-data">
+      <DataBoardDataInfoItem
+        :backgroundImage="DataBoardDataInfoBg5"
+        label="浼佷笟鏁伴噺"
+        :value="form.totalCustomerCount"
+      ></DataBoardDataInfoItem>
+      <DataBoardDataInfoItem
+        :backgroundImage="DataBoardDataInfoBg6"
+        label="鍙戞斁棰�"
+        :value="form.sumBountyReleaseAmount"
+      ></DataBoardDataInfoItem>
+      <DataBoardDataInfoItem
+        :backgroundImage="DataBoardDataInfoBg7"
+        label="浣跨敤棰�"
+        :value="form.sumBountyUseAmount"
+      ></DataBoardDataInfoItem>
+      <DataBoardDataInfoItem
+        :backgroundImage="DataBoardDataInfoBg8"
+        label="鎶曚繚浜烘暟"
+        :value="form.insurePeopleCount"
+      ></DataBoardDataInfoItem>
+    </div>
+    <div class="data-board-home-content-center-map-img">
+      <img class="data-board-home-content-center-map-img-bg" :src="DataBoardCenterMap" alt="" />
+      <DataBoardCenterMapMark
+        v-for="(item, index) in form.mapList"
+        :key="index"
+        v-model:choose="item.choose"
+        :parkName="item.parkName"
+        :class="item.class"
+        @click="handleClick(item.id)"
+      ></DataBoardCenterMapMark>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import DataBoardCenterMap from '@/assets/dataBoard/data-board-center-map.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';
+
+defineOptions({
+  name: 'DataBoardCenterMap',
+});
+
+const queryClient = useQueryClient();
+
+const { dataBoardIndustrialParkList } = useIndustrialParkDropDownList();
+
+const form = reactive({
+  industrialParkId: '',
+  mapList: [],
+
+  totalCustomerCount: 0,
+  sumBountyReleaseAmount: 0,
+  sumBountyUseAmount: 0,
+  insurePeopleCount: 0,
+});
+
+// const { value } = useIntervalValue(12222);
+
+function handleClick(id: string) {
+  form.mapList.forEach((item, index) => {
+    item.choose = item.id === id;
+  });
+  form.industrialParkId = 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,
+  onSuccess(data) {
+    form.totalCustomerCount = data.totalCustomerCount;
+    form.sumBountyReleaseAmount = data.sumBountyReleaseAmount;
+    form.sumBountyUseAmount = data.sumBountyUseAmount;
+    form.insurePeopleCount = data.insurePeopleCount;
+  },
+});
+
+onMounted(async () => {
+  await queryClient.invalidateQueries(['industrialParkServices/getIndustrialParkDropDownList']);
+  if (dataBoardIndustrialParkList.value.length > 0) {
+    form.industrialParkId = dataBoardIndustrialParkList.value[0].id;
+    form.mapList = dataBoardIndustrialParkList.value;
+    refetch();
+  }
+});
+</script>
+<style lang="scss" scoped>
+@use '@/style/common.scss' as *;
+
+.data-board-home-content-center-map {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+
+  .data-board-home-content-center-map-data {
+    position: absolute;
+    top: 30px;
+    left: 25px;
+    width: 223px;
+
+    .data-board-data-info-item {
+      margin-bottom: 16px;
+      padding: 9px 0;
+
+      :deep() {
+        .data-board-data-info-item-label {
+          margin-left: 65px;
+        }
+
+        .data-board-data-info-item-value {
+          margin-left: 65px;
+        }
+      }
+    }
+  }
+
+  .data-board-home-content-center-map-img {
+    position: relative;
+    height: 100%;
+    text-align: center;
+
+    .data-board-home-content-center-map-img-bg {
+      height: 100%;
+    }
+
+    .data-board-center-map-mark {
+      position: absolute;
+      cursor: pointer;
+
+      &.init1 {
+        top: 115px;
+        left: 230px;
+      }
+
+      &.init2 {
+        top: 260px;
+        left: 75px;
+      }
+
+      &.init3 {
+        top: 340px;
+        right: 90px;
+      }
+
+      &.init4 {
+        top: 305px;
+        right: 10px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/DataBoard/components/DataBoardCenterMapMark.vue b/src/views/DataBoard/components/DataBoardCenterMapMark.vue
new file mode 100644
index 0000000..1a1ed8f
--- /dev/null
+++ b/src/views/DataBoard/components/DataBoardCenterMapMark.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="data-board-center-map-mark">
+    <div class="data-board-center-map-mark-item init" v-if="!innerChoose">
+      <img :src="DataBoardMapInit" alt="" />
+    </div>
+    <div class="data-board-center-map-mark-item choose" v-else>
+      <div class="data-board-center-map-mark-item-park">{{ parkName }}</div>
+      <img :src="DataBoardMapChoose" alt="" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import DataBoardMapInit from '@/assets/dataBoard/data-board-map-init.png';
+import DataBoardMapChoose from '@/assets/dataBoard/data-board-map-choose.png';
+
+defineOptions({
+  name: 'DataBoardCenterMapMark',
+});
+
+type Props = {
+  choose: boolean;
+  parkName: string;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  choose: false,
+});
+
+const emit = defineEmits<{
+  (e: 'update:choose', value: Props['choose']): void;
+}>();
+
+const innerChoose = computed({
+  get() {
+    return props.choose;
+  },
+  set(val) {
+    emit('update:choose', val);
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/style/common.scss' as *;
+
+.data-board-center-map-mark {
+  .data-board-center-map-mark-item {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 154px;
+    height: 104px;
+
+    &.init {
+      img {
+        width: 88px;
+        height: 72px;
+      }
+    }
+
+    &.choose {
+      position: relative;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+
+      .data-board-center-map-mark-item-park {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        font-size: 24px;
+        line-height: 50px;
+        font-family: YouSheBiaoTiHei Regular;
+        text-align: center;
+        color: #ffffff;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/DataBoard/components/DataBoardContentItem.vue b/src/views/DataBoard/components/DataBoardContentItem.vue
new file mode 100644
index 0000000..42d5937
--- /dev/null
+++ b/src/views/DataBoard/components/DataBoardContentItem.vue
@@ -0,0 +1,56 @@
+<template>
+  <div
+    class="data-board-content-item"
+    :style="{
+      marginBottom: hasBottom ? '18px' : '0',
+    }"
+  >
+    <div class="data-board-content-item-title">
+      <div class="data-board-content-item-title-text">{{ title }}</div>
+    </div>
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+  name: 'DataBoardContentItem',
+});
+
+type Props = {
+  title: string;
+  hasBottom?: boolean;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  hasBottom: true,
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/style/common.scss' as *;
+
+.data-board-content-item {
+  display: flex;
+  flex-direction: column;
+  background: rgba(0, 5, 18, 0.27);
+
+  .data-board-content-item-title {
+    display: flex;
+    height: 42px;
+    font-family: YouSheBiaoTiHei Regular;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    background-image: url('@/assets/dataBoard/data-board-title-bg.png');
+
+    .data-board-content-item-title-text {
+      padding-left: 36px;
+      font-size: 24px;
+      line-height: 32px;
+      background: linear-gradient(to bottom, #ffffff, #b5efff);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  }
+}
+</style>
diff --git a/src/views/DataBoard/components/DataBoardDataInfoItem.vue b/src/views/DataBoard/components/DataBoardDataInfoItem.vue
new file mode 100644
index 0000000..5826b80
--- /dev/null
+++ b/src/views/DataBoard/components/DataBoardDataInfoItem.vue
@@ -0,0 +1,64 @@
+<template>
+  <div
+    class="data-board-data-info-item"
+    :style="{
+      backgroundImage: `url(${backgroundImage})`,
+    }"
+  >
+    <div class="data-board-data-info-item-label">{{ label }}</div>
+    <div class="data-board-data-info-item-value">
+      <el-statistic :value="value" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useTransition } from '@vueuse/core';
+
+defineOptions({
+  name: 'DataBoardDataInfoItem',
+});
+
+type Props = {
+  backgroundImage: string;
+  label: string;
+};
+
+const props = withDefaults(defineProps<Props>(), {});
+
+const value = defineModel<number>('value');
+
+// const _value = useTransition(value, {
+//   duration: 500,
+// });
+</script>
+
+<style lang="scss" scoped>
+@use '@/style/common.scss' as *;
+
+.data-board-data-info-item {
+  display: flex;
+  justify-content: center;
+  text-align: left;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  flex-direction: column;
+
+  .data-board-data-info-item-label {
+    margin-bottom: 4px;
+    margin-left: 86px;
+    font-size: 13px;
+    color: #ffffff;
+  }
+
+  .data-board-data-info-item-value {
+    margin-left: 86px;
+    font-size: 16px;
+    font-family: YouSheBiaoTiHei Regular;
+    background: linear-gradient(to bottom, #ffffff, #6fcdff);
+    -webkit-background-clip: text;
+    line-height: 19px;
+    -webkit-text-fill-color: transparent;
+  }
+}
+</style>
diff --git a/src/views/DataBoard/components/DataBoardTableView.vue b/src/views/DataBoard/components/DataBoardTableView.vue
new file mode 100644
index 0000000..e0479fd
--- /dev/null
+++ b/src/views/DataBoard/components/DataBoardTableView.vue
@@ -0,0 +1,117 @@
+<template>
+  <div class="data-board-table">
+    <div class="data-board-table-item title">
+      <div class="data-board-table-item-icon">鎺掑悕</div>
+      <div class="data-board-table-item-content">浼佷笟鍚�</div>
+      <div class="data-board-table-item-num">{{ customerName }}</div>
+    </div>
+    <div
+      v-for="(item, index) in props.tableData"
+      :key="index"
+      class="data-board-table-item"
+      :class="{ isOdd: index % 2 === 0 }"
+    >
+      <div class="data-board-table-item-icon">
+        <img
+          class="data-board-table-item-icon-img"
+          v-if="index < 3"
+          :src="iconList[index]"
+          alt=""
+        />
+        <span class="data-board-table-item-icon-index" v-else>{{ index + 1 }}</span>
+      </div>
+      <div class="data-board-table-item-content ellipsis">{{ item.name }}</div>
+      <div class="data-board-table-item-num">
+        {{ `${isMoney ? toThousand(item.value) : item.value}${unit}` }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import DataBoardTableIcon1 from '@/assets/dataBoard/data-board-table-icon1.png';
+import DataBoardTableIcon2 from '@/assets/dataBoard/data-board-table-icon2.png';
+import DataBoardTableIcon3 from '@/assets/dataBoard/data-board-table-icon3.png';
+import { toThousand } from '@/utils';
+
+defineOptions({
+  name: 'DataBoardTableView',
+});
+
+type Props = {
+  tableData: any[];
+  unit: string;
+  isMoney?: boolean;
+  customerName: string;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  isMoney: false,
+});
+
+const iconList = [DataBoardTableIcon1, DataBoardTableIcon2, DataBoardTableIcon3];
+</script>
+
+<style lang="scss" scoped>
+@use '@/style/common.scss' as *;
+
+.data-board-table {
+  display: flex;
+  padding: 0 14px 11px;
+  flex-direction: column;
+
+  .data-board-table-item {
+    display: grid;
+    align-items: center;
+    height: 37px;
+    font-size: 14px;
+    color: #ffffff;
+    background-position: bottom center;
+    background-repeat: no-repeat;
+    background-size: 100% 2px;
+    grid-template-columns: 60px 3fr 2fr;
+    background-image: linear-gradient(
+      to right,
+      rgba(150, 150, 150, 0),
+      rgb(121, 121, 121),
+      rgba(150, 150, 150, 0)
+    );
+
+    &.title {
+      font-size: 14px;
+      color: #9d9d9d;
+    }
+
+    &.isOdd {
+      background-color: #141c2f;
+    }
+
+    .data-board-table-item-icon {
+      display: flex;
+      justify-content: center;
+
+      .data-board-table-item-icon-img {
+        width: 24px;
+        height: 28px;
+      }
+
+      .data-board-table-item-icon-index {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 34px;
+        height: 16px;
+        font-size: 14px;
+        font-family: YouSheBiaoTiHei Regular;
+        color: #ffffff;
+        background-color: #3e4b68;
+        transform: skewX(-30deg);
+      }
+    }
+
+    .data-board-table-item-num {
+      text-align: right;
+    }
+  }
+}
+</style>
diff --git a/src/views/DataBoard/components/DataOverviewContent.vue b/src/views/DataBoard/components/DataOverviewContent.vue
new file mode 100644
index 0000000..6604d75
--- /dev/null
+++ b/src/views/DataBoard/components/DataOverviewContent.vue
@@ -0,0 +1,57 @@
+<template>
+  <div class="data-overview-content">
+    <DataBoardDataInfoItem
+      :backgroundImage="DataBoardDataInfoBg1"
+      label="鎬诲叆椹讳紒涓�"
+      :value="detail?.totalCustomerCount"
+    ></DataBoardDataInfoItem>
+    <DataBoardDataInfoItem
+      :backgroundImage="DataBoardDataInfoBg2"
+      label="鎬荤敵鎶ユ暟閲�"
+      :value="detail?.totalBountyApplyCount"
+    ></DataBoardDataInfoItem>
+    <DataBoardDataInfoItem
+      :backgroundImage="DataBoardDataInfoBg3"
+      label="濂栧姳閲戝彂鏀炬�婚"
+      :value="detail?.sumBountyReleaseAmount"
+    ></DataBoardDataInfoItem>
+    <DataBoardDataInfoItem
+      :backgroundImage="DataBoardDataInfoBg4"
+      label="濂栧姳閲戜娇鐢ㄦ�婚"
+      :value="detail?.sumBountyUseAmount"
+    ></DataBoardDataInfoItem>
+  </div>
+</template>
+
+<script setup lang="ts">
+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 DataBoardDataInfoItem from './DataBoardDataInfoItem.vue';
+import { useGetDataBoardOverview } from '../hooks';
+
+defineOptions({
+  name: 'DataOverviewContent',
+});
+
+const { detail } = useGetDataBoardOverview();
+</script>
+
+<style lang="scss" scoped>
+@use '@/style/common.scss' as *;
+
+.data-overview-content {
+  display: grid;
+  justify-content: center;
+  align-items: center;
+  padding: 50px 18px;
+  grid-template-columns: repeat(2, 1fr);
+  grid-column-gap: 18px;
+  grid-row-gap: 30px;
+
+  .data-board-data-info-item {
+    padding: 14px 0;
+  }
+}
+</style>
diff --git a/src/views/DataBoard/hooks/index.ts b/src/views/DataBoard/hooks/index.ts
new file mode 100644
index 0000000..4d5a3f2
--- /dev/null
+++ b/src/views/DataBoard/hooks/index.ts
@@ -0,0 +1,197 @@
+import { useQuery } from '@tanstack/vue-query';
+import { useIntervalFn } from '@vueuse/core';
+import * as dataBoardServices from '@/services/api/DataBoard';
+
+export function useIntervalValue<T>(initValue: T) {
+  const value = ref(initValue);
+  const preValue = ref(initValue);
+
+  useIntervalFn(() => {
+    value.value = 0;
+    setTimeout(() => {
+      value.value = preValue.value;
+    }, 500);
+  }, 5000);
+
+  function changeValue(_value: T) {
+    value.value = _value;
+    preValue.value = _value;
+  }
+
+  return { value, changeValue };
+}
+
+export function useGetDataBoardOverview() {
+  const { data: detail, isLoading } = useQuery({
+    queryKey: ['dataBoardServices/getDataBoardOverview'],
+    queryFn: async () => {
+      return await dataBoardServices.getDataBoardOverview(
+        {},
+        {
+          showLoading: false,
+        }
+      );
+    },
+    placeholderData: () => ({} as API.GetDataBoardOverviewOutput),
+  });
+
+  return {
+    detail,
+  };
+}
+
+export function useGetDataBoardNewCustomerCount() {
+  const { data: detail, isLoading } = useQuery({
+    queryKey: ['dataBoardServices/getDataBoardNewCustomerCount'],
+    queryFn: async () => {
+      return await dataBoardServices.getDataBoardNewCustomerCount(
+        {},
+        {
+          showLoading: false,
+        }
+      );
+    },
+    placeholderData: () => ({} as API.GetDataBoardNewCustomerCountOutput),
+  });
+
+  return {
+    detail,
+  };
+}
+
+export function useGetDataBoardNewBountyApplyCount() {
+  const { data: detail, isLoading } = useQuery({
+    queryKey: ['dataBoardServices/getDataBoardNewBountyApplyCount'],
+    queryFn: async () => {
+      return await dataBoardServices.getDataBoardNewBountyApplyCount(
+        {},
+        {
+          showLoading: false,
+        }
+      );
+    },
+    placeholderData: () => ({} as API.GetDataBoardNewBountyApplyCountOutput),
+  });
+
+  return {
+    detail,
+  };
+}
+export function useGetDataBoardNewBountyReleaseAmountCount() {
+  const { data: detail, isLoading } = useQuery({
+    queryKey: ['dataBoardServices/getDataBoardNewBountyReleaseAmountCount'],
+    queryFn: async () => {
+      return await dataBoardServices.getDataBoardNewBountyReleaseAmountCount(
+        {},
+        {
+          showLoading: false,
+        }
+      );
+    },
+    placeholderData: () => ({} as API.GetDataBoardNewBountyReleaseAmountCountOutput),
+  });
+
+  return {
+    detail,
+  };
+}
+
+export function useGetDataBoardNewBountyUseAmountCount() {
+  const { data: detail, isLoading } = useQuery({
+    queryKey: ['dataBoardServices/getDataBoardNewBountyUseAmountCount'],
+    queryFn: async () => {
+      return await dataBoardServices.getDataBoardNewBountyUseAmountCount(
+        {},
+        {
+          showLoading: false,
+        }
+      );
+    },
+    placeholderData: () => ({} as API.GetDataBoardNewBountyUseAmountCountOutput),
+  });
+
+  return {
+    detail,
+  };
+}
+
+export function useGetDataBoardNewInsurePeopleCount() {
+  const { data: detail, isLoading } = useQuery({
+    queryKey: ['dataBoardServices/getDataBoardNewInsurePeopleCount'],
+    queryFn: async () => {
+      return await dataBoardServices.getDataBoardNewInsurePeopleCount(
+        {},
+        {
+          showLoading: false,
+        }
+      );
+    },
+    placeholderData: () => ({} as API.GetDataBoardNewInsurePeopleCountOutput),
+  });
+
+  return {
+    detail,
+  };
+}
+
+type UseGetDataBoardBountyUseAmountRankOptions = {
+  take: number;
+};
+
+export function useGetDataBoardBountyUseAmountRank(
+  options: UseGetDataBoardBountyUseAmountRankOptions
+) {
+  const { take } = options;
+  const { data: detail, isLoading } = useQuery({
+    queryKey: ['dataBoardServices/getDataBoardBountyUseAmountRank', take],
+    queryFn: async () => {
+      return await dataBoardServices.getDataBoardBountyUseAmountRank(
+        { take: take },
+        {
+          showLoading: false,
+        }
+      );
+    },
+    placeholderData: () => ({} as API.GetDataBoardBountyUseAmountRankOutput),
+  });
+
+  const bountyUseAmountRankList = computed(() =>
+    detail.value.items?.map((x) => ({
+      name: x.enterpriseName,
+      value: x.amount,
+    }))
+  );
+
+  return {
+    bountyUseAmountRankList,
+  };
+}
+
+export function useGetDataBoardInsurePeopleCountRank(
+  options: UseGetDataBoardBountyUseAmountRankOptions
+) {
+  const { take } = options;
+  const { data: detail, isLoading } = useQuery({
+    queryKey: ['dataBoardServices/getDataBoardInsurePeopleCountRank', take],
+    queryFn: async () => {
+      return await dataBoardServices.getDataBoardInsurePeopleCountRank(
+        { take: take },
+        {
+          showLoading: false,
+        }
+      );
+    },
+    placeholderData: () => ({} as API.GetDataBoardInsurePeopleCountRankOutput),
+  });
+
+  const insurePeopleCountRankList = computed(() =>
+    detail.value.items?.map((x) => ({
+      name: x.enterpriseName,
+      value: x.count,
+    }))
+  );
+
+  return {
+    insurePeopleCountRankList,
+  };
+}
diff --git a/src/views/DataBoard/utils/index.ts b/src/views/DataBoard/utils/index.ts
new file mode 100644
index 0000000..07b28c9
--- /dev/null
+++ b/src/views/DataBoard/utils/index.ts
@@ -0,0 +1,280 @@
+import _ from 'lodash';
+import { CustomSeriesOption, EChartsOption } from 'echarts';
+import * as echarts from 'echarts';
+
+export function getScreenImageUrlsByGlob() {
+  const modules = import.meta.glob('@/assets/parkScreen/*.png', { eager: true });
+
+  const imgUrls: string[] = [];
+
+  for (const path in modules) {
+    const mod = modules[path] as { default: any };
+    imgUrls.push(mod.default);
+  }
+
+  return imgUrls;
+}
+
+type CreateNewEnterChartOptionsOptions = {
+  data: number[][];
+  xAxisData: (number | string)[];
+  name: string[];
+  yAxisName?: string;
+  color: string[];
+};
+
+const CommonBarChartOptions: EChartsOption = {
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'shadow',
+    },
+  },
+  legend: {
+    right: '5%',
+    textStyle: {
+      fontSize: 14,
+      color: '#D4F1FF',
+    },
+    itemHeight: 5,
+    itemWidth: 12,
+  },
+  xAxis: {
+    type: 'category',
+    nameTextStyle: {
+      color: '#D4F1FF',
+      fontSize: 12,
+    },
+    axisTick: {
+      show: false,
+    },
+    axisLabel: {
+      fontSize: 12,
+      color: '#D4F1FF',
+    },
+  },
+  yAxis: {
+    nameTextStyle: {
+      color: '#D4F1FF',
+      fontSize: 12,
+    },
+    axisLabel: {
+      fontSize: 12,
+      color: '#D4F1FF',
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: '#384658',
+      },
+    },
+  },
+  series: [],
+};
+
+export function createNewEnterChartOptions({
+  data,
+  xAxisData,
+  name,
+  yAxisName = '鍗曚綅/涓�',
+  color,
+}: CreateNewEnterChartOptionsOptions) {
+  return _.merge({}, CommonBarChartOptions, {
+    xAxis: {
+      data: xAxisData,
+    },
+    yAxis: {
+      name: yAxisName,
+    },
+    series: data.map((x, index) => ({
+      name: name[index],
+      type: 'bar',
+      data: x?.map((y) => ({
+        value: y,
+      })),
+      itemStyle: {
+        color: color[index],
+      },
+      barWidth: '15%',
+    })),
+  } as EChartsOption);
+}
+
+export function createNewDeclareChartOptions({
+  data,
+  xAxisData,
+  name,
+  yAxisName = '鍗曚綅/涓�',
+  color,
+}: CreateNewEnterChartOptionsOptions) {
+  return _.merge({}, CommonBarChartOptions, {
+    xAxis: {
+      data: xAxisData,
+    },
+    yAxis: {
+      name: yAxisName,
+    },
+    series: data.map((x, index) => ({
+      name: name[index],
+      type: 'bar',
+      data: x?.map((y) => ({
+        value: y,
+      })),
+      label: {
+        show: true,
+        position: 'top',
+        distance: 0,
+        formatter: '...',
+        fontSize: 16,
+        color: color[index],
+      },
+      itemStyle: {
+        color: color[index],
+        opacity: 0.6,
+      },
+      barWidth: 14,
+    })),
+  } as EChartsOption);
+}
+
+type CreatInsurePersonChartOptionsOptions = {
+  data: number[];
+  xAxisData: (number | string)[];
+  name: string;
+  yAxisName?: string;
+};
+
+export function createInsurePersonOptionChartOptions({
+  data,
+  xAxisData,
+  name,
+  yAxisName = '鍗曚綅/涓�',
+}: CreatInsurePersonChartOptionsOptions) {
+  return {
+    legend: {
+      right: '5%',
+      textStyle: {
+        fontSize: 14,
+        color: '#D4F1FF',
+      },
+      itemHeight: 0,
+      itemWidth: 0,
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+        label: {
+          backgroundColor: '#6a7985',
+        },
+      },
+    },
+    xAxis: {
+      nameTextStyle: {
+        color: '#D4F1FF',
+        fontSize: 12,
+      },
+      axisTick: {
+        show: false,
+      },
+      axisLabel: {
+        fontSize: 12,
+        color: '#D4F1FF',
+      },
+      data: xAxisData,
+    },
+    yAxis: {
+      axisLabel: {
+        fontSize: 12,
+        color: '#D4F1FF',
+      },
+      nameTextStyle: {
+        color: '#D4F1FF',
+        fontSize: 12,
+      },
+      name: yAxisName,
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: '#384658',
+        },
+      },
+    },
+    series: {
+      name: name,
+      type: 'line',
+      data: data,
+      areaStyle: {
+        color: new echarts.graphic.LinearGradient(
+          0,
+          0,
+          0,
+          1, // 娓愬彉鏂瑰悜锛�0,0锛堝彸涓婏級鈫� 0,1锛堝彸涓嬶級锛堝瀭鐩村悜涓嬶級
+          [
+            { offset: 0, color: `rgba(0, 166, 255, 0.2)` }, // 鎶樼嚎澶勯鑹诧紙涓嶉�忔槑锛�
+            { offset: 1, color: 'rgba(64, 158, 255, 0)' }, // X杞村棰滆壊锛堝畬鍏ㄩ�忔槑锛�
+          ]
+        ),
+      },
+    },
+  };
+}
+
+export function createNewBountyReleaseAmountChartOptions({
+  data,
+  xAxisData,
+  name,
+  yAxisName = '鍗曚綅/涓�',
+  color,
+}: CreateNewEnterChartOptionsOptions) {
+  return _.merge({}, CommonBarChartOptions, {
+    xAxis: {
+      data: xAxisData,
+      boundaryGap: false,
+    },
+    yAxis: {
+      name: yAxisName,
+    },
+    legend: {
+      itemWidth: 12,
+      itemHeight: 5,
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+        label: {
+          backgroundColor: '#6a7985',
+        },
+      },
+    },
+    series: data.map((x, index) => ({
+      name: name[index],
+      type: 'line',
+      data: x?.map((y) => ({
+        value: y,
+      })),
+      smooth: true,
+      lineStyle: {
+        width: 1,
+        color: color[index], // 鎶樼嚎棰滆壊
+      },
+      itemStyle: {
+        opacity: 0,
+      },
+      showSymbol: false,
+      areaStyle: {
+        color: new echarts.graphic.LinearGradient(
+          0,
+          0,
+          0,
+          1, // 娓愬彉鏂瑰悜锛�0,0锛堝彸涓婏級鈫� 0,1锛堝彸涓嬶級锛堝瀭鐩村悜涓嬶級
+          [
+            { offset: 0, color: `${color[index]}` }, // 鎶樼嚎澶勯鑹诧紙涓嶉�忔槑锛�
+            { offset: 0.5, color: 'rgba(64, 158, 255, 0)' }, // X杞村棰滆壊锛堝畬鍏ㄩ�忔槑锛�
+          ]
+        ),
+      },
+    })),
+  } as EChartsOption);
+}

--
Gitblit v1.9.1