pref：优化页面

src/components/RightPage/BarChart/index.jsx

@@ -1,25 +1,24 @@
-import {useEffect, useRef, useState} from "react";
+import React, {useEffect, useRef, useState} from "react";
 import rightPageApi from "@/https/apis/rightPageApi";
 
 const {Bar} = window.charts;
 
-const DemoBar = ({requestDate,onClick}) => {
+const DemoBar = ({requestDate, onClick}) => {
 
 
-
-  const [list,setList] = useState([])
+  const [list, setList] = useState([])
   const pieRef = useRef();
 
-  useEffect(()=>{
+  useEffect(() => {
     getCollegeCount()
     clickPie(pieRef?.current?.getChart())
-  },[requestDate])
+  }, [requestDate])
 
   const getCollegeCount = () => {
-    rightPageApi.collegeCount(requestDate.format("YYYY-MM-DD")).then(res=>{
-      if(res.code == 200){
+    rightPageApi.collegeCount(requestDate.format("YYYY-MM-DD")).then(res => {
+      if (res.code == 200) {
         setList(res.data.map(it => {
-          return {collegeName:it.collegeName.substr(0,10), sales: parseInt(it.count,10),collegeNo:it.collegeNo}
+          return {collegeName: it.collegeName.substr(0, 10), sales: parseInt(it.count, 10), collegeNo: it.collegeNo}
         }))
       }
     })
@@ -28,7 +27,7 @@ const DemoBar = ({requestDate,onClick}) => {
   const clickPie = (plot) => {
     plot.off("plot:click");
     plot.on('plot:click', (...args) => {
-      onClick && onClick(args[0]?.data?.data,requestDate.format('YYYY-MM'))
+      onClick && onClick(args[0]?.data?.data, requestDate.format('YYYY-MM'))
     })
   }
 
@@ -38,20 +37,21 @@ const DemoBar = ({requestDate,onClick}) => {
     xField: 'sales',
     yField: 'collegeName',
     color: '#3B90FF',
-    xAxis:{
-      label:{
-        style:{
-          fill:'#F2F2F2'
+    autoFit: true,
+    xAxis: {
+      label: {
+        style: {
+          fill: '#F2F2F2'
         }
       }
     },
     barStyle: {
       fill: 'l(180) 0:#3B90FF 1:rgba(47, 253, 239, 0)',
     },
-    yAxis:{
-      label:{
-        style:{
-          fill:'#F2F2F2'
+    yAxis: {
+      label: {
+        style: {
+          fill: '#F2F2F2'
         }
       }
     },
@@ -62,14 +62,12 @@ const DemoBar = ({requestDate,onClick}) => {
       sales: {
         alias: '违规总数',
       },
-      no:{
-        alias:'编号'
+      no: {
+        alias: '编号'
       }
     },
-    minBarWidth: 25,
-    maxBarWidth: 25,
   };
-  return <Bar ref={pieRef} {...config}/>;
+  return <Bar style={{height: '100%'}} ref={pieRef} {...config}/>;
 };
 
 export default DemoBar

src/components/RightPage/ColumnChart/index.jsx

@@ -1,21 +1,21 @@
 import rightPageApi from "@/https/apis/rightPageApi";
-import {useEffect, useState} from "react";
+import React, {useEffect, useState} from "react";
 
-const { Column } = window.charts;
+const {Column} = window.charts;
 
 const DemoColumn = ({onClick}) => {
 
-  const [dataCount,setDataCount] = useState([])
+  const [dataCount, setDataCount] = useState([])
 
-  useEffect(()=>{
+  useEffect(() => {
     getSevenCount()
-  },[])
+  }, [])
 
   const getSevenCount = () => {
-    rightPageApi.sevenCount().then(res=>{
-      if(res.code == 200){
-        setDataCount(res.data.map(it=>{
-          return {type:it.week.substr(5,5),sales:parseInt(it.count,10)}
+    rightPageApi.sevenCount().then(res => {
+      if (res.code == 200) {
+        setDataCount(res.data.map(it => {
+          return {type: it.week.substr(5, 5), sales: parseInt(it.count, 10)}
         }))
       }
     })
@@ -33,6 +33,7 @@ const DemoColumn = ({onClick}) => {
     xField: 'type',
     yField: 'sales',
     color: '#4AE7E0',
+    autoFit: true,
     label: {
       // 可手动配置 label 数据标签位置
       position: 'middle',
@@ -43,7 +44,7 @@ const DemoColumn = ({onClick}) => {
       },
     },
     xAxis: {
-      name:'type',
+      name: 'type',
       label: {
         autoHide: true,
         autoRotate: false,
@@ -55,10 +56,10 @@ const DemoColumn = ({onClick}) => {
     barStyle: {
       fill: 'red',
     },
-    yAxis:{
-      label:{
-        style:{
-          fill:'#F2F2F2'
+    yAxis: {
+      label: {
+        style: {
+          fill: '#F2F2F2'
         }
       }
     },
@@ -71,7 +72,7 @@ const DemoColumn = ({onClick}) => {
       },
     },
   };
-  return <Column {...config} onReady={clickColumn}/>;
+  return <Column style={{height: '100%'}} {...config} onReady={clickColumn}/>;
 };
 
 export default DemoColumn

src/components/RightPage/PieChart/index.jsx

@@ -1,5 +1,5 @@
 import rightPageApi from "@/https/apis/rightPageApi";
-import {useEffect, useState} from "react";
+import React, {useEffect, useState} from "react";
 
 const {Pie, G2} = window.charts;
 const G = G2.getEngine('canvas');
@@ -10,6 +10,7 @@ const cfg = {
   colorField: 'type',
   radius: 0.75,
   legend: false,
+  autoFit: true,
   label: {
     type: 'spider',
     labelHeight: 40,
@@ -76,7 +77,7 @@ const DemoPie = ({onClick}) => {
     })
   }
 
-  return <Pie {...cfg} data={dataCount} onReady={clickPie}/>;
+  return <Pie style={{height: '100%'}} {...cfg} data={dataCount} onReady={clickPie}/>;
 };
 
 export default DemoPie

src/components/RightPage/index.jsx

@@ -1,12 +1,13 @@
-import React, {useEffect, useState} from "react";
+import React, {useState} from "react";
 import style from './index.less'
 import BarChart from './BarChart'
 import ColumnChart from './ColumnChart'
 import PieChart from './PieChart'
 import dayjs from "dayjs";
 import Flex from "@/components/Flex";
+import TitleView from "@/components/TitleView";
 
-const monthList = []
+const monthList = [];
 for (let i = 1; i < 13; i++) {
   monthList.push({
     name: i + '月',
@@ -16,57 +17,45 @@ for (let i = 1; i < 13; i++) {
 
 const rightPage = ({onPieClick}) => {
 
-  const [dateNum, setDate] = useState(dayjs())
-  const [copyDate, setCopyDate] = useState(dayjs())
-  const [dataBoxVisible, setDataBoxVisible] = useState(false)
-
-  const {middle_box, bottom_box, title_box} = style;
-
+  const [copyDate, setCopyDate] = useState(dayjs());
+  const [dataBoxVisible, setDataBoxVisible] = useState(false);
 
   ///////////////////////////////////////// 页面渲染
 
   return <Flex direction={"column"} className={style.container}>
-    <div className={style.top_box}>
-      <div className={style.title_box}>
-        <img style={{left: 10, height: '56px', position: 'absolute'}}
-             src={require('@/assets/titleBorder3.png')}/>
-        <span style={{position: "absolute", left: '4vh', top: 12, fontSize: '18px'}}>学院违章排行</span>
-        <div onClick={() => setDataBoxVisible(!dataBoxVisible)} className={style.time_box}>{copyDate.format("YYYY-MM")}
-        </div>
-      </div>
-      <div style={{height: 300}}><BarChart requestDate={copyDate} onClick={onPieClick}/></div>
-    </div>
-    <div className={middle_box}>
-      <div className={title_box}>
-        <img style={{left: 20, width: '178px', height: '56px', position: 'absolute'}}
-             src={require('@/assets/titleBorder4.png')}/>
-        <span style={{position: "absolute", left: '4.5vh', top: 14, fontSize: '18px'}}>车辆违规统计</span>
-      </div>
-      <div style={{height: 300}}><ColumnChart onClick={(args) => onPieClick(args)}/></div>
-    </div>
-    <div className={bottom_box} style={{height: 300}}><PieChart onClick={(args) => onPieClick(args)}/></div>
-    {
-      dataBoxVisible && <div className={style.dataBox}>
-        <div className={style.data_title}>
-            <span style={{fontSize: 26, cursor: 'pointer'}}
-                  onClick={() => setDate(dateNum.add(-1, 'year'))}>&laquo;</span>
-          <span style={{lineHeight: 2.5}}>{dateNum.format('YYYY')}</span>
-          <span style={{fontSize: 26, cursor: 'pointer'}}
-                onClick={() => setDate(dateNum.add(1, 'year'))}>&raquo;</span>
-        </div>
-        <div className={style.data_body}>
-          {
-            monthList.map(it => {
-              return <div className={style.data_box} onClick={(e) => {
-                setDataBoxVisible(false)
-                setCopyDate(dayjs(dateNum.format("YYYY-") + it.value + "-01"));
-              }} key={it.value}>{it.name}</div>
-            })
-          }
-        </div>
-      </div>
-    }
+
+    <Flex className={style.top_box} direction={"column"} itemGrow={1}>
+
+      <TitleView
+        title={'学院违章排行'} bgUrl={"./imgs/titleBorder3.png"} bgStyle={{width: 187, height: 53}}
+        extra={
+          <Flex
+            className={style.time_box}
+            onClick={() => setDataBoxVisible(!dataBoxVisible)}
+          >{copyDate.format("YYYY-MM")}
+          </Flex>
+        }
+      />
+
+      <BarChart requestDate={copyDate} onClick={onPieClick}/>
+
+    </Flex>
+
+
+    <Flex direction={"column"} className={style.middle_box} itemGrow={1}>
+      <TitleView
+        title={'车辆违规统计'} bgUrl={'./imgs/titleBorder4.png'} bgStyle={{width: 187, height: 53}}
+      />
+      <Flex itemGrow={1} style={{height: 0}}>
+        <ColumnChart onClick={(args) => onPieClick(args)}/>
+      </Flex>
+    </Flex>
+
+    <Flex itemGrow={1} style={{height: 0}}>
+      <PieChart onClick={(args) => onPieClick(args)}/>
+    </Flex>
+
   </Flex>
-}
+};
 
 export default rightPage

src/components/RightPage/index.less

@@ -1,72 +1,53 @@
 .container {
-  width: 400px;
-  height: 100%;
-  color:#fff;
-  font-size:16px;
-  background-color: rgba(0,0,0,0.1);
+  width: 440px;
+  height: 100vh;
+  color: #fff;
+  padding: 20px;
+  font-size: 16px;
+  background-color: rgba(0, 0, 0, 0.1);
 
   .top_box {
     width: 100%;
-    height: 35%;
-    padding: 18px;
+    height: 0;
+    margin-bottom: 20px;
 
-    .title_box {
-      position: relative;
-      height:18%;
-      overflow: hidden;
+    .time_box {
+      text-align: center;
+      padding: 1px 8px 1.5px 8px;
+      font-size: 16px;
+      transform: translateY(10px);
+      background-size: 100%;
+      background: url("../../assets/time_box.png") no-repeat;
+      cursor: pointer;
 
-      .time_box {
-        text-align: center;
-        position: absolute;
-        right: 15px;
-        padding: 1px 8px 1.5px 8px;
-        font-size: 16px;
-        overflow: hidden;
-        transform: translateY(10px);
-        background-size: 100%;
-        background: url("../../assets/time_box.png") no-repeat;
-        cursor: pointer;
-        &:hover {
-          background-color: rgba(169,169,169,.2);
-          transition: all 0.2s;
-        }
+      &:hover {
+        background-color: rgba(169, 169, 169, .2);
+        transition: all 0.2s;
       }
     }
   }
+
   .middle_box {
     position: relative;
     width: 100%;
-    height: 35%;
-    padding: 18px;
-    //background-color: white;
+    height: 0;
+    margin-bottom: 20px;
 
     .title_box {
       position: relative;
-      height:18%;
+      height: 18%;
 
       .time_box {
         position: absolute;
-        width:80px;
-        height:30px;
+        width: 80px;
+        height: 30px;
         transform: translateY(10px);
       }
-
     }
 
-    .middle_box {
-      height: 20%;
-      background-color: chocolate;
-    }
-
-    //background-color: saddlebrown;
   }
-  .bottom_box {
-    width: 100%;
-    height: 30%;
-    //background-color: crimson;
-    padding: 18px;
 
-  }
+
   @keyframes fadeInDown {
     0% {
       -webkit-transform: matrix3d(.7, 0, 0, 0, 0, .7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
@@ -173,12 +154,13 @@
     }
 
   }
+
   .dataBox {
     top: 58px;
     right: 32px;
     position: absolute;
     width: 250px;
-    background-color: rgba(0,0,0,.9);
+    background-color: rgba(0, 0, 0, .9);
     border-radius: 15px;
     animation: fadeInDown .3s;
 
@@ -189,6 +171,7 @@
       margin: 10px 0;
       border-bottom: 1px solid grey;
     }
+
     .data_body {
       display: flex;
       flex-wrap: wrap;
@@ -203,6 +186,7 @@
         line-height: 40px;
         cursor: pointer;
         vertical-align: center;
+
         &:hover {
           color: black;
           background-color: grey;

src/pages/index.jsx

@@ -1,21 +1,13 @@
-import React, {useRef, useState} from "react";
+import React from "react";
 import less from './index.less'
 import LeftPage from '../components/LeftPage'
 import RightPage from '../components/RightPage'
-import MiddlePage from '../components/MiddlePage'
-import {BorderBox6} from "@jiaminghi/data-view-react";
-import CarModalPage from "@/components/CarModalPage";
-import ModalPage from "@/components/UserModalPage";
 import Flex from "@/components/Flex";
 
-const width = 2120, height = 1295;
 const bgUrl = window.sessionStorage.getItem('core_3d_map_bg');
 
 export default () => {
 
-  const carModalPageRef = useRef();
-
-
   ///////////////////////////////////////// 页面渲染
 
   return <Flex className={less.body} style={{backgroundImage: `url(${bgUrl})`}}>
@@ -26,10 +18,7 @@ export default () => {
 
     </Flex>
 
-    <Flex>
-      <RightPage/>
-    </Flex>
-
+    <RightPage/>
 
   </Flex>