update kiln

src/components/LeftBar/Kiln.jsx

@@ -27,6 +27,17 @@ var Number = 1
 
 export default function Kiln() {
 
+    const [infos, setInfos] = useState([
+        { label: '窑炉压力', value: '29Pa' },
+        { label: '循环水温度', value: '59℃' },
+        { label: '压力流量', value: '29Pa' },
+        { label: '混合料温度', value: '49℃' },
+        { label: '窑温', value: '59℃' },
+        { label: '压缩器压力', value: '293Pa' },
+        { label: '水分', value: '12%' },
+        { label: '助燃风', value: '122' },
+    ])
+
     useEffect(() => {
         setInterval(() => {
             Number = Number + 1
@@ -43,11 +54,20 @@ export default function Kiln() {
 
     return (
         <Container title='窑炉信息' icon='kiln' className={cls.leftBar__top}>
-            <div className='LeftChart1ItemBorder'>
+            <div className="leftBar__top__content">
+                {
+                    infos.map(item =>
+                        <div className={cls.info__item}>{item.label}: {item.value}</div>
+                    )
+                }
+            </div>
+
+
+            {/* <div className='LeftChart1ItemBorder'>
                 <div className='LeftChart1ItemRow'>
-                    <div className='LeftChart1ItemRowDetail'>
-                        {/* <img src={Icon1} alt="" /> */}
-                        <h2 className='LeftChart1ItemRowDetailTxt'>水泵水管</h2>
+                    <div className='LeftChart1ItemRowDetail'> */}
+            {/* <img src={Icon1} alt="" /> */}
+            {/* <h2 className='LeftChart1ItemRowDetailTxt'>水泵水管</h2>
                     </div>
                     <Item data={num == 1 ? Data1 : Data2} />
                 </div>
@@ -60,7 +80,7 @@ export default function Kiln() {
                     <Item data={num == 1 ? Data1 : Data2} />
                 </div>
                 <div className='LeftChart1ItemRow'></div>
-            </div>
+            </div> */}
         </Container>
 
     )

src/components/LeftBar/kiln.module.less

@@ -1,10 +1,20 @@
 .leftBar__top {
   width: 625px;
   height: 305px;
-  background: url('../../assets/ItemBg.png');
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
+  background: url('../../assets/ItemBg.png'), #938f0034;
+
+  .leftBar__top__content {
+    flex: 1;
+    height: 1px;
+    background: #9039;
+    display: flex;
+    flex-wrap: wrap;
+
+    .info__item {
+      background: red;
+    }
+
+  }
 
   .LeftChart1ItemitemBorder {
     margin-top: 24px;