aldehyde 0.2.284 → 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/effectScatter-map/index.tsx

@@ -2,6 +2,11 @@ import * as echarts from 'echarts';
 import React, { useEffect, useRef, useState, ForwardedRef, forwardRef, useImperativeHandle } from 'react';
 import _ from 'lodash';
 import chinaJson from "../assets/china.json";
+import HydrocarbonService from "../../tmpl/hcservice-v3";
+import { DataConfigProps } from "../data";
+
+const defData = [{ name: '北京', value: [116.41, 40.19, 100] }];
+
 
 const defOption = {
     tooltip: {
@@ -34,7 +39,8 @@ const defOption = {
             map: 'china',
             geoIndex: 0,
             aspectScale: 0.75, //长宽比
-            data: []
+            data: [],
+            tooltip: { show: false }
         },
         {
             type: 'effectScatter',
@@ -51,38 +57,72 @@ const defOption = {
             },
             zlevel: 1,
             encode: { value: 2 },
-            data: [{ name: '北京', value: [116.46, 39.92, 100] }]
+            data: defData
         }
     ]
 };
 
-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],
+                value: value[0]?.[r],
+            }))
+        };
+    });
+    return temData[0]?.data || [];
+};
+
+export interface ComponentStyle {
     tooltip?: { show: boolean };
     geo?: { [key: string]: any };
     effectScatter?: { [key: string]: any };
 }
 
-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, value: number[] }[]>([]);
     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,
     }));
 
     // 窗口大小变化时重新调整图表大小
@@ -95,21 +135,55 @@ const Index = forwardRef((props: ChartComponentProps, ref: ForwardedRef<BaseText
         chart.current = echarts.init(chartRef.current, null, { renderer: 'svg' });
         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) || {};
+        setData(handleData(value));
+        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(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 { tooltip, geo, effectScatter } = config
         const option = _.cloneDeep(defOption);
+        // 编辑态无数据显示默认数据
+        const temData = isDesignMode && !data?.length ? defData : data;
         option.tooltip = { trigger: "item", ...tooltip };
         option.geo = { ...option.geo, ...geo, ...geo.normal };
         option.series = option.series.map((item: any) => {
             if (item.type === 'effectScatter') {
-                return {
-                    ...item, ...effectScatter
-                };
+                return { ...item, ...effectScatter, data: temData };
             }
             return item;
         });
@@ -119,7 +193,7 @@ const Index = forwardRef((props: ChartComponentProps, ref: ForwardedRef<BaseText
         if (config) {
             renderChart();
         }
-    }, [config]);
+    }, [config, data]);
 
     useEffect(() => {
         if (size) {