aldehyde 0.2.473 → 0.2.475

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

@@ -0,0 +1,323 @@
+import * as echarts from 'echarts';
+import React, { useEffect, useRef, useState, ForwardedRef, forwardRef, useImperativeHandle } from 'react';
+import _ from 'lodash';
+import { Spin } from "antd";
+import { useLocale } from "../../locale/useLocale";
+import HydrocarbonService from "../../tmpl/hcservice-v3";
+import { DataConfigProps } from "../data";
+
+
+const defOption = {
+    title: {
+        text: '暂无数据',
+        left: 'center',
+        top: 'middle',
+        show: false, // 无数据时显示
+    },
+    tooltip: {},
+    grid: { top: 30, let: 30, right: 30, bottom: 30 },
+    legend: { show: false },
+    shape: "polygon",
+    radar: {
+        indicator: [
+            { name: 'A', max: 6500 },
+            { name: 'B', max: 16000 },
+            { name: 'C', max: 30000 },
+            { name: 'D', max: 38000 },
+            { name: 'E', max: 52000 },
+            { name: 'F', max: 25000 }
+        ],
+        splitArea: {
+            areaStyle: {
+                color: 'transparent',
+            },
+        },
+        axisName: {
+            color: '#afb6d3',
+            fontsize: 12,
+            fontWeight: "normal",
+        },
+        axisLine: {
+            lineStyle: {
+                color: '#384278',
+            },
+        },
+        splitLine: {
+            lineStyle: {
+                color: '#384278',
+            },
+        },
+    },
+    series: [
+        {
+            type: 'radar',
+            data: [{ value: [4200, 3000, 20000, 35000, 50000, 18000], name: 'A' }, { value: [5000, 14000, 28000, 26000, 42000, 21000], name: 'B' }]
+        }
+    ]
+};
+
+const legends = {
+    top: { top: 0 },
+    bottom: { bottom: 0 },
+    left: { left: 5, top: "center" },
+    right: { right: 5, top: "center" },
+    leftTop: { left: 5 },
+    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 isD = Object.keys(config).some(r => r.includes("d"));
+        // 过滤只有v1、v2等数据
+        const vNames = Object.keys(config).filter((r) => r.startsWith("v") && !r.includes("-")).sort((a, b) => parseInt(a.substring(1)) - parseInt(b.substring(1)));
+        return isD ? {
+            name: config.d1,
+            data: vNames.map((r) => ({
+                name: config[r],
+                data: value.map((v) => [v["d1"], v[r]]),
+            }))
+        } : {
+            data: value.map((r, index) => ({ name: `数值${index || ""}`, data: vNames.map(v => [config[v], r[v]]) }))
+        };
+    });
+    return temData[0]?.data || [];
+};
+
+export interface ComponentStyle {
+    tooltip?: boolean;
+    color?: string[];
+    grid?: { top: number, let: number, right: number, bottom: number };
+    legend?: { [key: string]: any };
+    renderer?: "canvas" | "svg";
+    lineStyle?: { width: number };
+    shape?: string;
+    isArea?: boolean;
+    areaStyle?: { opacity: number };
+    splitAreaColor?: string;
+    axisName?: {
+        color: string,
+        fontsize: number,
+        fontWeight: string,
+    },
+    axisLineColor?: string,
+    splitLineColor?: string,
+}
+
+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<{ name: string, data: any }[]>([]);
+    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 { translate } = useLocale();
+
+    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: dataConfig, value } = val.initData;
+            const temData = handleData(value);
+            setData(temData);
+            if (dataConfig?.requestMode === "polling") {
+                pollingIntervalRef.current = setInterval(() => { getData() }, dataConfig?.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 temData = handleData(data?.value);
+        setData(temData);
+        return data?.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') {
+            setData(handleData(dataConfig.staticData));
+        }
+    }, [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([]);
+        }
+    }, [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 { grid, legend, tooltip, color, lineStyle, isArea, areaStyle, shape, splitAreaColor, axisName, axisLineColor, splitLineColor } = config;
+        const option = _.cloneDeep(defOption);
+        // 编辑态无数据显示默认数据
+        const temData = isDesignMode ? option.series : data;
+        const temMax = Math.max(...data.map(r => r.data?.map(item => item[1]) || []).flat());
+        const temIndicator = data?.[0]?.data?.map(r => ({ name: r[0], max: temMax }));
+        option.shape = shape;
+        option.grid = grid;
+        option.legend = { ...legend, ...legends[legend?.position] };
+        option.tooltip = tooltip ? {} : undefined;
+        option.title.text = translate("${暂无数据}");
+        option.title.show = !temData?.length;
+        option.radar = isDesignMode ? option.radar : {
+            ...option.radar,
+            splitArea: {
+                areaStyle: {
+                    color: splitAreaColor || 'transparent',
+                },
+            },
+            axisName: axisName || {
+                color: '#afb6d3',
+                fontsize: 12,
+                fontWeight: "normal",
+            },
+            axisLine: {
+                lineStyle: {
+                    color: axisLineColor || '#384278',
+                },
+            },
+            splitLine: {
+                lineStyle: {
+                    color: splitLineColor || '#384278',
+                },
+            },
+            indicator: temIndicator
+        };
+        option.series = temData.map((r, index) => ({
+            name: r.name,
+            type: "radar",
+            lineStyle: { ...lineStyle, color: color[index] },
+            itemStyle: { color: color[index] },
+            areaStyle: isArea ? areaStyle : undefined,
+            data: [{ name: r.name, value: r.data?.map(item => item[1]) }]
+        }));
+        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;

package/src/aldehyde/module/dtmpl-edit-card.tsx

@@ -235,7 +235,7 @@ export default class DtmplEditCard extends React.PureComponent<
 
     getSecondCriteria = async (field) => {
         const { parentFormInstance } = this.props;
-        const { relValueField, baseCriteria = {} } = field;
+        const { relValueField, relValueField3, baseCriteria = {} } = field;
         const temForm = parentFormInstance || this.formRef.current;
         if (relValueField && temForm) {
             let relValueData = temForm.getFieldValue(relValueField.id);
@@ -245,6 +245,14 @@ export default class DtmplEditCard extends React.PureComponent<
             field.baseCriteria = { ...(baseCriteria || {}), "secondCriteria": relValueData };
             field.configChanged = true;
         }
+        if (relValueField3 && temForm) {
+            let relValueData = temForm.getFieldValue(relValueField3.id);
+            if (relValueField3.subRelValueField && relValueData) {
+                relValueData = await this.getSubDtmplData(relValueField3, relValueData);
+            }
+            field.baseCriteria = { ...(field.baseCriteria || {}), "thirdCriteria": relValueData };
+            field.configChanged = true;
+        }
         return field;
     }
     // 表单关联项secondCriteria处理end
@@ -267,6 +275,15 @@ export default class DtmplEditCard extends React.PureComponent<
                             total[field.relValueField.id] = [...temArr, temField];
                         }
                     }
