<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>
|
<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);
|
});
|
|
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;
|
height: 100%;
|
flex: 1;
|
|
.full-screen-btn {
|
position: absolute;
|
top: 20px;
|
left: 20px;
|
cursor: pointer;
|
z-index: 22222;
|
}
|
}
|
|
.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>
|
