aldehyde 0.2.284 → 0.2.285

package/src/aldehyde/lowcode-components/pie-chart/index.tsx

@@ -1,8 +1,16 @@
 import * as echarts from 'echarts';
 import React, { useEffect, useRef, useState, ForwardedRef, forwardRef, useImperativeHandle } from 'react';
 import _ from 'lodash';
+import HydrocarbonService from "../../tmpl/hcservice-v3";
+import { DataConfigProps } from "../data";
 
 const defOption = {
+    title: {
+        text: '暂无数据',
+        left: 'center',
+        top: 'middle',
+        show: false, // 无数据时显示
+    },
     color: ["#5470c6", "#91cc75", "#fac858", "#ee6666", "#73c0de"],
     padAngle: 0,
     tooltip: {
@@ -14,15 +22,18 @@ const defOption = {
     },
     series: [
         {
-            name: 'Access From',
+            name: '数值',
             type: 'pie',
             radius: ["0%", "50%"],
+            padAngle: 0,
+            label: {},
+            labelLine: {},
             data: [
-                { value: 1048, name: 'Search Engine' },
-                { value: 735, name: 'Direct' },
-                { value: 580, name: 'Email' },
-                { value: 484, name: 'Union Ads' },
-                { value: 300, name: 'Video Ads' }
+                { value: 1048, name: 'Value1' },
+                { value: 735, name: 'Value2' },
+                { value: 580, name: 'Value3' },
+                { value: 484, name: 'Value4' },
+                { value: 300, name: 'Value5' }
             ]
         }
     ],
@@ -37,9 +48,28 @@ const legends = {
     rightTop: { right: 5 },
     leftBottom: { left: 5, bottom: 0 },
     rightBottom: { right: 5, bottom: 0 },
-}
+};
+
+// 处理数据格式
+const handleData = (data: { config: { [key: string]: string }, value: { [key: string]: any }[] }[]) => {
+    if (!data?.length) {
+        return [];
+    }
+    const temData = data.map((r) => {
+        const { config, value } = r;
+        const vNames = Object.keys(config).filter((r) => r.startsWith("v")).sort((a, b) => parseInt(a.substring(1)) - parseInt(b.substring(1)));
+        return {
+            name: config.d1,
+            data: vNames.map((r) => ({
+                name: config[r],
+                value: value[0]?.[r],
+            }))
+        };
+    });
+    return temData || [];
+};
 
-export interface ChartComponentStyle {
+export interface ComponentStyle {
     tooltip?: { show: boolean };
     color?: string[];
     grid?: { top: number, let: number, right: number, bottom: number };
@@ -49,29 +79,45 @@ export interface ChartComponentStyle {
     innerRadius?: number;
     label?: { [key: string]: any };
     labelLine?: { [key: string]: any };
+    roseType?: string; // 玫瑰图配置
 }
 
-export interface ChartComponentProps {
-    style?: ChartComponentStyle;
-    base: { width: number, height: number }
+export interface ComponentProps {
+    style?: ComponentStyle;
+    base: { width: number, height: number },
+    data?: DataConfigProps;
+    isDesignMode?: boolean; // 是否编辑模式
 }
 
-export interface BaseTextComponentRef {
-    updateConfig: (newConfig: ChartComponentProps) => void;
+export interface ComponentRef {
+    updateConfig: (newConfig: ComponentProps) => void;
+    destroy: () => void;
 }
 
-const Index = forwardRef((props: ChartComponentProps, ref: ForwardedRef<BaseTextComponentRef>) => {
-    const [config, setConfig] = useState<ChartComponentStyle>(props.style || {});
-    const [size, setSize] = useState<{ width: number, height: number }>()
+const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
+    const { style, data: propsData, isDesignMode } = props;
+    const [config, setConfig] = useState<ComponentStyle>(style || {});
+    const [size, setSize] = useState<{ width: number, height: number }>();
+    const [dataConfig, setDataConfig] = useState<DataConfigProps>({ ...propsData }); // 数据源配置
+    const [data, setData] = useState<{ name: string, data: any }[]>([]);
     const chartRef = useRef<HTMLDivElement>(null);
     const chart = useRef<any>(null);
+    const pollingIntervalRef = useRef<number | NodeJS.Timeout>(null);
+
+    const handleDestroy = () => {
+        pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
+        window.removeEventListener('resize', handleResize);
+        chart.current.dispose();
+    };
 
     useImperativeHandle(ref, () => ({
         updateConfig: (newConfig) => {
-            const { base, style } = newConfig;
-            setConfig({ ...(style || {}) });
+            const { base, style: newStyle, data: newDataConfig } = newConfig;
+            setConfig({ ...(newStyle || {}) });
             setSize({ width: base.width, height: base.height });
+            setDataConfig(newDataConfig);
         },
+        destroy: handleDestroy,
     }));
 
     // 窗口大小变化时重新调整图表大小
@@ -83,23 +129,63 @@ const Index = forwardRef((props: ChartComponentProps, ref: ForwardedRef<BaseText
         chart.current = echarts.init(chartRef.current);
         window.addEventListener('resize', handleResize);
         return () => {
-            window.removeEventListener('resize', handleResize);
-            chart.current.dispose();
+            handleDestroy();
         }
     }, []);
 
+    // 请求数据
+    const getData = async () => {
+        const { entities: { config, value } } = await HydrocarbonService.requestMstrucLtmplQueryTop(null, dataConfig?.sourceId, null) || {};
+        const temData = handleData(value);
+        setData(temData);
+        return config;
+    };
+
+    // 初始化请求数据
+    const getInitData = async () => {
+        pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
+        const config = await getData();
+        if (config?.requestType === "polling") {
+            pollingIntervalRef.current = setInterval(() => { getData() }, config?.pollingInterval || 60000);
+        }
+    };
+
+    // 静态数据处理
+    useEffect(() => {
+        if (dataConfig?.sourceType === 'staticData') {
+            setData(handleData(dataConfig.staticData));
+        }
+    }, [dataConfig?.sourceType, dataConfig?.staticData]);
+
+    /**
+     * 数据源数据请求
+     * 1、编辑态不请求数据
+     */
+    useEffect(() => {
+        if (!isDesignMode && dataConfig?.sourceType === 'sourceId' && dataConfig?.sourceId) {
+            getInitData();
+        } else if (dataConfig?.sourceType === 'sourceId') {
+            setData([]);
+        }
+    }, [dataConfig?.sourceType, dataConfig?.sourceId]);
+
     const renderChart = () => {
-        const { legend, tooltip, radius, innerRadius, color, label, labelLine, padAngle } = config;
+        const { legend, tooltip, radius, innerRadius, color, label, labelLine, padAngle, roseType } = config;
         const option = _.cloneDeep(defOption);
+        // 编辑态无数据显示默认数据
+        const temData = isDesignMode && !data?.length ? option.series : data;
         option.legend = { ...legend, ...legends[legend?.position] };
         option.tooltip = { trigger: "item", ...tooltip };
         option.color = color;
-        option.series = option.series.map((r) => ({
-            ...r,
+        option.title.show = !temData?.length;
+        option.series = temData.map(r => ({
+            type: "pie",
             radius: [`${innerRadius}%`, `${radius}%`],
             padAngle,
             label,
-            labelLine
+            labelLine,
+            roseType,
+            ...r
         }));
         chart.current.setOption(option, true);
     }
@@ -107,7 +193,7 @@ const Index = forwardRef((props: ChartComponentProps, ref: ForwardedRef<BaseText
         if (config) {
             renderChart();
         }
-    }, [config]);
+    }, [config, data]);
 
     useEffect(() => {
         if (size) {

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

@@ -0,0 +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%);
+    }
+  }
+}

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

@@ -0,0 +1,122 @@
+import React, { forwardRef, ForwardedRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import './index.less';
+import _ from "lodash";
+import HydrocarbonService from "../../tmpl/hcservice-v3";
+import { DataConfigProps } from "../data";
+
+export interface ComponentStyle {
+    speed?: number;
+    fontSize?: number;
+    color?: string;
+    fontFamily?: string;
+    fontWeight?: number;
+    defaultValue?: string;
+}
+
+export interface ComponentProps {
+    style?: ComponentStyle;
+    data?: DataConfigProps;
+    isDesignMode?: boolean; // 是否编辑模式
+}
+
+export interface ComponentRef {
+    updateConfig: (newConfig: ComponentProps) => void;
+    destroy: () => void;
+}
+
+const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
+    const { style, data: propsData, isDesignMode } = props;
+    const [config, setConfig] = useState<ComponentStyle>(style || {});
+    const [speed, setSpeed] = useState<number>(style?.speed || 5);
+    const [dataConfig, setDataConfig] = useState<DataConfigProps>({ ...propsData }); // 数据源配置
+    const [data, setData] = useState<string>('');
+    const textScrollerRef = useRef<HTMLDivElement>(null);
+    const textContainerRef = useRef<HTMLDivElement>(null);
+    const resizeObserverRef = useRef<ResizeObserver | null>(null);
+    const pollingIntervalRef = useRef<number | NodeJS.Timeout>(null);
+
+    const handleDestroy = () => {
+        resizeObserverRef.current && resizeObserverRef.current.disconnect();
+        pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
+    };
+
+    useImperativeHandle(ref, () => ({
+        updateConfig: (newConfig) => {
+            const { style: newStyle, data: newDataConfig } = newConfig;
+            setConfig({ ...(newStyle || {}) });
+            setSpeed(newStyle?.speed || 5);
+            setDataConfig({ ...newDataConfig });
+        },
+        destroy: handleDestroy,
+    }));
+
+    useEffect(() => {
+        if (textContainerRef.current) {
+            resizeObserverRef.current = new ResizeObserver(_.debounce((entries) => {
+                for (const entry of entries) {
+                    const { width } = entry.contentRect;
+                    textContainerRef.current.style.setProperty('--container-width', `${width}px`);
+                }
+            }, 100));
+            // 开始观察
+            resizeObserverRef.current.observe(textContainerRef.current);
+        }
+        return () => {
+            handleDestroy();
+        }
+    }, []);
+
+    useEffect(() => {
+        if (textContainerRef.current) {
+            textContainerRef.current.style.setProperty('--speed', `${speed || 5}s`);
+        }
+    }, [speed]);
+
+    // 请求数据
+    const getData = async () => {
+        const { entities: { config, value } } = await HydrocarbonService.requestMstrucLtmplQueryTop(null, dataConfig?.sourceId, null) || {};
+        const temData = value?.[0]?.value?.[0]?.v1;
+        setData(temData);
+        return config;
+    };
+
+    // 初始化请求数据
+    const getInitData = async () => {
+        pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
+        const config = await getData();
+        if (config?.requestType === "polling") {
+            pollingIntervalRef.current = setInterval(() => { getData() }, config?.pollingInterval || 60000);
+        }
+    };
+
+    // 静态数据处理
+    useEffect(() => {
+        if (dataConfig?.sourceType === 'staticData') {
+            const { value } = dataConfig.staticData || {};
+            setData(value);
+        }
+    }, [dataConfig?.sourceType, dataConfig?.staticData]);
+
+    /**
+     * 数据源数据请求
+     * 1、编辑态不请求数据
+     */
+    useEffect(() => {
+        if (!isDesignMode && dataConfig?.sourceType === 'sourceId' && dataConfig?.sourceId) {
+            getInitData();
+        } else if (dataConfig?.sourceType === 'sourceId') {
+            setData("文本跑马灯");
+        }
+    }, [dataConfig?.sourceType, dataConfig?.sourceId]);
+
+
+    return (
+        <div className="text-scroller-container" ref={textContainerRef}>
+            <div className="text-scroller" style={{ ...config }} ref={textScrollerRef}>
+                {data}
+            </div>
+        </div>
+    );
+});
+
+export default Index;

package/src/aldehyde/tmpl/control-type-supportor.tsx

@@ -29,6 +29,7 @@ SupportInputTypes.add('timerange-unorder');
 
 SupportInputTypes.add('text');
 SupportInputTypes.add('textarea');
+SupportInputTypes.add('text-view');
 SupportInputTypes.add('html');
 SupportInputTypes.add('steps');
 SupportInputTypes.add('progress');