feat: 门户流量模块开发

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

@@ -1,31 +1,109 @@
 import React from "react";
+import { Spin } from "antd";
 import { connect } from "dva";
 import RadioButtonGroup from "./RadioButtonGroup";
 import TrafficLineChart from "./TrafficLineChart";
 import PanelNav from "./PanelNav";
 import styles from "../styles/portal_traffic.less";
+import { color } from "echarts";
 
-const PortalTraffic = ({}) => {
-  const options = [
-    { label: "日", value: "day" },
-    { label: "月", value: "month" },
-  ];
+const relation = {
+  viewNumList: {
+    name: "海外门户浏览量",
+    color: "#7ECEF4",
+    index: "viewNum",
+  },
+  visitorNumList: {
+    name: "海外门户访客数",
+    color: "#036EB8",
+    index: "visitorNum",
+  },
+  viewNumCNList: {
+    name: "分销门户浏览量",
+    color: "#004E9D",
+    index: "viewNum",
+  },
+  visitorNumCNList: {
+    name: "分销门户访客数",
+    color: "#4032A6",
+    index: "visitorNum",
+  },
+};
+
+const PortalTraffic = ({ data, options, current, loading, dispatch }) => {
+  const onChange = (val) => {
+    dispatch({
+      type: "bigscreen/setPortalTrafficData",
+      payload: { current: val },
+    });
+    dispatch({
+      type: "bigscreen/load_portal_traffic",
+    });
+  };
+
+  const parseTrafficData = (lineData) => {
+    const legendData = [];
+    let xAxisData = [];
+    const seriesData = [];
+    Object.keys(relation).forEach((key) => {
+      if (lineData[key]) {
+        legendData.push(relation[key].name);
+        xAxisData = lineData[key].map((item) => item.statsTime);
+        seriesData.push({
+          name: relation[key].name,
+          type: "line",
+          smooth: false,
+          showSymbol: true,
+          symbolSize: 10,
+          symbol: "circle",
+          itemStyle: { color: relation[key].color },
+          lineStyle: { width: 2 },
+          data: lineData[key].map((item) => item[relation[key].index]),
+        });
+      }
+    });
+
+    console.log(
+      "seriesData",
+      seriesData,
+      "legendData",
+      legendData,
+      "xAxisData",
+      xAxisData
+    );
+
+    return {
+      legendData,
+      xAxisData,
+      seriesData,
+    };
+  };
 
   return (
     <div className={styles.traffic}>
       <div className={styles.traffic_header}>
         <PanelNav title="门户流量" />
         <div className={styles.traffic_header_conditions}>
-          <RadioButtonGroup options={options} value="day" />
+          <RadioButtonGroup
+            options={options}
+            label={current}
+            onChange={onChange}
+          />
         </div>
       </div>
       <div className={styles.traffic_content}>
-        <TrafficLineChart />
+        <TrafficLineChart {...parseTrafficData(data)} />
+        {/* <Spin spinning={loading}>
+          
+        </Spin> */}
       </div>
     </div>
   );
 };
 
 export default connect(({ bigscreen }) => ({
-  //   overviewData: bigscreen.overviewData,
+  data: bigscreen.portalTrafficData.data,
+  options: bigscreen.portalTrafficData.options,
+  current: bigscreen.portalTrafficData.current,
+  loading: bigscreen.portalTrafficData.loading,
 }))(PortalTraffic);

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

@@ -6,19 +6,19 @@ class RadioButtonGroup extends React.Component {
     super(props);
     this.state = {
       options: props.options || [],
-      value:
-        props.value || (props.options.length > 0 ? props.options[0].value : ""),
+      label:
+        props.label || (props.options.length > 0 ? props.options[0].label : ""),
     };
   }
 
   handleSelect = (val) => {
     const { onChange } = this.props;
-    this.setState({ value: val });
-    onChange && onChange(val);
+    this.setState({ label: val });
+    this.props.onChange && this.props.onChange(val);
   };
 
   render() {
-    const { options, value } = this.state;
+    const { options, label } = this.state;
 
     return (
       <div className={styles.screenRadioGroup}>
@@ -26,9 +26,9 @@ class RadioButtonGroup extends React.Component {
           <div
             key={index}
             className={`${styles.customRadioButton} ${
-              value === item.value ? styles.checked : ""
+              label === item.label ? styles.checked : ""
             }`}
-            onClick={() => this.handleSelect(item.value)}
+            onClick={() => this.handleSelect(item.label)}
           >
             {item.label}
           </div>

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

@@ -21,7 +21,7 @@ class LineChart extends React.Component {
 
   initChart() {
     this.chartInstance = echarts.init(this.chartRef.current);
-
+    console.log('this.props', this.props);
     const option = {
       backgroundColor: "transparent",
       tooltip: { trigger: "axis" },
@@ -29,12 +29,7 @@ class LineChart extends React.Component {
         top: 10,
         itemGap: 30,
         textStyle: { color: "#fff" },
-        data: [
-          "海外门户浏览量",
-          "海外门户访客数",
-          "分销门户浏览量",
-          "分销门户访客数",
-        ],
+        data: this.props.legendData
       },
       grid: {
         left: "5%",
@@ -55,14 +50,7 @@ class LineChart extends React.Component {
             color: "#ccc",
           },
         },
-        data: [
-          "2025-07-08",
-          "2025-07-09",
-          "2025-07-10",
-          "2025-07-11",
-          "2025-07-12",
-          "2025-07-13",
-        ],
+        data: this.props.xAxisData
       },
       yAxis: {
         type: "value",
@@ -77,80 +65,9 @@ class LineChart extends React.Component {
           },
         },
       },
-      series: [
-        {
-          name: "海外门户浏览量",
-          type: "line",
-          smooth: false,
-          showSymbol: true,
-          symbolSize: 10,
-          symbol: "circle",
-          lineStyle: { width: 2 },
-          itemStyle: {
-            color: "#7ECEF4",
-          },
-          //   areaStyle: {
-          //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          //       { offset: 0, color: "rgba(101,198,255,0.4)" },
-          //       { offset: 1, color: "rgba(101,198,255,0)" },
-          //     ]),
-          //   },
-          data: [8000, 6000, 7500, 6200, 7800, 7000],
-        },
-        {
-          name: "海外门户访客数",
-          type: "line",
-          smooth: false,
-          symbolSize: 10,
-          showSymbol: true,
-          symbol: "circle",
-          itemStyle: { color: "#036EB8" },
-          lineStyle: { width: 2 },
-          //   areaStyle: {
-          //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          //       { offset: 0, color: "rgba(79,157,255,0.4)" },
-          //       { offset: 1, color: "rgba(79,157,255,0)" },
-          //     ]),
-          //   },
-          data: [5000, 2800, 3600, 4000, 6000, 4200],
-        },
-        {
-          name: "分销门户浏览量",
-          type: "line",
-          smooth: false,
-          showSymbol: true,
-          symbolSize: 10,
-          symbol: "circle",
-          itemStyle: { color: "#004E9D" },
-          lineStyle: { width: 2 },
-          //   areaStyle: {
-          //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          //       { offset: 0, color: "rgba(115,79,255,0.4)" },
-          //       { offset: 1, color: "rgba(115,79,255,0)" },
-          //     ]),
-          //   },
-          data: [2000, 1800, 1000, 0, 4500, 1200],
-        },
-        {
-          name: "分销门户访客数",
-          type: "line",
-          smooth: false,
-          showSymbol: true,
-          symbolSize: 10,
-          symbol: "circle",
-          itemStyle: { color: "#4032A6" },
-          lineStyle: { width: 2 },
-          //   areaStyle: {
-          //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          //       { offset: 0, color: "rgba(155,95,255,0.4)" },
-          //       { offset: 1, color: "rgba(155,95,255,0)" },
-          //     ]),
-          //   },
-          data: [1800, 1500, 600, 0, 1200, 800],
-        },
-      ],
+      series: this.props.seriesData
     };
-
+    console.log('option', option);
     this.chartInstance.setOption(option);
   }
 

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

@@ -1,4 +1,6 @@
 import { sldCommonService } from "@/utils/utils";
+import moment from "moment";
+
 export default {
   namespace: "bigscreen",
 
@@ -10,7 +12,36 @@ export default {
     portalTrafficData: {
       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日",
+    },
   },
 
   effects: {
@@ -33,7 +64,12 @@ export default {
     },
 
     // 门户流量
-    *load_portal_traffic({ payload }, { call, put }) {
+    *load_portal_traffic({ payload }, { call, put, select }) {
+      const current = yield select((state) => state.bigscreen.portalTrafficData.current);
+      const options = yield select((state) => state.bigscreen.portalTrafficData.options);
+      const condition = options.filter((item) => item.label == current)[0]
+        .value;
+      payload = { ...payload, ...condition };
       yield put({
         type: "setPortalTrafficData",
         payload: { loading: true },
@@ -42,14 +78,13 @@ export default {
         sldCommonService,
         payload,
         "get",
-        "v3/statistics/screen/analysis/flowTrend-"
+        "v3/statistics/screen/analysis/flowTrend"
       );
       yield put({
         type: "setPortalTrafficData",
         payload: { data: response.data, loading: false },
       });
     },
-     
 
     // 初始化数据
     *load_data({ payload }, { put, call }) {
@@ -57,6 +92,11 @@ export default {
       yield put.resolve({
         type: "load_overview",
       });
+
+      // 调用 load_portal_traffic
+      yield put.resolve({
+        type: "load_portal_traffic",
+      });
     },
   },
 
@@ -78,7 +118,7 @@ export default {
           ...payload, // 覆盖需要更新的字段
         },
       };
-    }
+    },
   },
 
   subscriptions: {