neo-cmp-cli 1.13.16 → 1.13.17

package/template/neo-bi-cmps/src/utils/pipelineFunnel.ts

@@ -0,0 +1,341 @@
+/**
+ * Pipeline 漏斗 pipelineFunnel 专用（解析表格行、ECharts 配置）
+ */
+import * as echarts from 'echarts';
+
+import { formatAmountDisplay } from './common';
+
+export const FUNNEL_COLORS = [
+  '#3b82f6',
+  '#22c55e',
+  '#f59e0b',
+  '#8b5cf6',
+  '#ec4899',
+  '#06b6d4',
+];
+
+export interface FunnelStage {
+  name: string;
+  amountNum: number;
+  amount: string;
+  count: number;
+  conversionRate?: string;
+  color: string;
+}
+
+export function parseAmountToNumber(raw: unknown): number {
+  if (raw === null || raw === undefined) return 0;
+  const s = String(raw)
+    .replace(/,/g, '')
+    .replace(/[^\d.-]/g, '');
+  const n = parseFloat(s);
+  return Number.isFinite(n) ? n : 0;
+}
+
+export function formatSharePercent(amount: number, total: number): string {
+  if (!total || !Number.isFinite(amount)) return '—';
+  return `${((amount / total) * 100).toFixed(1)}%`;
+}
+
+export function isTruthyProp(v: unknown): boolean {
+  return v === true || v === 'true' || v === 1 || v === '1';
+}
+
+/** 与后端阶段名比对时忽略大小写与连续空白 */
+export function isClosedLostStageName(raw: unknown): boolean {
+  const n = String(raw ?? '')
+    .trim()
+    .toLowerCase()
+    .replace(/\s+/g, ' ');
+  return n === 'closed lost';
+}
+
+/** 去掉 Closed Lost 阶段行，保留表头；须在 parseRowsToStages 之前调用，以免计入总额与占比 */
+export function filterOutClosedLostRows(table: unknown[][]): unknown[][] {
+  if (!Array.isArray(table) || table.length < 2) return table;
+  const header = table[0];
+  const rest = table
+    .slice(1)
+    .filter((row) => !(Array.isArray(row) && isClosedLostStageName(row[0])));
+  return [header, ...rest];
+}
+
+export function parseRowsToStages(rows: unknown[][]): {
+  stages: FunnelStage[];
+  totalAmountNum: number;
+} {
+  if (!Array.isArray(rows) || rows.length < 2) {
+    return { stages: [], totalAmountNum: 0 };
+  }
+  const dataRows = rows.slice(1);
+  const stages: FunnelStage[] = [];
+  const amountNums: number[] = [];
+  let totalAmountNum = 0;
+
+  for (let i = 0; i < dataRows.length; i++) {
+    const row = dataRows[i];
+    if (!Array.isArray(row) || row.length < 4) continue;
+
+    const name = String(row[0] ?? '');
+    const countRaw = row[2];
+    const amountNum = parseAmountToNumber(row[3]);
+    totalAmountNum += amountNum;
+    amountNums.push(amountNum);
+
+    const countNum = parseInt(String(countRaw).replace(/\D/g, ''), 10);
+    const count = Number.isFinite(countNum) ? countNum : 0;
+
+    stages.push({
+      name,
+      amountNum,
+      amount: formatAmountDisplay(amountNum),
+      count,
+      color: FUNNEL_COLORS[i % FUNNEL_COLORS.length],
+    });
+  }
+
+  for (let j = 0; j < stages.length; j++) {
+    stages[j].conversionRate = formatSharePercent(
+      amountNums[j],
+      totalAmountNum,
+    );
+  }
+
+  return { stages, totalAmountNum };
+}
+
+export function funnelLayerValue(index: number, total: number): number {
+  return Math.max(total - index, 1);
+}
+
+export function funnelValueForStage(
+  stage: FunnelStage,
+  index: number,
+  stageCount: number,
+  useClassicFunnelShape: boolean,
+): number {
+  if (useClassicFunnelShape) {
+    return funnelLayerValue(index, stageCount);
+  }
+  const v = stage.amountNum;
+  if (Number.isFinite(v) && v > 0) return v;
+  return 0;
+}
+
+/** 经典漏斗：宽度仍由 value（顺序）控制；层高按金额占比分配（与 series.gap 一致，单位为 px） */
+export function classicFunnelLayerHeightPercents(
+  amountNums: number[],
+  viewHeightPx: number,
+  gapPx: number,
+): string[] {
+  const n = amountNums.length;
+  if (n === 0) return [];
+  const h = Math.max(viewHeightPx, 1);
+  const factor = (h - gapPx * Math.max(n - 1, 0)) / h;
+  const positives = amountNums.map((v) => (Number.isFinite(v) && v > 0 ? v : 0));
+  const sum = positives.reduce((a, v) => a + v, 0);
+  if (sum <= 0) {
+    const even = (100 / n) * factor;
+    return Array(n).fill(`${even}%`);
+  }
+  return positives.map((v) => `${(100 * (v / sum)) * factor}%`);
+}
+
+export interface BuildFunnelChartOptionParams {
+  /** 容器高度（px），经典模式下用于计算各层 height 百分比；变化时应重新 setOption */
+  chartViewHeightPx?: number;
+  funnelGap?: number;
+}
+
+export function buildFunnelChartOption(
+  stages: FunnelStage[],
+  useClassicFunnelShape: boolean,
+  params?: BuildFunnelChartOptionParams,
+): echarts.EChartsOption {
+  const n = stages.length;
+  const values = stages.map((s, i) =>
+    funnelValueForStage(s, i, n, useClassicFunnelShape),
+  );
+  const funnelMax = useClassicFunnelShape
+    ? Math.max(n, 1)
+    : Math.max(...values, 1);
+
+  const gap = params?.funnelGap ?? 2;
+  const viewH = params?.chartViewHeightPx;
+  const classicHeights =
+    useClassicFunnelShape && viewH != null && viewH > 0
+      ? classicFunnelLayerHeightPercents(
+          stages.map((s) => s.amountNum),
+          viewH,
+          gap,
+        )
+      : null;
+
+  const coloredData = stages.map((s, i) => ({
+    name: s.name,
+    value: values[i],
+    itemStyle: {
+      color: s.color,
+      ...(classicHeights?.[i] ? { height: classicHeights[i] } : {}),
+    },
+  }));
+
+  const alignData = stages.map((s, i) => ({
+    name: s.name,
+    value: values[i],
+    ...(classicHeights?.[i]
+      ? { itemStyle: { height: classicHeights[i] } }
+      : {}),
+  }));
+
+  const labelLineStyle = {
+    length: 28,
+    lineStyle: {
+      width: 1,
+      color: '#d0d0d0',
+      type: 'solid' as const,
+    },
+  };
+
+  const labelLayoutLeft = () => ({
+    x: 0,
+    align: 'left' as const,
+    dx: 4,
+  });
+
+  const labelLayoutRight = () => ({
+    x: '100%',
+    align: 'right' as const,
+    dx: -6,
+  });
+
+  const funnelLayout = {
+    left: '12%',
+    top: 4,
+    bottom: 4,
+    width: '76%',
+    min: 0,
+    max: funnelMax,
+    minSize: '0%',
+    maxSize: '100%',
+    sort: 'none' as const,
+    gap: 1,
+  };
+
+  return {
+    backgroundColor: 'transparent',
+    legend: { show: false },
+    tooltip: {
+      trigger: 'item',
+      backgroundColor: 'rgba(0, 0, 0, 0.8)',
+      borderColor: '#333',
+      textStyle: { color: '#fff' },
+      formatter: (params: unknown) => {
+        const p = params as { dataIndex?: number; seriesName?: string };
+        const idx = p.dataIndex ?? 0;
+        const st = stages[idx];
+        if (!st) return '';
+        return [
+          `${st.name}`,
+          `Percentage: ${st.conversionRate ?? '—'}`,
+          `Amount: ${st.amount}`,
+          `Quantity: ${st.count}`,
+        ].join('<br/>');
+      },
+    },
+    series: [
+      {
+        name: 'Pipeline',
+        type: 'funnel',
+        z: 1,
+        ...funnelLayout,
+        itemStyle: {
+          borderColor: '#fff',
+          borderWidth: 1,
+        },
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowColor: 'rgba(0, 0, 0, 0.15)',
+          },
+        },
+        label: {
+          show: true,
+          position: 'left',
+          color: '#888',
+          fontSize: 11,
+          formatter: (p: { dataIndex?: number }) => {
+            const idx = typeof p.dataIndex === 'number' ? p.dataIndex : 0;
+            return stages[idx]?.conversionRate ?? '—';
+          },
+        },
+        labelLine: {
+          show: true,
+          ...labelLineStyle,
+        },
+        labelLayout: labelLayoutLeft,
+        data: coloredData,
+      },
+      {
+        name: 'PipelineLabels',
+        type: 'funnel',
+        z: 2,
+        animation: false,
+        animationDurationUpdate: 0,
+        ...funnelLayout,
+        itemStyle: {
+          color: 'rgba(0,0,0,0)',
+          borderWidth: 0,
+        },
+        emphasis: { disabled: true },
+        label: {
+          show: true,
+          position: 'right',
+          color: '#555',
+          fontSize: 11,
+          formatter: (p: { dataIndex?: number }) => {
+            const idx = typeof p.dataIndex === 'number' ? p.dataIndex : 0;
+            const st = stages[idx];
+            return st ? `${st.amount} / ${st.count}` : '';
+          },
+        },
+        labelLine: {
+          show: true,
+          ...labelLineStyle,
+        },
+        labelLayout: labelLayoutRight,
+        data: alignData,
+      },
+      {
+        name: 'PipelineName',
+        type: 'funnel',
+        z: 3,
+        silent: true,
+        animation: false,
+        animationDurationUpdate: 0,
+        tooltip: { show: false },
+        ...funnelLayout,
+        itemStyle: {
+          color: 'rgba(0,0,0,0)',
+          borderWidth: 0,
+        },
+        emphasis: { disabled: true },
+        label: {
+          show: true,
+          position: 'inside',
+          color: '#fff',
+          fontSize: 12,
+          fontWeight: 600,
+          textBorderColor: 'rgba(0,0,0,0.4)',
+          textBorderWidth: 1,
+          formatter: (p: { name?: string; dataIndex?: number }) => {
+            const idx = typeof p.dataIndex === 'number' ? p.dataIndex : 0;
+            return stages[idx]?.name ?? p.name ?? '';
+          },
+        },
+        labelLine: { show: false },
+        data: alignData,
+      },
+    ],
+  };
+}

