no message

Former-commit-id: 375ce0d5554b5c6c44c3e38e34e448d179678d16 Former-commit-id: 068828fc0c922d88b572b1717e9821db8639291a Former-commit-id: 78d9c0aa637a1174c4d71f1e394cdc8a5b64f5a8
2018-02-19 21:38:28 +08:00
parent be55475ae7
commit 6e561eb1de
5 changed files with 286 additions and 64 deletions
--- a/src/pages/demo/chart/_index/components/ChartCardHeader.vue
+++ b/src/pages/demo/chart/_index/components/ChartCardHeader.vue
@@ -0,0 +1,51 @@
+<template>
+  <div>
+    {{title}}
+    <span class="dd-fr">
+      <Icon
+        class="chart-card-header-icon"
+        :class="{active}"
+        name="refresh"
+        @click.native="handleRefresh">
+      </Icon>
+    </span>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      active: false
+    }
+  },
+  methods: {
+    handleRefresh () {
+      this.active = true
+      setTimeout(() => {
+        this.active = false
+      }, 1000)
+      this.$emit('refresh')
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import '~@/assets/style/public.scss';
+.chart-card-header-icon {
+  color: $color-text-sub;
+  transition: all .3s;
+  &.active {
+    transform: rotate(360deg);
+  }
+}
+</style>
+
--- a/src/pages/demo/chart/_index/index.vue
+++ b/src/pages/demo/chart/_index/index.vue
@@ -0,0 +1,179 @@
+<template>
+  <Container type="ghost" :responsive="true" class="demo-chart-index">
+    <GridLayout v-bind="layout" @layout-updated="layoutUpdatedHandler">
+      <!-- 卡片 -->
+      <GridItem v-bind="layout.layout[0]" @resized="handleResized(chart[0].refName)">
+        <el-card class="header-in">
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(0)" title="G2LineBase"></ChartCardHeader>
+          <G2LineBase :ref="chart[0].refName" v-bind="chart[0]"></G2LineBase>
+        </el-card>
+      </GridItem>
+      <!-- 卡片 -->
+      <GridItem v-bind="layout.layout[1]" @resized="handleResized(chart[1].refName)">
+        <el-card class="header-in">
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(1)" title="G2LineStep"></ChartCardHeader>
+          <G2LineStep :ref="chart[1].refName" v-bind="chart[1]"></G2LineStep>
+        </el-card>
+      </GridItem>
+      <!-- 卡片 -->
+      <GridItem v-bind="layout.layout[2]" @resized="handleResized(chart[2].refName)">
+        <el-card class="header-in">
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(2)" title="G2ColumnBase"></ChartCardHeader>
+          <G2ColumnBase :ref="chart[2].refName" v-bind="chart[2]"></G2ColumnBase>
+        </el-card>
+      </GridItem>
+      <!-- 卡片 -->
+      <GridItem v-bind="layout.layout[3]" @resized="handleResized(chart[3].refName)">
+        <el-card class="header-in">
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(3)" title="G2BarBase"></ChartCardHeader>
+          <G2BarBase :ref="chart[3].refName" v-bind="chart[3]"></G2BarBase>
+        </el-card>
+      </GridItem>
+      <!-- 卡片 -->
+      <GridItem v-bind="layout.layout[4]" @resized="handleResized(chart[4].refName)">
+        <el-card class="header-in">
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(4)" title="G2PieBase"></ChartCardHeader>
+          <G2PieBase :ref="chart[4].refName" v-bind="chart[4]"></G2PieBase>
+        </el-card>
+      </GridItem>
+      <!-- 卡片 -->
+      <GridItem v-bind="layout.layout[5]" @resized="handleResized(chart[5].refName)">
+        <el-card class="header-in">
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(5)" title="G2NightingaleRoseBase"></ChartCardHeader>
+          <G2NightingaleRoseBase :ref="chart[5].refName" v-bind="chart[5]"></G2NightingaleRoseBase>
+        </el-card>
+      </GridItem>
+      <!-- 卡片 -->
+      <GridItem v-bind="layout.layout[6]" @resized="handleResized(chart[6].refName)">
+        <el-card class="header-in">
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(6)" title="G2RadarBase"></ChartCardHeader>
+          <G2RadarBase :ref="chart[6].refName" v-bind="chart[6]"></G2RadarBase>
+        </el-card>
+      </GridItem>
+      <!-- 卡片 -->
+      <GridItem v-bind="layout.layout[7]" @resized="handleResized(chart[7].refName)">
+        <el-card class="header-in">
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(7)" title="G2AreaBase"></ChartCardHeader>
+          <G2AreaBase :ref="chart[7].refName" v-bind="chart[7]"></G2AreaBase>
+        </el-card>
+      </GridItem>
+    </GridLayout>
+  </Container>
+</template>
+
+<script>
+import ChartCardHeader from './components/ChartCardHeader'
+export default {
+  components: {
+    ChartCardHeader
+  },
+  data () {
+    return {
+      chart: [
+        {
+          api: {url: '/api/chart/G2Line', data: {type: 'base'}},
+          refName: 'G2LineBase',
+          data: []
+        },
+        {
+          api: {url: '/api/chart/G2Line', data: {type: 'step'}},
+          refName: 'G2LineStep',
+          data: []
+        },
+        {
+          api: {url: '/api/chart/G2Column', data: {type: 'base'}},
+          refName: 'G2ColumnBase',
+          data: []
+        },
+        {
+          api: {url: '/api/chart/G2Bar', data: {type: 'base'}},
+          refName: 'G2BarBase',
+          data: []
+        },
+        {
+          api: {url: '/api/chart/G2Pie', data: {type: 'base'}},
+          refName: 'G2PieBase',
+          data: []
+        },
+        {
+          api: {url: '/api/chart/G2NightingaleRose', data: {type: 'base'}},
+          refName: 'G2NightingaleRoseBase',
+          data: []
+        },
+        {
+          api: {url: '/api/chart/G2Radar', data: {type: 'base'}},
+          refName: 'G2RadarBase',
+          data: []
+        },
+        {
+          api: {url: '/api/chart/G2Area', data: {type: 'base'}},
+          refName: 'G2AreaBase',
+          data: []
+        }
+      ],
+      layout: {
+        // 调整布局时 复制 layoutUpdatedHandler() 输出的日志到这里
+        layout: [
+          {'x': 0, 'y': 0, 'w': 4, 'h': 7, 'i': '0'},
+          {'x': 4, 'y': 0, 'w': 4, 'h': 7, 'i': '1'},
+          {'x': 8, 'y': 0, 'w': 4, 'h': 7, 'i': '2'},
+          {'x': 0, 'y': 7, 'w': 4, 'h': 7, 'i': '3'},
+          {'x': 4, 'y': 7, 'w': 4, 'h': 7, 'i': '4'},
+          {'x': 8, 'y': 7, 'w': 4, 'h': 7, 'i': '5'},
+          {'x': 0, 'y': 14, 'w': 4, 'h': 7, 'i': '6'},
+          {'x': 4, 'y': 14, 'w': 4, 'h': 7, 'i': '7'}
+        ],
+        colNum: 12,
+        rowHeight: 30,
+        isDraggable: true,
+        isResizable: true,
+        isMirrored: false,
+        verticalCompact: true,
+        margin: [10, 10],
+        useCssTransforms: true
+      }
+    }
+  },
+  mounted () {
+    // 请求图表数据
+    this.syncData()
+  },
+  methods: {
+    // 请求图表数据
+    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
+          })
+        }))
+    },
+    // 布局组件发生变化
+    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()
+    },
+    // 改变尺寸完成
+    handleResized (name) {
+      this.$nextTick(() => {
+        this.$refs[name].resize()
+      })
+    },
+    // 用户触发了卡片右上角的刷新按钮
+    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>
--- a/src/pages/demo/chart/_index/style.scss
+++ b/src/pages/demo/chart/_index/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;
+      }
+    }
+  }
+}
--- a/src/pages/demo/chart/index/index.vue
+++ b/src/pages/demo/chart/index/index.vue
@@ -1,63 +1,70 @@
 <template>
  <Container type="ghost" :responsive="true" class="demo-chart-index">
