Skip to content

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

add chart

parent 1cf6572c
Showing with 323 additions and 31 deletions
src/components/ChartCard.vue 0 → 100644
<template>
<a-card :body-style="{ padding: '20px 24px 8px' }" :bordered="false">
<div class="chart-card-header">
<div class="meta">
<span class="chart-card-title">{{ title }}</span>
<span class="chart-card-action">
<slot name="action"></slot>
</span>
</div>
<div class="total"><span>{{ total }}</span></div>
</div>
<div class="chart-card-content">
<div class="content-fix">
<slot></slot>
</div>
</div>
<div class="chart-card-footer">
<slot name="footer"></slot>
</div>
</a-card>
</template>
<script>
export default {
name: "ChartCard",
props: ['title', 'total']
}
</script>
<style lang="scss" scoped>
.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;
}
.chart-card-footer{
border-top: 1px solid #e8e8e8;
padding-top: 9px;
margin-top: 8px;
}
.chart-card-content{
margin-bottom: 12px;
position: relative;
height: 46px;
width: 100%;
.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/LayoutContent.vue 0 → 100644
<template>
<a-layout-content class="layout-content">
<div style="margin: -24px -24px 0px;" v-if="!$route.meta.hideHeader">
<!-- pageHeader , route meta hideHeader:true on hide -->
<s-page-header></s-page-header>
<s-route-view></s-route-view>
</div>
<s-route-view v-else></s-route-view>
</a-layout-content>
</template>
<script>
import PageHeader from './PageHeader'
import RouteView from './RouteView'
export default {
name: "LayoutContent",
components: {
"s-page-header": PageHeader,
"s-route-view": RouteView
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
src/components/PageHeader.vue 0 → 100644
<template>
<div class="pageHeader">
<s-breadcrumb></s-breadcrumb>
<div class="detail">
<div class="main">
<div class="row">
<h1 class="title" v-text="$route.meta.title"></h1>
</div>
<div class="row"></div>
</div>
</div>
</div>
</template>
<script>
import Breadcrumb from '@/components/Breadcrumb'
export default {
name: "PageHeader",
components: {
"s-breadcrumb": Breadcrumb
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
src/components/RouteView.vue 0 → 100644
<template>
<keep-alive v-if="$route.meta.keepAlive">
<router-view></router-view>
</keep-alive>
<router-view v-else></router-view>
</template>
<script>
export default {
name: "RouteView"
}
</script>
<style scoped>
</style>
\ No newline at end of file
src/components/chart/MiniArea.vue 0 → 100644
<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]">
<v-tooltip />
<v-smooth-area position="x*y" />
</v-chart>
</div>
</div>
</template>
<script>
import moment from 'moment'
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) {
data.push({
x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
y: fakeY[i]
})
}
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: "MiniArea",
data () {
return {
data,
scale,
tooltip,
height: 100
}
}
}
</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;
}
}
</style>
\ No newline at end of file
src/components/menu/SiderMenu.vue
......@@ -6,7 +6,7 @@
<h1>Ant Design Pro</h1>
</router-link>
</div>
<s-menu :collapsed="collapsed" :menu="menus" @select="onSelect"></s-menu>
<s-menu :collapsed="collapsed" :menu="menus" @select="onSelect" style="padding: 16px 0px;"></s-menu>
</a-layout-sider>
</template>
......
src/main.js
......@@ -6,12 +6,15 @@ import store from './store/'
import { VueAxios } from "@/utils/request"
import AntDesign from 'ant-design-vue'
import Viser from 'viser-vue'
import 'ant-design-vue/dist/antd.css'; // or 'ant-design-vue/dist/antd.less'
import '@/permission' // permission control
Vue.use(AntDesign)
Vue.use(VueAxios, router)
Vue.use(Viser)
Vue.config.productionTip = false
......
src/views/Layout.vue
......@@ -7,46 +7,23 @@
<!-- layout header -->
<s-layout-header :collapsed="collapsed" @toggle="toggle"></s-layout-header>
<!-- layout content -->
<a-layout-content class="layout-content">
<div style="margin: -24px -24px 0px;">
<!-- pageHeader , route meta hideHeader:true on hide -->
<div class="pageHeader" v-if="!$route.meta.hideHeader">
<s-breadcrumb></s-breadcrumb>
<div class="detail">
<div class="main">
<div class="row">
<h1 class="title" v-text="$route.meta.title"></h1>
</div>
<div class="row"></div>
</div>
</div>
</div>
<keep-alive v-if="$route.meta.keepAlive">
<router-view></router-view>
</keep-alive>
<router-view v-else></router-view>
</div>
</a-layout-content>
<s-layout-content></s-layout-content>
</a-layout>
</a-layout>
</template>
<script>
// import NavMenu from '@/components/NavMenu'
import SiderMenu from '@/components/menu/SiderMenu'
import Breadcrumb from '@/components/Breadcrumb'
import LayoutHeader from '@/components/LayoutHeader'
import LayoutContent from '@/components/LayoutContent'
import { asyncRouterMap } from '@/router/index'
export default {
name: "Layout",
components: {
"s-sider-menu": SiderMenu,
"s-breadcrumb": Breadcrumb,
"s-layout-header": LayoutHeader
"s-layout-header": LayoutHeader,
"s-layout-content": LayoutContent
},
data() {
return {
......
src/views/Login.vue
......@@ -132,7 +132,7 @@
},
handleTabClick(key) {
this.customActiveKey = key
this.form.resetFields()
// this.form.resetFields()
},
handleSubmit() {
let flag = false
......
src/views/dashboard/Analysis.vue
<template>
<div>
Analysis
<a-row :gutter="24">
<a-col :sm="24" :md="12" :xl="6">
<chart-card title="总销售额" total="￥126,560">
<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>
</div>
<div slot="footer">日均销售额 <span>￥ 234.56</span></div>
</chart-card>
</a-col>
<a-col :sm="24" :md="12" :xl="6">
<chart-card title="总销售额" total="￥126,560">
<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>
</chart-card>
</a-col>
<a-col :sm="24" :md="12" :xl="6">
<chart-card title="总销售额" total="￥126,560">
<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>
</div>
<div slot="footer">日均销售额 <span>￥ 234.56</span></div>
</chart-card>
</a-col>
<a-col :sm="24" :md="12" :xl="6">
<chart-card title="总销售额" total="￥126,560">
<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>
</div>
<div slot="footer">日均销售额 <span>￥ 234.56</span></div>
</chart-card>
</a-col>
</a-row>
</div>
</template>
<script>
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'
export default {
name: "Analysis"
name: "Analysis",
components: {
ATooltip,
ACol,
ChartCard,
MiniArea
}
}
</script>
......
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