update monitor page style

src/components/Charts/Gauge/index.js

@@ -4,15 +4,22 @@ import equal from '../equal';
 
 const { Shape } = G2;
 
+const primaryColor = '#2F9CFF';
+const backgroundColor = '#F0F2F5';
+
 /* eslint no-underscore-dangle: 0 */
 class Gauge extends PureComponent {
   componentDidMount() {
-    this.renderChart();
+    setTimeout(() => {
+      this.renderChart();
+    }, 10);
   }
 
   componentWillReceiveProps(nextProps) {
     if (!equal(this.props, nextProps)) {
-      this.renderChart(nextProps);
+      setTimeout(() => {
+        this.renderChart(nextProps);
+      }, 10);
     }
   }
 
@@ -27,7 +34,7 @@ class Gauge extends PureComponent {
   }
 
   initChart(nextProps) {
-    const { title, color = '#00b1f8' } = nextProps || this.props;
+    const { title, color = primaryColor } = nextProps || this.props;
 
     Shape.registShape('point', 'dashBoard', {
       drawShape(cfg, group) {
@@ -103,7 +110,9 @@ class Gauge extends PureComponent {
   }
 
   renderChart(nextProps) {
-    const { height, color = '#00b1f8', bgColor = '#d3f3fe', title, percent, format } = nextProps || this.props;
+    const {
+      height, color = primaryColor, bgColor = backgroundColor, title, percent, format,
+    } = nextProps || this.props;
     const data = [{ name: title, value: percent }];
 
     if (this.chart) {
@@ -139,11 +148,13 @@ class Gauge extends PureComponent {
       min: 0,
       max: 100,
       tickCount: 6,
-      subTick: false,
     });
     chart.axis('value', {
+      subTick: false,
       tickLine: {
         stroke: color,
+        lineWidth: 2,
+        value: -14,
       },
       labelOffset: -12,
       formatter: format,
@@ -154,7 +165,7 @@ class Gauge extends PureComponent {
     /* eslint no-shadow: 0 */
     function draw(data) {
       const val = data[0].value;
-      const lineWidth = 18;
+      const lineWidth = 12;
       chart.guide().clear();
 
       chart.guide().arc(() => {

src/components/Charts/Pie/index.js

@@ -204,11 +204,11 @@ class Pie extends Component {
                   style={{ marginLeft: left, opacity: left ? 1 : 0 }}
                 >
                   {
-                    subTitle && <h4>{subTitle}</h4>
+                    subTitle && <h4 className="pie-sub-title">{subTitle}</h4>
                   }
                   {
                     // eslint-disable-next-line
-                    total && <p dangerouslySetInnerHTML={{ __html: total }} />
+                    total && <p className="pie-stat" dangerouslySetInnerHTML={{ __html: total }} />
                   }
                 </div>
               )

src/components/Charts/WaterWave/index.js

@@ -29,21 +29,14 @@ class WaterWave extends PureComponent {
 
   resize = () => {
     const { height } = this.props;
-    const realWidth = this.root.parentNode.offsetWidth;
-    if (realWidth < this.props.height) {
-      const radio = realWidth / height;
-      this.setState({
-        radio,
-      });
-    } else {
-      this.setState({
-        radio: 1,
-      });
-    }
+    const { offsetWidth } = this.root.parentNode;
+    this.setState({
+      radio: offsetWidth < height ? offsetWidth / height : 1,
+    });
   }
 
   renderChart() {
-    const { percent, color = '#19AFFA' } = this.props;
+    const { percent, color = '#1890FF' } = this.props;
     const data = percent / 100;
     const self = this;
 
@@ -61,7 +54,7 @@ class WaterWave extends PureComponent {
     const cR = radius - (lineWidth);
 
     ctx.beginPath();
-    ctx.lineWidth = lineWidth;
+    ctx.lineWidth = lineWidth * 2;
 
     const axisLength = canvasWidth - (lineWidth);
     const unit = axisLength / 8;
@@ -108,7 +101,11 @@ class WaterWave extends PureComponent {
       ctx.lineTo(xOffset + axisLength, canvasHeight);
       ctx.lineTo(xOffset, canvasHeight);
       ctx.lineTo(startPoint[0], startPoint[1]);
-      ctx.fillStyle = color;
+
+      const gradient = ctx.createLinearGradient(0, 0, 0, 170);
+      gradient.addColorStop(0, '#ffffff');
+      gradient.addColorStop(1, '#1890FF');
+      ctx.fillStyle = gradient;
       ctx.fill();
       ctx.restore();
     }
@@ -137,7 +134,7 @@ class WaterWave extends PureComponent {
 
           ctx.restore();
           ctx.clip();
-          ctx.fillStyle = '#108ee9';
+          ctx.fillStyle = '#1890FF';
         }
       } else {
         if (data >= 0.85) {
@@ -181,7 +178,14 @@ class WaterWave extends PureComponent {
     const { percent, title, height } = this.props;
     return (
       <div className={styles.waterWave} ref={n => (this.root = n)} style={{ transform: `scale(${radio})` }}>
-        <canvas ref={n => (this.node = n)} width={height} height={height} />
+        <div style={{ width: height, height, overflow: 'hidden' }}>
+          <canvas
+            className={styles.waterWaveCanvasWrapper}
+            ref={n => (this.node = n)}
+            width={height * 2}
+            height={height * 2}
+          />
+        </div>
         <div className={styles.text} style={{ width: height }}>
           {
             title && <span>{title}</span>

src/components/Charts/WaterWave/index.less

@@ -22,4 +22,8 @@
       font-size: 24px;
     }
   }
+  .waterWaveCanvasWrapper {
+    transform: scale(.5);
+    transform-origin: 0 0;
+  }
 }

src/routes/Dashboard/Monitor.js

@@ -68,7 +68,7 @@ export default class Monitor extends PureComponent {
                 </Col>
               </Row>
               <div className={styles.mapChart}>
-                <img src="https://gw.alipayobjects.com/zos/rmsportal/LYbCPIWLeUrdWSpVvKIL.png" alt="map" />
+                <img src="https://gw.alipayobjects.com/zos/rmsportal/HBWnDEUXCnGnGrRfrpKa.png" alt="map" />
               </div>
             </Card>
           </Col>
@@ -105,11 +105,12 @@ export default class Monitor extends PureComponent {
           </Col>
         </Row>
         <Row gutter={24}>
-          <Col xl={8} lg={24} sm={24} xs={24}>
+          <Col xl={12} lg={24} sm={24} xs={24}>
             <Card
               title="各品类占比"
               style={{ marginBottom: 24 }}
               bordered={false}
+              className={styles.pieCard}
             >
               <Row gutter={4} style={{ padding: '18px 0 19px 0' }}>
                 <Col span={8}>
@@ -119,6 +120,7 @@ export default class Monitor extends PureComponent {
                     subTitle="中式快餐"
                     total="28%"
                     height={129}
+                    lineWidth={2}
                   />
                 </Col>
                 <Col span={8}>
@@ -129,6 +131,7 @@ export default class Monitor extends PureComponent {
                     subTitle="西餐"
                     total="22%"
                     height={129}
+                    lineWidth={2}
                   />
                 </Col>
                 <Col span={8}>
@@ -139,12 +142,13 @@ export default class Monitor extends PureComponent {
                     subTitle="火锅"
                     total="32%"
                     height={129}
+                    lineWidth={2}
                   />
                 </Col>
               </Row>
             </Card>
           </Col>
-          <Col xl={8} lg={12} sm={24} xs={24} style={{ marginBottom: 24 }}>
+          <Col xl={6} lg={12} sm={24} xs={24} style={{ marginBottom: 24 }}>
             <Card title="热门搜索" bordered={false} bodyStyle={{ overflow: 'hidden' }}>
               <TagCloud
                 data={tags}
@@ -152,8 +156,8 @@ export default class Monitor extends PureComponent {
               />
             </Card>
           </Col>
-          <Col xl={8} lg={12} sm={24} xs={24} style={{ marginBottom: 24 }}>
-            <Card title="资源剩余" bodyStyle={{ textAlign: 'center' }} bordered={false}>
+          <Col xl={6} lg={12} sm={24} xs={24} style={{ marginBottom: 24 }}>
+            <Card title="资源剩余" bodyStyle={{ textAlign: 'center', fontSize: 0 }} bordered={false}>
               <WaterWave
                 height={161}
                 title="补贴资金剩余"

src/routes/Dashboard/Monitor.less

@@ -9,6 +9,10 @@
   }
 }
 
+.pieCard :global(.pie-stat) {
+  font-size: 24px!important;
+}
+
 @media screen and (max-width: @screen-lg) {
   .mapChart {
     height: auto;