aldehyde 0.2.503 → 0.2.504
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/action/index.d.ts +3 -1
- package/lib/controls/action/index.d.ts.map +1 -1
- package/lib/controls/action/index.js +17 -1
- package/lib/controls/action/index.js.map +1 -1
- package/lib/controls/icon-selector/icon/phonenode-menu-icon/iconfont.css +99 -99
- 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/lowcode-components/base-table/index.less +61 -61
- package/lib/lowcode-components/column-3d-chart/index.d.ts +1 -0
- package/lib/lowcode-components/column-3d-chart/index.d.ts.map +1 -1
- package/lib/lowcode-components/column-3d-chart/index.js +3 -1
- package/lib/lowcode-components/column-3d-chart/index.js.map +1 -1
- package/lib/lowcode-components/column-chart/index.d.ts +1 -0
- package/lib/lowcode-components/column-chart/index.d.ts.map +1 -1
- package/lib/lowcode-components/column-chart/index.js +3 -1
- package/lib/lowcode-components/column-chart/index.js.map +1 -1
- 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/line-bar-chart/index.d.ts +1 -0
- package/lib/lowcode-components/line-bar-chart/index.d.ts.map +1 -1
- package/lib/lowcode-components/line-bar-chart/index.js +3 -1
- package/lib/lowcode-components/line-bar-chart/index.js.map +1 -1
- package/lib/lowcode-components/line-chart/index.d.ts +1 -0
- package/lib/lowcode-components/line-chart/index.d.ts.map +1 -1
- package/lib/lowcode-components/line-chart/index.js +3 -1
- package/lib/lowcode-components/line-chart/index.js.map +1 -1
- 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/lowcode-view/index.d.ts.map +1 -1
- package/lib/lowcode-components/lowcode-view/index.js +8 -0
- package/lib/lowcode-components/lowcode-view/index.js.map +1 -1
- package/lib/lowcode-components/text-scroller/index.less +28 -28
- package/lib/module/dtmpl-edit-page.d.ts.map +1 -1
- package/lib/module/dtmpl-edit-page.js +7 -7
- package/lib/module/dtmpl-edit-page.js.map +1 -1
- package/lib/table/act-table.d.ts.map +1 -1
- package/lib/table/act-table.js +6 -6
- package/lib/table/act-table.js.map +1 -1
- package/lib/table/column/column-builder.d.ts +1 -0
- package/lib/table/column/column-builder.d.ts.map +1 -1
- package/lib/table/column/column-builder.js +25 -16
- package/lib/table/column/column-builder.js.map +1 -1
- package/lib/table/column/index.less +8 -8
- package/lib/table/report-table.d.ts.map +1 -1
- package/lib/table/report-table.js +3 -3
- package/lib/table/report-table.js.map +1 -1
- package/lib/tmpl/interface.d.ts +7 -0
- package/lib/tmpl/interface.d.ts.map +1 -1
- package/lib/tmpl/interface.js.map +1 -1
- package/package.json +1 -1
- package/src/aldehyde/controls/action/index.tsx +33 -2
- package/src/aldehyde/controls/icon-selector/icon/phonenode-menu-icon/iconfont.css +99 -99
- package/src/aldehyde/controls/icon-selector/icon/phonenode-menu-icon/iconfont.json +156 -156
- 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/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/column-3d-chart/index.tsx +3 -1
- package/src/aldehyde/lowcode-components/column-chart/index.tsx +3 -1
- 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/line-bar-chart/index.tsx +3 -1
- package/src/aldehyde/lowcode-components/line-chart/index.tsx +3 -1
- 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 +144 -144
- 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/lowcode-view/index.tsx +9 -0
- 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/dtmpl-edit-page.tsx +10 -10
- package/src/aldehyde/table/act-table.tsx +6 -6
- package/src/aldehyde/table/column/column-builder.tsx +26 -36
- package/src/aldehyde/table/column/index.less +8 -8
- package/src/aldehyde/table/report-table.tsx +3 -2
- package/src/aldehyde/tmpl/interface.tsx +7 -0
|
@@ -1,82 +1,82 @@
|
|
|
1
|
-
|
|
2
|
-
import React, { ForwardedRef, forwardRef, useMemo, useImperativeHandle, useState } from 'react';
|
|
3
|
-
import Units from "../../units/index";
|
|
4
|
-
import { useLocale } from "../../locale/useLocale";
|
|
5
|
-
|
|
6
|
-
const defStyle = {
|
|
7
|
-
color: '#9a9a9a',
|
|
8
|
-
height: '100%',
|
|
9
|
-
display: 'flex',
|
|
10
|
-
justifyContent: 'center',
|
|
11
|
-
alignItems: 'center',
|
|
12
|
-
border: '1px solid #9a9a9a',
|
|
13
|
-
};
|
|
14
|
-
|
|
15
|
-
export interface ComponentProps {
|
|
16
|
-
style: { key: string; compsIds?: string[]; },
|
|
17
|
-
isDesignMode?: boolean; // 是否编辑模式
|
|
18
|
-
initSearchParams?: { [key: string]: any }; // 全局初始化外部参数,例:传参包含设备id,则在查询时带上设备id
|
|
19
|
-
setSearchParams: (data: any) => void;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
export interface CompImageonentRef {
|
|
23
|
-
updateConfig: (newConfig: ComponentProps) => void;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
const PlaceholderComponent = forwardRef((props: ComponentProps, ref: ForwardedRef<CompImageonentRef>) => {
|
|
27
|
-
const { isDesignMode, setSearchParams, style } = props;
|
|
28
|
-
const { translate } = useLocale();
|
|
29
|
-
const [key, setKey] = useState<string>(style?.key);
|
|
30
|
-
const [initSearchParams, setInitSearchParams] = useState<{ [key: string]: any }>();
|
|
31
|
-
const [compsIds, setCompsIds] = useState<string[]>(style?.compsIds || []);
|
|
32
|
-
|
|
33
|
-
useImperativeHandle(ref, () => ({
|
|
34
|
-
updateConfig: (newConfig) => {
|
|
35
|
-
setKey(newConfig.style?.key);
|
|
36
|
-
setInitSearchParams(newConfig.initSearchParams || {});
|
|
37
|
-
setCompsIds(newConfig.style?.compsIds || []);
|
|
38
|
-
},
|
|
39
|
-
}));
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
const handleParams = (params: { [key: string]: any }) => {
|
|
43
|
-
if (!compsIds?.length) {
|
|
44
|
-
return;
|
|
45
|
-
}
|
|
46
|
-
setSearchParams(val => {
|
|
47
|
-
const temObj = {};
|
|
48
|
-
for (const compId of compsIds) {
|
|
49
|
-
if (val[compId]) { // 全局搜索参数中存在当前组件的搜索参数,则合并
|
|
50
|
-
val[compId] = { ...val[compId], ...params }
|
|
51
|
-
} else {
|
|
52
|
-
temObj[compId] = params;
|
|
53
|
-
}
|
|
54
|
-
};
|
|
55
|
-
return { ...val, ...temObj };
|
|
56
|
-
});
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
const renderComponent = useMemo(() => {
|
|
61
|
-
const temComponent = Units.getCustomComponent(key);
|
|
62
|
-
if (temComponent) {
|
|
63
|
-
return React.createElement(temComponent, { params: initSearchParams, handleParams });
|
|
64
|
-
}
|
|
65
|
-
return <div style={defStyle}>{translate("${没有找到自定义组件}")}</div>;
|
|
66
|
-
}, [key, initSearchParams]);
|
|
67
|
-
|
|
68
|
-
return (
|
|
69
|
-
<div style={{ width: '100%', height: '100%' }}>
|
|
70
|
-
{isDesignMode || !key ?
|
|
71
|
-
<div style={defStyle}>
|
|
72
|
-
<div>{translate("${占位组件}")}</div>
|
|
73
|
-
</div> :
|
|
74
|
-
<div style={{ width: '100%', height: '100%', overflow: "auto" }}>
|
|
75
|
-
{renderComponent}
|
|
76
|
-
</div>
|
|
77
|
-
}
|
|
78
|
-
</div>
|
|
79
|
-
);
|
|
80
|
-
});
|
|
81
|
-
|
|
1
|
+
|
|
2
|
+
import React, { ForwardedRef, forwardRef, useMemo, useImperativeHandle, useState } from 'react';
|
|
3
|
+
import Units from "../../units/index";
|
|
4
|
+
import { useLocale } from "../../locale/useLocale";
|
|
5
|
+
|
|
6
|
+
const defStyle = {
|
|
7
|
+
color: '#9a9a9a',
|
|
8
|
+
height: '100%',
|
|
9
|
+
display: 'flex',
|
|
10
|
+
justifyContent: 'center',
|
|
11
|
+
alignItems: 'center',
|
|
12
|
+
border: '1px solid #9a9a9a',
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
export interface ComponentProps {
|
|
16
|
+
style: { key: string; compsIds?: string[]; },
|
|
17
|
+
isDesignMode?: boolean; // 是否编辑模式
|
|
18
|
+
initSearchParams?: { [key: string]: any }; // 全局初始化外部参数,例:传参包含设备id,则在查询时带上设备id
|
|
19
|
+
setSearchParams: (data: any) => void;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
export interface CompImageonentRef {
|
|
23
|
+
updateConfig: (newConfig: ComponentProps) => void;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
const PlaceholderComponent = forwardRef((props: ComponentProps, ref: ForwardedRef<CompImageonentRef>) => {
|
|
27
|
+
const { isDesignMode, setSearchParams, style } = props;
|
|
28
|
+
const { translate } = useLocale();
|
|
29
|
+
const [key, setKey] = useState<string>(style?.key);
|
|
30
|
+
const [initSearchParams, setInitSearchParams] = useState<{ [key: string]: any }>();
|
|
31
|
+
const [compsIds, setCompsIds] = useState<string[]>(style?.compsIds || []);
|
|
32
|
+
|
|
33
|
+
useImperativeHandle(ref, () => ({
|
|
34
|
+
updateConfig: (newConfig) => {
|
|
35
|
+
setKey(newConfig.style?.key);
|
|
36
|
+
setInitSearchParams(newConfig.initSearchParams || {});
|
|
37
|
+
setCompsIds(newConfig.style?.compsIds || []);
|
|
38
|
+
},
|
|
39
|
+
}));
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
const handleParams = (params: { [key: string]: any }) => {
|
|
43
|
+
if (!compsIds?.length) {
|
|
44
|
+
return;
|
|
45
|
+
}
|
|
46
|
+
setSearchParams(val => {
|
|
47
|
+
const temObj = {};
|
|
48
|
+
for (const compId of compsIds) {
|
|
49
|
+
if (val[compId]) { // 全局搜索参数中存在当前组件的搜索参数,则合并
|
|
50
|
+
val[compId] = { ...val[compId], ...params }
|
|
51
|
+
} else {
|
|
52
|
+
temObj[compId] = params;
|
|
53
|
+
}
|
|
54
|
+
};
|
|
55
|
+
return { ...val, ...temObj };
|
|
56
|
+
});
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
const renderComponent = useMemo(() => {
|
|
61
|
+
const temComponent = Units.getCustomComponent(key);
|
|
62
|
+
if (temComponent) {
|
|
63
|
+
return React.createElement(temComponent, { params: initSearchParams, handleParams });
|
|
64
|
+
}
|
|
65
|
+
return <div style={defStyle}>{translate("${没有找到自定义组件}")}</div>;
|
|
66
|
+
}, [key, initSearchParams]);
|
|
67
|
+
|
|
68
|
+
return (
|
|
69
|
+
<div style={{ width: '100%', height: '100%' }}>
|
|
70
|
+
{isDesignMode || !key ?
|
|
71
|
+
<div style={defStyle}>
|
|
72
|
+
<div>{translate("${占位组件}")}</div>
|
|
73
|
+
</div> :
|
|
74
|
+
<div style={{ width: '100%', height: '100%', overflow: "auto" }}>
|
|
75
|
+
{renderComponent}
|
|
76
|
+
</div>
|
|
77
|
+
}
|
|
78
|
+
</div>
|
|
79
|
+
);
|
|
80
|
+
});
|
|
81
|
+
|
|
82
82
|
export default PlaceholderComponent;
|
|
@@ -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;
|
|
@@ -412,14 +412,6 @@ export default class DtmplEditPage extends React.PureComponent<
|
|
|
412
412
|
const { saveBtnTitle, continueSaveBtnTitle } = dtmplConfig || {};
|
|
413
413
|
const { translate } = this.context;
|
|
414
414
|
if (dtmplConfig?.buttons?.includes("dtmplSave")) {
|
|
415
|
-
footerButtons.unshift(
|
|
416
|
-
<Button type="primary" loading={loading || btnLoading === "saveLoading"} onClick={() => {
|
|
417
|
-
this.setState({ btnLoading: "saveLoading" });
|
|
418
|
-
this.doSubmit();
|
|
419
|
-
}}>
|
|
420
|
-
{translate("${" + (saveBtnTitle || "保存") + "}")}
|
|
421
|
-
</Button>
|
|
422
|
-
);
|
|
423
415
|
if (continueSaveBtnTitle) {
|
|
424
416
|
footerButtons.unshift(
|
|
425
417
|
<Button type="primary" loading={loading || btnLoading === "continueSaveLoading"} onClick={() => {
|
|
@@ -429,6 +421,15 @@ export default class DtmplEditPage extends React.PureComponent<
|
|
|
429
421
|
{translate("${" + continueSaveBtnTitle + "}")}
|
|
430
422
|
</Button>
|
|
431
423
|
);
|
|
424
|
+
} else {
|
|
425
|
+
footerButtons.unshift(
|
|
426
|
+
<Button type="primary" loading={loading || btnLoading === "saveLoading"} onClick={() => {
|
|
427
|
+
this.setState({ btnLoading: "saveLoading" });
|
|
428
|
+
this.doSubmit();
|
|
429
|
+
}}>
|
|
430
|
+
{translate("${" + (saveBtnTitle || "保存") + "}")}
|
|
431
|
+
</Button>
|
|
432
|
+
);
|
|
432
433
|
}
|
|
433
434
|
}
|
|
434
435
|
//处理action
|
|
@@ -475,9 +476,8 @@ export default class DtmplEditPage extends React.PureComponent<
|
|
|
475
476
|
if (code) {
|
|
476
477
|
if (propsCode && isContinueSave) {
|
|
477
478
|
this.loadConfigData();
|
|
478
|
-
} else {
|
|
479
|
-
this.props.onOk(code, isContinueSave);
|
|
480
479
|
}
|
|
480
|
+
this.props.onOk(code, isContinueSave);
|
|
481
481
|
}
|
|
482
482
|
}
|
|
483
483
|
|
|
@@ -767,20 +767,19 @@ class ActTable extends React.PureComponent<ActTableProps, ActTableStat> {
|
|
|
767
767
|
doJump = async (jump: JumpConfig, record_: DtmplData) => {
|
|
768
768
|
let record = record_.fieldMap ? record_.fieldMap : record_;
|
|
769
769
|
const version = localStorage.getItem("version") || "";
|
|
770
|
-
|
|
771
770
|
let url = null;
|
|
772
771
|
let path = jump.path;
|
|
773
772
|
if (!path) {
|
|
774
773
|
path = "/";
|
|
775
774
|
}
|
|
776
775
|
//是否以http开头
|
|
777
|
-
if (path?.
|
|
776
|
+
if (path?.startsWith("#") || url?.startsWith("/#")) {
|
|
778
777
|
url = "";
|
|
779
778
|
} else if (
|
|
780
|
-
path.
|
|
781
|
-
path.
|
|
782
|
-
path.
|
|
783
|
-
path.
|
|
779
|
+
path.startsWith("http://") ||
|
|
780
|
+
path.startsWith("HTTP://") ||
|
|
781
|
+
path.startsWith("https://") ||
|
|
782
|
+
path.startsWith("HTTPS://")
|
|
784
783
|
) {
|
|
785
784
|
url = path.split("//")[0] + "//";
|
|
786
785
|
path = path.split("//")[1];
|
|
@@ -1634,6 +1633,7 @@ class ActTable extends React.PureComponent<ActTableProps, ActTableStat> {
|
|
|
1634
1633
|
leftFixedCols={ltmplConfig.leftFixedCols}
|
|
1635
1634
|
onChangeResize={this.onChangeResize}
|
|
1636
1635
|
showEmpty={showEmpty}
|
|
1636
|
+
tableLayout={ltmplConfig.tableLayout}
|
|
1637
1637
|
/> :
|
|
1638
1638
|
<QueryTable key={"querytable" + sourceId} sourceId={sourceId}
|
|
1639
1639
|
// queryTotal={this.queryTotal}
|