|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<title>绍兴黄酒企业发展战略分析</title> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.min.js"></script> |
|
|
<style> |
|
|
:root { |
|
|
--primary-color: #1976D2; |
|
|
--secondary-color: #4CAF50; |
|
|
--accent-color: #E65100; |
|
|
--background-color: #f8f9fa; |
|
|
--card-shadow: 0 4px 6px rgba(0,0,0,0.1); |
|
|
--transition-speed: 0.3s; |
|
|
--sidebar-width: 400px; |
|
|
} |
|
|
|
|
|
|
|
|
body { |
|
|
font-family: 'Microsoft YaHei', sans-serif; |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
background: var(--background-color); |
|
|
color: #333; |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
.container { |
|
|
max-width: 1400px; |
|
|
margin: 0 auto; |
|
|
padding: 40px 20px; |
|
|
transition: margin-right var(--transition-speed); |
|
|
} |
|
|
|
|
|
.container.sidebar-active { |
|
|
margin-right: var(--sidebar-width); |
|
|
} |
|
|
|
|
|
|
|
|
.header { |
|
|
background: linear-gradient(135deg, var(--primary-color), #2196F3); |
|
|
color: white; |
|
|
padding: 40px; |
|
|
border-radius: 16px; |
|
|
margin-bottom: 40px; |
|
|
box-shadow: var(--card-shadow); |
|
|
} |
|
|
|
|
|
.header h1 { |
|
|
margin: 0; |
|
|
font-size: 2.5em; |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
.header p { |
|
|
margin: 10px 0 0; |
|
|
font-size: 1.2em; |
|
|
opacity: 0.9; |
|
|
} |
|
|
|
|
|
|
|
|
.grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(2, 1fr); |
|
|
gap: 30px; |
|
|
margin-bottom: 30px; |
|
|
} |
|
|
|
|
|
|
|
|
.card { |
|
|
background: white; |
|
|
padding: 30px; |
|
|
border-radius: 16px; |
|
|
box-shadow: var(--card-shadow); |
|
|
transition: transform var(--transition-speed); |
|
|
} |
|
|
|
|
|
.card:hover { |
|
|
transform: translateY(-5px); |
|
|
} |
|
|
|
|
|
|
|
|
.chart { |
|
|
height: 400px; |
|
|
margin-top: 20px; |
|
|
} |
|
|
|
|
|
|
|
|
.tab-container { |
|
|
margin-top: 40px; |
|
|
} |
|
|
|
|
|
.tab-buttons { |
|
|
display: flex; |
|
|
gap: 20px; |
|
|
margin-bottom: 30px; |
|
|
border-bottom: 2px solid #e0e0e0; |
|
|
padding-bottom: 10px; |
|
|
} |
|
|
|
|
|
.tab-button { |
|
|
padding: 15px 30px; |
|
|
border: none; |
|
|
background: none; |
|
|
font-size: 1.1em; |
|
|
font-weight: 500; |
|
|
color: #666; |
|
|
cursor: pointer; |
|
|
transition: all var(--transition-speed); |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.tab-button::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: -12px; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 3px; |
|
|
background: var(--primary-color); |
|
|
transform: scaleX(0); |
|
|
transition: transform var(--transition-speed); |
|
|
} |
|
|
|
|
|
.tab-button.active { |
|
|
color: var(--primary-color); |
|
|
} |
|
|
|
|
|
.tab-button.active::after { |
|
|
transform: scaleX(1); |
|
|
} |
|
|
|
|
|
.tab-content { |
|
|
display: none; |
|
|
padding: 20px; |
|
|
} |
|
|
|
|
|
.tab-content.active { |
|
|
display: block; |
|
|
} |
|
|
|
|
|
|
|
|
.sidebar { |
|
|
position: fixed; |
|
|
right: calc(-1 * var(--sidebar-width)); |
|
|
top: 0; |
|
|
width: var(--sidebar-width); |
|
|
height: 100vh; |
|
|
background: white; |
|
|
box-shadow: -2px 0 5px rgba(0,0,0,0.1); |
|
|
transition: right var(--transition-speed); |
|
|
z-index: 1000; |
|
|
overflow-y: auto; |
|
|
} |
|
|
|
|
|
.sidebar.active { |
|
|
right: 0; |
|
|
} |
|
|
|
|
|
.sidebar-toggle { |
|
|
position: fixed; |
|
|
right: 20px; |
|
|
top: 20px; |
|
|
z-index: 1001; |
|
|
background: var(--primary-color); |
|
|
color: white; |
|
|
border: none; |
|
|
padding: 12px 20px; |
|
|
border-radius: 8px; |
|
|
cursor: pointer; |
|
|
box-shadow: var(--card-shadow); |
|
|
} |
|
|
|
|
|
.sidebar-content { |
|
|
padding: 20px; |
|
|
} |
|
|
|
|
|
.edit-section { |
|
|
margin-bottom: 30px; |
|
|
border-bottom: 1px solid #eee; |
|
|
padding-bottom: 20px; |
|
|
} |
|
|
|
|
|
.edit-section h3 { |
|
|
margin: 0 0 15px 0; |
|
|
color: var(--primary-color); |
|
|
} |
|
|
|
|
|
|
|
|
.form-group { |
|
|
margin-bottom: 15px; |
|
|
} |
|
|
|
|
|
.form-group label { |
|
|
display: block; |
|
|
margin-bottom: 5px; |
|
|
font-weight: 500; |
|
|
} |
|
|
|
|
|
.form-group input, |
|
|
.form-group textarea, |
|
|
.form-group select { |
|
|
width: 100%; |
|
|
padding: 8px; |
|
|
border: 1px solid #ddd; |
|
|
border-radius: 4px; |
|
|
font-size: 14px; |
|
|
} |
|
|
|
|
|
.form-group input:focus, |
|
|
.form-group textarea:focus, |
|
|
.form-group select:focus { |
|
|
outline: none; |
|
|
border-color: var(--primary-color); |
|
|
box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.1); |
|
|
} |
|
|
|
|
|
|
|
|
.strategy-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(3, 1fr); |
|
|
gap: 20px; |
|
|
margin-top: 20px; |
|
|
} |
|
|
|
|
|
.strategy-card { |
|
|
background: white; |
|
|
border-radius: 12px; |
|
|
overflow: hidden; |
|
|
box-shadow: var(--card-shadow); |
|
|
} |
|
|
|
|
|
.strategy-header { |
|
|
padding: 20px; |
|
|
color: white; |
|
|
font-weight: bold; |
|
|
} |
|
|
|
|
|
.strategy-content { |
|
|
padding: 20px; |
|
|
} |
|
|
|
|
|
.strategy-content ul { |
|
|
padding-left: 20px; |
|
|
margin: 0; |
|
|
list-style-type: none; |
|
|
} |
|
|
|
|
|
.strategy-content li { |
|
|
margin-bottom: 12px; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.strategy-content li::before { |
|
|
content: '•'; |
|
|
color: var(--primary-color); |
|
|
font-weight: bold; |
|
|
position: absolute; |
|
|
left: -15px; |
|
|
} |
|
|
|
|
|
|
|
|
.metrics-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(4, 1fr); |
|
|
gap: 20px; |
|
|
} |
|
|
|
|
|
.metric-card { |
|
|
background: white; |
|
|
padding: 20px; |
|
|
border-radius: 12px; |
|
|
text-align: center; |
|
|
box-shadow: var(--card-shadow); |
|
|
} |
|
|
|
|
|
.metric-value { |
|
|
font-size: 2em; |
|
|
font-weight: 600; |
|
|
color: var(--primary-color); |
|
|
margin: 10px 0; |
|
|
} |
|
|
|
|
|
|
|
|
.implementation-timeline { |
|
|
padding: 30px; |
|
|
background: white; |
|
|
border-radius: 16px; |
|
|
margin-top: 30px; |
|
|
} |
|
|
|
|
|
.timeline-item { |
|
|
position: relative; |
|
|
padding-left: 30px; |
|
|
margin-bottom: 30px; |
|
|
} |
|
|
|
|
|
.timeline-item::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
left: 0; |
|
|
top: 0; |
|
|
bottom: 0; |
|
|
width: 2px; |
|
|
background: var(--primary-color); |
|
|
} |
|
|
|
|
|
.timeline-item::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
left: -4px; |
|
|
top: 0; |
|
|
width: 10px; |
|
|
height: 10px; |
|
|
border-radius: 50%; |
|
|
background: var(--primary-color); |
|
|
} |
|
|
|
|
|
|
|
|
.analysis-table { |
|
|
width: 100%; |
|
|
border-collapse: separate; |
|
|
border-spacing: 0; |
|
|
margin-top: 20px; |
|
|
} |
|
|
|
|
|
.analysis-table th, |
|
|
.analysis-table td { |
|
|
padding: 15px; |
|
|
border: 1px solid #ddd; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.analysis-table th { |
|
|
background: #f5f5f5; |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
.analysis-table tr:hover { |
|
|
background: #f8f9fa; |
|
|
} |
|
|
|
|
|
|
|
|
@media (max-width: 1200px) { |
|
|
.grid, |
|
|
.strategy-grid { |
|
|
grid-template-columns: repeat(2, 1fr); |
|
|
} |
|
|
|
|
|
.metrics-grid { |
|
|
grid-template-columns: repeat(2, 1fr); |
|
|
} |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.grid, |
|
|
.strategy-grid, |
|
|
.metrics-grid { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
|
|
|
.container.sidebar-active { |
|
|
margin-right: 0; |
|
|
} |
|
|
|
|
|
.sidebar { |
|
|
width: 100%; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<button class="sidebar-toggle" onclick="toggleSidebar()"> |
|
|
⚙️ 编辑数据 |
|
|
</button> |
|
|
|
|
|
|
|
|
<div class="sidebar" id="sidebar"> |
|
|
<div class="sidebar-content"> |
|
|
|
|
|
<div class="edit-section"> |
|
|
<h3>基本信息</h3> |
|
|
<div class="form-group"> |
|
|
<label>报告标题</label> |
|
|
<input type="text" id="report-title" value="绍兴黄酒企业发展战略分析" onchange="updateContent('title')"> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label>报告副标题</label> |
|
|
<input type="text" id="report-subtitle" value="基于市场数据的综合分析与建议 - 2024年度战略规划" onchange="updateContent('subtitle')"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="edit-section"> |
|
|
<h3>市场份额数据</h3> |
|
|
<div class="form-group"> |
|
|
<label>传统黄酒占比 (%)</label> |
|
|
<input type="number" id="traditional-share" value="35" min="0" max="100" onchange="updateMarketShare()"> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label>创新产品占比 (%)</label> |
|
|
<input type="number" id="innovation-share" value="25" min="0" max="100" onchange="updateMarketShare()"> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label>高端定制占比 (%)</label> |
|
|
<input type="number" id="premium-share" value="20" min="0" max="100" onchange="updateMarketShare()"> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label>其他产品占比 (%)</label> |
|
|
<input type="number" id="other-share" value="20" min="0" max="100" onchange="updateMarketShare()"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="edit-section"> |
|
|
<h3>销售趋势数据</h3> |
|
|
<div id="sales-data-container"> |
|
|
<div class="form-group"> |
|
|
<label>2019年销售额（亿元）</label> |
|
|
<input type="number" data-year="2019" value="15" min="0" step="0.1" onchange="updateSalesTrend()"> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label>2020年销售额（亿元）</label> |
|
|
<input type="number" data-year="2020" value="18" min="0" step="0.1" onchange="updateSalesTrend()"> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label>2021年销售额（亿元）</label> |
|
|
<input type="number" data-year="2021" value="22" min="0" step="0.1" onchange="updateSalesTrend()"> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label>2022年销售额（亿元）</label> |
|
|
<input type="number" data-year="2022" value="27" min="0" step="0.1" onchange="updateSalesTrend()"> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label>2023年销售额（亿元）</label> |
|
|
<input type="number" data-year="2023" value="32" min="0" step="0.1" onchange="updateSalesTrend()"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="edit-section"> |
|
|
<h3>战略目标数据</h3> |
|
|
<div class="form-group"> |
|
|
<label>品牌价值提升目标 (%)</label> |
|
|
<input type="number" id="brand-value-target" value="35" min="0" max="100" onchange="updateMetrics()"> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label>新品销售占比目标 (%)</label> |
|
|
<input type="number" id="new-product-target" value="25" min="0" max="100" onchange="updateMetrics()"> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label>渠道覆盖率目标 (%)</label> |
|
|
<input type="number" id="channel-coverage-target" value="85" min="0" max="100" onchange="updateMetrics()"> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label>客户满意度目标 (%)</label> |
|
|
<input type="number" id="customer-satisfaction-target" value="92" min="0" max="100" onchange="updateMetrics()"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="edit-section"> |
|
|
<h3>投资项目数据</h3> |
|
|
<div class="form-group"> |
|
|
<label>智能化改造投资（万元）</label> |
|
|
<input type="number" id="smart-investment" value="5000" min="0" onchange="updateInvestment()"> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label>品牌建设投资（万元）</label> |
|
|
<input type="number" id="brand-investment" value="3000" min="0" onchange="updateInvestment()"> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label>渠道扩展投资（万元）</label> |
|
|
<input type="number" id="channel-investment" value="2500" min="0" onchange="updateInvestment()"> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label>研发创新投资（万元）</label> |
|
|
<input type="number" id="rd-investment" value="3500" min="0" onchange="updateInvestment()"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="container" id="main-container"> |
|
|
<div class="header"> |
|
|
<h1 id="main-title">绍兴黄酒企业发展战略分析</h1> |
|
|
<p id="main-subtitle">基于市场数据的综合分析与建议 - 2024年度战略规划</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid"> |
|
|
<div class="card"> |
|
|
<h2>市场份额分布</h2> |
|
|
<div id="marketShare" class="chart"></div> |
|
|
</div> |
|
|
|
|
|
<div class="card"> |
|
|
<h2>销售增长趋势</h2> |
|
|
<div id="salesTrend" class="chart"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="tab-container"> |
|
|
<div class="tab-buttons"> |
|
|
<button class="tab-button active" onclick="showTab('strategy')">战略规划</button> |
|
|
<button class="tab-button" onclick="showTab('implementation')">实施路径</button> |
|
|
<button class="tab-button" onclick="showTab('metrics')">关键指标</button> |
|
|
<button class="tab-button" onclick="showTab('investment')">投资分析</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="strategy" class="tab-content active"> |
|
|
<div class="strategy-grid"> |
|
|
|
|
|
<div class="strategy-card"> |
|
|
<div class="strategy-header" style="background: var(--primary-color);">品牌战略升级</div> |
|
|
<div class="strategy-content"> |
|
|
<ul> |
|
|
<li><strong>品牌定位重塑：</strong>突出"千年古法，现代创新"的品牌核心价值</li> |
|
|
<li><strong>产品线优化：</strong>构建"传统、创新、高端定制"三层产品体系</li> |
|
|
<li><strong>品牌营销创新：</strong>整合线上线下渠道，打造沉浸式品牌体验</li> |
|
|
<li><strong>国际化布局：</strong>规划海外市场拓展路径，建立品牌国际影响力</li> |
|
|
</ul> |
|
|
<div class="progress-section"> |
|
|
<span>完成进度：75%</span> |
|
|
<div class="progress-bar"> |
|
|
<div class="progress-fill" style="width: 75%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="strategy-card"> |
|
|
<div class="strategy-header" style="background: var(--accent-color);">技术创新驱动</div> |
|
|
<div class="strategy-content"> |
|
|
<ul> |
|
|
<li><strong>智能制造升级：</strong>导入AI控制系统，实现精准化生产</li> |
|
|
<li><strong>工艺创新：</strong>开发专利发酵技术，提升产品品质</li> |
|
|
<li><strong>产品研发：</strong>针对年轻消费群开发低度数系列产品</li> |
|
|
<li><strong>质量管理：</strong>建立全链路质量追溯体系</li> |
|
|
</ul> |
|
|
<div class="progress-section"> |
|
|
<span>完成进度：60%</span> |
|
|
<div class="progress-bar"> |
|
|
<div class="progress-fill" style="width: 60%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="strategy-card"> |
|
|
<div class="strategy-header" style="background: var(--secondary-color);">市场拓展战略</div> |
|
|
<div class="strategy-content"> |
|
|
<ul> |
|
|
<li><strong>渠道创新：</strong>构建新零售模式，打通线上线下渠道</li> |
|
|
<li><strong>区域布局：</strong>重点布局一二线城市，渗透下沉市场</li> |
|
|
<li><strong>场景营销：</strong>开发多元化消费场景，提升品牌渗透率</li> |
|
|
<li><strong>客户运营：</strong>建立会员体系，提升客户留存率</li> |
|
|
</ul> |
|
|
<div class="progress-section"> |
|
|
<span>完成进度：85%</span> |
|
|
<div class="progress-bar"> |
|
|
<div class="progress-fill" style="width: 85%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="implementation" class="tab-content"> |
|
|
<div class="implementation-timeline"> |
|
|
<h3>战略实施时间轴</h3> |
|
|
<div class="timeline-item"> |
|
|
<div> |
|
|
<h4>第一阶段：基础建设期（2024 Q1-Q2）</h4> |
|
|
<p>• 完成品牌战略规划<br> |
|
|
• 启动智能制造升级项目<br> |
|
|
• 建立新零售渠道体系</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="timeline-item"> |
|
|
<div> |
|
|
<h4>第二阶段：创新发展期（2024 Q3-Q4）</h4> |
|
|
<p>• 推出创新产品系列<br> |
|
|
• 完成智能制造系统部署<br> |
|
|
• 建立会员运营体系</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="timeline-item"> |
|
|
<div> |
|
|
<h4>第三阶段：市场拓展期（2025 Q1-Q2）</h4> |
|
|
<p>• 拓展国际市场<br> |
|
|
• 深化区域市场渗透<br> |
|
|
• 完善全渠道布局</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="card"> |
|
|
<h3>战略实施进度概览</h3> |
|
|
<div id="implementationProgress" class="chart"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="metrics" class="tab-content"> |
|
|
<div class="metrics-grid"> |
|
|
<div class="metric-card"> |
|
|
<h4>品牌价值提升</h4> |
|
|
<div class="metric-value">35%</div> |
|
|
<p>同比增长</p> |
|
|
</div> |
|
|
<div class="metric-card"> |
|
|
<h4>新品销售占比</h4> |
|
|
<div class="metric-value">25%</div> |
|
|
<p>总销售额</p> |
|
|
</div> |
|
|
<div class="metric-card"> |
|
|
<h4>渠道覆盖率</h4> |
|
|
<div class="metric-value">85%</div> |
|
|
<p>目标市场</p> |
|
|
</div> |
|
|
<div class="metric-card"> |
|
|
<h4>客户满意度</h4> |
|
|
<div class="metric-value">92%</div> |
|
|
<p>评分</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="card"> |
|
|
<h3>预期成果分析</h3> |
|
|
<div id="expectedResults" class="chart"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="investment" class="tab-content"> |
|
|
<div class="card"> |
|
|
<h3>投资回报分析</h3> |
|
|
<table class="analysis-table"> |
|
|
<thead> |
|
|
<tr> |
|
|
<th>投资项目</th> |
|
|
<th>预计投资（万元）</th> |
|
|
<th>预期回报率</th> |
|
|
<th>回收期</th> |
|
|
<th>风险等级</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody> |
|
|
<tr> |
|
|
<td>智能化改造</td> |
|
|
<td>5,000</td> |
|
|
<td>25%</td> |
|
|
<td>3年</td> |
|
|
<td>中等</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td>品牌建设</td> |
|
|
<td>3,000</td> |
|
|
<td>35%</td> |
|
|
<td>2年</td> |
|
|
<td>低</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td>渠道扩展</td> |
|
|
<td>2,500</td> |
|
|
<td>40%</td> |
|
|
<td>1.5年</td> |
|
|
<td>低</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td>研发创新</td> |
|
|
<td>3,500</td> |
|
|
<td>30%</td> |
|
|
<td>2.5年</td> |
|
|
<td>中等</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
|
|
|
<div class="card"> |
|
|
<h3>投资收益预测</h3> |
|
|
<div id="investmentReturn" class="chart"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
function checkEchartsLoad() { |
|
|
if (typeof echarts === 'undefined') { |
|
|
console.error('ECharts 未能正确加载'); |
|
|
return false; |
|
|
} |
|
|
return true; |
|
|
} |
|
|
|
|
|
|
|
|
let charts = {}; |
|
|
|
|
|
|
|
|
const style = getComputedStyle(document.documentElement); |
|
|
const primaryColor = style.getPropertyValue('--primary-color').trim(); |
|
|
const secondaryColor = style.getPropertyValue('--secondary-color').trim(); |
|
|
const accentColor = style.getPropertyValue('--accent-color').trim(); |
|
|
|
|
|
|
|
|
function initCharts() { |
|
|
if (!checkEchartsLoad()) return; |
|
|
|
|
|
try { |
|
|
|
|
|
initMarketShareChart(); |
|
|
|
|
|
|
|
|
initSalesTrendChart(); |
|
|
|
|
|
|
|
|
initExpectedResultsChart(); |
|
|
|
|
|
|
|
|
initInvestmentReturnChart(); |
|
|
|
|
|
|
|
|
initImplementationProgressChart(); |
|
|
} catch (error) { |
|
|
console.error('图表初始化失败:', error); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function initMarketShareChart() { |
|
|
const chartDom = document.getElementById('marketShare'); |
|
|
if (!chartDom) { |
|
|
console.error('找不到市场份额图表容器'); |
|
|
return; |
|
|
} |
|
|
|
|
|
charts.marketShare = echarts.init(chartDom); |
|
|
charts.marketShare.setOption({ |
|
|
title: { |
|
|
text: '市场份额分析', |
|
|
left: 'center', |
|
|
top: '20px' |
|
|
}, |
|
|
tooltip: { |
|
|
trigger: 'item', |
|
|
formatter: '{b}: {c}%' |
|
|
}, |
|
|
legend: { |
|
|
orient: 'vertical', |
|
|
left: '20px', |
|
|
top: 'center' |
|
|
}, |
|
|
series: [{ |
|
|
type: 'pie', |
|
|
radius: ['40%', '70%'], |
|
|
center: ['60%', '50%'], |
|
|
avoidLabelOverlap: true, |
|
|
itemStyle: { |
|
|
borderRadius: 10, |
|
|
borderColor: '#fff', |
|
|
borderWidth: 2 |
|
|
}, |
|
|
label: { |
|
|
show: true, |
|
|
formatter: '{b}: {c}%' |
|
|
}, |
|
|
data: [ |
|
|
{value: 35, name: '传统黄酒'}, |
|
|
{value: 25, name: '创新产品'}, |
|
|
{value: 20, name: '高端定制'}, |
|
|
{value: 20, name: '其他'} |
|
|
], |
|
|
emphasis: { |
|
|
itemStyle: { |
|
|
shadowBlur: 10, |
|
|
shadowOffsetX: 0, |
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)' |
|
|
} |
|
|
} |
|
|
}] |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function initSalesTrendChart() { |
|
|
const chartDom = document.getElementById('salesTrend'); |
|
|
if (!chartDom) { |
|
|
console.error('找不到销售趋势图表容器'); |
|
|
return; |
|
|
} |
|
|
|
|
|
charts.salesTrend = echarts.init(chartDom); |
|
|
charts.salesTrend.setOption({ |
|
|
title: { |
|
|
text: '销售增长趋势', |
|
|
left: 'center' |
|
|
}, |
|
|
tooltip: { |
|
|
trigger: 'axis' |
|
|
}, |
|
|
xAxis: { |
|
|
type: 'category', |
|
|
data: ['2019', '2020', '2021', '2022', '2023'] |
|
|
}, |
|
|
yAxis: { |
|
|
type: 'value', |
|
|
name: '销售额（亿元）' |
|
|
}, |
|
|
series: [{ |
|
|
name: '销售额', |
|
|
type: 'line', |
|
|
smooth: true, |
|
|
data: [15, 18, 22, 27, 32], |
|
|
lineStyle: { |
|
|
color: accentColor |
|
|
}, |
|
|
itemStyle: { |
|
|
color: accentColor |
|
|
} |
|
|
}] |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function initExpectedResultsChart() { |
|
|
const chartDom = document.getElementById('expectedResults'); |
|
|
if (!chartDom) { |
|
|
console.error('找不到预期成果图表容器'); |
|
|
return; |
|
|
} |
|
|
|
|
|
charts.expectedResults = echarts.init(chartDom); |
|
|
charts.expectedResults.setOption({ |
|
|
title: { |
|
|
text: '战略实施预期成果' |
|
|
}, |
|
|
radar: { |
|
|
indicator: [ |
|
|
{ name: '品牌价值', max: 100 }, |
|
|
{ name: '市场份额', max: 100 }, |
|
|
{ name: '创新能力', max: 100 }, |
|
|
{ name: '客户满意度', max: 100 }, |
|
|
{ name: '营收增长', max: 100 }, |
|
|
{ name: '渠道效率', max: 100 } |
|
|
], |
|
|
radius: '65%' |
|
|
}, |
|
|
series: [{ |
|
|
type: 'radar', |
|
|
data: [ |
|
|
{ |
|
|
value: [90, 85, 75, 92, 88, 82], |
|
|
name: '目标值', |
|
|
areaStyle: { |
|
|
color: 'rgba(76, 175, 80, 0.3)' |
|
|
}, |
|
|
lineStyle: { |
|
|
color: secondaryColor |
|
|
} |
|
|
}, |
|
|
{ |
|
|
value: [70, 65, 55, 75, 68, 60], |
|
|
name: '当前值', |
|
|
areaStyle: { |
|
|
color: 'rgba(25, 118, 210, 0.3)' |
|
|
}, |
|
|
lineStyle: { |
|
|
color: primaryColor |
|
|
} |
|
|
} |
|
|
] |
|
|
}] |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function initInvestmentReturnChart() { |
|
|
const chartDom = document.getElementById('investmentReturn'); |
|
|
if (!chartDom) { |
|
|
console.error('找不到投资收益预测图表容器'); |
|
|
return; |
|
|
} |
|
|
|
|
|
charts.investmentReturn = echarts.init(chartDom); |
|
|
charts.investmentReturn.setOption({ |
|
|
title: { |
|
|
text: '投资收益预测' |
|
|
}, |
|
|
tooltip: { |
|
|
trigger: 'axis', |
|
|
formatter: function(params) { |
|
|
let result = params[0].axisValue + '<br/>'; |
|
|
params.forEach(param => { |
|
|
result += param.seriesName + ': ' + param.value + '万元<br/>'; |
|
|
}); |
|
|
return result; |
|
|
} |
|
|
}, |
|
|
legend: { |
|
|
data: ['投资额', '预期收益'] |
|
|
}, |
|
|
xAxis: { |
|
|
type: 'category', |
|
|
data: ['2024', '2025', '2026', '2027', '2028'] |
|
|
}, |
|
|
yAxis: { |
|
|
type: 'value', |
|
|
name: '金额（万元）' |
|
|
}, |
|
|
series: [ |
|
|
{ |
|
|
name: '投资额', |
|
|
type: 'bar', |
|
|
data: [14000, 8000, 6000, 4000, 3000] |
|
|
}, |
|
|
{ |
|
|
name: '预期收益', |
|
|
type: 'line', |
|
|
data: [3500, 7000, 12000, 18000, 25000], |
|
|
lineStyle: { |
|
|
color: secondaryColor |
|
|
}, |
|
|
itemStyle: { |
|
|
color: secondaryColor |
|
|
} |
|
|
} |
|
|
] |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function initImplementationProgressChart() { |
|
|
const chartDom = document.getElementById('implementationProgress'); |
|
|
if (!chartDom) { |
|
|
console.error('找不到实施进度概览图表容器'); |
|
|
return; |
|
|
} |
|
|
|
|
|
charts.implementationProgress = echarts.init(chartDom); |
|
|
charts.implementationProgress.setOption({ |
|
|
title: { |
|
|
text: '战略实施进度概览' |
|
|
}, |
|
|
tooltip: { |
|
|
trigger: 'axis' |
|
|
}, |
|
|
radar: { |
|
|
indicator: [ |
|
|
{ name: '品牌升级', max: 100 }, |
|
|
{ name: '智能制造', max: 100 }, |
|
|
{ name: '渠道建设', max: 100 }, |
|
|
{ name: '产品创新', max: 100 }, |
|
|
{ name: '市场拓展', max: 100 }, |
|
|
{ name: '人才建设', max: 100 } |
|
|
] |
|
|
}, |
|
|
series: [{ |
|
|
type: 'radar', |
|
|
data: [ |
|
|
{ |
|
|
value: [75, 60, 85, 70, 80, 65], |
|
|
name: '完成进度', |
|
|
areaStyle: { |
|
|
color: 'rgba(25, 118, 210, 0.4)' |
|
|
} |
|
|
} |
|
|
] |
|
|
}] |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function updateContent(field) { |
|
|
const value = document.getElementById(`report-${field}`).value; |
|
|
switch(field) { |
|
|
case 'title': |
|
|
document.getElementById('main-title').textContent = value; |
|
|
break; |
|
|
case 'subtitle': |
|
|
document.getElementById('main-subtitle').textContent = value; |
|
|
break; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function updateMarketShare() { |
|
|
const traditional = parseFloat(document.getElementById('traditional-share').value) || 0; |
|
|
const innovation = parseFloat(document.getElementById('innovation-share').value) || 0; |
|
|
const premium = parseFloat(document.getElementById('premium-share').value) || 0; |
|
|
const other = parseFloat(document.getElementById('other-share').value) || 0; |
|
|
|
|
|
if (isNaN(traditional) || isNaN(innovation) || isNaN(premium) || isNaN(other)) { |
|
|
alert('请输入有效数字'); |
|
|
return; |
|
|
} |
|
|
|
|
|
const total = traditional + innovation + premium + other; |
|
|
if (total !== 100) { |
|
|
alert('所有份额之和必须等于100%'); |
|
|
return; |
|
|
} |
|
|
|
|
|
const newData = [ |
|
|
{value: traditional, name: '传统黄酒'}, |
|
|
{value: innovation, name: '创新产品'}, |
|
|
{value: premium, name: '高端定制'}, |
|
|
{value: other, name: '其他'} |
|
|
]; |
|
|
|
|
|
charts.marketShare.setOption({ |
|
|
series: [{ |
|
|
data: newData |
|
|
}] |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function updateSalesTrend() { |
|
|
const salesData = Array.from(document.querySelectorAll('#sales-data-container input')) |
|
|
.map(input => parseFloat(input.value) || 0); |
|
|
|
|
|
if (salesData.some(isNaN)) { |
|
|
alert('请输入有效的销售数据'); |
|
|
return; |
|
|
} |
|
|
|
|
|
charts.salesTrend.setOption({ |
|
|
series: [{ |
|
|
data: salesData |
|
|
}] |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function updateMetrics() { |
|
|
const brandValue = parseFloat(document.getElementById('brand-value-target').value) || 0; |
|
|
const newProduct = parseFloat(document.getElementById('new-product-target').value) || 0; |
|
|
const channelCoverage = parseFloat(document.getElementById('channel-coverage-target').value) || 0; |
|
|
const customerSatisfaction = parseFloat(document.getElementById('customer-satisfaction-target').value) || 0; |
|
|
|
|
|
if ([brandValue, newProduct, channelCoverage, customerSatisfaction].some(isNaN)) { |
|
|
alert('请输入有效的指标数据'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
document.querySelectorAll('.metric-value')[0].textContent = brandValue + '%'; |
|
|
document.querySelectorAll('.metric-value')[1].textContent = newProduct + '%'; |
|
|
document.querySelectorAll('.metric-value')[2].textContent = channelCoverage + '%'; |
|
|
document.querySelectorAll('.metric-value')[3].textContent = customerSatisfaction + '%'; |
|
|
|
|
|
|
|
|
charts.expectedResults.setOption({ |
|
|
series: [{ |
|
|
data: [ |
|
|
{ |
|
|
value: [brandValue, newProduct, channelCoverage, customerSatisfaction, 88, 82], |
|
|
name: '目标值' |
|
|
}, |
|
|
{ |
|
|
value: [70, 65, 55, 75, 68, 60], |
|
|
name: '当前值' |
|
|
} |
|
|
] |
|
|
}] |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function updateInvestment() { |
|
|
const smartInvestment = parseFloat(document.getElementById('smart-investment').value) || 0; |
|
|
const brandInvestment = parseFloat(document.getElementById('brand-investment').value) || 0; |
|
|
const channelInvestment = parseFloat(document.getElementById('channel-investment').value) || 0; |
|
|
const rdInvestment = parseFloat(document.getElementById('rd-investment').value) || 0; |
|
|
|
|
|
if ([smartInvestment, brandInvestment, channelInvestment, rdInvestment].some(isNaN)) { |
|
|
alert('请输入有效的投资金额'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
const table = document.querySelector('.analysis-table'); |
|
|
table.rows[1].cells[1].textContent = smartInvestment.toLocaleString(); |
|
|
table.rows[2].cells[1].textContent = brandInvestment.toLocaleString(); |
|
|
table.rows[3].cells[1].textContent = channelInvestment.toLocaleString(); |
|
|
table.rows[4].cells[1].textContent = rdInvestment.toLocaleString(); |
|
|
|
|
|
|
|
|
const totalInvestment = smartInvestment + brandInvestment + channelInvestment + rdInvestment; |
|
|
charts.investmentReturn.setOption({ |
|
|
series: [ |
|
|
{ |
|
|
name: '投资额', |
|
|
data: [totalInvestment, totalInvestment * 0.6, totalInvestment * 0.4, totalInvestment * 0.3, totalInvestment * 0.2] |
|
|
}, |
|
|
{ |
|
|
name: '预期收益', |
|
|
data: [totalInvestment * 0.25, totalInvestment * 0.5, totalInvestment * 0.8, totalInvestment * 1.2, totalInvestment * 1.6] |
|
|
} |
|
|
] |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function showTab(tabId) { |
|
|
|
|
|
document.querySelectorAll('.tab-content').forEach(content => { |
|
|
content.classList.remove('active'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.tab-button').forEach(button => { |
|
|
button.classList.remove('active'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById(tabId).classList.add('active'); |
|
|
|
|
|
|
|
|
event.target.classList.add('active'); |
|
|
|
|
|
|
|
|
if (charts[tabId]) { |
|
|
charts[tabId].resize(); |
|
|
} else { |
|
|
|
|
|
Object.values(charts).forEach(chart => { |
|
|
if (document.getElementById(tabId).contains(chart.getDom())) { |
|
|
chart.resize(); |
|
|
} |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function toggleSidebar() { |
|
|
const sidebar = document.getElementById('sidebar'); |
|
|
const container = document.getElementById('main-container'); |
|
|
sidebar.classList.toggle('active'); |
|
|
container.classList.toggle('sidebar-active'); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
Object.values(charts).forEach(chart => { |
|
|
chart && chart.resize(); |
|
|
}); |
|
|
}, 300); |
|
|
} |
|
|
|
|
|
|
|
|
let resizeTimer; |
|
|
window.addEventListener('resize', function() { |
|
|
if (resizeTimer) { |
|
|
clearTimeout(resizeTimer); |
|
|
} |
|
|
resizeTimer = setTimeout(function() { |
|
|
Object.values(charts).forEach(chart => { |
|
|
chart && chart.resize(); |
|
|
}); |
|
|
}, 100); |
|
|
}); |
|
|
|
|
|
|
|
|
window.addEventListener('beforeunload', function() { |
|
|
Object.values(charts).forEach(chart => { |
|
|
chart && chart.dispose(); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
setTimeout(() => { |
|
|
initCharts(); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.analysis-table td:not(:first-child)').forEach(cell => { |
|
|
cell.addEventListener('dblclick', function() { |
|
|
const currentValue = this.textContent; |
|
|
const input = document.createElement('input'); |
|
|
input.value = currentValue; |
|
|
input.style.width = '100%'; |
|
|
input.style.border = 'none'; |
|
|
input.style.textAlign = 'center'; |
|
|
|
|
|
input.onblur = function() { |
|
|
cell.textContent = this.value; |
|
|
updateInvestment(); |
|
|
}; |
|
|
|
|
|
input.onkeypress = function(e) { |
|
|
if (e.key === 'Enter') { |
|
|
this.blur(); |
|
|
} |
|
|
}; |
|
|
|
|
|
cell.textContent = ''; |
|
|
cell.appendChild(input); |
|
|
input.focus(); |
|
|
}); |
|
|
}); |
|
|
}, 0); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
