From 5ac0f8ac2fbdab0b6977665f998431c7c80c21a6 Mon Sep 17 00:00:00 2001
From: lion <120344285@qq.com>
Date: Wed, 8 Jun 2022 15:57:32 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8A=A5=E8=A1=A8=20=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/report/activity.js                    |   9 +
 src/api/report/parking.js                     |   9 +
 src/api/report/visit.js                       |  44 ++++-
 src/views/active/activity.vue                 | 100 ++++++-----
 src/views/dashboard/components/PanelGroup.vue |  44 +++--
 src/views/dashboard/index.vue                 | 129 ++++++++------
 src/views/report/activeRpt.vue                | 128 +++++++++++++-
 src/views/report/components/LineChart.vue     |   3 +-
 src/views/report/parkRpt.vue                  | 126 +++++++++++++-
 src/views/report/visit/ageRpt.vue             | 110 +++++++++++-
 src/views/report/visit/infoRpt.vue            | 129 +++++++++++++-
 src/views/report/visit/monthRpt.vue           | 129 +++++++++++++-
 src/views/report/visit/seasonRpt.vue          | 153 ++++++++++++++++-
 src/views/report/visit/sexRpt.vue             |  18 +-
 src/views/report/visit/timeRpt.vue            | 157 +++++++++++++++++-
 15 files changed, 1119 insertions(+), 169 deletions(-)
 create mode 100644 src/api/report/activity.js
 create mode 100644 src/api/report/parking.js

diff --git a/src/api/report/activity.js b/src/api/report/activity.js
new file mode 100644
index 0000000..2b9679b
--- /dev/null
+++ b/src/api/report/activity.js
@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function activityRpt(params) {
+  return request({
+    url: '/api/admin/chart/activity',
+    method: 'get',
+    params: params
+  })
+}
diff --git a/src/api/report/parking.js b/src/api/report/parking.js
new file mode 100644
index 0000000..e2b56ec
--- /dev/null
+++ b/src/api/report/parking.js
@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function carparkRpt(params) {
+  return request({
+    url: '/api/admin/chart/carpark',
+    method: 'get',
+    params: params
+  })
+}
diff --git a/src/api/report/visit.js b/src/api/report/visit.js
index 22cdae0..b3db355 100644
--- a/src/api/report/visit.js
+++ b/src/api/report/visit.js
@@ -6,4 +6,46 @@ export function sexRpt(params) {
     method: 'get',
     params: params
   })
-}
+}
+
+export function ageRpt(params) {
+  return request({
+    url: '/api/admin/chart/visit_age',
+    method: 'get',
+    params: params
+  })
+}
+
+export function visitdetailRpt(params) {
+  return request({
+    url: '/api/admin/chart/visit_detail',
+    method: 'get',
+    params: params
+  })
+}
+
+export function duringRpt(params) {
+  return request({
+    url: '/api/admin/chart/visit_during',
+    method: 'get',
+    params: params
+  })
+}
+
+export function quarterRpt(params) {
+  return request({
+    url: '/api/admin/chart/visit_quarter',
+    method: 'get',
+    params: params
+  })
+}
+
+export function monthRpt(params) {
+  return request({
+    url: '/api/admin/chart/visit_month',
+    method: 'get',
+    params: params
+  })
+}
+
+
diff --git a/src/views/active/activity.vue b/src/views/active/activity.vue
index 2df5d2b..90428db 100644
--- a/src/views/active/activity.vue
+++ b/src/views/active/activity.vue
@@ -31,14 +31,12 @@
                   style="margin-left: 10px;">下架</Button>
                 <Button v-if="scope.row['status']==0" ghost size="small" type="warning" @click="changeStatus(scope.row)"
                   style="margin-left: 10px;">上架</Button>
-                <Button ghost size="small" @click="toshowQr(scope.row)" type="primary"
-                  style="margin-left: 10px;">核销码</Button>
               </div>
 
-              <div v-else-if="column.type=='dateRange'">
-                {{scope.row["start_time"]+"-"+changeEndTime(scope.row["end_time"])}}
+              <div v-else-if="column.type=='dateRange'">
+                {{dateRange}}
+                <!-- {{scope.row["start_time"]+"-"+changeEndTime(scope.row["end_time"])}} -->
               </div>
-
               <div v-else-if="column.type=='status'">
                 <el-tag v-if="scope.row['status']==1" type="" effect="dark">
                   上架中
@@ -116,8 +114,10 @@
           <el-col :span="20" :offset="2">
 
             <div id="containers" style="width:100%;height:300px;margin-bottom:20px"></div>
-          </el-col>
-          <el-col :span="8">
+          </el-col>
+
+
+         <!-- <el-col :span="8">
             <el-form-item label="开始时间" prop="start_time">
               <el-date-picker style="width:100%" v-model="form.start_time" type="datetime"
                 value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择活动开始时间" @change="isShowTime">
