aldehyde 0.2.479 → 0.2.480

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (153) hide show
  1. package/lib/controls/2dEditor/components/card.js +2 -2
  2. package/lib/controls/2dEditor/components/card.js.map +1 -1
  3. package/lib/controls/entity-select/entity-select.js +3 -3
  4. package/lib/controls/entity-select/entity-select.js.map +1 -1
  5. package/lib/draw-canvas-edit/components/asset-bar/index.d.ts +1 -0
  6. package/lib/draw-canvas-edit/components/asset-bar/index.d.ts.map +1 -1
  7. package/lib/draw-canvas-edit/components/asset-bar/index.js +8 -6
  8. package/lib/draw-canvas-edit/components/asset-bar/index.js.map +1 -1
  9. package/lib/draw-canvas-edit/components/main-header/index.less +3 -0
  10. package/lib/draw-canvas-edit/components/render/draws/bg-draw.d.ts.map +1 -1
  11. package/lib/draw-canvas-edit/components/render/draws/bg-draw.js +14 -1
  12. package/lib/draw-canvas-edit/components/render/draws/bg-draw.js.map +1 -1
  13. package/lib/draw-canvas-edit/components/render/draws/contextmenu-draw.d.ts.map +1 -1
  14. package/lib/draw-canvas-edit/components/render/draws/contextmenu-draw.js +30 -6
  15. package/lib/draw-canvas-edit/components/render/draws/contextmenu-draw.js.map +1 -1
  16. package/lib/draw-canvas-edit/components/render/graphs/bezier.js +3 -3
  17. package/lib/draw-canvas-edit/components/render/graphs/bezier.js.map +1 -1
  18. package/lib/draw-canvas-edit/components/render/graphs/circle.js +2 -2
  19. package/lib/draw-canvas-edit/components/render/graphs/circle.js.map +1 -1
  20. package/lib/draw-canvas-edit/components/render/graphs/curve.js +3 -3
  21. package/lib/draw-canvas-edit/components/render/graphs/curve.js.map +1 -1
  22. package/lib/draw-canvas-edit/components/render/graphs/line.js +3 -3
  23. package/lib/draw-canvas-edit/components/render/graphs/line.js.map +1 -1
  24. package/lib/draw-canvas-edit/components/render/graphs/rect.js +2 -2
  25. package/lib/draw-canvas-edit/components/render/graphs/rect.js.map +1 -1
  26. package/lib/draw-canvas-edit/components/render/handlers/drag-outside-handlers.d.ts +1 -1
  27. package/lib/draw-canvas-edit/components/render/handlers/drag-outside-handlers.d.ts.map +1 -1
  28. package/lib/draw-canvas-edit/components/render/handlers/drag-outside-handlers.js +58 -122
  29. package/lib/draw-canvas-edit/components/render/handlers/drag-outside-handlers.js.map +1 -1
  30. package/lib/draw-canvas-edit/components/render/handlers/graph-handlers.d.ts.map +1 -1
  31. package/lib/draw-canvas-edit/components/render/handlers/graph-handlers.js +2 -1
  32. package/lib/draw-canvas-edit/components/render/handlers/graph-handlers.js.map +1 -1
  33. package/lib/draw-canvas-edit/components/render/handlers/selection-handlers.d.ts.map +1 -1
  34. package/lib/draw-canvas-edit/components/render/handlers/selection-handlers.js +11 -4
  35. package/lib/draw-canvas-edit/components/render/handlers/selection-handlers.js.map +1 -1
  36. package/lib/draw-canvas-edit/components/render/index.d.ts +3 -1
  37. package/lib/draw-canvas-edit/components/render/index.d.ts.map +1 -1
  38. package/lib/draw-canvas-edit/components/render/index.js +37 -26
  39. package/lib/draw-canvas-edit/components/render/index.js.map +1 -1
  40. package/lib/draw-canvas-edit/components/render/tools/attract-tool.d.ts +2 -1
  41. package/lib/draw-canvas-edit/components/render/tools/attract-tool.d.ts.map +1 -1
  42. package/lib/draw-canvas-edit/components/render/tools/attract-tool.js +33 -8
  43. package/lib/draw-canvas-edit/components/render/tools/attract-tool.js.map +1 -1
  44. package/lib/draw-canvas-edit/components/render/tools/component-factory.d.ts +62 -0
  45. package/lib/draw-canvas-edit/components/render/tools/component-factory.d.ts.map +1 -0
  46. package/lib/draw-canvas-edit/components/render/tools/component-factory.js +289 -0
  47. package/lib/draw-canvas-edit/components/render/tools/component-factory.js.map +1 -0
  48. package/lib/draw-canvas-edit/components/render/tools/copy-tool.d.ts +0 -2
  49. package/lib/draw-canvas-edit/components/render/tools/copy-tool.d.ts.map +1 -1
  50. package/lib/draw-canvas-edit/components/render/tools/copy-tool.js +23 -45
  51. package/lib/draw-canvas-edit/components/render/tools/copy-tool.js.map +1 -1
  52. package/lib/draw-canvas-edit/components/render/tools/import-export-tool.d.ts.map +1 -1
  53. package/lib/draw-canvas-edit/components/render/tools/import-export-tool.js +20 -41
  54. package/lib/draw-canvas-edit/components/render/tools/import-export-tool.js.map +1 -1
  55. package/lib/draw-canvas-edit/components/render/tools/index.d.ts +1 -0
  56. package/lib/draw-canvas-edit/components/render/tools/index.d.ts.map +1 -1
  57. package/lib/draw-canvas-edit/components/render/tools/index.js +1 -0
  58. package/lib/draw-canvas-edit/components/render/tools/index.js.map +1 -1
  59. package/lib/draw-canvas-edit/components/render/tools/selection-tool.d.ts.map +1 -1
  60. package/lib/draw-canvas-edit/components/render/tools/selection-tool.js +32 -19
  61. package/lib/draw-canvas-edit/components/render/tools/selection-tool.js.map +1 -1
  62. package/lib/draw-canvas-edit/components/render/types.d.ts +8 -6
  63. package/lib/draw-canvas-edit/components/render/types.d.ts.map +1 -1
  64. package/lib/draw-canvas-edit/components/render/types.js.map +1 -1
  65. package/lib/draw-canvas-edit/components/setting-form/imag-upload.d.ts.map +1 -1
  66. package/lib/draw-canvas-edit/components/setting-form/imag-upload.js +2 -2
  67. package/lib/draw-canvas-edit/components/setting-form/imag-upload.js.map +1 -1
  68. package/lib/draw-canvas-edit/components/setting-form/index.d.ts.map +1 -1
  69. package/lib/draw-canvas-edit/components/setting-form/index.js +3 -5
  70. package/lib/draw-canvas-edit/components/setting-form/index.js.map +1 -1
  71. package/lib/draw-canvas-edit/index.d.ts.map +1 -1
  72. package/lib/draw-canvas-edit/index.js +4 -1
  73. package/lib/draw-canvas-edit/index.js.map +1 -1
  74. package/lib/draw-canvas-view/index.d.ts.map +1 -1
  75. package/lib/draw-canvas-view/index.js +4 -2
  76. package/lib/draw-canvas-view/index.js.map +1 -1
  77. package/lib/draw-canvas-view/view.d.ts +2 -0
  78. package/lib/draw-canvas-view/view.d.ts.map +1 -1
  79. package/lib/draw-canvas-view/view.js +46 -35
  80. package/lib/draw-canvas-view/view.js.map +1 -1
  81. package/lib/form/criteria-form.js +17 -17
  82. package/lib/form/criteria-form.js.map +1 -1
  83. package/lib/form/dtmpl-form.d.ts.map +1 -1
  84. package/lib/form/dtmpl-form.js +9 -0
  85. package/lib/form/dtmpl-form.js.map +1 -1
  86. package/lib/form/form-Item-group.js +2 -2
  87. package/lib/form/form-Item-group.js.map +1 -1
  88. package/lib/module/dtmpl-edit-card.js +4 -4
  89. package/lib/module/dtmpl-edit-card.js.map +1 -1
  90. package/lib/module/dtmpl-edit-page.d.ts.map +1 -1
  91. package/lib/module/dtmpl-edit-page.js +7 -4
  92. package/lib/module/dtmpl-edit-page.js.map +1 -1
  93. package/lib/table/act-table.js +8 -8
  94. package/lib/table/act-table.js.map +1 -1
  95. package/lib/table/modal-select-table.d.ts +2 -2
  96. package/lib/table/modal-select-table.d.ts.map +1 -1
  97. package/lib/table/modal-select-table.js +10 -10
  98. package/lib/table/modal-select-table.js.map +1 -1
  99. package/lib/table/relation-table.d.ts +2 -2
  100. package/lib/table/relation-table.js +1 -1
  101. package/lib/table/relation-table.js.map +1 -1
  102. package/lib/table/select-table.js +2 -2
  103. package/lib/table/select-table.js.map +1 -1
  104. package/lib/tmpl/hc-data-source.js +2 -2
  105. package/lib/tmpl/hc-data-source.js.map +1 -1
  106. package/lib/tmpl/interface.d.ts +7 -7
  107. package/lib/tmpl/interface.d.ts.map +1 -1
  108. package/lib/tmpl/tmpl-config-analysis.d.ts.map +1 -1
  109. package/lib/tmpl/tmpl-config-analysis.js +23 -23
  110. package/lib/tmpl/tmpl-config-analysis.js.map +1 -1
  111. package/lib/units/index.js +3 -3
  112. package/lib/units/index.js.map +1 -1
  113. package/package.json +1 -1
  114. package/src/aldehyde/controls/2dEditor/components/card.tsx +2 -2
  115. package/src/aldehyde/controls/entity-select/entity-select.tsx +3 -3
  116. package/src/aldehyde/draw-canvas-edit/components/asset-bar/index.tsx +8 -6
  117. package/src/aldehyde/draw-canvas-edit/components/main-header/index.less +3 -0
  118. package/src/aldehyde/draw-canvas-edit/components/render/draws/bg-draw.ts +17 -1
  119. package/src/aldehyde/draw-canvas-edit/components/render/draws/contextmenu-draw.ts +30 -6
  120. package/src/aldehyde/draw-canvas-edit/components/render/graphs/bezier.ts +3 -3
  121. package/src/aldehyde/draw-canvas-edit/components/render/graphs/circle.ts +2 -2
  122. package/src/aldehyde/draw-canvas-edit/components/render/graphs/curve.ts +3 -3
  123. package/src/aldehyde/draw-canvas-edit/components/render/graphs/line.ts +3 -3
  124. package/src/aldehyde/draw-canvas-edit/components/render/graphs/rect.ts +2 -2
  125. package/src/aldehyde/draw-canvas-edit/components/render/handlers/drag-outside-handlers.ts +45 -130
  126. package/src/aldehyde/draw-canvas-edit/components/render/handlers/graph-handlers.ts +7 -1
  127. package/src/aldehyde/draw-canvas-edit/components/render/handlers/selection-handlers.ts +11 -5
  128. package/src/aldehyde/draw-canvas-edit/components/render/index.ts +38 -29
  129. package/src/aldehyde/draw-canvas-edit/components/render/tools/attract-tool.ts +30 -10
  130. package/src/aldehyde/draw-canvas-edit/components/render/tools/component-factory.ts +302 -0
  131. package/src/aldehyde/draw-canvas-edit/components/render/tools/copy-tool.ts +24 -46
  132. package/src/aldehyde/draw-canvas-edit/components/render/tools/import-export-tool.ts +22 -46
  133. package/src/aldehyde/draw-canvas-edit/components/render/tools/index.ts +1 -0
  134. package/src/aldehyde/draw-canvas-edit/components/render/tools/selection-tool.ts +34 -23
  135. package/src/aldehyde/draw-canvas-edit/components/render/types.ts +6 -6
  136. package/src/aldehyde/draw-canvas-edit/components/setting-form/imag-upload.tsx +2 -1
  137. package/src/aldehyde/draw-canvas-edit/components/setting-form/index.tsx +3 -5
  138. package/src/aldehyde/draw-canvas-edit/index.tsx +4 -1
  139. package/src/aldehyde/draw-canvas-view/index.tsx +3 -1
  140. package/src/aldehyde/draw-canvas-view/view.tsx +228 -212
  141. package/src/aldehyde/form/criteria-form.tsx +18 -18
  142. package/src/aldehyde/form/dtmpl-form.tsx +9 -0
  143. package/src/aldehyde/form/form-Item-group.tsx +2 -2
  144. package/src/aldehyde/module/dtmpl-edit-card.tsx +4 -4
  145. package/src/aldehyde/module/dtmpl-edit-page.tsx +7 -4
  146. package/src/aldehyde/table/act-table.tsx +8 -8
  147. package/src/aldehyde/table/modal-select-table.tsx +10 -10
  148. package/src/aldehyde/table/relation-table.tsx +1 -1
  149. package/src/aldehyde/table/select-table.tsx +2 -2
  150. package/src/aldehyde/tmpl/hc-data-source.tsx +2 -2
  151. package/src/aldehyde/tmpl/interface.tsx +7 -7
  152. package/src/aldehyde/tmpl/tmpl-config-analysis.tsx +23 -24
  153. package/src/aldehyde/units/index.tsx +3 -3
