aldehyde 0.2.283 → 0.2.285

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

@@ -0,0 +1,70 @@
+import React, { ForwardedRef, forwardRef, useImperativeHandle, useState, useMemo } from "react";
+import "./index.less";
+
+interface ComponentStyle {
+    mainColor?: string;
+    subColor?: string;
+    reverse?: boolean;
+}
+
+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", reverse } = style || {};
+
+    useImperativeHandle(ref, () => ({
+        updateConfig: (newConfig) => {
+            setStyle({ ...newConfig.style });
+            setWidth(newConfig.base.width);
+            setHeight(newConfig.base.height);
+        },
+    }));
+
+    const xPos = pos => (!reverse ? pos : width - pos)
+
+    const [pointsOne, pointsTwo, pointsThree] = useMemo(
+        () => [
+            `${xPos(0)}, 0 ${xPos(30)}, ${height / 2}`,
+            `${xPos(20)}, 0 ${xPos(50)}, ${height / 2} ${xPos(width)}, ${height / 2}`,
+            `${xPos(0)}, ${height - 3}, ${xPos(200)}, ${height - 3}`
+        ],
+        [reverse, width, height]
+    )
+
+
+    return <div className="decoration-7"  >
+        <svg width={width} height={height}>
+            <polyline
+                stroke={mainColor}
+                strokeWidth='2'
+                fill='transparent'
+                points={pointsOne}
+            />
+
+            <polyline
+                stroke={mainColor}
+                strokeWidth='2'
+                fill='transparent'
+                points={pointsTwo}
+            />
+
+            <polyline
+                stroke={subColor}
+                fill='transparent'
+                strokeWidth='3'
+                points={pointsThree}
+            />
+        </svg>
+    </div>;
+});
+
+export default Index;

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

@@ -0,0 +1,15 @@
+.decoration-8 {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .decoration-8-svg {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        transform-origin: left top;
+    }
+}

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

@@ -0,0 +1,122 @@
+import React, { ForwardedRef, forwardRef, useImperativeHandle, useState, useMemo } 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 polygonId = `decoration-8-polygon-${props.base?.id}`
+    const [style, setStyle] = useState<ComponentStyle>({ ...props.style });
+    const [width, setWidth] = useState<number>(200)
+    const [height, setHeight] = useState<number>(200);
+    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-8"  >
+        <svg
+            className="decoration-8-svg"
+            width="100px"
+            height="100px"
+            style={{ transform: `scale(${width / 100},${height / 100})` }}
+        >
+            <defs>
+                <polygon
+                    id={polygonId}
+                    points='15, 46.5, 21, 47.5, 21, 52.5, 15, 53.5'
+                />
+            </defs>
+            <circle
+                cx='50'
+                cy='50'
+                r='45'
+                fill='transparent'
+                stroke={subColor}
+                strokeWidth='10'
+                strokeDasharray='80, 100, 30, 100'
+            >
+                <animateTransform
+                    attributeName='transform'
+                    type='rotate'
+                    values='0 50 50;360 50 50'
+                    dur="3s"
+                    repeatCount='indefinite'
+                />
+            </circle>
+            <circle
+                cx='50'
+                cy='50'
+                r='45'
+                fill='transparent'
+                stroke={mainColor}
+                strokeWidth='6'
+                strokeDasharray='50, 66, 100, 66'
+            >
+                <animateTransform
+                    attributeName='transform'
+                    type='rotate'
+                    values='0 50 50;-360 50 50'
+                    dur="3s"
+                    repeatCount='indefinite'
+                />
+            </circle>
+            <circle
+                cx='50'
+                cy='50'
+                r='38'
+                fill='transparent'
+                stroke={subColor}
+                strokeOpacity={0.3}
+                strokeWidth='1'
+                strokeDasharray='5, 1'
+            />
+            {new Array(20).fill(0).map((foo, i) => (
+                <use
+                    key={i}
+                    href={`#${polygonId}`}
+                    stroke={subColor}
+                    fill={
+                        Math.random() > 0.4 ? 'transparent' : mainColor
+                    }
+                >
+                    <animateTransform
+                        attributeName='transform'
+                        type='rotate'
+                        values='0 50 50;360 50 50'
+                        dur="3s"
+                        begin={`${i * 3 / 20}s`}
+                        repeatCount='indefinite'
+                    />
+                </use>
+            ))}
+            <circle
+                cx='50'
+                cy='50'
+                r='26'
+                fill='transparent'
+                stroke={subColor}
+                strokeOpacity={0.3}
+                strokeWidth='1'
+                strokeDasharray='5, 1'
+            />
+        </svg>
+    </div>;
+});
+
+export default Index;

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

@@ -0,0 +1,5 @@
+.decoration-9 {
+    width: 100%;
+    height: 100%;
+    display: flex;
+}

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

