fix: 店铺流量模块统计

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

@@ -56,7 +56,7 @@ class Pie3DChart extends React.Component {
       },
       legend: {
         itemGap: 35,
-        bottom: 0,
+        bottom: 70,
         textStyle: { color: "#fff", fontSize: "16px" },
       },
       grid: {
@@ -71,6 +71,8 @@ class Pie3DChart extends React.Component {
           //   name: 'Access From',
           type: "pie",
           radius: ["40%", "70%"],
+              center: ["50%", "35%"], // 默认是 ["50%", "50%"]，这里把 y 改成 35% 就能往上移
+
           avoidLabelOverlap: false,
           itemStyle: {
             borderRadius: 10,
@@ -100,7 +102,9 @@ class Pie3DChart extends React.Component {
   }
 
   render() {
-    return <div ref={this.chartRef} style={{ width: "100%", height: "100%" }} />;
+    return (
+      <div ref={this.chartRef} style={{ width: "100%", height: "100%" }} />
+    );
   }
 }
 

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/StoreTraffic.js

@@ -0,0 +1,87 @@
+import React from "react";
+import { Spin } from "antd";
+import { connect } from "dva";
+import RadioButtonGroup from "./RadioButtonGroup";
+import TableChart from "./TableChart";
+import styles from "../styles/common.less";
+import PanelNav from "./PanelNav";
+
+const StoreTraffic = ({
+  data,
+  options,
+  current,
+  loading,
+  currentSite,
+  dispatch,
+}) => {
+  const onChange = (val) => {
+    dispatch({
+      type: "bigscreen/setStoreTrafficData",
+      payload: { current: val },
+    });
+    dispatch({
+      type: "bigscreen/load_store_traffic",
+    });
+  };
+
+  const title = currentSite === "1" ? "海外" : "分销商";
+  //   const parseData = (keywords) => {
+  //     return keywords.map(item => decodeURIComponent(item))
+  //   }
+  const columns = [
+    {
+      title: "排名",
+      dataIndex: "categoryId",
+      align: "center",
+      //   width: 55,
+      render: (text, record, index) => {
+        return index + 1;
+      },
+    },
+    {
+      title: "店铺名称",
+      dataIndex: "storeName",
+      align: "center",
+      width: 426,
+      ellipsis: true,
+    },
+    {
+      title: "浏览量",
+      dataIndex: "viewNum",
+      align: "center",
+      //   width: 55,
+    },
+    {
+      title: "访客数",
+      dataIndex: "visitorNum",
+      align: "center",
+      //   width: 55,
+    },
+  ];
+
+  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}
+          />
+        </div>
+      </div>
+      <div className={styles.common_content}>
+        <TableChart data={data} columns={columns} />
+      </div>
+    </div>
+  );
+};
+
+export default connect(({ bigscreen, global }) => ({
+  data: bigscreen.storeTrafficData.data,
+  options: bigscreen.storeTrafficData.options,
+  current: bigscreen.storeTrafficData.current,
+  loading: bigscreen.storeTrafficData.loading,
+  currentSite: global.currentSite,
+}))(StoreTraffic);

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

@@ -0,0 +1,33 @@
+import React from "react";
+import StandardTable from "@/components/StandardTable";
+
+import styles from "../styles/table_chart.less";
+
+class TableChart extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  componentDidMount() {}
+
+  componentDidUpdate(prevProps) {}
+
+  componentWillUnmount() {}
+
+  render() {
+    return (
+      <div className={styles.table_chart}>
+        <StandardTable
+          showScrollbar={false}
+          data={this.props.data}
+          sldpagination={false}
+          columns={this.props.columns}
+          style={{ flex: 1 }}
+        />
+      </div>
+    );
+  }
+}
+
+export default TableChart;

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

@@ -12,6 +12,7 @@ import AddMemberTrend from "./components/addMemberTrend";
 import AddProductTrend from "./components/addProductTrend";
 import SearchRankCloud from "./components/SearchRankCloud";
 import MemberLocation from "./components/MemberLocation";
+import StoreTraffic from "./components/StoreTraffic";
 
 @connect(({ bigscreen }) => ({
   bigscreen,
@@ -249,10 +250,12 @@ class BigScreen extends React.Component {
                 styleObj={{
                   backgroundImage: `url(${require("../../../assets/bigscreen/box-4.png")})`,
                 }}
-              />
+              >
+                <StoreTraffic />
+              </PanelBlock>
             </div>
 
-            <div className={styles.mapContainer}>{"ss"}</div>
+            <div className={styles.mapContainer}></div>
           </div>
         </div>
       </div>

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

@@ -86,6 +86,7 @@
     width: 2400px;
     height: 1176px;
     border: 1px solid red;
+    z-index: 0;
   }
 
   // &Left,

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

@@ -53,7 +53,7 @@
 
       .item_label {
         position: absolute;
-        top: 100px;
+        top: 70px;
         font-family: Source Han Sans CN, Source Han Sans CN;
         font-weight: 400;
         font-size: 32px;

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

@@ -16,6 +16,7 @@
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
+  z-index: 2000;
   // margin-bottom: 10px;
   // border: 4px dashed #fff;
 }

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

@@ -0,0 +1,53 @@
+.table_chart {
+    height: 100%;
+  :global {
+    .ant-table-column-title {
+      font-weight: 400;
+      font-size: 24px;
+      color: #ffffff;
+    }
+
+    .ant-table-content {
+      border-right: none !important;
+    }
+
+    .ant-table-bordered .ant-table-thead > tr > th,
+    .ant-table-bordered .ant-table-tbody > tr > td {
+      border-right: none !important;
+    }
+
+    .ant-table-small
+      > .ant-table-content
+      > .ant-table-body
+      > table
+      > .ant-table-tbody
+      > tr
+      > td {
+    //   width: 426px;
+    //   text-overflow: ellipsis;
+    //   overflow: hidden;
+    //   white-space: nowrap;
+      font-weight: 400;
+      font-size: 24px;
+      color: #ffffff;
+      height: 65px;
+    }
+
+    .ant-table-tbody > tr:hover > td {
+      background: transparent !important; // 或者保持你想要的颜色
+    }
+
+    .ant-table-placeholder {
+      background: transparent !important; // 或者保持你想要的颜色
+    }
+
+    .ant-empty-description {
+      color: #fff;
+      font-size: 20px;
+    }
+
+    .ant-empty-image {
+      display: none;
+    }
+  }
+}