Skip to content

A
ant-design-pro-vue
Unverified Commit 63ff6466 by Sendya
Options

fix: analysis pie position

parent 4e827600
Showing with 134 additions and 97 deletions
src/views/dashboard/Analysis.vue
...@@ -99,106 +99,122 @@ ...@@ -99,106 +99,122 @@
</div> </div>
</a-card> </a-card>
<a-row :gutter="12"> <div class="antd-pro-pages-dashboard-analysis-twoColLayout" :class="isDesktop() ? 'desktop' : ''">
<a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24"> <a-row :gutter="24">
<a-card :loading="loading" :bordered="false" title="线上热门搜索" :style="{ marginTop: '24px', height: '500px' }"> <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
<a-dropdown :trigger="['click']" placement="bottomLeft" slot="extra"> <a-card :loading="loading" :bordered="false" title="线上热门搜索" :style="{ marginTop: '24px', minHeight: '500px' }">
<a class="ant-dropdown-link" href="#"> <a-dropdown :trigger="['click']" placement="bottomLeft" slot="extra">
<a-icon type="ellipsis" /> <a class="ant-dropdown-link" href="#">
</a> <a-icon type="ellipsis" />
<a-menu slot="overlay"> </a>
<a-menu-item> <a-menu slot="overlay">
<a href="javascript:;">操作一</a> <a-menu-item>
</a-menu-item> <a href="javascript:;">操作一</a>
<a-menu-item> </a-menu-item>
<a href="javascript:;">操作二</a> <a-menu-item>
</a-menu-item> <a href="javascript:;">操作二</a>
</a-menu> </a-menu-item>
</a-dropdown> </a-menu>
<a-row :gutter="68"> </a-dropdown>
<a-col :xs="24" :sm="12" :style="{ marginBottom: ' 24px'}"> <a-row :gutter="68">
<number-info :total="12321" :sub-total="17.1"> <a-col :xs="24" :sm="12" :style="{ marginBottom: ' 24px'}">
<span slot="subtitle"> <number-info :total="12321" :sub-total="17.1">
<span>搜索用户数</span> <span slot="subtitle">
<a-tooltip title="指标说明" slot="action"> <span>搜索用户数</span>
<a-icon type="info-circle-o" :style="{ marginLeft: '8px' }" /> <a-tooltip title="指标说明" slot="action">
</a-tooltip> <a-icon type="info-circle-o" :style="{ marginLeft: '8px' }" />
</a-tooltip>
</span>
</number-info>
<!-- miniChart -->
<div>
<mini-smooth-area :style="{ height: '45px' }" :dataSource="searchUserData" :scale="searchUserScale" />
</div>
</a-col>
<a-col :xs="24" :sm="12" :style="{ marginBottom: ' 24px'}">
<number-info :total="2.7" :sub-total="26.2" status="down">
<span slot="subtitle">
<span>人均搜索次数</span>
<a-tooltip title="指标说明" slot="action">
<a-icon type="info-circle-o" :style="{ marginLeft: '8px' }" />
</a-tooltip>
</span>
</number-info>
<!-- miniChart -->
<div>
<mini-smooth-area :style="{ height: '45px' }" :dataSource="searchUserData" :scale="searchUserScale" />
</div>
</a-col>
</a-row>
<div class="ant-table-wrapper">
<a-table
row-key="index"
size="small"
:columns="searchTableColumns"
:dataSource="searchData"
:pagination="{ pageSize: 5 }"
>
<span slot="range" slot-scope="text, record">
<trend :flag="record.status === 0 ? 'up' : 'down'">
{{ text }}%
</trend>
</span> </span>
</number-info> </a-table>
<!-- miniChart --> </div>
<div> </a-card>
<mini-smooth-area :style="{ height: '45px' }" :dataSource="searchUserData" :scale="searchUserScale" /> </a-col>
<a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
<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;">
<!-- 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" />
<a-menu slot="overlay">
<a-menu-item>
<a href="javascript:;">操作一</a>
</a-menu-item>
<a-menu-item>
<a href="javascript:;">操作二</a>
</a-menu-item>
</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>
</a-col>
<a-col :xs="24" :sm="12" :style="{ marginBottom: ' 24px'}"> </div>
<number-info :total="2.7" :sub-total="26.2" status="down"> <h4>销售额</h4>
<span slot="subtitle"> <div>
<span>人均搜索次数</span> <!-- style="width: calc(100% - 240px);" -->
<a-tooltip title="指标说明" slot="action">
<a-icon type="info-circle-o" :style="{ marginLeft: '8px' }" />
</a-tooltip>
</span>
</number-info>
<!-- miniChart -->
<div> <div>
<mini-smooth-area :style="{ height: '45px' }" :dataSource="searchUserData" :scale="searchUserScale" /> <v-chart :force-fit="true" :height="405" :data="pieData" :scale="pieScale">
<v-tooltip :showTitle="false" dataKey="item*percent" />
<v-axis />
<!-- 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-col>
</a-row>
<div class="ant-table-wrapper">
<a-table
row-key="index"
size="small"
:columns="searchTableColumns"
:dataSource="searchData"
:pagination="{ pageSize: 5 }"
/>
</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' }">
<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> </div>
<span class="dashboard-analysis-iconGroup"> </a-card>
<a-dropdown :trigger="['click']" placement="bottomLeft"> </a-col>
<a-icon type="ellipsis" class="ant-dropdown-link" /> </a-row>
<a-menu slot="overlay"> </div>
<a-menu-item>
<a href="javascript:;">操作一</a>
</a-menu-item>
<a-menu-item>
<a href="javascript:;">操作二</a>
</a-menu-item>
</a-menu>
</a-dropdown>
</span>
</div>
<h4>销售额</h4>
<div>
<v-chart :force-fit="true" :height="350" :data="pieData" :scale="pieScale">
<v-tooltip :showTitle="false" dataKey="item*percent" />
<v-axis />
<v-legend dataKey="item" position="right" :offsetX="-140"/>
<v-pie position="percent" color="item" :vStyle="pieStyle" />
<v-coord type="theta" :radius="0.75" :innerRadius="0.6" />
</v-chart>
</div>
</a-card>
</a-col>
</a-row>
</div> </div>
</template> </template>
<script> <script>
import moment from 'moment' import moment from 'moment'
import { ChartCard, MiniArea, MiniBar, MiniProgress, RankList, Bar, Trend, NumberInfo, MiniSmoothArea } from '@/components' import { ChartCard, MiniArea, MiniBar, MiniProgress, RankList, Bar, Trend, NumberInfo, MiniSmoothArea } from '@/components'
import { mixinDevice } from '@/utils/mixin'
const rankList = [] const rankList = []
for (let i = 0; i < 7; i++) { for (let i = 0; i < 7; i++) {
...@@ -239,15 +255,14 @@ const searchTableColumns = [ ...@@ -239,15 +255,14 @@ const searchTableColumns = [
}, },
{ {
dataIndex: 'count', dataIndex: 'count',
title: '用户数', title: '用户数'
width: 164
}, },
{ {
dataIndex: 'range', dataIndex: 'range',
title: '周涨幅', title: '周涨幅',
align: 'right', align: 'right',
sorter: (a, b) => a.range - b.range, sorter: (a, b) => a.range - b.range,
width: 164 scopedSlots: { customRender: 'range' }
} }
] ]
const searchData = [] const searchData = []
...@@ -289,6 +304,7 @@ const pieData = dv.rows ...@@ -289,6 +304,7 @@ const pieData = dv.rows
export default { export default {
name: 'Analysis', name: 'Analysis',
mixins: [mixinDevice],
components: { components: {
ChartCard, ChartCard,
MiniArea, MiniArea,
...@@ -344,6 +360,26 @@ export default { ...@@ -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 { .dashboard-analysis-iconGroup {
i { i {
margin-left: 16px; margin-left: 16px;
...@@ -353,4 +389,9 @@ export default { ...@@ -353,4 +389,9 @@ export default {
color: black; color: black;
} }
} }
.analysis-salesTypeRadio {
position: absolute;
right: 54px;
bottom: 12px;
}
</style> </style>
webstorm.config.js
...@@ -10,11 +10,7 @@ module.exports = { ...@@ -10,11 +10,7 @@ module.exports = {
resolve: { resolve: {
extensions: ['.js', '.vue', '.json'], extensions: ['.js', '.vue', '.json'],
alias: { alias: {
'@': resolve('src'), '@': resolve('src')
'@views': resolve('src/views'),
'@comp': resolve('src/components'),
'@core': resolve('src/core'),
'@utils': resolve('src/utils')
} }
} }
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment