zfc/guzhi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 重构估值审核详情计算流程页面，优化公式展示和层级结构

Browse Source 
- 将计算流程改为左右分栏布局，左侧展示详细计算公式，右侧展示流程大纲
- 新增完整的估值计算公式体系，包含模型估值和市场估值的详细计算逻辑
- 优化公式层级结构，使用缩进和编号清晰展示计算步骤
- 移除原有的卡片式汇总展示和步骤列表，统一为公式展示
- 完善样式设计，提升公式可读性和页面布局美观度
This commit is contained in:
Wei_佳 2025-11-17 15:00:38 +08:00
parent 2d9a83d68e
commit 52beb9b264
1 changed files with 213 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

293
web/src/views/valuation/audit/components/AuditDetail.vue
View File

@ -265,35 +265,102 @@ const handleCertificateConfirm = (data) => {
</NTabPane>
<NTabPane name="flow" tab="计算流程">
<NSpin :show="loading">
<div class="calc-summary">
<div class="calc-card">
<p>模型估值（A·B法）</p>
<strong>{{ formatAmount(detailData?.model_value_b) }}</strong>
</div>
<div class="calc-card">
<p>市场对标估值</p>
<strong>{{ formatAmount(detailData?.market_value_c) }}</strong>
</div>
<div class="calc-card">
<p>综合校准估值</p>
<strong>{{ formatAmount(detailData?.final_value_ab) }}</strong>
</div>
<div class="calc-card">
<p>动态质押率</p>
<strong>{{ formatPercent(detailData?.dynamic_pledge_rate) }}</strong>
</div>
</div>
<div v-if="calcFlow.length" class="calc-flow">
<div v-for="(step, index) in calcFlow" :key="index" class="calc-step">
<div class="step-index">{{ index + 1 }}</div>
<div class="step-body">
<p class="step-title">{{ step.title }}</p>
<p class="step-desc">{{ step.description }}</p>
<div class="calc-flow-container">
<!-- 左侧：详细计算流程 -->
<div class="calc-flow-left">
<div class="calc-formula-header">
最终估值A12000=模型估值B12*0.7+市场估值C33*0.3
</div>
<div class="calc-section">
<div class="calc-section-title">一、模型估值B12=（经济价值B143*0.7+文化价值B255*0.3）*风险调整系数B343</div>
<div class="calc-subsection">
<div class="calc-subsection-title">1、经济价值B143=基础价值B1173*（1+流量因子B1212）*政策驱动B1345</div>
<div class="calc-item">
<div class="calc-item-label">(1) 基础价值B1173=财务价值P2000*（0.45+0.05*行业系数I0.8）+法律强度L0.3*（0.35+0.05*行业系数I0.8）+发展潜力D0.5*0.2</div>
<div class="calc-detail">
<div class="calc-detail-item">• 财务价值P2000=[3年内均收益10000*（1+增长率23%）*5]/5</div>
<div class="calc-detail-item">• 法律强度L12=专利分*12*0.4+商标分*12*0.3+版权分*12*0.3</div>
<div class="calc-detail-item">• 发展潜力D=专利分*0.5+ESG分*0.2+创新投入比*0.3</div>
</div>
</div>
<div class="calc-item">
<div class="calc-item-label">(2) 流量因子B1212</div>
<div class="calc-detail">
<div class="calc-detail-item">• 近 30 天搜索指数M1</div>
<div class="calc-detail-item">• 行业均值S2</div>
<div class="calc-detail-item">• 社交媒体传播度S3</div>
</div>
</div>
<div class="calc-item">
<div class="calc-item-label">(3) 政策驱动B13</div>
<div class="calc-detail">
<div class="calc-detail-item">• 政策契合度P</div>
</div>
</div>
</div>
<div class="calc-subsection">
<div class="calc-subsection-title">2、文化价值B2</div>
<div class="calc-item">
<div class="calc-item-label">(1) 活态传承系数B21</div>
<div class="calc-detail">
<div class="calc-detail-item">• 传承人等级系数</div>
<div class="calc-detail-item">• 教学传播频次</div>
<div class="calc-detail-item">• 跨界合作深度</div>
</div>
</div>
<div class="calc-item">
<div class="calc-item-label">(2) 纹样基因值B22</div>
<div class="calc-detail">
<div class="calc-detail-item">• 纹样复杂度SC</div>
<div class="calc-detail-item">• 归一化稀缺H</div>
<div class="calc-detail-item">• 历史承载度HI</div>
</div>
</div>
</div>
</div>
</div>
<!-- 右侧：计算流程大纲 -->
<div class="calc-flow-right">
<div class="calc-outline-title">最终估值A</div>
<div class="calc-outline">
<div class="outline-section">
<div class="outline-title">一、模型估值B</div>
<div class="outline-subsection">
<div class="outline-subtitle">1、经济价值B1</div>
<div class="outline-item">(1) 基础价值B11</div>
<div class="outline-detail">• 基础价值B1173=财务价值P2000*（0.45+0.05*行业系数I0.8）+法律强度L0.3*（0.35+0.05*行业系数I0.8）+发展潜力D0.5*0.2</div>
<div class="outline-item">(2) 流量因子B12</div>
<div class="outline-detail">• 近 30 天搜索指数M1</div>
<div class="outline-detail">• 行业均值S2</div>
<div class="outline-detail">• 社交媒体传播度S3</div>
<div class="outline-item">(3) 政策驱动B13</div>
<div class="outline-detail">• 政策契合度P</div>
</div>
<div class="outline-subsection">
<div class="outline-subtitle">2、文化价值B2</div>
<div class="outline-item">(1) 活态传承系数B21</div>
<div class="outline-detail">• 传承人等级系数</div>
<div class="outline-detail">• 教学传播频次</div>
<div class="outline-detail">• 跨界合作深度</div>
<div class="outline-item">(2) 纹样基因值B22</div>
<div class="outline-detail">• 纹样复杂度SC</div>
<div class="outline-detail">• 归一化稀缺H</div>
<div class="outline-detail">• 历史承载度HI</div>
</div>
</div>
</div>
<div class="step-value">{{ step.value }}</div>
</div>
</div>
<div v-else class="calc-empty">暂无计算流程数据</div>
</NSpin>
</NTabPane>
</NTabs>
@ -456,75 +523,141 @@ const handleCertificateConfirm = (data) => {
gap: 4px;
}
.calc-summary {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 16px;
/* 计算流程容器 */
.calc-flow-container {
display: flex;
gap: 24px;
min-height: 600px;
}
/* 左侧详细流程 */
.calc-flow-left {
flex: 1;
background: #f8f9fa;
padding: 20px;
border-radius: 8px;
overflow-y: auto;
max-height: 800px;
}
.calc-formula-header {
font-size: 18px;
font-weight: 600;
color: #1d2129;
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 2px solid #e5e7eb;
}
.calc-section {
margin-bottom: 24px;
}
.calc-section-title {
font-size: 16px;
font-weight: 600;
color: #1d2129;
margin-bottom: 16px;
line-height: 1.6;
}
.calc-subsection {
margin-left: 20px;
margin-bottom: 20px;
}
.calc-card {
padding: 16px;
border: 1px solid #eef0f6;
border-radius: 10px;
background: #fdfdff;
.calc-subsection-title {
font-size: 15px;
font-weight: 600;
color: #374151;
margin-bottom: 12px;
line-height: 1.6;
}
.calc-card p {
margin: 0 0 8px;
color: #888;
.calc-item {
margin-left: 20px;
margin-bottom: 16px;
}
.calc-card strong {
font-size: 18px;
.calc-item-label {
font-size: 14px;
color: #4b5563;
margin-bottom: 8px;
line-height: 1.6;
}
.calc-detail {
margin-left: 20px;
margin-top: 8px;
}
.calc-detail-item {
font-size: 13px;
color: #6b7280;
margin-bottom: 4px;
line-height: 1.6;
}
/* 右侧大纲 */
.calc-flow-right {
width: 320px;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 20px;
overflow-y: auto;
max-height: 800px;
}
.calc-outline-title {
font-size: 16px;
font-weight: 600;
color: #1d2129;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 2px solid #e5e7eb;
}
.calc-flow {
display: flex;
flex-direction: column;
gap: 12px;
}
.calc-step {
display: flex;
gap: 16px;
align-items: center;
padding: 16px;
border-radius: 10px;
border: 1px dashed #dce1f0;
}
.step-index {
width: 32px;
height: 32px;
border-radius: 50%;
background: #eef4ff;
color: #3b82f6;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
}
.step-body {
flex: 1;
}
.step-title {
margin: 0 0 6px;
font-weight: 600;
}
.step-desc {
margin: 0;
color: #666;
.calc-outline {
font-size: 13px;
}
.step-value {
.outline-section {
margin-bottom: 16px;
}
.outline-title {
font-size: 14px;
font-weight: 600;
color: #1d2129;
margin-bottom: 8px;
}
.outline-subsection {
margin-left: 12px;
margin-bottom: 12px;
}
.outline-subtitle {
font-size: 13px;
font-weight: 600;
color: #374151;
margin-bottom: 6px;
}
.outline-item {
font-size: 12px;
color: #4b5563;
margin-bottom: 4px;
margin-left: 12px;
}
.outline-detail {
font-size: 11px;
color: #6b7280;
margin-left: 24px;
margin-bottom: 2px;
line-height: 1.5;
}
.calc-empty {