后台管理-增加统计地区功能

后台管理/src/pages/A6record/LocStat.tsx

@@ -0,0 +1,80 @@
+import React, { useCallback, useEffect, useState } from 'react'
+import styles from './index.module.scss'
+import { Button, Modal } from 'antd'
+import { A6FromDataType } from './type'
+import { B2FromDataType } from '../B2exhiLog/type'
+import { Loc_APIlist } from '@/store/action/A6record'
+import MyTable from '@/components/MyTable'
+
+type ListType = {
+  id: string
+  num: number
+}
+
+type Props = {
+  type: '课程' | '展馆'
+  apiObj: A6FromDataType | B2FromDataType
+  closeFu: () => void
+}
+
+function LocStat({ type, apiObj, closeFu }: Props) {
+  const [list, setList] = useState<ListType[]>([])
+
+  const getListFu = useCallback(async () => {
+    const obj = {
+      ...apiObj,
+      pageNum: 1,
+      pageSize: 99999
+    }
+
+    const res = await Loc_APIlist(obj, type)
+
+    if (res.code === 0) {
+      const listTemp: ListType[] = []
+
+      const resList: any[] = res.data
+      resList.forEach((obj: any) => {
+        for (const k in obj) {
+          listTemp.push({
+            id: k,
+            num: obj[k]
+          })
+        }
+      })
+      setList(listTemp)
+    }
+  }, [apiObj, type])
+
+  useEffect(() => {
+    getListFu()
+  }, [getListFu])
+
+  return (
+    <Modal
+      wrapClassName={styles.LocStat}
+      open={true}
+      title='地区统计'
+      footer={
+        [] // 设置footer为空，去掉 取消 确定默认按钮
+      }
+    >
+      <MyTable
+        list={list}
+        columnsTemp={[
+          ['txt', '地区', 'id'],
+          ['txt', '预约记录', 'num']
+        ]}
+        lastBtn={[]}
+        pagingInfo={false}
+      />
+
+      <div className='Locbtn'>
+        <Button onClick={closeFu}>关闭</Button>
+      </div>
+    </Modal>
+  )
+}
+
+const MemoLocStat = React.memo(LocStat)
+
+export default MemoLocStat

后台管理/src/pages/A6record/index.module.scss

@@ -1,6 +1,19 @@
 .A6record {
   background-color: #fff;
   border-radius: 10px;
+  :global {
+    .A6top {
+      padding: 24px;
+      display: flex;
+      justify-content: space-between;
+      .A6top1 {
+        display: flex;
+        .A6topRow {
+          margin-right: 20px;
+        }
+      }
+    }
+  }
 }
 
 // 审核页面的弹窗
@@ -40,3 +53,29 @@
     }
   }
 }
+
+// 地区统计弹窗
+.LocStat {
+  :global {
+    .ant-modal-close {
+      display: none;
+    }
+
+    .ant-modal-body {
+      border-top: 1px solid #ccc;
+      padding-top: 15px !important;
+      font-size: 16px !important;
+      .ant-table-cell {
+        text-align: center !important;
+      }
+      .ant-table-body {
+        max-height: 500px;
+        overflow-y: auto;
+      }
+    }
+    .Locbtn {
+      margin-top: 24px;
+      text-align: center;
+    }
+  }
+}

后台管理/src/pages/A6record/index.tsx

@@ -1,19 +1,31 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import { useDispatch, useSelector } from 'react-redux'
 import { A6_APIdel, A6_APIgetList } from '@/store/action/A6record'
 import { RootState } from '@/store'
 import { MessageFu } from '@/utils/message'
-import { A6tableType } from './type'
-import { Button } from 'antd'
+import { A6FromDataType, A6tableType } from './type'
+import { Button, DatePicker, Input } from 'antd'
 import MyPopconfirm from '@/components/MyPopconfirm'
 import MyTable from '@/components/MyTable'
 import { A6tableC } from '@/utils/tableData'
 import A6auth from './A6auth'
