no message

Former-commit-id: c1f283658a2670885fe8217fd2c32385034468ab
Former-commit-id: 5f39ffd696f1c4a541d976b2593ea2ec5810aa21
Former-commit-id: f08a3e0712d277baad4924fbf7bbda255bbaa5f8

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

@@ -1,5 +1,39 @@
 <template>
-  <Container type="ghost" :responsive="true">
-    Hello
+  <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>
+          1
+        </el-card>
+      </GridItem>
+      <GridItem v-bind="layout.layout[1]" @resize="resizeHandler('G2Pie1')" @resized="resizedHandler('G2Pie1')">
+        <el-card class="header-in">
+          <div slot="header">人员分布</div>
+          2
+        </el-card>
+      </GridItem>
+      <GridItem v-bind="layout.layout[2]" @resize="resizeHandler('G2Column1')" @resized="resizedHandler('G2Column1')">
+        <el-card class="header-in">
+          <div slot="header">人员分布</div>
+          3
+        </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>

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

@@ -0,0 +1,34 @@
+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
+          }
+        }))
+    }
+  }
+}

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

@@ -0,0 +1,44 @@
+export default {
+  data () {
+    return {
+      layout: {
+        // 调整布局时 复制 layoutUpdatedHandler() 输出的日志到这里
+        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: {
+    // 更新指定的图表
+    chartResize () {
+      this.$log('chartResize')
+    },
+    // 布局组件发生变化
+    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.chartResize()
+    },
+    // 改变尺寸完成
+    resizedHandler (name) {
+      this.chartResize()
+    }
+  }
+}

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

@@ -0,0 +1,28 @@
+@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;
+      }
+    }
+  }
+}