增加访问量

展示端/package-lock.json

@@ -25,6 +25,7 @@
         "dayjs": "^1.11.10",
         "js-base64": "^3.7.3",
         "react": "^18.2.0",
+        "react-countup": "^6.5.3",
         "react-dom": "^18.2.0",
         "react-redux": "^8.0.4",
         "react-router-dom": "5.3",
@@ -6026,6 +6027,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/countup.js": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmmirror.com/countup.js/-/countup.js-2.8.0.tgz",
+      "integrity": "sha512-f7xEhX0awl4NOElHulrl4XRfKoNH3rB+qfNSZZyjSZhaAoUk6elvhH+MNxMmlmuUJ2/QNTWPSA7U4mNtIAKljQ=="
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmmirror.com/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -14358,6 +14364,17 @@
         "semver": "bin/semver"
       }
     },
+    "node_modules/react-countup": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmmirror.com/react-countup/-/react-countup-6.5.3.tgz",
+      "integrity": "sha512-udnqVQitxC7QWADSPDOxVWULkLvKUWrDapn5i53HE4DPRVgs+Y5rr4bo25qEl8jSh+0l2cToJgGMx+clxPM3+w==",
+      "dependencies": {
+        "countup.js": "^2.8.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.3.0"
+      }
+    },
     "node_modules/react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmmirror.com/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@@ -21978,6 +21995,11 @@
         "yaml": "^1.10.0"
       }
     },
+    "countup.js": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmmirror.com/countup.js/-/countup.js-2.8.0.tgz",
+      "integrity": "sha512-f7xEhX0awl4NOElHulrl4XRfKoNH3rB+qfNSZZyjSZhaAoUk6elvhH+MNxMmlmuUJ2/QNTWPSA7U4mNtIAKljQ=="
+    },
     "cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmmirror.com/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -28252,6 +28274,14 @@
         }
       }
     },
+    "react-countup": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmmirror.com/react-countup/-/react-countup-6.5.3.tgz",
+      "integrity": "sha512-udnqVQitxC7QWADSPDOxVWULkLvKUWrDapn5i53HE4DPRVgs+Y5rr4bo25qEl8jSh+0l2cToJgGMx+clxPM3+w==",
+      "requires": {
+        "countup.js": "^2.8.0"
+      }
+    },
     "react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmmirror.com/react-dev-utils/-/react-dev-utils-12.0.1.tgz",

展示端/package.json

@@ -20,6 +20,7 @@
     "dayjs": "^1.11.10",
     "js-base64": "^3.7.3",
     "react": "^18.2.0",
+    "react-countup": "^6.5.3",
     "react-dom": "^18.2.0",
     "react-redux": "^8.0.4",
     "react-router-dom": "5.3",
@@ -63,4 +64,4 @@
     "react-app-rewired": "^2.2.1"
   },
   "homepage": "."
-}
+}

展示端/public/myData/data.js

@@ -1,17 +1,28 @@
 const infoTemo = {
   swArr: [
     {
-      id: 1,
-      name: '灵影仙踪',
-      partOf: '上海博物馆',
-      link: 'https://ysxwyzl.4dage.com/4dwall/spg.html?m=SG-Yu3JBqaVsxP&lang=zh'
-    },
-    {
       id: 2,
       name: '观天下-大明的世界',
       partOf: '南京博物院',
-      link: 'https://ysxwyzl.4dage.com/4dwall/spg.html?m=KJ-hEnSvVKE0wl&lang=zh'
+      link: 'https://ysxwyzl.4dage.com/4dwall/spg.html?m=KJ-hEnSvVKE0wl&lang=zh',
+      code: 'KJ-hEnSvVKE0wl',
+      oldNum: 0,
+      newNum: 0,
+      changeSta: true,
+      loc: 1
+    },
+    {
+      id: 1,
+      name: '灵影仙踪',
+      partOf: '上海博物馆',
+      link: 'https://ysxwyzl.4dage.com/4dwall/spg.html?m=SG-Yu3JBqaVsxP&lang=zh',
+      code: 'SG-Yu3JBqaVsxP',
+      oldNum: 0,
+      newNum: 0,
+      changeSta: true,
+      loc: 1
     }
+
     // {
     //   id: 3,
     //   name: '"宜子孙--汉代玉器集萃"展',

展示端/src/pages/A1home/index.module.scss

@@ -48,6 +48,17 @@
             white-space: break-spaces;
             word-wrap: break-word;
           }
+          .A1_1row3 {
+            display: flex;
+            align-items: center;
+            margin-top: 3px;
+            color: #9a9a9a;
+            transition: all 1s;
+          }
+          .A1_1row3Ac {
+            color: var(--themeColor);
+            font-weight: 700;
+          }
         }
       }
     }

展示端/src/pages/A1home/index.tsx

