aldehyde 0.2.480 → 0.2.481

package/src/aldehyde/controls/2dEditor/components/card.tsx

@@ -1,257 +1,257 @@
-import React, { useState, useRef, useEffect, useCallback } from 'react';
-import { theme, Row, Col, Tag, Spin } from "antd";
-import { HydrocarbonService } from "../../../index";
-import HtmlBox from "./html-box";
-import { BaseNode } from "./data";
-import HcserviceV3 from "../../../tmpl/hcservice-v3";
-import LtmplModal from "../../../module/ltmpl-modal";
-import DtmplViewModal from "../../../module/dtmpl-view-modal";
-import DtmplEditModal from "../../../module/dtmpl-edit-modal";
-import CustomDetailModalPage from "../../../custom-page/custom-detail-modal-page";
-import "./component.less";
-
-const { useToken } = theme;
-
-// 处理数据关系字段
-const handleData = (val: string) => {
-    if (!val || !val.includes("@R@")) {
-        return val || "";
-    }
-    const temArr = val.split("@R@");
-    return temArr[1];
-}
-
-// 状态Tag颜色
-const stateColors = { "在线": "success", "离线": "error" };
-
-// 编辑页默认显示数据
-const defData = { v1: "标题", v2: "在线", listData: [{ title: "描述一", value: "xxxxxx" }, { title: "描述二", value: "" }, { title: "描述三", value: "" }, { title: "描述四", value: "" }] };
-
-/**
- * 卡片组件
- * 数据源参数配置：
- * v1:标题；v2:标签；v3、v4、v5...卡片描述列表
- */
-
-interface ListData {
-    title: string;
-    value: any;
-    unit?: string;
-    refPageId?: string; // 关联页面
-    refPageTitle?: string;
-    showRefPageDataCount?: boolean; // 关联页面统计数据是否显示
-    refPageDataCount?: number;
-    refPageTitleColor?: string; // 关联页面颜色
-    refPageDataCountColor?: string;
-    refPageOpenType?: "table" | "detail" | "edit"; // 关联页面显示类型
-    refCustomPage?: string; // 关联自定义页面
-}
-
-interface Props {
-    node: BaseNode,
-    onDragMove?: (id: string, position: { x: number, y: number }) => void;
-    isSelected?: boolean; // 是否选中
-    onSelect?: () => void; // 设置选中
-    onChange?: (node: BaseNode) => void; // 更新组件配置
-    isDesignMode?: boolean; // 是否编辑模式
-}
-
-const Index = (props: Props) => {
-    const { node, onDragMove, isSelected, onSelect, onChange, isDesignMode = true } = props;
-    const { id, position, draggable = true, rotation } = node;
-    const [isDragging, setIsDragging] = useState<boolean>(false);
-    const [loading, setLaoding] = useState<boolean>(false);
-    const [title, setTitle] = useState<string>("");
-    const [state, setState] = useState<string>("");
-    const [listData, setListData] = useState<ListData[]>([]);
-    const [showRefPage, setShowRefPage] = useState<ListData>();
-    const [customOpen, setCustomOpen] = useState<boolean>(false);
-    const isDraggingRef = useRef<boolean>(false);
-    const { token } = useToken();
-
-    // 查询事实关联页面统计数据
-    const getRefPageDataCount = async (pageId: string) => {
-        const queryKey = await HcserviceV3.requestLtmplQueryKey(null, pageId, node.refPageParams);
-        const countData = await HcserviceV3.requestQueryAggregates(null, queryKey.key);
-        return countData?.count || 0;
-    }
-
-    const handleItemData = async (config, otherVal, item) => {
-        const refPageId = config[`${item}-refPageId`];
-        const refPageTitle = config[`${item}-refPageTitle`];
-        const refCustomPage = config[`${item}-refCustomPage`];
-        const showRefPageDataCount = config[`${item}-showRefPageDataCount`];
-        const refPageTitleColor = config[`${item}-refPageTitleColor`];
-        const refPageDataCountColor = config[`${item}-refPageDataCountColor`];
-        const refPageOpenType = config[`${item}-refPageOpenType`];
-        let refPageDataCount = 0;
-        if (refPageId && showRefPageDataCount) {
-            refPageDataCount = await getRefPageDataCount(refPageId);
-        }
-        return { title: config[item], unit: config[`${item}-suffix`], value: handleData(otherVal[item]), refPageId, refPageTitle, showRefPageDataCount, refPageDataCount, refPageTitleColor, refPageDataCountColor, refPageOpenType, refCustomPage };
-    }
-
-    // 请求数据
-    const getData = async (sourceId: string, params?: object) => {
-        setLaoding(true);
-        const { data } = await HydrocarbonService.requestChartData(null, sourceId, params) || {};
-        const { config, value } = data?.value?.[0] || {};
-        const { v1, v2, ...otherVal } = value?.[0] || {};
-        setLaoding(false);
-        setTitle(handleData(v1));
-        setState(handleData(v2));
-        // 过滤掉设置空值不显示数据
-        const temData = Object.keys(otherVal).filter(r => config[`${r}-nullNotShow`] ? ((otherVal[r] || otherVal[r] == 0) ? true : false) : true);
-        temData.sort((a, b) => Number(a.replace(/\D/g, '')) - Number(b.replace(/\D/g, '')));
-        const temListData = await Promise.all(temData.map(async (item) => await handleItemData(config, otherVal, item)));
-        setListData(temListData);
-    }
-
-    useEffect(() => {
-        if (!isDesignMode && node.dataSourceId?.length) {
-            getData(node.dataSourceId[0], node.params);
-        } else if (isDesignMode) {
-            setTitle(node?.title || defData.v1);
-            setState(defData.v2);
-            setListData(defData.listData);
-        }
-    }, [node]);
-
-    const handleMouseDown = useCallback((e) => {
-        if (!draggable) {
-            return;
-        }
-        e.preventDefault();
-        e.stopPropagation();
-        setIsDragging(true);
-        isDraggingRef.current = true;
-    }, [id, position]);
-
-    const handleMouseMove = (e) => {
-        if (!isDraggingRef.current || !onDragMove) return;
-        const newX = e.clientX;
-        const newY = e.clientY;
-        onDragMove(id, { x: newX, y: newY });
-    };
-
-    const handleMouseUp = () => {
-        if (isDraggingRef.current) {
-            setIsDragging(false);
-            isDraggingRef.current = false;
-        }
-    };
-
-    // Html监听组件位置变化
-    useEffect(() => {
-        if (id) {
-            window.addEventListener('mousemove', handleMouseMove);
-            window.addEventListener('mouseup', handleMouseUp);
-        }
-        return () => {
-            window.removeEventListener('mousemove', handleMouseMove);
-            window.removeEventListener('mouseup', handleMouseUp);
-        };
-    }, [id]);
-
-    return (
-        <HtmlBox
-            node={node}
-            onChange={onChange}
-            isSelected={isSelected}
-            onSelect={onSelect}
-            onDragMove={onDragMove}
-            isDesignMode={isDesignMode}
-        >
-            <div
-                className='card-component'
-                style={{
-                    transform: `translate(-50%, -50%) rotate(${rotation || 0}deg)`,
-                    cursor: isDesignMode && isDragging ? 'grab' : 'default',
-                    background: token.colorBgContainer,
-                    border: `1px solid ${token.colorBorderSecondary}`,
-                    pointerEvents: "auto"
-                }}
-                onMouseDown={handleMouseDown}
-                onClick={() => isDesignMode ? onSelect() : node.onClick?.(node)}
-            >
-                <Spin spinning={loading}>
-                    <div className='card-title'>{title || "-"}</div>
-                    <div className='card-detail'>
-                        <Row gutter={[16, 16]}>
-                            {listData?.map((item, index) =>
-                                <Col className="card-detail-item" span={24} key={index}>
-                                    <div className='card-detail-item'
-                                        onClick={(e) => {
-                                            if (item.refCustomPage) {
-                                                e.stopPropagation();
-                                                setShowRefPage(item);
-                                                setCustomOpen(true);
-                                            }
-                                        }}
-                                        style={item.refPageId && item.refPageTitle ? { width: "60%", whiteSpace: "nowrap" } : { width: "100%" }}>
-                                        <div className="card-detail-item-title">{item.title}：</div>
-                                        <div className="card-detail-item-value">{item.value || item.value === 0 ? item.value : "-"}</div>
-                                        {item.unit ? <div className='card-detail-item-unit'>{item.unit}</div> : ""}
-                                        {(index === 0 && state) ? <span style={{ marginLeft: '8px' }}><Tag color={stateColors[state] || "success"}>{state}</Tag></span> : ""}
-                                    </div>
-                                    {item.refPageId && item.refPageTitle ?
-                                        <div
-                                            className='refPage'
-                                            onClick={(e) => {
-                                                if (item.refPageOpenType) {
-                                                    e.stopPropagation();
-                                                    setShowRefPage(item);
-                                                }
-                                            }}>
-                                            <span style={{ color: item.refPageTitleColor || token.colorPrimary }}>{item.refPageTitle}</span>
-                                            <span style={{ color: item.refPageDataCountColor || token.colorText }}>{item.showRefPageDataCount ? item.refPageDataCount : ""}</span>
-                                        </div>
-                                        : ""}
-                                </Col>)
-                            }
-                        </Row>
-                    </div>
-                </Spin>
-            </div>
-            {showRefPage?.refPageOpenType === "table" ? (
-                <LtmplModal
-                    open={!!showRefPage}
-                    height="76vh"
-                    onCancel={() => setShowRefPage(undefined)}
-                    sourceId={showRefPage?.refPageId}
-                    defaultCriteriaValue={node.refPageParams || {}}
-                />
-            ) : null}
-            {showRefPage?.refPageOpenType === "detail" ?
-                <DtmplViewModal
-                    serverKey={null}
-                    onClose={() => setShowRefPage(undefined)}
-                    open={!!showRefPage}
-                    sourceId={showRefPage?.refPageId}
-                    code={node.refPageParams?.secondCriterion}
-                />
-                : null}
-            {showRefPage?.refPageOpenType === "edit" ?
-                <DtmplEditModal
-                    serverKey={null}
-                    onCancel={() => setShowRefPage(undefined)}
-                    onOk={() => {
-                        setShowRefPage(undefined);
-                        getData(node.dataSourceId[0], node.params);
-                    }}
-                    open={!!showRefPage}
-                    sourceId={showRefPage?.refPageId}
-                    code={node.refPageParams?.secondCriterion}
-                />
-                : null}
-            {customOpen ? <CustomDetailModalPage title={showRefPage?.refPageTitle} width={900} mainCode={null} sourceId={null} params={node?.params} customPath={showRefPage?.refCustomPage} open={customOpen}
-                onCancel={() => {
-                    setCustomOpen(false);
-                    setShowRefPage(undefined);
-                }}
-            /> : ""}
-        </HtmlBox >
-    );
-};
-
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { theme, Row, Col, Tag, Spin } from "antd";
+import { HydrocarbonService } from "../../../index";
+import HtmlBox from "./html-box";
+import { BaseNode } from "./data";
+import HcserviceV3 from "../../../tmpl/hcservice-v3";
+import LtmplModal from "../../../module/ltmpl-modal";
+import DtmplViewModal from "../../../module/dtmpl-view-modal";
+import DtmplEditModal from "../../../module/dtmpl-edit-modal";
+import CustomDetailModalPage from "../../../custom-page/custom-detail-modal-page";
+import "./component.less";
+
+const { useToken } = theme;
+
+// 处理数据关系字段
+const handleData = (val: string) => {
+    if (!val || !val.includes("@R@")) {
+        return val || "";
+    }
+    const temArr = val.split("@R@");
+    return temArr[1];
+}
+
+// 状态Tag颜色
+const stateColors = { "在线": "success", "离线": "error" };
+
+// 编辑页默认显示数据
+const defData = { v1: "标题", v2: "在线", listData: [{ title: "描述一", value: "xxxxxx" }, { title: "描述二", value: "" }, { title: "描述三", value: "" }, { title: "描述四", value: "" }] };
+
+/**
+ * 卡片组件
+ * 数据源参数配置：
+ * v1:标题；v2:标签；v3、v4、v5...卡片描述列表
+ */
+
+interface ListData {
+    title: string;
+    value: any;
+    unit?: string;
+    refPageId?: string; // 关联页面
+    refPageTitle?: string;
+    showRefPageDataCount?: boolean; // 关联页面统计数据是否显示
+    refPageDataCount?: number;
+    refPageTitleColor?: string; // 关联页面颜色
+    refPageDataCountColor?: string;
+    refPageOpenType?: "table" | "detail" | "edit"; // 关联页面显示类型
+    refCustomPage?: string; // 关联自定义页面
+}
+
+interface Props {
+    node: BaseNode,
+    onDragMove?: (id: string, position: { x: number, y: number }) => void;
+    isSelected?: boolean; // 是否选中
+    onSelect?: () => void; // 设置选中
+    onChange?: (node: BaseNode) => void; // 更新组件配置
+    isDesignMode?: boolean; // 是否编辑模式
+}
+
+const Index = (props: Props) => {
+    const { node, onDragMove, isSelected, onSelect, onChange, isDesignMode = true } = props;
+    const { id, position, draggable = true, rotation } = node;
+    const [isDragging, setIsDragging] = useState<boolean>(false);
+    const [loading, setLaoding] = useState<boolean>(false);
+    const [title, setTitle] = useState<string>("");
+    const [state, setState] = useState<string>("");
+    const [listData, setListData] = useState<ListData[]>([]);
+    const [showRefPage, setShowRefPage] = useState<ListData>();
+    const [customOpen, setCustomOpen] = useState<boolean>(false);
+    const isDraggingRef = useRef<boolean>(false);
+    const { token } = useToken();
+
+    // 查询事实关联页面统计数据
+    const getRefPageDataCount = async (pageId: string) => {
+        const queryKey = await HcserviceV3.requestLtmplQueryKey(null, pageId, node.refPageParams);
+        const countData = await HcserviceV3.requestQueryAggregates(null, queryKey.key);
+        return countData?.count || 0;
+    }
+
+    const handleItemData = async (config, otherVal, item) => {
+        const refPageId = config[`${item}-refPageId`];
+        const refPageTitle = config[`${item}-refPageTitle`];
+        const refCustomPage = config[`${item}-refCustomPage`];
+        const showRefPageDataCount = config[`${item}-showRefPageDataCount`];
+        const refPageTitleColor = config[`${item}-refPageTitleColor`];
+        const refPageDataCountColor = config[`${item}-refPageDataCountColor`];
+        const refPageOpenType = config[`${item}-refPageOpenType`];
+        let refPageDataCount = 0;
+        if (refPageId && showRefPageDataCount) {
+            refPageDataCount = await getRefPageDataCount(refPageId);
+        }
+        return { title: config[item], unit: config[`${item}-suffix`], value: handleData(otherVal[item]), refPageId, refPageTitle, showRefPageDataCount, refPageDataCount, refPageTitleColor, refPageDataCountColor, refPageOpenType, refCustomPage };
+    }
+
+    // 请求数据
+    const getData = async (sourceId: string, params?: object) => {
+        setLaoding(true);
+        const { data } = await HydrocarbonService.requestChartData(null, sourceId, params) || {};
+        const { config, value } = data?.value?.[0] || {};
+        const { v1, v2, ...otherVal } = value?.[0] || {};
+        setLaoding(false);
+        setTitle(handleData(v1));
+        setState(handleData(v2));
+        // 过滤掉设置空值不显示数据
+        const temData = Object.keys(otherVal).filter(r => config[`${r}-nullNotShow`] ? ((otherVal[r] || otherVal[r] == 0) ? true : false) : true);
+        temData.sort((a, b) => Number(a.replace(/\D/g, '')) - Number(b.replace(/\D/g, '')));
+        const temListData = await Promise.all(temData.map(async (item) => await handleItemData(config, otherVal, item)));
+        setListData(temListData);
+    }
+
+    useEffect(() => {
+        if (!isDesignMode && node.dataSourceId?.length) {
+            getData(node.dataSourceId[0], node.params);
+        } else if (isDesignMode) {
+            setTitle(node?.title || defData.v1);
+            setState(defData.v2);
+            setListData(defData.listData);
+        }
+    }, [node]);
+
+    const handleMouseDown = useCallback((e) => {
+        if (!draggable) {
+            return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(true);
+        isDraggingRef.current = true;
+    }, [id, position]);
+
+    const handleMouseMove = (e) => {
+        if (!isDraggingRef.current || !onDragMove) return;
+        const newX = e.clientX;
+        const newY = e.clientY;
+        onDragMove(id, { x: newX, y: newY });
+    };
+
+    const handleMouseUp = () => {
+        if (isDraggingRef.current) {
+            setIsDragging(false);
+            isDraggingRef.current = false;
+        }
+    };
+
+    // Html监听组件位置变化
+    useEffect(() => {
+        if (id) {
+            window.addEventListener('mousemove', handleMouseMove);
+            window.addEventListener('mouseup', handleMouseUp);
+        }
+        return () => {
+            window.removeEventListener('mousemove', handleMouseMove);
+            window.removeEventListener('mouseup', handleMouseUp);
+        };
+    }, [id]);
+
+    return (
+        <HtmlBox
+            node={node}
+            onChange={onChange}
+            isSelected={isSelected}
+            onSelect={onSelect}
+            onDragMove={onDragMove}
+            isDesignMode={isDesignMode}
+        >
+            <div
+                className='card-component'
+                style={{
+                    transform: `translate(-50%, -50%) rotate(${rotation || 0}deg)`,
+                    cursor: isDesignMode && isDragging ? 'grab' : 'default',
+                    background: token.colorBgContainer,
+                    border: `1px solid ${token.colorBorderSecondary}`,
+                    pointerEvents: "auto"
+                }}
+                onMouseDown={handleMouseDown}
+                onClick={() => isDesignMode ? onSelect() : node.onClick?.(node)}
+            >
+                <Spin spinning={loading}>
+                    <div className='card-title'>{title || "-"}</div>
+                    <div className='card-detail'>
+                        <Row gutter={[16, 16]}>
+                            {listData?.map((item, index) =>
+                                <Col className="card-detail-item" span={24} key={index}>
+                                    <div className='card-detail-item'
+                                        onClick={(e) => {
+                                            if (item.refCustomPage) {
+                                                e.stopPropagation();
+                                                setShowRefPage(item);
+                                                setCustomOpen(true);
+                                            }
+                                        }}
+                                        style={item.refPageId && item.refPageTitle ? { width: "60%", whiteSpace: "nowrap" } : { width: "100%" }}>
+                                        <div className="card-detail-item-title">{item.title}：</div>
+                                        <div className="card-detail-item-value">{item.value || item.value === 0 ? item.value : "-"}</div>
+                                        {item.unit ? <div className='card-detail-item-unit'>{item.unit}</div> : ""}
+                                        {(index === 0 && state) ? <span style={{ marginLeft: '8px' }}><Tag color={stateColors[state] || "success"}>{state}</Tag></span> : ""}
+                                    </div>
+                                    {item.refPageId && item.refPageTitle ?
+                                        <div
+                                            className='refPage'
+                                            onClick={(e) => {
+                                                if (item.refPageOpenType) {
+                                                    e.stopPropagation();
+                                                    setShowRefPage(item);
+                                                }
+                                            }}>
+                                            <span style={{ color: item.refPageTitleColor || token.colorPrimary }}>{item.refPageTitle}</span>
+                                            <span style={{ color: item.refPageDataCountColor || token.colorText }}>{item.showRefPageDataCount ? item.refPageDataCount : ""}</span>
+                                        </div>
+                                        : ""}
+                                </Col>)
+                            }
+                        </Row>
+                    </div>
+                </Spin>
+            </div>
+            {showRefPage?.refPageOpenType === "table" ? (
+                <LtmplModal
+                    open={!!showRefPage}
+                    height="76vh"
+                    onCancel={() => setShowRefPage(undefined)}
+                    sourceId={showRefPage?.refPageId}
+                    defaultCriteriaValue={node.refPageParams || {}}
+                />
+            ) : null}
+            {showRefPage?.refPageOpenType === "detail" ?
+                <DtmplViewModal
+                    serverKey={null}
+                    onClose={() => setShowRefPage(undefined)}
+                    open={!!showRefPage}
+                    sourceId={showRefPage?.refPageId}
+                    code={node.refPageParams?.secondCriterion}
+                />
+                : null}
+            {showRefPage?.refPageOpenType === "edit" ?
+                <DtmplEditModal
+                    serverKey={null}
+                    onCancel={() => setShowRefPage(undefined)}
+                    onOk={() => {
+                        setShowRefPage(undefined);
+                        getData(node.dataSourceId[0], node.params);
+                    }}
+                    open={!!showRefPage}
+                    sourceId={showRefPage?.refPageId}
+                    code={node.refPageParams?.secondCriterion}
+                />
+                : null}
+            {customOpen ? <CustomDetailModalPage title={showRefPage?.refPageTitle} width={900} mainCode={null} sourceId={null} params={node?.params} customPath={showRefPage?.refCustomPage} open={customOpen}
+                onCancel={() => {
+                    setCustomOpen(false);
+                    setShowRefPage(undefined);
+                }}
+            /> : ""}
+        </HtmlBox >
+    );
+};
+
 export default Index;