feat: 优化历史曲线组件

packages/extend-components/EC_HistoryView/src/EC_HistoryView.md

@@ -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
 

packages/extend-components/EC_HistoryView/src/SingleChart.js

@@ -33,7 +33,6 @@ const SimgleChart = memo((props) => {
     };
     return optionGenerator(dataSource, null, contrast, contrastOption, smooth, config);
   }, [dataSource, smooth, curveCenter,chartType]);
-
   useEffect(() => {
     chartRef.current?.resize?.();
     const chart = chartRef.current?.getEchartsInstance?.();

packages/extend-components/EC_HistoryView/src/assets/最大实心.svg

+<?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

+<?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

@@ -3,13 +3,13 @@ import HistoryView from '../index';
 import {MobileHistoryChart} from "../mobile";
 
 const deviceParams = [
-/*        {
+       {
           deviceCode: 'EGBF00000141',
           // sensors: '进水压力,出水瞬时流量,出水累计流量',
           sensors: '进水压力',
           deviceType: '二供泵房',
           pointAddressID: 208,
-        },*/
+        },
     /*    {
             // deviceCode: 'EGBF00000002',
             // deviceCode: 'EGBF00000018',
@@ -38,11 +38,11 @@ const deviceParams = [
             "deviceType": "二供机组"
         }*/
     // 邳州张楼水厂
-    {
+/*     {
         "deviceCode": "LLJ00000004",
         "sensors": "瞬时流量",
         "deviceType": "流量计"
-    }
+    } */
 ];
 const Demo = () => {
     return (

packages/extend-components/EC_HistoryView/src/index.js

@@ -555,7 +555,7 @@ const HistoryView = (props) => {
             let fileName = `数据报表-${i.deviceType}-${i.deviceCode}-${moment(timeFrom).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({
                 deviceType: i.deviceType,
                 deviceCode: i.deviceCode,
@@ -686,25 +686,21 @@ const HistoryView = (props) => {
                 return Promise.resolve();
             });
     };
-/*    const handleTime = (diffDays, base = 1000) => {
-        let unit = 'min', zoom = 0;
-        zoom = Math.ceil((diffDays || 1) * 24 * 60 / base).toFixed(0);
-        return {unit, zoom};
-    }*/
-    const handleDataThinKey = (diffDays) => {
+    const handleDataThinKey = (diffYears, diffDays, diffHours) => {
         // edit by zy 根据选择的时长控制抽稀频度
-        if (diffDays >= 7 && diffDays < 15) {
-            return {unit: 'h', zoom: '2'};
-        } else if (diffDays >= 15 && diffDays < 30) {
-            return {unit: 'h', zoom: '4'};
-        } else if (diffDays >= 30) {
-            return {unit: 'h', zoom: '6'};
-        } else if (diffDays < 7 && diffDays >= 2) {
-            return {unit: 'min', zoom: '40'};
-        } else if (diffDays < 2 && diffDays >= 1) {
-            return {unit: 'min', zoom: '30'};
+        if (diffYears > 0) {
+            return {unit: 'h', zoom: '48'}
+        } else if (diffYears === 0 && diffDays > 0) {
+            if (diffDays >= 30) return {unit: 'h', zoom: '24'}
+            if (diffDays >= 15) return {unit: 'h', zoom: '4'}
+            if (diffDays >= 7) return {unit: 'h', zoom: '1'}
+            if (diffDays >= 3) return {unit: 'min', zoom: '30'}
+            if (diffDays >= 1) return {unit: 'min', zoom: '15'}
+        } else if (diffYears === 0 && diffDays === 0 && diffHours > 0) {
+            if (diffHours >= 4) return {unit: 'min', zoom: '5'}
+            if (diffHours > 0) return {unit: 'min', zoom: '0'}
         } else {
-            return {unit: 'min', zoom: '10'};
+            return {unit: 'min', zoom: '0'}
         }
     };
 
@@ -742,9 +738,10 @@ const HistoryView = (props) => {
                 acrossTables,
                 isBoxPlots: isBoxPlots,
             };
+            let diffYears = moment(item.dateTo).diff(moment(item.dateFrom), 'years');
             let diffDays = moment(item.dateTo).diff(moment(item.dateFrom), 'days');
-            let zoomParam = activeTabKey === 'curve' ? handleDataThinKey(diffDays) : {};
-            // let zoomParam = activeTabKey === 'curve' ? handleTime(diffDays, 100) : {}; // 备用方案
+            let diffHours = moment(item.dateTo).diff(moment(item.dateFrom), 'hours');
+            let zoomParam = activeTabKey === 'curve' ? handleDataThinKey(diffYears, diffDays, diffHours) : {};
             requestArr.push(getHistoryInfo({...param, ...zoomParam}));
         });
         setLoading(true);
@@ -780,6 +777,10 @@ const HistoryView = (props) => {
                 });
                 setLoading(false);
                 handleTableData(data);
+/*                //
+                let _dataModel = data[0].dataModel;
+                data[0].dataModel[0].pv = 0.123451
+                data[0].dataModel[_dataModel.length - 1].pv = 1000000*/
                 setChartDataSource(data);
             }
         }).catch(err => {
@@ -888,7 +889,7 @@ const HistoryView = (props) => {
     };
 
     return (
-        <div className={classNames(prefixCls,'wkt-scroll-light')}>
+        <div className={classNames(prefixCls, 'wkt-scroll-light')}>
             <Spin spinning={loading} wrapperClassName={classNames(`${prefixCls}-spin`)}>
                 {showModels.length === 1 && (
                     <div className={`${prefixCls}-single-panel`}>{renderPanel(showModels[0])}</div>
@@ -912,8 +913,10 @@ const HistoryView = (props) => {
                             ),
                         }}
                     >
-                        <Tabs.TabPane key="curve" tab="曲线">
-                            {renderPanel('curve')}
+                        <Tabs.TabPane key="curve" tab="曲线" forceRender={true}>
+                            {
+                                activeTabKey === 'curve' ? renderPanel('curve') : ''
+                            }
                         </Tabs.TabPane>
                         <Tabs.TabPane key="table" tab="表格">
                             {renderPanel('table')}