feats

src/components/ECharts/index.jsx

@@ -14,6 +14,7 @@ import {
   DatasetComponent,
   TransformComponent,
   LegendComponent,
+  ToolboxComponent,
 } from 'echarts/components';
 // 标签自动布局，全局过渡动画等特性
 import { LabelLayout, UniversalTransition } from 'echarts/features';
@@ -33,6 +34,7 @@ echarts.use([
   UniversalTransition,
   SVGRenderer,
   LegendComponent,
+  ToolboxComponent,
 ]);
 
 import Styles from './style.less';
@@ -43,11 +45,19 @@ export default forwardRef((props, ref) => {
 
   useEffect(() => {
     echartsRef.current = echarts.init(domRef.current);
-    window.onresize = function () {
+    console.log('---------echarts------>', domRef.current);
+
+    const handleResize = () => {
+      console.log('---------onresize------>', domRef.current);
       echartsRef.current.resize();
     };
 
-    return () => echartsRef.current.dispose();
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      echartsRef.current.dispose();
+    };
   }, []);
 
   useEffect(() => {

src/components/ECharts/style.less

@@ -1,5 +1,5 @@
 .echart {
   width: 100%;
   height: 100%;
-  min-height: 200px;
+  min-height: 100px;
 }

src/pages/MonitoringScreen/components/BasicChart.jsx

@@ -7,7 +7,7 @@ export default (props) => {
   return (
     <div style={{ height: '100%' }}>
       <TitleBox value={props.title} />
-      <SquareBox style={{ height: 'calc(100% - 48px)', minHeight: '200px', maxHeight: '350px' }}>
+      <SquareBox style={{ height: 'calc(100% - 48px)', minHeight: '100px' }}>
         <ECharts option={props.option} />
       </SquareBox>
     </div>

src/pages/MonitoringScreen/components/List/style.less

@@ -4,11 +4,11 @@
     padding: 0 20px;
 
     & > div {
-      height: 48px;
+      height: 28px;
       color: #ffffff;
       font-weight: bold;
       font-size: 18px;
-      line-height: 48px;
+      line-height: 28px;
 
       background: linear-gradient(0deg, #ffcf84 0%, #fb9900 93.84765625%);
       background-clip: text;

src/pages/MonitoringScreen/index.jsx

@@ -21,7 +21,7 @@ import Styles from './style.less';
 
 export default (props) => {
   const screenRef = useRef();
-  const [height, setHeight] = useState('1080px');
+  const [height, setHeight] = useState('800px');
   const { isFullScreen, toggleFullScreen } = useFullScreen(screenRef);
 
   const [machineryTypeData, setMachineryTypeData] = useState([
@@ -71,10 +71,10 @@ export default (props) => {
           <div className={Styles['grail-header']}>
             <ScreenHeader weather="多云 21-28 °C" />
           </div>
-          <div className={classNames(Styles['grail-container'], Styles['pd-tp-30'])}>
+          <div className={classNames(Styles['grail-container'], Styles['mg-tp-30'])}>
             <div className={Styles['grail-left']}>
               <div className="flex flex-column full-height">
-                <div className="flex-0" style={{ height: '250px' }}>
+                <div className="flex-0" style={{ minHeight: '37%' }}>
                   <MachineryType source={machineryTypeData} />
                 </div>
                 <div className="flex-1" style={{ marginTop: '30px' }}>
@@ -93,7 +93,7 @@ export default (props) => {
             </div>
             <div className={Styles['grail-right']}>
               <div className="flex flex-column full-height">
-                <div className="flex-0" style={{ height: '250px' }}>
+                <div className="flex-0" style={{ minHeight: '37%' }}>
                   <WorkData source={workData} />
                 </div>
                 <div className="flex-1" style={{ marginTop: '30px' }}>
@@ -102,9 +102,9 @@ export default (props) => {
               </div>
             </div>
           </div>
-          <div className={classNames(Styles['grail-footer'], Styles['pd-tp-30'])}>
+          <div className={classNames(Styles['grail-footer'], Styles['mg-tp-30'])}>
             <SquareBox>
-              <div className="flex">
+              <div className="flex" style={{ padding: '20px 0' }}>
                 <div className="flex-1">
                   <List title="预约订单">
                     <div>
@@ -141,7 +141,6 @@ export default (props) => {
                 </div>
               </div>
             </SquareBox>
-            <div className={Styles['pd-tp-30']} style={{ height: '30px' }} />
           </div>
         </div>
       </div>

src/pages/MonitoringScreen/style.less

@@ -2,6 +2,7 @@
   position: relative;
   width: 100%;
   height: 100%;
+  padding-bottom: 30px;
 
   background-color: #021222;
   background-image: url('~@/assets/images/screen/bg.png');
@@ -73,6 +74,6 @@
   padding-left: 40px;
 }
 
-.pd-tp-30 {
-  padding-top: 30px;
+.mg-tp-30 {
+  margin-top: 30px;
 }