-    <GridLayout v-bind="layout" @layout-updated="layoutUpdatedHandler">
+    <el-row :gutter="20">
+      <el-col class="col" :span="8">
+        <el-card class="header-in"></el-card>
+      </el-col>
+      <el-col :span="8"></el-col>
+      <el-col :span="8"></el-col>
+    </el-row>
+    <!-- <GridLayout v-bind="layout" @layout-updated="layoutUpdatedHandler"> -->
      <!-- 卡片 -->
-      <GridItem v-bind="layout.layout[0]" @resized="handleResized(chart[0].refName)">
+      <!-- <GridItem v-bind="layout.layout[0]" @resized="handleResized(chart[0].refName)">
        <el-card class="header-in">
          <ChartCardHeader slot="header" @refresh="handleRefreshData(0)" title="G2LineBase"></ChartCardHeader>
          <G2LineBase :ref="chart[0].refName" v-bind="chart[0]"></G2LineBase>
        </el-card>
-      </GridItem>
+      </GridItem> -->
      <!-- 卡片 -->
-      <GridItem v-bind="layout.layout[1]" @resized="handleResized(chart[1].refName)">
+      <!-- <GridItem v-bind="layout.layout[1]" @resized="handleResized(chart[1].refName)">
        <el-card class="header-in">
          <ChartCardHeader slot="header" @refresh="handleRefreshData(1)" title="G2LineStep"></ChartCardHeader>
          <G2LineStep :ref="chart[1].refName" v-bind="chart[1]"></G2LineStep>
        </el-card>
