Skip to content

W
wisdom-components
Commit 69359a7e authored by 陈龙's avatar 陈龙
Browse files
Options

feat: 优化历史曲线交互

parent 8e0ac16f
Hide whitespace changes
Inline Side-by-side
Showing with 88 additions and 37 deletions
packages/extend-components/EC_HistoryView/src/SingleChart.js
View file @ 69359a7e
......@@ -4,7 +4,7 @@ import PandaEmpty from '@wisdom-components/empty';
import optionGenerator, { alarmMarkLine, minMaxMarkPoint, offlineArea } from './utils';
import { isArray, cloneDeep } from 'lodash';
const SimgleChart = memo((props) => {
const SingleChart = memo((props) => {
const {
dataSource,
contrast = false,
......@@ -128,4 +128,4 @@ const SimgleChart = memo((props) => {
);
});
export default SimgleChart;
export default SingleChart;
packages/extend-components/EC_HistoryView/src/demos/GridDemo.js
View file @ 69359a7e
import React from 'react';
import HistoryView from '../index';
/*const deviceParams = [
const deviceParams = [
{
deviceCode: 'EGBF00000136',
sensors: '进水压力,出水瞬时流量,出水累计流量',
......@@ -21,7 +21,7 @@ import HistoryView from '../index';
deviceType: '二供泵房',
pointAddressID: 4,
},
];*/
];
/*const deviceParams = [
{
"deviceCode": "LLJ00000055",
......@@ -34,7 +34,7 @@ import HistoryView from '../index';
"deviceType": "流量计"
}
]*/
const deviceParams = [
/*const deviceParams = [
{
"deviceCode": "EGBF00000023",
"sensors": "出水瞬时流量,是否在线",
......@@ -45,7 +45,19 @@ const deviceParams = [
"sensors": "出水瞬时流量,是否在线",
"deviceType": "二供泵房"
}
]
]*/
/*const deviceParams = [
{
"deviceCode": "QSSSC00000001",
"sensors": "出水瞬时流量,是否在线",
"deviceType": "确山送水厂"
},
{
"deviceCode": "EGBF00000019",
"sensors": "出水瞬时流量,是否在线",
"deviceType": "二供泵房"
}
]*/
const Demo = () => {
return <div style={{ height: 700 }}>
<HistoryView deviceParams={deviceParams} grid />
......
packages/extend-components/EC_HistoryView/src/demos/index.js
View file @ 69359a7e
......@@ -3,13 +3,13 @@ import HistoryView from '../index';
import {MobileHistoryChart} from "../mobile";
const deviceParams = [
/* {
deviceCode: 'EGBF00000141',
// sensors: '进水压力,出水瞬时流量,出水累计流量',
sensors: '进水压力',
deviceType: '二供泵房',
pointAddressID: 208,
},*/
{
deviceCode: 'EGBF00000141',
// sensors: '进水压力,出水瞬时流量,出水累计流量',
sensors: '进水压力',
deviceType: '二供泵房',
pointAddressID: 208,
},
/* {
"deviceCode": "SYJ00000008",
"sensors": "瞬时流量",
......@@ -43,11 +43,11 @@ const deviceParams = [
"deviceType": "二供机组"
}*/
// 邳州张楼水厂
{
"deviceCode": "SC00000023",
"sensors": "出水压力",
"deviceType": "水厂"
}
/* {
"deviceCode": "SC00000023",
"sensors": "出水压力",
"deviceType": "水厂"
}*/
/*
{
"deviceCode": "JFJ00000001",
......
packages/extend-components/EC_HistoryView/src/index.js
View file @ 69359a7e
......@@ -11,7 +11,7 @@ import {
Tabs,
Tooltip,
Button,
message, Segmented
message,
} from 'antd';
import {
CloseCircleFilled,
......@@ -25,7 +25,7 @@ import TimeRangePicker from '@wisdom-components/timerangepicker';
import PandaEmpty from '@wisdom-components/empty';
import BasicTable from '@wisdom-components/basictable';
import {getHistoryInfo, getDeviceAlarmScheme, getExportDeviceHistoryUrl, getDictionaryInfoAll} from './apis';
import SimgleChart from './SingleChart';
import SingleChart from './SingleChart';
import GridChart from './GridChart';
import './index.less';
import {globalConfig} from 'antd/lib/config-provider';
......@@ -244,7 +244,8 @@ const timeColumn = {
sorter: true,
// sortOrder:['descend','ascend']
};
const OriginMaxDays = 7; // 原始曲线请求数据的最大天数
const CharacteristicMaxDays = 60; // 特征曲线或者其他曲线的最大天数
const HistoryView = (props) => {
const [completeInit, setCompleteInit] = useState(false);
const {getPrefixCls} = useContext(ConfigProvider.ConfigContext);
......@@ -301,6 +302,8 @@ const HistoryView = (props) => {
}
}, [contrastOption, customerChecked, customerTime, datePickerArr, timeValue, shortcutsValue]);
const [dates, setDates] = useState(null);
const configDependence = checkboxData
.filter((item) => ['curveCenter', 'chartGrid'].indexOf(item.key) === -1)
.map((item) => item.checked)
......@@ -474,37 +477,72 @@ const HistoryView = (props) => {
}
setShortcutsDatePickerArr(_arr);
};
const renderTimeOption = () => {
const renderTimeOption = useMemo(() => {
return (
<div className={classNames(`${prefixCls}-date`)}>
<div className={classNames(`${prefixCls}-label`)}>时间选择</div>
<Radio.Group value={timeValue} onChange={onTimeSetChange}>
<Radio.Button value="customer">自定义</Radio.Button>
<Radio.Button value="contrast">同期对比</Radio.Button>
{
!grid ? <Radio.Button value="contrast">同期对比</Radio.Button> : ''
}
</Radio.Group>
{timeValue === 'customer' && ( // 自定义
<>
<TimeRangePicker
format={'YYYY-MM-DD HH:mm'}
onChange={onCustomerTimeChange}
value={customerChecked}
dataSource={timeList}
dataSource={timeList.filter(item => {
if (lineDataType === '原始曲线') return item.key !== 'oneMonth';
return true
})}
/>
<RangePicker
format={'YYYY-MM-DD HH:mm'}
className={classNames(`${prefixCls}-custime-customer`)}
onChange={onCustomerRangeChange}
value={customerTime}
showTime
value={dates || customerTime}
onCalendarChange={(val) => {
console.log('val: ', val);
setDates(val);
}}
onOpenChange={(open) => {
if (open) {
setDates([null, null]);
} else {
setDates(null);
}
}}
disabledDate={(current) => {
if (timeValue !== 'customer') return false;
let _days = lineDataType === '原始曲线' ? OriginMaxDays : CharacteristicMaxDays;
if (!dates) {
return false;
}
const tooLate = dates[0] && current.diff(dates[0], 'days') > _days;
const tooEarly = dates[1] && dates[1].diff(current, 'days') > _days;
return !!tooEarly || !!tooLate;
}}
showTime={{
format: 'YYYY-MM-DD HH:mm',
minuteStep: 10
}}
/>
</>
)}
{timeValue === 'contrast' && ( // 同期对比
<>
<Select value={contrastOption} style={{width: 60}} onChange={onContrastChange}>
<Option value="day">日</Option>
<Option value="month">月</Option>
</Select>
{
lineDataType !== '原始曲线' &&
<Select value={contrastOption} style={{width: 60}} onChange={onContrastChange}>
<Option value="day">日</Option>
<Option value="month">月</Option>
</Select>
}
{/*增加快捷日期*/}
{
lineDataType !== '原始曲线' &&
deviceParams?.length === 1 && deviceParams?.[0]?.sensors?.split(',').length === 1 ?
<Radio.Group value={shortcutsValue} onChange={onShortcutsChange}>
{
......@@ -544,7 +582,7 @@ const HistoryView = (props) => {
)}
</div>
);
};
}, [timeValue, customerChecked, lineDataType, datePickerArr, deviceParams, dates, customerTime, chartDataSource]);
// 曲线设置项选择/取消
const onCheckboxChange = (e, key, showJustLine) => {
......@@ -587,7 +625,8 @@ const HistoryView = (props) => {
let _endDate = dateRange[0]?.dateTo;
let diffDays = moment(_endDate).diff(moment(_startDate), 'days');
if (_val === '原始曲线' && diffDays > 7) {
return message.info('查阅原始曲线时，请选择小于或等于7天的时间间隔');
message.info('查阅原始曲线时，需选择小于或等于7天的时间间隔，已自动切换为近一周');
setCustomerChecked('oneWeek');
}
setLineDataType(_val)
};
......@@ -964,7 +1003,7 @@ const HistoryView = (props) => {
const tableMemo = useMemo(() => {
return <>
<div className={`${prefixCls}-options`}>
{renderTimeOption()}
{renderTimeOption}
{renderCurveOption()}
</div>
<div className={`${prefixCls}-content`}>
......@@ -1001,7 +1040,7 @@ const HistoryView = (props) => {
return (
<>
<div className={`${prefixCls}-options`}>
{renderTimeOption()}
{renderTimeOption}
{renderCurveOption(
true,
deviceParams?.length === 1 && deviceParams?.[0]?.sensors?.split(',').length === 1,
......@@ -1020,7 +1059,7 @@ const HistoryView = (props) => {
deviceAlarmSchemes={deviceAlarmSchemes}
/>
) : (
<SimgleChart
<SingleChart
showBoxOption={showBoxOption}
lineDataType={lineDataType}
curveCenter={curveCenter}
......
packages/extend-components/EC_HistoryView/src/mobile.js
View file @ 69359a7e
......@@ -3,7 +3,7 @@ import {ConfigProvider} from "antd";
import {Selector, Checkbox, Space} from 'antd-mobile/es';
import moment from "moment";
import {getDeviceAlarmScheme, getHistoryInfo} from "./apis";
import SimgleChart from "./SingleChart";
import SingleChart from "./SingleChart";
import {handlePx} from "./utils";
import styles from './index.less';
......@@ -171,7 +171,7 @@ const MobileHistoryChart = (
</Checkbox.Group>
</div>
<div style={{width: '100%', flex: 1}}>
<SimgleChart
<SingleChart
showBoxOption={showBoxOption}
curveCenter={options.curveCenter}
showGridLine={chartGrid}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment