<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>人效-产值-损耗三维模型仪表盘</title>
  <script src="/LzwcaiEmbedFrameFile/LzwcaiEmbedFrameV5.js"></script>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif; background: #0a0f1a; color: #e2e8f0; min-height: 100vh; }
    
    /* 动画 */
    @keyframes glow { 0%, 100% { box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); } 50% { box-shadow: 0 0 40px rgba(99, 102, 241, 0.5); } }
    @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
    @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
    @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes gradientFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
    
    .animate-glow { animation: glow 3s ease-in-out infinite; }
    .animate-float { animation: float 4s ease-in-out infinite; }
    .animate-pulse { animation: pulse 2s ease-in-out infinite; }
    .animate-slide { animation: slideUp 0.6s ease-out forwards; }
    
    /* 背景 */
    .page-bg {
      background: linear-gradient(135deg, #0a0f1a 0%, #111827 50%, #0f172a 100%);
      background-attachment: fixed;
      position: relative;
    }
    .page-bg::before {
      content: '';
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: radial-gradient(ellipse at 20% 20%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
                  radial-gradient(ellipse at 80% 80%, rgba(236, 72, 153, 0.06) 0%, transparent 50%),
                  radial-gradient(ellipse at 50% 50%, rgba(6, 182, 212, 0.05) 0%, transparent 60%);
      pointer-events: none;
    }
    
    /* 卡片 */
    .card {
      background: linear-gradient(145deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9));
      border: 1px solid rgba(99, 102, 241, 0.2);
      border-radius: 16px;
      backdrop-filter: blur(20px);
      transition: all 0.3s ease;
    }
    .card:hover { border-color: rgba(99, 102, 241, 0.4); transform: translateY(-2px); }
    
    /* 渐变文字 */
    .gradient-text {
      background: linear-gradient(135deg, #818cf8 0%, #c084fc 50%, #f472b6 100%);
      -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    }
    
    /* 滚动条 */
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: rgba(30, 41, 59, 0.5); border-radius: 3px; }
    ::-webkit-scrollbar-thumb { background: rgba(99, 102, 241, 0.5); border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: rgba(99, 102, 241, 0.7); }
    
    /* 表格 */
    .data-table { width: 100%; border-collapse: separate; border-spacing: 0; }
    .data-table th { padding: 12px 16px; text-align: left; font-size: 11px; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.5px; background: rgba(30, 41, 59, 0.5); border-bottom: 1px solid rgba(99, 102, 241, 0.1); }
    .data-table td { padding: 14px 16px; font-size: 13px; border-bottom: 1px solid rgba(51, 65, 85, 0.3); transition: background 0.2s; }
    .data-table tr:hover td { background: rgba(99, 102, 241, 0.05); }
    
    /* 标签 */
    .tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; }
    .tag-green { background: rgba(16, 185, 129, 0.15); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.3); }
    .tag-yellow { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); }
    .tag-red { background: rgba(239, 68, 68, 0.15); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); }
    .tag-blue { background: rgba(59, 130, 246, 0.15); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.3); }
    
    /* 进度条 */
    .progress-bar { height: 6px; background: rgba(51, 65, 85, 0.5); border-radius: 3px; overflow: hidden; }
    .progress-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, #6366f1, #a855f7); transition: width 0.5s ease; }
    
    /* 分页 */
    .pagination { display: flex; align-items: center; gap: 8px; }
    .page-btn { padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 500; border: 1px solid rgba(99, 102, 241, 0.3); background: transparent; color: #94a3b8; cursor: pointer; transition: all 0.2s; }
    .page-btn:hover:not(:disabled) { background: rgba(99, 102, 241, 0.2); color: #e2e8f0; }
    .page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
    .page-btn.active { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: white; border-color: transparent; }
  </style>
</head>
<body class="page-bg">
  <div id="root"></div>
  <script>
    window.addEventListener('DOMContentLoaded', async function() {
      try {
        const loader = new LibraryLoader({
          enableLog: true, async: false,
          libraries: [
            { name: 'react', src: '/LzwcaiEmbedFrameFile/lib/react.production.min.js', check: () => typeof window.React !== 'undefined' },
            { name: 'reactDOM', src: '/LzwcaiEmbedFrameFile/lib/react-dom.production.min.js', check: () => typeof window.ReactDOM !== 'undefined' },
            { name: 'htm', src: '/LzwcaiEmbedFrameFile/lib/htm.js', check: () => typeof window.htm !== 'undefined' },
            { name: 'g2', src: '/LzwcaiEmbedFrameFile/lib/g2@5.2.4.min.js', check: () => typeof window.G2 !== 'undefined' }
          ]
        });
        await loader.loadAll();
        initApp();
      } catch (e) { console.error('加载失败:', e); }
    });

    function initApp() {
      const { useState, useEffect, useMemo, useRef } = React;
      const html = htm.bind(React.createElement);
      const config = { title: '人效-产值-损耗三维模型仪表盘' };
      const lzwcaiComInitDate = '{{lzwcaiComInitDate}}';
      const defaultData = { success: false, data: [[], [], [], [], []] };

      // 配置
      const warningCfg = {
        GREEN: { label: '正常', class: 'tag-green', icon: '●' },
        YELLOW: { label: '关注', class: 'tag-yellow', icon: '●' },
        RED: { label: '预警', class: 'tag-red', icon: '●' }
      };
      const lossCfg = {
        LOW: { label: '低', class: 'tag-green' },
        MEDIUM: { label: '中', class: 'tag-yellow' },
        HIGH: { label: '高', class: 'tag-red' }
      };

      // 空状态
      const Empty = ({ icon, text }) => html`
        <div style=${{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '40px 20px', color: '#64748b' }}>
          <div style=${{ fontSize: '32px', marginBottom: '12px', opacity: 0.5 }}>${icon}</div>
          <div style=${{ fontSize: '13px' }}>${text}</div>
        </div>
      `;

      // 格式化
      const fmt = (v, d = 2) => v == null || isNaN(v) ? '-' : Number(v).toLocaleString('zh-CN', { minimumFractionDigits: d, maximumFractionDigits: d });
      const fmtPct = v => v == null || isNaN(v) ? '-' : Number(v).toFixed(1) + '%';
      const fmtMoney = v => v == null || isNaN(v) ? '-' : '¥' + Number(v).toLocaleString('zh-CN', { minimumFractionDigits: 0, maximumFractionDigits: 0 });

      function App() {
        const [data, setData] = useState(defaultData);
        const [error, setError] = useState(null);
        const [workerPage, setWorkerPage] = useState(1);
        const [productPage, setProductPage] = useState(1);
        const [deptFilter, setDeptFilter] = useState('all');
        const pageSize = 8;
        const chartRef1 = useRef(null);
        const chartRef2 = useRef(null);
        const chartRef3 = useRef(null);
        const chart1 = useRef(null);
        const chart2 = useRef(null);
        const chart3 = useRef(null);

        const validate = d => d && typeof d === 'object' && Array.isArray(d.data);

        // 处理数据
        const processed = useMemo(() => {
          if (!data.data || data.data.length < 5) return null;
          const [depts = [], workers = [], trends = [], products = [], orders = []] = data.data;
          
          const stats = {
            workers: depts.reduce((s, d) => s + parseInt(d.worker_count || 0), 0),
            output: depts.reduce((s, d) => s + (d.total_output_qty || 0), 0),
            hours: depts.reduce((s, d) => s + (d.total_work_hours || 0), 0),
            value: depts.reduce((s, d) => s + (d.estimated_output_value || 0), 0),
            efficiency: depts.length ? depts.reduce((s, d) => s + (d.efficiency_index || 0), 0) / depts.length : 0,
            performance: depts.length ? depts.reduce((s, d) => s + (d.performance_score || 0), 0) / depts.length : 0,
            defect: depts.length ? depts.reduce((s, d) => s + (d.defect_rate || 0), 0) / depts.length : 0,
            completion: depts.length ? depts.reduce((s, d) => s + (d.plan_completion_rate || 0), 0) / depts.length : 0
          };

          const warnings = { GREEN: 0, YELLOW: 0, RED: 0 };
          depts.forEach(d => { const l = d.warning_level || 'GREEN'; if (warnings[l] !== undefined) warnings[l]++; });

          const deptList = [...new Set(depts.map(d => d.department))];

          return { depts, workers, trends, products, orders, stats, warnings, deptList };
        }, [data]);

        // 筛选员工
        const filteredWorkers = useMemo(() => {
          if (!processed) return [];
          return deptFilter === 'all' ? processed.workers : processed.workers.filter(w => w.department === deptFilter);
        }, [processed, deptFilter]);

        const workerPages = Math.ceil(filteredWorkers.length / pageSize);
        const pagedWorkers = filteredWorkers.slice((workerPage - 1) * pageSize, workerPage * pageSize);
        const productPages = processed ? Math.ceil(processed.products.length / pageSize) : 0;
        const pagedProducts = processed ? processed.products.slice((productPage - 1) * pageSize, productPage * pageSize) : [];

        // 图表渲染
        useEffect(() => {
          if (!processed || !window.G2) return;
          [chart1, chart2, chart3].forEach(c => { if (c.current) { c.current.destroy(); c.current = null; } });

          // 部门效率柱状图
          if (chartRef1.current && processed.depts.length > 0) {
            const d = processed.depts.map(x => ({ name: x.department.slice(0, 4), efficiency: x.efficiency_index || 0, performance: x.performance_score || 0 }));
            chart1.current = new G2.Chart({ container: chartRef1.current, autoFit: true, height: 180 });
            chart1.current.theme({ type: 'classicDark' });
            chart1.current.interval().data(d).encode('x', 'name').encode('y', 'efficiency').encode('color', 'name')
              .scale('color', { range: ['#6366f1', '#8b5cf6', '#a855f7', '#c084fc', '#d946ef', '#ec4899'] })
              .style('radius', 4).axis('x', { labelFontSize: 10, labelFill: '#94a3b8' }).axis('y', { title: false, labelFill: '#64748b' })
              .legend(false).tooltip({ items: [{ channel: 'y', name: '效率', valueFormatter: v => v.toFixed(1) }] });
            chart1.current.render();
          }

          // 产值分布环形图
          if (chartRef2.current && processed.depts.length > 0) {
            const d = processed.depts.filter(x => x.estimated_output_value > 0).map(x => ({ name: x.department, value: x.estimated_output_value }));
            chart2.current = new G2.Chart({ container: chartRef2.current, autoFit: true, height: 180 });
            chart2.current.theme({ type: 'classicDark' });
            chart2.current.coordinate({ type: 'theta', innerRadius: 0.6 });
            chart2.current.interval().data(d).transform({ type: 'stackY' }).encode('y', 'value').encode('color', 'name')
              .scale('color', { range: ['#6366f1', '#8b5cf6', '#06b6d4', '#10b981', '#f59e0b'] })
              .style('stroke', '#1e293b').style('lineWidth', 2)
              .label({ text: d => d.name.slice(0, 3), position: 'outside', fontSize: 10, fill: '#94a3b8' })
              .legend(false).tooltip({ items: [{ channel: 'y', name: '产值', valueFormatter: v => '¥' + (v/10000).toFixed(1) + '万' }] });
            chart2.current.render();
          }

          // 月度趋势折线图
          if (chartRef3.current && processed.trends.length > 0) {
            const d = processed.trends.map(x => ({ month: x.month, dept: x.department.slice(0, 3), output: x.total_output || 0 }));
            chart3.current = new G2.Chart({ container: chartRef3.current, autoFit: true, height: 180 });
            chart3.current.theme({ type: 'classicDark' });
            chart3.current.line().data(d).encode('x', 'month').encode('y', 'output').encode('color', 'dept')
              .scale('color', { range: ['#6366f1', '#8b5cf6', '#06b6d4', '#10b981'] })
              .style('lineWidth', 2).axis('x', { labelFontSize: 9, labelFill: '#64748b' }).axis('y', { title: false, labelFill: '#64748b' })
              .legend('color', { position: 'top', itemLabelFill: '#94a3b8', itemMarkerSize: 6 });
            chart3.current.point().data(d).encode('x', 'month').encode('y', 'output').encode('color', 'dept').style('r', 3);
            chart3.current.render();
          }

          return () => { [chart1, chart2, chart3].forEach(c => { if (c.current) { c.current.destroy(); c.current = null; } }); };
        }, [processed]);

        // 初始化
        useEffect(() => {
          const helper = new ChildPageHelper({
            autoRenderStatus: true, enableLog: true,
            onReady: async () => {
              await helper.autoInitialize(() => {
                const d = helper.parseTemplateData(lzwcaiComInitDate, defaultData);
                if (d && validate(d)) { setData(d); setError(null); }
              });
            }
          });
          helper.expose({
            setDataLzwcaiEmbedFrameFn: d => { if (validate(d)) { setData(d); setError(null); return { status: 'success' }; } return { status: 'error' }; },
            getDataLzwcaiEmbedFrameFn: () => ({ status: 'success', data }),
            captureScreenshotLzwcaiEmbedFrameFn: helper.createScreenshotMethod(),
            getRenderStatusLzwcaiEmbedFrameFn: () => helper.getRenderStatus()
          });
        }, []);

        // 分页组件
        const Pager = ({ page, total, onChange }) => total <= 1 ? null : html`
          <div class="pagination">
            <button class="page-btn" disabled=${page === 1} onClick=${() => onChange(page - 1)}>‹</button>
            ${Array.from({ length: Math.min(5, total) }, (_, i) => {
              let p = i + 1;
              if (total > 5) { if (page <= 3) p = i + 1; else if (page >= total - 2) p = total - 4 + i; else p = page - 2 + i; }
              return html`<button key=${p} class="page-btn ${page === p ? 'active' : ''}" onClick=${() => onChange(p)}>${p}</button>`;
            })}
            <button class="page-btn" disabled=${page === total} onClick=${() => onChange(page + 1)}>›</button>
          </div>
        `;

        if (error) return html`
          <div style=${{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', padding: '20px' }}>
            <div class="card" style=${{ padding: '40px', textAlign: 'center', maxWidth: '360px' }}>
              <div style=${{ fontSize: '48px', marginBottom: '16px' }}>⚠️</div>
              <div style=${{ fontSize: '18px', fontWeight: 600, color: '#f87171', marginBottom: '8px' }}>数据异常</div>
              <div style=${{ fontSize: '13px', color: '#64748b' }}>${error}</div>
            </div>
          </div>`;

        if (!processed) return html`
          <div style=${{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', padding: '20px' }}>
            <div class="card animate-glow" style=${{ padding: '40px', textAlign: 'center' }}>
              <div class="animate-float" style=${{ fontSize: '48px', marginBottom: '16px' }}>📊</div>
              <div class="gradient-text" style=${{ fontSize: '18px', fontWeight: 600 }}>加载中...</div>
            </div>
          </div>`;

        const { depts, stats, warnings, deptList, orders } = processed;

        return html`
          <div style=${{ padding: '20px', maxWidth: '1600px', margin: '0 auto' }}>
            
            <!-- 顶部标题栏 -->
            <div class="card animate-slide" style=${{ padding: '20px 28px', marginBottom: '20px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: '16px' }}>
              <div style=${{ display: 'flex', alignItems: 'center', gap: '16px' }}>
                <div class="animate-glow" style=${{ width: '52px', height: '52px', borderRadius: '14px', background: 'linear-gradient(135deg, #6366f1, #a855f7)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '24px' }}>📊</div>
                <div>
                  <h1 class="gradient-text" style=${{ fontSize: '22px', fontWeight: 700, margin: 0 }}>${config.title}</h1>
                  <p style=${{ fontSize: '12px', color: '#64748b', marginTop: '4px' }}>人效分析 · 产值统计 · 损耗监控 · 实时数据</p>
                </div>
              </div>
              <div style=${{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
                ${warnings.RED > 0 && html`<span class="tag tag-red animate-pulse"><span>●</span> ${warnings.RED} 预警</span>`}
                ${warnings.YELLOW > 0 && html`<span class="tag tag-yellow"><span>●</span> ${warnings.YELLOW} 关注</span>`}
                <span class="tag tag-green"><span>●</span> ${warnings.GREEN} 正常</span>
              </div>
            </div>

            <!-- 核心指标 -->
            <div style=${{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))', gap: '16px', marginBottom: '20px' }}>
              ${[
                { v: stats.workers, l: '总人数', i: '👥', c: '#6366f1' },
                { v: stats.output.toLocaleString(), l: '总产出', i: '📦', c: '#8b5cf6' },
                { v: fmt(stats.hours, 1) + 'h', l: '总工时', i: '⏱️', c: '#06b6d4' },
                { v: '¥' + (stats.value / 10000).toFixed(1) + '万', l: '总产值', i: '💰', c: '#10b981' },
                { v: fmt(stats.efficiency, 1), l: '平均效率', i: '⚡', c: '#f59e0b' },
                { v: fmt(stats.performance, 1), l: '平均绩效', i: '🎯', c: '#ec4899' },
                { v: fmtPct(stats.completion), l: '完成率', i: '✅', c: '#14b8a6' },
                { v: fmtPct(stats.defect), l: '不良率', i: '📉', c: stats.defect > 1 ? '#ef4444' : '#64748b', alert: stats.defect > 1 }
              ].map((m, i) => html`
                <div key=${i} class="card animate-slide" style=${{ padding: '20px', animationDelay: i * 60 + 'ms', border: m.alert ? '1px solid rgba(239, 68, 68, 0.4)' : undefined }}>
                  <div style=${{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '12px' }}>
                    <span style=${{ fontSize: '22px' }}>${m.i}</span>
                    <div style=${{ width: '8px', height: '8px', borderRadius: '50%', background: m.c, boxShadow: '0 0 10px ' + m.c }}></div>
                  </div>
                  <div style=${{ fontSize: '24px', fontWeight: 700, color: m.alert ? '#f87171' : '#f1f5f9' }}>${m.v}</div>
                  <div style=${{ fontSize: '12px', color: '#64748b', marginTop: '4px' }}>${m.l}</div>
                </div>
              `)}
            </div>

            <!-- 图表区域 -->
            <div style=${{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '16px', marginBottom: '20px' }}>
              <div class="card" style=${{ padding: '20px' }}>
                <div style=${{ fontSize: '14px', fontWeight: 600, color: '#e2e8f0', marginBottom: '16px', display: 'flex', alignItems: 'center', gap: '8px' }}>
                  <span style=${{ width: '6px', height: '6px', borderRadius: '50%', background: '#6366f1' }}></span>
                  部门效率对比
                </div>
                ${depts.length > 0 ? html`<div ref=${chartRef1}></div>` : html`<${Empty} icon="📊" text="暂无数据" />`}
              </div>
              <div class="card" style=${{ padding: '20px' }}>
                <div style=${{ fontSize: '14px', fontWeight: 600, color: '#e2e8f0', marginBottom: '16px', display: 'flex', alignItems: 'center', gap: '8px' }}>
                  <span style=${{ width: '6px', height: '6px', borderRadius: '50%', background: '#8b5cf6' }}></span>
                  产值分布
                </div>
                ${depts.length > 0 ? html`<div ref=${chartRef2}></div>` : html`<${Empty} icon="💰" text="暂无数据" />`}
              </div>
              <div class="card" style=${{ padding: '20px' }}>
                <div style=${{ fontSize: '14px', fontWeight: 600, color: '#e2e8f0', marginBottom: '16px', display: 'flex', alignItems: 'center', gap: '8px' }}>
                  <span style=${{ width: '6px', height: '6px', borderRadius: '50%', background: '#06b6d4' }}></span>
                  月度趋势
                </div>
                ${processed.trends.length > 0 ? html`<div ref=${chartRef3}></div>` : html`<${Empty} icon="📈" text="暂无数据" />`}
              </div>
            </div>

            <!-- 部门汇总表 -->
            <div class="card" style=${{ marginBottom: '20px', overflow: 'hidden' }}>
              <div style=${{ padding: '16px 20px', borderBottom: '1px solid rgba(99, 102, 241, 0.1)', display: 'flex', alignItems: 'center', gap: '10px' }}>
                <span style=${{ width: '6px', height: '6px', borderRadius: '50%', background: '#6366f1' }}></span>
                <span style=${{ fontSize: '14px', fontWeight: 600 }}>部门人效-产值-损耗汇总</span>
                <span class="tag tag-blue" style=${{ marginLeft: 'auto' }}>${depts.length} 部门</span>
              </div>
              ${depts.length > 0 ? html`
                <div style=${{ overflowX: 'auto' }}>
                  <table class="data-table">
                    <thead>
                      <tr>
                        <th>部门</th><th style=${{ textAlign: 'center' }}>人数</th><th style=${{ textAlign: 'center' }}>工时</th>
                        <th style=${{ textAlign: 'center' }}>产出</th><th style=${{ textAlign: 'center' }}>人均</th><th style=${{ textAlign: 'center' }}>时均</th>
                        <th style=${{ textAlign: 'center' }}>效率</th><th>完成率</th><th style=${{ textAlign: 'right' }}>产值</th>
                        <th style=${{ textAlign: 'center' }}>不良率</th><th style=${{ textAlign: 'center' }}>绩效</th><th style=${{ textAlign: 'center' }}>状态</th>
                      </tr>
                    </thead>
                    <tbody>
                      ${depts.map((d, i) => {
                        const w = warningCfg[d.warning_level] || warningCfg.GREEN;
                        return html`
                          <tr key=${i}>
                            <td style=${{ fontWeight: 600, color: '#f1f5f9' }}>${d.department}</td>
                            <td style=${{ textAlign: 'center' }}>${d.worker_count}</td>
                            <td style=${{ textAlign: 'center' }}>${fmt(d.total_work_hours, 1)}h</td>
                            <td style=${{ textAlign: 'center', fontWeight: 600, color: '#a5b4fc' }}>${d.total_output_qty?.toLocaleString() || 0}</td>
                            <td style=${{ textAlign: 'center' }}>${fmt(d.output_per_worker, 1)}</td>
                            <td style=${{ textAlign: 'center' }}>${fmt(d.output_per_hour, 1)}</td>
                            <td style=${{ textAlign: 'center' }}>
                              <span class="tag ${d.efficiency_index >= 80 ? 'tag-green' : d.efficiency_index >= 50 ? 'tag-yellow' : 'tag-red'}">${fmt(d.efficiency_index, 1)}</span>
                            </td>
                            <td>
                              <div style=${{ display: 'flex', alignItems: 'center', gap: '10px' }}>
                                <div class="progress-bar" style=${{ flex: 1, maxWidth: '80px' }}>
                                  <div class="progress-fill" style=${{ width: Math.min(d.plan_completion_rate || 0, 100) + '%' }}></div>
                                </div>
                                <span style=${{ fontSize: '12px', color: '#94a3b8' }}>${fmtPct(d.plan_completion_rate)}</span>
                              </div>
                            </td>
                            <td style=${{ textAlign: 'right', fontWeight: 600, color: '#34d399' }}>${fmtMoney(d.estimated_output_value)}</td>
                            <td style=${{ textAlign: 'center' }}>
                              <span class="tag ${(d.defect_rate || 0) === 0 ? 'tag-green' : d.defect_rate < 1 ? 'tag-yellow' : 'tag-red'}">${fmtPct(d.defect_rate)}</span>
                            </td>
                            <td style=${{ textAlign: 'center', fontWeight: 600, color: '#a5b4fc' }}>${fmt(d.performance_score, 1)}</td>
                            <td style=${{ textAlign: 'center' }}><span class="tag ${w.class}">${w.icon} ${w.label}</span></td>
                          </tr>
                        `;
                      })}
                    </tbody>
                  </table>
                </div>
              ` : html`<${Empty} icon="🏢" text="暂无部门数据" />`}
            </div>

            <!-- 下方两栏：员工明细 + 产品质量 -->
            <div style=${{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}>
              
              <!-- 员工产出明细 -->
              <div class="card" style=${{ overflow: 'hidden' }}>
                <div style=${{ padding: '16px 20px', borderBottom: '1px solid rgba(99, 102, 241, 0.1)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: '12px' }}>
                  <div style=${{ display: 'flex', alignItems: 'center', gap: '10px' }}>
                    <span style=${{ width: '6px', height: '6px', borderRadius: '50%', background: '#f59e0b' }}></span>
                    <span style=${{ fontSize: '14px', fontWeight: 600 }}>员工产出明细</span>
                  </div>
                  <div style=${{ display: 'flex', alignItems: 'center', gap: '10px' }}>
                    <select value=${deptFilter} onChange=${e => { setDeptFilter(e.target.value); setWorkerPage(1); }}
                      style=${{ padding: '6px 12px', fontSize: '12px', borderRadius: '8px', border: '1px solid rgba(99, 102, 241, 0.3)', background: 'rgba(30, 41, 59, 0.8)', color: '#e2e8f0', cursor: 'pointer' }}>
                      <option value="all">全部部门</option>
                      ${deptList.map(d => html`<option key=${d} value=${d}>${d}</option>`)}
                    </select>
                    <span class="tag tag-blue">${filteredWorkers.length} 人</span>
                  </div>
                </div>
                ${filteredWorkers.length > 0 ? html`
                  <div style=${{ overflowX: 'auto', maxHeight: '360px', overflowY: 'auto' }}>
                    <table class="data-table">
                      <thead><tr><th>姓名</th><th>部门</th><th style=${{ textAlign: 'center' }}>工单</th><th style=${{ textAlign: 'center' }}>工时</th><th style=${{ textAlign: 'center' }}>产出</th><th style=${{ textAlign: 'center' }}>时均</th><th style=${{ textAlign: 'center' }}>排名</th></tr></thead>
                      <tbody>
                        ${pagedWorkers.map((w, i) => html`
                          <tr key=${i}>
                            <td style=${{ fontWeight: 600, color: '#f1f5f9' }}>${w.worker_name}</td>
                            <td><span class="tag tag-blue">${w.department}</span></td>
                            <td style=${{ textAlign: 'center' }}>${w.work_order_count}</td>
                            <td style=${{ textAlign: 'center' }}>${fmt(w.total_work_hours, 2)}h</td>
                            <td style=${{ textAlign: 'center', fontWeight: 600, color: '#a5b4fc' }}>${w.total_output}</td>
                            <td style=${{ textAlign: 'center' }}>
                              <span class="tag ${w.output_per_hour >= 80 ? 'tag-green' : w.output_per_hour >= 40 ? 'tag-yellow' : 'tag-red'}">${fmt(w.output_per_hour, 1)}</span>
                            </td>
                            <td style=${{ textAlign: 'center' }}>
                              <span style=${{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: '26px', height: '26px', borderRadius: '50%', fontSize: '11px', fontWeight: 700, background: parseInt(w.dept_output_rank) <= 3 ? 'linear-gradient(135deg, #f59e0b, #f97316)' : 'rgba(51, 65, 85, 0.5)', color: parseInt(w.dept_output_rank) <= 3 ? '#fff' : '#94a3b8' }}>${w.dept_output_rank}</span>
                            </td>
                          </tr>
                        `)}
                      </tbody>
                    </table>
                  </div>
                  <div style=${{ padding: '12px 20px', borderTop: '1px solid rgba(99, 102, 241, 0.1)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                    <span style=${{ fontSize: '12px', color: '#64748b' }}>共 ${filteredWorkers.length} 人，第 ${workerPage}/${workerPages || 1} 页</span>
                    <${Pager} page=${workerPage} total=${workerPages} onChange=${setWorkerPage} />
                  </div>
                ` : html`<${Empty} icon="👤" text="暂无员工数据" />`}
              </div>

              <!-- 产品质量与损耗 -->
              <div class="card" style=${{ overflow: 'hidden' }}>
                <div style=${{ padding: '16px 20px', borderBottom: '1px solid rgba(99, 102, 241, 0.1)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                  <div style=${{ display: 'flex', alignItems: 'center', gap: '10px' }}>
                    <span style=${{ width: '6px', height: '6px', borderRadius: '50%', background: '#10b981' }}></span>
                    <span style=${{ fontSize: '14px', fontWeight: 600 }}>产品质量与损耗</span>
                  </div>
                  <span class="tag tag-green">${processed.products.length} 产品</span>
                </div>
                ${processed.products.length > 0 ? html`
                  <div style=${{ overflowX: 'auto', maxHeight: '360px', overflowY: 'auto' }}>
                    <table class="data-table">
                      <thead><tr><th>产品</th><th>编码</th><th>部门</th><th style=${{ textAlign: 'center' }}>合格</th><th style=${{ textAlign: 'center' }}>不良</th><th style=${{ textAlign: 'center' }}>不良率</th><th style=${{ textAlign: 'center' }}>损耗</th></tr></thead>
                      <tbody>
                        ${pagedProducts.map((p, i) => {
                          const lc = lossCfg[p.loss_level] || lossCfg.LOW;
                          return html`
                            <tr key=${i}>
                              <td style=${{ fontWeight: 600, color: '#f1f5f9', maxWidth: '160px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>${p.product_name}</td>
                              <td style=${{ fontFamily: 'monospace', fontSize: '11px', color: '#64748b' }}>${p.product_code}</td>
                              <td><span class="tag tag-blue">${p.department}</span></td>
                              <td style=${{ textAlign: 'center', color: '#34d399', fontWeight: 600 }}>${p.pass_qty?.toLocaleString() || 0}</td>
                              <td style=${{ textAlign: 'center', color: (p.fail_qty || 0) > 0 ? '#f87171' : '#64748b' }}>${p.fail_qty || 0}</td>
                              <td style=${{ textAlign: 'center' }}>
                                <span class="tag ${p.defect_rate == null || p.defect_rate === 0 ? 'tag-green' : p.defect_rate < 1 ? 'tag-yellow' : 'tag-red'}">${p.defect_rate == null ? '-' : fmtPct(p.defect_rate)}</span>
                              </td>
                              <td style=${{ textAlign: 'center' }}><span class="tag ${lc.class}">${lc.label}</span></td>
                            </tr>
                          `;
                        })}
                      </tbody>
                    </table>
                  </div>
                  <div style=${{ padding: '12px 20px', borderTop: '1px solid rgba(99, 102, 241, 0.1)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                    <span style=${{ fontSize: '12px', color: '#64748b' }}>共 ${processed.products.length} 产品，第 ${productPage}/${productPages || 1} 页</span>
                    <${Pager} page=${productPage} total=${productPages} onChange=${setProductPage} />
                  </div>
                ` : html`<${Empty} icon="🔍" text="暂无产品数据" />`}
              </div>
            </div>

            <!-- 订单状态 -->
            ${orders.length > 0 && html`
              <div class="card" style=${{ marginTop: '16px', padding: '20px' }}>
                <div style=${{ fontSize: '14px', fontWeight: 600, marginBottom: '16px', display: 'flex', alignItems: 'center', gap: '10px' }}>
                  <span style=${{ width: '6px', height: '6px', borderRadius: '50%', background: '#a855f7' }}></span>
                  订单状态概览
                  <span class="tag tag-blue" style=${{ marginLeft: 'auto' }}>${orders.length} 条</span>
                </div>
                <div style=${{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gap: '12px' }}>
                  ${orders.map((o, i) => html`
                    <div key=${i} style=${{ padding: '14px 16px', borderRadius: '10px', background: 'rgba(30, 41, 59, 0.5)', border: '1px solid rgba(99, 102, 241, 0.15)' }}>
                      <div style=${{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '10px' }}>
                        <span style=${{ fontSize: '13px', fontWeight: 600, color: '#e2e8f0' }}>${o.department}</span>
                        <span class="tag ${o.status === 'CLOSED' ? 'tag-green' : o.status === 'STARTED' ? 'tag-blue' : 'tag-yellow'}">
                          ${o.status === 'CLOSED' ? '已完成' : o.status === 'STARTED' ? '进行中' : '待处理'}
                        </span>
                      </div>
                      <div style=${{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontSize: '12px', color: '#94a3b8' }}>
                        <span>${o.order_count} 单</span>
                        <span style=${{ fontWeight: 600, color: '#a5b4fc' }}>${fmtPct(o.completion_rate)}</span>
                      </div>
                      <div class="progress-bar" style=${{ marginTop: '8px' }}>
                        <div class="progress-fill" style=${{ width: Math.min(o.completion_rate || 0, 100) + '%' }}></div>
                      </div>
                    </div>
                  `)}
                </div>
              </div>
            `}

            <!-- 底部 -->
            <div style=${{ textAlign: 'center', padding: '24px 0 8px', color: '#475569', fontSize: '12px' }}>
              <span style=${{ display: 'inline-flex', alignItems: 'center', gap: '8px', padding: '8px 20px', borderRadius: '20px', background: 'rgba(30, 41, 59, 0.5)', border: '1px solid rgba(99, 102, 241, 0.1)' }}>
                📊 人效-产值-损耗三维模型 · 实时监控
              </span>
            </div>
          </div>
        `;
      }

      ReactDOM.render(React.createElement(App), document.getElementById('root'));
    }
  </script>
</body>
</html>
