wine

Running

App Files Files Community

mistpe commited on Oct 24, 2024

Commit

c293305

verified ·

1 Parent(s): 600ab57

Create index.html

Browse files

Files changed (1) hide show

index.html +1202 -0

index.html ADDED Viewed

	@@ -0,0 +1,1202 @@

+<!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;
+        }
+        /* Base Styles */
+        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 Styles */
+        .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 Layout */
+        .grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 30px;
+            margin-bottom: 30px;
+        }
+        /* Card Styles */
+        .card {
+            background: white;
+            padding: 30px;
+            border-radius: 16px;
+            box-shadow: var(--card-shadow);
+            transition: transform var(--transition-speed);
+        }
+        .card:hover {
+            transform: translateY(-5px);
+        }
+        /* Chart Container */
+        .chart {
+            height: 400px;
+            margin-top: 20px;
+        }
+        /* Tab Styles */
+        .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 Styles */
+        .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 Styles */
+        .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 Cards */
+        .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 */
+        .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;
+        }
+        /* Timeline Styles */
+        .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);
+        }
+        /* Investment Analysis Table */
+        .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;
+        }
+        /* Responsive Design */
+        @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>
+    <!-- Sidebar -->
+    <div class="sidebar" id="sidebar">
+        <div class="sidebar-content">
+            <!-- Basic Info -->
+            <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>
+            <!-- Market Share Data -->
+            <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>
+            <!-- Sales Trend Data -->
+            <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>
+            <!-- Strategy Data -->
+            <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>
+            <!-- Investment Data -->
+            <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>
+    <!-- Main Content -->
+    <div class="container" id="main-container">
+        <div class="header">
+            <h1 id="main-title">绍兴黄酒企业发展战略分析</h1>
+            <p id="main-subtitle">基于市场数据的综合分析与建议 - 2024年度战略规划</p>
+        </div>
+        <!-- Charts Grid -->
+        <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>
+        <!-- Tab Navigation -->
+        <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>
+            <!-- Strategy Tab -->
+            <div id="strategy" class="tab-content active">
+                <div class="strategy-grid">
+                    <!-- Strategy Cards -->
+                    <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>
+            <!-- Implementation Tab -->
+            <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>
+<!-- Metrics Tab -->
+            <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>
+            <!-- Investment Tab -->
+            <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>
+        // 检查echarts是否正确加载
+        function checkEchartsLoad() {
+            if (typeof echarts === 'undefined') {
+                console.error('ECharts 未能正确加载');
+                return false;
+            }
+            return true;
+        }
+        // 全局变量存储图表实例
+        let charts = {};
+        // 获取CSS变量
+        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'
+                },
+                tooltip: {
+                    trigger: 'item',
+                    formatter: '{b}: {c}%'
+                },
+                legend: {
+                    orient: 'vertical',
+                    left: 'left'
+                },
+                series: [{
+                    type: 'pie',
+                    radius: '50%',
+                    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]
+                    }
+                ]
+            });
+        }
+        // Tab切换功能
+        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() {
+            // 确保DOM完全渲染后再初始化图表
+            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>