Skip to content

W
wisdom-components
Commit 3c693489 authored by 陈龙's avatar 陈龙
Browse files
Options

feat: 优化历史曲线组件

parent 6ddbeef6
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 115 additions and 30 deletions
packages/extend-components/EC_HistoryView/src/EC_HistoryView.md
View file @ 3c693489
...@@ -26,11 +26,11 @@ path: / ...@@ -26,11 +26,11 @@ path: /
## 移动端 ## 移动端
<code src="./demos/mobile.js"></code> [//]: # (<code src="./demos/mobile.js"></code>)
## 多图表 ## 多图表
<code src="./demos/GridDemo.js"></code> [//]: # (<code src="./demos/GridDemo.js"></code>)
## API ## API
......
packages/extend-components/EC_HistoryView/src/SingleChart.js
View file @ 3c693489
...@@ -33,7 +33,6 @@ const SimgleChart = memo((props) => { ...@@ -33,7 +33,6 @@ const SimgleChart = memo((props) => {
}; };
return optionGenerator(dataSource, null, contrast, contrastOption, smooth, config); return optionGenerator(dataSource, null, contrast, contrastOption, smooth, config);
}, [dataSource, smooth, curveCenter,chartType]); }, [dataSource, smooth, curveCenter,chartType]);
useEffect(() => { useEffect(() => {
chartRef.current?.resize?.(); chartRef.current?.resize?.();
const chart = chartRef.current?.getEchartsInstance?.(); const chart = chartRef.current?.getEchartsInstance?.();
......
packages/extend-components/EC_HistoryView/src/assets/最大实心.svg 0 → 100644
View file @ 3c693489
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="38.8px" height="24.8px" viewBox="0 0 38.8 24.8" enable-background="new 0 0 38.8 24.8" xml:space="preserve">
<g>
<image overflow="visible" opacity="0.55" width="48" height="33" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAhCAYAAACfiCi5AAAACXBIWXMAAAsSAAALEgHS3X78AAAA
GXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAtNJREFUeNrsWGtz0zAQtBw7aZI+
eBRmYPinfOav8oa0JXHSxLY4MXtlq8qy20lFgXpma9eWnd17SHfKsr/8MF0PXr6zpm9MgsO6P5/f
GjtYAIg75IChcSYVaZwdWsCGhJgA+RFQCEqcVUyqQ0nXwE7QhIQUHvkc9yaCuWAqOMC9UQIvKLEG
xC8Fa0El2EBIS+N+CwCxAoQPBc8FT3A9wbNUIdSA/EpwLjjD2YnZirGvvFAErD8TPBO8EbzCtfPG
2MuH+yJvYek1iH8SfKB8aNgL7IEcMe8EPBW8hohTeKFMlAdK0glYICIyeGSr+aBeKCh8DMX/ISz/
AlABqUKoRcwf4Dc3EHOBsMoh8kYOqBc0iecgrwJSzkJjXG+Qi3MvFx2sL0BFjEC4pKm0SL2AgfAU
GFMYG477rENEaCFLWSHkHeuRiQl4iKWO8YhfM+ZDF9B7PAp4FPCPC+CS2hI6Bfg1eBt6KeFq3FA5
XYf4FB3kG7y0o5dNT1M0pPHxrWgjK/GWyuk11UFtTECLQVrKOizxPFQLGW+uLjoWQOs1KTHvci10
RliBV83vFZ5ltIlwpL+jMrVoKMqOlZtLjwlQ4p6h+r6GFTeBkIhVox9RUms/oO/d8IBav8KL7/Hx
VaQfMER+SoXfjMZrOKzJoxoSjScg1g8swO1XGF1raNw/Ul+reytY3+DHujoyFVOi7D1GF3eKfmIG
7+zwnXN81+GHZ007oCO7wL0mlgM1XKxxuOzpibWHcNY/wY9VIHcMAZcg8NXZSvCNBDQcDkN74mBT
73nBkjdiuxLcBC0oPFYkoAJphy8QU4WsOXRXYt/7QtyKniCMHI4wXnNKZ5MlzSbtXveF7rgzp4k8
pkQ+wnXmTcmVR94OWNButzN324M8prPRGHmjLeiOFqWrUIiR2sve6B1F5LSzl3vzehMLhT8qICDE
X4Xtvonfi4BA/mR9MfzfHz8FGADqGGwHh8e8kgAAAABJRU5ErkJggg==" transform="matrix(1 0 0 1 -5 -4.25)">
</image>
<g>
<g>
<g>
<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" fill="#1685FF" d="M4.2,0.2h29c1.7,0,3,1.3,3,3v10c0,1.7-1.3,3-3,3
H22.6l-4.2,4l-4.7-4H4.2c-1.7,0-3-1.3-3-3v-10C1.2,1.6,2.6,0.2,4.2,0.2z"/>
<path fill="none" stroke="#1685FF" stroke-width="0.5" stroke-linecap="round" d="M4.2,0.2h29c1.7,0,3,1.3,3,3v10
c0,1.7-1.3,3-3,3H22.6l-4.2,4l-4.7-4H4.2c-1.7,0-3-1.3-3-3v-10C1.2,1.6,2.6,0.2,4.2,0.2z"/>
</g>
</g>
</g>
</g>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M30.3,12.6l-0.8,1c-2.3-1.4-3.9-3.3-4.8-5.8
c-0.8,2.7-2.4,4.6-4.8,5.9l-0.8-1.1c2.4-1.2,4-3.1,4.6-5.9h-4.3V5.6H24c0.1-0.7,0.1-1.3,0.1-1.9V2.6h1.3v0.8c0,0.8,0,1.5-0.1,2.2H30
v1.2h-4.5C26.4,9.3,28,11.3,30.3,12.6z M15.6,12.6c-0.5,0.4-1.2,0.8-1.9,1.1l-0.6-1c0.7-0.3,1.2-0.6,1.7-0.9c-0.6-0.6-1-1.4-1.2-2.1
h-0.4v-1h4.2v0.9c-0.2,0.8-0.5,1.6-1,2.2c0.4,0.3,1,0.6,1.7,0.9l-0.6,1C16.8,13.4,16.1,13,15.6,12.6z M14.7,9.7
c0.2,0.5,0.5,1,0.9,1.4c0.4-0.4,0.6-0.9,0.8-1.4H14.7z M12.8,11.6c0.3-0.1,0.5-0.1,0.6-0.1v0.9c-0.3,0.1-0.5,0.1-0.6,0.1v1.1h-1.2
v-1c-1,0.1-2.3,0.2-4,0.4l-0.2-1.1l1,0V8.1h-1v-1h10.7v1h-5.3V11.6z M11.6,8.1h-2v0.6h2V8.1z M11.6,9.7h-2v0.7h2V9.7z M11.6,11.2h-2
V12c0.7,0,1.4-0.1,2-0.2V11.2z M8.8,2.9h8v3.7h-8V2.9z M10,5.8h5.6V5.2H10V5.8z M10,4.4h5.6V3.8H10V4.4z"/>
</svg>
packages/extend-components/EC_HistoryView/src/assets/最小实心.svg 0 → 100644
View file @ 3c693489
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="38.8px" height="24.8px" viewBox="0 0 38.8 24.8" enable-background="new 0 0 38.8 24.8" xml:space="preserve">
<g>
<image overflow="visible" opacity="0.55" width="48" height="33" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAhCAYAAACfiCi5AAAACXBIWXMAAAsSAAALEgHS3X78AAAA
GXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAtpJREFUeNrsWIlO20AQzTq7IakT
CjSUtur38NF8UA+pbYAmEHx2Fr1Bk8n6qLAtgrD0xGJ7N+/N4Z3Z0ejAL9PXwvbqamft7PKyPAgB
IC7hr5LRtRDTA/GIMAYiPC4IOVB0KcR0TN6TdoQJYYqxv1JCQnjA+FFIFyJMixg2LdcZg/iMsCDM
MR6B+Aa4w/8Ze6Nm3bIpf0xDKEQqlqvERIL8e8IHYIE5nvSKcA2slYg90iJvirqwMwHyHL8WIWCF
mCoj+HeOQHhJuAAWmOcF/Cb8Ala4lyCcNDEmnQFpVf5YRT4SZGJYdIp74wov8By2/jnhE/6ygC3h
jHCKd7yYv7ifKauPQDaDl+4hdgshO2FnA5acIn59CJxgfIRnJmB9KeAYHlhi7gzPE6yzwDtnCCMm
VSoRucibG4TdDcQkZOwnL9iA9d/hB74SPmMcI8ZNhYgxRM5AlBPY4XkOw8QQ8FGQzwNxn4KsJ/6T
8F3kQy69YFUoOAjwrv4CEUsQchV5IMU7EJ2I9w1+zIpEP9ZxreI/h4AV1uMvWcLz2AtWkJDJOIfl
z4G5sGZIgPxqWfUFY8s6sU9MBfFSCWBLb/GewdiLuUVYRRC5lwPsBU7iWISEa7GfmJowk5tdGUhc
/RWaYLxFPsUqFx89ayssyZZy4lNqO9z5mzZHFsV5NQuE5VPc14VDVGHRIarkqGI/MnUCXmK5bxRx
ozehg77eBLwJeOUCZEkd2vT2BOgavAhNGoh4IarSVDVAwWq0VBNTgWzgvaAQLeg9V6FN5TSTT1UL
uMZzN5AIWQtdC2xEF1fqapRvcBPhSf9BZVqioXAD5YyuRn+gpOZ+YKcNtWpiKvrXbyC/aegH+kja
UD/AbWgqTzQsd/1UX3MPegfrG3iiriPrS0SoI7vFvbwuBzLEHsfhukVP3DX5xp5YNvVdnEr0lQet
TiW6Ohfqwwv/fy70jJO5XsX0dbL9Iq5/AgwASlVPrbqGdyMAAAAASUVORK5CYII=" transform="matrix(1 0 0 1 -5 -4.25)">
</image>
<g>
<g>
<g>
<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" fill="#05C2BC" d="M33.2,20.2h-29c-1.7,0-3-1.3-3-3v-10
c0-1.7,1.3-3,3-3h10.7l4.2-4l4.7,4h9.5c1.7,0,3,1.3,3,3v10C36.2,18.9,34.9,20.2,33.2,20.2z"/>
<path fill="none" stroke="#05C2BC" stroke-width="0.5" stroke-linecap="round" d="M33.2,20.2h-29c-1.7,0-3-1.3-3-3v-10
c0-1.7,1.3-3,3-3h10.7l4.2-4l4.7,4h9.5c1.7,0,3,1.3,3,3v10C36.2,18.9,34.9,20.2,33.2,20.2z"/>
</g>
</g>
</g>
</g>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M29.2,15.5c-0.5-1.7-1.1-3.5-1.9-5.6l1.2-0.7
c0.8,2.1,1.5,4,1.9,5.5L29.2,15.5z M24,17.5h-1.7L22,16.2c0.6,0.1,1.1,0.1,1.6,0.1c0.5,0,0.7-0.2,0.7-0.7V6.8h1.3v9.2
C25.6,17,25.1,17.5,24,17.5z M19,14.5c0.9-1.2,1.6-2.9,2-4.9l1.3,0.5c-0.5,2.4-1.3,4.2-2.1,5.4L19,14.5z M15.6,16.6
c-0.5,0.4-1.2,0.8-1.9,1.1l-0.6-1c0.7-0.3,1.2-0.6,1.7-0.9c-0.6-0.6-1-1.4-1.2-2.1h-0.4v-1h4.2v0.9c-0.2,0.8-0.5,1.6-1,2.2
c0.4,0.3,1,0.6,1.7,0.9l-0.6,1C16.8,17.4,16.1,17,15.6,16.6z M14.7,13.7c0.2,0.5,0.5,1,0.9,1.4c0.4-0.4,0.6-0.9,0.8-1.4H14.7z
M12.8,15.6c0.3-0.1,0.5-0.1,0.6-0.1v0.9c-0.3,0.1-0.5,0.1-0.6,0.1v1.1h-1.2v-1c-1,0.1-2.3,0.2-4,0.4l-0.2-1.1l1,0v-3.9h-1v-1h10.7
v1h-5.3V15.6z M11.6,12.1h-2v0.6h2V12.1z M11.6,13.7h-2v0.7h2V13.7z M11.6,15.2h-2V16c0.7,0,1.4-0.1,2-0.2V15.2z M8.8,6.9h8v3.7h-8
V6.9z M10,9.8h5.6V9.2H10V9.8z M10,8.4h5.6V7.8H10V8.4z"/>
</svg>
packages/extend-components/EC_HistoryView/src/demos/index.js
View file @ 3c693489
...@@ -3,13 +3,13 @@ import HistoryView from '../index'; ...@@ -3,13 +3,13 @@ import HistoryView from '../index';
import {MobileHistoryChart} from "../mobile"; import {MobileHistoryChart} from "../mobile";
const deviceParams = [ const deviceParams = [
/* { {
deviceCode: 'EGBF00000141', deviceCode: 'EGBF00000141',
// sensors: '进水压力,出水瞬时流量,出水累计流量', // sensors: '进水压力,出水瞬时流量,出水累计流量',
sensors: '进水压力', sensors: '进水压力',
deviceType: '二供泵房', deviceType: '二供泵房',
pointAddressID: 208, pointAddressID: 208,
},*/ },
/* { /* {
// deviceCode: 'EGBF00000002', // deviceCode: 'EGBF00000002',
// deviceCode: 'EGBF00000018', // deviceCode: 'EGBF00000018',
...@@ -38,11 +38,11 @@ const deviceParams = [ ...@@ -38,11 +38,11 @@ const deviceParams = [
"deviceType": "二供机组" "deviceType": "二供机组"
}*/ }*/
// 邳州张楼水厂 // 邳州张楼水厂
{ /* {
"deviceCode": "LLJ00000004", "deviceCode": "LLJ00000004",
"sensors": "瞬时流量", "sensors": "瞬时流量",
"deviceType": "流量计" "deviceType": "流量计"
} } */
]; ];
const Demo = () => { const Demo = () => {
return ( return (
......
packages/extend-components/EC_HistoryView/src/index.js
View file @ 3c693489
...@@ -555,7 +555,7 @@ const HistoryView = (props) => { ...@@ -555,7 +555,7 @@ const HistoryView = (props) => {
let fileName = `数据报表-${i.deviceType}-${i.deviceCode}-${moment(timeFrom).format( let fileName = `数据报表-${i.deviceType}-${i.deviceCode}-${moment(timeFrom).format(
dateFormat, dateFormat,
)}至${moment(timeTo).format(dateFormat)}`; )}至${moment(timeTo).format(dateFormat)}`;
let _quotas = i.sensors.split(',').filter(item=> item!=='是否在线').join(',') let _quotas = i.sensors.split(',').filter(item => item !== '是否在线').join(',')
getExportDeviceHistoryUrl({ getExportDeviceHistoryUrl({
deviceType: i.deviceType, deviceType: i.deviceType,
deviceCode: i.deviceCode, deviceCode: i.deviceCode,
...@@ -686,25 +686,21 @@ const HistoryView = (props) => { ...@@ -686,25 +686,21 @@ const HistoryView = (props) => {
return Promise.resolve(); return Promise.resolve();
}); });
}; };
/* const handleTime = (diffDays, base = 1000) => { const handleDataThinKey = (diffYears, diffDays, diffHours) => {
let unit = 'min', zoom = 0;
zoom = Math.ceil((diffDays || 1) * 24 * 60 / base).toFixed(0);
return {unit, zoom};
}*/
const handleDataThinKey = (diffDays) => {
// edit by zy 根据选择的时长控制抽稀频度 // edit by zy 根据选择的时长控制抽稀频度
if (diffDays >= 7 && diffDays < 15) { if (diffYears > 0) {
return {unit: 'h', zoom: '2'}; return {unit: 'h', zoom: '48'}
} else if (diffDays >= 15 && diffDays < 30) { } else if (diffYears === 0 && diffDays > 0) {
return {unit: 'h', zoom: '4'}; if (diffDays >= 30) return {unit: 'h', zoom: '24'}
} else if (diffDays >= 30) { if (diffDays >= 15) return {unit: 'h', zoom: '4'}
return {unit: 'h', zoom: '6'}; if (diffDays >= 7) return {unit: 'h', zoom: '1'}
} else if (diffDays < 7 && diffDays >= 2) { if (diffDays >= 3) return {unit: 'min', zoom: '30'}
return {unit: 'min', zoom: '40'}; if (diffDays >= 1) return {unit: 'min', zoom: '15'}
} else if (diffDays < 2 && diffDays >= 1) { } else if (diffYears === 0 && diffDays === 0 && diffHours > 0) {
return {unit: 'min', zoom: '30'}; if (diffHours >= 4) return {unit: 'min', zoom: '5'}
if (diffHours > 0) return {unit: 'min', zoom: '0'}
} else { } else {
return {unit: 'min', zoom: '10'}; return {unit: 'min', zoom: '0'}
} }
}; };
...@@ -742,9 +738,10 @@ const HistoryView = (props) => { ...@@ -742,9 +738,10 @@ const HistoryView = (props) => {
acrossTables, acrossTables,
isBoxPlots: isBoxPlots, isBoxPlots: isBoxPlots,
}; };
let diffYears = moment(item.dateTo).diff(moment(item.dateFrom), 'years');
let diffDays = moment(item.dateTo).diff(moment(item.dateFrom), 'days'); let diffDays = moment(item.dateTo).diff(moment(item.dateFrom), 'days');
let zoomParam = activeTabKey === 'curve' ? handleDataThinKey(diffDays) : {}; let diffHours = moment(item.dateTo).diff(moment(item.dateFrom), 'hours');
// let zoomParam = activeTabKey === 'curve' ? handleTime(diffDays, 100) : {}; // 备用方案 let zoomParam = activeTabKey === 'curve' ? handleDataThinKey(diffYears, diffDays, diffHours) : {};
requestArr.push(getHistoryInfo({...param, ...zoomParam})); requestArr.push(getHistoryInfo({...param, ...zoomParam}));
}); });
setLoading(true); setLoading(true);
...@@ -780,6 +777,10 @@ const HistoryView = (props) => { ...@@ -780,6 +777,10 @@ const HistoryView = (props) => {
}); });
setLoading(false); setLoading(false);
handleTableData(data); handleTableData(data);
/* //
let _dataModel = data[0].dataModel;
data[0].dataModel[0].pv = 0.123451
data[0].dataModel[_dataModel.length - 1].pv = 1000000*/
setChartDataSource(data); setChartDataSource(data);
} }
}).catch(err => { }).catch(err => {
...@@ -888,7 +889,7 @@ const HistoryView = (props) => { ...@@ -888,7 +889,7 @@ const HistoryView = (props) => {
}; };
return ( return (
<div className={classNames(prefixCls,'wkt-scroll-light')}> <div className={classNames(prefixCls, 'wkt-scroll-light')}>
<Spin spinning={loading} wrapperClassName={classNames(`${prefixCls}-spin`)}> <Spin spinning={loading} wrapperClassName={classNames(`${prefixCls}-spin`)}>
{showModels.length === 1 && ( {showModels.length === 1 && (
<div className={`${prefixCls}-single-panel`}>{renderPanel(showModels[0])}</div> <div className={`${prefixCls}-single-panel`}>{renderPanel(showModels[0])}</div>
...@@ -912,8 +913,10 @@ const HistoryView = (props) => { ...@@ -912,8 +913,10 @@ const HistoryView = (props) => {
), ),
}} }}
> >
<Tabs.TabPane key="curve" tab="曲线"> <Tabs.TabPane key="curve" tab="曲线" forceRender={true}>
{renderPanel('curve')} {
activeTabKey === 'curve' ? renderPanel('curve') : ''
}
</Tabs.TabPane> </Tabs.TabPane>
<Tabs.TabPane key="table" tab="表格"> <Tabs.TabPane key="table" tab="表格">
{renderPanel('table')} {renderPanel('table')}
......
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