From b4b6aadf3b1b585963cfb7744137149e376ef17b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BD=95=E4=B9=90?= <work@imhele.com>
Date: Wed, 16 Jan 2019 11:50:05 +0800
Subject: [PATCH] fix: different card heights in Analysis (#3386)

* fix: different card heights in Analysis

* add padding for Pie in ProportionSales

* adjust style
---
 src/pages/Dashboard/Analysis.js        | 50 +++++++++++++-------------
 src/pages/Dashboard/Analysis.less      | 19 ++++++++++
 src/pages/Dashboard/ProportionSales.js | 31 +++++++---------
 3 files changed, 58 insertions(+), 42 deletions(-)

diff --git a/src/pages/Dashboard/Analysis.js b/src/pages/Dashboard/Analysis.js
index 58261ebb..0b85db70 100644
--- a/src/pages/Dashboard/Analysis.js
+++ b/src/pages/Dashboard/Analysis.js
@@ -144,30 +144,32 @@ class Analysis extends Component {
             selectDate={this.selectDate}
           />
         </Suspense>
-        <Row gutter={24}>
-          <Col xl={12} lg={24} md={24} sm={24} xs={24}>
-            <Suspense fallback={null}>
-              <TopSearch
-                loading={loading}
-                visitData2={visitData2}
-                selectDate={this.selectDate}
-                searchData={searchData}
-                dropdownGroup={dropdownGroup}
-              />
-            </Suspense>
-          </Col>
-          <Col xl={12} lg={24} md={24} sm={24} xs={24}>
-            <Suspense fallback={null}>
-              <ProportionSales
-                dropdownGroup={dropdownGroup}
-                salesType={salesType}
-                loading={loading}
-                salesPieData={salesPieData}
-                handleChangeSalesType={this.handleChangeSalesType}
-              />
-            </Suspense>
-          </Col>
-        </Row>
+        <div className={styles.twoColLayout}>
+          <Row gutter={24}>
+            <Col xl={12} lg={24} md={24} sm={24} xs={24}>
+              <Suspense fallback={null}>
+                <TopSearch
+                  loading={loading}
+                  visitData2={visitData2}
+                  selectDate={this.selectDate}
+                  searchData={searchData}
+                  dropdownGroup={dropdownGroup}
+                />
+              </Suspense>
+            </Col>
+            <Col xl={12} lg={24} md={24} sm={24} xs={24}>
+              <Suspense fallback={null}>
+                <ProportionSales
+                  dropdownGroup={dropdownGroup}
+                  salesType={salesType}
+                  loading={loading}
+                  salesPieData={salesPieData}
+                  handleChangeSalesType={this.handleChangeSalesType}
+                />
+              </Suspense>
+            </Col>
+          </Row>
+        </div>
         <Suspense fallback={null}>
           <OfflineData
             activeKey={activeKey}
diff --git a/src/pages/Dashboard/Analysis.less b/src/pages/Dashboard/Analysis.less
index d9b437cb..70877d66 100644
--- a/src/pages/Dashboard/Analysis.less
+++ b/src/pages/Dashboard/Analysis.less
@@ -134,6 +134,25 @@
   }
 }
 
+.twoColLayout {
+  .salesCard {
+    height: calc(100% - 24px);
+  }
+  div[class^='ant-col']:last-child {
+    right: 0\9;
+    height: 100%\9;
+    position: absolute\9;
+  }
+  :global {
+    .ant-row {
+      display: flex;
+      display: block\9;
+      flex-flow: row wrap;
+      position: relative\9;
+    }
+  }
+}
+
 .trendText {
   margin-left: 8px;
   color: @heading-color;
diff --git a/src/pages/Dashboard/ProportionSales.js b/src/pages/Dashboard/ProportionSales.js
index 6343b71c..ff16a7d2 100755
--- a/src/pages/Dashboard/ProportionSales.js
+++ b/src/pages/Dashboard/ProportionSales.js
@@ -38,24 +38,19 @@ const ProportionSales = memo(
       }
       style={{ marginTop: 24 }}
     >
-      <div
-        style={{
-          minHeight: 380,
-        }}
-      >
-        <h4 style={{ marginTop: 8, marginBottom: 32 }}>
-          <FormattedMessage id="app.analysis.sales" defaultMessage="Sales" />
-        </h4>
-        <Pie
-          hasLegend
-          subTitle={<FormattedMessage id="app.analysis.sales" defaultMessage="Sales" />}
-          total={() => <Yuan>{salesPieData.reduce((pre, now) => now.y + pre, 0)}</Yuan>}
-          data={salesPieData}
-          valueFormat={value => <Yuan>{value}</Yuan>}
-          height={248}
-          lineWidth={4}
-        />
-      </div>
+      <h4 style={{ marginTop: 10, marginBottom: 32 }}>
+        <FormattedMessage id="app.analysis.sales" defaultMessage="Sales" />
+      </h4>
+      <Pie
+        hasLegend
+        subTitle={<FormattedMessage id="app.analysis.sales" defaultMessage="Sales" />}
+        total={() => <Yuan>{salesPieData.reduce((pre, now) => now.y + pre, 0)}</Yuan>}
+        data={salesPieData}
+        valueFormat={value => <Yuan>{value}</Yuan>}
+        height={270}
+        lineWidth={4}
+        style={{ padding: '8px 0' }}
+      />
     </Card>
   )
 );
-- 
GitLab