Tmr-Admin-BeefCattle/.svn/pristine/55/55701efeb721b4aed931113e8ae02ca9cc124f5e.svn-base

<template>
  <div class="pane-container" style="position: relactive">
    <div>{{ messagechart }}</div>
    <!-- 单独画出来的转换表格 -->
    <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%;background: #fff;z-index: 1;position: absolute;top:0px;right: 0px;">
      <el-button type="text" style="float: right;margin-right: 100px;line-height: 30px;" @click="handleChart()">切换图表</el-button>
      <el-button type="text" style="z-index: 1;position: absolute;top:7px;right: 200px" @click="handleExport()">导出</el-button>

      <el-table style="width: 100%" height="310" 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 { json2excel } from '@/utils/index.js'

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
    },

    messagechart: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      chartTypeList,

      isTable: false,
      isChart: false
    }
  },
  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: {
    messagechart(curVal, oldVal) {
      console.log(curVal, oldVal)
    },
    allSelected: {
      deep: true,
      immediate: true,
      handler(newVal) {
        if (!this.currentType.matchRule.isUsable(store.state.dimensions, store.state.caculCols)) {
          // this.$emit('update:chartType', 'table')
        }
        console.log('this.chartType!!!!!!!!!!!!!!!!!!!!!!!!!!!!', this.chartType)
        if (this.chartType === 'table') {
          this.isChart = false
          this.isTable = false
        } else {
          this.isChart = true
          this.isTable = false
        }

        // this.reload()
      }
    }
  },

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

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

      console.log('messagechart', this.messagechart)

      this.isTable = true
      this.isChart = false
    },

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

    handleExport() {
      console.log('this.data', this.data)

      console.log('this.schema', this.schema)
      // 当前的表头
      var arr_sche = this.schema

      var arr_data = this.data
      var head_arr = []
      var field_arr = []
      arr_sche.forEach(function(item) {
        head_arr.push(item.Comment)
        field_arr.push(item.Column)
      })

      // var arr = [
      //   { 'avgdim': 0, 'avgmonthage': 0, 'barid': '3252518126826816512', 'barname': '营养评估测试专用1896', 'bigcowclass': '育肥牛', 'bw': 0, 'cowclass': '新增编辑编辑111', 'cowclassid': '3242684891527644160', 'cowsum': 0, 'dayspre': 0, 'dayw': 0, 'emp': '李四', 'fat': 0, 'fetal': 0, 'id': '3396049090298512384', 'lactose': 0, 'pastureid': '3025176271438480383', 'pro': 0, 'product': 0, 'productdate': '2021-05-07', 'source': '', 'tem': 0 }]
      var excelDatasTabChart1 = [
        {
          tHeader: head_arr,
          filterVal: field_arr,
          tableDatas: arr_data,
          sheetName: '自定义图表'
        }
      ]
      json2excel(excelDatasTabChart1, '自定义图表', true, 'xlsx')
    },

    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>