288 lines
18 KiB
Plaintext
288 lines
18 KiB
Plaintext
<template>
|
||
<div>
|
||
<h3>预测模拟</h3>
|
||
|
||
<el-tabs v-model="activeTab" style="margin-top:16px;">
|
||
<!-- Tab 1: CVP本量利分析 -->
|
||
<el-tab-pane label="本量利分析" name="cvp">
|
||
<el-row :gutter="16">
|
||
<el-col :span="10">
|
||
<el-card>
|
||
<template #header>输入参数</template>
|
||
<el-form :model="cvpForm" label-width="140px">
|
||
<el-form-item label="产品单价"><el-input-number v-model="cvpForm.unit_price" :min="0" :precision="2" style="width:200px;" /></el-form-item>
|
||
<el-form-item label="单位变动成本"><el-input-number v-model="cvpForm.unit_variable_cost" :min="0" :precision="2" style="width:200px;" /></el-form-item>
|
||
<el-form-item label="固定成本"><el-input-number v-model="cvpForm.fixed_cost" :min="0" :precision="2" style="width:200px;" /></el-form-item>
|
||
<el-form-item label="实际销量（可选）"><el-input-number v-model="cvpForm.actual_volume" :min="0" style="width:200px;" /></el-form-item>
|
||
<el-form-item label="目标利润（可选）"><el-input-number v-model="cvpForm.target_profit" :min="0" :precision="2" style="width:200px;" /></el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="doCvp" :loading="cvpLoading">计算</el-button>
|
||
<el-button @click="cvpForm = { unit_price: 100, unit_variable_cost: 60, fixed_cost: 50000, actual_volume: 2000, target_profit: 20000 }">填充示例</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="14">
|
||
<el-card v-if="cvpResult.bep_units">
|
||
<template #header>分析结果</template>
|
||
<el-row :gutter="12">
|
||
<el-col :span="8"><div class="result-card"><div class="r-label">保本销量</div><div class="r-value">{{ cvpResult.bep_units }} 件</div></div></el-col>
|
||
<el-col :span="8"><div class="result-card"><div class="r-label">保本销售额</div><div class="r-value">{{ formatMoney(cvpResult.bep_revenue) }}</div></div></el-col>
|
||
<el-col :span="8"><div class="result-card"><div class="r-label">边际贡献率</div><div class="r-value blue">{{ cvpResult.contribution_ratio }}%</div></div></el-col>
|
||
</el-row>
|
||
<el-row :gutter="12" style="margin-top:12px;">
|
||
<el-col :span="8" v-if="cvpResult.safety_margin_units !== undefined"><div class="result-card"><div class="r-label">安全边际（量）</div><div class="r-value green">{{ cvpResult.safety_margin_units }} 件</div></div></el-col>
|
||
<el-col :span="8" v-if="cvpResult.safety_margin_ratio !== undefined"><div class="result-card"><div class="r-label">安全边际率</div><div class="r-value" :class="safetyColor(cvpResult.safety_margin_ratio)">{{ cvpResult.safety_margin_ratio }}%</div></div></el-col>
|
||
<el-col :span="8" v-if="cvpResult.actual_profit !== undefined"><div class="result-card"><div class="r-label">当前利润</div><div class="r-value orange">{{ formatMoney(cvpResult.actual_profit) }}</div></div></el-col>
|
||
</el-row>
|
||
<el-row :gutter="12" style="margin-top:12px;" v-if="cvpResult.target_units">
|
||
<el-col :span="12"><div class="result-card"><div class="r-label">目标利润所需销量</div><div class="r-value purple">{{ cvpResult.target_units }} 件</div></div></el-col>
|
||
<el-col :span="12"><div class="result-card"><div class="r-label">目标利润所需收入</div><div class="r-value purple">{{ formatMoney(cvpResult.target_revenue) }}</div></div></el-col>
|
||
</el-row>
|
||
</el-card>
|
||
<el-empty v-else-if="!cvpLoading" description="输入参数后点击「计算」" style="padding:40px 0;" />
|
||
</el-col>
|
||
</el-row>
|
||
</el-tab-pane>
|
||
|
||
<!-- Tab 2: 投资决策 -->
|
||
<el-tab-pane label="投资决策" name="investment">
|
||
<el-row :gutter="16">
|
||
<el-col :span="10">
|
||
<el-card>
|
||
<template #header>输入参数</template>
|
||
<el-form :model="invForm" label-width="140px">
|
||
<el-form-item label="初始投资"><el-input-number v-model="invForm.initial_investment" :min="0" :precision="2" style="width:200px;" /></el-form-item>
|
||
<el-form-item label="折现率(%)"><el-input-number v-model="invForm.discount_rate" :min="0" :max="100" :precision="1" style="width:200px;" /></el-form-item>
|
||
<el-form-item label="现金流（每年）">
|
||
<div v-for="(cf, idx) in invForm.cash_flows" :key="idx" style="display:flex;gap:8px;margin-bottom:4px;">
|
||
<span style="line-height:32px;width:80px;">第{{ idx+1 }}年</span>
|
||
<el-input-number v-model="invForm.cash_flows[idx]" :min="0" :precision="2" style="width:150px;" />
|
||
<el-button v-if="invForm.cash_flows.length > 1" size="small" type="danger" @click="invForm.cash_flows.splice(idx, 1)">×</el-button>
|
||
</div>
|
||
<el-button size="small" @click="invForm.cash_flows.push(0)">+ 添加年份</el-button>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="doInvestment" :loading="invLoading">计算</el-button>
|
||
<el-button @click="fillInvExample">填充示例</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="14">
|
||
<el-card v-if="invResult.npv_analysis">
|
||
<template #header>分析结果</template>
|
||
<el-row :gutter="12">
|
||
<el-col :span="8"><div class="result-card"><div class="r-label">净现值 (NPV)</div><div class="r-value" :class="invResult.npv_analysis.npv > 0 ? 'green' : 'red'">{{ formatMoney(invResult.npv_analysis.npv) }}</div></div></el-col>
|
||
<el-col :span="8"><div class="result-card"><div class="r-label">内部收益率 (IRR)</div><div class="r-value blue">{{ invResult.irr_analysis.irr }}%</div></div></el-col>
|
||
<el-col :span="8"><div class="result-card"><div class="r-label">盈利指数 (PI)</div><div class="r-value purple">{{ invResult.npv_analysis.profitability_index }}</div></div></el-col>
|
||
</el-row>
|
||
<el-row :gutter="12" style="margin-top:12px;">
|
||
<el-col :span="8"><div class="result-card"><div class="r-label">静态回收期</div><div class="r-value">{{ invResult.irr_analysis.payback_period || '--' }} 年</div></div></el-col>
|
||
<el-col :span="8"><div class="result-card"><div class="r-label">动态回收期</div><div class="r-value">{{ invResult.irr_analysis.discounted_payback_period || '>N期' }} 年</div></div></el-col>
|
||
<el-col :span="8"><div class="result-card"><div class="r-label">可行性</div><div class="r-value" :class="invResult.npv_analysis.is_viable ? 'green' : 'red'">{{ invResult.npv_analysis.is_viable ? '✅ 可行' : '❌ 不可行' }}</div></div></el-col>
|
||
</el-row>
|
||
</el-card>
|
||
<el-empty v-else-if="!invLoading" description="输入参数后点击「计算」" style="padding:40px 0;" />
|
||
</el-col>
|
||
</el-row>
|
||
</el-tab-pane>
|
||
|
||
<!-- Tab 3: 敏感性分析 -->
|
||
<el-tab-pane label="敏感性分析" name="sensitivity">
|
||
<el-row :gutter="16">
|
||
<el-col :span="10">
|
||
<el-card>
|
||
<template #header>输入参数</template>
|
||
<el-form :model="sensForm" label-width="140px">
|
||
<el-form-item label="基准收入"><el-input-number v-model="sensForm.base_revenue" :min="0" :precision="2" style="width:200px;" /></el-form-item>
|
||
<el-form-item label="基准成本"><el-input-number v-model="sensForm.base_cost" :min="0" :precision="2" style="width:200px;" /></el-form-item>
|
||
<el-form-item label="变动步长(%)"><el-input-number v-model="sensForm.step" :min="1" :max="50" style="width:200px;" /></el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="doSensitivity" :loading="sensLoading">计算</el-button>
|
||
<el-button @click="sensForm = { base_revenue: 1000000, base_cost: 700000, step: 5 }">填充示例</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="14">
|
||
<el-card v-if="sensResult.base_revenue">
|
||
<template #header>
|
||
敏感性分析结果 — 基准利润：{{ formatMoney(sensResult.base_profit) }}
|
||
</template>
|
||
<el-table :data="sensResult.factors" border stripe size="small" style="width:100%;" max-height="400">
|
||
<el-table-column prop="change_pct" label="变动%" width="70" align="center">
|
||
<template #default="{ row }"><span :style="{ color: row.change_pct > 0 ? '#f56c6c' : '#67c23a', fontWeight:600 }">{{ row.change_pct > 0 ? '+' : '' }}{{ row.change_pct }}%</span></template>
|
||
</el-table-column>
|
||
<el-table-column prop="revenue_change_profit" label="收入变动→利润" width="130" align="right"><template #default="{ row }">{{ formatMoney(row.revenue_change_profit) }}</template></el-table-column>
|
||
<el-table-column prop="revenue_sensitivity" label="收入敏感度" width="100" align="right"><template #default="{ row }"><span :style="{ color: row.revenue_sensitivity < 0 ? '#f56c6c' : '#67c23a' }">{{ row.revenue_sensitivity > 0 ? '+' : '' }}{{ row.revenue_sensitivity }}%</span></template></el-table-column>
|
||
<el-table-column prop="cost_change_profit" label="成本变动→利润" width="130" align="right"><template #default="{ row }">{{ formatMoney(row.cost_change_profit) }}</template></el-table-column>
|
||
<el-table-column prop="cost_sensitivity" label="成本敏感度" width="100" align="right"><template #default="{ row }"><span :style="{ color: row.cost_sensitivity < 0 ? '#f56c6c' : '#67c23a' }">{{ row.cost_sensitivity > 0 ? '+' : '' }}{{ row.cost_sensitivity }}%</span></template></el-table-column>
|
||
</el-table>
|
||
</el-card>
|
||
<el-empty v-else-if="!sensLoading" description="输入参数后点击「计算」" style="padding:40px 0;" />
|
||
</el-col>
|
||
</el-row>
|
||
</el-tab-pane>
|
||
|
||
<!-- Tab 4: 情景模拟 -->
|
||
<el-tab-pane label="情景模拟" name="scenario">
|
||
<el-row :gutter="16">
|
||
<el-col :span="10">
|
||
<el-card>
|
||
<template #header>输入三个情景</template>
|
||
<el-form label-width="120px">
|
||
<div style="margin-bottom:12px;">
|
||
<el-tag type="success" size="small">乐观情景</el-tag>
|
||
<div style="display:flex;gap:8px;margin-top:4px;">
|
||
<el-input-number v-model="scenarioForm.optimistic.revenue" placeholder="收入" :min="0" :precision="2" style="width:150px;" />
|
||
<el-input-number v-model="scenarioForm.optimistic.cost" placeholder="成本" :min="0" :precision="2" style="width:150px;" />
|
||
</div>
|
||
</div>
|
||
<div style="margin-bottom:12px;">
|
||
<el-tag type="warning" size="small">中性情景</el-tag>
|
||
<div style="display:flex;gap:8px;margin-top:4px;">
|
||
<el-input-number v-model="scenarioForm.base.revenue" :min="0" :precision="2" style="width:150px;" />
|
||
<el-input-number v-model="scenarioForm.base.cost" :min="0" :precision="2" style="width:150px;" />
|
||
</div>
|
||
</div>
|
||
<div style="margin-bottom:12px;">
|
||
<el-tag type="danger" size="small">悲观情景</el-tag>
|
||
<div style="display:flex;gap:8px;margin-top:4px;">
|
||
<el-input-number v-model="scenarioForm.pessimistic.revenue" :min="0" :precision="2" style="width:150px;" />
|
||
<el-input-number v-model="scenarioForm.pessimistic.cost" :min="0" :precision="2" style="width:150px;" />
|
||
</div>
|
||
</div>
|
||
<el-button type="primary" @click="doScenario" :loading="scenarioLoading">模拟</el-button>
|
||
<el-button @click="fillScenarioExample">填充示例</el-button>
|
||
</el-form>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="14">
|
||
<el-card v-if="scenarioResult.scenarios">
|
||
<template #header>
|
||
模拟结果
|
||
<span style="margin-left:12px;font-size:12px;color:#999;">
|
||
期望利润：{{ formatMoney(scenarioResult.expected_profit) }}
|
||
| 标准差：{{ formatMoney(scenarioResult.std_deviation) }}
|
||
</span>
|
||
</template>
|
||
<el-table :data="scenarioResult.scenarios" border stripe size="small" style="width:100%;">
|
||
<el-table-column prop="scenario" label="情景" width="80">
|
||
<template #default="{ row }">
|
||
<el-tag :type="row.scenario === '乐观' ? 'success' : row.scenario === '中性' ? 'warning' : 'danger'" size="small">{{ row.scenario }}</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="revenue" label="收入" width="100" align="right"><template #default="{ row }">{{ formatMoney(row.revenue) }}</template></el-table-column>
|
||
<el-table-column prop="cost" label="成本" width="100" align="right"><template #default="{ row }">{{ formatMoney(row.cost) }}</template></el-table-column>
|
||
<el-table-column prop="profit" label="利润" width="100" align="right">
|
||
<template #default="{ row }"><span :style="{ color: row.profit >= 0 ? '#67c23a' : '#f56c6c', fontWeight:600 }">{{ formatMoney(row.profit) }}</span></template>
|
||
</el-table-column>
|
||
<el-table-column prop="profit_margin" label="利润率" width="80" align="right"><template #default="{ row }">{{ row.profit_margin }}%</template></el-table-column>
|
||
<el-table-column prop="deviation_from_base" label="偏差" width="100" align="right">
|
||
<template #default="{ row }"><span :style="{ color: row.deviation_from_base > 0 ? '#67c23a' : '#f56c6c' }">{{ row.deviation_from_base > 0 ? '+' : '' }}{{ formatMoney(row.deviation_from_base) }}</span></template>
|
||
</el-table-column>
|
||
<el-table-column prop="deviation_pct" label="偏差%" width="80" align="right"><template #default="{ row }">{{ row.deviation_pct }}%</template></el-table-column>
|
||
</el-table>
|
||
</el-card>
|
||
<el-empty v-else-if="!scenarioLoading" description="输入三个情景后点击「模拟」" style="padding:40px 0;" />
|
||
</el-col>
|
||
</el-row>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref } from 'vue'
|
||
import { ElMessage } from 'element-plus'
|
||
import { predictApi } from '../api/index'
|
||
|
||
const activeTab = ref('cvp')
|
||
|
||
function formatMoney(v: any) {
|
||
if (v === null || v === undefined) return '--'
|
||
return Number(v).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
|
||
}
|
||
function safetyColor(r: number) { return r > 25 ? 'green' : r > 10 ? 'orange' : 'red' }
|
||
|
||
// ── CVP ──
|
||
const cvpLoading = ref(false)
|
||
const cvpForm = ref({ unit_price: 100, unit_variable_cost: 60, fixed_cost: 50000, actual_volume: 2000, target_profit: 20000 })
|
||
const cvpResult = ref<any>({})
|
||
|
||
async function doCvp() {
|
||
cvpLoading.value = true
|
||
try {
|
||
cvpResult.value = await predictApi.cvp(cvpForm.value) as any
|
||
} catch { ElMessage.error('CVP计算失败') }
|
||
cvpLoading.value = false
|
||
}
|
||
|
||
// ── 投资决策 ──
|
||
const invLoading = ref(false)
|
||
const invForm = ref({ initial_investment: 100000, discount_rate: 10, cash_flows: [30000, 40000, 50000, 40000] })
|
||
const invResult = ref<any>({})
|
||
|
||
function fillInvExample() {
|
||
invForm.value = { initial_investment: 100000, discount_rate: 10, cash_flows: [30000, 40000, 50000, 40000] }
|
||
}
|
||
|
||
async function doInvestment() {
|
||
invLoading.value = true
|
||
try {
|
||
invResult.value = await predictApi.investment(invForm.value) as any
|
||
} catch { ElMessage.error('投资决策计算失败') }
|
||
invLoading.value = false
|
||
}
|
||
|
||
// ── 敏感性 ──
|
||
const sensLoading = ref(false)
|
||
const sensForm = ref({ base_revenue: 1000000, base_cost: 700000, step: 5 })
|
||
const sensResult = ref<any>({})
|
||
|
||
async function doSensitivity() {
|
||
sensLoading.value = true
|
||
try {
|
||
sensResult.value = await predictApi.sensitivity(sensForm.value) as any
|
||
} catch { ElMessage.error('敏感性分析失败') }
|
||
sensLoading.value = false
|
||
}
|
||
|
||
// ── 情景 ──
|
||
const scenarioLoading = ref(false)
|
||
const scenarioForm = ref({
|
||
optimistic: { revenue: 130, cost: 90 },
|
||
base: { revenue: 100, cost: 100 },
|
||
pessimistic: { revenue: 80, cost: 110 },
|
||
})
|
||
const scenarioResult = ref<any>({})
|
||
|
||
function fillScenarioExample() {
|
||
scenarioForm.value = {
|
||
optimistic: { revenue: 130, cost: 90 },
|
||
base: { revenue: 100, cost: 100 },
|
||
pessimistic: { revenue: 80, cost: 110 },
|
||
}
|
||
}
|
||
|
||
async function doScenario() {
|
||
scenarioLoading.value = true
|
||
try {
|
||
scenarioResult.value = await predictApi.scenario(scenarioForm.value) as any
|
||
} catch { ElMessage.error('情景模拟失败') }
|
||
scenarioLoading.value = false
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.result-card { background: #f5f7fa; border-radius: 8px; padding: 16px; text-align: center; }
|
||
.r-label { font-size: 12px; color: #909399; margin-bottom: 6px; }
|
||
.r-value { font-size: 22px; font-weight: bold; color: #303133; }
|
||
.r-value.green { color: #67c23a; }
|
||
.r-value.blue { color: #409eff; }
|
||
.r-value.orange { color: #e6a23c; }
|
||
.r-value.red { color: #f56c6c; }
|
||
.r-value.purple { color: #8b5cf6; }
|
||
</style>
|