feat: 更新历史曲线

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

@@ -109,7 +109,7 @@ const CheckboxData = [
     },
     {
         key: 'ignoreOutliers',
-        label: '数据滤波',
+        label: '曲线降噪',
         type: 'updateIgnoreOutliers',
         checked: false,
         showInCurve: true,
@@ -272,7 +272,7 @@ const HistoryView = (props) => {
     } = props;
     const isBoxPlots =
         deviceParams?.length === 1 && deviceParams?.[0]?.sensors?.split(',').length === 1;
-    const [loading, setLoading] = useState(false);
+    const [loading, setLoading] = useState(null);
     const [activeTabKey, setActiveTabKey] = useState(defaultModel);
 
     // 时间模式: 自定义模式/同期对比模式
@@ -950,7 +950,7 @@ const HistoryView = (props) => {
                 isBoxPlots: isBoxPlots,
             };
             // if (ignoreOutliers) param.algorithmValue = algorithmValue;
-            param.algorithmValue = algorithmValue;
+            // param.algorithmValue = algorithmValue;
             let diffYears = moment(item.dateTo).diff(moment(item.dateFrom), 'years');
             let diffDays = moment(item.dateTo).diff(moment(item.dateFrom), 'days');
             let diffHours = moment(item.dateTo).diff(moment(item.dateFrom), 'hours');
@@ -1089,7 +1089,7 @@ const HistoryView = (props) => {
                         )}
                     </div>
                     {
-                        lineDataType === '原始曲线' ?
+                        lineDataType === '原始曲线' && false ?
                             <div style={{marginTop: 10}}>展示区间：{returnLongestPeriod(chartDataSource)}</div> : ''
                     }
                     <div className={`${prefixCls}-content`}>
@@ -1158,11 +1158,12 @@ const HistoryView = (props) => {
         timer: null
     });
     useEffect(() => {
+        if (loading === null) return;
         if (loading) {
             let _percent = percent;
             percentTimer.current.timer = setInterval(() => {
                 _percent += 5;
-                if (_percent > 90) return clearInterval(percentTimer.current.timer);
+                if (_percent > 95) return clearInterval(percentTimer.current.timer);
                 setPercent(_percent);
             }, 100)
         } else {
@@ -1170,7 +1171,7 @@ const HistoryView = (props) => {
             setPercent(100);
             setTimeout(() => {
                 setPercent(0);
-            }, 500)
+            }, lineDataType === '原始曲线' ? 500 : 0)
         }
     }, [loading])
     return (
@@ -1178,11 +1179,19 @@ const HistoryView = (props) => {
             {/*<Spin spinning={loading} wrapperClassName={classNames(`${prefixCls}-spin`)}>*/}
             <div className={classNames(`${prefixCls}-spin`)} style={{position: "relative"}}>
                 {
-                    loading || percent !== 0 ? <div className={classNames(`${prefixCls}-progressWrapper`)}>
-                        <Progress percent={percent} steps={20}
-                                  className={classNames(`${prefixCls}-progress`, `${prefixCls}-blink-2`)}
-                                  showInfo={false}/>
-                        <div className={classNames(`${prefixCls}-tip`)}>加载中。。</div>
+                    (loading || percent !== 0) ? <div className={classNames(`${prefixCls}-progressWrapper`)}>
+                        <div className={classNames(`${prefixCls}-header`)}/>
+                        <div className={classNames(`${prefixCls}-contentWrapper`)}>
+                            {
+                                lineDataType === '原始曲线' ? <><Progress percent={percent}
+                                                                      steps={20}
+                                                                      className={classNames(`${prefixCls}-progress`, `${prefixCls}-blink-2`)}
+                                                                      showInfo={false}/>
+                                    <div className={classNames(`${prefixCls}-tip`)}>加载中...</div>
+                                </> : <Spin spinning={loading || false}/>
+                            }
+
+                        </div>
                     </div> : ''
                 }
                 {showModels.length === 1 && (

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

@@ -39,20 +39,36 @@
   }
 
   .@{history-view}-progressWrapper {
-    z-index: 100;
+    z-index: 1000;
     position: absolute;
     top: 0;
     left: 0;
     height: 100%;
     width: 100%;
-    background: rgba(255, 255, 255, 0.9);
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
 
-    .@{history-view}-progress {
-      display: inline-flex;
+
+    .@{history-view}-header {
+      flex: none;
+      width: 100%;
+      height: 160px;
+    }
+
+    .@{history-view}-contentWrapper {
+      width: 100%;
+      z-index: 100;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      background: rgba(255, 255, 255, 0.9);
+      .@{history-view}-progress {
+        display: inline-flex;
+      }
     }
 
     .@{history-view}-tip {
@@ -62,9 +78,6 @@
     }
   }
 
-  .@{history-view}-progress {
-
-  }
 
   .@{history-view}-single-panel {
     display: flex;
@@ -235,8 +248,8 @@
 }
 
 .@{history-view}-blink-2 {
-  -webkit-animation: blink-2 10s infinite both;
-  animation: blink-2 10s infinite both;
+  -webkit-animation: blink-2 5s infinite both;
+  animation: blink-2 5s infinite both;
 }
 
 /**
@@ -255,6 +268,7 @@
     opacity: 1;
   }
 }
+
 @keyframes blink-2 {
   0% {
     opacity: 1;