问答 查看内容
返回列表

如何隐藏自助取数控件筛选框并固定维度

286 1
发表于 2026-4-16 15:22:11 | 查看全部 阅读模式
自助取数控件里想隐藏筛选框,并把维度固定住,让用户只能基于数值内容做自助处理。

当前场景里不希望用户再去调整维度,只保留数值相关的自助分析能力。页面上维度区域仍然会展示勾选框,用户也可以点击维度项,导致报表展示跟着变化。

想确认这种场景有没有比较合适的实现方式,能够在指定页面下隐藏维度筛选框,并阻止用户改动固定维度。

评论1

观小程楼主Lv.1 发表于 2026-4-16 15:27:47 | 查看全部
可以用 OpenSDK 前端插件处理,在目标页面里把“维度”字段卡片的勾选框隐藏掉,同时拦截维度项点击,这样就能把维度固定住,只让用户处理“数值”内容。

使用时需要按实际页面调整两个地方:
1. `TARGET_PAGE_KEY` 改成目标页面 ID
2. “维度”字段卡片的识别条件按实际标题调整,如果现场标题不是“维度”,需要同步修改

参考插件代码如下:

[code=javascript]
/**
* 隐藏指定页面“维度”字段窗格中的勾选框,并禁用维度项点击
* 适用:OpenSDK 前端插件
* 说明:
* 1. 仅在目标 page 生效
* 2. 仅处理标题为“维度”的字段卡片,不影响“数值”卡片
* 3. 隐藏“全选 + 重置”区域,以及每个维度项前的勾选框
* 4. 拦截维度项点击,避免点击文字后影响报表展示
*/

const TARGET_PAGE_KEY = 'ta90433ee5874464db0cdd1a';
const HIDE_ATTR = 'data-codex-hidden-dimension-checkbox';
const DISABLED_ATTR = 'data-codex-disabled-dimension-click';
const SCAN_INTERVAL_MS = 600;
const MAX_SCAN_TIMES = 20;

let routeObserver = null;
let scanTimer = null;
let scanCount = 0;

function isTargetPage(pathname = window.location.pathname, search = window.location.search) {
  return `${pathname}${search}`.includes(TARGET_PAGE_KEY);
}

function isHTMLElement(node) {
  return node instanceof HTMLElement;
}

function getDimensionCard() {
  const cards = Array.from(document.querySelectorAll('.gd-show.gd-color-bg-card.pos-relative.content-full.column-flex'));
  return cards.find((card) => {
    const title = card.querySelector('.ZIlR-RUH .gd-text-primary');
    return title && title.textContent.trim() === '维度';
  }) || null;
}

function hideDimensionHeaderActions(card) {
  const scrollPanel = card.querySelector('.Xj7S5wGi');
  if (!isHTMLElement(scrollPanel)) return false;

  const topRow = scrollPanel.querySelector('.row-flex-center.mb-8.pl-10.pr-10.no-shrink');
  if (!isHTMLElement(topRow)) return false;

  const leftActions = topRow.querySelector('.flex1.row-flex-center.jc-space > .row-flex-center');
  if (!isHTMLElement(leftActions)) return false;

  if (leftActions.getAttribute(HIDE_ATTR) === 'true') return false;

  leftActions.setAttribute(HIDE_ATTR, 'true');
  leftActions.style.display = 'none';
  return true;
}

function getDimensionRows(card) {
  return Array.from(card.querySelectorAll('.KNIIIcpC.row-flex-center.pos-relative')).filter((row) => {
    const content = row.querySelector('.WSoDlu-c.gd-color-bg-dim');
    return isHTMLElement(content);
  });
}

function hideRowCheckbox(row) {
  const checkbox = row.querySelector('label.ant-checkbox-wrapper');
  if (!isHTMLElement(checkbox)) return false;
  if (checkbox.getAttribute(HIDE_ATTR) === 'true') return false;

  checkbox.setAttribute(HIDE_ATTR, 'true');
  checkbox.style.display = 'none';
  return true;
}

function stopDimensionRowClick(event) {
  event.preventDefault();
  event.stopPropagation();
  event.stopImmediatePropagation();
}

function disableRowClick(row) {
  const clickLayer = row.querySelector('.WSoDlu-c.gd-color-bg-dim');
  if (!isHTMLElement(clickLayer)) return false;
  if (clickLayer.getAttribute(DISABLED_ATTR) === 'true') return false;

  row.setAttribute(DISABLED_ATTR, 'true');
  row.style.cursor = 'default';
  row.addEventListener('click', stopDimensionRowClick, true);
  row.addEventListener('mousedown', stopDimensionRowClick, true);
  row.addEventListener('mouseup', stopDimensionRowClick, true);
  row.addEventListener('pointerdown', stopDimensionRowClick, true);
  row.addEventListener('pointerup', stopDimensionRowClick, true);

  clickLayer.setAttribute(DISABLED_ATTR, 'true');
  clickLayer.style.cursor = 'default';
  clickLayer.addEventListener('click', stopDimensionRowClick, true);
  clickLayer.addEventListener('mousedown', stopDimensionRowClick, true);
  clickLayer.addEventListener('mouseup', stopDimensionRowClick, true);
  clickLayer.addEventListener('pointerdown', stopDimensionRowClick, true);
  clickLayer.addEventListener('pointerup', stopDimensionRowClick, true);
  return true;
}

function applyHide() {
  if (!isTargetPage()) return false;

  const card = getDimensionCard();
  if (!card) return false;

  let changed = hideDimensionHeaderActions(card);

  getDimensionRows(card).forEach((row) => {
    changed = hideRowCheckbox(row) || changed;
    changed = disableRowClick(row) || changed;
  });

  return changed;
}

function stopScan() {
  if (!scanTimer) return;
  window.clearInterval(scanTimer);
  scanTimer = null;
}

function startScan() {
  stopScan();
  scanCount = 0;
  scanTimer = window.setInterval(() => {
    scanCount += 1;
    const applied = applyHide();
    if (applied || scanCount >= MAX_SCAN_TIMES) {
      stopScan();
    }
  }, SCAN_INTERVAL_MS);
}

function bindObserver() {
  if (routeObserver || !document.body) return;
  routeObserver = new MutationObserver(() => {
    applyHide();
  });
  routeObserver.observe(document.body, {
    childList: true,
    subtree: true,
  });
}

function unbindObserver() {
  if (!routeObserver) return;
  routeObserver.disconnect();
  routeObserver = null;
}

function handleRouteChange(params = {}) {
  const pathname = params.pathname || window.location.pathname;
  const search = params.search || window.location.search;

  if (!isTargetPage(pathname, search)) {
    stopScan();
    unbindObserver();
    return;
  }

  bindObserver();
  startScan();
  applyHide();
}

window.GD.on('gd-ready', () => {
  handleRouteChange();
});

window.GD.on('gd-route-change', (params) => {
  handleRouteChange(params);
});
[/code]

回复里附了一张配置示意图,主要就是按实际页面 ID 和维度名称去调整。

截图202604161527471167.png

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

微信服务号
联系我们
电话:400-880-0750
邮箱:hello@guandata.com
Copyright © 2001-2026 观远社区 版权所有 All Rights Reserved. 浙 ICP 备15006424号-3
去回复 去发帖 返回顶部
快速回复 返回顶部 返回列表