fix #2173 Wrong rendering logic

src/components/Charts/WaterWave/index.js

@@ -27,7 +27,8 @@ class WaterWave extends PureComponent {
   componentDidUpdate(props) {
     const { percent } = this.props;
     if (props.percent !== percent) {
-      this.renderChart();
+      // 不加这个会造成绘制缓慢
+      this.renderChart('update');
     }
   }
 
@@ -49,10 +50,11 @@ class WaterWave extends PureComponent {
     }
   };
 
-  renderChart() {
+  renderChart(type) {
     const { percent, color = '#1890FF' } = this.props;
     const data = percent / 100;
     const self = this;
+    cancelAnimationFrame(this.timer);
 
     if (!this.node || (data !== 0 && !data)) {
       return;
@@ -60,7 +62,6 @@ class WaterWave extends PureComponent {
 
     const canvas = this.node;
     const ctx = canvas.getContext('2d');
-
     const canvasWidth = canvas.width;
     const canvasHeight = canvas.height;
     const radius = canvasWidth / 2;
@@ -115,7 +116,7 @@ class WaterWave extends PureComponent {
 
       const gradient = ctx.createLinearGradient(0, 0, 0, canvasHeight);
       gradient.addColorStop(0, '#ffffff');
-      gradient.addColorStop(1, '#1890FF');
+      gradient.addColorStop(1, color);
       ctx.fillStyle = gradient;
       ctx.fill();
       ctx.restore();
@@ -123,7 +124,7 @@ class WaterWave extends PureComponent {
 
     function render() {
       ctx.clearRect(0, 0, canvasWidth, canvasHeight);
-      if (circleLock) {
+      if (circleLock && type !== 'update') {
         if (arcStack.length) {
           const temp = arcStack.shift();
           ctx.lineTo(temp[0], temp[1]);
@@ -145,7 +146,7 @@ class WaterWave extends PureComponent {
 
           ctx.restore();
           ctx.clip();
-          ctx.fillStyle = '#1890FF';
+          ctx.fillStyle = color;
         }
       } else {
         if (data >= 0.85) {
@@ -180,7 +181,6 @@ class WaterWave extends PureComponent {
       }
       self.timer = requestAnimationFrame(render);
     }
-
     render();
   }
 

src/pages/Dashboard/Monitor.js

@@ -21,7 +21,6 @@ const havePermissionAsync = new Promise(resolve => {
   setTimeout(() => resolve(), 300);
 });
 
-export default
 @Secured(havePermissionAsync)
 @connect(({ monitor, loading }) => ({
   monitor,
@@ -153,3 +152,5 @@ class Monitor extends PureComponent {
     );
   }
 }
+
+export default Monitor;

src/pages/Dashboard/Workplace.js

@@ -37,7 +37,6 @@ const links = [
   },
 ];
 
-export default
 @connect(({ user, project, activities, chart, loading }) => ({
   currentUser: user.currentUser,
   project,
@@ -253,3 +252,5 @@ class Workplace extends PureComponent {
     );
   }
 }
+
+export default Workplace;