pref：优化页面

src/components/RightPage/BarChart/index.jsx

@@ -1,4 +1,4 @@
-import {useEffect, useRef, useState} from "react";
+import React, {useEffect, useRef, useState} from "react";
 import rightPageApi from "@/https/apis/rightPageApi";
 
 const {Bar} = window.charts;
@@ -6,7 +6,6 @@ const {Bar} = window.charts;
 const DemoBar = ({requestDate, onClick}) => {
 
 
-
   const [list, setList] = useState([])
   const pieRef = useRef();
 
@@ -38,6 +37,7 @@ const DemoBar = ({requestDate,onClick}) => {
     xField: 'sales',
     yField: 'collegeName',
     color: '#3B90FF',
+    autoFit: true,
     xAxis: {
       label: {
         style: {
@@ -66,10 +66,8 @@ const DemoBar = ({requestDate,onClick}) => {
         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,5 +1,5 @@
 import rightPageApi from "@/https/apis/rightPageApi";
-import {useEffect, useState} from "react";
+import React, {useEffect, useState} from "react";
 
 const {Column} = window.charts;
 
@@ -33,6 +33,7 @@ const DemoColumn = ({onClick}) => {
     xField: 'type',
     yField: 'sales',
     color: '#4AE7E0',
+    autoFit: true,
     label: {
       // 可手动配置 label 数据标签位置
       position: 'middle',
@@ -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 [copyDate, setCopyDate] = useState(dayjs())
+  const [dataBoxVisible, setDataBoxVisible] = useState(false);
-  const [dataBoxVisible, setDataBoxVisible] = useState(false)
-
-  const {middle_box, bottom_box, title_box} = style;
-
 
   ///////////////////////////////////////// 页面渲染
 
   return <Flex direction={"column"} className={style.container}>
-    <div className={style.top_box}>
+
-      <div className={style.title_box}>
+    <Flex className={style.top_box} direction={"column"} itemGrow={1}>
-        <img style={{left: 10, height: '56px', position: 'absolute'}}
+
-             src={require('@/assets/titleBorder3.png')}/>
+      <TitleView
-        <span style={{position: "absolute", left: '4vh', top: 12, fontSize: '18px'}}>学院违章排行</span>
+        title={'学院违章排行'} bgUrl={"./imgs/titleBorder3.png"} bgStyle={{width: 187, height: 53}}
-        <div onClick={() => setDataBoxVisible(!dataBoxVisible)} className={style.time_box}>{copyDate.format("YYYY-MM")}
+        extra={
-        </div>
+          <Flex
-      </div>
+            className={style.time_box}
-      <div style={{height: 300}}><BarChart requestDate={copyDate} onClick={onPieClick}/></div>
+            onClick={() => setDataBoxVisible(!dataBoxVisible)}
-    </div>
+          >{copyDate.format("YYYY-MM")}
-    <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>
         }
+      />
+
+      <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,44 +1,37 @@
 .container {
-  width: 400px;
+  width: 440px;
-  height: 100%;
+  height: 100vh;
   color: #fff;
+  padding: 20px;
   font-size: 16px;
   background-color: rgba(0, 0, 0, 0.1);
 
   .top_box {
     width: 100%;
-    height: 35%;
+    height: 0;
-    padding: 18px;
+    margin-bottom: 20px;
-
-    .title_box {
-      position: relative;
-      height:18%;
-      overflow: hidden;
 
     .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;
       }
     }
   }
-  }
+
   .middle_box {
     position: relative;
     width: 100%;
-    height: 35%;
+    height: 0;
-    padding: 18px;
+    margin-bottom: 20px;
-    //background-color: white;
 
     .title_box {
       position: relative;
@@ -50,23 +43,11 @@
         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,6 +154,7 @@
     }
 
   }
+
   .dataBox {
     top: 58px;
     right: 32px;
@@ -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>
-
 
   </Flex>