317 lines
11 KiB
Vue
317 lines
11 KiB
Vue
<template>
|
||
<div class="dupont-analysis" v-loading="loading">
|
||
<div class="page-header">
|
||
<h3 class="page-title">杜邦分析</h3>
|
||
</div>
|
||
<!-- 顶部控制 -->
|
||
<div class="flex-row" style="gap:12px;margin-bottom:16px;align-items:center;">
|
||
<span style="font-weight:600;font-size:14px;">分析对象：</span>
|
||
<el-radio-group v-model="entity" @change="fetchDupont">
|
||
<el-radio value="bohai">陕西博海科技（IT服务）</el-radio>
|
||
<el-radio value="hanke">陕西酣客（白酒经销）</el-radio>
|
||
</el-radio-group>
|
||
<el-button type="primary" size="small" @click="fetchDupont" :loading="loading">刷新</el-button>
|
||
</div>
|
||
|
||
<template v-if="data.roe !== null && data.roe !== undefined">
|
||
<!-- 1. ROE大数字 -->
|
||
<div class="roe-hero">
|
||
<div class="roe-value">{{ formatPct(data.roe) }}<span class="roe-unit">%</span></div>
|
||
<div class="roe-label">净资产收益率 (ROE) — {{ data.entity_name }} {{ data.period }}</div>
|
||
<div class="roe-change" :class="data.roe_trend || 'stable'">
|
||
<span v-if="data.roe_trend === 'up'">↑</span>
|
||
<span v-else-if="data.roe_trend === 'down'">↓</span>
|
||
<span v-else>→</span>
|
||
{{ data.roe_change != null ? (data.roe_change > 0 ? '+' : '') + data.roe_change.toFixed(2) + '%' : '无对比' }}
|
||
<span class="change-sub">较上期 ({{ data.prev_roe != null ? data.prev_roe + '%' : '-' }})</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 2. 三因子卡片 -->
|
||
<div class="factor-cards" v-if="data.factors">
|
||
<div class="factor-card" v-for="(f, key) in data.factors" :key="key">
|
||
<div class="factor-value">{{ formatFactor(f.value, key) }}</div>
|
||
<div class="factor-label">{{ f.label }}</div>
|
||
<div class="factor-desc">{{ f.desc }}</div>
|
||
<div class="factor-assessment">{{ f.status }} {{ f.assessment }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 3. 杜邦拆解树 -->
|
||
<div class="dupont-tree">
|
||
<div class="tree-title">杜邦拆解链路</div>
|
||
<div class="tree-container">
|
||
<!-- 第一层：ROE -->
|
||
<div class="tree-node tree-root">
|
||
<div class="node-value">{{ formatPct(data.roe) }}%</div>
|
||
<div class="node-label">ROE = 净利润率 × 资产周转率 × 财务杠杆</div>
|
||
</div>
|
||
<!-- 连线 -->
|
||
<div class="tree-lines">
|
||
<div class="line-vertical"></div>
|
||
<div class="line-horizontal">
|
||
<div class="line-point"></div>
|
||
<div class="line-point"></div>
|
||
<div class="line-point"></div>
|
||
</div>
|
||
</div>
|
||
<!-- 第二层：三因子 -->
|
||
<div class="tree-row" v-if="data.factors">
|
||
<div class="tree-node tree-factor" v-for="(f, key) in data.factors" :key="'f-'+key">
|
||
<div class="node-value">{{ formatFactor(f.value, key) }}</div>
|
||
<div class="node-label">{{ f.label }}</div>
|
||
<div class="node-desc">{{ f.desc }}</div>
|
||
</div>
|
||
</div>
|
||
<!-- 连线 第二层到第三层 -->
|
||
<div class="tree-lines-second">
|
||
<div class="sub-lines">
|
||
<div class="line-vertical"></div>
|
||
<div class="line-horizontal"><div class="line-point"></div><div class="line-point"></div></div>
|
||
</div>
|
||
<div class="sub-lines">
|
||
<div class="line-vertical"></div>
|
||
<div class="line-horizontal"><div class="line-point"></div><div class="line-point"></div></div>
|
||
</div>
|
||
<div class="sub-lines">
|
||
<div class="line-vertical"></div>
|
||
<div class="line-horizontal"><div class="line-point"></div><div class="line-point"></div></div>
|
||
</div>
|
||
</div>
|
||
<!-- 第三层：原始数据 -->
|
||
<div class="tree-row" v-if="data.raw_data">
|
||
<div class="tree-node tree-leaf">
|
||
<div class="node-value">{{ formatMoney(data.raw_data.net_profit) }}</div>
|
||
<div class="node-label">净利润</div>
|
||
<div class="node-hint">÷ {{ formatMoney(data.raw_data.revenue) }}</div>
|
||
<div class="node-label sub">营收</div>
|
||
</div>
|
||
<div class="tree-node tree-leaf">
|
||
<div class="node-value">{{ formatMoney(data.raw_data.revenue) }}</div>
|
||
<div class="node-label">营收</div>
|
||
<div class="node-hint">÷ {{ formatMoney(data.raw_data.total_assets) }}</div>
|
||
<div class="node-label sub">总资产</div>
|
||
</div>
|
||
<div class="tree-node tree-leaf">
|
||
<div class="node-value">{{ formatMoney(data.raw_data.total_assets) }}</div>
|
||
<div class="node-label">总资产</div>
|
||
<div class="node-hint">÷ {{ formatMoney(data.raw_data.equity) }}</div>
|
||
<div class="node-label sub">净资产</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 4. 分析解读 -->
|
||
<div class="ai-insight" v-if="data.insight">
|
||
<div class="insight-label">💡 分析解读</div>
|
||
<div class="insight-text">{{ data.insight.detail }}</div>
|
||
<div class="insight-improvement">改善方向：{{ data.insight.improvement }}</div>
|
||
</div>
|
||
</template>
|
||
<el-empty v-else-if="!loading" description="杜邦分析数据不足以计算，请确认营收、总资产、净资产数据已同步" />
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted } from 'vue'
|
||
import axios from 'axios'
|
||
|
||
const loading = ref(false)
|
||
const entity = ref('bohai')
|
||
const data = ref<any>({})
|
||
|
||
const api = axios.create({ baseURL: '/api/cma', timeout: 15000 })
|
||
api.interceptors.request.use((config: any) => {
|
||
const token = localStorage.getItem('cma_token')
|
||
if (token) config.headers.Authorization = `Bearer ${token}`
|
||
return config
|
||
})
|
||
api.interceptors.response.use((r: any) => r.data, (e: any) => Promise.reject(e))
|
||
|
||
function formatPct(val: number): string {
|
||
if (val === null || val === undefined) return '-'
|
||
return val.toFixed(2)
|
||
}
|
||
|
||
function formatFactor(val: number, key: string): string {
|
||
if (val === null || val === undefined) return '-'
|
||
if (key === 'financial_leverage') return val.toFixed(2) + 'x'
|
||
if (key === 'asset_turnover') return val.toFixed(2) + 'x'
|
||
return val.toFixed(2) + '%'
|
||
}
|
||
|
||
function formatMoney(val: number): string {
|
||
if (!val) return '-'
|
||
if (val >= 10000) return (val / 10000).toFixed(1) + '亿'
|
||
if (val >= 1) return val.toFixed(1) + '万'
|
||
return val.toLocaleString()
|
||
}
|
||
|
||
async function fetchDupont() {
|
||
loading.value = true
|
||
try {
|
||
const r: any = await api.get('/reports/dupont', { params: { entity: entity.value } })
|
||
data.value = r.data || r
|
||
} catch (e) {
|
||
console.error('杜邦分析加载失败:', e)
|
||
data.value = {}
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
onMounted(fetchDupont)
|
||
</script>
|
||
|
||
<style scoped>
|
||
.dupont-analysis {
|
||
padding: 20px;
|
||
max-width: 960px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
/* ROE大数字 */
|
||
.roe-hero {
|
||
text-align: center;
|
||
padding: 32px 20px;
|
||
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
|
||
border-radius: 16px;
|
||
margin-bottom: 24px;
|
||
color: #fff;
|
||
}
|
||
.roe-value {
|
||
font-size: 56px;
|
||
font-weight: 700;
|
||
letter-spacing: -2px;
|
||
}
|
||
.roe-unit { font-size: 24px; color: #8892b0; }
|
||
.roe-label { font-size: 14px; color: #8892b0; margin-top: 4px; }
|
||
.roe-change {
|
||
margin-top: 8px;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
padding: 4px 16px;
|
||
border-radius: 20px;
|
||
display: inline-block;
|
||
}
|
||
.roe-change.up { color: #2ecc71; background: rgba(46,204,113,0.15); }
|
||
.roe-change.down { color: #e74c3c; background: rgba(231,76,60,0.15); }
|
||
.roe-change.stable { color: #f39c12; background: rgba(243,156,18,0.15); }
|
||
.change-sub { font-size: 12px; color: #8892b0; margin-left: 4px; font-weight: 400; }
|
||
|
||
/* 三因子卡片 */
|
||
.factor-cards {
|
||
display: flex;
|
||
gap: 16px;
|
||
margin-bottom: 24px;
|
||
}
|
||
.factor-card {
|
||
flex: 1;
|
||
background: #fff;
|
||
border: 1px solid #e8e8e8;
|
||
border-radius: 12px;
|
||
padding: 20px;
|
||
text-align: center;
|
||
transition: box-shadow .2s;
|
||
}
|
||
.factor-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
|
||
.factor-value { font-size: 28px; font-weight: 700; color: #2c3e50; }
|
||
.factor-label { font-size: 14px; color: #7f8c8d; margin-top: 4px; }
|
||
.factor-desc { font-size: 11px; color: #b0b0b0; margin-top: 8px; }
|
||
.factor-assessment { font-size: 12px; color: #666; margin-top: 8px; padding-top: 8px; border-top: 1px solid #f0f0f0; }
|
||
|
||
/* 杜邦拆解树 */
|
||
.dupont-tree {
|
||
background: #fff;
|
||
border: 1px solid #e8e8e8;
|
||
border-radius: 12px;
|
||
padding: 24px;
|
||
margin-bottom: 24px;
|
||
}
|
||
.tree-title { font-size: 16px; font-weight: 600; margin-bottom: 20px; color: #2c3e50; }
|
||
.tree-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
.tree-node {
|
||
text-align: center;
|
||
padding: 12px 20px;
|
||
border-radius: 10px;
|
||
min-width: 130px;
|
||
}
|
||
.tree-root {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: #fff;
|
||
font-size: 20px;
|
||
}
|
||
.tree-root .node-value { font-size: 32px; font-weight: 700; }
|
||
.tree-root .node-label { font-size: 12px; opacity: 0.85; margin-top: 4px; }
|
||
.tree-factor {
|
||
background: #f0f4ff;
|
||
border: 1px solid #d0d8f0;
|
||
color: #2c3e50;
|
||
}
|
||
.tree-factor .node-value { font-size: 22px; font-weight: 700; }
|
||
.tree-factor .node-label { font-size: 13px; color: #7f8c8d; }
|
||
.tree-factor .node-desc { font-size: 11px; color: #b0b0b0; margin-top: 4px; }
|
||
.tree-leaf {
|
||
background: #fafafa;
|
||
border: 1px solid #e8e8e8;
|
||
min-width: 110px;
|
||
padding: 10px 16px;
|
||
}
|
||
.tree-leaf .node-value { font-size: 16px; font-weight: 600; color: #2c3e50; }
|
||
.tree-leaf .node-label { font-size: 12px; color: #95a5a6; }
|
||
.tree-leaf .node-label.sub { font-size: 11px; color: #b0b0b0; margin-top: 2px; }
|
||
.tree-leaf .node-hint { font-size: 14px; font-weight: 600; color: #667eea; margin-top: 8px; }
|
||
|
||
/* 连线 */
|
||
.tree-lines, .tree-lines-second {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
height: 40px;
|
||
}
|
||
.line-vertical { width: 2px; height: 20px; background: #d0d8f0; }
|
||
.line-horizontal {
|
||
display: flex;
|
||
gap: 160px;
|
||
height: 20px;
|
||
align-items: flex-start;
|
||
}
|
||
.line-point { width: 2px; height: 20px; background: #d0d8f0; }
|
||
.tree-row {
|
||
display: flex;
|
||
gap: 80px;
|
||
justify-content: center;
|
||
width: 100%;
|
||
}
|
||
.tree-lines-second {
|
||
flex-direction: row;
|
||
gap: 80px;
|
||
justify-content: center;
|
||
height: 40px;
|
||
margin-top: 4px;
|
||
width: 100%;
|
||
}
|
||
.sub-lines {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
.sub-lines .line-horizontal { gap: 50px; }
|
||
|
||
/* 分析解读 */
|
||
.ai-insight {
|
||
background: #fffbe6;
|
||
border: 1px solid #ffe58f;
|
||
border-radius: 12px;
|
||
padding: 16px 20px;
|
||
}
|
||
.insight-label { font-size: 14px; font-weight: 600; color: #d48806; margin-bottom: 8px; }
|
||
.insight-text { font-size: 14px; color: #5a4e2b; line-height: 1.7; }
|
||
.insight-improvement { font-size: 14px; color: #2c3e50; font-weight: 600; margin-top: 8px; padding-top: 8px; border-top: 1px solid #ffe58f; }
|
||
</style>
|