Skip to content

A
ant-design-pro-vue
Commit ed697ef4 by Sendya
Options

update Analysis

parent 38e336ca
Showing with 360 additions and 126 deletions
src/components/ChartCard.vue
......@@ -15,7 +15,9 @@
</div>
</div>
<div class="chart-card-footer">
<slot name="footer"></slot>
<div class="field">
<slot name="footer"></slot>
</div>
</div>
</a-card>
</template>
......@@ -41,55 +43,69 @@
</script>
<style lang="scss" scoped>
.chart-card-header{
position: relative;
overflow: hidden;
width: 100%;
.chart-card-header {
position: relative;
overflow: hidden;
width: 100%;
.meta{
position: relative;
overflow: hidden;
width: 100%;
color: rgba(0,0,0,.45);
font-size: 14px;
line-height: 22px;
}
}
.chart-card-action{
cursor: pointer;
position: absolute;
top: 0;
right: 0;
.meta {
position: relative;
overflow: hidden;
width: 100%;
color: rgba(0, 0, 0, .45);
font-size: 14px;
line-height: 22px;
}
.chart-card-footer{
border-top: 1px solid #e8e8e8;
padding-top: 9px;
margin-top: 8px;
}
.chart-card-action {
cursor: pointer;
position: absolute;
top: 0;
right: 0;
}
.chart-card-footer {
border-top: 1px solid #e8e8e8;
padding-top: 9px;
margin-top: 8px;
> * {
position: relative;
}
.chart-card-content{
margin-bottom: 12px;
position: relative;
height: 46px;
width: 100%;
.content-fix{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
.field {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
}
}
.chart-card-content {
margin-bottom: 12px;
position: relative;
height: 46px;
width: 100%;
.total {
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
white-space: nowrap;
color: #000;
margin-top: 4px;
margin-bottom: 0;
font-size: 30px;
line-height: 38px;
height: 38px;
.content-fix {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
}
.total {
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
white-space: nowrap;
color: #000;
margin-top: 4px;
margin-bottom: 0;
font-size: 30px;
line-height: 38px;
height: 38px;
}
</style>
\ No newline at end of file
src/components/chart/MiniArea.vue
<template>
<div class="antv-mini-chart">
<div class="chart-content" :style="{ height: 46 }">
<v-chart :force-fit="true" :height="height" :data="data" :padding="[36, 5, 18, 5]">
<div class="antv-chart-mini">
<div class="chart-wrapper" :style="{ height: 46 }">
<v-chart :force-fit="true" :height="height" :data="data" :padding="[36, 0, 18, 0]">
<v-tooltip />
<v-smooth-area position="x*y" />
</v-chart>
......@@ -10,16 +10,17 @@
</template>
<script>
import moment from 'moment'
import moment from 'dayjs'
const data = []
const beginDay = new Date().getTime()
const fakeY = [7, 5, 4, 2, 4, 7, 5, 6, 5, 9, 6, 3, 1, 5, 3, 6, 5]
for (let i = 0; i < fakeY.length; i += 1) {
for (let i = 0; i < 10; i++) {
data.push({
x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
y: fakeY[i]
y: Math.round(Math.random() * 10)
})
}
const tooltip = [
'x*y',
(x, y) => ({
......@@ -42,8 +43,8 @@
data () {
return {
data,
scale,
tooltip,
scale,
height: 100
}
}
......@@ -51,16 +52,5 @@
</script>
<style lang="scss" scoped>
.antv-mini-chart {
position: relative;
width: 100%;
.chart-content {
position: absolute;
bottom: -28px;
width: 100%;
margin: 0 -5px;
overflow: hidden;
}
}
@import "chart";
</style>
\ No newline at end of file
src/components/chart/MiniBar.vue 0 → 100644
<template>
<div class="antv-chart-mini">
<div class="chart-wrapper" :style="{ height: 46 }">
<v-chart :force-fit="true" :height="height" :data="data" :padding="[36, 5, 18, 5]">
<v-tooltip />
<v-bar position="x*y" />
</v-chart>
</div>
</div>
</template>
<script>
import moment from 'dayjs'
const data = []
const beginDay = new Date().getTime()
for (let i = 0; i < 10; i++) {
data.push({
x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
y: Math.round(Math.random() * 10)
})
}
const tooltip = [
'x*y',
(x, y) => ({
name: x,
value: y
})
]
const scale = [{
dataKey: 'x',
min: 2
}, {
dataKey: 'y',
title: '时间',
min: 1,
max: 30
}]
export default {
name: "MiniBar",
data () {
return {
data,
tooltip,
scale,
height: 100
}
}
}
</script>
<style lang="scss" scoped>
@import "chart";
</style>
\ No newline at end of file
src/components/chart/MiniProgress.vue 0 → 100644
<template>
<div class="chart-mini-progress">
<div class="target" :style="{ left: target + '%'}">
<span :style="{ backgroundColor: color }" />
<span :style="{ backgroundColor: color }"/>
</div>
<div class="progress-wrapper">
<div class="progress" :style="{ backgroundColor: color, width: percentage + '%', height: height }"></div>
</div>
</div>
</template>
<script>
export default {
name: "MiniProgress",
props: {
target: {
type: Number,
default: 0
},
height: {
type: String,
default: '10px'
},
color: {
type: String,
default: '#13C2C2'
},
percentage: {
type: Number,
default: 0
}
}
}
</script>
<style lang="scss" scoped>
.chart-mini-progress {
padding: 5px 0;
position: relative;
width: 100%;
.target {
position: absolute;
top: 0;
bottom: 0;
span {
border-radius: 100px;
position: absolute;
top: 0;
left: 0;
height: 4px;
width: 2px;
&:last-child {
top: auto;
bottom: 0;
}
}
}
.progress-wrapper {
background-color: #f5f5f5;
position: relative;
.progress {
transition: all .4s cubic-bezier(.08,.82,.17,1) 0s;
border-radius: 1px 0 0 1px;
background-color: #1890ff;
width: 0;
height: 100%;
}
}
}
</style>
\ No newline at end of file
src/components/chart/Trend.vue 0 → 100644
<template>
<div class="chart-trend">
{{ term }}
<span>{{ rate }}%</span>
<span :class="['trend-icon', trend]"><a-icon :type="'caret-' + trend"/></span>
</div>
</template>
<script>
export default {
name: "Trend",
props: {
term: {
type: String,
default: '',
required: true
},
percentage: {
type: Number,
default: null
},
type: {
type: Boolean,
default: null
},
target: {
type: Number,
default: 0
},
value: {
type: Number,
default: 0
},
fixed: {
type: Number,
default: 2
}
},
data () {
return {
trend: this.type && 'up' || 'down',
rate: this.percentage
}
},
created () {
let type = this.type === null ? this.value >= this.target : this.type
this.trend = type ? 'up' : 'down';
this.rate = (this.percentage === null ? Math.abs(this.value - this.target) * 100 / this.target : this.percentage).toFixed(this.fixed)
}
}
</script>
<style lang="scss" scoped>
.chart-trend {
display: inline-block;
font-size: 14px;
line-height: 22px;
.trend-icon {
font-size: 12px;
&.up, &.down {
margin-left: 4px;
position: relative;
top: 1px;
i {
font-size: 12px;
transform: scale(.83);
}
}
&.up {
color: #f5222d;
}
&.down {
color: #52c41a;
top: -1px;
}
}
}
</style>
\ No newline at end of file
src/components/chart/chart.scss 0 → 100644
.antv-chart-mini {
position: relative;
width: 100%;
.chart-wrapper {
position: absolute;
bottom: -28px;
width: 100%;
/* margin: 0 -5px;
overflow: hidden;*/
}
}
\ No newline at end of file
src/components/layout/LayoutMain.vue
......@@ -48,9 +48,9 @@
import LayoutHeader from './LayoutHeader'
import LayoutFooter from './LayoutFooter'
import SettingDrawer from '@/components/tools/SettingDrawer'
import { triggerResize } from '@/utils/util'
import { mapState, mapActions } from 'vuex'
export default {
name: "LayoutView",
components: {
......@@ -86,7 +86,8 @@
methods: {
...mapActions(['setSidebar']),
toggle() {
this.collapsed = !this.collapsed;
this.collapsed = !this.collapsed
triggerResize()
this.setSidebar(this.collapsed)
},
menuSelect() {
......
src/utils/util.js
export function timeFix() {
const time = new Date()
const hour = time.getHours()
......@@ -9,4 +8,14 @@ export function welcome() {
const arr = ['休息一会儿吧', '准备吃什么呢?', '要不要打一把 DOTA', '我猜你可能累了']
let index = Math.floor((Math.random()*arr.length))
return arr[index]
}
/**
* 触发 window.resize
*/
export function triggerResize() {
let event = document.createEvent('HTMLEvents')
event.initEvent('resize', true, true)
event.eventType = 'message'
window.dispatchEvent(event)
}
\ No newline at end of file
src/views/dashboard/Analysis.vue
......@@ -7,69 +7,46 @@
<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>
<trend style="margin-right: 16px;" term="同周比" :percentage="12" :type="true" :fixed="0" />
<trend term="日环比" :target="100" :value="89" :fixed="0" />
</div>
<div slot="footer">日均销售额<span>￥ 234.56</span></div>
<template slot="footer">日均销售额<span>￥ 234.56</span></template>
</chart-card>
</a-col>
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
<chart-card :loading="loading" title="总销售额" total="￥126,560">
<chart-card :loading="loading" title="访问量" :total="8846 | NumberFormat">
<a-tooltip title="指标说明" slot="action">
<a-icon type="info-circle-o" />
</a-tooltip>
<div>
<mini-area />
</div>
<div slot="footer">日均销售额<span>￥ 234.56</span></div>
<template slot="footer">日访问量<span> {{ '1234' | NumberFormat }}</span></template>
</chart-card>
</a-col>
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
<chart-card :loading="loading" title="总销售额" total="￥126,560">
<chart-card :loading="loading" title="支付笔数" :total="6560 | NumberFormat">
<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>
<template slot="footer">转化率 <span>60%</span></template>
</chart-card>
</a-col>
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
<chart-card :loading="loading" title="总销售额" total="￥126,560">
<chart-card :loading="loading" title="运营活动效果" total="78%">
<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 color="rgb(19, 194, 194)" :target="80" :percentage="78" height="8px" />
</div>
<div slot="footer">日均销售额<span>￥ 234.56</span></div>
<template slot="footer">
<trend style="margin-right: 16px;" term="同周比" :percentage="12" :type="true" :fixed="0" />
<trend term="日环比" :target="80" :value="78" :fixed="0" />
</template>
</chart-card>
</a-col>
</a-row>
......@@ -96,14 +73,16 @@
</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-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>
......@@ -154,13 +133,15 @@
</template>
<script>
import moment from "moment"
import ChartCard from '@/components/ChartCard'
import ACol from "ant-design-vue/es/grid/Col"
import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
import MiniArea from '@/components/chart/MiniArea'
import MiniBar from '@/components/chart/MiniBar'
import MiniProgress from '@/components/chart/MiniProgress'
import RankList from '@/components/chart/RankList'
import Bar from '@/components/chart/Bar'
import Trend from '@/components/chart/Trend'
const rankList = []
for (let i = 0; i < 7; i++) {
......@@ -177,12 +158,14 @@
ACol,
ChartCard,
MiniArea,
MiniBar,
MiniProgress,
RankList,
Bar
Bar,
Trend
},
data() {
return {
moment,
loading: true,
rankList
}
......@@ -196,17 +179,17 @@
</script>
<style lang="scss" scoped>
.extra-wrapper {
line-height: 55px;
padding-right: 24px;
.extra-wrapper {
line-height: 55px;
padding-right: 24px;
.extra-item{
display: inline-block;
margin-right: 24px;
.extra-item {
display: inline-block;
margin-right: 24px;
a {
margin-left: 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