Skip to content

Commit

Permalink
fix(运行状态): 查看详情时如果时对象则格式化
Browse files Browse the repository at this point in the history 
根据数据类型格式化参数

re #200
  • Loading branch information
@Lind-pro
Lind-pro committed Sep 9, 2020
1 parent 9d31e89 commit f63bfc8
Show file tree
Hide file tree
Showing 2 changed files with 89 additions and 87 deletions.
12 changes: 6 additions & 6 deletions src/pages/device/instance/editor/detail/event-log/EventLog.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, {useEffect, useState} from 'react';
import {Form, Modal, Table} from 'antd';
import {ColumnProps, PaginationConfig, SorterResult} from 'antd/lib/table';
import React, { useEffect, useState } from 'react';
import { Form, Modal, Table } from 'antd';
import { ColumnProps, PaginationConfig, SorterResult } from 'antd/lib/table';
import apis from '@/services';
import encodeQueryParam from '@/utils/encodeParam';
import moment from 'moment';
Expand Down Expand Up @@ -58,7 +58,7 @@ const EventLog: React.FC<Props> = props => {
title: '详情',
width: 850,
content: (
<Form.Item wrapperCol={{span: 20}} labelCol={{span: 4}} label={props.item.name}>
<Form.Item wrapperCol={{ span: 20 }} labelCol={{ span: 4 }} label={props.item.name}>
<AceEditor
readOnly
value={JSON.stringify(record, null, 2)}
Expand All @@ -72,7 +72,7 @@ const EventLog: React.FC<Props> = props => {
wrapEnabled
highlightActiveLine //突出活动线
enableSnippets //启用代码段
style={{width: '100%', height: '50vh'}}
style={{ width: '100%', height: '50vh' }}
setOptions={{
enableBasicAutocompletion: true, //启用基本自动完成功能
enableLiveAutocompletion: true, //启用实时自动完成功能 （比如：智能代码提示）
Expand Down Expand Up @@ -134,7 +134,7 @@ const EventLog: React.FC<Props> = props => {
width="70%"
>
<Table
rowKey='createTime'
rowKey='id'
dataSource={logData.data}
size="small"
onChange={onTableChange}
Expand Down
164 changes: 83 additions & 81 deletions src/pages/device/instance/editor/detail/properties-data/propertiesInfo.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, {useEffect, useState} from 'react';
import React, { useEffect, useState } from 'react';
import {
Button,
Card,
Expand All @@ -14,13 +14,13 @@ import {
Tooltip as AntdTooltip,
message
} from 'antd';
import {ColumnProps, PaginationConfig} from 'antd/lib/table';
import { ColumnProps, PaginationConfig } from 'antd/lib/table';
import apis from '@/services';
import encodeQueryParam from '@/utils/encodeParam';
import moment, {Moment} from 'moment';
import {FormComponentProps} from "antd/es/form";
import {Axis, Chart, Geom, Legend, Tooltip} from "bizcharts";
import {Map} from "react-amap";
import moment, { Moment } from 'moment';
import { FormComponentProps } from "antd/es/form";
import { Axis, Chart, Geom, Legend, Tooltip } from "bizcharts";
import { Map } from "react-amap";
import img26 from './img/img-26.png';
import mark_b from "@/pages/device/location/img/mark_b.png";
import CopyToClipboard from 'react-copy-to-clipboard';
Expand All @@ -35,6 +35,7 @@ import 'ace-builds/src-noconflict/snippets/json';
import 'ace-builds/src-noconflict/ext-language_tools';
import 'ace-builds/src-noconflict/ext-searchbox';
import 'ace-builds/src-noconflict/theme-eclipse';
import { propertieInfo } from '../../../service';

interface Props extends FormComponentProps {
close: Function;
Expand All @@ -59,7 +60,7 @@ interface State {
const PropertiesInfo: React.FC<Props> = props => {

const {
form: {getFieldDecorator},
form: { getFieldDecorator },
form,
} = props;
const initState: State = {
Expand All @@ -75,7 +76,7 @@ const PropertiesInfo: React.FC<Props> = props => {
ellipsis: true,
render: text => (
<CopyToClipboard text={text} onCopy={() => message.success('已复制')}>
<span>{text}<Icon type="copy"/></span>
<span>{typeof (text) === 'object' ? JSON.stringify(text) : text}<Icon type="copy" /></span>
</CopyToClipboard>
)
},
Expand All @@ -89,9 +90,9 @@ const PropertiesInfo: React.FC<Props> = props => {
title: '详情',
width: 850,
content: (
<Form.Item wrapperCol={{span: 20}} labelCol={{span: 4}} label={props.item.name}>
<Form.Item wrapperCol={{ span: 20 }} labelCol={{ span: 4 }} label={props.item.name}>
<AceEditor
value={JSON.stringify(JSON.parse(text), null, 2)}
value={JSON.stringify((text), null, 2)}
mode='json'
theme="eclipse"
name="app_code_editor"
Expand All @@ -102,7 +103,7 @@ const PropertiesInfo: React.FC<Props> = props => {
wrapEnabled
highlightActiveLine //突出活动线
enableSnippets //启用代码段
style={{width: '100%', height: '50vh'}}
style={{ width: '100%', height: '50vh' }}
setOptions={{
enableBasicAutocompletion: true, //启用基本自动完成功能
enableLiveAutocompletion: true, //启用实时自动完成功能 （比如：智能代码提示）
Expand Down Expand Up @@ -250,19 +251,19 @@ const PropertiesInfo: React.FC<Props> = props => {
field: 'timestamp',
order: 'desc',
},
terms: {property: props.item.id},
terms: { property: props.item.id },
});

if (props.item.valueType.type === 'geoPoint') {
trajectory({
pageIndex: 0,
pageSize: 1000,
sorts: {
field: 'timestamp',
order: 'asc',
},
terms: {property: props.item.id},
}
pageIndex: 0,
pageSize: 1000,
sorts: {
field: 'timestamp',
order: 'asc',
},
terms: { property: props.item.id },
}
);
}
}, []);
Expand All @@ -276,7 +277,7 @@ const PropertiesInfo: React.FC<Props> = props => {
field: 'timestamp',
order: 'desc',
},
terms: {...params, property: props.item.id},
terms: { ...params, property: props.item.id },
});
};

Expand Down Expand Up @@ -305,7 +306,7 @@ const PropertiesInfo: React.FC<Props> = props => {
field: 'timestamp',
order: 'desc',
},
terms: {property: props.item.id},
terms: { property: props.item.id },
});
if (props.item.valueType.type === 'geoPoint') {
geoPoint();
Expand All @@ -319,7 +320,7 @@ const PropertiesInfo: React.FC<Props> = props => {
field: 'timestamp',
order: 'desc',
},
terms: {property: props.item.id},
terms: { property: props.item.id },
}
);
} else {
Expand All @@ -336,14 +337,14 @@ const PropertiesInfo: React.FC<Props> = props => {
setLabelsDataList([]);
setMarkerPosition([]);
trajectory({
pageIndex: 0,
pageSize: 1000,
sorts: {
field: 'timestamp',
order: 'asc',
},
terms: {...params, property: props.item.id},
}
pageIndex: 0,
pageSize: 1000,
sorts: {
field: 'timestamp',
order: 'asc',
},
terms: { ...params, property: props.item.id },
}
);
};

Expand All @@ -360,7 +361,7 @@ const PropertiesInfo: React.FC<Props> = props => {
field: 'timestamp',
order: 'desc',
},
terms: {...params, property: props.item.id},
terms: { ...params, property: props.item.id },
});
if (props.item.valueType.type === 'geoPoint') {
geoPoint(params);
Expand All @@ -382,7 +383,7 @@ const PropertiesInfo: React.FC<Props> = props => {
field: 'timestamp',
order: 'desc',
},
terms: {...params, property: props.item.id},
terms: { ...params, property: props.item.id },
}
);
} else {
Expand Down Expand Up @@ -465,13 +466,13 @@ const PropertiesInfo: React.FC<Props> = props => {
width="70%"
>
<Spin spinning={spinning}>
<Form labelCol={{span: 0}} wrapperCol={{span: 18}}>
<Row gutter={{md: 8, lg: 4, xl: 48}}>
<Form labelCol={{ span: 0 }} wrapperCol={{ span: 18 }}>
<Row gutter={{ md: 8, lg: 4, xl: 48 }}>
<Col md={10} sm={24}>
<Form.Item>
{getFieldDecorator('timestamp$BTW')(
<DatePicker.RangePicker
showTime={{format: 'HH:mm:ss'}}
showTime={{ format: 'HH:mm:ss' }}
format="YYYY-MM-DD HH:mm:ss"
placeholder={['开始时间', '结束时间']}
onChange={(value: any[]) => {
Expand All @@ -487,29 +488,30 @@ const PropertiesInfo: React.FC<Props> = props => {
</Row>
</Form>
<Tabs defaultActiveKey="1" tabPosition="top" type="card"
onTabClick={(value: string) => {
setTabsType(value);

let params = queryParams();
if (value === '1') {
tabs(params);
} else if (value === '2') {
setSpinning(true);
statisticsChart(
{
pageIndex: 0,
pageSize: 60,
sorts: {
field: 'timestamp',
order: 'desc',
},
terms: {...params, property: props.item.id},
}
);
onTabClick={(value: string) => {
setTabsType(value);

let params = queryParams();
if (value === '1') {
tabs(params);
} else if (value === '2') {
setSpinning(true);
statisticsChart(
{
pageIndex: 0,
pageSize: 60,
sorts: {
field: 'timestamp',
order: 'desc',
},
terms: { ...params, property: props.item.id },
}
}}
);
}
}}
>
<Tabs.TabPane tab="列表" key="1">
{console.log(propertiesInfo.data, 'ffffff')}
<Table
rowKey="timestamp"
dataSource={propertiesInfo.data}
Expand All @@ -531,28 +533,28 @@ const PropertiesInfo: React.FC<Props> = props => {
height={400}
data={gatewayData}
scale={{
value: {min: 0},
value: { min: 0 },
year: {
range: [0, 1],
type: 'timeCat'
},
}}
forceFit
>
<Axis name="year"/>
<Axis name="year" />
<Axis name="value" label={{
formatter: val => parseFloat(val).toLocaleString()
}}/>
<Legend/>
<Tooltip crosshairs={{type: 'y'}}/>
}} />
<Legend />
<Tooltip crosshairs={{ type: 'y' }} />
<Geom type="line" position="year*value" size={2} tooltip={[
"year*value*type",
(year, value, type) => ({
title: moment(year).format('YYYY-MM-DD HH:mm:ss'),
name: type,
value: value
})
]}/>
]} />
<Geom type="area" position="year*value" shape={'circle'} tooltip={[
"year*value*type",
(year, value, type) => ({
Expand All @@ -571,33 +573,33 @@ const PropertiesInfo: React.FC<Props> = props => {
<span>
轨迹
<AntdTooltip title='默认启动循环执行动画，运动速度为：200km/h'>
<Icon type="question-circle-o" style={{paddingLeft: 10}}/>
<Icon type="question-circle-o" style={{ paddingLeft: 10 }} />
</AntdTooltip>
</span>
} key="3">
<div style={{width: '100%', height: '60vh'}}>
<Map version="1.4.15" resizeEnable events={mapEvents} center={mapCenter}/>
<div style={{ width: '100%', height: '60vh' }}>
<Map version="1.4.15" resizeEnable events={mapEvents} center={mapCenter} />
</div>
<div style={{marginTop: '-6.4%', paddingRight: 2, textAlign: 'right', float: 'right'}}>
<Card style={{width: 240}}>
<div style={{ marginTop: '-6.4%', paddingRight: 2, textAlign: 'right', float: 'right' }}>
<Card style={{ width: 240 }}>
<Button type="primary"
onClick={() => {
marksCreated.moveAlong(
lineArr, // 路径坐标串
200, // 指定速度，单位：千米/小时，不可为0
function (k: any) { // 回调函数f为变化曲线函数，缺省为function(k){return k}
return k
},
true // true表明是否循环执行动画，默认为false
);
}}
onClick={() => {
marksCreated.moveAlong(
lineArr, // 路径坐标串
200, // 指定速度，单位：千米/小时，不可为0
function (k: any) { // 回调函数f为变化曲线函数，缺省为function(k){return k}
return k
},
true // true表明是否循环执行动画，默认为false
);
}}
>
开始动画
</Button>
<Button style={{marginLeft: 10}} type="primary"
onClick={() => {
marksCreated.stopMove();
}}
<Button style={{ marginLeft: 10 }} type="primary"
onClick={() => {
marksCreated.stopMove();
}}
>
停止动画
</Button>
Expand Down

0 comments on commit f63bfc8

Please sign in to comment.