fix: 大屏布局调整

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

@@ -7,8 +7,8 @@ class Pie3DChart extends React.Component {
     super(props);
     this.chartRef = React.createRef();
     this.chartInstance = null;
-    this.startColor = [126, 206, 244]; // RGB 起点
-    this.endColor = [64, 50, 166]; // RGB 终点
+    this.endColor = [126, 206, 244]; // RGB 起点
+    this.startColor = [64, 50, 166]; // RGB 终点
   }
 
   componentDidMount() {
@@ -54,15 +54,22 @@ class Pie3DChart extends React.Component {
       tooltip: {
         trigger: "item",
         textStyle: {
-          fontSize: 28, // 设置字体大小
+          fontSize: 25, // 设置字体大小
           fontWeight: "bold", // 可选：加粗
           // color: "#fff", // 可选：字体颜色
         },
       },
       legend: {
-        itemGap: 35,
-        bottom: 60,
-        textStyle: { color: "#fff", fontSize: "16px" },
+        // type: "scroll",   // 关键
+        // itemGap: 15,
+        //  width: "90%", // 控制整体宽度
+        // height: 60,   // ⚡ 关键：高度大约容纳 3 行 (每行大约 18-20px)
+        bottom: 0,
+        //  width: "80%", // 限制宽度
+        textStyle: { color: "#fff", fontSize: "12px" },
+        formatter: function (name) {
+          return name.length > 6 ? name.slice(0, 6) + "…" : name;
+        }
       },
       grid: {
         left: "4%",
@@ -75,12 +82,11 @@ class Pie3DChart extends React.Component {
         {
           //   name: 'Access From',
           type: "pie",
-          radius: ["50%", "80%"],
-              center: ["50%", "35%"], // 默认是 ["50%", "50%"]，这里把 y 改成 35% 就能往上移
-
+          // radius: ["50%", "80%"],
+          center: ["50%", "35%"], // 默认是 ["50%", "50%"]，这里把 y 改成 35% 就能往上移
           avoidLabelOverlap: false,
           itemStyle: {
-            borderRadius: 10,
+            // borderRadius: 10,
             // borderColor: "#fff",
             borderWidth: 2,
           },
@@ -93,7 +99,7 @@ class Pie3DChart extends React.Component {
               show: true,
               fontSize: 25,
               fontWeight: "bold",
-              color: '#fff'
+              color: "#fff",
             },
           },
           labelLine: {

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

@@ -0,0 +1,60 @@
+import React from "react";
+import { Spin } from "antd";
+import { connect } from "dva";
+import PanelNav from "./PanelNav";
+// import BarChart from "./BarChart";
+import RadioButtonGroup from "./RadioButtonGroup";
+import styles from "../styles/common.less";
+
+const OrderBasic = ({ data, options, current, loading, dispatch }) => {
+  const onChange = (val) => {
+    dispatch({
+      type: "bigscreen/setEnquireData",
+      payload: { current: val },
+    });
+    dispatch({
+      type: "bigscreen/load_enquire_data",
+    });
+  };
+  const parseData = (barData) => {
+    const xAxisdata = [];
+    const seriesData = [];
+
+    barData.forEach((item) => {
+      xAxisdata.push(item.month);
+      seriesData.push(item.newMemberNum);
+    });
+
+    return {
+      xAxisdata,
+      seriesData,
+    };
+  };
+
+  return (
+    <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}>
+          {/* <BarChart {...parseData(data)} /> */}
+        </div>
+      </div>
+    </Spin>
+  );
+};
+
+export default connect(({ bigscreen }) => ({
+  data: bigscreen.orderData.data,
+  loading: bigscreen.orderData.loading,
+  options: bigscreen.orderData.options,
+  current: bigscreen.orderData.current,
+}))(OrderBasic);

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

@@ -40,15 +40,15 @@ class LineChart extends React.Component {
       tooltip: {
         trigger: "axis",
         textStyle: {
-          fontSize: 28, // 设置字体大小
+          fontSize: 25, // 设置字体大小
           fontWeight: "bold", // 可选：加粗
           // color: "#fff", // 可选：字体颜色
         },
       },
       legend: {
-        top: 10,
+        top: 0,
         itemGap: 30,
-        textStyle: { color: "#fff", fontSize: "20px" },
+        textStyle: { color: "#fff", fontSize: "12px" },
         data: this.props.legendData,
       },
       grid: {
@@ -62,7 +62,7 @@ class LineChart extends React.Component {
         type: "category",
         boundaryGap: true,
         axisLine: { lineStyle: { color: "#666" } },
-        axisLabel: { color: "#fff", fontSize: 20, fontWeight: 'bold' },
+        axisLabel: { color: "#fff", fontSize: 12, fontWeight: 'bold' },
         splitLine: {
           // x 轴竖直方向虚线
           show: true,
@@ -76,7 +76,7 @@ class LineChart extends React.Component {
       yAxis: {
         type: "value",
         axisLine: { show: false },
-        axisLabel: { color: "#fff", fontSize: 20, fontWeight: 'bold' },
+        axisLabel: { color: "#fff", fontSize: 12, fontWeight: 'bold' },
         splitLine: {
           // y 轴竖直方向虚线
           show: true,

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

@@ -58,14 +58,22 @@ class WorldMap2D extends React.Component {
       geo: {
         map: "world",
         roam: true, // 支持缩放拖拽
+        zoom: 1.1,
         itemStyle: {
-          areaColor: "#005eaa",
-          borderColor: "#00eaff",
-          borderWidth: 1.2,
+          areaColor: "rgba(126, 206, 244, 0.1)",
+          borderColor: "#2EA7E0",
+          borderWidth: 2,
         },
         emphasis: {
           itemStyle: {
-            areaColor: "#29f1fa", // 悬浮时高亮色
+            areaColor: "rgba(41, 241, 250, 0.6)", // 悬浮时高亮色
+            borderWidth: 1,
+            borderColor: 'rgba(41, 241, 250, 1)',
+            shadowColor: "rgba(41, 241, 250, 1)",  // 阴影颜色
+            // shadowColor: '#fff',
+            shadowBlur: 2,  
+            shadowOffsetX: 10,               // X 偏移
+            shadowOffsetY: -10,     
           },
         },
       },

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

@@ -14,6 +14,7 @@ import SearchRankCloud from "./components/SearchRankCloud";
 import MemberLocation from "./components/MemberLocation";
 import StoreTraffic from "./components/StoreTraffic";
 import MapContainer from "./components/MapContainer";
+import OrderBasic from "./components/Order";
 
 @connect(({ bigscreen }) => ({
   bigscreen,
@@ -162,41 +163,54 @@ class BigScreen extends React.Component {
           <div className={styles.contentPanel}>
             {/* 左侧 */}
             <div className={styles.contentPanelLeft}>
-              {/* <PanelBlock height="200px" /> */}
               <PanelBlock
                 styleObj={{
-                  width: "932px",
-                  height: "560px",
-                  marginBottom: "48px",
-                  // backgroundImage: `url(${require("../../../assets/bigscreen/box-1.png")})`,
+                  width: "699px",
+                  height: "420px",
+                  marginBottom: "36px",
+                  backgroundImage: `url(${require("../../../assets/bigscreen/box-1.png")})`,
                 }}
               >
                 <PortalTraffic />
               </PanelBlock>
               <PanelBlock
-                width="932px"
-                height="560px"
-                marginBottom="48px"
+                width="699px"
+                height="420px"
+                marginBottom="36px"
                 styleObj={{
-                  // backgroundImage: `url(${require("../../../assets/bigscreen/box-1.png")})`,
+                  backgroundImage: `url(${require("../../../assets/bigscreen/box-1.png")})`,
                 }}
               >
                 <Enquire />
               </PanelBlock>
-              <PanelBlock flexDirection="row" height="608px">
+              <PanelBlock
+                styleObj={{
+                  width: "699px",
+                  height: "420px",
+                  marginBottom: "36px",
+                  backgroundImage: `url(${require("../../../assets/bigscreen/box-1.png")})`,
+                }}
+              >
+                <OrderBasic />
+              </PanelBlock>
+              <PanelBlock
+                flexDirection="row"
+                height="420px"
+                styleObj={{ padding: 0 }}
+              >
                 <PanelBlock
                   styleObj={{
-                    width: "434px",
-                    marginRight: "60px",
-                    // backgroundImage: `url(${require("../../../assets/bigscreen/box-2.png")})`,
+                    width: "326px",
+                    marginRight: "47px",
+                    backgroundImage: `url(${require("../../../assets/bigscreen/box-2.png")})`,
                   }}
                 >
                   <OverseasEnquireLocation />
                 </PanelBlock>
                 <PanelBlock
                   styleObj={{
-                    width: "434px",
-                    // backgroundImage: `url(${require("../../../assets/bigscreen/box-2.png")})`,
+                    width: "326px",
+                    backgroundImage: `url(${require("../../../assets/bigscreen/box-2.png")})`,
                   }}
                 >
                   <DistributorEnquireLocation />
@@ -206,20 +220,17 @@ class BigScreen extends React.Component {
 
             {/* 中间 */}
             <div className={styles.contentPanelCenter}>
-              <PanelBlock
-                justifyContent="flex-start"
-                height="560px"
-                marginBottom="48px"
-              >
+              <PanelBlock justifyContent="flex-start" height="496px">
                 <OverView />
               </PanelBlock>
-              <PanelBlock height="560px" marginBottom="48px" />
-              <PanelBlock flexDirection="row" height="608px">
+              <PanelBlock>
+              </PanelBlock>
+              {/* <PanelBlock flexDirection="row" height="608px">
                 <PanelBlock
                   width="822px"
                   marginRight="64px"
                   styleObj={{
-                    // backgroundImage: `url(${require("../../../assets/bigscreen/box-3.png")})`,
+                    backgroundImage: `url(${require("../../../assets/bigscreen/box-3.png")})`,
                   }}
                 >
                   <AddMemberTrend />
@@ -227,35 +238,45 @@ class BigScreen extends React.Component {
                 <PanelBlock
                   width="822px"
                   styleObj={{
-                    // backgroundImage: `url(${require("../../../assets/bigscreen/box-3.png")})`,
+                    backgroundImage: `url(${require("../../../assets/bigscreen/box-3.png")})`,
                   }}
                 >
                   <AddProductTrend />
                 </PanelBlock>
-              </PanelBlock>
+              </PanelBlock> */}
             </div>
 
             {/* 右侧 */}
             <div className={styles.contentPanelRight}>
               <PanelBlock
-                height="864px"
-                width="932px"
-                marginBottom="68px"
+                height="648px"
+                width="699px"
+                marginBottom="36px"
                 styleObj={{
-                  // backgroundImage: `url(${require("../../../assets/bigscreen/box-4.png")})`,
+                  backgroundImage: `url(${require("../../../assets/bigscreen/box-4.png")})`,
                 }}
               >
                 <SearchRankCloud />
               </PanelBlock>
               <PanelBlock
-                height="864px"
-                width="932px"
+                height="648px"
+                width="699px"
+                marginBottom="36px"
                 styleObj={{
-                  // backgroundImage: `url(${require("../../../assets/bigscreen/box-4.png")})`,
+                  backgroundImage: `url(${require("../../../assets/bigscreen/box-4.png")})`,
                 }}
               >
                 <StoreTraffic />
               </PanelBlock>
+              <PanelBlock
+                height="420px"
+                width="699px"
+                styleObj={{
+                  backgroundImage: `url(${require("../../../assets/bigscreen/box-5.png")})`,
+                }}
+              >
+                <AddProductTrend />
+              </PanelBlock>
             </div>
 
             <div className={styles.mapContainer}>

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

@@ -102,6 +102,9 @@
     position: absolute;
     width: 1708px;
     left: 1064px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
   }
 
   &Right {
@@ -111,10 +114,10 @@
 
   .mapContainer {
     position: absolute;
-    left: 540px;
-    top: 180px;
-    width: 2400px;
-    height: 1176px;
-    z-index: 0;
+    left: 750px;
+    top: 460px;
+    width: 2300px;
+    height: 1330px;
+    z-index: 2000;
   }
 }

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

@@ -22,8 +22,8 @@
     position: absolute;
     left: 0;
     bottom: 0;
-    width: 112px;
-    height: 4px;
+    width: 84px;
+    height: 3px;
     background: #06f7ff;
   }
 }

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

@@ -12,10 +12,10 @@
 
   .headerContentTitle {
     position: relative;
-    top: 15px;
+    top: 30px;
     height: 100%;
     font-weight: bold;
-    font-size: 92px;
+    font-size: 56px;
     text-align: center;
     color: #fff;
   }

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

@@ -7,8 +7,8 @@
   align-items: center;
 
   .overview_bg {
-    width: 960px;
-    height: 120px;
+    width: 720px;
+    height: 92px;
   }
 
   .overview_title {
@@ -17,13 +17,13 @@
     left: 50%;
     transform: translateX(-50%);
     font-weight: bold;
-    font-size: 64px;
+    font-size: 48px;
     color: #fff;
   }
 
   .overview_content {
-    flex: 1;
-    height: 100%;
+    // flex: 1;
+    height: 252px;
     width: 100%;
     display: flex;
 
@@ -37,15 +37,15 @@
       justify-content: center;
 
       .item_img {
-        width: 172px;
-        height: 240px;
+        width: 129px;
+        height: 180px;
       }
 
       .item_value {
         position: absolute;
         top: 40px;
         font-weight: 400;
-        font-size: 64px;
+        font-size: 48px;
         font-family: "Rajdhani", "Orbitron", "DIN Condensed", sans-serif;
 
         color: #ffffff;
@@ -67,14 +67,14 @@
     justify-content: center;
     align-items: center;
     width: 100%;
-    height: 120px;
-    margin-top: 20px;
+    height: 92px;
+    // margin-top: 20px;
     z-index: 2000;
   }
 
   .overview_member_img {
-    width: 960px;
-    height: 120px;
+    width: 720px;
+    height: 92px;
   }
 
   .overview_member_title {
@@ -83,9 +83,9 @@
     align-items: center;
     position: absolute;
     width: 100%;
-    height: 120px;
+    height: 56px;
     font-weight: bold;
-    font-size: 64px;
+    font-size: 48px;
     color: #ffffff;
   }
 }

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

@@ -2,7 +2,7 @@
 
 .panel_nav {
   font-weight: bold;
-  font-size: 28px;
+  font-size: 21px;
   color: #ffffff;
   width: 100%;
 }

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

@@ -5,11 +5,11 @@
 }
 
 .customRadioButton {
-  width: 96px;
-  height: 32px;
-  line-height: 32px;
+  width: 72px;
+  height: 24px;
+  line-height: 24px;
   font-weight: 400;
-  font-size: 20px;
+  font-size: 15px;
   color: rgba(255, 255, 255, 0.6);
   text-align: center;
   background: linear-gradient(180deg, rgba(0, 98, 165, 0.2) 0%, #063d76 100%);
@@ -28,5 +28,5 @@
 
 .customRadioButton:last-child {
   margin-right: 0;
-  border-right: 1px solid #4fd2dd;
+  // border-right: 1px solid #4fd2dd;
 }

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

@@ -3,7 +3,7 @@
   :global {
     .ant-table-column-title {
       font-weight: 400;
-      font-size: 24px;
+      font-size: 18px;
       color: #ffffff;
     }
 
@@ -28,9 +28,9 @@
     //   overflow: hidden;
     //   white-space: nowrap;
       font-weight: 400;
-      font-size: 24px;
+      font-size: 18px;
       color: #ffffff;
-      height: 65px;
+      height: 50px;
     }
 
     .ant-table-tbody > tr:hover > td {
@@ -43,7 +43,7 @@
 
     .ant-empty-description {
       color: #fff;
-      font-size: 20px;
+      font-size: 16px;
     }
 
     .ant-empty-image {

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

@@ -187,6 +187,39 @@ export default {
       loading: false,
       data: [],
     },
+    orderData: {
+      loading: false,
+      data: [],
+      options: [
+        {
+          label: "近7日",
+          value: {
+            startTime:
+              moment()
+                .subtract(7, "days")
+                .format("YYYY-MM-DD") + " 00:00:00",
+            endTime:
+              moment()
+                .subtract(1, "days")
+                .format("YYYY-MM-DD") + " 23:59:59:999",
+          },
+        },
+        {
+          label: "近30日",
+          value: {
+            startTime:
+              moment()
+                .subtract(30, "days")
+                .format("YYYY-MM-DD") + " 00:00:00",
+            endTime:
+              moment()
+                .subtract(1, "days")
+                .format("YYYY-MM-DD") + " 23:59:59:999",
+          },
+        },
+      ],
+      current: "近7日",
+    },
     updateTime: "",
   },
 
@@ -437,6 +470,15 @@ export default {
   },
 
   reducers: {
+    setOrderData(state, { payload }) {
+      return {
+        ...state,
+        orderData: {
+          ...state.orderData,
+          ...payload,
+        },
+      };
+    },
     setWorldMapData(state, { payload }) {
       return {
         ...state,