801 lines
40 KiB
Vue
801 lines
40 KiB
Vue
<template>
|
||
<div class="report-page">
|
||
<!-- 顶部 -->
|
||
<div class="report-header">
|
||
<h3 class="page-title">📊 CMA管理报表</h3>
|
||
<div class="header-right">
|
||
<el-date-picker
|
||
v-model="reportPeriod"
|
||
type="month"
|
||
placeholder="选择月份"
|
||
value-format="YYYY-MM"
|
||
size="small"
|
||
style="width:140px"
|
||
@change="onPeriodChange"
|
||
/>
|
||
<el-button text size="small" :loading="loading" @click="loadAll">刷新</el-button>
|
||
<el-button type="primary" size="small" @click="openDupont">📊 杜邦分析</el-button>
|
||
<el-button type="success" size="small" @click="openSubjectManage">📋 科目打标</el-button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 标签页 -->
|
||
<el-tabs v-model="activeTab" type="border-card" class="report-tabs">
|
||
|
||
<!-- ════ 报表1：管理利润表 ════ -->
|
||
<el-tab-pane label="💰 管理利润表" name="profit">
|
||
<div v-loading="loading">
|
||
<div class="report-desc">基于管理会计视角的利润结构分析：收入 → 变动成本 → 边际贡献 → 固定成本 → 息税前利润</div>
|
||
<el-table :data="profitItems" border stripe size="small" style="width:100%;margin-top:12px;" :summary-method="profitSummary" show-summary>
|
||
<el-table-column prop="name" label="项目" width="200">
|
||
<template #default="{ row }">
|
||
<span :style="{ fontWeight: row.is_total ? 700 : row.is_subtotal ? 600 : 400 }">{{ row.name }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="本期金额" width="160" align="right">
|
||
<template #default="{ row }">
|
||
<span :style="{ fontWeight: row.is_total ? 700 : 400, color: (row.name?.includes('利润') || row.name?.includes('贡献')) && row.value != null && row.value < 0 ? '#f56c6c' : '#333' }">
|
||
{{ row.value != null ? '¥ ' + row.value.toLocaleString() : '-' }}
|
||
</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="上期金额" width="160" align="right">
|
||
<template #default="{ row }">
|
||
<span style="color:#999;">{{ row.prev_value != null ? '¥ ' + row.prev_value.toLocaleString() : '-' }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="环比变化" width="120" align="right">
|
||
<template #default="{ row }">
|
||
<span v-if="row.change_rate != null" :style="{ color: row.change_rate > 0 ? '#f56c6c' : row.change_rate < 0 ? '#67c23a' : '#999', fontWeight: 600 }">
|
||
{{ row.change_rate > 0 ? '↑' : '↓' }}{{ Math.abs(row.change_rate).toFixed(1) }}%
|
||
</span>
|
||
<span v-else style="color:#ccc;">-</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="占比" width="100" align="right">
|
||
<template #default="{ row }">
|
||
<span v-if="row.ratio != null" style="color:#666;">{{ row.ratio.toFixed(1) }}%</span>
|
||
<span v-else style="color:#ccc;">-</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</el-tab-pane>
|
||
|
||
<!-- ════ 新30号准则利润表 ════ -->
|
||
<el-tab-pane label="📋 新30号准则" name="new30">
|
||
<div v-loading="loadingNew30">
|
||
<div class="report-desc">基于新30号准则的五板块利润表列报（2027版）。经营/投资/筹资分类列示，财务费用拆解。</div>
|
||
|
||
<div class="new30-blocks">
|
||
<div v-for="block in new30Blocks" :key="block.key" class="new30-block">
|
||
<div class="new30-block-header" @click="block.expanded = !block.expanded">
|
||
<span class="new30-toggle">{{ block.expanded ? '▼' : '▶' }}</span>
|
||
<span class="new30-block-name">{{ block.name }}</span>
|
||
<span class="new30-block-subtotal" :class="{ negative: block.subtotal < 0 }">
|
||
{{ block.subtotal != null ? formatMoney(block.subtotal) : '-' }}
|
||
</span>
|
||
<span class="new30-block-label">{{ block.subtotal_name }}</span>
|
||
<span v-if="!block.has_real_data" class="new30-demo-tag">示例数据</span>
|
||
</div>
|
||
<div v-if="block.expanded" class="new30-block-body">
|
||
<div v-for="item in block.items" :key="item.code" class="new30-item">
|
||
<span class="new30-item-name">{{ item.name }}</span>
|
||
<span class="new30-item-amount" :class="{ negative: item.effective != null && item.effective < 0 }">
|
||
{{ item.effective != null ? formatMoney(item.effective) : '-' }}
|
||
</span>
|
||
<span v-if="item.effective != null && block.subtotal != null && block.subtotal !== 0" class="new30-item-ratio">
|
||
{{ (Math.abs(item.effective) / Math.abs(block.subtotal) * 100).toFixed(1) }}%
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="new30-net-profit" v-if="new30Format !== 'dual'">
|
||
<div class="new30-profit-row">
|
||
<span class="new30-profit-label">合计：</span>
|
||
<span class="new30-profit-value" :class="{ negative: new30NetProfit < 0 }">
|
||
{{ formatMoney(new30NetProfit) }}
|
||
</span>
|
||
<span class="new30-profit-name">净利润</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 双列对比模式 -->
|
||
<div v-if="new30Format === 'dual' && dualComparisonData" class="dual-comparison">
|
||
<div class="dual-desc">新旧准则双列对比 — 旧准则（一行到底） vs 新准则（五板块）</div>
|
||
|
||
<div class="dual-grid">
|
||
<!-- 旧准则列 -->
|
||
<div class="dual-col">
|
||
<div class="dual-col-header old-col">旧准则格式</div>
|
||
<el-table :data="dualComparisonData.old_format?.items || []" border stripe size="small" style="width:100%;">
|
||
<el-table-column prop="name" label="项目" width="180">
|
||
<template #default="{ row }">
|
||
<span :style="{ fontWeight: row.is_total ? 700 : row.is_subtotal ? 600 : 400 }">{{ row.name }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="金额" width="140" align="right">
|
||
<template #default="{ row }">
|
||
<span :style="{ fontWeight: row.is_total ? 700 : 400 }">
|
||
{{ row.value != null ? '¥ ' + row.value.toLocaleString() : '-' }}
|
||
</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
|
||
<!-- 新准则列 -->
|
||
<div class="dual-col">
|
||
<div class="dual-col-header new-col">新30号准则格式</div>
|
||
<div class="dual-blocks">
|
||
<div v-for="block in dualComparisonData.new_format?.blocks || []" :key="block.key" class="dual-block">
|
||
<div class="dual-block-header">
|
||
<span class="dual-block-name">{{ block.short_name }}</span>
|
||
<span class="dual-block-subtotal">{{ formatMoney(block.subtotal) }}</span>
|
||
</div>
|
||
<div v-for="item in block.items" :key="item.code" class="dual-block-item">
|
||
<span class="dual-item-name">{{ item.name }}</span>
|
||
<span class="dual-item-amount">{{ item.effective != null ? formatMoney(item.effective) : '-' }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="dual-net-profit">
|
||
<span>净利润：</span>
|
||
<span class="dual-net-val">{{ formatMoney(dualComparisonData.new_format?.net_profit) }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="new30-footer">
|
||
<el-button size="small" :type="new30Format === 'new' ? 'primary' : ''" @click="switchNew30Format('new')">新准则</el-button>
|
||
<el-button size="small" :type="new30Format === 'old' ? 'primary' : ''" @click="switchNew30Format('old')">旧准则</el-button>
|
||
<el-button size="small" :type="new30Format === 'dual' ? 'primary' : ''" @click="switchNew30Format('dual')">双列对比</el-button>
|
||
<el-button size="small" @click="exportNew30">导出</el-button>
|
||
<span v-if="new30DemoMode" class="new30-demo-hint">⚠️ 当前显示示例数据，科目打标后显示实际数据</span>
|
||
</div>
|
||
</div>
|
||
</el-tab-pane>
|
||
|
||
<!-- ════ 报表2：预算执行报告 ════ -->
|
||
<el-tab-pane label="📋 预算执行报告" name="budget">
|
||
<div v-loading="loading">
|
||
<div class="report-desc">各KPI预算 vs 实际差异分析。正值=超预算，负值=节约。</div>
|
||
<div class="summary-row" style="margin-top:12px;">
|
||
<div class="stat-card blue"><div class="stat-val">{{ budgetSummary.total }}</div><div class="stat-label">KPI总数</div></div>
|
||
<div class="stat-card green"><div class="stat-val">{{ budgetSummary.with_budget }}</div><div class="stat-label">有预算</div></div>
|
||
<div class="stat-card red"><div class="stat-val">{{ budgetSummary.over_budget }}</div><div class="stat-label">超预算</div></div>
|
||
<div class="stat-card gray"><div class="stat-val">{{ budgetSummary.under_budget }}</div><div class="stat-label">节约</div></div>
|
||
<div class="stat-card yellow"><div class="stat-val">{{ budgetSummary.normal }}</div><div class="stat-label">正常</div></div>
|
||
</div>
|
||
<div style="display:flex;gap:8px;margin:12px 0;">
|
||
<el-select v-model="budgetDim" placeholder="维度" clearable size="small" style="width:120px;" @change="loadBudget">
|
||
<el-option v-for="d in dimensions" :key="d.value" :label="d.label" :value="d.value" />
|
||
</el-select>
|
||
<el-select v-model="budgetLevel" placeholder="状态" clearable size="small" style="width:120px;" @change="loadBudget">
|
||
<el-option label="超预算" value="red" />
|
||
<el-option label="预警" value="yellow" />
|
||
<el-option label="正常" value="normal" />
|
||
</el-select>
|
||
</div>
|
||
<el-table :data="budgetItems" border stripe size="small" style="width:100%;" @sort-change="onBudgetSort">
|
||
<el-table-column prop="kpi_name" label="KPI名称" min-width="150" sortable="custom" />
|
||
<el-table-column prop="dimension" label="维度" width="90">
|
||
<template #default="{ row }">{{ dimLabel(row.dimension) }}</template>
|
||
</el-table-column>
|
||
<el-table-column label="实际值" width="120" align="right" prop="actual_value" sortable="custom">
|
||
<template #default="{ row }">{{ row.actual_value != null ? row.actual_value.toLocaleString() : '-' }}</template>
|
||
</el-table-column>
|
||
<el-table-column label="预算值" width="120" align="right" prop="budget_value" sortable="custom">
|
||
<template #default="{ row }">{{ row.budget_value != null ? row.budget_value.toLocaleString() : '-' }}</template>
|
||
</el-table-column>
|
||
<el-table-column label="差异额" width="120" align="right" prop="deviation_amount" sortable="custom">
|
||
<template #default="{ row }">
|
||
<span :style="{ color: row.deviation_amount > 0 ? '#f56c6c' : row.deviation_amount < 0 ? '#67c23a' : '#999' }">
|
||
{{ row.deviation_amount != null ? (row.deviation_amount > 0 ? '+' : '') + row.deviation_amount.toLocaleString() : '-' }}
|
||
</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="差异率" width="100" align="right" prop="deviation_rate" sortable="custom">
|
||
<template #default="{ row }">
|
||
<el-tag v-if="row.deviation_rate != null" :type="row.alert_level === 'red' ? 'danger' : row.alert_level === 'yellow' ? 'warning' : 'success'" size="small">
|
||
{{ row.deviation_rate > 0 ? '+' : '' }}{{ row.deviation_rate.toFixed(1) }}%
|
||
</el-tag>
|
||
<span v-else style="color:#ccc;">-</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</el-tab-pane>
|
||
|
||
<!-- ════ 报表3：KPI趋势报告 ════ -->
|
||
<el-tab-pane label="📈 KPI趋势报告" name="trends">
|
||
<div v-loading="loading">
|
||
<div class="report-desc">选定KPI的历史趋势分析，含目标线标记。</div>
|
||
<div style="display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;">
|
||
<el-select v-model="trendDim" placeholder="维度" clearable size="small" style="width:120px;" @change="loadTrends">
|
||
<el-option v-for="d in dimensions" :key="d.value" :label="d.label" :value="d.value" />
|
||
</el-select>
|
||
<el-select v-model="trendKpiId" placeholder="选择KPI" clearable filterable size="small" style="width:200px;" @change="loadTrends">
|
||
<el-option v-for="k in kpiOptions" :key="k.id" :label="k.kpi_name" :value="k.id" />
|
||
</el-select>
|
||
<el-select v-model="trendMonths" size="small" style="width:100px;" @change="loadTrends">
|
||
<el-option label="12期" :value="12" />
|
||
<el-option label="24期" :value="24" />
|
||
<el-option label="30期" :value="30" />
|
||
</el-select>
|
||
</div>
|
||
<div v-if="trendData.length > 0" class="trend-grid">
|
||
<el-card v-for="t in trendData" :key="t.kpi_id" class="trend-card-2">
|
||
<template #header>
|
||
<div class="trend-hd">
|
||
<span class="trend-name">{{ t.kpi_name }}</span>
|
||
<span class="trend-unit">{{ t.unit }}</span>
|
||
<span class="trend-stat">均值 {{ t.avg }} | 最高 {{ t.max }} | 最低 {{ t.min }}</span>
|
||
<span class="trend-dir" :class="t.trend_dir">{{ t.trend_dir === 'up' ? '↑ 上升' : t.trend_dir === 'down' ? '↓ 下降' : '→ 平稳' }}</span>
|
||
</div>
|
||
</template>
|
||
<div :ref="el => setTrendChartRef(t.kpi_id, el)" style="height:180px;"></div>
|
||
</el-card>
|
||
</div>
|
||
<el-empty v-else description="请选择KPI查看趋势" />
|
||
</div>
|
||
</el-tab-pane>
|
||
|
||
<!-- ════ 报表4：BSC评分卡 ════ -->
|
||
<el-tab-pane label="🎯 四维度绩效评分卡" name="bsc">
|
||
<div v-loading="loading">
|
||
<div class="report-desc">基于BSC框架的四维度绩效评分，从已发布战略地图构建。</div>
|
||
<div v-if="bscData.overall_score != null" style="margin-top:12px;">
|
||
<div class="bsc-overall">
|
||
<div class="bsc-score-ring" :style="{ borderColor: bscScoreColor(bscData.overall_score) }">
|
||
<span class="bsc-score-val">{{ bscData.overall_score }}</span>
|
||
<span class="bsc-score-label">综合评分</span>
|
||
</div>
|
||
<div class="bsc-map-info" v-if="bscData.map_title">基于：{{ bscData.map_title }} | 周期：{{ bscData.period }}</div>
|
||
</div>
|
||
<div class="bsc-dims">
|
||
<div v-for="dim in bscData.dimensions" :key="dim.key" class="bsc-dim-card">
|
||
<div class="bsc-dim-head" :style="{ borderLeft: '4px solid ' + dim.color }">
|
||
<span class="bsc-dim-icon">{{ dim.icon }}</span>
|
||
<span class="bsc-dim-name">{{ dim.name }}</span>
|
||
<span class="bsc-dim-score" :style="{ color: bscScoreColor(dim.score) }">{{ dim.score }}</span>
|
||
</div>
|
||
<div class="bsc-dim-body">
|
||
<div v-for="obj in dim.objectives" :key="obj.name" class="bsc-obj-row">
|
||
<div class="bsc-obj-name">{{ obj.name }}</div>
|
||
<div class="bsc-obj-kpis" v-if="obj.kpis && obj.kpis.length > 0">
|
||
<div v-for="k in obj.kpis.slice(0, 3)" :key="k.code" class="bsc-kpi-mini">
|
||
<span class="bsc-kpi-dot" :class="'dot-' + k.level"></span>
|
||
<span class="bsc-kpi-name">{{ k.name }}</span>
|
||
<span class="bsc-kpi-score">{{ k.score ?? '-' }}</span>
|
||
</div>
|
||
<div v-if="obj.kpis.length > 3" class="bsc-kpi-more">+{{ obj.kpis.length - 3 }} 更多</div>
|
||
</div>
|
||
<div v-else class="bsc-obj-empty">暂无KPI数据</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<el-empty v-else description="暂无已发布的战略地图，请先在战略地图中发布" />
|
||
</div>
|
||
</el-tab-pane>
|
||
|
||
<!-- ════ 追溯调整：2026数据按新30号准则重述 ════ -->
|
||
<el-tab-pane label="🔄 追溯调整" name="restatement">
|
||
<div v-loading="loadingRestatement">
|
||
<div class="report-desc">2026年数据按新30号准则重述 — 旧口径vs新口径双列对比，差异自动高亮。</div>
|
||
|
||
<!-- 净利润对比 -->
|
||
<div v-if="restatementNetProfit" class="restate-net-box">
|
||
<div class="restate-net-row">
|
||
<span class="restate-net-label">旧口径净利润：</span>
|
||
<span class="restate-net-val">{{ formatMoney(restatementNetProfit.old_net_profit) }}</span>
|
||
<span class="restate-net-arrow">→</span>
|
||
<span class="restate-net-label">新口径净利润：</span>
|
||
<span class="restate-net-val" :class="{ negative: restatementNetProfit.new_net_profit < 0 }">{{ formatMoney(restatementNetProfit.new_net_profit) }}</span>
|
||
<span class="restate-net-diff" :class="{ up: restatementNetProfit.difference > 0, down: restatementNetProfit.difference < 0 }">
|
||
差异：{{ restatementNetProfit.difference > 0 ? '+' : '' }}{{ formatMoney(restatementNetProfit.difference) }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 汇总统计 -->
|
||
<div v-if="restatementSummary" class="restate-summary-row">
|
||
<div class="restate-stat green"><span class="restate-stat-val">{{ restatementSummary.total_items }}</span> 总项目</div>
|
||
<div class="restate-stat red"><span class="restate-stat-val">{{ restatementSummary.adjusted_items }}</span> 需调整</div>
|
||
<div class="restate-stat blue"><span class="restate-stat-val">{{ restatementSummary.new_items }}</span> 新增</div>
|
||
<div class="restate-stat gray"><span class="restate-stat-val">{{ restatementSummary.unchanged_items }}</span> 不变</div>
|
||
</div>
|
||
|
||
<!-- 对比表格 -->
|
||
<el-table :data="restatementItems" border stripe size="small" style="width:100%;margin-top:12px;" :row-class-name="restatementRowClass">
|
||
<el-table-column prop="item_name" label="项目" width="240">
|
||
<template #default="{ row }">
|
||
<div class="restate-item-name">
|
||
<el-tag v-if="row.needs_adjustment" type="danger" size="small" effect="plain" class="restate-tag">调整</el-tag>
|
||
<el-tag v-else size="small" effect="plain" type="info" class="restate-tag">不变</el-tag>
|
||
<span :class="{ 'restate-breakdown-item': row.category === '_breakdown' }">{{ row.item_name }}</span>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="旧准则" width="160" align="right">
|
||
<template #default="{ row }">
|
||
<span :class="{ 'restate-highlight-red': row.needs_adjustment && row.old_value != null }">
|
||
{{ row.old_value != null ? formatMoney(row.old_value) : '-' }}
|
||
</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="新准则" width="160" align="right">
|
||
<template #default="{ row }">
|
||
<span :class="{ 'restate-highlight-green': row.needs_adjustment && row.new_value != null }">
|
||
{{ row.new_value != null ? formatMoney(row.new_value) : '-' }}
|
||
</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="差异" width="140" align="right">
|
||
<template #default="{ row }">
|
||
<span v-if="row.difference != null" :class="restateDiffClass(row.difference)">
|
||
{{ row.difference > 0 ? '+' : '' }}{{ formatMoney(row.difference) }}
|
||
</span>
|
||
<span v-else-if="row.needs_adjustment" class="restate-new-badge">新</span>
|
||
<span v-else style="color:#ccc;">-</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="调整原因" width="260">
|
||
<template #default="{ row }">
|
||
<span v-if="row.adjustment_reason" class="restate-reason">{{ row.adjustment_reason }}</span>
|
||
<span v-else style="color:#ccc;">-</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<div class="restate-legend">
|
||
<span class="restate-legend-item"><span class="restate-dot restate-dot-red"></span> 旧口径</span>
|
||
<span class="restate-legend-item"><span class="restate-dot restate-dot-green"></span> 新口径</span>
|
||
<span class="restate-legend-item"><span class="restate-dot restate-dot-orange"></span> 需调整项</span>
|
||
</div>
|
||
</div>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, reactive, onMounted, nextTick } from 'vue'
|
||
import { ElMessage } from 'element-plus'
|
||
import axios from 'axios'
|
||
|
||
// ── 状态 ──
|
||
const loading = ref(false)
|
||
const activeTab = ref('profit')
|
||
const reportPeriod = ref('2026-06')
|
||
|
||
function getEntityId() {
|
||
return Number(localStorage.getItem('cma_entity_id') || 1)
|
||
}
|
||
|
||
// API 配置
|
||
const api = axios.create({ baseURL: '/api/cma', timeout: 30000 })
|
||
api.interceptors.request.use((config: any) => {
|
||
const token = localStorage.getItem('cma_token')
|
||
if (token) config.headers.Authorization = `'Bearer ' + token`
|
||
return config
|
||
})
|
||
|
||
// ── 报表1：管理利润表 ──
|
||
const profitItems = ref<any[]>([])
|
||
|
||
function profitSummary(param: any) {
|
||
const sums: string[] = ['合计']
|
||
const last = profitItems.value[profitItems.value.length - 1]
|
||
if (last) {
|
||
sums.push(last.value != null ? '¥ ' + last.value.toLocaleString() : '-')
|
||
sums.push(last.prev_value != null ? '¥ ' + last.prev_value.toLocaleString() : '-')
|
||
sums.push(last.change_rate != null ? (last.change_rate > 0 ? '↑' : '↓') + Math.abs(last.change_rate).toFixed(1) + '%' : '-')
|
||
sums.push(last.ratio != null ? last.ratio.toFixed(1) + '%' : '-')
|
||
} else {
|
||
sums.push('-', '-', '-', '-')
|
||
}
|
||
return sums
|
||
}
|
||
|
||
// ── 新30号准则利润表 ──
|
||
const loadingNew30 = ref(false)
|
||
const new30Blocks = ref<any[]>([])
|
||
const new30NetProfit = ref(0)
|
||
const new30Format = ref('new')
|
||
const new30DemoMode = ref(false)
|
||
const dualComparisonData = ref<any>(null)
|
||
|
||
async function loadNew30() {
|
||
loadingNew30.value = true
|
||
dualComparisonData.value = null
|
||
try {
|
||
const params: any = { period: reportPeriod.value, entity_id: getEntityId() }
|
||
if (new30Format.value === 'dual') {
|
||
params.format = 'dual'
|
||
} else {
|
||
params.format = 'new'
|
||
}
|
||
const r = await api.get('/reports/profit-statement', { params })
|
||
const d = (r as any).data || {}
|
||
|
||
if (new30Format.value === 'dual') {
|
||
dualComparisonData.value = d
|
||
new30Blocks.value = d.new_format?.blocks || []
|
||
new30NetProfit.value = d.new_format?.net_profit ?? 0
|
||
new30DemoMode.value = !d.new_format?.all_items_have_data
|
||
} else {
|
||
dualComparisonData.value = null
|
||
new30Blocks.value = d.blocks || []
|
||
new30NetProfit.value = d.net_profit ?? 0
|
||
new30DemoMode.value = !d.all_items_have_data
|
||
}
|
||
} catch (e) {
|
||
new30Blocks.value = []
|
||
new30NetProfit.value = 0
|
||
dualComparisonData.value = null
|
||
ElMessage.error('加载新30号准则利润表失败')
|
||
} finally {
|
||
loadingNew30.value = false
|
||
}
|
||
}
|
||
|
||
function formatMoney(val: number): string {
|
||
if (val == null) return '-'
|
||
const abs = Math.abs(val)
|
||
let formatted = '¥ ' + abs.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
|
||
if (val < 0) formatted = '-' + formatted
|
||
return formatted
|
||
}
|
||
|
||
function switchNew30Format(fmt: string) {
|
||
new30Format.value = fmt
|
||
if (fmt === 'new' || fmt === 'dual') {
|
||
loadNew30()
|
||
} else {
|
||
// 切换到旧准则tab
|
||
activeTab.value = 'profit'
|
||
}
|
||
}
|
||
|
||
function exportNew30() {
|
||
ElMessage.success('导出功能将在P2实现')
|
||
}
|
||
|
||
function openSubjectManage() {
|
||
window.open('/subjects', '_blank')
|
||
}
|
||
|
||
// ── 报表2：预算执行报告 ──
|
||
const budgetSummary = ref({ total: 0, with_budget: 0, over_budget: 0, under_budget: 0, normal: 0 })
|
||
const budgetItems = ref<any[]>([])
|
||
const budgetDim = ref('')
|
||
const budgetLevel = ref('')
|
||
|
||
// ── 报表3：KPI趋势报告 ──
|
||
const trendDim = ref('')
|
||
const trendKpiId = ref<number | null>(null)
|
||
const trendMonths = ref(24)
|
||
const trendData = ref<any[]>([])
|
||
const kpiOptions = ref<any[]>([])
|
||
const trendChartRefs: Record<string, HTMLElement> = {}
|
||
|
||
function setTrendChartRef(id: number, el: any) {
|
||
if (el) trendChartRefs['chart-' + id] = el
|
||
}
|
||
|
||
// ── 报表4：BSC评分卡 ──
|
||
const bscData = ref<any>({})
|
||
|
||
// ── 追溯调整：2026年数据按新30号准则重述 ──
|
||
const loadingRestatement = ref(false)
|
||
const restatementItems = ref<any[]>([])
|
||
const restatementSummary = ref<any>(null)
|
||
const restatementNetProfit = ref<any>(null)
|
||
|
||
async function loadRestatement() {
|
||
loadingRestatement.value = true
|
||
try {
|
||
const r = await api.get('/reports/restatement', { params: { period: reportPeriod.value, entity_id: getEntityId() } })
|
||
const d = (r as any).data || {}
|
||
restatementItems.value = d.items || []
|
||
restatementSummary.value = d.summary || null
|
||
restatementNetProfit.value = d.net_profit_comparison || null
|
||
} catch (e) {
|
||
restatementItems.value = []
|
||
restatementSummary.value = null
|
||
restatementNetProfit.value = null
|
||
ElMessage.error('加载追溯调整数据失败')
|
||
} finally {
|
||
loadingRestatement.value = false
|
||
}
|
||
}
|
||
|
||
function restatementRowClass({ row }: any) {
|
||
if (row.needs_adjustment) return 'restate-row-adjusted'
|
||
return ''
|
||
}
|
||
|
||
function restatementDiffClass(diff: number) {
|
||
if (diff > 0) return 'restate-diff-up'
|
||
if (diff < 0) return 'restate-diff-down'
|
||
return 'restate-diff-zero'
|
||
}
|
||
|
||
// ── 公共 ──
|
||
const dimensions = [
|
||
{ value: 'finance', label: '财务维度' },
|
||
{ value: 'customer', label: '客户维度' },
|
||
{ value: 'process', label: '内部流程' },
|
||
{ value: 'learning', label: '学习成长' },
|
||
]
|
||
|
||
function dimLabel(d: string): string {
|
||
const map: Record<string, string> = { finance: '财务', customer: '客户', process: '内部流程', learning: '学习成长' }
|
||
return map[d] || d
|
||
}
|
||
|
||
function bscScoreColor(score: number): string {
|
||
if (score >= 80) return 'var(--bsc-process)'
|
||
if (score >= 60) return 'var(--bsc-learning)'
|
||
return '#f56c6c'
|
||
}
|
||
|
||
function onPeriodChange() {
|
||
loadAll()
|
||
}
|
||
|
||
// ── 加载 ──
|
||
async function loadProfit() {
|
||
try {
|
||
const r = await api.get('/reports/profit-summary', { params: { period: reportPeriod.value, entity_id: getEntityId() } })
|
||
profitItems.value = (r as any).data?.items || []
|
||
} catch { profitItems.value = [] }
|
||
}
|
||
|
||
async function loadBudget() {
|
||
try {
|
||
const params: any = { period: reportPeriod.value, entity_id: getEntityId() }
|
||
if (budgetDim.value) params.dimension = budgetDim.value
|
||
if (budgetLevel.value) params.alert_level = budgetLevel.value
|
||
const r = await api.get('/reports/budget-execution', { params })
|
||
const d = (r as any).data || {}
|
||
budgetSummary.value = d.summary || {}
|
||
budgetItems.value = d.items || []
|
||
} catch { budgetItems.value = [] }
|
||
}
|
||
|
||
async function loadTrends() {
|
||
try {
|
||
const params: any = { months: trendMonths.value, entity_id: getEntityId() }
|
||
if (trendKpiId.value) params.kpi_id = trendKpiId.value
|
||
else if (trendDim.value) params.dimension = trendDim.value
|
||
const r = await api.get('/reports/kpi-trends', { params })
|
||
trendData.value = (r as any).data?.data || []
|
||
nextTick(() => renderTrendCharts())
|
||
} catch { trendData.value = [] }
|
||
}
|
||
|
||
async function loadBsc() {
|
||
try {
|
||
const r = await api.get('/reports/bsc-scorecard', { params: { period: reportPeriod.value, entity_id: getEntityId() } })
|
||
bscData.value = (r as any).data || {}
|
||
} catch { bscData.value = {} }
|
||
}
|
||
|
||
async function loadKpiOptions() {
|
||
try {
|
||
const r = await api.get('/kpis', { params: { page_size: 100, entity_id: getEntityId() } })
|
||
kpiOptions.value = (r as any).data?.data || []
|
||
} catch {}
|
||
}
|
||
|
||
function loadAll() {
|
||
loading.value = true
|
||
Promise.all([loadProfit(), loadNew30(), loadBudget(), loadTrends(), loadBsc(), loadRestatement()]).finally(() => { loading.value = false })
|
||
}
|
||
|
||
function openDupont() {
|
||
window.open('/dupont-analysis', '_blank')
|
||
}
|
||
|
||
// ── ECharts 渲染 ──
|
||
function renderTrendCharts() {
|
||
import('echarts').then(echarts => {
|
||
trendData.value.forEach((t: any) => {
|
||
const el = trendChartRefs['chart-' + t.kpi_id]
|
||
if (!el) return
|
||
const existing = echarts.getInstanceByDom(el)
|
||
if (existing) existing.dispose()
|
||
const chart = echarts.init(el)
|
||
const dates = t.trend.map((d: any) => d.period)
|
||
const values = t.trend.map((d: any) => d.value)
|
||
const series: any[] = [{
|
||
type: 'line', data: values, smooth: true, lineStyle: { width: 2 },
|
||
areaStyle: { opacity: 0.1 }, symbol: 'circle', symbolSize: 4,
|
||
name: '实际值',
|
||
}]
|
||
if (t.target_value != null) {
|
||
series.push({
|
||
type: 'line', data: Array(dates.length).fill(t.target_value),
|
||
lineStyle: { type: 'dashed', width: 1, color: '#f56c6c' },
|
||
symbol: 'none', name: '目标值',
|
||
})
|
||
}
|
||
chart.setOption({
|
||
grid: { left: 50, right: 15, top: 10, bottom: 28 },
|
||
xAxis: { type: 'category', data: dates, axisLabel: { fontSize: 10, rotate: 45 } },
|
||
yAxis: { type: 'value', splitLine: { lineStyle: { type: 'dashed', color: '#eee' } } },
|
||
series,
|
||
tooltip: { trigger: 'axis' },
|
||
legend: { show: true, bottom: 0, icon: 'circle', itemWidth: 8, itemHeight: 8 },
|
||
})
|
||
})
|
||
})
|
||
}
|
||
|
||
// ── 排序 ──
|
||
function onBudgetSort(sort: any) {
|
||
if (!sort.prop || !sort.order) return
|
||
const items = [...budgetItems.value]
|
||
items.sort((a: any, b: any) => {
|
||
const av = a[sort.prop] ?? 0
|
||
const bv = b[sort.prop] ?? 0
|
||
return sort.order === 'ascending' ? av - bv : bv - av
|
||
})
|
||
budgetItems.value = items
|
||
}
|
||
|
||
onMounted(() => {
|
||
loadKpiOptions()
|
||
loadAll()
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.report-page { max-width: 1400px; margin: 0 auto; }
|
||
.report-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
|
||
.header-right { display: flex; gap: 8px; align-items: center; }
|
||
.report-tabs { margin-bottom: 20px; }
|
||
.report-desc { font-size: 13px; color: #888; padding: 8px 0; }
|
||
|
||
/* 统计卡片 */
|
||
.summary-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
|
||
.stat-card { background: #fff; border-radius: 8px; padding: 12px 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); border-top: 3px solid #ccc; }
|
||
.stat-card.blue { border-top-color: #409eff; }
|
||
.stat-card.red { border-top-color: #f56c6c; }
|
||
.stat-card.green { border-top-color: #67c23a; }
|
||
.stat-card.yellow { border-top-color: var(--bsc-learning); }
|
||
.stat-card.gray { border-top-color: #909399; }
|
||
.stat-val { font-size: 22px; font-weight: 700; color: #1a1a2e; }
|
||
.stat-label { font-size: 12px; color: #888; margin-top: 2px; }
|
||
|
||
/* 趋势卡片 */
|
||
.trend-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; margin-top: 12px; }
|
||
.trend-card-2 { border-radius: 10px; }
|
||
.trend-hd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
|
||
.trend-name { font-weight: 600; font-size: 14px; flex: 1; }
|
||
.trend-unit { color: #999; font-size: 12px; }
|
||
.trend-stat { font-size: 11px; color: #999; }
|
||
.trend-dir { font-size: 11px; padding: 2px 8px; border-radius: 4px; }
|
||
.trend-dir.up { background: #fff1f0; color: #cf1322; }
|
||
.trend-dir.down { background: #f6ffed; color: #389e0d; }
|
||
.trend-dir.stable { background: #f5f5f5; color: #999; }
|
||
|
||
/* BSC评分卡 */
|
||
.bsc-overall { text-align: center; padding: 20px 0; }
|
||
.bsc-score-ring {
|
||
display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
|
||
width: 120px; height: 120px; border-radius: 50%; border: 6px solid #67c23a;
|
||
background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,0.08);
|
||
}
|
||
.bsc-score-val { font-size: 36px; font-weight: 700; color: #1a1a2e; line-height: 1.1; }
|
||
.bsc-score-label { font-size: 12px; color: #999; margin-top: 2px; }
|
||
.bsc-map-info { font-size: 12px; color: #999; margin-top: 8px; }
|
||
.bsc-dims { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-top: 16px; }
|
||
.bsc-dim-card { background: #fff; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); overflow: hidden; }
|
||
.bsc-dim-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: #fafafa; }
|
||
.bsc-dim-icon { font-size: 18px; }
|
||
.bsc-dim-name { font-weight: 600; font-size: 14px; flex: 1; }
|
||
.bsc-dim-score { font-size: 24px; font-weight: 700; }
|
||
.bsc-dim-body { padding: 10px 14px; }
|
||
.bsc-obj-row { margin-bottom: 10px; }
|
||
.bsc-obj-name { font-size: 13px; font-weight: 500; color: #555; margin-bottom: 4px; }
|
||
.bsc-obj-kpis { display: flex; flex-direction: column; gap: 3px; }
|
||
.bsc-kpi-mini { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 2px 6px; background: #f9f9f9; border-radius: 4px; }
|
||
.bsc-kpi-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
|
||
.dot-green { background: #67c23a; }
|
||
.dot-yellow { background: var(--bsc-learning); }
|
||
.dot-red { background: #f56c6c; }
|
||
.dot-gray { background: #ddd; }
|
||
.bsc-kpi-name { flex: 1; color: #666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.bsc-kpi-score { font-weight: 600; color: #333; }
|
||
.bsc-kpi-more { font-size: 11px; color: #409eff; text-align: center; padding: 2px; }
|
||
.bsc-obj-empty { font-size: 11px; color: #ccc; text-align: center; padding: 4px; }
|
||
|
||
/* 新30号准则样式 */
|
||
.new30-blocks { margin-top: 12px; }
|
||
.new30-block { background: #fff; border-radius: 8px; margin-bottom: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); border: 1px solid #ebeef5; overflow: hidden; }
|
||
.new30-block-header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; background: #f9fafc; border-bottom: 1px solid #ebeef5; transition: background 0.2s; }
|
||
.new30-block-header:hover { background: #f0f2f5; }
|
||
.new30-toggle { font-size: 10px; color: #999; width: 16px; }
|
||
.new30-block-name { font-weight: 600; font-size: 14px; flex: 1; color: #1a1a2e; }
|
||
.new30-block-subtotal { font-size: 16px; font-weight: 700; color: #1a1a2e; min-width: 120px; text-align: right; }
|
||
.new30-block-subtotal.negative { color: #f56c6c; }
|
||
.new30-block-label { font-size: 11px; color: #999; width: 80px; }
|
||
.new30-demo-tag { font-size: 10px; background: #fff7e6; color: #d46b08; padding: 1px 6px; border-radius: 3px; }
|
||
.new30-block-body { padding: 6px 14px 10px 38px; }
|
||
.new30-item { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px dashed #f0f0f0; }
|
||
.new30-item:last-child { border-bottom: none; }
|
||
.new30-item-name { flex: 1; font-size: 13px; color: #555; }
|
||
.new30-item-amount { font-size: 13px; font-weight: 500; min-width: 120px; text-align: right; color: #333; }
|
||
.new30-item-amount.negative { color: #f56c6c; }
|
||
.new30-item-ratio { font-size: 11px; color: #bbb; width: 60px; text-align: right; }
|
||
.new30-net-profit { margin-top: 16px; padding: 12px 16px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 8px; color: #fff; }
|
||
.new30-profit-row { display: flex; align-items: center; gap: 12px; }
|
||
.new30-profit-label { font-size: 14px; opacity: 0.9; }
|
||
.new30-profit-value { font-size: 24px; font-weight: 700; flex: 1; }
|
||
.new30-profit-value.negative { color: #ffccc7; }
|
||
.new30-profit-name { font-size: 13px; opacity: 0.8; }
|
||
.new30-footer { margin-top: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
|
||
.new30-demo-hint { font-size: 11px; color: #d46b08; margin-left: 8px; }
|
||
|
||
/* 追溯调整样式 */
|
||
.restate-net-box { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 8px; padding: 14px 18px; color: #fff; margin-top: 12px; }
|
||
.restate-net-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
|
||
.restate-net-label { font-size: 13px; opacity: 0.9; }
|
||
.restate-net-val { font-size: 18px; font-weight: 700; }
|
||
.restate-net-val.negative { color: #ffccc7; }
|
||
.restate-net-arrow { font-size: 18px; opacity: 0.7; }
|
||
.restate-net-diff { font-size: 13px; padding: 2px 10px; border-radius: 4px; }
|
||
.restate-net-diff.up { background: rgba(255,255,255,0.2); color: #b7eb8f; }
|
||
.restate-net-diff.down { background: rgba(255,255,255,0.2); color: #ffccc7; }
|
||
.restate-summary-row { display: flex; gap: 12px; margin-top: 12px; }
|
||
.restate-stat { padding: 8px 14px; border-radius: 6px; font-size: 13px; color: #555; border-left: 3px solid #ccc; background: #fafafa; }
|
||
.restate-stat.green { border-left-color: #67c23a; }
|
||
.restate-stat.red { border-left-color: #f56c6c; }
|
||
.restate-stat.blue { border-left-color: #409eff; }
|
||
.restate-stat.gray { border-left-color: #909399; }
|
||
.restate-stat-val { font-weight: 700; font-size: 16px; margin-right: 4px; }
|
||
.restate-item-name { display: flex; align-items: center; gap: 6px; }
|
||
.restate-tag { flex-shrink: 0; }
|
||
.restate-breakdown-item { padding-left: 16px; color: #666; font-size: 12px; }
|
||
.restate-highlight-red { background: #fff1f0; padding: 1px 4px; border-radius: 2px; font-weight: 600; color: #cf1322; }
|
||
.restate-highlight-green { background: #f6ffed; padding: 1px 4px; border-radius: 2px; font-weight: 600; color: #389e0d; }
|
||
.restate-diff-up { color: #f56c6c; font-weight: 600; }
|
||
.restate-diff-down { color: #67c23a; font-weight: 600; }
|
||
.restate-diff-zero { color: #999; }
|
||
.restate-new-badge { background: #409eff; color: #fff; padding: 1px 6px; border-radius: 3px; font-size: 11px; }
|
||
.restate-reason { font-size: 12px; color: #d46b08; }
|
||
.restate-legend { display: flex; gap: 16px; margin-top: 12px; padding: 8px 12px; background: #fafafa; border-radius: 6px; font-size: 12px; color: #666; }
|
||
.restate-legend-item { display: flex; align-items: center; gap: 4px; }
|
||
.restate-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
|
||
.restate-dot-red { background: #cf1322; }
|
||
.restate-dot-green { background: #389e0d; }
|
||
.restate-dot-orange { background: #d46b08; }
|
||
|
||
/* 双列对比样式 */
|
||
.dual-comparison { margin-top: 12px; }
|
||
.dual-desc { font-size: 13px; color: #888; margin-bottom: 12px; }
|
||
.dual-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
|
||
@media screen and (max-width: 1000px) { .dual-grid { grid-template-columns: 1fr; } }
|
||
.dual-col { background: #fff; border-radius: 8px; border: 1px solid #ebeef5; overflow: hidden; }
|
||
.dual-col-header { padding: 10px 14px; font-weight: 600; font-size: 14px; color: #fff; }
|
||
.dual-col-header.old-col { background: #909399; }
|
||
.dual-col-header.new-col { background: #409eff; }
|
||
.dual-blocks { padding: 8px; }
|
||
.dual-block { margin-bottom: 8px; border: 1px solid #ebeef5; border-radius: 4px; overflow: hidden; }
|
||
.dual-block-header { display: flex; justify-content: space-between; padding: 6px 10px; background: #f9fafc; font-size: 13px; font-weight: 600; }
|
||
.dual-block-subtotal { color: #1a1a2e; }
|
||
.dual-block-item { display: flex; justify-content: space-between; padding: 4px 10px 4px 16px; font-size: 12px; color: #555; border-top: 1px dashed #f0f0f0; }
|
||
.dual-item-name { flex: 1; }
|
||
.dual-item-amount { font-weight: 500; }
|
||
.dual-net-profit { padding: 10px 14px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; border-radius: 4px; margin: 8px; display: flex; align-items: center; gap: 8px; font-size: 14px; }
|
||
.dual-net-val { font-size: 18px; font-weight: 700; flex: 1; }
|
||
</style>
|