hitch-sb-antd/src/views/preparation/report/PreparationReport.vue

<template>
  <a-card :loading="loading" title="筹建报表">

    <div class="salesCard">
      <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
        <div class="extra-wrapper" slot="tabBarExtraContent">
          <a-date-picker
            style="margin-left: 8px"
            :format="BaseTool.Date.PICKER_NORM_DATE_PATTERN"
            v-model="queryParam.startMonth"
            placeholder="开始时间"
          />
          <a-date-picker
            style="margin-left: 8px"
            :format="BaseTool.Date.PICKER_NORM_DATE_PATTERN"
            v-model="queryParam.endMonth"
            placeholder="结束时间"
          />
          <a-button style="margin-left: 8px" type="default" @click="getData()">查询</a-button>
          <!-- <a-button style="margin-left: 8px" type="primary" icon="printer" @click="handlePrint()">打印</a-button>
          <a-button style="margin-left: 8px" type="primary" @click="doExport()">导出</a-button> -->
        </div>
        <a-tab-pane loading="true" tab="图形统计" key="1">
          <a-row>
            <a-col :span="16">
              <div style="padding: 10px">
                <chart-view :chartOption="chartOption1" width="100%" height="600px" />
              </div>
            </a-col>
            <a-col :span="8">
              <div style="padding: 10px">
                <chart-view :chartOption="chartOption2" width="100%" height="600px" />
              </div>
            </a-col>
          </a-row>
        </a-tab-pane>
        <a-tab-pane loading="true" tab="表格统计" key="2">
          <a-row>
            <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
              <div style="padding: 10px">
                <a-table
                  bordered
                  :data-source="chartsData1"
                  :columns="columns1"
                  tableLayout="auto"
                  :scroll="{x: 1000, y: BaseTool.Constant.scrollY }"
                  rowKey="month">
                  <span slot="action" slot-scope="record">

                  </span>
                </a-table>
                <a-table
                  bordered
                  :data-source="chartsData2"
                  :columns="columns2"
                  tableLayout="auto"
                  :scroll="{x: 1000, y: BaseTool.Constant.scrollY }"
                  rowKey="month">
                  <span slot="action" slot-scope="record">

                  </span>
                </a-table>
              </div>
            </a-col>
          </a-row>
        </a-tab-pane>
      </a-tabs>
    </div>
  </a-card>
</template>

<script>
import { getPreparationReportGroupByStatus, getAllPreparationReport } from '@/api/preparation/preparation'

export default {
  data () {
    return {
      loading: false,
      queryParam: {
        startMonth: this.BaseTool.Date.formatter(new Date(), this.BaseTool.Date.PICKER_NORM_YEAR) + '-01-01',
        endMonth: this.BaseTool.Date.formatter(new Date(), this.BaseTool.Date.PICKER_NORM_DATE_PATTERN)
      },
      chartsData1: [],
      chartsData2: [],
      columns1: [
        {
          title: '时间',
          width: 180,
          dataIndex: 'month',
          customRender: (text, record, index) => {
            return record.year + '-' + text
          }
        },
        {
          title: '个数',
          width: 120,
          dataIndex: 'num'
        }
      ],
      columns2: [
        {
          title: '状态',
          width: 180,
          dataIndex: 'statusName'
        },
        {
          title: '个数',
          width: 120,
          dataIndex: 'num'
        }
      ]
    }
  },
  computed: {
    chartOption1 () {
      return {
        // tooltip: {
        //   trigger: 'axis',
        //   axisPointer: {
        //     type: 'shadow'
        //   }
        // },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        xAxis: {
          type: 'category',
          data: this.chartsData1.map(item => (item.year + '-' + item.month))
        },
        series: [
          {
            type: 'bar',
            data: this.chartsData1.map(item => item.num),
            itemStyle: {
              normal: {
                label: {
                  show: true, // 开启显示
                  position: 'top', // 在上方显示
                  textStyle: { // 数值样式
                    color: 'black',
                    fontSize: 16
                  }
                }
              }
            }
          }
        ]
      }
    },
    chartOption2 () {
      return {
        tooltip: {

        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },

        series: [
          {
            type: 'pie',
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: this.chartsData2.map(item => {
              return {
                value: item.num,
                name: item.statusName
              }
            })
          }
        ]
      }
    }
  },
  created () {
    this.getData()
  },
  methods: {
    getData () {
      if (this.queryParam.startMonth) {
        this.queryParam.startMonth = this.BaseTool.Date.formatter(this.queryParam.startMonth, this.BaseTool.Date.PICKER_NORM_DATE_PATTERN)
      }
      if (this.queryParam.endMonth) {
        this.queryParam.endMonth = this.BaseTool.Date.formatter(this.queryParam.endMonth, this.BaseTool.Date.PICKER_NORM_DATE_PATTERN)
      }
      Promise.all([getAllPreparationReport(this.queryParam), getPreparationReportGroupByStatus(this.queryParam)]).then(res => {
        console.log(res)
        this.chartsData1 = res[0].data
        this.chartsData2 = res[1].data
      })
    }

  }
}
</script>

<style>

</style>