no message
Former-commit-id: 57f7ce520d781e84dca02cbf2eb0287746283182 Former-commit-id: 850e8ec2c0516db7bd021b5c9befa5a56d5b5b54 Former-commit-id: 2491c0df8751f62d1bc5ce53fb52a0ac8395b752
This commit is contained in:
@@ -1,40 +0,0 @@
|
||||
<template>
|
||||
<Container type="ghost" :responsive="true" class="demo-chart-index">
|
||||
<GridLayout v-bind="layout" @layout-updated="layoutUpdatedHandler">
|
||||
<GridItem v-bind="layout.layout[0]" @resize="resizeHandler('G2Line1')" @resized="resizedHandler('G2Line1')">
|
||||
<el-card class="header-in">
|
||||
<div slot="header">近年趋势</div>
|
||||
<G2Line1 ref="G2Line1" :data="chartData.G2Line1"></G2Line1>
|
||||
</el-card>
|
||||
</GridItem>
|
||||
<GridItem v-bind="layout.layout[1]" @resize="resizeHandler('G2Pie1')" @resized="resizedHandler('G2Pie1')">
|
||||
<el-card class="header-in">
|
||||
<div slot="header">人员分布</div>
|
||||
<G2Pie1 ref="G2Pie1" :data="chartData.G2Pie1"></G2Pie1>
|
||||
</el-card>
|
||||
</GridItem>
|
||||
<GridItem v-bind="layout.layout[2]" @resize="resizeHandler('G2Column1')" @resized="resizedHandler('G2Column1')">
|
||||
<el-card class="header-in">
|
||||
<div slot="header">人员分布</div>
|
||||
<G2Column1 ref="G2Column1" :data="chartData.G2Column1"></G2Column1>
|
||||
</el-card>
|
||||
</GridItem>
|
||||
</GridLayout>
|
||||
</Container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import layout from './mixins/layout'
|
||||
import chart from './mixins/chart'
|
||||
export default {
|
||||
mixins: [
|
||||
layout,
|
||||
chart
|
||||
]
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import './style.scss';
|
||||
</style>
|
||||
|
||||
@@ -1,34 +0,0 @@
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
// 数据
|
||||
chartData: {
|
||||
G2Line1: [],
|
||||
G2Pie1: [],
|
||||
G2Column1: []
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
// 请求图表数据
|
||||
this.syncData()
|
||||
},
|
||||
methods: {
|
||||
// 请求图表数据
|
||||
syncData () {
|
||||
const api = [
|
||||
{url: '/api/chart/G2Line', data: {code: 1}},
|
||||
{url: '/api/chart/G2Pie', data: {code: 1}},
|
||||
{url: '/api/chart/G2Column', data: {code: 1}}
|
||||
]
|
||||
this.$axios.all(api.map(e => this.$axios.post(e.url, e.data)))
|
||||
.then(this.$axios.spread((G2Line1, G2Pie1, G2Column1) => {
|
||||
this.chartData = {
|
||||
G2Line1,
|
||||
G2Pie1,
|
||||
G2Column1
|
||||
}
|
||||
}))
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,42 +0,0 @@
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
layout: {
|
||||
layout: [
|
||||
{'x': 0, 'y': 0, 'w': 8, 'h': 9, 'i': '0'},
|
||||
{'x': 8, 'y': 0, 'w': 4, 'h': 9, 'i': '1'},
|
||||
{'x': 0, 'y': 9, 'w': 4, 'h': 7, 'i': '2'}
|
||||
],
|
||||
colNum: 12,
|
||||
rowHeight: 30,
|
||||
isDraggable: true,
|
||||
isResizable: true,
|
||||
isMirrored: false,
|
||||
verticalCompact: true,
|
||||
margin: [10, 10],
|
||||
useCssTransforms: true
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
layoutUpdatedHandler (newLayout) {
|
||||
console.group('layoutUpdatedHandler')
|
||||
newLayout.forEach(e => {
|
||||
console.log(`{'x': ${e.x}, 'y': ${e.y}, 'w': ${e.w}, 'h': ${e.h}, 'i': '${e.i}'},`)
|
||||
})
|
||||
console.groupEnd()
|
||||
},
|
||||
// 改变尺寸
|
||||
resizeHandler (name) {
|
||||
this.$nextTick(() => {
|
||||
this.$refs[name].resize()
|
||||
})
|
||||
},
|
||||
// 改变尺寸完成
|
||||
resizedHandler (name) {
|
||||
this.$nextTick(() => {
|
||||
this.$refs[name].resize()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
@import '~@/assets/style/public.scss';
|
||||
.demo-chart-index {
|
||||
.vue-grid-layout {
|
||||
margin: -10px;
|
||||
.el-card {
|
||||
@extend %unable-select;
|
||||
height: 100%;
|
||||
.el-card__body {
|
||||
height: 100%;
|
||||
padding: 0px;
|
||||
}
|
||||
// 有header的卡片的body高度需要减去header
|
||||
&.header-in {
|
||||
.el-card__body {
|
||||
height: calc(100% - 59px);
|
||||
}
|
||||
}
|
||||
}
|
||||
.vue-resizable-handle {
|
||||
bottom: 6px;
|
||||
right: 6px;
|
||||
opacity: .3;
|
||||
&:hover{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user