X-Financial/web/src/views/OverviewView.vue

<template>
  <section class="dashboard" :class="[`dashboard-${activeDashboard}`, { 'is-loading': activeDashboardLoading }]">
    <div v-if="activeDashboardLoading" class="dashboard-loading-overlay" role="status" aria-live="polite">
      <i class="mdi mdi-loading mdi-spin"></i>
      <span>{{ activeDashboardLoadingText }}</span>
    </div>
    <div class="kpi-grid">
      <article
        v-for="metric in activeKpiMetrics"
        :key="metric.label"
        class="kpi-card panel"
        :style="{ '--accent': metric.accent, '--delay': `${metric.delay}ms` }"
      >
        <div class="kpi-head">
          <span class="kpi-icon"><i :class="metric.icon"></i></span>
          <span class="kpi-label">{{ metric.label }}</span>
        </div>
        <strong class="kpi-value">{{ metric.displayValue }}</strong>
        <div class="kpi-trend">
          <span class="kpi-badge" :class="metric.trend">
            <i :class="metric.trend === 'down' ? 'mdi mdi-arrow-down' : 'mdi mdi-arrow-up'"></i>
            {{ metric.changeText }}
          </span>
          <span class="kpi-delta">{{ metric.delta }}</span>
        </div>
      </article>
    </div>

    <template v-if="activeDashboard === 'finance'">
      <div class="content-grid top-grid">
        <article class="panel dashboard-card trend-panel">
          <div class="card-head">
            <h3>每日报销金额 <i class="mdi mdi-information-outline"></i></h3>
            <EnterpriseSelect
              v-model="activeTrendRange"
              class="card-select"
              :options="trendRanges"
              aria-label="趋势时间范围"
              size="small"
            />
          </div>

          <TrendChart
            mode="amount"
            :labels="activeTrend.labels"
            :claim-count="activeTrend.claimCount"
            :claim-amount="activeTrend.claimAmount"
          />
        </article>

        <article class="panel dashboard-card trend-count-panel">
          <div class="card-head">
            <h3>每日报销数量 <i class="mdi mdi-information-outline"></i></h3>
          </div>

          <TrendChart
            mode="count"
            :labels="activeTrend.labels"
            :claim-count="activeTrend.claimCount"
            :claim-amount="activeTrend.claimAmount"
          />
        </article>

        <article class="panel dashboard-card donut-panel">
          <div class="card-head">
            <h3>费用结构 <i class="mdi mdi-information-outline"></i></h3>
          </div>
          <DonutChart :items="spendLegend" :center-value="spendCenterValue" center-label="费用总额" />
          <p class="panel-note">* 百分比按当前时间范围内的费用金额计算</p>
        </article>
      </div>

      <div class="content-grid bottom-grid">
        <article class="panel dashboard-card rank-panel">
          <div class="card-head">
            <h3>部门报销排行 <i class="mdi mdi-information-outline"></i></h3>
            <EnterpriseSelect
              v-model="activeDepartmentRange"
              class="card-select"
              :options="departmentRangeOptions"
              aria-label="部门排行时间范围"
              size="small"
            />
          </div>

          <BarChart :items="rankedDepartments" />
        </article>

        <article class="panel dashboard-card employee-rank-panel">
          <div class="card-head">
            <h3>个人报销排行 <i class="mdi mdi-information-outline"></i></h3>
            <EnterpriseSelect
              v-model="activeDepartmentRange"
              class="card-select"
              :options="departmentRangeOptions"
              aria-label="个人排行时间范围"
              size="small"
            />
          </div>

          <BarChart :items="rankedEmployees" />
        </article>

        <article class="panel dashboard-card top-claim-panel">
          <div class="card-head">
            <h3>高额单据 <i class="mdi mdi-information-outline"></i></h3>
            <span class="card-range-chip">{{ activeDepartmentRange }}</span>
          </div>

          <div class="top-claim-split">
            <div class="department-employee-mix">
              <DonutChart
                :items="departmentEmployeeLegend"
                :center-value="departmentEmployeeCenterValue"
                center-label="人员占比"
              />
            </div>

            <div class="top-claim-list">
              <div
                v-for="item in topClaims"
                :key="item.claimNo"
                class="top-claim-row"
              >
                <div>
                  <strong>{{ item.claimNo }}</strong>
                  <span>{{ item.employeeName }} · {{ item.departmentName || '未归属部门' }}</span>
                </div>
                <div>
                  <strong>{{ item.amountLabel }}</strong>
                  <span>{{ item.expenseTypeLabel }} · {{ item.statusLabel }}</span>
                </div>
              </div>
            </div>
          </div>
        </article>

        <article class="panel dashboard-card budget-metrics-panel">
          <div class="card-head">
            <h3>预算指标 <i class="mdi mdi-information-outline"></i></h3>
          </div>

          <div class="budget-metric-grid">
            <div
              v-for="(item, index) in budgetMetrics"
              :key="item.label"
              class="budget-metric-item"
              :class="item.tone"
              :style="{ '--delay': `${index * 70}ms` }"
            >
              <span class="budget-metric-icon"><i :class="item.icon"></i></span>
              <div>
                <span>{{ item.label }}</span>
                <strong>{{ item.value }}</strong>
                <em>{{ item.detail }}</em>
              </div>
            </div>
          </div>
        </article>

        <article class="panel dashboard-card budget-panel">
          <div class="card-head">
            <h3>预算执行率（本月）<i class="mdi mdi-information-outline"></i></h3>
          </div>

          <GaugeChart
            :ratio="budgetSummary.ratio"
            :total="budgetSummary.total"
            :used="budgetSummary.used"
            :left="budgetSummary.left"
          />

          <button type="button" class="text-link">查看详情 <i class="mdi mdi-chevron-right"></i></button>
        </article>
      </div>
    </template>

    <RiskObservationDashboard
      v-else-if="activeDashboard === 'risk'"
      :dashboard="riskDashboard"
      :loading="riskDashboardLoading"
      :error="riskDashboardError"
      :last-updated-at="riskDashboardLastUpdatedAt"
      :level-legend="riskLevelLegend"
      :source-legend="riskSourceLegend"
      :signal-ranking="riskSignalRanking"
      :daily-rows="riskDailyTrendRows"
      :window-options="riskWindowOptions"
      :active-window-days="activeRiskWindowDays"
      @update:window-days="setRiskWindowDays"
    />

    <DigitalEmployeeDashboard
      v-else-if="activeDashboard === 'digitalEmployee'"
      :dashboard="digitalEmployeeDashboard"
      :loading="digitalEmployeeDashboardLoading"
      :error="digitalEmployeeDashboardError"
      :daily-rows="digitalEmployeeDailyRows"
      :task-ranking="digitalEmployeeTaskRanking"
      :category-rows="digitalEmployeeCategoryRows"
    />

    <template v-else>
      <div class="system-observability-grid">
        <article class="panel dashboard-card system-agent-ratio-panel">
          <div class="card-head">
            <h3>智能体调用占比（日） <i class="mdi mdi-information-outline"></i></h3>
          </div>
          <p class="card-subtitle">按天查看几个核心智能体的调用构成，比例变化比单纯总量更容易定位偏移。</p>

          <SystemAgentRatioBar
            :labels="systemAgentDailyRatio.labels"
            :agents="systemAgentDailyRatio.agents"
            :series="systemAgentDailyRatio.series"
          />
        </article>

        <article class="panel dashboard-card system-token-pie-panel">
          <div class="card-head">
            <h3>用户 Token 消耗占比 <i class="mdi mdi-information-outline"></i></h3>
          </div>
          <p class="card-subtitle">左侧看每日 Token 消耗波动，右侧看高消耗用户，便于排查重复问答或异常长上下文。</p>

          <div class="system-token-panel-grid">
            <SystemTokenDailyWaveChart
              :labels="systemTokenDailyWave.labels"
              :input-tokens="systemTokenDailyWave.inputTokens"
              :output-tokens="systemTokenDailyWave.outputTokens"
              :total-tokens="systemTokenDailyWave.totalTokens"
            />
            <SystemUserTokenPie :items="systemUserTokenUsage" />
          </div>
        </article>

        <article class="panel dashboard-card system-accuracy-panel">
          <div class="card-head">
            <h3>正确 / 错误对比 <i class="mdi mdi-information-outline"></i></h3>
          </div>
          <p class="card-subtitle">按智能体对比正确与错误次数，错误柱越靠前越需要优先追踪日志。</p>

          <SystemAccuracyCompareBar
            :categories="systemAccuracyComparison.categories"
            :correct="systemAccuracyComparison.correct"
            :wrong="systemAccuracyComparison.wrong"
          />
        </article>

        <article class="panel dashboard-card system-tool-detail-panel">
          <div class="card-head">
            <h3>工具调用明细 <i class="mdi mdi-information-outline"></i></h3>
          </div>

          <div class="system-tool-table">
            <div
              v-for="item in systemToolDetailItems"
              :key="item.name"
              class="system-tool-row"
            >
              <div class="system-tool-row-head">
                <strong>{{ item.name }}</strong>
                <span>{{ item.callLabel }}</span>
              </div>
              <div class="system-tool-meter" aria-hidden="true">
                <i :style="{ width: item.width, background: item.color }"></i>
              </div>
              <div class="system-tool-row-meta">
                <span>成功率 {{ item.successRate }}%</span>
                <span>平均 {{ item.avgLatency }}</span>
                <span>{{ item.tokenLabel }}</span>
              </div>
            </div>
          </div>
        </article>

        <aside class="system-side-stack">
          <article class="panel dashboard-card system-side-card system-login-wave-panel">
            <div class="card-head">
              <h3>用户在线波动 <i class="mdi mdi-information-outline"></i></h3>
            </div>
            <p class="card-subtitle">登录人数与互动次数的时段波动。</p>

            <SystemLoginWaveChart
              compact
              :labels="systemLoginWave.labels"
              :login-users="systemLoginWave.loginUsers"
              :interactions="systemLoginWave.interactions"
            />
          </article>

          <article class="panel dashboard-card system-side-card system-duration-panel">
            <div class="card-head">
              <h3>用户使用时长 <i class="mdi mdi-information-outline"></i></h3>
            </div>

            <div class="duration-summary">
              <div>
                <strong>{{ systemUsageDurationSummary.average }}</strong>
                <span>平均使用时长</span>
              </div>
              <em>{{ systemUsageDurationSummary.trend }}</em>
            </div>

            <div class="duration-meta">
              <span>中位数 {{ systemUsageDurationSummary.median }}</span>
              <span>峰值 {{ systemUsageDurationSummary.peak }}</span>
            </div>

            <div class="duration-bars">
              <div
                v-for="item in systemUsageDurationRows"
                :key="item.label"
                class="duration-bar-row"
              >
                <span>{{ item.label }}</span>
                <i><b :style="{ width: item.width, background: item.color }"></b></i>
                <strong>{{ item.value }} 人</strong>
              </div>
            </div>
          </article>

          <article class="panel dashboard-card feedback-panel system-feedback-panel">
            <div class="card-head">
              <h3>用户反馈概览 <i class="mdi mdi-information-outline"></i></h3>
            </div>

            <div class="feedback-list">
              <div
                v-for="item in systemFeedbackSummary"
                :key="item.label"
                class="feedback-row"
                :class="item.tone"
              >
                <span class="feedback-icon"><i :class="item.icon"></i></span>
                <div>
                  <strong>{{ item.value }}</strong>
                  <span>{{ item.label }}</span>
                </div>
              </div>
            </div>

            <p class="panel-note">* 反馈用于衡量智能体回答和工具执行体验</p>
          </article>
        </aside>
      </div>
    </template>
  </section>
