fix: 大屏增加loading效果

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

@@ -13,14 +13,16 @@ const DistributorEnquire = ({ data, loading, dispatch }) => {
     }));
   };
   return (
-    <div className={styles.common}>
-      <div className={styles.common_header}>
-        <PanelNav title="供应链企业地区分布" />
+    <Spin spinning={loading}>
+      <div className={styles.common}>
+        <div className={styles.common_header}>
+          <PanelNav title="供应链企业地区分布" />
+        </div>
+        <div className={styles.common_content}>
+          <EnquirePieChart data={parsedata(data)} />
+        </div>
       </div>
-      <div className={styles.common_content}>
-        <EnquirePieChart data={parsedata(data)} />
-      </div>
-    </div>
+    </Spin>
   );
 };
 

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

@@ -60,21 +60,23 @@ const EnquireBasic = ({ data, options, current, loading, dispatch }) => {
   };
 
   return (
-    <div className={styles.common}>
-      <div className={styles.common_header}>
-        <PanelNav title="询盘概况" />
-        <div className={styles.common_header_conditions}>
-          <RadioButtonGroup
-            options={options}
-            label={current}
-            onChange={onChange}
-          />
+    <Spin spinning={loading}>
+      <div className={styles.common}>
+        <div className={styles.common_header}>
+          <PanelNav title="询盘概况" />
+          <div className={styles.common_header_conditions}>
+            <RadioButtonGroup
+              options={options}
+              label={current}
+              onChange={onChange}
+            />
+          </div>
+        </div>
+        <div className={styles.common_content}>
+          <TrafficLineChart {...parseEnquireData(data)} />
         </div>
       </div>
-      <div className={styles.common_content}>
-        <TrafficLineChart {...parseEnquireData(data)} />
-      </div>
-    </div>
+    </Spin>
   );
 };
 

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

@@ -1,30 +1,34 @@
 import React from "react";
+import { Spin } from "antd";
 import { connect } from "dva";
 import WorldMap from "./WorldMap";
 import styles from "../styles/common.less";
 
 const MapContainer = ({
   data,
-  options,
-  current,
   loading,
-  currentSite,
-  dispatch,
 }) => {
   const parseData = (mapData) => {
     return mapData.map((item) => ({
       name: item.city,
-      value: [item.longitude ?? 116.4074, item.latitude ?? 39.9042, item.memberNum],
+      value: [
+        item.longitude ?? 116.4074,
+        item.latitude ?? 39.9042,
+        item.memberNum,
+      ],
     }));
   };
 
   return (
-    <div className={styles.common}>
-      <WorldMap data={parseData(data)} />
-    </div>
+    <Spin spinning={loading}>
+      <div className={styles.common}>
+        <WorldMap data={parseData(data)} />
+      </div>
+    </Spin>
   );
 };
 
 export default connect(({ bigscreen }) => ({
   data: bigscreen.mapContainerData.data,
+  loading: bigscreen.mapContainerData.loading
 }))(MapContainer);

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

@@ -15,14 +15,16 @@ const OverSeasEnquire = ({ data, loading, dispatch }) => {
   };
 
   return (
-    <div className={styles.common}>
-      <div className={styles.common_header}>
-        <PanelNav title="海外询盘地区分布" />
+    <Spin spinning={loading}>
+      <div className={styles.common}>
+        <div className={styles.common_header}>
+          <PanelNav title="海外询盘地区分布" />
+        </div>
+        <div className={styles.common_content}>
+          <EnquirePieChart data={parsedata(data)} />
+        </div>
       </div>
-      <div className={styles.common_content}>
-        <EnquirePieChart data={parsedata(data)} />
-      </div>
-    </div>
+    </Spin>
   );
 };
 

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

@@ -6,7 +6,7 @@ import styles from "../styles/overview.less";
 
 const OverView = ({ overviewData }) => {
   return (
-    // <Spin spinning={overviewData.loading}>
+    <Spin spinning={overviewData.loading}>
       <div className={styles.overview}>
         <img
           className={styles.overview_bg}
@@ -79,7 +79,7 @@ const OverView = ({ overviewData }) => {
           <span className={styles.overview_member_title}>会员地域分布</span>
         </div>
       </div>
-    // </Spin>
+    </Spin>
   );
 };
 

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

@@ -70,21 +70,23 @@ const PortalTraffic = ({ data, options, current, loading, dispatch }) => {
   };
 
   return (
-    <div className={styles.common}>
-      <div className={styles.common_header}>
-        <PanelNav title="门户流量" />
-        <div className={styles.common_header_conditions}>
-          <RadioButtonGroup
-            options={options}
-            label={current}
-            onChange={onChange}
-          />
+    <Spin spinning={loading}>
+      <div className={styles.common}>
+        <div className={styles.common_header}>
+          <PanelNav title="门户流量" />
+          <div className={styles.common_header_conditions}>
+            <RadioButtonGroup
+              options={options}
+              label={current}
+              onChange={onChange}
+            />
+          </div>
+        </div>
+        <div className={styles.common_content}>
+          <TrafficLineChart {...parseTrafficData(data)} />
         </div>
       </div>
-      <div className={styles.common_content}>
-        <TrafficLineChart {...parseTrafficData(data)} />
-      </div>
-    </div>
+    </Spin>
   );
 };
 

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

