178 lines
6.7 KiB
JavaScript
178 lines
6.7 KiB
JavaScript
|
|
/**
|
||
|
|
* 全局事件模块。
|
||
|
|
* 页面大部分内容由模板字符串动态生成,因此统一使用事件代理监听 click,再按 data-* 属性更新 state 或打开外链。
|
||
|
|
*/
|
||
|
|
document.addEventListener("click", (event) => {
|
||
|
|
// 维度切换会影响企业、项目、指标所有派生数据;项目页切换维度后回到企业页,防止旧项目 id 失效。
|
||
|
|
const dimButton = event.target.closest("[data-dim]");
|
||
|
|
if (dimButton) {
|
||
|
|
state.dimension = dimButton.dataset.dim;
|
||
|
|
if (state.view === "project") {
|
||
|
|
state.view = "enterprise";
|
||
|
|
state.projectId = "";
|
||
|
|
}
|
||
|
|
if (state.drillOpen && state.drillView === "project") {
|
||
|
|
state.drillView = "trend";
|
||
|
|
}
|
||
|
|
render();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 系统切换后需要校验当前选中指标是否仍属于新系统,不属于则切换到该系统第一个指标。
|
||
|
|
const systemButton = event.target.closest("[data-system]");
|
||
|
|
if (systemButton) {
|
||
|
|
if (!allowedSystems.includes(systemButton.dataset.system)) return;
|
||
|
|
state.system = systemButton.dataset.system;
|
||
|
|
if (!getWarningIndicators().some((item) => item.name === state.selectedIndicator)) {
|
||
|
|
state.selectedIndicator = getWarningIndicators()[0]?.name || "";
|
||
|
|
}
|
||
|
|
render();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 显式操作按钮:外链预览、弹窗开关、面包屑返回都通过 data-action 分发。
|
||
|
|
const action = event.target.closest("[data-action]");
|
||
|
|
if (action) {
|
||
|
|
if (action.dataset.action === "more-indicators") {
|
||
|
|
window.open(INDICATOR_MORE_URL, "_blank", "noopener,noreferrer");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (action.dataset.action === "enterprise-more-indicators") {
|
||
|
|
window.open(ENTERPRISE_INDICATOR_MORE_URL, "_blank", "noopener,noreferrer");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (action.dataset.action === "group-usage-report-preview") {
|
||
|
|
window.open(GROUP_USAGE_REPORT_URL, "_blank", "noopener,noreferrer");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (action.dataset.action === "preview-unit-report") {
|
||
|
|
const unit = action.dataset.unit || "";
|
||
|
|
const fileName = usageReportFiles[unit];
|
||
|
|
if (!fileName) {
|
||
|
|
window.alert(`${unit || "该单位"}未上传一览表`);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const fileUrl = `${REPORT_FILE_BASE_URL}${encodeURIComponent(fileName)}`;
|
||
|
|
window.open(`${OFFICE_PREVIEW_BASE_URL}${encodeURIComponent(fileUrl)}`, "_blank", "noopener,noreferrer");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (action.dataset.action === "group-online-stats") {
|
||
|
|
state.drillOpen = true;
|
||
|
|
state.drillView = "groupOnlineStats";
|
||
|
|
state.drillEnterpriseName = "";
|
||
|
|
state.drillListType = "";
|
||
|
|
state.projectId = "";
|
||
|
|
renderDrillModal();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (action.dataset.action === "close-drill") {
|
||
|
|
state.drillOpen = false;
|
||
|
|
state.drillView = "trend";
|
||
|
|
state.drillEnterpriseName = "";
|
||
|
|
state.drillListType = "";
|
||
|
|
renderDrillModal();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (action.dataset.action === "enterprise-project-list") {
|
||
|
|
state.drillOpen = true;
|
||
|
|
state.drillView = "enterpriseProjectList";
|
||
|
|
state.drillListType = "all";
|
||
|
|
state.projectId = "";
|
||
|
|
renderDrillModal();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (action.dataset.action === "enterprise-offline-list") {
|
||
|
|
state.drillOpen = true;
|
||
|
|
state.drillView = "enterpriseProjectList";
|
||
|
|
state.drillListType = "offline";
|
||
|
|
state.projectId = "";
|
||
|
|
renderDrillModal();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (action.dataset.action === "indicator-trend") {
|
||
|
|
state.drillOpen = true;
|
||
|
|
state.drillView = "trend";
|
||
|
|
state.drillEnterpriseName = "";
|
||
|
|
state.projectId = "";
|
||
|
|
state.drillListType = "";
|
||
|
|
renderDrillModal();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (action.dataset.action === "group") {
|
||
|
|
state.view = "group";
|
||
|
|
state.enterpriseName = "";
|
||
|
|
state.projectId = "";
|
||
|
|
}
|
||
|
|
if (action.dataset.action === "enterprise") {
|
||
|
|
state.view = "enterprise";
|
||
|
|
state.enterpriseName = action.dataset.enterprise || state.enterpriseName;
|
||
|
|
state.projectId = "";
|
||
|
|
}
|
||
|
|
render();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 指标卡点击:集团页打开指标趋势,企业页打开该企业下的项目指标穿透。
|
||
|
|
const indicatorTarget = event.target.closest("[data-indicator]");
|
||
|
|
if (indicatorTarget) {
|
||
|
|
state.selectedIndicator = indicatorTarget.dataset.indicator;
|
||
|
|
state.drillOpen = true;
|
||
|
|
if (state.view === "enterprise") {
|
||
|
|
state.drillView = "project";
|
||
|
|
state.drillEnterpriseName = state.enterpriseName;
|
||
|
|
} else {
|
||
|
|
state.drillView = "trend";
|
||
|
|
state.drillEnterpriseName = "";
|
||
|
|
}
|
||
|
|
state.projectId = "";
|
||
|
|
renderDrillModal();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 指标排行中的企业点击:保留当前指标,切换穿透企业,弹窗内容更新为项目维度明细。
|
||
|
|
const indicatorEnterpriseTarget = event.target.closest("[data-indicator-enterprise]");
|
||
|
|
if (indicatorEnterpriseTarget) {
|
||
|
|
state.drillEnterpriseName = indicatorEnterpriseTarget.dataset.indicatorEnterprise;
|
||
|
|
state.drillOpen = true;
|
||
|
|
state.drillView = "project";
|
||
|
|
state.projectId = "";
|
||
|
|
renderDrillModal();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 企业点击:从集团图表、表格或面包屑进入企业看板。
|
||
|
|
const enterpriseTarget = event.target.closest("[data-enterprise]");
|
||
|
|
if (enterpriseTarget) {
|
||
|
|
state.view = "enterprise";
|
||
|
|
state.enterpriseName = enterpriseTarget.dataset.enterprise;
|
||
|
|
state.projectId = "";
|
||
|
|
render();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 项目点击:进入项目级看板,并关闭当前弹窗,避免弹窗遮挡项目详情。
|
||
|
|
const projectTarget = event.target.closest("[data-project]");
|
||
|
|
if (projectTarget) {
|
||
|
|
state.view = "project";
|
||
|
|
state.projectId = projectTarget.dataset.project;
|
||
|
|
state.drillOpen = false;
|
||
|
|
state.drillView = "trend";
|
||
|
|
state.drillListType = "";
|
||
|
|
render();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 初始化顺序:
|
||
|
|
* 先绑定缩放并渲染兜底数据,再异步加载集团主数据接口;
|
||
|
|
* 接口返回后 loadProjectMasterDataAnalysis 会再次 render,刷新集团上线率卡片和统计弹窗。
|
||
|
|
*/
|
||
|
|
window.addEventListener("resize", scaleScreen);
|
||
|
|
if (window.visualViewport) {
|
||
|
|
window.visualViewport.addEventListener("resize", scaleScreen);
|
||
|
|
}
|
||
|
|
|
||
|
|
scaleScreen();
|
||
|
|
render();
|
||
|
|
loadProjectMasterDataAnalysis();
|