Explorar o código

feat:展示端、后台增加浏览量相关功能和接口(一小时内只能统计一次浏览量)

aamin hai 1 ano
pai
achega
e405676daf

+ 30 - 0
houtai/src/pages/A9views/index.module.scss

@@ -0,0 +1,30 @@
+.A8Scene {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: rgb(239, 239, 239);
+
+  :global {
+    .ruleTop {
+      border-radius: 4px;
+      padding: 15px 20px 25px 20px;
+      background-color: #fff;
+      box-shadow: 3px 0px 10px 0px #d5d5d9;
+      position: relative;
+
+      .pageTitle {
+        .exportBtn {
+          width: 100px;
+          height: 40px;
+        }
+      }
+      .detail {
+        margin-top: 4%;
+        margin-left: 3%;
+        font-size: 16px;
+      }
+
+    }
+  }
+}

+ 28 - 0
houtai/src/pages/A9views/index.tsx

@@ -0,0 +1,28 @@
+import React, { useCallback, useEffect, useState } from "react";
+import styles from "./index.module.scss";
+import { getViewers } from "@/store/action/A8Scene";
+function Views() {
+  const [showViewer, setShowViewer] = useState(0);
+  const getList = useCallback(async () => {
+    const res = await getViewers(10);
+    if (res.code === 0) {
+      setShowViewer(res.data.visit);
+    }
+  }, []);
+
+  useEffect(() => {
+    getList();
+  }, [getList]);
+  return (
+    <div className={styles.A8Scene}>
+      <div className="ruleTop">
+        <div className="pageTitle">浏览量管理</div>
+        <div className="detail">浏览量数:{showViewer}</div>
+      </div>
+    </div>
+  );
+}
+
+const MemoViews = React.memo(Views);
+
+export default MemoViews;

+ 9 - 0
houtai/src/pages/Layout/index.tsx

@@ -75,6 +75,15 @@ function Layout() {
         done: true,
       },
 
+      {
+        id: 107,
+        name: "浏览量管理",
+        path: "/A9views",
+        Com: React.lazy(() => import("../A9views")),
+        inco: inco1,
+        done: true,
+      },
+
       
       {
         id: 104,

+ 7 - 0
houtai/src/store/action/A8Scene.ts

@@ -23,3 +23,10 @@ export const isTokenFlagAPI = () => {
   return http.get("/admin/checkLogin");
 };
 
+
+/**
+ * 获得浏览量
+ */
+export const getViewers = (id:number) => {
+  return http.get(`cms/scene/detail/${id}`);
+};

+ 28 - 0
zhengquan/src/App.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import axios from "axios";
 import { useStore } from "./stores/index";
 const store = useStore();
 
@@ -48,6 +49,32 @@ onMounted(() => {
     },
     true
   );
+
+  const baseAPIUrl = ref('')
+  // const baseAPIUrl = ref('http://192.168.20.61:8063')
+  // const baseAPIUrl = ref('https://sit-cnzhengquan.4dage.com')
+
+  // 统计访问量
+  if (localStorage.getItem('refreshTime')) {
+    var nowDate = Math.floor(Date.now() / 1000);
+    // @ts-ignore
+    var storedTimestamp = parseInt(localStorage.getItem('refreshTime'), 10);
+    console.log('时间差',Math.floor((nowDate - storedTimestamp)))
+    if (Math.floor((nowDate - storedTimestamp) / 60) > 60) {
+      // 发送请求并且更新本地缓存
+
+      axios.get(`${baseAPIUrl.value}/api/show/addVisit?id=10&type=visit`).then(() => {
+        // @ts-ignore
+        localStorage.setItem('refreshTime', nowDate);
+      })
+    }
+  } else {
+    axios.get(`${baseAPIUrl.value}/api/show/addVisit?id=10&type=visit`).then(() => {
+      // @ts-ignore
+      localStorage.setItem('refreshTime', Math.floor(Date.now() / 1000));
+    })
+
+  }
 })
 </script>
 
@@ -60,6 +87,7 @@ onMounted(() => {
   font-family: 'AlibabaPuHuiTi2.0-105Heavy';
   src: url('./assets/fonts/AlibabaPuHuiTi2.0-105Heavy.ttf');
 }
+
 @font-face {
   font-family: 'AlibabaPuHuiTi2.0-75SemiBold';
   src: url('./assets/fonts/AlibabaPuHuiTi2.0-75SemiBold.ttf');