feat: 数据汇总模块开发

xinkeaboard-admin/src/pages/statistics/bigscreen/components/CountUp.js

@@ -14,6 +14,15 @@ class CountUp extends React.Component {
     this.animateCount();
   }
 
+  componentDidUpdate(prevProps) {
+    // 如果 end 改变了，就重新动画
+    if (prevProps.end !== this.props.end) {
+      this.start = this.state.value; // 从当前值开始动画
+      cancelAnimationFrame(this.rafId);
+      this.animateCount();
+    }
+  }
+
   componentWillUnmount() {
     cancelAnimationFrame(this.rafId);
   }
@@ -25,7 +34,9 @@ class CountUp extends React.Component {
     const step = (now) => {
       const elapsed = now - startTime;
       const progress = Math.min(elapsed / duration, 1); // 限制在 0~1
-      const currentValue = Math.floor(progress * (end - this.start) + this.start);
+      const currentValue = Math.floor(
+        progress * (end - this.start) + this.start
+      );
       this.setState({ value: currentValue });
 
       if (progress < 1) {
@@ -37,7 +48,11 @@ class CountUp extends React.Component {
   }
 
   render() {
-    return <div className={this.props.className}>{this.state.value.toLocaleString()}</div>;
+    return (
+      <div className={this.props.className}>
+        {this.state.value.toLocaleString()}
+      </div>
+    );
   }
 }
 

xinkeaboard-admin/src/pages/statistics/bigscreen/components/Overview.js

@@ -1,19 +1,13 @@
 import React from "react";
+import { Spin } from "antd";
+import { connect } from "dva";
 import CountUp from "./CountUp";
 import styles from "../styles/overview.less";
 
-class OverView extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {};
-  }
-
-  componentDidMount() {}
-
-  componentDidUpdate(prevProps) {}
-
-  render() {
-    return (
+const OverView = ({ overviewData }) => {
+  console.log(overviewData, 'overviewData====');
+  return (
+    <Spin spinning={overviewData.loading}>
       <div className={styles.overview}>
         <img
           className={styles.overview_bg}
@@ -26,7 +20,7 @@ class OverView extends React.Component {
               className={styles.item_img}
               src={require("../../../../assets/bigscreen/member.png")}
             />
-            <CountUp className={styles.item_value} end={123456} />
+            <CountUp className={styles.item_value} end={overviewData.data.memberNum} />
             <div className={styles.item_label}>会员</div>
           </div>
           <div className={styles.overview_content_item}>
@@ -35,7 +29,7 @@ class OverView extends React.Component {
               src={require("../../../../assets/bigscreen/dis.png")}
             />
 
-            <CountUp className={styles.item_value} end={123456} />
+            <CountUp className={styles.item_value} end={overviewData.data.distributorNum} />
             <div className={styles.item_label}>分销商</div>
           </div>
           <div className={styles.overview_content_item}>
@@ -43,7 +37,7 @@ class OverView extends React.Component {
               className={styles.item_img}
               src={require("../../../../assets/bigscreen/store.png")}
             />
-            <CountUp className={styles.item_value} end={123456} />
+            <CountUp className={styles.item_value} end={overviewData.data.storeNum} />
             <div className={styles.item_label}>店铺</div>
           </div>
           <div className={styles.overview_content_item}>
@@ -51,7 +45,7 @@ class OverView extends React.Component {
               className={styles.item_img}
               src={require("../../../../assets/bigscreen/dis.png")}
             />
-            <CountUp className={styles.item_value} end={123456} />
+            <CountUp className={styles.item_value} end={overviewData.data.serviceProviderNum} />
             <div className={styles.item_label}>服务商</div>
           </div>
           <div className={styles.overview_content_item}>
@@ -59,13 +53,15 @@ class OverView extends React.Component {
               className={styles.item_img}
               src={require("../../../../assets/bigscreen/member.png")}
             />
-            <CountUp className={styles.item_value} end={123456} />
+            <CountUp className={styles.item_value} end={overviewData.data.productNum} />
             <div className={styles.item_label}>商品总数</div>
           </div>
         </div>
       </div>
-    );
-  }
-}
+    </Spin>
+  );
+};
 
-export default OverView;
+export default connect(({ bigscreen }) => ({
+  overviewData: bigscreen.overviewData,
+}))(OverView);

xinkeaboard-admin/src/pages/statistics/bigscreen/index.js

@@ -1,10 +1,14 @@
 import React from "react";
+import { connect } from "dva";
 import styles from "./index.less";
 import PanelBlock from "./components/PanelBlock";
 import HeaderContent from "./components/HeadContent";
 import WordCloud from "@/components/WordCloud";
 import OverView from "./components/Overview";
 
+@connect(({ bigscreen }) => ({
+  bigscreen,
+}))
 class BigScreen extends React.Component {
   constructor(props) {
     super(props);
@@ -19,6 +23,10 @@ class BigScreen extends React.Component {
   }
 
   componentDidMount() {
+    const { dispatch } = this.props;
+    dispatch({
+      type: "bigscreen/load_data",
+    });
     this.setScale();
     window.addEventListener("resize", this.debounceSetScale);
 
@@ -137,13 +145,13 @@ class BigScreen extends React.Component {
               {/* <PanelBlock height="200px" /> */}
               <PanelBlock />
               <PanelBlock />
-              <PanelBlock/>
+              <PanelBlock />
             </div>
 
             {/* 中间 */}
             <div className={styles.contentPanelCenter}>
               <PanelBlock height="456px">
-                <OverView></OverView>
+                <OverView />
               </PanelBlock>
               <PanelBlock />
               <PanelBlock height="500px" flexDirection="row">
@@ -154,7 +162,7 @@ class BigScreen extends React.Component {
 
             {/* 右侧 */}
             <div className={styles.contentPanelRight}>
-              <PanelBlock title='sdsdsd'>
+              <PanelBlock title="sdsdsd">
                 <WordCloud />
               </PanelBlock>
               <PanelBlock />

xinkeaboard-admin/src/pages/statistics/models/bigscreen.js

@@ -2,16 +2,52 @@ import { sldCommonService } from "@/utils/utils";
 export default {
   namespace: "bigscreen",
 
-  state: {},
+  state: {
+    overviewData: {
+      loading: false,
+      data: {},
+    },
+  },
 
   effects: {
-    // *change_manager_pwd({ payload, callback }, { call }) {
-    //   const response = yield call(sldCommonService, payload,'post','v3/system/admin/adminUser/updatePwd');
-    //   if (callback) callback(response);
-    // },
+    // 平台数据汇总
+    *load_overview({ payload }, { call, put }) {
+      yield put({
+        type: "setOverviewData",
+        payload: { loading: true },
+      });
+      const response = yield call(
+        sldCommonService,
+        payload,
+        "get",
+        "v3/statistics/screen/analysis/data/summary"
+      );
+      yield put({
+        type: "setOverviewData",
+        payload: { data: response.data, loading: false },
+      });
+    },
+
+    // 初始化数据
+    *load_data({ payload }, { put, call }) {
+      // 调用 load_data
+      yield put.resolve({
+        type: "load_overview",
+      });
+    },
   },
 
-  reducers: {},
+  reducers: {
+    setOverviewData(state, { payload }) {
+      return {
+        ...state,
+        overviewData: {
+          ...state.overviewData, // 保留 config 里其他字段
+          ...payload, // 覆盖需要更新的字段
+        },
+      };
+    },
+  },
 
   subscriptions: {
     setup({ history }) {