shiyue/LLHS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化统计计算器HTML结构和代码

Browse Source
This commit is contained in:
史悦
2025-09-16 17:34:34 +08:00
parent c9e1bb951c
commit 817a7f6da6
1 changed files with 236 additions and 327 deletions
Download Patch File Download Diff File Expand all files Collapse all files

427
回报率预测计算器.html
View File

@@ -2,340 +2,249 @@
<html lang="zh-CN"> <html lang="zh-CN">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>回报率预测计算器</title> <title>回报率预测计算器</title>
<style> <script src="https://cdn.tailwindcss.com"></script>
:root { <script>
color-scheme: light dark; tailwind.config = {
font-family: "Segoe UI", "Microsoft YaHei", sans-serif; theme: {
background-color: #f7f8fa; extend: {
color: #1f2933; colors: {
} primary: '#2563eb',
secondary: '#38bdf8'
body {
margin: 0;
padding: 32px;
display: flex;
justify-content: center;
}
.container {
width: min(1080px, 100%);
background: #ffffffee;
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
border-radius: 18px;
padding: 32px 36px 48px;
}
h1 {
margin: 0 0 8px;
font-size: 28px;
}
.subtitle {
margin: 0;
color: #52606d;
font-size: 16px;
}
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
margin: 32px 0;
}
.summary-card {
border-radius: 14px;
padding: 20px 24px;
background: linear-gradient(135deg, #2563eb, #38bdf8);
color: #f8fafc;
}
.summary-card h2 {
font-size: 14px;
letter-spacing: 0.08em;
text-transform: uppercase;
margin: 0 0 12px;
}
.summary-value {
font-size: 28px;
font-weight: 700;
}
.input-section {
margin-bottom: 36px;
}
.input-section h3 {
margin: 0 0 16px;
font-size: 20px;
}
.field-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 18px;
}
label {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 14px;
color: #364152;
}
input[type="number"] {
padding: 10px 14px;
border: 1px solid #d9e2ec;
border-radius: 10px;
font-size: 16px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input[type="number"]:focus {
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
outline: none;
}
.result-section {
margin-top: 40px;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 24px;
}
th,
td {
padding: 12px 16px;
border-bottom: 1px solid #e4ebf3;
text-align: right;
}
th:first-child,
td:first-child {
text-align: left;
}
th {
background: #f0f4ff;
font-weight: 600;
}
.note {
font-size: 13px;
color: #e4ebf3;
}
@media (max-width: 768px) {
body {
padding: 16px;
}
.container {
padding: 24px;
} }
} }
</style> }
}
</script>
</head> </head>
<body> <body class="bg-gray-50 font-sans text-gray-800">
<div class="container"> <div class="min-h-screen px-4 py-6 md:px-8 md:py-8">
<header> <div class="max-w-6xl mx-auto bg-white/95 shadow-xl rounded-2xl p-6 md:p-8">
<h1>回报率预测计算器</h1> <header class="mb-8">
<p class="subtitle">根据《回报率预测》文档的假设提供默认值，可随场景调整实时查看财务指标。</p> <h1 class="text-2xl md:text-3xl font-bold text-gray-900 mb-2">回报率预测计算器</h1>
<p class="text-gray-600 text-sm md:text-base">根据《回报率预测》文档的假设提供默认值，可随场景调整实时查看财务指标。</p>
</header> </header>
<div class="card-grid"> <!-- Summary Cards -->
<div class="summary-card"> <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
<h2>月度净利润</h2> <div class="bg-gradient-to-br from-primary to-secondary rounded-xl p-5 text-white">
<div id="monthlyNetProfit" class="summary-value">¥ 33.00</div> <h2 class="text-xs md:text-sm uppercase tracking-wider font-semibold mb-3">月度净利润</h2>
<p class="note">= 月毛利 - 固定运营成本</p> <div id="monthlyNetProfit" class="text-2xl md:text-3xl font-bold mb-2">¥ 33.00</div>
<p class="text-xs text-blue-100">= 月毛利 - 固定运营成本</p>
</div> </div>
<div class="summary-card"> <div class="bg-gradient-to-br from-primary to-secondary rounded-xl p-5 text-white">
<h2>投资回收期</h2> <h2 class="text-xs md:text-sm uppercase tracking-wider font-semibold mb-3">投资回收期</h2>
<div id="paybackPeriod" class="summary-value">54.5 个月</div> <div id="paybackPeriod" class="text-2xl md:text-3xl font-bold mb-2">54.5 个月</div>
<p class="note">= 总投资 / 月净利润</p> <p class="text-xs text-blue-100">= 总投资 / 月净利润</p>
</div> </div>
<div class="summary-card"> <div class="bg-gradient-to-br from-primary to-secondary rounded-xl p-5 text-white">
<h2>年化 ROI</h2> <h2 class="text-xs md:text-sm uppercase tracking-wider font-semibold mb-3">年化 ROI</h2>
<div id="annualROI" class="summary-value">22.0%</div> <div id="annualROI" class="text-2xl md:text-3xl font-bold mb-2">22.0%</div>
<p class="note">= (年净利润 / 总投资) × 100%</p> <p class="text-xs text-blue-100">= (年净利润 / 总投资) × 100%</p>
</div> </div>
</div> </div>
<section class="input-section"> <!-- Input Sections -->
<h3>核心量化假设</h3> <section class="mb-8">
<div class="field-grid"> <h3 class="text-lg md:text-xl font-semibold text-gray-900 mb-4">核心量化假设</h3>
<label> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
日均废纸板回收量 (公斤) <label class="block">
<input id="dailyCardboard" type="number" min="0" step="0.1" value="20" /> <span class="text-sm font-medium text-gray-700 mb-2 block">日均废纸板回收量 (公斤)</span>
<input id="dailyCardboard" type="number" min="0" step="0.1" value="20"
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-base focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none transition-colors" />
</label> </label>
<label> <label class="block">
日均塑料瓶回收量 (公斤) <span class="text-sm font-medium text-gray-700 mb-2 block">日均塑料瓶回收量 (公斤)</span>
<input id="dailyPet" type="number" min="0" step="0.1" value="10" /> <input id="dailyPet" type="number" min="0" step="0.1" value="10"
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-base focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none transition-colors" />
</label> </label>
<label> <label class="block">
月计费天数 (天) <span class="text-sm font-medium text-gray-700 mb-2 block">月计费天数 (天)</span>
<input id="daysPerMonth" type="number" min="1" step="1" value="30" /> <input id="daysPerMonth" type="number" min="1" step="1" value="30"
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-base focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none transition-colors" />
</label> </label>
<label> <label class="block">
运营站点数量 (个) <span class="text-sm font-medium text-gray-700 mb-2 block">运营站点数量 (个)</span>
<input id="siteCount" type="number" min="1" step="1" value="1" /> <input id="siteCount" type="number" min="1" step="1" value="5"
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-base focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none transition-colors" />
</label> </label>
<label> <label class="block">
废纸板回收价 ¥/公斤 (给用户) <span class="text-sm font-medium text-gray-700 mb-2 block">废纸板回收价 ¥/公斤 (给用户)</span>
<input id="buyPriceCardboard" type="number" min="0" step="0.01" value="0.8" /> <input id="buyPriceCardboard" type="number" min="0" step="0.01" value="0.8"
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-base focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none transition-colors" />
</label> </label>
<label> <label class="block">
废纸板出售价 ¥/公斤 (给打包站) <span class="text-sm font-medium text-gray-700 mb-2 block">废纸板出售价 ¥/公斤 (给打包站)</span>
<input id="sellPriceCardboard" type="number" min="0" step="0.01" value="1.2" /> <input id="sellPriceCardboard" type="number" min="0" step="0.01" value="1.2"
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-base focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none transition-colors" />
</label> </label>
<label> <label class="block">
塑料瓶回收价 ¥/公斤 (给用户) <span class="text-sm font-medium text-gray-700 mb-2 block">塑料瓶回收价 ¥/公斤 (给用户)</span>
<input id="buyPricePet" type="number" min="0" step="0.01" value="1.4" /> <input id="buyPricePet" type="number" min="0" step="0.01" value="1.4"
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-base focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none transition-colors" />
</label> </label>
<label> <label class="block">
塑料瓶出售价 ¥/公斤 (给打包站) <span class="text-sm font-medium text-gray-700 mb-2 block">塑料瓶出售价 ¥/公斤 (给打包站)</span>
<input id="sellPricePet" type="number" min="0" step="0.01" value="2.0" /> <input id="sellPricePet" type="number" min="0" step="0.01" value="2.0"
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-base focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none transition-colors" />
</label> </label>
</div> </div>
</section> </section>
<section class="input-section"> <section class="mb-8">
<h3>运营及投入假设</h3> <h3 class="text-lg md:text-xl font-semibold text-gray-900 mb-4">运营及投入假设</h3>
<div class="field-grid"> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<label> <label class="block">
场地合作分成 (占销售总收入 %) <span class="text-sm font-medium text-gray-700 mb-2 block">场地合作分成 (占销售总收入 %)</span>
<input id="siteFeePercent" type="number" min="0" step="0.1" value="6.8" /> <input id="siteFeePercent" type="number" min="0" step="0.1" value="10"
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-base focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none transition-colors" />
</label> </label>
<label> <label class="block">
月物流清运成本 (¥) <span class="text-sm font-medium text-gray-700 mb-2 block">月物流清运成本 (¥)</span>
<input id="logisticsCost" type="number" min="0" step="1" value="220" /> <input id="logisticsCost" type="number" min="0" step="1" value="220"
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-base focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none transition-colors" />
</label> </label>
<label> <label class="block">
设备维护与网络费 (¥/月) <span class="text-sm font-medium text-gray-700 mb-2 block">设备维护与网络费 (¥/月)</span>
<input id="maintenanceCost" type="number" min="0" step="1" value="27" /> <input id="maintenanceCost" type="number" min="0" step="1" value="27"
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-base focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none transition-colors" />
</label> </label>
<label> <label class="block">
其他运营成本 (¥/月) <span class="text-sm font-medium text-gray-700 mb-2 block">其他运营成本 (¥/月)</span>
<input id="otherCost" type="number" min="0" step="1" value="50" /> <input id="otherCost" type="number" min="0" step="1" value="50"
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-base focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none transition-colors" />
</label> </label>
<label> <label class="block">
单站设备投入 (¥) <span class="text-sm font-medium text-gray-700 mb-2 block">单站设备投入 (¥)</span>
<input id="equipmentCost" type="number" min="0" step="10" value="1500" /> <input id="equipmentCost" type="number" min="0" step="10" value="1500"
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-base focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none transition-colors" />
</label> </label>
<label> <label class="block">
部署及安装成本 (¥) <span class="text-sm font-medium text-gray-700 mb-2 block">部署及安装成本 (¥)</span>
<input id="deploymentCost" type="number" min="0" step="10" value="300" /> <input id="deploymentCost" type="number" min="0" step="10" value="300"
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-base focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none transition-colors" />
</label> </label>
</div> </div>
</section> </section>
<section class="result-section"> <!-- Results Section -->
<h3>产出指标</h3> <section class="space-y-6">
<table> <h3 class="text-lg md:text-xl font-semibold text-gray-900">产出指标</h3>
<!-- 产出指标表格 -->
<div class="overflow-x-auto">
<table class="w-full border-collapse bg-white rounded-lg overflow-hidden shadow-sm">
<thead> <thead>
<tr> <tr class="bg-blue-50">
<th>指标</th> <th class="text-left px-4 py-3 text-sm font-semibold text-gray-900">指标</th>
<th>废纸板</th> <th class="text-right px-4 py-3 text-sm font-semibold text-gray-900">废纸板</th>
<th>塑料瓶</th> <th class="text-right px-4 py-3 text-sm font-semibold text-gray-900">塑料瓶</th>
<th>合计</th> <th class="text-right px-4 py-3 text-sm font-semibold text-gray-900">合计</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody class="divide-y divide-gray-200">
<tr> <tr>
<td>月度回收量 (公斤)</td> <td class="px-4 py-3 text-sm text-gray-900">月度回收量 (公斤)</td>
<td id="monthlyCardboardKg">600.0</td> <td id="monthlyCardboardKg" class="px-4 py-3 text-sm text-right text-gray-600">600.0</td>
<td id="monthlyPetKg">300.0</td> <td id="monthlyPetKg" class="px-4 py-3 text-sm text-right text-gray-600">300.0</td>
<td id="monthlyTotalKg">900.0</td> <td id="monthlyTotalKg" class="px-4 py-3 text-sm text-right font-medium text-gray-900">900.0</td>
</tr> </tr>
<tr> <tr>
<td>给用户回收金 (¥)</td> <td class="px-4 py-3 text-sm text-gray-900">给用户回收金 (¥)</td>
<td id="payoutCardboard">¥ 480.00</td> <td id="payoutCardboard" class="px-4 py-3 text-sm text-right text-gray-600">¥ 480.00</td>
<td id="payoutPet">¥ 420.00</td> <td id="payoutPet" class="px-4 py-3 text-sm text-right text-gray-600">¥ 420.00</td>
<td id="payoutTotal">¥ 900.00</td> <td id="payoutTotal" class="px-4 py-3 text-sm text-right font-medium text-gray-900">¥ 900.00</td>
</tr> </tr>
<tr> <tr>
<td>销售收入 (¥)</td> <td class="px-4 py-3 text-sm text-gray-900">销售收入 (¥)</td>
<td id="saleCardboard">¥ 720.00</td> <td id="saleCardboard" class="px-4 py-3 text-sm text-right text-gray-600">¥ 720.00</td>
<td id="salePet">¥ 600.00</td> <td id="salePet" class="px-4 py-3 text-sm text-right text-gray-600">¥ 600.00</td>
<td id="saleTotal">¥ 1,320.00</td> <td id="saleTotal" class="px-4 py-3 text-sm text-right font-medium text-gray-900">¥ 1,320.00</td>
</tr> </tr>
<tr> <tr>
<td>毛利 (¥)</td> <td class="px-4 py-3 text-sm text-gray-900">毛利 (¥)</td>
<td id="grossCardboard">¥ 240.00</td> <td id="grossCardboard" class="px-4 py-3 text-sm text-right text-gray-600">¥ 240.00</td>
<td id="grossPet">¥ 180.00</td> <td id="grossPet" class="px-4 py-3 text-sm text-right text-gray-600">¥ 180.00</td>
<td id="grossTotal">¥ 420.00</td> <td id="grossTotal" class="px-4 py-3 text-sm text-right font-medium text-primary">¥ 420.00</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
<table> <!-- 成本拆解表格 -->
<div class="overflow-x-auto">
<table class="w-full border-collapse bg-white rounded-lg overflow-hidden shadow-sm">
<thead> <thead>
<tr> <tr class="bg-blue-50">
<th>成本拆解</th> <th class="text-left px-4 py-3 text-sm font-semibold text-gray-900">成本拆解</th>
<th>金额 (¥)</th> <th class="text-right px-4 py-3 text-sm font-semibold text-gray-900">金额 (¥)</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody class="divide-y divide-gray-200">
<tr> <tr>
<td>场地合作费</td> <td class="px-4 py-3 text-sm text-gray-900">场地合作费</td>
<td id="siteFee">¥ 90.00</td> <td id="siteFee" class="px-4 py-3 text-sm text-right text-gray-600">¥ 90.00</td>
</tr> </tr>
<tr> <tr>
<td>月物流清运成本</td> <td class="px-4 py-3 text-sm text-gray-900">月物流清运成本</td>
<td id="logisticsCostCell">¥ 220.00</td> <td id="logisticsCostCell" class="px-4 py-3 text-sm text-right text-gray-600">¥ 220.00</td>
</tr> </tr>
<tr> <tr>
<td>设备维护与网络费</td> <td class="px-4 py-3 text-sm text-gray-900">设备维护与网络费</td>
<td id="maintenanceCostCell">¥ 27.00</td> <td id="maintenanceCostCell" class="px-4 py-3 text-sm text-right text-gray-600">¥ 27.00</td>
</tr> </tr>
<tr> <tr>
<td>其他运营成本</td> <td class="px-4 py-3 text-sm text-gray-900">其他运营成本</td>
<td id="otherCostCell">¥ 50.00</td> <td id="otherCostCell" class="px-4 py-3 text-sm text-right text-gray-600">¥ 50.00</td>
</tr> </tr>
<tr> <tr class="bg-gray-50">
<td><strong>固定成本合计</strong></td> <td class="px-4 py-3 text-sm font-semibold text-gray-900">固定成本合计</td>
<td id="fixedCostTotal"><strong>¥ 387.00</strong></td> <td id="fixedCostTotal" class="px-4 py-3 text-sm text-right font-semibold text-gray-900">¥ 387.00</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
<table> <!-- 投资与回报表格 -->
<div class="overflow-x-auto">
<table class="w-full border-collapse bg-white rounded-lg overflow-hidden shadow-sm">
<thead> <thead>
<tr> <tr class="bg-blue-50">
<th>投资与回报</th> <th class="text-left px-4 py-3 text-sm font-semibold text-gray-900">投资与回报</th>
<th>金额 / 指标</th> <th class="text-right px-4 py-3 text-sm font-semibold text-gray-900">金额 / 指标</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody class="divide-y divide-gray-200">
<tr> <tr>
<td>总投资 (Capex)</td> <td class="px-4 py-3 text-sm text-gray-900">总投资 (Capex)</td>
<td id="totalInvestment">¥ 1,800.00</td> <td id="totalInvestment" class="px-4 py-3 text-sm text-right text-gray-600">¥ 1,800.00</td>
</tr> </tr>
<tr> <tr>
<td>月度净利润</td> <td class="px-4 py-3 text-sm text-gray-900">月度净利润</td>
<td id="netProfitCell">¥ 33.00</td> <td id="netProfitCell" class="px-4 py-3 text-sm text-right font-medium text-primary">¥ 33.00</td>
</tr> </tr>
<tr> <tr>
<td>投资回收期</td> <td class="px-4 py-3 text-sm text-gray-900">投资回收期</td>
<td id="paybackCell">54.5 个月</td> <td id="paybackCell" class="px-4 py-3 text-sm text-right text-gray-600">54.5 个月</td>
</tr> </tr>
<tr> <tr>
<td>年化投资回报率</td> <td class="px-4 py-3 text-sm text-gray-900">年化投资回报率</td>
<td id="annualRoiCell">22.0%</td> <td id="annualRoiCell" class="px-4 py-3 text-sm text-right font-medium text-green-600">22.0%</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
<p class="note">提示：若月度净利润≤0，则投资回收期视为“尚无法回收”，请通过提升日均回收量或优化成本结构来改进模型。</p> <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
<p class="text-sm text-yellow-800">
<span class="font-semibold">提示：</span>
若月度净利润≤0，则投资回收期视为"尚无法回收"，请通过提升日均回收量或优化成本结构来改进模型。
</p>
</div>
</section> </section>
</div> </div>
</div>
<script> <script>
// 工具函数：安全读取输入值，若为空则返回0 // 工具函数：安全读取输入值，若为空则返回0
@@ -424,7 +333,7 @@
document.getElementById("logisticsCostCell").textContent = formatCurrency(logisticsCostTotal); document.getElementById("logisticsCostCell").textContent = formatCurrency(logisticsCostTotal);
document.getElementById("maintenanceCostCell").textContent = formatCurrency(maintenanceCostTotal); document.getElementById("maintenanceCostCell").textContent = formatCurrency(maintenanceCostTotal);
document.getElementById("otherCostCell").textContent = formatCurrency(otherCostTotal); document.getElementById("otherCostCell").textContent = formatCurrency(otherCostTotal);
document.getElementById("fixedCostTotal").innerHTML = `<strong>${formatCurrency(fixedCostTotal)}</strong>`; document.getElementById("fixedCostTotal").textContent = formatCurrency(fixedCostTotal);
document.getElementById("totalInvestment").textContent = formatCurrency(totalInvestment); document.getElementById("totalInvestment").textContent = formatCurrency(totalInvestment);