aldehyde 0.2.480 → 0.2.481

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

@@ -1,251 +1,251 @@
-import * as echarts from 'echarts';
-import 'echarts-liquidfill';
-import React, { useEffect, useRef, useState, ForwardedRef, forwardRef, useImperativeHandle } from 'react';
-import _ from 'lodash';
-import { Spin } from "antd";
-import HydrocarbonService from "../../tmpl/hcservice-v3";
-import { DataConfigProps } from "../data";
-
-const defColor = {
-    type: 'linear',
-    x: 0, y: 0, x2: 0, y2: 1,
-    colorStops: [
-        { offset: 0, color: '#446bf5' },
-        { offset: 1, color: '#2ca3e2' },
-    ],
-    globalCoord: false,
-};
-
-const defOption = {
-    tooltip: {
-        trigger: 'item'
-    },
-    series: [
-        {
-            name: '数值',
-            type: 'liquidFill', //水位图
-            radius: '80%', //显示比例
-            center: ['50%', '50%'], //中心点
-            amplitude: 20, //水波振幅
-            data: [0.5, 0.5, 0.5], // data个数代表波浪数
-            color: [defColor], //波浪颜色
-            backgroundStyle: { color: 'RGBA(51, 66, 127, 0.7)' },//边框内部填充部分颜色
-            label: {
-                position: ['50%', '50%'], //标签设置
-                textStyle: {
-                    fontSize: 28, //文本字号,
-                    color: '#fff',
-                },
-            },
-            outline: { show: false },
-        },
-    ],
-};
-
-// 处理数据格式
-const handleData = (data: { config: { [key: string]: string }, value: { [key: string]: any }[] }[]) => {
-    const temData = data?.[0]?.value?.[0]?.v1;
-    return temData;
-}
-
-export interface ComponentStyle {
-    tooltip?: { show: boolean };
-    radius?: number;
-    center?: { x: number, y: number };
-    shape?: string;
-    amplitude?: number;
-    dataNum?: number;
-    color?: { color1: string, color2: string };
-    backgroundStyle?: { color: string, [key: string]: any };
-    label?: { position: { x: number, y: number }, textStyle: { fontSize: number, color: string, }, [key: string]: any };
-    renderer?: "canvas" | "svg";
-}
-
-export interface ComponentProps {
-    style?: ComponentStyle;
-    base: { width: number, height: number };
-    data?: DataConfigProps;
-    isDesignMode?: boolean; // 是否编辑模式
-    initSearchParams?: { [key: string]: any }; // 全局初始化外部参数，例：传参包含设备id，则在查询时带上设备id
-}
-
-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 [renderType, setRenderType] = useState<"canvas" | "svg">(style?.renderer || "svg"); // 渲染模式
-    const [size, setSize] = useState<{ width: number, height: number }>();
-    const [dataConfig, setDataConfig] = useState<DataConfigProps>({ ...propsData }); // 数据源配置
-    const [data, setData] = useState<number>(0);
-    const [searchParams, setSearchParams] = useState<{ [key: string]: any }>();
-    const [initSearchParams, setInitSearchParams] = useState<{ [key: string]: any }>();
-    const [loading, setLoading] = useState<boolean>(false);
-    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 && chart.current.dispose();
-    };
-
-    // 全局初始化请求数据处理
-    const handleInitData = (val: DataConfigProps) => {
-        if (val.sourceType === "sourceId" && val.isInit && val.initData) {
-            const { config, value } = val.initData;
-            const temData = handleData(value);
-            setData(temData);
-            if (config?.requestMode === "polling") {
-                pollingIntervalRef.current = setInterval(() => { getData() }, config?.pollingInterval || 60000);
-            }
-        }
-    }
-
-    // ws订阅数据更新
-    const handleWSData = (val: DataConfigProps) => {
-        if (val.sourceType === "sourceId" && val.wsData) {
-            const { value } = val.initData;
-            const temData = handleData(value);
-            setData(temData);
-        }
-    }
-
-    useImperativeHandle(ref, () => ({
-        updateConfig: (newConfig) => {
-            const { base, style: newStyle, data: newDataConfig, initSearchParams: newISParams } = newConfig;
-            setConfig({ ...(newStyle || {}) });
-            setSize({ width: base.width, height: base.height });
-            setDataConfig(newDataConfig);
-            setRenderType(newStyle?.renderer || "svg");
-            handleInitData(newDataConfig);
-            setSearchParams(newDataConfig.searchParams);
-            setInitSearchParams(newISParams);
-            handleWSData(newDataConfig);
-        },
-        destroy: handleDestroy,
-    }));
-
-    // 窗口大小变化时重新调整图表大小
-    const handleResize = () => {
-        chart.current.resize({ animation: { duration: 500 } });
-    };
-
-    useEffect(() => {
-        return () => {
-            handleDestroy();
-        }
-    }, []);
-
-    useEffect(() => {
-        handleDestroy();
-        chart.current = echarts.init(chartRef.current, null, { renderer: renderType });
-        window.addEventListener('resize', handleResize);
-    }, [renderType]);
-
-    // 请求数据
-    const getData = async (params?: object) => {
-        setLoading(true);
-        const { data } = await HydrocarbonService.requestChartData(null, dataConfig?.sourceId, params) || {};
-        setLoading(false);
-        const { config, value } = data || {};
-        const temData = handleData(value);
-        setData(temData);
-        return config;
-    };
-
-    // 初始化请求数据
-    const getInitData = async (params?: object) => {
-        pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
-        const config = await getData(params);
-        if (config?.requestMode === "polling") {
-            pollingIntervalRef.current = setInterval(() => getData(params), 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 && !dataConfig?.isInit && dataConfig?.isDefRequest !== false) {
-            if (dataConfig?.isInitParams) { // 组件数据源接收外部参数
-                initSearchParams && getInitData(initSearchParams);
-            } else {
-                getInitData();
-            }
-        } else if (dataConfig?.sourceType === 'sourceId') {
-            setData(0);
-        }
-    }, [dataConfig?.sourceType, dataConfig?.sourceId, initSearchParams]);
-
-    // 搜索参数变化时重新请求数据
-    useEffect(() => {
-        if (searchParams) {
-            const params = { ...(initSearchParams || {}), ...searchParams };
-            if (dataConfig?.isInitParams) { // 数据源接收外部参数，则参数存在再请求
-                initSearchParams && getInitData(params);
-            } else {
-                getInitData(params);
-            }
-        }
-    }, [searchParams, initSearchParams]);
-
-    const renderChart = () => {
-        const { tooltip, radius, center, shape, amplitude, dataNum, color, backgroundStyle, label } = config;
-        const option = _.cloneDeep(defOption);
-        option.tooltip = { trigger: "item", ...tooltip };
-        // 编辑态数据源类型显示默认数据0.5
-        const temData = isDesignMode && dataConfig?.sourceType === 'sourceId' ? 0.5 : (data || 0);
-        option.series = option.series.map((r) => ({
-            ...r,
-            radius: `${radius}%`,
-            center: [`${center?.x || 50}%`, `${center?.y || 50}%`],
-            shape,
-            amplitude,
-            color: [{
-                ...defColor, colorStops: [
-                    { offset: 0, color: color?.color1 || '#446bf5' },
-                    { offset: 1, color: color?.color2 || '#2ca3e2' },
-                ],
-            }],
-            backgroundStyle,
-            label: { ...label, position: [`${label?.position?.x}%`, `${label?.position?.y}%`] },
-            data: Array(dataNum).fill(temData),
-        }));
-        chart.current.setOption(option, true);
-    }
-    useEffect(() => {
-        if (config) {
-            renderChart();
-        }
-    }, [config, data]);
-
-    useEffect(() => {
-        if (size) {
-            handleResize();
-        }
-    }, [size]);
-
-    const renderChartDom = () => <div ref={chartRef} style={{ width: '100%', height: '100%' }} />;
-
-    if (isDesignMode) {
-        return renderChartDom();
-    }
-
-    return <Spin spinning={loading}>{renderChartDom()}</Spin>;
-});
-
+import * as echarts from 'echarts';
+import 'echarts-liquidfill';
+import React, { useEffect, useRef, useState, ForwardedRef, forwardRef, useImperativeHandle } from 'react';
+import _ from 'lodash';
+import { Spin } from "antd";
+import HydrocarbonService from "../../tmpl/hcservice-v3";
+import { DataConfigProps } from "../data";
+
+const defColor = {
+    type: 'linear',
+    x: 0, y: 0, x2: 0, y2: 1,
+    colorStops: [
+        { offset: 0, color: '#446bf5' },
+        { offset: 1, color: '#2ca3e2' },
+    ],
+    globalCoord: false,
+};
+
+const defOption = {
+    tooltip: {
+        trigger: 'item'
+    },
+    series: [
+        {
+            name: '数值',
+            type: 'liquidFill', //水位图
+            radius: '80%', //显示比例
+            center: ['50%', '50%'], //中心点
+            amplitude: 20, //水波振幅
+            data: [0.5, 0.5, 0.5], // data个数代表波浪数
+            color: [defColor], //波浪颜色
+            backgroundStyle: { color: 'RGBA(51, 66, 127, 0.7)' },//边框内部填充部分颜色
+            label: {
+                position: ['50%', '50%'], //标签设置
+                textStyle: {
+                    fontSize: 28, //文本字号,
+                    color: '#fff',
+                },
+            },
+            outline: { show: false },
+        },
+    ],
+};
+
+// 处理数据格式
+const handleData = (data: { config: { [key: string]: string }, value: { [key: string]: any }[] }[]) => {
+    const temData = data?.[0]?.value?.[0]?.v1;
+    return temData;
+}
+
+export interface ComponentStyle {
+    tooltip?: { show: boolean };
+    radius?: number;
+    center?: { x: number, y: number };
+    shape?: string;
+    amplitude?: number;
+    dataNum?: number;
+    color?: { color1: string, color2: string };
+    backgroundStyle?: { color: string, [key: string]: any };
+    label?: { position: { x: number, y: number }, textStyle: { fontSize: number, color: string, }, [key: string]: any };
+    renderer?: "canvas" | "svg";
+}
+
+export interface ComponentProps {
+    style?: ComponentStyle;
+    base: { width: number, height: number };
+    data?: DataConfigProps;
+    isDesignMode?: boolean; // 是否编辑模式
+    initSearchParams?: { [key: string]: any }; // 全局初始化外部参数，例：传参包含设备id，则在查询时带上设备id
+}
+
+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 [renderType, setRenderType] = useState<"canvas" | "svg">(style?.renderer || "svg"); // 渲染模式
+    const [size, setSize] = useState<{ width: number, height: number }>();
+    const [dataConfig, setDataConfig] = useState<DataConfigProps>({ ...propsData }); // 数据源配置
+    const [data, setData] = useState<number>(0);
+    const [searchParams, setSearchParams] = useState<{ [key: string]: any }>();
+    const [initSearchParams, setInitSearchParams] = useState<{ [key: string]: any }>();
+    const [loading, setLoading] = useState<boolean>(false);
+    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 && chart.current.dispose();
+    };
+
+    // 全局初始化请求数据处理
+    const handleInitData = (val: DataConfigProps) => {
+        if (val.sourceType === "sourceId" && val.isInit && val.initData) {
+            const { config, value } = val.initData;
+            const temData = handleData(value);
+            setData(temData);
+            if (config?.requestMode === "polling") {
+                pollingIntervalRef.current = setInterval(() => { getData() }, config?.pollingInterval || 60000);
+            }
+        }
+    }
+
+    // ws订阅数据更新
+    const handleWSData = (val: DataConfigProps) => {
+        if (val.sourceType === "sourceId" && val.wsData) {
+            const { value } = val.initData;
+            const temData = handleData(value);
+            setData(temData);
+        }
+    }
+
+    useImperativeHandle(ref, () => ({
+        updateConfig: (newConfig) => {
+            const { base, style: newStyle, data: newDataConfig, initSearchParams: newISParams } = newConfig;
+            setConfig({ ...(newStyle || {}) });
+            setSize({ width: base.width, height: base.height });
+            setDataConfig(newDataConfig);
+            setRenderType(newStyle?.renderer || "svg");
+            handleInitData(newDataConfig);
+            setSearchParams(newDataConfig.searchParams);
+            setInitSearchParams(newISParams);
+            handleWSData(newDataConfig);
+        },
+        destroy: handleDestroy,
+    }));
+
+    // 窗口大小变化时重新调整图表大小
+    const handleResize = () => {
+        chart.current.resize({ animation: { duration: 500 } });
+    };
+
+    useEffect(() => {
+        return () => {
+            handleDestroy();
+        }
+    }, []);
+
+    useEffect(() => {
+        handleDestroy();
+        chart.current = echarts.init(chartRef.current, null, { renderer: renderType });
+        window.addEventListener('resize', handleResize);
+    }, [renderType]);
+
+    // 请求数据
+    const getData = async (params?: object) => {
+        setLoading(true);
+        const { data } = await HydrocarbonService.requestChartData(null, dataConfig?.sourceId, params) || {};
+        setLoading(false);
+        const { config, value } = data || {};
+        const temData = handleData(value);
+        setData(temData);
+        return config;
+    };
+
+    // 初始化请求数据
+    const getInitData = async (params?: object) => {
+        pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
+        const config = await getData(params);
+        if (config?.requestMode === "polling") {
+            pollingIntervalRef.current = setInterval(() => getData(params), 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 && !dataConfig?.isInit && dataConfig?.isDefRequest !== false) {
+            if (dataConfig?.isInitParams) { // 组件数据源接收外部参数
+                initSearchParams && getInitData(initSearchParams);
+            } else {
+                getInitData();
+            }
+        } else if (dataConfig?.sourceType === 'sourceId') {
+            setData(0);
+        }
+    }, [dataConfig?.sourceType, dataConfig?.sourceId, initSearchParams]);
+
+    // 搜索参数变化时重新请求数据
+    useEffect(() => {
+        if (searchParams) {
+            const params = { ...(initSearchParams || {}), ...searchParams };
+            if (dataConfig?.isInitParams) { // 数据源接收外部参数，则参数存在再请求
+                initSearchParams && getInitData(params);
+            } else {
+                getInitData(params);
+            }
+        }
+    }, [searchParams, initSearchParams]);
+
+    const renderChart = () => {
+        const { tooltip, radius, center, shape, amplitude, dataNum, color, backgroundStyle, label } = config;
+        const option = _.cloneDeep(defOption);
+        option.tooltip = { trigger: "item", ...tooltip };
+        // 编辑态数据源类型显示默认数据0.5
+        const temData = isDesignMode && dataConfig?.sourceType === 'sourceId' ? 0.5 : (data || 0);
+        option.series = option.series.map((r) => ({
+            ...r,
+            radius: `${radius}%`,
+            center: [`${center?.x || 50}%`, `${center?.y || 50}%`],
+            shape,
+            amplitude,
+            color: [{
+                ...defColor, colorStops: [
+                    { offset: 0, color: color?.color1 || '#446bf5' },
+                    { offset: 1, color: color?.color2 || '#2ca3e2' },
+                ],
+            }],
+            backgroundStyle,
+            label: { ...label, position: [`${label?.position?.x}%`, `${label?.position?.y}%`] },
+            data: Array(dataNum).fill(temData),
+        }));
+        chart.current.setOption(option, true);
+    }
+    useEffect(() => {
+        if (config) {
+            renderChart();
+        }
+    }, [config, data]);
+
+    useEffect(() => {
+        if (size) {
+            handleResize();
+        }
+    }, [size]);
+
+    const renderChartDom = () => <div ref={chartRef} style={{ width: '100%', height: '100%' }} />;
+
+    if (isDesignMode) {
+        return renderChartDom();
+    }
+
+    return <Spin spinning={loading}>{renderChartDom()}</Spin>;
+});
+
 export default Index;