admin.xpcool.com/apps/web-tdesign/src/views/house/dashboard/index.vue

<script lang="ts" setup>
import type { EchartsUIType } from '@vben/plugins/echarts';
import type { OverviewResp, RegionAgg, TrendPoint } from '#/api/house';

import { onMounted, ref } from 'vue';

import { Page } from '@vben/common-ui';
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';

import {
  getAggregateRegion,
  getDashboardOverview,
  getPriceTrend,
} from '#/api/house';

// 数据看板：概览卡片 + 区域均价柱状图 + 价格趋势折线图
const overview = ref<OverviewResp>({
  communityCount: 0,
  listingCount: 0,
  bargainCount: 0,
  lowConfidence: 0,
  avgUnitPrice: 0,
  avgTotalPrice: 0,
  avgListDays: 0,
});

const regionChartRef = ref<EchartsUIType>();
const trendChartRef = ref<EchartsUIType>();
const { renderEcharts: renderRegion } = useEcharts(regionChartRef);
const { renderEcharts: renderTrend } = useEcharts(trendChartRef);

async function load() {
  overview.value = await getDashboardOverview({});
  const regionList: RegionAgg[] = (await getAggregateRegion()).list ?? [];
  const trend: TrendPoint[] = (await getPriceTrend({ limit: 30 })).trend ?? [];

  renderRegion({
    tooltip: { trigger: 'axis' },
    grid: { left: 60, right: 20, top: 30, bottom: 40 },
    xAxis: {
      type: 'category',
      data: regionList.map((r) => r.region),
      axisLabel: { rotate: 30 },
    },
    yAxis: { type: 'value', name: '元/㎡' },
    series: [
      {
        type: 'bar',
        data: regionList.map((r) => Math.round(r.avgUnitPrice)),
        itemStyle: { color: '#5DCAA5' },
        barMaxWidth: 40,
      },
    ],
  });

  renderTrend({
    tooltip: { trigger: 'axis' },
    legend: { data: ['挂牌均价', '成交均价'] },
    grid: { left: 60, right: 20, top: 40, bottom: 30 },
    xAxis: { type: 'category', data: trend.map((t) => t.date) },
    yAxis: { type: 'value', name: '万元' },
    series: [
      {
        name: '挂牌均价',
        type: 'line',
        data: trend.map((t) => t.avgListPrice),
        itemStyle: { color: '#EF9F27' },
        lineStyle: { type: 'dashed' },
        smooth: true,
      },
      {
        name: '成交均价',
        type: 'line',
        data: trend.map((t) => t.avgDealPrice),
        itemStyle: { color: '#5DCAA5' },
        smooth: true,
      },
    ],
  });
}

onMounted(load);
</script>

<template>
  <Page auto-content-height>
    <div class="mb-4 grid grid-cols-2 gap-3 md:grid-cols-6">
      <div class="rounded-lg border p-4">
        <p class="text-xs opacity-70">小区数</p>
        <p class="mt-1 text-2xl font-medium">{{ overview.communityCount }}</p>
      </div>
      <div class="rounded-lg border p-4">
        <p class="text-xs opacity-70">在售房源</p>
        <p class="mt-1 text-2xl font-medium">{{ overview.listingCount }}</p>
      </div>
      <div class="rounded-lg border p-4">
        <p class="text-xs opacity-70">笋盘</p>
        <p class="mt-1 text-2xl font-medium">{{ overview.bargainCount }}</p>
      </div>
      <div class="rounded-lg border p-4">
        <p class="text-xs opacity-70">低可信房源</p>
        <p class="mt-1 text-2xl font-medium">{{ overview.lowConfidence }}</p>
      </div>
      <div class="rounded-lg border p-4">
        <p class="text-xs opacity-70">在售均价(元/㎡)</p>
        <p class="mt-1 text-2xl font-medium">
          {{ Math.round(overview.avgUnitPrice) }}
        </p>
      </div>
      <div class="rounded-lg border p-4">
        <p class="text-xs opacity-70">平均挂牌天数</p>
        <p class="mt-1 text-2xl font-medium">
          {{ Math.round(overview.avgListDays) }}
        </p>
      </div>
    </div>

    <div class="mb-4 rounded-lg border p-4">
      <h3 class="mb-2 text-sm font-medium">区域在售均价</h3>
      <div style="height: 300px">
        <EchartsUI ref="regionChartRef" style="height: 100%" />
      </div>
    </div>

    <div class="rounded-lg border p-4">
      <h3 class="mb-2 text-sm font-medium">价格趋势（挂牌 vs 成交）</h3>
      <div style="height: 320px">
        <EchartsUI ref="trendChartRef" style="height: 100%" />
      </div>
    </div>
  </Page>
</template>