update boxes

src/components/CenterTopData/LeftBoxes/index.jsx

@@ -0,0 +1,35 @@
+
+import React, { useState } from 'react'
+
+import icon1 from '@/assets/CenterChart2icon1.svg'
+import icon2 from '@/assets/CenterChart2icon2.svg'
+import icon3 from '@/assets/CenterChart2icon3.svg'
+import icon4 from '@/assets/CenterChart2icon4.svg'
+
+import cls from './leftbox.module.less'
+
+const Chart2 = () => {
+
+    const [data, setData] = useState([
+        { icon: icon1, label: '换火时间', value: '12:08:34' },
+        { icon: icon3, label: '剩余时间', value: '11h' },
+        { icon: icon2, label: '当前火向', value: '南向' },
+        // { icon: icon4, label: '车间温度', value: '28℃' },
+    ])
+
+    return (
+        <div className={`${cls.leftbox} flex h-half`}>
+            {data.map(item =>
+                <div className={cls.box} key={item.label}>
+                    <img src={item.icon} alt="Error" className='box__logo' />
+                    <div className={cls.box__inner} >
+                        <h2 className={cls.box__label}>{item.label}</h2>
+                        <h2 className={cls.box__value}> {item.value}</h2>
+                    </div>
+                </div>
+            )}
+        </div >
+    );
+}
+
+export default Chart2;

src/components/CenterTopData/LeftBoxes/leftbox.module.less

