From 89436385a31b0f31c33bb4688ab7c3b549ecc125 Mon Sep 17 00:00:00 2001
From: wupengfei <834520024@qq.com>
Date: 星期三, 10 十二月 2025 17:15:52 +0800
Subject: [PATCH] feat: databoard
---
src/views/DataBoard/DataBoardHome.vue | 125 ++++++++++++++++++++++++++++++-----------
1 files changed, 91 insertions(+), 34 deletions(-)
diff --git a/src/views/DataBoard/DataBoardHome.vue b/src/views/DataBoard/DataBoardHome.vue
index 42caaf0..4cc5f70 100644
--- a/src/views/DataBoard/DataBoardHome.vue
+++ b/src/views/DataBoard/DataBoardHome.vue
@@ -13,17 +13,19 @@
</div>
<div class="data-board-home-content">
<div class="data-board-home-content-left">
- <DataBoardContentItem title="鏁版嵁姒傚喌" class="data-overview">
- <DataOverviewContent></DataOverviewContent>
- </DataBoardContentItem>
- <DataBoardContentItem title="鏂板鍏ラ┗浼佷笟" class="new-enter">
- <div class="new-enter-content">
- <v-chart :option="newEnterOption" />
+ <DataBoardContentItem title="涓婂搴︿氦鏄撴暟鎹�">
+ <div class="data-chart-content">
+ <v-chart :option="LastQuarterOutputValueCountChartOption" />
</div>
</DataBoardContentItem>
- <DataBoardContentItem title="鏂板鐢虫姤鎵规" :hasBottom="false" class="new-declare">
- <div class="new-declare-content">
- <v-chart :option="newDeclareOption" />
+ <DataBoardContentItem title="涓婂搴﹀湪绾垮姵鍔′汉鍛樻暟鎹�">
+ <div class="data-chart-content">
+ <v-chart :option="LastQuarterEnterpriseClientUserCountChartOption" />
+ </div>
+ </DataBoardContentItem>
+ <DataBoardContentItem title="鏈堝害骞冲彴娑堣垂鏁版嵁" :hasBottom="false">
+ <div class="data-chart-content">
+ <v-chart :option="newBountyUseAmountCountChartOption" />
</div>
</DataBoardContentItem>
</div>
@@ -42,28 +44,30 @@
/>
<DataBoardCenterMap></DataBoardCenterMap>
</div>
- <DataBoardCenterChart></DataBoardCenterChart>
</div>
<div class="data-board-home-content-right">
- <DataBoardContentItem title="鍙敤璧勯噾浣跨敤鎺掕" class="data-table-content">
+ <DataBoardContentItem title="浜ゆ槗Top">
+ <DataBoardTableView
+ :tableData="dataBoardOutputValueRankList"
+ unit="鍏�"
+ :isMoney="true"
+ customerName="浜у��"
+ ></DataBoardTableView>
+ </DataBoardContentItem>
+ <DataBoardContentItem title="鍔冲姟浜哄憳Top">
+ <DataBoardTableView
+ :tableData="enterpriseClientUserRankList"
+ unit="浜�"
+ customerName="绛剧害浜烘暟"
+ ></DataBoardTableView>
+ </DataBoardContentItem>
+ <DataBoardContentItem title="骞冲彴娑堣垂Top" :hasBottom="false">
<DataBoardTableView
:tableData="bountyUseAmountRankList"
unit="鍏�"
:isMoney="true"
- customerName="浣跨敤閲戦"
+ customerName="鍙戞斁閲戦"
></DataBoardTableView>
- </DataBoardContentItem>
- <DataBoardContentItem title="鎶曚繚浜烘暟鎺掕" class="data-table-content">
- <DataBoardTableView
- :tableData="insurePeopleCountRankList"
- unit="浜�"
- customerName="鎶曚繚浜烘暟"
- ></DataBoardTableView>
- </DataBoardContentItem>
- <DataBoardContentItem title="鎶曚繚浜烘暟瀵规瘮" :hasBottom="false" class="insure-person">
- <div class="insure-person-content">
- <v-chart :option="insurePersonOption" />
- </div>
</DataBoardContentItem>
</div>
</div>
@@ -88,14 +92,22 @@
createNewEnterChartOptions,
createNewDeclareChartOptions,
createInsurePersonOptionChartOptions,
+ creatDataBoardLeftLineChartOptions,
+ creatDataBoardLeftBarChartOptions,
} from './utils';
import { useQuery } from '@tanstack/vue-query';
import {
useGetDataBoardBountyUseAmountRank,
+ useGetDataBoardEnterpriseClientUserRank,
useGetDataBoardInsurePeopleCountRank,
+ useGetDataBoardLastQuarterEnterpriseClientUserCount,
+ useGetDataBoardLastQuarterOutputValueCount,
useGetDataBoardNewBountyApplyCount,
+ useGetDataBoardNewBountyReleaseAmountCount,
+ useGetDataBoardNewBountyUseAmountCount,
useGetDataBoardNewCustomerCount,
useGetDataBoardNewInsurePeopleCount,
+ useGetDataBoardOutputValueRank,
} from './hooks';
defineOptions({
@@ -114,11 +126,11 @@
const { detail: newInsurePeopleCount } = useGetDataBoardNewInsurePeopleCount();
const { bountyUseAmountRankList } = useGetDataBoardBountyUseAmountRank({
- take: 6,
+ take: 5,
});
const { insurePeopleCountRankList } = useGetDataBoardInsurePeopleCountRank({
- take: 6,
+ take: 5,
});
const newEnterOption = computed(() =>
@@ -139,13 +151,51 @@
})
);
-const insurePersonOption = computed(() =>
- createInsurePersonOptionChartOptions({
- data: newInsurePeopleCount.value.data,
- xAxisData: newInsurePeopleCount.value.x,
- name: format(new Date(), 'YYYY-MM'),
+const { detail: lastQuarterOutputValueCount } = useGetDataBoardLastQuarterOutputValueCount({
+ wanUnit: true,
+});
+const { detail: lastQuarterEnterpriseClientUserCount } =
+ useGetDataBoardLastQuarterEnterpriseClientUserCount();
+
+const { detail: newBountyUseAmountCount } = useGetDataBoardNewBountyUseAmountCount();
+
+const LastQuarterOutputValueCountChartOption = computed(() =>
+ creatDataBoardLeftLineChartOptions({
+ data: lastQuarterOutputValueCount.value.data,
+ xAxisData: lastQuarterOutputValueCount.value.x,
+ name: '鏈湀',
+ yAxisName: '鍗曚綅/涓囧厓',
+ smooth: true,
+ color: '#FECD07',
+ opacityColor: 'rgba(187, 189, 84, 0.5)',
})
);
+const LastQuarterEnterpriseClientUserCountChartOption = computed(() =>
+ creatDataBoardLeftLineChartOptions({
+ data: lastQuarterEnterpriseClientUserCount.value.data,
+ xAxisData: lastQuarterEnterpriseClientUserCount.value.x,
+ name: '鏈湀',
+ yAxisName: '鍗曚綅/鍏�',
+ smooth: false,
+ color: '#00A6FF',
+ opacityColor: 'rgba(0, 166, 255, 0.5)',
+ })
+);
+
+const newBountyUseAmountCountChartOption = computed(() =>
+ creatDataBoardLeftBarChartOptions({
+ data: newBountyUseAmountCount.value.currentMonthData,
+ xAxisData: newBountyUseAmountCount.value.x,
+ })
+);
+
+const { dataBoardOutputValueRankList } = useGetDataBoardOutputValueRank({
+ take: 5,
+});
+
+const { enterpriseClientUserRankList } = useGetDataBoardEnterpriseClientUserRank({
+ take: 5,
+});
onMounted(() => {
updateTime();
@@ -232,6 +282,14 @@
.data-board-home-content-left {
width: 446px;
+ .data-board-content-item {
+ height: 300px;
+
+ .data-chart-content {
+ height: 258px;
+ }
+ }
+
.new-enter {
.new-enter-content {
width: 100%;
@@ -254,13 +312,12 @@
.data-board-home-content-center-map {
position: relative;
- margin-bottom: 10px;
width: 100%;
- height: 560px;
+ height: 630px;
.data-board-home-content-center-map-bg {
position: absolute;
- top: 0;
+ top: 35px;
width: 70px;
height: 560px;
--
Gitblit v1.9.1