From 92921431668181fb6d3387368c751ccc40aba8cf Mon Sep 17 00:00:00 2001
From: zhengyiming <540361168@qq.com>
Date: 星期五, 28 十一月 2025 17:14:32 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/dev-dataBoard'
---
src/views/DataBoard/components/DataBoardContentItem.vue | 56 +
src/views/DataBoard/components/DataBoardCenterMapMark.vue | 102 +++
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/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 | 86 ++
src/assets/dataBoard/data-board-data-info-bg5.png | 0
src/views/DataBoard/components/DataOverviewContent.vue | 98 ++
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 | 204 ++++++
src/views/DataBoard/components/DataBoardTableView.vue | 118 +++
src/assets/dataBoard/data-board-center-icon1.png | 0
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 | 278 ++++++++
src/assets/dataBoard/data-board-table-icon2.png | 0
src/views/DataBoard/utils/index.ts | 288 ++++++++
src/assets/dataBoard/data-board-table-icon3.png | 0
src/services/api/typings.d.ts | 144 ++++
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
.env.development | 2
src/services/api/index.ts | 2
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/assets/dataBoard/data-board-map-choose-old.png | 0
src/views/DataBoard/components/DataBoardCenterDataItem.vue | 84 ++
46 files changed, 2,019 insertions(+), 1 deletions(-)
diff --git a/.env.development b/.env.development
index d8fb9b1..8809dfb 100644
--- a/.env.development
+++ b/.env.development
@@ -12,7 +12,7 @@
# 寮�鍙戠幆澧冨悗绔湴鍧�
VITE_PROXY_DOMAIN_REAL = "http://localhost:57191"
-# VITE_PROXY_DOMAIN_REAL = "http://192.168.0.27:57191"
+# VITE_PROXY_DOMAIN_REAL = "http://118.178.252.28:8742/"
# VITE_PROXY_DOMAIN_REAL = "https://testrlywx.boleyuma.com"
VITE_COMPRESSION = "none"
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-old.png b/src/assets/dataBoard/data-board-map-choose-old.png
new file mode 100644
index 0000000..e4d4e2b
--- /dev/null
+++ b/src/assets/dataBoard/data-board-map-choose-old.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..573361f
--- /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/index.ts b/src/services/api/index.ts
index f1c9fa4..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';
@@ -116,6 +117,7 @@
Consult,
CooperationApply,
Customer,
+ DataBoard,
ElectronSign,
EnterpriseApplyFile,
EnterpriseMaterial,
diff --git a/src/services/api/typings.d.ts b/src/services/api/typings.d.ts
index 202b621..e6dfa4b 100644
--- a/src/services/api/typings.d.ts
+++ b/src/services/api/typings.d.ts
@@ -1424,6 +1424,44 @@
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 {
id?: string;
}
@@ -7800,12 +7838,118 @@
/** 濂栧姳閲戞ā鏉縄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 {
id?: string;
payDateTime?: string;
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..ecabecf
--- /dev/null
+++ b/src/views/DataBoard/DataBoardHome.vue
@@ -0,0 +1,278 @@
+<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';
+
+defineOptions({
+ name: 'DataBoardHome',
+});
+
+const dataBoardTime = ref(null);
+let timer = null;
+
+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..d7ff949
--- /dev/null
+++ b/src/views/DataBoard/components/DataBoardCenterDataContent.vue
@@ -0,0 +1,86 @@
+<template>
+ <div class="data-board-home-content-center-top">
+ <DataBoardCenterDataItem
+ v-model:value="currentMonthSumBountyReleaseAmountValue"
+ label="褰撴湀鍙戞斁棰�"
+ :image="DataBoardCenterIcon1"
+ ></DataBoardCenterDataItem>
+ <DataBoardCenterDataItem
+ v-model:value="currentMonthSumBountyUseAmountValue"
+ label="褰撴湀浣跨敤棰�"
+ :image="DataBoardCenterIcon2"
+ ></DataBoardCenterDataItem>
+ <DataBoardCenterDataItem
+ v-model:value="currentMonthInsurePeopleCountValue"
+ 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 * as dataBoardServices from '@/services/api/DataBoard';
+import { useQuery } from '@tanstack/vue-query';
+import { useIntervalValue } from '../hooks';
+
+defineOptions({
+ name: 'DataBoardCenterDataContent',
+});
+
+const form = reactive({
+ currentMonthSumBountyReleaseAmount: 0,
+ currentMonthSumBountyUseAmount: 0,
+ currentMonthInsurePeopleCount: 0,
+});
+
+const { data: detail, isLoading } = useQuery({
+ queryKey: ['dataBoardServices/getDataBoardOverview'],
+ queryFn: async () => {
+ return await dataBoardServices.getDataBoardOverview(
+ {},
+ {
+ showLoading: false,
+ }
+ );
+ },
+ placeholderData: () => ({} as API.GetDataBoardOverviewOutput),
+ onSuccess(data) {
+ form.currentMonthSumBountyReleaseAmount = data.currentMonthSumBountyReleaseAmount;
+ changeCurrentMonthSumBountyReleaseAmount(data.currentMonthSumBountyReleaseAmount);
+ form.currentMonthSumBountyUseAmount = data.currentMonthSumBountyUseAmount;
+ changeCurrentMonthSumBountyUseAmount(data.currentMonthSumBountyUseAmount);
+ form.currentMonthInsurePeopleCount = data.currentMonthInsurePeopleCount;
+ changeCurrentMonthInsurePeopleCount(data.currentMonthInsurePeopleCount);
+ },
+});
+
+const {
+ value: currentMonthSumBountyReleaseAmountValue,
+ changeValue: changeCurrentMonthSumBountyReleaseAmount,
+} = useIntervalValue(form.currentMonthSumBountyReleaseAmount);
+const {
+ value: currentMonthSumBountyUseAmountValue,
+ changeValue: changeCurrentMonthSumBountyUseAmount,
+} = useIntervalValue(form.currentMonthSumBountyUseAmount);
+const {
+ value: currentMonthInsurePeopleCountValue,
+ changeValue: changeCurrentMonthInsurePeopleCount,
+} = useIntervalValue(form.currentMonthInsurePeopleCount);
+</script>
+
+<style lang="scss" scoped>
+@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..2634059
--- /dev/null
+++ b/src/views/DataBoard/components/DataBoardCenterDataItem.vue
@@ -0,0 +1,84 @@
+<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;
+ precision?: number;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+ precision: 2,
+});
+
+const value = defineModel<number>('value');
+
+const _value = useTransition(value, {
+ duration: 500,
+});
+</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..df6d27f
--- /dev/null
+++ b/src/views/DataBoard/components/DataBoardCenterMap.vue
@@ -0,0 +1,204 @@
+<template>
+ <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"
+ ></DataBoardDataInfoItem>
+ <DataBoardDataInfoItem
+ :backgroundImage="DataBoardDataInfoBg6"
+ label="鍙戞斁棰�"
+ v-model:value="sumBountyReleaseAmountValue"
+ ></DataBoardDataInfoItem>
+ <DataBoardDataInfoItem
+ :backgroundImage="DataBoardDataInfoBg7"
+ label="浣跨敤棰�"
+ v-model:value="sumBountyUseAmountValue"
+ ></DataBoardDataInfoItem>
+ <DataBoardDataInfoItem
+ :backgroundImage="DataBoardDataInfoBg8"
+ label="鎶曚繚浜烘暟"
+ v-model:value="insurePeopleCountValue"
+ ></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(index)"
+ ></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 * 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 { useIntervalFn } from '@vueuse/core';
+
+defineOptions({
+ name: 'DataBoardCenterMap',
+});
+
+const queryClient = useQueryClient();
+
+const { dataBoardIndustrialParkList } = useIndustrialParkDropDownList();
+
+const form = reactive({
+ industrialParkId: '',
+ mapList: [],
+
+ totalCustomerCount: 0,
+ sumBountyReleaseAmount: 0,
+ sumBountyUseAmount: 0,
+ insurePeopleCount: 0,
+});
+
+function handleClick(chooseIndex: number) {
+ 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,
+ onSuccess(data) {
+ form.totalCustomerCount = data.totalCustomerCount;
+ changeTotalCustomerCount(form.totalCustomerCount);
+ form.sumBountyReleaseAmount = data.sumBountyReleaseAmount;
+ changeSumBountyReleaseAmount(form.sumBountyReleaseAmount);
+ form.sumBountyUseAmount = data.sumBountyUseAmount;
+ changeSumBountyUseAmount(form.sumBountyUseAmount);
+ form.insurePeopleCount = data.insurePeopleCount;
+ changeInsurePeopleCount(form.insurePeopleCount);
+ },
+});
+
+const { value: totalCustomerCountValue, changeValue: changeTotalCustomerCount } = useIntervalValue(
+ form.totalCustomerCount
+);
+const { value: sumBountyReleaseAmountValue, changeValue: changeSumBountyReleaseAmount } =
+ useIntervalValue(form.sumBountyReleaseAmount);
+const { value: sumBountyUseAmountValue, changeValue: changeSumBountyUseAmount } = useIntervalValue(
+ form.sumBountyUseAmount
+);
+const { value: insurePeopleCountValue, changeValue: changeInsurePeopleCount } = useIntervalValue(
+ form.insurePeopleCount
+);
+
+const { pause, resume } = useIntervalFn(() => {
+ if (dataBoardIndustrialParkList.value.length === 0) return;
+ const index = _.random(0, dataBoardIndustrialParkList.value.length - 1);
+ handleClick(index);
+}, 30000);
+
+onMounted(async () => {
+ await queryClient.invalidateQueries(['industrialParkServices/getIndustrialParkDropDownList']);
+ if (dataBoardIndustrialParkList.value.length > 0) {
+ form.industrialParkId = dataBoardIndustrialParkList.value[0].id;
+ form.mapList = dataBoardIndustrialParkList.value;
+ refetch();
+ }
+ resume();
+});
+
+onUnmounted(() => {
+ pause();
+});
+</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..047390f
--- /dev/null
+++ b/src/views/DataBoard/components/DataBoardCenterMapMark.vue
@@ -0,0 +1,102 @@
+<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">
+ <div class="data-board-center-map-mark-item-park-name">{{ parkName }}</div>
+ </div>
+ <img class="data-board-center-map-mark-item-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;
+ display: flex;
+ flex-direction: column;
+
+ .data-board-center-map-mark-item-park {
+ padding: 2px;
+ border-radius: 8px;
+ background-image: linear-gradient(
+ to bottom,
+ rgba(248, 255, 156, 0.5),
+ rgba(193, 245, 6, 0.5)
+ );
+
+ .data-board-center-map-mark-item-park-name {
+ padding: 12px 26px;
+ font-size: 24px;
+ font-family: YouSheBiaoTiHei Regular;
+ border-radius: 8px;
+ text-align: center;
+ color: #ffffff;
+ background: linear-gradient(
+ 180deg,
+ rgba(255, 176, 29, 0.8) 0%,
+ rgba(255, 210, 92, 0.8) 100%
+ );
+ line-height: 1;
+ word-break: keep-all;
+ }
+ }
+
+ .data-board-center-map-mark-item-img {
+ width: 96px;
+ height: 54px;
+ }
+ }
+ }
+}
+</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..9f04cb2
--- /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..4d41ac2
--- /dev/null
+++ b/src/views/DataBoard/components/DataBoardTableView.vue
@@ -0,0 +1,118 @@
+<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;
+ min-height: 270px;
+
+ .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..a9fcec0
--- /dev/null
+++ b/src/views/DataBoard/components/DataOverviewContent.vue
@@ -0,0 +1,98 @@
+<template>
+ <div class="data-overview-content">
+ <DataBoardDataInfoItem
+ :backgroundImage="DataBoardDataInfoBg1"
+ label="鎬诲叆椹讳紒涓�"
+ v-model:value="totalCustomerCountValue"
+ ></DataBoardDataInfoItem>
+ <DataBoardDataInfoItem
+ :backgroundImage="DataBoardDataInfoBg2"
+ label="鎬荤敵鎶ユ暟閲�"
+ v-model:value="totalBountyApplyCountValue"
+ ></DataBoardDataInfoItem>
+ <DataBoardDataInfoItem
+ :backgroundImage="DataBoardDataInfoBg3"
+ label="濂栧姳閲戝彂鏀炬�婚"
+ v-model:value="sumBountyReleaseAmountValue"
+ ></DataBoardDataInfoItem>
+ <DataBoardDataInfoItem
+ :backgroundImage="DataBoardDataInfoBg4"
+ label="濂栧姳閲戜娇鐢ㄦ�婚"
+ v-model:value="sumBountyUseAmountValue"
+ ></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 { useQuery } from '@tanstack/vue-query';
+import * as dataBoardServices from '@/services/api/DataBoard';
+import { useIntervalValue } from '../hooks';
+
+defineOptions({
+ name: 'DataOverviewContent',
+});
+
+const form = reactive({
+ totalCustomerCount: 0,
+ totalBountyApplyCount: 0,
+ sumBountyReleaseAmount: 0,
+ sumBountyUseAmount: 0,
+});
+
+const { data: detail, isLoading } = useQuery({
+ queryKey: ['dataBoardServices/getDataBoardOverview'],
+ queryFn: async () => {
+ return await dataBoardServices.getDataBoardOverview(
+ {},
+ {
+ showLoading: false,
+ }
+ );
+ },
+ placeholderData: () => ({} as API.GetDataBoardOverviewOutput),
+ onSuccess(data) {
+ form.totalCustomerCount = data.totalCustomerCount;
+ changeTotalCustomerCount(form.totalCustomerCount);
+ form.totalBountyApplyCount = data.totalBountyApplyCount;
+ changeTotalBountyApplyCount(form.totalBountyApplyCount);
+ form.sumBountyReleaseAmount = data.sumBountyReleaseAmount;
+ changeSumBountyReleaseAmount(form.sumBountyReleaseAmount);
+ form.sumBountyUseAmount = data.sumBountyUseAmount;
+ changeSumBountyUseAmount(form.sumBountyUseAmount);
+ },
+});
+
+const { value: totalCustomerCountValue, changeValue: changeTotalCustomerCount } = useIntervalValue(
+ form.totalCustomerCount
+);
+const { value: totalBountyApplyCountValue, changeValue: changeTotalBountyApplyCount } =
+ useIntervalValue(form.totalBountyApplyCount);
+const { value: sumBountyReleaseAmountValue, changeValue: changeSumBountyReleaseAmount } =
+ useIntervalValue(form.sumBountyReleaseAmount);
+const { value: sumBountyUseAmountValue, changeValue: changeSumBountyUseAmount } = useIntervalValue(
+ form.sumBountyUseAmount
+);
+</script>
+
+<style lang="scss" scoped>
+@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..0ead499
--- /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);
+ }, 30000);
+
+ 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..8c9e572
--- /dev/null
+++ b/src/views/DataBoard/utils/index.ts
@@ -0,0 +1,288 @@
+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 = {
+ grid: {
+ left: '10%', // 澧炲姞宸︿晶杈硅窛锛堥粯璁�10%锛�
+ bottom: '15%',
+ right: '5%',
+ },
+ 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, {
+ grid: {
+ left: '20%',
+ },
+ 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