</template>

<script setup>
import { computed } from 'vue'

import TrendChart from '../components/charts/TrendChart.vue'
import DonutChart from '../components/charts/DonutChart.vue'
import BarChart from '../components/charts/BarChart.vue'
import GaugeChart from '../components/charts/GaugeChart.vue'
import SystemAccuracyCompareBar from '../components/charts/SystemAccuracyCompareBar.vue'
import SystemAgentRatioBar from '../components/charts/SystemAgentRatioBar.vue'
import SystemLoginWaveChart from '../components/charts/SystemLoginWaveChart.vue'
import SystemTokenDailyWaveChart from '../components/charts/SystemTokenDailyWaveChart.vue'
import SystemUserTokenPie from '../components/charts/SystemUserTokenPie.vue'
import DigitalEmployeeDashboard from '../components/dashboard/DigitalEmployeeDashboard.vue'
import RiskObservationDashboard from '../components/dashboard/RiskObservationDashboard.vue'
import EnterpriseSelect from '../components/shared/EnterpriseSelect.vue'

import { useOverviewView } from '../composables/useOverviewView.js'

const props = defineProps({
  filteredRequests: { type: Array, required: true },
  dashboard: { type: String, default: 'finance' },
  activeRange: { type: String, default: '近10日' },
  customRange: {
    type: Object,
    default: () => ({ start: '', end: '' })
  }
})

