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>
<NTabPane name="flow" tab="计算流程"> <NTabPane name="flow" tab="计算流程">
<NSpin :show="loading"> <NSpin :show="loading">
<div class="calc-summary"> <div class="calc-flow-container">
<div class="calc-card"> <!-- 左侧：详细计算流程 -->
<p>模型估值（A·B法）</p> <div class="calc-flow-left">
<strong>{{ formatAmount(detailData?.model_value_b) }}</strong> <div class="calc-formula-header">
</div> 最终估值A12000=模型估值B12*0.7+市场估值C33*0.3
<div class="calc-card"> </div>
<p>市场对标估值</p>
<strong>{{ formatAmount(detailData?.market_value_c) }}</strong> <div class="calc-section">
</div> <div class="calc-section-title">一、模型估值B12=（经济价值B143*0.7+文化价值B255*0.3）*风险调整系数B343</div>
<div class="calc-card">
<p>综合校准估值</p> <div class="calc-subsection">
<strong>{{ formatAmount(detailData?.final_value_ab) }}</strong> <div class="calc-subsection-title">1、经济价值B143=基础价值B1173*（1+流量因子B1212）*政策驱动B1345</div>
</div>
<div class="calc-card"> <div class="calc-item">
<p>动态质押率</p> <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>
<strong>{{ formatPercent(detailData?.dynamic_pledge_rate) }}</strong> <div class="calc-detail">
</div> <div class="calc-detail-item">• 财务价值P2000=[3年内均收益10000*（1+增长率23%）*5]/5</div>
</div> <div class="calc-detail-item">• 法律强度L12=专利分*12*0.4+商标分*12*0.3+版权分*12*0.3</div>
<div v-if="calcFlow.length" class="calc-flow"> <div class="calc-detail-item">• 发展潜力D=专利分*0.5+ESG分*0.2+创新投入比*0.3</div>
<div v-for="(step, index) in calcFlow" :key="index" class="calc-step"> </div>
<div class="step-index">{{ index + 1 }}</div> </div>
<div class="step-body">
<p class="step-title">{{ step.title }}</p> <div class="calc-item">
<p class="step-desc">{{ step.description }}</p> <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>
<div class="step-value">{{ step.value }}</div>
</div> </div>
</div> </div>
<div v-else class="calc-empty">暂无计算流程数据</div>
</NSpin> </NSpin>
</NTabPane> </NTabPane>
</NTabs> </NTabs>
@ -456,75 +523,141 @@ const handleCertificateConfirm = (data) => {
gap: 4px; gap: 4px;
} }
.calc-summary { /* 计算流程容器 */
display: grid; .calc-flow-container {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); display: flex;
gap: 16px; 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; margin-bottom: 20px;
} }
.calc-card { .calc-subsection-title {
padding: 16px; font-size: 15px;
border: 1px solid #eef0f6; font-weight: 600;
border-radius: 10px; color: #374151;
background: #fdfdff; margin-bottom: 12px;
line-height: 1.6;
} }
.calc-card p { .calc-item {
margin: 0 0 8px; margin-left: 20px;
color: #888; margin-bottom: 16px;
} }
.calc-card strong { .calc-item-label {
font-size: 18px; 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; color: #1d2129;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 2px solid #e5e7eb;
} }
.calc-flow { .calc-outline {
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;
font-size: 13px; font-size: 13px;
} }
.step-value { .outline-section {
margin-bottom: 16px;
}
.outline-title {
font-size: 14px;
font-weight: 600; font-weight: 600;
color: #1d2129; 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 { .calc-empty {