@@ -27,25 +27,27 @@ const SearchRankCloud = ({
   const title = currentSite === "1" ? "海外" : "分销商";
 
   const parseData = (keywords) => {
-    return keywords.map(item => decodeURIComponent(item))
-  }
+    return keywords.map((item) => decodeURIComponent(item));
+  };
 
   return (
-    <div className={styles.common}>
-      <div className={styles.common_header}>
-        <PanelNav title={title + "门户搜索关键词排行"} />
-        <div className={styles.common_header_conditions}>
-          <RadioButtonGroup
-            options={options}
-            label={current}
-            onChange={onChange}
-          />
+    <Spin spinning={loading}>
+      <div className={styles.common}>
+        <div className={styles.common_header}>
+          <PanelNav title={title + "门户搜索关键词排行"} />
+          <div className={styles.common_header_conditions}>
+            <RadioButtonGroup
+              options={options}
+              label={current}
+              onChange={onChange}
+            />
+          </div>
+        </div>
+        <div className={styles.common_content}>
+          <WordCloud data={parseData(data)} />
         </div>
       </div>
-      <div className={styles.common_content}>
-        <WordCloud data={parseData(data)}></WordCloud>
-      </div>
-    </div>
+    </Spin>
   );
 };
 

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

@@ -60,21 +60,23 @@ const StoreTraffic = ({
   ];
 
   return (
-    <div className={styles.common}>
-      <div className={styles.common_header}>
-        <PanelNav title={title + "店铺流量排行"} />
-        <div className={styles.common_header_conditions}>
-          <RadioButtonGroup
-            options={options}
-            label={current}
-            onChange={onChange}
-          />
+    <Spin spinning={loading}>
+      <div className={styles.common}>
+        <div className={styles.common_header}>
+          <PanelNav title={title + "店铺流量排行"} />
+          <div className={styles.common_header_conditions}>
+            <RadioButtonGroup
+              options={options}
+              label={current}
+              onChange={onChange}
+            />
+          </div>
+        </div>
+        <div className={styles.common_content}>
+          <TableChart data={data} columns={columns} />
         </div>
       </div>
-      <div className={styles.common_content}>
-        <TableChart data={data} columns={columns} />
-      </div>
-    </div>
+    </Spin>
   );
 };
 

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

@@ -1,4 +1,5 @@
 import React from "react";
+import { Spin } from 'antd';
 import { connect } from "dva";
 import PanelNav from "./PanelNav";
 import BarChart from "./BarChart";
@@ -21,14 +22,16 @@ const AddMemberTrend = ({ data, loading, dispatch }) => {
   };
 
   return (
-    <div className={styles.common}>
-      <div className={styles.common_header}>
-        <PanelNav title="新增会员趋势" />
+    <Spin spinning={loading}>
+      <div className={styles.common}>
+        <div className={styles.common_header}>
+          <PanelNav title="新增会员趋势" />
+        </div>
+        <div className={styles.common_content}>
+          <BarChart {...parseData(data)} />
+        </div>
       </div>
-      <div className={styles.common_content}>
-        <BarChart { ...parseData(data) }/>
-      </div>
-    </div>
+    </Spin>
   );
 };
 

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

@@ -1,4 +1,5 @@
 import React from "react";
+import { Spin } from "antd";
 import { connect } from "dva";
 import PanelNav from "./PanelNav";
 import BarChart from "./BarChart";
@@ -20,14 +21,16 @@ const AddProductTrend = ({ data, loading, dispatch }) => {
     };
   };
   return (
-    <div className={styles.common}>
-      <div className={styles.common_header}>
-        <PanelNav title="新增商品趋势" />
+    <Spin spinning={loading}>
+      <div className={styles.common}>
+        <div className={styles.common_header}>
+          <PanelNav title="新增商品趋势" />
+        </div>
+        <div className={styles.common_content}>
+          <BarChart {...parseData(data)} />
+        </div>
       </div>
-      <div className={styles.common_content}>
-        <BarChart {...parseData(data)} />
-      </div>
-    </div>
+    </Spin>
   );
 };
 

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

@@ -11,7 +11,7 @@
   background: url("../../../assets/bigscreen/screen-bg.png") no-repeat center
     center;
   background-size: cover;
-  background-color: #122A52;
+  background-color: #122a52;
 
   .fullscreenBtn {
     position: absolute;
@@ -31,6 +31,35 @@
       background: rgba(0, 0, 0, 0.9);
     }
   }
+
+  :global {
+    .ant-spin-nested-loading {
+      width: 100%;
+      height: 100%;
+    }
+    .ant-spin-container {
+      width: 100%;
+      height: 100%;
+
+      &::after {
+        display: none;
+      }
+    }
+
+    .ant-spin-nested-loading > div > .ant-spin {
+      top: 85px;
+    }
+
+    .ant-spin-dot {
+      width: 40px;
+      height: 40px;
+    }
+
+    .ant-spin-dot-item {
+      width: 20px;
+      height: 20px;
+    }
+  }
 }
 
 .screenContainer {

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

@@ -347,7 +347,7 @@ export default {
         .value;
       payload = { ...payload, ...condition };
       yield put({
-        type: "set",
+        type: "setSearchRankData",
         payload: { loading: true },
       });
       const response = yield call(