nkkj
/
yss-project


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>工作量负载概览 - 方案预览</title>
  <!-- 替换为国内稳定的 BootCDN 源 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
  <style>
    :root {
      --primary-color: #3b82f6;
      --bg-color: #f8fafc;
      --card-bg: #ffffff;
      --text-main: #1e293b;
      --text-sub: #64748b;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background-color: var(--bg-color);
      margin: 0;
      padding: 40px;
      color: var(--text-main);
    }

    .container {
      max-width: 1000px;
      margin: 0 auto;
    }

    .card {
      background: var(--card-bg);
      border-radius: 16px;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
      padding: 24px;
      margin-bottom: 30px;
    }

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;
    }

    .title-group h3 {
      margin: 0 0 4px 0;
      font-size: 18px;
      font-weight: 600;
    }

    .title-group p {
      margin: 0;
      font-size: 13px;
      color: var(--text-sub);
    }

    .controls {
      display: flex;
      gap: 16px;
      align-items: center;
    }

    .switch-group {
      background: #f1f5f9;
      padding: 4px;
      border-radius: 8px;
      display: flex;
    }

    .switch-btn {
      border: none;
      background: transparent;
      padding: 6px 12px;
      border-radius: 6px;
      font-size: 13px;
      cursor: pointer;
      color: var(--text-sub);
      transition: all 0.2s;
    }

    .switch-btn.active {
      background: white;
      color: var(--primary-color);
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      font-weight: 500;
    }

    .legend {
      display: flex;
      gap: 12px;
      font-size: 12px;
      color: var(--text-sub);
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .dot {
      width: 8px;
      height: 8px;
      border-radius: 2px;
    }

    .chart-container {
      width: 100%;
      height: 400px;
    }

    /* 方案说明样式 */
    .scheme-tag {
      display: inline-block;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 600;
      margin-bottom: 8px;
    }
    .tag-1 { background: #e0f2fe; color: #0369a1; }
    .tag-2 { background: #f3e8ff; color: #7e22ce; }

  </style>
</head>
<body>

<div class="container">
  
  <!-- 方案一：极简热力方块 -->
  <div class="scheme-tag tag-1">方案一：极简热力方块 (推荐)</div>
  <div class="card">
    <div class="header">
      <div class="title-group">
        <h3>工作量负载概览</h3>
        <p>极简风格，通过色块直观展示忙闲分布</p>
      </div>
      <div class="controls">
        <div class="legend">
          <span class="legend-item"><span class="dot" style="background:#f1f5f9"></span>空闲</span>
          <span class="legend-item"><span class="dot" style="background:#eff6ff; border:1px solid #bfdbfe"></span>适中</span>
          <span class="legend-item"><span class="dot" style="background:#fee2e2; border:1px solid #fecaca"></span>超负荷</span>
        </div>
        <div class="switch-group">
          <button class="switch-btn active" onclick="updateChart1('week')">周视图</button>
          <button class="switch-btn" onclick="updateChart1('month')">月视图</button>
        </div>
      </div>
    </div>
    <div id="chart1" class="chart-container"></div>
  </div>

  <!-- 方案二：数字化日历 -->
  <div class="scheme-tag tag-2">方案二：数字化日历</div>
  <div class="card">
    <div class="header">
      <div class="title-group">
        <h3>工作量负载概览</h3>
        <p>数据风格，直接显示每日项目数量</p>
      </div>
      <div class="controls">
        <div class="legend">
          <span class="legend-item">数字代表项目数</span>
        </div>
      </div>
    </div>
    <div id="chart2" class="chart-container"></div>
  </div>

</div>

<script>
  // ================== 模拟数据生成 ==================
  const designers = ['王刚', '李婷', '张伟', '陈思', '赵敏', '刘强'];
  const today = new Date();
  
  // 生成未来30天的数据
  function generateData(days) {
    const data = [];
    designers.forEach((designer, yIndex) => {
      for (let i = 0; i < days; i++) {
        const date = new Date(today);
        date.setDate(today.getDate() + i);
        const ts = date.getTime();
        
        // 随机生成负载 (0-4)
        // 让某些人更忙，模拟真实情况
        const baseLoad = (yIndex % 2 === 0) ? 2 : 0; 
        const randomLoad = Math.floor(Math.random() * 3);
        const count = Math.max(0, Math.min(4, baseLoad + randomLoad - 1));
        
        let status = 'idle';
        if (count === 0) status = 'idle';
        else if (count >= 3) status = 'overload';
        else status = 'busy';

        // 模拟项目详情
        const projects = [];
        for(let p=0; p<count; p++) {
          projects.push({
            name: ['锦江上院', '天鹅湖', '龙湖天街', '万科城市', '保利国际'][Math.floor(Math.random()*5)] + '-' + (p+1) + '期',
            stage: ['建模', '渲染', '后期', '修改'][Math.floor(Math.random()*4)]
          });
        }

        data.push({
          value: [yIndex, ts, ts + 24*3600*1000, designer, status, count, projects],
          itemStyle: getItemStyle(status)
        });
      }
    });
    return data;
  }

  function getItemStyle(status) {
    if (status === 'overload') return { color: '#fee2e2', borderColor: '#fca5a5', borderWidth: 1 };
    if (status === 'busy') return { color: '#eff6ff', borderColor: '#bfdbfe', borderWidth: 1 };
    return { color: '#f8fafc', borderColor: '#f1f5f9', borderWidth: 1 }; // idle
  }

  // 声明图表实例变量
  let chart1, chart2;

  // ================== 方案一：极简热力方块 ==================
  
  function renderChart1(scale) {
    // 确保 chart1 已初始化
    if (!chart1) {
        const dom = document.getElementById('chart1');
        if (dom) {
            chart1 = echarts.init(dom);
        } else {
            console.error('Chart1 DOM not found');
            return;
        }
    }

    const days = scale === 'week' ? 7 : 30;
    const data = generateData(days);
    const xMin = today.getTime();
    const xMax = xMin + days * 24 * 3600 * 1000;

    const option = {
      tooltip: {
        padding: 0,
        backgroundColor: '#fff',
        borderColor: '#e2e8f0',
        textStyle: { color: '#334155' },
        formatter: function (params) {
          const val = params.value;
          const [yIndex, start, end, name, status, count, projects] = val;
          const date = new Date(start);
          const dateStr = `${date.getMonth()+1}/${date.getDate()}`;
          
          // 精简的 Tooltip
          let listHtml = projects.map(p => 
            `<div style="display:flex;justify-content:space-between;font-size:12px;margin-top:4px;color:#64748b;">
               <span>${p.name}</span><span style="font-size:10px;background:#f1f5f9;padding:1px 4px;border-radius:2px;">${p.stage}</span>
             </div>`
          ).join('');
          
          let statusColor = count >= 3 ? '#ef4444' : (count > 0 ? '#3b82f6' : '#94a3b8');
          
          return `
            <div style="width:200px; padding:10px;">
              <div style="display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #f1f5f9; padding-bottom:6px; margin-bottom:6px;">
                <span style="font-weight:600;">${name}</span>
                <span style="font-size:12px; color:${statusColor}; font-weight:500;">${count}个项目</span>
              </div>
              ${count > 0 ? listHtml : '<div style="font-size:12px;color:#cbd5e1;text-align:center;">无安排</div>'}
            </div>
          `;
        }
      },
      grid: { top: 30, left: 80, right: 20, bottom: 20 },
      xAxis: {
        type: 'time',
        min: xMin,
        max: xMax,
        position: 'top',
        axisLine: { show: false },
        axisTick: { show: false },
        splitLine: { show: false }, // 去掉竖线，更干净
        axisLabel: {
          formatter: (val) => {
            const d = new Date(val);
            return `${d.getMonth()+1}/${d.getDate()}`;
          },
          color: '#94a3b8',
          fontSize: 11,
          margin: 10
        }
      },
      yAxis: {
        type: 'category',
        data: designers,
        inverse: true,
        axisLine: { show: false },
        axisTick: { show: false },
        axisLabel: {
          color: '#475569',
          fontSize: 13,
          fontWeight: 500,
          margin: 20
        }
      },
      series: [{
        type: 'custom',
        renderItem: function (params, api) {
          const y = api.value(0);
          const start = api.coord([api.value(1), y]);
          const end = api.coord([api.value(2), y]);
          const height = api.size([0, 1])[1] * 0.7; // 高度占比
          const width = (end[0] - start[0]) * 0.85; // 宽度占比，留出间隙

          // 绘制圆角矩形
          return {
            type: 'rect',
            shape: {
              x: start[0] + (end[0] - start[0] - width) / 2, // 居中
              y: start[1] - height / 2,
              width: width,
              height: height,
              r: 4 // 圆角
            },
            style: api.style()
          };
        },
        data: data
      }]
    };
    chart1.setOption(option);
  }

  function updateChart1(scale) {
    // 更新按钮状态
    const btns = document.querySelectorAll('.switch-btn');
    btns.forEach(b => b.classList.remove('active'));
    if(event && event.target) {
        event.target.classList.add('active');
    }
    renderChart1(scale);
  }

  // ================== 方案二：数字化日历 ==================
  
  function renderChart2() {
    // 确保 chart2 已初始化
    if (!chart2) {
        const dom = document.getElementById('chart2');
        if (dom) {
            chart2 = echarts.init(dom);
        } else {
            console.error('Chart2 DOM not found');
            return;
        }
    }

    const days = 14; // 展示两周
    const data = generateData(days);
    const xMin = today.getTime();
    const xMax = xMin + days * 24 * 3600 * 1000;

    const option = {
      tooltip: { show: false }, // 直接显示数字，不需要Tooltip
      grid: { top: 30, left: 80, right: 20, bottom: 20 },
      xAxis: {
        type: 'time',
        min: xMin,
        max: xMax,
        position: 'top',
        axisLine: { show: false },
        axisTick: { show: false },
        splitLine: { show: true, lineStyle: { color: '#f1f5f9' } },
        axisLabel: {
          formatter: (val) => {
            const d = new Date(val);
            return `${d.getMonth()+1}/${d.getDate()}`;
          },
          color: '#94a3b8'
        }
      },
      yAxis: {
        type: 'category',
        data: designers,
        inverse: true,
        axisLine: { show: false },
        axisTick: { show: false },
        axisLabel: {
          color: '#475569',
          fontSize: 13,
          margin: 20
        }
      },
      series: [{
        type: 'custom',
        renderItem: function (params, api) {
          const y = api.value(0);
          const start = api.coord([api.value(1), y]);
          const end = api.coord([api.value(2), y]);
          const height = api.size([0, 1])[1];
          const width = end[0] - start[0];
          const count = api.value(5);

          // 根据数量决定背景色深浅
          let bgColor = '#fff';
          let textColor = '#cbd5e1'; // 0 - 浅灰
          if (count === 1) { bgColor = '#eff6ff'; textColor = '#3b82f6'; }
          if (count === 2) { bgColor = '#dbeafe'; textColor = '#2563eb'; }
          if (count >= 3) { bgColor = '#fee2e2'; textColor = '#dc2626'; }

          return {
            type: 'group',
            children: [
              {
                type: 'rect',
                shape: {
                  x: start[0],
                  y: start[1] - height / 2,
                  width: width - 2, // 留微小缝隙
                  height: height - 2
                },
                style: { fill: bgColor }
              },
              {
                type: 'text',
                style: {
                  text: count > 0 ? count : '-',
                  x: start[0] + width / 2,
                  y: start[1],
                  textAlign: 'center',
                  textVerticalAlign: 'middle',
                  fill: textColor,
                  fontSize: 14,
                  fontWeight: 'bold'
                }
              }
            ]
          };
        },
        data: data
      }]
    };
    chart2.setOption(option);
  }

  // 页面加载完成后初始化图表
  window.addEventListener('load', () => {
      renderChart1('week');
      renderChart2();
  });

  // 响应窗口大小
  window.addEventListener('resize', () => {
    if(chart1) chart1.resize();
    if(chart2) chart2.resize();
  });

</script>
</body>
</html>