fix: analysis pie position

src/views/dashboard/Analysis.vue

@@ -99,9 +99,10 @@
       </div>
     </a-card>
 
-    <a-row :gutter="12">
+    <div class="antd-pro-pages-dashboard-analysis-twoColLayout" :class="isDesktop() ? 'desktop' : ''">
+      <a-row :gutter="24">
         <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
-        <a-card :loading="loading" :bordered="false" title="线上热门搜索" :style="{ marginTop: '24px', height: '500px' }">
+          <a-card :loading="loading" :bordered="false" title="线上热门搜索" :style="{ marginTop: '24px', minHeight: '500px' }">
             <a-dropdown :trigger="['click']" placement="bottomLeft" slot="extra">
               <a class="ant-dropdown-link" href="#">
                 <a-icon type="ellipsis" />
@@ -152,20 +153,20 @@
                 :columns="searchTableColumns"
                 :dataSource="searchData"
                 :pagination="{ pageSize: 5 }"
-            />
+              >
+                <span slot="range" slot-scope="text, record">
+                  <trend :flag="record.status === 0 ? 'up' : 'down'">
+                    {{ text }}%
+                  </trend>
+                </span>
+              </a-table>
             </div>
           </a-card>
         </a-col>
         <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
-        <a-card :loading="loading" :bordered="false" title="销售额类别占比" :style="{ marginTop: '24px', height: '500px' }">
+          <a-card class="antd-pro-pages-dashboard-analysis-salesCard" :loading="loading" :bordered="false" title="销售额类别占比" :style="{ marginTop: '24px', minHeight: '500px' }">
             <div slot="extra" style="height: inherit;">
-            <div style="bottom: 12px;display: inline-block;">
-              <a-radio-group defaultValue="a">
-                <a-radio-button value="a">全部渠道</a-radio-button>
-                <a-radio-button value="b">线上</a-radio-button>
-                <a-radio-button value="c">门店</a-radio-button>
-              </a-radio-group>
-            </div>
+              <!-- style="bottom: 12px;display: inline-block;" -->
               <span class="dashboard-analysis-iconGroup">
                 <a-dropdown :trigger="['click']" placement="bottomLeft">
                   <a-icon type="ellipsis" class="ant-dropdown-link" />
@@ -179,26 +180,41 @@
                   </a-menu>
                 </a-dropdown>
               </span>
+              <div class="analysis-salesTypeRadio">
+                <a-radio-group defaultValue="a">
+                  <a-radio-button value="a">全部渠道</a-radio-button>
+                  <a-radio-button value="b">线上</a-radio-button>
+                  <a-radio-button value="c">门店</a-radio-button>
+                </a-radio-group>
+              </div>
+
             </div>
             <h4>销售额</h4>
             <div>
-            <v-chart :force-fit="true" :height="350" :data="pieData" :scale="pieScale">
+              <!-- style="width: calc(100% - 240px);" -->
+              <div>
+                <v-chart :force-fit="true" :height="405" :data="pieData" :scale="pieScale">
                   <v-tooltip :showTitle="false" dataKey="item*percent" />
                   <v-axis />
-              <v-legend dataKey="item" position="right" :offsetX="-140"/>
+                  <!-- position="right" :offsetX="-140" -->
+                  <v-legend dataKey="item"/>
                   <v-pie position="percent" color="item" :vStyle="pieStyle" />
                   <v-coord type="theta" :radius="0.75" :innerRadius="0.6" />
                 </v-chart>
               </div>
+
+            </div>
           </a-card>
         </a-col>
       </a-row>
     </div>
+  </div>
 </template>
 
 <script>
 import moment from 'moment'
 import { ChartCard, MiniArea, MiniBar, MiniProgress, RankList, Bar, Trend, NumberInfo, MiniSmoothArea } from '@/components'
+import { mixinDevice } from '@/utils/mixin'
 
 const rankList = []
 for (let i = 0; i < 7; i++) {
@@ -239,15 +255,14 @@ const searchTableColumns = [
   },
   {
     dataIndex: 'count',
-    title: '用户数',
-    width: 164
+    title: '用户数'
   },
   {
     dataIndex: 'range',
     title: '周涨幅',
     align: 'right',
     sorter: (a, b) => a.range - b.range,
-    width: 164
+    scopedSlots: { customRender: 'range' }
   }
 ]
 const searchData = []
@@ -289,6 +304,7 @@ const pieData = dv.rows
 
 export default {
   name: 'Analysis',
+  mixins: [mixinDevice],
   components: {
     ChartCard,
     MiniArea,
@@ -344,6 +360,26 @@ export default {
     }
   }
 
+  .antd-pro-pages-dashboard-analysis-twoColLayout {
+    position: relative;
+    display: flex;
+    display: block;
+    flex-flow: row wrap;
+
+    &.desktop div[class^=ant-col]:last-child {
+      position: absolute;
+      right: 0;
+      height: 100%;
+    }
+  }
+
+  .antd-pro-pages-dashboard-analysis-salesCard {
+    height: calc(100% - 24px);
+    /deep/ .ant-card-head {
+      position: relative;
+    }
+  }
+
   .dashboard-analysis-iconGroup {
     i {
       margin-left: 16px;
@@ -353,4 +389,9 @@ export default {
       color: black;
     }
   }
+  .analysis-salesTypeRadio {
+    position: absolute;
+    right: 54px;
+    bottom: 12px;
+  }
 </style>

webstorm.config.js

@@ -10,11 +10,7 @@ module.exports = {
   resolve: {
     extensions: ['.js', '.vue', '.json'],
     alias: {
-      '@': resolve('src'),
-      '@views': resolve('src/views'),
-      '@comp': resolve('src/components'),
-      '@core': resolve('src/core'),
-      '@utils': resolve('src/utils')
+      '@': resolve('src')
     }
   }
 }