tmr-admin/.svn/pristine/e1/e1d147c4ff5f1bc7f2bb48b80ca2119338ce7f32.svn-base

<template>
  <div class="pane-container" style="position: relactive">

    <!-- 单独画出来的转换表格 -->
    <el-button v-if="isChart" type="text" style="z-index: 1;position: absolute;top:10px;right: 100px" @click="handleTable()">切换表格</el-button>
    <div v-if="isTable" class="table" style="width: 100%;height:100%;z-index: 1;position: absolute;top:0px;right: 0px;">
      <el-button type="text" style="float: right;margin-right: 100px;" @click="handleChart()">切换图表</el-button>

      <el-table style="width: 100%" border="true" fit highlight-current-row :data="data">
        <template v-for="(item,index) in schema">
          <el-table-column :key="index" :prop="item.Column" :label="item.Comment" />
        </template>
      </el-table>

    </div>

    <component :is="currentType.componentName" :data="chartData" :schema="schema" :chart-style="chartStyle" class="visualize-window" />
    <div v-if="isEditMode" class="chart-style-panel">
      <el-form label-position="top" size="mini">
        <el-form-item :label="$t('chart.chartType')+':'">
          <div class="chart-type-list">
            <span v-for="item in chartTypeList" :key="item.type" :class="{activedIcon :item.type===chartType, disabledIcon: !isUsable(item)}" @click="switchChartType(item)">
              <el-tooltip :content="item.name +': '+item.matchRule.desc" placement="top">
                <svg-icon class="icon" :icon-class="isUsable(item)? item.icon : (item.icon + '_disabled')" />
              </el-tooltip>
            </span>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import lineChart from '@/widgets/lineChart'
import DataTable from '@/widgets/DataTable'
import BarChart from '@/widgets/BarChart'
import StackBarChart from '@/widgets/StackBarChart'
import HorizontalBar from '@/widgets/horizontalBar'
import PieChart from '@/widgets/PieChart'

import BarLineChart from '@/widgets/BarLineChart'
import LineBarChart from '@/widgets/LineBarChart'

import chartTypeList from '@/utils/chartTypeList'
import store from '../store'

export default {
  inject: ['reload'],
  components: { lineChart, DataTable, BarChart, StackBarChart, PieChart, HorizontalBar, BarLineChart, LineBarChart },
  props: {
    data: {
      type: Array,
      required: true
    },
    schema: {
      type: Array,
      required: true
    },
    chartStyle: {
      require: false,
      type: Object
    },
    chartType: {
      type: String,
      default: 'table'
    },
    isEditMode: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      chartTypeList,

      isTable: false,
      isChart: true

    }
  },
  computed: {
    allSelected() {
      return store.state.caculCols.concat(store.state.dimensions)
    },
    chartData() {
      console.log('this.schema============', this.schema)

      return this.currentType.dataTransfer ? this.currentType.dataTransfer(this.data, this.schema) : this.data
    },
    currentType() {
      return chartTypeList.find(item => item.type === this.chartType)
    }
  },
  watch: {
    allSelected: {
      deep: true,
      immediate: true,
      handler(newVal) {
        console.log('!!!!!!!!!!!!!!!!!!!!!!!!!!!!', this.chartType)

        if (!this.currentType.matchRule.isUsable(store.state.dimensions, store.state.caculCols)) {
          this.$emit('update:chartType', 'table')
        }
        // this.reload()
      }
    }
  },

  methods: {
    // 切换表格
    handleTable() {
      console.log('切换表格')

      console.log('chartTypeList', this.chartTypeList)
      console.log('this.schema============', this.schema)
      console.log('this.data============', this.data)

      this.isTable = true
      this.isChart = false
    },
    handleChart() {
      console.log('切换图表')
      this.isChart = true
      this.isTable = false
    },

    isUsable(chart) {
      return chart.matchRule.isUsable(store.state.dimensions, store.state.caculCols)
    },
    switchChartType(chart) {
      if (!chart.matchRule.isUsable(store.state.dimensions, store.state.caculCols)) {
        return
      }
      this.$emit('update:chartType', chart.type)
    }
  }
}
</script>
 <style lang="scss" scoped>
.pane-container {
  display: flex;
  height: 100%;
  .visualize-window {
    width: 100%;
  }
  .chart-style-panel {
    width: 200px;
    flex-shrink: 0;
    padding: 10px;
    .chart-type-list {
      width: 100%;
      display: grid;
      justify-items: center;
      grid-template-columns: repeat(5, 1fr);
      grid-auto-rows: 1fr;
      grid-gap: 10px;
      span {
        line-height: initial;
        height: 100%;
        font-size: 22px;
        cursor: pointer;
        text-align: center;
        width: 100%;
        position: relative;
        .icon {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
        }
      }
      span::before {
        content: "";
        width: 100%;
        padding-bottom: 100%;
        display: block;
      }
      .disabledIcon {
        cursor: not-allowed;
      }
      .activedIcon {
        background: #c9c9c9;
      }
    }
  }
}
</style>