dzhh-frontend/.svn/pristine/90/90b6605bd476e01cd5176b639fdcafbf211fe2d6.svn-base

<template>
  <a-card size="small" :title="group.groupTxt">
    <a-dropdown slot="extra">
      <a-menu slot="overlay" >
        <template v-for="(chart,index) in group.charts">
          <a-menu-item @click="handleMenuClick(chart.head.code)" :key="index">{{chart.head.name}}</a-menu-item>
        </template>
      </a-menu>
      <a-button type="primary" size="small" class="ant-btn-background-ghost">详情<a-icon type="down"/></a-button>
    </a-dropdown>
    <bar-and-line :barFields="barFields" :lineFields="lineFields" :dataSource="dataSouce" :aliases="aliases"></bar-and-line>
  </a-card>
</template>
<script>
import BarAndLine from '@/components/chart/BarAndLine'
export default {
  name: 'GroupTemplateCombination',
  mixins: [],
  components: {
    BarAndLine
  },
  props: {
    group: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      barType: '',
      barFields: [],
      lineFields: [],
      dataSouce: [],
      aliases: []// [{field:'name',alias:'姓名'}, {field:'sex',alias:'性别'}]
    }
  },
  mounted() {
    this.getDataSource()
  },
  methods: {
    getDataSource() {
      this.dataSouce = []
      this.group.charts.forEach((chart, i) => {
        const groupFields = chart.head.groupField.split(',')
        if (chart.head.graphType === 'line') {
          groupFields.forEach(groupField => {
            this.lineFields.push(groupField + 'line' + i)
            this.setAliases(chart.items, groupField, 'line' + i)
          })
          this.setChartData(chart, 'line' + i, this.dataSouce)
        } else if (chart.head.graphType === 'bar') {
          groupFields.forEach(groupField => {
            this.barFields.push(groupField + 'bar' + i)
            this.setAliases(chart.items, groupField, 'bar' + i)
          })
          this.setChartData(chart, 'bar' + i, this.dataSouce)
        }
      })
    },
    // 把多个图表的数据组合到一个数组里 [{step1bar0: 1234,step1line1: 100,stepbar0: 100,stepline1: 1234,type: "星期一"}]
    // key值上拼接line和索引  是为了key值防止重复
    setChartData(chart, type, dataSouce) {
      var datas
      if (chart.head.dataType === 'json' && chart.head.cgrSql) {
        datas = JSON.parse(data.head.cgrSql.replace(/↵/g, ''))
      } else if ((chart.head.dataType === 'sql' || chart.head.dataType === 'bean') && chart.head.aggregate === true) {
        datas = chart.data.aggregate
      } else if ((chart.head.dataType === 'sql' || chart.head.dataType === 'bean') && chart.head.aggregate === false) {
        datas = chart.data.data
      }
      const xaxisField = chart.head.xaxisField
      if (dataSouce.length <= 0) {
        datas.forEach((item, i) => {
          var data = {
            type: item[xaxisField]
          }
          const groupFields = chart.head.groupField.split(',')
          groupFields.forEach(groupField => {
            data[groupField + type] = item[groupField]
          })
          dataSouce.push(data)
        })
      } else {
        datas.forEach((item, i) => {
          if (i > dataSouce.length) {
            const obj = {
              type: item[xaxisField]
            }
            dataSouce.push(obj)
          } else {
            const groupFields = chart.head.groupField.split(',')
            groupFields.forEach(groupField => {
              dataSouce[i][groupField + type] = item[groupField]
            })
          }
        })
      }
    },
    setAliases(items, groupField, key) {
      items.forEach(data => {
        if (data.fieldName === groupField) {
          this.aliases.push({
            field: groupField + key,
            alias: data.fieldTxt
          })
        }
      })
    },
    handleLineClick(msg) {
      if (this.head.extendJs) {
        this.chartClick('line', msg)
      }
    },
    chartClick(type, msg) {
      var onClick = {}
      eval(this.head.extendJs)
      if (onClick && onClick[type]) {
        onClick[type].call(this, msg)
      }
    },
    handleMenuClick(code) {
      this.$router.push({ path: '/online/cggraphreport/chart/' + code })
    }
  }
}
</script>
<style scoped>

</style>