{% extends 'layout.html' %}

{% block content %}
<div class="page-transition">
    <!-- 页面标题 -->
    <div class="mb-6">
        <h2 class="text-2xl font-bold mb-2">工厂全局概览</h2>
        <p class="text-gray-400">实时监控生产状态，掌握全局运营情况</p>
    </div>

    <!-- 时间筛选器 -->
    <div class="flex flex-wrap gap-2 mb-6">
        {% set time_ranges = ['实时', '今日', '本周', '本月', '自定义'] %}
        {% for range in time_ranges %}
            <button class="time-filter px-4 py-2 rounded-md bg-gray-700/50 hover:bg-gray-600/50 transition-colors text-sm" data-time-range="{{ range }}">
                {{ range }}
            </button>
        {% endfor %}
    </div>

    <!-- 主内容网格 -->
    <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
        <!-- 左侧面板 -->
        <div class="lg:col-span-1 space-y-6">
            <!-- 工厂结构树 -->
            <div class="glass-card p-4 rounded-lg">
                <h3 class="text-lg font-semibold mb-3 flex items-center">
                    <i class="fas fa-sitemap mr-2 text-blue-400"></i>
                    工厂结构
                </h3>
                <div class="space-y-2">
                    <div class="factory-tree-node p-2 rounded hover:bg-gray-700/50 cursor-pointer flex items-center justify-between" data-node-id="F001" data-node-type="factory">
                        <div class="flex items-center">
                            <i class="fas fa-industry mr-2 text-blue-400"></i>
                            <span>智能工厂A</span>
                        </div>
                        <i class="fas fa-chevron-down text-xs"></i>
                    </div>
                    <div class="ml-6 space-y-2">
                        <div class="factory-tree-node p-2 rounded hover:bg-gray-700/50 cursor-pointer flex items-center justify-between" data-node-id="W001" data-node-type="workshop">
                            <div class="flex items-center">
                                <i class="fas fa-warehouse mr-2 text-green-400"></i>
                                <span>总装车间</span>
                            </div>
                            <i class="fas fa-chevron-right text-xs"></i>
                        </div>
                        <div class="factory-tree-node p-2 rounded hover:bg-gray-700/50 cursor-pointer flex items-center justify-between" data-node-id="W002" data-node-type="workshop">
                            <div class="flex items-center">
                                <i class="fas fa-warehouse mr-2 text-yellow-400"></i>
                                <span>部件车间</span>
                            </div>
                            <i class="fas fa-chevron-right text-xs"></i>
                        </div>
                        <div class="factory-tree-node p-2 rounded hover:bg-gray-700/50 cursor-pointer flex items-center justify-between" data-node-id="W003" data-node-type="workshop">
                            <div class="flex items-center">
                                <i class="fas fa-warehouse mr-2 text-purple-400"></i>
                                <span>测试车间</span>
                            </div>
                            <i class="fas fa-chevron-right text-xs"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 实时警报 -->
            <div class="glass-card p-4 rounded-lg">
                <h3 class="text-lg font-semibold mb-3 flex items-center">
                    <i class="fas fa-bell mr-2 text-orange-400"></i>
                    实时警报
                </h3>
                <div class="alarm-list max-h-80 overflow-y-auto">
                    <!-- 警报列表将通过JavaScript动态生成 -->
                    <div class="text-center text-gray-400 py-8">
                        加载中...
                    </div>
                </div>
            </div>

            <!-- 快速操作 -->
            <div class="glass-card p-4 rounded-lg">
                <h3 class="text-lg font-semibold mb-3 flex items-center">
                    <i class="fas fa-bolt mr-2 text-yellow-400"></i>
                    快速操作
                </h3>
                <div class="grid grid-cols-2 gap-2">
                    <button class="glass-btn flex flex-col items-center py-3 rounded-md" onclick="showMVPMessage()">
                        <i class="fas fa-download mb-1"></i>
                        <span class="text-xs">导出报表</span>
                    </button>
                    <button class="glass-btn flex flex-col items-center py-3 rounded-md" onclick="showMVPMessage()">
                        <i class="fas fa-cog mb-1"></i>
                        <span class="text-xs">系统设置</span>
                    </button>
                    <button class="glass-btn flex flex-col items-center py-3 rounded-md" onclick="showMVPMessage()">
                        <i class="fas fa-user-cog mb-1"></i>
                        <span class="text-xs">用户管理</span>
                    </button>
                    <button class="glass-btn flex flex-col items-center py-3 rounded-md" onclick="showMVPMessage()">
                        <i class="fas fa-question-circle mb-1"></i>
                        <span class="text-xs">帮助中心</span>
                    </button>
                </div>
            </div>
        </div>

        <!-- 右侧主视图 -->
        <div class="lg:col-span-3 space-y-6">
            <!-- 顶部KPI卡片组 -->
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                {% set kpi_items = [
                    { "title": "综合设备效率", "value": "85.2%", "icon": "fa-chart-pie", "type": "oee", "color": "bg-blue-500/20 border-blue-500/30" },
                    { "title": "今日产出", "value": "486", "icon": "fa-boxes", "type": "output", "color": "bg-green-500/20 border-green-500/30" },
                    { "title": "质量合格率", "value": "97.8%", "icon": "fa-check-circle", "type": "quality", "color": "bg-green-500/20 border-green-500/30" },
                    { "title": "生产效率", "value": "88.5%", "icon": "fa-tachometer-alt", "type": "efficiency", "color": "bg-yellow-500/20 border-yellow-500/30" },
                    { "title": "设备可用率", "value": "92.3%", "icon": "fa-server", "type": "availability", "color": "bg-purple-500/20 border-purple-500/30" },
                    { "title": "能耗", "value": "235.6 kWh", "icon": "fa-bolt", "type": "energy", "color": "bg-orange-500/20 border-orange-500/30" }
                ] %}
                
                {% for kpi in kpi_items %}
                    <div class="kpi-card glass-card p-4 rounded-lg border {{ kpi.color }}">
                        <div class="flex justify-between items-start mb-3">
                            <h4 class="text-sm text-gray-400">{{ kpi.title }}</h4>
                            <div class="w-8 h-8 rounded-full bg-gray-700/50 flex items-center justify-center">
                                <i class="fas {{ kpi.icon }} text-white"></i>
                            </div>
                        </div>
                        <div class="value font-mono text-2xl font-bold" data-kpi-type="{{ kpi.type }}">
                            {{ kpi.value }}
                        </div>
                        <div class="mt-2 text-xs text-green-400 flex items-center">
                            <i class="fas fa-arrow-up mr-1"></i>
                            <span>2.5% 较昨日</span>
                        </div>
                    </div>
                {% endfor %}
            </div>

            <!-- 车间布局可视化 -->
            <div class="glass-card p-4 rounded-lg">
                <h3 class="text-lg font-semibold mb-3 flex items-center">
                    <i class="fas fa-map mr-2 text-green-400"></i>
                    车间布局
                </h3>
                <div class="bg-gray-800/50 rounded-lg p-2 h-[500px] overflow-hidden">
                    <!-- SVG车间平面图 -->
                    <svg width="100%" height="100%" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
                        <!-- 车间背景 -->
                        <rect x="10" y="10" width="780" height="580" fill="#1e293b" rx="5" ry="5" stroke="#374151" stroke-width="2"/>
                        
                        <!-- 标题 -->
                        <text x="400" y="40" text-anchor="middle" font-size="18" fill="#94a3b8" font-weight="bold">智能工厂A车间布局</text>
                        
                        <!-- 产线1：总装车间 -->
                        <rect x="50" y="80" width="220" height="150" fill="#10b981" opacity="0.2" rx="5" ry="5" stroke="#10b981" stroke-width="2"/>
                        <text x="160" y="110" text-anchor="middle" font-size="14" fill="#10b981" font-weight="bold">总装车间</text>
                        <text x="160" y="135" text-anchor="middle" font-size="12" fill="#94a3b8">产线1</text>
                        <text x="160" y="160" text-anchor="middle" font-size="12" fill="#94a3b8">状态：运行中</text>
                        <rect x="70" y="180" width="180" height="35" fill="#1f2937" rx="3" ry="3"/>
                        <rect x="70" y="180" width="154" height="35" fill="#10b981" rx="3" ry="3"/>
                        <text x="160" y="202" text-anchor="middle" font-size="12" fill="white">效率：70%</text>
                        
                        <!-- 产线2：部件车间 -->
                        <rect x="320" y="80" width="220" height="150" fill="#f59e0b" opacity="0.2" rx="5" ry="5" stroke="#f59e0b" stroke-width="2"/>
                        <text x="430" y="110" text-anchor="middle" font-size="14" fill="#f59e0b" font-weight="bold">部件车间</text>
                        <text x="430" y="135" text-anchor="middle" font-size="12" fill="#94a3b8">产线2</text>
                        <text x="430" y="160" text-anchor="middle" font-size="12" fill="#94a3b8">状态：运行中</text>
                        <rect x="340" y="180" width="180" height="35" fill="#1f2937" rx="3" ry="3"/>
                        <rect x="340" y="180" width="132" height="35" fill="#f59e0b" rx="3" ry="3"/>
                        <text x="430" y="202" text-anchor="middle" font-size="12" fill="white">效率：60%</text>
                        
                        <!-- 产线3：测试车间 -->
                        <rect x="570" y="80" width="210" height="150" fill="#3b82f6" opacity="0.2" rx="5" ry="5" stroke="#3b82f6" stroke-width="2"/>
                        <text x="675" y="110" text-anchor="middle" font-size="14" fill="#3b82f6" font-weight="bold">测试车间</text>
                        <text x="675" y="135" text-anchor="middle" font-size="12" fill="#94a3b8">产线3</text>
                        <text x="675" y="160" text-anchor="middle" font-size="12" fill="#94a3b8">状态：运行中</text>
                        <rect x="590" y="180" width="170" height="35" fill="#1f2937" rx="3" ry="3"/>
                        <rect x="590" y="180" width="148.5" height="35" fill="#3b82f6" rx="3" ry="3"/>
                        <text x="675" y="202" text-anchor="middle" font-size="12" fill="white">效率：75%</text>
                        
                        <!-- 仓库 -->
                        <rect x="40" y="260" width="210" height="140" fill="#8b5cf6" opacity="0.2" rx="5" ry="5" stroke="#8b5cf6" stroke-width="2"/>
                        <text x="145" y="290" text-anchor="middle" font-size="14" fill="#8b5cf6" font-weight="bold">原材料仓库</text>
                        <text x="145" y="320" text-anchor="middle" font-size="12" fill="#94a3b8">库存：85%</text>
                        <text x="145" y="350" text-anchor="middle" font-size="12" fill="#94a3b8">位置：W001</text>
                        
                        <!-- 质检区 -->
                        <rect x="310" y="260" width="210" height="140" fill="#ef4444" opacity="0.2" rx="5" ry="5" stroke="#ef4444" stroke-width="2"/>
                        <text x="415" y="290" text-anchor="middle" font-size="14" fill="#ef4444" font-weight="bold">质检区</text>
                        <text x="415" y="320" text-anchor="middle" font-size="12" fill="#94a3b8">合格率：98.5%</text>
                        <text x="415" y="350" text-anchor="middle" font-size="12" fill="#94a3b8">检测设备：12台</text>
                        
                        <!-- 成品仓库 -->
                        <rect x="570" y="260" width="210" height="140" fill="#10b981" opacity="0.2" rx="5" ry="5" stroke="#10b981" stroke-width="2"/>
                        <text x="675" y="290" text-anchor="middle" font-size="14" fill="#10b981" font-weight="bold">成品仓库</text>
                        <text x="675" y="320" text-anchor="middle" font-size="12" fill="#94a3b8">库存：45%</text>
                        <text x="675" y="350" text-anchor="middle" font-size="12" fill="#94a3b8">已发货：1200件</text>
                        
                        <!-- 包装区 -->
                        <rect x="40" y="420" width="210" height="140" fill="#6366f1" opacity="0.2" rx="5" ry="5" stroke="#6366f1" stroke-width="2"/>
                        <text x="145" y="450" text-anchor="middle" font-size="14" fill="#6366f1" font-weight="bold">包装区</text>
                        <text x="145" y="480" text-anchor="middle" font-size="12" fill="#94a3b8">包装线：2条</text>
                        <text x="145" y="510" text-anchor="middle" font-size="12" fill="#94a3b8">日产能：500件</text>
                        
                        <!-- 物流区 -->
                        <rect x="310" y="420" width="210" height="140" fill="#f97316" opacity="0.2" rx="5" ry="5" stroke="#f97316" stroke-width="2"/>
                        <text x="415" y="450" text-anchor="middle" font-size="14" fill="#f97316" font-weight="bold">物流区</text>
                        <text x="415" y="480" text-anchor="middle" font-size="12" fill="#94a3b8">AGV数量：8台</text>
                        <text x="415" y="510" text-anchor="middle" font-size="12" fill="#94a3b8">状态：正常</text>
                        
                        <!-- 维修区 -->
                        <rect x="570" y="420" width="210" height="140" fill="#84cc16" opacity="0.2" rx="5" ry="5" stroke="#84cc16" stroke-width="2"/>
                        <text x="675" y="450" text-anchor="middle" font-size="14" fill="#84cc16" font-weight="bold">维修区</text>
                        <text x="675" y="480" text-anchor="middle" font-size="12" fill="#94a3b8">维修中设备：2台</text>
                        <text x="675" y="510" text-anchor="middle" font-size="12" fill="#94a3b8">状态：忙碌</text>
                        
                        <!-- 连接线 -->
                        <line x1="250" y1="155" x2="320" y2="155" stroke="#94a3b8" stroke-width="2"/>
                        <line x1="530" y1="155" x2="570" y2="155" stroke="#94a3b8" stroke-width="2"/>
                        <line x1="145" y1="260" x2="145" y2="260" stroke="#94a3b8" stroke-width="2"/>
                        <line x1="415" y1="260" x2="415" y2="260" stroke="#94a3b8" stroke-width="2"/>
                        <line x1="675" y1="260" x2="675" y2="260" stroke="#94a3b8" stroke-width="2"/>
                        <line x1="250" y1="330" x2="310" y2="330" stroke="#94a3b8" stroke-width="1.5"/>
                        <line x1="530" y1="330" x2="570" y2="330" stroke="#94a3b8" stroke-width="1.5"/>
                    </svg>
                </div>
            </div>

            <!-- 图表网格 -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <!-- OEE图表 -->
                <div class="glass-card p-4 rounded-lg">
                    <h3 class="text-lg font-semibold mb-3 flex items-center">
                        <i class="fas fa-chart-pie mr-2 text-blue-400"></i>
                        综合设备效率 (OEE)
                    </h3>
                    <div id="oee-chart" class="h-80"></div>
                </div>

                <!-- 生产趋势 -->
                <div class="glass-card p-4 rounded-lg">
                    <h3 class="text-lg font-semibold mb-3 flex items-center">
                        <i class="fas fa-chart-line mr-2 text-green-400"></i>
                        生产趋势
                    </h3>
                    <div id="production-trend-chart" class="h-80"></div>
                </div>

                <!-- 设备状态 -->
                <div class="glass-card p-4 rounded-lg">
                    <h3 class="text-lg font-semibold mb-3 flex items-center">
                        <i class="fas fa-machine mr-2 text-orange-400"></i>
                        设备状态分布
                    </h3>
                    <div id="equipment-status-chart" class="h-80"></div>
                </div>

                <!-- 质量趋势 -->
                <div class="glass-card p-4 rounded-lg">
                    <h3 class="text-lg font-semibold mb-3 flex items-center">
                        <i class="fas fa-chart-area mr-2 text-purple-400"></i>
                        质量趋势
                    </h3>
                    <div id="quality-trend-chart" class="h-80"></div>
                </div>
            </div>

            <!-- 生产订单表格 -->
            <div class="glass-card p-4 rounded-lg">
                <div class="flex justify-between items-center mb-3">
                    <h3 class="text-lg font-semibold flex items-center">
                        <i class="fas fa-clipboard-list mr-2 text-yellow-400"></i>
                        生产订单
                    </h3>
                    <button class="glass-btn text-sm">
                        查看全部
                    </button>
                </div>
                <div class="overflow-x-auto">
                    <table class="data-table w-full">
                        <thead>
                            <tr>
                                <th>订单号</th>
                                <th>产品</th>
                                <th>数量</th>
                                <th>状态</th>
                                <th>进度</th>
                                <th>计划完成</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for i in range(1, 6) %}
                                <tr>
                                    <td>ORD{{ "%04d"|format(i) }}</td>
                                    <td>智能设备{{ i % 5 + 1 }}</td>
                                    <td>{{ 100 + i * 100 }}</td>
                                    <td>
                                        <span class="px-2 py-1 rounded-full text-xs {% if i % 3 == 0 %}bg-green-500/20 text-green-400{% elif i % 3 == 1 %}bg-yellow-500/20 text-yellow-400{% else %}bg-blue-500/20 text-blue-400{% endif %}">
                                            {% if i % 3 == 0 %}生产中{% elif i % 3 == 1 %}待生产{% else %}已完成{% endif %}
                                        </span>
                                    </td>
                                    <td>
                                        <div class="w-full bg-gray-700/50 rounded-full h-2">
                                            <div class="bg-blue-500 h-2 rounded-full" style="width: {{ 30 + i * 10 }}%"></div>
                                        </div>
                                        <span class="text-xs text-gray-400">{{ 30 + i * 10 }}%</span>
                                    </td>
                                    <td class="text-sm">2026-01-{{ 25 + i }}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // 页面特定脚本
    document.addEventListener('DOMContentLoaded', function() {
        // 初始化图表
    if (typeof ChartsManager !== 'undefined') {
        const chartsManager = new ChartsManager();
        chartsManager.initAllCharts();
        
        // 为图表元素添加data-plotly属性
        const chartElements = ['oee-chart', 'production-trend-chart', 'equipment-status-chart', 'quality-trend-chart'];
        chartElements.forEach(chartId => {
            const element = document.getElementById(chartId);
            if (element) {
                element.setAttribute('data-plotly', 'true');
            }
        });
    }
    
    // 模拟数据更新
    setInterval(function() {
        if (typeof ChartsManager !== 'undefined') {
            const chartsManager = new ChartsManager();
            chartsManager.updateAllCharts();
        }
    }, 10000);
    });
</script>
{% endblock %}