Merge remote-tracking branch 'origin/dev-dataBoard'

zhengyiming

8 天以前 92921431668181fb6d3387368c751ccc40aba8cf

 src/views/DataBoard/DataBoardHome.vue

New file
@@ -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>