Skip to content

Commit bf7be33

Browse files
gyf520gyf520
committed
Merge remote-tracking branch '[email protected]/1.x' into 1.x
2 parents 5f95c45 + 395f373 commit bf7be33

File tree

12 files changed

+280
-162
lines changed

12 files changed

+280
-162
lines changed

‎src/pages/device/visualization/GridCard.tsx

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React, { useEffect, useState } from "react";
2+
import loadable from "@loadable/component";
3+
import { ComponentProps } from ".";
4+
5+
interface Props extends ComponentProps {
6+
item: any;
7+
id: string;
8+
config: any;
9+
props: any;
10+
h: number;
11+
}
12+
const GridCard = (props: Props) => {
13+
const [ChartComponent, setChartComponent] = useState<any>();
14+
useEffect(() => {
15+
const component = loadable<ComponentProps>(() => import(`./charts/${props.config?.component}`));
16+
setChartComponent(component);
17+
}, []);
18+
19+
return (
20+
<div>
21+
{ChartComponent && <ChartComponent
22+
style={{ padding: 10 }}
23+
{...props.props}
24+
ySize={props.h}
25+
config={props.config}
26+
productId={props.productId}
27+
deviceId={props.deviceId}
28+
/>}
29+
</div>
30+
31+
)
32+
}
33+
export default GridCard;

‎src/pages/device/visualization/add-item/edit/ColumnChartEdit.tsx

