szgb-book-web/src/views/report/visit/periodRpt.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="searchFields.date"
                   value-format="yyyy-MM-dd"
                   type="date"
                   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>
            </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="daterange" 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="man_total" label="性别男" sortable>
          </el-table-column>
          <el-table-column prop="woman_total" label="性别女" sortable>
          </el-table-column>
          <el-table-column prop="per" label="核销比" sortable>
          </el-table-column>
        </el-table>
      </div>
      <div v-else>
        <line-chart :chartData="periodData" :height="chartHeight"/>
      </div>
    </div>

  </div>
</template>
<script>
  import LxHeader from "@/components/LxHeader/index.vue";
  import LineChart from '../components/LineChart'
  import {
    detailRpt
  } from "@/api/report/visit.js";
  export default {
    components: {
      LxHeader,
      LineChart
    },
    created() {
      this.initLoad()
      this.load()
    },
    mounted() {},
    data() {
      return {
        showData: false,
        searchFields: {
          date:"",
        },
        tableData: [],
        tableHeight: 0,
        chartHeight:"",
        btnText:"数据展示",
        periodData: {
          xArr:[],
          series:{},
          legendArr:["预约人数","入场人数","男性人数","女性人数"]
        }
      }
    },
    methods: {
      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 = tableHeight+"px";
        this.searchFields.date = this.getToday();

      },
      load() {
        // this.showData = true;
        var planarr=[];
        var xArr=[];
        var usearr=[];
        var manarr = [];
        var womanarr = [];

        detailRpt({
          date:this.searchFields.date
        }).then((res) => {
          for (var m of res) {
            m.per = (m.use_total / (m.plan_total == 0 ? 1 : m.plan_total)) * 100 + "%"
            m.daterange =  m.start_time+"-"+m.end_time;
            xArr.push(m.daterange);
            planarr.push(
              m.plan_total
            )
            usearr.push(
              m.use_total
            )
            manarr.push(
              m.man_total
            )
            womanarr.push(
              m.woman_total
            )

          }
          this.periodData.xArr = xArr;
          this.periodData.series=[
            {
              name:"预约人数",
              type: 'bar',
              data:planarr
            },
            {
              name:"入场人数",
              type: 'bar',
              data:usearr
            },
            {
              name:"男性人数",
              type: 'bar',
              data:manarr
            },
            {
              name:"女性人数",
              type: 'bar',
              data:womanarr
            },
          ]

          this.tableData = res

        }).catch((res) => {})
      },
      getToday(){
        let date =new Date()
        var y = date.getFullYear();
        var m = date.getMonth()+1;
              m = m <10?'0'+ m : m;
        var d = date.getDate();
              d = d <10?'0'+ d : d;
        return y +'-'+ m +'-'+ d;
      },

    }
  };
</script>