+                    if (field.relValueField3) {
+                        const temArr = total[field.relValueField3.id] || [];
+                        const isSameGroup = item.fields.some(f => f.id === field.relValueField3.id);
+                        const temField = isSameGroup ? field : item;
+                        const isItem = temArr.find(r => r.id === temField.id);
+                        if (!isItem) {
+                            total[field.relValueField3.id] = [...temArr, temField];
+                        }
+                    }
                 })
             }
             return total;

package/src/aldehyde/module/dtmpl-edit-page.tsx

@@ -178,7 +178,7 @@ export default class DtmplEditPage extends React.PureComponent<
 
   getSecondCriteria = async (field) => {
     const { parentFormInstance } = this.props;
-    const { relValueField, baseCriteria = {} } = field;
+    const { relValueField, relValueField3, baseCriteria = {} } = field;
     const temForm = parentFormInstance || this.formRef.current;
     if (relValueField && temForm) {
       let relValueData = temForm.getFieldValue(relValueField.id);
@@ -188,6 +188,14 @@ export default class DtmplEditPage extends React.PureComponent<
       field.baseCriteria = { ...(baseCriteria || {}), "secondCriteria": relValueData };
       field.configChanged = true;
     }
+    if (relValueField3 && temForm) {
+      let relValueData = temForm.getFieldValue(relValueField3.id);
+      if (relValueField3.subRelValueField && relValueData) {
+        relValueData = await this.getSubDtmplData(relValueField3, relValueData);
+      }
+      field.baseCriteria = { ...(field.baseCriteria || {}), "thirdCriteria": relValueData };
+      field.configChanged = true;
+    }
     return field;
   }
   // 表单关联项secondCriteria处理end
