Skip to content

A
ant-design-pro-vue
Commit 4a6a3ff7 by Sendya
Options

Add dashboard

parent ce0af03e
Showing with 204 additions and 7 deletions
src/components/chart/Bar.vue 0 → 100644
<template>
<div :style="{ padding: '0 0 32px 32px' }">
<h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
<v-chart :force-fit="true" height="254" :data="data" :padding="['auto', 'auto', 40, 50]">
<v-tooltip />
<v-axis />
<v-bar position="x*y"/>
</v-chart>
</div>
</template>
<script>
const data = []
for (let i = 0; i < 12; i += 1) {
data.push({
x: `${i + 1}月`,
y: Math.floor(Math.random() * 1000) + 200
})
}
const tooltip = [
'x*y',
(x, y) => ({
name: x,
value: y
})
]
const scale = [{
dataKey: 'x',
min: 2
}, {
dataKey: 'y',
title: '时间',
min: 1,
max: 22
}]
export default {
name: "Bar",
props: ['title'],
data () {
return {
data,
scale,
tooltip
}
}
}
</script>
\ No newline at end of file
src/components/chart/RankList.vue 0 → 100644
<template>
<div class="rank">
<h4 class="title">{{ title }}</h4>
<ul class="list">
<li :key="index" v-for="(item, index) in list">
<span :class="index < 3 ? 'active' : null">{{ index + 1 }}</span>
<span >{{ item.name }}</span>
<span >{{ item.total }}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
name: "RankList",
props: ['title', 'list']
}
</script>
<style lang="scss" scoped>
.rank {
padding: 0 32px 32px 72px;
.list {
margin: 25px 0 0;
padding: 0;
list-style: none;
li {
margin-top: 16px;
span {
color: rgba(0, 0, 0, .65);
font-size: 14px;
line-height: 22px;
&:first-child {
background-color: #f5f5f5;
border-radius: 20px;
display: inline-block;
font-size: 12px;
font-weight: 600;
margin-right: 24px;
height: 20px;
line-height: 20px;
width: 20px;
text-align: center;
}
&.active {
background-color: #314659;
color: #fff;
}
&:last-child {
float: right;
}
}
}
}
}
</style>
\ No newline at end of file
src/views/dashboard/Analysis.vue
<template>
<div>
<a-row :gutter="24">
<a-col :sm="24" :md="12" :xl="6">
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
<chart-card title="总销售额" total="￥126,560">
<a-tooltip title="指标说明" slot="action">
<a-icon type="info-circle-o" />
......@@ -21,7 +21,7 @@
<div slot="footer">日均销售额 <span>￥ 234.56</span></div>
</chart-card>
</a-col>
<a-col :sm="24" :md="12" :xl="6">
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
<chart-card title="总销售额" total="￥126,560">
<a-tooltip title="指标说明" slot="action">
<a-icon type="info-circle-o" />
......@@ -32,7 +32,7 @@
<div slot="footer">日均销售额<span>￥ 234.56</span></div>
</chart-card>
</a-col>
<a-col :sm="24" :md="12" :xl="6">
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
<chart-card title="总销售额" total="￥126,560">
<a-tooltip title="指标说明" slot="action">
<a-icon type="info-circle-o" />
......@@ -52,7 +52,7 @@
<div slot="footer">日均销售额 <span>￥ 234.56</span></div>
</chart-card>
</a-col>
<a-col :sm="24" :md="12" :xl="6">
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
<chart-card title="总销售额" total="￥126,560">
<a-tooltip title="指标说明" slot="action">
<a-icon type="info-circle-o" />
......@@ -73,6 +73,59 @@
</chart-card>
</a-col>
</a-row>
<a-card :bordered="false" :body-style="{padding: '0'}">
<div class="salesCard">
<a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
<div class="extra-wrapper" slot="tabBarExtraContent">
<div class="extra-item">
<a>今日</a>
<a>本周</a>
<a>本月</a>
<a>本年</a>
</div>
<a-range-picker :style="{width: '256px'}"></a-range-picker>
</div>
<a-tab-pane loading="true" tab="销售额" key="1">
<a-row>
<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
<bar title="销售额趋势" />
</a-col>
<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
<rank-list title="门店销售排行榜" :list="rankList"/>
</a-col>
</a-row>
</a-tab-pane>
<a-tab-pane tab="访问量" key="2"><a-row>
<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
<bar title="销售额趋势" />
</a-col>
<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
<rank-list title="门店销售排行榜" :list="rankList"/>
</a-col>
</a-row></a-tab-pane>
</a-tabs>
</div>
</a-card>
<a-row :gutter="12">
<a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
<a-card :bordered="false" title="Card Title" :style="{ marginTop: '24px' }">
<a href="#" slot="extra">more</a>
<p>card content</p>
<p>card content</p>
<p>card content</p>
</a-card>
</a-col>
<a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
<a-card :bordered="false" title="Card Title" :style="{ marginTop: '24px' }">
<a href="#" slot="extra">more</a>
<p>card content</p>
<p>card content</p>
<p>card content</p>
</a-card>
</a-col>
</a-row>
</div>
</template>
......@@ -80,19 +133,49 @@
import ChartCard from '@/components/ChartCard'
import ACol from "ant-design-vue/es/grid/Col"
import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
import ADatePicker from 'ant-design-vue/es/date-picker'
import MiniArea from '@/components/chart/MiniArea'
import RankList from '@/components/chart/RankList'
import Bar from '@/components/chart/Bar'
const ARangePicker = ADatePicker.RangePicker
const rankList = []
for (let i = 0; i < 7; i++) {
rankList.push({
name: '桃源村' + (i+1) + '号店',
total: 1234.56 - i * 100
})
}
export default {
name: "Analysis",
components: {
ATooltip,
ACol,
ARangePicker,
ChartCard,
MiniArea
MiniArea,
RankList,
Bar
},
data() {
return {
rankList
}
}
}
</script>
<style scoped>
<style lang="scss" scoped>
.extra-wrapper {
line-height: 55px;
.extra-item{
display: inline-block;
margin-right: 24px;
a{
margin-left: 24px;
}
}
}
</style>
\ No newline at end of file
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