aldehyde 0.2.529 → 0.2.530

package/src/aldehyde/lowcode-components/ranking-list/index.tsx

@@ -0,0 +1,434 @@
+
+import React, { ForwardedRef, forwardRef, useEffect, useImperativeHandle, useState, useRef, useMemo } from 'react';
+import { Listy, Spin, Progress, Tooltip, Empty } from 'antd';
+import { generate } from '@ant-design/colors';
+import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons';
+import { useLocale } from "../../locale/useLocale";
+import HydrocarbonService from "../../tmpl/hcservice-v3";
+import { DataConfigProps } from "../data";
+
+const medalColor = ['#ffd76a', '#cfd8ea', '#e8a86e'];
+const medalText = ['🥇', '🥈', '🥉'];
+
+const demoData = [
+    { name: '综采一队', value: 4.2, rate: -3.1 },
+    { name: '综采二队', value: 3.1, rate: -1.2 },
+    { name: '洗煤厂', value: 2.6, rate: 0.8 },
+    { name: '运输工区', value: 2.4, rate: 1.5 },
+    { name: '通风工区', value: 2.3, rate: 2.4 },
+    { name: '掘进工区', value: 2.3, rate: -0.6 },
+];
+
+/**
+ * 处理数据格式约定：
+ * v1:名称
+ * v2:值
+ * v3:环比
+ * v4\v5...:其他数据弹窗显示
+ * d1:进度条最大值（图表未配置最大值时，使用d1值为最大值）
+ */
+
+const handleData = (data: { config: { [key: string]: string }, value: { [key: string]: any }[] }[]) => {
+    const temConfig = data?.[0]?.config || {}; // 列配置（字段中文名等）
+    const temValue = data?.[0]?.value || [];
+    const temData = temValue.map((row: { [key: string]: any }) => {
+        const [id, temName] = String(row?.v1 ?? '').split('@R@'); // v1 格式：id@R@名称
+        // v4、v5... 其他字段，用于弹窗展示
+        const extras = Object.keys(row || {})
+            .filter(key => !['v1', 'v2', 'v3'].includes(key) && !key.includes('-'))
+            .map(key => ({ key, label: temConfig[key] || key, value: row[key], color: row[`${key}-color`] }))
+            .filter(item => item.value !== null && item.value !== undefined && item.value !== '')
+            .sort((a, b) => { // v 开头在前（v4、v5...），其他前缀（d1...）在后，同前缀按数字升序
+                const getSort = (key: string) => {
+                    const prefix = (key.match(/^[a-zA-Z]+/) || [''])[0];
+                    return { group: prefix === 'v' ? 0 : 1, prefix, num: Number(key.replace(/\D/g, '')) || 0 };
+                };
+                const x = getSort(a.key);
+                const y = getSort(b.key);
+                return x.group - y.group || x.prefix.localeCompare(y.prefix) || x.num - y.num;
+            });
+        return {
+            id, // 名称对应的id
+            name: temName ?? id, // v1：名称
+            value: row?.v2 ?? undefined, // v2：值
+            rate: row?.v3 ?? undefined, // v3：环比
+            maxValue: row?.d1 ?? undefined, // d1(维度1)：进度条最大值
+            extras, // v4、v5...：其他数据
+        };
+    });
+    // 按值倒序排列
+    return temData.sort((a, b) => (Number(b.value) || 0) - (Number(a.value) || 0));
+}
+
+export interface ComponentStyle {
+    primaryColor?: string; // 主色
+    order?: { // 排序配置
+        show?: boolean; // 是否显示
+        showMedal?: boolean; // 是否显示勋章
+    };
+    rate?: {
+        show?: boolean; // 是否显示环比 
+        fontSize?: number; // 字体大小
+    };
+    value?: {
+        show?: boolean; // 是否显示值
+        fontSize?: number; // 字体大小
+        maxData?: number; // 最大数据值，用于进度条
+    };
+    name?: {
+        show?: boolean; // 是否显示名称
+        fontSize?: number; // 字体大小
+    };
+    progress?: {  // 进度条配置
+        show?: boolean; // 是否显示进度条
+        size?: number; // 尺寸（高度）
+    };
+    showTooltip?: boolean; // 是否显示提示
+}
+
+export interface ComponentProps {
+    style?: ComponentStyle;
+    base?: { width: number, height: number };
+    data?: DataConfigProps;
+    isDesignMode?: boolean; // 是否编辑模式
+    initSearchParams?: { [key: string]: any }; // 全局初始化外部参数，例：传参包含设备id，则在查询时带上设备id
+}
+
+export interface ComponentRef {
+    updateConfig: (newConfig: ComponentProps) => void;
+    destroy: () => void;
+}
+
+const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
+    const { style, data: propsData, isDesignMode, base: propsBase } = props;
+    const [config, setConfig] = useState<ComponentStyle>(style || {});
+    const [dataConfig, setDataConfig] = useState<DataConfigProps>({ ...propsData }); // 数据源配置
+    const [size, setSize] = useState<{ width: number, height: number }>(propsBase);
+    const [data, setData] = useState<{ [key: string]: any }[]>();
+    const [searchParams, setSearchParams] = useState<{ [key: string]: any }>();
+    const [initSearchParams, setInitSearchParams] = useState<{ [key: string]: any }>();
+    const [loading, setLoading] = useState<boolean>(false);
+    const pollingIntervalRef = useRef<number | NodeJS.Timeout>(null);
+    const { translate } = useLocale();
+
+    // 组件销毁
+    const handleDestroy = () => {
+        pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
+    };
+
+    // 全局初始化请求数据处理
+    const handleInitData = (val: DataConfigProps) => {
+        if (val.sourceType === "sourceId" && val.isInit && val.initData) {
+            const { config, value } = val.initData;
+            const temData = handleData(value);
+            setData(temData);
+            if (config?.requestMode === "polling") {
+                pollingIntervalRef.current = setInterval(() => { getData() }, config?.pollingInterval || 60000);
+            }
+        }
+    }
+
+    // ws订阅数据更新
+    const handleWSData = (val: DataConfigProps) => {
+        if (val.sourceType === "sourceId" && val.wsData) {
+            const { value } = val.wsData;
+            const temData = handleData(value);
+            setData(temData);
+        }
+    }
+
+    useImperativeHandle(ref, () => ({ // 暴露到外部func
+        updateConfig: (newConfig) => { // 组件更新配置
+            const { base, style, data: newDataConfig, initSearchParams: newISParams } = newConfig;
+            setConfig({ ...(style || {}) });
+            setSize({ width: base.width, height: base.height });
+            setDataConfig(newDataConfig);
+            handleInitData(newDataConfig);
+            setSearchParams(newDataConfig.searchParams);
+            setInitSearchParams(newISParams);
+            handleWSData(newDataConfig);
+        },
+        destroy: handleDestroy
+    }));
+
+    // 请求数据
+    const getData = async (params?: object) => {
+        setLoading(true);
+        const { data } = await HydrocarbonService.requestChartData(null, dataConfig?.sourceId, params) || {};
+        const { config, value } = data || {};
+        const temData = handleData(value);
+        setData(temData);
+        setLoading(false);
+        return config;
+    }
+
+    // 初始化请求数据
+    const getInitData = async (params?: object) => {
+        pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
+        const config = await getData(params);
+        if (config?.requestMode === "polling") {
+            pollingIntervalRef.current = setInterval(() => getData(params), config?.pollingInterval || 60000);
+        }
+    }
+
+    useEffect(() => {
+        return () => {
+            handleDestroy();
+        }
+    }, []);
+
+    // 静态数据处理
+    useEffect(() => {
+        if (dataConfig?.sourceType === 'staticData') {
+            const { value } = dataConfig.staticData || {};
+            setData(value);
+        }
+    }, [dataConfig?.sourceType, dataConfig?.staticData]);
+
+    /**
+     * 数据源数据请求
+     * 1、编辑态不请求数据
+     */
+    useEffect(() => {
+        if (!isDesignMode && dataConfig?.sourceType === 'sourceId' && dataConfig?.sourceId && !dataConfig?.isInit && dataConfig?.isDefRequest !== false) {
+            if (dataConfig?.isInitParams) { // 组件数据源接收外部参数
+                initSearchParams && getInitData(initSearchParams);
+            } else {
+                getInitData();
+            }
+        }
+    }, [dataConfig?.sourceType, dataConfig?.sourceId, initSearchParams]);
+
+    // 搜索参数变化时重新请求数据
+    useEffect(() => {
+        if (searchParams) {
+            const params = { ...(initSearchParams || {}), ...searchParams };
+            if (dataConfig?.isInitParams) { // 数据源接收外部参数，则参数存在再请求
+                initSearchParams && getInitData(params);
+            } else {
+                getInitData(params);
+            }
+        }
+    }, [searchParams, initSearchParams]);
+
+    // 渲染环比变化
+    const renderChg = (val: number, fontSize: number = 12) => {
+        let temData: any = { color: "#8f9bae", icon: "-", value: "" };
+        if (val > 0) {
+            temData = { color: "#4fe3c1", icon: <CaretUpOutlined />, value: val.toFixed(2) };
+        } else if (val < 0) {
+            temData = { color: "#f27c8c", icon: <CaretDownOutlined />, value: Math.abs(val).toFixed(2) };
+        }
+        return <span style={{ color: temData.color, fontSize }}>{temData.icon} {temData.value}</span>;
+    };
+
+    const renderItem = (item, i) => {
+        const { primaryColor = '#1677ff', order, rate, value, name, progress, showTooltip = true } = config;
+        const palette = generate(primaryColor); // 主题色映射
+        const isTop = i < 3; // 是否为前3名
+        const showOrder = order?.show !== false; // 是否显示排序
+        const showMedal = isTop && order?.showMedal !== false; // 前三名是否显示勋章
+        const showRate = rate?.show !== false; // 是否显示环比
+        const showValue = value?.show !== false; // 是否显示值
+        const showName = name?.show !== false; // 是否显示名称
+        const showProgress = progress?.show !== false; // 是否显示进度条
+        // 进度条最大值-优先使用图表设置的最大值，图表未配置最大值时，使用d1值为最大值
+        const val = Math.min(100, (item.value / (value.maxData || Number(item.maxValue || 100))) * 100); // 进度条数值
+        // 列表卡片样式
+        const listItemStyle: React.CSSProperties = {
+            cursor: 'pointer',
+            padding: '10px 12px',
+            marginBottom: 8,
+            borderRadius: 8,
+            background: `${palette[5]}50`,
+            border: `1px solid ${palette[1]}`,
+            borderLeft: `3px solid ${isTop ? medalColor[i] : palette[3]}`,
+            backdropFilter: 'blur(10px)',
+            transition: 'all .15s',
+        };
+
+        const renderList = () => (
+            <div style={listItemStyle}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: showOrder ? 10 : 0 }}>
+                    {showOrder && (
+                        <div
+                            style={{
+                                borderRadius: 7, minWidth: "30px", minHeight: "30px", aspectRatio: "1/1",
+                                display: 'flex', alignItems: 'center', justifyContent: 'center', padding: "4px",
+                                fontWeight: 700, fontSize: isTop ? progress.size * 1.5 : progress.size,
+                                background: isTop ? `${medalColor[i]}22` : 'rgba(6,225,253,.12)',
+                                color: isTop ? medalColor[i] : palette[2],
+                            }}
+                        >
+                            {showMedal ? medalText[i] : i + 1}
+                        </div>
+                    )}
+                    <div style={{ flex: 1, minWidth: 0 }}>
+                        {(showName || showRate) && (
+                            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                                {showName ? (
+                                    <span style={{ fontSize: name?.fontSize || 15, fontWeight: 700, color: palette[2] }}>{item.name}</span>
+                                ) : <span />}
+                                {showRate && (
+                                    <span style={{ fontSize: rate?.fontSize || 11, color: palette[2] }}>
+                                        {translate("${环比}")} {renderChg(item.rate, rate?.fontSize || 12)}
+                                    </span>
+                                )}
+                            </div>
+                        )}
+                        {(showProgress || showValue) && (
+                            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 6 }}>
+                                {showProgress && (
+                                    <Progress
+                                        percent={val}
+                                        showInfo={false}
+                                        strokeColor={{ from: palette[5], to: palette[1] }}
+                                        railColor="rgba(255,255,255,.08)"
+                                        size={progress?.size ? { height: progress.size } : undefined}
+                                        style={{ flex: 1, margin: 0 }}
+                                    />
+                                )}
+                                {showValue && (
+                                    <span
+                                        style={{
+                                            fontSize: value?.fontSize || 16, fontWeight: 700,
+                                            color: palette[3],
+                                            maxWidth: "20%", textAlign: 'right',
+                                            textShadow: `0 0 8px ${palette[3]}32`,
+                                            overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
+                                        }}
+                                    >
+                                        {item.value}
+                                    </span>
+                                )}
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </div>
+        );
+
+        // tooltip 卡片：风格与列表一致，布局为标题 + 明细行
+        const renderTooltip = () => (
+            <div
+                style={{
+                    minWidth: 180,
+                    padding: '10px 12px',
+                    borderRadius: 8,
+                    background: `${palette[9]}cc`,
+                    backdropFilter: 'blur(10px)',
+                }}
+            >
+                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
+                    {showOrder && (
+                        <span
+                            style={{
+                                width: 20, height: 20, borderRadius: 5, flexShrink: 0,
+                                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+                                fontSize: 12, fontWeight: 700,
+                                background: isTop ? `${medalColor[i]}22` : 'rgba(6,225,253,.12)',
+                                color: isTop ? medalColor[i] : palette[2],
+                            }}
+                        >
+                            {showMedal ? medalText[i] : i + 1}
+                        </span>
+                    )}
+                    {showName && (
+                        <span
+                            style={{
+                                flex: 1, minWidth: 0, fontWeight: 700,
+                                fontSize: (name?.fontSize || 15) - 1, color: palette[0],
+                                overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
+                            }}
+                        >
+                            {item.name}
+                        </span>
+                    )}
+                    {showRate && (
+                        <span
+                            style={{
+                                fontWeight: 700, fontSize: (value?.fontSize || 16) - 2,
+                                color: palette[3], textShadow: `0 0 8px ${palette[3]}32`,
+                            }}
+                        >
+                            {renderChg(item.rate, 12)}
+                        </span>
+                    )}
+                </div>
+                {/* v4、v5... 其他数据 */}
+                {!!item.extras?.length && (
+                    <div
+                        style={{
+                            display: 'grid',
+                            gridTemplateColumns: 'auto 1fr',
+                            alignItems: 'center',
+                            columnGap: 12, rowGap: 4,
+                        }}
+                    >
+                        {item.extras.map((extra: { key: string, label: string, value: any, color?: string }) => (
+                            <React.Fragment key={extra.key}>
+                                <span style={{ fontSize: 11, color: palette[1], whiteSpace: 'nowrap' }}>{extra.label}</span>
+                                <span
+                                    style={{
+                                        fontSize: 12, textAlign: 'right',
+                                        color: extra.color || palette[2],
+                                        overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
+                                    }}
+                                >
+                                    {extra.value}
+                                </span>
+                            </React.Fragment>
+                        ))}
+                    </div>
+                )}
+            </div>
+        );
+
+        return showTooltip ? (
+            <Tooltip
+                title={renderTooltip()}
+                placement="right"
+                arrow={false}
+                styles={{
+                    root: { maxWidth: 'none' },
+                    container: { padding: 0, background: 'transparent', boxShadow: 'none' },
+                }}
+            >
+                {renderList()}
+            </Tooltip>
+        ) : renderList();
+    }
+
+    // 编辑态且非静态数据源时展示默认数据
+    const listData = useMemo(() => {
+        const isDemo = isDesignMode && dataConfig?.sourceType !== 'staticData';
+        return isDemo ? demoData : (data || []);
+    }, [isDesignMode, dataConfig, data]);
+
+    return (
+        <Spin spinning={!isDesignMode && loading}>
+            {listData.length ? (
+                <Listy
+                    styles={{
+                        root: { background: 'transparent', width: '100%', height: '100%' },
+                        item: { padding: 0, border: 'none', background: 'transparent' },
+                    }}
+                    height={size?.height}
+                    rowKey={(item) => `${item.name}-${item.value}`}
+                    items={listData}
+                    itemRender={renderItem}
+                />
+            ) : (
+                <div style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                    <Empty
+                        image={Empty.PRESENTED_IMAGE_SIMPLE}
+                        description={translate("${暂无数据}")}
+                        styles={{ description: { color: config?.primaryColor } }}
+                    />
+                </div>
+            )}
+        </Spin>
+    );
+});
+
+export default Index;

package/src/aldehyde/lowcode-components/text-scroller/index.less

@@ -1,29 +1,29 @@
-.text-scroller-container {
-  --speed: 10s;
-  --container-width: 320px;
-
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  white-space: nowrap;
-  position: relative;
-
-  .text-scroller {
-    height: inherit;
-    position: absolute;
-    color: white;
-    animation: scrollText var(--speed) linear infinite;
-    display: flex;
-    align-items: center;
-  }
-
-  @keyframes scrollText {
-    0% {
-      transform: translateX(var(--container-width));
-    }
-
-    100% {
-      transform: translateX(-100%);
-    }
-  }
+.text-scroller-container {
+  --speed: 10s;
+  --container-width: 320px;
+
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  position: relative;
+
+  .text-scroller {
+    height: inherit;
+    position: absolute;
+    color: white;
+    animation: scrollText var(--speed) linear infinite;
+    display: flex;
+    align-items: center;
+  }
+
+  @keyframes scrollText {
+    0% {
+      transform: translateX(var(--container-width));
+    }
+
+    100% {
+      transform: translateX(-100%);
+    }
+  }
 }