const {
  activeDepartmentRange,
  activeRiskWindowDays,
  activeTrend,
  activeTrendRange,
  budgetMetrics,
  budgetSummary,
  departmentEmployeeCenterValue,
  departmentEmployeeLegend,
  departmentRangeOptions,
  digitalEmployeeCategoryRows,
  digitalEmployeeDashboard,
  digitalEmployeeDashboardError,
  digitalEmployeeDashboardLoaded,
  digitalEmployeeDashboardLoading,
  digitalEmployeeDailyRows,
  digitalEmployeeKpiMetrics,
  digitalEmployeeTaskRanking,
  financeDashboardLoading,
  financeDashboardLoaded,
  kpiMetrics,
  rankedDepartments,
  rankedEmployees,
  riskDashboard,
  riskDashboardError,
  riskDashboardLoaded,
  riskDashboardLastUpdatedAt,
  riskDashboardLoading,
  riskDailyTrendRows,
  riskKpiMetrics,
  riskLevelLegend,
  riskSignalRanking,
  riskSourceLegend,
  riskWindowOptions,
  setRiskWindowDays,
  spendCenterValue,
  spendLegend,
  systemDashboardLoading,
  systemDashboardLoaded,
  systemAccuracyComparison,
  systemAgentDailyRatio,
  systemFeedbackSummary,
  systemKpiMetrics,
  systemLoginWave,
  systemTokenDailyWave,
  systemToolDetailItems,
  systemUsageDurationRows,
  systemUsageDurationSummary,
  systemUserTokenUsage,
  topClaims,
  trendRanges
} = useOverviewView(props)

