caoliancun/vue-antd-admin-skeleton
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

mini chart 完善

Browse Source
This commit is contained in:
chenghx
2018-07-20 17:36:46 +08:00
parent f7dee15838
commit 5ea08d91bb
10 changed files with 260 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/dashboard/ChartCard.vue
View File

@@ -7,10 +7,12 @@
<slot name="action"></slot>
</span>
</div>
<div class="total"><span>￥ 1358.34</span></div>
<div class="total"><span>{{total}}</span></div>
</div>
<div class="chart-card-content">
<slot></slot>
<div class="content-fix">
<slot></slot>
</div>
</div>
<div class="chart-card-footer">
<slot name="footer"></slot>
@@ -23,7 +25,7 @@ import ACard from 'vue-antd-ui/es/card/Card'
export default {
name: 'ChartCard',
components: {ACard},
props: ['title']
props: ['title', 'total']
}
</script>
@@ -67,6 +69,13 @@ export default {
.chart-card-content{
margin-bottom: 12px;
position: relative;
height: 46px;
width: 100%;
}
.chart-card-content .content-fix{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
</style>

38
src/components/dashboard/Dashboard.vue
View File

@@ -2,7 +2,7 @@
<div>
<a-row style="margin: -12px">
<a-col :sm="24" :md="12" :xl="6" style="padding: 12px 12px 24px;">
<chart-card title="总销售额">
<chart-card title="总销售额" total="￥ 189,345">
<a-tooltip title="指标说明" slot="action">
<a-icon type="info-circle-o" />
</a-tooltip>
@@ -22,52 +22,34 @@
</chart-card>
</a-col>
<a-col :sm="24" :md="12" :xl="6" style="padding: 12px 12px 24px;">
<chart-card title="总销售额">
<chart-card title="总销售额" total="￥ 189,345">
<a-tooltip title="指标说明" slot="action">
<a-icon type="info-circle-o" />
</a-tooltip>
<div>
<mini-chart />
<mini-area />
</div>
<div slot="footer">日均销售额 <span>￥ 234.56</span></div>
</chart-card>
</a-col>
<a-col :sm="24" :md="12" :xl="6" style="padding: 12px 12px 24px;">
<chart-card title="总销售额">
<chart-card title="总销售额" total="￥ 189,345">
<a-tooltip title="指标说明" slot="action">
<a-icon type="info-circle-o" />
</a-tooltip>
<div>
<div style="display: inline-block; font-size: 14px; line-height: 22px; margin-right: 16px">
同周比
<span>12%</span>
<span style="color: #f5222d; font-size: 12px"><a-icon type="caret-up" /></span>
</div>
<div style="display: inline-block; font-size: 14px; line-height: 22px;">
日环比
<span>11%</span>
<span style="color: #52c41a; font-size: 12px"><a-icon type="caret-down" /></span>
</div>
<mini-bar />
</div>
<div slot="footer">日均销售额 <span>￥ 234.56</span></div>
</chart-card>
</a-col>
<a-col :sm="24" :md="12" :xl="6" style="padding: 12px 12px 24px;">
<chart-card title="总销售额">
<chart-card title="营销活动说明" total="73%">
<a-tooltip title="指标说明" slot="action">
<a-icon type="info-circle-o" />
</a-tooltip>
<div>
<div style="display: inline-block; font-size: 14px; line-height: 22px; margin-right: 16px">
同周比
<span>12%</span>
<span style="color: #f5222d; font-size: 12px"><a-icon type="caret-up" /></span>
</div>
<div style="display: inline-block; font-size: 14px; line-height: 22px;">
日环比
<span>11%</span>
<span style="color: #52c41a; font-size: 12px"><a-icon type="caret-down" /></span>
</div>
<mini-progress target="90" percent="78" color="#13C2C2" height="8px"/>
</div>
<div slot="footer">日均销售额 <span>￥ 234.56</span></div>
</chart-card>
@@ -83,10 +65,12 @@ import ACard from 'vue-antd-ui/es/card/Card'
import ChartCard from './ChartCard'
import ATooltip from 'vue-antd-ui/es/tooltip/Tooltip'
import AIcon from 'vue-antd-ui/es/icon/icon'
import MiniChart from '../chart/MiniChart'
import MiniArea from '../chart/MiniArea'
import MiniBar from '../chart/MiniBar'
import MiniProgress from '../chart/MiniProgress'
export default {
name: 'dashboard',
components: {MiniChart, AIcon, ATooltip, ChartCard, ACard, ARow, ACol}
components: {MiniProgress, MiniBar, MiniArea, AIcon, ATooltip, ChartCard, ACard, ARow, ACol}
}
</script>