aldehyde 0.2.283 → 0.2.285

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

@@ -1,14 +1,48 @@
 import * as echarts from 'echarts';
 import React, { useEffect, useRef, useState, ForwardedRef, forwardRef, useImperativeHandle } from 'react';
-import lodash from 'lodash';
+import _ from 'lodash';
+import HydrocarbonService from "../../tmpl/hcservice-v3";
+import { DataConfigProps } from "../data";
+
+const defColumnValue = [
+    {
+        data: [["1990", 52], ["1991", 45], ["1992", 35], ["1993", 41], ["1994", 23], ["1995", 25], ["1996", 15]],
+        type: 'bar',
+    }
+];
+
+const defStackValue = [
+    {
+        data: [["1990", 3], ["1991", 4], ["1992", 3.5], ["1993", 5], ["1994", 4.9], ["1995", 6], ["1996", 7]],
+        type: 'bar',
+        name: "Val1",
+        stack: "stack"
+    },
+    {
+        data: [["1990", 3], ["1991", 4], ["1992", 3.5], ["1993", 5], ["1994", 4.9], ["1995", 6], ["1996", 7]],
+        type: 'bar',
+        name: "Val2",
+        stack: "stack"
+    }
+];
+
+const defDatas = {
+    ColumnChart: defColumnValue,
+    StackColumnChart: defStackValue,
+};
 
 const defOption = {
+    title: {
+        text: '暂无数据',
+        left: 'center',
+        top: 'middle',
+        show: false, // 无数据时显示
+    },
     tooltip: { trigger: "axis" },
     grid: { top: 30, let: 30, right: 20, bottom: 30 },
     xAxis: {
         type: 'category',
         boundaryGap: true,
-        data: ['1990', '1991', '1992', '1993', '1994', '1995', '1996'],
         axisTick: { show: true },
     },
     yAxis: {
@@ -16,12 +50,7 @@ const defOption = {
     },
     legend: { show: false },
     barMaxWidth: 30,
-    series: [
-        {
-            data: [525, 459, 357, 414, 234, 250, 156],
-            type: 'bar',
-        }
-    ]
+    series: defColumnValue
 };
 
 const legends = {
@@ -35,7 +64,26 @@ const legends = {
     rightBottom: { right: 5, bottom: 0 },
 };
 
-export interface ChartComponentStyle {
+// 处理数据格式
+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],
+                data: value.map((v) => [v["d1"], v[r]]),
+            }))
+        };
+    });
+    return temData[0]?.data || [];
+};
+
+export interface ComponentStyle {
     tooltip?: { show: boolean };
     color?: string[];
     grid?: { top: number, let: number, right: number, bottom: number };
@@ -45,27 +93,42 @@ export interface ChartComponentStyle {
     barMaxWidth?: number;
 }
 
-export interface ChartComponentProps {
-    style?: ChartComponentStyle;
-    base: { width: number, height: number }
+export interface ComponentProps {
+    style?: ComponentStyle;
+    base: { width: number, height: number, type: string },
+    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, base: { type: componentType }, 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,
     }));
 
     // 窗口大小变化时重新调整图表大小
@@ -77,23 +140,64 @@ 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 { grid, barMaxWidth, legend, tooltip, color, xAxis, yAxis, } = config
-        const option = lodash.cloneDeep(defOption);
+        const option = _.cloneDeep(defOption);
+        // 编辑态无数据显示默认数据
+        const temData = isDesignMode && !data?.length ? defDatas[componentType] || [] : data;
         option.barMaxWidth = barMaxWidth;
         option.grid = grid;
         option.legend = { ...legend, ...legends[legend?.position] };
         option.tooltip = { trigger: "axis", ...tooltip };
         option.xAxis = { ...option.xAxis, ...xAxis, axisTick: { show: xAxis?.axisLine?.show } };
         option.yAxis = { ...option.yAxis, ...yAxis };