-      </GridItem>
+      </GridItem> -->
      <!-- 卡片 -->
-      <GridItem v-bind="layout.layout[2]" @resized="handleResized(chart[2].refName)">
+      <!-- <GridItem v-bind="layout.layout[2]" @resized="handleResized(chart[2].refName)">
        <el-card class="header-in">
          <ChartCardHeader slot="header" @refresh="handleRefreshData(2)" title="G2ColumnBase"></ChartCardHeader>
          <G2ColumnBase :ref="chart[2].refName" v-bind="chart[2]"></G2ColumnBase>
        </el-card>
-      </GridItem>
+      </GridItem> -->
      <!-- 卡片 -->
-      <GridItem v-bind="layout.layout[3]" @resized="handleResized(chart[3].refName)">
+      <!-- <GridItem v-bind="layout.layout[3]" @resized="handleResized(chart[3].refName)">
        <el-card class="header-in">
          <ChartCardHeader slot="header" @refresh="handleRefreshData(3)" title="G2BarBase"></ChartCardHeader>
          <G2BarBase :ref="chart[3].refName" v-bind="chart[3]"></G2BarBase>
        </el-card>
-      </GridItem>
+      </GridItem> -->
      <!-- 卡片 -->
-      <GridItem v-bind="layout.layout[4]" @resized="handleResized(chart[4].refName)">
+      <!-- <GridItem v-bind="layout.layout[4]" @resized="handleResized(chart[4].refName)">
        <el-card class="header-in">
          <ChartCardHeader slot="header" @refresh="handleRefreshData(4)" title="G2PieBase"></ChartCardHeader>
          <G2PieBase :ref="chart[4].refName" v-bind="chart[4]"></G2PieBase>
        </el-card>
-      </GridItem>
+      </GridItem> -->
      <!-- 卡片 -->