+import LocStat from './LocStat'
+
+const { RangePicker } = DatePicker
+
+const fromDataBase: A6FromDataType = {
+  searchKey: '',
+  pageNum: 1,
+  pageSize: 10,
+  startTime: '',
+  endTime: ''
+}
+
 function A6record() {
   const dispatch = useDispatch()
 
-  const [fromData, setFromData] = useState({ pageNum: 1, pageSize: 10 })
+  const [fromData, setFromData] = useState(fromDataBase)
 
   const getListFu = useCallback(() => {
     dispatch(A6_APIgetList(fromData))
@@ -64,18 +76,83 @@ function A6record() {
     ]
   }, [delTableFu])
 
+  const [inputKey, setInputKey] = useState(1)
+
+  // 输入框的输入
+  const timeRef = useRef(-1)
+  const txtChangeFu = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>, key: 'searchKey') => {
+      clearTimeout(timeRef.current)
+      timeRef.current = window.setTimeout(() => {
+        setFromData({
+          ...fromData,
+          [key]: e.target.value.replaceAll("'", ''),
+          pageNum: 1
+        })
+      }, 500)
+    },
+    [fromData]
+  )
+
+  // 点击重置
+  const resetSelectFu = useCallback(() => {
+    setInputKey(Date.now())
+    setFromData(fromDataBase)
+  }, [])
+
+  // 时间选择器改变
+  const timeChange = useCallback(
+    (date: any, dateString: any) => {
+      let startTime = ''
+      let endTime = ''
+      if (dateString[0] && dateString[1]) {
+        startTime = dateString[0] + ' 00:00:00'
+        endTime = dateString[1] + ' 23:59:59'
+      }
+      setFromData({ ...fromData, startTime, endTime, pageNum: 1 })
+    },
+    [fromData]
+  )
+
   // 点击审核
   const [authId, setAuthId] = useState({
     id: 0,
     status: 0
   })
 
+  // 点击地区统计
+  const [locShow, setLocShow] = useState(false)
+
   return (
     <div className={styles.A6record}>
       <div className='pageTitle'>课程预约记录</div>
 
+      <div className='A6top'>
+        <div className='A6top1'>
+          <div className='A6topRow'>
+            <span>搜索：</span>
+            <Input
+              key={inputKey}
+              maxLength={50}
+              style={{ width: 200 }}
+              placeholder='请输入姓名/联系电话'
+              allowClear
+              onChange={e => txtChangeFu(e, 'searchKey')}
+            />
+          </div>
+          <div className='A6topRow'>
+            <span>预约日期：</span>
+            <RangePicker key={inputKey} onChange={timeChange} />
+          </div>
+        </div>
+        <div className='A6top1'>
+          <Button onClick={() => setLocShow(true)}>地区统计</Button>&emsp;
+          <Button onClick={resetSelectFu}>重置</Button>
+        </div>
+      </div>
+
       <MyTable
-        yHeight={680}
+        yHeight={604}
         list={tableInfo.list}
         columnsTemp={A6tableC}
         lastBtn={tableLastBtn}
@@ -94,6 +171,11 @@ function A6record() {
           editTableFu={getListFu}
         />
       ) : null}
+
+      {/* 点击地区统计 */}
+      {locShow ? (
+        <LocStat type='课程' apiObj={fromData} closeFu={() => setLocShow(false)} />
+      ) : null}
     </div>
   )
 }

后台管理/src/pages/A6record/type.d.ts

@@ -17,3 +17,11 @@ export type A6tableType = {
   city: string
   cityStr: string
 }
+
+export type A6FromDataType = {
+  searchKey: string
+  pageNum: number
+  pageSize: number
+  startTime: string
+  endTime: string
+}

后台管理/src/pages/B2exhiLog/index.tsx