@@ -0,0 +1,196 @@
+import React, { ForwardedRef, forwardRef, useImperativeHandle, useState, useRef } 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 || {};
+    const {
+        animationId1,
+        animationId2,
+        animationId3,
+        animationId4,
+        animationId5,
+        animationId6,
+        animationId7
+    } = useRef({
+        animationId1: `d9ani1${props.base?.id}`,
+        animationId2: `d9ani2${props.base?.id}`,
+        animationId3: `d9ani3${props.base?.id}`,
+        animationId4: `d9ani4${props.base?.id}`,
+        animationId5: `d9ani5${props.base?.id}`,
+        animationId6: `d9ani6${props.base?.id}`,
+        animationId7: `d9ani7${props.base?.id}`
+    }).current
+
+    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}>
+            <polyline
+                stroke={subColor}
+                strokeWidth='2'
+                points={`0, ${height / 2} ${width}, ${height / 2}`}
+            />
+
+            <polyline
+                stroke={mainColor}
+                strokeWidth='2'
+                points={`5, ${height / 2} ${width * 0.2 - 3}, ${height / 2}`}
+                strokeDasharray={`0, ${width * 0.2}`}
+                fill='freeze'
+            >
+                <animate
+                    id={animationId2}
+                    attributeName='stroke-dasharray'
+                    values={`0, ${width * 0.2};${width * 0.2}, 0;`}
+                    dur='3s'
+                    begin={`${animationId1}.end`}
+                    fill='freeze'
+                />
+                <animate
+                    attributeName='stroke-dasharray'
+                    values={`${width * 0.2}, 0;0, ${width * 0.2}`}
+                    dur='0.01s'
+                    begin={`${animationId7}.end`}
+                    fill='freeze'
+                />
+            </polyline>
+
+            <polyline
+                stroke={mainColor}
+                strokeWidth='2'
+                points={`${width * 0.2 + 3}, ${height / 2} ${width * 0.8 -
+                    3}, ${height / 2}`}
+                strokeDasharray={`0, ${width * 0.6}`}
+            >
+                <animate
+                    id={animationId4}
+                    attributeName='stroke-dasharray'
+                    values={`0, ${width * 0.6};${width * 0.6}, 0`}
+                    dur='3s'
+                    begin={`${animationId3}.end + 1s`}
+                    fill='freeze'
+                />
+                <animate
+                    attributeName='stroke-dasharray'
+                    values={`${width * 0.6}, 0;0, ${width * 0.6}`}
+                    dur='0.01s'
+                    begin={`${animationId7}.end`}
+                    fill='freeze'
+                />
+            </polyline>
+
+            <polyline
+                stroke={mainColor}
+                strokeWidth='2'
+                points={`${width * 0.8 + 3}, ${height / 2} ${width - 5}, ${height /
+                    2}`}
+                strke-dasharray={`0, ${width * 0.2}`}
+            >
+                <animate
+                    id={animationId6}
+                    attributeName='stroke-dasharray'
+                    values={`0, ${width * 0.2};${width * 0.2}, 0`}
+                    dur='3s'
+                    begin={`${animationId5}.end + 1s`}
+                    fill='freeze'
+                />
+                <animate
+                    attributeName='stroke-dasharray'
+                    values={`${width * 0.2}, 0;0, ${width * 0.3}`}
+                    dur='0.01s'
+                    begin={`${animationId7}.end`}
+                    fill='freeze'
+                />
+            </polyline>
+
+            <circle cx='2' cy={height / 2} r='2' fill={subColor}>
+                <animate
+                    id={animationId1}
+                    attributeName='fill'
+                    values={`${subColor};${mainColor}`}
+                    begin={`0s;${animationId7}.end`}
+                    dur='0.3s'
+                    fill='freeze'
+                />
+            </circle>
+
+            <circle cx={width * 0.2} cy={height / 2} r='2' fill={subColor}>
+                <animate
+                    id={animationId3}
+                    attributeName='fill'
+                    values={`${subColor};${mainColor}`}
+                    begin={`${animationId2}.end`}
+                    dur='0.3s'
+                    fill='freeze'
+                />
+                <animate
+                    attributeName='fill'
+                    values={`${subColor};${subColor}`}
+                    dur='0.01s'
+                    begin={`${animationId7}.end`}
+                    fill='freeze'
+                />
+            </circle>
+
+            <circle cx={width * 0.8} cy={height / 2} r='2' fill={subColor}>
+                <animate
+                    id={animationId5}
+                    attributeName='fill'
+                    values={`${subColor};${mainColor}`}
+                    begin={`${animationId4}.end`}
+                    dur='0.3s'
+                    fill='freeze'
+                />
+                <animate
+                    attributeName='fill'
+                    values={`${subColor};${subColor}`}
+                    dur='0.01s'
+                    begin={`${animationId7}.end`}
+                    fill='freeze'
+                />
+            </circle>
+
+            <circle cx={width - 2} cy={height / 2} r='2' fill={subColor}>
+                <animate
+                    id={animationId7}
+                    attributeName='fill'
+                    values={`${subColor};${mainColor}`}
+                    begin={`${animationId6}.end`}
+                    dur='0.3s'
+                    fill='freeze'
+                />
+                <animate
+                    attributeName='fill'
+                    values={`${subColor};${subColor}`}
+                    dur='0.01s'
+                    begin={`${animationId7}.end`}
+                    fill='freeze'
+                />
+            </circle>
+        </svg>
+    </div>;
+});
+
+export default Index;

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) {