@@ -0,0 +1,33 @@
+.leftbox {
+  // width: 440px;
+  // background: rgb(127, 202, 42);
+  
+  .box {
+    margin-right: 16px;
+    width: 200px;
+    padding: 8px;
+    background: url(../../../assets/CenterChart2ItemBg.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+    align-items: flex-start;
+    user-select: none;
+
+    .box__inner {
+      padding-top: 12px;
+
+      .box__label {
+        color: #fffa;
+        font-size: 18px;
+        line-height: 14px;
+      }
+      
+      .box__value {
+        color: #fff;
+        font-weight: 400;
+        font-size: 30px;
+        line-height: 34px;
+      }
+    }
+  }
+}

src/components/CenterTopData/RightTable/index.jsx

@@ -1,6 +1,6 @@
 
 import React, { Component } from 'react';
-import './Chart1.less'
+import './righttable.module.less'
 
 import { ScrollBoard } from '@jiaminghi/data-view-react'
 

src/components/CenterTopData/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
-import Item2 from './substitutionCharts/Chart1.jsx'
+import Item2 from './RightTable'
-import Item1 from './substitutionCharts/Chart2.jsx'
+import Item1 from './LeftBoxes'
 
 import cls from './index.module.less'
 

src/components/CenterTopData/index.module.less

@@ -1,5 +1,5 @@
 .leftGrid {
-  width: 416px;
+  // width: 416px;
   height: 212px;
 }
 .rightTable {

src/components/CenterTopData/substitutionCharts/Chart2.jsx

@@ -1,89 +0,0 @@
-
-import React, { useEffect, useState, useRef } from 'react'
-
-import icon1 from '@/assets/CenterChart2icon1.svg'
-import icon2 from '@/assets/CenterChart2icon2.svg'
-import icon3 from '@/assets/CenterChart2icon3.svg'
-import icon4 from '@/assets/CenterChart2icon4.svg'
-
-
-import './Chart2.less'
-
-
-const Chart2 = () => {
-
-    const timmer = useRef();
-    const [year, setYear] = useState('')
-    const [month, setMonth] = useState('')
-    const [day, setDay] = useState('')
-
-
-    const getNewDate = () => {
-        const Time = new Date();
-        const year = Time.getFullYear();
-        const month = Time.getMonth() + 1;
-        const day = Time.getDate();
-
-
-        setYear(year);
-        setMonth(month);
-        setDay(day);
-
-    }
-
-
-    useEffect(() => {
-        getNewDate();
-        timmer.current = setInterval(getNewDate, 10000);
-        return () => {
-            clearTimeout(timmer.current)
-        }
-        //eslint-disable-next-line
-    }, [])
-
-
-
-
-
-    return (
-        <div className='CenterChart2itemDetailBorder'>
-
-            <div className='CenterChart2itemcontentOUT'>
-                <div className='CenterChart2itemcontent'>
-                    <img src={icon4} alt="Error" className='CenterChart2itemcontentIcon' />
-                    <div className='CenterChart2itemcontentText' >
-                        <h2 className='CenterChart2itemcontentText1'>车间温度</h2>
-                        <h2 className='CenterChart2itemcontentText2'> 27℃</h2>
-                    </div>
-                </div>
-                <div className='CenterChart2itemcontent'>
-                    <img src={icon2} alt="Error" className='CenterChart2itemcontentIcon' />
-                    <div className='CenterChart2itemcontentText' >
-                        <h2 className='CenterChart2itemcontentText1'>当前火向</h2>
-                        <h2 className='CenterChart2itemcontentText2'> XXX</h2>
-                    </div>
-                </div>
-            </div>
-            <div className='CenterChart2itemcontentOUT'>
-                <div className='CenterChart2itemcontent'>
-                    <img src={icon1} alt="Error" className='CenterChart2itemcontentIcon' />
-                    <div className='CenterChart2itemcontentText' >
-                        <h2 className='CenterChart2itemcontentText1'>换火时间</h2>
-                        <h2 className='CenterChart2itemcontentText2'> 12:41:45</h2>
-                    </div>
-                </div>
-                <div className='CenterChart2itemcontent'>
-                    <img src={icon3} alt="Error" className='CenterChart2itemcontentIcon' />
-                    <div className='CenterChart2itemcontentText' >
-                        <h2 className='CenterChart2itemcontentText1'>剩余时间</h2>
-                        <h2 className='CenterChart2itemcontentText2'> 20h</h2>
-                    </div>
-                </div>
-            </div>
-
-
-        </div >
-    );
-}
-
-export default Chart2;

src/components/CenterTopData/substitutionCharts/Chart2.less

@@ -1,53 +0,0 @@
-.CenterChart2itemDetailBorder {
-  width: 440px;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: start;
-
-  .CenterChart2itemcontentOUT {
-    width: 100%;
-    height: 50%;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-
-    .CenterChart2itemcontent {
-      width: 224px;
-      height: 95%;
-      background: url(../../../assets/CenterChart2ItemBg.png);
-      background-repeat: no-repeat;
-      display: flex;
-      flex-direction: row;
-      justify-content: left;
-      margin-top: 3%;
-      margin-left: 2%;
-
-      .CenterChart2itemcontentIcon {
-        margin-top: 2%;
-        width: 48px;
-        height: 48px;
-        margin-left: 5%;
-      }
-
-      .CenterChart2itemcontentText {
-        width: 50%;
-        height: 70%;
-        margin-left: -2%;
-
-        .CenterChart2itemcontentText1 {
-          color: rgba(224, 222, 222, 0.8);
-          font-size: 15px;
-          margin-top: 10%;
-        }
-
-        .CenterChart2itemcontentText2 {
-          color: rgb(255, 255, 255);
-          font-size: 34px;
-          margin-top: -10%;
-          margin-left: -3%;
-        }
-      }
-    }
-  }
-}

src/components/Head/index.less

@@ -4,7 +4,6 @@
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  background: #17b2747a;
 
   .TopSideRight {
     margin-top: 40px;

src/pages/global.less

@@ -2,10 +2,22 @@
   display: flex;
 }
 
+.flex-col {
+  flex-direction: column;
+}
+
 .justify-between {
   justify-content: space-between;
 }
 
+.justify-start {
+  justify-content: start;
+}
+
+.justify-start {
+  justify-content: center;
+}
+
 .w-full {
   width: 100%;
 }
@@ -14,3 +26,6 @@
   height: 100%;
 }
 
+.h-half {
+  height: 50%;
+}