aldehyde 0.2.478 → 0.2.480

package/src/aldehyde/draw-canvas-edit/components/setting-form/index.tsx

@@ -257,7 +257,9 @@ const Index = (props: Props) => {
     // 表单数据实时回显更新
     const formSetFieldsValue = () => {
         const nodeId = assetCurrent?.getAttr("id");
-        const temVal = _.cloneDeep(formData);
+        // 表单回显，同类型组件默认清空值再赋值
+        const allKey = formConfigs.reduce((total, item) => ({ ...total, [item.id]: undefined }), {})
+        const temVal = _.cloneDeep({ ...allKey, ...formData });
         Object.keys(temVal).forEach((key) => {  // 使用公共表单组件，转换指定类型值
             const extControlType = formConfigs.find((item: any) => item.id === key)?.extControlType;
             if (["yes-no-switch"].includes(extControlType)) { // 处理是否转换boolean值
@@ -265,10 +267,6 @@ const Index = (props: Props) => {
                 return;
             }
         });
-        const dataSourceConfig = formConfigs.find((item: any) => item.id === "dataSource");
-        if (dataSourceConfig) { // 数据源-无配置设置默认值
-            temVal["dataSource"] = temVal["dataSource"] || dataSourceConfig.defValue;
-        }
         form.setFieldsValue({ ...temVal, id: nodeId });
     }
 

package/src/aldehyde/draw-canvas-edit/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState, useCallback } from 'react';
 import { gunzipSync, strFromU8 } from 'fflate';
-import { Spin } from "antd";
+import { Spin, theme } from "antd";
 import { hexToUint8Array } from 'uint8array-extras';
 import HcserviceV3 from "../tmpl/hcservice-v3";
 import { Render } from './components/render';
@@ -28,10 +28,11 @@ const Index = (props: Props) => {
     const [assetCurrent, setAssetCurrent] = useState<Konva.Node>(); // 当前选中组件
     const [linkCurrent, setLinkCurrent] = useState<Konva.Line>(); // 当前选中连线
     const [texting, setTexting] = useState<boolean>(false); // 添加文本状态
-    const [showGrid, setShowGrid] = useState<boolean>(true); // 是否显示网格
+    const [showGrid, setShowGrid] = useState<boolean>(false); // 是否显示网格
     const [showAttract, setShowAttract] = useState<boolean>(true); // 是否显示磁吸
     const assetCurrentRef = useRef<Konva.Node>(null); // 当前选中组件Ref
     const [loading, setLoading] = useState<boolean>(false);
+    const { token: themeToken } = theme.useToken();
 
     // 获取视图数据
     const getViewData = async () => {
@@ -50,6 +51,7 @@ const Index = (props: Props) => {
         setLoading(false);
         // 重置画面数据
         await renderRef.current.importExportTool.restore(originalData as string);
+        await renderRef.current.positionTool.positionFit(); // 画布默认自适应居中
     }
 
     useEffect(() => {
@@ -66,6 +68,7 @@ const Index = (props: Props) => {
             showBg: true, showRuler: true, showRefLine: true,
             showPreview: false, showContextmenu: true,
             attractResize: true, attractBg: true, attractNode: true,
+            themeToken
         });
         renderRef.current = render;
         // 初始化设置
@@ -106,6 +109,7 @@ const Index = (props: Props) => {
             const { width, height } = boardRef.current.getBoundingClientRect();
             if (renderRef.current) {
                 renderRef.current.resize(width, height);
+                renderRef.current.positionTool.positionFit();
             } else {
                 initRender(width, height);
             }

package/src/aldehyde/draw-canvas-view/index.tsx

@@ -12,6 +12,7 @@ interface Props {
 
 const Index = (props: Props) => {
     const { recordCode } = props;
+    const [viewId, setViewId] = useState<string>();
     const [jsonData, setJsonData] = useState("{}"); // 画面数据
     const [loading, setLoading] = useState(false); // 加载状态
 
@@ -30,6 +31,7 @@ const Index = (props: Props) => {
         const originalData = strFromU8(decompressedBuffer);
         setLoading(false);
         setJsonData(originalData);
+        setViewId(data?.[0]?.id);
     }
 
     useEffect(() => {
@@ -42,7 +44,7 @@ const Index = (props: Props) => {
         return <div className="view-loading"><Spin /></div>;
     }
 
-    return <Viewer data={jsonData} />;
+    return <Viewer data={jsonData} viewId={viewId} recordCode={recordCode} />;
 };
 
 export default Index;

package/src/aldehyde/draw-canvas-view/view.tsx

@@ -1,212 +1,228 @@
-import React, { useEffect, useRef, useCallback } from 'react';
-import { Space, Button } from "antd";
-import { ExpandOutlined } from '@ant-design/icons';
-import chunk from "lodash/chunk";
-import HcserviceV3 from "../tmpl/hcservice-v3";
-import WebSocket from "../tmpl/web-socket";
-import { AssetSettings } from '../draw-canvas-edit/components/render/types';
-import { Render } from '../draw-canvas-edit/components/render';
-import './index.less';
-
-// nodeId组件ID
-type DataSourceConfig = { sourceId: string, nodeId: string } & { [key: string]: any };
-
-interface ViewerProps {
-  data?: string; // 画布 JSON 数据 
-  width?: number | string;
-  height?: number | string;
-  // 组件数据源初始化查询参数；公共参数、指定组件参数：例：{公共参数key:value,指定组件Id(编辑页获取):{参数key:value}}
-  initSearchParams?: { [key: string]: any },
-}
-
-const Index = (props: ViewerProps) => {
-  const { data, width = '100%', height = '100%', initSearchParams } = props;
-  const boardRef = useRef<HTMLDivElement>(null);
-  const stageRef = useRef<HTMLDivElement>(null);
-  const renderRef = useRef<Render | null>(null);
-  const observerRef = useRef<ResizeObserver | null>(null);
-  const wsRef = useRef(undefined); // 实时数据websocket连接
-  const subscribeRef = useRef(undefined); // 实时数据订阅
-
-  // 初始化渲染器（只读模式）
-  const initRender = useCallback(
-    (width: number, height: number) => {
-      if (renderRef.current || !stageRef.current) return;
-      const render = new Render(stageRef.current, {
-        width,
-        height,
-        showRuler: false, // 不需要标尺
-        showRefLine: false, // 不需要参考线
-        showPreview: false, // 不需要预览框
-        showContextmenu: false, // 不需要右键菜单
-        showBg: true,
-        readonly: true // ★ 只读模式
-      });
-      renderRef.current = render;
-      // 如果有数据，恢复画布
-      if (data) {
-        loadData(render, data);
-      }
-    },
-    [data]
-  );
-
-  // 更新组件数据->更新画面
-  const updateAssetSettings = (id: string, settings: Partial<AssetSettings>) => {
-    if (!renderRef.current || !id || !settings) return;
-    renderRef.current.updateAssetById(id, settings);
-  };
-
-  // all(所有数据源组件)、init(初始化请求组件)
-  const handleDataSourceParams = (nodes: { [key: string]: any }[]) => {
-    // publicParams 组件公共参数
-    const publicParams = Object.keys(initSearchParams || {}).reduce((total, next) => {
-      if (!nodes.find(node => node.id === next)) {
-        total[next] = initSearchParams[next];
-      }
-      return total;
-    }, {});
-    const dataSourceConfigs = nodes.reduce((total, next) => {
-      const settings = next.settings || {};
-      const temParams = { ...publicParams, ...(initSearchParams?.[next.id] || {}) }; // 指定组件传参,指定传参可覆盖公共
-      if (settings.isInitParams) { // 组件数据源接收外部参数，更新参数
-      }
-      if (settings.dataSource) { // 整合初始化请求/ws请求参数
-        const itemConfig = { sourceId: settings.dataSource, nodeId: next.id, ...(settings.isInitParams ? temParams : {}) };
-        if (settings.isInit) { // 初始化请求
-          total.initDataSource.push(itemConfig);
-        }
-        total.allDataSource.push(itemConfig);
-      }
-      return total;
-    }, { allDataSource: [], initDataSource: [] });
-    return dataSourceConfigs;
-  }
-
-  // 获取初始化组件数据
-  const getInitComponentData = async (dataSourceConfigs: DataSourceConfig[]) => {
-    if (!dataSourceConfigs.length) return;
-    const temSourceConfigs = chunk(dataSourceConfigs, 10); // 每批处理10个组件数据
-    temSourceConfigs.forEach(i => {
-      HcserviceV3.requestCharMultitData(null, JSON.stringify(i)).then(rs => {
-        const { status, ...data } = rs || {};
-        if (status === "success") {
-          for (const item in data) {  // 更新组件数据
-            //  updateAssetSettings(item, { data: data[item] || {} };
-          }
-        }
-      })
-    })
-  };
-
-  // 获取当前画面数据源配置
-  const getCharWSConfig = async (dataSourceConfigs: DataSourceConfig[]) => {
-    if (!dataSourceConfigs.length) return;
-    const sourceIds = dataSourceConfigs.map(r => r.sourceId);
-    const res = await HcserviceV3.requestCharWSConfig(null, sourceIds);
-    const wsSourceIds = Object.keys(res?.config || {});
-    if (!wsSourceIds?.length) {
-      return;
-    }
-    return dataSourceConfigs.filter(r => wsSourceIds.includes(r.sourceId));
-  }
-
-  // 实时订阅组件数据
-  const webSocketComponentData = async (dataSourceConfigs: DataSourceConfig[]) => {
-    if (subscribeRef.current) { subscribeRef.current.unsubscribe(); }
-    const temArr = await getCharWSConfig(dataSourceConfigs);
-    if (!temArr?.length) {
-      return;
-    }
-    wsRef.current = WebSocket.getInstance("v3/kk-ws");
-    // 订阅数据
-    subscribeRef.current = await wsRef.current.subscribe(``, { dataSourceConfigs: JSON.stringify(temArr) }, (data) => {
-      for (const item in data) {  // 更新组件数据
-        //  updateAssetSettings(item, { data: data[item] || {} };
-      }
-    });
-  }
-
-  // 获取所有组件-更新数据
-  const onAssetsLoaded = () => {
-    if (!renderRef.current) return;
-    const assets = renderRef.current.getAllAssets();
-    if (!assets?.length) return;
-    const { allDataSource, initDataSource } = handleDataSourceParams(assets);
-    getInitComponentData(initDataSource); // 初始化请求
-    webSocketComponentData(allDataSource); // ws订阅数据
-  }
-
-  // 加载画布数据
-  const loadData = useCallback(async (render: Render, jsonData: string) => {
-    try {
-      await render.importExportTool.restore(jsonData);
-      // 数据加载完成后自适应居中
-      render.positionTool.positionFit();
-      onAssetsLoaded();
-    } catch (e) {
-      console.error('Failed to load canvas data:', e);
-    }
-  }, []);
-
-  // 监听容器尺寸变化
-  useEffect(() => {
-    if (!boardRef.current) return;
-    const observer = new ResizeObserver(() => {
-      const { width, height } = boardRef.current.getBoundingClientRect();
-      if (renderRef.current) {
-        renderRef.current.resize(width, height); // 更新尺寸
-        renderRef.current.positionTool.positionFit(); // 自适应居中
-      } else {
-        initRender(width, height);
-      }
-    });
-    observer.observe(boardRef.current);
-    observerRef.current = observer;
-    return () => {
-      observer.disconnect();
-    };
-  }, []);
-
-  // 当外部 data 更新时，重新加载
-  useEffect(() => {
-    if (renderRef.current && data) {
-      loadData(renderRef.current, data);
-    }
-  }, [data, loadData]);
-
-  const handleFit = useCallback(() => {
-    if (!renderRef.current) return;
-    renderRef.current.positionTool.positionFit();
-  }, []);
-
-  // 清理
-  useEffect(() => {
-    return () => {
-      if (renderRef.current) {
-        renderRef.current.stage.destroy();
-        renderRef.current = null;
-      }
-      if (observerRef.current) {
-        observerRef.current.disconnect();
-        observerRef.current = null;
-      }
-    };
-  }, []);
-
-  return (
-    <div className="draw-viewer" style={{ width, height }}>
-      <div className="draw-viewer-toolbar">
-        <Space>
-          <Button type="text" className='fit' onClick={handleFit} icon={<ExpandOutlined />} />
-        </Space>
-      </div>
-      {/* 画布区域 */}
-      <div className="draw-viewer-content" ref={boardRef}>
-        <div ref={stageRef} />
-      </div>
-    </div>
-  );
-};
-
-export default Index;
+import React, { useEffect, useRef, useCallback } from 'react';
+import { Space, Button } from "antd";
+import { ExpandOutlined } from '@ant-design/icons';
+import chunk from "lodash/chunk";
+import HcserviceV3 from "../tmpl/hcservice-v3";
+import WebSocket from "../tmpl/web-socket";
+import { Render } from '../draw-canvas-edit/components/render';
+import './index.less';
+
+// 数据源请求结果
+interface DataSource {
+  config: { [key: string]: any };
+  value: {
+    config: { [key: string]: any };
+    value: { [key: string]: any }[]
+  }[];
+}
+
+interface ViewerProps {
+  data?: string; // 画布 JSON 数据 
+  viewId?: string; // 画面ID
+  recordCode: string; // 画面关联实例Code,用于数据源请求过滤
+  width?: number | string;
+  height?: number | string;
+  // 组件数据源初始化查询参数；公共参数、指定组件参数：例：{公共参数key:value,指定组件Id(编辑页获取):{参数key:value}}
+  initSearchParams?: { [key: string]: any },
+}
+
+const Index = (props: ViewerProps) => {
+  const { recordCode, viewId, data, width = '100%', height = '100%' } = props;
+  const boardRef = useRef<HTMLDivElement>(null);
+  const stageRef = useRef<HTMLDivElement>(null);
+  const renderRef = useRef<Render | null>(null);
+  const observerRef = useRef<ResizeObserver | null>(null);
+  const wsRef = useRef(undefined); // 实时数据websocket连接
+  const subscribeRef = useRef(undefined); // 实时数据订阅
+
+  // 初始化渲染器（只读模式）
+  const initRender = useCallback(
+    (width: number, height: number) => {
+      if (renderRef.current || !stageRef.current) return;
+      const render = new Render(stageRef.current, {
+        width,
+        height,
+        showRuler: false, // 不需要标尺
+        showRefLine: false, // 不需要参考线
+        showPreview: false, // 不需要预览框
+        showContextmenu: false, // 不需要右键菜单
+        showBg: true,
+        readonly: true // ★ 只读模式
+      });
+      renderRef.current = render;
+      // 如果有数据，恢复画布
+      if (data) {
+        loadData(render, data);
+      }
+    },
+    [data]
+  );
+
+  // 更新指定组件设置
+  const updateComponentSetting = (node: { [key: string]: any }, data: DataSource) => {
+    const { componentType, id, settings } = node;
+    let temSetting;
+    switch (componentType) {
+      case "workstation": // 工位（v1:工位状态枚举颜色，d1：工位编号）
+        const temVals = data.value?.[0]?.value;
+        const value = temVals.find(r => r.d1 === settings.workstationNumber)?.v1;
+        temSetting = value ? { fill: value } : undefined;
+        break;
+      default:
+        break;
+    }
+    temSetting && renderRef.current.updateAssetById(id, temSetting);
+  }
+
+  // 更新组件数据->更新画面
+  const updateAssetSettings = (nodes: { [key: string]: any }[], data: DataSource) => {
+    if (!renderRef.current || !nodes?.length || !data) return;
+    nodes.forEach(node => updateComponentSetting(node, data));
+  };
+
+  // 整理组件数据源
+  const handleDataSourceParams = (nodes: { [key: string]: any }[]) => {
+    const dataSourceConfigs = nodes.reduce((total, item) => {
+      const { dataSource } = item.settings || {};
+      if (dataSource && total[dataSource]) {
+        total[dataSource].nodes.push(item);
+      } else if (dataSource) {
+        total[dataSource] = { params: { sourceId: dataSource, chartCode: dataSource, secondCriterion: recordCode }, nodes: [item] };
+      }
+      return total;
+    }, {});
+    return dataSourceConfigs;
+  }
+
+  // 获取初始化组件数据
+  const getInitComponentData = async (dataSourceConfigs: { [key: string]: any }) => {
+    const dataSources = Object.keys(dataSourceConfigs).map(r => dataSourceConfigs[r].params);
+    if (!dataSources.length) return;
+    const temSourceConfigs = chunk(dataSources, 10); // 每批处理10个组件数据
+    temSourceConfigs.forEach(i => {
+      HcserviceV3.requestCharMultitData(null, JSON.stringify(i)).then(rs => {
+        const { status, ...data } = rs || {};
+        if (status === "success") {
+          for (const item in data) {  // 更新组件数据
+            updateAssetSettings(dataSourceConfigs[item].nodes, data[item]);
+          }
+        }
+      })
+    })
+  };
+
+  // 获取当前画面数据源配置
+  const getCharWSConfig = async (dataSourceConfigs: { [key: string]: any }) => {
+    const dataSourceIds = Object.keys(dataSourceConfigs).map(r => dataSourceConfigs[r].params.sourceId);
+    if (!dataSourceIds.length) return;
+    const res = await HcserviceV3.requestCharWSConfig(null, dataSourceIds);
+    const wsSourceIds = Object.keys(res?.config || {});
+    if (!wsSourceIds?.length) {
+      return;
+    }
+    return wsSourceIds.map(r => dataSourceConfigs[r].params);
+  }
+
+  // 实时订阅组件数据
+  const webSocketComponentData = async (dataSourceConfigs: { [key: string]: any }) => {
+    if (subscribeRef.current) { subscribeRef.current.unsubscribe(); }
+    const temArr = await getCharWSConfig(dataSourceConfigs);
+    if (!viewId || !temArr?.length) {
+      return;
+    }
+    wsRef.current = WebSocket.getInstance("v3/kk-ws");
+    // 订阅数据
+    subscribeRef.current = await wsRef.current.subscribe(`/user/queue/chart-data/${viewId}`, { dataSourceConfigs: JSON.stringify(temArr) }, (data) => {
+      for (const item in data) {  // 更新组件数据
+        updateAssetSettings(dataSourceConfigs[item].nodes, data[item]);
+      }
+    });
+  }
+
+  // 获取所有组件-更新数据
+  const onAssetsLoaded = () => {
+    if (!renderRef.current) return;
+    const assets = renderRef.current.getAllAssets();
+    if (!assets?.length) return;
+    const allDataSource = handleDataSourceParams(assets);
+    getInitComponentData(allDataSource); // 初始化请求
+    webSocketComponentData(allDataSource); // ws订阅数据
+  }
+
+  // 加载画布数据
+  const loadData = useCallback(async (render: Render, jsonData: string) => {
+    try {
+      await render.importExportTool.restore(jsonData);
+      // 数据加载完成后自适应居中
+      render.positionTool.positionFit();
+      onAssetsLoaded();
+    } catch (e) {
+      console.error('Failed to load canvas data:', e);
+    }
+  }, []);
+
+  // 监听容器尺寸变化
+  useEffect(() => {
+    if (!boardRef.current) return;
+    const observer = new ResizeObserver(() => {
+      if (!boardRef.current) return;
+      const { width, height } = boardRef.current.getBoundingClientRect();
+      if (renderRef.current) {
+        renderRef.current.resize(width, height); // 更新尺寸
+        renderRef.current.positionTool.positionFit(); // 自适应居中
+      } else {
+        initRender(width, height);
+      }
+    });
+    observer.observe(boardRef.current);
+    observerRef.current = observer;
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  // 当外部 data 更新时，重新加载
+  useEffect(() => {
+    if (renderRef.current && data) {
+      loadData(renderRef.current, data);
+    }
+  }, [data, loadData]);
+
+  const handleFit = useCallback(() => {
+    if (!renderRef.current) return;
+    renderRef.current.positionTool.positionFit();
+  }, []);
+
+  // 清理
+  useEffect(() => {
+    return () => {
+      if (renderRef.current) {
+        renderRef.current.stage.destroy();
+        renderRef.current = null;
+      }
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+        observerRef.current = null;
+      }
+      if (subscribeRef.current) { // 清理订阅
+        subscribeRef.current.unsubscribe();
+      }
+    };
+  }, []);
+
+  return (
+    <div className="draw-viewer" style={{ width, height }}>
+      <div className="draw-viewer-toolbar">
+        <Space>
+          <Button type="text" className='fit' onClick={handleFit} icon={<ExpandOutlined />} />
+        </Space>
+      </div>
+      {/* 画布区域 */}
+      <div className="draw-viewer-content" ref={boardRef}>
+        <div ref={stageRef} />
+      </div>
+    </div>
+  );
+};
+
+export default Index;