fix: 修改数据看板

zhengyiming

2 天以前 a441299ebbfca9567ced69f669f68569b6f7ca0c

 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: '2025年第三季度',
    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: '2025年第三季度',
    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;