szgb-book-web/src/views/report/visit/ageRpt.vue

<template>
  <div class="container">
    <!-- 查询配置 -->
    <div style="padding: 0px 20px">
      <div ref="lxHeader">
        <LxHeader icon="md-apps" text="年龄分析报表" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
          <div slot="content"></div>
          <slot>
            <div>
               <el-date-picker
                     v-model="daterange"
                     type="daterange"
                     value-format="yyyy-MM-dd"
                     @change='dateChange'
                     range-separator="至"
                     start-placeholder="开始日期"
                     end-placeholder="结束日期">
                   </el-date-picker>

              <Button type="primary" @click="load" style="margin-left: 10px">查询</Button>
              <Button type="primary" @click="viewPart" style="margin-left: 10px">{{btnText}}</Button>
              <Button type="primary" style="margin-left: 10px" @click="handleGo">导出</Button>

            </div>
          </slot>
        </LxHeader>
      </div>
      <div class="table-tree" v-if="showData">
        <el-table :data="tableData" :height="tableHeight" class="v-table" style="width: 100%">
          <el-table-column type="index" align="center">
          </el-table-column>
          <el-table-column prop="name" label="年龄段" sortable width="180">
          </el-table-column>
          <el-table-column prop="plan_total" label="预约人数" sortable>
          </el-table-column>
          <el-table-column prop="use_total" label="入场人数" sortable>
          </el-table-column>
          <el-table-column prop="cancel_total" label="取消人数" sortable>
          </el-table-column>
          <el-table-column prop="expire_total" label="过期人数" sortable>
          </el-table-column>
          <el-table-column prop="per" label="核销比" sortable>
          </el-table-column>
        </el-table>
      </div>
      <div v-else style="background-color: #fff;">
        <pie-chart :chartData="rptData" :height="chartHeight"/>
      </div>
    </div>

  </div>
</template>
<script>
  import LxHeader from "@/components/LxHeader/index.vue";
  import PieChart from '../components/PieChart'
  import { ElMapExportTable } from "table-excel";
  import {
    ageRpt
  } from "@/api/report/visit.js";
  export default {
    components: {
      LxHeader,
      PieChart
    },
    created() {
      this.initLoad()
      this.load()
    },
    mounted() {},
    data() {
      return {
        showData: false,
        daterange:[],
        select: {},
        tableData: [],
        tableHeight: 0,
        btnText:"数据展示",
        chartHeight:"",
        rptData: {
          yArr: [],
          radiusArr: ['30%', '50%'],
        }
      }
    },
    methods: {
      /** 导出按钮操作 */
      handleGo(){
        var data = this.tableData; // 这里面是数据列表
        const column = [
          { title: "年龄段", dataIndex: "name" }, // dataIndex为数据列表中的数据字段
          { title: "预约人数", dataIndex: "plan_total" },
          { title: "入场人数", dataIndex: "use_total" },
          { title: "核销比", dataIndex: "per" },
        ];
        const instance = new ElMapExportTable(
          { column, data },
          { progress: progress => console.log(progress) }// 进度条回调
        );
        instance.download("年龄分析报表"); // 导出的文件名
      },
      viewPart() {
        this.showData = !this.showData;
        this.btnText = this.showData ? "数据展示" : "图表展示"
      },
      initLoad() {
        var that = this;
        var clientHeight = document.documentElement.clientHeight
        var lxHeader_height = 96.5; //查询 头部
        var paginationHeight = 37; //分页的高度
        var topHeight = 50; //页面 头部
        let tableHeight = clientHeight - lxHeader_height - topHeight - paginationHeight - 20;
        that.tableHeight = tableHeight;
        that.chartHeight = that.tableHeight + "px"
      },
      dateChange(e){
        if(e){
          this.select.start_date = e[0]
          this.select.end_date = e[1]
        }else{
          this.select.start_date = ''
          this.select.end_date = ''
        }
      },
      load() {
        // this.showData = true;
        var arr = [];
        ageRpt({
          start_date:this.select.start_date,
          end_date:this.select.end_date
        }).then((res) => {
          for (var m of res) {
            m.per = ((m.use_total / (m.plan_total == 0 ? 1 : m.plan_total)) * 100).toFixed(2) + "%"

            arr.push({
              name: m.name,
              value: m.plan_total
            })
          }
          this.rptData.yArr = arr;
          this.tableData = res;
        }).catch((res) => {})
      }

    }
  };
</script>