@@ -5,18 +5,23 @@ import { B2_APIdel, B2_APIgetList, B2_APIupdate } from '@/store/action/B2exhiLog
 import { RootState } from '@/store'
 import { MessageFu } from '@/utils/message'
 import { B2FromDataType, B2tableType } from './type'
-import { Button, Input, Select, Switch } from 'antd'
+import { Button, DatePicker, Input, Select, Switch } from 'antd'
 import MyPopconfirm from '@/components/MyPopconfirm'
 import MyTable from '@/components/MyTable'
 import { B2tableC } from '@/utils/tableData'
 import B2look from './B2look'
 import { B2selectArr } from './data'
+import LocStat from '../A6record/LocStat'
+
+const { RangePicker } = DatePicker
 
 const fromDataBase: B2FromDataType = {
   searchKey: '',
   status: '',
   pageNum: 1,
-  pageSize: 10
+  pageSize: 10,
+  startTime: '',
+  endTime: ''
 }
 
 function B2exhiLog() {
@@ -56,6 +61,20 @@ function B2exhiLog() {
     setFromData(fromDataBase)
   }, [])
 
+  // 时间选择器改变
+  const timeChange = useCallback(
+    (date: any, dateString: any) => {
+      let startTime = ''
+      let endTime = ''
+      if (dateString[0] && dateString[1]) {
+        startTime = dateString[0] + ' 00:00:00'
+        endTime = dateString[1] + ' 23:59:59'
+      }
+      setFromData({ ...fromData, startTime, endTime, pageNum: 1 })
+    },
+    [fromData]
+  )
+
   const { tableInfo } = useSelector((state: RootState) => state.B2exhiLog)
 
   // 点击删除
@@ -113,6 +132,9 @@ function B2exhiLog() {
   // 点击查看
   const [lookId, setLookId] = useState(0)
 
+  // 点击地区统计
+  const [locShow, setLocShow] = useState(false)
+
   return (
     <div className={styles.B2exhiLog}>
       <div className='pageTitle'>展馆预约记录</div>
@@ -139,8 +161,13 @@ function B2exhiLog() {
               options={B2selectArr}
             />
           </div>
+          <div className='B2topRow'>
+            <span>预约日期：</span>
+            <RangePicker key={inputKey} onChange={timeChange} />
+          </div>
         </div>
         <div className='B2top1'>
+          <Button onClick={() => setLocShow(true)}>地区统计</Button>&emsp;
           <Button onClick={resetSelectFu}>重置</Button>
         </div>
       </div>
@@ -158,6 +185,11 @@ function B2exhiLog() {
 
       {/* 点击查看 */}
       {lookId ? <B2look sId={lookId} closeFu={() => setLookId(0)} /> : null}
+
+      {/* 点击地区统计 */}
+      {locShow ? (
+        <LocStat type='展馆' apiObj={fromData} closeFu={() => setLocShow(false)} />
+      ) : null}
     </div>
   )
 }

后台管理/src/pages/B2exhiLog/type.d.ts

@@ -31,4 +31,6 @@ export type B2FromDataType = {
 
   pageNum: number
   pageSize: number
+  startTime: string
+  endTime: string
 }

后台管理/src/store/action/A6record.ts

@@ -36,3 +36,12 @@ export const A6_APIdel = (id: number) => {
 export const A6_APIauth = (id: number, status: number) => {
   return http.get(`cms/apply/update/${id}/${status}`)
 }
+
+/**
+ * 地区统计
+ */
+export const Loc_APIlist = (data: any, type: '课程' | '展馆') => {
+  const url = type === '课程' ? 'cms/apply/groupBy' : 'cms/applyExhibition/groupBy'
+
+  return http.post(url, data)
+}

绿幕小程序/config/index.js

@@ -53,6 +53,9 @@ export let app = {
       })
     },
     switchMachine(scene) {
+
+      console.log('点击切换场景',scene);
+
       app.websocket.emit('Switch', scene, function (data) {
         console.log(data, scene);
       })