@@ -279,7 +287,7 @@ export default class DtmplEditPage extends React.PureComponent<
     const valueFieldMap = groups.reduce((total, item) => {
       if (item.fields) {
         item.fields.forEach(field => {
-          if (field.relValueField) {
+          if (field.relValueField) { // 关联取值字段
             const temArr = total[field.relValueField.id] || [];
             const isSameGroup = item.fields.some(f => f.id === field.relValueField.id);
             const temField = isSameGroup ? field : item;
@@ -288,6 +296,15 @@ export default class DtmplEditPage extends React.PureComponent<
               total[field.relValueField.id] = [...temArr, temField];
             }
           }
+          if (field.relValueField3) { // 关联取值字段扩1
+            const temArr = total[field.relValueField3.id] || [];
+            const isSameGroup = item.fields.some(f => f.id === field.relValueField3.id);
+            const temField = isSameGroup ? field : item;
+            const isItem = temArr.find(r => r.id === temField.id);
+            if (!isItem) {
+              total[field.relValueField3.id] = [...temArr, temField];
+            }
+          }
         })
       }
       return total;

package/src/aldehyde/routable/ltmpl-route.tsx

@@ -18,6 +18,8 @@ import DtmplCustomEditModalPage from "../custom-page/dtmpl-custom-edit-modal-pag
 import CustomDetailModalPage from "../custom-page/custom-detail-modal-page";
 import DtmplEditPage from "../module/dtmpl-edit-page";
 import DtmplViewModal from "../module/dtmpl-view-modal";
+import Edit2D from "../draw-canvas/edit"; // 编辑2D图
+import View2D from "../draw-canvas/view"; // 查看2D图
 
 export interface LtmplRouteProps extends RouterCompProps {
     layoutRootPath?: string;
@@ -45,6 +47,8 @@ export interface LtmplRouteState {
     themeConfig?: ThemeConfig;
     pageSizeOptions?: number[]; // 分页条数
     drawerSize?: number | string; // 抽屉组件
+    showEdit2D?: boolean; // 编辑2D图
+    showView2D?: boolean; // 查看2D图
 }
 
 class LtmplRoute extends React.PureComponent<LtmplRouteProps, LtmplRouteState> {
@@ -75,7 +79,9 @@ class LtmplRoute extends React.PureComponent<LtmplRouteProps, LtmplRouteState> {
         userPageConfigLoading: true,
         themeConfig: undefined,
         pageSizeOptions: [],
-        drawerSize: "92vw"
+        drawerSize: "92vw",
+        showEdit2D: false,
+        showView2D: false
     };
 
     async componentDidMount() {
@@ -300,6 +306,16 @@ class LtmplRoute extends React.PureComponent<LtmplRouteProps, LtmplRouteState> {
         }
     };
 
+    // 2D图编辑
+    doEdit2D = (val: string) => {
+        this.setState({ showEdit2D: true, selectedCode: val });
+    }
+
+    // 2D图查看
+    doView2D = (val: string) => {
+        this.setState({ showView2D: true, selectedCode: val });
+    }
+
     pathMark = () => {
         const { tableType } = this.props;
         return tableType && tableType == "report" ? "report-table" : "act-table";
@@ -376,7 +392,7 @@ class LtmplRoute extends React.PureComponent<LtmplRouteProps, LtmplRouteState> {
         const {
             ltmplConfigRes, showDraw, showWindowType, ractionId, selectedCode,
             showViewDrawer, showViewModal, showEdit, editSourceId, viewSourceId, toCustomPage, userPageConfig,
-            themeConfig, pageSizeOptions, userPageConfigLoading, drawerSize
+            themeConfig, pageSizeOptions, userPageConfigLoading, drawerSize, showEdit2D, showView2D
         } = this.state;
         const { location, params, tableType, rowOperatable, defShowType } = this.props;
         const { sourceId } = params;
@@ -423,7 +439,7 @@ class LtmplRoute extends React.PureComponent<LtmplRouteProps, LtmplRouteState> {
                         criteriaData={criteriaData} ltmplConfig={ltmplConfig} doRAction={this.doRAction}
                         defShowType={defShowType} userPageConfig={userPageConfig} setUserPageConfig={this.setUserPageConfig}
                         resetUserPageConfig={this.resetUserPageConfig} allowUserConfig={themeConfig?.allowUserConfig}
-                        onUpdatePageSizeOptions={this.onUpdatePageSizeOptions}
+                        onUpdatePageSizeOptions={this.onUpdatePageSizeOptions} doEdit2D={this.doEdit2D} doView2D={this.doView2D}
                     />
                     {showDraw ? (
                         <Drawer
@@ -494,6 +510,26 @@ class LtmplRoute extends React.PureComponent<LtmplRouteProps, LtmplRouteState> {
                             />
                         )
                     ) : null}
+                    {showEdit2D && selectedCode ? <Drawer
+                        placement={"left"} title={translate("${编辑}")} closable={true} mask={false} onClose={() => this.setState({ showEdit2D: false, selectedCode: undefined })}
+                        open={showEdit2D}
+                        resizable={{ onResize: (newSize => this.setState({ drawerSize: newSize })) }}
+                        size={drawerSize}
+                        styles={{ body: { minWidth: "720px", padding: 0 } }}
+                    >
+                        <Edit2D recordCode={selectedCode} />
+                    </Drawer> : null
+                    }
+                    {showView2D && selectedCode ? <Drawer
+                        placement={"left"} title={translate("${查看}")} closable={true} mask={false} onClose={() => this.setState({ showView2D: false, selectedCode: undefined })}
+                        open={showView2D}
+                        resizable={{ onResize: (newSize => this.setState({ drawerSize: newSize })) }}
+                        size={drawerSize}
+                        styles={{ body: { minWidth: "720px", padding: 0 } }}
+                    >
+                        <View2D recordCode={selectedCode} />
+                    </Drawer> : null
+                    }
                 </>
             );
         }

package/src/aldehyde/table/act-table.tsx

@@ -83,6 +83,8 @@ interface ActTableProps extends TmplBaseProps {
   onUpdatePageSizeOptions?: (val: number[]) => void; // 更新分页数数组
   showEmpty?: boolean; // 空数据是否显示空状态，默认显示
   loadDataCallback?: (val: object[]) => void; // 请求数据回调函数
+  doEdit2D?: (val: string) => void; // 2D图编辑
+  doView2D?: (val: string) => void; // 2D图查看
 }
 
 interface ActTableStat {
@@ -1047,7 +1049,7 @@ class ActTable extends React.PureComponent<ActTableProps, ActTableStat> {
                 </Tooltip>
               </Popover>
             ) : (
-              <Tooltip title={translate("${创建}")}>
+              <Tooltip title={translate("${" + (ltmplConfig.createBtnTitle || "创建") + "}")}>
                 <Button onClick={() => doCreate(null, false)}>
                   <PlusOutlined />
                 </Button>
@@ -1059,7 +1061,7 @@ class ActTable extends React.PureComponent<ActTableProps, ActTableStat> {
           {(buttons.includes("dtmplCustomAdd") || customCreatable) &&
             doCreate &&
             !readOnly ? (
-            <Tooltip title={translate("${创建}")}>
+            <Tooltip title={translate("${" + (ltmplConfig.createBtnTitle || "创建") + "}")}>
               <Button onClick={() => doCreate(null, true)}>
                 <PlusCircleOutlined />
               </Button>
@@ -1512,7 +1514,8 @@ class ActTable extends React.PureComponent<ActTableProps, ActTableStat> {
       mainCode, sourceId, ltmplConfig, funcMode, operatable,
       title, collapsible,
       onChangePage, serverKey, criteriaData, showEmpty, loadDataCallback,
-      showView, doEdit, doRAction, customEditable, readOnly, tableType, showPagination, showAggregates, userPageConfig
+      showView, doEdit, doRAction, customEditable, readOnly, tableType, showPagination, showAggregates, userPageConfig,
+      doEdit2D, doView2D
     } = this.props;
     const { translate } = this.context;
 
@@ -1538,7 +1541,7 @@ class ActTable extends React.PureComponent<ActTableProps, ActTableStat> {
         doRowAction: this.doRowAction, doDeleteByCode: this.doDeleteByCode, sortColumns: criteriaData["sortColIds"],
         editings, editRowEdit: this.editRowEdit, cancelRowEdit: this.cancelRowEdit, saveRowData: this.saveRowData,
         doDelModalOpen: this.doDelModalOpen, mainCode, criteriaData: userCriteriaData, actTableDoSearch: this.actTableDoSearch,
-        columnResize: userPageConfig?.colResize
+        columnResize: userPageConfig?.colResize, doEdit2D, doView2D
       }
     );
 

package/src/aldehyde/table/column/column-builder.tsx

@@ -11,7 +11,8 @@ import {
     EyeOutlined,
     FormOutlined,
     KeyOutlined,
-    MenuOutlined, QuestionCircleOutlined,
+    MenuOutlined, QuestionCircleOutlined, PlaySquareOutlined,
+    SettingOutlined
 } from "@ant-design/icons";
 import ActionUtils from "../../controls/action/utils";
 import ViewButton from "../../detail/button/view-button";
@@ -539,8 +540,10 @@ export default {
             serverKey,
             readOnly,
             sourceId, translate, doCustomButton, doRowJump, blockMenuTreeDrawerOpen,
-            doRowAction, doDeleteByCode, editRowEdit, editings, cancelRowEdit, saveRowData, doDelModalOpen } = props;
-        const { buttons, builtInButtons, defShowRowActionCount, strongDeleteConfirmText } = ltmplConfig;
+            doRowAction, doDeleteByCode, editRowEdit, editings, cancelRowEdit, saveRowData, doDelModalOpen,
+            doView2D, doEdit2D
+        } = props;
+        const { buttons, builtInButtons, defShowRowActionCount, strongDeleteConfirmText, edit2DBtnTitle, view2DBtnTitle, deleteBtnTitle } = ltmplConfig;
 
         let actionButtons: any[] = [];
 
@@ -573,6 +576,19 @@ export default {
                 ></EditButton>)
             )
         };
+
+        // 2D图编辑
+        if (buttons.includes("edit2D") && doEdit2D && !readOnly) {
+            actionButtons.push((!edit2DBtnTitle || edit2DBtnTitle?.length < 4) ? <Button size="small" onClick={() => doEdit2D(record.code)}>{edit2DBtnTitle || <SettingOutlined />}</Button> :
+                <Tooltip title={edit2DBtnTitle}><Button size="small" onClick={() => doEdit2D(record.code)} icon={<SettingOutlined />} /></Tooltip>)
+        }
+
+        // 2D图查看
+        if (buttons.includes("view2D") && doView2D && !readOnly) {
+            actionButtons.push((!view2DBtnTitle || view2DBtnTitle?.length < 4) ? <Button size="small" onClick={() => doView2D(record.code)}>{ltmplConfig.view2DBtnTitle || <PlaySquareOutlined />}</Button> :
+                <Tooltip title={edit2DBtnTitle}><Button size="small" onClick={() => doView2D(record.code)} icon={<PlaySquareOutlined />} /></Tooltip>)
+        }
+
         // 行内编辑
         if (buttons.includes("rowEdit") && !buttons.includes("multiRowEdit")) {
             actionButtons.push(<InlineEditButton
@@ -804,9 +820,13 @@ export default {
             )) {
             actionButtons.push(
                 strongDeleteConfirmText ?
-                    <Button size="small" type="dashed" danger onClick={() => doDelModalOpen(record)}>
-                        <DeleteOutlined />
-                    </Button> :
+                    ((!deleteBtnTitle || deleteBtnTitle?.length < 4) ?
+                        <Button size="small" type="dashed" danger onClick={() => doDelModalOpen(record)}>
+                            {deleteBtnTitle || <DeleteOutlined />}
+                        </Button> : <Tooltip title={deleteBtnTitle}>
+                            <Button size="small" type="dashed" danger onClick={() => doDelModalOpen(record)} icon={<DeleteOutlined />} />
+                        </Tooltip>)
+                    :
                     <Popconfirm
                         placement="rightBottom"
                         title={translate("${确定要[删除]此数据吗}?")}
@@ -815,9 +835,9 @@ export default {
                         cancelText={translate("${取消}")}
                         okType={"danger"}
                     >
-                        <Button size="small" type="dashed" danger>
-                            <DeleteOutlined />
-                        </Button>
+                        {(!deleteBtnTitle || deleteBtnTitle?.length < 4) ?
+                            <Button size="small" type="dashed" danger >{deleteBtnTitle || <DeleteOutlined />}</Button> :
+                            <Tooltip title={deleteBtnTitle}><Button size="small" type="dashed" danger icon={<DeleteOutlined />} /></Tooltip>}
                     </Popconfirm>
             )
         }

package/src/aldehyde/tmpl/control-type-supportor.tsx

@@ -30,6 +30,7 @@ SupportInputTypes.add('timerange-unorder');
 SupportInputTypes.add('text');
 SupportInputTypes.add('textarea');
 SupportInputTypes.add('text-view');
+SupportInputTypes.add('scan-code');
 SupportInputTypes.add('html');
 SupportInputTypes.add('steps');
 SupportInputTypes.add('progress');

package/src/aldehyde/tmpl/hcservice-v3.tsx

@@ -1536,4 +1536,48 @@ export default class HcserviceV3 {
       message.error(translate("${发送失败}"), 3);
     }
   }
+
+  // 请求2D图组件
+  static async get2DComponent(groups: string[]) {
+    let { status, ...res } = await Super.super({
+      url: `/v3/component/2d-config`,
+      method: "GET",
+      query: { groups }
+    });
+    if (status === "success") {
+      return res;
+    } else {
+      return {};
+    }
+  }
+
+  // 保存2D图
+  static async postDiagram2DConfig(recordCode: string, content: string) {
+    let res = await Super.super({
+      url: `/v3/devops/diagram-2d-config`,
+      method: "POST",
+      data: { recordCode, content },
+    });
+    if (res?.status === "success") {
+      message.success(translate("${保存成功}"), 1);
+      return true;
+    } else {
+      message.error(translate("${保存失败}"), 3);
+      return false;
+    }
+  }
+
+  // 查询2D图
+  static async getDiagram2DConfig(recordCode: string) {
+    let res = await Super.super({
+      url: `/v3/devops/diagram-2d-config`,
+      method: "GET",
+      query: { recordCode }
+    });
+    if (res?.status === "success") {
+      return res?.configs || [];
+    } else {
+      return [];
+    }
+  }
 }