dzhh-frontend/.svn/pristine/a0/a0c4f440da2f44cace02ebbb811e691dc6430be7.svn-base

<template>
  <div>
    <a-spin size="large" :spinning="spinning">
      <group-search :items="items" @chartLoad="init" v-if="head.dataType === 'sql' && !propsChartData"></group-search>
      <!-- <a-card style="margin-top:10px;text-align: center;" :title="false"  v-if="chartData.length<=0"> -->
        <!-- <h1 >没有查询到任何数据</h1> -->
        <div v-if="chartData.length<=0" class="empty-warp">
          <a-empty  />
        </div>
      <!-- </a-card> -->
      <div v-else>
        <a-card size="small" v-if="!isOnlyTable()" :title="hiddenTitle?'':head.name" :bordered="false">
          <slot v-if="head.graphType !== 'table'" name="extra_" slot="extra"></slot>
          <tab-graphreport-auto-chart
            v-if="head.displayTemplate === 'tab'"
            :chartData="chartData"
            :head="head"
            :graphTypeDictOptions = "graphTypeDictOptions"
            :aliases="aliases"
          >
          </tab-graphreport-auto-chart>
          <row-graphreport-auto-chart
            v-else-if="head.displayTemplate === 'single' || head.displayTemplate === 'double'"
            :chartData="chartData"
            :head="head"
            :graphTypeDictOptions = "graphTypeDictOptions"
            :col="getCol()"
            :aliases="aliases"
          >
          </row-graphreport-auto-chart>
        </a-card>
        <a-card size="small" :bordered="false" style="margin-top:10px;" :title="hiddenTitle?'':head.name + '数据明细'" v-if="getChartType('table') || getChartType('treeTable')" >
          <graphreport-auto-table
            v-if="getChartType('table')"
            :items="items"
            :cggraphreportData="cggraphreportData"
            :chartData="chartData">
          </graphreport-auto-table>
          <graphreport-auto-tree-table
            v-if="getChartType('treeTable')"
            :items="items"
            :cggraphreportData="cggraphreportData"
            :chartData="chartData">
          </graphreport-auto-tree-table>
        </a-card>
      </div>
    </a-spin>
  </div>
</template>
<script>
import TabGraphreportAutoChart from '../components/TabGraphreportAutoChart'
import RowGraphreportAutoChart from '../components/RowGraphreportAutoChart'
import GraphreportAutoTable from '../components/GraphreportAutoTable'
import GraphreportAutoTreeTable from '../components/GraphreportAutoTreeTable'
import GroupSearch from '../components/GroupSearch'
import { OnlAutoChartMixins } from '../mixins/OnlAutoChartMixins'
export default {
  name: 'OnlGraphreportAutoChart',
  mixins: [OnlAutoChartMixins],
  components: {
    TabGraphreportAutoChart,
    RowGraphreportAutoChart,
    GraphreportAutoTable,
    GraphreportAutoTreeTable,
    GroupSearch
  },
  watch: {
    $route() {
      // this.init()
    }
  },
  props: ['propsChartData', 'code', 'hiddenTitle']// code为首页看板展示需要
}
</script>
<style scoped>
.ant-table td { white-space: nowrap; }
.empty-warp{
  height:100%;
  width:100%;
  padding:10px;
  background-color:white;
}
</style>