aldehyde 0.2.284 → 0.2.286

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');

package/src/aldehyde/tmpl/superagent.js

@@ -1,135 +1,142 @@
 import superagent from "superagent";
-import { message } from "antd";
+import {message} from "antd";
 import Units from "../units";
 import translate from "../locale/translate";
 
 export default class Superagent {
-  static super(options, type, load) {
-    const serverKey = options.serverKey;
-    let programCode=null;
-    if (options.header?.programCode) {
-      programCode = options.header.programCode;
-    } else {
-      programCode = Units.programCode(serverKey);
-    }
+    static super(options, type, load) {
+        const serverKey = options.serverKey;
+        let programCode = null;
+        if (options.header?.programCode) {
+            programCode = options.header.programCode;
+        } else {
+            programCode = Units.programCode(serverKey);
+        }
 
-    let hydrocarbonToken =null;
-     if(options.header && options.header.hydrocarbonToken){
-          hydrocarbonToken=options.header.hydrocarbonToken;
-     }else if(serverKey){
-       hydrocarbonToken = Units.serverHydrocarbonToken(serverKey)
-     }else if(Units.hydrocarbonToken(programCode)){
-       hydrocarbonToken=Units.hydrocarbonToken(programCode);
-     }else{
-       hydrocarbonToken = Units.getAnoHydrocarbonToken()
-     }
+        let hydrocarbonToken = null;
+        if (options.header && options.header.hydrocarbonToken) {
+            hydrocarbonToken = options.header.hydrocarbonToken;
+        } else if (serverKey) {
+            hydrocarbonToken = Units.serverHydrocarbonToken(serverKey)
+        } else if (Units.hydrocarbonToken(programCode)) {
+            hydrocarbonToken = Units.hydrocarbonToken(programCode);
+        } else {
+            hydrocarbonToken = Units.getAnoHydrocarbonToken()
+        }
 
 
-    let loading;
-    if (options.data && options.data.isShowLoading !== false) {
-      loading = document.getElementById("ajaxLoading");
-      loading.style.display = load ? load : "block";
-    }
-    let ty = "form";
-    if (type === "formdata") {
-      ty = null;
-    } else if (type === "json") {
-      ty = "application/json";
+        let loading;
+        if (options.data && options.data.isShowLoading !== false) {
+            loading = document.getElementById("ajaxLoading");
+            loading.style.display = load ? load : "block";
+        }
+        let ty = "form";
+        if (type === "formdata") {
+            ty = null;
+        } else if (type === "json") {
+            ty = "application/json";
+        }
+        let method = options.method ? options.method : "POST";
+
+        return new Promise((resolve, reject) => {
+            let server = options.hydrocarbonServer
+                ? options.hydrocarbonServer
+                : Units.api(serverKey);
+
+            superagent(method, Units.joinPath(server, options.url))
+                .type(ty)
+                .set("hydrocarbon-token", hydrocarbonToken)
+                .set("hydrocarbon-program-token", programCode)
+                .query(options.query || "")
+                .send(options.data)
+                .end((req, res) => {
+                    if (!res) {
+                        message.error(translate("${服务器连接失败}"));
+                        resolve(null);
+                    } else {
+                        if (options.data && options.data.isShowLoading !== false) {
+                            loading = document.getElementById("ajaxLoading");
+                            loading.style.display = "none";
+                        }
+                        if (res.status === 200) {
+                            //Units.setHydrocarbonToken("hydrocarbonToken", hydrocarbonToken)
+                            let result = res.body;
+                            if (result) {
+                                if (result.status === "error") {
+                                    message.error(translate("${错误消息}: ") + translate("${" + result.message + "}"), 5);
+                                }
+                                // else if(result.message){
+                                //     message.warn(result.message,4)
+                                // }
+                            }
+                            resolve(result);
+                        } else if (res.status === 201) {
+                            //Units.setLocalStorge("hydrocarbonToken", hydrocarbonToken)
+                            resolve(res);
+                        } else if (res.status === 403) {
+                            Units.toLogin();
+                        } else if (res.status === 405 || res.status === 406) {
+                            message.error(translate("${权限不足}"), 5);
+                            resolve(res);
+                        } else if (res.status === 404 || res.status === 504) {
+                            //因为hydrogen v2 首次跳转时会报此错误，影响用户感受
+                            console.log(translate("${没找到服务}(") + options.url + ")", 5);
+                            //message.error("没找到服务(" + options.url + ")")
+                            resolve(res);
+                        } else if (res.status === 500) {
+                            if (res.body && res.body.message) {
+                                message.error(
+                                    translate("${后台处理错误}(") + translate("${" + res.body.message + "}") + ")",
+                                    5)
+                            } else if (res.text) {
+                                message.error(res.text);
+                            }
+                            console.log(res.text);
+                            resolve(undefined);
+                        } else {
+                            message.error(
+                                translate("${请求服务失败}(") + options.url + ")",
+                                5
+                            );
+                            reject(res.body);
+                        }
+                    }
+                });
+        });
     }
-    let method = options.method ? options.method : "POST";
 
-    return new Promise((resolve, reject) => {
-      let server = options.hydrocarbonServer
-        ? options.hydrocarbonServer
-        : Units.api(serverKey);
 
-      superagent(method, Units.joinPath(server, options.url))
-        .type(ty)
-        .set("hydrocarbon-token", hydrocarbonToken)
-        .set("hydrocarbon-program-token", programCode)
-        .query(options.query || "")
-        .send(options.data)
-        .end((req, res) => {
-          if (!res) {
-            message.error(translate("${服务器连接失败}"));
-            resolve(null);
-          } else {
-            if (options.data && options.data.isShowLoading !== false) {
-              loading = document.getElementById("ajaxLoading");
-              loading.style.display = "none";
-            }
-            if (res.status === 200) {
-              //Units.setHydrocarbonToken("hydrocarbonToken", hydrocarbonToken)
-              let result = res.body;
-              if (result) {
-                if (result.status === "error") {
-                  message.error(translate("${错误消息}: ") + translate("${" + result.message + "}"), 5);
+    static getProramConfig() {
+        return new Promise((resolve, reject) => {
+            superagent.get("programConfig.json").end((req, res) => {
+                if (!res) {
+                    reject();
+                } else {
+                    if (res.status === 200) {
+                        resolve(res.body);
+                    } else {
+                        reject(res.body);
+                    }
                 }
-                // else if(result.message){
-                //     message.warn(result.message,4)
-                // }
-              }
-              resolve(result);
-            } else if (res.status === 201) {
-              //Units.setLocalStorge("hydrocarbonToken", hydrocarbonToken)
-              resolve(res);
-            } else if (res.status === 403) {
-              Units.toLogin();
-            } else if (res.status === 405 || res.status === 406) {
-              message.error(translate("${权限不足}"),5);
-              resolve(res);
-            } else if (res.status === 404 || res.status === 504) {
-              //因为hydrogen v2 首次跳转时会报此错误，影响用户感受
-              console.log(translate("${没找到服务}(") + options.url + ")", 5);
-              //message.error("没找到服务(" + options.url + ")")
-              resolve(res);
-            } else if (res.status === 500) {
-              if (res.body && res.body.message) {
-                message.error(
-                  translate("${后台处理错误}(") + translate("${" + res.body.message + "}")  + ")",
-                  5)
-              }else if(res.text){
-                message.error(res.text);
-              }
-              console.log(res.text);
-              resolve(undefined);
-            } else {
-              message.error(
-                translate("${请求服务失败}(") + options.url + ")",
-                5
-              );
-              reject(res.body);
-            }
-          }
+            });
+        }).catch((err) => {
+            console.log(err);
         });
-    });
-  }
-
+    }
 
-  static getProramConfig() {
-    return new Promise((resolve, reject) => {
-      superagent.get("programConfig.json").end((req, res) => {
-        if (!res) {
-          reject();
+    static getHeaderObj(serverKey) {
+        if (serverKey) {
+            return {
+                "hydrocarbon-token": Units.serverHydrocarbonToken(serverKey),
+                "hydrocarbon-program-token": Units.programCode(serverKey),
+            }
         } else {
-          if (res.status === 200) {
-            resolve(res.body);
-          } else {
-            reject(res.body);
-          }
+            return {
+                "hydrocarbon-token": Units.hydrocarbonToken()
+                    ? Units.hydrocarbonToken()
+                    : Units.getAnoHydrocarbonToken(),
+                "hydrocarbon-program-token": Units.programCode(),
+            };
         }
-      });
-    }).catch((err) => {
-      console.log(err);
-    });
-  }
-
-  static getHeaderObj() {
-    return {
-      "hydrocarbon-token": Units.hydrocarbonToken()
-        ? Units.hydrocarbonToken()
-        : Units.getAnoHydrocarbonToken(),
-      "hydrocarbon-program-token": Units.programCode(),
-    };
-  }
+    }
 }