aldehyde 0.2.494 → 0.2.495
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.
- package/lib/controls/icon-selector/icon/phonenode-menu-icon/iconfont.css +63 -63
- package/lib/draw-canvas-edit/components/asset-bar/index.less +35 -35
- package/lib/draw-canvas-edit/components/main-header/index.less +23 -23
- package/lib/layout2/page.d.ts +2 -1
- package/lib/layout2/page.d.ts.map +1 -1
- package/lib/layout2/page.js +19 -8
- package/lib/layout2/page.js.map +1 -1
- package/lib/layout2/type/layout-type.d.ts +1 -0
- package/lib/layout2/type/layout-type.d.ts.map +1 -1
- package/lib/lowcode-components/base-table/index.less +61 -61
- package/lib/lowcode-components/base-text/index.less +19 -19
- package/lib/lowcode-components/data-number/index.less +10 -10
- package/lib/lowcode-components/date-time/index.less +4 -4
- package/lib/lowcode-components/four-angle-glow-border/index.less +49 -49
- package/lib/lowcode-components/lowcode-view/component/font/FontGlobal.css +26 -26
- package/lib/lowcode-components/lowcode-view/component/screen-fit/index.less +13 -13
- package/lib/lowcode-components/text-scroller/index.less +28 -28
- package/lib/module/ltmpl-table.d.ts +7 -0
- package/lib/module/ltmpl-table.d.ts.map +1 -1
- package/lib/module/ltmpl-table.js +12 -16
- package/lib/module/ltmpl-table.js.map +1 -1
- package/lib/routable/dtmpl-route.d.ts.map +1 -1
- package/lib/routable/dtmpl-route.js +8 -2
- package/lib/routable/dtmpl-route.js.map +1 -1
- package/lib/routable/import-route.d.ts.map +1 -1
- package/lib/routable/import-route.js +9 -1
- package/lib/routable/import-route.js.map +1 -1
- package/lib/routable/ltmpl-route.d.ts.map +1 -1
- package/lib/routable/ltmpl-route.js +13 -6
- package/lib/routable/ltmpl-route.js.map +1 -1
- package/lib/routable/splitview-ltmpl-route.d.ts.map +1 -1
- package/lib/routable/splitview-ltmpl-route.js +11 -10
- package/lib/routable/splitview-ltmpl-route.js.map +1 -1
- package/lib/routable/ttmpl-route.d.ts.map +1 -1
- package/lib/routable/ttmpl-route.js +9 -2
- package/lib/routable/ttmpl-route.js.map +1 -1
- package/lib/table/act-table.d.ts +1 -0
- package/lib/table/act-table.d.ts.map +1 -1
- package/lib/table/act-table.js +31 -9
- package/lib/table/act-table.js.map +1 -1
- package/lib/table/page-chart.js +1 -1
- package/lib/table/page-chart.js.map +1 -1
- package/lib/table/row-table.d.ts +6 -0
- package/lib/table/row-table.d.ts.map +1 -1
- package/lib/table/row-table.js +21 -6
- package/lib/table/row-table.js.map +1 -1
- package/lib/tmpl/interface.d.ts +1 -0
- package/lib/tmpl/interface.d.ts.map +1 -1
- package/lib/tree/act-tree.d.ts +1 -0
- package/lib/tree/act-tree.d.ts.map +1 -1
- package/lib/tree/act-tree.js +6 -7
- package/lib/tree/act-tree.js.map +1 -1
- package/lib/tree/tree-utils.d.ts +1 -1
- package/lib/tree/tree-utils.d.ts.map +1 -1
- package/lib/tree/tree-utils.js +4 -4
- package/lib/tree/tree-utils.js.map +1 -1
- package/lib/units/index.d.ts +4 -0
- package/lib/units/index.d.ts.map +1 -1
- package/lib/units/index.js +10 -3
- package/lib/units/index.js.map +1 -1
- package/package.json +1 -1
- package/src/aldehyde/controls/icon-selector/icon/phonenode-menu-icon/iconfont.css +63 -63
- package/src/aldehyde/controls/icon-selector/icon/phonenode-menu-icon/iconfont.json +93 -93
- package/src/aldehyde/draw-canvas-edit/components/asset-bar/index.less +35 -35
- package/src/aldehyde/draw-canvas-edit/components/asset-bar/index.tsx +110 -110
- package/src/aldehyde/draw-canvas-edit/components/main-header/index.less +23 -23
- package/src/aldehyde/draw-canvas-edit/components/main-header/index.tsx +263 -263
- package/src/aldehyde/draw-canvas-edit/components/render/draws/index.ts +7 -7
- package/src/aldehyde/draw-canvas-edit/components/render/graphs/base-graph.ts +241 -241
- package/src/aldehyde/draw-canvas-edit/components/render/graphs/circle.ts +699 -699
- package/src/aldehyde/draw-canvas-edit/components/render/graphs/curve.ts +500 -500
- package/src/aldehyde/draw-canvas-edit/components/render/graphs/index.ts +5 -5
- package/src/aldehyde/draw-canvas-edit/components/render/graphs/line.ts +493 -493
- package/src/aldehyde/draw-canvas-edit/components/render/graphs/rect.ts +680 -680
- package/src/aldehyde/draw-canvas-edit/components/render/handlers/drag-handlers.ts +68 -68
- package/src/aldehyde/draw-canvas-edit/components/render/handlers/graph-handlers.ts +113 -113
- package/src/aldehyde/draw-canvas-edit/components/render/handlers/index.ts +9 -9
- package/src/aldehyde/draw-canvas-edit/components/render/handlers/key-move-handlers.ts +49 -49
- package/src/aldehyde/draw-canvas-edit/components/render/handlers/link-handlers.ts +45 -45
- package/src/aldehyde/draw-canvas-edit/components/render/handlers/shutcut-handlers.ts +45 -45
- package/src/aldehyde/draw-canvas-edit/components/render/handlers/text-handlers.ts +81 -81
- package/src/aldehyde/draw-canvas-edit/components/render/handlers/zoom-handlers.ts +59 -59
- package/src/aldehyde/draw-canvas-edit/components/render/tools/align-tool.ts +89 -89
- package/src/aldehyde/draw-canvas-edit/components/render/tools/asset-tool.ts +154 -154
- package/src/aldehyde/draw-canvas-edit/components/render/tools/link-tool.ts +222 -222
- package/src/aldehyde/draw-canvas-edit/components/render/tools/z-index-tool.ts +224 -224
- package/src/aldehyde/draw-canvas-edit/components/render/utils/a-star.ts +116 -116
- package/src/aldehyde/draw-canvas-edit/components/render/utils/bezier-scene-func.ts +72 -72
- package/src/aldehyde/draw-canvas-edit/components/setting-form/imag-upload.tsx +119 -119
- package/src/aldehyde/layout2/page.tsx +17 -9
- package/src/aldehyde/layout2/type/layout-type.ts +1 -0
- package/src/aldehyde/layout4/imgs/user.svg +26 -26
- package/src/aldehyde/lowcode-components/base-color-block/index.tsx +31 -31
- package/src/aldehyde/lowcode-components/base-table/index.less +61 -61
- package/src/aldehyde/lowcode-components/base-text/index.less +19 -19
- package/src/aldehyde/lowcode-components/data-number/index.less +10 -10
- package/src/aldehyde/lowcode-components/date-time/index.less +4 -4
- package/src/aldehyde/lowcode-components/date-time/index.tsx +64 -64
- package/src/aldehyde/lowcode-components/four-angle-glow-border/index.less +49 -49
- package/src/aldehyde/lowcode-components/four-angle-glow-border/index.tsx +53 -53
- package/src/aldehyde/lowcode-components/lowcode-view/component/abstract-controller.ts +64 -64
- package/src/aldehyde/lowcode-components/lowcode-view/component/abstract-definition.ts +77 -77
- package/src/aldehyde/lowcode-components/lowcode-view/component/abstract-designer-loader.ts +36 -36
- package/src/aldehyde/lowcode-components/lowcode-view/component/component-container.tsx +91 -91
- package/src/aldehyde/lowcode-components/lowcode-view/component/font/FontGlobal.css +26 -26
- package/src/aldehyde/lowcode-components/lowcode-view/component/group-layer/controller.ts +36 -36
- package/src/aldehyde/lowcode-components/lowcode-view/component/group-layer/definition.ts +53 -53
- package/src/aldehyde/lowcode-components/lowcode-view/component/group-layer/index.tsx +15 -15
- package/src/aldehyde/lowcode-components/lowcode-view/component/layer-builder.tsx +98 -98
- package/src/aldehyde/lowcode-components/lowcode-view/component/screen-fit/index.less +13 -13
- package/src/aldehyde/lowcode-components/lowcode-view/component/screen-fit/index.tsx +121 -121
- package/src/aldehyde/lowcode-components/placeholder-component/index.tsx +81 -81
- package/src/aldehyde/lowcode-components/text-scroller/index.less +28 -28
- package/src/aldehyde/lowcode-components/text-scroller/index.tsx +173 -173
- package/src/aldehyde/module/ltmpl-table.tsx +14 -15
- package/src/aldehyde/routable/dtmpl-route.tsx +14 -8
- package/src/aldehyde/routable/import-route.tsx +12 -5
- package/src/aldehyde/routable/ltmpl-route.tsx +14 -9
- package/src/aldehyde/routable/splitview-ltmpl-route.tsx +11 -8
- package/src/aldehyde/routable/ttmpl-route.tsx +13 -8
- package/src/aldehyde/table/act-table.tsx +28 -9
- package/src/aldehyde/table/page-chart.tsx +1 -1
- package/src/aldehyde/table/row-table.tsx +29 -6
- package/src/aldehyde/tmpl/interface.tsx +1 -0
- package/src/aldehyde/tree/act-tree.tsx +8 -6
- package/src/aldehyde/tree/tree-utils.tsx +4 -4
- package/src/aldehyde/units/index.tsx +11 -3
|
@@ -1,29 +1,29 @@
|
|
|
1
|
-
.text-scroller-container {
|
|
2
|
-
--speed: 10s;
|
|
3
|
-
--container-width: 320px;
|
|
4
|
-
|
|
5
|
-
width: 100%;
|
|
6
|
-
height: 100%;
|
|
7
|
-
overflow: hidden;
|
|
8
|
-
white-space: nowrap;
|
|
9
|
-
position: relative;
|
|
10
|
-
|
|
11
|
-
.text-scroller {
|
|
12
|
-
height: inherit;
|
|
13
|
-
position: absolute;
|
|
14
|
-
color: white;
|
|
15
|
-
animation: scrollText var(--speed) linear infinite;
|
|
16
|
-
display: flex;
|
|
17
|
-
align-items: center;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
@keyframes scrollText {
|
|
21
|
-
0% {
|
|
22
|
-
transform: translateX(var(--container-width));
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
100% {
|
|
26
|
-
transform: translateX(-100%);
|
|
27
|
-
}
|
|
28
|
-
}
|
|
1
|
+
.text-scroller-container {
|
|
2
|
+
--speed: 10s;
|
|
3
|
+
--container-width: 320px;
|
|
4
|
+
|
|
5
|
+
width: 100%;
|
|
6
|
+
height: 100%;
|
|
7
|
+
overflow: hidden;
|
|
8
|
+
white-space: nowrap;
|
|
9
|
+
position: relative;
|
|
10
|
+
|
|
11
|
+
.text-scroller {
|
|
12
|
+
height: inherit;
|
|
13
|
+
position: absolute;
|
|
14
|
+
color: white;
|
|
15
|
+
animation: scrollText var(--speed) linear infinite;
|
|
16
|
+
display: flex;
|
|
17
|
+
align-items: center;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
@keyframes scrollText {
|
|
21
|
+
0% {
|
|
22
|
+
transform: translateX(var(--container-width));
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
100% {
|
|
26
|
+
transform: translateX(-100%);
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
29
|
}
|
|
@@ -1,174 +1,174 @@
|
|
|
1
|
-
import React, { forwardRef, ForwardedRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
|
|
2
|
-
import './index.less';
|
|
3
|
-
import _ from "lodash";
|
|
4
|
-
import { useLocale } from "../../locale/useLocale";
|
|
5
|
-
import HydrocarbonService from "../../tmpl/hcservice-v3";
|
|
6
|
-
import { DataConfigProps } from "../data";
|
|
7
|
-
|
|
8
|
-
// 处理数据格式
|
|
9
|
-
const handleData = (data: { config: { [key: string]: string }, value: { [key: string]: any }[] }[]) => {
|
|
10
|
-
const temData = data?.[0]?.value?.[0]?.v1;
|
|
11
|
-
return temData;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
export interface ComponentStyle {
|
|
15
|
-
speed?: number;
|
|
16
|
-
fontSize?: number;
|
|
17
|
-
color?: string;
|
|
18
|
-
fontFamily?: string;
|
|
19
|
-
fontWeight?: number;
|
|
20
|
-
defaultValue?: string;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
export interface ComponentProps {
|
|
24
|
-
style?: ComponentStyle;
|
|
25
|
-
data?: DataConfigProps;
|
|
26
|
-
isDesignMode?: boolean; // 是否编辑模式
|
|
27
|
-
initSearchParams?: { [key: string]: any }; // 全局初始化外部参数,例:传参包含设备id,则在查询时带上设备id
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
export interface ComponentRef {
|
|
31
|
-
updateConfig: (newConfig: ComponentProps) => void;
|
|
32
|
-
destroy: () => void;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
|
|
36
|
-
const { style, data: propsData, isDesignMode } = props;
|
|
37
|
-
const [config, setConfig] = useState<ComponentStyle>(style || {});
|
|
38
|
-
const [speed, setSpeed] = useState<number>(style?.speed || 5);
|
|
39
|
-
const [dataConfig, setDataConfig] = useState<DataConfigProps>({ ...propsData }); // 数据源配置
|
|
40
|
-
const [data, setData] = useState<string>('');
|
|
41
|
-
const [searchParams, setSearchParams] = useState<{ [key: string]: any }>();
|
|
42
|
-
const [initSearchParams, setInitSearchParams] = useState<{ [key: string]: any }>();
|
|
43
|
-
const textScrollerRef = useRef<HTMLDivElement>(null);
|
|
44
|
-
const textContainerRef = useRef<HTMLDivElement>(null);
|
|
45
|
-
const resizeObserverRef = useRef<ResizeObserver | null>(null);
|
|
46
|
-
const pollingIntervalRef = useRef<number | NodeJS.Timeout>(null);
|
|
47
|
-
const { translate } = useLocale();
|
|
48
|
-
|
|
49
|
-
const handleDestroy = () => {
|
|
50
|
-
resizeObserverRef.current && resizeObserverRef.current.disconnect();
|
|
51
|
-
pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
|
|
52
|
-
};
|
|
53
|
-
|
|
54
|
-
// 全局初始化请求数据处理
|
|
55
|
-
const handleInitData = (val: DataConfigProps) => {
|
|
56
|
-
if (val.sourceType === "sourceId" && val.isInit && val.initData) {
|
|
57
|
-
const { config, value } = val.initData;
|
|
58
|
-
const temData = handleData(value);
|
|
59
|
-
setData(temData);
|
|
60
|
-
if (config?.requestMode === "polling") {
|
|
61
|
-
pollingIntervalRef.current = setInterval(() => { getData() }, config?.pollingInterval || 60000);
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
// ws订阅数据更新
|
|
67
|
-
const handleWSData = (val: DataConfigProps) => {
|
|
68
|
-
if (val.sourceType === "sourceId" && val.wsData) {
|
|
69
|
-
const { value } = val.initData;
|
|
70
|
-
const temData = handleData(value);
|
|
71
|
-
setData(temData);
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
useImperativeHandle(ref, () => ({
|
|
76
|
-
updateConfig: (newConfig) => {
|
|
77
|
-
const { style: newStyle, data: newDataConfig, initSearchParams: newISParams } = newConfig;
|
|
78
|
-
setConfig({ ...(newStyle || {}) });
|
|
79
|
-
setSpeed(newStyle?.speed || 5);
|
|
80
|
-
setDataConfig({ ...newDataConfig });
|
|
81
|
-
handleInitData(newDataConfig);
|
|
82
|
-
setSearchParams(newDataConfig.searchParams);
|
|
83
|
-
setInitSearchParams(newISParams);
|
|
84
|
-
handleWSData(newDataConfig);
|
|
85
|
-
},
|
|
86
|
-
destroy: handleDestroy,
|
|
87
|
-
}));
|
|
88
|
-
|
|
89
|
-
useEffect(() => {
|
|
90
|
-
if (textContainerRef.current) {
|
|
91
|
-
resizeObserverRef.current = new ResizeObserver(_.debounce((entries) => {
|
|
92
|
-
for (const entry of entries) {
|
|
93
|
-
const { width } = entry.contentRect;
|
|
94
|
-
textContainerRef.current.style.setProperty('--container-width', `${width}px`);
|
|
95
|
-
}
|
|
96
|
-
}, 100));
|
|
97
|
-
// 开始观察
|
|
98
|
-
resizeObserverRef.current.observe(textContainerRef.current);
|
|
99
|
-
}
|
|
100
|
-
return () => {
|
|
101
|
-
handleDestroy();
|
|
102
|
-
}
|
|
103
|
-
}, []);
|
|
104
|
-
|
|
105
|
-
useEffect(() => {
|
|
106
|
-
if (textContainerRef.current) {
|
|
107
|
-
textContainerRef.current.style.setProperty('--speed', `${speed || 5}s`);
|
|
108
|
-
}
|
|
109
|
-
}, [speed]);
|
|
110
|
-
|
|
111
|
-
// 请求数据
|
|
112
|
-
const getData = async (params?: object) => {
|
|
113
|
-
const { data } = await HydrocarbonService.requestChartData(null, dataConfig?.sourceId, params) || {};
|
|
114
|
-
const { config, value } = data || {};
|
|
115
|
-
const temData = handleData(value);
|
|
116
|
-
setData(temData);
|
|
117
|
-
return config;
|
|
118
|
-
};
|
|
119
|
-
|
|
120
|
-
// 初始化请求数据
|
|
121
|
-
const getInitData = async (params?: object) => {
|
|
122
|
-
pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
|
|
123
|
-
const config = await getData(params);
|
|
124
|
-
if (config?.requestMode === "polling") {
|
|
125
|
-
pollingIntervalRef.current = setInterval(() => getData(params), config?.pollingInterval || 60000);
|
|
126
|
-
}
|
|
127
|
-
};
|
|
128
|
-
|
|
129
|
-
// 静态数据处理
|
|
130
|
-
useEffect(() => {
|
|
131
|
-
if (dataConfig?.sourceType === 'staticData') {
|
|
132
|
-
const { value } = dataConfig.staticData || {};
|
|
133
|
-
setData(value);
|
|
134
|
-
}
|
|
135
|
-
}, [dataConfig?.sourceType, dataConfig?.staticData]);
|
|
136
|
-
|
|
137
|
-
/**
|
|
138
|
-
* 数据源数据请求
|
|
139
|
-
* 1、编辑态不请求数据
|
|
140
|
-
*/
|
|
141
|
-
useEffect(() => {
|
|
142
|
-
if (!isDesignMode && dataConfig?.sourceType === 'sourceId' && dataConfig?.sourceId && !dataConfig?.isInit && dataConfig?.isDefRequest !== false) {
|
|
143
|
-
if (dataConfig?.isInitParams) { // 组件数据源接收外部参数
|
|
144
|
-
initSearchParams && getInitData(initSearchParams);
|
|
145
|
-
} else {
|
|
146
|
-
getInitData();
|
|
147
|
-
}
|
|
148
|
-
} else if (dataConfig?.sourceType === 'sourceId') {
|
|
149
|
-
setData("文本跑马灯");
|
|
150
|
-
}
|
|
151
|
-
}, [dataConfig?.sourceType, dataConfig?.sourceId, initSearchParams]);
|
|
152
|
-
|
|
153
|
-
// 搜索参数变化时重新请求数据
|
|
154
|
-
useEffect(() => {
|
|
155
|
-
if (searchParams) {
|
|
156
|
-
const params = { ...(initSearchParams || {}), ...searchParams };
|
|
157
|
-
if (dataConfig?.isInitParams) { // 数据源接收外部参数,则参数存在再请求
|
|
158
|
-
initSearchParams && getInitData(params);
|
|
159
|
-
} else {
|
|
160
|
-
getInitData(params);
|
|
161
|
-
}
|
|
162
|
-
}
|
|
163
|
-
}, [searchParams, initSearchParams]);
|
|
164
|
-
|
|
165
|
-
return (
|
|
166
|
-
<div className="text-scroller-container" ref={textContainerRef}>
|
|
167
|
-
<div className="text-scroller" style={{ ...config }} ref={textScrollerRef}>
|
|
168
|
-
{translate("${" + data + "}")}
|
|
169
|
-
</div>
|
|
170
|
-
</div>
|
|
171
|
-
);
|
|
172
|
-
});
|
|
173
|
-
|
|
1
|
+
import React, { forwardRef, ForwardedRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
|
|
2
|
+
import './index.less';
|
|
3
|
+
import _ from "lodash";
|
|
4
|
+
import { useLocale } from "../../locale/useLocale";
|
|
5
|
+
import HydrocarbonService from "../../tmpl/hcservice-v3";
|
|
6
|
+
import { DataConfigProps } from "../data";
|
|
7
|
+
|
|
8
|
+
// 处理数据格式
|
|
9
|
+
const handleData = (data: { config: { [key: string]: string }, value: { [key: string]: any }[] }[]) => {
|
|
10
|
+
const temData = data?.[0]?.value?.[0]?.v1;
|
|
11
|
+
return temData;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export interface ComponentStyle {
|
|
15
|
+
speed?: number;
|
|
16
|
+
fontSize?: number;
|
|
17
|
+
color?: string;
|
|
18
|
+
fontFamily?: string;
|
|
19
|
+
fontWeight?: number;
|
|
20
|
+
defaultValue?: string;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
export interface ComponentProps {
|
|
24
|
+
style?: ComponentStyle;
|
|
25
|
+
data?: DataConfigProps;
|
|
26
|
+
isDesignMode?: boolean; // 是否编辑模式
|
|
27
|
+
initSearchParams?: { [key: string]: any }; // 全局初始化外部参数,例:传参包含设备id,则在查询时带上设备id
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
export interface ComponentRef {
|
|
31
|
+
updateConfig: (newConfig: ComponentProps) => void;
|
|
32
|
+
destroy: () => void;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
|
|
36
|
+
const { style, data: propsData, isDesignMode } = props;
|
|
37
|
+
const [config, setConfig] = useState<ComponentStyle>(style || {});
|
|
38
|
+
const [speed, setSpeed] = useState<number>(style?.speed || 5);
|
|
39
|
+
const [dataConfig, setDataConfig] = useState<DataConfigProps>({ ...propsData }); // 数据源配置
|
|
40
|
+
const [data, setData] = useState<string>('');
|
|
41
|
+
const [searchParams, setSearchParams] = useState<{ [key: string]: any }>();
|
|
42
|
+
const [initSearchParams, setInitSearchParams] = useState<{ [key: string]: any }>();
|
|
43
|
+
const textScrollerRef = useRef<HTMLDivElement>(null);
|
|
44
|
+
const textContainerRef = useRef<HTMLDivElement>(null);
|
|
45
|
+
const resizeObserverRef = useRef<ResizeObserver | null>(null);
|
|
46
|
+
const pollingIntervalRef = useRef<number | NodeJS.Timeout>(null);
|
|
47
|
+
const { translate } = useLocale();
|
|
48
|
+
|
|
49
|
+
const handleDestroy = () => {
|
|
50
|
+
resizeObserverRef.current && resizeObserverRef.current.disconnect();
|
|
51
|
+
pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
// 全局初始化请求数据处理
|
|
55
|
+
const handleInitData = (val: DataConfigProps) => {
|
|
56
|
+
if (val.sourceType === "sourceId" && val.isInit && val.initData) {
|
|
57
|
+
const { config, value } = val.initData;
|
|
58
|
+
const temData = handleData(value);
|
|
59
|
+
setData(temData);
|
|
60
|
+
if (config?.requestMode === "polling") {
|
|
61
|
+
pollingIntervalRef.current = setInterval(() => { getData() }, config?.pollingInterval || 60000);
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
// ws订阅数据更新
|
|
67
|
+
const handleWSData = (val: DataConfigProps) => {
|
|
68
|
+
if (val.sourceType === "sourceId" && val.wsData) {
|
|
69
|
+
const { value } = val.initData;
|
|
70
|
+
const temData = handleData(value);
|
|
71
|
+
setData(temData);
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
useImperativeHandle(ref, () => ({
|
|
76
|
+
updateConfig: (newConfig) => {
|
|
77
|
+
const { style: newStyle, data: newDataConfig, initSearchParams: newISParams } = newConfig;
|
|
78
|
+
setConfig({ ...(newStyle || {}) });
|
|
79
|
+
setSpeed(newStyle?.speed || 5);
|
|
80
|
+
setDataConfig({ ...newDataConfig });
|
|
81
|
+
handleInitData(newDataConfig);
|
|
82
|
+
setSearchParams(newDataConfig.searchParams);
|
|
83
|
+
setInitSearchParams(newISParams);
|
|
84
|
+
handleWSData(newDataConfig);
|
|
85
|
+
},
|
|
86
|
+
destroy: handleDestroy,
|
|
87
|
+
}));
|
|
88
|
+
|
|
89
|
+
useEffect(() => {
|
|
90
|
+
if (textContainerRef.current) {
|
|
91
|
+
resizeObserverRef.current = new ResizeObserver(_.debounce((entries) => {
|
|
92
|
+
for (const entry of entries) {
|
|
93
|
+
const { width } = entry.contentRect;
|
|
94
|
+
textContainerRef.current.style.setProperty('--container-width', `${width}px`);
|
|
95
|
+
}
|
|
96
|
+
}, 100));
|
|
97
|
+
// 开始观察
|
|
98
|
+
resizeObserverRef.current.observe(textContainerRef.current);
|
|
99
|
+
}
|
|
100
|
+
return () => {
|
|
101
|
+
handleDestroy();
|
|
102
|
+
}
|
|
103
|
+
}, []);
|
|
104
|
+
|
|
105
|
+
useEffect(() => {
|
|
106
|
+
if (textContainerRef.current) {
|
|
107
|
+
textContainerRef.current.style.setProperty('--speed', `${speed || 5}s`);
|
|
108
|
+
}
|
|
109
|
+
}, [speed]);
|
|
110
|
+
|
|
111
|
+
// 请求数据
|
|
112
|
+
const getData = async (params?: object) => {
|
|
113
|
+
const { data } = await HydrocarbonService.requestChartData(null, dataConfig?.sourceId, params) || {};
|
|
114
|
+
const { config, value } = data || {};
|
|
115
|
+
const temData = handleData(value);
|
|
116
|
+
setData(temData);
|
|
117
|
+
return config;
|
|
118
|
+
};
|
|
119
|
+
|
|
120
|
+
// 初始化请求数据
|
|
121
|
+
const getInitData = async (params?: object) => {
|
|
122
|
+
pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
|
|
123
|
+
const config = await getData(params);
|
|
124
|
+
if (config?.requestMode === "polling") {
|
|
125
|
+
pollingIntervalRef.current = setInterval(() => getData(params), config?.pollingInterval || 60000);
|
|
126
|
+
}
|
|
127
|
+
};
|
|
128
|
+
|
|
129
|
+
// 静态数据处理
|
|
130
|
+
useEffect(() => {
|
|
131
|
+
if (dataConfig?.sourceType === 'staticData') {
|
|
132
|
+
const { value } = dataConfig.staticData || {};
|
|
133
|
+
setData(value);
|
|
134
|
+
}
|
|
135
|
+
}, [dataConfig?.sourceType, dataConfig?.staticData]);
|
|
136
|
+
|
|
137
|
+
/**
|
|
138
|
+
* 数据源数据请求
|
|
139
|
+
* 1、编辑态不请求数据
|
|
140
|
+
*/
|
|
141
|
+
useEffect(() => {
|
|
142
|
+
if (!isDesignMode && dataConfig?.sourceType === 'sourceId' && dataConfig?.sourceId && !dataConfig?.isInit && dataConfig?.isDefRequest !== false) {
|
|
143
|
+
if (dataConfig?.isInitParams) { // 组件数据源接收外部参数
|
|
144
|
+
initSearchParams && getInitData(initSearchParams);
|
|
145
|
+
} else {
|
|
146
|
+
getInitData();
|
|
147
|
+
}
|
|
148
|
+
} else if (dataConfig?.sourceType === 'sourceId') {
|
|
149
|
+
setData("文本跑马灯");
|
|
150
|
+
}
|
|
151
|
+
}, [dataConfig?.sourceType, dataConfig?.sourceId, initSearchParams]);
|
|
152
|
+
|
|
153
|
+
// 搜索参数变化时重新请求数据
|
|
154
|
+
useEffect(() => {
|
|
155
|
+
if (searchParams) {
|
|
156
|
+
const params = { ...(initSearchParams || {}), ...searchParams };
|
|
157
|
+
if (dataConfig?.isInitParams) { // 数据源接收外部参数,则参数存在再请求
|
|
158
|
+
initSearchParams && getInitData(params);
|
|
159
|
+
} else {
|
|
160
|
+
getInitData(params);
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
}, [searchParams, initSearchParams]);
|
|
164
|
+
|
|
165
|
+
return (
|
|
166
|
+
<div className="text-scroller-container" ref={textContainerRef}>
|
|
167
|
+
<div className="text-scroller" style={{ ...config }} ref={textScrollerRef}>
|
|
168
|
+
{translate("${" + data + "}")}
|
|
169
|
+
</div>
|
|
170
|
+
</div>
|
|
171
|
+
);
|
|
172
|
+
});
|
|
173
|
+
|
|
174
174
|
export default Index;
|
|
@@ -40,6 +40,8 @@ export interface LtmplTableProps {
|
|
|
40
40
|
loadDataCallback?: (val: object[]) => void; // 请求数据回调函数
|
|
41
41
|
defRowCardCount?: number; // 卡片展示模式-默认行卡片数量
|
|
42
42
|
showTableAdd?: boolean; // 是否支持添加列表
|
|
43
|
+
userPageConfig?: { [key: string]: any }; // 用户自定义页面配置(搜索条件等缓存,多表格模式)
|
|
44
|
+
setUserPageConfig?: (config: { [key: string]: any }) => void; // 用户自定义页面配置(搜索条件等缓存,多表格模式)
|
|
43
45
|
}
|
|
44
46
|
|
|
45
47
|
export interface LtmplTableState {
|
|
@@ -89,6 +91,7 @@ class LtmplTable extends React.PureComponent<LtmplTableProps, LtmplTableState> {
|
|
|
89
91
|
showPagination: true,
|
|
90
92
|
showAggregates: true,
|
|
91
93
|
showTableAdd: false,
|
|
94
|
+
userPageConfig: undefined,
|
|
92
95
|
};
|
|
93
96
|
|
|
94
97
|
async componentDidMount() {
|
|
@@ -112,7 +115,7 @@ class LtmplTable extends React.PureComponent<LtmplTableProps, LtmplTableState> {
|
|
|
112
115
|
}
|
|
113
116
|
|
|
114
117
|
loadLtmplConfig = async () => {
|
|
115
|
-
const { sourceId, serverKey, defaultCriteriaValue } = this.props;
|
|
118
|
+
const { sourceId, serverKey, defaultCriteriaValue, userPageConfig } = this.props;
|
|
116
119
|
let ltmplConfigRes: LtmplConfigRes = await HCDataSource.requestLtmplConfig(
|
|
117
120
|
serverKey,
|
|
118
121
|
sourceId
|
|
@@ -130,7 +133,7 @@ class LtmplTable extends React.PureComponent<LtmplTableProps, LtmplTableState> {
|
|
|
130
133
|
if (defaultCriteriaValue) {
|
|
131
134
|
defCriteriaValue = { ...defCriteriaValue, ...defaultCriteriaValue }
|
|
132
135
|
}
|
|
133
|
-
criteriaData = this.toCriteriaData(defCriteriaValue);
|
|
136
|
+
criteriaData = userPageConfig?.criteriaData || this.toCriteriaData(defCriteriaValue);
|
|
134
137
|
this.setState({
|
|
135
138
|
ltmplConfigRes,
|
|
136
139
|
criteriaData,
|
|
@@ -140,7 +143,7 @@ class LtmplTable extends React.PureComponent<LtmplTableProps, LtmplTableState> {
|
|
|
140
143
|
let criteriaData = {};
|
|
141
144
|
if (values) {
|
|
142
145
|
for (let key in values) {
|
|
143
|
-
criteriaData[key] = Units.configParamTrans(values[key], null);
|
|
146
|
+
criteriaData[key] = (values[key] || values[key] === 0) ? Units.configParamTrans(values[key], null) : undefined;
|
|
144
147
|
}
|
|
145
148
|
}
|
|
146
149
|
criteriaData["sequence"] = Units.getRandomNum(6);
|
|
@@ -214,7 +217,7 @@ class LtmplTable extends React.PureComponent<LtmplTableProps, LtmplTableState> {
|
|
|
214
217
|
};
|
|
215
218
|
|
|
216
219
|
doSearch = (params_) => {
|
|
217
|
-
const { sourceId, mainCode, collapsible } = this.props;
|
|
220
|
+
const { sourceId, mainCode, collapsible, setUserPageConfig } = this.props;
|
|
218
221
|
const { criteriaData } = this.state;
|
|
219
222
|
let params = { ...criteriaData, ...params_ };
|
|
220
223
|
//追加过滤条件,hiddenColIds,innerQueryKey
|
|
@@ -223,20 +226,14 @@ class LtmplTable extends React.PureComponent<LtmplTableProps, LtmplTableState> {
|
|
|
223
226
|
}
|
|
224
227
|
params["sourceId"] = sourceId;
|
|
225
228
|
if (collapsible) {
|
|
226
|
-
this.setState({
|
|
227
|
-
collapse: false,
|
|
228
|
-
});
|
|
229
|
+
this.setState({ collapse: false });
|
|
229
230
|
}
|
|
230
|
-
this.setState({
|
|
231
|
-
|
|
232
|
-
});
|
|
231
|
+
this.setState({ criteriaData: this.toCriteriaData(params) });
|
|
232
|
+
if (setUserPageConfig) setUserPageConfig({ criteriaData: this.toCriteriaData(params) }); // 搜索条件缓存
|
|
233
233
|
};
|
|
234
234
|
|
|
235
235
|
onChangePage = (pageNo, pageSize) => {
|
|
236
|
-
this.setState({
|
|
237
|
-
pageNo,
|
|
238
|
-
pageSize,
|
|
239
|
-
});
|
|
236
|
+
this.setState({ pageNo, pageSize });
|
|
240
237
|
};
|
|
241
238
|
|
|
242
239
|
handleDtmplEdit = (code: string, isContinueSave?: boolean) => {
|
|
@@ -270,7 +267,7 @@ class LtmplTable extends React.PureComponent<LtmplTableProps, LtmplTableState> {
|
|
|
270
267
|
tip, title, collapsible,
|
|
271
268
|
initCollapse, doCustomEdit, doCustomCreate,
|
|
272
269
|
serverKey, rowOperatable, readOnly, defShowType, showPagination, showAggregates, deleteCallback,
|
|
273
|
-
loadDataCallback, defRowCardCount, showTableAdd
|
|
270
|
+
loadDataCallback, defRowCardCount, showTableAdd, userPageConfig, setUserPageConfig
|
|
274
271
|
} = this.props;
|
|
275
272
|
const { translate } = this.context;
|
|
276
273
|
|
|
@@ -300,6 +297,8 @@ class LtmplTable extends React.PureComponent<LtmplTableProps, LtmplTableState> {
|
|
|
300
297
|
deleteCallback={deleteCallback}
|
|
301
298
|
loadDataCallback={loadDataCallback}
|
|
302
299
|
showTableAdd={showTableAdd}
|
|
300
|
+
userPageConfig={userPageConfig}
|
|
301
|
+
setUserPageConfig={setUserPageConfig}
|
|
303
302
|
/>
|
|
304
303
|
{buttons.includes("detail") && showDtmplView ? (
|
|
305
304
|
<ModalDtmplView
|
|
@@ -67,6 +67,12 @@ class DtmplRoute extends React.Component<DtmplRouteProps, DtmplRoutePropsStat> {
|
|
|
67
67
|
return menuId;
|
|
68
68
|
};
|
|
69
69
|
|
|
70
|
+
getServerKey = () => { // 获取serverKey
|
|
71
|
+
const { searchParams } = this.props;
|
|
72
|
+
let serverKey = searchParams.get("serverKey");
|
|
73
|
+
return serverKey || null;
|
|
74
|
+
};
|
|
75
|
+
|
|
70
76
|
getCodeSource = () => {
|
|
71
77
|
const { searchParams } = this.props;
|
|
72
78
|
// let params=Units.transQueryStrToParams(location.search);
|
|
@@ -84,16 +90,15 @@ class DtmplRoute extends React.Component<DtmplRouteProps, DtmplRoutePropsStat> {
|
|
|
84
90
|
};
|
|
85
91
|
|
|
86
92
|
goNavigatel = () => {
|
|
87
|
-
this.props.navigate(window.location.hash.replace("#/","/"));
|
|
93
|
+
this.props.navigate(window.location.hash.replace("#/", "/"));
|
|
88
94
|
//.reload();
|
|
89
95
|
};
|
|
90
96
|
|
|
91
97
|
goDtmpl = (code: string) => {
|
|
92
98
|
const { sourceId } = this.props.params;
|
|
93
99
|
const { basePath } = this.props;
|
|
94
|
-
let url = `${basePath}${
|
|
95
|
-
this.
|
|
96
|
-
}/${sourceId}/detail-edit?menuId=${this.getMenuId()}`;
|
|
100
|
+
let url = `${basePath}${this.computedLayoutPath
|
|
101
|
+
}/${sourceId}/detail-edit?menuId=${this.getMenuId()}`;
|
|
97
102
|
if (code) {
|
|
98
103
|
url = url + `&code=${code}`;
|
|
99
104
|
}
|
|
@@ -130,6 +135,7 @@ class DtmplRoute extends React.Component<DtmplRouteProps, DtmplRoutePropsStat> {
|
|
|
130
135
|
render() {
|
|
131
136
|
const { location, params, searchParams } = this.props;
|
|
132
137
|
const { sourceId } = params;
|
|
138
|
+
const serverKey = this.getServerKey();
|
|
133
139
|
|
|
134
140
|
const { codeSource } = this.state;
|
|
135
141
|
if (!location) {
|
|
@@ -143,8 +149,8 @@ class DtmplRoute extends React.Component<DtmplRouteProps, DtmplRoutePropsStat> {
|
|
|
143
149
|
let versionId = params["versionId"];
|
|
144
150
|
if (location.pathname.endsWith("detail-view")) {
|
|
145
151
|
return (
|
|
146
|
-
<TabActDtmplView key={sourceId+code+versionId}
|
|
147
|
-
serverKey={
|
|
152
|
+
<TabActDtmplView key={sourceId + code + versionId}
|
|
153
|
+
serverKey={serverKey}
|
|
148
154
|
goBackToLtmpl={codeSource ? undefined : this.goBackToLtmpl}
|
|
149
155
|
goDtmpl={this.goDtmpl}
|
|
150
156
|
sourceId={sourceId}
|
|
@@ -155,9 +161,9 @@ class DtmplRoute extends React.Component<DtmplRouteProps, DtmplRoutePropsStat> {
|
|
|
155
161
|
);
|
|
156
162
|
} else {
|
|
157
163
|
return (
|
|
158
|
-
<DtmplEdit key={sourceId+code+versionId}
|
|
164
|
+
<DtmplEdit key={sourceId + code + versionId}
|
|
159
165
|
addTmplId={searchParams.get("addTmplId")}
|
|
160
|
-
serverKey={
|
|
166
|
+
serverKey={serverKey}
|
|
161
167
|
addOrUpdate={this.getMode()}
|
|
162
168
|
sourceId={sourceId}
|
|
163
169
|
code={code}
|
|
@@ -2,13 +2,12 @@ import React from "react";
|
|
|
2
2
|
import { RouterCompProps } from "../tmpl/interface";
|
|
3
3
|
import ExcelImport from "../import/excel-import";
|
|
4
4
|
import withRouter from "./withroute";
|
|
5
|
-
import Units from "../units";
|
|
6
5
|
|
|
7
6
|
export interface ImportRouteProps extends RouterCompProps {
|
|
8
7
|
serverKey?: string;
|
|
9
8
|
layoutRootPath?: string;
|
|
10
9
|
}
|
|
11
|
-
interface ImportRouteStat {}
|
|
10
|
+
interface ImportRouteStat { }
|
|
12
11
|
|
|
13
12
|
class ExcelImportRoute extends React.PureComponent<
|
|
14
13
|
ImportRouteProps,
|
|
@@ -16,7 +15,7 @@ class ExcelImportRoute extends React.PureComponent<
|
|
|
16
15
|
> {
|
|
17
16
|
state = {};
|
|
18
17
|
|
|
19
|
-
async componentDidMount() {}
|
|
18
|
+
async componentDidMount() { }
|
|
20
19
|
|
|
21
20
|
get computedLayoutPath() {
|
|
22
21
|
const { layoutRootPath } = this.props;
|
|
@@ -24,11 +23,19 @@ class ExcelImportRoute extends React.PureComponent<
|
|
|
24
23
|
return "";
|
|
25
24
|
}
|
|
26
25
|
|
|
26
|
+
getServerKey = () => { // 获取serverKey
|
|
27
|
+
const { searchParams, serverKey } = this.props;
|
|
28
|
+
if (serverKey) return serverKey;
|
|
29
|
+
let temServerKey = searchParams.get("serverKey");
|
|
30
|
+
return temServerKey || null;
|
|
31
|
+
};
|
|
32
|
+
|
|
27
33
|
render() {
|
|
28
|
-
const { params
|
|
34
|
+
const { params } = this.props;
|
|
29
35
|
const { sourceId } = params;
|
|
36
|
+
const serverKey = this.getServerKey();
|
|
30
37
|
return (
|
|
31
|
-
<ExcelImport key={"excelimport"+sourceId} serverKey={serverKey} sourceId={sourceId}></ExcelImport>
|
|
38
|
+
<ExcelImport key={"excelimport" + sourceId} serverKey={serverKey} sourceId={sourceId}></ExcelImport>
|
|
32
39
|
);
|
|
33
40
|
}
|
|
34
41
|
}
|