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/DataBoardHome.vue | 278 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 278 insertions(+), 0 deletions(-)
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>
--
Gitblit v1.9.1