no message

Former-commit-id: 3d89a48b4812432b1d8fb172550496ec368fe7b4
Former-commit-id: 2dfe3f42701c9bcba739c617db883cef7b515bf1
Former-commit-id: cf80d852d653158aa395be003359b46830741bb4

src/pages/demo/chart/index/index.vue

@@ -1,24 +1,16 @@
 <template>
   <Container type="ghost" :responsive="true" class="demo-chart-index">
-    <GridLayout v-bind="layout">
+    <GridLayout v-bind="layout" @layout-updated="layoutUpdatedHandler">
       <GridItem v-bind="layout.layout[0]" @resize="resizeHandler('G2Line1')" @resized="resizedHandler('G2Line1')">
-        <el-card>
+        <el-card class="header-in">
           <div slot="header">近年趋势</div>
-          <G2Line1
-            ref="G2Line1"
-            :data="G2Line1"
-            title="近年趋势">
-          </G2Line1>
+          <G2Line1 ref="G2Line1" :data="G2Line1"></G2Line1>
         </el-card>
       </GridItem>
       <GridItem v-bind="layout.layout[1]" @resize="resizeHandler('G2Pie1')" @resized="resizedHandler('G2Pie1')">
-        <el-card>
-          <!-- <G2Line1
-            ref="G2Line2"
-            :data="G2Line1"
-            title="近年趋势2">
-          </G2Line1> -->
-          <G2Pie1 ref="G2Pie1"></G2Pie1>
+        <el-card class="header-in">
+          <div slot="header">人员分布</div>
+          <G2Pie1 ref="G2Pie1" :data="G2Pie1"></G2Pie1>
         </el-card>
       </GridItem>
     </GridLayout>

src/pages/demo/chart/index/mixins/chart.js

@@ -2,7 +2,8 @@ export default {
   data () {
     return {
       // 数据
-      G2Line1: []
+      G2Line1: [],
+      G2Pie1: []
     }
   },
   mounted () {
@@ -13,11 +14,13 @@ export default {
     // 请求图表数据
     syncData () {
       const api = [
-        {url: '/api/chart/G2Line', data: {code: 1}}
+        {url: '/api/chart/G2Line', data: {code: 1}},
+        {url: '/api/chart/G2Pie', data: {code: 1}}
       ]
       this.$axios.all(api.map(e => this.$axios.post(e.url, e.data)))
-        .then(this.$axios.spread((G2Line1) => {
+        .then(this.$axios.spread((G2Line1, G2Pie1) => {
           this.G2Line1 = G2Line1
+          this.G2Pie1 = G2Pie1
         }))
     }
   }

src/pages/demo/chart/index/mixins/layout.js

@@ -4,10 +4,7 @@ export default {
       layout: {
         layout: [
           {'x': 0, 'y': 0, 'w': 8, 'h': 9, 'i': '0'},
-          {'x': 8, 'y': 9, 'w': 4, 'h': 7, 'i': '1'},
-          {'x': 0, 'y': 9, 'w': 4, 'h': 7, 'i': '2'},
-          {'x': 8, 'y': 0, 'w': 4, 'h': 9, 'i': '3'},
-          {'x': 4, 'y': 9, 'w': 4, 'h': 7, 'i': '4'}
+          {'x': 8, 'y': 0, 'w': 4, 'h': 9, 'i': '1'}
         ],
         colNum: 12,
         rowHeight: 30,
@@ -21,6 +18,13 @@ export default {
     }
   },
   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(() => {

src/pages/demo/chart/index/style.scss

@@ -6,9 +6,15 @@
       @extend %unable-select;
       height: 100%;
       .el-card__body {
-        height: calc(100% - 59px);
+        height: 100%;
         padding: 0px;
       }
+      // 有header的卡片的body高度需要减去header
+      &.header-in {
+        .el-card__body {
+          height: calc(100% - 59px);
+        }
+      }
     }
     .vue-resizable-handle {
       bottom: 6px;