const activeDashboard = computed(() => {
  if (props.dashboard === 'system') return 'system'
  if (props.dashboard === 'risk') return 'risk'
  if (props.dashboard === 'digitalEmployee') return 'digitalEmployee'
  return 'finance'
})
const activeKpiMetrics = computed(() => {
  if (activeDashboard.value === 'system') return systemKpiMetrics.value
  if (activeDashboard.value === 'digitalEmployee') return digitalEmployeeKpiMetrics.value
  if (activeDashboard.value === 'risk') return riskKpiMetrics.value
  return kpiMetrics.value
})
const activeDashboardLoading = computed(() => {
  if (activeDashboard.value === 'system') {
    return systemDashboardLoading.value && !systemDashboardLoaded.value
  }
  if (activeDashboard.value === 'digitalEmployee') {
    return digitalEmployeeDashboardLoading.value && !digitalEmployeeDashboardLoaded.value
  }
  if (activeDashboard.value === 'risk') {
    return riskDashboardLoading.value && !riskDashboardLoaded.value
  }
  return financeDashboardLoading.value && !financeDashboardLoaded.value
})
const activeDashboardLoadingText = computed(() => {
  if (activeDashboard.value === 'system') return '正在加载系统看板数据'
  if (activeDashboard.value === 'digitalEmployee') return '正在加载数字员工看板数据'
  if (activeDashboard.value === 'risk') return '正在加载风险看板数据'
  return '正在加载财务看板数据'
})
</script>

<style scoped src="../assets/styles/views/overview-view.css"></style>