+48-15
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,20 @@ const ColumnChartEdit = (props: Props) => {
1919
const config = props.data?.config;
2020
// 历史数据：数据量、时间范围
2121
// 聚合数据：数据量、时间范围、聚合类型、时间周期
22+
const getData = () => {
23+
let data: any;
24+
form.validateFields((err, fileValue) => {
25+
if (err) {
26+
return;
27+
}
28+
data = fileValue;
29+
});
30+
return data;
31+
}
2232
useEffect(() => {
2333
// 加载后执行
2434
if (props.save) {
25-
props.save(() => form.getFieldsValue())
35+
props.save(() => getData())
2636
}
2737
if (props.data) {
2838
setType(props.data?.config?.dimension);
@@ -40,7 +50,8 @@ const ColumnChartEdit = (props: Props) => {
4050
label="数据量"
4151
>
4252
{getFieldDecorator('history', {
43-
initialValue: config?.history || 30
53+
initialValue: config?.history || 30,
54+
rules: [{ required: true, message: '请输入数据量' }]
4455
})(
4556
<InputNumber style={{ width: '100%' }} />
4657
)}
@@ -51,7 +62,9 @@ const ColumnChartEdit = (props: Props) => {
5162
label="时间格式"
5263
>
5364
{getFieldDecorator('timeFormat', {
54-
initialValue: config?.timeFormat
65+
initialValue: config?.timeFormat || 'yyyy-MM-dd',
66+
rules: [{ required: true, message: '请输入时间格式' }]
67+
5568
})(
5669
<Input />
5770
)}
@@ -68,7 +81,9 @@ const ColumnChartEdit = (props: Props) => {
6881
style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}
6982
>
7083
{getFieldDecorator('from', {
71-
initialValue: config?.from
84+
initialValue: config?.from || 'now-7d',
85+
rules: [{ required: true }]
86+
7287
})(
7388
<Input />
7489
)}
@@ -80,7 +95,7 @@ const ColumnChartEdit = (props: Props) => {
8095
style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}
8196
>
8297
{getFieldDecorator('to', {
83-
initialValue: config?.to
98+
initialValue: config?.to,
8499
})(
85100
<Input />
86101
)}
@@ -98,7 +113,9 @@ const ColumnChartEdit = (props: Props) => {
98113
label="数据量"
99114
>
100115
{getFieldDecorator('limit', {
101-
initialValue: config?.limit || 30
116+
initialValue: config?.limit || 30,
117+
rules: [{ required: true, message: '请输入数据量' }]
118+
102119
})(
103120
<InputNumber style={{ width: '100%' }} />
104121
)}
@@ -109,7 +126,9 @@ const ColumnChartEdit = (props: Props) => {
109126
label="聚合类型"
110127
>
111128
{getFieldDecorator('agg', {
112-
initialValue: config?.agg || 'avg'
129+
initialValue: config?.agg || 'avg',
130+
rules: [{ required: true }]
131+
113132
})(
114133
<Select>
115134
<Select.Option value="avg">AVG</Select.Option>
@@ -133,7 +152,7 @@ const ColumnChartEdit = (props: Props) => {
133152
style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}
134153
>
135154
{getFieldDecorator('from', {
136-
initialValue: config?.from || 'now-30d'
155+
initialValue: config?.from || 'now-30d',
137156
})(
138157
<Input />
139158
)}
@@ -157,7 +176,9 @@ const ColumnChartEdit = (props: Props) => {
157176
<Tooltip title="M:月、d:天、h:小时、m:分钟、">
158177
<Form.Item label="时间间隔">
159178
{getFieldDecorator('time', {
160-
initialValue: config?.time || '1d'
179+
initialValue: config?.time || '1d',
180+
rules: [{ required: true, message: '请输入时间间隔' }]
181+
161182
})(
162183
<Input />
163184
)}
@@ -169,7 +190,9 @@ const ColumnChartEdit = (props: Props) => {
169190
label="时间格式"
170191
>
171192
{getFieldDecorator('format', {
172-
initialValue: config?.format || 'yyyy-MM-dd'
193+
initialValue: config?.format || 'yyyy-MM-dd',
194+
rules: [{ required: true, message: '请输入时间格式' }]
195+
173196
})(
174197
<Input />
175198
)}
@@ -189,7 +212,9 @@ const ColumnChartEdit = (props: Props) => {
189212
label="名称"
190213
>
191214
{getFieldDecorator('name', {
192-
initialValue: config?.name
215+
initialValue: config?.name,
216+
rules: [{ required: true, message: '请输入名称' }]
217+
193218
})(
194219
<Input />)}
195220
</Form.Item>
@@ -199,7 +224,9 @@ const ColumnChartEdit = (props: Props) => {
199224
label="X轴"
200225
>
201226
{getFieldDecorator('x', {
202-
initialValue: config?.x || '时间'
227+
initialValue: config?.x || '时间',
228+
rules: [{ required: true, message: '请输入X轴名称' }]
229+
203230
})(
204231
<Input placeholder="X轴名称" />
205232
)}
@@ -210,7 +237,9 @@ const ColumnChartEdit = (props: Props) => {
210237
label="Y轴"
211238
>
212239
{getFieldDecorator('y', {
213-
initialValue: config?.y || '值'
240+
initialValue: config?.y || '值',
241+
rules: [{ required: true, message: '请输入Y轴名称' }]
242+
214243
})(
215244
<Input placeholder="Y轴名称" />
216245
)}
@@ -221,7 +250,9 @@ const ColumnChartEdit = (props: Props) => {
221250
label="属性"
222251
>
223252
{getFieldDecorator('measurement', {
224-
initialValue: config?.measurement
253+
initialValue: config?.measurement,
254+
rules: [{ required: true, message: '请选择属性' }]
255+
225256
})(
226257
<Select style={{ width: "100%" }}>
227258
{properties.map((i: any) => <Select.Option key={i.id} value={i.id}>{i.name}</Select.Option>)}
@@ -234,7 +265,9 @@ const ColumnChartEdit = (props: Props) => {
234265
label="类型"
235266
>
236267
{getFieldDecorator('dimension', {
237-
initialValue: config?.dimension
268+
initialValue: config?.dimension,
269+
rules: [{ required: true, message: '请选择数据类型' }]
270+
238271
})(
239272
<Select onChange={(e: string) => setType(e)}>
240273
<Select.Option value='history'>历史数据</Select.Option>

‎src/pages/device/visualization/add-item/edit/GaugeChartEdit.tsx

+16-3
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,20 @@ const GaugeChartEdit = (props: Props) => {
2020

2121
// 历史数据：数据量、时间范围
2222
// 聚合数据：数据量、时间范围、聚合类型、时间周期
23+
const getData = () => {
24+
let data: any;
25+
form.validateFields((err, fileValue) => {
26+
if (err) {
27+
return;
28+
}
29+
data = fileValue;
30+
});
31+
return data;
32+
}
2333
useEffect(() => {
2434
// 加载后执行
2535
if (props.save) {
26-
props.save(() => form.getFieldsValue())
36+
props.save(() => getData())
2737
}
2838
if (props.data) {
2939
setType(props.data?.config?.dimension);
@@ -38,7 +48,9 @@ const GaugeChartEdit = (props: Props) => {
3848
label="名称"
3949
>
4050
{getFieldDecorator('name', {
41-
initialValue: config?.name
51+
initialValue: config?.name,
52+
rules: [{ required: true, message: '请输入名称' }]
53+
4254
})(
4355
<Input />)}
4456
</Form.Item>
@@ -48,7 +60,8 @@ const GaugeChartEdit = (props: Props) => {
4860
label="属性"
4961
>
5062
{getFieldDecorator('measurement', {
51-
initialValue: config?.measurement
63+
initialValue: config?.measurement,
64+
rules: [{ required: true, message: '选择属性' }]
5265
})(
5366
<Select style={{ width: "100%" }}>
5467
{properties.map((i: any) => <Select.Option key={i.id} value={i.id}>{i.name}</Select.Option>)}

0 commit comments

Comments
 (0)