From b5312ca8f8cea8218293053b1a0b5b232d321a0b Mon Sep 17 00:00:00 2001
From: wupengfei <834520024@qq.com>
Date: 星期三, 10 十二月 2025 17:27:29 +0800
Subject: [PATCH] feat: databoard
---
src/views/DataBoard/DataBoardHome.vue | 149 +++++++++++++++++++++++++++++++++++++------------
1 files changed, 113 insertions(+), 36 deletions(-)
diff --git a/src/views/DataBoard/DataBoardHome.vue b/src/views/DataBoard/DataBoardHome.vue
index 9ae4146..4cc5f70 100644
--- a/src/views/DataBoard/DataBoardHome.vue
+++ b/src/views/DataBoard/DataBoardHome.vue
@@ -1,5 +1,8 @@
<template>
<div class="data-board-home-wrapper">
+ <div class="full-screen-btn" @click="goFullScreen" v-if="route.name !== 'DataBoardPage'">
+ <el-icon color="#ffffff" :size="32"><FullScreen /></el-icon>
+ </div>
<div class="data-board-home">
<div class="data-board-home-title">
<div class="data-board-home-title-logo"></div>
@@ -10,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>
@@ -39,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>
@@ -85,16 +92,23 @@
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';
-import { take } from 'lodash';
defineOptions({
name: 'DataBoardHome',
@@ -112,11 +126,11 @@
const { detail: newInsurePeopleCount } = useGetDataBoardNewInsurePeopleCount();
const { bountyUseAmountRankList } = useGetDataBoardBountyUseAmountRank({
- take: 6,
+ take: 5,
});
const { insurePeopleCountRankList } = useGetDataBoardInsurePeopleCountRank({
- take: 6,
+ take: 5,
});
const newEnterOption = computed(() =>
@@ -137,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();
@@ -154,16 +206,34 @@
onUnmounted(() => {
clearInterval(timer);
});
+
+const router = useRouter();
+const route = useRoute();
+
+function goFullScreen() {
+ router.push({
+ name: 'DataBoardPage',
+ });
+}
</script>
<style lang="scss" scoped>
@use '@/style/common.scss' as *;
.data-board-home-wrapper {
+ position: relative;
overflow: auto;
min-width: 0;
- flex: 1;
height: 100%;
+ flex: 1;
+
+ .full-screen-btn {
+ position: absolute;
+ top: 20px;
+ left: 20px;
+ cursor: pointer;
+ z-index: 22222;
+ }
}
.data-board-home {
@@ -212,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%;
@@ -234,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