459 lines
20 KiB
HTML
459 lines
20 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>费用计算器 - OA系统</title>
|
||
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
||
<!-- 统一布局样式 -->
|
||
<link rel="stylesheet" href="unified-layout.css">
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body {
|
||
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
|
||
background: #f0f2f5;
|
||
overflow: hidden;
|
||
}
|
||
.layout-container {
|
||
height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.navbar {
|
||
height: 50px;
|
||
background: #fff;
|
||
border-bottom: 1px solid #e6e6e6;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 20px;
|
||
box-shadow: 0 1px 4px rgba(0,21,41,.08);
|
||
}
|
||
.navbar-left {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.logo {
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
color: #409EFF;
|
||
cursor: pointer;
|
||
}
|
||
.nav-menu { display: flex; gap: 8px; margin-left: 16px; }
|
||
.nav-item { padding: 8px 16px; cursor: pointer; border-radius: 4px; color: #303133; }
|
||
.nav-item:hover { background: #ecf5ff; color: #409EFF; }
|
||
.nav-item.active { background: #409EFF; color: #fff; }
|
||
.navbar-right {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20px;
|
||
}
|
||
.main-container {
|
||
flex: 1;
|
||
display: flex;
|
||
overflow: hidden;
|
||
}
|
||
.app-main {
|
||
flex: 1;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: #f0f2f5;
|
||
}
|
||
.content {
|
||
flex: 1;
|
||
padding: 20px;
|
||
overflow-y: auto;
|
||
background: #fff;
|
||
margin: 10px;
|
||
border-radius: 4px;
|
||
}
|
||
.page-header {
|
||
margin-bottom: 24px;
|
||
padding-bottom: 16px;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
}
|
||
.page-title {
|
||
font-size: 20px;
|
||
font-weight: 500;
|
||
color: #303133;
|
||
}
|
||
.page-desc {
|
||
font-size: 14px;
|
||
color: #909399;
|
||
margin-top: 8px;
|
||
}
|
||
.form-card {
|
||
background: white;
|
||
border-radius: 4px;
|
||
padding: 24px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.form-section {
|
||
margin-bottom: 24px;
|
||
}
|
||
.form-section-title {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
margin-bottom: 16px;
|
||
padding-bottom: 8px;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
.form-row {
|
||
display: flex;
|
||
gap: 16px;
|
||
margin-bottom: 16px;
|
||
}
|
||
.form-item {
|
||
flex: 1;
|
||
}
|
||
.form-label {
|
||
display: block;
|
||
margin-bottom: 8px;
|
||
color: #333;
|
||
font-size: 14px;
|
||
}
|
||
.form-label .required {
|
||
color: #ff4d4f;
|
||
}
|
||
.form-input, .form-select {
|
||
width: 100%;
|
||
padding: 8px 12px;
|
||
border: 1px solid #d9d9d9;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
}
|
||
.form-input:focus, .form-select:focus {
|
||
outline: none;
|
||
border-color: #409EFF;
|
||
}
|
||
.result-box {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: white;
|
||
padding: 24px;
|
||
border-radius: 8px;
|
||
margin-top: 24px;
|
||
}
|
||
.result-label {
|
||
font-size: 14px;
|
||
opacity: 0.9;
|
||
margin-bottom: 8px;
|
||
}
|
||
.result-value {
|
||
font-size: 32px;
|
||
font-weight: bold;
|
||
}
|
||
.formula-info {
|
||
background: #f5f7fa;
|
||
padding: 16px;
|
||
border-radius: 4px;
|
||
margin-top: 16px;
|
||
font-size: 13px;
|
||
color: #666;
|
||
line-height: 1.6;
|
||
}
|
||
.formula-title {
|
||
font-weight: 500;
|
||
color: #303133;
|
||
margin-bottom: 8px;
|
||
}
|
||
.btn {
|
||
padding: 8px 24px;
|
||
border: none;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
}
|
||
.btn-primary {
|
||
background: #409EFF;
|
||
color: white;
|
||
}
|
||
.btn-primary:hover {
|
||
background: #66b1ff;
|
||
}
|
||
.btn-default {
|
||
background: white;
|
||
color: #333;
|
||
border: 1px solid #d9d9d9;
|
||
}
|
||
.btn-default:hover {
|
||
border-color: #409EFF;
|
||
color: #409EFF;
|
||
}
|
||
.form-actions {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 12px;
|
||
margin-top: 24px;
|
||
padding-top: 24px;
|
||
border-top: 1px solid #f0f0f0;
|
||
}
|
||
.help-card {
|
||
background: #fff7e6;
|
||
border: 1px solid #ffe58f;
|
||
border-radius: 4px;
|
||
padding: 16px;
|
||
margin-top: 20px;
|
||
}
|
||
.help-title {
|
||
font-weight: 500;
|
||
color: #d46b08;
|
||
margin-bottom: 12px;
|
||
}
|
||
.help-item {
|
||
font-size: 13px;
|
||
color: #666;
|
||
margin-bottom: 8px;
|
||
line-height: 1.6;
|
||
}
|
||
</style>
|
||
<!-- Vue.js -->
|
||
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
|
||
<!-- Element UI JS -->
|
||
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
||
</head>
|
||
<body>
|
||
<div id="app">
|
||
<div class="layout-container">
|
||
<div class="navbar">
|
||
<div class="navbar-left">
|
||
<div class="logo" onclick="window.location.href='dashboard.html'">OA系统</div>
|
||
<div class="nav-menu">
|
||
<div class="nav-item" onclick="window.location.href='dashboard.html'">首页</div>
|
||
<div class="nav-item" onclick="window.location.href='project-initiation.html'">商机管理</div>
|
||
<div class="nav-item" onclick="window.location.href='project-start.html'">过程管理</div>
|
||
<div class="nav-item" onclick="window.location.href='finance-invoice.html'">财务管理</div>
|
||
<div class="nav-item" onclick="window.location.href='report-project-detail.html'">报表管理</div>
|
||
<div class="nav-item active">工具</div>
|
||
</div>
|
||
</div>
|
||
<div class="navbar-right">
|
||
<span style="color: #303133;">张三</span><span style="color: #909399; margin: 0 8px;">|</span>
|
||
<a href="profile.html" style="color: #409EFF; text-decoration: none;">个人中心</a>
|
||
<span>|</span>
|
||
<a href="login.html" style="color: #409EFF; text-decoration: none;">退出</a>
|
||
</div>
|
||
</div>
|
||
<div class="main-container">
|
||
<div class="app-main">
|
||
<div class="content">
|
||
<div class="page-header">
|
||
<div>
|
||
<div class="page-title">费用计算器</div>
|
||
<div class="page-desc">根据服务类型和计算公式，快速计算项目费用</div>
|
||
</div>
|
||
<div style="display: flex; gap: 8px;">
|
||
<button class="btn btn-default" onclick="window.location.href='tool-center.html'" style="font-size: 13px;">工具中心</button>
|
||
<button class="btn btn-default" onclick="window.location.href='tool-output-calculator.html'" style="font-size: 13px;">切换到产值计算器</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-card">
|
||
<div class="form-section">
|
||
<div class="form-section-title">计算参数</div>
|
||
<div class="form-row">
|
||
<div class="form-item">
|
||
<label class="form-label">
|
||
<span class="required">*</span>服务类型
|
||
</label>
|
||
<select id="serviceType" class="form-select" onchange="onServiceTypeChange()">
|
||
<option value="">请选择服务类型</option>
|
||
<option value="工程咨询">工程咨询</option>
|
||
<option value="工程造价">工程造价（结算审计、概算编制及审核、清单控制价编制及审核）</option>
|
||
<option value="工程监理">工程监理</option>
|
||
<option value="工程设计">工程设计</option>
|
||
<option value="工程代建">工程代建</option>
|
||
<option value="招标代理">招标代理</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-item">
|
||
<label class="form-label">
|
||
<span class="required">*</span>基础金额（元）
|
||
</label>
|
||
<input type="number" id="baseAmount" class="form-input" placeholder="根据文件计算的基础金额" oninput="calculateFee()">
|
||
<div style="font-size: 12px; color: #999; margin-top: 4px;">根据对应文件计算的基础金额</div>
|
||
</div>
|
||
<div class="form-item">
|
||
<label class="form-label">
|
||
<span class="required">*</span>折扣率
|
||
</label>
|
||
<input type="number" id="discountRate" class="form-input" placeholder="0-1之间的小数" min="0" max="1" step="0.01" value="1" oninput="calculateFee()">
|
||
<div style="font-size: 12px; color: #999; margin-top: 4px;">0-1之间的小数，如0.8表示8折</div>
|
||
</div>
|
||
</div>
|
||
<div id="adjustmentFactors" style="display: none;">
|
||
<div class="form-row">
|
||
<div class="form-item">
|
||
<label class="form-label">专业调整系数</label>
|
||
<input type="number" id="professionalFactor" class="form-input" placeholder="专业调整系数" min="0" step="0.01" value="1" oninput="calculateFee()">
|
||
</div>
|
||
<div class="form-item">
|
||
<label class="form-label">工程复杂程度调整系数</label>
|
||
<input type="number" id="complexityFactor" class="form-input" placeholder="工程复杂程度调整系数" min="0" step="0.01" value="1" oninput="calculateFee()">
|
||
</div>
|
||
<div class="form-item">
|
||
<label class="form-label">高程调整系数</label>
|
||
<input type="number" id="elevationFactor" class="form-input" placeholder="高程调整系数" min="0" step="0.01" value="1" oninput="calculateFee()">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="result-box">
|
||
<div class="result-label">最终费用</div>
|
||
<div class="result-value" id="finalFee">¥0.00</div>
|
||
</div>
|
||
|
||
<div id="formulaInfo" class="formula-info" style="display: none;">
|
||
<div class="formula-title">计算公式说明：</div>
|
||
<div id="formulaText"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="help-card">
|
||
<div class="help-title">📋 计算公式依据文件</div>
|
||
<div class="help-item">• 工程咨询：依据鄂价房字[2001]107号文计算 × 折扣率</div>
|
||
<div class="help-item">• 工程造价：依据鄂价工服规[2012]149号文计算 × 折扣率</div>
|
||
<div class="help-item">• 工程监理：依据发改价格[2007]670号文计算 × 专业调整系数 × 工程复杂程度调整系数 × 高程调整系数 × 折扣率</div>
|
||
<div class="help-item">• 工程设计：依据计价格[2002]10号文计算 × 折扣率</div>
|
||
<div class="help-item">• 工程代建：依据财建[2016]504号文计算 × 折扣率</div>
|
||
<div class="help-item">• 招标代理：依据鄂建文〔2023〕35号文计算 × 折扣率</div>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button class="btn btn-default" onclick="resetForm()">重置</button>
|
||
<button class="btn btn-primary" onclick="exportResult()">导出结果</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script src="common.js"></script>
|
||
<script>
|
||
// 计算公式说明
|
||
const formulaMap = {
|
||
'工程咨询': '依据鄂价房字[2001]107号文计算 × 折扣率',
|
||
'工程造价': '依据鄂价工服规[2012]149号文计算 × 折扣率',
|
||
'工程监理': '依据发改价格[2007]670号文计算 × 专业调整系数 × 工程复杂程度调整系数 × 高程调整系数 × 折扣率',
|
||
'工程设计': '依据计价格[2002]10号文计算 × 折扣率',
|
||
'工程代建': '依据财建[2016]504号文计算 × 折扣率',
|
||
'招标代理': '依据鄂建文〔2023〕35号文计算 × 折扣率'
|
||
};
|
||
|
||
// 服务类型变化事件
|
||
function onServiceTypeChange() {
|
||
const serviceType = document.getElementById('serviceType').value;
|
||
const adjustmentFactors = document.getElementById('adjustmentFactors');
|
||
const formulaInfo = document.getElementById('formulaInfo');
|
||
const formulaText = document.getElementById('formulaText');
|
||
|
||
if (serviceType === '工程监理') {
|
||
adjustmentFactors.style.display = 'block';
|
||
} else {
|
||
adjustmentFactors.style.display = 'none';
|
||
}
|
||
|
||
if (serviceType && formulaMap[serviceType]) {
|
||
formulaText.textContent = formulaMap[serviceType];
|
||
formulaInfo.style.display = 'block';
|
||
} else {
|
||
formulaInfo.style.display = 'none';
|
||
}
|
||
|
||
calculateFee();
|
||
}
|
||
|
||
// 计算费用
|
||
function calculateFee() {
|
||
const serviceType = document.getElementById('serviceType').value;
|
||
const baseAmount = parseFloat(document.getElementById('baseAmount').value) || 0;
|
||
const discountRate = parseFloat(document.getElementById('discountRate').value) || 1;
|
||
|
||
let finalFee = 0;
|
||
|
||
if (baseAmount > 0 && serviceType) {
|
||
if (serviceType === '工程监理') {
|
||
const professionalFactor = parseFloat(document.getElementById('professionalFactor').value) || 1;
|
||
const complexityFactor = parseFloat(document.getElementById('complexityFactor').value) || 1;
|
||
const elevationFactor = parseFloat(document.getElementById('elevationFactor').value) || 1;
|
||
finalFee = baseAmount * professionalFactor * complexityFactor * elevationFactor * discountRate;
|
||
} else {
|
||
finalFee = baseAmount * discountRate;
|
||
}
|
||
}
|
||
|
||
document.getElementById('finalFee').textContent = '¥' + finalFee.toLocaleString('zh-CN', {
|
||
minimumFractionDigits: 2,
|
||
maximumFractionDigits: 2
|
||
});
|
||
}
|
||
|
||
// 重置表单
|
||
function resetForm() {
|
||
CommonUtils.confirm('确认重置表单？', () => {
|
||
document.getElementById('serviceType').value = '';
|
||
document.getElementById('baseAmount').value = '';
|
||
document.getElementById('discountRate').value = '1';
|
||
document.getElementById('professionalFactor').value = '1';
|
||
document.getElementById('complexityFactor').value = '1';
|
||
document.getElementById('elevationFactor').value = '1';
|
||
document.getElementById('adjustmentFactors').style.display = 'none';
|
||
document.getElementById('formulaInfo').style.display = 'none';
|
||
document.getElementById('finalFee').textContent = '¥0.00';
|
||
});
|
||
}
|
||
|
||
// 导出结果
|
||
function exportResult() {
|
||
const serviceType = document.getElementById('serviceType').value;
|
||
const baseAmount = document.getElementById('baseAmount').value;
|
||
const discountRate = document.getElementById('discountRate').value;
|
||
const finalFee = document.getElementById('finalFee').textContent;
|
||
|
||
if (!serviceType || !baseAmount) {
|
||
CommonUtils.showMessage('请先完成计算', 'warning');
|
||
return;
|
||
}
|
||
|
||
const result = {
|
||
服务类型: serviceType,
|
||
基础金额: '¥' + parseFloat(baseAmount).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 }),
|
||
折扣率: discountRate,
|
||
最终费用: finalFee,
|
||
计算公式: formulaMap[serviceType] || '',
|
||
计算时间: new Date().toLocaleString('zh-CN')
|
||
};
|
||
|
||
// 导出为文本
|
||
let text = '费用计算结果\n';
|
||
text += '='.repeat(30) + '\n';
|
||
for (let key in result) {
|
||
text += key + '：' + result[key] + '\n';
|
||
}
|
||
|
||
const blob = new Blob([text], { type: 'text/plain;charset=utf-8' });
|
||
const url = URL.createObjectURL(blob);
|
||
const a = document.createElement('a');
|
||
a.href = url;
|
||
a.download = '费用计算结果_' + new Date().getTime() + '.txt';
|
||
a.click();
|
||
URL.revokeObjectURL(url);
|
||
|
||
CommonUtils.showMessage('结果已导出');
|
||
}
|
||
</script>
|
||
<script src="unified-layout.js"></script>
|
||
<script>
|
||
initUnifiedLayout('tool');
|
||
</script>
|
||
</body>
|
||
</html>
|
||
|