@@ -1,13 +1,87 @@
-import React, { useCallback } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import { Swiper } from 'antd-mobile'
-import { myInfo } from '@/utils/history'
+import { A1listType, myInfo } from '@/utils/history'
+import classNames from 'classnames'
+import { EyeOutlined } from '@ant-design/icons'
+
+import CountUp from 'react-countup'
+import { A1_APIgetNumList } from '@/store/action/A1list'
+
+type NumListRowType = {
+  num: string
+  showVisit: number
+}
+
 function A1home() {
   // 新窗口打开页面
   const openPage = useCallback((url: string) => {
     window.open(url, '_self')
   }, [])
 
+  const [list, setList] = useState<A1listType[]>([])
+
+  const listRef = useRef<A1listType[]>([])
+  useEffect(() => {
+    listRef.current = list
+  }, [list])
+
+  // 获取全部访问量
+  const getNumListFu = useCallback(async (base?: boolean) => {
+    // 参数 base =》第一次进页面
+
+    const res = await A1_APIgetNumList()
+    if (res.code === 0) {
+      const arr: NumListRowType[] = res.data
+
+      const listTemp = [...myInfo.swArr]
+
+      arr.forEach(v1 => {
+        listTemp.forEach(v2 => {
+          if (v2.code === v1.num) {
+            if (!base) {
+              const listRefNum = listRef.current.find(c => c.code === v1.num)!.newNum
+              v2.oldNum = listRefNum
+              if (listRefNum !== v1.showVisit) v2.changeSta = true
+            }
+            v2.newNum = v1.showVisit
+          }
+        })
+      })
+
+      setList(listTemp)
+    }
+  }, [])
+
+  useEffect(() => {
+    getNumListFu(true)
+  }, [getNumListFu])
+
+  // 定时发送
+  const timeRef = useRef(-1)
+
+  useEffect(() => {
+    clearInterval(timeRef.current)
+    timeRef.current = window.setInterval(() => {
+      getNumListFu()
+    }, 120000)
+    return () => {
+      clearInterval(timeRef.current)
+    }
+  }, [getNumListFu])
+
+  // 动画是否在进行中
+  const moveStaFu = useCallback(
+    (code: string) => {
+      const arr = [...list]
+      list.forEach(v => {
+        if (v.changeSta && v.code === code) v.changeSta = false
+      })
+      setList(arr)
+    },
+    [list]
+  )
+
   return (
     <div className={styles.A1home}>
       <div className='A1top'>
@@ -25,20 +99,33 @@ function A1home() {
       <div className='A1box1'>
         <div className='A1tit'>展览精选</div>
         <div className='A1_1list'>
-          {myInfo.swArr.map(item => (
-            <div className='A1_1row' key={item.id}>
-              <img
-                src={`./myData/img/${item.id}s.jpg`}
-                alt=''
-                onClick={() => openPage(item.link)}
-              />
-              <div className='A1_1row1'>{item.name}</div>
-              <div className='A1_1row2'>{item.partOf}</div>
-            </div>
-          ))}
+          {list
+            .filter(v => v.loc === 1)
+            .map(item => (
+              <div className='A1_1row' key={item.id}>
+                <img
+                  src={`./myData/img/${item.id}s.jpg`}
+                  alt=''
+                  onClick={() => openPage(item.link)}
+                />
+                <div className='A1_1row1'>{item.name}</div>
+                <div className='A1_1row2'>{item.partOf}</div>
+                <div
+                  className={classNames('A1_1row3', item.changeSta ? 'A1_1row3Ac' : '')}
+                >
+                  <EyeOutlined rev={undefined} />
+                  &nbsp;
+                  <CountUp
+                    onEnd={() => moveStaFu(item.code)}
+                    start={item.oldNum}
+                    end={item.newNum}
+                  />
+                </div>
+              </div>
+            ))}
         </div>
       </div>
-
+      {/* <div onClick={() => getNumListFu()}>15456465</div> */}
       <div className='A1BottomTxt'>持续上新，敬请期待</div>
     </div>
   )

展示端/src/store/action/A1list.txt

@@ -2,6 +2,8 @@
  * 展馆预约记录-列表
  */
 
+import http from '@/utils/http'
+
 // export const A1_APIgetList = (data: any): any => {
 //   return async (dispatch: AppDispatch) => {
 //     const res = await http.post('cms/applyExhibition/pageList', data)
@@ -20,9 +22,9 @@
 //   }
 // }
 
-// /**
-//  * 展馆预约记录-核销
-//  */
-// export const A1_APIupdate = (id: number, status: 0 | 1) => {
-//   return http.get(`cms/applyExhibition/update/${id}/${status}`)
-// }
+/**
+ * 获取全部访问量
+ */
+export const A1_APIgetNumList = () => {
+  return http.get('visit/getList')
+}

展示端/src/utils/history.ts

@@ -13,13 +13,21 @@ export const isMobileFu = () => {
   } else return false
 }
 
+export type A1listType = {
+  id: number
+  name: string
+  partOf: string
+  link: string
+  code: string
+  oldNum: number
+  newNum: number
+  changeSta: boolean
+  loc: 1
+  type?: 'x1' | 'x2'
+}
+
 type MyInfoType = {
-  swArr: {
-    id: number
-    name: string
-    partOf: string
-    link: string
-  }[]
+  swArr: A1listType[]
 }
 
 export const myInfo: MyInfoType = infoTemo

展示端/src/utils/http.ts

@@ -7,13 +7,16 @@ import { domShowFu } from './domShow'
 
 const envFlag = process.env.NODE_ENV === 'development'
 
-const baseUrlTemp = 'https://sit-hqbooking.4dage.com' // 测试环境
-// const baseUrlTemp = 'http://192.168.20.61:8091' // 线下环境
+const baseUrlTemp = 'https://sit-cctvyunzhan.4dage.com' // 测试环境
+// const baseUrlTemp = 'http://192.168.20.61:8097' // 线下环境
 
 const baseFlag = baseUrlTemp.includes('https://')
 
 // 请求基地址
-export const baseURL = envFlag ? `${baseUrlTemp}${baseFlag ? '' : '/api/'}` : ''
+export const baseURL = envFlag
+  ? `${baseUrlTemp}${baseFlag ? '' : '/api/'}`
+  : // ''
+    baseUrlTemp
 
 // 处理  类型“AxiosResponse<any, any>”上不存在属性“code”
 declare module 'axios' {

展示端/yarn.lock

@@ -3745,6 +3745,11 @@
     "path-type" "^4.0.0"
     "yaml" "^1.10.0"
 
+"countup.js@^2.8.0":
+  "integrity" "sha512-f7xEhX0awl4NOElHulrl4XRfKoNH3rB+qfNSZZyjSZhaAoUk6elvhH+MNxMmlmuUJ2/QNTWPSA7U4mNtIAKljQ=="
+  "resolved" "https://registry.npmmirror.com/countup.js/-/countup.js-2.8.0.tgz"
+  "version" "2.8.0"
+
 "cross-spawn@^7.0.2", "cross-spawn@^7.0.3":
   "integrity" "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w=="
   "resolved" "https://registry.npmmirror.com/cross-spawn/-/cross-spawn-7.0.3.tgz"
@@ -8396,6 +8401,13 @@
   dependencies:
     "semver" "^5.6.0"
 
+"react-countup@^6.5.3":
+  "integrity" "sha512-udnqVQitxC7QWADSPDOxVWULkLvKUWrDapn5i53HE4DPRVgs+Y5rr4bo25qEl8jSh+0l2cToJgGMx+clxPM3+w=="
+  "resolved" "https://registry.npmmirror.com/react-countup/-/react-countup-6.5.3.tgz"
+  "version" "6.5.3"
+  dependencies:
+    "countup.js" "^2.8.0"
+
 "react-dev-utils@^12.0.1":
   "integrity" "sha512-84Ivxmr17KjUupyqzFode6xKhjwuEJDROWKJy/BthkL7Wn6NJ8h4WE6k/exAv6ImS+0oZLRRW5j/aINMHyeGeQ=="
   "resolved" "https://registry.npmmirror.com/react-dev-utils/-/react-dev-utils-12.0.1.tgz"
@@ -8582,7 +8594,7 @@
     "classnames" "2.3.1"
     "tiny-invariant" "1.2.0"
 
-"react@*", "react@^0.14.0 || ^15.0.0-rc || ^16.0.0-rc || ^16.0.0", "react@^15.0.2 || ^16.0.0-rc || ^16.0.0 || ^17.0.0 || ^18.0.0", "react@^15.0.2|| ^16.0.0-rc || ^16.0.0", "react@^16.0.0", "react@^16.4.1", "react@^16.8 || ^17.0 || ^18.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^18.0.0", "react@^18.2.0", "react@>= 16", "react@>= 16.8.0", "react@>=15", "react@>=16.0.0", "react@>=16.11.0", "react@>=16.9.0":
+"react@*", "react@^0.14.0 || ^15.0.0-rc || ^16.0.0-rc || ^16.0.0", "react@^15.0.2 || ^16.0.0-rc || ^16.0.0 || ^17.0.0 || ^18.0.0", "react@^15.0.2|| ^16.0.0-rc || ^16.0.0", "react@^16.0.0", "react@^16.4.1", "react@^16.8 || ^17.0 || ^18.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^18.0.0", "react@^18.2.0", "react@>= 16", "react@>= 16.3.0", "react@>= 16.8.0", "react@>=15", "react@>=16.0.0", "react@>=16.11.0", "react@>=16.9.0":
   "integrity" "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ=="
   "resolved" "https://registry.npmmirror.com/react/-/react-18.2.0.tgz"
   "version" "18.2.0"