fix: 调整大屏为脱离文档流布局

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

@@ -13,6 +13,7 @@ class PanelBlock extends React.Component {
       justifyContent,
       marginBottom,
       marginRight,
+      styleObj
     } = this.props;
 
     const style = {
@@ -23,6 +24,7 @@ class PanelBlock extends React.Component {
       justifyContent: justifyContent ?? "center",
       marginBottom: marginBottom ?? "0",
       marginRight: marginRight ?? "0",
+      ...styleObj
     };
 
     return (

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

@@ -159,17 +159,42 @@ class BigScreen extends React.Component {
             {/* 左侧 */}
             <div className={styles.contentPanelLeft}>
               {/* <PanelBlock height="200px" /> */}
-              <PanelBlock width="932px" height="560px" marginBottom="48px">
+              <PanelBlock
+                styleObj={{
+                  width: "932px",
+                  height: "560px",
+                  marginBottom: "48px",
+                  backgroundImage: `url(${require("../../../assets/bigscreen/box-1.png")})`,
+                }}
+              >
                 <PortalTraffic />
               </PanelBlock>
-              <PanelBlock width="932px" height="560px" marginBottom="48px">
+              <PanelBlock
+                width="932px"
+                height="560px"
+                marginBottom="48px"
+                styleObj={{
+                  backgroundImage: `url(${require("../../../assets/bigscreen/box-1.png")})`,
+                }}
+              >
                 <Enquire />
               </PanelBlock>
               <PanelBlock flexDirection="row" height="608px">
-                <PanelBlock>
+                <PanelBlock
+                  styleObj={{
+                    width: "434px",
+                    marginRight: "60px",
+                    backgroundImage: `url(${require("../../../assets/bigscreen/box-2.png")})`,
+                  }}
+                >
                   <OverseasEnquireLocation />
                 </PanelBlock>
-                <PanelBlock>
+                <PanelBlock
+                  styleObj={{
+                    width: "434px",
+                    backgroundImage: `url(${require("../../../assets/bigscreen/box-2.png")})`,
+                  }}
+                >
                   <DistributorEnquireLocation />
                 </PanelBlock>
               </PanelBlock>
@@ -186,10 +211,21 @@ class BigScreen extends React.Component {
               </PanelBlock>
               <PanelBlock height="560px" marginBottom="48px" />
               <PanelBlock flexDirection="row" height="608px">
-                <PanelBlock width="822px" marginRight="64px">
+                <PanelBlock
+                  width="822px"
+                  marginRight="64px"
+                  styleObj={{
+                    backgroundImage: `url(${require("../../../assets/bigscreen/box-3.png")})`,
+                  }}
+                >
                   <AddMemberTrend />
                 </PanelBlock>
-                <PanelBlock width="822px">
+                <PanelBlock
+                  width="822px"
+                  styleObj={{
+                    backgroundImage: `url(${require("../../../assets/bigscreen/box-3.png")})`,
+                  }}
+                >
                   <AddProductTrend />
                 </PanelBlock>
               </PanelBlock>
@@ -197,10 +233,23 @@ class BigScreen extends React.Component {
 
             {/* 右侧 */}
             <div className={styles.contentPanelRight}>
-              <PanelBlock height="864px" width="932px" marginBottom="48px">
+              <PanelBlock
+                height="864px"
+                width="932px"
+                marginBottom="68px"
+                styleObj={{
+                  backgroundImage: `url(${require("../../../assets/bigscreen/box-4.png")})`,
+                }}
+              >
                 <SearchRankCloud />
               </PanelBlock>
-              <PanelBlock height="864px" width="932px" />
+              <PanelBlock
+                height="864px"
+                width="932px"
+                styleObj={{
+                  backgroundImage: `url(${require("../../../assets/bigscreen/box-4.png")})`,
+                }}
+              />
             </div>
 
             <div className={styles.mapContainer}>{"ss"}</div>

xinkeaboard-admin/src/pages/statistics/bigscreen/styles/common.less

@@ -3,6 +3,7 @@
   width: 100%;
   height: 100%;
   display: flex;
+  padding: 20px 10px 0 10px;
   flex-direction: column;
 }
 

xinkeaboard-admin/src/pages/statistics/bigscreen/styles/panel_block.less

@@ -13,7 +13,9 @@
   align-items: center;
   height: 100%;
   box-sizing: border-box;
-  z-index: 2000;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
   // margin-bottom: 10px;
   // border: 4px dashed #fff;
 }

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

@@ -334,10 +334,10 @@ export default {
     // 门户关键词搜索
     *load_search_rank({ payload }, { put, call, select }) {
       const current = yield select(
-        (state) => state.bigscreen.storeTrafficData.current
+        (state) => state.bigscreen.searchRankData.current
       );
       const options = yield select(
-        (state) => state.bigscreen.storeTrafficData.options
+        (state) => state.bigscreen.searchRankData.options
       );
       const condition = options.filter((item) => item.label == current)[0]
         .value;
@@ -361,10 +361,10 @@ export default {
     // 店铺流量排行
     *load_store_traffic({ payload }, { put, call, select }) {
       const current = yield select(
-        (state) => state.bigscreen.searchRankData.current
+        (state) => state.bigscreen.storeTrafficData.current
       );
       const options = yield select(
-        (state) => state.bigscreen.searchRankData.options
+        (state) => state.bigscreen.storeTrafficData.options
       );
       const condition = options.filter((item) => item.label == current)[0]
         .value;