fix: 大屏样式调整

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

@@ -12,6 +12,7 @@ class BarChart extends React.Component {
 
   componentDidMount() {
     this.initChart();
+    window.addEventListener("resize", this.chartResize);
   }
 
   componentDidUpdate(prevProps) {
@@ -20,10 +21,17 @@ class BarChart extends React.Component {
 
   componentWillUnmount() {
     if (this.chartInstance) {
+      window.removeEventListener("resize", this.chartResize);
       this.chartInstance.dispose();
     }
   }
 
+  chartResize() {
+    if (this.chartInstance) {
+      this.chartInstance.resize();
+    }
+  }
+
   initChart() {
     if (!this.chartInstance) {
       this.chartInstance = echarts.init(this.chartRef.current);
@@ -84,7 +92,7 @@ class BarChart extends React.Component {
           symbolPosition: "end", // 关键：自动到柱子最高点
 
           symbolOffset: [0, -15], // 向上偏移，让图片在柱子顶部
-          data: this.props.seriesData,
+          data: this.props.seriesData.map(item => item == 0 ? null : item),
           z: 4,
         },
       ],

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

@@ -3,7 +3,7 @@ import { Spin } from "antd";
 import { connect } from "dva";
 import PanelNav from "./PanelNav";
 import EnquirePieChart from "./EnquirePieChart";
-import styles from "../styles/distributor_enquire_location.less";
+import styles from "../styles/common.less";
 
 const DistributorEnquire = ({ data, loading, dispatch }) => {
   const parsedata = (pieData) => {
@@ -13,11 +13,11 @@ const DistributorEnquire = ({ data, loading, dispatch }) => {
     }));
   };
   return (
-    <div className={styles.distributor}>
-      <div className={styles.distributor_header}>
+    <div className={styles.common}>
+      <div className={styles.common_header}>
         <PanelNav title="供应链企业地区分布" />
       </div>
-      <div className={styles.distributor_content}>
+      <div className={styles.common_content}>
         <EnquirePieChart data={parsedata(data)} />
       </div>
     </div>

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

@@ -4,7 +4,7 @@ import { connect } from "dva";
 import RadioButtonGroup from "./RadioButtonGroup";
 import TrafficLineChart from "./TrafficLineChart";
 import PanelNav from "./PanelNav";
-import styles from "../styles/enquire.less";
+import styles from "../styles/common.less";
 
 const relation = {
   enquiryTrendList: {
@@ -60,10 +60,10 @@ const EnquireBasic = ({ data, options, current, loading, dispatch }) => {
   };
 
   return (
-    <div className={styles.enquire}>
-      <div className={styles.enquire_header}>
+    <div className={styles.common}>
+      <div className={styles.common_header}>
         <PanelNav title="询盘概况" />
-        <div className={styles.enquire_header_conditions}>
+        <div className={styles.common_header_conditions}>
           <RadioButtonGroup
             options={options}
             label={current}
@@ -71,7 +71,7 @@ const EnquireBasic = ({ data, options, current, loading, dispatch }) => {
           />
         </div>
       </div>
-      <div className={styles.enquire_content}>
+      <div className={styles.common_content}>
         <TrafficLineChart {...parseEnquireData(data)} />
       </div>
     </div>

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

@@ -13,6 +13,7 @@ class Pie3DChart extends React.Component {
 
   componentDidMount() {
     this.initChart();
+    window.addEventListener("resize", this.chartResize);
   }
 
   componentDidUpdate(prevProps) {
@@ -21,6 +22,7 @@ class Pie3DChart extends React.Component {
 
   componentWillUnmount() {
     if (this.chartInstance) {
+      window.removeEventListener("resize", this.chartResize);
       this.chartInstance.dispose();
     }
   }
@@ -55,7 +57,7 @@ class Pie3DChart extends React.Component {
       legend: {
         itemGap: 35,
         bottom: 0,
-        textStyle: { color: "#fff" },
+        textStyle: { color: "#fff", fontSize: "16px" },
       },
       series: [
         {

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

@@ -3,50 +3,23 @@ import { connect } from "dva";
 import DateTimeDisplay from "./DateTimeDisplay";
 import styles from "../styles/header_content.less";
 
-class HeaderContent extends React.Component {
-  componentDidMount() {
-    this.updateTime();
-    // this.timeInterval = setInterval(this.updateTime, 1000);
-    // this.props.dispatch({ type: 'header/fetchWeather' });
-  }
-
-  componentWillUnmount() {
-    clearInterval(this.timeInterval);
-  }
-
-  updateTime = () => {
-    const now = new Date();
-    const pad = (n) => n.toString().padStart(2, "0");
-    const currentTime = `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(
-      now.getDate()
-    )} ${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(
-      now.getSeconds()
-    )}`;
-    this.setState({ currentTime });
-  };
-
-  state = {
-    currentTime: "",
-  };
-
-  render() {
-    const { currentTime } = this.state;
-    const { weatherData } = this.props;
-    return (
-      <div className={styles.headerContent}>
-        <div className={styles.headerContentTitle}>
-          南京江北新区跨境出海服务平台
-        </div>
-        <div className={styles.updateTime}>
-          <span>更新时间: </span>
-          <span>{currentTime}</span>
-        </div>
-        <div className={styles.headerContentTime}>
-          <DateTimeDisplay />
-        </div>
+const HeaderContent = ({ updateTime }) => {
+  return (
+    <div className={styles.headerContent}>
+      <div className={styles.headerContentTitle}>
+        南京江北新区跨境出海服务平台
+      </div>
+      <div className={styles.updateTime}>
+        <span>更新时间: </span>
+        <span>{updateTime}</span>
+      </div>
+      <div className={styles.headerContentTime}>
+        <DateTimeDisplay />
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
 
-export default connect(() => ({}))(HeaderContent);
+export default connect(({ bigscreen }) => ({
+  updateTime: bigscreen.updateTime,
+}))(HeaderContent);

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

@@ -3,7 +3,7 @@ import { Spin } from "antd";
 import { connect } from "dva";
 import PanelNav from "./PanelNav";
 import EnquirePieChart from "./EnquirePieChart";
-import styles from "../styles/overseas_enquire_location.less";
+import styles from "../styles/common.less";
 
 const OverSeasEnquire = ({ data, loading, dispatch }) => {
   const parsedata = (pieData) => {
@@ -14,11 +14,11 @@ const OverSeasEnquire = ({ data, loading, dispatch }) => {
   };
 
   return (
-    <div className={styles.overseas}>
-      <div className={styles.overseas_header}>
+    <div className={styles.common}>
+      <div className={styles.common_header}>
         <PanelNav title="海外询盘地区分布" />
       </div>
-      <div className={styles.overseas_content}>
+      <div className={styles.common_content}>
         <EnquirePieChart data={parsedata(data)} />
       </div>
     </div>

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

@@ -5,7 +5,6 @@ import CountUp from "./CountUp";
 import styles from "../styles/overview.less";
 
 const OverView = ({ overviewData }) => {
-  console.log(overviewData, 'overviewData====');
   return (
     <Spin spinning={overviewData.loading}>
       <div className={styles.overview}>

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

@@ -4,7 +4,7 @@ import { connect } from "dva";
 import RadioButtonGroup from "./RadioButtonGroup";
 import TrafficLineChart from "./TrafficLineChart";
 import PanelNav from "./PanelNav";
-import styles from "../styles/portal_traffic.less";
+import styles from "../styles/common.less";
 
 const relation = {
   viewNumList: {
@@ -70,10 +70,10 @@ const PortalTraffic = ({ data, options, current, loading, dispatch }) => {
   };
 
   return (
-    <div className={styles.traffic}>
-      <div className={styles.traffic_header}>
+    <div className={styles.common}>
+      <div className={styles.common_header}>
         <PanelNav title="门户流量" />
-        <div className={styles.traffic_header_conditions}>
+        <div className={styles.common_header_conditions}>
           <RadioButtonGroup
             options={options}
             label={current}
@@ -81,7 +81,7 @@ const PortalTraffic = ({ data, options, current, loading, dispatch }) => {
           />
         </div>
       </div>
-      <div className={styles.traffic_content}>
+      <div className={styles.common_content}>
         <TrafficLineChart {...parseTrafficData(data)} />
       </div>
     </div>

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

@@ -3,7 +3,7 @@ import { Spin } from "antd";
 import { connect } from "dva";
 import RadioButtonGroup from "./RadioButtonGroup";
 import WordCloud from "@/components/WordCloud";
-import styles from "../styles/search_rank_cloud.less";
+import styles from "../styles/common.less";
 import PanelNav from "./PanelNav";
 
 const SearchRankCloud = ({
@@ -31,10 +31,10 @@ const SearchRankCloud = ({
   }
 
   return (
-    <div className={styles.search_rank}>
-      <div className={styles.search_rank_header}>
+    <div className={styles.common}>
+      <div className={styles.common_header}>
         <PanelNav title={title + "门户搜索关键词排行"} />
-        <div className={styles.search_rank_header_conditions}>
+        <div className={styles.common_header_conditions}>
           <RadioButtonGroup
             options={options}
             label={current}
@@ -42,7 +42,7 @@ const SearchRankCloud = ({
           />
         </div>
       </div>
-      <div className={styles.search_rank_content}>
+      <div className={styles.common_content}>
         <WordCloud data={parseData(data)}></WordCloud>
       </div>
     </div>

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

@@ -11,6 +11,7 @@ class LineChart extends React.Component {
 
   componentDidMount() {
     this.initChart();
+    window.addEventListener("resize", this.chartResize);
   }
 
   componentDidUpdate(prevProps) {
@@ -19,10 +20,17 @@ class LineChart extends React.Component {
 
   componentWillUnmount() {
     if (this.chartInstance) {
+      window.removeEventListener("resize", this.chartResize);
       this.chartInstance.dispose();
     }
   }
 
+  chartResize() {
+    if (this.chartInstance) {
+      this.chartInstance.resize();
+    }
+  }
+
   initChart() {
     if (!this.chartInstance) {
       this.chartInstance = echarts.init(this.chartRef.current);
@@ -33,7 +41,7 @@ class LineChart extends React.Component {
       legend: {
         top: 10,
         itemGap: 30,
-        textStyle: { color: "#fff" },
+        textStyle: { color: "#fff", fontSize: '20px' },
         data: this.props.legendData,
       },
       grid: {
@@ -46,7 +54,7 @@ class LineChart extends React.Component {
         type: "category",
         boundaryGap: true,
         axisLine: { lineStyle: { color: "#666" } },
-        axisLabel: { color: "#fff" },
+        axisLabel: { color: "#fff", fontSize: '16px' },
         splitLine: {
           // x 轴竖直方向虚线
           show: true,
@@ -60,7 +68,7 @@ class LineChart extends React.Component {
       yAxis: {
         type: "value",
         axisLine: { show: false },
-        axisLabel: { color: "#fff" },
+        axisLabel: { color: "#fff", fontSize: '16px' },
         splitLine: {
           // y 轴竖直方向虚线
           show: true,
@@ -72,7 +80,6 @@ class LineChart extends React.Component {
       },
       series: this.props.seriesData,
     };
-    console.log("option", option);
     this.chartInstance.setOption(option);
   }
 

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

@@ -2,7 +2,7 @@ import React from "react";
 import { connect } from "dva";
 import PanelNav from "./PanelNav";
 import BarChart from "./BarChart";
-import styles from "../styles/add_member_trend.less";
+import styles from "../styles/common.less";
 
 const AddMemberTrend = ({ data, loading, dispatch }) => {
   const parseData = (barData) => {
@@ -21,11 +21,11 @@ const AddMemberTrend = ({ data, loading, dispatch }) => {
   };
 
   return (
-    <div className={styles.member}>
-      <div className={styles.member_header}>
+    <div className={styles.common}>
+      <div className={styles.common_header}>
         <PanelNav title="新增会员趋势" />
       </div>
-      <div className={styles.member_content}>
+      <div className={styles.common_content}>
         <BarChart { ...parseData(data) }/>
       </div>
     </div>

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

@@ -2,7 +2,7 @@ import React from "react";
 import { connect } from "dva";
 import PanelNav from "./PanelNav";
 import BarChart from "./BarChart";
-import styles from "../styles/add_product_trend.less";
+import styles from "../styles/common.less";
 
 const AddProductTrend = ({ data, loading, dispatch }) => {
   const parseData = (barData) => {
@@ -20,11 +20,11 @@ const AddProductTrend = ({ data, loading, dispatch }) => {
     };
   };
   return (
-    <div className={styles.product}>
-      <div className={styles.product_header}>
+    <div className={styles.common}>
+      <div className={styles.common_header}>
         <PanelNav title="新增商品趋势" />
       </div>
-      <div className={styles.product_content}>
+      <div className={styles.common_content}>
         <BarChart {...parseData(data)} />
       </div>
     </div>

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

@@ -171,7 +171,7 @@ class BigScreen extends React.Component {
                 <OverView />
               </PanelBlock>
               <PanelBlock />
-              <PanelBlock height="500px" flexDirection="row">
+              <PanelBlock height="620px" flexDirection="row">
                 <PanelBlock>
                   <AddMemberTrend />
                 </PanelBlock>

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

@@ -30,5 +30,5 @@
   flex: 1;
   width: 100%;
   height: 100%;
-  padding: 20px;
+  // padding: 20px;
 }

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

@@ -30,5 +30,5 @@
   flex: 1;
   width: 100%;
   height: 100%;
-  padding: 20px;
+  // padding: 20px;
 }

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

@@ -0,0 +1,35 @@
+.common {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.common_header {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 55px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+
+  &::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 112px;
+    height: 4px;
+    background: #06f7ff;
+  }
+}
+
+.common_content {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  padding-top: 20px;
+  // padding: 20px;
+}

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

@@ -29,5 +29,5 @@
   flex: 1;
   width: 100%;
   height: 100%;
-  padding: 20px;
+  // padding: 20px;
 }

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

@@ -33,5 +33,5 @@
   flex: 1;
   width: 100%;
   height: 100%;
-  padding: 20px;
+  // padding: 20px;
 }

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

@@ -29,5 +29,5 @@
   flex: 1;
   width: 100%;
   height: 100%;
-  padding: 20px;
+  // padding: 20px;
 }

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

@@ -14,5 +14,5 @@
   height: 100%;
   box-sizing: border-box;
   margin-top: 10px;
-  border: 4px dashed #fff;
+  // border: 4px dashed #fff;
 }

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

@@ -33,5 +33,5 @@
   flex: 1;
   width: 100%;
   height: 100%;
-  padding: 20px;
+  // padding: 20px;
 }

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

@@ -33,5 +33,5 @@
   flex: 1;
   width: 100%;
   height: 100%;
-  padding: 20px;
+  // padding: 20px;
 }

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

@@ -137,6 +137,7 @@ export default {
       ],
       current: "昨日",
     },
+    updateTime: "",
   },
 
   effects: {
@@ -313,6 +314,18 @@ export default {
 
     // 初始化数据
     *load_data({ payload }, { put, call }) {
+      // 更新时间
+      const now = new Date();
+      const pad = (n) => n.toString().padStart(2, "0");
+      const currentTime = `${now.getFullYear()}-${pad(
+        now.getMonth() + 1
+      )}-${pad(now.getDate())} ${pad(now.getHours())}:${pad(
+        now.getMinutes()
+      )}:${pad(now.getSeconds())}`;
+      yield put({
+        type: "setUpdateTime",
+        payload: currentTime,
+      });
       // 调用 load_data
       yield put.resolve({
         type: "load_overview",
@@ -356,6 +369,12 @@ export default {
   },
 
   reducers: {
+    setUpdateTime(state, { payload }) {
+      return {
+        ...state,
+        updateTime: payload,
+      };
+    },
     setSearchRankData(state, { payload }) {
       return {
         ...state,