@@ -257,7 +257,9 @@ const Index = (props: Props) => {
257
257
  // 表单数据实时回显更新
258
258
  const formSetFieldsValue = () => {
259
259
  const nodeId = assetCurrent?.getAttr("id");
260
- const temVal = _.cloneDeep(formData);
260
+ // 表单回显,同类型组件默认清空值再赋值
261
+ const allKey = formConfigs.reduce((total, item) => ({ ...total, [item.id]: undefined }), {})
262
+ const temVal = _.cloneDeep({ ...allKey, ...formData });
261
263
  Object.keys(temVal).forEach((key) => { // 使用公共表单组件,转换指定类型值
262
264
  const extControlType = formConfigs.find((item: any) => item.id === key)?.extControlType;
263
265
  if (["yes-no-switch"].includes(extControlType)) { // 处理是否转换boolean值
@@ -265,10 +267,6 @@ const Index = (props: Props) => {
265
267
  return;
266
268
  }
267
269
  });
268
- const dataSourceConfig = formConfigs.find((item: any) => item.id === "dataSource");
269
- if (dataSourceConfig) { // 数据源-无配置设置默认值
270
- temVal["dataSource"] = temVal["dataSource"] || dataSourceConfig.defValue;
271
- }
272
270
  form.setFieldsValue({ ...temVal, id: nodeId });
273
271
  }
274
272
 
@@ -1,6 +1,6 @@
1
1
  import React, { useEffect, useRef, useState, useCallback } from 'react';
2
2
  import { gunzipSync, strFromU8 } from 'fflate';
3
- import { Spin } from "antd";
3
+ import { Spin, theme } from "antd";
4
4
  import { hexToUint8Array } from 'uint8array-extras';
5
5
  import HcserviceV3 from "../tmpl/hcservice-v3";
6
6
  import { Render } from './components/render';
@@ -32,6 +32,7 @@ const Index = (props: Props) => {
32
32
  const [showAttract, setShowAttract] = useState<boolean>(true); // 是否显示磁吸
33
33
  const assetCurrentRef = useRef<Konva.Node>(null); // 当前选中组件Ref
34
34
  const [loading, setLoading] = useState<boolean>(false);
35
+ const { token: themeToken } = theme.useToken();
35
36
 
36
37
  // 获取视图数据
37
38
  const getViewData = async () => {
@@ -67,6 +68,7 @@ const Index = (props: Props) => {
67
68
  showBg: true, showRuler: true, showRefLine: true,
68
69
  showPreview: false, showContextmenu: true,
69
70
  attractResize: true, attractBg: true, attractNode: true,
71
+ themeToken
70
72
  });
71
73
  renderRef.current = render;
72
74
  // 初始化设置
@@ -107,6 +109,7 @@ const Index = (props: Props) => {
107
109
  const { width, height } = boardRef.current.getBoundingClientRect();
108
110
  if (renderRef.current) {
109
111
  renderRef.current.resize(width, height);
112
+ renderRef.current.positionTool.positionFit();
110
113
  } else {
111
114
  initRender(width, height);
112
115
  }
@@ -12,6 +12,7 @@ interface Props {
12
12
 
13
13
  const Index = (props: Props) => {
14
14
  const { recordCode } = props;
15
+ const [viewId, setViewId] = useState<string>();
15
16
  const [jsonData, setJsonData] = useState("{}"); // 画面数据
16
17
  const [loading, setLoading] = useState(false); // 加载状态
17
18
 
@@ -30,6 +31,7 @@ const Index = (props: Props) => {
30
31
  const originalData = strFromU8(decompressedBuffer);
31
32
  setLoading(false);
32
33
  setJsonData(originalData);
34
+ setViewId(data?.[0]?.id);
33
35
  }
34
36
 
35
37
  useEffect(() => {
@@ -42,7 +44,7 @@ const Index = (props: Props) => {
42
44
  return <div className="view-loading"><Spin /></div>;
43
45
  }
44
46
 
45
- return <Viewer data={jsonData} />;
47
+ return <Viewer data={jsonData} viewId={viewId} recordCode={recordCode} />;
46
48
  };
47
49
 
48
50
  export default Index;
@@ -1,212 +1,228 @@
1
- import React, { useEffect, useRef, useCallback } from 'react';
2
- import { Space, Button } from "antd";
3
- import { ExpandOutlined } from '@ant-design/icons';
4
- import chunk from "lodash/chunk";
5
- import HcserviceV3 from "../tmpl/hcservice-v3";
6
- import WebSocket from "../tmpl/web-socket";
7
- import { AssetSettings } from '../draw-canvas-edit/components/render/types';
8
- import { Render } from '../draw-canvas-edit/components/render';
9
- import './index.less';
10
-
11
- // nodeId组件ID
12
- type DataSourceConfig = { sourceId: string, nodeId: string } & { [key: string]: any };
13
-
14
- interface ViewerProps {
15
- data?: string; // 画布 JSON 数据
16
- width?: number | string;
17
- height?: number | string;
18
- // 组件数据源初始化查询参数;公共参数、指定组件参数:例:{公共参数key:value,指定组件Id(编辑页获取):{参数key:value}}
19
- initSearchParams?: { [key: string]: any },
20
- }
21
-
22
- const Index = (props: ViewerProps) => {
23
- const { data, width = '100%', height = '100%', initSearchParams } = props;
24
- const boardRef = useRef<HTMLDivElement>(null);
25
- const stageRef = useRef<HTMLDivElement>(null);
26
- const renderRef = useRef<Render | null>(null);
27
- const observerRef = useRef<ResizeObserver | null>(null);
28
- const wsRef = useRef(undefined); // 实时数据websocket连接
29
- const subscribeRef = useRef(undefined); // 实时数据订阅
30
-
31
- // 初始化渲染器(只读模式)
32
- const initRender = useCallback(
33
- (width: number, height: number) => {
34
- if (renderRef.current || !stageRef.current) return;
35
- const render = new Render(stageRef.current, {
36
- width,
37
- height,
38
- showRuler: false, // 不需要标尺
39
- showRefLine: false, // 不需要参考线
40
- showPreview: false, // 不需要预览框
41
- showContextmenu: false, // 不需要右键菜单
42
- showBg: true,
43
- readonly: true // ★ 只读模式
44
- });
45
- renderRef.current = render;
46
- // 如果有数据,恢复画布
47
- if (data) {
48
- loadData(render, data);
49
- }
50
- },
51
- [data]
52
- );
53
-
54
- // 更新组件数据->更新画面
55
- const updateAssetSettings = (id: string, settings: Partial<AssetSettings>) => {
56
- if (!renderRef.current || !id || !settings) return;
57
- renderRef.current.updateAssetById(id, settings);
58
- };
59
-
60
- // all(所有数据源组件)、init(初始化请求组件)
61
- const handleDataSourceParams = (nodes: { [key: string]: any }[]) => {
62
- // publicParams 组件公共参数
63
- const publicParams = Object.keys(initSearchParams || {}).reduce((total, next) => {
64
- if (!nodes.find(node => node.id === next)) {
65
- total[next] = initSearchParams[next];
66
- }
67
- return total;
68
- }, {});
69
- const dataSourceConfigs = nodes.reduce((total, next) => {
70
- const settings = next.settings || {};
71
- const temParams = { ...publicParams, ...(initSearchParams?.[next.id] || {}) }; // 指定组件传参,指定传参可覆盖公共
72
- if (settings.isInitParams) { // 组件数据源接收外部参数,更新参数
73
- }
74
- if (settings.dataSource) { // 整合初始化请求/ws请求参数
75
- const itemConfig = { sourceId: settings.dataSource, nodeId: next.id, ...(settings.isInitParams ? temParams : {}) };
76
- if (settings.isInit) { // 初始化请求
77
- total.initDataSource.push(itemConfig);
78
- }
79
- total.allDataSource.push(itemConfig);
80
- }
81
- return total;
82
- }, { allDataSource: [], initDataSource: [] });
83
- return dataSourceConfigs;
84
- }
85
-
86
- // 获取初始化组件数据
87
- const getInitComponentData = async (dataSourceConfigs: DataSourceConfig[]) => {
88
- if (!dataSourceConfigs.length) return;
89
- const temSourceConfigs = chunk(dataSourceConfigs, 10); // 每批处理10个组件数据
90
- temSourceConfigs.forEach(i => {
91
- HcserviceV3.requestCharMultitData(null, JSON.stringify(i)).then(rs => {
92
- const { status, ...data } = rs || {};
93
- if (status === "success") {
94
- for (const item in data) { // 更新组件数据
95
- // updateAssetSettings(item, { data: data[item] || {} };
96
- }
97
- }
98
- })
99
- })
100
- };
101
-
102
- // 获取当前画面数据源配置
103
- const getCharWSConfig = async (dataSourceConfigs: DataSourceConfig[]) => {
104
- if (!dataSourceConfigs.length) return;
105
- const sourceIds = dataSourceConfigs.map(r => r.sourceId);
106
- const res = await HcserviceV3.requestCharWSConfig(null, sourceIds);
107
- const wsSourceIds = Object.keys(res?.config || {});
108
- if (!wsSourceIds?.length) {
109
- return;
110
- }
111
- return dataSourceConfigs.filter(r => wsSourceIds.includes(r.sourceId));
112
- }
113
-
114
- // 实时订阅组件数据
115
- const webSocketComponentData = async (dataSourceConfigs: DataSourceConfig[]) => {
116
- if (subscribeRef.current) { subscribeRef.current.unsubscribe(); }
117
- const temArr = await getCharWSConfig(dataSourceConfigs);
118
- if (!temArr?.length) {
119
- return;
120
- }
121
- wsRef.current = WebSocket.getInstance("v3/kk-ws");
122
- // 订阅数据
123
- subscribeRef.current = await wsRef.current.subscribe(``, { dataSourceConfigs: JSON.stringify(temArr) }, (data) => {
124
- for (const item in data) { // 更新组件数据
125
- // updateAssetSettings(item, { data: data[item] || {} };
126
- }
127
- });
128
- }
129
-
130
- // 获取所有组件-更新数据
131
- const onAssetsLoaded = () => {
132
- if (!renderRef.current) return;
133
- const assets = renderRef.current.getAllAssets();
134
- if (!assets?.length) return;
135
- const { allDataSource, initDataSource } = handleDataSourceParams(assets);
136
- getInitComponentData(initDataSource); // 初始化请求
137
- webSocketComponentData(allDataSource); // ws订阅数据
138
- }
139
-
140
- // 加载画布数据
141
- const loadData = useCallback(async (render: Render, jsonData: string) => {
142
- try {
143
- await render.importExportTool.restore(jsonData);
144
- // 数据加载完成后自适应居中
145
- render.positionTool.positionFit();
146
- onAssetsLoaded();
147
- } catch (e) {
148
- console.error('Failed to load canvas data:', e);
149
- }
150
- }, []);
151
-
152
- // 监听容器尺寸变化
153
- useEffect(() => {
154
- if (!boardRef.current) return;
155
- const observer = new ResizeObserver(() => {
156
- const { width, height } = boardRef.current.getBoundingClientRect();
157
- if (renderRef.current) {
158
- renderRef.current.resize(width, height); // 更新尺寸
159
- renderRef.current.positionTool.positionFit(); // 自适应居中
160
- } else {
161
- initRender(width, height);
162
- }
163
- });
164
- observer.observe(boardRef.current);
165
- observerRef.current = observer;
166
- return () => {
167
- observer.disconnect();
168
- };
169
- }, []);
170
-
171
- // 当外部 data 更新时,重新加载
172
- useEffect(() => {
173
- if (renderRef.current && data) {
174
- loadData(renderRef.current, data);
175
- }
176
- }, [data, loadData]);
177
-
178
- const handleFit = useCallback(() => {
179
- if (!renderRef.current) return;
180
- renderRef.current.positionTool.positionFit();
181
- }, []);
182
-
183
- // 清理
184
- useEffect(() => {
185
- return () => {
186
- if (renderRef.current) {
187
- renderRef.current.stage.destroy();
188
- renderRef.current = null;
189
- }
190
- if (observerRef.current) {
191
- observerRef.current.disconnect();
192
- observerRef.current = null;
193
- }
194
- };
195
- }, []);
196
-
197
- return (
198
- <div className="draw-viewer" style={{ width, height }}>
199
- <div className="draw-viewer-toolbar">
200
- <Space>
201
- <Button type="text" className='fit' onClick={handleFit} icon={<ExpandOutlined />} />
202
- </Space>
203
- </div>
204
- {/* 画布区域 */}
205
- <div className="draw-viewer-content" ref={boardRef}>
206
- <div ref={stageRef} />
207
- </div>
208
- </div>
209
- );
210
- };
211
-
212
- export default Index;
1
+ import React, { useEffect, useRef, useCallback } from 'react';
2
+ import { Space, Button } from "antd";
3
+ import { ExpandOutlined } from '@ant-design/icons';
4
+ import chunk from "lodash/chunk";
5
+ import HcserviceV3 from "../tmpl/hcservice-v3";
6
+ import WebSocket from "../tmpl/web-socket";
7
+ import { Render } from '../draw-canvas-edit/components/render';
8
+ import './index.less';
9
+
10
+ // 数据源请求结果
11
+ interface DataSource {
12
+ config: { [key: string]: any };
13
+ value: {
14
+ config: { [key: string]: any };
15
+ value: { [key: string]: any }[]
16
+ }[];
17
+ }
18
+
19
+ interface ViewerProps {
20
+ data?: string; // 画布 JSON 数据
21
+ viewId?: string; // 画面ID
22
+ recordCode: string; // 画面关联实例Code,用于数据源请求过滤
23
+ width?: number | string;
24
+ height?: number | string;
25
+ // 组件数据源初始化查询参数;公共参数、指定组件参数:例:{公共参数key:value,指定组件Id(编辑页获取):{参数key:value}}
26
+ initSearchParams?: { [key: string]: any },
27
+ }
28
+
29
+ const Index = (props: ViewerProps) => {
30
+ const { recordCode, viewId, data, width = '100%', height = '100%' } = props;
31
+ const boardRef = useRef<HTMLDivElement>(null);
32
+ const stageRef = useRef<HTMLDivElement>(null);
33
+ const renderRef = useRef<Render | null>(null);
34
+ const observerRef = useRef<ResizeObserver | null>(null);
35
+ const wsRef = useRef(undefined); // 实时数据websocket连接
36
+ const subscribeRef = useRef(undefined); // 实时数据订阅
37
+
38
+ // 初始化渲染器(只读模式)
39
+ const initRender = useCallback(
40
+ (width: number, height: number) => {
41
+ if (renderRef.current || !stageRef.current) return;
42
+ const render = new Render(stageRef.current, {
43
+ width,
44
+ height,
45
+ showRuler: false, // 不需要标尺
46
+ showRefLine: false, // 不需要参考线
47
+ showPreview: false, // 不需要预览框
48
+ showContextmenu: false, // 不需要右键菜单
49
+ showBg: true,
50
+ readonly: true // ★ 只读模式
51
+ });
52
+ renderRef.current = render;
53
+ // 如果有数据,恢复画布
54
+ if (data) {
55
+ loadData(render, data);
56
+ }
57
+ },
58
+ [data]
59
+ );
60
+
61
+ // 更新指定组件设置
62
+ const updateComponentSetting = (node: { [key: string]: any }, data: DataSource) => {
63
+ const { componentType, id, settings } = node;
64
+ let temSetting;
65
+ switch (componentType) {
66
+ case "workstation": // 工位(v1:工位状态枚举颜色,d1:工位编号)
67
+ const temVals = data.value?.[0]?.value;
68
+ const value = temVals.find(r => r.d1 === settings.workstationNumber)?.v1;
69
+ temSetting = value ? { fill: value } : undefined;
70
+ break;
71
+ default:
72
+ break;
73
+ }
74
+ temSetting && renderRef.current.updateAssetById(id, temSetting);
75
+ }
76
+
77
+ // 更新组件数据->更新画面
78
+ const updateAssetSettings = (nodes: { [key: string]: any }[], data: DataSource) => {
79
+ if (!renderRef.current || !nodes?.length || !data) return;
80
+ nodes.forEach(node => updateComponentSetting(node, data));
81
+ };
82
+
83
+ // 整理组件数据源
84
+ const handleDataSourceParams = (nodes: { [key: string]: any }[]) => {
85
+ const dataSourceConfigs = nodes.reduce((total, item) => {
86
+ const { dataSource } = item.settings || {};
87
+ if (dataSource && total[dataSource]) {
88
+ total[dataSource].nodes.push(item);
89
+ } else if (dataSource) {
90
+ total[dataSource] = { params: { sourceId: dataSource, chartCode: dataSource, secondCriterion: recordCode }, nodes: [item] };
91
+ }
92
+ return total;
93
+ }, {});
94
+ return dataSourceConfigs;
95
+ }
96
+
97
+ // 获取初始化组件数据
98
+ const getInitComponentData = async (dataSourceConfigs: { [key: string]: any }) => {
99
+ const dataSources = Object.keys(dataSourceConfigs).map(r => dataSourceConfigs[r].params);
100
+ if (!dataSources.length) return;
101
+ const temSourceConfigs = chunk(dataSources, 10); // 每批处理10个组件数据
102
+ temSourceConfigs.forEach(i => {
103
+ HcserviceV3.requestCharMultitData(null, JSON.stringify(i)).then(rs => {
104
+ const { status, ...data } = rs || {};
105
+ if (status === "success") {
106
+ for (const item in data) { // 更新组件数据
107
+ updateAssetSettings(dataSourceConfigs[item].nodes, data[item]);
108
+ }
109
+ }
110
+ })
111
+ })
112
+ };
113
+
114
+ // 获取当前画面数据源配置
115
+ const getCharWSConfig = async (dataSourceConfigs: { [key: string]: any }) => {
116
+ const dataSourceIds = Object.keys(dataSourceConfigs).map(r => dataSourceConfigs[r].params.sourceId);
117
+ if (!dataSourceIds.length) return;
118
+ const res = await HcserviceV3.requestCharWSConfig(null, dataSourceIds);
119
+ const wsSourceIds = Object.keys(res?.config || {});
120
+ if (!wsSourceIds?.length) {
121
+ return;
122
+ }
123
+ return wsSourceIds.map(r => dataSourceConfigs[r].params);
124
+ }
125
+
126
+ // 实时订阅组件数据
127
+ const webSocketComponentData = async (dataSourceConfigs: { [key: string]: any }) => {
128
+ if (subscribeRef.current) { subscribeRef.current.unsubscribe(); }
129
+ const temArr = await getCharWSConfig(dataSourceConfigs);
130
+ if (!viewId || !temArr?.length) {
131
+ return;
132
+ }
133
+ wsRef.current = WebSocket.getInstance("v3/kk-ws");
134
+ // 订阅数据
135
+ subscribeRef.current = await wsRef.current.subscribe(`/user/queue/chart-data/${viewId}`, { dataSourceConfigs: JSON.stringify(temArr) }, (data) => {
136
+ for (const item in data) { // 更新组件数据
137
+ updateAssetSettings(dataSourceConfigs[item].nodes, data[item]);
138
+ }
139
+ });
140
+ }
141
+
142
+ // 获取所有组件-更新数据
143
+ const onAssetsLoaded = () => {
144
+ if (!renderRef.current) return;
145
+ const assets = renderRef.current.getAllAssets();
146
+ if (!assets?.length) return;
147
+ const allDataSource = handleDataSourceParams(assets);
148
+ getInitComponentData(allDataSource); // 初始化请求
149
+ webSocketComponentData(allDataSource); // ws订阅数据
150
+ }
151
+
152
+ // 加载画布数据
153
+ const loadData = useCallback(async (render: Render, jsonData: string) => {
154
+ try {
155
+ await render.importExportTool.restore(jsonData);
156
+ // 数据加载完成后自适应居中
157
+ render.positionTool.positionFit();
158
+ onAssetsLoaded();
159
+ } catch (e) {
160
+ console.error('Failed to load canvas data:', e);
161
+ }
162
+ }, []);
163
+
164
+ // 监听容器尺寸变化
165
+ useEffect(() => {
166
+ if (!boardRef.current) return;
167
+ const observer = new ResizeObserver(() => {
168
+ if (!boardRef.current) return;
169
+ const { width, height } = boardRef.current.getBoundingClientRect();
170
+ if (renderRef.current) {
171
+ renderRef.current.resize(width, height); // 更新尺寸
172
+ renderRef.current.positionTool.positionFit(); // 自适应居中
173
+ } else {
174
+ initRender(width, height);
175
+ }
176
+ });
177
+ observer.observe(boardRef.current);
178
+ observerRef.current = observer;
179
+ return () => {
180
+ observer.disconnect();
181
+ };
182
+ }, []);
183
+
184
+ // 当外部 data 更新时,重新加载
185
+ useEffect(() => {
186
+ if (renderRef.current && data) {
187
+ loadData(renderRef.current, data);
188
+ }
189
+ }, [data, loadData]);
190
+
191
+ const handleFit = useCallback(() => {
192
+ if (!renderRef.current) return;
193
+ renderRef.current.positionTool.positionFit();
194
+ }, []);
195
+
196
+ // 清理
197
+ useEffect(() => {
198
+ return () => {
199
+ if (renderRef.current) {
200
+ renderRef.current.stage.destroy();
201
+ renderRef.current = null;
202
+ }
203
+ if (observerRef.current) {
204
+ observerRef.current.disconnect();
205
+ observerRef.current = null;
206
+ }
207
+ if (subscribeRef.current) { // 清理订阅
208
+ subscribeRef.current.unsubscribe();
209
+ }
210
+ };
211
+ }, []);
212
+
213
+ return (
214
+ <div className="draw-viewer" style={{ width, height }}>
215
+ <div className="draw-viewer-toolbar">
216
+ <Space>
217
+ <Button type="text" className='fit' onClick={handleFit} icon={<ExpandOutlined />} />
218
+ </Space>
219
+ </div>
220
+ {/* 画布区域 */}
221
+ <div className="draw-viewer-content" ref={boardRef}>
222
+ <div ref={stageRef} />
223
+ </div>
224
+ </div>
225
+ );
226
+ };
227
+
228
+ export default Index;
@@ -90,8 +90,8 @@ const CriteriaForm: React.FC<CriteriaFormProps> = (props) => {
90
90
  innerParams,
91
91
  defShowCriteriaCount,
92
92
  criteriaGroups,
93
- commonCriterias,
94
- split2TabCriterias
93
+ commonCriteria,
94
+ split2TabCriteria
95
95
  } = ltmplConfig;
96
96
  const initialValues = {};
97
97
  const searchSubmit = (data) => {
@@ -113,16 +113,16 @@ const CriteriaForm: React.FC<CriteriaFormProps> = (props) => {
113
113
  const [criteriaGroupHeight, setCriteriaGroupHeight] = useState<number>(32); // 扩展条件组高度,用于展开/收起
114
114
  const criteriaGroupRef = useRef(null);
115
115
 
116
- const criterias = useMemo(() => {
117
- const temCriterias = commonCriterias?.length ? commonCriterias : ltmplConfig.criterias;
116
+ const criteria = useMemo(() => {
117
+ const temCriteria = commonCriteria?.length ? commonCriteria : ltmplConfig.criteria;
118
118
  if (tabCriteriaId) { // 处理标签页条件(存在标签页,多tab拆解条件时搜索栏加载其他tab条件)
119
- const otherTabCriteria = split2TabCriterias.filter(item => `c_${item.id}` !== tabCriteriaId);
120
- return [...temCriterias, ...otherTabCriteria];
119
+ const otherTabCriteria = split2TabCriteria.filter(item => `c_${item.id}` !== tabCriteriaId);
120
+ return [...temCriteria, ...otherTabCriteria];
121
121
  }
122
- return temCriterias;
122
+ return temCriteria;
123
123
  }, [ltmplConfig, tabCriteriaId]);
124
124
 
125
- let collapseCriteria: CriteriaConfig[] = defShowCriteriaCount <= 0 ? criterias : criterias.slice(0, defShowCriteriaCount);
125
+ let collapseCriteria: CriteriaConfig[] = defShowCriteriaCount <= 0 ? criteria : criteria.slice(0, defShowCriteriaCount);
126
126
 
127
127
  // 扩展条件组,监听扩展条件组高度变化,用于展开/收起
128
128
  const handleCriteriaGroupResize = () => {
@@ -152,7 +152,7 @@ const CriteriaForm: React.FC<CriteriaFormProps> = (props) => {
152
152
 
153
153
  useEffect(() => {
154
154
  form.resetFields();
155
- if (collapseCriteria && criterias && collapseCriteria.length < criterias.length) {
155
+ if (collapseCriteria && criteria && collapseCriteria.length < criteria.length) {
156
156
  setCollapsible(true);
157
157
  }
158
158
  });
@@ -429,19 +429,19 @@ const CriteriaForm: React.FC<CriteriaFormProps> = (props) => {
429
429
  };
430
430
 
431
431
  // lagicalOpt扩展条件组条件
432
- const renderCriteria = (criterias: CriteriaConfig[], lagicalOpt?: string) => {
433
- if (!criterias) {
432
+ const renderCriteria = (criteria: CriteriaConfig[], lagicalOpt?: string) => {
433
+ if (!criteria) {
434
434
  return;
435
435
  }
436
436
  const { hiddenCriteriaIds, serverKey } = props;
437
- criterias.forEach((item) => {
437
+ criteria.forEach((item) => {
438
438
  let formItemName = "c_" + item.id;
439
439
  let fieldValue = data ? data[formItemName] : undefined;
440
440
  initialValues[formItemName] = fieldValue;
441
441
  });
442
442
 
443
443
  if (doSearch) {
444
- return criterias.map((item, index) => {
444
+ return criteria.map((item, index) => {
445
445
  let formItemName = "c_" + item.id;
446
446
  let fieldValue = data ? data[formItemName] : undefined;
447
447
  if (item?.extControlType == "ltree-entity-select" || item?.extControlType == "ltree-entity-select-value") {
@@ -478,7 +478,7 @@ const CriteriaForm: React.FC<CriteriaFormProps> = (props) => {
478
478
  );
479
479
  return lagicalOpt ? <>
480
480
  {formItem}
481
- {criterias.length !== index + 1 ? <FormItem style={{ margin: 0, color: colorWarning }}>{translate("${" + lagicalOpt + "}")}</FormItem> : ""}
481
+ {criteria.length !== index + 1 ? <FormItem style={{ margin: 0, color: colorWarning }}>{translate("${" + lagicalOpt + "}")}</FormItem> : ""}
482
482
  </> : formItem;
483
483
  }
484
484
  });
@@ -492,16 +492,16 @@ const CriteriaForm: React.FC<CriteriaFormProps> = (props) => {
492
492
  }
493
493
  const isExpanded = criteriaGroupHeight > 32;
494
494
  return criteriaGroup.map(r =>
495
- r.criterias?.length > 1 ?
495
+ r.criteria?.length > 1 ?
496
496
  < div style={{ borderRadius: "6px", border: `1px dashed ${colorBorder}`, padding: "2px 4px", marginRight: "16px", position: "relative", display: "flex", justifyContent: "space-between", alignItems: "flex-end" }}>
497
- <Space style={{ height: criteriaGExpanded ? "auto" : "32px", overflow: "hidden", }} ref={criteriaGroupRef} size={"small"} wrap>{renderCriteria(r.criterias, r.lagicalOpt === "OR" ? "或" : "且")}</Space>
497
+ <Space style={{ height: criteriaGExpanded ? "auto" : "32px", overflow: "hidden", }} ref={criteriaGroupRef} size={"small"} wrap>{renderCriteria(r.criteria, r.lagicalOpt === "OR" ? "或" : "且")}</Space>
498
498
  {isExpanded ?
499
499
  <Button icon={criteriaGExpanded ? <LeftOutlined /> : <RightOutlined />} type={"link"} onClick={() => setCriteriaGExpanded(!criteriaGExpanded)}>
500
500
  {translate(criteriaGExpanded ? "${收起}" : "${展开}")}
501
501
  </Button>
502
502
  : ""}
503
503
  </div > :
504
- <Space size={"small"} wrap>{renderCriteria(r.criterias)}</Space>
504
+ <Space size={"small"} wrap>{renderCriteria(r.criteria)}</Space>
505
505
  );
506
506
  };
507
507
 
@@ -533,7 +533,7 @@ const CriteriaForm: React.FC<CriteriaFormProps> = (props) => {
533
533
  {renderDrillDimension()}</>
534
534
  : null}
535
535
  {showQueryButton || (updrillButtonConfigs && updrillButtonConfigs.length > 0)
536
- ? renderCriteria(expanded ? criterias : collapseCriteria)
536
+ ? renderCriteria(expanded ? criteria : collapseCriteria)
537
537
  : null}
538
538
 
539
539
  {renderCriteriaGroup(criteriaGroups)}
@@ -196,6 +196,15 @@ export default class DtmplForm extends React.PureComponent<
196
196
  return;
197
197
  }
198
198
 
199
+ const fields = appDtmplConfig.groups?.map(r => r.fields).flat();
200
+ if (fields?.length) {
201
+ fields.forEach(r => {
202
+ if (r.hidden) { // 隐藏字段,清空值
203
+ values[r.id] = "";
204
+ }
205
+ });
206
+ }
207
+
199
208
  if (dtmplData) {
200
209
  dtmplData.fieldMap = { ...values }
201
210
  }