From f1d7e49da3f47a03fba2a939d44491c46d549e31 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=9D=A8?= <1711467488@qq.com>
Date: Sat, 17 Feb 2018 10:32:51 +0800
Subject: [PATCH] no message

Former-commit-id: c1f283658a2670885fe8217fd2c32385034468ab
Former-commit-id: 5f39ffd696f1c4a541d976b2593ea2ec5810aa21
Former-commit-id: f08a3e0712d277baad4924fbf7bbda255bbaa5f8
---
 src/pages/demo/chart/index2/index.vue        | 38 ++++++++++++++++-
 src/pages/demo/chart/index2/mixins/chart.js  | 34 +++++++++++++++
 src/pages/demo/chart/index2/mixins/layout.js | 44 ++++++++++++++++++++
 src/pages/demo/chart/index2/style.scss       | 28 +++++++++++++
 src/router/menu/_chart.js                    |  4 +-
 5 files changed, 144 insertions(+), 4 deletions(-)
 create mode 100644 src/pages/demo/chart/index2/mixins/chart.js
 create mode 100644 src/pages/demo/chart/index2/mixins/layout.js
 create mode 100644 src/pages/demo/chart/index2/style.scss

diff --git a/src/pages/demo/chart/index2/index.vue b/src/pages/demo/chart/index2/index.vue
index 0e312859..944de3b8 100644
--- a/src/pages/demo/chart/index2/index.vue
+++ b/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>
diff --git a/src/pages/demo/chart/index2/mixins/chart.js b/src/pages/demo/chart/index2/mixins/chart.js
new file mode 100644
index 00000000..5ec7f3f2
--- /dev/null
+++ b/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
+          }
+        }))
+    }
+  }
+}
diff --git a/src/pages/demo/chart/index2/mixins/layout.js b/src/pages/demo/chart/index2/mixins/layout.js
new file mode 100644
index 00000000..d65f8ded
--- /dev/null
+++ b/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()
+    }
+  }
+}
diff --git a/src/pages/demo/chart/index2/style.scss b/src/pages/demo/chart/index2/style.scss
new file mode 100644
index 00000000..c3e9bd6b
--- /dev/null
+++ b/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;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/router/menu/_chart.js b/src/router/menu/_chart.js
index 048fc00b..4addee98 100644
--- a/src/router/menu/_chart.js
+++ b/src/router/menu/_chart.js
@@ -13,7 +13,7 @@ export const menu = {
   children: [
     // 数据处理
     {
-      title: '首页',
+      title: '图表演示1',
       icon: 'file-o',
       path: 'index',
       name: 'demo-chart-index',
@@ -23,7 +23,7 @@ export const menu = {
       component: resolve => { require(['@/pages/demo/chart/index/index.vue'], resolve) }
     },
     {
-      title: '首页2',
+      title: '图表演示2',
       icon: 'file-o',
       path: 'index2',
       name: 'demo-chart-index2',