neo-cmp-cli 1.13.16 → 1.13.18

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-h5-cmps/src/utils/queryObjectData.ts → neo-bi-cmps/src/utils/queryByCustomSQL.ts}

@@ -1,4 +1,5 @@
-import axiosFetcher from '$utils/axiosFetcher';
+// @ts-nocheck
+import { request as axiosFetcher } from 'neo-open-api';
 
 /**
  * 这里存放通用查询类 Open API
@@ -21,12 +22,12 @@ function normalizeWhere(where: unknown): string {
   return '';
 }
 
-// 获取业务对象数据列表
-export const queryXObjectData = async (options?: any) => {
-  const apiUrl = '/rest/data/v2/query';
+// 根据 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 = curOptions.fields || [];
+  const fields = Object.assign([], curOptions.fields || []);
   const page = curOptions.page || 1;
   const pageSize = curOptions.pageSize || 10;
 
@@ -60,34 +61,38 @@ export const queryXObjectData = async (options?: any) => {
    * `where` 可为字符串，或字符串数组（多项默认以 and 连接，等价于手写 `a and b`）。
    */
   const whereClause = normalizeWhere(curOptions.where);
-  console.log('whereClause:', whereClause);
+
   if (whereClause) {
     querySql += ` where ${whereClause}`;
   }
 
   if (curOptions.page || curOptions.pageSize) {
     // 添加分页限制
-    querySql += ` limit ${pageSize} offset ${offset}`;
+    querySql += ` limit ${offset},${pageSize}`;
   }
 
+  const querySqlForm = new URLSearchParams();
+  querySqlForm.set('sqlObject', querySql);
+
   try {
     const config = {
       url: apiUrl,
-      method: 'GET',
-      data: {
-        q: querySql,
+      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, totalSize } = resultData.result || {};
+      const records = resultData.data || [];
       return {
         status: true,
         code: resultData.code,
         msg: resultData.msg || '获取业务对象数据列表成功',
-        totalSize,
+        totalSize: records.length,
         data: records || [],
       };
     }
@@ -109,4 +114,4 @@ export const queryXObjectData = async (options?: any) => {
   }
 };
 
-export default queryXObjectData;
+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;
+}