-        option.series = option.series.map((r, index) => ({
+        option.title.show = !temData?.length;
+        option.series = temData.map((r, index) => ({
+            type: "bar",
             ...r,
             itemStyle: { color: color[index] },
+            stack: componentType === 'StackColumnChart' ? 'stack' : undefined,
         }));
         chart.current.setOption(option, true);
     }
@@ -101,7 +205,7 @@ const Index = forwardRef((props: ChartComponentProps, ref: ForwardedRef<BaseText
         if (config) {
             renderChart();
         }
-    }, [config]);
+    }, [config, data]);
 
     useEffect(() => {
         if (size) {

package/src/aldehyde/lowcode-components/data-number/index.tsx

@@ -1,7 +1,24 @@
 
-import React, { ForwardedRef, forwardRef, useImperativeHandle, useState } from 'react';
+import React, { ForwardedRef, forwardRef, useEffect, useImperativeHandle, useMemo, useState, useRef } from 'react';
+import HydrocarbonService from "../../tmpl/hcservice-v3";
+import { DataConfigProps } from "../data";
 import './index.less';
 
+const rules = {
+    eq: '==',
+    ne: '!=',
+    gt: '>',
+    gte: '>=',
+    lt: '<',
+    lte: '<=',
+};
+
+interface EnumeProps {
+    rule: string,
+    num: number,
+    value: string
+}
+
 export interface ComponentStyle {
     color?: string;
     fontSize?: number;
@@ -14,28 +31,93 @@ export interface ComponentStyle {
     letterSpacing?: number;
     lineHeight?: number;
     defaultValue?: number;
+    enume?: EnumeProps[];
 }
 
 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 [config, setConfig] = useState<ComponentStyle>(props.style || {});
-    const [data, setData] = useState<number>(props.style?.defaultValue || 0);
+    const { style, data: propsData, isDesignMode } = props;
+    const [config, setConfig] = useState<ComponentStyle>(style || {});
+    const [enume, setEnume] = useState<EnumeProps[]>(style?.enume || []);
+    const [dataConfig, setDataConfig] = useState<DataConfigProps>({ ...propsData }); // 数据源配置
+    const [data, setData] = useState<number>(style?.defaultValue);
+    const pollingIntervalRef = useRef<number | NodeJS.Timeout>(null);
+
+    const handleDestroy = () => {
+        pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
+    };
+
 
-    useImperativeHandle(ref, () => ({
-        updateConfig: (newConfig) => {
-            const { style: { defaultValue, ...style } } = newConfig;
+    useImperativeHandle(ref, () => ({ // 暴露到外部func
+        updateConfig: (newConfig) => { // 组件更新配置
+            const { style: { defaultValue, enume: newEnume, ...style }, data: newDataConfig } = newConfig;
             setConfig({ ...(style || {}) });
             setData(defaultValue || 0);
+            setEnume([...(newEnume || [])]);
+            setDataConfig(newDataConfig);
         },
+        destroy: handleDestroy
     }));
 
+    // 请求数据
+    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(() => {
+        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) {
+            getInitData();
+        }
+    }, [dataConfig?.sourceType, dataConfig?.sourceId]);
+
+    const value = useMemo(() => {
+        if (enume?.length > 0) { // 枚举
+            const temEnume = enume.filter(item => item.rule && (item.num || item.num === 0));
+            return temEnume.find((item) => eval(`${data} ${rules[item.rule]} ${item.num}`))?.value || data;
+        } else {
+            return data;
+        }
+    }, [data, enume]);
 
     return (
         <div
@@ -46,7 +128,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
                 WebkitTextStrokeColor: config?.strokeColor,
             }}
         >
-            {data}
+            {value}
         </div>
     );
 });

package/src/aldehyde/lowcode-components/data.d.ts

@@ -0,0 +1,6 @@
+export interface DataConfigProps {
+    sourceType: string;
+    serverKey?: string;
+    sourceId?: string;
+    staticData?: any;
+}

package/src/aldehyde/lowcode-components/decoration/decoration1/index.less

@@ -0,0 +1,8 @@
+.decoration-1 {
+    width: 100%;
+    height: 100%;
+
+    .decoration-1-container {
+        transform-origin: left top;
+    }
+}

package/src/aldehyde/lowcode-components/decoration/decoration1/index.tsx

@@ -0,0 +1,153 @@
+import React, { ForwardedRef, forwardRef, useImperativeHandle, useState, useMemo } from "react";
+import "./index.less";
+
+
+const pointSideLength = 2.5;
+const halfPointSideLength = pointSideLength / 2;
+const svgWH = [200, 50];
+const rowNum = 4;
+const rowPoints = 20;
+
+const getPoints = () => {
+    const [w, h] = svgWH;
+    const horizontalGap = w / (rowPoints + 1);
+    const verticalGap = h / (rowNum + 1);
+    const points = new Array(rowNum)
+        .fill(0)
+        .map((_, i) =>
+            new Array(rowPoints)
+                .fill(0)
+                .map((_, j) => [horizontalGap * (j + 1), verticalGap * (i + 1)])
+        );
+    return points.reduce((all, item) => [...all, ...item], []);
+}
+
+interface ComponentStyle {
+    mainColor?: string;
+    subColor?: string;
+}
+
+export interface ComponentProps {
+    style?: ComponentStyle;
+    base?: { width?: number, height?: number }
+}
+
+export interface ComponentRef {
+    updateConfig: (config: ComponentProps) => void;
+}
+const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
+    const [style, setStyle] = useState<ComponentStyle>({ ...props.style });
+    const [width, setWidth] = useState<number>(300);
+    const [height, setHeight] = useState<number>(100);
+    const { mainColor = "#83BFF6", subColor = "#00CED1" } = style || {};
+
+    useImperativeHandle(ref, () => ({
+        updateConfig: (newConfig) => {
+            setStyle({ ...newConfig.style });
+            setWidth(newConfig.base.width);
+            setHeight(newConfig.base.height);
+        },
+    }));
+
+    const calcSVGData = () => {
+        const points = getPoints();
+        return {
+            points: points.reduce((prev, point, i) => Math.random() > 0.6
+                ? [
+                    ...prev,
+                    <rect
+                        key={i}
+                        fill={mainColor}
+                        x={point[0] - halfPointSideLength}
+                        y={point[1] - halfPointSideLength}
+                        width={pointSideLength}
+                        height={pointSideLength}
+                    >
+                        {Math.random() > 0.6 && (
+                            <animate
+                                attributeName='fill'
+                                values={`${mainColor};transparent`}
+                                dur='1s'
+                                begin={Math.random() * 2}
+                                repeatCount='indefinite'
+                            />
+                        )}
+                    </rect>
+                ] as any
+                : prev, []),
+            rects: [points[rowPoints * 2 - 1], points[rowPoints * 2 - 3]],
+            svgScale: [width / svgWH[0], height / svgWH[1]]
+        };
+    }
+
+    const { svgScale, points, rects } = useMemo(calcSVGData, [width, height, mainColor]);
+
+    return <div className="decoration-1"  >
+        <svg
+            className="decoration-1-container"
+            width={`${svgWH[0]}px`}
+            height={`${svgWH[1]}px`}
+            style={{ transform: `scale(${svgScale[0]},${svgScale[1]})` }}
+        >
+            {points}
+            {!!rects[0] && (
+                <rect
+                    fill={subColor}
+                    x={rects[0][0] - pointSideLength}
+                    y={rects[0][1] - pointSideLength}
+                    width={pointSideLength * 2}
+                    height={pointSideLength * 2}
+                >
+                    <animate
+                        attributeName='width'
+                        values={`0;${pointSideLength * 2}`}
+                        dur='2s'
+                        repeatCount='indefinite'
+                    />
+                    <animate
+                        attributeName='height'
+                        values={`0;${pointSideLength * 2}`}
+                        dur='2s'
+                        repeatCount='indefinite'
+                    />
+                    <animate
+                        attributeName='x'
+                        values={`${rects[0][0]};${rects[0][0] - pointSideLength}`}
+                        dur='2s'
+                        repeatCount='indefinite'
+                    />
+                    <animate
+                        attributeName='y'
+                        values={`${rects[0][1]};${rects[0][1] - pointSideLength}`}
+                        dur='2s'
+                        repeatCount='indefinite'
+                    />
+                </rect>
+            )}
+            {!!rects[1] && (
+                <rect
+                    fill={subColor}
+                    x={rects[1][0] - 40}
+                    y={rects[1][1] - pointSideLength}
+                    width='40'
+                    height={pointSideLength * 2}
+                >
+                    <animate
+                        attributeName='width'
+                        values='0;40;0'
+                        dur='2s'
+                        repeatCount='indefinite'
+                    />
+                    <animate
+                        attributeName='x'
+                        values={`${rects[1][0]};${rects[1][0] - 40};${rects[1][0]}`}
+                        dur='2s'
+                        repeatCount='indefinite'
+                    />
+                </rect>
+            )}
+        </svg>
+    </div>;
+});
+
+export default Index;

package/src/aldehyde/lowcode-components/decoration/decoration10/index.less

@@ -0,0 +1,6 @@
+.decoration-10 {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+}

package/src/aldehyde/lowcode-components/decoration/decoration10/index.tsx

@@ -0,0 +1,89 @@
+import React, { ForwardedRef, forwardRef, useImperativeHandle, useState } from "react";
+import "./index.less";
+
+interface ComponentStyle {
+    mainColor?: string;
+    subColor?: string;
+}
+
+export interface ComponentProps {
+    style?: ComponentStyle;
+    base?: { width?: number, height?: number, id: string }
+}
+
+export interface ComponentRef {
+    updateConfig: (config: ComponentProps) => void;
+}
+const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
+    const [style, setStyle] = useState<ComponentStyle>({ ...props.style });
+    const [width, setWidth] = useState<number>(300)
+    const [height, setHeight] = useState<number>(100);
+    const { mainColor = "#83BFF6", subColor = "#00CED1" } = style || {};
+
+
+    useImperativeHandle(ref, () => ({
+        updateConfig: (newConfig) => {
+            setStyle({ ...newConfig.style });
+            setWidth(newConfig.base.width);
+            setHeight(newConfig.base.height);
+        },
+    }));
+
+    return <div className="decoration-9"  >
+        <svg width={width} height={height}>
+            <polygon
+                fill={subColor}
+                fillOpacity={0.1}
+                stroke={subColor}
+                points={`20 10, 25 4, 55 4 60 10`}
+            />
+
+            <polygon
+                fill={subColor}
+                fillOpacity={0.1}
+                stroke={subColor}
+                points={`20 ${height - 10}, 25 ${height - 4}, 55 ${height - 4} 60 ${height - 10}`}
+            />
+
+            <polygon
+                fill={subColor}
+                fillOpacity={0.1}
+                stroke={subColor}
+                points={`${width - 20} 10, ${width - 25} 4, ${width - 55} 4 ${width - 60} 10`}
+            />
+
+            <polygon
+                fill={subColor}
+                fillOpacity={0.1}
+                stroke={subColor}
+                points={`${width - 20} ${height - 10}, ${width - 25} ${height - 4}, ${width - 55} ${height - 4} ${width - 60} ${height - 10}`}
+            />
+
+            <polygon
+                fill={mainColor}
+                fillOpacity={0.2}
+                stroke={mainColor}
+                points={`
+            20 10, 5 ${height / 2} 20 ${height - 10}
+            ${width - 20} ${height - 10} ${width - 5} ${height / 2} ${width - 20} 10
+          `}
+            />
+
+            <polyline
+                fill='transparent'
+                stroke={mainColor}
+                strokeOpacity={0.7}
+                points={`25 18, 15 ${height / 2} 25 ${height - 18}`}
+            />
+
+            <polyline
+                fill='transparent'
+                stroke={mainColor}
+                strokeOpacity={0.7}
+                points={`${width - 25} 18, ${width - 15} ${height / 2} ${width - 25} ${height - 18}`}
+            />
+        </svg>
+    </div>;
+});
+
+export default Index;

package/src/aldehyde/lowcode-components/decoration/decoration11/index.less

@@ -0,0 +1,6 @@
+.decoration-11 {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+}