up

src/pages/Hot/index.tsx

@@ -14,6 +14,12 @@ import { LabelLayout } from "echarts/features";
 import { Button, Empty, message, Select, Tooltip } from "antd";
 import ExportJsonExcel from "js-export-excel";
 import dayjs from "dayjs";
+import {
+  getHotGoodsAPI,
+  getHotGoodsLikeAPI,
+  getHotWallAPI,
+} from "@/store/action/hot";
+import { HotGoodsLikeAPIType, HotWallAPIType } from "@/types";
 
 echarts.use([
   GridComponent,
@@ -27,13 +33,12 @@ echarts.use([
 ]);
 
 function Hot() {
+  const [goodNum, setGoodNum] = useState(0);
+  const [wallNum, setWallNum] = useState(0);
+
   // 生成4个饼图的方法
   const echFu2 = useCallback(
-    (
-      dom: any,
-      data: { value: number; name: string }[],
-      data2: { name: string; icon: string }[]
-    ) => {
+    (dom: any, data: { value: number; name: string }[]) => {
       let chartDom2: any = document.querySelector(dom);
       let myChart2 = echarts.init(chartDom2);
       let option2 = {
@@ -44,7 +49,7 @@ function Hot() {
           orient: "vertical",
           top: "center",
           right: 30,
-          data: data2,
+          data,
           formatter: (name: string) => {
             let resName = "";
             data.forEach((v) => {
@@ -88,6 +93,16 @@ function Hot() {
 
   // 获取图表数据
   const getHotInfo = useCallback(async () => {
+    const res = await getHotWallAPI();
+    const resData1: HotWallAPIType[] = res.data.reverse();
+
+    let wallNumTemp = 0;
+    resData1.forEach((v) => {
+      wallNumTemp += v.pcsVisit;
+    });
+
+    setWallNum(wallNumTemp);
+
     // 设置折线图图表
     const chartDom1: any = document.querySelector(".hotEch1")!;
     const myChart1 = echarts.init(chartDom1);
@@ -102,22 +117,7 @@ function Hot() {
 
       xAxis: {
         type: "category",
-        data: [
-          "1月1日",
-          "1月2日",
-          "1月3日",
-          "1月4日",
-          "1月5日",
-          "1月6日",
-          "1月7日",
-          "1月8日",
-          "1月9日",
-          "1月10日",
-          "1月11日",
-          "1月12日",
-          "1月13日",
-          "1月14日",
-        ],
+        data: resData1.map((v) => v.today),
         axisLine: {
           show: false, //隐藏X轴
         },
@@ -133,10 +133,7 @@ function Hot() {
       },
       series: [
         {
-          data: [
-            150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147,
-            100,
-          ],
+          data: resData1.map((v) => v.pcsVisit),
           type: "line",
         },
       ],
@@ -153,25 +150,34 @@ function Hot() {
     };
     option1 && myChart1.setOption(option1);
 
-    const data = [
-      { value: 1048, name: "石头" },
-      { value: 735, name: "玉器" },
-      { value: 580, name: "陶器" },
-      { value: 484, name: "快乐的小青蛙" },
-      { value: 300, name: "其他" },
-    ];
-    const data2 = [
-      { icon: "circle", name: "石头" },
-      { icon: "circle", name: "玉器" },
-      { icon: "circle", name: "陶器" },
-      { icon: "circle", name: "快乐的小青蛙" },
-      { icon: "circle", name: "其他" },
-    ];
+    const res2 = await getHotGoodsAPI();
+
+    setGoodNum(res2.data.total);
+
+    const obj: any = res2.data;
+
+    const newObj: any = {
+      age: [],
+      level: [],
+      source: [],
+      texture: [],
+    };
+
+    for (const i in obj) {
+      if (i !== "total") {
+        newObj[i] = obj[i].map((v: any) => ({
+          icon: "circle",
+          value: v.pcs,
+          name: v.type,
+        }));
+      }
+    }
+
     // 4个饼图
-    echFu2(".hotEch2", data, data2);
-    echFu2(".hotEch3", data, data2);
-    echFu2(".hotEch4", data, data2);
-    echFu2(".hotEch5", data, data2);
+    echFu2(".hotEch2", newObj["texture"]);
+    echFu2(".hotEch3", newObj["age"]);
+    echFu2(".hotEch4", newObj["level"]);
+    echFu2(".hotEch5", newObj["source"]);
   }, [echFu2]);
 
   useEffect(() => {
@@ -179,56 +185,22 @@ function Hot() {
   }, [getHotInfo]);
 
   // 馆藏点赞的时间筛选
-  const [value, setValue] = useState(2);
+  const [value, setValue] = useState<1 | 7 | 30 | "">(30);
+
+  // 馆藏点赞数据
+  const [likeData, setLikeData] = useState<HotGoodsLikeAPIType[]>([]);
+
+  // 获取馆藏点赞数据方法
+  const getGoodsLikeFu = useCallback(async (value: 1 | 7 | 30 | "") => {
+    const res = await getHotGoodsLikeAPI(value);
+    setLikeData(res.data);
+  }, []);
 
   useEffect(() => {
     const dom: any = document.querySelector(".hotRightMain");
     if (dom) dom.scrollTop = 0;
-    if (value === 0) {
-      setLikeData([
-        { name: "民国制林则徐手迹玻璃底片", num: 99 },
-        { name: "民国制林则徐手迹玻璃底片sssssssssssssssssssss", num: 99 },
-        { name: "民国制林则徐手迹玻璃底片", num: 99 },
-      ]);
-    }
-  }, [value]);
-
-  // 馆藏点赞数据
-  const [likeData, setLikeData] = useState([
-    { name: "民国制林则徐手迹玻璃底片", num: 99999 },
-    { name: "民国制林则徐手迹玻璃底片", num: 99 },
-    { name: "民国制林则徐手迹玻璃底片", num: 99 },
-    { name: "民国制林则徐手迹玻璃底片", num: 99 },
-    { name: "民国制林则徐手迹玻璃底片sssssssssssssssssssss", num: 99 },
-    { name: "民国制林则徐手迹玻璃底片", num: 99 },
-    { name: "民国制林则徐手迹玻璃底片", num: 99 },
-    { name: "民国制林则徐手迹玻璃底片", num: 99 },
-    { name: "民国制林则徐手迹玻璃底片", num: 99 },
-    { name: "民国制林则徐手迹玻璃底片", num: 99 },
-    { name: "民国制林则徐手迹玻璃底片", num: 99 },
-    { name: "民国制林则徐手迹玻璃底片", num: 99 },
-    { name: "民国制林则徐手迹玻璃底片", num: 99 },
-    { name: "民国制林则徐手迹玻璃底片", num: 99 },
-    { name: "民国制林则徐手迹玻璃底片", num: 99 },
-    { name: "民国制林则徐手迹玻璃底片", num: 99 },
-    { name: "民国制林则徐手迹玻璃底片", num: 99 },
-    { name: "民国制林则徐手迹玻璃底片", num: 99 },
-    { name: "民国制林则徐手迹玻璃底片", num: 99 },
-    { name: "民国制林则徐手迹玻璃底片", num: 99 },
-    { name: "民国制林则徐手迹玻璃底片", num: 99 },
-    { name: "民国制林则徐手迹玻璃底片", num: 99 },
-    { name: "民国制林则徐手迹玻璃底片", num: 99 },
-    { name: "民国制林则徐手迹玻璃底片", num: 99 },
-    { name: "民国制林则徐手迹玻璃底片", num: 99 },
-    { name: "民国制林则徐手迹玻璃底片", num: 99 },
-    { name: "民国制林则徐手迹玻璃底片", num: 99 },
-    { name: "民国制林则徐手迹玻璃底片", num: 99 },
-    { name: "民国制林则徐手迹玻璃底片", num: 99 },
-    { name: "民国制林则徐手迹玻璃底片", num: 99 },
-    { name: "民国制林则徐手迹玻璃底片", num: 99 },
-    { name: "民国制林则徐手迹玻璃底片", num: 99 },
-    { name: "民国制林则徐手迹玻璃底片", num: 99 },
-  ]);
+    getGoodsLikeFu(value);
+  }, [getGoodsLikeFu, value]);
 
   // 点击导出
   const deriveFu = useCallback(async () => {
@@ -246,7 +218,7 @@ function Hot() {
             };
           }),
           sheetName: name,
-          sheetFilter: ["index", "name", "num"],
+          sheetFilter: ["index", "name", "pcs"],
           sheetHeader: ["排序", "藏品名称", "点赞数"],
           columnWidths: [5, 20, 5],
         },
@@ -264,7 +236,7 @@ function Hot() {
         <div className="hotLeft_1">
           {/* 标题和！提示 */}
           <div className="hotTitle">
-            <div className="hotTitle1">万物墙使用热度 58</div>
+            <div className="hotTitle1">万物墙使用热度 {wallNum}</div>
             <div className="hotTitleInco">
               <Tooltip title=" 游客通过万物墙每查看一次数据，热度值记为1">
                 <div className="hotTitleInco1">
@@ -283,7 +255,7 @@ function Hot() {
         <div className="hotLeft_2">
           <div className="hotTitle">
             <div className="hotTitle1">馆藏统计</div>
-            <div className="hotTitle2">当前文物合计共 124 件</div>
+            <div className="hotTitle2">当前文物合计共 {goodNum} 件</div>
           </div>
           {/* 4个饼图 */}
           <div className="hotEch2Box">
@@ -318,22 +290,22 @@ function Hot() {
               style={{ width: 120 }}
               onChange={(e) => setValue(e)}
               options={[
-                { value: 0, label: "今日" },
-                { value: 1, label: "近七日" },
-                { value: 2, label: "近三十日" },
-                { value: 3, label: "所有时间" },
+                { value: 1, label: "今日" },
+                { value: 7, label: "近七日" },
+                { value: 30, label: "近三十日" },
+                { value: "", label: "所有时间" },
               ]}
             />
           </div>
         </div>
         {1 + 1 === 2 ? (
           <div className="hotRightMain">
-            {likeData.map((v, i) => (
+            {likeData.slice(0, 20).map((v, i) => (
               <div className="hotRightMainRow" key={i}>
                 <div className="hotRightMainRow1" title="666666">
                   {i + 1}. {v.name}
                 </div>
-                <div className="hotRightMainRow2">{v.num}</div>
+                <div className="hotRightMainRow2">{v.pcs}</div>
               </div>
             ))}
           </div>

src/store/action/hot.ts

@@ -1,8 +1,21 @@
 import http from "@/utils/http";
 /**
- * 获取热度统计
+ * 万物墙热度
  */
-// export const userLoginAPI = (data: any) => {
-//   return http.post("admin/login", { ...data });
-// };
+export const getHotWallAPI = () => {
+  return http.get("report/getHot");
+};
 
+/**
+ * 馆藏统计
+ */
+export const getHotGoodsAPI = () => {
+  return http.get("report/countGoods");
+};
+
+/**
+ * 馆藏统计
+ */
+export const getHotGoodsLikeAPI = (num: 1 | 7 | 30 | "") => {
+  return http.get(`report/getStar?num=${num}`);
+};

src/types/api/hot.d.ts

@@ -0,0 +1,17 @@
+export type HotWallAPIType = {
+  createTime: string;
+  creatorId: null;
+  creatorName: string;
+  id: number;
+  moduleId: null;
+  moduleType: string;
+  pcsStar: number;
+  pcsVisit: number;
+  today: string;
+  updateTime: string;
+};
+
+export type HotGoodsLikeAPIType ={
+  name:string
+  pcs:number
+}

src/types/index.d.ts

@@ -1,3 +1,4 @@
 export * from './store/login'
 export * from './api/wall'
 export * from './api/goods'
+export * from './api/hot'