-      <GridItem v-bind="layout.layout[5]" @resized="handleResized(chart[5].refName)">
+      <!-- <GridItem v-bind="layout.layout[5]" @resized="handleResized(chart[5].refName)">
        <el-card class="header-in">
          <ChartCardHeader slot="header" @refresh="handleRefreshData(5)" title="G2NightingaleRoseBase"></ChartCardHeader>
          <G2NightingaleRoseBase :ref="chart[5].refName" v-bind="chart[5]"></G2NightingaleRoseBase>
        </el-card>
-      </GridItem>
+      </GridItem> -->
      <!-- 卡片 -->
-      <GridItem v-bind="layout.layout[6]" @resized="handleResized(chart[6].refName)">
+      <!-- <GridItem v-bind="layout.layout[6]" @resized="handleResized(chart[6].refName)">
        <el-card class="header-in">
          <ChartCardHeader slot="header" @refresh="handleRefreshData(6)" title="G2RadarBase"></ChartCardHeader>
          <G2RadarBase :ref="chart[6].refName" v-bind="chart[6]"></G2RadarBase>
        </el-card>
-      </GridItem>
+      </GridItem> -->
      <!-- 卡片 -->
-      <GridItem v-bind="layout.layout[7]" @resized="handleResized(chart[7].refName)">
+      <!-- <GridItem v-bind="layout.layout[7]" @resized="handleResized(chart[7].refName)">
        <el-card class="header-in">
          <ChartCardHeader slot="header" @refresh="handleRefreshData(7)" title="G2AreaBase"></ChartCardHeader>
          <G2AreaBase :ref="chart[7].refName" v-bind="chart[7]"></G2AreaBase>
        </el-card>
-      </GridItem>
-    </GridLayout>
+      </GridItem> -->
+    <!-- </GridLayout> -->
  </Container>
 </template>

@@ -110,28 +117,7 @@ export default {
          refName: 'G2AreaBase',
          data: []
        }
-      ],
-      layout: {
-        // 调整布局时 复制 layoutUpdatedHandler() 输出的日志到这里
-        layout: [
-          {'x': 0, 'y': 0, 'w': 4, 'h': 7, 'i': '0'},
-          {'x': 4, 'y': 0, 'w': 4, 'h': 7, 'i': '1'},
-          {'x': 8, 'y': 0, 'w': 4, 'h': 7, 'i': '2'},
-          {'x': 0, 'y': 7, 'w': 4, 'h': 7, 'i': '3'},
-          {'x': 4, 'y': 7, 'w': 4, 'h': 7, 'i': '4'},
-          {'x': 8, 'y': 7, 'w': 4, 'h': 7, 'i': '5'},
-          {'x': 0, 'y': 14, 'w': 4, 'h': 7, 'i': '6'},
-          {'x': 4, 'y': 14, 'w': 4, 'h': 7, 'i': '7'}
-        ],
-        colNum: 12,
-        rowHeight: 30,
-        isDraggable: true,
-        isResizable: true,
-        isMirrored: false,
-        verticalCompact: true,
-        margin: [10, 10],
-        useCssTransforms: true
-      }
+      ]
    }
  },
  mounted () {
@@ -148,20 +134,6 @@ export default {
          })
        }))
    },
-    // 布局组件发生变化
-    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()
-    },
-    // 改变尺寸完成
-    handleResized (name) {
-      this.$nextTick(() => {
-        this.$refs[name].resize()
-      })
-    },
    // 用户触发了卡片右上角的刷新按钮
    handleRefreshData (index) {
      const api = this.chart[index].api
--- a/src/pages/demo/chart/index/style.scss
+++ b/src/pages/demo/chart/index/style.scss
@@ -1,7 +1,7 @@
@import '~@/assets/style/public.scss';
 .demo-chart-index {
-  .vue-grid-layout {
-    margin: -10px;
+  .col {
+    height: 300px;
    .el-card {
      @extend %unable-select;
      height: 100%;
@@ -16,13 +16,5 @@
        }
      }
    }
-    .vue-resizable-handle {
-      bottom: 6px;
-      right: 6px;
-      opacity: .3;
-      &:hover{
-        opacity: 1;
-      }
-    }
  }
 }