package/template/neo-bi-cmps/src/utils/queryByCustomSQL.ts

@@ -0,0 +1,117 @@
+// @ts-nocheck
+import { request as axiosFetcher } from 'neo-open-api';
+
+/**
+ * 这里存放通用查询类 Open API
+ */
+
+/** 将 where 规范为 SQL 片段：字符串直接使用；数组用 and 拼接各条件 */
+function normalizeWhere(where: unknown): string {
+  if (where == null || where === '') {
+    return '';
+  }
+  if (typeof where === 'string') {
+    return where.trim();
+  }
+  if (Array.isArray(where)) {
+    return where
+      .map((part) => (part == null ? '' : String(part).trim()))
+      .filter(Boolean)
+      .join(' and ');
+  }
+  return '';
+}
+
+// 根据 sql 查询 BI 数据
+export const queryByCustomSQL = async (options?: any) => {
+  const apiUrl = '/rest/neobi/v2.0/query/queryByCustomSQL';
+  const curOptions = options || {};
+  const xObjectApiKey = curOptions.xObjectApiKey || '';
+  const fields = Object.assign([], curOptions.fields || []);
+  const page = curOptions.page || 1;
+  const pageSize = curOptions.pageSize || 10;
+
+  // 自动添加 objectId 字段
+  if (!fields.includes('id')) {
+    fields.push('id');
+  }
+
+  // 计算分页偏移量
+  const offset = (page - 1) * pageSize;
+
+  // 构建 SQL 查询
+  let querySql = `select ${fields.join(',')} from ${xObjectApiKey}`;
+
+  // 添加排序条件（如果有的话）
+  if (curOptions.orderBy) {
+    querySql += ` order by ${curOptions.orderBy}`;
+  }
+
+  /**
+   * 添加过滤条件（如果有的话）
+   * 支持的操作符包括：=、!=、like、not like、not in、is not null、is null、>、<、<>、>=、<=、in、between ... and ...。
+   * 对于 =、like 和 in 有以下说明：
+   *   “=” 作为字符串的条件时，表示精确匹配。例如，查询条件 city = '北京'，将返回 city 字段值严格等于 "北京" 的所有记录。
+   *   "like" 作为字符串的条件时，需要使用"%" 通配符进行模糊匹配。例如，city like‘北京%'，将返回 city 字段值以 "北京" 开头的所有记录。
+   *         目前仅支持将通配符“%” 放到已知内容之后的查询方式，例如，不支持 city like ‘% 北京'的查询方式。
+   *         当 SQL 查询中包含“%”等特殊字符时，需要对 SQL 进行 URL 编码处理。
+   * 支持"in"，但不包括子查询。
+   * 支持的逻辑运算符包括：and、or。
+   *
+   * `where` 可为字符串，或字符串数组（多项默认以 and 连接，等价于手写 `a and b`）。
+   */
+  const whereClause = normalizeWhere(curOptions.where);
+
+  if (whereClause) {
+    querySql += ` where ${whereClause}`;
+  }
+
+  if (curOptions.page || curOptions.pageSize) {
+    // 添加分页限制
+    querySql += ` limit ${offset},${pageSize}`;
+  }
+
+  const querySqlForm = new URLSearchParams();
+  querySqlForm.set('sqlObject', querySql);
+
+  try {
+    const config = {
+      url: apiUrl,
+      method: 'POST',
+      data: querySqlForm.toString(),
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
+      },
+    };
+
+    const resultData = await axiosFetcher(config);
+
+    if (resultData.code === 200) {
+      const records = resultData.data || [];
+      return {
+        status: true,
+        code: resultData.code,
+        msg: resultData.msg || '获取业务对象数据列表成功',
+        totalSize: records.length,
+        data: records || [],
+      };
+    }
+
+    return {
+      status: false,
+      code: resultData.code,
+      msg: resultData.msg || '获取业务对象数据列表失败',
+      data: [],
+    };
+  } catch (error) {
+    console.error('获取业务对象数据列表失败:', error);
+
+    return {
+      status: false,
+      msg: error.msg || error.message || '获取业务对象数据列表失败',
+      data: [],
+    };
+  }
+};
+
+export default queryByCustomSQL;

package/template/neo-bi-cmps/src/utils/requestDebounce.ts

@@ -0,0 +1,22 @@
+// @ts-nocheck
+import debounce from 'lodash/debounce';
+
+/** 组件内数据请求防抖间隔（毫秒），用于合并短时间内的重复触发 */
+export const REQUEST_DEBOUNCE_MS = 280;
+
+/** lodash debounce 实例（避免依赖 @types/lodash） */
+export type DebouncedRequestFn = {
+  (): void;
+  cancel(): void;
+  flush(): void;
+};
+
+/**
+ * 尾部防抖：连续触发时仅在停顿后执行一次，适合 filter / props 连更新场景。
+ */
+export function createRequestDebounce(
+  fn: () => void,
+  wait: number = REQUEST_DEBOUNCE_MS,
+): DebouncedRequestFn {
+  return debounce(fn, wait) as DebouncedRequestFn;
+}