修改

src/api/visitor.js

@@ -1,22 +1,22 @@
 import http from '@/utils/request'
-export const apiVisitor = (url, params) => {
-  return http.post(`/customer/${url}`, params)
+export const apiVisitor = (url, { data: params }) => {
+  return http.post(`/customer/${url}`, { data: params })
 }
 
-export function customerAgeStatistics (params) {
-  return http.post(`/customer/customerAgeStatistics`, params)
+export function getVisitorStatistics (params) {
+  return http.post(`/admin/statistics/customerStatistics`, { data: params })
 }
 
 export function customerOriginStatistics (params) {
-  return http.post(`/customer/customerOriginStatistics`, params)
+  return http.post(`/customer/customerOriginStatistics`, { data: params })
 }
 export function customerSexStatistics (params) {
-  return http.post(`/customer/customerSexStatistics`, params)
+  return http.post(`/customer/customerSexStatistics`, { data: params })
 }
 export function getProvinceList (params) {
-  return http.post(`/customer/getProvinceList`, params)
+  return http.post(`/customer/getProvinceList`, { data: params })
 }
 
 export function exportCustomerList (params) {
-  return http.post(`/customer/exportCustomerList`, params)
+  return http.post(`/customer/exportCustomerList`, { data: params })
 }

src/pages/visitor/Staticstics/Age.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-form
+    <!-- <el-form
       class="form"
       inline
       :model="form"
@@ -57,7 +57,7 @@
           查询
         </el-button>
       </el-form-item>
-    </el-form>
+    </el-form> -->
 
     <div>
       <el-radio-group
@@ -97,18 +97,8 @@
         >
         </el-table-column>
         <el-table-column
-          prop="maleCount"
-          label="男"
-        >
-        </el-table-column>
-        <el-table-column
-          prop="femaleCount"
-          label="女"
-        >
-        </el-table-column>
-        <el-table-column
-          prop="agePercent"
-          label="百分比"
+          prop="count"
+          label="数量"
         >
         </el-table-column>
       </el-table>
@@ -117,39 +107,32 @@
 </template>
 
 <script>
-import ageOption from './ageOption'
-import { customerAgeStatistics } from '@/api/visitor'
+import baseAgeOption from './ageOption'
 
 export default {
+  props: {
+    tableData: {
+      type: Array,
+      default: () => []
+    }
+  },
   data () {
     return {
-      ageOption,
-      viewType: 'chart',
-      tableData: [],
-      form: {
-        startDate: '',
-        endDate: '',
-        keyWords1: ''
-      }
+      viewType: 'chart'
     }
   },
-  created () {
-    this.getData()
-  },
   computed: {
     scenicList () {
       return this.$store.state.app.scenicList
-    }
-  },
-  methods: {
-    getData () {
-      customerAgeStatistics(this.form).then(res => {
-        this.tableData = res.data
+    },
+    ageOption () {
+      const ageOption = JSON.parse(JSON.stringify(baseAgeOption))
+
+      ageOption.yAxis.data = this.tableData.map(item => item.age)
+      ageOption.series[0].data = this.tableData.map(item => item.count)
+      // ageOption.series[1].data = this.tableData.map(item => item.femaleCount)
 
-        this.ageOption.yAxis.data = res.data.map(item => item.age)
-        this.ageOption.series[0].data = res.data.map(item => item.maleCount)
-        this.ageOption.series[1].data = res.data.map(item => item.femaleCount)
-      })
+      return ageOption
     }
   }
 }

src/pages/visitor/Staticstics/Area.vue

@@ -1,99 +1,5 @@
 <template>
   <div>
-    <el-form
-      class="form"
-      inline
-      :model="form"
-      ref="form"
-      label-width="100px">
-      <el-form-item
-        label="开始时间"
-        prop="startDate"
-      >
-        <el-date-picker
-          v-model="form.startDate"
-          type="datetime"
-          placeholder="选择日期时间"
-        >
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item
-        label="结束时间"
-        prop="endDate"
-      >
-        <el-date-picker
-          default-time="23:59:59"
-          v-model="form.endDate"
-          type="datetime"
-          placeholder="选择日期时间"
-        >
-        </el-date-picker>
-      </el-form-item>
-
-      <el-form-item label="统计方式">
-        <el-select v-model="form.keyWords1">
-          <el-option
-            label="全部"
-            value="">
-          </el-option>
-          <el-option
-            label="省份"
-            value="province">
-          </el-option>
-          <el-option
-            label="城市"
-            value="city">
-          </el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="省份">
-        <el-select v-model="form.keyWords3">
-          <el-option
-            label="全部"
-            value="">
-          </el-option>
-          <el-option
-            v-for="item in provinceList"
-            :key="item"
-            :value="item"
-            :label="item">
-          </el-option>
-        </el-select>
-      </el-form-item>
-
-      <el-form-item label="数据显示数量">
-        <el-input-number v-model="form.keyWords2"></el-input-number>
-      </el-form-item>
-
-      <el-form-item
-        label="景点选择"
-        prop="keyWords4"
-      >
-        <el-select
-          v-model="form.keyWords4"
-          placeholder="请选择">
-          <el-option
-            value=""
-            label="全部">
-          </el-option>
-          <el-option
-            v-for="item in scenicList"
-            :key="item.id"
-            :value="item.id"
-            :label="item.name">
-          </el-option>
-        </el-select>
-      </el-form-item>
-
-      <el-form-item>
-        <el-button
-          type="primary"
-          @click="getData">
-          查询
-        </el-button>
-      </el-form-item>
-    </el-form>
-
     <div>
       <el-radio-group
         style="float:right"
@@ -142,53 +48,36 @@
 </template>
 
 <script>
-import areaOption from './areaOption'
-import { customerOriginStatistics, getProvinceList } from '@/api/visitor'
+import baseAreaOption from './areaOption'
 
 export default {
+  props: {
+    tableData: {
+      type: Array,
+      default: () => []
+    }
+  },
   data () {
     return {
-      areaOption,
-      viewType: 'chart',
-      tableData: [],
-      provinceList: [],
-      form: {
-        startDate: '',
-        endDate: '',
-        keyWords1: '',
-        keyWords2: 10,
-        keyWords3: '',
-        keyWords4: ''
-      }
+      viewType: 'chart'
     }
   },
-  created () {
-    this.getData()
-    this.getProvinceList()
-  },
   computed: {
     scenicList () {
       return this.$store.state.app.scenicList
-    }
-  },
-  methods: {
-    getData () {
-      customerOriginStatistics(this.form).then(res => {
-        this.tableData = res.data
-        this.areaOption.legend.data = res.data.map(item => item.name)
-
-        this.areaOption.series[0].data = res.data.map(item => {
-          return {
-            name: item.name,
-            value: item.value
-          }
-        })
-      })
     },
-    getProvinceList () {
-      getProvinceList().then(res => {
-        this.provinceList = res?.data
+    areaOption () {
+      const areaOption = JSON.parse(JSON.stringify(baseAreaOption))
+      areaOption.legend.data = this.tableData.map(item => item.province)
+
+      areaOption.series[0].data = this.tableData.map(item => {
+        return {
+          name: item.province,
+          value: item.count
+        }
       })
+
+      return areaOption
     }
   }
 }

src/pages/visitor/Staticstics/Sex.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-form
+    <!-- <el-form
       class="form"
       inline
       :model="form"
@@ -57,7 +57,7 @@
           查询
         </el-button>
       </el-form-item>
-    </el-form>
+    </el-form> -->
 
     <div>
       <el-radio-group
@@ -92,7 +92,7 @@
         border
         stripe>
         <el-table-column
-          prop="sex"
+          prop="gender"
           label="名称"
         >
         </el-table-column>
@@ -107,42 +107,36 @@
 </template>
 
 <script>
-import sexOption from './sexOption'
-import { customerSexStatistics } from '@/api/visitor'
+import baseSexOption from './sexOption'
 
 export default {
+
+  props: {
+    tableData: {
+      type: Array,
+      default: () => []
+    }
+  },
   data () {
     return {
-      sexOption,
-      viewType: 'chart',
-      tableData: [],
-      form: {
-        startDate: '',
-        endDate: '',
-        keyWords4: ''
-      }
+      viewType: 'chart'
     }
   },
-  created () {
-    this.getData()
-  },
   computed: {
     scenicList () {
       return this.$store.state.app.scenicList
-    }
-  },
-  methods: {
-    getData () {
-      customerSexStatistics(this.form).then(res => {
-        this.tableData = res.data
-
-        this.sexOption.series[0].data = res.data.map(item => {
-          return {
-            name: item.sex,
-            value: item.count
-          }
-        })
+    },
+    sexOption () {
+      const sexOption = JSON.parse(JSON.stringify(baseSexOption))
+      sexOption.legend.data = this.tableData.map(item => item.gender)
+      sexOption.series[0].data = this.tableData.map(item => {
+        return {
+          name: item.gender,
+          value: item.count
+        }
       })
+
+      return sexOption
     }
   }
 }

src/pages/visitor/Staticstics/ageOption.js

@@ -24,21 +24,8 @@ export default {
   },
   series: [
     {
-      name: '男',
+      name: '总量',
       type: 'bar',
-      stack: '总量',
-      label: {
-        normal: {
-          show: true,
-          position: 'insideRight'
-        }
-      },
-      data: []
-    },
-    {
-      name: '女',
-      type: 'bar',
-      stack: '总量',
       label: {
         normal: {
           show: true,

src/pages/visitor/vistorStaticstics.vue

@@ -1,23 +1,85 @@
 <template>
   <div class="tourist-wrap">
+    <el-form
+      class="form"
+      inline
+      :model="form"
+      ref="form"
+      label-width="100px">
+      <el-form-item
+        label="开始时间"
+        prop="statisticsTimeBegin"
+      >
+        <el-date-picker
+          v-model="form.statisticsTimeBegin"
+          type="datetime"
+          placeholder="选择日期时间"
+        >
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item
+        label="结束时间"
+        prop="statisticsTimeEnd"
+      >
+        <el-date-picker
+          default-time="23:59:59"
+          v-model="form.statisticsTimeEnd"
+          type="datetime"
+          placeholder="选择日期时间"
+        >
+        </el-date-picker>
+      </el-form-item>
+
+      <el-form-item label="数据显示数量">
+        <el-input-number v-model="form.pageSize"></el-input-number>
+      </el-form-item>
+
+      <!-- <el-form-item
+        label="景点选择"
+        prop="keyWords4"
+      >
+        <el-select
+          v-model="form.keyWords4"
+          placeholder="请选择">
+          <el-option
+            value=""
+            label="全部">
+          </el-option>
+          <el-option
+            v-for="item in scenicList"
+            :key="item.id"
+            :value="item.id"
+            :label="item.name">
+          </el-option>
+        </el-select>
+      </el-form-item> -->
+
+      <el-form-item>
+        <el-button
+          type="primary"
+          @click="getData">
+          查询
+        </el-button>
+      </el-form-item>
+    </el-form>
     <el-card>
       <el-tabs v-model="activeName">
         <el-tab-pane
           label="游客年龄统计"
           name="first">
-          <Age></Age>
+          <Age :table-data="statisticsInfo.ageStatistics"></Age>
         </el-tab-pane>
 
         <el-tab-pane
           label="游客性别统计"
           name="second">
-          <Sex></Sex>
+          <Sex :table-data="statisticsInfo.genderStatistics"></Sex>
         </el-tab-pane>
 
         <el-tab-pane
           label="游客来源统计"
           name="third">
-          <AreaStatics></AreaStatics>
+          <AreaStatics :table-data="statisticsInfo.provinceStatistics"></AreaStatics>
         </el-tab-pane>
       </el-tabs>
     </el-card>
@@ -28,6 +90,7 @@
 import Age from './Staticstics/Age'
 import Sex from './Staticstics/Sex'
 import AreaStatics from './Staticstics/Area'
+import { getVisitorStatistics } from '@/api/visitor'
 
 export default {
   components: {
@@ -37,7 +100,29 @@ export default {
   },
   data () {
     return {
-      activeName: 'first'
+      activeName: 'first',
+      form: {
+        statisticsTimeBegin: '',
+        statisticsTimeEnd: '',
+        pageSize: 10,
+        pageNum: 1
+      },
+      statisticsInfo: {
+        provinceStatistics: [],
+        sexStatistics: [],
+        ageStatistics: []
+      }
+    }
+  },
+  created () {
+    this.getData()
+  },
+  methods: {
+    getData () {
+      getVisitorStatistics(this.form).then(res => {
+        this.statisticsInfo = res.data
+        console.log(res, '1111')
+      })
     }
   }
 }