fix: echarts布局调整

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

@@ -67,6 +67,13 @@ class BarChart extends React.Component {
           },
         },
       },
+      grid: {
+        left: "4%",
+        right: "4%",
+        bottom: "8%",
+        top: "10%",
+        containLabel: true,
+      },
       series: [
         {
           data: this.props.seriesData,
@@ -101,7 +108,7 @@ class BarChart extends React.Component {
   }
 
   render() {
-    return <div className={styles.bar_chart} ref={this.chartRef} />;
+    return <div style={{ width: "100%", height: "100%" }} ref={this.chartRef} />;
   }
 }
 

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

@@ -59,6 +59,13 @@ class Pie3DChart extends React.Component {
         bottom: 0,
         textStyle: { color: "#fff", fontSize: "16px" },
       },
+      grid: {
+        left: "4%",
+        right: "4%",
+        bottom: "8%",
+        top: "10%",
+        containLabel: true,
+      },
       series: [
         {
           //   name: 'Access From',
@@ -93,7 +100,7 @@ class Pie3DChart extends React.Component {
   }
 
   render() {
-    return <div ref={this.chartRef} className={styles.enquire_pie} />;
+    return <div ref={this.chartRef} style={{ width: "100%", height: "100%" }} />;
   }
 }
 

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

@@ -41,20 +41,21 @@ class LineChart extends React.Component {
       legend: {
         top: 10,
         itemGap: 30,
-        textStyle: { color: "#fff", fontSize: '20px' },
+        textStyle: { color: "#fff", fontSize: "20px" },
         data: this.props.legendData,
       },
       grid: {
-        left: "5%",
-        right: "5%",
-        bottom: "10%",
+        left: "4%",
+        right: "4%",
+        bottom: "8%",
+        top: "10%",
         containLabel: true,
       },
       xAxis: {
         type: "category",
         boundaryGap: true,
         axisLine: { lineStyle: { color: "#666" } },
-        axisLabel: { color: "#fff", fontSize: '16px' },
+        axisLabel: { color: "#fff", fontSize: "16px" },
         splitLine: {
           // x 轴竖直方向虚线
           show: true,
@@ -68,7 +69,7 @@ class LineChart extends React.Component {
       yAxis: {
         type: "value",
         axisLine: { show: false },
-        axisLabel: { color: "#fff", fontSize: '16px' },
+        axisLabel: { color: "#fff", fontSize: "16px" },
         splitLine: {
           // y 轴竖直方向虚线
           show: true,
@@ -84,7 +85,9 @@ class LineChart extends React.Component {
   }
 
   render() {
-    return <div className={styles.traffic_line} ref={this.chartRef} />;
+    return (
+      <div style={{ width: "100%", height: "100%" }} ref={this.chartRef} />
+    );
   }
 }
 

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

@@ -137,6 +137,52 @@ export default {
       ],
       current: "昨日",
     },
+    storeTrafficData: {
+      loading: false,
+      data: [],
+      options: [
+        {
+          label: "昨日",
+          value: {
+            startTime:
+              moment()
+                .subtract(1, "days")
+                .format("YYYY-MM-DD") + " 00:00:00",
+            endTime:
+              moment()
+                .subtract(1, "days")
+                .format("YYYY-MM-DD") + " 23:59:59:999",
+          },
+        },
+        {
+          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: "昨日",
+    },
     updateTime: "",
   },
 
@@ -288,16 +334,16 @@ export default {
     // 门户关键词搜索
     *load_search_rank({ 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;
       payload = { ...payload, ...condition };
       yield put({
-        type: "setSearchRankData",
+        type: "set",
         payload: { loading: true },
       });
       const response = yield call(
@@ -312,6 +358,33 @@ export default {
       });
     },
 
+    // 店铺流量排行
+    *load_store_traffic({ payload }, { put, call, select }) {
+      const current = yield select(
+        (state) => state.bigscreen.searchRankData.current
+      );
+      const options = yield select(
+        (state) => state.bigscreen.searchRankData.options
+      );
+      const condition = options.filter((item) => item.label == current)[0]
+        .value;
+      payload = { ...payload, ...condition };
+      yield put({
+        type: "setStoreTrafficData",
+        payload: { loading: true },
+      });
+      const response = yield call(
+        sldCommonService,
+        payload,
+        "get",
+        "v3/statistics/screen/analysis/storeFlowRank"
+      );
+      yield put({
+        type: "setStoreTrafficData",
+        payload: { data: response.data, loading: false },
+      });
+    },
+
     // 初始化数据
     *load_data({ payload }, { put, call }) {
       // 更新时间
@@ -365,10 +438,24 @@ export default {
       yield put.resolve({
         type: "load_search_rank",
       });
+
+      // 店铺流量
+      yield put.resolve({
+        type: "load_store_traffic",
+      });
     },
   },
 
   reducers: {
+    setStoreTrafficData(state, { payload }) {
+      return {
+        ...state,
+        storeTrafficData: {
+          ...state.storeTrafficData,
+          ...payload,
+        },
+      };
+    },
     setUpdateTime(state, { payload }) {
       return {
         ...state,