@@ -135,14 +135,7 @@
                   }">
               </el-time-select>
             </el-form-item>
-          </el-col>
-          <el-col :span="8">
-            <el-form-item label="预定截止" prop="end_plan">
-              <el-date-picker style="width:100%" v-model="form.end_plan" type="datetime"
-                value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择预定截止时间">
-              </el-date-picker>
-            </el-form-item>
-          </el-col>
+          </el-col> -->
           <el-col :span="8">
             <el-form-item label="总人数" prop="total">
               <el-input v-model="form.total" placeholder="请填写总人数(0为不限制)" autocomplete="off"></el-input>
@@ -161,6 +154,25 @@
                 </el-option>
               </el-select>
             </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="预定截止" prop="end_plan">
+              <el-date-picker style="width:100%" v-model="form.end_plan" type="datetime"
+                value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择预定截止时间">
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="活动时间" prop="dateRange">
+              <el-date-picker
+                style="width:100%"
+                v-model="dateRange"
+                type="datetimerange"
+                range-separator="至"
+                start-placeholder="活动开始日期"
+                end-placeholder="活动结束日期">
+              </el-date-picker>
+            </el-form-item>
           </el-col>
         </el-row>
         <el-form-item label="海报图" prop="cover">
@@ -216,18 +228,11 @@
     <el-dialog :visible.sync="dialogVisible">
       <img width="100%" :src="dialogImageUrl" alt="">
     </el-dialog>
-    <el-dialog title="活动核销码" :visible.sync="isShowQr">
-
-      <div style="display: flex;justify-content: center;align-items: center;">
-        <vue-qr :text="url" :size="200"></vue-qr>
-      </div>
-    </el-dialog>
   </div>
 </template>
 <script>
   import LxHeader from "@/components/LxHeader/index.vue";
   import Tinymce from '@/components/Tinymce'
-  import VueQr from 'vue-qr'
   import {
     getToken
   } from '@/utils/auth'
@@ -243,12 +248,9 @@
     components: {
       LxHeader,
       Tinymce,
-      VueQr
     },
     data() {
       return {
-        isShowQr: false,
-        url: "",
         dialogFormVisible: false,
         formLabelWidth: "120px",
         selectedValue: null,
@@ -327,7 +329,8 @@
           longitude: "",
           latitude: "",
           banners_list: []
-        },
+        },
+        dateRange:"",
         showTime: "",
         coverlist: [],
         bannersList: [],
@@ -366,7 +369,7 @@
           {
             field: "操作",
             title: "操作",
-            width: 380,
+            width: 240,
             type: "opt",
           }
         ],
