sheng/mes-ui-d2
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

no message

Browse Source 
Former-commit-id: f14a9971a0c6efbc901fe0969c40014e8ea57a45
Former-commit-id: ae2507cc4aba63de535940551c83f6caa81ad274
Former-commit-id: b971e44eddec09e7f3d0e27456aa8aa273b1c4d3
This commit is contained in:
李杨
2018-03-21 20:13:56 +08:00
parent 0cedf9ab6f
commit eea1cb5c0b
13 changed files with 243 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/assets/image/logo/w500-chart.png.REMOVED.git-id Normal file
View File

@@ -0,0 +1 @@
ced2a0c6ac224943617c9f3447ca49f5418af81d

1
src/assets/image/logo/w500-component.png.REMOVED.git-id Normal file
View File

@@ -0,0 +1 @@
feffe17f1e6693c27c5ec0345455393272fde3f8

30
src/components/demo/PageIndexArticle/index.vue
View File

@@ -1,11 +1,31 @@
<template>
<div class="page-index-body">
<img class="page-index-body__logo" src="@/assets/image/logo/w500.png">
<p class="page-index-body__title">这是D2Admin</p>
<p class="page-index-body__sub-title dd-mt-0">一个追求简洁和上手即用的前端模板</p>
<div class="page-index-body__logo">
<slot></slot>
</div>
<p class="page-index-body__title">{{title}}</p>
<p class="page-index-body__sub-title dd-mt-0">{{subTitle}}</p>
</div>
</template>
<script>
export default {
props: {
title: {
type: String,
required: false,
default: 'Title'
},
subTitle: {
type: String,
required: false,
default: 'subTitle'
}
}
}
</script>
<style lang="scss" scoped>
@import '~@/assets/style/public.scss';
.page-index-header {
@@ -26,7 +46,9 @@
justify-content: center;
align-items: center;
.page-index-body__logo {
width: 200px;
img {
width: 200px;
}
}
.page-index-body__title {
color: $color-text-main;

6
src/pages/core/index/index.vue
View File

@@ -1,5 +1,9 @@
<template>
<Container type="card-full">
<PageIndexArticle></PageIndexArticle>
<PageIndexArticle
title="这是D2Admin"
sub-title="一个追求简洁和上手即用的前端模板">
<img src="@/assets/image/logo/w500.png">
</PageIndexArticle>
</Container>
</template>

0
src/pages/demo/chart/index/components/ChartCardHeader.vue → src/pages/demo/chart/all/components/ChartCardHeader.vue
View File

166
src/pages/demo/chart/all/index.vue Normal file
View File

@@ -0,0 +1,166 @@
<template>
<Container type="ghost" :responsive="true" class="demo-chart-index">
<el-row :gutter="20">
<el-col class="col" :span="8">
<el-card class="header-in">
<ChartCardHeader slot="header" @refresh="handleRefreshData(0)" title="G2LineBase"></ChartCardHeader>
<G2LineBase :ref="chart[0].refName" v-bind="chart[0]" @ready="isReady(0)"></G2LineBase>
</el-card>
</el-col>
<el-col class="col" :span="8">
<el-card class="header-in">
<ChartCardHeader slot="header" @refresh="handleRefreshData(1)" title="G2LineStep"></ChartCardHeader>
<G2LineStep :ref="chart[1].refName" v-bind="chart[1]" @ready="isReady(1)"></G2LineStep>
</el-card>
</el-col>
<el-col class="col" :span="8">
<el-card class="header-in">
<ChartCardHeader slot="header" @refresh="handleRefreshData(2)" title="G2ColumnBase"></ChartCardHeader>
<G2ColumnBase :ref="chart[2].refName" v-bind="chart[2]" @ready="isReady(2)"></G2ColumnBase>
</el-card>
</el-col>
<el-col class="col" :span="8">
<el-card class="header-in">
<ChartCardHeader slot="header" @refresh="handleRefreshData(3)" title="G2BarBase"></ChartCardHeader>
<G2BarBase :ref="chart[3].refName" v-bind="chart[3]" @ready="isReady(3)"></G2BarBase>
</el-card>
</el-col>
<el-col class="col" :span="8">
<el-card class="header-in">
<ChartCardHeader slot="header" @refresh="handleRefreshData(4)" title="G2PieBase"></ChartCardHeader>
<G2PieBase :ref="chart[4].refName" v-bind="chart[4]" @ready="isReady(4)"></G2PieBase>
</el-card>
</el-col>
<el-col class="col" :span="8">
<el-card class="header-in">
<ChartCardHeader slot="header" @refresh="handleRefreshData(5)" title="G2NightingaleRoseBase"></ChartCardHeader>
<G2NightingaleRoseBase :ref="chart[5].refName" v-bind="chart[5]" @ready="isReady(5)"></G2NightingaleRoseBase>
</el-card>
</el-col>
<el-col class="col" :span="8">
<el-card class="header-in">
<ChartCardHeader slot="header" @refresh="handleRefreshData(6)" title="G2RadarBase"></ChartCardHeader>
<G2RadarBase :ref="chart[6].refName" v-bind="chart[6]" @ready="isReady(6)"></G2RadarBase>
</el-card>
</el-col>
<el-col class="col" :span="8">
<el-card class="header-in">
<ChartCardHeader slot="header" @refresh="handleRefreshData(7)" title="G2AreaBase"></ChartCardHeader>
<G2AreaBase :ref="chart[7].refName" v-bind="chart[7]" @ready="isReady(7)"></G2AreaBase>
</el-card>
</el-col>
</el-row>
</Container>
</template>
<script>
export default {
components: {
ChartCardHeader: () => import('./components/ChartCardHeader')
},
data () {
return {
chart: [
{
api: {url: '/api/chart/G2Line', data: {type: 'base'}},
refName: 'G2LineBase',
ready: false,
data: []
},
{
api: {url: '/api/chart/G2Line', data: {type: 'step'}},
refName: 'G2LineStep',
ready: false,
data: []
},
{
api: {url: '/api/chart/G2Column', data: {type: 'base'}},
refName: 'G2ColumnBase',
ready: false,
data: []
},
{
api: {url: '/api/chart/G2Bar', data: {type: 'base'}},
refName: 'G2BarBase',
ready: false,
data: []
},
{
api: {url: '/api/chart/G2Pie', data: {type: 'base'}},
refName: 'G2PieBase',
ready: false,
data: []
},
{
api: {url: '/api/chart/G2NightingaleRose', data: {type: 'base'}},
refName: 'G2NightingaleRoseBase',
ready: false,
data: []
},
{
api: {url: '/api/chart/G2Radar', data: {type: 'base'}},
refName: 'G2RadarBase',
ready: false,
data: []
},
{
api: {url: '/api/chart/G2Area', data: {type: 'base'}},
refName: 'G2AreaBase',
ready: false,
data: []
}
]
}
},
computed: {
// 所有的图表已经 mounted
ready () {
return !this.chart.find(e => !e.ready)
}
},
watch: {
// 在所有的图表 mounted 后加载数据
ready (ready) {
if (ready) {
this.syncData()
this.showInfo()
}
}
},
methods: {
// 显示提示
showInfo () {
this.$notify({
title: '提示',
message: '点击卡片右上角的刷新按钮可以重新载入某个图表的数据',
duration: 10000
})
},
// 图表 mounted
isReady (index) {
this.chart[index].ready = true
},
// 请求图表数据
syncData () {
this.$axios.all(this.chart.map(e => this.$axios.post(e.api.url, e.api.data)))
.then(this.$axios.spread((...res) => {
res.forEach((e, index) => {
this.chart[index].data = e
})
}))
},
// 用户触发了卡片右上角的刷新按钮
handleRefreshData (index) {
const api = this.chart[index].api
this.$axios.post(api.url, api.data)
.then(res => {
this.chart[index].data = res
})
}
}
}
</script>
<style lang="scss">
@import './style.scss';
</style>

0
src/pages/demo/chart/index/style.scss → src/pages/demo/chart/all/style.scss
View File

171
src/pages/demo/chart/index/index.vue
View File

@@ -1,166 +1,9 @@
<template>
<Container type="ghost" :responsive="true" class="demo-chart-index">
<el-row :gutter="20">
<el-col class="col" :span="8">
<el-card class="header-in">
<ChartCardHeader slot="header" @refresh="handleRefreshData(0)" title="G2LineBase"></ChartCardHeader>
<G2LineBase :ref="chart[0].refName" v-bind="chart[0]" @ready="isReady(0)"></G2LineBase>
</el-card>
</el-col>
<el-col class="col" :span="8">
<el-card class="header-in">
<ChartCardHeader slot="header" @refresh="handleRefreshData(1)" title="G2LineStep"></ChartCardHeader>
<G2LineStep :ref="chart[1].refName" v-bind="chart[1]" @ready="isReady(1)"></G2LineStep>
</el-card>
</el-col>
<el-col class="col" :span="8">
<el-card class="header-in">
<ChartCardHeader slot="header" @refresh="handleRefreshData(2)" title="G2ColumnBase"></ChartCardHeader>
<G2ColumnBase :ref="chart[2].refName" v-bind="chart[2]" @ready="isReady(2)"></G2ColumnBase>
</el-card>
</el-col>
<el-col class="col" :span="8">
<el-card class="header-in">
<ChartCardHeader slot="header" @refresh="handleRefreshData(3)" title="G2BarBase"></ChartCardHeader>
<G2BarBase :ref="chart[3].refName" v-bind="chart[3]" @ready="isReady(3)"></G2BarBase>
</el-card>
</el-col>
<el-col class="col" :span="8">
<el-card class="header-in">
<ChartCardHeader slot="header" @refresh="handleRefreshData(4)" title="G2PieBase"></ChartCardHeader>
<G2PieBase :ref="chart[4].refName" v-bind="chart[4]" @ready="isReady(4)"></G2PieBase>
</el-card>
</el-col>
<el-col class="col" :span="8">
<el-card class="header-in">
<ChartCardHeader slot="header" @refresh="handleRefreshData(5)" title="G2NightingaleRoseBase"></ChartCardHeader>
<G2NightingaleRoseBase :ref="chart[5].refName" v-bind="chart[5]" @ready="isReady(5)"></G2NightingaleRoseBase>
</el-card>
</el-col>
<el-col class="col" :span="8">
<el-card class="header-in">
<ChartCardHeader slot="header" @refresh="handleRefreshData(6)" title="G2RadarBase"></ChartCardHeader>
<G2RadarBase :ref="chart[6].refName" v-bind="chart[6]" @ready="isReady(6)"></G2RadarBase>
</el-card>
</el-col>
<el-col class="col" :span="8">
<el-card class="header-in">
<ChartCardHeader slot="header" @refresh="handleRefreshData(7)" title="G2AreaBase"></ChartCardHeader>
<G2AreaBase :ref="chart[7].refName" v-bind="chart[7]" @ready="isReady(7)"></G2AreaBase>
</el-card>
</el-col>
</el-row>
<Container type="card-full">
<PageIndexArticle
title="内置组件"
sub-title="D2Admin 为你提供了一些上手即用的组件">
<img src="@/assets/image/logo/w500-component.png">
</PageIndexArticle>
</Container>
</template>
<script>
export default {
components: {
ChartCardHeader: () => import('./components/ChartCardHeader')
},
data () {
return {
chart: [
{
api: {url: '/api/chart/G2Line', data: {type: 'base'}},
refName: 'G2LineBase',
ready: false,
data: []
},
{
api: {url: '/api/chart/G2Line', data: {type: 'step'}},
refName: 'G2LineStep',
ready: false,
data: []
},
{
api: {url: '/api/chart/G2Column', data: {type: 'base'}},
refName: 'G2ColumnBase',
ready: false,
data: []
},
{
api: {url: '/api/chart/G2Bar', data: {type: 'base'}},
refName: 'G2BarBase',
ready: false,
data: []
},
{
api: {url: '/api/chart/G2Pie', data: {type: 'base'}},
refName: 'G2PieBase',
ready: false,
data: []
},
{
api: {url: '/api/chart/G2NightingaleRose', data: {type: 'base'}},
refName: 'G2NightingaleRoseBase',
ready: false,
data: []
},
{
api: {url: '/api/chart/G2Radar', data: {type: 'base'}},
refName: 'G2RadarBase',
ready: false,
data: []
},
{
api: {url: '/api/chart/G2Area', data: {type: 'base'}},
refName: 'G2AreaBase',
ready: false,
data: []
}
]
}
},
computed: {
// 所有的图表已经 mounted
ready () {
return !this.chart.find(e => !e.ready)
}
},
watch: {
// 在所有的图表 mounted 后加载数据
ready (ready) {
if (ready) {
this.syncData()
this.showInfo()
}
}
},
methods: {
// 显示提示
showInfo () {
this.$notify({
title: '提示',
message: '点击卡片右上角的刷新按钮可以重新载入某个图表的数据',
duration: 10000
})
},
// 图表 mounted
isReady (index) {
this.chart[index].ready = true
},
// 请求图表数据
syncData () {
this.$axios.all(this.chart.map(e => this.$axios.post(e.api.url, e.api.data)))
.then(this.$axios.spread((...res) => {
res.forEach((e, index) => {
this.chart[index].data = e
})
}))
},
// 用户触发了卡片右上角的刷新按钮
handleRefreshData (index) {
const api = this.chart[index].api
this.$axios.post(api.url, api.data)
.then(res => {
this.chart[index].data = res
})
}
}
}
</script>
<style lang="scss">
@import './style.scss';
</style>
</template>

9
src/pages/demo/components/index/index.vue Normal file
View File

@@ -0,0 +1,9 @@
<template>
<Container type="card-full">
<PageIndexArticle
title="内置组件"
sub-title="D2Admin 为你提供了一些上手即用的组件">
<img src="@/assets/image/logo/w500-component.png">
</PageIndexArticle>
</Container>
</template>

58
src/pages/demo/plugins/index/index.vue
View File

@@ -1,55 +1,9 @@
<template>
<Container type="card-full">
<template slot="header">
<div class="page-plugin-index-header">
<div class="dd-fl">
<span class="page-plugin-index-header__title">
插件
</span>
</div>
<div class="dd-fr">
<el-button>
<Icon name="github"></Icon>
Github
</el-button>
</div>
</div>
</template>
<div class="page-plugin-index-body">
<img class="page-plugin-index-body__logo" src="@/assets/image/logo/w500-plugin.png">
<p class="page-plugin-index-body__title">插件演示</p>
<p class="page-plugin-index-body__sub-title dd-mt-0">D2Admin 集成了许多实用插件</p>
</div>
<PageIndexArticle
title="插件演示"
sub-title="D2Admin 集成了许多实用插件">
<img src="@/assets/image/logo/w500-plugin.png">
</PageIndexArticle>
</Container>
</template>
<style lang="scss" scoped>
@import '~@/assets/style/public.scss';
.page-plugin-index-header {
overflow: hidden;
.page-plugin-index-header__title {
display: inline-block;
padding: 12px 20px;
}
}
.page-plugin-index-body {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
.page-plugin-index-body__logo {
width: 200px;
}
.page-plugin-index-body__title {
color: $color-text-main;
}
.page-plugin-index-body__sub-title {
color: $color-text-sub;
}
}
</style>
</template>

15
src/router/menu/_chart.js
View File

@@ -21,17 +21,26 @@ export const menu = {
requiresAuth: true
},
component: resolve => { require(['@/components/core/MainLayout/index.vue'], resolve) },
redirect: {
name: 'demo-chart-index'
},
children: [
// 首页
{
path: 'index',
name: 'demo-chart-index',
component: resolve => { require(['@/pages/demo/chart/index/index.vue'], resolve) }
},
// 所有
{
title: '所有',
icon: 'th',
path: 'index',
name: 'demo-chart-index',
path: 'all',
name: 'demo-chart-all',
meta: {
requiresAuth: true
},
component: resolve => { require(['@/pages/demo/chart/index/index.vue'], resolve) }
component: resolve => { require(['@/pages/demo/chart/all/index.vue'], resolve) }
},
// 动态尺寸
{

12
src/router/menu/_components.js
View File

@@ -7,10 +7,16 @@ export const menu = {
requiresAuth: true
},
component: resolve => { require(['@/components/core/MainLayout/index.vue'], resolve) },
// redirect: {
// name: ''
// },
redirect: {
name: 'demo-components-index'
},
children: [
// 首页
{
path: 'index',
name: 'demo-components-index',
component: resolve => { require(['@/pages/demo/components/index/index.vue'], resolve) }
},
// 页面容器
{
title: '页面容器',

1
src/router/menu/_plugin.js
View File

@@ -11,6 +11,7 @@ export const menu = {
name: 'demo-plugins-index'
},
children: [
// 首页
{
path: 'index',
name: 'demo-plugins-index',