DataGovernanceDashboard/res/js/indexV2.enterprise.js

    /**
     * 企业级页面渲染模块。
     * 负责企业总览、企业指标分析、项目图表和项目清单弹窗，数据来源主要是 core 模块按企业派生的项目样本。
     */
    function renderEnterpriseView() {
      const enterprise = getEnterprise(state.enterpriseName);
      const stats = getStats(enterprise);
      const projects = generateProjects(enterprise, state.dimension);
      const indicators = buildEnterpriseIndicatorItems(getWarningIndicators(), projects, stats);

      // 新开工维度下部分企业没有项目，单独展示空态，避免图表按空数组渲染出异常坐标。
      if (!stats.projectCount) {
        app.innerHTML = `
          <section class="panel">
            <div class="panel-header">
              <div>
                <h2 class="panel-title">${enterprise.name} · ${dimLabel()}看板</h2>
                <div class="panel-note">当前维度暂无项目数据，可切换到“所有项目”查看企业总体情况。</div>
              </div>
            </div>
            <div class="empty-state">当前企业在「${dimLabel()}」维度暂无数据。</div>
          </section>
        `;
        return;
      }

      app.innerHTML = `
        <section class="metric-cards">
          ${miniMetric("项目数量", stats.projectCount, "个", `${enterprise.name} 当前${dimLabel()}项目数量`, "enterprise-project-list")}
          ${miniMetric("上线率", fmtPercent(stats.onlineRate), "", "项目已建档并进入系统", "enterprise-offline-list")}
          ${miniMetric("使用率", fmtPercent(stats.usageRate), "", "连续三天无更新视未使用")}
          ${miniMetric("准确率", fmtPercent(stats.accuracyRate), "", "数据准确情况")}
        </section>

        <section class="indicator-strip">
          ${renderFocusIndicators(indicators.slice(0, 8), 0, { highlightHigh: false })}
          <div class="indicator-more-cell">
            <button type="button" class="more-btn" data-action="enterprise-more-indicators">更多</button>
          </div>
        </section>

        <article class="panel trend-panel enterprise-trend-panel">
          <div class="panel-header">
            <div>
              <h2 class="panel-title">企业三率趋势曲线</h2>
              <div class="panel-note">近 7 日${enterprise.name}上线率、使用率、准确率变化。</div>
            </div>
            <div class="legend">
              <span class="legend-item"><span class="dot" style="background:${COLORS.online}"></span>上线</span>
              <span class="legend-item"><span class="dot" style="background:${COLORS.usage}"></span>使用</span>
              <span class="legend-item"><span class="dot" style="background:${COLORS.accuracy}"></span>准确</span>
            </div>
          </div>
          <div class="chart-box">${renderTrendChart({
            online: enterprise.trend.online,
            usage: enterprise.trend.usage,
            accuracy: enterprise.trend.accuracy
          }, 1840, 112)}</div>
        </article>

        <section class="dashboard-grid enterprise-overview">
          <article class="panel">
            <div class="panel-header">
              <div>
                <h2 class="panel-title">${enterprise.name} · 项目分析</h2>
                <div class="panel-note">项目级不统计上线率，底部圆点表示是否上线；点击项目下钻到字段追踪。</div>
              </div>
              <div class="legend">
                <span class="legend-item"><span class="dot" style="background:${COLORS.usage}"></span>使用率</span>
                <span class="legend-item"><span class="dot" style="background:${COLORS.accuracy}"></span>准确率</span>
                <span class="legend-item"><span class="dot" style="background:${COLORS.cyan}"></span>已上线</span>
              </div>
            </div>
            <div class="chart-box">${renderProjectRateChart(projects, { height: 210 })}</div>
            <div class="explain">企业层用于回答：本单位哪些项目未上线、哪些项目上线后未使用指标、哪些项目数据连续未更新。</div>
          </article>

          <article class="panel">
            <div class="panel-header">
              <div>
                <h2 class="panel-title">指标分析</h2>
                <div class="panel-note">按${enterprise.name}指标预警项目数、使用率和数据状态展示责任短板。</div>
              </div>
              <div class="panel-tools">
                <button type="button" class="more-btn" data-action="enterprise-more-indicators">更多</button>
              </div>
            </div>
            ${renderEnterpriseIndicatorAnalysis(indicators)}
          </article>
        </section>
      `;
    }

    /**
     * 企业页顶部小指标卡。
     * action 不为空时会写入 data-action，事件代理据此打开项目清单或未上线项目清单弹窗。
     */
    function miniMetric(label, value, unit, desc, action = "") {
      return `
        <article class="mini-panel" ${action ? `data-action="${action}"` : ""}>
          <div class="mini-label">${label}</div>
          <div class="mini-value">${value}<span class="kpi-unit">${unit}</span></div>
          <div class="mini-desc">${desc}</div>
        </article>
      `;
    }

    /**
     * 企业项目风险表。
     * 每行带 data-project，点击后切换到项目明细页；表格主要用于从企业层快速定位异常项目。
     */
    function renderProjectTable(projectRiskList) {
      return `
        <div class="table-wrap">
          <table>
            <thead>
              <tr>
                <th>项目名称</th>
                <th>是否上线</th>
                <th>使用率</th>
                <th>准确率</th>
                <th>预警项</th>
                <th>最近更新</th>
                <th>风险</th>
              </tr>
            </thead>
            <tbody>
              ${projectRiskList.map(({ project }) => `
                <tr class="clickable-row" data-project="${project.id}">
                  <td>${project.name}</td>
                  <td>${project.created ? '<span class="status-pill ok">已上线</span>' : '<span class="status-pill bad">未上线</span>'}</td>
                  <td class="num">${fmtPercent(project.usageRate)}</td>
                  <td class="num">${fmtPercent(project.accuracyRate)}</td>
                  <td class="num">${project.warningCount}</td>
                  <td>${project.lastUpdate}</td>
                  <td>${riskPill(project.risk)}</td>
                </tr>
              `).join("")}
            </tbody>
          </table>
        </div>
      `;
    }

    /**
     * 企业项目清单弹窗。
     * type=offline 时只展示未建档/未上线项目；其他情况展示当前维度下所有生成项目。
     */
    function renderEnterpriseProjectListModal(type) {
      const enterprise = getEnterprise(state.enterpriseName);
      const projects = generateProjects(enterprise, state.dimension);
      const rows = type === "offline"
        ? projects.filter((project) => !project.created)
        : projects;
      const title = type === "offline" ? "未上线项目清单" : "所有项目清单";
      const emptyText = type === "offline" ? "当前企业暂无未上线项目。" : "当前企业暂无项目。";
      if (!rows.length) {
        return `
          <section class="panel drill-panel">
            <div class="panel-header">
              <div>
                <h2 class="panel-title">${enterprise.name} · ${title}</h2>
              </div>
            </div>
            <div class="empty-state">${emptyText}</div>
          </section>
        `;
      }
      return `
        <section class="panel drill-panel">
          <div class="panel-header">
            <div>
              <h2 class="panel-title">${enterprise.name} · ${title}</h2>
              <div class="panel-note">点击项目行进入项目级看板。</div>
            </div>
          </div>
          <div class="table-wrap">
            <table>
              <thead>
                <tr>
                  <th>项目名称</th>
                  <th>是否上线</th>
                  <th>使用率</th>
                  <th>准确率</th>
                  <th>预警项</th>
                  <th>最近更新</th>
                  <th>责任人</th>
                  <th>风险</th>
                </tr>
              </thead>
              <tbody>
                ${rows.map((project) => `
                  <tr class="clickable-row" data-project="${project.id}">
                    <td>${project.name}</td>
                    <td>${project.created ? '<span class="status-pill ok">已上线</span>' : '<span class="status-pill bad">未上线</span>'}</td>
                    <td class="num">${fmtPercent(project.usageRate)}</td>
                    <td class="num">${fmtPercent(project.accuracyRate)}</td>
                    <td class="num">${project.warningCount}</td>
                    <td>${project.lastUpdate}</td>
                    <td>${project.owner}</td>
                    <td>${riskPill(project.risk)}</td>
                  </tr>
                `).join("")}
              </tbody>
            </table>
          </div>
        </section>
      `;
    }