@@ -432,15 +435,11 @@
       }
     },
     methods: {
-      toshowQr(row) {
-        this.url = "https://" + location.host + "/admin/#/check?code=" + row.code
-        this.isShowQr = true;
-      },
       initMap() {
-        //如果地图存在，就销毁，下面会重新创建一个
-        if (this.map != null) {
-          this.map.destroy()
-        }
+        //如果地图存在，就销毁，下面会重新创建一个
+          if (this.map!=null) {
+            this.map.destroy()
+          }
         this.$nextTick(() => {
           let that = this;
           console.log(window); // 通过window获取
@@ -507,9 +506,11 @@
         get(obj.id).then(res => {
           that.coverlist = [];
           let result = Object.assign(that.form, res);
-          that.form = result;
-          that.showTime = result.start_time.substring(11, result.start_time.length);
-          that.form.end_time = result.end_time.substring(11, result.end_time.length);
+          that.form = result;
+          that.dateRange = [result.start_time, result.end_time];
+          console.log(that.dateRange);
+          // that.showTime = result.start_time.substring(11, result.start_time.length);
+          // that.form.end_time = result.end_time.substring(11, result.end_time.length);
           result.cover_upload.coverType = "cover";
           that.coverlist.push(result.cover_upload);
           let _files = [];
@@ -533,13 +534,17 @@
         if (obj) {
           var that = this;
           that.info(obj);
-        } else {}
+        } else {
+          this.dateRange=[];
+        }
         this.dialogFormVisible = true;
 
       },
       submitForm(formName) {
-        var that = this;
-        that.form.end_time = that.form.start_time.substring(0, 10) + " " + that.form.end_time;
+        var that = this;
+        that.form.start_time = this.dateRange[0]
+        that.form.end_time = this.dateRange[1]
+         // that.form.end_time = that.form.start_time.substring(0, 10) + " " + that.form.end_time;
         let listUrl = [];
         for (var m of that.bannersList) {
           if (m.response)
@@ -550,7 +555,7 @@
             listUrl.push({
               "upload_id": m.upload_id
             });
-        }
+        }
         that.form.banners_list = listUrl;
         this.$refs[formName].validate((valid) => {
           if (valid) {
@@ -683,15 +688,8 @@
       },
       toactive(obj) {
         if (obj.id) {
-          if (obj.id) {
-            this.$router.push({
-              path: '/order/activeorder',
-              query: {
-                activity_id: obj.id
-              }
-            })
-
-          }
+          let url = "/#/order/activeorder?activity_id=" + obj.id;
+          window.location.href = url
         }
       },
       changeEndTime(val) {
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index 53d3bb3..72e2102 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -9,10 +9,11 @@ background: linear-gradient(to right, #F37335, #FDC830); /* W3C, IE 10+/ Edge, F
         </div>
         <div class="card-panel-description">
           <div class="card-panel-text" style="font-family: '微软雅黑'">
-            234
+            预约参观人次
           </div>
-          <div class="card-panel-text" style="color: #fff;font-size:16px">
-            预约参观总人次
+          <div class="card-panel-text">
+            <p>总人数：238</p>
+            <p>今  日：46</p>
           </div>
         </div>
       </div>
@@ -25,11 +26,13 @@ background: linear-gradient(to right, #ED8F03, #FFB75E); /* W3C, IE 10+/ Edge, F
           <svg-icon icon-class="user-group" class-name="card-panel-icon" />
         </div>
         <div class="card-panel-description">
-          <div class="card-panel-text" style="font-family: '微软雅黑'">
-            204
+          <div class="card-panel-text" style="font-family: '微软雅黑';margin-bottom:5px">
+            入场参观人次
           </div>
-          <div class="card-panel-text" style="color: #fff;font-size:16px">
-            入场参观总人次
+          <div class="card-panel-text">
+            <p>总人数：208</p>
+            <p>今  日：46</p>
+            <p>核销比：87%</p>
           </div>
           <!-- <count-to :start-val="0" :end-val="countsData.client_count" :duration="3000" class="card-panel-num" /> -->
         </div>
@@ -44,10 +47,11 @@ background: linear-gradient(to right, #ffa751, #ffe259); /* W3C, IE 10+/ Edge, F
         </div>
         <div class="card-panel-description">
           <div class="card-panel-text" style="font-family: '微软雅黑'">
-            305
+            预约活动人次
           </div>
-          <div class="card-panel-text" style="color: #fff;font-size:16px">
-            预约活动总人次
+          <div class="card-panel-text" style="color: #fff;font-size:16px">
+            <p>总人数：308</p>
+            <p>今  日：26</p>
           </div>
           <!-- <count-to :start-val="0" :end-val="countsData.tool_count" :duration="3200" class="card-panel-num" /> -->
         </div>
@@ -62,10 +66,11 @@ background: linear-gradient(to right, #f83600, #fe8c00); /* W3C, IE 10+/ Edge, F
         </div>
         <div class="card-panel-description">
           <div class="card-panel-text" style="font-family: '微软雅黑'">
-            267
+            预约活动人次
           </div>
-          <div class="card-panel-text" style="color: #fff;font-size:16px">
-            参与活动总人次
+          <div class="card-panel-text" style="color: #fff;font-size:16px">
+            <p>总人数：338</p>
+            <p>今  日：46</p>
           </div>
           <!-- <count-to :start-val="0" :end-val="countsData.user_count" :duration="3600" class="card-panel-num" /> -->
         </div>
@@ -173,14 +178,19 @@ background: linear-gradient(to right, #f83600, #fe8c00); /* W3C, IE 10+/ Edge, F
       .card-panel-description {
         // float: right;
         font-weight: bold;
-        margin: 33px 0;
+        margin: 16px 12px;
 
         .card-panel-text {
           line-height: 25px;
           color: rgb(255, 255, 255);
-          font-size: 28px;
-          margin-bottom: 12px;
-
+          font-size: 26px;
+          margin-bottom: 20px;
+          width:70%;
+          text-align: left;
+        }
+        p{
+          text-align: left;
+          font-size: 19px;
         }
 
         .card-panel-num {
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index a7ae403..92ac874 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -3,7 +3,7 @@
 
     <panel-group :countsData="countsData" />
     <el-row :gutter="32">
-      <el-col :xs="24" :sm="24" :lg="12">
+      <el-col :xs="24" :sm="24" :lg="8">
         <div class="chart-wrapper">
           <div class="chart-title">
             <router-link to="/report/visit/sexRpt">观众性别</router-link>
@@ -17,7 +17,7 @@
           <pie-chart :chartData="stat.warning" />
         </div>
       </el-col>
-      <el-col :xs="24" :sm="24" :lg="12">
+      <el-col :xs="24" :sm="24" :lg="8">
         <div class="chart-wrapper">
           <div class="chart-title">
             <router-link to="/toolbox/exception">观众年龄</router-link>
@@ -31,7 +31,7 @@
           <pie-chart :chartData="stat.exception" />
         </div>
       </el-col>
-      <el-col :xs="24" :sm="24" :lg="8" v-if="false">
+      <el-col :xs="24" :sm="24" :lg="8">
         <div class="chart-wrapper">
           <div class="chart-title">
             <router-link to="/toolbox/exception">城市分布</router-link>
@@ -67,7 +67,13 @@
   import {
     getChartsData,
     getCounts
-  } from "../../api/dashboard.js"
+  } from "../../api/dashboard.js"
+  import {
+    ageRpt
+  } from "@/api/report/visit.js";
+  import {
+    sexRpt
+  } from "@/api/report/visit.js";
   export default {
     name: 'DashboardAdmin',
     components: {
@@ -86,16 +92,7 @@
           warning: {
             // xArr: ["一","二","三","四","五"],
             // yArr: [200,300,400,500,330],
-            yArr: [{
-                value: 1048,
-                name: '男性'
-              },
-              {
-                value: 735,
-                name: '女性'
-              },
-
-            ],
+            yArr: [],
             radiusArr: "50%",
             dateRange: [{
               checked: true,
@@ -108,33 +105,17 @@
             }]
           },
           exception: {
-            yArr: [{
-                value: 1048,
-                name: '12岁以下'
-              },
-              {
-                value: 735,
-                name: '12-17岁'
-              },
-              {
-                value: 580,
-                name: '18-24岁'
-              },
-              {
-                value: 484,
-                name: '25岁以上'
-              }
-            ],
+            yArr: [],
             radiusArr: ['30%', '50%'],
-            dateRange: [{
-              checked: true,
-              type: "week",
-              name: "本周"
-            }, {
-              checked: false,
-              type: "month",
-              name: "本月"
-            }]
+            // dateRange: [{
+            //   checked: true,
+            //   type: "week",
+            //   name: "本周"
+            // }, {
+            //   checked: false,
+            //   type: "month",
+            //   name: "本月"
+            // }]
           },
           times: {
             radiusArr: "50%",
@@ -168,35 +149,89 @@
               name: '团队预约人数',
               type: 'line',
               stack: 'Total',
-              data: [220, 182, 191, 234, 290, 330, 310]
+              data: [220, 182, 191, 234, 290, 330, 310,220, 182, 191, 234, 290, 330, 310,124]
             },
             {
               name: '团队预约实际入场人数',
               type: 'line',
               stack: 'Total',
-              data: [120, 132, 101, 134, 90, 230, 210]
+              data: [120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134, 90, 230, 210,234]
             },
             {
               name: '个人预约人数',
               type: 'line',
               stack: 'Total',
-              data: [150, 232, 201, 154, 190, 330, 210]
+              data: [150, 232, 201, 154, 190, 330, 210,150, 232, 201, 154, 190, 330, 210,189]
             },
             {
               name: '个人预约实际入场人数',
               type: 'line',
               stack: 'Total',
-              data: [50, 132, 101, 104, 180, 230, 110]
+              data: [50, 132, 101, 104, 180, 230, 110,50, 132, 101, 104, 180, 230, 110,167]
             }
           ]
         }
       }
     },
     created: function() {
-
+      this.lineArrDate();
+      this.load();
     },
-    methods: {
-
+    methods: {
+      load() {
+        // this.showData = true;
+        var agearr = [];
+        var sexarr = [];
+        ageRpt().then((res) => {
+          for (var m of res) {
+            agearr.push({
+              name: m.name,
+              value: m.plan_total
+            })
+          }
+          this.stat.exception.yArr = agearr;
+        }).catch((res) => {})
+        
+        sexRpt().then((res) => {
+          for (var m of res) {
+            sexarr.push({
+              name: m.sex_name,
+              value: m.plan_total
+            })
+          }
+        
+          this.stat.warning.yArr = sexarr;
+        }).catch((res) => {})
+      },
+      lineArrDate(){
+        let arr=[]
+        for(var i=0;i<15;i++){
+          arr.push(this.showDate(i))
+        }
+        this.lineArr.xArr = arr;
+      },
+      showDate(date){
+          var num = date
+          let n = num;
+          let d = new Date();
+          let year = d.getFullYear();
+          let mon = d.getMonth() + 1;
+          let day = d.getDate();
+          if(day <= n) {
+              if(mon > 1) {
+                  mon = mon - 1;
+              } else {
+                  year = year - 1;
+                  mon = 12;
+              }
+          }
+          d.setDate(d.getDate() - n);
+          year = d.getFullYear();
+          mon = d.getMonth() + 1;
+          day = d.getDate();
+          let s = (mon < 10 ? ('0' + mon) : mon) + "-" + (day < 10 ? ('0' + day) : day);
+          return s;
+      }
     }
   }
 </script>
diff --git a/src/views/report/activeRpt.vue b/src/views/report/activeRpt.vue
index 02409e3..3ad81b5 100644
--- a/src/views/report/activeRpt.vue
+++ b/src/views/report/activeRpt.vue
@@ -1,8 +1,124 @@
-<template>
-</template>
+<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>
+              <DatePicker type="daterange" :start-date="new Date()" placement="bottom-end" placeholder="参观日期区间"
+                style="width: 200px"></DatePicker>
+
+              <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="month" 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="per" label="核销比" sortable>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-else>
+        <line-chart :chartData="rptData" :height="chartHeight"/>
+      </div>
+    </div>
+
+  </div>
+</template>
+<script>
+  import LxHeader from "@/components/LxHeader/index.vue";
+  import LineChart from './components/LineChart'
+  import {
+    activityRpt
+  } from "@/api/report/activity.js";
+  export default {
+    components: {
+      LxHeader,
+      LineChart
+    },
+    created() {
+      this.initLoad()
+      this.load()
+    },
+    mounted() {},
+    data() {
+      return {
+        showData: false,
+        searchFields: {},
+        tableData: [],
+        tableHeight: 0,
+        chartHeight:"",
+        btnText:"数据展示",
+        rptData: {
+          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"
+
+      },
+      load() {
+        // this.showData = true;
+        var xarr = [];
+        var planarr=[];
+        var usearr=[];
+        activityRpt().then((res) => {
+          for (var m of res) {
+            m.month =  m.month+"月";
+            xarr.push(m.month);
+            planarr.push(
+              m.plan_total
+            )
+            usearr.push(
+              m.use_total
+            )
+          }
+
+          this.rptData.xArr = xarr;
+          this.rptData.series=[
+            {
+              name:"预约人数",
+              type: 'bar',
+              data:planarr
+            },
+            {
+              name:"入场人数",
+              type: 'bar',
+              data:usearr
+            }
 
-<script>
+          ]
+          this.tableData = res;
+        }).catch((res) => {})
+      }
+
+    }
+  };
 </script>
-
-<style>
-</style>
\ No newline at end of file
diff --git a/src/views/report/components/LineChart.vue b/src/views/report/components/LineChart.vue
index 73ffc34..1cc468a 100644
--- a/src/views/report/components/LineChart.vue
+++ b/src/views/report/components/LineChart.vue
@@ -127,7 +127,8 @@
             containLabel: true
           },
           xAxis: [{
-            type: 'category',
+            type: 'category',
+            axisLabel: {rotate: chartdata.rotate},
             data: chartdata.xArr,
           }],
           yAxis: [{
diff --git a/src/views/report/parkRpt.vue b/src/views/report/parkRpt.vue
index 02409e3..abcfaad 100644
--- a/src/views/report/parkRpt.vue
+++ b/src/views/report/parkRpt.vue
@@ -1,8 +1,122 @@
-<template>
-</template>
+<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>
+              <DatePicker type="daterange" :start-date="new Date()" placement="bottom-end" placeholder="参观日期区间"
+                style="width: 200px"></DatePicker>
+
+              <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="month" 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>
+      </div>
+      <div v-else>
+        <line-chart :chartData="rptData" :height="chartHeight"/>
+      </div>
+    </div>
+
+  </div>
+</template>
+<script>
+  import LxHeader from "@/components/LxHeader/index.vue";
+  import LineChart from './components/LineChart'
+  import {
+    carparkRpt
+  } from "@/api/report/parking.js";
+  export default {
+    components: {
+      LxHeader,
+      LineChart
+    },
+    created() {
+      this.initLoad()
+      this.load()
+    },
+    mounted() {},
+    data() {
+      return {
+        showData: false,
+        searchFields: {},
+        tableData: [],
+        tableHeight: 0,
+        chartHeight:"",
+        btnText:"数据展示",
+        rptData: {
+          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"
+
+      },
+      load() {
+        // this.showData = true;
+        var xarr = [];
+        var planarr=[];
+        var usearr=[];
+        carparkRpt().then((res) => {
+          for (var m of res) {
+            m.month =  m.month+"月";
+            xarr.push(m.month);
+            planarr.push(
+              m.plan_total
+            )
+            usearr.push(
+              m.use_total
+            )
+          }
+
+          this.rptData.xArr = xarr;
+          this.rptData.series=[
+            {
+              name:"预约车辆数",
+              type: 'bar',
+              data:planarr
+            },
+            {
+              name:"入场车辆数",
+              type: 'bar',
+              data:usearr
+            }
 
-<script>
+          ]
+          this.tableData = res;
+        }).catch((res) => {})
+      }
+
+    }
+  };
 </script>
-
-<style>
-</style>
\ No newline at end of file
diff --git a/src/views/report/visit/ageRpt.vue b/src/views/report/visit/ageRpt.vue
index 02409e3..fdea308 100644
--- a/src/views/report/visit/ageRpt.vue
+++ b/src/views/report/visit/ageRpt.vue
@@ -1,8 +1,104 @@
-<template>
-</template>
-
-<script>
+<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>
+              <DatePicker type="daterange" :start-date="new Date()" placement="bottom-end" placeholder="参观日期区间"
+                style="width: 200px"></DatePicker>
+
+              <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="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="per" label="核销比" sortable>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-else>
+        <pie-chart :chartData="rptData" :height="chartHeight"/>
+      </div>
+    </div>
+
+  </div>
+</template>
+<script>
+  import LxHeader from "@/components/LxHeader/index.vue";
+  import PieChart from '../components/PieChart'
+  import {
+    ageRpt
+  } from "@/api/report/visit.js";
+  export default {
+    components: {
+      LxHeader,
+      PieChart
+    },
+    created() {
+      this.initLoad()
+      this.load()
+    },
+    mounted() {},
+    data() {
+      return {
+        showData: false,
+        searchFields: {},
+        tableData: [],
+        tableHeight: 0,
+        btnText:"数据展示",
+        chartHeight:"",
+        rptData: {
+          yArr: [],
+          radiusArr: ['30%', '50%'],
+        }
+      }
+    },
+    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 = that.tableHeight + "px"
+      },
+      load() {
+        // this.showData = true;
+        var arr = [];
+        ageRpt().then((res) => {
+          for (var m of res) {
+            m.per = (m.use_total / (m.plan_total == 0 ? 1 : m.plan_total)) * 100 + "%"
+
+            arr.push({
+              name: m.name,
+              value: m.plan_total
+            })
+          }
+          this.rptData.yArr = arr;
+          this.tableData = res;
+        }).catch((res) => {})
+      }
+
+    }
+  };
 </script>
-
-<style>
-</style>
\ No newline at end of file
diff --git a/src/views/report/visit/infoRpt.vue b/src/views/report/visit/infoRpt.vue
index 02409e3..d1b2b77 100644
--- a/src/views/report/visit/infoRpt.vue
+++ b/src/views/report/visit/infoRpt.vue
@@ -1,8 +1,125 @@
-<template>
-</template>
+<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>
+              <DatePicker type="daterange" :start-date="new Date()" placement="bottom-end" placeholder="参观日期区间"
+                style="width: 200px"></DatePicker>
+
+              <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="date" 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="per" label="核销比" sortable>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-else>
+        <line-chart :chartData="rptData" :height="chartHeight"/>
+      </div>
+    </div>
+
+  </div>
+</template>
+<script>
+  import LxHeader from "@/components/LxHeader/index.vue";
+  import LineChart from '../components/LineChart'
+  import {
+    visitdetailRpt
+  } from "@/api/report/visit.js";
+  export default {
+    components: {
+      LxHeader,
+      LineChart
+    },
+    created() {
+      this.initLoad()
+      this.load()
+    },
+    mounted() {},
+    data() {
+      return {
+        showData: false,
+        searchFields: {},
+        tableData: [],
+        tableHeight: 0,
+        chartHeight:"",
+        btnText:"数据展示",
+        rptData: {
+          xArr:[],
+          series:{},
+          rotate:45,
+          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"
+
+      },
+      load() {
+        // this.showData = true;
+        var xarr = [];
+        var planarr=[];
+        var usearr=[];
+        visitdetailRpt().then((res) => {
+          for (var m of res) {
+            m.per = (m.use_total / (m.plan_total == 0 ? 1 : m.plan_total)) * 100 + "%"
+            xarr.push(m.date);
+            planarr.push(
+              m.plan_total
+            )
+            usearr.push(
+              m.use_total
+            )
+          }
+
+          this.rptData.xArr = xarr;
+          this.rptData.series=[
+            {
+              name:"预约人数",
+              type: 'bar',
+              data:planarr
+            },
+            {
+              name:"入场人数",
+              type: 'bar',
+              data:usearr
+            }
 
-<script>
+          ]
+          this.tableData = res;
+        }).catch((res) => {})
+      }
+
+    }
+  };
 </script>
-
-<style>
-</style>
\ No newline at end of file
diff --git a/src/views/report/visit/monthRpt.vue b/src/views/report/visit/monthRpt.vue
index 02409e3..4ddbbdf 100644
--- a/src/views/report/visit/monthRpt.vue
+++ b/src/views/report/visit/monthRpt.vue
@@ -1,8 +1,125 @@
-<template>
-</template>
+<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>
+              <DatePicker type="daterange" :start-date="new Date()" placement="bottom-end" placeholder="参观日期区间"
+                style="width: 200px"></DatePicker>
+
+              <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="month" 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="per" label="核销比" sortable>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-else>
+        <line-chart :chartData="rptData" :height="chartHeight"/>
+      </div>
+    </div>
+
+  </div>
+</template>
+<script>
+  import LxHeader from "@/components/LxHeader/index.vue";
+  import LineChart from '../components/LineChart'
+  import {
+    monthRpt
+  } from "@/api/report/visit.js";
+  export default {
+    components: {
+      LxHeader,
+      LineChart
+    },
+    created() {
+      this.initLoad()
+      this.load()
+    },
+    mounted() {},
+    data() {
+      return {
+        showData: false,
+        searchFields: {},
+        tableData: [],
+        tableHeight: 0,
+        chartHeight:"",
+        btnText:"数据展示",
+        rptData: {
+          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"
+
+      },
+      load() {
+        // this.showData = true;
+        var xarr = [];
+        var planarr=[];
+        var usearr=[];
+        monthRpt().then((res) => {
+          for (var m of res) {
+            m.per = (m.use_total / (m.plan_total == 0 ? 1 : m.plan_total)) * 100 + "%"
+            m.month =  m.month+"月";
+            xarr.push(m.month);
+            planarr.push(
+              m.plan_total
+            )
+            usearr.push(
+              m.use_total
+            )
+          }
+
+          this.rptData.xArr = xarr;
+          this.rptData.series=[
+            {
+              name:"预约人数",
+              type: 'bar',
+              data:planarr
+            },
+            {
+              name:"入场人数",
+              type: 'bar',
+              data:usearr
+            }
 
-<script>
+          ]
+          this.tableData = res;
+        }).catch((res) => {})
+      }
+
+    }
+  };
 </script>
-
-<style>
-</style>
\ No newline at end of file
diff --git a/src/views/report/visit/seasonRpt.vue b/src/views/report/visit/seasonRpt.vue
index 02409e3..39504a7 100644
--- a/src/views/report/visit/seasonRpt.vue
+++ b/src/views/report/visit/seasonRpt.vue
@@ -1,8 +1,147 @@
-<template>
-</template>
-
-<script>
+<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>
+              <DatePicker type="daterange" :start-date="new Date()" placement="bottom-end" placeholder="参观日期区间"
+                style="width: 200px"></DatePicker>
+
+              <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="datelist" 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="per" label="核销比" sortable>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-else>
+        <line-chart :chartData="rptData" :height="chartHeight"/>
+      </div>
+    </div>
+
+  </div>
+</template>
+<script>
+  import LxHeader from "@/components/LxHeader/index.vue";
+  import LineChart from '../components/LineChart'
+  import {
+    quarterRpt
+  } from "@/api/report/visit.js";
+  export default {
+    components: {
+      LxHeader,
+      LineChart
+    },
+    created() {
+      this.initLoad()
+      this.load()
+    },
+    mounted() {},
+    data() {
+      return {
+        showData: false,
+        searchFields: {},
+        tableData: [],
+        tableHeight: 0,
+        chartHeight:"",
+        btnText:"数据展示",
+        dataArr:[
+          {
+            id:'quarter1',
+            value:"第一季度"
+          },
+          {
+            id:'quarter2',
+            value:"第二季度"
+          },
+          {
+            id:'quarter3',
+            value:"第三季度"
+          },
+          {
+            id:'quarter4',
+            value:"第四季度"
+          }],
+        rptData: {
+          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"
+
+      },
+      load() {
+        // this.showData = true;
+        var planarr=[];
+        var xArr=[];
+        var usearr=[];
+        var tableArr = [];
+        quarterRpt().then((res) => {
+          for (var m of this.dataArr) {
+            res[m.id].per = (res[m.id].use_total / (res[m.id].plan_total == 0 ? 1 : res[m.id].plan_total)) * 100 + "%"
+            xArr.push(m.value);
+            planarr.push(
+              res[m.id].plan_total
+            )
+            usearr.push(
+              res[m.id].use_total
+            )
+            tableArr.push({
+              datelist:m.value,
+              plan_total:res[m.id].plan_total,
+              use_total:res[m.id].use_total,
+              per:res[m.id].per
+            })
+          }
+          this.rptData.series=[
+            {
+              name:"预约人数",
+              type: 'bar',
+              data:planarr
+            },
+            {
+              name:"入场人数",
+              type: 'bar',
+              data:usearr
+            }
+          ]
+          this.rptData.xArr = xArr;
+          this.rptData.legendArr = xArr;
+          this.tableData = tableArr;
+        }).catch((res) => {})
+      }
+
+    }
+  };
 </script>
-
-<style>
-</style>
\ No newline at end of file
diff --git a/src/views/report/visit/sexRpt.vue b/src/views/report/visit/sexRpt.vue
index b2050fb..bbd8439 100644
--- a/src/views/report/visit/sexRpt.vue
+++ b/src/views/report/visit/sexRpt.vue
@@ -11,7 +11,7 @@
                 style="width: 200px"></DatePicker>
 
               <Button type="primary" @click="load" style="margin-left: 10px">查询</Button>
-              <Button type="primary" @click="viewPart" style="margin-left: 10px">图表展示</Button>
+              <Button type="primary" @click="viewPart" style="margin-left: 10px">{{btnText}}</Button>
             </div>
           </slot>
         </LxHeader>
@@ -31,7 +31,7 @@
         </el-table>
       </div>
       <div v-else>
-        <pie-chart :chartData="rptData" />
+        <pie-chart :chartData="rptData" :height="chartHeight" />
       </div>
     </div>
 
@@ -39,7 +39,7 @@
 </template>
 <script>
   import LxHeader from "@/components/LxHeader/index.vue";
-  import PieChart from './components/PieChart'
+  import PieChart from '../components/PieChart'
   import {
     sexRpt
   } from "@/api/report/visit.js";
@@ -58,7 +58,9 @@
         showData: false,
         searchFields: {},
         tableData: [],
-        tableHeight: 0,
+        tableHeight: 0,
+        btnText:"数据展示",
+        chartHeight:"",
         rptData: {
           yArr: [],
           radiusArr: "50%"
@@ -67,7 +69,8 @@
     },
     methods: {
       viewPart() {
-        this.showData = false;
+        this.showData = !this.showData;
+        this.btnText = this.showData ? "图表展示" : "数据展示"
       },
       initLoad() {
         var that = this;
@@ -76,10 +79,11 @@
         var paginationHeight = 37; //分页的高度
         var topHeight = 50; //页面 头部
         let tableHeight = clientHeight - lxHeader_height - topHeight - paginationHeight - 20;
-        that.tableHeight = tableHeight;
+        that.tableHeight = tableHeight;
+        that.chartHeight = tableHeight+"px";
       },
       load() {
-        this.showData = true;
+        // this.showData = true;
         var arr = [];
         sexRpt().then((res) => {
           for (var m of res) {
diff --git a/src/views/report/visit/timeRpt.vue b/src/views/report/visit/timeRpt.vue
index 02409e3..afef72a 100644
--- a/src/views/report/visit/timeRpt.vue
+++ b/src/views/report/visit/timeRpt.vue
@@ -1,8 +1,151 @@
-<template>
-</template>
-
-<script>
+<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>
+              <DatePicker type="daterange" :start-date="new Date()" placement="bottom-end" placeholder="参观日期区间"
+                style="width: 200px"></DatePicker>
+
+              <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="datelist" 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="per" label="核销比" sortable>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-else>
+        <line-chart :chartData="rptData" :height="chartHeight"/>
+      </div>
+    </div>
+
+  </div>
+</template>
+<script>
+  import LxHeader from "@/components/LxHeader/index.vue";
+  import LineChart from '../components/LineChart'
+  import {
+    duringRpt
+  } from "@/api/report/visit.js";
+  export default {
+    components: {
+      LxHeader,
+      LineChart
+    },
+    created() {
+      this.initLoad()
+      this.load()
+    },
+    mounted() {},
+    data() {
+      return {
+        showData: false,
+        searchFields: {},
+        tableData: [],
+        tableHeight: 0,
+        chartHeight:"",
+        btnText:"数据展示",
+        dataArr:[
+          {
+            id:'this_week',
+            value:"本周"
+          },
+          {
+            id:'this_month',
+            value:"本月"
+          },
+          {
+            id:'last_month',
+            value:"上一月"
+          },
+          {
+            id:'this_year',
+            value:"本年"
+          },
+          {
+            id:'last_year',
+            value:"上一年"
+          }],
+        rptData: {
+          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"
+
+      },
+      load() {
+        // this.showData = true;
+        var planarr=[];
+        var xArr=[];
+        var usearr=[];
+        var tableArr = [];
+        duringRpt().then((res) => {
+          for (var m of this.dataArr) {
+            res[m.id].per = (res[m.id].use_total / (res[m.id].plan_total == 0 ? 1 : res[m.id].plan_total)) * 100 + "%"
+            xArr.push(m.value);
+            planarr.push(
+              res[m.id].plan_total
+            )
+            usearr.push(
+              res[m.id].use_total
+            )
+            tableArr.push({
+              datelist:m.value,
+              plan_total:res[m.id].plan_total,
+              use_total:res[m.id].use_total,
+              per:res[m.id].per
+            })
+          }
+          this.rptData.series=[
+            {
+              name:"预约人数",
+              type: 'bar',
+              data:planarr
+            },
+            {
+              name:"入场人数",
+              type: 'bar',
+              data:usearr
+            }
+          ]
+          this.rptData.xArr = xArr;
+          this.rptData.legendArr = xArr;
+          this.tableData = tableArr;
+        }).catch((res) => {})
+      }
+
+    }
+  };
 </script>
-
-<style>
-</style>
\ No newline at end of file