feat: databoard

wupengfei

3 天以前 89436385a31b0f31c33bb4688ab7c3b549ecc125

 src/views/DataBoard/DataBoardHome.vue

@@ -13,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>
@@ -42,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>
@@ -88,14 +92,22 @@
  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';

defineOptions({
@@ -114,11 +126,11 @@
const { detail: newInsurePeopleCount } = useGetDataBoardNewInsurePeopleCount();

const { bountyUseAmountRankList } = useGetDataBoardBountyUseAmountRank({
  take: 6,
  take: 5,
});

const { insurePeopleCountRankList } = useGetDataBoardInsurePeopleCountRank({
  take: 6,
  take: 5,
});

const newEnterOption = computed(() =>
@@ -139,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();
@@ -232,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%;
@@ -254,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;