Skip to content

Commit

Permalink
Merge remote-tracking branch '[email protected]/1.x' into 1.x
Browse files Browse the repository at this point in the history
  • Loading branch information
@gyf520
gyf520 committed Apr 30, 2020
2 parents 5f95c45 + 395f373 commit bf7be33
Show file tree
Hide file tree
Showing 12 changed files with 280 additions and 162 deletions.
33 changes: 33 additions & 0 deletions src/pages/device/visualization/GridCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import React, { useEffect, useState } from "react";
import loadable from "@loadable/component";
import { ComponentProps } from ".";

interface Props extends ComponentProps {
item: any;
id: string;
config: any;
props: any;
h: number;
}
const GridCard = (props: Props) => {
const [ChartComponent, setChartComponent] = useState<any>();
useEffect(() => {
const component = loadable<ComponentProps>(() => import(`./charts/${props.config?.component}`));
setChartComponent(component);
}, []);

return (
<div>
{ChartComponent && <ChartComponent
style={{ padding: 10 }}
{...props.props}
ySize={props.h}
config={props.config}
productId={props.productId}
deviceId={props.deviceId}
/>}
</div>

)
}
export default GridCard;
63 changes: 48 additions & 15 deletions src/pages/device/visualization/add-item/edit/ColumnChartEdit.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,20 @@ const ColumnChartEdit = (props: Props) => {
const config = props.data?.config;
// 历史数据：数据量、时间范围
// 聚合数据：数据量、时间范围、聚合类型、时间周期
const getData = () => {
let data: any;
form.validateFields((err, fileValue) => {
if (err) {
return;
}
data = fileValue;
});
return data;
}
useEffect(() => {
// 加载后执行
if (props.save) {
props.save(() => form.getFieldsValue())
props.save(() => getData())
}
if (props.data) {
setType(props.data?.config?.dimension);
Expand All @@ -40,7 +50,8 @@ const ColumnChartEdit = (props: Props) => {
label="数据量"
>
{getFieldDecorator('history', {
initialValue: config?.history || 30
initialValue: config?.history || 30,
rules: [{ required: true, message: '请输入数据量' }]
})(
<InputNumber style={{ width: '100%' }} />
)}
Expand All @@ -51,7 +62,9 @@ const ColumnChartEdit = (props: Props) => {
label="时间格式"
>
{getFieldDecorator('timeFormat', {
initialValue: config?.timeFormat
initialValue: config?.timeFormat || 'yyyy-MM-dd',
rules: [{ required: true, message: '请输入时间格式' }]

})(
<Input />
)}
Expand All @@ -68,7 +81,9 @@ const ColumnChartEdit = (props: Props) => {
style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}
>
{getFieldDecorator('from', {
initialValue: config?.from
initialValue: config?.from || 'now-7d',
rules: [{ required: true }]

})(
<Input />
)}
Expand All @@ -80,7 +95,7 @@ const ColumnChartEdit = (props: Props) => {
style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}
>
{getFieldDecorator('to', {
initialValue: config?.to
initialValue: config?.to,
})(
<Input />
)}
Expand All @@ -98,7 +113,9 @@ const ColumnChartEdit = (props: Props) => {
label="数据量"
>
{getFieldDecorator('limit', {
initialValue: config?.limit || 30
initialValue: config?.limit || 30,
rules: [{ required: true, message: '请输入数据量' }]

})(
<InputNumber style={{ width: '100%' }} />
)}
Expand All @@ -109,7 +126,9 @@ const ColumnChartEdit = (props: Props) => {
label="聚合类型"
>
{getFieldDecorator('agg', {
initialValue: config?.agg || 'avg'
initialValue: config?.agg || 'avg',
rules: [{ required: true }]

})(
<Select>
<Select.Option value="avg">AVG</Select.Option>
Expand All @@ -133,7 +152,7 @@ const ColumnChartEdit = (props: Props) => {
style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}
>
{getFieldDecorator('from', {
initialValue: config?.from || 'now-30d'
initialValue: config?.from || 'now-30d',
})(
<Input />
)}
Expand All @@ -157,7 +176,9 @@ const ColumnChartEdit = (props: Props) => {
<Tooltip title="M:月、d:天、h:小时、m:分钟、">
<Form.Item label="时间间隔">
{getFieldDecorator('time', {
initialValue: config?.time || '1d'
initialValue: config?.time || '1d',
rules: [{ required: true, message: '请输入时间间隔' }]

})(
<Input />
)}
Expand All @@ -169,7 +190,9 @@ const ColumnChartEdit = (props: Props) => {
label="时间格式"
>
{getFieldDecorator('format', {
initialValue: config?.format || 'yyyy-MM-dd'
initialValue: config?.format || 'yyyy-MM-dd',
rules: [{ required: true, message: '请输入时间格式' }]

})(
<Input />
)}
Expand All @@ -189,7 +212,9 @@ const ColumnChartEdit = (props: Props) => {
label="名称"
>
{getFieldDecorator('name', {
initialValue: config?.name
initialValue: config?.name,
rules: [{ required: true, message: '请输入名称' }]

})(
<Input />)}
</Form.Item>
Expand All @@ -199,7 +224,9 @@ const ColumnChartEdit = (props: Props) => {
label="X轴"
>
{getFieldDecorator('x', {
initialValue: config?.x || '时间'
initialValue: config?.x || '时间',
rules: [{ required: true, message: '请输入X轴名称' }]

})(
<Input placeholder="X轴名称" />
)}
Expand All @@ -210,7 +237,9 @@ const ColumnChartEdit = (props: Props) => {
label="Y轴"
>
{getFieldDecorator('y', {
initialValue: config?.y || '值'
initialValue: config?.y || '值',
rules: [{ required: true, message: '请输入Y轴名称' }]

})(
<Input placeholder="Y轴名称" />
)}
Expand All @@ -221,7 +250,9 @@ const ColumnChartEdit = (props: Props) => {
label="属性"
>
{getFieldDecorator('measurement', {
initialValue: config?.measurement
initialValue: config?.measurement,
rules: [{ required: true, message: '请选择属性' }]

})(
<Select style={{ width: "100%" }}>
{properties.map((i: any) => <Select.Option key={i.id} value={i.id}>{i.name}</Select.Option>)}
Expand All @@ -234,7 +265,9 @@ const ColumnChartEdit = (props: Props) => {
label="类型"
>
{getFieldDecorator('dimension', {
initialValue: config?.dimension
initialValue: config?.dimension,
rules: [{ required: true, message: '请选择数据类型' }]

})(
<Select onChange={(e: string) => setType(e)}>
<Select.Option value='history'>历史数据</Select.Option>
Expand Down
19 changes: 16 additions & 3 deletions src/pages/device/visualization/add-item/edit/GaugeChartEdit.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,20 @@ const GaugeChartEdit = (props: Props) => {

// 历史数据：数据量、时间范围
// 聚合数据：数据量、时间范围、聚合类型、时间周期
const getData = () => {
let data: any;
form.validateFields((err, fileValue) => {
if (err) {
return;
}
data = fileValue;
});
return data;
}
useEffect(() => {
// 加载后执行
if (props.save) {
props.save(() => form.getFieldsValue())
props.save(() => getData())
}
if (props.data) {
setType(props.data?.config?.dimension);
Expand All @@ -38,7 +48,9 @@ const GaugeChartEdit = (props: Props) => {
label="名称"
>
{getFieldDecorator('name', {
initialValue: config?.name
initialValue: config?.name,
rules: [{ required: true, message: '请输入名称' }]

})(
<Input />)}
</Form.Item>
Expand All @@ -48,7 +60,8 @@ const GaugeChartEdit = (props: Props) => {
label="属性"
>
{getFieldDecorator('measurement', {
initialValue: config?.measurement
initialValue: config?.measurement,
rules: [{ required: true, message: '选择属性' }]
})(
<Select style={{ width: "100%" }}>
{properties.map((i: any) => <Select.Option key={i.id} value={i.id}>{i.name}</Select.Option>)}
Expand Down
Loading

0 comments on commit bf7be33

Please sign in to comment.